@m3e/web 2.2.0 → 2.2.2
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/README.md +2 -2
- package/dist/all.js +173 -66
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +45 -45
- package/dist/all.min.js.map +1 -1
- package/dist/autocomplete.js +55 -15
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.min.js +1 -1
- package/dist/autocomplete.min.js.map +1 -1
- package/dist/calendar.js +4 -2
- package/dist/calendar.js.map +1 -1
- package/dist/calendar.min.js +3 -3
- package/dist/calendar.min.js.map +1 -1
- package/dist/core.js +1 -1
- package/dist/core.js.map +1 -1
- package/dist/core.min.js.map +1 -1
- package/dist/css-custom-data.json +501 -481
- package/dist/custom-elements.json +8557 -8286
- package/dist/datepicker.js +39 -16
- package/dist/datepicker.js.map +1 -1
- package/dist/datepicker.min.js +1 -1
- package/dist/datepicker.min.js.map +1 -1
- package/dist/drawer-container.js +10 -4
- package/dist/drawer-container.js.map +1 -1
- package/dist/drawer-container.min.js +1 -1
- package/dist/drawer-container.min.js.map +1 -1
- package/dist/html-custom-data.json +220 -220
- package/dist/nav-bar.js +17 -7
- package/dist/nav-bar.js.map +1 -1
- package/dist/nav-bar.min.js +1 -1
- package/dist/nav-bar.min.js.map +1 -1
- package/dist/option.js +1 -1
- package/dist/option.js.map +1 -1
- package/dist/option.min.js +1 -1
- package/dist/option.min.js.map +1 -1
- package/dist/search.js +27 -11
- package/dist/search.js.map +1 -1
- package/dist/search.min.js +1 -1
- package/dist/search.min.js.map +1 -1
- package/dist/segmented-button.js +2 -2
- package/dist/segmented-button.js.map +1 -1
- package/dist/segmented-button.min.js.map +1 -1
- package/dist/select.js +1 -1
- package/dist/select.js.map +1 -1
- package/dist/select.min.js +1 -1
- package/dist/select.min.js.map +1 -1
- package/dist/split-button.js +1 -1
- package/dist/split-button.js.map +1 -1
- package/dist/split-button.min.js.map +1 -1
- package/dist/src/autocomplete/AutocompleteElement.d.ts +5 -0
- package/dist/src/autocomplete/AutocompleteElement.d.ts.map +1 -1
- package/dist/src/calendar/CalendarElement.d.ts +2 -0
- package/dist/src/calendar/CalendarElement.d.ts.map +1 -1
- package/dist/src/calendar/CalendarViewElementBase.d.ts.map +1 -1
- package/dist/src/calendar/MonthViewElement.d.ts.map +1 -1
- package/dist/src/core/shared/utils/registerStyleSheet.d.ts +1 -1
- package/dist/src/datepicker/DatepickerElement.d.ts +5 -1
- package/dist/src/datepicker/DatepickerElement.d.ts.map +1 -1
- package/dist/src/drawer-container/DrawerContainerElement.d.ts +2 -2
- package/dist/src/drawer-container/DrawerContainerElement.d.ts.map +1 -1
- package/dist/src/nav-bar/NavBarElement.d.ts +3 -1
- package/dist/src/nav-bar/NavBarElement.d.ts.map +1 -1
- package/dist/src/search/SearchViewElement.d.ts +5 -1
- package/dist/src/search/SearchViewElement.d.ts.map +1 -1
- package/dist/src/segmented-button/ButtonSegmentElement.d.ts +2 -2
- package/dist/src/split-button/SplitButtonElement.d.ts +1 -1
- package/dist/src/stepper/StepperElement.d.ts +3 -1
- package/dist/src/stepper/StepperElement.d.ts.map +1 -1
- package/dist/src/switch/SwitchElement.d.ts +2 -2
- package/dist/stepper.js +17 -7
- package/dist/stepper.js.map +1 -1
- package/dist/stepper.min.js +1 -1
- package/dist/stepper.min.js.map +1 -1
- package/dist/switch.js +2 -2
- package/dist/switch.js.map +1 -1
- package/dist/switch.min.js.map +1 -1
- package/package.json +1 -1
package/dist/autocomplete.min.js
CHANGED
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* Copyright (c) 2025 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as i}from"tslib";import{LitElement as s,html as a,css as n}from"lit";import{property as h}from"lit/decorators.js";import{EventAttribute as o,HtmlFor as l,MutationController as r,setCustomState as c,deleteCustomState as d,prefersReducedMotion as f,scrollIntoViewIfNeeded as u,forcedColorsActive as m,addCustomState as p,customElement as v}from"@m3e/web/core";import{ListKeyManager as g,M3eLiveAnnouncer as b}from"@m3e/web/core/a11y";import{M3eOptGroupElement as y}from"@m3e/web/option";var w,L,M,E,k,A,C,S,_,K,I,W,D,q,x,N,P,T,B,U,O,H,$,R,j,F,V,X,z,G,J,Q,Y,Z,tt,et,it,st,at,nt,ht,ot,lt,rt,ct,dt,ft,ut,mt;let pt=mt=class extends(o(l(s),"query")){constructor(){super(),w.add(this),L.set(this,`m3e-autocomplete-${mt.__nextId}`),M.set(this,`${t(this,L,"f")}-menu`),this._options=new Array,E.set(this,void 0),k.set(this,!1),A.set(this,void 0),C.set(this,!1),S.set(this,!1),_.set(this,!1),K.set(this,void 0),I.set(this,()=>t(this,w,"m",V).call(this)),W.set(this,()=>t(this,w,"m",X).call(this)),D.set(this,()=>t(this,w,"m",z).call(this)),q.set(this,()=>t(this,w,"m",G).call(this)),x.set(this,e=>t(this,w,"m",Y).call(this,e)),N.set(this,e=>t(this,w,"m",J).call(this,e)),P.set(this,()=>t(this,w,"m",Q).call(this)),T.set(this,e=>t(this,w,"m",tt).call(this,e)),B.set(this,e=>t(this,w,"m",Z).call(this,e)),this._listKeyManager=(new g).withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(t=>t.disabled||t.hidden).onActiveItemChange(()=>{this._listKeyManager.activeItem&&t(this,w,"m",ht).call(this,this._listKeyManager.activeItem)}),this.hideSelectionIndicator=!1,this.required=!1,this.autoActivate=!1,this.caseSensitive=!1,this.filter="contains",this.loading=!1,this.hideNoData=!1,this.hideLoading=!1,this.loadingLabel="Loading...",this.noDataLabel="No options",this.resultsLabel=t=>`${t} options`,this.panelClass="",new r(this,{config:{childList:!0,subtree:!0},callback:()=>t(this,w,"m",F).call(this)})}get options(){return this._options??[]}attach(e){e instanceof HTMLInputElement&&(super.attach(e),e.autocomplete="off",e.role="combobox",e.ariaAutoComplete="list",e.ariaExpanded="false",e.addEventListener("click",t(this,I,"f")),e.addEventListener("focus",t(this,D,"f")),e.addEventListener("blur",t(this,q,"f")),e.addEventListener("keydown",t(this,x,"f")),e.addEventListener("input",t(this,N,"f")),e.addEventListener("change",t(this,P,"f")),t(this,w,"a",j)?.addEventListener("pointerdown",t(this,W,"f")))}detach(){this.control&&(t(this,w,"a",j)?.removeEventListener("pointerdown",t(this,W,"f")),this.control.role=null,this.control.ariaAutoComplete=null,this.control.ariaExpanded=null,this.control.removeEventListener("click",t(this,I,"f")),this.control.removeEventListener("focus",t(this,D,"f")),this.control.removeEventListener("blur",t(this,q,"f")),this.control.removeEventListener("keydown",t(this,x,"f")),this.control.removeEventListener("input",t(this,N,"f")),this.control.removeEventListener("change",t(this,P,"f"))),super.detach()}clear(e=!1){t(this,w,"a",O)&&(t(this,w,"a",O).value="",t(this,w,"m",ct).call(this),e?t(this,w,"a",O).focus():t(this,w,"m",nt).call(this))}connectedCallback(){super.connectedCallback(),t(this,w,"m",F).call(this)}update(e){super.update(e),e.has("hideNoData")&&this.hideNoData&&t(this,A,"f")&&c(t(this,A,"f"),"-no-data",!1),e.has("loading")&&(this.loading?t(this,_,"f")&&(this.loadingLabel&&b.announce(this.loadingLabel,"polite"),!t(this,A,"f")&&t(this,w,"a",R)&&t(this,w,"m",it).call(this)):t(this,A,"f")&&!t(this,w,"a",R)?t(this,w,"m",nt).call(this):t(this,A,"f")?d(t(this,A,"f"),"-loading"):t(this,_,"f")&&t(this,w,"m",it).call(this))}render(){return a`<div class="options" aria-hidden="true"><slot></slot></div>`}};L=new WeakMap,M=new WeakMap,E=new WeakMap,k=new WeakMap,A=new WeakMap,C=new WeakMap,S=new WeakMap,_=new WeakMap,K=new WeakMap,I=new WeakMap,W=new WeakMap,D=new WeakMap,q=new WeakMap,x=new WeakMap,N=new WeakMap,P=new WeakMap,T=new WeakMap,B=new WeakMap,w=new WeakSet,U=function(){return this._listKeyManager?.items??[]},O=function(){return this.control?this.control:null},H=function(){return null!==(t(this,E,"f")?.querySelector("[slot='no-data']")??null)},$=function(){return null!==(t(this,E,"f")?.querySelector("[slot='loading']")??null)},R=function(){return t(this,w,"a",U).some(t=>!t.hidden)||this.loading&&!this.hideLoading&&this.loadingLabel.length>0||!this.loading&&!this.hideNoData&&this.noDataLabel.length>0},j=function(){return this.control?.closest("m3e-form-field")??null},F=async function(){t(this,K,"f")&&t(this,K,"f").abort();const i=new AbortController;e(this,K,i,"f");const s=[...this.querySelectorAll("m3e-option")];for(const t of s){if(i.signal.aborted)break;t.isUpdatePending&&await t.updateComplete}if(i.signal.aborted)return;this._options=s,e(this,E,this.cloneNode(!0),"f");const{added:a}=this._listKeyManager.setItems([...t(this,E,"f").querySelectorAll("m3e-option")]);if(a.forEach(e=>{e.id=e.id||`${t(this,L,"f")}-option-${this._listKeyManager.items.indexOf(e)}`,c(e,"-hide-selection-indicator",this.hideSelectionIndicator)}),t(this,A,"f")){const e=t(this,w,"m",ct).call(this);t(this,w,"m",st).call(this),t(this,w,"a",R)?t(this,w,"m",at).call(this,t(this,A,"f"),e):t(this,w,"m",nt).call(this)}},V=function(){e(this,k,!0,"f"),t(this,w,"m",it).call(this)},X=function(){e(this,C,!0,"f")},z=function(){e(this,_,!0,"f"),e(this,k,!0,"f"),0!=this.options.length||this.control.readOnly||this.dispatchEvent(new CustomEvent("query",{detail:{term:t(this,w,"a",O)?.value??""},bubbles:!0,composed:!0})),t(this,w,"m",it).call(this)},G=function(){e(this,_,!1,"f"),t(this,C,"f")||t(this,w,"m",nt).call(this),e(this,C,!1,"f")},J=function(i){if(t(this,w,"a",O)&&!i.defaultPrevented){this.dispatchEvent(new CustomEvent("query",{detail:{term:t(this,w,"a",O).value},bubbles:!0,composed:!0})),e(this,S,!0,"f");try{t(this,A,"f")?(t(this,w,"m",ct).call(this),t(this,w,"a",R)||t(this,w,"m",nt).call(this)):t(this,w,"m",it).call(this)}finally{e(this,S,!1,"f"),t(this,w,"a",j)?.notifyControlStateChange(!0)}}},Q=function(){t(this,w,"a",O)&&this.required&&!t(this,w,"a",U).some(t=>t.selected&&!t.disabled)&&(t(this,w,"a",O).value="")},Y=function(i){if(!i.defaultPrevented)switch(e(this,k,!1,"f"),i.key){case"Backspace":case"Delete":t(this,w,"a",O)&&!t(this,w,"a",O).value&&t(this,w,"m",nt).call(this);break;case"Enter":t(this,A,"f")&&this._listKeyManager.activeItem?(i.preventDefault(),t(this,w,"m",lt).call(this,this._listKeyManager.activeItem),f()?t(this,w,"m",nt).call(this):setTimeout(()=>t(this,w,"m",nt).call(this),150)):t(this,A,"f")&&setTimeout(()=>{t(this,w,"a",O)&&!t(this,w,"a",O).value&&t(this,w,"m",nt).call(this)});break;case"Escape":case"Tab":t(this,w,"m",nt).call(this);break;case"Up":case"ArrowUp":i.altKey?t(this,w,"m",nt).call(this):this._listKeyManager.onKeyDown(i);break;case"Down":case"ArrowDown":t(this,A,"f")?this._listKeyManager.onKeyDown(i):(t(this,w,"m",it).call(this),i.preventDefault());break;default:this._listKeyManager.onKeyDown(i)}},Z=function(e){if(2===e.button)return;e.preventDefault(),e.stopImmediatePropagation();const i=e.composedPath().find(t=>t instanceof HTMLElement&&"M3E-OPTION"===t.tagName);i&&!i.disabled&&(this._listKeyManager.setActiveItem(i),t(this,w,"m",lt).call(this,i),f()?t(this,w,"m",nt).call(this):setTimeout(()=>t(this,w,"m",nt).call(this),150))},tt=function(e){if(t(this,A,"f"))if("closed"!==e.newState){const i=t(this,w,"a",U).find(t=>t.selected&&!t.disabled);i?(this._listKeyManager.setActiveItem(i),u(i,t(this,A,"f"))):t(this,w,"m",ft).call(this),this.dispatchEvent(new ToggleEvent("toggle",{oldState:e.oldState,newState:e.newState}))}else f()?t(this,w,"m",et).call(this,e):setTimeout(()=>t(this,w,"m",et).call(this,e),100)},et=function(i){t(this,A,"f")&&(t(this,E,"f")?.replaceChildren(...t(this,A,"f").childNodes),t(this,A,"f").remove(),t(this,A,"f").removeEventListener("toggle",t(this,T,"f")),t(this,A,"f").removeEventListener("pointerdown",t(this,B,"f")),e(this,A,void 0,"f"),t(this,w,"a",O)&&(t(this,w,"a",O).ariaExpanded="false",t(this,w,"a",O).removeAttribute("aria-controls"),t(this,w,"a",O).removeAttribute("aria-owns")),this.requestUpdate(),t(this,w,"a",j)?.notifyControlStateChange(),this.dispatchEvent(new ToggleEvent("toggle",{oldState:i.oldState,newState:i.newState})))},it=function(){if(t(this,A,"f")||!t(this,w,"a",O)||t(this,w,"a",O).readOnly||t(this,w,"a",O).disabled)return;const i=t(this,w,"m",ct).call(this);if(!t(this,w,"a",R))return;if(e(this,A,document.createElement("m3e-option-panel"),"f"),t(this,A,"f").id=t(this,M,"f"),this.panelClass)for(const e of this.panelClass.split(/\s+/).map(t=>t.trim()).filter(Boolean))t(this,A,"f").classList.add(e);t(this,A,"f").style.overflowX="hidden",t(this,A,"f").scrollStrategy="reposition",t(this,A,"f").fitAnchorWidth=!0,t(this,A,"f").addEventListener("toggle",t(this,T,"f")),t(this,A,"f").addEventListener("pointerdown",t(this,B,"f")),t(this,w,"m",st).call(this),t(this,w,"m",at).call(this,t(this,A,"f"),i),(t(this,w,"a",j)??t(this,w,"a",O)).insertAdjacentElement("afterend",t(this,A,"f")),t(this,w,"a",O).setAttribute("aria-controls",t(this,M,"f")),t(this,w,"a",O).setAttribute("aria-owns",t(this,M,"f")),t(this,w,"a",j)?.notifyControlStateChange(),this._listKeyManager.activeItem&&this.autoActivate&&t(this,w,"m",ht).call(this,this._listKeyManager.activeItem,!0);const s=t(this,w,"a",O);setTimeout(()=>t(this,A,"f")?.show(s,t(this,w,"a",j)?.menuAnchor))},st=function(){if(!t(this,E,"f")||!t(this,A,"f"))return;const e=[...t(this,E,"f").childNodes];if(!t(this,w,"a",H)&&this.noDataLabel){const t=document.createElement("span");t.slot="no-data",t.textContent=this.noDataLabel,e.push(t)}if(!t(this,w,"a",$)&&this.loadingLabel){const t=document.createElement("span");t.slot="loading",t.textContent=this.loadingLabel,e.push(t)}t(this,A,"f").replaceChildren(...e)},at=function(t,e){c(t,"-loading",this.loading),c(t,"-no-data",0==e)},nt=function(){t(this,A,"f")?.hide(),t(this,w,"a",O)?.removeAttribute("aria-activedescendant")},ht=function(e,i=!1){if(t(this,w,"a",O)&&(t(this,w,"a",O).setAttribute("aria-activedescendant",e.id),t(this,A,"f"))){u(e,t(this,A,"f"),{block:"nearest",behavior:"instant"});const s=i||!t(this,k,"f")&&(t(this,w,"a",O).matches(":focus-visible")||m());t(this,w,"a",U).forEach(t=>{t===e&&s?(t.focusRing?.show(),t.stateLayer?.show("focused")):(t.focusRing?.hide(),t.stateLayer?.hide("focused"))})}},ot=async function(t){const e=this._options[this._listKeyManager.items.indexOf(t)];e&&(e.selected=t.selected,e.isUpdatePending&&await e.updateComplete)},lt=async function(e){e.selected||(e.selected=!0,await t(this,w,"m",ot).call(this,e),e.isUpdatePending&&await e.updateComplete,this.requestUpdate(),this.isUpdatePending&&await this.updateComplete,t(this,w,"a",O)&&(t(this,w,"a",O).value=e.value),t(this,w,"a",j)?.notifyControlStateChange(!0))},rt=function(t,e,i,s){const a=this.caseSensitive?e.value:e.value.toLowerCase();switch(this.filter){case"starts-with":return t.term=s,t.highlightMode=this.filter,a.startsWith(i);case"ends-with":return t.term=s,t.highlightMode=this.filter,a.endsWith(i);case"contains":return t.term=s,t.highlightMode=this.filter,a.includes(i);case"none":return t.disableHighlight=!0,!0;default:return t.disableHighlight=!0,this.filter(e,s)}},ct=function(){if(!t(this,w,"a",O))return 0;const i=t(this,w,"a",U).filter(t=>!t.hidden).length,s=!this.loading&&t(this,S,"f");e(this,S,!1,"f");const a=t(this,w,"a",O).value,n=this.caseSensitive?a:a.toLocaleLowerCase();let h,o=0,l=!1;for(let e=0;e<t(this,w,"a",U).length;e++){const i=t(this,w,"a",U)[e],s=this._options[e];i.hidden=!t(this,w,"m",rt).call(this,i,s,n,a),i.hidden?(t(this,w,"m",ut).call(this,i),d(i,"-first"),d(i,"-last")):(o++,l||i.parentElement instanceof y?(d(i,"-first"),h&&d(h,"-last"),p(i,"-last"),h=i):(p(i,"-first"),l=!0,p(i,"-last"),h=i)),i.selected&&s.value!==a&&(i.selected=!1,t(this,w,"m",ot).call(this,i))}t(this,A,"f")&&t(this,w,"m",at).call(this,t(this,A,"f"),o);const r=t(this,A,"f")?.querySelectorAll("m3e-optgroup")??t(this,E,"f")?.querySelectorAll("m3e-optgroup")??[];for(const t of r)t.hidden=[...t.querySelectorAll("m3e-option")].every(t=>t.hidden);return s&&t(this,w,"m",dt).call(this,i,o),t(this,w,"m",ft).call(this),o},dt=function(e,i){if(t(this,_,"f"))if(0==i)e>0&&this.noDataLabel&&b.announce(this.noDataLabel,"polite");else if(e!=i){const t=this.resultsLabel instanceof Function?this.resultsLabel(i):this.resultsLabel;t&&b.announce(t,"polite")}},ft=function(){if(this.autoActivate&&(!this._listKeyManager.activeItem||!this._listKeyManager.activeItem.selected)){const e=t(this,w,"a",U).find(t=>!t.disabled&&!t.hidden);e&&(this._listKeyManager.setActiveItem(e),t(this,A,"f")&&u(e,t(this,A,"f"),{block:"nearest",behavior:"instant"}))}},ut=function(e){e.focusRing?.hide(),e.stateLayer?.hide("focused"),e===this._listKeyManager.activeItem&&(this._listKeyManager.updateActiveItem(null),t(this,w,"a",O)?.removeAttribute("aria-activedescendant"))},pt.styles=n`:host { display: contents; } .options { display: none; }`,pt.__nextId=0,i([h({attribute:"hide-selection-indicator",type:Boolean})],pt.prototype,"hideSelectionIndicator",void 0),i([h({type:Boolean,reflect:!0})],pt.prototype,"required",void 0),i([h({attribute:"auto-activate",type:Boolean})],pt.prototype,"autoActivate",void 0),i([h({attribute:"case-sensitive",type:Boolean})],pt.prototype,"caseSensitive",void 0),i([h({converter:{fromAttribute:t=>null===t?"contains":"starts-with"===t||"ends-with"===t||"contains"===t||"none"===t?t:"contains"}})],pt.prototype,"filter",void 0),i([h({type:Boolean})],pt.prototype,"loading",void 0),i([h({attribute:"hide-no-data",type:Boolean})],pt.prototype,"hideNoData",void 0),i([h({attribute:"hide-loading",type:Boolean})],pt.prototype,"hideLoading",void 0),i([h({attribute:"loading-label"})],pt.prototype,"loadingLabel",void 0),i([h({attribute:"no-data-label"})],pt.prototype,"noDataLabel",void 0),i([h({attribute:"results-label"})],pt.prototype,"resultsLabel",void 0),i([h({attribute:"panel-class"})],pt.prototype,"panelClass",void 0),pt=mt=i([v("m3e-autocomplete")],pt);export{pt as M3eAutocompleteElement};
|
|
6
|
+
import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as i}from"tslib";import{LitElement as s,html as a,css as n}from"lit";import{property as h}from"lit/decorators.js";import{EventAttribute as o,HtmlFor as l,MutationController as r,setCustomState as c,deleteCustomState as d,prefersReducedMotion as f,scrollIntoViewIfNeeded as u,forcedColorsActive as m,addCustomState as p,customElement as v}from"@m3e/web/core";import{ListKeyManager as g,M3eLiveAnnouncer as b}from"@m3e/web/core/a11y";import{M3eOptGroupElement as y}from"@m3e/web/option";var w,E,L,M,k,A,C,S,_,K,I,W,D,q,N,P,T,x,U,B,O,H,$,R,j,F,V,X,z,G,J,Q,Y,Z,tt,et,it,st,at,nt,ht,ot,lt,rt,ct,dt,ft,ut,mt,pt;let vt=pt=class extends(o(l(s),"query")){constructor(){super(),w.add(this),E.set(this,`m3e-autocomplete-${pt.__nextId}`),L.set(this,`${t(this,E,"f")}-menu`),this._options=new Array,M.set(this,void 0),k.set(this,!1),A.set(this,void 0),C.set(this,!1),S.set(this,!1),_.set(this,!1),K.set(this,void 0),I.set(this,()=>t(this,w,"m",V).call(this)),W.set(this,()=>t(this,w,"m",X).call(this)),D.set(this,()=>t(this,w,"m",z).call(this)),q.set(this,()=>t(this,w,"m",G).call(this)),N.set(this,e=>t(this,w,"m",Y).call(this,e)),P.set(this,e=>t(this,w,"m",J).call(this,e)),T.set(this,()=>t(this,w,"m",Q).call(this)),x.set(this,e=>t(this,w,"m",tt).call(this,e)),U.set(this,e=>t(this,w,"m",Z).call(this,e)),this._listKeyManager=(new g).withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(t=>t.disabled||!0===t.hidden).onActiveItemChange(()=>{this._listKeyManager.activeItem&&t(this,w,"m",ht).call(this,this._listKeyManager.activeItem)}),this.hideSelectionIndicator=!1,this.required=!1,this.autoActivate=!1,this.caseSensitive=!1,this.filter="contains",this.loading=!1,this.hideNoData=!1,this.hideLoading=!1,this.loadingLabel="Loading...",this.noDataLabel="No options",this.resultsLabel=t=>`${t} options`,this.panelClass="",new r(this,{config:{childList:!0,subtree:!0},callback:()=>t(this,w,"m",F).call(this)})}get options(){return this._options??[]}get selected(){return this.options.find(t=>t.selected)??null}get value(){const t=this.selected;return t&&!t.disabled?t.value:null}attach(e){e instanceof HTMLInputElement&&(super.attach(e),e.autocomplete="off",e.role="combobox",e.ariaAutoComplete="list",e.ariaExpanded="false",e.addEventListener("click",t(this,I,"f")),e.addEventListener("focus",t(this,D,"f")),e.addEventListener("blur",t(this,q,"f")),e.addEventListener("keydown",t(this,N,"f")),e.addEventListener("input",t(this,P,"f")),e.addEventListener("change",t(this,T,"f")),t(this,w,"a",j)?.addEventListener("pointerdown",t(this,W,"f")))}detach(){this.control&&(t(this,w,"a",j)?.removeEventListener("pointerdown",t(this,W,"f")),this.control.role=null,this.control.ariaAutoComplete=null,this.control.ariaExpanded=null,this.control.removeEventListener("click",t(this,I,"f")),this.control.removeEventListener("focus",t(this,D,"f")),this.control.removeEventListener("blur",t(this,q,"f")),this.control.removeEventListener("keydown",t(this,N,"f")),this.control.removeEventListener("input",t(this,P,"f")),this.control.removeEventListener("change",t(this,T,"f"))),super.detach()}clear(e=!1){t(this,w,"a",O)&&(t(this,w,"a",O).value="",t(this,w,"m",dt).call(this)&&this.dispatchEvent(new Event("change",{bubbles:!0})),t(this,w,"m",ct).call(this),e?t(this,w,"a",O).focus():t(this,w,"m",nt).call(this))}connectedCallback(){super.connectedCallback(),t(this,w,"m",F).call(this)}update(e){super.update(e),e.has("hideNoData")&&this.hideNoData&&t(this,A,"f")&&c(t(this,A,"f"),"-no-data",!1),e.has("loading")&&(this.loading?t(this,_,"f")&&(this.loadingLabel&&b.announce(this.loadingLabel,"polite"),!t(this,A,"f")&&t(this,w,"a",R)&&t(this,w,"m",it).call(this)):t(this,A,"f")&&!t(this,w,"a",R)?t(this,w,"m",nt).call(this):t(this,A,"f")?d(t(this,A,"f"),"-loading"):t(this,_,"f")&&t(this,w,"m",it).call(this))}render(){return a`<div class="options" aria-hidden="true"><slot></slot></div>`}};E=new WeakMap,L=new WeakMap,M=new WeakMap,k=new WeakMap,A=new WeakMap,C=new WeakMap,S=new WeakMap,_=new WeakMap,K=new WeakMap,I=new WeakMap,W=new WeakMap,D=new WeakMap,q=new WeakMap,N=new WeakMap,P=new WeakMap,T=new WeakMap,x=new WeakMap,U=new WeakMap,w=new WeakSet,B=function(){return this._listKeyManager?.items??[]},O=function(){return this.control?this.control:null},H=function(){return null!==(t(this,M,"f")?.querySelector("[slot='no-data']")??null)},$=function(){return null!==(t(this,M,"f")?.querySelector("[slot='loading']")??null)},R=function(){return t(this,w,"a",B).some(t=>!1===t.hidden)||this.loading&&!this.hideLoading&&this.loadingLabel.length>0||!this.loading&&!this.hideNoData&&this.noDataLabel.length>0},j=function(){return this.control?.closest("m3e-form-field")??null},F=async function(){t(this,K,"f")&&t(this,K,"f").abort();const i=new AbortController;e(this,K,i,"f");const s=[...this.querySelectorAll("m3e-option")];for(const t of s){if(i.signal.aborted)break;t.isUpdatePending&&await t.updateComplete}if(i.signal.aborted)return;this._options=s,e(this,M,this.cloneNode(!0),"f");const{added:a}=this._listKeyManager.setItems([...t(this,M,"f").querySelectorAll("m3e-option")]);if(a.forEach(e=>{e.id=e.id||`${t(this,E,"f")}-option-${this._listKeyManager.items.indexOf(e)}`,c(e,"-hide-selection-indicator",this.hideSelectionIndicator)}),t(this,A,"f")){const e=t(this,w,"m",ct).call(this);t(this,w,"m",st).call(this),t(this,w,"a",R)?t(this,w,"m",at).call(this,t(this,A,"f"),e):t(this,w,"m",nt).call(this)}},V=function(){e(this,k,!0,"f"),t(this,w,"m",it).call(this)},X=function(){e(this,C,!0,"f")},z=function(){e(this,_,!0,"f"),e(this,k,!0,"f"),0!=this.options.length||this.control.readOnly||this.dispatchEvent(new CustomEvent("query",{detail:{term:t(this,w,"a",O)?.value??""},bubbles:!0,composed:!0})),t(this,w,"m",it).call(this)},G=function(){e(this,_,!1,"f"),t(this,C,"f")||t(this,w,"m",nt).call(this),e(this,C,!1,"f")},J=function(i){if(t(this,w,"a",O)&&!i.defaultPrevented){this.dispatchEvent(new CustomEvent("query",{detail:{term:t(this,w,"a",O).value},bubbles:!0,composed:!0})),""===t(this,w,"a",O).value&&t(this,w,"m",dt).call(this)&&this.dispatchEvent(new Event("change",{bubbles:!0})),e(this,S,!0,"f");try{t(this,A,"f")?(t(this,w,"m",ct).call(this),t(this,w,"a",R)||t(this,w,"m",nt).call(this)):t(this,w,"m",it).call(this)}finally{e(this,S,!1,"f"),t(this,w,"a",j)?.notifyControlStateChange(!0)}}},Q=function(){if(t(this,w,"a",O)){const e=this.selected;this.required?t(this,w,"a",O).value=e?.label??"":e&&e.label!==t(this,w,"a",O).value&&t(this,w,"m",dt).call(this)&&this.dispatchEvent(new Event("change",{bubbles:!0}))}},Y=function(i){if(!i.defaultPrevented)switch(e(this,k,!1,"f"),i.key){case"Backspace":case"Delete":t(this,w,"a",O)&&!t(this,w,"a",O).value&&t(this,w,"m",nt).call(this);break;case"Enter":t(this,A,"f")&&this._listKeyManager.activeItem?(i.preventDefault(),t(this,w,"m",lt).call(this,this._listKeyManager.activeItem),f()?t(this,w,"m",nt).call(this):setTimeout(()=>t(this,w,"m",nt).call(this),150)):t(this,A,"f")&&setTimeout(()=>{t(this,w,"a",O)&&!t(this,w,"a",O).value&&t(this,w,"m",nt).call(this)});break;case"Escape":case"Tab":t(this,w,"m",nt).call(this);break;case"Up":case"ArrowUp":i.altKey?t(this,w,"m",nt).call(this):this._listKeyManager.onKeyDown(i);break;case"Down":case"ArrowDown":t(this,A,"f")?this._listKeyManager.onKeyDown(i):(t(this,w,"m",it).call(this),i.preventDefault());break;default:this._listKeyManager.onKeyDown(i)}},Z=function(e){if(2===e.button)return;e.preventDefault(),e.stopImmediatePropagation();const i=e.composedPath().find(t=>t instanceof HTMLElement&&"M3E-OPTION"===t.tagName);i&&!i.disabled&&(this._listKeyManager.setActiveItem(i),t(this,w,"m",lt).call(this,i),f()?t(this,w,"m",nt).call(this):setTimeout(()=>t(this,w,"m",nt).call(this),150))},tt=function(e){if(t(this,A,"f"))if("closed"!==e.newState){const i=t(this,w,"a",B).find(t=>t.selected&&!t.disabled);i?(this._listKeyManager.setActiveItem(i),u(i,t(this,A,"f"))):t(this,w,"m",ut).call(this),this.dispatchEvent(new ToggleEvent("toggle",{oldState:e.oldState,newState:e.newState}))}else f()?t(this,w,"m",et).call(this,e):setTimeout(()=>t(this,w,"m",et).call(this,e),100)},et=function(i){t(this,A,"f")&&(t(this,M,"f")?.replaceChildren(...t(this,A,"f").childNodes),t(this,A,"f").remove(),t(this,A,"f").removeEventListener("toggle",t(this,x,"f")),t(this,A,"f").removeEventListener("pointerdown",t(this,U,"f")),e(this,A,void 0,"f"),t(this,w,"a",O)&&(t(this,w,"a",O).ariaExpanded="false",t(this,w,"a",O).removeAttribute("aria-controls"),t(this,w,"a",O).removeAttribute("aria-owns"),t(this,w,"a",O).removeAttribute("aria-activedescendant")),this.requestUpdate(),t(this,w,"a",j)?.notifyControlStateChange(),this.dispatchEvent(new ToggleEvent("toggle",{oldState:i.oldState,newState:i.newState})),"input"===t(this,w,"a",O)?.slot&&"M3E-INPUT-CHIP-SET"===t(this,w,"a",O).parentElement?.tagName&&t(this,w,"m",dt).call(this))},it=function(){if(t(this,A,"f")||!t(this,w,"a",O)||t(this,w,"a",O).readOnly||t(this,w,"a",O).disabled)return;const i=t(this,w,"m",ct).call(this);if(!t(this,w,"a",R))return;if(e(this,A,document.createElement("m3e-option-panel"),"f"),t(this,A,"f").id=t(this,L,"f"),this.panelClass)for(const e of this.panelClass.split(/\s+/).map(t=>t.trim()).filter(Boolean))t(this,A,"f").classList.add(e);t(this,A,"f").style.overflowX="hidden",t(this,A,"f").scrollStrategy="reposition",t(this,A,"f").fitAnchorWidth=!0,t(this,A,"f").addEventListener("toggle",t(this,x,"f")),t(this,A,"f").addEventListener("pointerdown",t(this,U,"f")),t(this,w,"m",st).call(this),t(this,w,"m",at).call(this,t(this,A,"f"),i),(t(this,w,"a",j)??t(this,w,"a",O)).insertAdjacentElement("afterend",t(this,A,"f")),t(this,w,"a",O).setAttribute("aria-controls",t(this,L,"f")),t(this,w,"a",O).setAttribute("aria-owns",t(this,L,"f")),t(this,w,"a",j)?.notifyControlStateChange(),this._listKeyManager.activeItem&&this.autoActivate&&t(this,w,"m",ht).call(this,this._listKeyManager.activeItem,!0);const s=t(this,w,"a",O);setTimeout(()=>t(this,A,"f")?.show(s,t(this,w,"a",j)?.menuAnchor))},st=function(){if(!t(this,M,"f")||!t(this,A,"f"))return;const e=[...t(this,M,"f").childNodes];if(!t(this,w,"a",H)&&this.noDataLabel){const t=document.createElement("span");t.slot="no-data",t.textContent=this.noDataLabel,e.push(t)}if(!t(this,w,"a",$)&&this.loadingLabel){const t=document.createElement("span");t.slot="loading",t.textContent=this.loadingLabel,e.push(t)}t(this,A,"f").replaceChildren(...e)},at=function(t,e){c(t,"-loading",this.loading),c(t,"-no-data",0==e)},nt=function(){t(this,A,"f")?.hide()},ht=function(e,i=!1){if(t(this,w,"a",O)&&(t(this,w,"a",O).setAttribute("aria-activedescendant",e.id),t(this,A,"f"))){u(e,t(this,A,"f"),{block:"nearest",behavior:"instant"});const s=i||!t(this,k,"f")&&(t(this,w,"a",O).matches(":focus-visible")||m());t(this,w,"a",B).forEach(t=>{t===e&&s?(t.focusRing?.show(),t.stateLayer?.show("focused")):(t.focusRing?.hide(),t.stateLayer?.hide("focused"))})}},ot=async function(t){const e=this._options[this._listKeyManager.items.indexOf(t)];e&&(e.selected=t.selected,e.isUpdatePending&&await e.updateComplete)},lt=async function(e){e.selected||(e.selected=!0,await t(this,w,"m",ot).call(this,e),e.isUpdatePending&&await e.updateComplete,this.requestUpdate(),this.isUpdatePending&&await this.updateComplete,t(this,w,"a",O)&&(t(this,w,"a",O).value=e.label),this.dispatchEvent(new Event("change",{bubbles:!0})),t(this,w,"a",j)?.notifyControlStateChange(!0))},rt=function(t,e,i,s){const a=this.caseSensitive?e.value:e.value.toLowerCase();switch(this.filter){case"starts-with":return t.term=s,t.highlightMode=this.filter,a.startsWith(i);case"ends-with":return t.term=s,t.highlightMode=this.filter,a.endsWith(i);case"contains":return t.term=s,t.highlightMode=this.filter,a.includes(i);case"none":return t.disableHighlight=!0,!0;default:return t.disableHighlight=!0,this.filter(e,s)}},ct=function(){if(!t(this,w,"a",O))return 0;const i=t(this,w,"a",B).filter(t=>!1===t.hidden).length,s=!this.loading&&t(this,S,"f");e(this,S,!1,"f");const a=t(this,w,"a",O).value,n=this.caseSensitive?a:a.toLocaleLowerCase();let h,o=0,l=!1;for(let e=0;e<t(this,w,"a",B).length;e++){const i=t(this,w,"a",B)[e],s=this._options[e];i.hidden=!t(this,w,"m",rt).call(this,i,s,n,a),!0===i.hidden?(t(this,w,"m",mt).call(this,i),d(i,"-first"),d(i,"-last")):(o++,l||i.parentElement instanceof y?(d(i,"-first"),h&&d(h,"-last"),p(i,"-last"),h=i):(p(i,"-first"),l=!0,p(i,"-last"),h=i))}t(this,A,"f")&&t(this,w,"m",at).call(this,t(this,A,"f"),o);const r=t(this,A,"f")?.querySelectorAll("m3e-optgroup")??t(this,M,"f")?.querySelectorAll("m3e-optgroup")??[];for(const t of r)t.hidden=[...t.querySelectorAll("m3e-option")].every(t=>!0===t.hidden);return s&&t(this,w,"m",ft).call(this,i,o),t(this,w,"m",ut).call(this),o},dt=function(){const e=this._listKeyManager.items.filter(t=>t.selected);return e.length>0&&(e.forEach(e=>{e.selected=!1,t(this,w,"m",ot).call(this,e)}),!0)},ft=function(e,i){if(t(this,_,"f"))if(0==i)e>0&&this.noDataLabel&&b.announce(this.noDataLabel,"polite");else if(e!=i){const t=this.resultsLabel instanceof Function?this.resultsLabel(i):this.resultsLabel;t&&b.announce(t,"polite")}},ut=function(){if(this.autoActivate&&(!this._listKeyManager.activeItem||!this._listKeyManager.activeItem.selected)){const e=t(this,w,"a",B).find(t=>!t.disabled&&!1===t.hidden);e&&(this._listKeyManager.setActiveItem(e),t(this,A,"f")&&u(e,t(this,A,"f"),{block:"nearest",behavior:"instant"}))}},mt=function(e){e.focusRing?.hide(),e.stateLayer?.hide("focused"),e===this._listKeyManager.activeItem&&(this._listKeyManager.updateActiveItem(null),t(this,w,"a",O)?.removeAttribute("aria-activedescendant"))},vt.styles=n`:host { display: contents; } .options { display: none; }`,vt.__nextId=0,i([h({attribute:"hide-selection-indicator",type:Boolean})],vt.prototype,"hideSelectionIndicator",void 0),i([h({type:Boolean,reflect:!0})],vt.prototype,"required",void 0),i([h({attribute:"auto-activate",type:Boolean})],vt.prototype,"autoActivate",void 0),i([h({attribute:"case-sensitive",type:Boolean})],vt.prototype,"caseSensitive",void 0),i([h({converter:{fromAttribute:t=>null===t?"contains":"starts-with"===t||"ends-with"===t||"contains"===t||"none"===t?t:"contains"}})],vt.prototype,"filter",void 0),i([h({type:Boolean})],vt.prototype,"loading",void 0),i([h({attribute:"hide-no-data",type:Boolean})],vt.prototype,"hideNoData",void 0),i([h({attribute:"hide-loading",type:Boolean})],vt.prototype,"hideLoading",void 0),i([h({attribute:"loading-label"})],vt.prototype,"loadingLabel",void 0),i([h({attribute:"no-data-label"})],vt.prototype,"noDataLabel",void 0),i([h({attribute:"results-label"})],vt.prototype,"resultsLabel",void 0),i([h({attribute:"panel-class"})],vt.prototype,"panelClass",void 0),vt=pt=i([v("m3e-autocomplete")],vt);export{vt as M3eAutocompleteElement};
|
|
7
7
|
//# sourceMappingURL=autocomplete.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.min.js","sources":["../../src/autocomplete/AutocompleteElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n HtmlFor,\r\n prefersReducedMotion,\r\n scrollIntoViewIfNeeded,\r\n forcedColorsActive,\r\n setCustomState,\r\n deleteCustomState,\r\n addCustomState,\r\n customElement,\r\n MutationController,\r\n EventAttribute,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ListKeyManager, M3eLiveAnnouncer } from \"@m3e/web/core/a11y\";\r\nimport { M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement } from \"@m3e/web/option\";\r\nimport type { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\nimport { AutocompleteFilterMode } from \"./AutocompleteFilterMode\";\r\nimport { AutocompleteQueryEventDetail } from \"./AutocompleteQueryEventDetail\";\r\n\r\n/**\r\n * Enhances a text input with suggested options.\r\n *\r\n * @description\r\n * The `m3e-autocomplete` component augments a text input field with a dynamically positioned menu of filterable suggestions,\r\n * following Material Design 3 principles. It provides real-time filtering, keyboard navigation, automatic option activation,\r\n * and text highlighting to guide user selection. The component manages focus, selection state, and menu visibility while\r\n * integrating seamlessly with form field containers and supporting both required and optional selection modes.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-autocomplete` paired with a `m3e-form-field`.\r\n * ```html\r\n * <m3e-form-field>\r\n * <label slot=\"label\" for=\"fruit\">Choose your favorite fruit</label>\r\n * <input id=\"fruit\" />\r\n * </m3e-form-field>\r\n * <m3e-autocomplete for=\"fruit\">\r\n * <m3e-option>Apples</m3e-option>\r\n * <m3e-option>Oranges</m3e-option>\r\n * <m3e-option>Bananas</m3e-option>\r\n * <m3e-option>Grapes</m3e-option>\r\n * </m3e-autocomplete>\r\n * ```\r\n *\r\n * @tag m3e-autocomplete\r\n *\r\n * @attr auto-activate - Whether the first option should be automatically activated.\r\n * @attr case-sensitive - Whether filtering is case sensitive.\r\n * @attr filter - Mode in which to filter options.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr hide-loading - Whether to hide the menu when loading options.\r\n * @attr hide-no-data - Whether to hide the menu when there are no options to show.\r\n * @attr loading - Whether options are being loaded.\r\n * @attr loading-label - The text announced and presented when loading options.\r\n * @attr no-data-label - The text announced and presented when no options are available for the current term.\r\n * @attr panel-class - Class or list of classes to be applied to the autocomplete's overlay panel.\r\n * @attr required - Whether the user is required to make a selection when interacting with the autocomplete.\r\n * @attr results-label - The text announced when available options change for the current term.\r\n *\r\n * @slot - Renders the options of the autocomplete.\r\n * @slot loading - Renders content when loading options.\r\n * @slot no-data - Renders content when there are no options to show.\r\n *\r\n * @fires toggle - Emitted when the options menu opens or closes.\r\n * @fires query - Emitted when the input is focused or when the user modifies its value.\r\n */\r\n@customElement(\"m3e-autocomplete\")\r\nexport class M3eAutocompleteElement extends EventAttribute(HtmlFor(LitElement), \"query\") {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: contents;\r\n }\r\n .options {\r\n display: none;\r\n }\r\n `;\r\n\r\n /** @private */ private static __nextId = 0;\r\n\r\n /** @private */ readonly #id = `m3e-autocomplete-${M3eAutocompleteElement.__nextId}`;\r\n /** @private */ readonly #menuId = `${this.#id}-menu`;\r\n /** @private */ private _options = new Array<M3eOptionElement>();\r\n /** @private */ #clone?: HTMLElement;\r\n /** @private */ #ignoreFocusVisible = false;\r\n /** @private */ #menu?: M3eOptionPanelElement;\r\n /** @private */ #ignoreHideMenuOnBlur = false;\r\n /** @private */ #inputChanged = false;\r\n /** @private */ #hasFocus = false;\r\n /** @private */ #mutationAbortController?: AbortController;\r\n\r\n /** @private */ readonly #clickHandler = () => this.#handleClick();\r\n /** @private */ readonly #formFieldPointerDownHandler = () => this.#handleFormFieldPointerDown();\r\n /** @private */ readonly #focusHandler = () => this.#handleFocus();\r\n /** @private */ readonly #blurHandler = () => this.#handleBlur();\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n /** @private */ readonly #inputHandler = (e: Event) => this.#handleInput(e);\r\n /** @private */ readonly #changeHandler = () => this.#handleChange();\r\n /** @private */ readonly #menuToggleHandler = (e: ToggleEvent) => this.#handleMenuToggle(e);\r\n /** @private */ readonly #menuPointerDownHandler = (e: PointerEvent) => this.#handleMenuPointerDown(e);\r\n\r\n /** @private */ private readonly _listKeyManager = new ListKeyManager<M3eOptionElement>()\r\n .withWrap()\r\n .withHomeAndEnd()\r\n .withPageUpAndDown()\r\n .withVerticalOrientation()\r\n .withSkipPredicate((item) => item.disabled || item.hidden)\r\n .onActiveItemChange(() => {\r\n if (this._listKeyManager.activeItem) {\r\n this.#activateOption(this._listKeyManager.activeItem);\r\n }\r\n });\r\n\r\n constructor() {\r\n super();\r\n\r\n new MutationController(this, {\r\n config: {\r\n childList: true,\r\n subtree: true,\r\n },\r\n callback: () => this.#handleMutation(),\r\n });\r\n }\r\n\r\n /**\r\n * Whether to hide the selection indicator.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n /**\r\n * Whether the user is required to make a selection when interacting with the autocomplete.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) required = false;\r\n\r\n /**\r\n * Whether the first option should be automatically activated.\r\n * @default false\r\n */\r\n @property({ attribute: \"auto-activate\", type: Boolean }) autoActivate = false;\r\n\r\n /**\r\n * Whether filtering is case sensitive.\r\n * @default false\r\n */\r\n @property({ attribute: \"case-sensitive\", type: Boolean }) caseSensitive = false;\r\n\r\n /**\r\n * Mode in which to filter options.\r\n * @default \"contains\"\r\n */\r\n @property({\r\n converter: {\r\n fromAttribute(value: string | null): AutocompleteFilterMode {\r\n if (value === null) return \"contains\";\r\n if (value === \"starts-with\" || value === \"ends-with\" || value === \"contains\" || value === \"none\") {\r\n return value;\r\n }\r\n return \"contains\";\r\n },\r\n },\r\n })\r\n filter: AutocompleteFilterMode | ((option: M3eOptionElement, term: string) => boolean) = \"contains\";\r\n\r\n /**\r\n * Whether options are being loaded.\r\n * @default false\r\n */\r\n @property({ type: Boolean }) loading = false;\r\n\r\n /**\r\n * Whether to hide the menu when there are no options to show.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-no-data\", type: Boolean }) hideNoData = false;\r\n\r\n /**\r\n * Whether to hide the menu when loading options.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-loading\", type: Boolean }) hideLoading = false;\r\n\r\n /**\r\n * The text announced and presented when loading options.\r\n * @default \"Loading...\"\r\n */\r\n @property({ attribute: \"loading-label\" }) loadingLabel = \"Loading...\";\r\n\r\n /**\r\n * The text announced and presented when no options are available for the current term.\r\n * @default \"No options\"\r\n */\r\n @property({ attribute: \"no-data-label\" }) noDataLabel = \"No options\";\r\n\r\n /**\r\n * The text announced when available options change for the current term.\r\n * @default (count) => `${count} options`\r\n */\r\n @property({ attribute: \"results-label\" }) resultsLabel: string | ((count: number) => string) = (count) =>\r\n `${count} options`;\r\n\r\n /**\r\n * Class or list of classes to be applied to the autocomplete's overlay panel.\r\n * @default \"\"\r\n */\r\n @property({ attribute: \"panel-class\" }) panelClass = \"\";\r\n\r\n /** The options that can be selected. */\r\n get options(): readonly M3eOptionElement[] {\r\n return this._options ?? [];\r\n }\r\n\r\n /** @private */\r\n get #options(): readonly M3eOptionElement[] {\r\n return this._listKeyManager?.items ?? [];\r\n }\r\n\r\n /** @private */\r\n get #input(): HTMLInputElement | null {\r\n return this.control ? <HTMLInputElement>this.control : null;\r\n }\r\n\r\n /** @private */\r\n get #hasNoDataSlot(): boolean {\r\n return (this.#clone?.querySelector(\"[slot='no-data']\") ?? null) !== null;\r\n }\r\n\r\n /** @private */\r\n get #hasLoadingSlot(): boolean {\r\n return (this.#clone?.querySelector(\"[slot='loading']\") ?? null) !== null;\r\n }\r\n\r\n /** @private */\r\n get #shouldShowMenu(): boolean {\r\n return (\r\n this.#options.some((x) => !x.hidden) ||\r\n (this.loading && !this.hideLoading && this.loadingLabel.length > 0) ||\r\n (!this.loading && !this.hideNoData && this.noDataLabel.length > 0)\r\n );\r\n }\r\n\r\n /** @private */\r\n get #formField(): M3eFormFieldElement | null {\r\n return this.control?.closest(\"m3e-form-field\") ?? null;\r\n }\r\n\r\n /** @inheritdoc */\r\n override attach(control: HTMLElement): void {\r\n if (!(control instanceof HTMLInputElement)) return;\r\n\r\n super.attach(control);\r\n\r\n control.autocomplete = \"off\";\r\n control.role = \"combobox\";\r\n control.ariaAutoComplete = \"list\";\r\n control.ariaExpanded = \"false\";\r\n\r\n control.addEventListener(\"click\", this.#clickHandler);\r\n control.addEventListener(\"focus\", this.#focusHandler);\r\n control.addEventListener(\"blur\", this.#blurHandler);\r\n control.addEventListener(\"keydown\", this.#keyDownHandler);\r\n control.addEventListener(\"input\", this.#inputHandler);\r\n control.addEventListener(\"change\", this.#changeHandler);\r\n\r\n this.#formField?.addEventListener(\"pointerdown\", this.#formFieldPointerDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override detach(): void {\r\n if (this.control) {\r\n this.#formField?.removeEventListener(\"pointerdown\", this.#formFieldPointerDownHandler);\r\n\r\n this.control.role = null;\r\n this.control.ariaAutoComplete = null;\r\n this.control.ariaExpanded = null;\r\n\r\n this.control.removeEventListener(\"click\", this.#clickHandler);\r\n this.control.removeEventListener(\"focus\", this.#focusHandler);\r\n this.control.removeEventListener(\"blur\", this.#blurHandler);\r\n this.control.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n this.control.removeEventListener(\"input\", this.#inputHandler);\r\n this.control.removeEventListener(\"change\", this.#changeHandler);\r\n }\r\n super.detach();\r\n }\r\n\r\n /**\r\n * Clears the value of the element.\r\n * @param [restoreFocus=false] Whether to restore input focus.\r\n */\r\n clear(restoreFocus = false): void {\r\n if (!this.#input) return;\r\n\r\n this.#input.value = \"\";\r\n this.#filterOptions();\r\n\r\n if (restoreFocus) {\r\n this.#input.focus();\r\n } else {\r\n this.#hideMenu();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.#handleMutation();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"hideNoData\") && this.hideNoData && this.#menu) {\r\n setCustomState(this.#menu, \"-no-data\", false);\r\n }\r\n\r\n if (changedProperties.has(\"loading\")) {\r\n if (this.loading) {\r\n if (this.#hasFocus) {\r\n if (this.loadingLabel) {\r\n M3eLiveAnnouncer.announce(this.loadingLabel, \"polite\");\r\n }\r\n if (!this.#menu && this.#shouldShowMenu) {\r\n this.#showMenu();\r\n }\r\n }\r\n } else if (this.#menu && !this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n } else if (this.#menu) {\r\n deleteCustomState(this.#menu, \"-loading\");\r\n } else if (this.#hasFocus) {\r\n this.#showMenu();\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"options\" aria-hidden=\"true\">\r\n <slot></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n async #handleMutation(): Promise<void> {\r\n if (this.#mutationAbortController) {\r\n this.#mutationAbortController.abort();\r\n }\r\n const mutationAbortController = new AbortController();\r\n this.#mutationAbortController = mutationAbortController;\r\n\r\n const options = [...this.querySelectorAll(\"m3e-option\")];\r\n\r\n for (const option of options) {\r\n if (mutationAbortController.signal.aborted) {\r\n break;\r\n }\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n }\r\n\r\n if (mutationAbortController.signal.aborted) {\r\n return;\r\n }\r\n\r\n this._options = options;\r\n\r\n this.#clone = <HTMLElement>this.cloneNode(true);\r\n\r\n const { added } = this._listKeyManager.setItems([...this.#clone.querySelectorAll(\"m3e-option\")]);\r\n added.forEach((x) => {\r\n x.id = x.id || `${this.#id}-option-${this._listKeyManager.items.indexOf(x)}`;\r\n setCustomState(x, \"-hide-selection-indicator\", this.hideSelectionIndicator);\r\n });\r\n\r\n if (this.#menu) {\r\n const count = this.#filterOptions();\r\n this.#projectClone();\r\n if (!this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n } else {\r\n this.#updateMenuState(this.#menu, count);\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(): void {\r\n this.#ignoreFocusVisible = true;\r\n this.#showMenu();\r\n }\r\n\r\n /** @private */\r\n #handleFormFieldPointerDown(): void {\r\n this.#ignoreHideMenuOnBlur = true;\r\n }\r\n\r\n /** @private */\r\n #handleFocus(): void {\r\n this.#hasFocus = true;\r\n this.#ignoreFocusVisible = true;\r\n\r\n if (this.options.length == 0 && !(<HTMLInputElement>this.control).readOnly) {\r\n this.dispatchEvent(\r\n new CustomEvent<AutocompleteQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input?.value ?? \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n this.#showMenu();\r\n }\r\n\r\n /** @private */\r\n #handleBlur(): void {\r\n this.#hasFocus = false;\r\n if (!this.#ignoreHideMenuOnBlur) {\r\n this.#hideMenu();\r\n }\r\n this.#ignoreHideMenuOnBlur = false;\r\n }\r\n\r\n /** @private */\r\n #handleInput(e: Event): void {\r\n if (!this.#input || e.defaultPrevented) return;\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<AutocompleteQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input.value },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n\r\n this.#inputChanged = true;\r\n try {\r\n if (!this.#menu) {\r\n this.#showMenu();\r\n } else {\r\n this.#filterOptions();\r\n if (!this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n }\r\n }\r\n } finally {\r\n this.#inputChanged = false;\r\n this.#formField?.notifyControlStateChange(true);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleChange(): void {\r\n if (this.#input && this.required && !this.#options.some((x) => x.selected && !x.disabled)) {\r\n this.#input.value = \"\";\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n if (e.defaultPrevented) return;\r\n\r\n this.#ignoreFocusVisible = false;\r\n\r\n switch (e.key) {\r\n case \"Backspace\":\r\n case \"Delete\":\r\n if (this.#input && !this.#input.value) {\r\n this.#hideMenu();\r\n }\r\n break;\r\n\r\n case \"Enter\":\r\n if (this.#menu && this._listKeyManager.activeItem) {\r\n e.preventDefault();\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n } else if (this.#menu) {\r\n setTimeout(() => {\r\n if (this.#input && !this.#input.value) {\r\n this.#hideMenu();\r\n }\r\n });\r\n }\r\n break;\r\n\r\n case \"Escape\":\r\n case \"Tab\":\r\n this.#hideMenu();\r\n break;\r\n\r\n case \"Up\":\r\n case \"ArrowUp\":\r\n if (e.altKey) {\r\n this.#hideMenu();\r\n } else {\r\n this._listKeyManager.onKeyDown(e);\r\n }\r\n break;\r\n\r\n case \"Down\":\r\n case \"ArrowDown\":\r\n if (!this.#menu) {\r\n this.#showMenu();\r\n e.preventDefault();\r\n } else {\r\n this._listKeyManager.onKeyDown(e);\r\n }\r\n break;\r\n\r\n default:\r\n this._listKeyManager.onKeyDown(e);\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuPointerDown(e: PointerEvent): void {\r\n if (e.button === 2) return;\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n\r\n const option = <M3eOptionElement | undefined>(\r\n e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n );\r\n\r\n if (option && !option.disabled) {\r\n this._listKeyManager.setActiveItem(option);\r\n this.#selectOption(option);\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuToggle(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n if (e.newState !== \"closed\") {\r\n const option = this.#options.find((x) => x.selected && !x.disabled);\r\n if (option) {\r\n this._listKeyManager.setActiveItem(option);\r\n scrollIntoViewIfNeeded(option, this.#menu);\r\n } else {\r\n this.#autoActivate();\r\n }\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n } else {\r\n if (prefersReducedMotion()) {\r\n this.#destroyMenu(e);\r\n } else {\r\n // NOTE: use transitionend is preferred but doesn't fire when used here.\r\n // This is a workaround until that is fixed.\r\n setTimeout(() => this.#destroyMenu(e), 100);\r\n }\r\n }\r\n }\r\n\r\n /** @private*/\r\n #destroyMenu(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n this.#clone?.replaceChildren(...this.#menu.childNodes);\r\n\r\n this.#menu.remove();\r\n this.#menu.removeEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.removeEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n this.#menu = undefined;\r\n\r\n if (this.#input) {\r\n this.#input.ariaExpanded = \"false\";\r\n this.#input.removeAttribute(\"aria-controls\");\r\n this.#input.removeAttribute(\"aria-owns\");\r\n }\r\n this.requestUpdate();\r\n\r\n this.#formField?.notifyControlStateChange();\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n }\r\n\r\n /** @private */\r\n #showMenu(): void {\r\n if (this.#menu || !this.#input || this.#input.readOnly || this.#input.disabled) return;\r\n\r\n const count = this.#filterOptions();\r\n\r\n if (!this.#shouldShowMenu) return;\r\n\r\n this.#menu = document.createElement(\"m3e-option-panel\");\r\n this.#menu.id = this.#menuId;\r\n\r\n if (this.panelClass) {\r\n for (const klass of this.panelClass\r\n .split(/\\s+/)\r\n .map((d) => d.trim())\r\n .filter(Boolean)) {\r\n this.#menu.classList.add(klass);\r\n }\r\n }\r\n\r\n this.#menu.style.overflowX = \"hidden\";\r\n this.#menu.scrollStrategy = \"reposition\";\r\n this.#menu.fitAnchorWidth = true;\r\n this.#menu.addEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.addEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n\r\n this.#projectClone();\r\n\r\n this.#updateMenuState(this.#menu, count);\r\n\r\n (this.#formField ?? this.#input).insertAdjacentElement(\"afterend\", this.#menu);\r\n\r\n this.#input.setAttribute(\"aria-controls\", this.#menuId);\r\n this.#input.setAttribute(\"aria-owns\", this.#menuId);\r\n\r\n this.#formField?.notifyControlStateChange();\r\n\r\n if (this._listKeyManager.activeItem && this.autoActivate) {\r\n this.#activateOption(this._listKeyManager.activeItem, true);\r\n }\r\n\r\n const input = this.#input;\r\n setTimeout(() => this.#menu?.show(input, this.#formField?.menuAnchor));\r\n }\r\n\r\n /** @private */\r\n #projectClone(): void {\r\n if (!this.#clone || !this.#menu) return;\r\n const children = [...this.#clone.childNodes];\r\n if (!this.#hasNoDataSlot && this.noDataLabel) {\r\n const noDataSpan = document.createElement(\"span\");\r\n noDataSpan.slot = \"no-data\";\r\n noDataSpan.textContent = this.noDataLabel;\r\n children.push(noDataSpan);\r\n }\r\n if (!this.#hasLoadingSlot && this.loadingLabel) {\r\n const loadingSpan = document.createElement(\"span\");\r\n loadingSpan.slot = \"loading\";\r\n loadingSpan.textContent = this.loadingLabel;\r\n children.push(loadingSpan);\r\n }\r\n this.#menu.replaceChildren(...children);\r\n }\r\n\r\n /** @private */\r\n #updateMenuState(menu: M3eOptionPanelElement, count: number): void {\r\n setCustomState(menu, \"-loading\", this.loading);\r\n setCustomState(menu, \"-no-data\", count == 0);\r\n }\r\n\r\n /** @private */\r\n #hideMenu(): void {\r\n this.#menu?.hide();\r\n this.#input?.removeAttribute(\"aria-activedescendant\");\r\n }\r\n\r\n /** @private */\r\n #activateOption(option: M3eOptionElement, forceFocusVisible = false): void {\r\n if (!this.#input) return;\r\n\r\n this.#input.setAttribute(\"aria-activedescendant\", option.id);\r\n\r\n if (this.#menu) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n\r\n const focusVisible =\r\n forceFocusVisible ||\r\n (!this.#ignoreFocusVisible && (this.#input.matches(\":focus-visible\") || forcedColorsActive()));\r\n\r\n this.#options.forEach((x) => {\r\n const active = x === option && focusVisible;\r\n if (active) {\r\n x.focusRing?.show();\r\n x.stateLayer?.show(\"focused\");\r\n } else {\r\n x.focusRing?.hide();\r\n x.stateLayer?.hide(\"focused\");\r\n }\r\n });\r\n }\r\n }\r\n\r\n /** @private */\r\n async #updateSelectionState(clone: M3eOptionElement): Promise<void> {\r\n const option = this._options[this._listKeyManager.items.indexOf(clone)];\r\n if (option) {\r\n option.selected = clone.selected;\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n async #selectOption(option: M3eOptionElement): Promise<void> {\r\n if (option.selected) return;\r\n\r\n option.selected = true;\r\n await this.#updateSelectionState(option);\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n\r\n this.requestUpdate();\r\n if (this.isUpdatePending) {\r\n await this.updateComplete;\r\n }\r\n\r\n if (this.#input) {\r\n this.#input.value = option.value;\r\n }\r\n\r\n this.#formField?.notifyControlStateChange(true);\r\n }\r\n\r\n /** @private */\r\n #filterOption(clone: M3eOptionElement, option: M3eOptionElement, term: string, exactTerm: string): boolean {\r\n const value = this.caseSensitive ? option.value : option.value.toLowerCase();\r\n switch (this.filter) {\r\n case \"starts-with\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.startsWith(term);\r\n case \"ends-with\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.endsWith(term);\r\n case \"contains\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.includes(term);\r\n case \"none\":\r\n clone.disableHighlight = true;\r\n return true;\r\n default:\r\n clone.disableHighlight = true;\r\n return this.filter(option, exactTerm);\r\n }\r\n }\r\n\r\n /** @private */\r\n #filterOptions(): number {\r\n if (!this.#input) return 0;\r\n\r\n const oldCount = this.#options.filter((x) => !x.hidden).length;\r\n const shouldAnnounce = !this.loading && this.#inputChanged;\r\n this.#inputChanged = false;\r\n\r\n const exactTerm = this.#input.value;\r\n const term = this.caseSensitive ? exactTerm : exactTerm.toLocaleLowerCase();\r\n\r\n let newCount = 0;\r\n let first = false;\r\n let last: M3eOptionElement | undefined;\r\n\r\n for (let i = 0; i < this.#options.length; i++) {\r\n const clone = this.#options[i];\r\n const option = this._options[i];\r\n clone.hidden = !this.#filterOption(clone, option, term, exactTerm);\r\n\r\n if (clone.hidden) {\r\n this.#deactivateOption(clone);\r\n deleteCustomState(clone, \"-first\");\r\n deleteCustomState(clone, \"-last\");\r\n } else {\r\n newCount++;\r\n if (!first && !(clone.parentElement instanceof M3eOptGroupElement)) {\r\n addCustomState(clone, \"-first\");\r\n first = true;\r\n addCustomState(clone, \"-last\");\r\n last = clone;\r\n } else {\r\n deleteCustomState(clone, \"-first\");\r\n if (last) {\r\n deleteCustomState(last, \"-last\");\r\n }\r\n addCustomState(clone, \"-last\");\r\n last = clone;\r\n }\r\n }\r\n\r\n if (clone.selected && option.value !== exactTerm) {\r\n clone.selected = false;\r\n this.#updateSelectionState(clone);\r\n }\r\n }\r\n\r\n if (this.#menu) {\r\n this.#updateMenuState(this.#menu, newCount);\r\n }\r\n\r\n const groups = this.#menu?.querySelectorAll(\"m3e-optgroup\") ?? this.#clone?.querySelectorAll(\"m3e-optgroup\") ?? [];\r\n for (const group of groups) {\r\n group.hidden = [...group.querySelectorAll(\"m3e-option\")].every((x) => x.hidden);\r\n }\r\n\r\n if (shouldAnnounce) {\r\n this.#announceResults(oldCount, newCount);\r\n }\r\n\r\n this.#autoActivate();\r\n return newCount;\r\n }\r\n\r\n /** @private */\r\n #announceResults(oldCount: number, newCount: number): void {\r\n if (!this.#hasFocus) return;\r\n if (newCount == 0) {\r\n if (oldCount > 0 && this.noDataLabel) {\r\n M3eLiveAnnouncer.announce(this.noDataLabel, \"polite\");\r\n }\r\n } else if (oldCount != newCount) {\r\n const message = this.resultsLabel instanceof Function ? this.resultsLabel(newCount) : this.resultsLabel;\r\n if (message) {\r\n M3eLiveAnnouncer.announce(message, \"polite\");\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #autoActivate(): void {\r\n if (this.autoActivate && (!this._listKeyManager.activeItem || !this._listKeyManager.activeItem.selected)) {\r\n const option = this.#options.find((x) => !x.disabled && !x.hidden);\r\n if (option) {\r\n this._listKeyManager.setActiveItem(option);\r\n if (this.#menu) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #deactivateOption(option: M3eOptionElement): void {\r\n option.focusRing?.hide();\r\n option.stateLayer?.hide(\"focused\");\r\n if (option === this._listKeyManager.activeItem) {\r\n this._listKeyManager.updateActiveItem(null);\r\n this.#input?.removeAttribute(\"aria-activedescendant\");\r\n }\r\n }\r\n}\r\n\r\ninterface M3eAutocompleteElementEventMap extends HTMLElementEventMap {\r\n toggle: ToggleEvent;\r\n query: CustomEvent<AutocompleteQueryEventDetail>;\r\n}\r\n\r\nexport interface M3eAutocompleteElement {\r\n addEventListener<K extends keyof M3eAutocompleteElementEventMap>(\r\n type: K,\r\n listener: (this: M3eAutocompleteElement, ev: M3eAutocompleteElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eAutocompleteElementEventMap>(\r\n type: K,\r\n listener: (this: M3eAutocompleteElement, ev: M3eAutocompleteElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-autocomplete\": M3eAutocompleteElement;\r\n }\r\n}\r\n"],"names":["M3eAutocompleteElement","M3eAutocompleteElement_1","EventAttribute","HtmlFor","LitElement","constructor","super","_M3eAutocompleteElement_id","set","this","__nextId","_M3eAutocompleteElement_menuId","__classPrivateFieldGet","_options","Array","_M3eAutocompleteElement_clone","_M3eAutocompleteElement_ignoreFocusVisible","_M3eAutocompleteElement_menu","_M3eAutocompleteElement_ignoreHideMenuOnBlur","_M3eAutocompleteElement_inputChanged","_M3eAutocompleteElement_hasFocus","_M3eAutocompleteElement_mutationAbortController","_M3eAutocompleteElement_clickHandler","_M3eAutocompleteElement_instances","_M3eAutocompleteElement_handleClick","call","_M3eAutocompleteElement_formFieldPointerDownHandler","_M3eAutocompleteElement_handleFormFieldPointerDown","_M3eAutocompleteElement_focusHandler","_M3eAutocompleteElement_handleFocus","_M3eAutocompleteElement_blurHandler","_M3eAutocompleteElement_handleBlur","_M3eAutocompleteElement_keyDownHandler","e","_M3eAutocompleteElement_inputHandler","_M3eAutocompleteElement_changeHandler","_M3eAutocompleteElement_handleChange","_M3eAutocompleteElement_menuToggleHandler","_M3eAutocompleteElement_menuPointerDownHandler","_listKeyManager","ListKeyManager","withWrap","withHomeAndEnd","withPageUpAndDown","withVerticalOrientation","withSkipPredicate","item","disabled","hidden","onActiveItemChange","activeItem","_M3eAutocompleteElement_activateOption","hideSelectionIndicator","required","autoActivate","caseSensitive","filter","loading","hideNoData","hideLoading","loadingLabel","noDataLabel","resultsLabel","count","panelClass","MutationController","config","childList","subtree","callback","_M3eAutocompleteElement_handleMutation","options","attach","control","HTMLInputElement","autocomplete","role","ariaAutoComplete","ariaExpanded","addEventListener","_M3eAutocompleteElement_formField_get","detach","removeEventListener","clear","restoreFocus","_M3eAutocompleteElement_input_get","value","_M3eAutocompleteElement_filterOptions","focus","_M3eAutocompleteElement_hideMenu","connectedCallback","update","changedProperties","has","setCustomState","M3eLiveAnnouncer","announce","_M3eAutocompleteElement_shouldShowMenu_get","_M3eAutocompleteElement_showMenu","deleteCustomState","render","html","items","querySelector","_M3eAutocompleteElement_options_get","some","x","length","closest","async","abort","mutationAbortController","AbortController","__classPrivateFieldSet","querySelectorAll","option","signal","aborted","isUpdatePending","updateComplete","cloneNode","added","setItems","forEach","id","indexOf","_M3eAutocompleteElement_projectClone","_M3eAutocompleteElement_updateMenuState","readOnly","dispatchEvent","CustomEvent","detail","term","bubbles","composed","defaultPrevented","notifyControlStateChange","selected","key","preventDefault","_M3eAutocompleteElement_selectOption","prefersReducedMotion","setTimeout","altKey","onKeyDown","button","stopImmediatePropagation","composedPath","find","HTMLElement","tagName","setActiveItem","newState","scrollIntoViewIfNeeded","_M3eAutocompleteElement_autoActivate","ToggleEvent","oldState","_M3eAutocompleteElement_destroyMenu","replaceChildren","childNodes","remove","undefined","removeAttribute","requestUpdate","document","createElement","klass","split","map","d","trim","Boolean","classList","add","style","overflowX","scrollStrategy","fitAnchorWidth","insertAdjacentElement","setAttribute","input","show","menuAnchor","children","_M3eAutocompleteElement_hasNoDataSlot_get","noDataSpan","slot","textContent","push","_M3eAutocompleteElement_hasLoadingSlot_get","loadingSpan","menu","hide","forceFocusVisible","block","behavior","focusVisible","matches","forcedColorsActive","focusRing","stateLayer","clone","_M3eAutocompleteElement_updateSelectionState","_M3eAutocompleteElement_filterOption","exactTerm","toLowerCase","highlightMode","startsWith","endsWith","includes","disableHighlight","oldCount","shouldAnnounce","toLocaleLowerCase","last","newCount","first","i","_M3eAutocompleteElement_deactivateOption","parentElement","M3eOptGroupElement","addCustomState","groups","group","every","_M3eAutocompleteElement_announceResults","message","Function","updateActiveItem","styles","css","__decorate","property","attribute","type","prototype","reflect","converter","fromAttribute","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"autocomplete.min.js","sources":["../../src/autocomplete/AutocompleteElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n HtmlFor,\r\n prefersReducedMotion,\r\n scrollIntoViewIfNeeded,\r\n forcedColorsActive,\r\n setCustomState,\r\n deleteCustomState,\r\n addCustomState,\r\n customElement,\r\n MutationController,\r\n EventAttribute,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ListKeyManager, M3eLiveAnnouncer } from \"@m3e/web/core/a11y\";\r\nimport { M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement } from \"@m3e/web/option\";\r\nimport type { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\nimport { AutocompleteFilterMode } from \"./AutocompleteFilterMode\";\r\nimport { AutocompleteQueryEventDetail } from \"./AutocompleteQueryEventDetail\";\r\n\r\n/**\r\n * Enhances a text input with suggested options.\r\n *\r\n * @description\r\n * The `m3e-autocomplete` component augments a text input field with a dynamically positioned menu of filterable suggestions,\r\n * following Material Design 3 principles. It provides real-time filtering, keyboard navigation, automatic option activation,\r\n * and text highlighting to guide user selection. The component manages focus, selection state, and menu visibility while\r\n * integrating seamlessly with form field containers and supporting both required and optional selection modes.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-autocomplete` paired with a `m3e-form-field`.\r\n * ```html\r\n * <m3e-form-field>\r\n * <label slot=\"label\" for=\"fruit\">Choose your favorite fruit</label>\r\n * <input id=\"fruit\" />\r\n * </m3e-form-field>\r\n * <m3e-autocomplete for=\"fruit\">\r\n * <m3e-option>Apples</m3e-option>\r\n * <m3e-option>Oranges</m3e-option>\r\n * <m3e-option>Bananas</m3e-option>\r\n * <m3e-option>Grapes</m3e-option>\r\n * </m3e-autocomplete>\r\n * ```\r\n *\r\n * @tag m3e-autocomplete\r\n *\r\n * @attr auto-activate - Whether the first option should be automatically activated.\r\n * @attr case-sensitive - Whether filtering is case sensitive.\r\n * @attr filter - Mode in which to filter options.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr hide-loading - Whether to hide the menu when loading options.\r\n * @attr hide-no-data - Whether to hide the menu when there are no options to show.\r\n * @attr loading - Whether options are being loaded.\r\n * @attr loading-label - The text announced and presented when loading options.\r\n * @attr no-data-label - The text announced and presented when no options are available for the current term.\r\n * @attr panel-class - Class or list of classes to be applied to the autocomplete's overlay panel.\r\n * @attr required - Whether the user is required to make a selection when interacting with the autocomplete.\r\n * @attr results-label - The text announced when available options change for the current term.\r\n *\r\n * @slot - Renders the options of the autocomplete.\r\n * @slot loading - Renders content when loading options.\r\n * @slot no-data - Renders content when there are no options to show.\r\n *\r\n * @fires toggle - Emitted when the options menu opens or closes.\r\n * @fires query - Emitted when the input is focused or when the user modifies its value.\r\n * @fires change - Emitted when the committed value changes due to selecting an option or clearing the input.\r\n */\r\n@customElement(\"m3e-autocomplete\")\r\nexport class M3eAutocompleteElement extends EventAttribute(HtmlFor(LitElement), \"query\") {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: contents;\r\n }\r\n .options {\r\n display: none;\r\n }\r\n `;\r\n\r\n /** @private */ private static __nextId = 0;\r\n\r\n /** @private */ readonly #id = `m3e-autocomplete-${M3eAutocompleteElement.__nextId}`;\r\n /** @private */ readonly #menuId = `${this.#id}-menu`;\r\n /** @private */ private _options = new Array<M3eOptionElement>();\r\n /** @private */ #clone?: HTMLElement;\r\n /** @private */ #ignoreFocusVisible = false;\r\n /** @private */ #menu?: M3eOptionPanelElement;\r\n /** @private */ #ignoreHideMenuOnBlur = false;\r\n /** @private */ #inputChanged = false;\r\n /** @private */ #hasFocus = false;\r\n /** @private */ #mutationAbortController?: AbortController;\r\n\r\n /** @private */ readonly #clickHandler = () => this.#handleClick();\r\n /** @private */ readonly #formFieldPointerDownHandler = () => this.#handleFormFieldPointerDown();\r\n /** @private */ readonly #focusHandler = () => this.#handleFocus();\r\n /** @private */ readonly #blurHandler = () => this.#handleBlur();\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n /** @private */ readonly #inputHandler = (e: Event) => this.#handleInput(e);\r\n /** @private */ readonly #changeHandler = () => this.#handleChange();\r\n /** @private */ readonly #menuToggleHandler = (e: ToggleEvent) => this.#handleMenuToggle(e);\r\n /** @private */ readonly #menuPointerDownHandler = (e: PointerEvent) => this.#handleMenuPointerDown(e);\r\n\r\n /** @private */ private readonly _listKeyManager = new ListKeyManager<M3eOptionElement>()\r\n .withWrap()\r\n .withHomeAndEnd()\r\n .withPageUpAndDown()\r\n .withVerticalOrientation()\r\n .withSkipPredicate((item) => item.disabled || item.hidden === true)\r\n .onActiveItemChange(() => {\r\n if (this._listKeyManager.activeItem) {\r\n this.#activateOption(this._listKeyManager.activeItem);\r\n }\r\n });\r\n\r\n constructor() {\r\n super();\r\n\r\n new MutationController(this, {\r\n config: {\r\n childList: true,\r\n subtree: true,\r\n },\r\n callback: () => this.#handleMutation(),\r\n });\r\n }\r\n\r\n /**\r\n * Whether to hide the selection indicator.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n /**\r\n * Whether the user is required to make a selection when interacting with the autocomplete.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) required = false;\r\n\r\n /**\r\n * Whether the first option should be automatically activated.\r\n * @default false\r\n */\r\n @property({ attribute: \"auto-activate\", type: Boolean }) autoActivate = false;\r\n\r\n /**\r\n * Whether filtering is case sensitive.\r\n * @default false\r\n */\r\n @property({ attribute: \"case-sensitive\", type: Boolean }) caseSensitive = false;\r\n\r\n /**\r\n * Mode in which to filter options.\r\n * @default \"contains\"\r\n */\r\n @property({\r\n converter: {\r\n fromAttribute(value: string | null): AutocompleteFilterMode {\r\n if (value === null) return \"contains\";\r\n if (value === \"starts-with\" || value === \"ends-with\" || value === \"contains\" || value === \"none\") {\r\n return value;\r\n }\r\n return \"contains\";\r\n },\r\n },\r\n })\r\n filter: AutocompleteFilterMode | ((option: M3eOptionElement, term: string) => boolean) = \"contains\";\r\n\r\n /**\r\n * Whether options are being loaded.\r\n * @default false\r\n */\r\n @property({ type: Boolean }) loading = false;\r\n\r\n /**\r\n * Whether to hide the menu when there are no options to show.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-no-data\", type: Boolean }) hideNoData = false;\r\n\r\n /**\r\n * Whether to hide the menu when loading options.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-loading\", type: Boolean }) hideLoading = false;\r\n\r\n /**\r\n * The text announced and presented when loading options.\r\n * @default \"Loading...\"\r\n */\r\n @property({ attribute: \"loading-label\" }) loadingLabel = \"Loading...\";\r\n\r\n /**\r\n * The text announced and presented when no options are available for the current term.\r\n * @default \"No options\"\r\n */\r\n @property({ attribute: \"no-data-label\" }) noDataLabel = \"No options\";\r\n\r\n /**\r\n * The text announced when available options change for the current term.\r\n * @default (count) => `${count} options`\r\n */\r\n @property({ attribute: \"results-label\" }) resultsLabel: string | ((count: number) => string) = (count) =>\r\n `${count} options`;\r\n\r\n /**\r\n * Class or list of classes to be applied to the autocomplete's overlay panel.\r\n * @default \"\"\r\n */\r\n @property({ attribute: \"panel-class\" }) panelClass = \"\";\r\n\r\n /** The options that can be selected. */\r\n get options(): readonly M3eOptionElement[] {\r\n return this._options ?? [];\r\n }\r\n\r\n /** The selected option. */\r\n get selected(): M3eOptionElement | null {\r\n return this.options.find((x) => x.selected) ?? null;\r\n }\r\n\r\n /** The selected (enabled) value. */\r\n get value(): string | null {\r\n const selected = this.selected;\r\n return selected && !selected.disabled ? selected.value : null;\r\n }\r\n\r\n /** @private */\r\n get #options(): readonly M3eOptionElement[] {\r\n return this._listKeyManager?.items ?? [];\r\n }\r\n\r\n /** @private */\r\n get #input(): HTMLInputElement | null {\r\n return this.control ? <HTMLInputElement>this.control : null;\r\n }\r\n\r\n /** @private */\r\n get #hasNoDataSlot(): boolean {\r\n return (this.#clone?.querySelector(\"[slot='no-data']\") ?? null) !== null;\r\n }\r\n\r\n /** @private */\r\n get #hasLoadingSlot(): boolean {\r\n return (this.#clone?.querySelector(\"[slot='loading']\") ?? null) !== null;\r\n }\r\n\r\n /** @private */\r\n get #shouldShowMenu(): boolean {\r\n return (\r\n this.#options.some((x) => x.hidden === false) ||\r\n (this.loading && !this.hideLoading && this.loadingLabel.length > 0) ||\r\n (!this.loading && !this.hideNoData && this.noDataLabel.length > 0)\r\n );\r\n }\r\n\r\n /** @private */\r\n get #formField(): M3eFormFieldElement | null {\r\n return this.control?.closest(\"m3e-form-field\") ?? null;\r\n }\r\n\r\n /** @inheritdoc */\r\n override attach(control: HTMLElement): void {\r\n if (!(control instanceof HTMLInputElement)) return;\r\n\r\n super.attach(control);\r\n\r\n control.autocomplete = \"off\";\r\n control.role = \"combobox\";\r\n control.ariaAutoComplete = \"list\";\r\n control.ariaExpanded = \"false\";\r\n\r\n control.addEventListener(\"click\", this.#clickHandler);\r\n control.addEventListener(\"focus\", this.#focusHandler);\r\n control.addEventListener(\"blur\", this.#blurHandler);\r\n control.addEventListener(\"keydown\", this.#keyDownHandler);\r\n control.addEventListener(\"input\", this.#inputHandler);\r\n control.addEventListener(\"change\", this.#changeHandler);\r\n\r\n this.#formField?.addEventListener(\"pointerdown\", this.#formFieldPointerDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override detach(): void {\r\n if (this.control) {\r\n this.#formField?.removeEventListener(\"pointerdown\", this.#formFieldPointerDownHandler);\r\n\r\n this.control.role = null;\r\n this.control.ariaAutoComplete = null;\r\n this.control.ariaExpanded = null;\r\n\r\n this.control.removeEventListener(\"click\", this.#clickHandler);\r\n this.control.removeEventListener(\"focus\", this.#focusHandler);\r\n this.control.removeEventListener(\"blur\", this.#blurHandler);\r\n this.control.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n this.control.removeEventListener(\"input\", this.#inputHandler);\r\n this.control.removeEventListener(\"change\", this.#changeHandler);\r\n }\r\n super.detach();\r\n }\r\n\r\n /**\r\n * Clears the value of the element.\r\n * @param [restoreFocus=false] Whether to restore input focus.\r\n */\r\n clear(restoreFocus = false): void {\r\n if (!this.#input) return;\r\n\r\n this.#input.value = \"\";\r\n if (this.#clearOptions()) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n this.#filterOptions();\r\n\r\n if (restoreFocus) {\r\n this.#input.focus();\r\n } else {\r\n this.#hideMenu();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.#handleMutation();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"hideNoData\") && this.hideNoData && this.#menu) {\r\n setCustomState(this.#menu, \"-no-data\", false);\r\n }\r\n\r\n if (changedProperties.has(\"loading\")) {\r\n if (this.loading) {\r\n if (this.#hasFocus) {\r\n if (this.loadingLabel) {\r\n M3eLiveAnnouncer.announce(this.loadingLabel, \"polite\");\r\n }\r\n if (!this.#menu && this.#shouldShowMenu) {\r\n this.#showMenu();\r\n }\r\n }\r\n } else if (this.#menu && !this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n } else if (this.#menu) {\r\n deleteCustomState(this.#menu, \"-loading\");\r\n } else if (this.#hasFocus) {\r\n this.#showMenu();\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"options\" aria-hidden=\"true\">\r\n <slot></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n async #handleMutation(): Promise<void> {\r\n if (this.#mutationAbortController) {\r\n this.#mutationAbortController.abort();\r\n }\r\n const mutationAbortController = new AbortController();\r\n this.#mutationAbortController = mutationAbortController;\r\n\r\n const options = [...this.querySelectorAll(\"m3e-option\")];\r\n\r\n for (const option of options) {\r\n if (mutationAbortController.signal.aborted) {\r\n break;\r\n }\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n }\r\n\r\n if (mutationAbortController.signal.aborted) {\r\n return;\r\n }\r\n\r\n this._options = options;\r\n\r\n this.#clone = <HTMLElement>this.cloneNode(true);\r\n\r\n const { added } = this._listKeyManager.setItems([...this.#clone.querySelectorAll(\"m3e-option\")]);\r\n added.forEach((x) => {\r\n x.id = x.id || `${this.#id}-option-${this._listKeyManager.items.indexOf(x)}`;\r\n setCustomState(x, \"-hide-selection-indicator\", this.hideSelectionIndicator);\r\n });\r\n\r\n if (this.#menu) {\r\n const count = this.#filterOptions();\r\n this.#projectClone();\r\n if (!this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n } else {\r\n this.#updateMenuState(this.#menu, count);\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(): void {\r\n this.#ignoreFocusVisible = true;\r\n this.#showMenu();\r\n }\r\n\r\n /** @private */\r\n #handleFormFieldPointerDown(): void {\r\n this.#ignoreHideMenuOnBlur = true;\r\n }\r\n\r\n /** @private */\r\n #handleFocus(): void {\r\n this.#hasFocus = true;\r\n this.#ignoreFocusVisible = true;\r\n\r\n if (this.options.length == 0 && !(<HTMLInputElement>this.control).readOnly) {\r\n this.dispatchEvent(\r\n new CustomEvent<AutocompleteQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input?.value ?? \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n this.#showMenu();\r\n }\r\n\r\n /** @private */\r\n #handleBlur(): void {\r\n this.#hasFocus = false;\r\n if (!this.#ignoreHideMenuOnBlur) {\r\n this.#hideMenu();\r\n }\r\n this.#ignoreHideMenuOnBlur = false;\r\n }\r\n\r\n /** @private */\r\n #handleInput(e: Event): void {\r\n if (!this.#input || e.defaultPrevented) return;\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<AutocompleteQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input.value },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n\r\n if (this.#input.value === \"\" && this.#clearOptions()) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n\r\n this.#inputChanged = true;\r\n try {\r\n if (!this.#menu) {\r\n this.#showMenu();\r\n } else {\r\n this.#filterOptions();\r\n if (!this.#shouldShowMenu) {\r\n this.#hideMenu();\r\n }\r\n }\r\n } finally {\r\n this.#inputChanged = false;\r\n this.#formField?.notifyControlStateChange(true);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleChange(): void {\r\n if (this.#input) {\r\n const selected = this.selected;\r\n if (this.required) {\r\n this.#input.value = selected?.label ?? \"\";\r\n } else if (selected && selected.label !== this.#input.value && this.#clearOptions()) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n if (e.defaultPrevented) return;\r\n\r\n this.#ignoreFocusVisible = false;\r\n\r\n switch (e.key) {\r\n case \"Backspace\":\r\n case \"Delete\":\r\n if (this.#input && !this.#input.value) {\r\n this.#hideMenu();\r\n }\r\n break;\r\n\r\n case \"Enter\":\r\n if (this.#menu && this._listKeyManager.activeItem) {\r\n e.preventDefault();\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n } else if (this.#menu) {\r\n setTimeout(() => {\r\n if (this.#input && !this.#input.value) {\r\n this.#hideMenu();\r\n }\r\n });\r\n }\r\n break;\r\n\r\n case \"Escape\":\r\n case \"Tab\":\r\n this.#hideMenu();\r\n break;\r\n\r\n case \"Up\":\r\n case \"ArrowUp\":\r\n if (e.altKey) {\r\n this.#hideMenu();\r\n } else {\r\n this._listKeyManager.onKeyDown(e);\r\n }\r\n break;\r\n\r\n case \"Down\":\r\n case \"ArrowDown\":\r\n if (!this.#menu) {\r\n this.#showMenu();\r\n e.preventDefault();\r\n } else {\r\n this._listKeyManager.onKeyDown(e);\r\n }\r\n break;\r\n\r\n default:\r\n this._listKeyManager.onKeyDown(e);\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuPointerDown(e: PointerEvent): void {\r\n if (e.button === 2) return;\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n\r\n const option = <M3eOptionElement | undefined>(\r\n e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n );\r\n\r\n if (option && !option.disabled) {\r\n this._listKeyManager.setActiveItem(option);\r\n this.#selectOption(option);\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuToggle(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n if (e.newState !== \"closed\") {\r\n const option = this.#options.find((x) => x.selected && !x.disabled);\r\n if (option) {\r\n this._listKeyManager.setActiveItem(option);\r\n scrollIntoViewIfNeeded(option, this.#menu);\r\n } else {\r\n this.#autoActivate();\r\n }\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n } else {\r\n if (prefersReducedMotion()) {\r\n this.#destroyMenu(e);\r\n } else {\r\n // NOTE: use transitionend is preferred but doesn't fire when used here.\r\n // This is a workaround until that is fixed.\r\n setTimeout(() => this.#destroyMenu(e), 100);\r\n }\r\n }\r\n }\r\n\r\n /** @private*/\r\n #destroyMenu(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n this.#clone?.replaceChildren(...this.#menu.childNodes);\r\n\r\n this.#menu.remove();\r\n this.#menu.removeEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.removeEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n this.#menu = undefined;\r\n\r\n if (this.#input) {\r\n this.#input.ariaExpanded = \"false\";\r\n this.#input.removeAttribute(\"aria-controls\");\r\n this.#input.removeAttribute(\"aria-owns\");\r\n this.#input.removeAttribute(\"aria-activedescendant\");\r\n }\r\n this.requestUpdate();\r\n\r\n this.#formField?.notifyControlStateChange();\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n\r\n if (this.#input?.slot === \"input\" && this.#input.parentElement?.tagName === \"M3E-INPUT-CHIP-SET\") {\r\n this.#clearOptions();\r\n }\r\n }\r\n\r\n /** @private */\r\n #showMenu(): void {\r\n if (this.#menu || !this.#input || this.#input.readOnly || this.#input.disabled) return;\r\n\r\n const count = this.#filterOptions();\r\n\r\n if (!this.#shouldShowMenu) return;\r\n\r\n this.#menu = document.createElement(\"m3e-option-panel\");\r\n this.#menu.id = this.#menuId;\r\n\r\n if (this.panelClass) {\r\n for (const klass of this.panelClass\r\n .split(/\\s+/)\r\n .map((d) => d.trim())\r\n .filter(Boolean)) {\r\n this.#menu.classList.add(klass);\r\n }\r\n }\r\n\r\n this.#menu.style.overflowX = \"hidden\";\r\n this.#menu.scrollStrategy = \"reposition\";\r\n this.#menu.fitAnchorWidth = true;\r\n this.#menu.addEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.addEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n\r\n this.#projectClone();\r\n\r\n this.#updateMenuState(this.#menu, count);\r\n\r\n (this.#formField ?? this.#input).insertAdjacentElement(\"afterend\", this.#menu);\r\n\r\n this.#input.setAttribute(\"aria-controls\", this.#menuId);\r\n this.#input.setAttribute(\"aria-owns\", this.#menuId);\r\n\r\n this.#formField?.notifyControlStateChange();\r\n\r\n if (this._listKeyManager.activeItem && this.autoActivate) {\r\n this.#activateOption(this._listKeyManager.activeItem, true);\r\n }\r\n\r\n const input = this.#input;\r\n setTimeout(() => this.#menu?.show(input, this.#formField?.menuAnchor));\r\n }\r\n\r\n /** @private */\r\n #projectClone(): void {\r\n if (!this.#clone || !this.#menu) return;\r\n const children = [...this.#clone.childNodes];\r\n if (!this.#hasNoDataSlot && this.noDataLabel) {\r\n const noDataSpan = document.createElement(\"span\");\r\n noDataSpan.slot = \"no-data\";\r\n noDataSpan.textContent = this.noDataLabel;\r\n children.push(noDataSpan);\r\n }\r\n if (!this.#hasLoadingSlot && this.loadingLabel) {\r\n const loadingSpan = document.createElement(\"span\");\r\n loadingSpan.slot = \"loading\";\r\n loadingSpan.textContent = this.loadingLabel;\r\n children.push(loadingSpan);\r\n }\r\n this.#menu.replaceChildren(...children);\r\n }\r\n\r\n /** @private */\r\n #updateMenuState(menu: M3eOptionPanelElement, count: number): void {\r\n setCustomState(menu, \"-loading\", this.loading);\r\n setCustomState(menu, \"-no-data\", count == 0);\r\n }\r\n\r\n /** @private */\r\n #hideMenu(): void {\r\n this.#menu?.hide();\r\n }\r\n\r\n /** @private */\r\n #activateOption(option: M3eOptionElement, forceFocusVisible = false): void {\r\n if (!this.#input) return;\r\n\r\n this.#input.setAttribute(\"aria-activedescendant\", option.id);\r\n\r\n if (this.#menu) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n\r\n const focusVisible =\r\n forceFocusVisible ||\r\n (!this.#ignoreFocusVisible && (this.#input.matches(\":focus-visible\") || forcedColorsActive()));\r\n\r\n this.#options.forEach((x) => {\r\n const active = x === option && focusVisible;\r\n if (active) {\r\n x.focusRing?.show();\r\n x.stateLayer?.show(\"focused\");\r\n } else {\r\n x.focusRing?.hide();\r\n x.stateLayer?.hide(\"focused\");\r\n }\r\n });\r\n }\r\n }\r\n\r\n /** @private */\r\n async #updateSelectionState(clone: M3eOptionElement): Promise<void> {\r\n const option = this._options[this._listKeyManager.items.indexOf(clone)];\r\n if (option) {\r\n option.selected = clone.selected;\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n async #selectOption(option: M3eOptionElement): Promise<void> {\r\n if (option.selected) return;\r\n\r\n option.selected = true;\r\n await this.#updateSelectionState(option);\r\n if (option.isUpdatePending) {\r\n await option.updateComplete;\r\n }\r\n\r\n this.requestUpdate();\r\n if (this.isUpdatePending) {\r\n await this.updateComplete;\r\n }\r\n\r\n if (this.#input) {\r\n this.#input.value = option.label;\r\n }\r\n\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n\r\n this.#formField?.notifyControlStateChange(true);\r\n }\r\n\r\n /** @private */\r\n #filterOption(clone: M3eOptionElement, option: M3eOptionElement, term: string, exactTerm: string): boolean {\r\n const value = this.caseSensitive ? option.value : option.value.toLowerCase();\r\n switch (this.filter) {\r\n case \"starts-with\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.startsWith(term);\r\n case \"ends-with\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.endsWith(term);\r\n case \"contains\":\r\n clone.term = exactTerm;\r\n clone.highlightMode = this.filter;\r\n return value.includes(term);\r\n case \"none\":\r\n clone.disableHighlight = true;\r\n return true;\r\n default:\r\n clone.disableHighlight = true;\r\n return this.filter(option, exactTerm);\r\n }\r\n }\r\n\r\n /** @private */\r\n #filterOptions(): number {\r\n if (!this.#input) return 0;\r\n\r\n const oldCount = this.#options.filter((x) => x.hidden === false).length;\r\n const shouldAnnounce = !this.loading && this.#inputChanged;\r\n this.#inputChanged = false;\r\n\r\n const exactTerm = this.#input.value;\r\n const term = this.caseSensitive ? exactTerm : exactTerm.toLocaleLowerCase();\r\n\r\n let newCount = 0;\r\n let first = false;\r\n let last: M3eOptionElement | undefined;\r\n\r\n for (let i = 0; i < this.#options.length; i++) {\r\n const clone = this.#options[i];\r\n const option = this._options[i];\r\n clone.hidden = !this.#filterOption(clone, option, term, exactTerm);\r\n\r\n if (clone.hidden === true) {\r\n this.#deactivateOption(clone);\r\n deleteCustomState(clone, \"-first\");\r\n deleteCustomState(clone, \"-last\");\r\n } else {\r\n newCount++;\r\n if (!first && !(clone.parentElement instanceof M3eOptGroupElement)) {\r\n addCustomState(clone, \"-first\");\r\n first = true;\r\n addCustomState(clone, \"-last\");\r\n last = clone;\r\n } else {\r\n deleteCustomState(clone, \"-first\");\r\n if (last) {\r\n deleteCustomState(last, \"-last\");\r\n }\r\n addCustomState(clone, \"-last\");\r\n last = clone;\r\n }\r\n }\r\n }\r\n\r\n if (this.#menu) {\r\n this.#updateMenuState(this.#menu, newCount);\r\n }\r\n\r\n const groups = this.#menu?.querySelectorAll(\"m3e-optgroup\") ?? this.#clone?.querySelectorAll(\"m3e-optgroup\") ?? [];\r\n for (const group of groups) {\r\n group.hidden = [...group.querySelectorAll(\"m3e-option\")].every((x) => x.hidden === true);\r\n }\r\n\r\n if (shouldAnnounce) {\r\n this.#announceResults(oldCount, newCount);\r\n }\r\n\r\n this.#autoActivate();\r\n return newCount;\r\n }\r\n\r\n /** @private */\r\n #clearOptions(): boolean {\r\n const selected = this._listKeyManager.items.filter((x) => x.selected);\r\n if (selected.length > 0) {\r\n selected.forEach((x) => {\r\n x.selected = false;\r\n this.#updateSelectionState(x);\r\n });\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n /** @private */\r\n #announceResults(oldCount: number, newCount: number): void {\r\n if (!this.#hasFocus) return;\r\n if (newCount == 0) {\r\n if (oldCount > 0 && this.noDataLabel) {\r\n M3eLiveAnnouncer.announce(this.noDataLabel, \"polite\");\r\n }\r\n } else if (oldCount != newCount) {\r\n const message = this.resultsLabel instanceof Function ? this.resultsLabel(newCount) : this.resultsLabel;\r\n if (message) {\r\n M3eLiveAnnouncer.announce(message, \"polite\");\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #autoActivate(): void {\r\n if (this.autoActivate && (!this._listKeyManager.activeItem || !this._listKeyManager.activeItem.selected)) {\r\n const option = this.#options.find((x) => !x.disabled && x.hidden === false);\r\n if (option) {\r\n this._listKeyManager.setActiveItem(option);\r\n if (this.#menu) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #deactivateOption(option: M3eOptionElement): void {\r\n option.focusRing?.hide();\r\n option.stateLayer?.hide(\"focused\");\r\n if (option === this._listKeyManager.activeItem) {\r\n this._listKeyManager.updateActiveItem(null);\r\n this.#input?.removeAttribute(\"aria-activedescendant\");\r\n }\r\n }\r\n}\r\n\r\ninterface M3eAutocompleteElementEventMap extends HTMLElementEventMap {\r\n toggle: ToggleEvent;\r\n query: CustomEvent<AutocompleteQueryEventDetail>;\r\n}\r\n\r\nexport interface M3eAutocompleteElement {\r\n addEventListener<K extends keyof M3eAutocompleteElementEventMap>(\r\n type: K,\r\n listener: (this: M3eAutocompleteElement, ev: M3eAutocompleteElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eAutocompleteElementEventMap>(\r\n type: K,\r\n listener: (this: M3eAutocompleteElement, ev: M3eAutocompleteElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-autocomplete\": M3eAutocompleteElement;\r\n }\r\n}\r\n"],"names":["M3eAutocompleteElement","M3eAutocompleteElement_1","EventAttribute","HtmlFor","LitElement","constructor","super","_M3eAutocompleteElement_id","set","this","__nextId","_M3eAutocompleteElement_menuId","__classPrivateFieldGet","_options","Array","_M3eAutocompleteElement_clone","_M3eAutocompleteElement_ignoreFocusVisible","_M3eAutocompleteElement_menu","_M3eAutocompleteElement_ignoreHideMenuOnBlur","_M3eAutocompleteElement_inputChanged","_M3eAutocompleteElement_hasFocus","_M3eAutocompleteElement_mutationAbortController","_M3eAutocompleteElement_clickHandler","_M3eAutocompleteElement_instances","_M3eAutocompleteElement_handleClick","call","_M3eAutocompleteElement_formFieldPointerDownHandler","_M3eAutocompleteElement_handleFormFieldPointerDown","_M3eAutocompleteElement_focusHandler","_M3eAutocompleteElement_handleFocus","_M3eAutocompleteElement_blurHandler","_M3eAutocompleteElement_handleBlur","_M3eAutocompleteElement_keyDownHandler","e","_M3eAutocompleteElement_inputHandler","_M3eAutocompleteElement_changeHandler","_M3eAutocompleteElement_handleChange","_M3eAutocompleteElement_menuToggleHandler","_M3eAutocompleteElement_menuPointerDownHandler","_listKeyManager","ListKeyManager","withWrap","withHomeAndEnd","withPageUpAndDown","withVerticalOrientation","withSkipPredicate","item","disabled","hidden","onActiveItemChange","activeItem","_M3eAutocompleteElement_activateOption","hideSelectionIndicator","required","autoActivate","caseSensitive","filter","loading","hideNoData","hideLoading","loadingLabel","noDataLabel","resultsLabel","count","panelClass","MutationController","config","childList","subtree","callback","_M3eAutocompleteElement_handleMutation","options","selected","find","x","value","attach","control","HTMLInputElement","autocomplete","role","ariaAutoComplete","ariaExpanded","addEventListener","_M3eAutocompleteElement_formField_get","detach","removeEventListener","clear","restoreFocus","_M3eAutocompleteElement_input_get","_M3eAutocompleteElement_clearOptions","dispatchEvent","Event","bubbles","_M3eAutocompleteElement_filterOptions","focus","_M3eAutocompleteElement_hideMenu","connectedCallback","update","changedProperties","has","setCustomState","M3eLiveAnnouncer","announce","_M3eAutocompleteElement_shouldShowMenu_get","_M3eAutocompleteElement_showMenu","deleteCustomState","render","html","items","querySelector","_M3eAutocompleteElement_options_get","some","length","closest","async","abort","mutationAbortController","AbortController","__classPrivateFieldSet","querySelectorAll","option","signal","aborted","isUpdatePending","updateComplete","cloneNode","added","setItems","forEach","id","indexOf","_M3eAutocompleteElement_projectClone","_M3eAutocompleteElement_updateMenuState","readOnly","CustomEvent","detail","term","composed","defaultPrevented","notifyControlStateChange","label","key","preventDefault","_M3eAutocompleteElement_selectOption","prefersReducedMotion","setTimeout","altKey","onKeyDown","button","stopImmediatePropagation","composedPath","HTMLElement","tagName","setActiveItem","newState","scrollIntoViewIfNeeded","_M3eAutocompleteElement_autoActivate","ToggleEvent","oldState","_M3eAutocompleteElement_destroyMenu","replaceChildren","childNodes","remove","undefined","removeAttribute","requestUpdate","slot","parentElement","document","createElement","klass","split","map","d","trim","Boolean","classList","add","style","overflowX","scrollStrategy","fitAnchorWidth","insertAdjacentElement","setAttribute","input","show","menuAnchor","children","_M3eAutocompleteElement_hasNoDataSlot_get","noDataSpan","textContent","push","_M3eAutocompleteElement_hasLoadingSlot_get","loadingSpan","menu","hide","forceFocusVisible","block","behavior","focusVisible","matches","forcedColorsActive","focusRing","stateLayer","clone","_M3eAutocompleteElement_updateSelectionState","_M3eAutocompleteElement_filterOption","exactTerm","toLowerCase","highlightMode","startsWith","endsWith","includes","disableHighlight","oldCount","shouldAnnounce","toLocaleLowerCase","last","newCount","first","i","_M3eAutocompleteElement_deactivateOption","M3eOptGroupElement","addCustomState","groups","group","every","_M3eAutocompleteElement_announceResults","message","Function","updateActiveItem","styles","css","__decorate","property","attribute","type","prototype","reflect","converter","fromAttribute","customElement"],"mappings":"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"}
|
package/dist/calendar.js
CHANGED
|
@@ -132,7 +132,7 @@ class CalendarViewElementBase extends LitElement {
|
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
/** The styles of the element. */
|
|
135
|
-
CalendarViewElementBase.styles = css`:host { display: inline-block; user-select: none; vertical-align: top; } .visually-hidden { position: absolute; appearance: none; visibility: hidden; border: none; outline: none; overflow: hidden; left: 0; height: 1px; width: 1px; margin: -1px; padding: 0; white-space: nowrap; } table { border-collapse: collapse; border-spacing: 0; width: calc(3rem * 7); } td, th { font: inherit; text-align: center; padding: unset; } td { box-sizing: border-box; height: 3rem; padding: 0.25rem; position: relative; } .item, .item > span { position: relative; } .item { display: flex; align-items: center; justify-content: center; border-radius: inherit; outline: none; width: 100%; height: 100%; border-radius: ${DesignToken.shape.corner.full}; } .item:not([aria-disabled]) { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } td:not(:has(.item[aria-disabled])).selected { color: var(--m3e-calendar-item-selected-color, ${DesignToken.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-hover-color: var(--m3e-calendar-item-selected-hover-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-focus-color: var(--m3e-calendar-item-selected-focus-color, ${DesignToken.color.onPrimary}); } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { outline-style: solid; outline-offset: -1px; outline-width: var(--m3e-calendar-item-current-outline-thickness, 1px); outline-color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.color.primary}); } td:has(.item[aria-disabled]) { color: color-mix( in srgb, var(--m3e-calendar-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-calendar-item-disabled-color-opacity, 38%), transparent ); } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).selected { forced-color-adjust: none; color: ButtonFace; } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: ButtonText; } td:has(.item[aria-disabled]) { color: GrayText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: ButtonText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { border-color: ButtonText; } }`;
|
|
135
|
+
CalendarViewElementBase.styles = css`:host { display: inline-block; user-select: none; vertical-align: top; } .visually-hidden { position: absolute; appearance: none; visibility: hidden; border: none; outline: none; overflow: hidden; left: 0; height: 1px; width: 1px; margin: -1px; padding: 0; white-space: nowrap; } table { border-collapse: collapse; border-spacing: 0; width: calc(3rem * 7); } td, th { font: inherit; text-align: center; padding: unset; } td { box-sizing: border-box; height: 3rem; padding: 0.25rem; position: relative; color: var(--m3e-calendar-item-color, ${DesignToken.color.onSurface}); } .item, .item > span { position: relative; } .item { display: flex; align-items: center; justify-content: center; border-radius: inherit; outline: none; width: 100%; height: 100%; border-radius: ${DesignToken.shape.corner.full}; } .item:not([aria-disabled]) { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } td:not(:has(.item[aria-disabled])).selected { color: var(--m3e-calendar-item-selected-color, ${DesignToken.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-hover-color: var(--m3e-calendar-item-selected-hover-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-focus-color: var(--m3e-calendar-item-selected-focus-color, ${DesignToken.color.onPrimary}); } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { outline-style: solid; outline-offset: -1px; outline-width: var(--m3e-calendar-item-current-outline-thickness, 1px); outline-color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.color.primary}); } td:has(.item[aria-disabled]) { color: color-mix( in srgb, var(--m3e-calendar-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-calendar-item-disabled-color-opacity, 38%), transparent ); } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).selected { forced-color-adjust: none; color: ButtonFace; } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: ButtonText; } td:has(.item[aria-disabled]) { color: GrayText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: ButtonText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { border-color: ButtonText; } }`;
|
|
136
136
|
__decorate([query(".active > .item")], CalendarViewElementBase.prototype, "_activeItem", void 0);
|
|
137
137
|
__decorate([property({
|
|
138
138
|
converter: dateConverter
|
|
@@ -355,7 +355,7 @@ _M3eMonthViewElement_clearRangeHighlight = function _M3eMonthViewElement_clearRa
|
|
|
355
355
|
}
|
|
356
356
|
};
|
|
357
357
|
/** The styles of the element. */
|
|
358
|
-
M3eMonthViewElement.styles = [CalendarViewElementBase.styles, css`thead { font-size: var(--m3e-calendar-weekday-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-calendar-weekday-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-calendar-weekday-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-calendar-weekday-tracking, ${DesignToken.typescale.standard.title.small.tracking}); } th { height: 1.5rem; padding-block-start: 1.875rem; padding-block-end: 1rem; } tbody { font-size: var(--m3e-calendar-date-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-date-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-date-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-date-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special { color: var(--m3e-calendar-item-special-color, ${DesignToken.color.onTertiaryContainer}); --m3e-ripple-color: var(--m3e-calendar-item-special-ripple-color, ${DesignToken.color.onTertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-calendar-item-special-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-calendar-item-special-focus-color, ${DesignToken.color.onTertiaryContainer} ); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special .state-layer { background-color: var(--m3e-calendar-item-special-container-color, ${DesignToken.color.tertiaryContainer}); } td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { color: var(--m3e-calendar-item-selected-color, ${DesignToken.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.color.onPrimary}); } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken.color.primary}); } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { content: ""; position: absolute; left: 0; right: 0; top: 0.25rem; bottom: 0.25rem; background-color: var(--m3e-calendar-range-container-color, ${DesignToken.color.primaryContainer}); } td:not(:has(.item[aria-disabled])):not(.selected).range { color: var(--m3e-calendar-range-color, ${DesignToken.color.onPrimaryContainer}); } td:not(:has(.item[aria-disabled])).range-start::before { inset-inline-start: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-end::before { inset-inline-end: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { content: ""; position: absolute; top: 0; left: calc(0px - 0.1875rem); right: calc(0px - 0.1875rem); bottom: 0; border-style: dashed; border-color: ${DesignToken.color.primary}; border-width: 1px; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after { margin-inline-start: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { margin-inline-end: 0.1875rem; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after { border-inline-style: none; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-start-end-radius: ${DesignToken.shape.corner.full}; border-end-end-radius: ${DesignToken.shape.corner.full}; border-inline-start-style: none; } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { forced-color-adjust: none; color: HighlightText; } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: Highlight; } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { background-color: Highlight; } td:not(:has(.item[aria-disabled])):not(.selected).range { forced-color-adjust: none; color: HighlightText; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-color: GrayText; } }`];
|
|
358
|
+
M3eMonthViewElement.styles = [CalendarViewElementBase.styles, css`thead { font-size: var(--m3e-calendar-weekday-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-calendar-weekday-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-calendar-weekday-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-calendar-weekday-tracking, ${DesignToken.typescale.standard.title.small.tracking}); color: var(--m3e-calendar-weekday-color, ${DesignToken.color.onSurface}); } th { height: 1.5rem; padding-block-start: 1.875rem; padding-block-end: 1rem; } tbody { font-size: var(--m3e-calendar-date-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var(--m3e-calendar-date-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight}); line-height: var(--m3e-calendar-date-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight}); letter-spacing: var(--m3e-calendar-date-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special { color: var(--m3e-calendar-item-special-color, ${DesignToken.color.onTertiaryContainer}); --m3e-ripple-color: var(--m3e-calendar-item-special-ripple-color, ${DesignToken.color.onTertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-calendar-item-special-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-calendar-item-special-focus-color, ${DesignToken.color.onTertiaryContainer} ); } td:not(:has(.item[aria-disabled])):not(.selected):not(.range-start):not(.range-end).special .state-layer { background-color: var(--m3e-calendar-item-special-container-color, ${DesignToken.color.tertiaryContainer}); } td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { color: var(--m3e-calendar-item-selected-color, ${DesignToken.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.color.onPrimary}); } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken.color.primary}); } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { content: ""; position: absolute; left: 0; right: 0; top: 0.25rem; bottom: 0.25rem; background-color: var(--m3e-calendar-range-container-color, ${DesignToken.color.primaryContainer}); } td:not(:has(.item[aria-disabled])):not(.selected).range { color: var(--m3e-calendar-range-color, ${DesignToken.color.onPrimaryContainer}); } td:not(:has(.item[aria-disabled])).range-start::before { inset-inline-start: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-end::before { inset-inline-end: 50%; width: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { content: ""; position: absolute; top: 0; left: calc(0px - 0.1875rem); right: calc(0px - 0.1875rem); bottom: 0; border-style: dashed; border-color: ${DesignToken.color.primary}; border-width: 1px; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after { margin-inline-start: 50%; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { margin-inline-end: 0.1875rem; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after { border-inline-style: none; } td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-start-end-radius: ${DesignToken.shape.corner.full}; border-end-end-radius: ${DesignToken.shape.corner.full}; border-inline-start-style: none; } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).range-start, td:not(:has(.item[aria-disabled])).range-end { forced-color-adjust: none; color: HighlightText; } td:not(:has(.item[aria-disabled])).range-start .state-layer, td:not(:has(.item[aria-disabled])).range-end .state-layer { background-color: Highlight; } td:not(:has(.item[aria-disabled])).range::before, td:not(:has(.item[aria-disabled])).range-start-range::before, td:not(:has(.item[aria-disabled])).range-end::before { background-color: Highlight; } td:not(:has(.item[aria-disabled])):not(.selected).range { forced-color-adjust: none; color: HighlightText; } td:not(:has(.item[aria-disabled])).range-highlight-start .item::after, td:not(:has(.item[aria-disabled])).range-highlight .item::after, td:not(:has(.item[aria-disabled])).range-highlight-end .item::after { border-color: GrayText; } }`];
|
|
359
359
|
__decorate([property({
|
|
360
360
|
attribute: "range-start",
|
|
361
361
|
converter: dateConverter
|
|
@@ -641,6 +641,7 @@ var _M3eCalendarElement_instances, _M3eCalendarElement_transitionComplete, _M3eC
|
|
|
641
641
|
* @cssprop --m3e-calendar-weekday-font-weight - Font weight of weekday labels in month view.
|
|
642
642
|
* @cssprop --m3e-calendar-weekday-line-height - Line height of weekday labels in month view.
|
|
643
643
|
* @cssprop --m3e-calendar-weekday-tracking - Letter spacing of weekday labels in month view.
|
|
644
|
+
* @cssprop --m3e-calendar-weekday-color - Text color for weekday labels in month view.
|
|
644
645
|
* @cssprop --m3e-calendar-date-font-size - Font size of date cells in month view.
|
|
645
646
|
* @cssprop --m3e-calendar-date-font-weight - Font weight of date cells in month view.
|
|
646
647
|
* @cssprop --m3e-calendar-date-line-height - Line height of date cells in month view.
|
|
@@ -649,6 +650,7 @@ var _M3eCalendarElement_instances, _M3eCalendarElement_transitionComplete, _M3eC
|
|
|
649
650
|
* @cssprop --m3e-calendar-item-font-weight - Font weight of items in year and multi‑year views.
|
|
650
651
|
* @cssprop --m3e-calendar-item-line-height - Line height of items in year and multi‑year views.
|
|
651
652
|
* @cssprop --m3e-calendar-item-tracking - Letter spacing of items in year and multi‑year views.
|
|
653
|
+
* @cssprop --m3e-calendar-item-color - Text color for date items.
|
|
652
654
|
* @cssprop --m3e-calendar-item-selected-color - Text color for selected date items.
|
|
653
655
|
* @cssprop --m3e-calendar-item-selected-container-color - Background color for selected date items.
|
|
654
656
|
* @cssprop --m3e-calendar-item-selected-ripple-color - Ripple color used when interacting with selected date items.
|