@api-client/ui 0.5.29 → 0.5.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/src/elements/currency/internals/Picker.d.ts.map +1 -1
- package/build/src/elements/currency/internals/Picker.js +0 -1
- package/build/src/elements/currency/internals/Picker.js.map +1 -1
- package/build/src/md/menu/internal/Menu.d.ts.map +1 -1
- package/build/src/md/menu/internal/Menu.js +20 -8
- package/build/src/md/menu/internal/Menu.js.map +1 -1
- package/build/src/md/select/internals/Select.d.ts +2 -1
- package/build/src/md/select/internals/Select.d.ts.map +1 -1
- package/build/src/md/select/internals/Select.js +46 -16
- package/build/src/md/select/internals/Select.js.map +1 -1
- package/build/src/md/select/internals/Select.styles.d.ts.map +1 -1
- package/build/src/md/select/internals/Select.styles.js +0 -5
- package/build/src/md/select/internals/Select.styles.js.map +1 -1
- package/demo/elements/currency/index.ts +80 -0
- package/demo/md/select/index.ts +1 -1
- package/package.json +1 -1
- package/src/elements/currency/internals/Picker.ts +0 -1
- package/src/md/menu/internal/Menu.ts +23 -8
- package/src/md/select/internals/Select.styles.ts +0 -5
- package/src/md/select/internals/Select.ts +47 -17
- package/test/md/select/Select.test.ts +229 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport type UiOption from './Option.js'\nimport type { UiMenuElement } from '../../menu/ui-menu.js'\n\nimport '../../text-field/ui-outlined-text-field.js'\nimport '../../menu/ui-menu.js'\nimport '../../icons/ui-icon.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport interface UiSelectChangeEvent {\n value: string | undefined\n item: UiOption | null\n}\n\n/**\n * Material Design 3 Select component that behaves like an outlined text field with dropdown.\n *\n * @fires change - Dispatched when the selection changes. The event is non-bubbling and non-cancelable.\n * The `event.detail` object contains the `value` and `item` properties.\n * @fires open - Dispatched when the dropdown opens\n * @fires close - Dispatched when the dropdown closes\n */\nexport default class UiSelect extends LitElement {\n static readonly formAssociated = true\n #internals = this.attachInternals()\n\n /**\n * The value has a private member so that we can set the value without triggering\n * the side effects.\n */\n #value: string | undefined\n\n /**\n * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.\n * When set programmatically, it will update the selected option if a matching option exists.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select value=\"apple\">\n * <ui-option value=\"apple\">Apple</ui-option>\n * <ui-option value=\"banana\">Banana</ui-option>\n * </ui-select>\n * ```\n */\n get value(): string | undefined {\n return this.#value\n }\n\n @property({ type: String })\n set value(newValue: string | undefined) {\n const oldValue = this.#value\n if (newValue === oldValue) return\n this.#value = newValue\n this.requestUpdate()\n }\n\n /**\n * The name attribute for form submission. This value will be used as the key\n * when the form is submitted.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select name=\"country\" value=\"us\">\n * <ui-option value=\"us\">United States</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: String }) accessor name: string | undefined\n\n /**\n * The label text displayed in the select field. Provides accessible labeling\n * and is shown as the floating label in the outlined text field.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select label=\"Select a country\">\n * <ui-option value=\"us\">United States</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: String }) accessor label: string | undefined\n\n /**\n * Whether the select is required for form validation. When true, the select\n * must have a value selected for the form to be valid.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select required label=\"Required field\">\n * <ui-option value=\"option1\">Option 1</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: Boolean }) accessor required = false\n\n /**\n * Whether the select is in an invalid state. This is typically set automatically\n * during validation, but can be set manually to indicate validation errors.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select invalid invalidText=\"Please select a valid option\">\n * <ui-option value=\"option1\">Option 1</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: Boolean }) accessor invalid: boolean | undefined\n\n /**\n * The error message to display when the select is invalid. This text is shown\n * below the select field when `invalid` is true.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select invalid invalidText=\"This field is required\">\n * <ui-option value=\"option1\">Option 1</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: String }) accessor invalidText: string | undefined\n\n /**\n * @attribute\n */\n @property({ type: String }) accessor supportingText: string | undefined\n\n /**\n * Whether the select is disabled. When disabled, the select cannot be interacted\n * with and will not receive focus or respond to user input.\n *\n * @default false\n * @attribute\n * @example\n * ```html\n * <ui-select disabled label=\"Disabled select\">\n * <ui-option value=\"option1\">Option 1</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n /**\n * Whether the dropdown menu is currently open. This property reflects the\n * current state of the dropdown and can be set programmatically to open/close it.\n *\n * @default false\n * @example\n * ```javascript\n * // Open the dropdown programmatically\n * selectElement.open = true;\n *\n * // Close the dropdown\n * selectElement.open = false;\n * ```\n */\n @property({ type: Boolean, reflect: true }) accessor open = false\n\n @state() accessor selectedOption: UiOption | null = null\n @state() accessor ariaActiveDescendant: string | undefined\n @query('.menu') accessor menu!: UiMenuElement\n\n /**\n * Returns the currently selected option element. This provides access to the\n * full `ui-option` element, not just its value.\n *\n * @readonly\n * @example\n * ```javascript\n * const select = document.querySelector('ui-select');\n * const selectedItem = select.selectedItem;\n * if (selectedItem) {\n * console.log('Selected option:', selectedItem.textContent);\n * }\n * ```\n */\n get selectedItem(): UiOption | null {\n return this.selectedOption\n }\n\n /**\n * Returns the text content that should be displayed in the select field.\n * This is the rendered value of the currently selected option.\n *\n * @readonly\n * @example\n * ```javascript\n * const select = document.querySelector('ui-select');\n * console.log('Display text:', select.renderValue);\n * ```\n */\n get renderValue(): string {\n const item = this.selectedOption\n return item ? item.renderValue : ''\n }\n\n /**\n * Returns the form element that contains this select, if any.\n * Part of the form-associated custom element API.\n *\n * @readonly\n */\n get form(): HTMLFormElement | null {\n return this.#internals.form\n }\n\n /**\n * Returns the validity state of the select element.\n * Part of the form-associated custom element API.\n *\n * @readonly\n */\n get validity(): ValidityState {\n return this.#internals.validity\n }\n\n /**\n * Returns the validation message for the select element.\n * Part of the form-associated custom element API.\n *\n * @readonly\n */\n get validationMessage(): string {\n return this.#internals.validationMessage\n }\n\n /**\n * Returns whether the select element will be validated when the form is submitted.\n * Part of the form-associated custom element API.\n *\n * @readonly\n */\n get willValidate(): boolean {\n return this.#internals.willValidate\n }\n\n /**\n * Checks the validity of the select element and returns true if valid.\n * Part of the form-associated custom element API.\n *\n * @returns {boolean} True if the element is valid, false otherwise\n * @example\n * ```javascript\n * const select = document.querySelector('ui-select');\n * if (!select.checkValidity()) {\n * console.log('Select is invalid:', select.validationMessage);\n * }\n * ```\n */\n checkValidity(): boolean {\n return this.#internals.checkValidity()\n }\n\n constructor() {\n super()\n this.addEventListener('click', this.handleClick.bind(this))\n this.addEventListener('blur', this.handleBlur.bind(this))\n this.addEventListener('keydown', this.handleKeydown.bind(this))\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n this.setAttribute('role', 'combobox')\n this.setAttribute('aria-haspopup', 'listbox')\n this.setAttribute('aria-controls', 'menu')\n if (!this.disabled) {\n this.setAttribute('tabindex', '0')\n }\n }\n\n /**\n * Resets the select to its initial state. Called automatically when the parent\n * form is reset. Part of the form-associated custom element API.\n *\n * @example\n * ```javascript\n * const select = document.querySelector('ui-select');\n * select.formResetCallback(); // Clears the selection\n * ```\n */\n formResetCallback(): void {\n this.value = undefined\n }\n\n /**\n * Restores the select's state from saved form data. Called automatically when\n * the browser restores form state. Part of the form-associated custom element API.\n *\n * @param {string | null} state - The saved state to restore\n */\n formStateRestoreCallback(state: string | null): void {\n this.value = state ?? undefined\n }\n\n /**\n * Validates the select element and updates its validity state. This is called\n * automatically during property changes, but can be called manually to trigger validation.\n *\n * @example\n * ```javascript\n * const select = document.querySelector('ui-select');\n * select.validate();\n * if (select.invalid) {\n * console.log('Validation failed:', select.invalidText);\n * }\n * ```\n */\n validate(): void {\n let message = ''\n if (this.required && !this.value) {\n message = 'Please select an item.'\n this.#internals.setValidity({ valueMissing: true }, message)\n } else {\n this.#internals.setValidity({})\n }\n this.invalid = !this.#internals.validity.valid\n this.invalidText = message\n }\n\n protected override willUpdate(changedProperties: PropertyValues<this>): void {\n super.willUpdate(changedProperties)\n if (changedProperties.has('disabled')) {\n setDisabled(this, this.disabled)\n }\n if (changedProperties.has('open')) {\n this.handleOpenChange()\n }\n if (changedProperties.has('value')) {\n this.setCurrentOption()\n this.#internals.setFormValue(this.value ?? null)\n this.validate()\n }\n if (changedProperties.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label)\n } else {\n this.removeAttribute('aria-label')\n }\n }\n }\n\n protected override firstUpdated(cp: PropertyValues): void {\n super.firstUpdated(cp)\n this.setCurrentOption()\n this.#internals.setFormValue(this.value ?? null)\n }\n\n protected async setCurrentOption(): Promise<void> {\n await this.updateComplete\n if (this.value) {\n const options = this.querySelectorAll<UiOption>('ui-option')\n this.selectedOption = Array.from(options).find((option) => option.value === this.value) || null\n } else {\n this.selectedOption = null\n }\n }\n\n protected handleKeydown(e: KeyboardEvent): void {\n if (this.disabled || e.defaultPrevented) return\n if (this.open) {\n switch (e.key) {\n case 'Tab': {\n // If menu is open and Tab is pressed, close it and allow normal tab navigation\n if (this.open) {\n this.open = false\n }\n break\n }\n case 'Escape': {\n if (this.open) {\n e.preventDefault()\n this.open = false\n this.focus() // Return focus to the select element\n }\n break\n }\n case 'ArrowDown':\n e.preventDefault()\n this.menu.highlightNext()\n return\n case 'ArrowUp':\n e.preventDefault()\n this.menu.highlightPrevious()\n return\n case 'Home':\n e.preventDefault()\n this.menu.highlightFirst()\n return\n case 'End':\n e.preventDefault()\n this.menu.highlightLast()\n return\n case 'Enter':\n case ' ':\n if (this.menu.highlightListItem) {\n e.preventDefault()\n this.menu.notifySelect(this.menu.highlightListItem as UiOption)\n }\n return\n }\n } else {\n switch (e.key) {\n case 'Enter':\n case ' ': {\n if (!this.open) {\n e.preventDefault()\n this.open = true\n }\n break\n }\n case 'ArrowDown':\n case 'ArrowUp': {\n if (!this.open) {\n e.preventDefault()\n this.open = true\n }\n // If menu is open, let the menu handle arrow keys\n break\n }\n }\n }\n }\n\n protected handleBlur(e: FocusEvent): void {\n if (this.disabled) return\n\n // Check if focus is moving to the menu or one of its children\n const relatedTarget = e.relatedTarget as HTMLElement\n\n if (relatedTarget && this.contains(relatedTarget)) {\n // Focus is moving to the menu, keep it open\n return\n }\n\n // Close the menu when focus leaves the component\n this.open = false\n }\n\n protected handleClick(e: Event): void {\n if (this.disabled || e.defaultPrevented) return\n e.preventDefault()\n e.stopPropagation()\n this.open = true\n }\n\n protected async handleOpenChange(): Promise<void> {\n const menu = this.menu\n if (!menu) {\n // The status can be set before the menu is rendered\n return\n }\n this.setAttribute('aria-expanded', String(this.open))\n if (this.open) {\n menu.showPopover()\n // menu.focus()\n if (this.selectedOption) {\n this.menu.highlightItem(this.selectedOption)\n } else {\n this.menu.highlightFirst()\n }\n this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n this.focus()\n } else {\n menu.hidePopover()\n this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n }\n }\n\n handleSelect(e: CustomEvent<{ item: UiOption }>): void {\n e.stopPropagation()\n const item = e.detail.item\n this.selectedOption = item\n this.#value = item.value\n this.open = false\n\n // Dispatch change event\n const changeEvent = new CustomEvent<UiSelectChangeEvent>('change', {\n detail: { value: this.value, item: item },\n bubbles: false,\n composed: true,\n })\n this.dispatchEvent(changeEvent)\n this.focus()\n }\n\n handleHighlightChange(e: CustomEvent<{ item: UiOption | null }>): void {\n this.ariaActiveDescendant = e.detail.item?.id\n }\n\n handleMenuClose(): void {\n this.open = false\n this.focus()\n }\n\n override render(): TemplateResult {\n const classes = classMap({\n 'ui-select': true,\n 'open': this.open,\n 'disabled': this.disabled,\n })\n return html`${this.renderFocusRing()}\n <div class=\"${classes}\" aria-activedescendant=${this.ariaActiveDescendant || ''}>\n ${this.renderInput()} ${this.renderMenu()}\n </div> `\n }\n\n protected renderInput(): TemplateResult {\n return html`<ui-outlined-text-field\n .name=${this.name}\n .label=${this.label}\n .value=${this.renderValue}\n .disabled=${this.disabled}\n .required=${this.required}\n readonly\n tabindex=\"-1\"\n inert\n aria-hidden=\"true\"\n .invalid=${this.invalid}\n .invalidText=${this.invalidText || ''}\n .supportingText=${this.supportingText || ''}\n class=\"input\"\n >\n <ui-icon slot=\"suffix\">arrow_drop_down</ui-icon>\n </ui-outlined-text-field>`\n }\n\n protected renderMenu(): TemplateResult {\n return html`<ui-menu\n id=\"menu\"\n class=\"menu\"\n popover=\"auto\"\n selector=\"ui-option\"\n @select=\"${this.handleSelect}\"\n @close=\"${this.handleMenuClose}\"\n @highlightchange=\"${this.handleHighlightChange}\"\n >\n <slot></slot>\n </ui-menu>`\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>`\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport type UiOption from './Option.js'\nimport type { UiMenuElement } from '../../menu/ui-menu.js'\nimport { nanoid } from 'nanoid'\n\nimport '../../text-field/ui-outlined-text-field.js'\nimport '../../menu/ui-menu.js'\nimport '../../icons/ui-icon.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport interface UiSelectChangeEvent {\n value: string | undefined\n item: UiOption | null\n}\n\n/**\n * Material Design 3 Select component that behaves like an outlined text field with dropdown.\n *\n * @fires change - Dispatched when the selection changes. The event is non-bubbling and non-cancelable.\n * The `event.detail` object contains the `value` and `item` properties.\n * @fires open - Dispatched when the dropdown opens\n * @fires close - Dispatched when the dropdown closes\n */\nexport default class UiSelect extends LitElement {\n static readonly formAssociated = true\n #internals = this.attachInternals()\n\n /**\n * The value has a private member so that we can set the value without triggering\n * the side effects.\n */\n #value: string | undefined\n\n /**\n * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.\n * When set programmatically, it will update the selected option if a matching option exists.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select value=\"apple\">\n * <ui-option value=\"apple\">Apple</ui-option>\n * <ui-option value=\"banana\">Banana</ui-option>\n * </ui-select>\n * ```\n */\n get value(): string | undefined {\n return this.#value\n }\n\n @property({ type: String })\n set value(newValue: string | undefined) {\n const oldValue = this.#value\n if (newValue === oldValue) return\n this.#value = newValue\n this.requestUpdate()\n }\n\n /**\n * The name attribute for form submission. This value will be used as the key\n * when the form is submitted.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select name=\"country\" value=\"us\">\n * <ui-option value=\"us\">United States</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: String }) accessor name: string | undefined\n\n /**\n * The label text displayed in the select field. Provides accessible labeling\n * and is shown as the floating label in the outlined text field.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select label=\"Select a country\">\n * <ui-option value=\"us\">United States</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: String }) accessor label: string | undefined\n\n /**\n * Whether the select is required for form validation. When true, the select\n * must have a value selected for the form to be valid.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select required label=\"Required field\">\n * <ui-option value=\"option1\">Option 1</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: Boolean }) accessor required = false\n\n /**\n * Whether the select is in an invalid state. This is typically set automatically\n * during validation, but can be set manually to indicate validation errors.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select invalid invalidText=\"Please select a valid option\">\n * <ui-option value=\"option1\">Option 1</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: Boolean }) accessor invalid: boolean | undefined\n\n /**\n * The error message to display when the select is invalid. This text is shown\n * below the select field when `invalid` is true.\n *\n * @attribute\n * @example\n * ```html\n * <ui-select invalid invalidText=\"This field is required\">\n * <ui-option value=\"option1\">Option 1</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: String }) accessor invalidText: string | undefined\n\n /**\n * @attribute\n */\n @property({ type: String }) accessor supportingText: string | undefined\n\n /**\n * Whether the select is disabled. When disabled, the select cannot be interacted\n * with and will not receive focus or respond to user input.\n *\n * @default false\n * @attribute\n * @example\n * ```html\n * <ui-select disabled label=\"Disabled select\">\n * <ui-option value=\"option1\">Option 1</ui-option>\n * </ui-select>\n * ```\n */\n @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n /**\n * Whether the dropdown menu is currently open. This property reflects the\n * current state of the dropdown and can be set programmatically to open/close it.\n *\n * @default false\n * @example\n * ```javascript\n * // Open the dropdown programmatically\n * selectElement.open = true;\n *\n * // Close the dropdown\n * selectElement.open = false;\n * ```\n */\n @property({ type: Boolean, reflect: true }) accessor open = false\n\n @state() accessor selectedOption: UiOption | null = null\n @state() accessor ariaActiveDescendant: string | undefined\n @query('.menu') accessor menu!: UiMenuElement\n\n /**\n * Returns the currently selected option element. This provides access to the\n * full `ui-option` element, not just its value.\n *\n * @readonly\n * @example\n * ```javascript\n * const select = document.querySelector('ui-select');\n * const selectedItem = select.selectedItem;\n * if (selectedItem) {\n * console.log('Selected option:', selectedItem.textContent);\n * }\n * ```\n */\n get selectedItem(): UiOption | null {\n return this.selectedOption\n }\n\n /**\n * Returns the text content that should be displayed in the select field.\n * This is the rendered value of the currently selected option.\n *\n * @readonly\n * @example\n * ```javascript\n * const select = document.querySelector('ui-select');\n * console.log('Display text:', select.renderValue);\n * ```\n */\n get renderValue(): string {\n const item = this.selectedOption\n return item ? item.renderValue : ''\n }\n\n /**\n * Returns the form element that contains this select, if any.\n * Part of the form-associated custom element API.\n *\n * @readonly\n */\n get form(): HTMLFormElement | null {\n return this.#internals.form\n }\n\n /**\n * Returns the validity state of the select element.\n * Part of the form-associated custom element API.\n *\n * @readonly\n */\n get validity(): ValidityState {\n return this.#internals.validity\n }\n\n /**\n * Returns the validation message for the select element.\n * Part of the form-associated custom element API.\n *\n * @readonly\n */\n get validationMessage(): string {\n return this.#internals.validationMessage\n }\n\n /**\n * Returns whether the select element will be validated when the form is submitted.\n * Part of the form-associated custom element API.\n *\n * @readonly\n */\n get willValidate(): boolean {\n return this.#internals.willValidate\n }\n\n /**\n * Checks the validity of the select element and returns true if valid.\n * Part of the form-associated custom element API.\n *\n * @returns {boolean} True if the element is valid, false otherwise\n * @example\n * ```javascript\n * const select = document.querySelector('ui-select');\n * if (!select.checkValidity()) {\n * console.log('Select is invalid:', select.validationMessage);\n * }\n * ```\n */\n checkValidity(): boolean {\n return this.#internals.checkValidity()\n }\n\n constructor() {\n super()\n this.addEventListener('click', this.handleClick.bind(this))\n this.addEventListener('blur', this.handleBlur.bind(this))\n this.addEventListener('keydown', this.handleKeydown.bind(this))\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n this.setAttribute('role', 'combobox')\n this.setAttribute('aria-haspopup', 'listbox')\n this.setAttribute('aria-controls', 'menu')\n if (!this.disabled) {\n this.setAttribute('tabindex', '0')\n }\n if (!this.id) {\n this.id = `select-${nanoid(6)}`\n }\n }\n\n /**\n * Resets the select to its initial state. Called automatically when the parent\n * form is reset. Part of the form-associated custom element API.\n *\n * @example\n * ```javascript\n * const select = document.querySelector('ui-select');\n * select.formResetCallback(); // Clears the selection\n * ```\n */\n formResetCallback(): void {\n this.value = undefined\n }\n\n /**\n * Restores the select's state from saved form data. Called automatically when\n * the browser restores form state. Part of the form-associated custom element API.\n *\n * @param {string | null} state - The saved state to restore\n */\n formStateRestoreCallback(state: string | null): void {\n this.value = state ?? undefined\n }\n\n /**\n * Validates the select element and updates its validity state. This is called\n * automatically during property changes, but can be called manually to trigger validation.\n *\n * @example\n * ```javascript\n * const select = document.querySelector('ui-select');\n * select.validate();\n * if (select.invalid) {\n * console.log('Validation failed:', select.invalidText);\n * }\n * ```\n */\n validate(): void {\n let message = ''\n if (this.required && !this.value) {\n message = 'Please select an item.'\n this.#internals.setValidity({ valueMissing: true }, message)\n } else {\n this.#internals.setValidity({})\n }\n this.invalid = !this.#internals.validity.valid\n this.invalidText = message\n }\n\n protected override willUpdate(changedProperties: PropertyValues<this>): void {\n super.willUpdate(changedProperties)\n if (changedProperties.has('disabled')) {\n setDisabled(this, this.disabled)\n }\n if (changedProperties.has('open')) {\n this.handleOpenChange()\n }\n if (changedProperties.has('value')) {\n this.setCurrentOption()\n this.#internals.setFormValue(this.value ?? null)\n this.validate()\n }\n if (changedProperties.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label)\n } else {\n this.removeAttribute('aria-label')\n }\n }\n }\n\n protected override firstUpdated(cp: PropertyValues): void {\n super.firstUpdated(cp)\n this.setCurrentOption()\n this.#internals.setFormValue(this.value ?? null)\n }\n\n protected async setCurrentOption(): Promise<void> {\n await this.updateComplete\n const options = this.querySelectorAll<UiOption>('ui-option')\n if (this.value) {\n this.selectedOption = Array.from(options).find((option) => option.value === this.value) || null\n } else {\n const selected = Array.from(options).find((option) => option.selected)\n if (selected) {\n this.selectedOption = selected\n this.#value = selected.value\n } else {\n this.selectedOption = null\n }\n }\n }\n\n protected handleKeydown(e: KeyboardEvent): void {\n if (this.disabled || e.defaultPrevented) return\n if (this.open) {\n switch (e.key) {\n case 'Tab': {\n // If menu is open and Tab is pressed, close it and allow normal tab navigation\n if (this.open) {\n this.open = false\n }\n break\n }\n case 'Escape': {\n if (this.open) {\n e.preventDefault()\n this.open = false\n this.focus() // Return focus to the select element\n }\n break\n }\n case 'ArrowDown':\n e.preventDefault()\n this.menu.highlightNext()\n return\n case 'ArrowUp':\n e.preventDefault()\n this.menu.highlightPrevious()\n return\n case 'Home':\n e.preventDefault()\n this.menu.highlightFirst()\n return\n case 'End':\n e.preventDefault()\n this.menu.highlightLast()\n return\n case 'Enter':\n case ' ':\n if (this.menu.highlightListItem) {\n e.preventDefault()\n this.menu.notifySelect(this.menu.highlightListItem as UiOption)\n }\n return\n }\n } else {\n switch (e.key) {\n case 'Enter':\n case ' ': {\n if (!this.open) {\n e.preventDefault()\n this.open = true\n }\n break\n }\n case 'ArrowDown':\n case 'ArrowUp': {\n if (!this.open) {\n e.preventDefault()\n this.open = true\n }\n // If menu is open, let the menu handle arrow keys\n break\n }\n }\n }\n }\n\n protected handleBlur(e: FocusEvent): void {\n if (this.disabled) return\n\n // Check if focus is moving to the menu or one of its children\n const relatedTarget = e.relatedTarget as HTMLElement\n\n if (relatedTarget && this.contains(relatedTarget)) {\n // Focus is moving to the menu, keep it open\n return\n }\n\n // Close the menu when focus leaves the component\n this.open = false\n }\n\n protected handleClick(e: Event): void {\n if (this.disabled || e.defaultPrevented) return\n e.preventDefault()\n e.stopPropagation()\n this.open = true\n }\n\n protected async handleOpenChange(): Promise<void> {\n const menu = this.menu\n if (!menu) {\n // The status can be set before the menu is rendered\n return\n }\n this.setAttribute('aria-expanded', String(this.open))\n if (this.open) {\n menu.showPopover()\n // menu.focus()\n if (this.selectedOption) {\n this.menu.highlightItem(this.selectedOption)\n } else {\n this.menu.highlightFirst()\n }\n this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n this.focus()\n } else {\n menu.hidePopover()\n this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n }\n }\n\n handleSelect(e: CustomEvent<{ item: UiOption }>): void {\n e.stopPropagation()\n const item = e.detail.item\n this.selectedOption = item\n this.#value = item.value\n this.open = false\n\n // Dispatch change event\n const changeEvent = new CustomEvent<UiSelectChangeEvent>('change', {\n detail: { value: this.value, item: item },\n bubbles: false,\n composed: true,\n })\n this.dispatchEvent(changeEvent)\n this.focus()\n }\n\n handleHighlightChange(e: CustomEvent<{ item: UiOption | null }>): void {\n this.ariaActiveDescendant = e.detail.item?.id\n }\n\n handleMenuClose(): void {\n this.open = false\n this.focus()\n }\n\n protected renderInput(): TemplateResult {\n const styles = {\n 'anchor-name': `--${this.id}`,\n }\n return html`<ui-outlined-text-field\n .name=${this.name}\n .label=${this.label}\n .value=${this.renderValue}\n .disabled=${this.disabled}\n .required=${this.required}\n readonly\n tabindex=\"-1\"\n .inert=${true}\n aria-hidden=\"true\"\n .invalid=${this.invalid}\n .invalidText=${this.invalidText || ''}\n .supportingText=${this.supportingText || ''}\n class=\"input\"\n style=${styleMap(styles)}\n part=\"input\"\n >\n <ui-icon part=\"icon\" slot=\"suffix\">arrow_drop_down</ui-icon>\n </ui-outlined-text-field>`\n }\n\n protected renderMenu(): TemplateResult {\n const styles = {\n 'position-anchor': `--${this.id}`,\n }\n return html`<ui-menu\n id=\"menu\"\n class=\"menu\"\n part=\"menu\"\n style=${styleMap(styles)}\n popover=\"auto\"\n selector=\"ui-option\"\n @select=\"${this.handleSelect}\"\n @close=\"${this.handleMenuClose}\"\n @highlightchange=\"${this.handleHighlightChange}\"\n >\n <slot @slotchange=\"${this.handleSlotChange}\"></slot>\n </ui-menu>`\n }\n\n protected async handleSlotChange(): Promise<void> {\n // When options change, re-evaluate the current selection\n // only if we don't have an explicit value set\n if (!this.value) {\n await this.setCurrentOption()\n this.requestUpdate()\n }\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>`\n }\n\n override render(): TemplateResult {\n const classes = classMap({\n 'ui-select': true,\n 'open': this.open,\n 'disabled': this.disabled,\n })\n return html`${this.renderFocusRing()}\n <div class=\"${classes}\" aria-activedescendant=${this.ariaActiveDescendant || ''}>\n ${this.renderInput()} ${this.renderMenu()}\n </div> `\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":";AAEA,
|
|
1
|
+
{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":";AAEA,wBAcC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"Select.styles.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;CAcjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: inline-block;\n position: relative;\n outline: none;\n --md-focus-ring-shape-end-end: var(--md-sys-shape-corner-extra-small);\n --md-focus-ring-shape-end-start: var(--md-sys-shape-corner-extra-small);\n --md-focus-ring-shape-start-end: var(--md-sys-shape-corner-extra-small);\n --md-focus-ring-shape-start-start: var(--md-sys-shape-corner-extra-small);\n }\n\n .input {\n cursor: default;\n }\n`\n"]}
|
|
@@ -6,6 +6,7 @@ import type { Currency, CurrencyPickerError } from '../../../src/elements/curren
|
|
|
6
6
|
import '../../../src/elements/currency/currency-picker.js'
|
|
7
7
|
import '../../../src/md/button/ui-button.js'
|
|
8
8
|
import '../../../src/md/checkbox/ui-checkbox.js'
|
|
9
|
+
import '../../../src/md/dialog/ui-dialog.js'
|
|
9
10
|
|
|
10
11
|
class CurrencyPickerDemoPage extends DemoPage {
|
|
11
12
|
override accessor componentName = 'Currency Picker'
|
|
@@ -18,6 +19,8 @@ class CurrencyPickerDemoPage extends DemoPage {
|
|
|
18
19
|
|
|
19
20
|
@reactive() accessor lastChangeEvent = 'No changes yet'
|
|
20
21
|
@reactive() accessor lastErrorEvent = 'No errors yet'
|
|
22
|
+
@reactive() accessor dialogOpen = false
|
|
23
|
+
@reactive() accessor dialogFormSelected: string[] = []
|
|
21
24
|
|
|
22
25
|
private readonly allowedCurrencies = ['USD', 'EUR', 'GBP', 'JPY', 'CAD']
|
|
23
26
|
|
|
@@ -45,6 +48,32 @@ class CurrencyPickerDemoPage extends DemoPage {
|
|
|
45
48
|
this.lastErrorEvent = `Error: ${JSON.stringify(event.detail, null, 2)}`
|
|
46
49
|
}
|
|
47
50
|
|
|
51
|
+
handleDialogFormChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
|
|
52
|
+
this.dialogFormSelected = event.detail.codes
|
|
53
|
+
this.lastChangeEvent = `Dialog Form: ${JSON.stringify(event.detail, null, 2)}`
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
handleOpenDialog(): void {
|
|
57
|
+
this.dialogOpen = true
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
handleCloseDialog(): void {
|
|
61
|
+
this.dialogOpen = false
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
handleDialogFormSubmit(event: Event): void {
|
|
65
|
+
event.preventDefault()
|
|
66
|
+
const formData = new FormData(event.target as HTMLFormElement)
|
|
67
|
+
console.log('Dialog form submitted:', Object.fromEntries(formData.entries()))
|
|
68
|
+
|
|
69
|
+
if (this.dialogFormSelected.length === 0) {
|
|
70
|
+
alert('Please select a currency before submitting.')
|
|
71
|
+
} else {
|
|
72
|
+
alert(`Dialog form submitted with currency: ${this.dialogFormSelected.join(', ')}`)
|
|
73
|
+
this.dialogOpen = false
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
48
77
|
handleClearSingle(): void {
|
|
49
78
|
const picker = document.querySelector('#single-picker') as HTMLElement & { clearSelection(): void }
|
|
50
79
|
picker?.clearSelection()
|
|
@@ -252,6 +281,57 @@ class CurrencyPickerDemoPage extends DemoPage {
|
|
|
252
281
|
<div class="output-content">${this.lastErrorEvent}</div>
|
|
253
282
|
</div>
|
|
254
283
|
</section>
|
|
284
|
+
|
|
285
|
+
<section class="demo-section">
|
|
286
|
+
<h3>Dialog Form Integration</h3>
|
|
287
|
+
<p>Test currency picker rendering inside a dialog that's inside a form.</p>
|
|
288
|
+
|
|
289
|
+
<ui-button @click="${this.handleOpenDialog}">Open Currency Selection Dialog</ui-button>
|
|
290
|
+
|
|
291
|
+
<ui-dialog ?open="${this.dialogOpen}" modal @close="${this.handleCloseDialog}">
|
|
292
|
+
<span slot="title">Select Currency</span>
|
|
293
|
+
|
|
294
|
+
<form @submit="${this.handleDialogFormSubmit}">
|
|
295
|
+
<div class="demo-controls">
|
|
296
|
+
<currency-picker
|
|
297
|
+
id="dialog-picker"
|
|
298
|
+
label="Choose Currency"
|
|
299
|
+
name="dialogCurrency"
|
|
300
|
+
required
|
|
301
|
+
multi
|
|
302
|
+
.selected="${this.dialogFormSelected}"
|
|
303
|
+
supportingText="Select currencies for your account"
|
|
304
|
+
@change="${this.handleDialogFormChange}"
|
|
305
|
+
@error="${this.handleError}"
|
|
306
|
+
></currency-picker>
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<div slot="button">
|
|
310
|
+
<ui-button type="button" color="text" value="dismiss">Cancel</ui-button>
|
|
311
|
+
<ui-button type="submit" color="text" value="confirm">Save Selection</ui-button>
|
|
312
|
+
</div>
|
|
313
|
+
</form>
|
|
314
|
+
</ui-dialog>
|
|
315
|
+
|
|
316
|
+
<div class="output-section">
|
|
317
|
+
<h4>Dialog Form Selection</h4>
|
|
318
|
+
<div class="output-content">${this.dialogFormSelected.join(', ') || 'None'}</div>
|
|
319
|
+
</div>
|
|
320
|
+
</section>
|
|
321
|
+
|
|
322
|
+
<section class="demo-section">
|
|
323
|
+
<h3>Complex Dialog Scenario</h3>
|
|
324
|
+
<p>Additional test with multiple layers to identify potential z-index or stacking context issues.</p>
|
|
325
|
+
|
|
326
|
+
<div
|
|
327
|
+
style="position: relative; z-index: 1; background: var(--md-sys-color-surface-variant); padding: 16px; border-radius: 8px;"
|
|
328
|
+
>
|
|
329
|
+
<h4>Container with relative positioning</h4>
|
|
330
|
+
<p>This container has position: relative and z-index: 1 to test stacking context issues.</p>
|
|
331
|
+
|
|
332
|
+
<ui-button @click="${this.handleOpenDialog}">Open Dialog from Positioned Container</ui-button>
|
|
333
|
+
</div>
|
|
334
|
+
</section>
|
|
255
335
|
`
|
|
256
336
|
}
|
|
257
337
|
|
package/demo/md/select/index.ts
CHANGED
|
@@ -29,7 +29,7 @@ class ComponentDemoPage extends DemoPage {
|
|
|
29
29
|
<h2>Basic Select</h2>
|
|
30
30
|
<p>Select a fruit from the list:</p>
|
|
31
31
|
<ui-select id="basic-select" @change="${this.handleBasicSelectChange}" label="Select a fruit">
|
|
32
|
-
<ui-option value="apple">Apple</ui-option>
|
|
32
|
+
<ui-option value="apple" selected>Apple</ui-option>
|
|
33
33
|
<ui-option value="banana">Banana</ui-option>
|
|
34
34
|
<ui-option value="cherry">Cherry</ui-option>
|
|
35
35
|
<ui-option value="date">Date</ui-option>
|
package/package.json
CHANGED
|
@@ -764,7 +764,6 @@ export default class CurrencyPicker extends LitElement {
|
|
|
764
764
|
<ui-select
|
|
765
765
|
label="${this.label}"
|
|
766
766
|
@change="${this.handleCurrencySelect}"
|
|
767
|
-
menuPositioning="popover"
|
|
768
767
|
?disabled="${this.disabled}"
|
|
769
768
|
?required="${this.required}"
|
|
770
769
|
.supportingText="${this.supportingText || ''}"
|
|
@@ -118,12 +118,19 @@ export default class Menu extends UiList {
|
|
|
118
118
|
// Let CSS anchor positioning handle the positioning automatically
|
|
119
119
|
// Only intervene if we need to set max-height for overflow cases
|
|
120
120
|
const box = this.getBoundingClientRect()
|
|
121
|
-
const menuBottom = box.top + box.height
|
|
122
|
-
const menuRight = box.left + box.width
|
|
123
121
|
|
|
124
122
|
// Reset any previous manual positioning to let CSS anchor positioning work
|
|
125
123
|
this.style.removeProperty('position-area')
|
|
126
124
|
this.style.removeProperty('max-height')
|
|
125
|
+
this.style.removeProperty('max-width')
|
|
126
|
+
|
|
127
|
+
// Check if the menu content is being clipped
|
|
128
|
+
const isVerticallyClipped = this.scrollHeight > this.clientHeight
|
|
129
|
+
const isHorizontallyClipped = this.scrollWidth > this.clientWidth
|
|
130
|
+
|
|
131
|
+
// Get the actual bottom and right edges of the menu
|
|
132
|
+
const menuBottom = box.top + box.height
|
|
133
|
+
const menuRight = box.left + box.width
|
|
127
134
|
|
|
128
135
|
// Detect if menu is positioned above or below the anchor
|
|
129
136
|
// by checking if the menu is in the upper or lower half of the viewport
|
|
@@ -139,16 +146,24 @@ export default class Menu extends UiList {
|
|
|
139
146
|
this.classList.remove('menu-positioned-above')
|
|
140
147
|
}
|
|
141
148
|
|
|
142
|
-
// Only set max-height if the menu would overflow
|
|
143
|
-
if (menuBottom > innerHeight) {
|
|
144
|
-
|
|
149
|
+
// Only set max-height if the menu would overflow the viewport OR is already clipped
|
|
150
|
+
if (menuBottom > innerHeight || isVerticallyClipped) {
|
|
151
|
+
let availableHeight: number
|
|
152
|
+
|
|
153
|
+
if (isMenuInUpperHalf) {
|
|
154
|
+
// Menu is positioned below the anchor - available space is from top to bottom of viewport
|
|
155
|
+
availableHeight = innerHeight - box.top
|
|
156
|
+
} else {
|
|
157
|
+
// Menu is positioned above the anchor - available space is from top of viewport to bottom of menu
|
|
158
|
+
availableHeight = box.top + box.height
|
|
159
|
+
}
|
|
160
|
+
|
|
145
161
|
this.style.maxHeight = `${Math.max(200, availableHeight - 20)}px`
|
|
146
162
|
}
|
|
147
163
|
|
|
148
|
-
if
|
|
164
|
+
// Only set max-width if the menu would overflow the viewport OR is already clipped
|
|
165
|
+
if (menuRight > innerWidth || isHorizontallyClipped) {
|
|
149
166
|
const availableWidth = innerWidth - box.left
|
|
150
|
-
// Let CSS anchor positioning handle horizontal flipping
|
|
151
|
-
// We could set max-width if needed
|
|
152
167
|
if (availableWidth < 200) {
|
|
153
168
|
this.style.maxWidth = `${Math.max(180, availableWidth - 20)}px`
|
|
154
169
|
}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { html, LitElement, PropertyValues, TemplateResult } from 'lit'
|
|
2
2
|
import { property, query, state } from 'lit/decorators.js'
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js'
|
|
4
|
+
import { styleMap } from 'lit/directives/style-map.js'
|
|
4
5
|
import { setDisabled } from '../../../lib/disabled.js'
|
|
5
6
|
import type UiOption from './Option.js'
|
|
6
7
|
import type { UiMenuElement } from '../../menu/ui-menu.js'
|
|
8
|
+
import { nanoid } from 'nanoid'
|
|
7
9
|
|
|
8
10
|
import '../../text-field/ui-outlined-text-field.js'
|
|
9
11
|
import '../../menu/ui-menu.js'
|
|
@@ -274,6 +276,9 @@ export default class UiSelect extends LitElement {
|
|
|
274
276
|
if (!this.disabled) {
|
|
275
277
|
this.setAttribute('tabindex', '0')
|
|
276
278
|
}
|
|
279
|
+
if (!this.id) {
|
|
280
|
+
this.id = `select-${nanoid(6)}`
|
|
281
|
+
}
|
|
277
282
|
}
|
|
278
283
|
|
|
279
284
|
/**
|
|
@@ -355,11 +360,17 @@ export default class UiSelect extends LitElement {
|
|
|
355
360
|
|
|
356
361
|
protected async setCurrentOption(): Promise<void> {
|
|
357
362
|
await this.updateComplete
|
|
363
|
+
const options = this.querySelectorAll<UiOption>('ui-option')
|
|
358
364
|
if (this.value) {
|
|
359
|
-
const options = this.querySelectorAll<UiOption>('ui-option')
|
|
360
365
|
this.selectedOption = Array.from(options).find((option) => option.value === this.value) || null
|
|
361
366
|
} else {
|
|
362
|
-
|
|
367
|
+
const selected = Array.from(options).find((option) => option.selected)
|
|
368
|
+
if (selected) {
|
|
369
|
+
this.selectedOption = selected
|
|
370
|
+
this.#value = selected.value
|
|
371
|
+
} else {
|
|
372
|
+
this.selectedOption = null
|
|
373
|
+
}
|
|
363
374
|
}
|
|
364
375
|
}
|
|
365
376
|
|
|
@@ -500,19 +511,10 @@ export default class UiSelect extends LitElement {
|
|
|
500
511
|
this.focus()
|
|
501
512
|
}
|
|
502
513
|
|
|
503
|
-
override render(): TemplateResult {
|
|
504
|
-
const classes = classMap({
|
|
505
|
-
'ui-select': true,
|
|
506
|
-
'open': this.open,
|
|
507
|
-
'disabled': this.disabled,
|
|
508
|
-
})
|
|
509
|
-
return html`${this.renderFocusRing()}
|
|
510
|
-
<div class="${classes}" aria-activedescendant=${this.ariaActiveDescendant || ''}>
|
|
511
|
-
${this.renderInput()} ${this.renderMenu()}
|
|
512
|
-
</div> `
|
|
513
|
-
}
|
|
514
|
-
|
|
515
514
|
protected renderInput(): TemplateResult {
|
|
515
|
+
const styles = {
|
|
516
|
+
'anchor-name': `--${this.id}`,
|
|
517
|
+
}
|
|
516
518
|
return html`<ui-outlined-text-field
|
|
517
519
|
.name=${this.name}
|
|
518
520
|
.label=${this.label}
|
|
@@ -521,32 +523,60 @@ export default class UiSelect extends LitElement {
|
|
|
521
523
|
.required=${this.required}
|
|
522
524
|
readonly
|
|
523
525
|
tabindex="-1"
|
|
524
|
-
inert
|
|
526
|
+
.inert=${true}
|
|
525
527
|
aria-hidden="true"
|
|
526
528
|
.invalid=${this.invalid}
|
|
527
529
|
.invalidText=${this.invalidText || ''}
|
|
528
530
|
.supportingText=${this.supportingText || ''}
|
|
529
531
|
class="input"
|
|
532
|
+
style=${styleMap(styles)}
|
|
533
|
+
part="input"
|
|
530
534
|
>
|
|
531
|
-
<ui-icon slot="suffix">arrow_drop_down</ui-icon>
|
|
535
|
+
<ui-icon part="icon" slot="suffix">arrow_drop_down</ui-icon>
|
|
532
536
|
</ui-outlined-text-field>`
|
|
533
537
|
}
|
|
534
538
|
|
|
535
539
|
protected renderMenu(): TemplateResult {
|
|
540
|
+
const styles = {
|
|
541
|
+
'position-anchor': `--${this.id}`,
|
|
542
|
+
}
|
|
536
543
|
return html`<ui-menu
|
|
537
544
|
id="menu"
|
|
538
545
|
class="menu"
|
|
546
|
+
part="menu"
|
|
547
|
+
style=${styleMap(styles)}
|
|
539
548
|
popover="auto"
|
|
540
549
|
selector="ui-option"
|
|
541
550
|
@select="${this.handleSelect}"
|
|
542
551
|
@close="${this.handleMenuClose}"
|
|
543
552
|
@highlightchange="${this.handleHighlightChange}"
|
|
544
553
|
>
|
|
545
|
-
<slot></slot>
|
|
554
|
+
<slot @slotchange="${this.handleSlotChange}"></slot>
|
|
546
555
|
</ui-menu>`
|
|
547
556
|
}
|
|
548
557
|
|
|
558
|
+
protected async handleSlotChange(): Promise<void> {
|
|
559
|
+
// When options change, re-evaluate the current selection
|
|
560
|
+
// only if we don't have an explicit value set
|
|
561
|
+
if (!this.value) {
|
|
562
|
+
await this.setCurrentOption()
|
|
563
|
+
this.requestUpdate()
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
|
|
549
567
|
protected renderFocusRing(): TemplateResult {
|
|
550
568
|
return html`<md-focus-ring part="focus-ring" class="focus-ring" .control="${this as HTMLElement}"></md-focus-ring>`
|
|
551
569
|
}
|
|
570
|
+
|
|
571
|
+
override render(): TemplateResult {
|
|
572
|
+
const classes = classMap({
|
|
573
|
+
'ui-select': true,
|
|
574
|
+
'open': this.open,
|
|
575
|
+
'disabled': this.disabled,
|
|
576
|
+
})
|
|
577
|
+
return html`${this.renderFocusRing()}
|
|
578
|
+
<div class="${classes}" aria-activedescendant=${this.ariaActiveDescendant || ''}>
|
|
579
|
+
${this.renderInput()} ${this.renderMenu()}
|
|
580
|
+
</div> `
|
|
581
|
+
}
|
|
552
582
|
}
|