carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
1 lines • 5.06 kB
Source Map (JSON)
{"version":3,"sources":["components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAS/E;;;;GAIG;AACH,cACM,UAAW,SAAQ,eAAiC;IAExD,SAAS,CAAC,aAAa,EAAG,gBAAgB,CAAC;IAE3C;;OAEG;IACH,SAAS,CAAC,aAAa;IAgBvB,eAAe,CAAC,KAAK,EAAE,KAAK;IAQ5B;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,gBAAgB;IAIhB,MAAM;IAyBN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,UAAU,CAAC","file":"checkbox.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport ifNonNull from '../../globals/directives/if-non-null';\nimport FocusMixin from '../../globals/mixins/focus';\nimport FormMixin from '../../globals/mixins/form';\nimport styles from './checkbox.scss';\n\nconst { prefix } = settings;\n\n/**\n * Check box.\n * @element bx-checkbox\n * @fires bx-checkbox-changed - The custom event fired after this changebox changes its checked state.\n */\n@customElement(`${prefix}-checkbox`)\nclass BXCheckbox extends FocusMixin(FormMixin(LitElement)) {\n @query('input')\n protected _checkboxNode!: HTMLInputElement;\n\n /**\n * Handles `click` event on the `<input>` in the shadow DOM.\n */\n protected _handleChange() {\n const { checked, indeterminate } = this._checkboxNode;\n this.checked = checked;\n this.indeterminate = indeterminate;\n const { eventChange } = this.constructor as typeof BXCheckbox;\n this.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n indeterminate,\n },\n })\n );\n }\n\n _handleFormdata(event: Event) {\n const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n const { checked, disabled, name, value = 'on' } = this;\n if (!disabled && checked) {\n formData.append(name, value);\n }\n }\n\n /**\n * `true` if the check box should be checked.\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * `true` if the check box should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * `true` if the label should be hidden.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n hideLabel = false;\n\n /**\n * `true` if the check box should show its UI of the indeterminate state.\n */\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n /**\n * The label text.\n */\n @property({ attribute: 'label-text' })\n labelText = '';\n\n /**\n * The form name.\n */\n @property()\n name!: string;\n\n /**\n * The value.\n */\n @property()\n value!: string;\n\n createRenderRoot() {\n return this.attachShadow({ mode: 'open', delegatesFocus: true });\n }\n\n render() {\n const { checked, disabled, hideLabel, indeterminate, labelText, name, value, _handleChange: handleChange } = this;\n const labelClasses = classMap({\n [`${prefix}--checkbox-label`]: true,\n [`${prefix}--visually-hidden`]: hideLabel,\n });\n return html`\n <input\n id=\"checkbox\"\n type=\"checkbox\"\n class=\"${`${prefix}--checkbox`}\"\n aria-checked=\"${indeterminate ? 'mixed' : String(Boolean(checked))}\"\n .checked=\"${checked}\"\n ?disabled=\"${disabled}\"\n .indeterminate=\"${indeterminate}\"\n name=\"${ifNonNull(name)}\"\n value=\"${ifNonNull(value)}\"\n @change=\"${handleChange}\"\n />\n <label for=\"checkbox\" class=\"${labelClasses}\">\n <span class=\"${prefix}--checkbox-label-text\"><slot>${labelText}</slot></span>\n </label>\n `;\n }\n\n /**\n * The name of the custom event fired after this changebox changes its checked state.\n */\n static get eventChange() {\n return `${prefix}-checkbox-changed`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXCheckbox;\n"]}