npm - @quartzds/core - Versions diffs - 1.0.0-beta.62 → 1.0.0-beta.63 - Mend

@quartzds/core 1.0.0-beta.62 → 1.0.0-beta.63

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.

Files changed (10) hide show

package/components/qds-select.js +4 -10
package/components/qds-select.js.map +1 -1
package/dist/cjs/qds-select.cjs.entry.js +4 -10
package/dist/cjs/qds-select.cjs.entry.js.map +1 -1
package/dist/docs.json +1 -1
package/dist/esm/qds-select.entry.js +4 -10
package/dist/esm/qds-select.entry.js.map +1 -1
package/hydrate/index.js +4 -10
package/hydrate/index.mjs +4 -10
package/package.json +1 -1

package/components/qds-select.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { a as invariant, p as pickFocusEventAttributes, d as pickInputEventAttri
 import { C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS, V as VALID_STATE } from './p-8923b4f2.js';
 import { d as defineCustomElement$2 } from './p-53fc9fb0.js';
-const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
+const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
 const QdsSelectStyle0 = selectCss;
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -100,15 +100,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
         });
         _Select_onSlotchange.set(this, (event) => {
             invariant(__classPrivateFieldGet(this, _Select_select, "f"));
-            const { target: slot } = event;
-            invariant(slot instanceof HTMLSlotElement);
-            const slotNodes = [...slot.assignedNodes()];
-            const hasDifferentChild = [...slotNodes.values()].some((slotNode, index) => {
-                invariant(__classPrivateFieldGet(this, _Select_select, "f"));
-                return !slotNode.isEqualNode(__classPrivateFieldGet(this, _Select_select, "f").childNodes[index]);
-            });
-            if (hasDifferentChild)
-                __classPrivateFieldGet(this, _Select_select, "f").replaceChildren(...slotNodes);
+            const { currentTarget } = event;
+            invariant(currentTarget instanceof HTMLSlotElement);
+            __classPrivateFieldGet(this, _Select_select, "f").replaceChildren(...currentTarget.assignedNodes().map((node) => node.cloneNode(true)));
         });
         this.size = 'standard';
         this.autoComplete = undefined;

package/components/qds-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-select.js","mappings":"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","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-control-text-standard);\n grid-area: select;\n}\n\n.qds-icon {\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-color: var(--qds-theme-control-border);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n margin: 0;\n outline: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &:not(:focus)[aria-invalid='true'] {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: select;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' \| 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/\n The `<qds-select>` element represents a control that provides a menu of\n * options.\n \n @see https://quartz.se.com/build/components/select\n /\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /\n The select's size.\n \n > *NOTE:* The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n \n [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n \n [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n \n @webnative\n /\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /\n Specify whether the select should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' })\n public readonly autoFocus?: boolean\n\n /\n Prevents the select from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop() public readonly disabled?: boolean\n\n /\n The [`<form>`][] element to associate the select with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-select>` is associated\n * with its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<qds-select>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n \n @readonly\n * @webnative\n /\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] \| string = null\n\n /\n Returns the number of elements in the [`<option>`s collection][].\n \n [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n \n @readonly\n * @webnative\n /\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /\n Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n \n @webnative\n /\n @Prop() public multiple?: boolean\n\n /\n The name of the select, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n \n [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n \n See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n \n [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n \n @webnative\n /\n @Prop() public readonly required?: boolean\n\n /\n The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /\n Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly type: SelectType = 'select-one'\n\n /\n The error message that would be shown to the user if the `<qds-select>`\n * was to be checked for validity.\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /\n The [`ValidityState`][] object for this `<qds-select>`.\n \n [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n \n @readonly\n * @webnative\n /\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /\n The `value` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true }) public value? = ''\n\n /\n True if `<qds-select>` will be validated when the form is submitted;\n * false otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /\n Emitted when the select loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when an alteration to the select's value is committed by the\n * user.\n /\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /\n Emitted when the select gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLQdsSelectElement\n\n @State() private invalid = false\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') \|\| (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n this.invalid = !valid\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n aria-invalid={this.invalid.toString()}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n this.invalid = !!error\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { target: slot } = event\n invariant(slot instanceof HTMLSlotElement)\n\n const slotNodes = [...slot.assignedNodes()]\n const hasDifferentChild = [...slotNodes.values()].some(\n (slotNode: Node, index) => {\n invariant(this.#select)\n return !slotNode.isEqualNode(this.#select.childNodes[index])\n },\n )\n if (hasDifferentChild) this.#select.replaceChildren(...slotNodes)\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
1	+ {"file":"qds-select.js","mappings":"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","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\nslot {\n display: none;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-control-text-standard);\n grid-area: select;\n}\n\n.qds-icon {\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-color: var(--qds-theme-control-border);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n margin: 0;\n outline: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &:not(:focus)[aria-invalid='true'] {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: select;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' \| 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/\n The `<qds-select>` element represents a control that provides a menu of\n * options.\n \n @see https://quartz.se.com/build/components/select\n /\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /\n The select's size.\n \n > *NOTE:* The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n \n [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n \n [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n \n @webnative\n /\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /\n Specify whether the select should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' })\n public readonly autoFocus?: boolean\n\n /\n Prevents the select from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop() public readonly disabled?: boolean\n\n /\n The [`<form>`][] element to associate the select with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-select>` is associated\n * with its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<qds-select>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n \n @readonly\n * @webnative\n /\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] \| string = null\n\n /\n Returns the number of elements in the [`<option>`s collection][].\n \n [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n \n @readonly\n * @webnative\n /\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /\n Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n \n @webnative\n /\n @Prop() public multiple?: boolean\n\n /\n The name of the select, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n \n [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n \n See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n \n [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n \n @webnative\n /\n @Prop() public readonly required?: boolean\n\n /\n The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /\n Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly type: SelectType = 'select-one'\n\n /\n The error message that would be shown to the user if the `<qds-select>`\n * was to be checked for validity.\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /\n The [`ValidityState`][] object for this `<qds-select>`.\n \n [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n \n @readonly\n * @webnative\n /\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /\n The `value` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true }) public value? = ''\n\n /\n True if `<qds-select>` will be validated when the form is submitted;\n * false otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /\n Emitted when the select loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when an alteration to the select's value is committed by the\n * user.\n /\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /\n Emitted when the select gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLQdsSelectElement\n\n @State() private invalid = false\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') \|\| (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n this.invalid = !valid\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n aria-invalid={this.invalid.toString()}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n this.invalid = !!error\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { currentTarget } = event\n invariant(currentTarget instanceof HTMLSlotElement)\n\n this.#select.replaceChildren(\n ...currentTarget.assignedNodes().map((node) => node.cloneNode(true)),\n )\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}

package/dist/cjs/qds-select.cjs.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const index = require('./index-0e264b68.js');
 const helpers = require('./helpers-fd48f777.js');
 const controls = require('./controls-41400abc.js');
-const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
+const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
 const QdsSelectStyle0 = selectCss;
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -107,15 +107,9 @@ const Select = class {
         });
         _Select_onSlotchange.set(this, (event) => {
             helpers.invariant(__classPrivateFieldGet(this, _Select_select, "f"));
-            const { target: slot } = event;
-            helpers.invariant(slot instanceof HTMLSlotElement);
-            const slotNodes = [...slot.assignedNodes()];
-            const hasDifferentChild = [...slotNodes.values()].some((slotNode, index) => {
-                helpers.invariant(__classPrivateFieldGet(this, _Select_select, "f"));
-                return !slotNode.isEqualNode(__classPrivateFieldGet(this, _Select_select, "f").childNodes[index]);
-            });
-            if (hasDifferentChild)
-                __classPrivateFieldGet(this, _Select_select, "f").replaceChildren(...slotNodes);
+            const { currentTarget } = event;
+            helpers.invariant(currentTarget instanceof HTMLSlotElement);
+            __classPrivateFieldGet(this, _Select_select, "f").replaceChildren(...currentTarget.assignedNodes().map((node) => node.cloneNode(true)));
         });
         this.size = 'standard';
         this.autoComplete = undefined;

package/dist/cjs/qds-select.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-select.entry.cjs.js","mappings":"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","names":["invariant","CUSTOM_ERROR_FLAGS","NO_ERROR_FLAGS","pickFocusEventAttributes","pickInputEventAttributes","VALID_STATE","inheritAriaAttributes","h"],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-control-text-standard);\n grid-area: select;\n}\n\n.qds-icon {\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-color: var(--qds-theme-control-border);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n margin: 0;\n outline: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &:not(:focus)[aria-invalid='true'] {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: select;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' \| 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/\n The `<qds-select>` element represents a control that provides a menu of\n * options.\n \n @see https://quartz.se.com/build/components/select\n /\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /\n The select's size.\n \n > *NOTE:* The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n \n [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n \n [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n \n @webnative\n /\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /\n Specify whether the select should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' })\n public readonly autoFocus?: boolean\n\n /\n Prevents the select from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop() public readonly disabled?: boolean\n\n /\n The [`<form>`][] element to associate the select with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-select>` is associated\n * with its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<qds-select>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n \n @readonly\n * @webnative\n /\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] \| string = null\n\n /\n Returns the number of elements in the [`<option>`s collection][].\n \n [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n \n @readonly\n * @webnative\n /\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /\n Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n \n @webnative\n /\n @Prop() public multiple?: boolean\n\n /\n The name of the select, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n \n [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n \n See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n \n [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n \n @webnative\n /\n @Prop() public readonly required?: boolean\n\n /\n The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /\n Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly type: SelectType = 'select-one'\n\n /\n The error message that would be shown to the user if the `<qds-select>`\n * was to be checked for validity.\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /\n The [`ValidityState`][] object for this `<qds-select>`.\n \n [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n \n @readonly\n * @webnative\n /\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /\n The `value` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true }) public value? = ''\n\n /\n True if `<qds-select>` will be validated when the form is submitted;\n * false otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /\n Emitted when the select loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when an alteration to the select's value is committed by the\n * user.\n /\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /\n Emitted when the select gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLQdsSelectElement\n\n @State() private invalid = false\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') \|\| (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n this.invalid = !valid\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n aria-invalid={this.invalid.toString()}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n this.invalid = !!error\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { target: slot } = event\n invariant(slot instanceof HTMLSlotElement)\n\n const slotNodes = [...slot.assignedNodes()]\n const hasDifferentChild = [...slotNodes.values()].some(\n (slotNode: Node, index) => {\n invariant(this.#select)\n return !slotNode.isEqualNode(this.#select.childNodes[index])\n },\n )\n if (hasDifferentChild) this.#select.replaceChildren(...slotNodes)\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
1	+ {"file":"qds-select.entry.cjs.js","mappings":"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","names":["invariant","CUSTOM_ERROR_FLAGS","NO_ERROR_FLAGS","pickFocusEventAttributes","pickInputEventAttributes","VALID_STATE","inheritAriaAttributes","h"],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\nslot {\n display: none;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-control-text-standard);\n grid-area: select;\n}\n\n.qds-icon {\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-color: var(--qds-theme-control-border);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n margin: 0;\n outline: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &:not(:focus)[aria-invalid='true'] {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: select;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' \| 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/\n The `<qds-select>` element represents a control that provides a menu of\n * options.\n \n @see https://quartz.se.com/build/components/select\n /\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /\n The select's size.\n \n > *NOTE:* The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n \n [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n \n [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n \n @webnative\n /\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /\n Specify whether the select should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' })\n public readonly autoFocus?: boolean\n\n /\n Prevents the select from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop() public readonly disabled?: boolean\n\n /\n The [`<form>`][] element to associate the select with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-select>` is associated\n * with its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<qds-select>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n \n @readonly\n * @webnative\n /\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] \| string = null\n\n /\n Returns the number of elements in the [`<option>`s collection][].\n \n [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n \n @readonly\n * @webnative\n /\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /\n Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n \n @webnative\n /\n @Prop() public multiple?: boolean\n\n /\n The name of the select, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n \n [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n \n See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n \n [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n \n @webnative\n /\n @Prop() public readonly required?: boolean\n\n /\n The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /\n Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly type: SelectType = 'select-one'\n\n /\n The error message that would be shown to the user if the `<qds-select>`\n * was to be checked for validity.\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /\n The [`ValidityState`][] object for this `<qds-select>`.\n \n [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n \n @readonly\n * @webnative\n /\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /\n The `value` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true }) public value? = ''\n\n /\n True if `<qds-select>` will be validated when the form is submitted;\n * false otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /\n Emitted when the select loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when an alteration to the select's value is committed by the\n * user.\n /\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /\n Emitted when the select gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLQdsSelectElement\n\n @State() private invalid = false\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') \|\| (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n this.invalid = !valid\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n aria-invalid={this.invalid.toString()}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n this.invalid = !!error\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { currentTarget } = event\n invariant(currentTarget instanceof HTMLSlotElement)\n\n this.#select.replaceChildren(\n ...currentTarget.assignedNodes().map((node) => node.cloneNode(true)),\n )\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}

package/dist/docs.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-11-26T06:58:15",
+  "timestamp": "2024-12-03T00:49:44",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.21.0",

package/dist/esm/qds-select.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { r as registerInstance, c as createEvent, h, a as getElement } from './i
 import { a as invariant, p as pickFocusEventAttributes, d as pickInputEventAttributes, i as inheritAriaAttributes } from './helpers-fce1a265.js';
 import { C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS, V as VALID_STATE } from './controls-07c4a794.js';
-const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
+const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
 const QdsSelectStyle0 = selectCss;
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -103,15 +103,9 @@ const Select = class {
         });
         _Select_onSlotchange.set(this, (event) => {
             invariant(__classPrivateFieldGet(this, _Select_select, "f"));
-            const { target: slot } = event;
-            invariant(slot instanceof HTMLSlotElement);
-            const slotNodes = [...slot.assignedNodes()];
-            const hasDifferentChild = [...slotNodes.values()].some((slotNode, index) => {
-                invariant(__classPrivateFieldGet(this, _Select_select, "f"));
-                return !slotNode.isEqualNode(__classPrivateFieldGet(this, _Select_select, "f").childNodes[index]);
-            });
-            if (hasDifferentChild)
-                __classPrivateFieldGet(this, _Select_select, "f").replaceChildren(...slotNodes);
+            const { currentTarget } = event;
+            invariant(currentTarget instanceof HTMLSlotElement);
+            __classPrivateFieldGet(this, _Select_select, "f").replaceChildren(...currentTarget.assignedNodes().map((node) => node.cloneNode(true)));
         });
         this.size = 'standard';
         this.autoComplete = undefined;

package/dist/esm/qds-select.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-select.entry.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,wyHAAwyH,CAAC;AAC3zH,wBAAe,SAAS;;ACDxB;AACA;AACA;;;;;;;;;;;;;;;;;;AAgCA,MAAM,UAAU,GAAG;IACjB,SAAS,CAAC,KAAK,CAAC,CAAA;AAClB,CAAC,CAAA;AACD,MAAM,wBAAwB,GAAiC;IAC7D,MAAM,EAAE,CAAC;IACT,aAAa,EAAE,CAAC,CAAC;IACjB,GAAG,EAAE,UAAU;IACf,MAAM,EAAE,UAAU;IAClB,IAAI,EAAE,UAAU;IAChB,SAAS,EAAE,UAAU;IACrB,CAAC,MAAM,CAAC,QAAQ,GAAG,UAAU;CAC9B,CAAA;MAcY,MAAM;;;;;;;;;;;;;;;QA2NjB,sCAAmC,EAAE,EAAA;QAErC,iCAA2B;QAgKpB,kBAAa,GAAsC,MACxD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAA;QAEzB,mBAAc,GAAuC,MAC1D,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAA;QAE1B,sBAAiB,GAA0C,CAAC,KAAK;YACtE,IAAI,KAAK;gBACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,kBAAkB,EAAE,KAAK,EAAE,uBAAA,IAAI,sBAAQ,CAAC,CAAA;;gBAChE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC,CAAA;YAC/C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,CAAA;SACvB,CAAA;QAEM,YAAO,GAA6B,CAAC,OAAO,EAAE,MAAM;YACzD,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,uBAAA,IAAI,sBAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;SAClC,CAAA;QAEM,eAAU,GAAG,CAAC,KAAa;YAChC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,uBAAA,IAAI,sBAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAC3B,CAAA;QAEM,SAAI,GAA8B,CAAC,KAAK;YAC7C,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,OAAO,uBAAA,IAAI,sBAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;SAChC,CAAA;QAEM,cAAS,GAAmC,CAAC,IAAI;YACtD,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,OAAO,uBAAA,IAAI,sBAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;SACpC,CAAA;QAEQ,sBAAO,CAAC,MAA0B;YACzC,uBAAA,IAAI,kBAAW,MAAM,MAAA,CAAA;SACtB,EAAA;QAEQ,yBAAU,CAAC,KAAiB;YACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,EAAA;QAEQ,2BAAY;YACnB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;SAC1B,EAAA;QAEQ,0BAAW,CAAC,KAAiB;YACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,EAAA;QAEQ,0BAAW,CAAC,KAAiB;YACpC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,IAAI,CAAC,KAAK,GAAG,uBAAA,IAAI,sBAAQ,CAAC,KAAK,CAAA;YAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,EAAA;QAEQ,+BAAgB,CAAC,KAAY;YACpC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YACvB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;YAC9B,SAAS,CAAC,IAAI,YAAY,eAAe,CAAC,CAAA;YAE1C,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;YAC3C,MAAM,iBAAiB,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CACpD,CAAC,QAAc,EAAE,KAAK;gBACpB,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;gBACvB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,uBAAA,IAAI,sBAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;aAC7D,CACF,CAAA;YACD,IAAI,iBAAiB;gBAAE,uBAAA,IAAI,sBAAQ,CAAC,eAAe,CAAC,GAAG,SAAS,CAAC,CAAA;SAClE,EAAA;oBA7bqC,UAAU;;;;oBAgDkB,IAAI;sBAUR,CAAC;;;uBA8B7D,wBAAwB;;6BA0BiC,CAAC,CAAC;+BAa3D,wBAAwB;oBASiB,YAAY;iCAUoB,EAAE;wBAUZ,WAAW;qBAUnC,EAAE;4BAS8B,KAAK;uBA+BnD,KAAK;;;IAmDtB,OAAO,CAAC,KAAiB;QACjC,IAAI,uBAAA,IAAI,uDAAkB;YAAE,KAAK,CAAC,wBAAwB,EAAE,CAAA;KAC7D;IAGS,eAAe;QACvB,IAAI,uBAAA,IAAI,uDAAkB;;YAExB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;;YAC9B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,uBAAA,IAAI,oDAAe,CAAC,CAAA;KACtD;IAGS,oBAAoB;QAC5B,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;QAEvB,uBAAA,IAAI,sBAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAA;KAChD;IAGS,eAAe,CAAC,QAAgB;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QACjD,IAAI,CAAC,QAAQ;YACX,WAAW,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,WAAW,CAAA;KAC3E;IAIS,iBAAiB;QACzB,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;QAEvB,uBAAA,IAAI,sBAAQ,CAAC,KAAK,GAAG,uBAAA,IAAI,oDAAe,CAAA;QACxC,uBAAA,IAAI,sBAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;QAE9C,MAAM,EAAE,KAAK,EAAE,GAAG,uBAAA,IAAI,sBAAQ,CAAC,QAAQ,CAAA;QACvC,IAAI,KAAK;YACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,cAAc,EAAE,SAAS,EAAE,uBAAA,IAAI,sBAAQ,CAAC,CAAA;;YAEnE,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,uBAAA,IAAI,sBAAQ,CAAC,QAAQ,EACrB,uBAAA,IAAI,sBAAQ,CAAC,iBAAiB,EAC9B,uBAAA,IAAI,sBAAQ,CACb,CAAA;QACH,IAAI,CAAC,OAAO,GAAG,CAAC,KAAK,CAAA;KACtB;IAEM,iBAAiB;QACtB,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACrD,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,cAAc,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;QACrE,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,UAAU,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;QAC7D,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EACF,mBAAmB,EACnB,MAAM,IAAI,CAAC,SAAS,CAAC,iBAAiB,CACvC,CAAA;QAED,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,MAAM,uBAAA,IAAI,mDAAc,CAAC,CAAA;QACpD,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,SAAS,EAAE,MAAM,uBAAA,IAAI,sDAAiB,CAAC,CAAA;QAC1D,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,QAAQ,EAAE,MAAM,uBAAA,IAAI,sDAAiB,CAAC,MAAM,CAAC,CAAA;QAChE,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,iBAAiB,EAAE,MAAM,uBAAA,IAAI,8DAAyB,CAAC,CAAA;QAE1E,uBAAA,IAAI,+BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;QAC5D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,CAAA;KAChE;IAEM,gBAAgB;QACrB,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;QAEvB,IAAI,CAAC,iBAAiB,EAAE,CAAA;QACxB,IAAI,CAAC,aAAa,GAAG,uBAAA,IAAI,sBAAQ,CAAC,aAAa,CAAA;KAChD;IAEM,MAAM;QACX,QACE,4DACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,cAAc,EAAE,IAAI,CAAC,QAAQ,IAAI,KAAK;aACvC,eACU,uBAAA,IAAI,mDAAc,IAE7B,+EACgB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,EACrC,YAAY,EAAE,IAAI,CAAC,YAAY;;YAE/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,YAAY,eACP,uBAAA,IAAI,mDAAc,EAC7B,QAAQ,EAAE,uBAAA,IAAI,uDAAkB,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,uBAAA,IAAI,sBAAQ,EACpB,QAAQ,EAAE,uBAAA,IAAI,wBAAU,EACxB,OAAO,EAAE,uBAAA,IAAI,uBAAS,EACtB,OAAO,EAAE,uBAAA,IAAI,uBAAS,EACtB,GAAG,EAAE,uBAAA,IAAI,mBAAK,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,uBAAA,IAAI,uDAAkB,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,KAExD,uBAAA,IAAI,mCAAqB,GAC7B,EACD,IAAI,CAAC,QAAQ,KAAK,IAAI,KACrB,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,uBAAA,IAAI,mDAAc,EAC7B,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,UAAU,GACf,CACH,EACD,6DAAM,YAAY,EAAE,uBAAA,IAAI,4BAAc,GAAI,EAC1C,4DAAK,KAAK,EAAC,gBAAgB,GAAG,CAC1B,EACP;KACF;;;;;;;;;;;;;IA3JC,QACE,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;QAC3D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,OAAO,EAC/C;AACH,CAAC;IAGC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;IAEvB,OAAO,uBAAA,IAAI,sBAAQ,CAAC,OAAO,CAAA;AAC7B,CAAC;IAGC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;IAGC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;IAEvB,OAAO,uBAAA,IAAI,sBAAQ,CAAC,IAAI,CAAA;AAC1B,CAAC;IAGC,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;AACzB,CAAC;IAGC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;IAEvB,OAAO,uBAAA,IAAI,sBAAQ,CAAC,eAAe,CAAA;AACrC,CAAC,uDAiMa,CAAc,EAAE,GAAkB;IAC9C,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAA;AAChE,CAAC;;;;;","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-control-text-standard);\n grid-area: select;\n}\n\n.qds-icon {\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-color: var(--qds-theme-control-border);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n margin: 0;\n outline: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &:not(:focus)[aria-invalid='true'] {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: select;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' \| 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/\n The `<qds-select>` element represents a control that provides a menu of\n * options.\n \n @see https://quartz.se.com/build/components/select\n /\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /\n The select's size.\n \n > *NOTE:* The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n \n [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n \n [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n \n @webnative\n /\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /\n Specify whether the select should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' })\n public readonly autoFocus?: boolean\n\n /\n Prevents the select from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop() public readonly disabled?: boolean\n\n /\n The [`<form>`][] element to associate the select with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-select>` is associated\n * with its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<qds-select>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n \n @readonly\n * @webnative\n /\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] \| string = null\n\n /\n Returns the number of elements in the [`<option>`s collection][].\n \n [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n \n @readonly\n * @webnative\n /\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /\n Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n \n @webnative\n /\n @Prop() public multiple?: boolean\n\n /\n The name of the select, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n \n [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n \n See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n \n [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n \n @webnative\n /\n @Prop() public readonly required?: boolean\n\n /\n The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /\n Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly type: SelectType = 'select-one'\n\n /\n The error message that would be shown to the user if the `<qds-select>`\n * was to be checked for validity.\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /\n The [`ValidityState`][] object for this `<qds-select>`.\n \n [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n \n @readonly\n * @webnative\n /\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /\n The `value` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true }) public value? = ''\n\n /\n True if `<qds-select>` will be validated when the form is submitted;\n * false otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /\n Emitted when the select loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when an alteration to the select's value is committed by the\n * user.\n /\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /\n Emitted when the select gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLQdsSelectElement\n\n @State() private invalid = false\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') \|\| (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n this.invalid = !valid\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n aria-invalid={this.invalid.toString()}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n this.invalid = !!error\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { target: slot } = event\n invariant(slot instanceof HTMLSlotElement)\n\n const slotNodes = [...slot.assignedNodes()]\n const hasDifferentChild = [...slotNodes.values()].some(\n (slotNode: Node, index) => {\n invariant(this.#select)\n return !slotNode.isEqualNode(this.#select.childNodes[index])\n },\n )\n if (hasDifferentChild) this.#select.replaceChildren(...slotNodes)\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
1	+ {"file":"qds-select.entry.js","mappings":"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","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\nslot {\n display: none;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-control-text-standard);\n grid-area: select;\n}\n\n.qds-icon {\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-color: var(--qds-theme-control-border);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n margin: 0;\n outline: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &:not(:focus)[aria-invalid='true'] {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: select;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' \| 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/\n The `<qds-select>` element represents a control that provides a menu of\n * options.\n \n @see https://quartz.se.com/build/components/select\n /\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /\n The select's size.\n \n > *NOTE:* The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n \n [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n \n [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n \n @webnative\n /\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /\n Specify whether the select should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' })\n public readonly autoFocus?: boolean\n\n /\n Prevents the select from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop() public readonly disabled?: boolean\n\n /\n The [`<form>`][] element to associate the select with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-select>` is associated\n * with its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<qds-select>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n \n @readonly\n * @webnative\n /\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] \| string = null\n\n /\n Returns the number of elements in the [`<option>`s collection][].\n \n [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n \n @readonly\n * @webnative\n /\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /\n Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n \n @webnative\n /\n @Prop() public multiple?: boolean\n\n /\n The name of the select, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n \n [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n \n See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n \n [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n \n @webnative\n /\n @Prop() public readonly required?: boolean\n\n /\n The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /\n Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /\n Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly type: SelectType = 'select-one'\n\n /\n The error message that would be shown to the user if the `<qds-select>`\n * was to be checked for validity.\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /\n The [`ValidityState`][] object for this `<qds-select>`.\n \n [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n \n @readonly\n * @webnative\n /\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /\n The `value` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n \n [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n \n @webnative\n /\n @Prop({ mutable: true }) public value? = ''\n\n /\n True if `<qds-select>` will be validated when the form is submitted;\n * false otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /\n Emitted when the select loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when an alteration to the select's value is committed by the\n * user.\n /\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /\n Emitted when the select gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLQdsSelectElement\n\n @State() private invalid = false\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') \|\| (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n this.invalid = !valid\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n aria-invalid={this.invalid.toString()}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n this.invalid = !!error\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { currentTarget } = event\n invariant(currentTarget instanceof HTMLSlotElement)\n\n this.#select.replaceChildren(\n ...currentTarget.assignedNodes().map((node) => node.cloneNode(true)),\n )\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}

package/hydrate/index.js CHANGED Viewed

@@ -6380,7 +6380,7 @@ _Radio_inheritedAttributes = new WeakMap(), _Radio_input = new WeakMap(), _Radio
     return this.text !== undefined && this.text !== '';
 };
-const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
+const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
 var QdsSelectStyle0 = selectCss;
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -6482,15 +6482,9 @@ class Select {
         });
         _Select_onSlotchange.set(this, (event) => {
             invariant(__classPrivateFieldGet$c(this, _Select_select, "f"));
-            const { target: slot } = event;
-            invariant(slot instanceof HTMLSlotElement);
-            const slotNodes = [...slot.assignedNodes()];
-            const hasDifferentChild = [...slotNodes.values()].some((slotNode, index) => {
-                invariant(__classPrivateFieldGet$c(this, _Select_select, "f"));
-                return !slotNode.isEqualNode(__classPrivateFieldGet$c(this, _Select_select, "f").childNodes[index]);
-            });
-            if (hasDifferentChild)
-                __classPrivateFieldGet$c(this, _Select_select, "f").replaceChildren(...slotNodes);
+            const { currentTarget } = event;
+            invariant(currentTarget instanceof HTMLSlotElement);
+            __classPrivateFieldGet$c(this, _Select_select, "f").replaceChildren(...currentTarget.assignedNodes().map((node) => node.cloneNode(true)));
         });
         this.size = 'standard';
         this.autoComplete = undefined;

package/hydrate/index.mjs CHANGED Viewed

@@ -6376,7 +6376,7 @@ _Radio_inheritedAttributes = new WeakMap(), _Radio_input = new WeakMap(), _Radio
     return this.text !== undefined && this.text !== '';
 };
-const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
+const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
 var QdsSelectStyle0 = selectCss;
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -6478,15 +6478,9 @@ class Select {
         });
         _Select_onSlotchange.set(this, (event) => {
             invariant(__classPrivateFieldGet$c(this, _Select_select, "f"));
-            const { target: slot } = event;
-            invariant(slot instanceof HTMLSlotElement);
-            const slotNodes = [...slot.assignedNodes()];
-            const hasDifferentChild = [...slotNodes.values()].some((slotNode, index) => {
-                invariant(__classPrivateFieldGet$c(this, _Select_select, "f"));
-                return !slotNode.isEqualNode(__classPrivateFieldGet$c(this, _Select_select, "f").childNodes[index]);
-            });
-            if (hasDifferentChild)
-                __classPrivateFieldGet$c(this, _Select_select, "f").replaceChildren(...slotNodes);
+            const { currentTarget } = event;
+            invariant(currentTarget instanceof HTMLSlotElement);
+            __classPrivateFieldGet$c(this, _Select_select, "f").replaceChildren(...currentTarget.assignedNodes().map((node) => node.cloneNode(true)));
         });
         this.size = 'standard';
         this.autoComplete = undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@quartzds/core",
-  "version": "1.0.0-beta.62",
+  "version": "1.0.0-beta.63",
   "description": "Quartz design system web components",
   "homepage": "https://github.com/quartzds/core-foundations/tree/main/packages/core",
   "bugs": {