@govtechsg/sgds-web-component 3.23.0-rc.1 → 3.23.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base/select-element.d.ts +4 -0
- package/base/select-element.js +6 -0
- package/base/select-element.js.map +1 -1
- package/components/Checkbox/index.umd.min.js +3 -3
- package/components/Checkbox/index.umd.min.js.map +1 -1
- package/components/Checkbox/sgds-checkbox-group.d.ts +5 -0
- package/components/Checkbox/sgds-checkbox-group.js +10 -0
- package/components/Checkbox/sgds-checkbox-group.js.map +1 -1
- package/components/Checkbox/sgds-checkbox.d.ts +5 -1
- package/components/Checkbox/sgds-checkbox.js +10 -1
- package/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/components/ComboBox/index.umd.min.js +7 -6
- package/components/ComboBox/index.umd.min.js.map +1 -1
- package/components/ComboBox/sgds-combo-box.d.ts +11 -0
- package/components/ComboBox/sgds-combo-box.js +34 -0
- package/components/ComboBox/sgds-combo-box.js.map +1 -1
- package/components/Datepicker/index.umd.min.js +1 -1
- package/components/Datepicker/index.umd.min.js.map +1 -1
- package/components/Drawer/index.umd.min.js +10 -5
- package/components/Drawer/index.umd.min.js.map +1 -1
- package/components/Drawer/sgds-drawer.js +5 -4
- package/components/Drawer/sgds-drawer.js.map +1 -1
- package/components/FileUpload/index.umd.min.js +1 -1
- package/components/FileUpload/index.umd.min.js.map +1 -1
- package/components/Input/index.umd.min.js +1 -1
- package/components/Input/index.umd.min.js.map +1 -1
- package/components/Mainnav/index.umd.min.js +3 -1
- package/components/Mainnav/index.umd.min.js.map +1 -1
- package/components/Mainnav/sgds-mainnav-dropdown.d.ts +4 -0
- package/components/Mainnav/sgds-mainnav-dropdown.js +6 -0
- package/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/components/QuantityToggle/index.umd.min.js +1 -1
- package/components/QuantityToggle/index.umd.min.js.map +1 -1
- package/components/Radio/index.umd.min.js +2 -2
- package/components/Radio/index.umd.min.js.map +1 -1
- package/components/Radio/sgds-radio-group.d.ts +4 -0
- package/components/Radio/sgds-radio-group.js +9 -0
- package/components/Radio/sgds-radio-group.js.map +1 -1
- package/components/Select/index.umd.min.js +3 -3
- package/components/Select/index.umd.min.js.map +1 -1
- package/components/Select/sgds-select.d.ts +4 -0
- package/components/Select/sgds-select.js +10 -1
- package/components/Select/sgds-select.js.map +1 -1
- package/components/Textarea/index.umd.min.js +1 -1
- package/components/Textarea/index.umd.min.js.map +1 -1
- package/components/index.umd.min.js +80 -77
- package/components/index.umd.min.js.map +1 -1
- package/css/fouc.css +2 -2
- package/custom-elements.json +1249 -968
- package/index.umd.min.js +83 -80
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/select-element.cjs.js +6 -0
- package/react/base/select-element.cjs.js.map +1 -1
- package/react/base/select-element.js +6 -0
- package/react/base/select-element.js.map +1 -1
- package/react/checkbox/index.cjs.js +3 -1
- package/react/checkbox/index.cjs.js.map +1 -1
- package/react/checkbox/index.js +3 -1
- package/react/checkbox/index.js.map +1 -1
- package/react/checkbox-group/index.cjs.js +3 -1
- package/react/checkbox-group/index.cjs.js.map +1 -1
- package/react/checkbox-group/index.js +3 -1
- package/react/checkbox-group/index.js.map +1 -1
- package/react/combo-box/index.cjs.js +1 -0
- package/react/combo-box/index.cjs.js.map +1 -1
- package/react/combo-box/index.js +1 -0
- package/react/combo-box/index.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox-group.cjs.js +10 -0
- package/react/components/Checkbox/sgds-checkbox-group.cjs.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox-group.js +10 -0
- package/react/components/Checkbox/sgds-checkbox-group.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.cjs.js +10 -1
- package/react/components/Checkbox/sgds-checkbox.cjs.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.js +10 -1
- package/react/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/react/components/ComboBox/sgds-combo-box.cjs.js +34 -0
- package/react/components/ComboBox/sgds-combo-box.cjs.js.map +1 -1
- package/react/components/ComboBox/sgds-combo-box.js +34 -0
- package/react/components/ComboBox/sgds-combo-box.js.map +1 -1
- package/react/components/Drawer/sgds-drawer.cjs.js +4 -3
- package/react/components/Drawer/sgds-drawer.cjs.js.map +1 -1
- package/react/components/Drawer/sgds-drawer.js +5 -4
- package/react/components/Drawer/sgds-drawer.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js +6 -0
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.js +6 -0
- package/react/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/react/components/Radio/sgds-radio-group.cjs.js +9 -0
- package/react/components/Radio/sgds-radio-group.cjs.js.map +1 -1
- package/react/components/Radio/sgds-radio-group.js +9 -0
- package/react/components/Radio/sgds-radio-group.js.map +1 -1
- package/react/components/Select/sgds-select.cjs.js +9 -0
- package/react/components/Select/sgds-select.cjs.js.map +1 -1
- package/react/components/Select/sgds-select.js +10 -1
- package/react/components/Select/sgds-select.js.map +1 -1
- package/react/index.cjs.js +8 -8
- package/react/index.d.ts +2 -2
- package/react/index.js +2 -2
- package/react/radio-group/index.cjs.js +3 -1
- package/react/radio-group/index.cjs.js.map +1 -1
- package/react/radio-group/index.js +3 -1
- package/react/radio-group/index.js.map +1 -1
- package/react/select/index.cjs.js +2 -0
- package/react/select/index.cjs.js.map +1 -1
- package/react/select/index.js +2 -0
- package/react/select/index.js.map +1 -1
- package/react/utils/validatorMixin.cjs.js +9 -11
- package/react/utils/validatorMixin.cjs.js.map +1 -1
- package/react/utils/validatorMixin.js +9 -11
- package/react/utils/validatorMixin.js.map +1 -1
- package/types/react.d.ts +48 -21
- package/utils/validatorMixin.js +9 -11
- package/utils/validatorMixin.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-mainnav-dropdown.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { offset } from \"@floating-ui/dom\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\n /** @internal */\n static dependencies = {\n \"sgds-dropdown\": SgdsDropdown,\n \"sgds-dropdown-item\": SgdsDropdownItem,\n \"sgds-icon\": SgdsIcon\n };\n\n @consume({ context: MainnavBreakpointContext, subscribe: true })\n @state()\n private _breakpointReached = true;\n\n @consume({ context: MainnavExpandedContext, subscribe: true })\n @state()\n private expanded: boolean;\n\n /** @internal */\n @query(\".nav-link\") navLink: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n private togglerId: string = genId(\"dropdown\", \"button\");\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean })\n active = false;\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** @internal */\n @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n /** @internal */\n @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n /** @internal */\n get defaultSlotItems(): SgdsDropdownItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsDropdownItem[];\n }\n\n updated() {\n if (this._breakpointReached) {\n this._copyTextToMenu();\n this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n }\n }\n\n private _handleSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.add(\"mainnav-dropdown-link\");\n\n const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n link.tabIndex = -1;\n if (dropdownItem.classList.contains(\"disabled\")) {\n link.setAttribute(\"href\", \"javascript:void(0)\");\n link.setAttribute(\"tabindex\", \"-1\");\n } else {\n link.addEventListener(\"click\", (e: Event) => {\n const target = e.target as HTMLElement;\n const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n mainnav.hide();\n });\n }\n });\n }\n\n private _handleDesktopSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.remove(\"mainnav-dropdown-link\");\n\n const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n flatten: true\n });\n slottedItem.forEach(item => {\n if (dropdownItem.classList.contains(\"disabled\")) {\n item.setAttribute(\"href\", \"javascript:void(0)\");\n item.setAttribute(\"tabindex\", \"-1\");\n }\n });\n });\n }\n\n private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n if (!this._breakpointReached) {\n return;\n }\n\n const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n const items = [this.menuHeaderButton, ...slottedItems];\n const itemLength = items.length;\n if (itemLength === 0) {\n return;\n }\n\n const firstItem = items[0];\n const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n let activeElement = document.activeElement as HTMLElement;\n if (activeElement === this) {\n activeElement = this.shadowRoot.activeElement as HTMLElement;\n }\n\n switch (e.key) {\n case \"Tab\": {\n if (e.shiftKey) {\n if (activeElement === firstItem) {\n e.preventDefault();\n setTimeout(() => {\n lastItem.focus();\n }, 0);\n }\n } else {\n const activeShadowElement = activeElement.shadowRoot\n ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n : null;\n if (activeShadowElement && activeShadowElement === lastItem) {\n e.preventDefault();\n firstItem.focus();\n }\n }\n break;\n }\n default:\n break;\n }\n }\n\n private _copyTextToMenu() {\n this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;\n }\n\n private _hideDropdownMenuItems() {\n this.dropdownItems.style.display = \"none\";\n this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n }\n\n private _resetDropdownMenu(): Promise<void> {\n const navbarBody = this._getNavbarBody();\n if (!navbarBody) return Promise.resolve();\n\n return new Promise(resolve => {\n const onEnd = (event: TransitionEvent) => {\n if (event.propertyName === \"transform\") {\n navbarBody.removeEventListener(\"transitionend\", onEnd);\n resolve();\n }\n };\n\n const hasTransition = getComputedStyle(navbarBody).transitionProperty.includes(\"transform\");\n\n if (hasTransition) {\n navbarBody.addEventListener(\"transitionend\", onEnd);\n navbarBody.style.removeProperty(\"transform\");\n } else {\n navbarBody.style.removeProperty(\"transform\");\n resolve();\n }\n });\n }\n\n private _handleKeyboardOpen(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n if (event.key === ENTER || event.key === SPACE) {\n event.preventDefault();\n this._openMenu();\n }\n }\n\n private _getNavbarBody() {\n const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n if (!mainNav?.shadowRoot) {\n console.warn(\"sgds-mainnav or its shadowRoot not found\");\n return;\n }\n\n const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n if (!navbarBody) {\n console.warn(\".navbar-body not found in sgds-mainnav\");\n return;\n }\n\n return navbarBody;\n }\n\n private _openMenu() {\n const navbarBody = this._getNavbarBody();\n navbarBody.style.transform = \"translateX(-100%)\";\n this.dropdownItems.style.removeProperty(\"display\");\n this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n setTimeout(() => {\n this.menuHeaderButton.focus();\n }, 50);\n }\n\n private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n switch (event.key) {\n case TAB: {\n this._handleKeyboardMenuItemsEvent(event);\n break;\n }\n case ENTER:\n case SPACE: {\n event.preventDefault();\n this._closeMenu();\n break;\n }\n default:\n break;\n }\n }\n\n private async _closeMenu() {\n await this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n this.navLink.focus();\n }\n\n render() {\n const mobileView = html`\n <a\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n role=\"button\"\n @click=${this._openMenu}\n @keydown=${this._handleKeyboardOpen}\n >\n <slot name=\"toggler\"></slot>\n <sgds-icon name=\"chevron-right\"></sgds-icon>\n </a>\n <div class=\"dropdown-items\">\n <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n <sgds-icon name=\"chevron-left\"></sgds-icon>\n <span></span>\n </a>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n\n const desktopView = html`<sgds-dropdown\n .floatingOpts=${{\n middleware: [offset(0)]\n }}\n ?disabled=${this.disabled}\n >\n <a\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n id=${this.togglerId}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n role=\"button\"\n slot=\"toggler\"\n >\n <slot name=\"toggler\"></slot>\n <sgds-icon name=\"chevron-down\"></sgds-icon>\n </a>\n <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n </sgds-dropdown>`;\n\n return this._breakpointReached ? mobileView : desktopView;\n }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["SgdsElement","genId","html","classMap","offset","dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle","SgdsDropdown","SgdsDropdownItem","SgdsIcon","__decorate","consume","MainnavBreakpointContext","state","MainnavExpandedContext","query","property","queryAssignedElements"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-mainnav-dropdown.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\n /** @internal */\n static dependencies = {\n \"sgds-dropdown\": SgdsDropdown,\n \"sgds-dropdown-item\": SgdsDropdownItem,\n \"sgds-icon\": SgdsIcon\n };\n\n @consume({ context: MainnavBreakpointContext, subscribe: true })\n @state()\n private _breakpointReached = true;\n\n @consume({ context: MainnavExpandedContext, subscribe: true })\n @state()\n private expanded: boolean;\n\n /** @internal */\n @query(\".nav-link\") navLink: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n private togglerId: string = genId(\"dropdown\", \"button\");\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean })\n active = false;\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Accessible label for the dropdown's toggle button. Forwarded to the button's aria-label attribute.\n */\n @property({ type: String })\n ariaLabel: string;\n\n /** @internal */\n @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n /** @internal */\n @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n /** @internal */\n get defaultSlotItems(): SgdsDropdownItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsDropdownItem[];\n }\n\n updated() {\n if (this._breakpointReached) {\n this._copyTextToMenu();\n this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n }\n }\n\n private _handleSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.add(\"mainnav-dropdown-link\");\n\n const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n link.tabIndex = -1;\n if (dropdownItem.classList.contains(\"disabled\")) {\n link.setAttribute(\"href\", \"javascript:void(0)\");\n link.setAttribute(\"tabindex\", \"-1\");\n } else {\n link.addEventListener(\"click\", (e: Event) => {\n const target = e.target as HTMLElement;\n const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n mainnav.hide();\n });\n }\n });\n }\n\n private _handleDesktopSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.remove(\"mainnav-dropdown-link\");\n\n const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n flatten: true\n });\n slottedItem.forEach(item => {\n if (dropdownItem.classList.contains(\"disabled\")) {\n item.setAttribute(\"href\", \"javascript:void(0)\");\n item.setAttribute(\"tabindex\", \"-1\");\n }\n });\n });\n }\n\n private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n if (!this._breakpointReached) {\n return;\n }\n\n const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n const items = [this.menuHeaderButton, ...slottedItems];\n const itemLength = items.length;\n if (itemLength === 0) {\n return;\n }\n\n const firstItem = items[0];\n const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n let activeElement = document.activeElement as HTMLElement;\n if (activeElement === this) {\n activeElement = this.shadowRoot.activeElement as HTMLElement;\n }\n\n switch (e.key) {\n case \"Tab\": {\n if (e.shiftKey) {\n if (activeElement === firstItem) {\n e.preventDefault();\n setTimeout(() => {\n lastItem.focus();\n }, 0);\n }\n } else {\n const activeShadowElement = activeElement.shadowRoot\n ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n : null;\n if (activeShadowElement && activeShadowElement === lastItem) {\n e.preventDefault();\n firstItem.focus();\n }\n }\n break;\n }\n default:\n break;\n }\n }\n\n private _copyTextToMenu() {\n this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;\n }\n\n private _hideDropdownMenuItems() {\n this.dropdownItems.style.display = \"none\";\n this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n }\n\n private _resetDropdownMenu(): Promise<void> {\n const navbarBody = this._getNavbarBody();\n if (!navbarBody) return Promise.resolve();\n\n return new Promise(resolve => {\n const onEnd = (event: TransitionEvent) => {\n if (event.propertyName === \"transform\") {\n navbarBody.removeEventListener(\"transitionend\", onEnd);\n resolve();\n }\n };\n\n const hasTransition = getComputedStyle(navbarBody).transitionProperty.includes(\"transform\");\n\n if (hasTransition) {\n navbarBody.addEventListener(\"transitionend\", onEnd);\n navbarBody.style.removeProperty(\"transform\");\n } else {\n navbarBody.style.removeProperty(\"transform\");\n resolve();\n }\n });\n }\n\n private _handleKeyboardOpen(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n if (event.key === ENTER || event.key === SPACE) {\n event.preventDefault();\n this._openMenu();\n }\n }\n\n private _getNavbarBody() {\n const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n if (!mainNav?.shadowRoot) {\n console.warn(\"sgds-mainnav or its shadowRoot not found\");\n return;\n }\n\n const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n if (!navbarBody) {\n console.warn(\".navbar-body not found in sgds-mainnav\");\n return;\n }\n\n return navbarBody;\n }\n\n private _openMenu() {\n const navbarBody = this._getNavbarBody();\n navbarBody.style.transform = \"translateX(-100%)\";\n this.dropdownItems.style.removeProperty(\"display\");\n this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n setTimeout(() => {\n this.menuHeaderButton.focus();\n }, 50);\n }\n\n private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n switch (event.key) {\n case TAB: {\n this._handleKeyboardMenuItemsEvent(event);\n break;\n }\n case ENTER:\n case SPACE: {\n event.preventDefault();\n this._closeMenu();\n break;\n }\n default:\n break;\n }\n }\n\n private async _closeMenu() {\n await this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n this.navLink.focus();\n }\n\n render() {\n const mobileView = html`\n <a\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel)}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n role=\"button\"\n @click=${this._openMenu}\n @keydown=${this._handleKeyboardOpen}\n >\n <slot name=\"toggler\"></slot>\n <sgds-icon name=\"chevron-right\"></sgds-icon>\n </a>\n <div class=\"dropdown-items\">\n <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n <sgds-icon name=\"chevron-left\"></sgds-icon>\n <span></span>\n </a>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n\n const desktopView = html`<sgds-dropdown\n .floatingOpts=${{\n middleware: [offset(0)]\n }}\n ?disabled=${this.disabled}\n >\n <a\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel)}\n id=${this.togglerId}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n role=\"button\"\n slot=\"toggler\"\n >\n <slot name=\"toggler\"></slot>\n <sgds-icon name=\"chevron-down\"></sgds-icon>\n </a>\n <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n </sgds-dropdown>`;\n\n return this._breakpointReached ? mobileView : desktopView;\n }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["SgdsElement","genId","html","classMap","ifDefined","offset","dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle","SgdsDropdown","SgdsDropdownItem","SgdsIcon","__decorate","consume","MainnavBreakpointContext","state","MainnavExpandedContext","query","property","queryAssignedElements"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ import { html } from 'lit';
|
|
|
4
4
|
import { consume } from '@lit/context';
|
|
5
5
|
import { state, query, property, queryAssignedElements } from 'lit/decorators.js';
|
|
6
6
|
import { classMap } from 'lit/directives/class-map.js';
|
|
7
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
7
8
|
import { offset } from '@floating-ui/dom';
|
|
8
9
|
import genId from '../../utils/generateId.js';
|
|
9
10
|
import css_248z from '../Dropdown/dropdown.js';
|
|
@@ -209,6 +210,7 @@ class SgdsMainnavDropdown extends SgdsElement {
|
|
|
209
210
|
disabled: this.disabled
|
|
210
211
|
})}"
|
|
211
212
|
aria-disabled=${this.disabled ? "true" : "false"}
|
|
213
|
+
aria-label=${ifDefined(this.ariaLabel)}
|
|
212
214
|
tabindex=${this.disabled ? "-1" : "0"}
|
|
213
215
|
role="button"
|
|
214
216
|
@click=${this._openMenu}
|
|
@@ -238,6 +240,7 @@ class SgdsMainnavDropdown extends SgdsElement {
|
|
|
238
240
|
disabled: this.disabled
|
|
239
241
|
})}"
|
|
240
242
|
aria-disabled=${this.disabled ? "true" : "false"}
|
|
243
|
+
aria-label=${ifDefined(this.ariaLabel)}
|
|
241
244
|
id=${this.togglerId}
|
|
242
245
|
tabindex=${this.disabled ? "-1" : "0"}
|
|
243
246
|
role="button"
|
|
@@ -284,6 +287,9 @@ __decorate([
|
|
|
284
287
|
__decorate([
|
|
285
288
|
property({ type: Boolean, reflect: true })
|
|
286
289
|
], SgdsMainnavDropdown.prototype, "disabled", void 0);
|
|
290
|
+
__decorate([
|
|
291
|
+
property({ type: String })
|
|
292
|
+
], SgdsMainnavDropdown.prototype, "ariaLabel", void 0);
|
|
287
293
|
__decorate([
|
|
288
294
|
queryAssignedElements({ slot: "toggler" })
|
|
289
295
|
], SgdsMainnavDropdown.prototype, "togglerNodes", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-mainnav-dropdown.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { offset } from \"@floating-ui/dom\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\n /** @internal */\n static dependencies = {\n \"sgds-dropdown\": SgdsDropdown,\n \"sgds-dropdown-item\": SgdsDropdownItem,\n \"sgds-icon\": SgdsIcon\n };\n\n @consume({ context: MainnavBreakpointContext, subscribe: true })\n @state()\n private _breakpointReached = true;\n\n @consume({ context: MainnavExpandedContext, subscribe: true })\n @state()\n private expanded: boolean;\n\n /** @internal */\n @query(\".nav-link\") navLink: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n private togglerId: string = genId(\"dropdown\", \"button\");\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean })\n active = false;\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** @internal */\n @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n /** @internal */\n @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n /** @internal */\n get defaultSlotItems(): SgdsDropdownItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsDropdownItem[];\n }\n\n updated() {\n if (this._breakpointReached) {\n this._copyTextToMenu();\n this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n }\n }\n\n private _handleSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.add(\"mainnav-dropdown-link\");\n\n const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n link.tabIndex = -1;\n if (dropdownItem.classList.contains(\"disabled\")) {\n link.setAttribute(\"href\", \"javascript:void(0)\");\n link.setAttribute(\"tabindex\", \"-1\");\n } else {\n link.addEventListener(\"click\", (e: Event) => {\n const target = e.target as HTMLElement;\n const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n mainnav.hide();\n });\n }\n });\n }\n\n private _handleDesktopSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.remove(\"mainnav-dropdown-link\");\n\n const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n flatten: true\n });\n slottedItem.forEach(item => {\n if (dropdownItem.classList.contains(\"disabled\")) {\n item.setAttribute(\"href\", \"javascript:void(0)\");\n item.setAttribute(\"tabindex\", \"-1\");\n }\n });\n });\n }\n\n private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n if (!this._breakpointReached) {\n return;\n }\n\n const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n const items = [this.menuHeaderButton, ...slottedItems];\n const itemLength = items.length;\n if (itemLength === 0) {\n return;\n }\n\n const firstItem = items[0];\n const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n let activeElement = document.activeElement as HTMLElement;\n if (activeElement === this) {\n activeElement = this.shadowRoot.activeElement as HTMLElement;\n }\n\n switch (e.key) {\n case \"Tab\": {\n if (e.shiftKey) {\n if (activeElement === firstItem) {\n e.preventDefault();\n setTimeout(() => {\n lastItem.focus();\n }, 0);\n }\n } else {\n const activeShadowElement = activeElement.shadowRoot\n ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n : null;\n if (activeShadowElement && activeShadowElement === lastItem) {\n e.preventDefault();\n firstItem.focus();\n }\n }\n break;\n }\n default:\n break;\n }\n }\n\n private _copyTextToMenu() {\n this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;\n }\n\n private _hideDropdownMenuItems() {\n this.dropdownItems.style.display = \"none\";\n this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n }\n\n private _resetDropdownMenu(): Promise<void> {\n const navbarBody = this._getNavbarBody();\n if (!navbarBody) return Promise.resolve();\n\n return new Promise(resolve => {\n const onEnd = (event: TransitionEvent) => {\n if (event.propertyName === \"transform\") {\n navbarBody.removeEventListener(\"transitionend\", onEnd);\n resolve();\n }\n };\n\n const hasTransition = getComputedStyle(navbarBody).transitionProperty.includes(\"transform\");\n\n if (hasTransition) {\n navbarBody.addEventListener(\"transitionend\", onEnd);\n navbarBody.style.removeProperty(\"transform\");\n } else {\n navbarBody.style.removeProperty(\"transform\");\n resolve();\n }\n });\n }\n\n private _handleKeyboardOpen(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n if (event.key === ENTER || event.key === SPACE) {\n event.preventDefault();\n this._openMenu();\n }\n }\n\n private _getNavbarBody() {\n const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n if (!mainNav?.shadowRoot) {\n console.warn(\"sgds-mainnav or its shadowRoot not found\");\n return;\n }\n\n const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n if (!navbarBody) {\n console.warn(\".navbar-body not found in sgds-mainnav\");\n return;\n }\n\n return navbarBody;\n }\n\n private _openMenu() {\n const navbarBody = this._getNavbarBody();\n navbarBody.style.transform = \"translateX(-100%)\";\n this.dropdownItems.style.removeProperty(\"display\");\n this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n setTimeout(() => {\n this.menuHeaderButton.focus();\n }, 50);\n }\n\n private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n switch (event.key) {\n case TAB: {\n this._handleKeyboardMenuItemsEvent(event);\n break;\n }\n case ENTER:\n case SPACE: {\n event.preventDefault();\n this._closeMenu();\n break;\n }\n default:\n break;\n }\n }\n\n private async _closeMenu() {\n await this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n this.navLink.focus();\n }\n\n render() {\n const mobileView = html`\n <a\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n role=\"button\"\n @click=${this._openMenu}\n @keydown=${this._handleKeyboardOpen}\n >\n <slot name=\"toggler\"></slot>\n <sgds-icon name=\"chevron-right\"></sgds-icon>\n </a>\n <div class=\"dropdown-items\">\n <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n <sgds-icon name=\"chevron-left\"></sgds-icon>\n <span></span>\n </a>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n\n const desktopView = html`<sgds-dropdown\n .floatingOpts=${{\n middleware: [offset(0)]\n }}\n ?disabled=${this.disabled}\n >\n <a\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n id=${this.togglerId}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n role=\"button\"\n slot=\"toggler\"\n >\n <slot name=\"toggler\"></slot>\n <sgds-icon name=\"chevron-down\"></sgds-icon>\n </a>\n <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n </sgds-dropdown>`;\n\n return this._breakpointReached ? mobileView : desktopView;\n }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-mainnav-dropdown.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\n /** @internal */\n static dependencies = {\n \"sgds-dropdown\": SgdsDropdown,\n \"sgds-dropdown-item\": SgdsDropdownItem,\n \"sgds-icon\": SgdsIcon\n };\n\n @consume({ context: MainnavBreakpointContext, subscribe: true })\n @state()\n private _breakpointReached = true;\n\n @consume({ context: MainnavExpandedContext, subscribe: true })\n @state()\n private expanded: boolean;\n\n /** @internal */\n @query(\".nav-link\") navLink: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n private togglerId: string = genId(\"dropdown\", \"button\");\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean })\n active = false;\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Accessible label for the dropdown's toggle button. Forwarded to the button's aria-label attribute.\n */\n @property({ type: String })\n ariaLabel: string;\n\n /** @internal */\n @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n /** @internal */\n @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n /** @internal */\n get defaultSlotItems(): SgdsDropdownItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsDropdownItem[];\n }\n\n updated() {\n if (this._breakpointReached) {\n this._copyTextToMenu();\n this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n }\n }\n\n private _handleSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.add(\"mainnav-dropdown-link\");\n\n const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n link.tabIndex = -1;\n if (dropdownItem.classList.contains(\"disabled\")) {\n link.setAttribute(\"href\", \"javascript:void(0)\");\n link.setAttribute(\"tabindex\", \"-1\");\n } else {\n link.addEventListener(\"click\", (e: Event) => {\n const target = e.target as HTMLElement;\n const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n mainnav.hide();\n });\n }\n });\n }\n\n private _handleDesktopSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.remove(\"mainnav-dropdown-link\");\n\n const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n flatten: true\n });\n slottedItem.forEach(item => {\n if (dropdownItem.classList.contains(\"disabled\")) {\n item.setAttribute(\"href\", \"javascript:void(0)\");\n item.setAttribute(\"tabindex\", \"-1\");\n }\n });\n });\n }\n\n private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n if (!this._breakpointReached) {\n return;\n }\n\n const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n const items = [this.menuHeaderButton, ...slottedItems];\n const itemLength = items.length;\n if (itemLength === 0) {\n return;\n }\n\n const firstItem = items[0];\n const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n let activeElement = document.activeElement as HTMLElement;\n if (activeElement === this) {\n activeElement = this.shadowRoot.activeElement as HTMLElement;\n }\n\n switch (e.key) {\n case \"Tab\": {\n if (e.shiftKey) {\n if (activeElement === firstItem) {\n e.preventDefault();\n setTimeout(() => {\n lastItem.focus();\n }, 0);\n }\n } else {\n const activeShadowElement = activeElement.shadowRoot\n ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n : null;\n if (activeShadowElement && activeShadowElement === lastItem) {\n e.preventDefault();\n firstItem.focus();\n }\n }\n break;\n }\n default:\n break;\n }\n }\n\n private _copyTextToMenu() {\n this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;\n }\n\n private _hideDropdownMenuItems() {\n this.dropdownItems.style.display = \"none\";\n this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n }\n\n private _resetDropdownMenu(): Promise<void> {\n const navbarBody = this._getNavbarBody();\n if (!navbarBody) return Promise.resolve();\n\n return new Promise(resolve => {\n const onEnd = (event: TransitionEvent) => {\n if (event.propertyName === \"transform\") {\n navbarBody.removeEventListener(\"transitionend\", onEnd);\n resolve();\n }\n };\n\n const hasTransition = getComputedStyle(navbarBody).transitionProperty.includes(\"transform\");\n\n if (hasTransition) {\n navbarBody.addEventListener(\"transitionend\", onEnd);\n navbarBody.style.removeProperty(\"transform\");\n } else {\n navbarBody.style.removeProperty(\"transform\");\n resolve();\n }\n });\n }\n\n private _handleKeyboardOpen(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n if (event.key === ENTER || event.key === SPACE) {\n event.preventDefault();\n this._openMenu();\n }\n }\n\n private _getNavbarBody() {\n const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n if (!mainNav?.shadowRoot) {\n console.warn(\"sgds-mainnav or its shadowRoot not found\");\n return;\n }\n\n const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n if (!navbarBody) {\n console.warn(\".navbar-body not found in sgds-mainnav\");\n return;\n }\n\n return navbarBody;\n }\n\n private _openMenu() {\n const navbarBody = this._getNavbarBody();\n navbarBody.style.transform = \"translateX(-100%)\";\n this.dropdownItems.style.removeProperty(\"display\");\n this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n setTimeout(() => {\n this.menuHeaderButton.focus();\n }, 50);\n }\n\n private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n switch (event.key) {\n case TAB: {\n this._handleKeyboardMenuItemsEvent(event);\n break;\n }\n case ENTER:\n case SPACE: {\n event.preventDefault();\n this._closeMenu();\n break;\n }\n default:\n break;\n }\n }\n\n private async _closeMenu() {\n await this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n this.navLink.focus();\n }\n\n render() {\n const mobileView = html`\n <a\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel)}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n role=\"button\"\n @click=${this._openMenu}\n @keydown=${this._handleKeyboardOpen}\n >\n <slot name=\"toggler\"></slot>\n <sgds-icon name=\"chevron-right\"></sgds-icon>\n </a>\n <div class=\"dropdown-items\">\n <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n <sgds-icon name=\"chevron-left\"></sgds-icon>\n <span></span>\n </a>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n\n const desktopView = html`<sgds-dropdown\n .floatingOpts=${{\n middleware: [offset(0)]\n }}\n ?disabled=${this.disabled}\n >\n <a\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel)}\n id=${this.togglerId}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n role=\"button\"\n slot=\"toggler\"\n >\n <slot name=\"toggler\"></slot>\n <sgds-icon name=\"chevron-down\"></sgds-icon>\n </a>\n <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n </sgds-dropdown>`;\n\n return this._breakpointReached ? mobileView : desktopView;\n }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle"],"mappings":"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"}
|
|
@@ -21,6 +21,8 @@ var radioGroup = require('./radio-group.cjs.js');
|
|
|
21
21
|
*
|
|
22
22
|
* @event sgds-change - Emitted when the radio group's selected value changes.
|
|
23
23
|
* @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change
|
|
24
|
+
* @event sgds-invalid - Emitted when the radio group's invalid state is set to true.
|
|
25
|
+
* @event sgds-valid - Emitted when the radio group's invalid state is set to false.
|
|
24
26
|
*
|
|
25
27
|
*/
|
|
26
28
|
class SgdsRadioGroup extends validatorMixin.SgdsFormValidatorMixin(formControlElement["default"]) {
|
|
@@ -36,6 +38,8 @@ class SgdsRadioGroup extends validatorMixin.SgdsFormValidatorMixin(formControlEl
|
|
|
36
38
|
this.hasFeedback = false;
|
|
37
39
|
/** Makes the input as a required field. */
|
|
38
40
|
this.required = false;
|
|
41
|
+
/** Disables native and sgds validation for the radio group. */
|
|
42
|
+
this.noValidate = false;
|
|
39
43
|
/** Automatically focuses the selected radio input in the group when it becomes checked. */
|
|
40
44
|
this.autofocus = false;
|
|
41
45
|
this._isTouched = false;
|
|
@@ -179,6 +183,8 @@ class SgdsRadioGroup extends validatorMixin.SgdsFormValidatorMixin(formControlEl
|
|
|
179
183
|
return this._mixinGetValidationMessage();
|
|
180
184
|
}
|
|
181
185
|
_handleIsTouched() {
|
|
186
|
+
if (this._mixinShouldSkipSgdsValidation())
|
|
187
|
+
return;
|
|
182
188
|
if (this._isTouched) {
|
|
183
189
|
this.invalid = !this.input.checkValidity();
|
|
184
190
|
}
|
|
@@ -269,6 +275,9 @@ tslib.__decorate([
|
|
|
269
275
|
tslib.__decorate([
|
|
270
276
|
decorators_js.property({ type: Boolean, reflect: true })
|
|
271
277
|
], SgdsRadioGroup.prototype, "required", void 0);
|
|
278
|
+
tslib.__decorate([
|
|
279
|
+
decorators_js.property({ type: Boolean, reflect: true })
|
|
280
|
+
], SgdsRadioGroup.prototype, "noValidate", void 0);
|
|
272
281
|
tslib.__decorate([
|
|
273
282
|
decorators_js.property({ type: Boolean, reflect: true })
|
|
274
283
|
], SgdsRadioGroup.prototype, "autofocus", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, radioGroupStyles];\n\n /**@internal */\n @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n /**@internal */\n @state() defaultValue = \"\";\n\n /** The selected value of the control. */\n @property({ reflect: true }) value = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** Makes the input as a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Automatically focuses the selected radio input in the group when it becomes checked. */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n this._updateCheckedRadio();\n }\n @watch(\"invalid\", { waitUntilFirstUpdate: true })\n _handleInvalidChange() {\n this._radios.forEach(r => (r.invalid = this.invalid));\n }\n\n @state() private _isTouched = false;\n /**\n * radio requries a custom _mixinResetFormControl as the update of input value\n * requires to fire a reset event manually\n * */\n private _mixinResetFormControl() {\n this.value = this.input.value = this.defaultValue;\n this._updateInputValue(\"reset\");\n this._mixinResetValidity(this.input);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n this.addEventListener(\"sgds-blur\", () => {\n this._isTouched = true;\n });\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n const radios = this._radios;\n radios.forEach((item, index) => {\n if (radios.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case radios.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n if (this.value) {\n this._updateInputValue(\"change\");\n }\n }\n\n @queryAssignedElements()\n private _radios!: Array<SgdsRadio>;\n\n private _handleRadioClick(event: MouseEvent) {\n event.preventDefault();\n const target = event.target as SgdsRadio;\n\n if (target.disabled) {\n return;\n }\n\n this.value = target.value;\n\n this._updateInputValue();\n\n const radios = this._radios;\n\n radios.forEach(radio => {\n return (radio.checked = radio === target);\n });\n }\n /**\n * when input value is set programatically, need to manually dispatch a change event\n * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n */\n private _updateInputValue(eventName = \"change\") {\n this.input.value = this.value;\n this.input.dispatchEvent(new InputEvent(eventName));\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n return;\n }\n\n const radios = this._radios.filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n let index = radios.indexOf(checkedRadio) + incr;\n if (index < 0) {\n index = radios.length - 1;\n }\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this._radios.forEach(radio => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n this.value = radios[index].value;\n this._updateInputValue();\n radios[index].checked = true;\n radios[index].tabIndex = 0;\n // preventDefault at the end to allow Tab\n event.preventDefault();\n }\n\n private _handleSlotChange() {\n const radios = this._radios;\n\n radios.forEach(radio => {\n radio.autofocus = this.autofocus;\n radio.checked = radio.value === this.value;\n\n return radio;\n });\n this._disabledChildRadios();\n if (!radios.some(radio => radio.checked)) {\n if (radios[0]) radios[0].tabIndex = 0;\n }\n }\n\n private _updateCheckedRadio() {\n const radios = this._radios;\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n this._disabledChildRadios();\n }\n\n private _disabledChildRadios() {\n if (this.disabled) {\n const radios = this._radios;\n radios.forEach(radio => (radio.disabled = this.disabled));\n }\n }\n\n render() {\n const defaultSlot = html`\n <slot\n class=\"radio-container\"\n @click=${this._handleRadioClick}\n @keydown=${this._handleKeyDown}\n @slotchange=${this._handleSlotChange}\n role=\"presentation\"\n ></slot>\n `;\n return html`\n <fieldset name=${this.name}>\n <div class=\"label-hint-container\">\n <label\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >\n ${this.label}\n </label>\n ${this._renderHintText()}\n </div>\n ${defaultSlot}\n <input\n type=\"text\"\n class=\"radio-group-validation-input ${classMap({\n \"is-invalid\": this.hasFeedback && this.invalid\n })}\"\n ?required=${this.required}\n tabindex=\"-1\"\n @change=${(e: Event) => super._mixinHandleChange(e)}\n .value=${live(this.value)}\n aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n />\n ${this.invalid && this.hasFeedback\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","live","nothing","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n * @event sgds-invalid - Emitted when the radio group's invalid state is set to true.\n * @event sgds-valid - Emitted when the radio group's invalid state is set to false.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, radioGroupStyles];\n\n /**@internal */\n @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n /**@internal */\n @state() defaultValue = \"\";\n\n /** The selected value of the control. */\n @property({ reflect: true }) value = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** Makes the input as a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Disables native and sgds validation for the radio group. */\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /** Automatically focuses the selected radio input in the group when it becomes checked. */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n this._updateCheckedRadio();\n }\n @watch(\"invalid\", { waitUntilFirstUpdate: true })\n _handleInvalidChange() {\n this._radios.forEach(r => (r.invalid = this.invalid));\n }\n\n @state() private _isTouched = false;\n /**\n * radio requries a custom _mixinResetFormControl as the update of input value\n * requires to fire a reset event manually\n * */\n private _mixinResetFormControl() {\n this.value = this.input.value = this.defaultValue;\n this._updateInputValue(\"reset\");\n this._mixinResetValidity(this.input);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n this.addEventListener(\"sgds-blur\", () => {\n this._isTouched = true;\n });\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n const radios = this._radios;\n radios.forEach((item, index) => {\n if (radios.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case radios.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n if (this.value) {\n this._updateInputValue(\"change\");\n }\n }\n\n @queryAssignedElements()\n private _radios!: Array<SgdsRadio>;\n\n private _handleRadioClick(event: MouseEvent) {\n event.preventDefault();\n const target = event.target as SgdsRadio;\n\n if (target.disabled) {\n return;\n }\n\n this.value = target.value;\n\n this._updateInputValue();\n\n const radios = this._radios;\n\n radios.forEach(radio => {\n return (radio.checked = radio === target);\n });\n }\n /**\n * when input value is set programatically, need to manually dispatch a change event\n * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n */\n private _updateInputValue(eventName = \"change\") {\n this.input.value = this.value;\n this.input.dispatchEvent(new InputEvent(eventName));\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n return;\n }\n\n const radios = this._radios.filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n let index = radios.indexOf(checkedRadio) + incr;\n if (index < 0) {\n index = radios.length - 1;\n }\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this._radios.forEach(radio => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n this.value = radios[index].value;\n this._updateInputValue();\n radios[index].checked = true;\n radios[index].tabIndex = 0;\n // preventDefault at the end to allow Tab\n event.preventDefault();\n }\n\n private _handleSlotChange() {\n const radios = this._radios;\n\n radios.forEach(radio => {\n radio.autofocus = this.autofocus;\n radio.checked = radio.value === this.value;\n\n return radio;\n });\n this._disabledChildRadios();\n if (!radios.some(radio => radio.checked)) {\n if (radios[0]) radios[0].tabIndex = 0;\n }\n }\n\n private _updateCheckedRadio() {\n const radios = this._radios;\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n this._disabledChildRadios();\n }\n\n private _disabledChildRadios() {\n if (this.disabled) {\n const radios = this._radios;\n radios.forEach(radio => (radio.disabled = this.disabled));\n }\n }\n\n render() {\n const defaultSlot = html`\n <slot\n class=\"radio-container\"\n @click=${this._handleRadioClick}\n @keydown=${this._handleKeyDown}\n @slotchange=${this._handleSlotChange}\n role=\"presentation\"\n ></slot>\n `;\n return html`\n <fieldset name=${this.name}>\n <div class=\"label-hint-container\">\n <label\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >\n ${this.label}\n </label>\n ${this._renderHintText()}\n </div>\n ${defaultSlot}\n <input\n type=\"text\"\n class=\"radio-group-validation-input ${classMap({\n \"is-invalid\": this.hasFeedback && this.invalid\n })}\"\n ?required=${this.required}\n tabindex=\"-1\"\n @change=${(e: Event) => super._mixinHandleChange(e)}\n .value=${live(this.value)}\n aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n />\n ${this.invalid && this.hasFeedback\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","live","nothing","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":"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"}
|
|
@@ -17,6 +17,8 @@ import css_248z from './radio-group.js';
|
|
|
17
17
|
*
|
|
18
18
|
* @event sgds-change - Emitted when the radio group's selected value changes.
|
|
19
19
|
* @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change
|
|
20
|
+
* @event sgds-invalid - Emitted when the radio group's invalid state is set to true.
|
|
21
|
+
* @event sgds-valid - Emitted when the radio group's invalid state is set to false.
|
|
20
22
|
*
|
|
21
23
|
*/
|
|
22
24
|
class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {
|
|
@@ -32,6 +34,8 @@ class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {
|
|
|
32
34
|
this.hasFeedback = false;
|
|
33
35
|
/** Makes the input as a required field. */
|
|
34
36
|
this.required = false;
|
|
37
|
+
/** Disables native and sgds validation for the radio group. */
|
|
38
|
+
this.noValidate = false;
|
|
35
39
|
/** Automatically focuses the selected radio input in the group when it becomes checked. */
|
|
36
40
|
this.autofocus = false;
|
|
37
41
|
this._isTouched = false;
|
|
@@ -175,6 +179,8 @@ class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {
|
|
|
175
179
|
return this._mixinGetValidationMessage();
|
|
176
180
|
}
|
|
177
181
|
_handleIsTouched() {
|
|
182
|
+
if (this._mixinShouldSkipSgdsValidation())
|
|
183
|
+
return;
|
|
178
184
|
if (this._isTouched) {
|
|
179
185
|
this.invalid = !this.input.checkValidity();
|
|
180
186
|
}
|
|
@@ -265,6 +271,9 @@ __decorate([
|
|
|
265
271
|
__decorate([
|
|
266
272
|
property({ type: Boolean, reflect: true })
|
|
267
273
|
], SgdsRadioGroup.prototype, "required", void 0);
|
|
274
|
+
__decorate([
|
|
275
|
+
property({ type: Boolean, reflect: true })
|
|
276
|
+
], SgdsRadioGroup.prototype, "noValidate", void 0);
|
|
268
277
|
__decorate([
|
|
269
278
|
property({ type: Boolean, reflect: true })
|
|
270
279
|
], SgdsRadioGroup.prototype, "autofocus", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-radio-group.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, radioGroupStyles];\n\n /**@internal */\n @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n /**@internal */\n @state() defaultValue = \"\";\n\n /** The selected value of the control. */\n @property({ reflect: true }) value = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** Makes the input as a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Automatically focuses the selected radio input in the group when it becomes checked. */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n this._updateCheckedRadio();\n }\n @watch(\"invalid\", { waitUntilFirstUpdate: true })\n _handleInvalidChange() {\n this._radios.forEach(r => (r.invalid = this.invalid));\n }\n\n @state() private _isTouched = false;\n /**\n * radio requries a custom _mixinResetFormControl as the update of input value\n * requires to fire a reset event manually\n * */\n private _mixinResetFormControl() {\n this.value = this.input.value = this.defaultValue;\n this._updateInputValue(\"reset\");\n this._mixinResetValidity(this.input);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n this.addEventListener(\"sgds-blur\", () => {\n this._isTouched = true;\n });\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n const radios = this._radios;\n radios.forEach((item, index) => {\n if (radios.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case radios.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n if (this.value) {\n this._updateInputValue(\"change\");\n }\n }\n\n @queryAssignedElements()\n private _radios!: Array<SgdsRadio>;\n\n private _handleRadioClick(event: MouseEvent) {\n event.preventDefault();\n const target = event.target as SgdsRadio;\n\n if (target.disabled) {\n return;\n }\n\n this.value = target.value;\n\n this._updateInputValue();\n\n const radios = this._radios;\n\n radios.forEach(radio => {\n return (radio.checked = radio === target);\n });\n }\n /**\n * when input value is set programatically, need to manually dispatch a change event\n * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n */\n private _updateInputValue(eventName = \"change\") {\n this.input.value = this.value;\n this.input.dispatchEvent(new InputEvent(eventName));\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n return;\n }\n\n const radios = this._radios.filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n let index = radios.indexOf(checkedRadio) + incr;\n if (index < 0) {\n index = radios.length - 1;\n }\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this._radios.forEach(radio => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n this.value = radios[index].value;\n this._updateInputValue();\n radios[index].checked = true;\n radios[index].tabIndex = 0;\n // preventDefault at the end to allow Tab\n event.preventDefault();\n }\n\n private _handleSlotChange() {\n const radios = this._radios;\n\n radios.forEach(radio => {\n radio.autofocus = this.autofocus;\n radio.checked = radio.value === this.value;\n\n return radio;\n });\n this._disabledChildRadios();\n if (!radios.some(radio => radio.checked)) {\n if (radios[0]) radios[0].tabIndex = 0;\n }\n }\n\n private _updateCheckedRadio() {\n const radios = this._radios;\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n this._disabledChildRadios();\n }\n\n private _disabledChildRadios() {\n if (this.disabled) {\n const radios = this._radios;\n radios.forEach(radio => (radio.disabled = this.disabled));\n }\n }\n\n render() {\n const defaultSlot = html`\n <slot\n class=\"radio-container\"\n @click=${this._handleRadioClick}\n @keydown=${this._handleKeyDown}\n @slotchange=${this._handleSlotChange}\n role=\"presentation\"\n ></slot>\n `;\n return html`\n <fieldset name=${this.name}>\n <div class=\"label-hint-container\">\n <label\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >\n ${this.label}\n </label>\n ${this._renderHintText()}\n </div>\n ${defaultSlot}\n <input\n type=\"text\"\n class=\"radio-group-validation-input ${classMap({\n \"is-invalid\": this.hasFeedback && this.invalid\n })}\"\n ?required=${this.required}\n tabindex=\"-1\"\n @change=${(e: Event) => super._mixinHandleChange(e)}\n .value=${live(this.value)}\n aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n />\n ${this.invalid && this.hasFeedback\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["radioGroupStyles"],"mappings":";;;;;;;;;;;AAYA;;;;;;;;;AASG;MACU,cAAe,SAAQ,sBAAsB,CAAC,kBAAkB,CAAC,CAAA;AAA9E,IAAA,WAAA,GAAA;;;QAOW,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;;QAGE,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGG,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;;QAGpB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGpB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;QAY7C,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;KAsOrC;IA/OC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAmC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC9F,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;KACvD;AAGD;;;AAGK;IACG,sBAAsB,GAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAClD,QAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAChC,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACtC;IAED,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;AAC/B,QAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAK;AACtC,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACzB,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AACtC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC7B,YAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBACrB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC;AACpB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;SAClC;KACF;AAKO,IAAA,iBAAiB,CAAC,KAAiB,EAAA;QACzC,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAmB,CAAC;AAEzC,QAAA,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,OAAO;SACR;AAED,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAE1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;AAEzB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;AAE5B,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,IAAG;YACrB,QAAQ,KAAK,CAAC,OAAO,GAAG,KAAK,KAAK,MAAM,EAAE;AAC5C,SAAC,CAAC,CAAC;KACJ;AACD;;;AAGG;IACK,iBAAiB,CAAC,SAAS,GAAG,QAAQ,EAAA;QAC5C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9B,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;KACrD;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;;QACzC,IAAI,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACjF,OAAO;SACR;AAED,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC7D,MAAM,YAAY,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,MAAM,CAAC,CAAC,CAAC,CAAC;;AAEtE,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAC3F,IAAI,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC;AAChD,QAAA,IAAI,KAAK,GAAG,CAAC,EAAE;AACb,YAAA,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;SAC3B;QACD,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7B,KAAK,GAAG,CAAC,CAAC;SACX;AAED,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAG;AAC3B,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;AACtB,YAAA,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;AACtB,SAAC,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;AACzB,QAAA,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;AAC7B,QAAA,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;;QAE3B,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;IAEO,iBAAiB,GAAA;AACvB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;AAE5B,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,IAAG;AACrB,YAAA,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YACjC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;AAE3C,YAAA,OAAO,KAAK,CAAC;AACf,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,oBAAoB,EAAE,CAAC;AAC5B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE;YACxC,IAAI,MAAM,CAAC,CAAC,CAAC;AAAE,gBAAA,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;SACvC;KACF;IAEO,mBAAmB,GAAA;AACzB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACvE;IAES,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAA,CAAa,UAAA,EAAA,IAAI,CAAC,UAAU,CAA2B,wBAAA,EAAA,IAAI,CAAC,QAAQ,SAAS,CAAC;AAC3G,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC;KAC1C;AACD;;;AAGG;IACI,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpC;AACD;;AAEG;IACI,aAAa,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;KACnC;AAED;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACjC;AACD;;AAEG;AACH,IAAA,IAAW,iBAAiB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC1C;IAGD,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;SAC5C;KACF;IAGD,qBAAqB,GAAA;;AAEnB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAEO,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;AAC5B,YAAA,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;SAC3D;KACF;IAED,MAAM,GAAA;QACJ,MAAM,WAAW,GAAG,IAAI,CAAA,CAAA;;;AAGX,eAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;AACpB,iBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AAChB,oBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;KAGvC,CAAC;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;AACQ,qBAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;AAGZ,kBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;;AAEA,YAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;YAEZ,IAAI,CAAC,eAAe,EAAE,CAAA;;UAExB,WAAW,CAAA;;;AAG2B,8CAAA,EAAA,QAAQ,CAAC;AAC7C,YAAA,YAAY,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO;SAC/C,CAAC,CAAA;AACU,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;oBAEf,CAAC,CAAQ,KAAK,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAA;AAC1C,iBAAA,EAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AACN,2BAAA,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,GAAG,sBAAsB,GAAG,GAAG,IAAI,CAAC,UAAU,CAAM,IAAA,CAAA,CAAA;;AAEvG,QAAA,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;cAC9B,IAAI,CAAA,CAAA;;;;;;;;;;;AAWI,kBAAA,EAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAA;;;AAGjF,YAAA,CAAA;AACH,cAAE,OAAO,CAAA;;KAEd,CAAC;KACH;;AAtQM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAEA,QAAgB,CAAlD,CAAoD;AAGtC,UAAA,CAAA;IAA1B,KAAK,CAAC,kBAAkB,CAAC;AAA8B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG/C,UAAA,CAAA;AAAR,IAAA,KAAK,EAAE;AAAmB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGE,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGG,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAsB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG9D,UAAA,CAAA;IADC,KAAK,CAAC,OAAO,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAI9C,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA,CAAA;AAED,UAAA,CAAA;IADC,KAAK,CAAC,SAAS,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAGhD,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,IAAA,CAAA,CAAA;AAEgB,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAA4B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA4C5B,UAAA,CAAA;AADP,IAAA,qBAAqB,EAAE;AACW,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA+GnC,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAKnD,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,KAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAKjD,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"sgds-radio-group.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n * @event sgds-invalid - Emitted when the radio group's invalid state is set to true.\n * @event sgds-valid - Emitted when the radio group's invalid state is set to false.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, radioGroupStyles];\n\n /**@internal */\n @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n /**@internal */\n @state() defaultValue = \"\";\n\n /** The selected value of the control. */\n @property({ reflect: true }) value = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** Makes the input as a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Disables native and sgds validation for the radio group. */\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /** Automatically focuses the selected radio input in the group when it becomes checked. */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n this._updateCheckedRadio();\n }\n @watch(\"invalid\", { waitUntilFirstUpdate: true })\n _handleInvalidChange() {\n this._radios.forEach(r => (r.invalid = this.invalid));\n }\n\n @state() private _isTouched = false;\n /**\n * radio requries a custom _mixinResetFormControl as the update of input value\n * requires to fire a reset event manually\n * */\n private _mixinResetFormControl() {\n this.value = this.input.value = this.defaultValue;\n this._updateInputValue(\"reset\");\n this._mixinResetValidity(this.input);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n this.addEventListener(\"sgds-blur\", () => {\n this._isTouched = true;\n });\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n const radios = this._radios;\n radios.forEach((item, index) => {\n if (radios.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case radios.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n if (this.value) {\n this._updateInputValue(\"change\");\n }\n }\n\n @queryAssignedElements()\n private _radios!: Array<SgdsRadio>;\n\n private _handleRadioClick(event: MouseEvent) {\n event.preventDefault();\n const target = event.target as SgdsRadio;\n\n if (target.disabled) {\n return;\n }\n\n this.value = target.value;\n\n this._updateInputValue();\n\n const radios = this._radios;\n\n radios.forEach(radio => {\n return (radio.checked = radio === target);\n });\n }\n /**\n * when input value is set programatically, need to manually dispatch a change event\n * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n */\n private _updateInputValue(eventName = \"change\") {\n this.input.value = this.value;\n this.input.dispatchEvent(new InputEvent(eventName));\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n return;\n }\n\n const radios = this._radios.filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n let index = radios.indexOf(checkedRadio) + incr;\n if (index < 0) {\n index = radios.length - 1;\n }\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this._radios.forEach(radio => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n this.value = radios[index].value;\n this._updateInputValue();\n radios[index].checked = true;\n radios[index].tabIndex = 0;\n // preventDefault at the end to allow Tab\n event.preventDefault();\n }\n\n private _handleSlotChange() {\n const radios = this._radios;\n\n radios.forEach(radio => {\n radio.autofocus = this.autofocus;\n radio.checked = radio.value === this.value;\n\n return radio;\n });\n this._disabledChildRadios();\n if (!radios.some(radio => radio.checked)) {\n if (radios[0]) radios[0].tabIndex = 0;\n }\n }\n\n private _updateCheckedRadio() {\n const radios = this._radios;\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n this._disabledChildRadios();\n }\n\n private _disabledChildRadios() {\n if (this.disabled) {\n const radios = this._radios;\n radios.forEach(radio => (radio.disabled = this.disabled));\n }\n }\n\n render() {\n const defaultSlot = html`\n <slot\n class=\"radio-container\"\n @click=${this._handleRadioClick}\n @keydown=${this._handleKeyDown}\n @slotchange=${this._handleSlotChange}\n role=\"presentation\"\n ></slot>\n `;\n return html`\n <fieldset name=${this.name}>\n <div class=\"label-hint-container\">\n <label\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >\n ${this.label}\n </label>\n ${this._renderHintText()}\n </div>\n ${defaultSlot}\n <input\n type=\"text\"\n class=\"radio-group-validation-input ${classMap({\n \"is-invalid\": this.hasFeedback && this.invalid\n })}\"\n ?required=${this.required}\n tabindex=\"-1\"\n @change=${(e: Event) => super._mixinHandleChange(e)}\n .value=${live(this.value)}\n aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n />\n ${this.invalid && this.hasFeedback\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["radioGroupStyles"],"mappings":"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"}
|
|
@@ -24,12 +24,16 @@ var sgdsSpinner = require('../Spinner/sgds-spinner.cjs.js');
|
|
|
24
24
|
* @event sgds-change - Emitted when the select value changes.
|
|
25
25
|
* @event sgds-focus - Emitted when user input is focused.
|
|
26
26
|
* @event sgds-blur - Emitted when user input is blurred.
|
|
27
|
+
* @event sgds-invalid - Emitted when the select's invalid state is set to true.
|
|
28
|
+
* @event sgds-valid - Emitted when the select's invalid state is set to false.
|
|
27
29
|
*
|
|
28
30
|
* @slot default - slot for sgds-select-option passed into select's menu
|
|
29
31
|
*/
|
|
30
32
|
class SgdsSelect extends selectElement.SelectElement {
|
|
31
33
|
constructor() {
|
|
32
34
|
super(...arguments);
|
|
35
|
+
/** Disables native and sgds validation for the select. */
|
|
36
|
+
this.noValidate = false;
|
|
33
37
|
this._blockInputKeydown = (e) => {
|
|
34
38
|
if (e.key !== "Tab") {
|
|
35
39
|
e.preventDefault();
|
|
@@ -96,6 +100,8 @@ class SgdsSelect extends selectElement.SelectElement {
|
|
|
96
100
|
this._updateDisplayValue();
|
|
97
101
|
if (!this._isTouched && this.value === "")
|
|
98
102
|
return;
|
|
103
|
+
if (this._mixinShouldSkipSgdsValidation())
|
|
104
|
+
return;
|
|
99
105
|
this.invalid = !this._mixinReportValidity();
|
|
100
106
|
}
|
|
101
107
|
async _handleItemSelected(e) {
|
|
@@ -227,6 +233,9 @@ SgdsSelect.dependencies = {
|
|
|
227
233
|
"sgds-spinner": sgdsSpinner.SgdsSpinner,
|
|
228
234
|
[SgdsSelect.childName]: sgdsSelectOption.SgdsSelectOption
|
|
229
235
|
};
|
|
236
|
+
tslib.__decorate([
|
|
237
|
+
decorators_js.property({ type: Boolean, reflect: true })
|
|
238
|
+
], SgdsSelect.prototype, "noValidate", void 0);
|
|
230
239
|
tslib.__decorate([
|
|
231
240
|
decorators_js.queryAssignedElements({ flatten: true, selector: "sgds-select-option" })
|
|
232
241
|
], SgdsSelect.prototype, "options", void 0);
|