@m3e/web 2.5.3 → 2.5.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.
- package/dist/all.js +394 -348
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +56 -56
- package/dist/all.min.js.map +1 -1
- package/dist/autocomplete.js +14 -14
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.min.js +1 -1
- package/dist/autocomplete.min.js.map +1 -1
- package/dist/bottom-sheet.js +11 -14
- package/dist/bottom-sheet.js.map +1 -1
- package/dist/bottom-sheet.min.js +1 -1
- package/dist/bottom-sheet.min.js.map +1 -1
- package/dist/breadcrumb.js +4 -4
- package/dist/breadcrumb.js.map +1 -1
- package/dist/breadcrumb.min.js +1 -1
- package/dist/breadcrumb.min.js.map +1 -1
- package/dist/button-group.js +5 -5
- package/dist/button-group.js.map +1 -1
- package/dist/button-group.min.js +1 -1
- package/dist/button-group.min.js.map +1 -1
- package/dist/button.js +15 -15
- package/dist/button.js.map +1 -1
- package/dist/button.min.js +1 -1
- package/dist/button.min.js.map +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/checkbox.js.map +1 -1
- package/dist/checkbox.min.js +1 -1
- package/dist/checkbox.min.js.map +1 -1
- package/dist/chips.js +11 -11
- package/dist/chips.js.map +1 -1
- package/dist/chips.min.js +1 -1
- package/dist/chips.min.js.map +1 -1
- package/dist/core-a11y.js +5 -3
- package/dist/core-a11y.js.map +1 -1
- package/dist/core-a11y.min.js +4 -4
- package/dist/core-a11y.min.js.map +1 -1
- package/dist/core-anchoring.js +4 -4
- package/dist/core-anchoring.js.map +1 -1
- package/dist/core-anchoring.min.js +1 -1
- package/dist/core-anchoring.min.js.map +1 -1
- package/dist/core.js +78 -64
- package/dist/core.js.map +1 -1
- package/dist/core.min.js +1 -1
- package/dist/core.min.js.map +1 -1
- package/dist/css-custom-data.json +200 -185
- package/dist/custom-elements.json +1598 -1524
- package/dist/datepicker.js +12 -12
- package/dist/datepicker.js.map +1 -1
- package/dist/datepicker.min.js +1 -1
- package/dist/datepicker.min.js.map +1 -1
- package/dist/dialog.js +4 -4
- package/dist/dialog.js.map +1 -1
- package/dist/dialog.min.js +1 -1
- package/dist/dialog.min.js.map +1 -1
- package/dist/drawer-container.js +14 -14
- package/dist/drawer-container.js.map +1 -1
- package/dist/drawer-container.min.js +1 -1
- package/dist/drawer-container.min.js.map +1 -1
- package/dist/expansion-panel.js +4 -4
- package/dist/expansion-panel.js.map +1 -1
- package/dist/expansion-panel.min.js +1 -1
- package/dist/expansion-panel.min.js.map +1 -1
- package/dist/fab-menu.js +4 -4
- package/dist/fab-menu.js.map +1 -1
- package/dist/fab-menu.min.js +1 -1
- package/dist/fab-menu.min.js.map +1 -1
- package/dist/fab.js +2 -2
- package/dist/fab.js.map +1 -1
- package/dist/fab.min.js +1 -1
- package/dist/fab.min.js.map +1 -1
- package/dist/form-field.js +19 -19
- package/dist/form-field.js.map +1 -1
- package/dist/form-field.min.js +2 -2
- package/dist/form-field.min.js.map +1 -1
- package/dist/html-custom-data.json +54 -44
- package/dist/icon-button.js +15 -15
- package/dist/icon-button.js.map +1 -1
- package/dist/icon-button.min.js +1 -1
- package/dist/icon-button.min.js.map +1 -1
- package/dist/icon.js +1 -1
- package/dist/icon.js.map +1 -1
- package/dist/icon.min.js +1 -1
- package/dist/icon.min.js.map +1 -1
- package/dist/list.js +16 -16
- package/dist/list.js.map +1 -1
- package/dist/list.min.js +1 -1
- package/dist/list.min.js.map +1 -1
- package/dist/menu.js +20 -20
- package/dist/menu.js.map +1 -1
- package/dist/menu.min.js +1 -1
- package/dist/menu.min.js.map +1 -1
- package/dist/nav-bar.js +40 -10
- package/dist/nav-bar.js.map +1 -1
- package/dist/nav-bar.min.js +1 -1
- package/dist/nav-bar.min.js.map +1 -1
- package/dist/nav-menu.js +10 -10
- package/dist/nav-menu.js.map +1 -1
- package/dist/nav-menu.min.js +1 -1
- package/dist/nav-menu.min.js.map +1 -1
- package/dist/nav-rail.js +15 -11
- package/dist/nav-rail.js.map +1 -1
- package/dist/nav-rail.min.js +1 -1
- package/dist/nav-rail.min.js.map +1 -1
- package/dist/option.js +13 -13
- package/dist/option.js.map +1 -1
- package/dist/option.min.js +1 -1
- package/dist/option.min.js.map +1 -1
- package/dist/paginator.js +2 -2
- package/dist/paginator.js.map +1 -1
- package/dist/paginator.min.js +2 -2
- package/dist/paginator.min.js.map +1 -1
- package/dist/radio-group.js +2 -2
- package/dist/radio-group.js.map +1 -1
- package/dist/radio-group.min.js +1 -1
- package/dist/radio-group.min.js.map +1 -1
- package/dist/search.js +15 -15
- package/dist/search.js.map +1 -1
- package/dist/search.min.js +1 -1
- package/dist/search.min.js.map +1 -1
- package/dist/segmented-button.js +7 -7
- package/dist/segmented-button.js.map +1 -1
- package/dist/segmented-button.min.js +1 -1
- package/dist/segmented-button.min.js.map +1 -1
- package/dist/select.js +6 -6
- package/dist/select.js.map +1 -1
- package/dist/select.min.js +1 -1
- package/dist/select.min.js.map +1 -1
- package/dist/slider.js +5 -5
- package/dist/slider.js.map +1 -1
- package/dist/slider.min.js +1 -1
- package/dist/slider.min.js.map +1 -1
- package/dist/split-pane.js +10 -10
- package/dist/split-pane.js.map +1 -1
- package/dist/split-pane.min.js +1 -1
- package/dist/split-pane.min.js.map +1 -1
- package/dist/src/autocomplete/AutocompleteElement.d.ts.map +1 -1
- package/dist/src/bottom-sheet/BottomSheetElement.d.ts +1 -1
- package/dist/src/bottom-sheet/BottomSheetElement.d.ts.map +1 -1
- package/dist/src/button/styles/ButtonSizeStyle.d.ts.map +1 -1
- package/dist/src/button/styles/ButtonStyle.d.ts.map +1 -1
- package/dist/src/button/styles/ButtonVariantStyle.d.ts.map +1 -1
- package/dist/src/button-group/ButtonGroupElement.d.ts.map +1 -1
- package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
- package/dist/src/chips/InputChipElement.d.ts.map +1 -1
- package/dist/src/core/a11y/InteractivityChecker.d.ts +2 -1
- package/dist/src/core/a11y/InteractivityChecker.d.ts.map +1 -1
- package/dist/src/core/anchoring/FloatingPanelElement.d.ts +1 -1
- package/dist/src/core/shared/mixins/SuppressInitialAnimation.d.ts +9 -2
- package/dist/src/core/shared/mixins/SuppressInitialAnimation.d.ts.map +1 -1
- package/dist/src/core/shared/mixins/index.d.ts +0 -1
- package/dist/src/core/shared/mixins/index.d.ts.map +1 -1
- package/dist/src/core/shared/primitives/CollapsibleElement.d.ts +13 -0
- package/dist/src/core/shared/primitives/CollapsibleElement.d.ts.map +1 -1
- package/dist/src/core/shared/primitives/CollapsibleOrientation.d.ts +3 -0
- package/dist/src/core/shared/primitives/CollapsibleOrientation.d.ts.map +1 -0
- package/dist/src/core/shared/primitives/index.d.ts +1 -0
- package/dist/src/core/shared/primitives/index.d.ts.map +1 -1
- package/dist/src/datepicker/DatepickerElement.d.ts +1 -1
- package/dist/src/dialog/DialogElement.d.ts.map +1 -1
- package/dist/src/drawer-container/styles/DrawerContainerStyle.d.ts.map +1 -1
- package/dist/src/expansion-panel/ExpansionPanelElement.d.ts.map +1 -1
- package/dist/src/fab/FabElement.d.ts.map +1 -1
- package/dist/src/fab/styles/FabStyle.d.ts.map +1 -1
- package/dist/src/fab-menu/FabMenuElement.d.ts +1 -1
- package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
- package/dist/src/icon/IconElement.d.ts.map +1 -1
- package/dist/src/icon-button/styles/IconButtonSizeStyle.d.ts.map +1 -1
- package/dist/src/icon-button/styles/IconButtonStyle.d.ts.map +1 -1
- package/dist/src/icon-button/styles/IconButtonVariantStyle.d.ts.map +1 -1
- package/dist/src/menu/MenuElement.d.ts +1 -1
- package/dist/src/nav-bar/NavItemElement.d.ts +7 -1
- package/dist/src/nav-bar/NavItemElement.d.ts.map +1 -1
- package/dist/src/nav-menu/NavMenuItemElement.d.ts.map +1 -1
- package/dist/src/nav-rail/NavRailElement.d.ts +10 -5
- package/dist/src/nav-rail/NavRailElement.d.ts.map +1 -1
- package/dist/src/paginator/PaginatorElement.d.ts.map +1 -1
- package/dist/src/search/SearchBarElement.d.ts.map +1 -1
- package/dist/src/search/SearchViewElement.d.ts.map +1 -1
- package/dist/src/search/styles/SearchBarStyle.d.ts.map +1 -1
- package/dist/src/split-pane/SplitPaneElement.d.ts.map +1 -1
- package/dist/src/stepper/StepperElement.d.ts.map +1 -1
- package/dist/src/toolbar/ToolbarElement.d.ts.map +1 -1
- package/dist/src/tree/TreeItemElement.d.ts.map +1 -1
- package/dist/stepper.js +6 -6
- package/dist/stepper.js.map +1 -1
- package/dist/stepper.min.js +1 -1
- package/dist/stepper.min.js.map +1 -1
- package/dist/tabs.js +5 -5
- package/dist/tabs.js.map +1 -1
- package/dist/tabs.min.js +1 -1
- package/dist/tabs.min.js.map +1 -1
- package/dist/toc.js +7 -7
- package/dist/toc.js.map +1 -1
- package/dist/toc.min.js +1 -1
- package/dist/toc.min.js.map +1 -1
- package/dist/toolbar.js +2 -1
- package/dist/toolbar.js.map +1 -1
- package/dist/toolbar.min.js +1 -1
- package/dist/toolbar.min.js.map +1 -1
- package/dist/tooltip.js +3 -3
- package/dist/tooltip.js.map +1 -1
- package/dist/tooltip.min.js +1 -1
- package/dist/tooltip.min.js.map +1 -1
- package/dist/tree.js +9 -9
- package/dist/tree.js.map +1 -1
- package/dist/tree.min.js +1 -1
- package/dist/tree.min.js.map +1 -1
- package/package.json +1 -1
- package/dist/src/core/shared/mixins/EventAttribute.d.ts +0 -11
- package/dist/src/core/shared/mixins/EventAttribute.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.min.js","sources":["../../src/autocomplete/AutocompleteElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n HtmlFor,\r\n prefersReducedMotion,\r\n scrollIntoViewIfNeeded,\r\n forcedColorsActive,\r\n setCustomState,\r\n deleteCustomState,\r\n addCustomState,\r\n customElement,\r\n MutationController,\r\n EventAttribute,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ListKeyManager, M3eLiveAnnouncer } from \"@m3e/web/core/a11y\";\r\nimport { M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement } from \"@m3e/web/option\";\r\nimport type { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\nimport { AutocompleteFilterMode } from \"./AutocompleteFilterMode\";\r\nimport { AutocompleteQueryEventDetail } from \"./AutocompleteQueryEventDetail\";\r\n\r\n/**\r\n * Enhances a text input with suggested options.\r\n *\r\n * @description\r\n * The `m3e-autocomplete` component augments a text input field with a dynamically positioned menu of filterable suggestions,\r\n * following Material Design 3 principles. It provides real-time filtering, keyboard navigation, automatic option activation,\r\n * and text highlighting to guide user selection. The component manages focus, selection state, and menu visibility while\r\n * integrating seamlessly with form field containers and supporting both required and optional selection modes.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-autocomplete` paired with a `m3e-form-field`.\r\n * ```html\r\n * <m3e-form-field>\r\n * <label slot=\"label\" for=\"fruit\">Choose your favorite fruit</label>\r\n * <input id=\"fruit\" />\r\n * </m3e-form-field>\r\n * <m3e-autocomplete for=\"fruit\">\r\n * <m3e-option>Apples</m3e-option>\r\n * <m3e-option>Oranges</m3e-option>\r\n * <m3e-option>Bananas</m3e-option>\r\n * <m3e-option>Grapes</m3e-option>\r\n * </m3e-autocomplete>\r\n * ```\r\n *\r\n * @tag m3e-autocomplete\r\n *\r\n * @attr auto-activate - Whether the first option should be automatically activated.\r\n * @attr case-sensitive - Whether filtering is case sensitive.\r\n * @attr filter - Mode in which to filter options.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr hide-loading - Whether to hide the menu when loading options.\r\n * @attr hide-no-data - Whether to hide the menu when there are no options to show.\r\n * @attr loading - Whether options are being loaded.\r\n * @attr loading-label - The text announced and presented when loading options.\r\n * @attr no-data-label - The text announced and presented when no options are available for the current term.\r\n * @attr panel-class - Class or list of classes to be applied to the autocomplete's overlay panel.\r\n * @attr required - Whether the user is required to make a selection when interacting with the autocomplete.\r\n * @attr results-label - The text announced when available options change for the current term.\r\n *\r\n * @slot - Renders the options of the autocomplete.\r\n * @slot loading - Renders content when loading options.\r\n * @slot no-data - Renders content when there are no options to show.\r\n *\r\n * @fires toggle - Emitted when the options menu opens or closes.\r\n * @fires query - Emitted when the input is focused or when the user modifies its value.\r\n * @fires change - Emitted when the committed value changes due to selecting an option or clearing the input.\r\n */\r\n@customElement(\"m3e-autocomplete\")\r\nexport class M3eAutocompleteElement extends EventAttribute(HtmlFor(LitElement), \"query\") {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: contents;\r\n }\r\n .options {\r\n display: none;\r\n }\r\n `;\r\n\r\n /** @private */ private static __nextId = 0;\r\n\r\n /** @private */ readonly #id = `m3e-autocomplete-${M3eAutocompleteElement.__nextId}`;\r\n /** @private */ readonly #menuId = `${this.#id}-menu`;\r\n /** @private */ private _options = new Array<M3eOptionElement>();\r\n /** @private */ #clone?: HTMLElement;\r\n /** @private */ #ignoreFocusVisible = false;\r\n /** @private */ #menu?: M3eOptionPanelElement;\r\n /** @private */ #ignoreHideMenuOnBlur = false;\r\n /** @private */ #inputChanged = false;\r\n /** @private */ #hasFocus = false;\r\n /** @private */ #mutationAbortController?: AbortController;\r\n\r\n /** @private */ readonly #clickHandler = () => this.#handleClick();\r\n /** @private */ readonly #formFieldPointerDownHandler = () => this.#handleFormFieldPointerDown();\r\n /** @private */ readonly #focusHandler = () => this.#handleFocus();\r\n /** @private */ readonly #blurHandler = () => this.#handleBlur();\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n /** @private */ readonly #inputHandler = (e: Event) => this.#handleInput(e);\r\n /** @private */ readonly #changeHandler = () => this.#handleChange();\r\n /** @private */ readonly #menuToggleHandler = (e: ToggleEvent) => this.#handleMenuToggle(e);\r\n /** @private */ readonly #menuPointerDownHandler = (e: PointerEvent) => this.#handleMenuPointerDown(e);\r\n /** @private */ readonly #menuPointerUpHandler = (e: PointerEvent) => this.#handleMenuPointerUp(e);\r\n /** @private */ #menuPressedOption?: M3eOptionElement;\r\n\r\n /** @private */ private readonly _listKeyManager = new ListKeyManager<M3eOptionElement>()\r\n .withWrap()\r\n .withHomeAndEnd()\r\n .withPageUpAndDown()\r\n .withVerticalOrientation()\r\n .withSkipPredicate((item) => item.disabled || item.hidden === true)\r\n .onActiveItemChange(() => {\r\n if (this._listKeyManager.activeItem) {\r\n this.#activateOption(this._listKeyManager.activeItem);\r\n }\r\n });\r\n\r\n constructor() {\r\n super();\r\n\r\n new MutationController(this, {\r\n config: {\r\n childList: true,\r\n subtree: true,\r\n },\r\n callback: () => this.#handleMutation(),\r\n });\r\n }\r\n\r\n /**\r\n * Whether to hide the selection indicator.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n /**\r\n * Whether the user is required to make a selection when interacting with the autocomplete.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) required = false;\r\n\r\n /**\r\n * Whether the first option should be automatically activated.\r\n * @default false\r\n */\r\n @property({ attribute: \"auto-activate\", type: Boolean }) autoActivate = false;\r\n\r\n /**\r\n * Whether filtering is case sensitive.\r\n * @default false\r\n */\r\n @property({ attribute: \"case-sensitive\", type: Boolean }) caseSensitive = false;\r\n\r\n /**\r\n * Mode in which to filter options.\r\n * @default \"contains\"\r\n */\r\n @property({\r\n converter: {\r\n fromAttribute(value: string | null): AutocompleteFilterMode {\r\n if (value === null) return \"contains\";\r\n if (value === \"starts-with\" || value === \"ends-with\" || value === \"contains\" || value === \"none\") {\r\n return value;\r\n }\r\n return \"contains\";\r\n },\r\n },\r\n })\r\n filter: AutocompleteFilterMode | ((option: M3eOptionElement, term: string) => boolean) = \"contains\";\r\n\r\n /**\r\n * Whether options are being loaded.\r\n * @default false\r\n */\r\n @property({ type: Boolean }) loading = false;\r\n\r\n /**\r\n * Whether to hide the menu when there are no options to show.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-no-data\", type: Boolean }) hideNoData = false;\r\n\r\n /**\r\n * Whether to hide the menu when loading options.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-loading\", type: Boolean }) hideLoading = false;\r\n\r\n /**\r\n * The text announced and presented when loading options.\r\n * @default \"Loading...\"\r\n */\r\n @property({ attribute: \"loading-label\" }) loadingLabel = \"Loading...\";\r\n\r\n /**\r\n * The text announced and presented when no options are available for the current term.\r\n * @default \"No options\"\r\n */\r\n @property({ attribute: \"no-data-label\" }) noDataLabel = \"No options\";\r\n\r\n /**\r\n * The text announced when available options change for the current term.\r\n * @default (count) => `${count} options`\r\n */\r\n @property({ attribute: \"results-label\" }) resultsLabel: string | ((count: number) => string) = (count) =>\r\n `${count} options`;\r\n\r\n /**\r\n * Class or list of classes to be applied to the autocomplete's overlay panel.\r\n * @default \"\"\r\n */\r\n @property({ attribute: \"panel-class\" }) panelClass = \"\";\r\n\r\n /** The options that can be selected. */\r\n get options(): readonly M3eOptionElement[] {\r\n return this._options ?? [];\r\n }\r\n\r\n /** The selected option. */\r\n get selected(): M3eOptionElement | null {\r\n return this.options.find((x) => x.selected) ?? null;\r\n }\r\n\r\n /** The selected (enabled) value. */\r\n get value(): string | null {\r\n const selected = this.selected;\r\n return selected && !selected.disabled ? selected.value : null;\r\n }\r\n\r\n /** @private */\r\n get #options(): readonly M3eOptionElement[] {\r\n return this._listKeyManager?.items ?? [];\r\n }\r\n\r\n /** @private */\r\n get #input(): HTMLInputElement | null {\r\n return this.control ? <HTMLInputElement>this.control : null;\r\n }\r\n\r\n /** @private */\r\n get #hasNoDataSlot(): boolean {\r\n return (this.#clone?.querySelector(\"[slot='no-data']\") ?? null) !== null;\r\n }\r\n\r\n /** @private */\r\n get #hasLoadingSlot(): boolean {\r\n return (this.#clone?.querySelector(\"[slot='loading']\") ?? null) !== null;\r\n }\r\n\r\n /** @private */\r\n get #shouldShowMenu(): boolean {\r\n return (\r\n this.#options.some((x) => x.hidden === false) ||\r\n (this.loading && !this.hideLoading && this.loadingLabel.length > 0) ||\r\n (!this.loading && !this.hideNoData && this.noDataLabel.length > 0)\r\n );\r\n }\r\n\r\n /** @private */\r\n get #formField(): M3eFormFieldElement | null {\r\n return this.control?.closest(\"m3e-form-field\") ?? null;\r\n }\r\n\r\n /** @inheritdoc */\r\n override attach(control: HTMLElement): void {\r\n if (!(control instanceof HTMLInputElement)) return;\r\n\r\n super.attach(control);\r\n\r\n control.autocomplete = \"off\";\r\n control.role = \"combobox\";\r\n control.ariaAutoComplete = \"list\";\r\n control.ariaExpanded = \"false\";\r\n\r\n control.addEventListener(\"click\", this.#clickHandler);\r\n control.addEventListener(\"focus\", this.#focusHandler);\r\n control.addEventListener(\"blur\", this.#blurHandler);\r\n control.addEventListener(\"keydown\", this.#keyDownHandler);\r\n control.addEventListener(\"input\", this.#inputHandler);\r\n control.addEventListener(\"change\", this.#changeHandler);\r\n\r\n this.#formField?.addEventListener(\"pointerdown\", this.#formFieldPointerDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override detach(): void {\r\n if (this.control) {\r\n this.#formField?.removeEventListener(\"pointerdown\", this.#formFieldPointerDownHandler);\r\n\r\n this.control.role = null;\r\n this.control.ariaAutoComplete = null;\r\n this.control.ariaExpanded = null;\r\n\r\n this.control.removeEventListener(\"click\", this.#clickHandler);\r\n this.control.removeEventListener(\"focus\", this.#focusHandler);\r\n this.control.removeEventListener(\"blur\", this.#blurHandler);\r\n this.control.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n this.control.removeEventListener(\"input\", this.#inputHandler);\r\n this.control.removeEventListener(\"change\", this.#changeHandler);\r\n }\r\n super.detach();\r\n }\r\n\r\n /**\r\n * Clears the value of the element.\r\n * @param [restoreFocus=false] Whether to restore input focus.\r\n */\r\n clear(restoreFocus = false): void {\r\n if (!this.#input) return;\r\n\r\n this.#input.value = \"\";\r\n if (this.#clearOptions()) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n this.#filterOptions();\r\n\r\n if (restoreFocus) {\r\n this.#input.focus();\r\n } else {\r\n this.#hideMenu();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.#handleMutation();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"hideNoData\") && this.hideNoData && this.#menu) {\r\n setCustomState(this.#menu, \"-no-data\", false);\r\n }\r\n\r\n if (changedProperties.has(\"loading\")) {\r\n if (this.loading) {\r\n if (this.#hasFocus) {\r\n if (this.loadingLabel) {\r\n M3eLiveAnnouncer.announce(this.loadingLabel, \"polite\");\r\n }\r\n if (!this.#menu && this.#shouldShowMenu) {\r\n this.#showMenu();\r\n }\r\n }\r\n } else if (this.#menu && !this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n } else if (this.#menu) {\r\n deleteCustomState(this.#menu, \"-loading\");\r\n } else if (this.#hasFocus) {\r\n this.#showMenu();\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"options\" aria-hidden=\"true\">\r\n <slot></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n async #handleMutation(): Promise<void> {\r\n if (this.#mutationAbortController) {\r\n this.#mutationAbortController.abort();\r\n }\r\n const mutationAbortController = new AbortController();\r\n this.#mutationAbortController = mutationAbortController;\r\n\r\n const options = [...this.querySelectorAll(\"m3e-option\")];\r\n\r\n for (const option of options) {\r\n if (mutationAbortController.signal.aborted) {\r\n break;\r\n }\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n }\r\n\r\n if (mutationAbortController.signal.aborted) {\r\n return;\r\n }\r\n\r\n this._options = options;\r\n\r\n this.#clone = <HTMLElement>this.cloneNode(true);\r\n\r\n const { added } = this._listKeyManager.setItems([...this.#clone.querySelectorAll(\"m3e-option\")]);\r\n added.forEach((x) => {\r\n x.id = x.id || `${this.#id}-option-${this._listKeyManager.items.indexOf(x)}`;\r\n setCustomState(x, \"-hide-selection-indicator\", this.hideSelectionIndicator);\r\n });\r\n\r\n if (this.#menu) {\r\n const count = this.#filterOptions();\r\n this.#projectClone();\r\n if (!this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n } else {\r\n this.#updateMenuState(this.#menu, count);\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(): void {\r\n this.#ignoreFocusVisible = true;\r\n this.#showMenu();\r\n }\r\n\r\n /** @private */\r\n #handleFormFieldPointerDown(): void {\r\n this.#ignoreHideMenuOnBlur = true;\r\n }\r\n\r\n /** @private */\r\n #handleFocus(): void {\r\n this.#hasFocus = true;\r\n this.#ignoreFocusVisible = true;\r\n\r\n if (this.options.length == 0 && !(<HTMLInputElement>this.control).readOnly) {\r\n this.dispatchEvent(\r\n new CustomEvent<AutocompleteQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input?.value ?? \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n this.#showMenu();\r\n }\r\n\r\n /** @private */\r\n #handleBlur(): void {\r\n this.#hasFocus = false;\r\n if (!this.#ignoreHideMenuOnBlur) {\r\n this.#hideMenu();\r\n }\r\n this.#ignoreHideMenuOnBlur = false;\r\n }\r\n\r\n /** @private */\r\n #handleInput(e: Event): void {\r\n if (!this.#input || e.defaultPrevented) return;\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<AutocompleteQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input.value },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n\r\n if (this.#input.value === \"\" && this.#clearOptions()) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n\r\n this.#inputChanged = true;\r\n try {\r\n if (!this.#menu) {\r\n this.#showMenu();\r\n } else {\r\n this.#filterOptions();\r\n if (!this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n }\r\n }\r\n } finally {\r\n this.#inputChanged = false;\r\n this.#formField?.notifyControlStateChange(true);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleChange(): void {\r\n if (this.#input) {\r\n const selected = this.selected;\r\n if (this.required) {\r\n this.#input.value = selected?.label ?? \"\";\r\n } else if (selected && selected.label !== this.#input.value && this.#clearOptions()) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n if (e.defaultPrevented) return;\r\n\r\n this.#ignoreFocusVisible = false;\r\n\r\n switch (e.key) {\r\n case \"Backspace\":\r\n case \"Delete\":\r\n if (this.#input && !this.#input.value) {\r\n this.#hideMenu();\r\n }\r\n break;\r\n\r\n case \"Enter\":\r\n if (this.#menu && this._listKeyManager.activeItem) {\r\n e.preventDefault();\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n } else if (this.#menu) {\r\n setTimeout(() => {\r\n if (this.#input && !this.#input.value) {\r\n this.#hideMenu();\r\n }\r\n });\r\n }\r\n break;\r\n\r\n case \"Escape\":\r\n case \"Tab\":\r\n this.#hideMenu();\r\n break;\r\n\r\n case \"Up\":\r\n case \"ArrowUp\":\r\n if (e.altKey) {\r\n this.#hideMenu();\r\n } else {\r\n this._listKeyManager.onKeyDown(e);\r\n }\r\n break;\r\n\r\n case \"Down\":\r\n case \"ArrowDown\":\r\n if (!this.#menu) {\r\n this.#showMenu();\r\n e.preventDefault();\r\n } else {\r\n this._listKeyManager.onKeyDown(e);\r\n }\r\n break;\r\n\r\n default:\r\n this._listKeyManager.onKeyDown(e);\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuPointerDown(e: PointerEvent): void {\r\n this.#menuPressedOption = undefined;\r\n\r\n if (e.button === 2) return;\r\n // Prevent click to avoid stealing focus.\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n\r\n const option = <M3eOptionElement | undefined>(\r\n e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n );\r\n\r\n if (option && !option.disabled) {\r\n this.#menuPressedOption = option;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuPointerUp(e: PointerEvent): void {\r\n const pressedOption = this.#menuPressedOption;\r\n this.#menuPressedOption = undefined;\r\n\r\n if (e.button === 2) return;\r\n\r\n if (!pressedOption) return;\r\n\r\n const option = <M3eOptionElement | undefined>(\r\n e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n );\r\n\r\n if (option === pressedOption) {\r\n this._listKeyManager.setActiveItem(option);\r\n this.#selectOption(option);\r\n }\r\n\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuToggle(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n if (e.newState !== \"closed\") {\r\n const option = this.#options.find((x) => x.selected && !x.disabled);\r\n if (option) {\r\n this._listKeyManager.setActiveItem(option);\r\n scrollIntoViewIfNeeded(option, this.#menu);\r\n } else {\r\n this.#autoActivate();\r\n }\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n } else {\r\n if (prefersReducedMotion()) {\r\n this.#destroyMenu(e);\r\n } else {\r\n // NOTE: use transitionend is preferred but doesn't fire when used here.\r\n // This is a workaround until that is fixed.\r\n setTimeout(() => this.#destroyMenu(e), 100);\r\n }\r\n }\r\n }\r\n\r\n /** @private*/\r\n #destroyMenu(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n this.#clone?.replaceChildren(...this.#menu.childNodes);\r\n\r\n this.#menu.remove();\r\n this.#menu.removeEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.removeEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n this.#menu.removeEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n this.#menu = undefined;\r\n\r\n if (this.#input) {\r\n this.#input.ariaExpanded = \"false\";\r\n this.#input.removeAttribute(\"aria-controls\");\r\n this.#input.removeAttribute(\"aria-owns\");\r\n this.#input.removeAttribute(\"aria-activedescendant\");\r\n }\r\n this.requestUpdate();\r\n\r\n this.#formField?.notifyControlStateChange();\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n\r\n if (this.#input?.slot === \"input\" && this.#input.parentElement?.tagName === \"M3E-INPUT-CHIP-SET\") {\r\n this.#clearOptions();\r\n }\r\n }\r\n\r\n /** @private */\r\n #showMenu(): void {\r\n if (this.#menu || !this.#input || this.#input.readOnly || this.#input.disabled) return;\r\n\r\n const count = this.#filterOptions();\r\n\r\n if (!this.#shouldShowMenu) return;\r\n\r\n this.#menu = document.createElement(\"m3e-option-panel\");\r\n this.#menu.id = this.#menuId;\r\n\r\n if (this.panelClass) {\r\n for (const klass of this.panelClass\r\n .split(/\\s+/)\r\n .map((d) => d.trim())\r\n .filter(Boolean)) {\r\n this.#menu.classList.add(klass);\r\n }\r\n }\r\n\r\n this.#menu.style.overflowX = \"hidden\";\r\n this.#menu.scrollStrategy = \"reposition\";\r\n this.#menu.fitAnchorWidth = true;\r\n this.#menu.addEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.addEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n this.#menu.addEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n\r\n this.#projectClone();\r\n\r\n this.#updateMenuState(this.#menu, count);\r\n\r\n (this.#formField ?? this.#input).insertAdjacentElement(\"afterend\", this.#menu);\r\n\r\n this.#input.setAttribute(\"aria-controls\", this.#menuId);\r\n this.#input.setAttribute(\"aria-owns\", this.#menuId);\r\n\r\n this.#formField?.notifyControlStateChange();\r\n\r\n if (this._listKeyManager.activeItem && this.autoActivate) {\r\n this.#activateOption(this._listKeyManager.activeItem, true);\r\n }\r\n\r\n const input = this.#input;\r\n setTimeout(() => this.#menu?.show(input, this.#formField?.menuAnchor));\r\n }\r\n\r\n /** @private */\r\n #projectClone(): void {\r\n if (!this.#clone || !this.#menu) return;\r\n const children = [...this.#clone.childNodes];\r\n if (!this.#hasNoDataSlot && this.noDataLabel) {\r\n const noDataSpan = document.createElement(\"span\");\r\n noDataSpan.slot = \"no-data\";\r\n noDataSpan.textContent = this.noDataLabel;\r\n children.push(noDataSpan);\r\n }\r\n if (!this.#hasLoadingSlot && this.loadingLabel) {\r\n const loadingSpan = document.createElement(\"span\");\r\n loadingSpan.slot = \"loading\";\r\n loadingSpan.textContent = this.loadingLabel;\r\n children.push(loadingSpan);\r\n }\r\n this.#menu.replaceChildren(...children);\r\n }\r\n\r\n /** @private */\r\n #updateMenuState(menu: M3eOptionPanelElement, count: number): void {\r\n setCustomState(menu, \"-loading\", this.loading);\r\n setCustomState(menu, \"-no-data\", count == 0);\r\n }\r\n\r\n /** @private */\r\n #hideMenu(): void {\r\n this.#menu?.hide();\r\n }\r\n\r\n /** @private */\r\n #activateOption(option: M3eOptionElement, forceFocusVisible = false): void {\r\n if (!this.#input) return;\r\n\r\n this.#input.setAttribute(\"aria-activedescendant\", option.id);\r\n\r\n if (this.#menu) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n\r\n const focusVisible =\r\n forceFocusVisible ||\r\n (!this.#ignoreFocusVisible && (this.#input.matches(\":focus-visible\") || forcedColorsActive()));\r\n\r\n this.#options.forEach((x) => {\r\n const active = x === option && focusVisible;\r\n if (active) {\r\n x.focusRing?.show();\r\n x.stateLayer?.show(\"focused\");\r\n } else {\r\n x.focusRing?.hide();\r\n x.stateLayer?.hide(\"focused\");\r\n }\r\n });\r\n }\r\n }\r\n\r\n /** @private */\r\n async #updateSelectionState(clone: M3eOptionElement): Promise<void> {\r\n const option = this._options[this._listKeyManager.items.indexOf(clone)];\r\n if (option) {\r\n option.selected = clone.selected;\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n async #selectOption(option: M3eOptionElement): Promise<void> {\r\n if (option.selected) return;\r\n\r\n option.selected = true;\r\n await this.#updateSelectionState(option);\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n\r\n this.requestUpdate();\r\n if (this.isUpdatePending) {\r\n await this.updateComplete;\r\n }\r\n\r\n if (this.#input) {\r\n this.#input.value = option.label;\r\n }\r\n\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n\r\n this.#formField?.notifyControlStateChange(true);\r\n }\r\n\r\n /** @private */\r\n #filterOption(clone: M3eOptionElement, option: M3eOptionElement, term: string, exactTerm: string): boolean {\r\n const value = this.caseSensitive ? option.value : option.value.toLowerCase();\r\n switch (this.filter) {\r\n case \"starts-with\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.startsWith(term);\r\n case \"ends-with\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.endsWith(term);\r\n case \"contains\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.includes(term);\r\n case \"none\":\r\n clone.disableHighlight = true;\r\n return true;\r\n default:\r\n clone.disableHighlight = true;\r\n return this.filter(option, exactTerm);\r\n }\r\n }\r\n\r\n /** @private */\r\n #filterOptions(): number {\r\n if (!this.#input) return 0;\r\n\r\n const oldCount = this.#options.filter((x) => x.hidden === false).length;\r\n const shouldAnnounce = !this.loading && this.#inputChanged;\r\n this.#inputChanged = false;\r\n\r\n const exactTerm = this.#input.value;\r\n const term = this.caseSensitive ? exactTerm : exactTerm.toLocaleLowerCase();\r\n\r\n let newCount = 0;\r\n let first = false;\r\n let last: M3eOptionElement | undefined;\r\n\r\n for (let i = 0; i < this.#options.length; i++) {\r\n const clone = this.#options[i];\r\n const option = this._options[i];\r\n clone.hidden = !this.#filterOption(clone, option, term, exactTerm);\r\n\r\n if (clone.hidden === true) {\r\n this.#deactivateOption(clone);\r\n deleteCustomState(clone, \"-first\");\r\n deleteCustomState(clone, \"-last\");\r\n } else {\r\n newCount++;\r\n if (!first && !(clone.parentElement instanceof M3eOptGroupElement)) {\r\n addCustomState(clone, \"-first\");\r\n first = true;\r\n addCustomState(clone, \"-last\");\r\n last = clone;\r\n } else {\r\n deleteCustomState(clone, \"-first\");\r\n if (last) {\r\n deleteCustomState(last, \"-last\");\r\n }\r\n addCustomState(clone, \"-last\");\r\n last = clone;\r\n }\r\n }\r\n }\r\n\r\n if (this.#menu) {\r\n this.#updateMenuState(this.#menu, newCount);\r\n }\r\n\r\n const groups = this.#menu?.querySelectorAll(\"m3e-optgroup\") ?? this.#clone?.querySelectorAll(\"m3e-optgroup\") ?? [];\r\n for (const group of groups) {\r\n group.hidden = [...group.querySelectorAll(\"m3e-option\")].every((x) => x.hidden === true);\r\n }\r\n\r\n if (shouldAnnounce) {\r\n this.#announceResults(oldCount, newCount);\r\n }\r\n\r\n this.#autoActivate();\r\n return newCount;\r\n }\r\n\r\n /** @private */\r\n #clearOptions(): boolean {\r\n const selected = this._listKeyManager.items.filter((x) => x.selected);\r\n if (selected.length > 0) {\r\n selected.forEach((x) => {\r\n x.selected = false;\r\n this.#updateSelectionState(x);\r\n });\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n /** @private */\r\n #announceResults(oldCount: number, newCount: number): void {\r\n if (!this.#hasFocus) return;\r\n if (newCount == 0) {\r\n if (oldCount > 0 && this.noDataLabel) {\r\n M3eLiveAnnouncer.announce(this.noDataLabel, \"polite\");\r\n }\r\n } else if (oldCount != newCount) {\r\n const message = this.resultsLabel instanceof Function ? this.resultsLabel(newCount) : this.resultsLabel;\r\n if (message) {\r\n M3eLiveAnnouncer.announce(message, \"polite\");\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #autoActivate(): void {\r\n if (this.autoActivate && (!this._listKeyManager.activeItem || !this._listKeyManager.activeItem.selected)) {\r\n const option = this.#options.find((x) => !x.disabled && x.hidden === false);\r\n if (option) {\r\n this._listKeyManager.setActiveItem(option);\r\n if (this.#menu) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #deactivateOption(option: M3eOptionElement): void {\r\n option.focusRing?.hide();\r\n option.stateLayer?.hide(\"focused\");\r\n if (option === this._listKeyManager.activeItem) {\r\n this._listKeyManager.updateActiveItem(null);\r\n this.#input?.removeAttribute(\"aria-activedescendant\");\r\n }\r\n }\r\n}\r\n\r\ninterface M3eAutocompleteElementEventMap extends HTMLElementEventMap {\r\n toggle: ToggleEvent;\r\n query: CustomEvent<AutocompleteQueryEventDetail>;\r\n}\r\n\r\nexport interface M3eAutocompleteElement {\r\n addEventListener<K extends keyof M3eAutocompleteElementEventMap>(\r\n type: K,\r\n listener: (this: M3eAutocompleteElement, ev: M3eAutocompleteElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eAutocompleteElementEventMap>(\r\n type: K,\r\n listener: (this: M3eAutocompleteElement, ev: M3eAutocompleteElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-autocomplete\": M3eAutocompleteElement;\r\n }\r\n}\r\n"],"names":["M3eAutocompleteElement","M3eAutocompleteElement_1","EventAttribute","HtmlFor","LitElement","constructor","super","_M3eAutocompleteElement_id","set","this","__nextId","_M3eAutocompleteElement_menuId","__classPrivateFieldGet","_options","Array","_M3eAutocompleteElement_clone","_M3eAutocompleteElement_ignoreFocusVisible","_M3eAutocompleteElement_menu","_M3eAutocompleteElement_ignoreHideMenuOnBlur","_M3eAutocompleteElement_inputChanged","_M3eAutocompleteElement_hasFocus","_M3eAutocompleteElement_mutationAbortController","_M3eAutocompleteElement_clickHandler","_M3eAutocompleteElement_instances","_M3eAutocompleteElement_handleClick","call","_M3eAutocompleteElement_formFieldPointerDownHandler","_M3eAutocompleteElement_handleFormFieldPointerDown","_M3eAutocompleteElement_focusHandler","_M3eAutocompleteElement_handleFocus","_M3eAutocompleteElement_blurHandler","_M3eAutocompleteElement_handleBlur","_M3eAutocompleteElement_keyDownHandler","e","_M3eAutocompleteElement_inputHandler","_M3eAutocompleteElement_changeHandler","_M3eAutocompleteElement_handleChange","_M3eAutocompleteElement_menuToggleHandler","_M3eAutocompleteElement_menuPointerDownHandler","_M3eAutocompleteElement_menuPointerUpHandler","_M3eAutocompleteElement_menuPressedOption","_listKeyManager","ListKeyManager","withWrap","withHomeAndEnd","withPageUpAndDown","withVerticalOrientation","withSkipPredicate","item","disabled","hidden","onActiveItemChange","activeItem","_M3eAutocompleteElement_activateOption","hideSelectionIndicator","required","autoActivate","caseSensitive","filter","loading","hideNoData","hideLoading","loadingLabel","noDataLabel","resultsLabel","count","panelClass","MutationController","config","childList","subtree","callback","_M3eAutocompleteElement_handleMutation","options","selected","find","x","value","attach","control","HTMLInputElement","autocomplete","role","ariaAutoComplete","ariaExpanded","addEventListener","_M3eAutocompleteElement_formField_get","detach","removeEventListener","clear","restoreFocus","_M3eAutocompleteElement_input_get","_M3eAutocompleteElement_clearOptions","dispatchEvent","Event","bubbles","_M3eAutocompleteElement_filterOptions","focus","_M3eAutocompleteElement_hideMenu","connectedCallback","update","changedProperties","has","setCustomState","M3eLiveAnnouncer","announce","_M3eAutocompleteElement_shouldShowMenu_get","_M3eAutocompleteElement_showMenu","deleteCustomState","render","html","items","querySelector","_M3eAutocompleteElement_options_get","some","length","closest","async","abort","mutationAbortController","AbortController","__classPrivateFieldSet","querySelectorAll","option","signal","aborted","isUpdatePending","updateComplete","cloneNode","added","setItems","forEach","id","indexOf","_M3eAutocompleteElement_projectClone","_M3eAutocompleteElement_updateMenuState","readOnly","CustomEvent","detail","term","composed","defaultPrevented","notifyControlStateChange","label","key","preventDefault","_M3eAutocompleteElement_selectOption","prefersReducedMotion","setTimeout","altKey","onKeyDown","undefined","button","stopImmediatePropagation","composedPath","HTMLElement","tagName","pressedOption","setActiveItem","newState","scrollIntoViewIfNeeded","_M3eAutocompleteElement_autoActivate","ToggleEvent","oldState","_M3eAutocompleteElement_destroyMenu","replaceChildren","childNodes","remove","removeAttribute","requestUpdate","slot","parentElement","document","createElement","klass","split","map","d","trim","Boolean","classList","add","style","overflowX","scrollStrategy","fitAnchorWidth","insertAdjacentElement","setAttribute","input","show","menuAnchor","children","_M3eAutocompleteElement_hasNoDataSlot_get","noDataSpan","textContent","push","_M3eAutocompleteElement_hasLoadingSlot_get","loadingSpan","menu","hide","forceFocusVisible","block","behavior","focusVisible","matches","forcedColorsActive","focusRing","stateLayer","clone","_M3eAutocompleteElement_updateSelectionState","_M3eAutocompleteElement_filterOption","exactTerm","toLowerCase","highlightMode","startsWith","endsWith","includes","disableHighlight","oldCount","shouldAnnounce","toLocaleLowerCase","last","newCount","first","i","_M3eAutocompleteElement_deactivateOption","M3eOptGroupElement","addCustomState","groups","group","every","_M3eAutocompleteElement_announceResults","message","Function","updateActiveItem","styles","css","__decorate","property","attribute","type","prototype","reflect","converter","fromAttribute","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"autocomplete.min.js","sources":["../../src/autocomplete/AutocompleteElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n HtmlFor,\r\n prefersReducedMotion,\r\n scrollIntoViewIfNeeded,\r\n forcedColorsActive,\r\n setCustomState,\r\n deleteCustomState,\r\n addCustomState,\r\n customElement,\r\n MutationController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ListKeyManager, M3eLiveAnnouncer } from \"@m3e/web/core/a11y\";\r\nimport { M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement } from \"@m3e/web/option\";\r\nimport type { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\nimport { AutocompleteFilterMode } from \"./AutocompleteFilterMode\";\r\nimport { AutocompleteQueryEventDetail } from \"./AutocompleteQueryEventDetail\";\r\n\r\n/**\r\n * Enhances a text input with suggested options.\r\n *\r\n * @description\r\n * The `m3e-autocomplete` component augments a text input field with a dynamically positioned menu of filterable suggestions,\r\n * following Material Design 3 principles. It provides real-time filtering, keyboard navigation, automatic option activation,\r\n * and text highlighting to guide user selection. The component manages focus, selection state, and menu visibility while\r\n * integrating seamlessly with form field containers and supporting both required and optional selection modes.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-autocomplete` paired with a `m3e-form-field`.\r\n * ```html\r\n * <m3e-form-field>\r\n * <label slot=\"label\" for=\"fruit\">Choose your favorite fruit</label>\r\n * <input id=\"fruit\" />\r\n * </m3e-form-field>\r\n * <m3e-autocomplete for=\"fruit\">\r\n * <m3e-option>Apples</m3e-option>\r\n * <m3e-option>Oranges</m3e-option>\r\n * <m3e-option>Bananas</m3e-option>\r\n * <m3e-option>Grapes</m3e-option>\r\n * </m3e-autocomplete>\r\n * ```\r\n *\r\n * @tag m3e-autocomplete\r\n *\r\n * @attr auto-activate - Whether the first option should be automatically activated.\r\n * @attr case-sensitive - Whether filtering is case sensitive.\r\n * @attr filter - Mode in which to filter options.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr hide-loading - Whether to hide the menu when loading options.\r\n * @attr hide-no-data - Whether to hide the menu when there are no options to show.\r\n * @attr loading - Whether options are being loaded.\r\n * @attr loading-label - The text announced and presented when loading options.\r\n * @attr no-data-label - The text announced and presented when no options are available for the current term.\r\n * @attr panel-class - Class or list of classes to be applied to the autocomplete's overlay panel.\r\n * @attr required - Whether the user is required to make a selection when interacting with the autocomplete.\r\n * @attr results-label - The text announced when available options change for the current term.\r\n *\r\n * @slot - Renders the options of the autocomplete.\r\n * @slot loading - Renders content when loading options.\r\n * @slot no-data - Renders content when there are no options to show.\r\n *\r\n * @fires toggle - Emitted when the options menu opens or closes.\r\n * @fires query - Emitted when the input is focused or when the user modifies its value.\r\n * @fires change - Emitted when the committed value changes due to selecting an option or clearing the input.\r\n */\r\n@customElement(\"m3e-autocomplete\")\r\nexport class M3eAutocompleteElement extends HtmlFor(LitElement) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: contents;\r\n }\r\n .options {\r\n display: none;\r\n }\r\n `;\r\n\r\n /** @private */ private static __nextId = 0;\r\n\r\n /** @private */ readonly #id = `m3e-autocomplete-${M3eAutocompleteElement.__nextId}`;\r\n /** @private */ readonly #menuId = `${this.#id}-menu`;\r\n /** @private */ private _options = new Array<M3eOptionElement>();\r\n /** @private */ #clone?: HTMLElement;\r\n /** @private */ #ignoreFocusVisible = false;\r\n /** @private */ #menu?: M3eOptionPanelElement;\r\n /** @private */ #ignoreHideMenuOnBlur = false;\r\n /** @private */ #inputChanged = false;\r\n /** @private */ #hasFocus = false;\r\n /** @private */ #mutationAbortController?: AbortController;\r\n\r\n /** @private */ readonly #clickHandler = () => this.#handleClick();\r\n /** @private */ readonly #formFieldPointerDownHandler = () => this.#handleFormFieldPointerDown();\r\n /** @private */ readonly #focusHandler = () => this.#handleFocus();\r\n /** @private */ readonly #blurHandler = () => this.#handleBlur();\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n /** @private */ readonly #inputHandler = (e: Event) => this.#handleInput(e);\r\n /** @private */ readonly #changeHandler = () => this.#handleChange();\r\n /** @private */ readonly #menuToggleHandler = (e: ToggleEvent) => this.#handleMenuToggle(e);\r\n /** @private */ readonly #menuPointerDownHandler = (e: PointerEvent) => this.#handleMenuPointerDown(e);\r\n /** @private */ readonly #menuPointerUpHandler = (e: PointerEvent) => this.#handleMenuPointerUp(e);\r\n /** @private */ #menuPressedOption?: M3eOptionElement;\r\n\r\n /** @private */ private readonly _listKeyManager = new ListKeyManager<M3eOptionElement>()\r\n .withWrap()\r\n .withHomeAndEnd()\r\n .withPageUpAndDown()\r\n .withVerticalOrientation()\r\n .withSkipPredicate((item) => item.disabled || item.hidden === true)\r\n .onActiveItemChange(() => {\r\n if (this._listKeyManager.activeItem) {\r\n this.#activateOption(this._listKeyManager.activeItem);\r\n }\r\n });\r\n\r\n constructor() {\r\n super();\r\n\r\n new MutationController(this, {\r\n config: {\r\n childList: true,\r\n subtree: true,\r\n },\r\n callback: () => this.#handleMutation(),\r\n });\r\n }\r\n\r\n /**\r\n * Whether to hide the selection indicator.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n /**\r\n * Whether the user is required to make a selection when interacting with the autocomplete.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) required = false;\r\n\r\n /**\r\n * Whether the first option should be automatically activated.\r\n * @default false\r\n */\r\n @property({ attribute: \"auto-activate\", type: Boolean }) autoActivate = false;\r\n\r\n /**\r\n * Whether filtering is case sensitive.\r\n * @default false\r\n */\r\n @property({ attribute: \"case-sensitive\", type: Boolean }) caseSensitive = false;\r\n\r\n /**\r\n * Mode in which to filter options.\r\n * @default \"contains\"\r\n */\r\n @property({\r\n converter: {\r\n fromAttribute(value: string | null): AutocompleteFilterMode {\r\n if (value === null) return \"contains\";\r\n if (value === \"starts-with\" || value === \"ends-with\" || value === \"contains\" || value === \"none\") {\r\n return value;\r\n }\r\n return \"contains\";\r\n },\r\n },\r\n })\r\n filter: AutocompleteFilterMode | ((option: M3eOptionElement, term: string) => boolean) = \"contains\";\r\n\r\n /**\r\n * Whether options are being loaded.\r\n * @default false\r\n */\r\n @property({ type: Boolean }) loading = false;\r\n\r\n /**\r\n * Whether to hide the menu when there are no options to show.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-no-data\", type: Boolean }) hideNoData = false;\r\n\r\n /**\r\n * Whether to hide the menu when loading options.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-loading\", type: Boolean }) hideLoading = false;\r\n\r\n /**\r\n * The text announced and presented when loading options.\r\n * @default \"Loading...\"\r\n */\r\n @property({ attribute: \"loading-label\" }) loadingLabel = \"Loading...\";\r\n\r\n /**\r\n * The text announced and presented when no options are available for the current term.\r\n * @default \"No options\"\r\n */\r\n @property({ attribute: \"no-data-label\" }) noDataLabel = \"No options\";\r\n\r\n /**\r\n * The text announced when available options change for the current term.\r\n * @default (count) => `${count} options`\r\n */\r\n @property({ attribute: \"results-label\" }) resultsLabel: string | ((count: number) => string) = (count) =>\r\n `${count} options`;\r\n\r\n /**\r\n * Class or list of classes to be applied to the autocomplete's overlay panel.\r\n * @default \"\"\r\n */\r\n @property({ attribute: \"panel-class\" }) panelClass = \"\";\r\n\r\n /** The options that can be selected. */\r\n get options(): readonly M3eOptionElement[] {\r\n return this._options ?? [];\r\n }\r\n\r\n /** The selected option. */\r\n get selected(): M3eOptionElement | null {\r\n return this.options.find((x) => x.selected) ?? null;\r\n }\r\n\r\n /** The selected (enabled) value. */\r\n get value(): string | null {\r\n const selected = this.selected;\r\n return selected && !selected.disabled ? selected.value : null;\r\n }\r\n\r\n /** @private */\r\n get #options(): readonly M3eOptionElement[] {\r\n return this._listKeyManager?.items ?? [];\r\n }\r\n\r\n /** @private */\r\n get #input(): HTMLInputElement | null {\r\n return this.control ? <HTMLInputElement>this.control : null;\r\n }\r\n\r\n /** @private */\r\n get #hasNoDataSlot(): boolean {\r\n return (this.#clone?.querySelector(\"[slot='no-data']\") ?? null) !== null;\r\n }\r\n\r\n /** @private */\r\n get #hasLoadingSlot(): boolean {\r\n return (this.#clone?.querySelector(\"[slot='loading']\") ?? null) !== null;\r\n }\r\n\r\n /** @private */\r\n get #shouldShowMenu(): boolean {\r\n return (\r\n this.#options.some((x) => x.hidden === false) ||\r\n (this.loading && !this.hideLoading && this.loadingLabel.length > 0) ||\r\n (!this.loading && !this.hideNoData && this.noDataLabel.length > 0)\r\n );\r\n }\r\n\r\n /** @private */\r\n get #formField(): M3eFormFieldElement | null {\r\n return this.control?.closest(\"m3e-form-field\") ?? null;\r\n }\r\n\r\n /** @inheritdoc */\r\n override attach(control: HTMLElement): void {\r\n if (!(control instanceof HTMLInputElement)) return;\r\n\r\n super.attach(control);\r\n\r\n control.autocomplete = \"off\";\r\n control.role = \"combobox\";\r\n control.ariaAutoComplete = \"list\";\r\n control.ariaExpanded = \"false\";\r\n\r\n control.addEventListener(\"click\", this.#clickHandler);\r\n control.addEventListener(\"focus\", this.#focusHandler);\r\n control.addEventListener(\"blur\", this.#blurHandler);\r\n control.addEventListener(\"keydown\", this.#keyDownHandler);\r\n control.addEventListener(\"input\", this.#inputHandler);\r\n control.addEventListener(\"change\", this.#changeHandler);\r\n\r\n this.#formField?.addEventListener(\"pointerdown\", this.#formFieldPointerDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override detach(): void {\r\n if (this.control) {\r\n this.#formField?.removeEventListener(\"pointerdown\", this.#formFieldPointerDownHandler);\r\n\r\n this.control.role = null;\r\n this.control.ariaAutoComplete = null;\r\n this.control.ariaExpanded = null;\r\n\r\n this.control.removeEventListener(\"click\", this.#clickHandler);\r\n this.control.removeEventListener(\"focus\", this.#focusHandler);\r\n this.control.removeEventListener(\"blur\", this.#blurHandler);\r\n this.control.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n this.control.removeEventListener(\"input\", this.#inputHandler);\r\n this.control.removeEventListener(\"change\", this.#changeHandler);\r\n }\r\n super.detach();\r\n }\r\n\r\n /**\r\n * Clears the value of the element.\r\n * @param [restoreFocus=false] Whether to restore input focus.\r\n */\r\n clear(restoreFocus = false): void {\r\n if (!this.#input) return;\r\n\r\n this.#input.value = \"\";\r\n if (this.#clearOptions()) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n this.#filterOptions();\r\n\r\n if (restoreFocus) {\r\n this.#input.focus();\r\n } else {\r\n this.#hideMenu();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.#handleMutation();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"hideNoData\") && this.hideNoData && this.#menu) {\r\n setCustomState(this.#menu, \"--no-data\", false);\r\n }\r\n\r\n if (changedProperties.has(\"loading\")) {\r\n if (this.loading) {\r\n if (this.#hasFocus) {\r\n if (this.loadingLabel) {\r\n M3eLiveAnnouncer.announce(this.loadingLabel, \"polite\");\r\n }\r\n if (!this.#menu && this.#shouldShowMenu) {\r\n this.#showMenu();\r\n }\r\n }\r\n } else if (this.#menu && !this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n } else if (this.#menu) {\r\n deleteCustomState(this.#menu, \"--loading\");\r\n } else if (this.#hasFocus) {\r\n this.#showMenu();\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"options\" aria-hidden=\"true\">\r\n <slot></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n async #handleMutation(): Promise<void> {\r\n if (this.#mutationAbortController) {\r\n this.#mutationAbortController.abort();\r\n }\r\n const mutationAbortController = new AbortController();\r\n this.#mutationAbortController = mutationAbortController;\r\n\r\n const options = [...this.querySelectorAll(\"m3e-option\")];\r\n\r\n for (const option of options) {\r\n if (mutationAbortController.signal.aborted) {\r\n break;\r\n }\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n }\r\n\r\n if (mutationAbortController.signal.aborted) {\r\n return;\r\n }\r\n\r\n this._options = options;\r\n\r\n this.#clone = <HTMLElement>this.cloneNode(true);\r\n\r\n const { added } = this._listKeyManager.setItems([...this.#clone.querySelectorAll(\"m3e-option\")]);\r\n added.forEach((x) => {\r\n x.id = x.id || `${this.#id}-option-${this._listKeyManager.items.indexOf(x)}`;\r\n setCustomState(x, \"--hide-selection-indicator\", this.hideSelectionIndicator);\r\n });\r\n\r\n if (this.#menu) {\r\n const count = this.#filterOptions();\r\n this.#projectClone();\r\n if (!this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n } else {\r\n this.#updateMenuState(this.#menu, count);\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(): void {\r\n this.#ignoreFocusVisible = true;\r\n this.#showMenu();\r\n }\r\n\r\n /** @private */\r\n #handleFormFieldPointerDown(): void {\r\n this.#ignoreHideMenuOnBlur = true;\r\n }\r\n\r\n /** @private */\r\n #handleFocus(): void {\r\n this.#hasFocus = true;\r\n this.#ignoreFocusVisible = true;\r\n\r\n if (this.options.length == 0 && !(<HTMLInputElement>this.control).readOnly) {\r\n this.dispatchEvent(\r\n new CustomEvent<AutocompleteQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input?.value ?? \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n this.#showMenu();\r\n }\r\n\r\n /** @private */\r\n #handleBlur(): void {\r\n this.#hasFocus = false;\r\n if (!this.#ignoreHideMenuOnBlur) {\r\n this.#hideMenu();\r\n }\r\n this.#ignoreHideMenuOnBlur = false;\r\n }\r\n\r\n /** @private */\r\n #handleInput(e: Event): void {\r\n if (!this.#input || e.defaultPrevented) return;\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<AutocompleteQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input.value },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n\r\n if (this.#input.value === \"\" && this.#clearOptions()) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n\r\n this.#inputChanged = true;\r\n try {\r\n if (!this.#menu) {\r\n this.#showMenu();\r\n } else {\r\n this.#filterOptions();\r\n if (!this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n }\r\n }\r\n } finally {\r\n this.#inputChanged = false;\r\n this.#formField?.notifyControlStateChange(true);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleChange(): void {\r\n if (this.#input) {\r\n const selected = this.selected;\r\n if (this.required) {\r\n this.#input.value = selected?.label ?? \"\";\r\n } else if (selected && selected.label !== this.#input.value && this.#clearOptions()) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n if (e.defaultPrevented) return;\r\n\r\n this.#ignoreFocusVisible = false;\r\n\r\n switch (e.key) {\r\n case \"Backspace\":\r\n case \"Delete\":\r\n if (this.#input && !this.#input.value) {\r\n this.#hideMenu();\r\n }\r\n break;\r\n\r\n case \"Enter\":\r\n if (this.#menu && this._listKeyManager.activeItem) {\r\n e.preventDefault();\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n } else if (this.#menu) {\r\n setTimeout(() => {\r\n if (this.#input && !this.#input.value) {\r\n this.#hideMenu();\r\n }\r\n });\r\n }\r\n break;\r\n\r\n case \"Escape\":\r\n case \"Tab\":\r\n this.#hideMenu();\r\n break;\r\n\r\n case \"Up\":\r\n case \"ArrowUp\":\r\n if (e.altKey) {\r\n this.#hideMenu();\r\n } else {\r\n this._listKeyManager.onKeyDown(e);\r\n }\r\n break;\r\n\r\n case \"Down\":\r\n case \"ArrowDown\":\r\n if (!this.#menu) {\r\n this.#showMenu();\r\n e.preventDefault();\r\n } else {\r\n this._listKeyManager.onKeyDown(e);\r\n }\r\n break;\r\n\r\n default:\r\n this._listKeyManager.onKeyDown(e);\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuPointerDown(e: PointerEvent): void {\r\n this.#menuPressedOption = undefined;\r\n\r\n if (e.button === 2) return;\r\n // Prevent click to avoid stealing focus.\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n\r\n const option = <M3eOptionElement | undefined>(\r\n e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n );\r\n\r\n if (option && !option.disabled) {\r\n this.#menuPressedOption = option;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuPointerUp(e: PointerEvent): void {\r\n const pressedOption = this.#menuPressedOption;\r\n this.#menuPressedOption = undefined;\r\n\r\n if (e.button === 2) return;\r\n\r\n if (!pressedOption) return;\r\n\r\n const option = <M3eOptionElement | undefined>(\r\n e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n );\r\n\r\n if (option === pressedOption) {\r\n this._listKeyManager.setActiveItem(option);\r\n this.#selectOption(option);\r\n }\r\n\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuToggle(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n if (e.newState !== \"closed\") {\r\n const option = this.#options.find((x) => x.selected && !x.disabled);\r\n if (option) {\r\n this._listKeyManager.setActiveItem(option);\r\n scrollIntoViewIfNeeded(option, this.#menu);\r\n } else {\r\n this.#autoActivate();\r\n }\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n } else {\r\n if (prefersReducedMotion()) {\r\n this.#destroyMenu(e);\r\n } else {\r\n // NOTE: use transitionend is preferred but doesn't fire when used here.\r\n // This is a workaround until that is fixed.\r\n setTimeout(() => this.#destroyMenu(e), 100);\r\n }\r\n }\r\n }\r\n\r\n /** @private*/\r\n #destroyMenu(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n this.#clone?.replaceChildren(...this.#menu.childNodes);\r\n\r\n this.#menu.remove();\r\n this.#menu.removeEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.removeEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n this.#menu.removeEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n this.#menu = undefined;\r\n\r\n if (this.#input) {\r\n this.#input.ariaExpanded = \"false\";\r\n this.#input.removeAttribute(\"aria-controls\");\r\n this.#input.removeAttribute(\"aria-owns\");\r\n this.#input.removeAttribute(\"aria-activedescendant\");\r\n }\r\n this.requestUpdate();\r\n\r\n this.#formField?.notifyControlStateChange();\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n\r\n if (this.#input?.slot === \"input\" && this.#input.parentElement?.tagName === \"M3E-INPUT-CHIP-SET\") {\r\n this.#clearOptions();\r\n }\r\n }\r\n\r\n /** @private */\r\n #showMenu(): void {\r\n if (this.#menu || !this.#input || this.#input.readOnly || this.#input.disabled) return;\r\n\r\n const count = this.#filterOptions();\r\n\r\n if (!this.#shouldShowMenu) return;\r\n\r\n this.#menu = document.createElement(\"m3e-option-panel\");\r\n this.#menu.id = this.#menuId;\r\n\r\n if (this.panelClass) {\r\n for (const klass of this.panelClass\r\n .split(/\\s+/)\r\n .map((d) => d.trim())\r\n .filter(Boolean)) {\r\n this.#menu.classList.add(klass);\r\n }\r\n }\r\n\r\n this.#menu.style.overflowX = \"hidden\";\r\n this.#menu.scrollStrategy = \"reposition\";\r\n this.#menu.fitAnchorWidth = true;\r\n this.#menu.addEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.addEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n this.#menu.addEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n\r\n this.#projectClone();\r\n\r\n this.#updateMenuState(this.#menu, count);\r\n\r\n (this.#formField ?? this.#input).insertAdjacentElement(\"afterend\", this.#menu);\r\n\r\n this.#input.setAttribute(\"aria-controls\", this.#menuId);\r\n this.#input.setAttribute(\"aria-owns\", this.#menuId);\r\n\r\n this.#formField?.notifyControlStateChange();\r\n\r\n if (this._listKeyManager.activeItem && this.autoActivate) {\r\n this.#activateOption(this._listKeyManager.activeItem, true);\r\n }\r\n\r\n const input = this.#input;\r\n setTimeout(() => this.#menu?.show(input, this.#formField?.menuAnchor));\r\n }\r\n\r\n /** @private */\r\n #projectClone(): void {\r\n if (!this.#clone || !this.#menu) return;\r\n const children = [...this.#clone.childNodes];\r\n if (!this.#hasNoDataSlot && this.noDataLabel) {\r\n const noDataSpan = document.createElement(\"span\");\r\n noDataSpan.slot = \"no-data\";\r\n noDataSpan.textContent = this.noDataLabel;\r\n children.push(noDataSpan);\r\n }\r\n if (!this.#hasLoadingSlot && this.loadingLabel) {\r\n const loadingSpan = document.createElement(\"span\");\r\n loadingSpan.slot = \"loading\";\r\n loadingSpan.textContent = this.loadingLabel;\r\n children.push(loadingSpan);\r\n }\r\n this.#menu.replaceChildren(...children);\r\n }\r\n\r\n /** @private */\r\n #updateMenuState(menu: M3eOptionPanelElement, count: number): void {\r\n setCustomState(menu, \"--loading\", this.loading);\r\n setCustomState(menu, \"--no-data\", count == 0);\r\n }\r\n\r\n /** @private */\r\n #hideMenu(): void {\r\n this.#menu?.hide();\r\n }\r\n\r\n /** @private */\r\n #activateOption(option: M3eOptionElement, forceFocusVisible = false): void {\r\n if (!this.#input) return;\r\n\r\n this.#input.setAttribute(\"aria-activedescendant\", option.id);\r\n\r\n if (this.#menu) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n\r\n const focusVisible =\r\n forceFocusVisible ||\r\n (!this.#ignoreFocusVisible && (this.#input.matches(\":focus-visible\") || forcedColorsActive()));\r\n\r\n this.#options.forEach((x) => {\r\n const active = x === option && focusVisible;\r\n if (active) {\r\n x.focusRing?.show();\r\n x.stateLayer?.show(\"focused\");\r\n } else {\r\n x.focusRing?.hide();\r\n x.stateLayer?.hide(\"focused\");\r\n }\r\n });\r\n }\r\n }\r\n\r\n /** @private */\r\n async #updateSelectionState(clone: M3eOptionElement): Promise<void> {\r\n const option = this._options[this._listKeyManager.items.indexOf(clone)];\r\n if (option) {\r\n option.selected = clone.selected;\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n async #selectOption(option: M3eOptionElement): Promise<void> {\r\n if (option.selected) return;\r\n\r\n option.selected = true;\r\n await this.#updateSelectionState(option);\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n\r\n this.requestUpdate();\r\n if (this.isUpdatePending) {\r\n await this.updateComplete;\r\n }\r\n\r\n if (this.#input) {\r\n this.#input.value = option.label;\r\n }\r\n\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n\r\n this.#formField?.notifyControlStateChange(true);\r\n }\r\n\r\n /** @private */\r\n #filterOption(clone: M3eOptionElement, option: M3eOptionElement, term: string, exactTerm: string): boolean {\r\n const value = this.caseSensitive ? option.value : option.value.toLowerCase();\r\n switch (this.filter) {\r\n case \"starts-with\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.startsWith(term);\r\n case \"ends-with\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.endsWith(term);\r\n case \"contains\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.includes(term);\r\n case \"none\":\r\n clone.disableHighlight = true;\r\n return true;\r\n default:\r\n clone.disableHighlight = true;\r\n return this.filter(option, exactTerm);\r\n }\r\n }\r\n\r\n /** @private */\r\n #filterOptions(): number {\r\n if (!this.#input) return 0;\r\n\r\n const oldCount = this.#options.filter((x) => x.hidden === false).length;\r\n const shouldAnnounce = !this.loading && this.#inputChanged;\r\n this.#inputChanged = false;\r\n\r\n const exactTerm = this.#input.value;\r\n const term = this.caseSensitive ? exactTerm : exactTerm.toLocaleLowerCase();\r\n\r\n let newCount = 0;\r\n let first = false;\r\n let last: M3eOptionElement | undefined;\r\n\r\n for (let i = 0; i < this.#options.length; i++) {\r\n const clone = this.#options[i];\r\n const option = this._options[i];\r\n clone.hidden = !this.#filterOption(clone, option, term, exactTerm);\r\n\r\n if (clone.hidden === true) {\r\n this.#deactivateOption(clone);\r\n deleteCustomState(clone, \"--first\");\r\n deleteCustomState(clone, \"--last\");\r\n } else {\r\n newCount++;\r\n if (!first && !(clone.parentElement instanceof M3eOptGroupElement)) {\r\n addCustomState(clone, \"--first\");\r\n first = true;\r\n addCustomState(clone, \"--last\");\r\n last = clone;\r\n } else {\r\n deleteCustomState(clone, \"--first\");\r\n if (last) {\r\n deleteCustomState(last, \"--last\");\r\n }\r\n addCustomState(clone, \"--last\");\r\n last = clone;\r\n }\r\n }\r\n }\r\n\r\n if (this.#menu) {\r\n this.#updateMenuState(this.#menu, newCount);\r\n }\r\n\r\n const groups = this.#menu?.querySelectorAll(\"m3e-optgroup\") ?? this.#clone?.querySelectorAll(\"m3e-optgroup\") ?? [];\r\n for (const group of groups) {\r\n group.hidden = [...group.querySelectorAll(\"m3e-option\")].every((x) => x.hidden === true);\r\n }\r\n\r\n if (shouldAnnounce) {\r\n this.#announceResults(oldCount, newCount);\r\n }\r\n\r\n this.#autoActivate();\r\n return newCount;\r\n }\r\n\r\n /** @private */\r\n #clearOptions(): boolean {\r\n const selected = this._listKeyManager.items.filter((x) => x.selected);\r\n if (selected.length > 0) {\r\n selected.forEach((x) => {\r\n x.selected = false;\r\n this.#updateSelectionState(x);\r\n });\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n /** @private */\r\n #announceResults(oldCount: number, newCount: number): void {\r\n if (!this.#hasFocus) return;\r\n if (newCount == 0) {\r\n if (oldCount > 0 && this.noDataLabel) {\r\n M3eLiveAnnouncer.announce(this.noDataLabel, \"polite\");\r\n }\r\n } else if (oldCount != newCount) {\r\n const message = this.resultsLabel instanceof Function ? this.resultsLabel(newCount) : this.resultsLabel;\r\n if (message) {\r\n M3eLiveAnnouncer.announce(message, \"polite\");\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #autoActivate(): void {\r\n if (this.autoActivate && (!this._listKeyManager.activeItem || !this._listKeyManager.activeItem.selected)) {\r\n const option = this.#options.find((x) => !x.disabled && x.hidden === false);\r\n if (option) {\r\n this._listKeyManager.setActiveItem(option);\r\n if (this.#menu) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #deactivateOption(option: M3eOptionElement): void {\r\n option.focusRing?.hide();\r\n option.stateLayer?.hide(\"focused\");\r\n if (option === this._listKeyManager.activeItem) {\r\n this._listKeyManager.updateActiveItem(null);\r\n this.#input?.removeAttribute(\"aria-activedescendant\");\r\n }\r\n }\r\n}\r\n\r\ninterface M3eAutocompleteElementEventMap extends HTMLElementEventMap {\r\n toggle: ToggleEvent;\r\n query: CustomEvent<AutocompleteQueryEventDetail>;\r\n}\r\n\r\nexport interface M3eAutocompleteElement {\r\n addEventListener<K extends keyof M3eAutocompleteElementEventMap>(\r\n type: K,\r\n listener: (this: M3eAutocompleteElement, ev: M3eAutocompleteElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eAutocompleteElementEventMap>(\r\n type: K,\r\n listener: (this: M3eAutocompleteElement, ev: M3eAutocompleteElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-autocomplete\": M3eAutocompleteElement;\r\n }\r\n}\r\n"],"names":["M3eAutocompleteElement","HtmlFor","LitElement","constructor","super","_M3eAutocompleteElement_id","set","this","M3eAutocompleteElement_1","__nextId","_M3eAutocompleteElement_menuId","__classPrivateFieldGet","_options","Array","_M3eAutocompleteElement_clone","_M3eAutocompleteElement_ignoreFocusVisible","_M3eAutocompleteElement_menu","_M3eAutocompleteElement_ignoreHideMenuOnBlur","_M3eAutocompleteElement_inputChanged","_M3eAutocompleteElement_hasFocus","_M3eAutocompleteElement_mutationAbortController","_M3eAutocompleteElement_clickHandler","_M3eAutocompleteElement_instances","_M3eAutocompleteElement_handleClick","call","_M3eAutocompleteElement_formFieldPointerDownHandler","_M3eAutocompleteElement_handleFormFieldPointerDown","_M3eAutocompleteElement_focusHandler","_M3eAutocompleteElement_handleFocus","_M3eAutocompleteElement_blurHandler","_M3eAutocompleteElement_handleBlur","_M3eAutocompleteElement_keyDownHandler","e","_M3eAutocompleteElement_inputHandler","_M3eAutocompleteElement_changeHandler","_M3eAutocompleteElement_handleChange","_M3eAutocompleteElement_menuToggleHandler","_M3eAutocompleteElement_menuPointerDownHandler","_M3eAutocompleteElement_menuPointerUpHandler","_M3eAutocompleteElement_menuPressedOption","_listKeyManager","ListKeyManager","withWrap","withHomeAndEnd","withPageUpAndDown","withVerticalOrientation","withSkipPredicate","item","disabled","hidden","onActiveItemChange","activeItem","_M3eAutocompleteElement_activateOption","hideSelectionIndicator","required","autoActivate","caseSensitive","filter","loading","hideNoData","hideLoading","loadingLabel","noDataLabel","resultsLabel","count","panelClass","MutationController","config","childList","subtree","callback","_M3eAutocompleteElement_handleMutation","options","selected","find","x","value","attach","control","HTMLInputElement","autocomplete","role","ariaAutoComplete","ariaExpanded","addEventListener","_M3eAutocompleteElement_formField_get","detach","removeEventListener","clear","restoreFocus","_M3eAutocompleteElement_input_get","_M3eAutocompleteElement_clearOptions","dispatchEvent","Event","bubbles","_M3eAutocompleteElement_filterOptions","focus","_M3eAutocompleteElement_hideMenu","connectedCallback","update","changedProperties","has","setCustomState","M3eLiveAnnouncer","announce","_M3eAutocompleteElement_shouldShowMenu_get","_M3eAutocompleteElement_showMenu","deleteCustomState","render","html","items","querySelector","_M3eAutocompleteElement_options_get","some","length","closest","async","abort","mutationAbortController","AbortController","__classPrivateFieldSet","querySelectorAll","option","signal","aborted","isUpdatePending","updateComplete","cloneNode","added","setItems","forEach","id","indexOf","_M3eAutocompleteElement_projectClone","_M3eAutocompleteElement_updateMenuState","readOnly","CustomEvent","detail","term","composed","defaultPrevented","notifyControlStateChange","label","key","preventDefault","_M3eAutocompleteElement_selectOption","prefersReducedMotion","setTimeout","altKey","onKeyDown","undefined","button","stopImmediatePropagation","composedPath","HTMLElement","tagName","pressedOption","setActiveItem","newState","scrollIntoViewIfNeeded","_M3eAutocompleteElement_autoActivate","ToggleEvent","oldState","_M3eAutocompleteElement_destroyMenu","replaceChildren","childNodes","remove","removeAttribute","requestUpdate","slot","parentElement","document","createElement","klass","split","map","d","trim","Boolean","classList","add","style","overflowX","scrollStrategy","fitAnchorWidth","insertAdjacentElement","setAttribute","input","show","menuAnchor","children","_M3eAutocompleteElement_hasNoDataSlot_get","noDataSpan","textContent","push","_M3eAutocompleteElement_hasLoadingSlot_get","loadingSpan","menu","hide","forceFocusVisible","block","behavior","focusVisible","matches","forcedColorsActive","focusRing","stateLayer","clone","_M3eAutocompleteElement_updateSelectionState","_M3eAutocompleteElement_filterOption","exactTerm","toLowerCase","highlightMode","startsWith","endsWith","includes","disableHighlight","oldCount","shouldAnnounce","toLocaleLowerCase","last","newCount","first","i","_M3eAutocompleteElement_deactivateOption","M3eOptGroupElement","addCustomState","groups","group","every","_M3eAutocompleteElement_announceResults","message","Function","updateActiveItem","styles","css","__decorate","property","attribute","type","prototype","reflect","converter","fromAttribute","customElement"],"mappings":"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"}
|
package/dist/bottom-sheet.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
|
|
7
|
-
import { customElement, ActionElementBase,
|
|
7
|
+
import { customElement, ActionElementBase, ReconnectedCallback, SuppressInitialAnimation, AttachInternals, VelocityTracker, ScrollLockController, InertController, ResizeController, focusWhenReady, hasCustomState, computeCssSize, prefersReducedMotion, setCustomState, registerStyleSheet, DesignToken, spaceSeparatedStringConverter, HtmlFor } from '@m3e/web/core';
|
|
8
8
|
import { LitElement, nothing, html, css, unsafeCSS } from 'lit';
|
|
9
9
|
import { property } from 'lit/decorators.js';
|
|
10
10
|
import { M3eInteractivityChecker, isModifierAllowed, addAriaReferencedId, removeAriaReferencedId } from '@m3e/web/core/a11y';
|
|
@@ -23,7 +23,7 @@ let M3eBottomSheetActionElement = class M3eBottomSheetActionElement extends Acti
|
|
|
23
23
|
};
|
|
24
24
|
M3eBottomSheetActionElement = __decorate([customElement("m3e-bottom-sheet-action")], M3eBottomSheetActionElement);
|
|
25
25
|
|
|
26
|
-
var _M3eBottomSheetElement_instances, _M3eBottomSheetElement_documentClickHandler, _M3eBottomSheetElement_documentKeyDownHandler, _M3eBottomSheetElement_windowResizeHandler, _M3eBottomSheetElement_velocityTracker, _M3eBottomSheetElement_scrollLockController, _M3eBottomSheetElement_inertController, _M3eBottomSheetElement_resizeController, _M3eBottomSheetElement_trigger, _M3eBottomSheetElement_dragState, _M3eBottomSheetElement_dragged, _M3eBottomSheetElement_activeDetent, _M3eBottomSheetElement_requestDetent, _M3eBottomSheetElement_cachedContentHeight, _M3eBottomSheetElement_cachedHeaderHeight, _M3eBottomSheetElement_snapAnimation, _M3eBottomSheetElement_initialize,
|
|
26
|
+
var _M3eBottomSheetElement_instances, _M3eBottomSheetElement_documentClickHandler, _M3eBottomSheetElement_documentKeyDownHandler, _M3eBottomSheetElement_windowResizeHandler, _M3eBottomSheetElement_velocityTracker, _M3eBottomSheetElement_scrollLockController, _M3eBottomSheetElement_inertController, _M3eBottomSheetElement_resizeController, _M3eBottomSheetElement_trigger, _M3eBottomSheetElement_dragState, _M3eBottomSheetElement_dragged, _M3eBottomSheetElement_activeDetent, _M3eBottomSheetElement_requestDetent, _M3eBottomSheetElement_cachedContentHeight, _M3eBottomSheetElement_cachedHeaderHeight, _M3eBottomSheetElement_snapAnimation, _M3eBottomSheetElement_initialize, _M3eBottomSheetElement_handleHeaderPointerDown, _M3eBottomSheetElement_handleHeaderPointerMove, _M3eBottomSheetElement_handleHeaderPointerUp, _M3eBottomSheetElement_handleDocumentClick, _M3eBottomSheetElement_handleDocumentKeyDown, _M3eBottomSheetElement_handleWindowResize, _M3eBottomSheetElement_handleDragHandleClick, _M3eBottomSheetElement_handleDragHandleKeyDown, _M3eBottomSheetElement_getNextHigherDetent, _M3eBottomSheetElement_getNextLowerDetent, _M3eBottomSheetElement_getClosestDetent, _M3eBottomSheetElement_computeDetentHeight, _M3eBottomSheetElement_computeMaxHeight, _M3eBottomSheetElement_computeMinHeight, _M3eBottomSheetElement_computePeekHeight, _M3eBottomSheetElement_computeFitHeight, _M3eBottomSheetElement_handleSectionResize, _M3eBottomSheetElement_snapToDetent, _M3eBottomSheetElement_snapToHeight, _M3eBottomSheetElement_updateHeight;
|
|
27
27
|
var M3eBottomSheetElement_1;
|
|
28
28
|
/**
|
|
29
29
|
* A sheet used to show secondary content anchored to the bottom of the screen.
|
|
@@ -123,7 +123,7 @@ var M3eBottomSheetElement_1;
|
|
|
123
123
|
* @cssprop --m3e-bottom-sheet-header-line-height - Line height for the sheet header.
|
|
124
124
|
* @cssprop --m3e-bottom-sheet-header-tracking - Letter spacing (tracking) for the sheet header.
|
|
125
125
|
*/
|
|
126
|
-
let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElement extends
|
|
126
|
+
let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElement extends ReconnectedCallback(SuppressInitialAnimation(AttachInternals(LitElement))) {
|
|
127
127
|
constructor() {
|
|
128
128
|
super(...arguments);
|
|
129
129
|
_M3eBottomSheetElement_instances.add(this);
|
|
@@ -347,7 +347,7 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
|
|
|
347
347
|
}
|
|
348
348
|
/** @inheritdoc */
|
|
349
349
|
render() {
|
|
350
|
-
return html`<m3e-focus-trap ?disabled="${!this.modal}"><div class="base"><m3e-elevation class="elevation"></m3e-elevation><div class="header" @pointerdown="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerUp)}">${this.handle ? html`<div class="handle-row"><div id="handle" class="handle" role="button" aria-label="${this.handleLabel}" tabindex="0" @click="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleDragHandleClick)}" @keydown="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleDragHandleKeyDown)}"><m3e-focus-ring class="focus-ring" for="handle"></m3e-focus-ring><div class="handle-touch" aria-hidden="true"></div></div></div>` : nothing}<slot name="header"
|
|
350
|
+
return html`<m3e-focus-trap ?disabled="${!this.modal}"><div class="base"><m3e-elevation class="elevation"></m3e-elevation><div class="header" @pointerdown="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleHeaderPointerUp)}">${this.handle ? html`<div class="handle-row"><div id="handle" class="handle" role="button" aria-label="${this.handleLabel}" tabindex="0" @click="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleDragHandleClick)}" @keydown="${__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_handleDragHandleKeyDown)}"><m3e-focus-ring class="focus-ring" for="handle"></m3e-focus-ring><div class="handle-touch" aria-hidden="true"></div></div></div>` : nothing}<slot name="header"></slot></div><div class="body"><div class="content"><slot></slot></div></div></div></m3e-focus-trap>`;
|
|
351
351
|
}
|
|
352
352
|
};
|
|
353
353
|
_M3eBottomSheetElement_documentClickHandler = new WeakMap();
|
|
@@ -378,9 +378,6 @@ _M3eBottomSheetElement_initialize = function _M3eBottomSheetElement_initialize()
|
|
|
378
378
|
__classPrivateFieldGet(this, _M3eBottomSheetElement_resizeController, "f").observe(header);
|
|
379
379
|
}
|
|
380
380
|
};
|
|
381
|
-
_M3eBottomSheetElement_handleHeaderSlotChange = function _M3eBottomSheetElement_handleHeaderSlotChange(e) {
|
|
382
|
-
setCustomState(this, "has-header", hasAssignedNodes(e.target));
|
|
383
|
-
};
|
|
384
381
|
_M3eBottomSheetElement_handleHeaderPointerDown = function _M3eBottomSheetElement_handleHeaderPointerDown(e) {
|
|
385
382
|
if (e.target instanceof HTMLElement && M3eInteractivityChecker.isFocusable(e.target)) {
|
|
386
383
|
return;
|
|
@@ -498,7 +495,7 @@ _M3eBottomSheetElement_handleWindowResize = function _M3eBottomSheetElement_hand
|
|
|
498
495
|
return;
|
|
499
496
|
}
|
|
500
497
|
const maxHeight = __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_computeMaxHeight).call(this);
|
|
501
|
-
if (hasCustomState(this, "
|
|
498
|
+
if (hasCustomState(this, "--full")) {
|
|
502
499
|
__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_updateHeight).call(this, maxHeight);
|
|
503
500
|
} else if (this.clientHeight > maxHeight) {
|
|
504
501
|
__classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_updateHeight).call(this, maxHeight);
|
|
@@ -675,7 +672,7 @@ async function _M3eBottomSheetElement_snapToHeight(height) {
|
|
|
675
672
|
};
|
|
676
673
|
_M3eBottomSheetElement_updateHeight = function _M3eBottomSheetElement_updateHeight(height) {
|
|
677
674
|
this.style.setProperty("--_bottom-sheet-height", `${height}px`);
|
|
678
|
-
setCustomState(this, "
|
|
675
|
+
setCustomState(this, "--full", height === __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_computeMaxHeight).call(this));
|
|
679
676
|
const content = this.shadowRoot?.querySelector(".content");
|
|
680
677
|
if (content) {
|
|
681
678
|
content.inert = height <= __classPrivateFieldGet(this, _M3eBottomSheetElement_instances, "m", _M3eBottomSheetElement_computePeekHeight).call(this);
|
|
@@ -685,15 +682,15 @@ _M3eBottomSheetElement_updateHeight = function _M3eBottomSheetElement_updateHeig
|
|
|
685
682
|
registerStyleSheet(css`@property --_bottom-sheet-height { syntax: "<length>"; inherits: false; initial-value: 50vh; } m3e-bottom-sheet > [slot="header"] { margin-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); margin-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); }</length>`);
|
|
686
683
|
})();
|
|
687
684
|
/** The styles of the element. */
|
|
688
|
-
M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${DesignToken.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow}); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`transform ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standardDecelerate},
|
|
689
|
-
border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)}; } :host(:not([modal]):not(:state(
|
|
685
|
+
M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${DesignToken.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow}); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${unsafeCSS(`transform ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standardDecelerate},
|
|
686
|
+
border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)}; } :host(:not([modal]):not(:is(:state(--full), :--full))) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${DesignToken.elevation.level1}); } :host([modal]:not(:is(:state(--full), :--full))) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${DesignToken.elevation.level1}); } :host(:is(:state(--full), :--full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${DesignToken.elevation.level1}); } :host(:not([modal])) { z-index: var(--m3e-bottom-sheet-z-index, 10); } :host(:not([modal]):not([open])), :host([modal]:not(:popover-open)) { border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${DesignToken.shape.corner.none}); transform: translateX(-50%) translateY(100%); } :host(:not([modal])[open]:not(:is(:state(--full), :--full))), :host([modal]:not(:is(:state(--full), :--full)):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${DesignToken.shape.corner.extraLargeTop}); } :host(:not([modal])[open]:is(:state(--full), :--full)), :host([modal]:is(:state(--full), :--full):popover-open) { border-radius: var(--m3e-bottom-sheet-full-container-shape, ${DesignToken.shape.corner.extraLargeTop}); } :host(:not([modal])[open]), :host([modal]:popover-open) { transform: translateX(-50%) translateY(0); } :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
|
|
690
687
|
overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
|
|
691
|
-
visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); } :host([modal]:popover-open:not(:state(-no-animate)))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
|
|
688
|
+
visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); } :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
|
|
692
689
|
overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,
|
|
693
|
-
visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle])) .header { display: none; } :host(:not([handle])) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken.typescale.standard.title.large.tracking}); } .header { cursor: grab; touch-action: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } :host(:not(:state(-no-animate))) .handle-row { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
|
|
690
|
+
visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle])) .header { display: none; } :host(:not([handle])) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken.typescale.standard.title.large.tracking}); } .header { cursor: grab; touch-action: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
|
|
694
691
|
padding ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
|
|
695
692
|
height ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
|
|
696
|
-
visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))), :host([modal]:not(:state(-no-animate)))::backdrop, :host([modal]:popover-open:not(:state(-no-animate)))::backdrop, :host(:not(:state(-no-animate))) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(:state(-no-animate)))::backdrop, :host([modal]:popover-open:not(:state(-no-animate)))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
|
|
693
|
+
visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))), :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
|
|
697
694
|
__decorate([property({
|
|
698
695
|
type: Boolean,
|
|
699
696
|
reflect: true
|