@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.
- package/LICENSE +22 -0
- package/README.md +115 -0
- package/dist/css-custom-data.json +6 -0
- package/dist/custom-elements.json +3208 -0
- package/dist/html-custom-data.json +33 -0
- package/dist/index.js +539 -0
- package/dist/index.js.map +1 -0
- package/dist/index.min.js +38 -0
- package/dist/index.min.js.map +1 -0
- package/dist/src/AutocompleteElement.d.ts +79 -0
- package/dist/src/AutocompleteElement.d.ts.map +1 -0
- package/dist/src/index.d.ts +2 -0
- package/dist/src/index.d.ts.map +1 -0
- package/package.json +49 -0
|
@@ -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
|