From 4b9b596f6cf76df22ca14e1b571f9c05f23ad319 Mon Sep 17 00:00:00 2001 From: klovaaxel Date: Mon, 15 Apr 2024 21:47:49 +0200 Subject: [PATCH] Formats, builds and bumps version 1.1.2 --- docs/assets/index-DTlGXhe8.js | 5 ----- docs/assets/index-oXCdMaLN.js | 5 +++++ docs/index.html | 2 +- src/combobox-framework.ts | 32 ++++++++++++++++++++++++-------- 4 files changed, 30 insertions(+), 14 deletions(-) delete mode 100644 docs/assets/index-DTlGXhe8.js create mode 100644 docs/assets/index-oXCdMaLN.js diff --git a/docs/assets/index-DTlGXhe8.js b/docs/assets/index-DTlGXhe8.js deleted file mode 100644 index c84b627..0000000 --- a/docs/assets/index-DTlGXhe8.js +++ /dev/null @@ -1,5 +0,0 @@ -var Et=Object.defineProperty;var bt=(s,t,e)=>t in s?Et(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var I=(s,t,e)=>(bt(s,typeof t!="symbol"?t+"":t,e),e);(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))r(i);new MutationObserver(i=>{for(const n of i)if(n.type==="childList")for(const o of n.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&r(o)}).observe(document,{childList:!0,subtree:!0});function e(i){const n={};return i.integrity&&(n.integrity=i.integrity),i.referrerPolicy&&(n.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?n.credentials="include":i.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function r(i){if(i.ep)return;i.ep=!0;const n=e(i);fetch(i.href,n)}})();function v(s){return Array.isArray?Array.isArray(s):lt(s)==="[object Array]"}const Lt=1/0;function At(s){if(typeof s=="string")return s;let t=s+"";return t=="0"&&1/s==-Lt?"-0":t}function It(s){return s==null?"":At(s)}function M(s){return typeof s=="string"}function ht(s){return typeof s=="number"}function Mt(s){return s===!0||s===!1||xt(s)&<(s)=="[object Boolean]"}function at(s){return typeof s=="object"}function xt(s){return at(s)&&s!==null}function m(s){return s!=null}function W(s){return!s.trim().length}function lt(s){return s==null?s===void 0?"[object Undefined]":"[object Null]":Object.prototype.toString.call(s)}const vt="Incorrect 'index' type",yt=s=>`Invalid value for key ${s}`,wt=s=>`Pattern length exceeds max of ${s}.`,kt=s=>`Missing ${s} property in key`,St=s=>`Property 'weight' in key '${s}' must be a positive integer`,q=Object.prototype.hasOwnProperty;class Nt{constructor(t){this._keys=[],this._keyMap={};let e=0;t.forEach(r=>{let i=ut(r);this._keys.push(i),this._keyMap[i.id]=i,e+=i.weight}),this._keys.forEach(r=>{r.weight/=e})}get(t){return this._keyMap[t]}keys(){return this._keys}toJSON(){return JSON.stringify(this._keys)}}function ut(s){let t=null,e=null,r=null,i=1,n=null;if(M(s)||v(s))r=s,t=tt(s),e=V(s);else{if(!q.call(s,"name"))throw new Error(kt("name"));const o=s.name;if(r=o,q.call(s,"weight")&&(i=s.weight,i<=0))throw new Error(St(o));t=tt(o),e=V(o),n=s.getFn}return{path:t,id:e,weight:i,src:r,getFn:n}}function tt(s){return v(s)?s:s.split(".")}function V(s){return v(s)?s.join("."):s}function Ot(s,t){let e=[],r=!1;const i=(n,o,c)=>{if(m(n))if(!o[c])e.push(n);else{let h=o[c];const a=n[h];if(!m(a))return;if(c===o.length-1&&(M(a)||ht(a)||Mt(a)))e.push(It(a));else if(v(a)){r=!0;for(let l=0,f=a.length;ls.score===t.score?s.idx{this._keysMap[e.id]=r})}create(){this.isCreated||!this.docs.length||(this.isCreated=!0,M(this.docs[0])?this.docs.forEach((t,e)=>{this._addString(t,e)}):this.docs.forEach((t,e)=>{this._addObject(t,e)}),this.norm.clear())}add(t){const e=this.size();M(t)?this._addString(t,e):this._addObject(t,e)}removeAt(t){this.records.splice(t,1);for(let e=t,r=this.size();e{let o=i.getFn?i.getFn(t):this.getFn(t,i.path);if(m(o)){if(v(o)){let c=[];const h=[{nestedArrIndex:-1,value:o}];for(;h.length;){const{nestedArrIndex:a,value:l}=h.pop();if(m(l))if(M(l)&&!W(l)){let f={v:l,i:a,n:this.norm.get(l)};c.push(f)}else v(l)&&l.forEach((f,d)=>{h.push({nestedArrIndex:d,value:f})})}r.$[n]=c}else if(M(o)&&!W(o)){let c={v:o,n:this.norm.get(o)};r.$[n]=c}}}),this.records.push(r)}toJSON(){return{keys:this.keys,records:this.records}}}function ft(s,t,{getFn:e=u.getFn,fieldNormWeight:r=u.fieldNormWeight}={}){const i=new X({getFn:e,fieldNormWeight:r});return i.setKeys(s.map(ut)),i.setSources(t),i.create(),i}function Dt(s,{getFn:t=u.getFn,fieldNormWeight:e=u.fieldNormWeight}={}){const{keys:r,records:i}=s,n=new X({getFn:t,fieldNormWeight:e});return n.setKeys(r),n.setIndexRecords(i),n}function D(s,{errors:t=0,currentLocation:e=0,expectedLocation:r=0,distance:i=u.distance,ignoreLocation:n=u.ignoreLocation}={}){const o=t/s.length;if(n)return o;const c=Math.abs(r-e);return i?o+c/i:c?1:o}function jt(s=[],t=u.minMatchCharLength){let e=[],r=-1,i=-1,n=0;for(let o=s.length;n=t&&e.push([r,i]),r=-1)}return s[n-1]&&n-r>=t&&e.push([r,n-1]),e}const R=32;function Bt(s,t,e,{location:r=u.location,distance:i=u.distance,threshold:n=u.threshold,findAllMatches:o=u.findAllMatches,minMatchCharLength:c=u.minMatchCharLength,includeMatches:h=u.includeMatches,ignoreLocation:a=u.ignoreLocation}={}){if(t.length>R)throw new Error(wt(R));const l=t.length,f=s.length,d=Math.max(0,Math.min(r,f));let p=n,g=d;const E=c>1||h,N=E?Array(f):[];let x;for(;(x=s.indexOf(t,g))>-1;){let b=D(t,{currentLocation:x,expectedLocation:d,distance:i,ignoreLocation:a});if(p=Math.min(b,p),g=x+l,E){let y=0;for(;y=Q;L-=1){let F=L-1,Z=e[s.charAt(F)];if(E&&(N[F]=+!!Z),C[L]=(C[L+1]<<1|1)&Z,b&&(C[L]|=($[L+1]|$[L])<<1|1|$[L+1]),C[L]&mt&&(O=D(t,{errors:b,currentLocation:F,expectedLocation:d,distance:i,ignoreLocation:a}),O<=p)){if(p=O,g=F,g<=d)break;Q=Math.max(1,2*d-g)}}if(D(t,{errors:b+1,currentLocation:d,expectedLocation:d,distance:i,ignoreLocation:a})>p)break;$=C}const H={isMatch:g>=0,score:Math.max(.001,O)};if(E){const b=jt(N,c);b.length?h&&(H.indices=b):H.isMatch=!1}return H}function Ht(s){let t={};for(let e=0,r=s.length;e{this.chunks.push({pattern:d,alphabet:Ht(d),startIndex:p})},f=this.pattern.length;if(f>R){let d=0;const p=f%R,g=f-p;for(;d{const{isMatch:x,score:$,indices:O}=Bt(t,g,E,{location:i+N,distance:n,threshold:o,findAllMatches:c,minMatchCharLength:h,includeMatches:r,ignoreLocation:a});x&&(d=!0),f+=$,x&&O&&(l=[...l,...O])});let p={isMatch:d,score:d?f/this.chunks.length:1};return d&&r&&(p.indices=l),p}}class S{constructor(t){this.pattern=t}static isMultiMatch(t){return et(t,this.multiRegex)}static isSingleMatch(t){return et(t,this.singleRegex)}search(){}}function et(s,t){const e=s.match(t);return e?e[1]:null}class Ut extends S{constructor(t){super(t)}static get type(){return"exact"}static get multiRegex(){return/^="(.*)"$/}static get singleRegex(){return/^=(.*)$/}search(t){const e=t===this.pattern;return{isMatch:e,score:e?0:1,indices:[0,this.pattern.length-1]}}}class Wt extends S{constructor(t){super(t)}static get type(){return"inverse-exact"}static get multiRegex(){return/^!"(.*)"$/}static get singleRegex(){return/^!(.*)$/}search(t){const r=t.indexOf(this.pattern)===-1;return{isMatch:r,score:r?0:1,indices:[0,t.length-1]}}}class Vt extends S{constructor(t){super(t)}static get type(){return"prefix-exact"}static get multiRegex(){return/^\^"(.*)"$/}static get singleRegex(){return/^\^(.*)$/}search(t){const e=t.startsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,this.pattern.length-1]}}}class zt extends S{constructor(t){super(t)}static get type(){return"inverse-prefix-exact"}static get multiRegex(){return/^!\^"(.*)"$/}static get singleRegex(){return/^!\^(.*)$/}search(t){const e=!t.startsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,t.length-1]}}}class Kt extends S{constructor(t){super(t)}static get type(){return"suffix-exact"}static get multiRegex(){return/^"(.*)"\$$/}static get singleRegex(){return/^(.*)\$$/}search(t){const e=t.endsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[t.length-this.pattern.length,t.length-1]}}}class Gt extends S{constructor(t){super(t)}static get type(){return"inverse-suffix-exact"}static get multiRegex(){return/^!"(.*)"\$$/}static get singleRegex(){return/^!(.*)\$$/}search(t){const e=!t.endsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,t.length-1]}}}class pt extends S{constructor(t,{location:e=u.location,threshold:r=u.threshold,distance:i=u.distance,includeMatches:n=u.includeMatches,findAllMatches:o=u.findAllMatches,minMatchCharLength:c=u.minMatchCharLength,isCaseSensitive:h=u.isCaseSensitive,ignoreLocation:a=u.ignoreLocation}={}){super(t),this._bitapSearch=new dt(t,{location:e,threshold:r,distance:i,includeMatches:n,findAllMatches:o,minMatchCharLength:c,isCaseSensitive:h,ignoreLocation:a})}static get type(){return"fuzzy"}static get multiRegex(){return/^"(.*)"$/}static get singleRegex(){return/^(.*)$/}search(t){return this._bitapSearch.searchIn(t)}}class gt extends S{constructor(t){super(t)}static get type(){return"include"}static get multiRegex(){return/^'"(.*)"$/}static get singleRegex(){return/^'(.*)$/}search(t){let e=0,r;const i=[],n=this.pattern.length;for(;(r=t.indexOf(this.pattern,e))>-1;)e=r+n,i.push([r,e-1]);const o=!!i.length;return{isMatch:o,score:o?0:1,indices:i}}}const z=[Ut,gt,Vt,zt,Gt,Kt,Wt,pt],st=z.length,Yt=/ +(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,Jt="|";function Xt(s,t={}){return s.split(Jt).map(e=>{let r=e.trim().split(Yt).filter(n=>n&&!!n.trim()),i=[];for(let n=0,o=r.length;n!!(s[B.AND]||s[B.OR]),te=s=>!!s[Y.PATH],ee=s=>!v(s)&&at(s)&&!J(s),it=s=>({[B.AND]:Object.keys(s).map(t=>({[t]:s[t]}))});function _t(s,t,{auto:e=!0}={}){const r=i=>{let n=Object.keys(i);const o=te(i);if(!o&&n.length>1&&!J(i))return r(it(i));if(ee(i)){const h=o?i[Y.PATH]:n[0],a=o?i[Y.PATTERN]:i[h];if(!M(a))throw new Error(yt(h));const l={keyId:V(h),pattern:a};return e&&(l.searcher=G(a,t)),l}let c={children:[],operator:n[0]};return n.forEach(h=>{const a=i[h];v(a)&&a.forEach(l=>{c.children.push(r(l))})}),c};return J(s)||(s=it(s)),r(s)}function se(s,{ignoreFieldNorm:t=u.ignoreFieldNorm}){s.forEach(e=>{let r=1;e.matches.forEach(({key:i,norm:n,score:o})=>{const c=i?i.weight:null;r*=Math.pow(o===0&&c?Number.EPSILON:o,(c||1)*(t?1:n))}),e.score=r})}function ie(s,t){const e=s.matches;t.matches=[],m(e)&&e.forEach(r=>{if(!m(r.indices)||!r.indices.length)return;const{indices:i,value:n}=r;let o={indices:i,value:n};r.key&&(o.key=r.key.src),r.idx>-1&&(o.refIndex=r.idx),t.matches.push(o)})}function re(s,t){t.score=s.score}function ne(s,t,{includeMatches:e=u.includeMatches,includeScore:r=u.includeScore}={}){const i=[];return e&&i.push(ie),r&&i.push(re),s.map(n=>{const{idx:o}=n,c={item:t[o],refIndex:o};return i.length&&i.forEach(h=>{h(n,c)}),c})}class T{constructor(t,e={},r){this.options={...u,...e},this.options.useExtendedSearch,this._keyStore=new Nt(this.options.keys),this.setCollection(t,r)}setCollection(t,e){if(this._docs=t,e&&!(e instanceof X))throw new Error(vt);this._myIndex=e||ft(this.options.keys,this._docs,{getFn:this.options.getFn,fieldNormWeight:this.options.fieldNormWeight})}add(t){m(t)&&(this._docs.push(t),this._myIndex.add(t))}remove(t=()=>!1){const e=[];for(let r=0,i=this._docs.length;r-1&&(h=h.slice(0,e)),ne(h,this._docs,{includeMatches:r,includeScore:i})}_searchStringList(t){const e=G(t,this.options),{records:r}=this._myIndex,i=[];return r.forEach(({v:n,i:o,n:c})=>{if(!m(n))return;const{isMatch:h,score:a,indices:l}=e.searchIn(n);h&&i.push({item:n,idx:o,matches:[{score:a,value:n,norm:c,indices:l}]})}),i}_searchLogical(t){const e=_t(t,this.options),r=(c,h,a)=>{if(!c.children){const{keyId:f,searcher:d}=c,p=this._findMatches({key:this._keyStore.get(f),value:this._myIndex.getValueForItemAtKeyId(h,f),searcher:d});return p&&p.length?[{idx:a,item:h,matches:p}]:[]}const l=[];for(let f=0,d=c.children.length;f{if(m(c)){let a=r(e,c,h);a.length&&(n[h]||(n[h]={idx:h,item:c,matches:[]},o.push(n[h])),a.forEach(({matches:l})=>{n[h].matches.push(...l)}))}}),o}_searchObjectList(t){const e=G(t,this.options),{keys:r,records:i}=this._myIndex,n=[];return i.forEach(({$:o,i:c})=>{if(!m(o))return;let h=[];r.forEach((a,l)=>{h.push(...this._findMatches({key:a,value:o[l],searcher:e}))}),h.length&&n.push({idx:c,item:o,matches:h})}),n}_findMatches({key:t,value:e,searcher:r}){if(!m(e))return[];let i=[];if(v(e))e.forEach(({v:n,i:o,n:c})=>{if(!m(n))return;const{isMatch:h,score:a,indices:l}=r.searchIn(n);h&&i.push({score:a,key:t,value:n,idx:o,norm:c,indices:l})});else{const{v:n,n:o}=e,{isMatch:c,score:h,indices:a}=r.searchIn(n);c&&i.push({score:h,key:t,value:n,norm:o,indices:a})}return i}}T.version="7.0.0";T.createIndex=ft;T.parseIndex=Dt;T.config=u;T.parseQuery=_t;qt(Zt);function A(){if(!this._list&&(this._list=this.querySelector('[slot="list"] [data-list]'),this._list||(this._list=this.querySelector('[slot="list"]')),!this._list))throw new Error("List element not found")}function k(){if(this._input)return;const s=this.querySelector('[slot="input"]');if(!s)throw new Error("Input element not found");this._input=s}function rt(){this._originalList||(A.call(this),this._originalList=this._list.cloneNode(!0))}function ce(){this._input.id=this._input.id.length!==0?this._input.id:`input-${crypto.randomUUID()}`,this._list.id=this._list.id.length!==0?this._list.id:`list-${crypto.randomUUID()}`,this._input.setAttribute("role","combobox"),this._input.setAttribute("aria-controls",this._list.id),this._input.setAttribute("aria-expanded","false"),this._input.setAttribute("aria-autocomplete","list"),this._input.setAttribute("autocomplete","off"),this._list.setAttribute("role","listbox"),this._list.setAttribute("aria-multiselectable","false"),this._list.setAttribute("anchor",this._input.id),this._list.tabIndex=-1;const s=this._list.children;for(let t=0;t(s.ArrowDown="ArrowDown",s.ArrowUp="ArrowUp",s.ArrowRight="ArrowRight",s.ArrowLeft="ArrowLeft",s.Home="Home",s.End="End",s.Backspace="Backspace",s.Delete="Delete",s.Escape="Escape",s.Enter="Enter",s.Alt="Alt",s))(_||{});function nt(s){this._input||k.call(this),this._list||A.call(this);const t=()=>this._input.getAttribute("aria-expanded")==="true";switch(s.key){case _.ArrowDown:t()?this.focusItem(this._list.children[0]):(this.toggleList(!0),this._isAltModifierPressed||this.focusItem(this._list.children[0])),s.preventDefault();break;case _.ArrowUp:t()&&this.focusItem(this._list.children[this._list.children.length-1]),s.preventDefault();break;case _.Escape:t()?this.toggleList(!1):this._input.value="",this._input.focus();break;case _.Enter:t()&&this.selectItem(this._list.children[0]);break;case _.Alt:this._isAltModifierPressed=!0;break}}function ct(s){this._input||k.call(this),this._list||A.call(this);const t=s.target;switch(s.key){case _.Enter:this.selectItem(t);break;case _.Escape:this.clearInput();break;case _.ArrowDown:{const e=t.nextElementSibling;e?this.focusItem(e):this.focusItem(this._list.children[0]),s.preventDefault();break}case _.ArrowUp:{if(this._isAltModifierPressed){this._input.focus(),this.toggleList(!1),s.preventDefault();break}const e=t.previousElementSibling;e?this.focusItem(e):this.focusItem(this._list.children[this._list.children.length-1]),s.preventDefault();break}case _.ArrowRight:this._input.focus();break;case _.ArrowLeft:this._input.focus();break;case _.Home:this._input.focus();break;case _.End:this._input.focus();break;case _.Backspace:this._input.focus();break;case _.Delete:this._input.focus();break;case _.Alt:this._isAltModifierPressed=!0;break;default:this._input.focus();break}}function j(s){switch(s.key){case"Alt":this._isAltModifierPressed=!1;break}}function ot(){setTimeout(()=>{this.querySelector(":focus")||(this.forceValue(),this.toggleList(!1))},0)}class oe extends HTMLElement{constructor(){super(...arguments);I(this,"_input",null);I(this,"_list",null);I(this,"_originalList",null);I(this,"_isAltModifierPressed",!1);I(this,"_forceValue",!1);I(this,"_lastValue");I(this,"_limit",1/0);I(this,"_fuse",null);I(this,"_fuseOptions",{includeScore:!0,keys:["dataset.display","dataset.value","innerText"]})}static get observedAttributes(){return["data-value","data-fuse-options","data-listbox","data-limit"]}attributeChangedCallback(e,r,i){if(r!==i)switch(e){case"data-value":this.selectItemByValue(i,!1);break;case"data-fuse-options":if(!this._fuse){this._fuseOptions=JSON.parse(i);return}rt.call(this),this._fuseOptions=JSON.parse(i),this._fuse=new T(Array.from(this._originalList.cloneNode(!0).children),this._fuseOptions),this.searchList();break;case"data-listbox":this._forceValue=!!i;break;case"data-limit":this._limit=parseInt(i);break}}connectedCallback(){const e=this.attachShadow({mode:"open"});e.innerHTML=` - - - `,k.call(this),A.call(this),ce.call(this),rt.call(this),this._fuse=new T(Array.from(this._originalList.cloneNode(!0).children),this._fuseOptions),this.searchList(),this.addEventListeners(),this.forceValue()}disconnectedCallback(){this.removeEventListener("focusout",ot.bind(this)),this._input||A.call(this),this._input.removeEventListener("input",this.searchList.bind(this,!0,!0)),this._input.removeEventListener("focus",this.toggleList.bind(this,!0)),this._input.removeEventListener("keydown",nt.bind(this)),this._input.removeEventListener("keyup",j.bind(this)),this.removeEventListenersFromListItems()}addEventListeners(){this.addEventListener("focusout",ot.bind(this)),this._input||k.call(this),this._input.addEventListener("input",this.searchList.bind(this,!0,!0)),this._input.addEventListener("focus",this.toggleList.bind(this,!0)),this._input.addEventListener("keydown",nt.bind(this)),this._input.addEventListener("keyup",j.bind(this)),this.addEventListenersToListItems()}addEventListenersToListItems(){this._list||A.call(this);const e=this._list.children;for(let r=0;rNumber(h.dataset.weight)-Number(c.dataset.weight))),this.addEventListenersToListItems();return}let i=this._fuse.search(this._input.value).slice(0,this._limit);i=i.map(c=>({item:c.item,score:c.score??1,weight:Number(c.item.dataset.weight??1),refIndex:c.refIndex})).sort((c,h)=>c.score*(h.weight/c.weight)-h.score*(c.weight/h.weight)).map(c=>({item:c.item,score:c.score,weight:c.weight,refIndex:c.refIndex}));const n=i.map(c=>c.item);this._list.innerHTML="",this._list.append(...n.map(c=>c.cloneNode(!0)));const o=c=>{var h,a;if(c.nodeType===Node.TEXT_NODE&&((h=c.textContent)==null?void 0:h.trim())!==""&&((a=c.textContent)==null?void 0:a.trim())!==` -`){const l=c.textContent??"",f=document.createElement("template");f.innerHTML=this.highlightText(l,this._input.value),c.replaceWith(f.content)}else for(const l of c.childNodes)o(l)};for(const c of this._list.children)o(c);this.addEventListenersToListItems(),this.toggleList(e)}highlightText(e,r){const i=new RegExp(`[${r}]+`,"gmi");return e.replace(i,"$&")}toggleList(e=this._input.getAttribute("aria-expanded")!=="true"){this._input.setAttribute("aria-expanded",`${e}`),e||this.unfocusAllItems()}focusItem(e){e&&(this.unfocusAllItems(),e.focus(),e.setAttribute("aria-selected","true"))}unfocusAllItems(){this._list||A.call(this);for(const e of this._list.querySelectorAll("[aria-selected]"))e.removeAttribute("aria-selected")}selectItem(e,r=!0){this._input||k.call(this),e.dataset.display?this._input.value=e.dataset.display:e.children.length||Array.from(e.children).every(i=>i.nodeName==="STRONG")?this._input.value=e.innerText:e.dataset.value?this._input.value=e.dataset.value:this._input.value="",e.dataset.value&&(this.dataset.value=e.dataset.value),r&&this._input.focus(),this.toggleList(!1),this.searchList(!1,!1),this.sendChangeEvent()}selectItemByValue(e,r=!0){if(!e)return;this._list||A.call(this);const i=this._list.querySelector(`[data-value="${e}"]`);i&&this.selectItem(i,r)}clearInput(e=!0){this._input||k.call(this),this._input.value="",e&&this._input.focus(),this.toggleList(!1)}forceValue(){var e;if(this._input||k.call(this),this._list||A.call(this),this._forceValue&&((e=this._input)!=null&&e.value)&&!this.dataset.value){const r=this._list.children[0];r?this.selectItem(r,!1):(this.clearInput(!1),this.dataset.value="",this.sendChangeEvent())}}sendChangeEvent(){if(this.dataset.value===this._lastValue)return;const e=new Event("change");this.dispatchEvent(e),this._lastValue=this.dataset.value}}customElements.define("combobox-framework",oe); diff --git a/docs/assets/index-oXCdMaLN.js b/docs/assets/index-oXCdMaLN.js new file mode 100644 index 0000000..3662b7a --- /dev/null +++ b/docs/assets/index-oXCdMaLN.js @@ -0,0 +1,5 @@ +var gt=Object.defineProperty;var _t=(s,t,e)=>t in s?gt(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var M=(s,t,e)=>(_t(s,typeof t!="symbol"?t+"":t,e),e);(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))r(i);new MutationObserver(i=>{for(const n of i)if(n.type==="childList")for(const o of n.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&r(o)}).observe(document,{childList:!0,subtree:!0});function e(i){const n={};return i.integrity&&(n.integrity=i.integrity),i.referrerPolicy&&(n.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?n.credentials="include":i.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function r(i){if(i.ep)return;i.ep=!0;const n=e(i);fetch(i.href,n)}})();function y(s){return Array.isArray?Array.isArray(s):ot(s)==="[object Array]"}const mt=1/0;function bt(s){if(typeof s=="string")return s;let t=s+"";return t=="0"&&1/s==-mt?"-0":t}function Et(s){return s==null?"":bt(s)}function x(s){return typeof s=="string"}function nt(s){return typeof s=="number"}function At(s){return s===!0||s===!1||Mt(s)&&ot(s)=="[object Boolean]"}function ct(s){return typeof s=="object"}function Mt(s){return ct(s)&&s!==null}function m(s){return s!=null}function U(s){return!s.trim().length}function ot(s){return s==null?s===void 0?"[object Undefined]":"[object Null]":Object.prototype.toString.call(s)}const xt="Incorrect 'index' type",Lt=s=>`Invalid value for key ${s}`,It=s=>`Pattern length exceeds max of ${s}.`,yt=s=>`Missing ${s} property in key`,wt=s=>`Property 'weight' in key '${s}' must be a positive integer`,Z=Object.prototype.hasOwnProperty;class vt{constructor(t){this._keys=[],this._keyMap={};let e=0;t.forEach(r=>{let i=at(r);this._keys.push(i),this._keyMap[i.id]=i,e+=i.weight}),this._keys.forEach(r=>{r.weight/=e})}get(t){return this._keyMap[t]}keys(){return this._keys}toJSON(){return JSON.stringify(this._keys)}}function at(s){let t=null,e=null,r=null,i=1,n=null;if(x(s)||y(s))r=s,t=q(s),e=W(s);else{if(!Z.call(s,"name"))throw new Error(yt("name"));const o=s.name;if(r=o,Z.call(s,"weight")&&(i=s.weight,i<=0))throw new Error(wt(o));t=q(o),e=W(o),n=s.getFn}return{path:t,id:e,weight:i,src:r,getFn:n}}function q(s){return y(s)?s:s.split(".")}function W(s){return y(s)?s.join("."):s}function St(s,t){let e=[],r=!1;const i=(n,o,c)=>{if(m(n))if(!o[c])e.push(n);else{let a=o[c];const l=n[a];if(!m(l))return;if(c===o.length-1&&(x(l)||nt(l)||At(l)))e.push(Et(l));else if(y(l)){r=!0;for(let h=0,f=l.length;hs.score===t.score?s.idx{this._keysMap[e.id]=r})}create(){this.isCreated||!this.docs.length||(this.isCreated=!0,x(this.docs[0])?this.docs.forEach((t,e)=>{this._addString(t,e)}):this.docs.forEach((t,e)=>{this._addObject(t,e)}),this.norm.clear())}add(t){const e=this.size();x(t)?this._addString(t,e):this._addObject(t,e)}removeAt(t){this.records.splice(t,1);for(let e=t,r=this.size();e{let o=i.getFn?i.getFn(t):this.getFn(t,i.path);if(m(o)){if(y(o)){let c=[];const a=[{nestedArrIndex:-1,value:o}];for(;a.length;){const{nestedArrIndex:l,value:h}=a.pop();if(m(h))if(x(h)&&!U(h)){let f={v:h,i:l,n:this.norm.get(h)};c.push(f)}else y(h)&&h.forEach((f,d)=>{a.push({nestedArrIndex:d,value:f})})}r.$[n]=c}else if(x(o)&&!U(o)){let c={v:o,n:this.norm.get(o)};r.$[n]=c}}}),this.records.push(r)}toJSON(){return{keys:this.keys,records:this.records}}}function lt(s,t,{getFn:e=u.getFn,fieldNormWeight:r=u.fieldNormWeight}={}){const i=new J({getFn:e,fieldNormWeight:r});return i.setKeys(s.map(at)),i.setSources(t),i.create(),i}function $t(s,{getFn:t=u.getFn,fieldNormWeight:e=u.fieldNormWeight}={}){const{keys:r,records:i}=s,n=new J({getFn:t,fieldNormWeight:e});return n.setKeys(r),n.setIndexRecords(i),n}function D(s,{errors:t=0,currentLocation:e=0,expectedLocation:r=0,distance:i=u.distance,ignoreLocation:n=u.ignoreLocation}={}){const o=t/s.length;if(n)return o;const c=Math.abs(r-e);return i?o+c/i:c?1:o}function Pt(s=[],t=u.minMatchCharLength){let e=[],r=-1,i=-1,n=0;for(let o=s.length;n=t&&e.push([r,i]),r=-1)}return s[n-1]&&n-r>=t&&e.push([r,n-1]),e}const R=32;function Ft(s,t,e,{location:r=u.location,distance:i=u.distance,threshold:n=u.threshold,findAllMatches:o=u.findAllMatches,minMatchCharLength:c=u.minMatchCharLength,includeMatches:a=u.includeMatches,ignoreLocation:l=u.ignoreLocation}={}){if(t.length>R)throw new Error(It(R));const h=t.length,f=s.length,d=Math.max(0,Math.min(r,f));let p=n,g=d;const b=c>1||a,N=b?Array(f):[];let L;for(;(L=s.indexOf(t,g))>-1;){let E=D(t,{currentLocation:L,expectedLocation:d,distance:i,ignoreLocation:l});if(p=Math.min(E,p),g=L+h,b){let w=0;for(;w=X;A-=1){let F=A-1,Q=e[s.charAt(F)];if(b&&(N[F]=+!!Q),$[A]=($[A+1]<<1|1)&Q,E&&($[A]|=(C[A+1]|C[A])<<1|1|C[A+1]),$[A]&pt&&(O=D(t,{errors:E,currentLocation:F,expectedLocation:d,distance:i,ignoreLocation:l}),O<=p)){if(p=O,g=F,g<=d)break;X=Math.max(1,2*d-g)}}if(D(t,{errors:E+1,currentLocation:d,expectedLocation:d,distance:i,ignoreLocation:l})>p)break;C=$}const B={isMatch:g>=0,score:Math.max(.001,O)};if(b){const E=Pt(N,c);E.length?a&&(B.indices=E):B.isMatch=!1}return B}function Dt(s){let t={};for(let e=0,r=s.length;e{this.chunks.push({pattern:d,alphabet:Dt(d),startIndex:p})},f=this.pattern.length;if(f>R){let d=0;const p=f%R,g=f-p;for(;d{const{isMatch:L,score:C,indices:O}=Ft(t,g,b,{location:i+N,distance:n,threshold:o,findAllMatches:c,minMatchCharLength:a,includeMatches:r,ignoreLocation:l});L&&(d=!0),f+=C,L&&O&&(h=[...h,...O])});let p={isMatch:d,score:d?f/this.chunks.length:1};return d&&r&&(p.indices=h),p}}class k{constructor(t){this.pattern=t}static isMultiMatch(t){return tt(t,this.multiRegex)}static isSingleMatch(t){return tt(t,this.singleRegex)}search(){}}function tt(s,t){const e=s.match(t);return e?e[1]:null}class jt extends k{constructor(t){super(t)}static get type(){return"exact"}static get multiRegex(){return/^="(.*)"$/}static get singleRegex(){return/^=(.*)$/}search(t){const e=t===this.pattern;return{isMatch:e,score:e?0:1,indices:[0,this.pattern.length-1]}}}class Bt extends k{constructor(t){super(t)}static get type(){return"inverse-exact"}static get multiRegex(){return/^!"(.*)"$/}static get singleRegex(){return/^!(.*)$/}search(t){const r=t.indexOf(this.pattern)===-1;return{isMatch:r,score:r?0:1,indices:[0,t.length-1]}}}class Ht extends k{constructor(t){super(t)}static get type(){return"prefix-exact"}static get multiRegex(){return/^\^"(.*)"$/}static get singleRegex(){return/^\^(.*)$/}search(t){const e=t.startsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,this.pattern.length-1]}}}class Ut extends k{constructor(t){super(t)}static get type(){return"inverse-prefix-exact"}static get multiRegex(){return/^!\^"(.*)"$/}static get singleRegex(){return/^!\^(.*)$/}search(t){const e=!t.startsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,t.length-1]}}}class Wt extends k{constructor(t){super(t)}static get type(){return"suffix-exact"}static get multiRegex(){return/^"(.*)"\$$/}static get singleRegex(){return/^(.*)\$$/}search(t){const e=t.endsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[t.length-this.pattern.length,t.length-1]}}}class Vt extends k{constructor(t){super(t)}static get type(){return"inverse-suffix-exact"}static get multiRegex(){return/^!"(.*)"\$$/}static get singleRegex(){return/^!(.*)\$$/}search(t){const e=!t.endsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,t.length-1]}}}class ut extends k{constructor(t,{location:e=u.location,threshold:r=u.threshold,distance:i=u.distance,includeMatches:n=u.includeMatches,findAllMatches:o=u.findAllMatches,minMatchCharLength:c=u.minMatchCharLength,isCaseSensitive:a=u.isCaseSensitive,ignoreLocation:l=u.ignoreLocation}={}){super(t),this._bitapSearch=new ht(t,{location:e,threshold:r,distance:i,includeMatches:n,findAllMatches:o,minMatchCharLength:c,isCaseSensitive:a,ignoreLocation:l})}static get type(){return"fuzzy"}static get multiRegex(){return/^"(.*)"$/}static get singleRegex(){return/^(.*)$/}search(t){return this._bitapSearch.searchIn(t)}}class ft extends k{constructor(t){super(t)}static get type(){return"include"}static get multiRegex(){return/^'"(.*)"$/}static get singleRegex(){return/^'(.*)$/}search(t){let e=0,r;const i=[],n=this.pattern.length;for(;(r=t.indexOf(this.pattern,e))>-1;)e=r+n,i.push([r,e-1]);const o=!!i.length;return{isMatch:o,score:o?0:1,indices:i}}}const V=[jt,ft,Ht,Ut,Vt,Wt,Bt,ut],et=V.length,zt=/ +(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,Kt="|";function Gt(s,t={}){return s.split(Kt).map(e=>{let r=e.trim().split(zt).filter(n=>n&&!!n.trim()),i=[];for(let n=0,o=r.length;n!!(s[j.AND]||s[j.OR]),Qt=s=>!!s[G.PATH],Zt=s=>!y(s)&&ct(s)&&!Y(s),st=s=>({[j.AND]:Object.keys(s).map(t=>({[t]:s[t]}))});function dt(s,t,{auto:e=!0}={}){const r=i=>{let n=Object.keys(i);const o=Qt(i);if(!o&&n.length>1&&!Y(i))return r(st(i));if(Zt(i)){const a=o?i[G.PATH]:n[0],l=o?i[G.PATTERN]:i[a];if(!x(l))throw new Error(Lt(a));const h={keyId:W(a),pattern:l};return e&&(h.searcher=K(l,t)),h}let c={children:[],operator:n[0]};return n.forEach(a=>{const l=i[a];y(l)&&l.forEach(h=>{c.children.push(r(h))})}),c};return Y(s)||(s=st(s)),r(s)}function qt(s,{ignoreFieldNorm:t=u.ignoreFieldNorm}){s.forEach(e=>{let r=1;e.matches.forEach(({key:i,norm:n,score:o})=>{const c=i?i.weight:null;r*=Math.pow(o===0&&c?Number.EPSILON:o,(c||1)*(t?1:n))}),e.score=r})}function te(s,t){const e=s.matches;t.matches=[],m(e)&&e.forEach(r=>{if(!m(r.indices)||!r.indices.length)return;const{indices:i,value:n}=r;let o={indices:i,value:n};r.key&&(o.key=r.key.src),r.idx>-1&&(o.refIndex=r.idx),t.matches.push(o)})}function ee(s,t){t.score=s.score}function se(s,t,{includeMatches:e=u.includeMatches,includeScore:r=u.includeScore}={}){const i=[];return e&&i.push(te),r&&i.push(ee),s.map(n=>{const{idx:o}=n,c={item:t[o],refIndex:o};return i.length&&i.forEach(a=>{a(n,c)}),c})}class T{constructor(t,e={},r){this.options={...u,...e},this.options.useExtendedSearch,this._keyStore=new vt(this.options.keys),this.setCollection(t,r)}setCollection(t,e){if(this._docs=t,e&&!(e instanceof J))throw new Error(xt);this._myIndex=e||lt(this.options.keys,this._docs,{getFn:this.options.getFn,fieldNormWeight:this.options.fieldNormWeight})}add(t){m(t)&&(this._docs.push(t),this._myIndex.add(t))}remove(t=()=>!1){const e=[];for(let r=0,i=this._docs.length;r-1&&(a=a.slice(0,e)),se(a,this._docs,{includeMatches:r,includeScore:i})}_searchStringList(t){const e=K(t,this.options),{records:r}=this._myIndex,i=[];return r.forEach(({v:n,i:o,n:c})=>{if(!m(n))return;const{isMatch:a,score:l,indices:h}=e.searchIn(n);a&&i.push({item:n,idx:o,matches:[{score:l,value:n,norm:c,indices:h}]})}),i}_searchLogical(t){const e=dt(t,this.options),r=(c,a,l)=>{if(!c.children){const{keyId:f,searcher:d}=c,p=this._findMatches({key:this._keyStore.get(f),value:this._myIndex.getValueForItemAtKeyId(a,f),searcher:d});return p&&p.length?[{idx:l,item:a,matches:p}]:[]}const h=[];for(let f=0,d=c.children.length;f{if(m(c)){let l=r(e,c,a);l.length&&(n[a]||(n[a]={idx:a,item:c,matches:[]},o.push(n[a])),l.forEach(({matches:h})=>{n[a].matches.push(...h)}))}}),o}_searchObjectList(t){const e=K(t,this.options),{keys:r,records:i}=this._myIndex,n=[];return i.forEach(({$:o,i:c})=>{if(!m(o))return;let a=[];r.forEach((l,h)=>{a.push(...this._findMatches({key:l,value:o[h],searcher:e}))}),a.length&&n.push({idx:c,item:o,matches:a})}),n}_findMatches({key:t,value:e,searcher:r}){if(!m(e))return[];let i=[];if(y(e))e.forEach(({v:n,i:o,n:c})=>{if(!m(n))return;const{isMatch:a,score:l,indices:h}=r.searchIn(n);a&&i.push({score:l,key:t,value:n,idx:o,norm:c,indices:h})});else{const{v:n,n:o}=e,{isMatch:c,score:a,indices:l}=r.searchIn(n);c&&i.push({score:a,key:t,value:n,norm:o,indices:l})}return i}}T.version="7.0.0";T.createIndex=lt;T.parseIndex=$t;T.config=u;T.parseQuery=dt;Xt(Jt);function I(){if(!this._list&&(this._list=this.querySelector('[slot="list"] [data-list]'),this._list||(this._list=this.querySelector('[slot="list"]')),!this._list))throw new Error("List element not found")}function S(){if(this._input)return;const s=this.querySelector('[slot="input"]');if(!s)throw new Error("Input element not found");this._input=s}function it(){this._originalList||(I.call(this),this._originalList=this._list.cloneNode(!0))}function ie(){this._input.id=this._input.id.length!==0?this._input.id:`input-${crypto.randomUUID()}`,this._list.id=this._list.id.length!==0?this._list.id:`list-${crypto.randomUUID()}`,this._input.setAttribute("role","combobox"),this._input.setAttribute("aria-controls",this._list.id),this._input.setAttribute("aria-expanded","false"),this._input.setAttribute("aria-autocomplete","list"),this._input.setAttribute("autocomplete","off"),this._list.setAttribute("role","listbox"),this._list.setAttribute("aria-multiselectable","false"),this._list.setAttribute("anchor",this._input.id),this._list.tabIndex=-1;const s=this._list.children;for(let t=0;t(s.ArrowDown="ArrowDown",s.ArrowUp="ArrowUp",s.ArrowRight="ArrowRight",s.ArrowLeft="ArrowLeft",s.Home="Home",s.End="End",s.Backspace="Backspace",s.Delete="Delete",s.Escape="Escape",s.Enter="Enter",s.Alt="Alt",s))(_||{});function re(s){this._input||S.call(this),this._list||I.call(this);const t=()=>this._input.getAttribute("aria-expanded")==="true";switch(s.key){case _.ArrowDown:t()?this.focusItem(this._list.children[0]):(this.toggleList(!0),this._isAltModifierPressed||this.focusItem(this._list.children[0])),s.preventDefault();break;case _.ArrowUp:t()&&this.focusItem(this._list.children[this._list.children.length-1]),s.preventDefault();break;case _.Escape:t()?this.toggleList(!1):this._input.value="",this._input.focus();break;case _.Enter:t()&&this.selectItem(this._list.children[0]);break;case _.Alt:this._isAltModifierPressed=!0;break}}function ne(s){this._input||S.call(this),this._list||I.call(this);const t=s.target;switch(s.key){case _.Enter:this.selectItem(t);break;case _.Escape:this.clearInput();break;case _.ArrowDown:{const e=t.nextElementSibling;e?this.focusItem(e):this.focusItem(this._list.children[0]),s.preventDefault();break}case _.ArrowUp:{if(this._isAltModifierPressed){this._input.focus(),this.toggleList(!1),s.preventDefault();break}const e=t.previousElementSibling;e?this.focusItem(e):this.focusItem(this._list.children[this._list.children.length-1]),s.preventDefault();break}case _.ArrowRight:this._input.focus();break;case _.ArrowLeft:this._input.focus();break;case _.Home:this._input.focus();break;case _.End:this._input.focus();break;case _.Backspace:this._input.focus();break;case _.Delete:this._input.focus();break;case _.Alt:this._isAltModifierPressed=!0;break;default:this._input.focus();break}}function rt(s){switch(s.key){case"Alt":this._isAltModifierPressed=!1;break}}function ce(){setTimeout(()=>{this.querySelector(":focus")||(this.forceValue(),this.toggleList(!1))},0)}class oe extends HTMLElement{constructor(){super(...arguments);M(this,"_input",null);M(this,"_list",null);M(this,"_originalList",null);M(this,"_isAltModifierPressed",!1);M(this,"_forceValue",!1);M(this,"_lastValue");M(this,"_limit",1/0);M(this,"_fuse",null);M(this,"_fuseOptions",{includeScore:!0,keys:["dataset.display","dataset.value","innerText"]});M(this,"abortController",new AbortController)}static get observedAttributes(){return["data-value","data-fuse-options","data-listbox","data-limit"]}attributeChangedCallback(e,r,i){if(r!==i)switch(e){case"data-value":this.selectItemByValue(i,!1);break;case"data-fuse-options":if(!this._fuse){this._fuseOptions=JSON.parse(i);return}it.call(this),this._fuseOptions=JSON.parse(i),this._fuse=new T(Array.from(this._originalList.cloneNode(!0).children),this._fuseOptions),this.searchList();break;case"data-listbox":this._forceValue=!!i;break;case"data-limit":this._limit=parseInt(i);break}}connectedCallback(){const e=this.attachShadow({mode:"open"});e.innerHTML=` + + + `,S.call(this),I.call(this),ie.call(this),it.call(this),this._fuse=new T(Array.from(this._originalList.cloneNode(!0).children),this._fuseOptions),this.searchList(),this.addEventListeners(),this.forceValue()}disconnectedCallback(){}addEventListeners(){this.addEventListener("focusout",ce.bind(this),{signal:this.abortController.signal}),this._input||S.call(this),this._input.addEventListener("input",this.searchList.bind(this,!0,!0),{signal:this.abortController.signal}),this._input.addEventListener("focus",this.toggleList.bind(this,!0),{signal:this.abortController.signal}),this._input.addEventListener("keydown",re.bind(this),{signal:this.abortController.signal}),this._input.addEventListener("keyup",rt.bind(this),{signal:this.abortController.signal}),this.addEventListenersToListItems()}addEventListenersToListItems(){this._list||I.call(this);const e=this._list.children;for(let r=0;rNumber(a.dataset.weight)-Number(c.dataset.weight))),this.addEventListenersToListItems();return}let i=this._fuse.search(this._input.value).slice(0,this._limit);i=i.map(c=>({item:c.item,score:c.score??1,weight:Number(c.item.dataset.weight??1),refIndex:c.refIndex})).sort((c,a)=>c.score*(a.weight/c.weight)-a.score*(c.weight/a.weight)).map(c=>({item:c.item,score:c.score,weight:c.weight,refIndex:c.refIndex}));const n=i.map(c=>c.item);this._list.innerHTML="",this._list.append(...n.map(c=>c.cloneNode(!0)));const o=c=>{var a,l;if(c.nodeType===Node.TEXT_NODE&&((a=c.textContent)==null?void 0:a.trim())!==""&&((l=c.textContent)==null?void 0:l.trim())!==` +`){const h=c.textContent??"",f=document.createElement("template");f.innerHTML=this.highlightText(h,this._input.value),c.replaceWith(f.content)}else for(const h of c.childNodes)o(h)};for(const c of this._list.children)o(c);this.addEventListenersToListItems(),this.toggleList(e)}highlightText(e,r){const i=new RegExp(`[${r}]+`,"gmi");return e.replace(i,"$&")}toggleList(e=this._input.getAttribute("aria-expanded")!=="true"){this._input.setAttribute("aria-expanded",`${e}`),e||this.unfocusAllItems()}focusItem(e){e&&(this.unfocusAllItems(),e.focus(),e.setAttribute("aria-selected","true"))}unfocusAllItems(){this._list||I.call(this);for(const e of this._list.querySelectorAll("[aria-selected]"))e.removeAttribute("aria-selected")}selectItem(e,r=!0){this._input||S.call(this),e.dataset.display?this._input.value=e.dataset.display:e.children.length||Array.from(e.children).every(i=>i.nodeName==="STRONG")?this._input.value=e.innerText:e.dataset.value?this._input.value=e.dataset.value:this._input.value="",e.dataset.value&&(this.dataset.value=e.dataset.value),r&&this._input.focus(),this.toggleList(!1),this.searchList(!1,!1),this.sendChangeEvent()}selectItemByValue(e,r=!0){if(!e)return;this._list||I.call(this);const i=this._list.querySelector(`[data-value="${e}"]`);i&&this.selectItem(i,r)}clearInput(e=!0){this._input||S.call(this),this._input.value="",e&&this._input.focus(),this.toggleList(!1)}forceValue(){var e;if(this._input||S.call(this),this._list||I.call(this),this._forceValue&&((e=this._input)!=null&&e.value)&&!this.dataset.value){const r=this._list.children[0];r?this.selectItem(r,!1):(this.clearInput(!1),this.dataset.value="",this.sendChangeEvent())}}sendChangeEvent(){if(this.dataset.value===this._lastValue)return;const e=new Event("change");this.dispatchEvent(e),this._lastValue=this.dataset.value}}customElements.define("combobox-framework",oe); diff --git a/docs/index.html b/docs/index.html index 2cea080..4cfecd2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -20,7 +20,7 @@ - + diff --git a/src/combobox-framework.ts b/src/combobox-framework.ts index 2ad3aef..e36a523 100644 --- a/src/combobox-framework.ts +++ b/src/combobox-framework.ts @@ -145,18 +145,28 @@ export default class ComboboxFramework extends HTMLElement { */ private addEventListeners(): void { // #region Add event listeners to the framework element - this.addEventListener("focusout", handleBlur.bind(this), { signal: this.abortController.signal }); + this.addEventListener("focusout", handleBlur.bind(this), { + signal: this.abortController.signal, + }); // #endregion // #region Add event listeners to the input element if (!this._input) fetchInput.call(this); - this._input!.addEventListener("input", this.searchList.bind(this, true, true), { signal: this.abortController.signal }); - this._input!.addEventListener("focus", this.toggleList.bind(this, true), { signal: this.abortController.signal }); + this._input!.addEventListener("input", this.searchList.bind(this, true, true), { + signal: this.abortController.signal, + }); + this._input!.addEventListener("focus", this.toggleList.bind(this, true), { + signal: this.abortController.signal, + }); // #endregion // #region Add event listeners to framework element - this._input!.addEventListener("keydown", handleComboBoxKeyPress.bind(this), { signal: this.abortController.signal }); - this._input!.addEventListener("keyup", handleKeyUp.bind(this), { signal: this.abortController.signal }); + this._input!.addEventListener("keydown", handleComboBoxKeyPress.bind(this), { + signal: this.abortController.signal, + }); + this._input!.addEventListener("keyup", handleKeyUp.bind(this), { + signal: this.abortController.signal, + }); // #endregion // #region Add event listeners to the list element @@ -176,9 +186,15 @@ export default class ComboboxFramework extends HTMLElement { const children = this._list!.children; for (let i = 0; i < children.length; i++) { const child = children[i] as HTMLElement; - child.addEventListener("keydown", handleListKeyPress.bind(this), { signal: this.abortController.signal }); - child.addEventListener("keyup", handleKeyUp.bind(this), { signal: this.abortController.signal }); - child.addEventListener("click", this.selectItem.bind(this, child, true), { signal: this.abortController.signal }); + child.addEventListener("keydown", handleListKeyPress.bind(this), { + signal: this.abortController.signal, + }); + child.addEventListener("keyup", handleKeyUp.bind(this), { + signal: this.abortController.signal, + }); + child.addEventListener("click", this.selectItem.bind(this, child, true), { + signal: this.abortController.signal, + }); } // #endregion }