npm - @digital-realty/ix-select - Versions diffs - 1.2.3 → 1.2.5 - Mend

@digital-realty/ix-select 1.2.3 → 1.2.5

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/dist/IxSelect.d.ts +2 -1
package/dist/IxSelect.js +4 -5
package/dist/IxSelect.js.map +1 -1
package/dist/ix-select.min.js +2 -2
package/dist/selectoption/IxSelectOption.d.ts +35 -7
package/dist/selectoption/IxSelectOption.js +12 -11
package/dist/selectoption/IxSelectOption.js.map +1 -1
package/dist/selectoption/ix-select-option.js +1 -1
package/dist/selectoption/ix-select-option.js.map +1 -1
package/package.json +4 -4

package/dist/IxSelect.d.ts CHANGED Viewed

@@ -5,7 +5,8 @@ import '@material/web/select/outlined-select.js';
 import { LitElement, PropertyValues } from 'lit';
 import './selectoption/ix-select-option.js';
 declare const VALUE: unique symbol;
-export declare class IxSelect extends LitElement {
+declare const ixSelectBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("@material/web/labs/behaviors/element-internals.js").WithElementInternals>, object>;
+export declare class IxSelect extends ixSelectBaseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
     /** @nocollapse */

package/dist/IxSelect.js CHANGED Viewed

@@ -1,7 +1,8 @@
 var _a;
 import { __decorate } from "tslib";
 import '@digital-realty/ix-icon/ix-icon.js';
-import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
+import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
+import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
 import { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';
 import '@material/web/select/filled-select.js';
 import '@material/web/select/outlined-select.js';
@@ -11,7 +12,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { literal, html as staticHtml } from 'lit/static-html.js';
 import './selectoption/ix-select-option.js';
 const VALUE = Symbol('value');
-export class IxSelect extends LitElement {
+const ixSelectBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
+export class IxSelect extends ixSelectBaseClass {
     constructor() {
         super(...arguments);
         this.minWidth = 0;
@@ -322,9 +324,6 @@ export class IxSelect extends LitElement {
     }
 }
 _a = VALUE;
-(() => {
-    requestUpdateOnAriaChange(IxSelect);
-})();
 /** @nocollapse */
 IxSelect.shadowRootOptions = {
     ...LitElement.shadowRootOptions,

package/dist/IxSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon/ix-icon.js';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';\nimport '@material/web/select/filled-select.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport '@material/web/select/outlined-select.js';\nimport { LitElement, PropertyValues, html, isServer, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { StaticValue, literal, html as staticHtml } from 'lit/static-html.js';\nimport './selectoption/ix-select-option.js';\n\nconst VALUE = Symbol('value');\n\nexport class IxSelect extends LitElement {\n static {\n requestUpdateOnAriaChange(IxSelect);\n }\n\n /** @nocollapse /\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /* @nocollapse /\n static readonly formAssociated = true;\n\n @query('.select') component!: Select;\n\n @property({ type: Number }) minWidth = 0;\n\n /\n Whether or not the drop-down menu should be at least the width of the select element.\n /\n @property({ type: Boolean, reflect: true, attribute: 'wide-menu' }) wideMenu =\n false;\n\n @property({ type: Number }) truncateLabelBy = 70;\n\n /\n The switch between filled and outlined.\n /\n @property({ type: Boolean, reflect: true }) filled = false;\n\n /\n The floating label for the field.\n /\n @property() label: string = '';\n\n /\n Opens the menu synchronously with no animation.\n /\n @property({ type: Boolean }) quick = false;\n\n /\n Whether or not the select is required.\n /\n @property({ type: Boolean }) required = false;\n\n /\n Disables the select.\n /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /\n The error message that replaces supporting text when `error` is true. If\n * `errorText` is an empty string, then the supporting text will continue to\n * show.\n \n This error message overrides the error message displayed by\n * `reportValidity()`.\n /\n @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n /\n Conveys additional information below the select, such as how it should\n * be used.\n /\n @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n /\n Gets or sets whether or not the select is in a visually invalid state.\n \n This error state overrides the error state controlled by\n * `reportValidity()`.\n /\n @property({ type: Boolean, reflect: true }) error = false;\n\n /\n Forces the menu to be below the select element.\n /\n @property({ type: Boolean, attribute: 'menu-below' }) menuBelow = false;\n\n /\n Text to display in the field. Only set for SSR.\n /\n @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n /\n Name of icon. It is always a string.\n /\n @property({ attribute: 'leading-icon', reflect: true })\n leadingIcon = '';\n\n /\n Name of icon. It is always a string.\n /\n @property({ attribute: 'trailing-icon', reflect: true })\n trailingIcon = '';\n\n /\n Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n \n position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n /\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' \| 'fixed' \| 'popover' = 'absolute';\n\n /\n The max time between the keystrokes of the typeahead select / menu behavior\n * before it clears the typeahead buffer.\n /\n @property({ type: Number, attribute: 'typeahead-delay' })\n typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n /\n The index of the currently selected option.\n \n Note: For SSR, set `[selected]` on the requested option and `displayText`\n * rather than setting `selectedIndex` setting `selectedIndex` will incur a\n * DOM query.\n /\n @property({ type: Number, attribute: 'selected-index' })\n selectedIndex = -1;\n\n @state() private nativeError = false;\n\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error \|\| this.nativeError;\n }\n\n private readonly internals = (this as HTMLElement) / needed for closure /\n .attachInternals();\n\n private customValidationMessage = '';\n\n get form() {\n return this.internals.form;\n }\n\n get labels() {\n return this.internals.labels;\n }\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n get value() {\n this[VALUE] = this.component.value;\n return this[VALUE];\n }\n\n set value(value: string) {\n if (isServer) return;\n this.component.value = value;\n }\n\n [VALUE] = '';\n\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n truncateLabel() {\n const label = this.component.shadowRoot?.getElementById('label');\n if (!label) return;\n const labelContainerWidth =\n label.parentElement?.getBoundingClientRect().width;\n if (!labelContainerWidth) return;\n // Avoid truncating if the value is too short to be visable\n if (labelContainerWidth < this.truncateLabelBy 2) return;\n label.style.setProperty(\n 'max-width',\n `${labelContainerWidth - this.truncateLabelBy}px`\n );\n label.style.setProperty('overflow', 'hidden');\n label.style.setProperty('text-overflow', 'ellipsis');\n label.style.setProperty('white-space', 'nowrap');\n }\n\n private handleSelection() {\n this.internals.setFormValue(this.component.value);\n this.syncValidity();\n this.truncateLabel();\n }\n\n private setMenuSize() {\n const select = this.shadowRoot?.querySelector('.select') as HTMLElement;\n const menu = select?.shadowRoot\n ?.querySelector('#listbox')\n ?.shadowRoot?.querySelector('.menu') as HTMLElement;\n\n if (menu.style) {\n menu.style.zIndex = '102';\n if (this.menuBelow) {\n const selectPosition = select?.getBoundingClientRect();\n const spaceBelow =\n window.innerHeight - (selectPosition.top + selectPosition.height);\n menu.style.maxHeight = `${spaceBelow * 0.8}px`;\n menu.style.insetBlockEnd = 'initial';\n menu.style.maxWidth = `${this.component.offsetWidth}px`;\n } else {\n // Set max-height to 70vh to prevent menus with many options from overflowing the viewport which\n // can cause some options to become inaccessible: https://telxapp.atlassian.net/browse/IXUAT-9459\n menu.style.maxHeight = '70vh';\n }\n }\n if (this.wideMenu) {\n this.minWidth = this.component.offsetWidth;\n }\n }\n\n async getUpdateComplete(): Promise<boolean> {\n await super.getUpdateComplete();\n await this.component.updateComplete;\n this.setMenuSize();\n this.internals.setFormValue(this.component.value);\n return true;\n }\n\n protected override async updated(changed: PropertyValues<Select>) {\n if (changed.has('required')) {\n this.syncValidity();\n }\n\n await this.getUpdateComplete();\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n private async syncValidity() {\n const valueMissing = this.required && !this.component.value;\n const customError = !!this.customValidationMessage;\n const validationMessage =\n this.customValidationMessage \|\|\n (valueMissing && this.getRequiredValidationMessage()) \|\|\n '';\n\n this.internals.setValidity(\n { valueMissing, customError },\n validationMessage,\n this.component\n );\n }\n\n // Returns the platform `<select>` validation message for i18n.\n // eslint-disable-next-line class-methods-use-this\n private getRequiredValidationMessage() {\n const select = document.createElement('select');\n select.required = true;\n return select.validationMessage;\n }\n\n private handleResize = () => {\n this.minWidth = 0;\n };\n\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.component.reportValidity();\n }\n\n setCustomValidity(error: string) {\n this.customValidationMessage = error;\n this.syncValidity();\n }\n\n focus() {\n (\n this.component.shadowRoot?.querySelector('.field') as HTMLFormElement\n )?.focus();\n }\n\n // eslint-disable-next-line class-methods-use-this\n onBlur(e: FocusEvent) {\n // Prevent blur event from bubbling on focus in (when focus switches to options menu)\n const el = e.relatedTarget as HTMLElement;\n if (el?.tagName === 'IX-SELECT-OPTION') {\n e.stopPropagation();\n }\n }\n\n /*\n Reset the select to its default value.\n /\n reset() {\n this.component.reset();\n this.internals.setFormValue(this.component.value);\n }\n\n /* @private /\n formResetCallback() {\n this.reset();\n }\n\n /* @private */\n formStateRestoreCallback(newState: string) {\n this.value = newState;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n if (!isServer && this.wideMenu) {\n window.addEventListener('resize', this.handleResize);\n }\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n if (!isServer && this.wideMenu) {\n window.removeEventListener('resize', this.handleResize);\n }\n }\n\n override render() {\n const tag: StaticValue = this.filled\n ? literal`md-filled-select`\n : literal`md-outlined-select`;\n\n const ariaLabel = this.label \|\| (this as ARIAMixinStrict).ariaLabel;\n\n return staticHtml`<${tag}\n ?disabled=${this.disabled}\n ?quick=${this.quick}\n ?error=${this.hasError}\n ?required=${this.required}\n ?has-leading-icon=${this.leadingIcon.length > 0}\n aria-label=${ariaLabel \|\| nothing}\n tabindex=${ifDefined(this.disabled ? undefined : '0')}\n menu-positioning=${this.menuPositioning}\n typeahead-delay=${this.typeaheadDelay}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n selected-index=${ifDefined(\n this.selectedIndex === -1 ? undefined : this.selectedIndex\n )}\n display-text=${this.displayText}\n label=${this.label}\n name=${this.name}\n @request-selection=${this.handleSelection}\n @opening=${() => {\n this.setMenuSize();\n this.dispatchEvent(\n new CustomEvent('selectMenu', {\n bubbles: true,\n composed: true,\n detail: { value: 'open' },\n })\n );\n }}\n @closing=${() => {\n this.dispatchEvent(\n new CustomEvent('selectMenu', {\n bubbles: true,\n composed: true,\n detail: { value: 'close' },\n })\n );\n }}\n class=\"select\"\n style=\"min-width:${this.minWidth}px\"\n @focus=${this.focus}\n @blur=${this.onBlur}\n >\n <slot></slot>\n ${\n this.leadingIcon\n ? html`<ix-icon slot=\"leading-icon\">${this.leadingIcon}</ix-icon>`\n : nothing\n }\n ${\n this.trailingIcon\n ? html`<ix-icon slot=\"trailing-icon\"\n >${this.trailingIcon}</ix-icon\n >`\n : nothing\n }\n <slot slot=\"aria-describedby\" name=\"aria-describedby\"></slot>\n </${tag}>`;\n }\n}\n"]}
1	+ {"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon/ix-icon.js';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';\nimport { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';\nimport { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';\nimport '@material/web/select/filled-select.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport '@material/web/select/outlined-select.js';\nimport { LitElement, PropertyValues, html, isServer, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { StaticValue, literal, html as staticHtml } from 'lit/static-html.js';\nimport './selectoption/ix-select-option.js';\n\nconst VALUE = Symbol('value');\n\nconst ixSelectBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));\n\nexport class IxSelect extends ixSelectBaseClass {\n /** @nocollapse /\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /* @nocollapse /\n static readonly formAssociated = true;\n\n @query('.select') component!: Select;\n\n @property({ type: Number }) minWidth = 0;\n\n /\n Whether or not the drop-down menu should be at least the width of the select element.\n /\n @property({ type: Boolean, reflect: true, attribute: 'wide-menu' }) wideMenu =\n false;\n\n @property({ type: Number }) truncateLabelBy = 70;\n\n /\n The switch between filled and outlined.\n /\n @property({ type: Boolean, reflect: true }) filled = false;\n\n /\n The floating label for the field.\n /\n @property() label: string = '';\n\n /\n Opens the menu synchronously with no animation.\n /\n @property({ type: Boolean }) quick = false;\n\n /\n Whether or not the select is required.\n /\n @property({ type: Boolean }) required = false;\n\n /\n Disables the select.\n /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /\n The error message that replaces supporting text when `error` is true. If\n * `errorText` is an empty string, then the supporting text will continue to\n * show.\n \n This error message overrides the error message displayed by\n * `reportValidity()`.\n /\n @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n /\n Conveys additional information below the select, such as how it should\n * be used.\n /\n @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n /\n Gets or sets whether or not the select is in a visually invalid state.\n \n This error state overrides the error state controlled by\n * `reportValidity()`.\n /\n @property({ type: Boolean, reflect: true }) error = false;\n\n /\n Forces the menu to be below the select element.\n /\n @property({ type: Boolean, attribute: 'menu-below' }) menuBelow = false;\n\n /\n Text to display in the field. Only set for SSR.\n /\n @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n /\n Name of icon. It is always a string.\n /\n @property({ attribute: 'leading-icon', reflect: true })\n leadingIcon = '';\n\n /\n Name of icon. It is always a string.\n /\n @property({ attribute: 'trailing-icon', reflect: true })\n trailingIcon = '';\n\n /\n Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n \n position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n /\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' \| 'fixed' \| 'popover' = 'absolute';\n\n /\n The max time between the keystrokes of the typeahead select / menu behavior\n * before it clears the typeahead buffer.\n /\n @property({ type: Number, attribute: 'typeahead-delay' })\n typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n /\n The index of the currently selected option.\n \n Note: For SSR, set `[selected]` on the requested option and `displayText`\n * rather than setting `selectedIndex` setting `selectedIndex` will incur a\n * DOM query.\n /\n @property({ type: Number, attribute: 'selected-index' })\n selectedIndex = -1;\n\n @state() private nativeError = false;\n\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error \|\| this.nativeError;\n }\n\n private readonly internals = (this as HTMLElement) / needed for closure /\n .attachInternals();\n\n private customValidationMessage = '';\n\n get form() {\n return this.internals.form;\n }\n\n get labels() {\n return this.internals.labels;\n }\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n get value() {\n this[VALUE] = this.component.value;\n return this[VALUE];\n }\n\n set value(value: string) {\n if (isServer) return;\n this.component.value = value;\n }\n\n [VALUE] = '';\n\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n truncateLabel() {\n const label = this.component.shadowRoot?.getElementById('label');\n if (!label) return;\n const labelContainerWidth =\n label.parentElement?.getBoundingClientRect().width;\n if (!labelContainerWidth) return;\n // Avoid truncating if the value is too short to be visable\n if (labelContainerWidth < this.truncateLabelBy 2) return;\n label.style.setProperty(\n 'max-width',\n `${labelContainerWidth - this.truncateLabelBy}px`\n );\n label.style.setProperty('overflow', 'hidden');\n label.style.setProperty('text-overflow', 'ellipsis');\n label.style.setProperty('white-space', 'nowrap');\n }\n\n private handleSelection() {\n this.internals.setFormValue(this.component.value);\n this.syncValidity();\n this.truncateLabel();\n }\n\n private setMenuSize() {\n const select = this.shadowRoot?.querySelector('.select') as HTMLElement;\n const menu = select?.shadowRoot\n ?.querySelector('#listbox')\n ?.shadowRoot?.querySelector('.menu') as HTMLElement;\n\n if (menu.style) {\n menu.style.zIndex = '102';\n if (this.menuBelow) {\n const selectPosition = select?.getBoundingClientRect();\n const spaceBelow =\n window.innerHeight - (selectPosition.top + selectPosition.height);\n menu.style.maxHeight = `${spaceBelow * 0.8}px`;\n menu.style.insetBlockEnd = 'initial';\n menu.style.maxWidth = `${this.component.offsetWidth}px`;\n } else {\n // Set max-height to 70vh to prevent menus with many options from overflowing the viewport which\n // can cause some options to become inaccessible: https://telxapp.atlassian.net/browse/IXUAT-9459\n menu.style.maxHeight = '70vh';\n }\n }\n if (this.wideMenu) {\n this.minWidth = this.component.offsetWidth;\n }\n }\n\n async getUpdateComplete(): Promise<boolean> {\n await super.getUpdateComplete();\n await this.component.updateComplete;\n this.setMenuSize();\n this.internals.setFormValue(this.component.value);\n return true;\n }\n\n protected override async updated(changed: PropertyValues<Select>) {\n if (changed.has('required')) {\n this.syncValidity();\n }\n\n await this.getUpdateComplete();\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n private async syncValidity() {\n const valueMissing = this.required && !this.component.value;\n const customError = !!this.customValidationMessage;\n const validationMessage =\n this.customValidationMessage \|\|\n (valueMissing && this.getRequiredValidationMessage()) \|\|\n '';\n\n this.internals.setValidity(\n { valueMissing, customError },\n validationMessage,\n this.component\n );\n }\n\n // Returns the platform `<select>` validation message for i18n.\n // eslint-disable-next-line class-methods-use-this\n private getRequiredValidationMessage() {\n const select = document.createElement('select');\n select.required = true;\n return select.validationMessage;\n }\n\n private handleResize = () => {\n this.minWidth = 0;\n };\n\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.component.reportValidity();\n }\n\n setCustomValidity(error: string) {\n this.customValidationMessage = error;\n this.syncValidity();\n }\n\n focus() {\n (\n this.component.shadowRoot?.querySelector('.field') as HTMLFormElement\n )?.focus();\n }\n\n // eslint-disable-next-line class-methods-use-this\n onBlur(e: FocusEvent) {\n // Prevent blur event from bubbling on focus in (when focus switches to options menu)\n const el = e.relatedTarget as HTMLElement;\n if (el?.tagName === 'IX-SELECT-OPTION') {\n e.stopPropagation();\n }\n }\n\n /*\n Reset the select to its default value.\n /\n reset() {\n this.component.reset();\n this.internals.setFormValue(this.component.value);\n }\n\n /* @private /\n formResetCallback() {\n this.reset();\n }\n\n /* @private */\n formStateRestoreCallback(newState: string) {\n this.value = newState;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n if (!isServer && this.wideMenu) {\n window.addEventListener('resize', this.handleResize);\n }\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n if (!isServer && this.wideMenu) {\n window.removeEventListener('resize', this.handleResize);\n }\n }\n\n override render() {\n const tag: StaticValue = this.filled\n ? literal`md-filled-select`\n : literal`md-outlined-select`;\n\n const ariaLabel = this.label \|\| (this as ARIAMixinStrict).ariaLabel;\n\n return staticHtml`<${tag}\n ?disabled=${this.disabled}\n ?quick=${this.quick}\n ?error=${this.hasError}\n ?required=${this.required}\n ?has-leading-icon=${this.leadingIcon.length > 0}\n aria-label=${ariaLabel \|\| nothing}\n tabindex=${ifDefined(this.disabled ? undefined : '0')}\n menu-positioning=${this.menuPositioning}\n typeahead-delay=${this.typeaheadDelay}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n selected-index=${ifDefined(\n this.selectedIndex === -1 ? undefined : this.selectedIndex\n )}\n display-text=${this.displayText}\n label=${this.label}\n name=${this.name}\n @request-selection=${this.handleSelection}\n @opening=${() => {\n this.setMenuSize();\n this.dispatchEvent(\n new CustomEvent('selectMenu', {\n bubbles: true,\n composed: true,\n detail: { value: 'open' },\n })\n );\n }}\n @closing=${() => {\n this.dispatchEvent(\n new CustomEvent('selectMenu', {\n bubbles: true,\n composed: true,\n detail: { value: 'close' },\n })\n );\n }}\n class=\"select\"\n style=\"min-width:${this.minWidth}px\"\n @focus=${this.focus}\n @blur=${this.onBlur}\n >\n <slot></slot>\n ${\n this.leadingIcon\n ? html`<ix-icon slot=\"leading-icon\">${this.leadingIcon}</ix-icon>`\n : nothing\n }\n ${\n this.trailingIcon\n ? html`<ix-icon slot=\"trailing-icon\"\n >${this.trailingIcon}</ix-icon\n >`\n : nothing\n }\n <slot slot=\"aria-describedby\" name=\"aria-describedby\"></slot>\n </${tag}>`;\n }\n}\n"]}

package/dist/ix-select.min.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{LitElement,html,nothing,css,isServer}from"lit";import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";import{DEFAULT_TYPEAHEAD_BUFFER_TIME}from"@material/web/menu/internal/menu.js";import"@material/web/select/filled-select.js";import"@material/web/select/outlined-select.js";import{property,query,queryAssignedElements,queryAssignedNodes,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{literal,html as html$1}from"lit/static-html.js";import{styles}from"@material/web/menu/internal/menuitem/menu-item-styles.css.js";import"@material/web/ripple/ripple.js";import"@material/web/focus/md-focus-ring.js";import"@material/web/labs/item/item.js";import{classMap}from"lit/directives/class-map.js";import{MenuItemController}from"@material/web/menu/internal/controllers/menuItemController.js";function createRequestSelectionEvent(){return new Event("request-selection",{bubbles:!0,composed:!0})}function createRequestDeselectionEvent(){return new Event("request-deselection",{bubbles:!0,composed:!0})}class SelectOptionController{get role(){return this.menuItemController.role}get typeaheadText(){return this.menuItemController.typeaheadText}setTypeaheadText(e){this.menuItemController.setTypeaheadText(e)}get displayText(){if(null!==this.internalDisplayText)return this.internalDisplayText;var e=this.getHeadlineElements();let t=[];return e.forEach(e=>{e.textContent&&e.textContent.trim()&&t.push(e.textContent.trim())}),t.join(" ")}setDisplayText(e){this.internalDisplayText=e}constructor(e,t){this.host=e,this.internalDisplayText=null,this.lastSelected=this.host.selected,this.firstUpdate=!0,this.onClick=()=>{this.menuItemController.onClick()},this.onKeydown=e=>{this.menuItemController.onKeydown(e)},this.menuItemController=new MenuItemController(e,t),this.getHeadlineElements=t.getHeadlineElements,e.addController(this)}hostUpdate(){this.lastSelected!==this.host.selected&&(this.host.ariaSelected=this.host.selected?"true":"false")}hostUpdated(){this.lastSelected===this.host.selected||this.firstUpdate||(this.host.selected?this.host.dispatchEvent(createRequestSelectionEvent()):this.host.dispatchEvent(createRequestDeselectionEvent())),this.lastSelected=this.host.selected,this.firstUpdate=!1}}class IxSelectOption extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.isMenuItem=!0,this.selected=!1,this.value="",this.type="option",this.selectOptionController=new SelectOptionController(this,{getHeadlineElements:()=>this.headlineElements,getSupportingTextElements:()=>this.supportingTextElements,getDefaultElements:()=>this.defaultElements,getInteractiveElement:()=>this.listItemRoot})}get typeaheadText(){return this.selectOptionController.typeaheadText}set typeaheadText(e){this.selectOptionController.setTypeaheadText(e)}get displayText(){return this.selectOptionController.displayText}set displayText(e){this.selectOptionController.setDisplayText(e)}render(){return this.renderListItem(html`<md-item><div slot="container">${this.renderRipple()} ${this.renderFocusRing()}</div><slot name="start" slot="start"></slot><slot name="end" slot="end"></slot>${this.renderBody()}</md-item>`)}renderListItem(e){return html`<li id="item" tabindex="${this.disabled?-1:0}" role="${this.selectOptionController.role}" aria-label="${this.ariaLabel||nothing}" aria-selected="${this.ariaSelected||nothing}" aria-checked="${this.ariaChecked||nothing}" aria-expanded="${this.ariaExpanded||nothing}" aria-haspopup="${this.ariaHasPopup||nothing}" class="list-item ${classMap(this.getRenderClasses())}" @click="${this.selectOptionController.onClick}" @keydown="${this.selectOptionController.onKeydown}">${e}</li>`}renderRipple(){return html`<md-ripple part="ripple" for="item" ?disabled="${this.disabled}"></md-ripple>`}renderFocusRing(){return html`<md-focus-ring part="focus-ring" for="item" inward></md-focus-ring>`}getRenderClasses(){return{disabled:this.disabled,selected:this.selected}}renderBody(){return html`<slot></slot><slot name="overline" slot="overline"></slot><slot name="headline" slot="headline"></slot><slot name="supporting-text" slot="supporting-text"></slot><slot name="trailing-supporting-text" slot="trailing-supporting-text"></slot>`}focus(){var e;null!=(e=this.listItemRoot)&&e.focus()}}requestUpdateOnAriaChange(IxSelectOption),IxSelectOption.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},__decorate([property({type:Boolean,reflect:!0})],IxSelectOption.prototype,"disabled",void 0),__decorate([property({type:Boolean,attribute:"md-menu-item",reflect:!0})],IxSelectOption.prototype,"isMenuItem",void 0),__decorate([property({type:Boolean})],IxSelectOption.prototype,"selected",void 0),__decorate([property()],IxSelectOption.prototype,"value",void 0),__decorate([query(".list-item")],IxSelectOption.prototype,"listItemRoot",void 0),__decorate([queryAssignedElements({slot:"headline"})],IxSelectOption.prototype,"headlineElements",void 0),__decorate([queryAssignedElements({slot:"supporting-text"})],IxSelectOption.prototype,"supportingTextElements",void 0),__decorate([queryAssignedNodes({slot:""})],IxSelectOption.prototype,"defaultElements",void 0),__decorate([property({attribute:"typeahead-text"})],IxSelectOption.prototype,"typeaheadText",null),__decorate([property({attribute:"display-text"})],IxSelectOption.prototype,"displayText",null);class IxSelectOptionStyled extends IxSelectOption{}var _a;IxSelectOptionStyled.styles=[styles,css`ix-icon{font-size:1.5rem;display:block}[slot=end]{margin-right:2rem}[slot=start]{margin-right:-.4rem}`],window.customElements.define("ix-select-option",IxSelectOptionStyled);let VALUE=Symbol("value");class IxSelect extends LitElement{constructor(){super(...arguments),this.minWidth=0,this.wideMenu=!1,this.truncateLabelBy=70,this.filled=!1,this.label="",this.quick=!1,this.required=!1,this.disabled=!1,this.errorText="",this.supportingText="",this.error=!1,this.menuBelow=!1,this.displayText="",this.leadingIcon="",this.trailingIcon="",this.menuPositioning="absolute",this.typeaheadDelay=DEFAULT_TYPEAHEAD_BUFFER_TIME,this.selectedIndex=-1,this.nativeError=!1,this.nativeErrorText="",this.internals=this.attachInternals(),this.customValidationMessage="",this[_a]="",this.handleResize=()=>{this.minWidth=0}}get hasError(){return this.error||this.nativeError}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var e;return null!=(e=this.getAttribute("name"))?e:""}set name(e){this.setAttribute("name",e)}get validity(){return this.syncValidity(),this.internals.validity}get value(){return this[VALUE]=this.component.value,this[VALUE]}set value(e){isServer||(this.component.value=e)}get validationMessage(){return this.syncValidity(),this.internals.validationMessage}truncateLabel(){var e,t=null==(t=this.component.shadowRoot)?void 0:t.getElementById("label");!t||!(e=null==(e=t.parentElement)?void 0:e.getBoundingClientRect().width)||e<2*this.truncateLabelBy||(t.style.setProperty("max-width",e-this.truncateLabelBy+"px"),t.style.setProperty("overflow","hidden"),t.style.setProperty("text-overflow","ellipsis"),t.style.setProperty("white-space","nowrap"))}handleSelection(){this.internals.setFormValue(this.component.value),this.syncValidity(),this.truncateLabel()}setMenuSize(){var e=null==(e=this.shadowRoot)?void 0:e.querySelector(".select"),t=null==(t=null==(t=null==(t=null==e?void 0:e.shadowRoot)?void 0:t.querySelector("#listbox"))?void 0:t.shadowRoot)?void 0:t.querySelector(".menu");t.style&&(t.style.zIndex="102",this.menuBelow?(e=null==e?void 0:e.getBoundingClientRect(),e=window.innerHeight-(e.top+e.height),t.style.maxHeight=.8*e+"px",t.style.insetBlockEnd="initial",t.style.maxWidth=this.component.offsetWidth+"px"):t.style.maxHeight="70vh"),this.wideMenu&&(this.minWidth=this.component.offsetWidth)}async getUpdateComplete(){return await super.getUpdateComplete(),await this.component.updateComplete,this.setMenuSize(),this.internals.setFormValue(this.component.value),!0}async updated(e){e.has("required")&&this.syncValidity(),await this.getUpdateComplete()}getErrorText(){return this.error?this.errorText:this.nativeErrorText}async syncValidity(){var e=this.required&&!this.component.value,t=!!this.customValidationMessage,i=this.customValidationMessage||e&&this.getRequiredValidationMessage()||"";this.internals.setValidity({valueMissing:e,customError:t},i,this.component)}getRequiredValidationMessage(){var e=document.createElement("select");return e.required=!0,e.validationMessage}checkValidity(){return this.syncValidity(),this.internals.checkValidity()}reportValidity(){return this.component.reportValidity()}setCustomValidity(e){this.customValidationMessage=e,this.syncValidity()}focus(){var e;null!=(e=null==(e=this.component.shadowRoot)?void 0:e.querySelector(".field"))&&e.focus()}onBlur(e){var t=e.relatedTarget;"IX-SELECT-OPTION"===(null==t?void 0:t.tagName)&&e.stopPropagation()}reset(){this.component.reset(),this.internals.setFormValue(this.component.value)}formResetCallback(){this.reset()}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),!isServer&&this.wideMenu&&window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),!isServer&&this.wideMenu&&window.removeEventListener("resize",this.handleResize)}render(){var e=this.filled?literal`md-filled-select`:literal`md-outlined-select`,t=this.label||this.ariaLabel;return html$1`<${e}
+import{LitElement,html,nothing,css,isServer}from"lit";import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import{mixinDelegatesAria}from"@material/web/internal/aria/delegate.js";import{mixinElementInternals}from"@material/web/labs/behaviors/element-internals.js";import{DEFAULT_TYPEAHEAD_BUFFER_TIME}from"@material/web/menu/internal/menu.js";import"@material/web/select/filled-select.js";import"@material/web/select/outlined-select.js";import{property,query,queryAssignedElements,queryAssignedNodes,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{literal,html as html$1}from"lit/static-html.js";import{styles}from"@material/web/menu/internal/menuitem/menu-item-styles.js";import"@material/web/ripple/ripple.js";import"@material/web/focus/md-focus-ring.js";import"@material/web/labs/item/item.js";import{classMap}from"lit/directives/class-map.js";import{MenuItemController}from"@material/web/menu/internal/controllers/menuItemController.js";function createRequestSelectionEvent(){return new Event("request-selection",{bubbles:!0,composed:!0})}function createRequestDeselectionEvent(){return new Event("request-deselection",{bubbles:!0,composed:!0})}class SelectOptionController{get role(){return this.menuItemController.role}get typeaheadText(){return this.menuItemController.typeaheadText}setTypeaheadText(e){this.menuItemController.setTypeaheadText(e)}get displayText(){if(null!==this.internalDisplayText)return this.internalDisplayText;var e=this.getHeadlineElements();let t=[];return e.forEach(e=>{e.textContent&&e.textContent.trim()&&t.push(e.textContent.trim())}),t.join(" ")}setDisplayText(e){this.internalDisplayText=e}constructor(e,t){this.host=e,this.internalDisplayText=null,this.lastSelected=this.host.selected,this.firstUpdate=!0,this.onClick=()=>{this.menuItemController.onClick()},this.onKeydown=e=>{this.menuItemController.onKeydown(e)},this.menuItemController=new MenuItemController(e,t),this.getHeadlineElements=t.getHeadlineElements,e.addController(this)}hostUpdate(){this.lastSelected!==this.host.selected&&(this.host.ariaSelected=this.host.selected?"true":"false")}hostUpdated(){this.lastSelected===this.host.selected||this.firstUpdate||(this.host.selected?this.host.dispatchEvent(createRequestSelectionEvent()):this.host.dispatchEvent(createRequestDeselectionEvent())),this.lastSelected=this.host.selected,this.firstUpdate=!1}}let selectOptionBaseClass=mixinDelegatesAria(LitElement);class IxSelectOption extends selectOptionBaseClass{constructor(){super(...arguments),this.disabled=!1,this.isMenuItem=!0,this.selected=!1,this.value="",this.type="option",this.selectOptionController=new SelectOptionController(this,{getHeadlineElements:()=>this.headlineElements,getSupportingTextElements:()=>this.supportingTextElements,getDefaultElements:()=>this.defaultElements,getInteractiveElement:()=>this.listItemRoot})}get typeaheadText(){return this.selectOptionController.typeaheadText}set typeaheadText(e){this.selectOptionController.setTypeaheadText(e)}get displayText(){return this.selectOptionController.displayText}set displayText(e){this.selectOptionController.setDisplayText(e)}render(){return this.renderListItem(html`<md-item><div slot="container">${this.renderRipple()} ${this.renderFocusRing()}</div><slot name="start" slot="start"></slot><slot name="end" slot="end"></slot>${this.renderBody()}</md-item>`)}renderListItem(e){return html`<li id="item" tabindex="${this.disabled?-1:0}" role="${this.selectOptionController.role}" aria-label="${this.ariaLabel||nothing}" aria-selected="${this.ariaSelected||nothing}" aria-checked="${this.ariaChecked||nothing}" aria-expanded="${this.ariaExpanded||nothing}" aria-haspopup="${this.ariaHasPopup||nothing}" class="list-item ${classMap(this.getRenderClasses())}" @click="${this.selectOptionController.onClick}" @keydown="${this.selectOptionController.onKeydown}">${e}</li>`}renderRipple(){return html`<md-ripple part="ripple" for="item" ?disabled="${this.disabled}"></md-ripple>`}renderFocusRing(){return html`<md-focus-ring part="focus-ring" for="item" inward></md-focus-ring>`}getRenderClasses(){return{disabled:this.disabled,selected:this.selected}}renderBody(){return html`<slot></slot><slot name="overline" slot="overline"></slot><slot name="headline" slot="headline"></slot><slot name="supporting-text" slot="supporting-text"></slot><slot name="trailing-supporting-text" slot="trailing-supporting-text"></slot>`}focus(){var e;null!=(e=this.listItemRoot)&&e.focus()}}IxSelectOption.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},__decorate([property({type:Boolean,reflect:!0})],IxSelectOption.prototype,"disabled",void 0),__decorate([property({type:Boolean,attribute:"md-menu-item",reflect:!0})],IxSelectOption.prototype,"isMenuItem",void 0),__decorate([property({type:Boolean})],IxSelectOption.prototype,"selected",void 0),__decorate([property()],IxSelectOption.prototype,"value",void 0),__decorate([query(".list-item")],IxSelectOption.prototype,"listItemRoot",void 0),__decorate([queryAssignedElements({slot:"headline"})],IxSelectOption.prototype,"headlineElements",void 0),__decorate([queryAssignedElements({slot:"supporting-text"})],IxSelectOption.prototype,"supportingTextElements",void 0),__decorate([queryAssignedNodes({slot:""})],IxSelectOption.prototype,"defaultElements",void 0),__decorate([property({attribute:"typeahead-text"})],IxSelectOption.prototype,"typeaheadText",null),__decorate([property({attribute:"display-text"})],IxSelectOption.prototype,"displayText",null);class IxSelectOptionStyled extends IxSelectOption{}var _a;IxSelectOptionStyled.styles=[styles,css`ix-icon{font-size:1.5rem;display:block}[slot=end]{margin-right:2rem}[slot=start]{margin-right:-.4rem}`],window.customElements.define("ix-select-option",IxSelectOptionStyled);let VALUE=Symbol("value"),ixSelectBaseClass=mixinDelegatesAria(mixinElementInternals(LitElement));class IxSelect extends ixSelectBaseClass{constructor(){super(...arguments),this.minWidth=0,this.wideMenu=!1,this.truncateLabelBy=70,this.filled=!1,this.label="",this.quick=!1,this.required=!1,this.disabled=!1,this.errorText="",this.supportingText="",this.error=!1,this.menuBelow=!1,this.displayText="",this.leadingIcon="",this.trailingIcon="",this.menuPositioning="absolute",this.typeaheadDelay=DEFAULT_TYPEAHEAD_BUFFER_TIME,this.selectedIndex=-1,this.nativeError=!1,this.nativeErrorText="",this.internals=this.attachInternals(),this.customValidationMessage="",this[_a]="",this.handleResize=()=>{this.minWidth=0}}get hasError(){return this.error||this.nativeError}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var e;return null!=(e=this.getAttribute("name"))?e:""}set name(e){this.setAttribute("name",e)}get validity(){return this.syncValidity(),this.internals.validity}get value(){return this[VALUE]=this.component.value,this[VALUE]}set value(e){isServer||(this.component.value=e)}get validationMessage(){return this.syncValidity(),this.internals.validationMessage}truncateLabel(){var e,t=null==(t=this.component.shadowRoot)?void 0:t.getElementById("label");!t||!(e=null==(e=t.parentElement)?void 0:e.getBoundingClientRect().width)||e<2*this.truncateLabelBy||(t.style.setProperty("max-width",e-this.truncateLabelBy+"px"),t.style.setProperty("overflow","hidden"),t.style.setProperty("text-overflow","ellipsis"),t.style.setProperty("white-space","nowrap"))}handleSelection(){this.internals.setFormValue(this.component.value),this.syncValidity(),this.truncateLabel()}setMenuSize(){var e=null==(e=this.shadowRoot)?void 0:e.querySelector(".select"),t=null==(t=null==(t=null==(t=null==e?void 0:e.shadowRoot)?void 0:t.querySelector("#listbox"))?void 0:t.shadowRoot)?void 0:t.querySelector(".menu");t.style&&(t.style.zIndex="102",this.menuBelow?(e=null==e?void 0:e.getBoundingClientRect(),e=window.innerHeight-(e.top+e.height),t.style.maxHeight=.8*e+"px",t.style.insetBlockEnd="initial",t.style.maxWidth=this.component.offsetWidth+"px"):t.style.maxHeight="70vh"),this.wideMenu&&(this.minWidth=this.component.offsetWidth)}async getUpdateComplete(){return await super.getUpdateComplete(),await this.component.updateComplete,this.setMenuSize(),this.internals.setFormValue(this.component.value),!0}async updated(e){e.has("required")&&this.syncValidity(),await this.getUpdateComplete()}getErrorText(){return this.error?this.errorText:this.nativeErrorText}async syncValidity(){var e=this.required&&!this.component.value,t=!!this.customValidationMessage,i=this.customValidationMessage||e&&this.getRequiredValidationMessage()||"";this.internals.setValidity({valueMissing:e,customError:t},i,this.component)}getRequiredValidationMessage(){var e=document.createElement("select");return e.required=!0,e.validationMessage}checkValidity(){return this.syncValidity(),this.internals.checkValidity()}reportValidity(){return this.component.reportValidity()}setCustomValidity(e){this.customValidationMessage=e,this.syncValidity()}focus(){var e;null!=(e=null==(e=this.component.shadowRoot)?void 0:e.querySelector(".field"))&&e.focus()}onBlur(e){var t=e.relatedTarget;"IX-SELECT-OPTION"===(null==t?void 0:t.tagName)&&e.stopPropagation()}reset(){this.component.reset(),this.internals.setFormValue(this.component.value)}formResetCallback(){this.reset()}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),!isServer&&this.wideMenu&&window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),!isServer&&this.wideMenu&&window.removeEventListener("resize",this.handleResize)}render(){var e=this.filled?literal`md-filled-select`:literal`md-outlined-select`,t=this.label||this.ariaLabel;return html$1`<${e}
         ?disabled=${this.disabled}
         ?quick=${this.quick}
         ?error=${this.hasError}
@@ -28,4 +28,4 @@ import{LitElement,html,nothing,css,isServer}from"lit";import{__decorate}from"tsl
                   >${this.trailingIcon}</ix-icon
                 >`:nothing}
          <slot slot="aria-describedby" name="aria-describedby"></slot>
-      </${e}>`}}_a=VALUE,requestUpdateOnAriaChange(IxSelect),IxSelect.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},IxSelect.formAssociated=!0,__decorate([query(".select")],IxSelect.prototype,"component",void 0),__decorate([property({type:Number})],IxSelect.prototype,"minWidth",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"wide-menu"})],IxSelect.prototype,"wideMenu",void 0),__decorate([property({type:Number})],IxSelect.prototype,"truncateLabelBy",void 0),__decorate([property({type:Boolean,reflect:!0})],IxSelect.prototype,"filled",void 0),__decorate([property()],IxSelect.prototype,"label",void 0),__decorate([property({type:Boolean})],IxSelect.prototype,"quick",void 0),__decorate([property({type:Boolean})],IxSelect.prototype,"required",void 0),__decorate([property({type:Boolean,reflect:!0})],IxSelect.prototype,"disabled",void 0),__decorate([property({type:String,attribute:"error-text"})],IxSelect.prototype,"errorText",void 0),__decorate([property({type:String,attribute:"supporting-text"})],IxSelect.prototype,"supportingText",void 0),__decorate([property({type:Boolean,reflect:!0})],IxSelect.prototype,"error",void 0),__decorate([property({type:Boolean,attribute:"menu-below"})],IxSelect.prototype,"menuBelow",void 0),__decorate([property({type:String,attribute:"display-text"})],IxSelect.prototype,"displayText",void 0),__decorate([property({attribute:"leading-icon",reflect:!0})],IxSelect.prototype,"leadingIcon",void 0),__decorate([property({attribute:"trailing-icon",reflect:!0})],IxSelect.prototype,"trailingIcon",void 0),__decorate([property({attribute:"menu-positioning"})],IxSelect.prototype,"menuPositioning",void 0),__decorate([property({type:Number,attribute:"typeahead-delay"})],IxSelect.prototype,"typeaheadDelay",void 0),__decorate([property({type:Number,attribute:"selected-index"})],IxSelect.prototype,"selectedIndex",void 0),__decorate([state()],IxSelect.prototype,"nativeError",void 0),__decorate([state()],IxSelect.prototype,"nativeErrorText",void 0);class IxSelectStyled extends IxSelect{}IxSelectStyled.styles=css`:host([disabled]){pointer-events:none}:host([error]){--md-outlined-select-text-field-outline-width:2px}.select{display:block}ix-icon{height:var(--ix-select-leading-icon-height,1.5rem);color:var(--ix-select-leading-icon-color,var(--clr-graphics-fill,#09224199));margin-inline-start:var(--ix-select-leading-icon-inset)}`,window.customElements.define("ix-select",IxSelectStyled);export{IxSelectStyled};
+      </${e}>`}}_a=VALUE,IxSelect.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},IxSelect.formAssociated=!0,__decorate([query(".select")],IxSelect.prototype,"component",void 0),__decorate([property({type:Number})],IxSelect.prototype,"minWidth",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"wide-menu"})],IxSelect.prototype,"wideMenu",void 0),__decorate([property({type:Number})],IxSelect.prototype,"truncateLabelBy",void 0),__decorate([property({type:Boolean,reflect:!0})],IxSelect.prototype,"filled",void 0),__decorate([property()],IxSelect.prototype,"label",void 0),__decorate([property({type:Boolean})],IxSelect.prototype,"quick",void 0),__decorate([property({type:Boolean})],IxSelect.prototype,"required",void 0),__decorate([property({type:Boolean,reflect:!0})],IxSelect.prototype,"disabled",void 0),__decorate([property({type:String,attribute:"error-text"})],IxSelect.prototype,"errorText",void 0),__decorate([property({type:String,attribute:"supporting-text"})],IxSelect.prototype,"supportingText",void 0),__decorate([property({type:Boolean,reflect:!0})],IxSelect.prototype,"error",void 0),__decorate([property({type:Boolean,attribute:"menu-below"})],IxSelect.prototype,"menuBelow",void 0),__decorate([property({type:String,attribute:"display-text"})],IxSelect.prototype,"displayText",void 0),__decorate([property({attribute:"leading-icon",reflect:!0})],IxSelect.prototype,"leadingIcon",void 0),__decorate([property({attribute:"trailing-icon",reflect:!0})],IxSelect.prototype,"trailingIcon",void 0),__decorate([property({attribute:"menu-positioning"})],IxSelect.prototype,"menuPositioning",void 0),__decorate([property({type:Number,attribute:"typeahead-delay"})],IxSelect.prototype,"typeaheadDelay",void 0),__decorate([property({type:Number,attribute:"selected-index"})],IxSelect.prototype,"selectedIndex",void 0),__decorate([state()],IxSelect.prototype,"nativeError",void 0),__decorate([state()],IxSelect.prototype,"nativeErrorText",void 0);class IxSelectStyled extends IxSelect{}IxSelectStyled.styles=css`:host([disabled]){pointer-events:none}:host([error]){--md-outlined-select-text-field-outline-width:2px}.select{display:block}ix-icon{height:var(--ix-select-leading-icon-height,1.5rem);color:var(--ix-select-leading-icon-color,var(--clr-graphics-fill,#09224199));margin-inline-start:var(--ix-select-leading-icon-inset)}`,window.customElements.define("ix-select",IxSelectStyled);export{IxSelectStyled};

package/dist/selectoption/IxSelectOption.d.ts CHANGED Viewed

@@ -8,15 +8,42 @@ import '@material/web/focus/md-focus-ring.js';
 import '@material/web/labs/item/item.js';
 import { LitElement } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
-import { SelectOption } from './selectOptionController.js';
+import { MenuItem } from '@material/web/menu/internal/controllers/menuItemController.js';
 /**
- * @fires close-menu Closes the encapsulating menu on
- * @fires request-selection Requests the parent md-select to select this element
- * (and deselect others if single-selection) when `selected` changed to `true`.
- * @fires request-deselection Requests the parent md-select to deselect this
- * element when `selected` changed to `false`.
+ * The interface specific to a Select Option
  */
-export declare class IxSelectOption extends LitElement implements SelectOption {
+interface SelectOptionSelf {
+    /**
+     * The form value associated with the Select Option. (Note: the visual portion
+     * of the SelectOption is the headline defined in ListItem)
+     */
+    value: string;
+    /**
+     * Whether or not the SelectOption is selected.
+     */
+    selected: boolean;
+    /**
+     * The text to display in the select when selected. Defaults to the
+     * textContent of the Element slotted into the headline.
+     */
+    displayText: string;
+}
+/**
+ * The interface to implement for a select option. Additionally, the element
+ * must have `md-list-item` and `md-menu-item` attributes on the host.
+ */
+export type SelectOption = SelectOptionSelf & MenuItem;
+declare const selectOptionBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, object>;
+/**
+ * @fires close-menu {CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>}
+ * Closes the encapsulating menu on closable interaction. --bubbles --composed
+ * @fires request-selection {Event} Requests the parent md-select to select this
+ * element (and deselect others if single-selection) when `selected` changed to
+ * `true`. --bubbles --composed
+ * @fires request-deselection {Event} Requests the parent md-select to deselect
+ * this element when `selected` changed to `false`. --bubbles --composed
+ */
+export declare class IxSelectOption extends selectOptionBaseClass implements SelectOption {
     /** @nocollapse */
     static shadowRootOptions: {
         delegatesFocus: boolean;
@@ -84,3 +111,4 @@ export declare class IxSelectOption extends LitElement implements SelectOption {
     protected renderBody(): import("lit-html").TemplateResult<1>;
     focus(): void;
 }
+export {};

package/dist/selectoption/IxSelectOption.js CHANGED Viewed

@@ -10,16 +10,20 @@ import '@material/web/labs/item/item.js';
 import { html, LitElement, nothing } from 'lit';
 import { property, query, queryAssignedElements, queryAssignedNodes, } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
-import { SelectOptionController, } from './selectOptionController.js';
+import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
+import { SelectOptionController } from './selectOptionController.js';
+// Separate variable needed for closure.
+const selectOptionBaseClass = mixinDelegatesAria(LitElement);
 /**
- * @fires close-menu Closes the encapsulating menu on
- * @fires request-selection Requests the parent md-select to select this element
- * (and deselect others if single-selection) when `selected` changed to `true`.
- * @fires request-deselection Requests the parent md-select to deselect this
- * element when `selected` changed to `false`.
+ * @fires close-menu {CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>}
+ * Closes the encapsulating menu on closable interaction. --bubbles --composed
+ * @fires request-selection {Event} Requests the parent md-select to select this
+ * element (and deselect others if single-selection) when `selected` changed to
+ * `true`. --bubbles --composed
+ * @fires request-deselection {Event} Requests the parent md-select to deselect
+ * this element when `selected` changed to `false`. --bubbles --composed
  */
-export class IxSelectOption extends LitElement {
+export class IxSelectOption extends selectOptionBaseClass {
     constructor() {
         super(...arguments);
         /**
@@ -155,9 +159,6 @@ export class IxSelectOption extends LitElement {
         (_a = this.listItemRoot) === null || _a === void 0 ? void 0 : _a.focus();
     }
 }
-(() => {
-    requestUpdateOnAriaChange(IxSelectOption);
-})();
 /** @nocollapse */
 IxSelectOption.shadowRootOptions = {
     ...LitElement.shadowRootOptions,

package/dist/selectoption/IxSelectOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IxSelectOption.js","sourceRoot":"","sources":["../../src/selectoption/IxSelectOption.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport '@material/web/ripple/ripple.js';\nimport '@material/web/focus/md-focus-ring.js';\nimport '@material/web/labs/item/item.js';\n\nimport { html, LitElement, nothing } from 'lit';\nimport {\n property,\n query,\n queryAssignedElements,\n queryAssignedNodes,\n} from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\n\nimport {\n SelectOption,\n SelectOptionController,\n} from './selectOptionController.js';\n\n/\n @fires close-menu Closes the encapsulating menu on\n * @fires request-selection Requests the parent md-select to select this element\n * (and deselect others if single-selection) when `selected` changed to `true`.\n * @fires request-deselection Requests the parent md-select to deselect this\n * element when `selected` changed to `false`.\n /\nexport class IxSelectOption extends LitElement implements SelectOption {\n static {\n requestUpdateOnAriaChange(IxSelectOption);\n }\n\n /* @nocollapse /\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /\n Disables the item and makes it non-selectable and non-interactive.\n /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /\n READONLY: self-identifies as a menu item and sets its identifying attribute\n /\n @property({ type: Boolean, attribute: 'md-menu-item', reflect: true })\n isMenuItem = true;\n\n /\n Sets the item in the selected visual state when a submenu is opened.\n /\n @property({ type: Boolean }) selected = false;\n\n /\n Form value of the option.\n /\n @property() value = '';\n\n @query('.list-item') protected readonly listItemRoot!: HTMLElement \| null;\n\n @queryAssignedElements({ slot: 'headline' })\n protected readonly headlineElements!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'supporting-text' })\n protected readonly supportingTextElements!: HTMLElement[];\n\n @queryAssignedNodes({ slot: '' })\n protected readonly defaultElements!: Element[];\n\n type = 'option' as const;\n\n /\n The text that is selectable via typeahead. If not set, defaults to the\n * innerText of the item slotted into the `\"headline\"` slot.\n /\n get typeaheadText() {\n return this.selectOptionController.typeaheadText;\n }\n\n @property({ attribute: 'typeahead-text' })\n set typeaheadText(text: string) {\n this.selectOptionController.setTypeaheadText(text);\n }\n\n /\n The text that is displayed in the select field when selected. If not set,\n * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n /\n get displayText() {\n return this.selectOptionController.displayText;\n }\n\n @property({ attribute: 'display-text' })\n set displayText(text: string) {\n this.selectOptionController.setDisplayText(text);\n }\n\n private readonly selectOptionController = new SelectOptionController(this, {\n getHeadlineElements: () => this.headlineElements,\n getSupportingTextElements: () => this.supportingTextElements,\n getDefaultElements: () => this.defaultElements,\n getInteractiveElement: () => this.listItemRoot,\n });\n\n protected override render() {\n return this.renderListItem(html`\n <md-item>\n <div slot=\"container\">\n ${this.renderRipple()} ${this.renderFocusRing()}\n </div>\n <slot name=\"start\" slot=\"start\"></slot>\n <slot name=\"end\" slot=\"end\"></slot>\n ${this.renderBody()}\n </md-item>\n `);\n }\n\n /\n Renders the root list item.\n \n @param content the child content of the list item.\n /\n protected renderListItem(content: unknown) {\n return html`\n <li\n id=\"item\"\n tabindex=${this.disabled ? -1 : 0}\n role=${this.selectOptionController.role}\n aria-label=${(this as ARIAMixinStrict).ariaLabel \|\| nothing}\n aria-selected=${(this as ARIAMixinStrict).ariaSelected \|\| nothing}\n aria-checked=${(this as ARIAMixinStrict).ariaChecked \|\| nothing}\n aria-expanded=${(this as ARIAMixinStrict).ariaExpanded \|\| nothing}\n aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup \|\| nothing}\n class=\"list-item ${classMap(this.getRenderClasses())}\"\n @click=${this.selectOptionController.onClick}\n @keydown=${this.selectOptionController.onKeydown}\n >\n ${content}\n </li>\n `;\n }\n\n /\n Handles rendering of the ripple element.\n /\n protected renderRipple() {\n return html` <md-ripple\n part=\"ripple\"\n for=\"item\"\n ?disabled=${this.disabled}\n ></md-ripple>`;\n }\n\n /\n Handles rendering of the focus ring.\n /\n // eslint-disable-next-line class-methods-use-this\n protected renderFocusRing() {\n return html` <md-focus-ring\n part=\"focus-ring\"\n for=\"item\"\n inward\n ></md-focus-ring>`;\n }\n\n /\n Classes applied to the list item root.\n /\n protected getRenderClasses(): ClassInfo {\n return {\n disabled: this.disabled,\n selected: this.selected,\n };\n }\n\n /\n Handles rendering the headline and supporting text.\n */\n // eslint-disable-next-line class-methods-use-this\n protected renderBody() {\n return html`\n <slot></slot>\n <slot name=\"overline\" slot=\"overline\"></slot>\n <slot name=\"headline\" slot=\"headline\"></slot>\n <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n <slot\n name=\"trailing-supporting-text\"\n slot=\"trailing-supporting-text\"\n ></slot>\n `;\n }\n\n override focus() {\n // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n // work programmatically like in FF and select-option\n this.listItemRoot?.focus();\n }\n}\n"]}
1	+ {"version":3,"file":"IxSelectOption.js","sourceRoot":"","sources":["../../src/selectoption/IxSelectOption.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport '@material/web/ripple/ripple.js';\nimport '@material/web/focus/md-focus-ring.js';\nimport '@material/web/labs/item/item.js';\n\nimport { html, LitElement, nothing } from 'lit';\nimport {\n property,\n query,\n queryAssignedElements,\n queryAssignedNodes,\n} from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';\nimport { MenuItem } from '@material/web/menu/internal/controllers/menuItemController.js';\n\nimport { SelectOptionController } from './selectOptionController.js';\n\n/\n The interface specific to a Select Option\n /\ninterface SelectOptionSelf {\n /\n The form value associated with the Select Option. (Note: the visual portion\n * of the SelectOption is the headline defined in ListItem)\n /\n value: string;\n /\n Whether or not the SelectOption is selected.\n /\n selected: boolean;\n /\n The text to display in the select when selected. Defaults to the\n * textContent of the Element slotted into the headline.\n /\n displayText: string;\n}\n\n/\n The interface to implement for a select option. Additionally, the element\n * must have `md-list-item` and `md-menu-item` attributes on the host.\n /\nexport type SelectOption = SelectOptionSelf & MenuItem;\n\n// Separate variable needed for closure.\nconst selectOptionBaseClass = mixinDelegatesAria(LitElement);\n\n/\n @fires close-menu {CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>}\n * Closes the encapsulating menu on closable interaction. --bubbles --composed\n * @fires request-selection {Event} Requests the parent md-select to select this\n * element (and deselect others if single-selection) when `selected` changed to\n * `true`. --bubbles --composed\n * @fires request-deselection {Event} Requests the parent md-select to deselect\n * this element when `selected` changed to `false`. --bubbles --composed\n /\nexport class IxSelectOption\n extends selectOptionBaseClass\n implements SelectOption\n{\n /* @nocollapse /\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /\n Disables the item and makes it non-selectable and non-interactive.\n /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /\n READONLY: self-identifies as a menu item and sets its identifying attribute\n /\n @property({ type: Boolean, attribute: 'md-menu-item', reflect: true })\n isMenuItem = true;\n\n /\n Sets the item in the selected visual state when a submenu is opened.\n /\n @property({ type: Boolean }) selected = false;\n\n /\n Form value of the option.\n /\n @property() value = '';\n\n @query('.list-item') protected readonly listItemRoot!: HTMLElement \| null;\n\n @queryAssignedElements({ slot: 'headline' })\n protected readonly headlineElements!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'supporting-text' })\n protected readonly supportingTextElements!: HTMLElement[];\n\n @queryAssignedNodes({ slot: '' })\n protected readonly defaultElements!: Element[];\n\n type = 'option' as const;\n\n /\n The text that is selectable via typeahead. If not set, defaults to the\n * innerText of the item slotted into the `\"headline\"` slot.\n /\n get typeaheadText() {\n return this.selectOptionController.typeaheadText;\n }\n\n @property({ attribute: 'typeahead-text' })\n set typeaheadText(text: string) {\n this.selectOptionController.setTypeaheadText(text);\n }\n\n /\n The text that is displayed in the select field when selected. If not set,\n * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n /\n get displayText() {\n return this.selectOptionController.displayText;\n }\n\n @property({ attribute: 'display-text' })\n set displayText(text: string) {\n this.selectOptionController.setDisplayText(text);\n }\n\n private readonly selectOptionController = new SelectOptionController(this, {\n getHeadlineElements: () => this.headlineElements,\n getSupportingTextElements: () => this.supportingTextElements,\n getDefaultElements: () => this.defaultElements,\n getInteractiveElement: () => this.listItemRoot,\n });\n\n protected override render() {\n return this.renderListItem(html`\n <md-item>\n <div slot=\"container\">\n ${this.renderRipple()} ${this.renderFocusRing()}\n </div>\n <slot name=\"start\" slot=\"start\"></slot>\n <slot name=\"end\" slot=\"end\"></slot>\n ${this.renderBody()}\n </md-item>\n `);\n }\n\n /\n Renders the root list item.\n \n @param content the child content of the list item.\n /\n protected renderListItem(content: unknown) {\n return html`\n <li\n id=\"item\"\n tabindex=${this.disabled ? -1 : 0}\n role=${this.selectOptionController.role}\n aria-label=${(this as ARIAMixinStrict).ariaLabel \|\| nothing}\n aria-selected=${(this as ARIAMixinStrict).ariaSelected \|\| nothing}\n aria-checked=${(this as ARIAMixinStrict).ariaChecked \|\| nothing}\n aria-expanded=${(this as ARIAMixinStrict).ariaExpanded \|\| nothing}\n aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup \|\| nothing}\n class=\"list-item ${classMap(this.getRenderClasses())}\"\n @click=${this.selectOptionController.onClick}\n @keydown=${this.selectOptionController.onKeydown}\n >\n ${content}\n </li>\n `;\n }\n\n /\n Handles rendering of the ripple element.\n /\n protected renderRipple() {\n return html` <md-ripple\n part=\"ripple\"\n for=\"item\"\n ?disabled=${this.disabled}\n ></md-ripple>`;\n }\n\n /\n Handles rendering of the focus ring.\n /\n // eslint-disable-next-line class-methods-use-this\n protected renderFocusRing() {\n return html` <md-focus-ring\n part=\"focus-ring\"\n for=\"item\"\n inward\n ></md-focus-ring>`;\n }\n\n /\n Classes applied to the list item root.\n /\n protected getRenderClasses(): ClassInfo {\n return {\n disabled: this.disabled,\n selected: this.selected,\n };\n }\n\n /\n Handles rendering the headline and supporting text.\n */\n // eslint-disable-next-line class-methods-use-this\n protected renderBody() {\n return html`\n <slot></slot>\n <slot name=\"overline\" slot=\"overline\"></slot>\n <slot name=\"headline\" slot=\"headline\"></slot>\n <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n <slot\n name=\"trailing-supporting-text\"\n slot=\"trailing-supporting-text\"\n ></slot>\n `;\n }\n\n override focus() {\n // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n // work programmatically like in FF and select-option\n this.listItemRoot?.focus();\n }\n}\n"]}

package/dist/selectoption/ix-select-option.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { styles } from '@material/web/menu/internal/menuitem/menu-item-styles.css.js';
+import { styles } from '@material/web/menu/internal/menuitem/menu-item-styles.js';
 import { IxSelectOption } from './IxSelectOption.js';
 export class IxSelectOptionStyled extends IxSelectOption {
 }

package/dist/selectoption/ix-select-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-select-option.js","sourceRoot":"","sources":["../../src/selectoption/ix-select-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,~~8DAA8D~~,CAAC;~~AACtF~~,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,OAAO,oBAAqB,SAAQ,cAAc;;AACtC,2BAAM,GAAG;IACvB,MAAM;IACN,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styles } from '@material/web/menu/internal/menuitem/menu-item-styles.~~css.~~js';\nimport { IxSelectOption } from './IxSelectOption.js';\n\nexport class IxSelectOptionStyled extends IxSelectOption {\n static override styles = [\n styles,\n css`\n ix-icon {\n font-size: 1.5rem;\n display: block;\n }\n\n [slot='end'] {\n margin-right: 2rem;\n }\n\n [slot='start'] {\n margin-right: -0.4rem;\n }\n `,\n ];\n}\n\nwindow.customElements.define('ix-select-option', IxSelectOptionStyled);\n"]}
1	+ {"version":3,"file":"ix-select-option.js","sourceRoot":"","sources":["../../src/selectoption/ix-select-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,0DAA0D,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,OAAO,oBAAqB,SAAQ,cAAc;;AACtC,2BAAM,GAAG;IACvB,MAAM;IACN,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styles } from '@material/web/menu/internal/menuitem/menu-item-styles.js';\nimport { IxSelectOption } from './IxSelectOption.js';\n\nexport class IxSelectOptionStyled extends IxSelectOption {\n static override styles = [\n styles,\n css`\n ix-icon {\n font-size: 1.5rem;\n display: block;\n }\n\n [slot='end'] {\n margin-right: 2rem;\n }\n\n [slot='start'] {\n margin-right: -0.4rem;\n }\n `,\n ];\n}\n\nwindow.customElements.define('ix-select-option', IxSelectOptionStyled);\n"]}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-select following open-wc recommendations",
   "license": "MIT",
   "author": "interxion",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,9 +31,9 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@digital-realty/ix-icon": "^1.2.2",
+    "@digital-realty/ix-icon": "^1.2.4",
     "@lit/react": "^1.0.2",
-    "@material/web": "1.2.0",
+    "@material/web": "2.4.0",
     "lit": "^3.2.1",
     "react": "^18.2.0"
   },
@@ -109,5 +109,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "bbcb2805555472c26b6590241ee4478c7d7c2302"
+  "gitHead": "5f957be9ee993f439c24887108d7d1f35c40ab17"
 }