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 • 6.42 kB
Source Map (JSON)
{"version":3,"sources":["components/radio-button/radio-button-group.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAKxE,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAsB,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAK5E;;GAEG;AACH,oBAAY,wBAAwB;IAClC;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,QAAQ,aAAa;CACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED;;;;GAIG;AACH,cACM,kBAAmB,SAAQ,uBAAqB;IACpD;;OAEG;IACH,OAAO,CAAC,wBAAwB,CAAuB;IAEvD;;OAEG;IACH,OAAO,CAAC,6BAA6B;IAmBrC,eAAe,CAAC,KAAK,EAAE,KAAK;IAQ5B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,aAAa,8BAAqC;IAElD;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,WAAW,2BAAuC;IAElD;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,iBAAiB;IAUjB,oBAAoB;IAOpB,OAAO,CAAC,iBAAiB,KAAA;IAmBzB,MAAM;IAMN;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,sBAAsB,WAEhC;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,kBAAkB,CAAC","file":"radio-button-group.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 { html, property, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport FormMixin from '../../globals/mixins/form';\nimport { find, forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport BXRadioButton, { RADIO_BUTTON_LABEL_POSITION } from './radio-button';\nimport styles from './radio-button.scss';\n\nconst { prefix } = settings;\n\n/**\n * How to lay out radio buttons.\n */\nexport enum RADIO_BUTTON_ORIENTATION {\n /**\n * Laying out radio buttons horizontally.\n */\n HORIZONTAL = 'horizontal',\n\n /**\n * Laying out radio buttons vertically.\n */\n VERTICAL = 'vertical',\n}\n\n/**\n * Radio button group.\n * @element bx-radio-button-group\n * @fires bx-radio-button-group-changed - The custom event fired after this radio button group changes its selected item.\n */\n@customElement(`${prefix}-radio-button-group`)\nclass BXRadioButtonGroup extends FormMixin(LitElement) {\n /**\n * The handle for the listener of `${prefix}-radio-button-changed` event.\n */\n private _hAfterChangeRadioButton: Handle | null = null;\n\n /**\n * Handles user-initiated change in selected radio button.\n */\n private _handleAfterChangeRadioButton() {\n const { selectorRadioButton } = this.constructor as typeof BXRadioButtonGroup;\n const selected = find(this.querySelectorAll(selectorRadioButton), elem => (elem as BXRadioButton).checked);\n const oldValue = this.value;\n this.value = selected && selected.value;\n if (oldValue !== this.value) {\n const { eventChange } = this.constructor as typeof BXRadioButtonGroup;\n this.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n },\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 { disabled, name, value } = this;\n if (!disabled && typeof name !== 'undefined' && typeof value !== 'undefined') {\n formData.append(name, value);\n }\n }\n\n /**\n * `true` if the check box should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The label position.\n */\n @property({ reflect: true, attribute: 'label-position' })\n labelPosition = RADIO_BUTTON_LABEL_POSITION.RIGHT;\n\n /**\n * The `name` attribute for the `<input>` for selection.\n */\n @property()\n name!: string;\n\n /**\n * The orientation to lay out radio buttons.\n */\n @property({ reflect: true })\n orientation = RADIO_BUTTON_ORIENTATION.HORIZONTAL;\n\n /**\n * The `value` attribute for the `<input>` for selection.\n */\n @property()\n value!: string;\n\n connectedCallback() {\n super.connectedCallback();\n // Manually hooks the event listeners on the host element to make the event names configurable\n this._hAfterChangeRadioButton = on(\n this,\n (this.constructor as typeof BXRadioButtonGroup).eventChangeRadioButton,\n this._handleAfterChangeRadioButton as EventListener\n );\n }\n\n disconnectedCallback() {\n if (this._hAfterChangeRadioButton) {\n this._hAfterChangeRadioButton = this._hAfterChangeRadioButton.release();\n }\n super.disconnectedCallback();\n }\n\n updated(changedProperties) {\n const { selectorRadioButton } = this.constructor as typeof BXRadioButtonGroup;\n ['disabled', 'labelPosition', 'orientation', 'name'].forEach(name => {\n if (changedProperties.has(name)) {\n const { [name as keyof BXRadioButtonGroup]: value } = this;\n // Propagate the property to descendants until `:host-context()` gets supported in all major browsers\n forEach(this.querySelectorAll(selectorRadioButton), elem => {\n (elem as BXRadioButton)[name] = value;\n });\n }\n });\n if (changedProperties.has('value')) {\n const { value } = this;\n forEach(this.querySelectorAll(selectorRadioButton), elem => {\n (elem as BXRadioButton).checked = value === (elem as BXRadioButton).value;\n });\n }\n }\n\n render() {\n return html`\n <slot></slot>\n `;\n }\n\n /**\n * A selector that will return the radio buttons.\n */\n static get selectorRadioButton() {\n return `${prefix}-radio-button`;\n }\n\n /**\n * The name of the custom event fired after this radio button group changes its selected item.\n */\n static get eventChange() {\n return `${prefix}-radio-button-group-changed`;\n }\n\n /**\n * The name of the custom event fired after a radio button changes its checked state.\n */\n static get eventChangeRadioButton() {\n return `${prefix}-radio-button-changed`;\n }\n\n static styles = styles;\n}\n\nexport default BXRadioButtonGroup;\n"]}