@m3e/autocomplete 1.0.6

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.
@@ -0,0 +1,33 @@
1
+ {
2
+ "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
3
+ "version": 1.1,
4
+ "tags": [
5
+ {
6
+ "name": "m3e-autocomplete",
7
+ "description": "Enhances a text input with suggested options.\n---\n\n\n### **Events:**\n - **toggle**\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n- **clear(restoreFocus): _void_** - Clears the value of the element.\n\n### **Slots:**\n - _default_ - Renders the options of the autocomplete.",
8
+ "attributes": [
9
+ {
10
+ "name": "auto-activate",
11
+ "description": "Whether the first option should be automatically activated.",
12
+ "values": []
13
+ },
14
+ {
15
+ "name": "hide-selection-indicator",
16
+ "description": "Whether to hide the selection indicator.",
17
+ "values": []
18
+ },
19
+ {
20
+ "name": "required",
21
+ "description": "Whether the user is required to make a selection when interacting with the autocomplete.",
22
+ "values": []
23
+ },
24
+ {
25
+ "name": "for",
26
+ "description": "The identifier of the interactive control to which this element is attached.",
27
+ "values": []
28
+ }
29
+ ],
30
+ "references": []
31
+ }
32
+ ]
33
+ }
package/dist/index.js ADDED
@@ -0,0 +1,539 @@
1
+ /**
2
+ * @license MIT
3
+ * Copyright (c) 2025 matraic
4
+ * See LICENSE file in the project root for full license text.
5
+ */
6
+ import { LitElement, html, css } from 'lit';
7
+ import { HtmlFor, scrollIntoViewIfNeeded, prefersReducedMotion, forcedColorsActive } from '@m3e/core';
8
+ import { ListKeyManager } from '@m3e/core/a11y';
9
+
10
+ /******************************************************************************
11
+ Copyright (c) Microsoft Corporation.
12
+
13
+ Permission to use, copy, modify, and/or distribute this software for any
14
+ purpose with or without fee is hereby granted.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
17
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
18
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
19
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
20
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
21
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
22
+ PERFORMANCE OF THIS SOFTWARE.
23
+ ***************************************************************************** */
24
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
25
+
26
+
27
+ function __decorate(decorators, target, key, desc) {
28
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
29
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
30
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
31
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
32
+ }
33
+
34
+ function __classPrivateFieldGet(receiver, state, kind, f) {
35
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
36
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
37
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
38
+ }
39
+
40
+ function __classPrivateFieldSet(receiver, state, value, kind, f) {
41
+ if (kind === "m") throw new TypeError("Private method is not writable");
42
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
43
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
44
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
45
+ }
46
+
47
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
48
+ var e = new Error(message);
49
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
50
+ };
51
+
52
+ /**
53
+ * @license
54
+ * Copyright 2017 Google LLC
55
+ * SPDX-License-Identifier: BSD-3-Clause
56
+ */
57
+ const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
58
+
59
+ /**
60
+ * @license
61
+ * Copyright 2019 Google LLC
62
+ * SPDX-License-Identifier: BSD-3-Clause
63
+ */
64
+ const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$2=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$2("string"==typeof t?t:t+"",void 0,s),S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
65
+
66
+ /**
67
+ * @license
68
+ * Copyright 2017 Google LLC
69
+ * SPDX-License-Identifier: BSD-3-Clause
70
+ */const{is:i,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$1,getPrototypeOf:n$1}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r$1(t),...o$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
71
+
72
+ /**
73
+ * @license
74
+ * Copyright 2017 Google LLC
75
+ * SPDX-License-Identifier: BSD-3-Clause
76
+ */const o={attribute:true,type:String,converter:u,reflect:false,hasChanged:f},r=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
77
+
78
+ var _M3eAutocompleteElement_instances, _M3eAutocompleteElement_id, _M3eAutocompleteElement_menuId, _M3eAutocompleteElement_ignoreFocusVisible, _M3eAutocompleteElement_menu, _M3eAutocompleteElement_textHighlight, _M3eAutocompleteElement_ignoreHideMenuOnBlur, _M3eAutocompleteElement_clickHandler, _M3eAutocompleteElement_formFieldPointerDownHandler, _M3eAutocompleteElement_focusHandler, _M3eAutocompleteElement_blurHandler, _M3eAutocompleteElement_keyDownHandler, _M3eAutocompleteElement_inputHandler, _M3eAutocompleteElement_changeHandler, _M3eAutocompleteElement_menuToggleHandler, _M3eAutocompleteElement_menuPointerDownHandler, _M3eAutocompleteElement_input_get, _M3eAutocompleteElement_hasVisibleOptions_get, _M3eAutocompleteElement_minMenuWidth_get, _M3eAutocompleteElement_formField_get, _M3eAutocompleteElement_handleSlotChange, _M3eAutocompleteElement_handleClick, _M3eAutocompleteElement_handleFormFieldPointerDown, _M3eAutocompleteElement_handleFocus, _M3eAutocompleteElement_handleBlur, _M3eAutocompleteElement_handleInput, _M3eAutocompleteElement_handleChange, _M3eAutocompleteElement_handleKeyDown, _M3eAutocompleteElement_handleMenuPointerDown, _M3eAutocompleteElement_handleMenuToggle, _M3eAutocompleteElement_destroyMenu, _M3eAutocompleteElement_showMenu, _M3eAutocompleteElement_hideMenu, _M3eAutocompleteElement_activateOption, _M3eAutocompleteElement_selectOption, _M3eAutocompleteElement_filterOptions, _M3eAutocompleteElement_autoActivate, _M3eAutocompleteElement_deactivateOption;
79
+ var M3eAutocompleteElement_1;
80
+ /**
81
+ * Enhances a text input with suggested options.
82
+ *
83
+ * @description
84
+ * The `m3e-autocomplete` component augments a text input field with a dynamically positioned menu of filterable suggestions,
85
+ * following Material Design 3 principles. It provides real-time filtering, keyboard navigation, automatic option activation,
86
+ * and text highlighting to guide user selection. The component manages focus, selection state, and menu visibility while
87
+ * integrating seamlessly with form field containers and supporting both required and optional selection modes.
88
+ *
89
+ * @example
90
+ * The following example illustrates use of the `m3e-autocomplete` paired with a `m3e-form-field`.
91
+ * ```html
92
+ * <m3e-form-field>
93
+ * <label slot="label" for="fruit">Choose your favorite fruit</label>
94
+ * <input id="fruit" />
95
+ * </m3e-form-field>
96
+ * <m3e-autocomplete for="fruit">
97
+ * <m3e-option>Apples</m3e-option>
98
+ * <m3e-option>Oranges</m3e-option>
99
+ * <m3e-option>Bananas</m3e-option>
100
+ * <m3e-option>Grapes</m3e-option>
101
+ * </m3e-autocomplete>
102
+ * ```
103
+ *
104
+ * @tag m3e-autocomplete
105
+ *
106
+ * @attr auto-activate - Whether the first option should be automatically activated.
107
+ * @attr hide-selection-indicator - Whether to hide the selection indicator.
108
+ * @attr required - Whether the user is required to make a selection when interacting with the autocomplete.
109
+ *
110
+ * @slot - Renders the options of the autocomplete.
111
+ */
112
+ let M3eAutocompleteElement = M3eAutocompleteElement_1 = class M3eAutocompleteElement extends HtmlFor(LitElement) {
113
+ constructor() {
114
+ super(...arguments);
115
+ _M3eAutocompleteElement_instances.add(this);
116
+ /** @private */ _M3eAutocompleteElement_id.set(this, `m3e-autocomplete-${M3eAutocompleteElement_1.__nextId}`);
117
+ /** @private */ _M3eAutocompleteElement_menuId.set(this, `${__classPrivateFieldGet(this, _M3eAutocompleteElement_id, "f")}-menu`);
118
+ /** @private */ _M3eAutocompleteElement_ignoreFocusVisible.set(this, false);
119
+ /** @private */ _M3eAutocompleteElement_menu.set(this, void 0);
120
+ /** @private */ _M3eAutocompleteElement_textHighlight.set(this, void 0);
121
+ /** @private */ _M3eAutocompleteElement_ignoreHideMenuOnBlur.set(this, false);
122
+ /** @private */ _M3eAutocompleteElement_clickHandler.set(this, () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleClick).call(this));
123
+ /** @private */ _M3eAutocompleteElement_formFieldPointerDownHandler.set(this, () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleFormFieldPointerDown).call(this));
124
+ /** @private */ _M3eAutocompleteElement_focusHandler.set(this, () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleFocus).call(this));
125
+ /** @private */ _M3eAutocompleteElement_blurHandler.set(this, () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleBlur).call(this));
126
+ /** @private */ _M3eAutocompleteElement_keyDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleKeyDown).call(this, e));
127
+ /** @private */ _M3eAutocompleteElement_inputHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleInput).call(this, e));
128
+ /** @private */ _M3eAutocompleteElement_changeHandler.set(this, () => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleChange).call(this));
129
+ /** @private */ _M3eAutocompleteElement_menuToggleHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleMenuToggle).call(this, e));
130
+ /** @private */ _M3eAutocompleteElement_menuPointerDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleMenuPointerDown).call(this, e));
131
+ /** @private */ this._listKeyManager = new ListKeyManager()
132
+ .withWrap()
133
+ .withHomeAndEnd()
134
+ .withPageUpAndDown()
135
+ .withVerticalOrientation()
136
+ .withSkipPredicate((item) => item.disabled || item.style.display === "none")
137
+ .onActiveItemChange(() => {
138
+ if (this._listKeyManager.activeItem) {
139
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_activateOption).call(this, this._listKeyManager.activeItem);
140
+ }
141
+ });
142
+ /**
143
+ * Whether to hide the selection indicator.
144
+ * @default false
145
+ */
146
+ this.hideSelectionIndicator = false;
147
+ /**
148
+ * Whether the user is required to make a selection when interacting with the autocomplete.
149
+ * @default false
150
+ */
151
+ this.required = false;
152
+ /**
153
+ * Whether the first option should be automatically activated.
154
+ * @default false
155
+ */
156
+ this.autoActivate = false;
157
+ }
158
+ /** The options that can be selected. */
159
+ get options() {
160
+ return this._listKeyManager?.items ?? [];
161
+ }
162
+ /** @inheritdoc */
163
+ attach(control) {
164
+ if (!(control instanceof HTMLInputElement))
165
+ return;
166
+ super.attach(control);
167
+ control.autocomplete = "off";
168
+ control.role = "combobox";
169
+ control.ariaAutoComplete = "list";
170
+ control.ariaExpanded = "false";
171
+ control.addEventListener("click", __classPrivateFieldGet(this, _M3eAutocompleteElement_clickHandler, "f"));
172
+ control.addEventListener("focus", __classPrivateFieldGet(this, _M3eAutocompleteElement_focusHandler, "f"));
173
+ control.addEventListener("blur", __classPrivateFieldGet(this, _M3eAutocompleteElement_blurHandler, "f"));
174
+ control.addEventListener("keydown", __classPrivateFieldGet(this, _M3eAutocompleteElement_keyDownHandler, "f"));
175
+ control.addEventListener("input", __classPrivateFieldGet(this, _M3eAutocompleteElement_inputHandler, "f"));
176
+ control.addEventListener("change", __classPrivateFieldGet(this, _M3eAutocompleteElement_changeHandler, "f"));
177
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eAutocompleteElement_formFieldPointerDownHandler, "f"));
178
+ }
179
+ /** @inheritdoc */
180
+ detach() {
181
+ if (this.control) {
182
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.removeEventListener("pointerdown", __classPrivateFieldGet(this, _M3eAutocompleteElement_formFieldPointerDownHandler, "f"));
183
+ this.control.role = null;
184
+ this.control.ariaAutoComplete = null;
185
+ this.control.ariaExpanded = null;
186
+ this.control.removeEventListener("click", __classPrivateFieldGet(this, _M3eAutocompleteElement_clickHandler, "f"));
187
+ this.control.removeEventListener("focus", __classPrivateFieldGet(this, _M3eAutocompleteElement_focusHandler, "f"));
188
+ this.control.removeEventListener("blur", __classPrivateFieldGet(this, _M3eAutocompleteElement_blurHandler, "f"));
189
+ this.control.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eAutocompleteElement_keyDownHandler, "f"));
190
+ this.control.removeEventListener("input", __classPrivateFieldGet(this, _M3eAutocompleteElement_inputHandler, "f"));
191
+ this.control.removeEventListener("change", __classPrivateFieldGet(this, _M3eAutocompleteElement_changeHandler, "f"));
192
+ }
193
+ super.detach();
194
+ }
195
+ /**
196
+ * Clears the value of the element.
197
+ * @param [restoreFocus=false] Whether to restore input focus.
198
+ */
199
+ clear(restoreFocus = false) {
200
+ if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get))
201
+ return;
202
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = "";
203
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f")) {
204
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").term = "";
205
+ }
206
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
207
+ if (restoreFocus) {
208
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).focus();
209
+ }
210
+ else {
211
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
212
+ }
213
+ }
214
+ /** @inheritdoc */
215
+ connectedCallback() {
216
+ this.role = this.role || "none";
217
+ super.connectedCallback();
218
+ }
219
+ /** @inheritdoc */
220
+ render() {
221
+ return html `<div class="options" role="listbox">
222
+ <slot @slotchange="${__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_handleSlotChange)}"></slot>
223
+ </div>`;
224
+ }
225
+ };
226
+ _M3eAutocompleteElement_id = new WeakMap();
227
+ _M3eAutocompleteElement_menuId = new WeakMap();
228
+ _M3eAutocompleteElement_ignoreFocusVisible = new WeakMap();
229
+ _M3eAutocompleteElement_menu = new WeakMap();
230
+ _M3eAutocompleteElement_textHighlight = new WeakMap();
231
+ _M3eAutocompleteElement_ignoreHideMenuOnBlur = new WeakMap();
232
+ _M3eAutocompleteElement_clickHandler = new WeakMap();
233
+ _M3eAutocompleteElement_formFieldPointerDownHandler = new WeakMap();
234
+ _M3eAutocompleteElement_focusHandler = new WeakMap();
235
+ _M3eAutocompleteElement_blurHandler = new WeakMap();
236
+ _M3eAutocompleteElement_keyDownHandler = new WeakMap();
237
+ _M3eAutocompleteElement_inputHandler = new WeakMap();
238
+ _M3eAutocompleteElement_changeHandler = new WeakMap();
239
+ _M3eAutocompleteElement_menuToggleHandler = new WeakMap();
240
+ _M3eAutocompleteElement_menuPointerDownHandler = new WeakMap();
241
+ _M3eAutocompleteElement_instances = new WeakSet();
242
+ _M3eAutocompleteElement_input_get = function _M3eAutocompleteElement_input_get() {
243
+ return this.control ? this.control : null;
244
+ };
245
+ _M3eAutocompleteElement_hasVisibleOptions_get = function _M3eAutocompleteElement_hasVisibleOptions_get() {
246
+ return this.options.some((x) => x.style.display !== "none");
247
+ };
248
+ _M3eAutocompleteElement_minMenuWidth_get = function _M3eAutocompleteElement_minMenuWidth_get() {
249
+ const formField = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get);
250
+ return `${formField ? formField.menuAnchor.clientWidth : (this.control?.clientWidth ?? 0)}px`;
251
+ };
252
+ _M3eAutocompleteElement_formField_get = function _M3eAutocompleteElement_formField_get() {
253
+ return this.control?.closest("m3e-form-field") ?? null;
254
+ };
255
+ _M3eAutocompleteElement_handleSlotChange = function _M3eAutocompleteElement_handleSlotChange() {
256
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"))
257
+ return;
258
+ const { added } = this._listKeyManager.setItems([...this.querySelectorAll("m3e-option")]);
259
+ added.forEach((x) => {
260
+ x.id = x.id || `${__classPrivateFieldGet(this, _M3eAutocompleteElement_id, "f")}-option-${this._listKeyManager.items.indexOf(x)}`;
261
+ x.classList.toggle("-hide-selection-indicator", this.hideSelectionIndicator);
262
+ });
263
+ };
264
+ _M3eAutocompleteElement_handleClick = function _M3eAutocompleteElement_handleClick() {
265
+ __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreFocusVisible, true, "f");
266
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
267
+ };
268
+ _M3eAutocompleteElement_handleFormFieldPointerDown = function _M3eAutocompleteElement_handleFormFieldPointerDown() {
269
+ __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreHideMenuOnBlur, true, "f");
270
+ };
271
+ _M3eAutocompleteElement_handleFocus = function _M3eAutocompleteElement_handleFocus() {
272
+ __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreFocusVisible, true, "f");
273
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
274
+ };
275
+ _M3eAutocompleteElement_handleBlur = function _M3eAutocompleteElement_handleBlur() {
276
+ if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_ignoreHideMenuOnBlur, "f")) {
277
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
278
+ }
279
+ __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreHideMenuOnBlur, false, "f");
280
+ };
281
+ _M3eAutocompleteElement_handleInput = function _M3eAutocompleteElement_handleInput(e) {
282
+ if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) || e.defaultPrevented)
283
+ return;
284
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f")) {
285
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").term = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value;
286
+ }
287
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
288
+ if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
289
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
290
+ }
291
+ else if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_hasVisibleOptions_get)) {
292
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
293
+ }
294
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange(true);
295
+ };
296
+ _M3eAutocompleteElement_handleChange = function _M3eAutocompleteElement_handleChange() {
297
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) && this.required && !this.options.some((x) => x.selected && !x.disabled)) {
298
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = "";
299
+ }
300
+ };
301
+ _M3eAutocompleteElement_handleKeyDown = function _M3eAutocompleteElement_handleKeyDown(e) {
302
+ if (e.defaultPrevented)
303
+ return;
304
+ __classPrivateFieldSet(this, _M3eAutocompleteElement_ignoreFocusVisible, false, "f");
305
+ switch (e.key) {
306
+ case "Backspace":
307
+ case "Delete":
308
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) && !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value) {
309
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
310
+ }
311
+ break;
312
+ case "Enter":
313
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") && this._listKeyManager.activeItem) {
314
+ e.preventDefault();
315
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_selectOption).call(this, this._listKeyManager.activeItem);
316
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
317
+ }
318
+ else if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
319
+ setTimeout(() => {
320
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) && !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value) {
321
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
322
+ }
323
+ });
324
+ }
325
+ break;
326
+ case "Escape":
327
+ case "Tab":
328
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
329
+ break;
330
+ case "Up":
331
+ case "ArrowUp":
332
+ if (e.altKey) {
333
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
334
+ }
335
+ else {
336
+ this._listKeyManager.onKeyDown(e);
337
+ }
338
+ break;
339
+ case "Down":
340
+ case "ArrowDown":
341
+ if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
342
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_showMenu).call(this);
343
+ e.preventDefault();
344
+ }
345
+ else {
346
+ this._listKeyManager.onKeyDown(e);
347
+ }
348
+ break;
349
+ default:
350
+ this._listKeyManager.onKeyDown(e);
351
+ break;
352
+ }
353
+ };
354
+ _M3eAutocompleteElement_handleMenuPointerDown = function _M3eAutocompleteElement_handleMenuPointerDown(e) {
355
+ e.preventDefault();
356
+ e.stopImmediatePropagation();
357
+ const option = (e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === "M3E-OPTION"));
358
+ if (option && !option.disabled) {
359
+ this._listKeyManager.setActiveItem(option);
360
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_selectOption).call(this, option);
361
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_hideMenu).call(this);
362
+ }
363
+ };
364
+ _M3eAutocompleteElement_handleMenuToggle = function _M3eAutocompleteElement_handleMenuToggle(e) {
365
+ if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"))
366
+ return;
367
+ if (e.newState !== "closed") {
368
+ const option = this.options.find((x) => x.selected && !x.disabled);
369
+ if (option) {
370
+ this._listKeyManager.setActiveItem(option);
371
+ scrollIntoViewIfNeeded(option, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"));
372
+ }
373
+ else {
374
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_autoActivate).call(this);
375
+ }
376
+ this.dispatchEvent(new ToggleEvent("toggle", {
377
+ oldState: e.oldState,
378
+ newState: e.newState,
379
+ }));
380
+ }
381
+ else {
382
+ if (prefersReducedMotion()) {
383
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_destroyMenu).call(this, e);
384
+ }
385
+ else {
386
+ // NOTE: use transitionend is preferred but doesn't fire when used here.
387
+ // This is a workaround until that is fixed.
388
+ setTimeout(() => __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_destroyMenu).call(this, e), 100);
389
+ }
390
+ }
391
+ };
392
+ _M3eAutocompleteElement_destroyMenu = function _M3eAutocompleteElement_destroyMenu(e) {
393
+ if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") || !__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f"))
394
+ return;
395
+ [...__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").childNodes].forEach((x) => this.append(x));
396
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").remove();
397
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").remove();
398
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").removeEventListener("toggle", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuToggleHandler, "f"));
399
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").removeEventListener("pointerdown", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuPointerDownHandler, "f"));
400
+ __classPrivateFieldSet(this, _M3eAutocompleteElement_menu, undefined, "f");
401
+ __classPrivateFieldSet(this, _M3eAutocompleteElement_textHighlight, undefined, "f");
402
+ this.ariaExpanded = "false";
403
+ this.removeAttribute("aria-controls");
404
+ this.removeAttribute("aria-owns");
405
+ this.requestUpdate();
406
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange();
407
+ this.dispatchEvent(new ToggleEvent("toggle", {
408
+ oldState: e.oldState,
409
+ newState: e.newState,
410
+ }));
411
+ };
412
+ _M3eAutocompleteElement_showMenu = function _M3eAutocompleteElement_showMenu() {
413
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f") || !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get) || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).readOnly || __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).disabled || !__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_hasVisibleOptions_get))
414
+ return;
415
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_filterOptions).call(this);
416
+ __classPrivateFieldSet(this, _M3eAutocompleteElement_menu, document.createElement("m3e-option-panel"), "f");
417
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").id = __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f");
418
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").style.overflowX = "hidden";
419
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").style.minWidth = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_minMenuWidth_get);
420
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").addEventListener("toggle", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuToggleHandler, "f"));
421
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuPointerDownHandler, "f"));
422
+ __classPrivateFieldSet(this, _M3eAutocompleteElement_textHighlight, document.createElement("m3e-text-highlight"), "f");
423
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").term = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value;
424
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f").appendChild(__classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f"));
425
+ for (const node of [...this.childNodes]) {
426
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_textHighlight, "f").append(node);
427
+ }
428
+ (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get) ?? __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)).insertAdjacentElement("afterend", __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"));
429
+ this.ariaExpanded = "true";
430
+ this.setAttribute("aria-controls", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f"));
431
+ this.setAttribute("aria-owns", __classPrivateFieldGet(this, _M3eAutocompleteElement_menuId, "f"));
432
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange();
433
+ if (this._listKeyManager.activeItem && this.autoActivate) {
434
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_activateOption).call(this, this._listKeyManager.activeItem, true);
435
+ }
436
+ setTimeout(() => __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.show(this, __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.menuAnchor));
437
+ };
438
+ _M3eAutocompleteElement_hideMenu = function _M3eAutocompleteElement_hideMenu() {
439
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.hide();
440
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)?.removeAttribute("aria-activedescendant");
441
+ };
442
+ _M3eAutocompleteElement_activateOption = function _M3eAutocompleteElement_activateOption(option, forceFocusVisible = false) {
443
+ if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get))
444
+ return;
445
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).setAttribute("aria-activedescendant", option.id);
446
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
447
+ scrollIntoViewIfNeeded(option, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), { block: "nearest", behavior: "instant" });
448
+ const focusVisible = forceFocusVisible ||
449
+ (!__classPrivateFieldGet(this, _M3eAutocompleteElement_ignoreFocusVisible, "f") && (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).matches(":focus-visible") || forcedColorsActive()));
450
+ this.options.forEach((x) => {
451
+ const active = x === option && focusVisible;
452
+ if (active) {
453
+ x.focusRing?.show();
454
+ x.stateLayer?.show("focused");
455
+ }
456
+ else {
457
+ x.focusRing?.hide();
458
+ x.stateLayer?.hide("focused");
459
+ }
460
+ });
461
+ }
462
+ };
463
+ _M3eAutocompleteElement_selectOption = function _M3eAutocompleteElement_selectOption(option) {
464
+ if (option.selected)
465
+ return;
466
+ option.selected = true;
467
+ option.requestUpdate();
468
+ this.requestUpdate();
469
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)) {
470
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value = option.value;
471
+ }
472
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_formField_get)?.notifyControlStateChange(true);
473
+ };
474
+ _M3eAutocompleteElement_filterOptions = function _M3eAutocompleteElement_filterOptions() {
475
+ if (!__classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get))
476
+ return;
477
+ const term = __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get).value.toLocaleLowerCase();
478
+ for (const option of this.options) {
479
+ const value = option.value.toLocaleLowerCase();
480
+ const hidden = !value.includes(term);
481
+ option.style.display = hidden ? "none" : "";
482
+ if (hidden) {
483
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_deactivateOption).call(this, option);
484
+ }
485
+ if (option.selected && value !== term) {
486
+ option.selected = false;
487
+ }
488
+ }
489
+ const groups = __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")?.querySelectorAll("m3e-optgroup") ?? this.querySelectorAll("m3e-optgroup");
490
+ for (const group of groups) {
491
+ const hidden = [...group.querySelectorAll("m3e-option")].every((x) => x.style.display === "none");
492
+ group.style.display = hidden ? "none" : "";
493
+ }
494
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "m", _M3eAutocompleteElement_autoActivate).call(this);
495
+ };
496
+ _M3eAutocompleteElement_autoActivate = function _M3eAutocompleteElement_autoActivate() {
497
+ if (this.autoActivate && (!this._listKeyManager.activeItem || !this._listKeyManager.activeItem.selected)) {
498
+ const option = this.options.find((x) => !x.disabled && x.style.display !== "none");
499
+ if (option) {
500
+ this._listKeyManager.setActiveItem(option);
501
+ if (__classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f")) {
502
+ scrollIntoViewIfNeeded(option, __classPrivateFieldGet(this, _M3eAutocompleteElement_menu, "f"), { block: "nearest", behavior: "instant" });
503
+ }
504
+ }
505
+ }
506
+ };
507
+ _M3eAutocompleteElement_deactivateOption = function _M3eAutocompleteElement_deactivateOption(option) {
508
+ option.focusRing?.hide();
509
+ option.stateLayer?.hide("focused");
510
+ if (option === this._listKeyManager.activeItem) {
511
+ this._listKeyManager.updateActiveItem(null);
512
+ __classPrivateFieldGet(this, _M3eAutocompleteElement_instances, "a", _M3eAutocompleteElement_input_get)?.removeAttribute("aria-activedescendant");
513
+ }
514
+ };
515
+ /** The styles of the element. */
516
+ M3eAutocompleteElement.styles = css `
517
+ :host {
518
+ display: contents;
519
+ }
520
+ .options {
521
+ display: none;
522
+ }
523
+ `;
524
+ /** @private */ M3eAutocompleteElement.__nextId = 0;
525
+ __decorate([
526
+ n({ attribute: "hide-selection-indicator", type: Boolean })
527
+ ], M3eAutocompleteElement.prototype, "hideSelectionIndicator", void 0);
528
+ __decorate([
529
+ n({ type: Boolean, reflect: true })
530
+ ], M3eAutocompleteElement.prototype, "required", void 0);
531
+ __decorate([
532
+ n({ attribute: "auto-activate", type: Boolean })
533
+ ], M3eAutocompleteElement.prototype, "autoActivate", void 0);
534
+ M3eAutocompleteElement = M3eAutocompleteElement_1 = __decorate([
535
+ t$1("m3e-autocomplete")
536
+ ], M3eAutocompleteElement);
537
+
538
+ export { M3eAutocompleteElement };
539
+ //# sourceMappingURL=index.js.map