@cas-smartdesign/token-selector 0.16.0 → 0.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/docs/doc.mjs
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))n(s);new MutationObserver(s=>{for(const o of s)if(o.type==="childList")for(const r of o.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&n(r)}).observe(document,{childList:!0,subtree:!0});function t(s){const o={};return s.integrity&&(o.integrity=s.integrity),s.referrerPolicy&&(o.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?o.credentials="include":s.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function n(s){if(s.ep)return;s.ep=!0;const o=t(s);fetch(s.href,o)}})();const po="modulepreload",fo=function(i,e){return new URL(i,e).href},Wi={},Nt=function(e,t,n){let s=Promise.resolve();if(t&&t.length>0){const o=document.getElementsByTagName("link");s=Promise.all(t.map(r=>{if(r=fo(r,n),r in Wi)return;Wi[r]=!0;const a=r.endsWith(".css"),l=a?'[rel="stylesheet"]':"";if(!!n)for(let h=o.length-1;h>=0;h--){const p=o[h];if(p.href===r&&(!a||p.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${r}"]${l}`))return;const d=document.createElement("link");if(d.rel=a?"stylesheet":po,a||(d.as="script",d.crossOrigin=""),d.href=r,document.head.appendChild(d),a)return new Promise((h,p)=>{d.addEventListener("load",h),d.addEventListener("error",()=>p(new Error(`Unable to preload CSS for ${r}`)))})}))}return s.then(()=>e()).catch(o=>{const r=new Event("vite:preloadError",{cancelable:!0});if(r.payload=o,window.dispatchEvent(r),!r.defaultPrevented)throw o})},go=`<div id="remove-only-example" class="example-root">
|
|
2
2
|
<sd-token-selector selection-mode="remove-only"></sd-token-selector>
|
|
3
|
+
<h4>Maximum two visible lines</h4>
|
|
4
|
+
<sd-token-selector selection-mode="remove-only" style="max-height: 68px; overflow: auto"></sd-token-selector>
|
|
3
5
|
<h4>Disabled</h4>
|
|
4
6
|
<sd-token-selector selection-mode="remove-only" aria-disabled="true"></sd-token-selector>
|
|
5
7
|
</div>
|
|
@@ -10,9 +12,7 @@
|
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
sd-token-selector {
|
|
13
|
-
|
|
14
|
-
padding-bottom: 8px;
|
|
15
|
-
margin: 1px;
|
|
15
|
+
margin: 8px 1px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
sd-token {
|
|
@@ -578,7 +578,7 @@ export function getItems(): ExtendedTokenData[] {
|
|
|
578
578
|
<div class="icon-wrapper" style="${le(e)}" role="img">
|
|
579
579
|
<div class="icon"></div>
|
|
580
580
|
</div>
|
|
581
|
-
`}return z}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&Gs.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Ce.ID="sd-token",Ce.ensureDefined=()=>{customElements.get(Ce.ID)||customElements.define(Ce.ID,Ce)},Ce);Me([y({type:String,attribute:!0,reflect:!0})],Te.prototype,"value",2);Me([y({type:String,attribute:!0,reflect:!0})],Te.prototype,"type",2);Me([y({type:String})],Te.prototype,"icon",2);Me([y({type:String})],Te.prototype,"iconPlaceholder",2);Me([y({type:String})],Te.prototype,"iconBackgroundColor",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-disabled"})],Te.prototype,"disabled",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-current"})],Te.prototype,"current",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-checked"})],Te.prototype,"checked",1);let An=Te;const jl=(i,e)=>{const t=document.createElement(An.ID);return i&&(t.value=i.caption,t.type=i.type,t.icon=i.icon,t.iconPlaceholder=i.iconPlaceholder,t.iconBackgroundColor=i.iconBackgroundColor,t.disabled=i.disabled,t.index=e),t};An.ensureDefined();const Kt="web application/json";class Bl{constructor(e,t,n){navigator.clipboard&&(e.addEventListener("copy",()=>{t()||this.writeToClipboard(e)}),e.addEventListener("cut",()=>{t()||(e.removeSelectionOrActiveToken(),this.writeToClipboard(e))}),e.addEventListener("paste",()=>{e.disabled||this.readFromClipboard(n)}))}writeToClipboard(e){const t=e.querySelectorAll("[slot='items'][aria-checked='true']"),n=[];if(t.length>0)t.forEach(s=>n.push(s.index));else if(e.activeTokenIndex!=-1){const s=e.activeTokenElement;s&&n.push(s.index)}if(n.length>0){const s=JSON.stringify(n.map(r=>e.items[r])),o=new Blob([s],{type:Kt});navigator.clipboard.write([new ClipboardItem({[Kt]:o})])}}async readFromClipboard(e){const t=await navigator.clipboard.read();for(const n of t)if(n.types.includes(Kt)){const o=await(await n.getType(Kt)).text(),r=JSON.parse(o);Array.isArray(r)&&e(r)}}}const zl=":host{display:flex;
|
|
581
|
+
`}return z}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&Gs.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Ce.ID="sd-token",Ce.ensureDefined=()=>{customElements.get(Ce.ID)||customElements.define(Ce.ID,Ce)},Ce);Me([y({type:String,attribute:!0,reflect:!0})],Te.prototype,"value",2);Me([y({type:String,attribute:!0,reflect:!0})],Te.prototype,"type",2);Me([y({type:String})],Te.prototype,"icon",2);Me([y({type:String})],Te.prototype,"iconPlaceholder",2);Me([y({type:String})],Te.prototype,"iconBackgroundColor",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-disabled"})],Te.prototype,"disabled",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-current"})],Te.prototype,"current",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-checked"})],Te.prototype,"checked",1);let An=Te;const jl=(i,e)=>{const t=document.createElement(An.ID);return i&&(t.value=i.caption,t.type=i.type,t.icon=i.icon,t.iconPlaceholder=i.iconPlaceholder,t.iconBackgroundColor=i.iconBackgroundColor,t.disabled=i.disabled,t.index=e),t};An.ensureDefined();const Kt="web application/json";class Bl{constructor(e,t,n){navigator.clipboard&&(e.addEventListener("copy",()=>{t()||this.writeToClipboard(e)}),e.addEventListener("cut",()=>{t()||(e.removeSelectionOrActiveToken(),this.writeToClipboard(e))}),e.addEventListener("paste",()=>{e.disabled||this.readFromClipboard(n)}))}writeToClipboard(e){const t=e.querySelectorAll("[slot='items'][aria-checked='true']"),n=[];if(t.length>0)t.forEach(s=>n.push(s.index));else if(e.activeTokenIndex!=-1){const s=e.activeTokenElement;s&&n.push(s.index)}if(n.length>0){const s=JSON.stringify(n.map(r=>e.items[r])),o=new Blob([s],{type:Kt});navigator.clipboard.write([new ClipboardItem({[Kt]:o})])}}async readFromClipboard(e){const t=await navigator.clipboard.read();for(const n of t)if(n.types.includes(Kt)){const o=await(await n.getType(Kt)).text(),r=JSON.parse(o);Array.isArray(r)&&e(r)}}}const zl=":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}";class Ul{constructor(e,t){this.tokenSelector=e;let n=[];const s=o=>{const r=o.target;e.contains(r)||e.removeTokens(n),n=[]};e.addEventListener("dragstart",o=>{const r=o.target;if(r instanceof An){if(r.disabled){o.preventDefault();return}r.setAttribute("aria-checked","true");const a=e.querySelectorAll("[slot='items'][aria-checked='true']");if(a.length>0){const l=Array.from(a).filter(c=>!c.disabled).map(c=>(n.push(c.index),e.items[c.index]));if(o.dataTransfer.setData("text/plain",JSON.stringify(l)),o.dataTransfer.dropEffect="move",o.dataTransfer.effectAllowed="move",a.length>1){const c=this.createCustomDragImage(r,l.length);o.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",s,{capture:!0,once:!0})}}}),e.addEventListener("dragenter",o=>{e.setAttribute("drop",""),o.preventDefault()}),e.addEventListener("dragover",o=>o.preventDefault()),e.addEventListener("dragleave",o=>{o.target==e&&e.removeAttribute("drop")}),e.addEventListener("drop",o=>{e.removeAttribute("drop");const r=o.dataTransfer.getData("text/plain");if(r)try{const a=JSON.parse(r);Array.isArray(a)&&(t(a),o.preventDefault())}catch{}}),e.addEventListener("dragend",()=>{window.removeEventListener("drop",s),n=[]})}createCustomDragImage(e,t){let n=e.cloneNode(!0);if(n.setAttribute("aria-disabled","true"),this.tokenSelector.tokenType)n.value=t+" "+this.tokenSelector.tokenType;else{const s=document.createElement("div");s.innerText="+"+(t-1),Object.assign(s.style,{position:"absolute",left:"90%",top:"75%"});const o=document.createElement("div");o.appendChild(n),o.appendChild(s),n=o}return Object.assign(n.style,{height:e.offsetHeight,outline:"none",maxWidth:"500px",position:"absolute",display:"block",left:"-99999px",overflow:"visible",margin:"1px"}),n.slot="items",this.tokenSelector.appendChild(n),requestAnimationFrame(()=>n.remove()),n}}var Fl=Object.defineProperty,Hl=Object.getOwnPropertyDescriptor,fe=(i,e,t,n)=>{for(var s=n>1?void 0:n?Hl(e,t):e,o=i.length-1,r;o>=0;o--)(r=i[o])&&(s=(n?r(e,t,s):r(s))||s);return n&&s&&Fl(e,t,s),s};function Wl(i,e){let t;return function(...n){t!=null&&clearTimeout(t),t=window.setTimeout(()=>i(...n),e)}}var Se;const de=(Se=class extends be{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=jl,this._autoSuggestItemGenerator=Ks,this.additionalTokenCommittingKeys=[],this._activeTokenIndex=-1,this.handleInputKeyDown=(e,t)=>{if((e.key==="Enter"||this.additionalTokenCommittingKeys.includes(e.key))&&t.value){e.preventDefault(),e.stopPropagation(),this.commitTokenValue(t.value);return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide();break}default:this.handleKeyDown(e)}},this.handleKeyDown=e=>{switch(e.key){case"ArrowLeft":{this.hasInputValue||this.updateActiveToken(-1);break}case"ArrowRight":{this.hasInputValue||this.updateActiveToken(1);break}case"Enter":{if(!this.hasInputValue&&this.activeTokenIndex!=-1){const t=this.activeTokenElement;e.getModifierState("Control")?t.checked=!t.checked:(t.checked=!0,this.onTokenClick(t,!1)),document.activeElement!=this&&this.focus()}break}case"Backspace":{this.hasInputValue||(this.activeTokenIndex==-1?this.updateActiveToken(-1):this.removeSelectionOrActiveToken());break}case"Clear":case"Delete":{this.removeSelectionOrActiveToken();break}case"a":{!this.hasInputValue&&e.getModifierState("Control")&&(this.querySelectorAll("[slot='items']").forEach(t=>t.checked=!0),e.preventDefault(),e.stopPropagation());break}}},this.handleWindowPointerDown=e=>{const t=this.inputElement;if(!t||!t.value)return;e.composedPath().some(s=>{if(s instanceof HTMLElement&&(e.composedPath().indexOf(t)>-1||s.getAttribute("popover-for")==="token-autosuggest-popover"))return!0})||this.commitTokenValue(t.value)},this.debouncedShowTokenSuggestPopover=Wl(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return ht(zl)}get tokenGenerator(){return this._tokenGenerator}set tokenGenerator(e){this._tokenGenerator=e,this.render()}get autoSuggestItemGenerator(){return this._autoSuggestItemGenerator}set autoSuggestItemGenerator(e){this._autoSuggestItemGenerator=e,this._tokenSuggestPopover&&(this._tokenSuggestPopover.list.itemGenerator=e)}setAdditionalTokenCommittingKeys(e){this.additionalTokenCommittingKeys=e}openSuggestions(){this.inputElement&&(this.focus(),this.tokenSuggestPopover.show())}focus(){this.inputElement?this.inputElement.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?X`<div class="container" tabindex="0">
|
|
582
582
|
<slot name="items"
|
|
583
583
|
>${this.placeholder?X`<span part="remove-only-placeholder" class="placeholder"
|
|
584
584
|
>${this.placeholder}</span
|
|
@@ -152,7 +152,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var ze=Object.
|
|
|
152
152
|
<div class="icon-wrapper" style="${V(e)}" role="img">
|
|
153
153
|
<div class="icon"></div>
|
|
154
154
|
</div>
|
|
155
|
-
`}return b}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&zt.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Nt.ID="sd-token",Nt.ensureDefined=()=>{customElements.get(Nt.ID)||customElements.define(Nt.ID,Nt)},Nt);bt([p({type:String,attribute:!0,reflect:!0})],ht.prototype,"value",2);bt([p({type:String,attribute:!0,reflect:!0})],ht.prototype,"type",2);bt([p({type:String})],ht.prototype,"icon",2);bt([p({type:String})],ht.prototype,"iconPlaceholder",2);bt([p({type:String})],ht.prototype,"iconBackgroundColor",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-disabled"})],ht.prototype,"disabled",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-current"})],ht.prototype,"current",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-checked"})],ht.prototype,"checked",1);var Ue=ht,Oo=(e,t)=>{let i=document.createElement(Ue.ID);return e&&(i.value=e.caption,i.type=e.type,i.icon=e.icon,i.iconPlaceholder=e.iconPlaceholder,i.iconBackgroundColor=e.iconBackgroundColor,i.disabled=e.disabled,i.index=t),i};Ue.ensureDefined();var Be="web application/json",_i=class{constructor(t,i,o){navigator.clipboard&&(t.addEventListener("copy",()=>{i()||this.writeToClipboard(t)}),t.addEventListener("cut",()=>{i()||(t.removeSelectionOrActiveToken(),this.writeToClipboard(t))}),t.addEventListener("paste",()=>{t.disabled||this.readFromClipboard(o)}))}writeToClipboard(t){let i=t.querySelectorAll("[slot='items'][aria-checked='true']"),o=[];if(i.length>0)i.forEach(r=>o.push(r.index));else if(t.activeTokenIndex!=-1){let r=t.activeTokenElement;r&&o.push(r.index)}if(o.length>0){let r=JSON.stringify(o.map(n=>t.items[n])),s=new Blob([r],{type:Be});navigator.clipboard.write([new ClipboardItem({[Be]:s})])}}async readFromClipboard(t){let i=await navigator.clipboard.read();for(let o of i)if(o.types.includes(Be)){let r=await(await o.getType(Be)).text(),s=JSON.parse(r);Array.isArray(s)&&t(s)}}},es=":host{display:flex;
|
|
155
|
+
`}return b}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&zt.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Nt.ID="sd-token",Nt.ensureDefined=()=>{customElements.get(Nt.ID)||customElements.define(Nt.ID,Nt)},Nt);bt([p({type:String,attribute:!0,reflect:!0})],ht.prototype,"value",2);bt([p({type:String,attribute:!0,reflect:!0})],ht.prototype,"type",2);bt([p({type:String})],ht.prototype,"icon",2);bt([p({type:String})],ht.prototype,"iconPlaceholder",2);bt([p({type:String})],ht.prototype,"iconBackgroundColor",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-disabled"})],ht.prototype,"disabled",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-current"})],ht.prototype,"current",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-checked"})],ht.prototype,"checked",1);var Ue=ht,Oo=(e,t)=>{let i=document.createElement(Ue.ID);return e&&(i.value=e.caption,i.type=e.type,i.icon=e.icon,i.iconPlaceholder=e.iconPlaceholder,i.iconBackgroundColor=e.iconBackgroundColor,i.disabled=e.disabled,i.index=t),i};Ue.ensureDefined();var Be="web application/json",_i=class{constructor(t,i,o){navigator.clipboard&&(t.addEventListener("copy",()=>{i()||this.writeToClipboard(t)}),t.addEventListener("cut",()=>{i()||(t.removeSelectionOrActiveToken(),this.writeToClipboard(t))}),t.addEventListener("paste",()=>{t.disabled||this.readFromClipboard(o)}))}writeToClipboard(t){let i=t.querySelectorAll("[slot='items'][aria-checked='true']"),o=[];if(i.length>0)i.forEach(r=>o.push(r.index));else if(t.activeTokenIndex!=-1){let r=t.activeTokenElement;r&&o.push(r.index)}if(o.length>0){let r=JSON.stringify(o.map(n=>t.items[n])),s=new Blob([r],{type:Be});navigator.clipboard.write([new ClipboardItem({[Be]:s})])}}async readFromClipboard(t){let i=await navigator.clipboard.read();for(let o of i)if(o.types.includes(Be)){let r=await(await o.getType(Be)).text(),s=JSON.parse(r);Array.isArray(s)&&t(s)}}},es=":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}",$i=class{constructor(t,i){this.tokenSelector=t;let o=[],r=s=>{let n=s.target;t.contains(n)||t.removeTokens(o),o=[]};t.addEventListener("dragstart",s=>{let n=s.target;if(n instanceof Ue){if(n.disabled){s.preventDefault();return}n.setAttribute("aria-checked","true");let a=t.querySelectorAll("[slot='items'][aria-checked='true']");if(a.length>0){let l=Array.from(a).filter(c=>!c.disabled).map(c=>(o.push(c.index),t.items[c.index]));if(s.dataTransfer.setData("text/plain",JSON.stringify(l)),s.dataTransfer.dropEffect="move",s.dataTransfer.effectAllowed="move",a.length>1){let c=this.createCustomDragImage(n,l.length);s.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",r,{capture:!0,once:!0})}}}),t.addEventListener("dragenter",s=>{t.setAttribute("drop",""),s.preventDefault()}),t.addEventListener("dragover",s=>s.preventDefault()),t.addEventListener("dragleave",s=>{s.target==t&&t.removeAttribute("drop")}),t.addEventListener("drop",s=>{t.removeAttribute("drop");let n=s.dataTransfer.getData("text/plain");if(n)try{let a=JSON.parse(n);Array.isArray(a)&&(i(a),s.preventDefault())}catch{}}),t.addEventListener("dragend",()=>{window.removeEventListener("drop",r),o=[]})}createCustomDragImage(t,i){let o=t.cloneNode(!0);if(o.setAttribute("aria-disabled","true"),this.tokenSelector.tokenType)o.value=i+" "+this.tokenSelector.tokenType;else{let r=document.createElement("div");r.innerText="+"+(i-1),Object.assign(r.style,{position:"absolute",left:"90%",top:"75%"});let s=document.createElement("div");s.appendChild(o),s.appendChild(r),o=s}return Object.assign(o.style,{height:t.offsetHeight,outline:"none",maxWidth:"500px",position:"absolute",display:"block",left:"-99999px",overflow:"visible",margin:"1px"}),o.slot="items",this.tokenSelector.appendChild(o),requestAnimationFrame(()=>o.remove()),o}},is=Object.defineProperty,os=Object.getOwnPropertyDescriptor,Q=(e,t,i,o)=>{for(var r=o>1?void 0:o?os(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=(o?n(t,i,r):n(r))||r);return o&&r&&is(t,i,r),r};function rs(e,t){let i;return function(...o){i!=null&&clearTimeout(i),i=window.setTimeout(()=>e(...o),t)}}var Do=(e=>(e.RemoveOnly="remove-only",e.Multi="multi",e))(Do||{}),gt,X=(gt=class extends U{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=Oo,this._autoSuggestItemGenerator=Te,this.additionalTokenCommittingKeys=[],this._activeTokenIndex=-1,this.handleInputKeyDown=(e,t)=>{if((e.key==="Enter"||this.additionalTokenCommittingKeys.includes(e.key))&&t.value){e.preventDefault(),e.stopPropagation(),this.commitTokenValue(t.value);return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide();break}default:this.handleKeyDown(e)}},this.handleKeyDown=e=>{switch(e.key){case"ArrowLeft":{this.hasInputValue||this.updateActiveToken(-1);break}case"ArrowRight":{this.hasInputValue||this.updateActiveToken(1);break}case"Enter":{if(!this.hasInputValue&&this.activeTokenIndex!=-1){let t=this.activeTokenElement;e.getModifierState("Control")?t.checked=!t.checked:(t.checked=!0,this.onTokenClick(t,!1)),document.activeElement!=this&&this.focus()}break}case"Backspace":{this.hasInputValue||(this.activeTokenIndex==-1?this.updateActiveToken(-1):this.removeSelectionOrActiveToken());break}case"Clear":case"Delete":{this.removeSelectionOrActiveToken();break}case"a":{!this.hasInputValue&&e.getModifierState("Control")&&(this.querySelectorAll("[slot='items']").forEach(t=>t.checked=!0),e.preventDefault(),e.stopPropagation());break}}},this.handleWindowPointerDown=e=>{let t=this.inputElement;!t||!t.value||e.composedPath().some(i=>{if(i instanceof HTMLElement&&(e.composedPath().indexOf(t)>-1||i.getAttribute("popover-for")==="token-autosuggest-popover"))return!0})||this.commitTokenValue(t.value)},this.debouncedShowTokenSuggestPopover=rs(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return it(es)}get tokenGenerator(){return this._tokenGenerator}set tokenGenerator(e){this._tokenGenerator=e,this.render()}get autoSuggestItemGenerator(){return this._autoSuggestItemGenerator}set autoSuggestItemGenerator(e){this._autoSuggestItemGenerator=e,this._tokenSuggestPopover&&(this._tokenSuggestPopover.list.itemGenerator=e)}setAdditionalTokenCommittingKeys(e){this.additionalTokenCommittingKeys=e}openSuggestions(){this.inputElement&&(this.focus(),this.tokenSuggestPopover.show())}focus(){this.inputElement?this.inputElement.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?S`<div class="container" tabindex="0">
|
|
156
156
|
<slot name="items"
|
|
157
157
|
>${this.placeholder?S`<span part="remove-only-placeholder" class="placeholder"
|
|
158
158
|
>${this.placeholder}</span
|