{"version":3,"file":"Checkbox-DtT7uGyX.js","sources":["../../Client/legacy/Components/FormGroups/Checkbox.tsx"],"sourcesContent":["import { Value } from '@webkit/index';\r\nimport * as React from 'react';\r\nimport Skeleton from 'react-loading-skeleton';\r\nimport { Checkbox } from '../../FormFields';\r\nimport { IFormGroupProps } from './Base';\r\n\r\nexport interface ICheckboxFormGroupProps extends IFormGroupProps {\r\n /** The human-readable label shown to the user for the form group. */\r\n value: Value<boolean>;\r\n\r\n /** The change handler for the checkbox. */\r\n onChange: (checked: boolean) => void;\r\n\r\n /** An optional CSS class for the checkbox input element.. */\r\n checkboxClassName?: string;\r\n\r\n /** An optional bolded header to add to the checkbox label for emphasis. Comes before the rest of the label. */\r\n boldHeader?: string | null;\r\n\r\n /** An optional id for the bold header. */\r\n boldHeaderId?: string;\r\n\r\n /** Optional flag to disable the checkbox */\r\n disabled?: boolean;\r\n\r\n /** Optional. A smaller label that sits underneath the regular label. */\r\n sublabel?: string;\r\n\r\n /** Optional. Specifying a number allows the checkbox to be a tab stop. Use a value of 0 to put it in the natural order of other inputs on the page. */\r\n tabIndex?: number;\r\n}\r\n\r\nexport class CheckboxFormGroup extends React.Component<ICheckboxFormGroupProps, {}> {\r\n render() {\r\n const value = this.props.value.content;\r\n const disabledClass = this.props.disabled ? ' disabled' : '';\r\n\r\n const onClick = () => {\r\n if (this.props.disabled) {\r\n return;\r\n }\r\n\r\n this.props.onChange(!value);\r\n };\r\n\r\n return (\r\n <div\r\n className={`form-group-cp form-group-checkbox-wrapper-cp ${this.props.className || ''}` + disabledClass}\r\n onClick={onClick}\r\n >\r\n {this.props.loading && (\r\n <div className='form-group-checkbox-loader-cp'>\r\n <Skeleton />\r\n </div>\r\n )}\r\n\r\n <Checkbox\r\n checked={value}\r\n className={`form-group-checkbox-cp ${this.props.checkboxClassName || ''} ${\r\n !this.props.value.valid ? 'form-group-checkbox-error-cp' : ''\r\n }`}\r\n id={this.props.id}\r\n tabIndex={this.props.tabIndex}\r\n onClick={onClick}\r\n />\r\n\r\n <label\r\n className={`form-group-label-cp ${this.props.labelClassName || ''} ${\r\n !this.props.value.valid ? 'form-group-label-error-cp' : ''\r\n } ${value ? 'active-checkbox-label' : ''}`}\r\n >\r\n {this.props.boldHeader ? (\r\n <span\r\n className='checkbox-bold-header-cp'\r\n id={this.props.boldHeaderId ? this.props.boldHeaderId : ''}\r\n >\r\n {this.props.boldHeader}\r\n </span>\r\n ) : null}\r\n {this.props.label}\r\n </label>\r\n\r\n {this.props.sublabel && <label className='checkbox-sublabel-cp'>{this.props.sublabel}</label>}\r\n\r\n <div className='clearfix'></div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":["CheckboxFormGroup","React.Component","value","disabledClass","onClick","jsxs","jsx","Skeleton","Checkbox"],"mappings":"mGAgCa,MAAAA,UAA0BC,EAAAA,SAA6C,CAChF,QAAS,CACC,MAAAC,EAAQ,KAAK,MAAM,MAAM,QACzBC,EAAgB,KAAK,MAAM,SAAW,YAAc,GAEpDC,EAAU,IAAM,CACd,KAAK,MAAM,UAIV,KAAA,MAAM,SAAS,CAACF,CAAK,CAC9B,EAGI,OAAAG,EAAA,KAAC,MAAA,CACG,UAAW,gDAAgD,KAAK,MAAM,WAAa,EAAE,GAAKF,EAC1F,QAAAC,EAEC,SAAA,CAAK,KAAA,MAAM,SACPE,EAAA,IAAA,MAAA,CAAI,UAAU,gCACX,SAAAA,EAAA,IAACC,IAAS,CACd,CAAA,EAGJD,EAAA,IAACE,EAAA,CACG,QAASN,EACT,UAAW,0BAA0B,KAAK,MAAM,mBAAqB,EAAE,IAClE,KAAK,MAAM,MAAM,MAAyC,GAAjC,8BAC9B,GACA,GAAI,KAAK,MAAM,GACf,SAAU,KAAK,MAAM,SACrB,QAAAE,CAAA,CACJ,EAEAC,EAAA,KAAC,QAAA,CACG,UAAW,uBAAuB,KAAK,MAAM,gBAAkB,EAAE,IAC5D,KAAK,MAAM,MAAM,MAAsC,GAA9B,2BAC9B,IAAIH,EAAQ,wBAA0B,EAAE,GAEvC,SAAA,CAAA,KAAK,MAAM,WACRI,EAAA,IAAC,OAAA,CACG,UAAU,0BACV,GAAI,KAAK,MAAM,aAAe,KAAK,MAAM,aAAe,GAEvD,cAAK,MAAM,UAAA,CAAA,EAEhB,KACH,KAAK,MAAM,KAAA,CAAA,CAChB,EAEC,KAAK,MAAM,UAAYA,EAAAA,IAAC,SAAM,UAAU,uBAAwB,SAAK,KAAA,MAAM,QAAS,CAAA,EAErFA,EAAAA,IAAC,MAAI,CAAA,UAAU,UAAW,CAAA,CAAA,CAAA,CAC9B,CAAA,CAGZ"}