@cas-smartdesign/token-selector 0.19.0 → 0.20.0

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.
Files changed (7) hide show
  1. package/dist/docs/doc.mjs +13 -13
  2. package/dist/token-selector-with-externals.js +3 -3
  3. package/dist/token-selector-with-externals.js.map +2 -2
  4. package/dist/token-selector.mjs +3 -3
  5. package/dist/token-selector.mjs.map +1 -1
  6. package/package.json +5 -5
  7. package/readme.md +4 -4
package/dist/docs/doc.mjs CHANGED
@@ -28,16 +28,16 @@ sd-token[draggable="true"] {
28
28
  }
29
29
 
30
30
  sd-token[type="aia-tag"] {
31
- --token-background-color: rgba(138, 189, 12, 0.2);
32
- --token-border: 1px solid rgb(138, 189, 12);
31
+ --sd-token-background-color: rgba(138, 189, 12, 0.2);
32
+ --sd-token-border: 1px solid rgb(138, 189, 12);
33
33
  }
34
34
  sd-token[type="user-tag"] {
35
- --token-background-color: rgba(237, 156, 38, 0.2);
36
- --token-border: 1px solid rgb(237, 156, 38);
35
+ --sd-token-background-color: rgba(237, 156, 38, 0.2);
36
+ --sd-token-border: 1px solid rgb(237, 156, 38);
37
37
  }
38
38
  sd-token[type="system-tag"] {
39
- --token-background-color: rgba(0, 138, 178, 0.2);
40
- --token-border: 1px solid rgb(0, 138, 178);
39
+ --sd-token-background-color: rgba(0, 138, 178, 0.2);
40
+ --sd-token-border: 1px solid rgb(0, 138, 178);
41
41
  }
42
42
 
43
43
  sd-token-selector[drop] {
@@ -562,7 +562,7 @@ export function getItems(): ExtendedTokenData[] {
562
562
  <div class="container" style="height: ${this.itemCount*this.itemHeight}px">
563
563
  <slot name="items"></slot>
564
564
  </div>
565
- `}updated(i){if(super.updated(i),this._lastRenderedScrollTop=this._lastKnownScrollTop,this.updateItems(),(this._increaseWidthOnNextRenderIfNeeded||this._reachedMaxWidth)&&this._firstVisibleIndex<this._lastVisibleIndex)if(this.querySelector("[item-index]"))this.adjustWidthIfNeeded();else{const e=new MutationObserver(()=>{this.adjustWidthIfNeeded(),e.disconnect()});e.observe(this)}}adjustWidthIfNeeded(){this._increaseWidthOnNextRenderIfNeeded?(this._increaseWidthOnNextRenderIfNeeded=!1,window.requestAnimationFrame(()=>{const i=Number.parseInt(getComputedStyle(this).maxWidth)-this.offsetWidth;if(i==0)this._reachedMaxWidth=!0,this.enableLineClampOnItemsIfNeeded();else{this._reachedMaxWidth=!1;const e=[...this.querySelectorAll("[item-index]")].map(n=>{if(n instanceof rt){n.enableLineClamp=!1;const s=n.missingWidthForTexts;return s>i&&(n.enableLineClamp=!0),s}}),t=Math.max(...e);t>0&&(this.style.width=`${this.offsetWidth+t}px`)}})):this._reachedMaxWidth&&this.enableLineClampOnItemsIfNeeded()}enableLineClampOnItemsIfNeeded(){this.querySelectorAll("[item-index]").forEach(i=>{i instanceof rt&&(i.enableLineClamp=i.enableLineClamp||i.missingWidthForTexts>0)})}increaseWidthOnNextRenderIfNeeded(){this._increaseWidthOnNextRenderIfNeeded=!0}updateItems(){const i=[...this.querySelectorAll("[item-index]")],e=new Map,t=document.createDocumentFragment();for(const n of this._itemsRenderData){const s=this.renderItem(n);s.parentElement||t.appendChild(s),e.set(n.dataHash,s);const r=i.indexOf(s);r!==-1&&i.splice(r,1)}this.appendChild(t);for(const n of i)n instanceof rt&&(n.enableLineClamp=!1),this.removeChild(n);e.forEach((n,s)=>{this._elementCache.set(s,n)})}renderItem({index:i,top:e,dataHash:t,data:n}){let s;return n?this._elementCache.has(t)?(s=this._elementCache.get(t),this._elementCache.delete(t)):(s=this.itemGenerator(n,i),s.setAttribute("slot","items")):(s=document.createElement("div"),s.setAttribute("placeholder-item",""),s.setAttribute("slot","items")),Object.assign(s.style,{transform:`translateY(${e}px)`,height:`${this.itemHeight}px`}),s.setAttribute("item-index",i.toString()),s.setAttribute("aria-setsize",String(this.finalSizeIsKnown?this.itemCount:-1)),s.setAttribute("aria-posinset",String(i+1)),(!s.id||s.id.startsWith(this.id+"_item_"))&&(s.id=this.id+"_item_"+i),this.itemCount-1==i?s.setAttribute("last",""):s.removeAttribute("last"),this.updateSelectedAttribute(i,s),this.updateFocusedAttribute(i,s),s}updateFocusedAttribute(i,e){this.focusIndex==i&&(this.focusTarget||document.activeElement==this)?(e.setAttribute("focused",""),this.setAttribute("aria-activedescendant",e.id)):e.removeAttribute("focused")}updateSelectedAttribute(i,e){const t=this.selectedIndices.indexOf(i)!==-1;t?e.setAttribute("selected",""):e.removeAttribute("selected"),e.setAttribute("aria-selected",String(t))}updateItemsRenderData(){if(this._itemsRenderData=[],this._visibleItemsNum=Math.min(Math.ceil(this.height/this.itemHeight),this.itemCount),this._visibleItemsNum>0){this._firstVisibleIndex=this.normalizeIndex(Math.floor(this._lastKnownScrollTop/this.itemHeight)),this._lastVisibleIndex=this.normalizeIndex(this._firstVisibleIndex+this._visibleItemsNum);const i=this.normalizeIndex(this._firstVisibleIndex-2),e=this.normalizeIndex(this._lastVisibleIndex+2);this.requestData(i,e);for(let t=i;t<=e;t++){const n=t-i,s=this.items[n];let r;s?r=JSON.stringify(s):r=`placeholder-${n}`,this._itemsRenderData.push({index:t,top:this.itemHeight*t,physicalIndex:n,dataHash:r,data:s})}}else this._firstVisibleIndex=0,this._lastVisibleIndex=0}normalizeIndex(i){return Math.max(0,Math.min(i,this.itemCount-1))}get height(){return this.offsetHeight}requestData(i,e){!Number.isNaN(i)&&!Number.isNaN(e)&&this.dispatchEvent(new CustomEvent("data-request",{detail:{startIndex:i,stopIndex:e}}))}handleSelection(i,e){if(i<0||this.itemCount<=i)return;const t=i%this._visibleItemsNum,n=this.items[t];if(!n||n.disabled)return;let s=!0;if(this.selectionType!=="trigger-only"){const r=this.selectedIndices.indexOf(i);s=r==-1,s?this.selectionType==="single"?this.selectedIndices=[i]:this.selectedIndices.push(i):this.selectedIndices.splice(r,1),this.requestUpdate("selectedIndices")}this.focusIndex=i,this.dispatchSelectionEvent(i,s,e)}dispatchSelectionEvent(i,e,t){this.dispatchEvent(new CustomEvent("selection",{detail:{index:i,selected:e,hasModifier:t}}))}handleClick(i){const e=i.composedPath().find(t=>t.hasAttribute&&t.hasAttribute("item-index"));if(e){const t=parseInt(e.getAttribute("item-index"));if(Number.isInteger(t)){if(i.button==0||i.button==1){const n=i.type=="auxclick"&&i.button==1||i.metaKey||i.ctrlKey;this.handleSelection(t,n)}this.focusIndex=t}}}},Re.ID="sd-virtual-list",Re.ensureDefined=()=>{rt.ensureDefined(),customElements.get(Re.ID)||customElements.define(Re.ID,Re)},Re);Ne([b({type:Number,attribute:"item-height",reflect:!0})],Te.prototype,"itemHeight",2);Ne([b({type:Number})],Te.prototype,"itemCount",2);Ne([b({type:Array,attribute:!1})],Te.prototype,"items",2);Ne([b({type:String,attribute:"selection-type",reflect:!0,noAccessor:!0})],Te.prototype,"selectionType",2);Ne([b({type:String,attribute:!0,reflect:!0})],Te.prototype,"id",2);Ne([b({type:String,reflect:!0})],Te.prototype,"role",2);Ne([b({type:Number,attribute:"focus-index",reflect:!0})],Te.prototype,"focusIndex",1);Ne([b({type:Array,attribute:!1})],Te.prototype,"selectedIndices",1);let ti=Te;ti.ensureDefined();let Rl=class rr{constructor(e,t){this.eventTarget=e,this.keydownHandler=t,this.catchedKeys=["Down","ArrowDown","Up","ArrowUp","Enter"],this.markAsFocusTargetHandler=()=>this.eventTarget.setAttribute("focus-target",""),this.unmarkAsFocusTargetHandler=()=>this.eventTarget.removeAttribute("focus-target"),this.delegateKeyDownEvent=n=>{if(this.catchedKeys.indexOf(n.key)!==-1){const s=n.key.toLocaleLowerCase();let r=0;const o=s.includes("enter");o||(r=s.includes("down")?1:-1),this.keydownHandler(n,r,o),n.preventDefault(),n.stopPropagation(),n.stopImmediatePropagation()}}}static delegateTo(e){return new rr(e,t=>e.dispatchEvent(new KeyboardEvent(t.type,t)))}connect(e){var t,n;if(e!=null){e.addEventListener("keydown",this.delegateKeyDownEvent),e.addEventListener("focus",this.markAsFocusTargetHandler),e.addEventListener("blur",this.unmarkAsFocusTargetHandler);const s=document.activeElement;(e.contains(s)||(n=(t=e.shadowRoot)==null?void 0:t.activeElement)!=null&&n.contains(s))&&this.markAsFocusTargetHandler()}}disconnect(e){e!=null&&(e.removeEventListener("keydown",this.delegateKeyDownEvent),e.removeEventListener("focus",this.markAsFocusTargetHandler),e.removeEventListener("blur",this.unmarkAsFocusTargetHandler),this.unmarkAsFocusTargetHandler())}};class Pl{constructor(e,t,n,s){this.inputElement=e,this.notSelectedTokensProvider=t,this.initializeCallback=s,this.filter=(r,o)=>r?o.filter(a=>a.disabled||a.deactivated?!1:a.caption&&a.caption.toLowerCase().includes(r)):o,ti.ensureDefined(),this._tokenList=new ti,this._tokenList.style.minWidth="250px",this._tokenList.style.maxHeight="49vh",this._tokenList.itemHeight=50,this._tokenList.addEventListener("pointerdown",()=>{this.pointerDown=!0,window.addEventListener("pointerup",()=>{this.pointerDown=!1,this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.isUpdatePending||this._tokenList.requestUpdate()},{once:!0,capture:!0})}),this._tokenList.addEventListener("selection",r=>{const o=r.detail.index,a=this._suggestItems[o];n(a),this.hide()}),this._tokenList.addEventListener("data-request",r=>{this.lastRequestedStartIndex=r.detail.startIndex,this.lastRequestedStopIndex=r.detail.stopIndex,this.pointerDown||this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.items=this._suggestItems.slice(this.lastRequestedStartIndex,this.lastRequestedStopIndex+1)}),new Rl(this._tokenList,(r,o,a)=>{this._tokenList.dispatchEvent(new KeyboardEvent(r.type,r)),!a&&!this.isOpened&&this.show()}).connect(e)}show(){this.inputElement.effectiveDisabled||(this.popover,this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():(this._tokenList.itemCount=this._suggestItems.length,this._tokenList.focusIndex=-1,this._tokenList.style.width=null,requestAnimationFrame(()=>{this.lastRequestedStartIndex!=null&&(this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.items=this._suggestItems.slice(this.lastRequestedStartIndex,this.lastRequestedStopIndex+1))}),this.popover.show()))}refreshItems(){this.isOpened&&(this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():(this._tokenList.itemCount=this._suggestItems.length,this._tokenList.items=[],this._tokenList.style.width=null))}filterItems(e){const t=this.notSelectedTokensProvider();return this.filter(e,t)}hide(){var e;this._suggestItems=[],this._tokenList.itemCount=0,this._tokenList.items=[],(e=this._popover)==null||e.hide()}get list(){return this._tokenList}get popover(){return this._popover||(this._popover=this.createPopover(),this.initializeCallback(this)),this._popover}createPopover(){const e=new hn;return e.setAttribute("trigger-type","manual"),e.setAttribute("placement","bottom-start"),e.setAttribute("modal",""),e.setAttribute("popover-for","token-autosuggest-popover"),e.setAttribute("offset","-2"),e.targetElement=this.inputElement,e.appendChild(this._tokenList),e}get isOpened(){return this._popover&&this._popover.hasAttribute("open")}get focusedSuggestToken(){return this._suggestItems[this._tokenList.focusIndex]}}class ni extends vn{}ni.directiveName="unsafeSVG",ni.resultType=2;const Ml=Vs(ni),Dl=`:host{flex-shrink:0;max-width:100%}:host([aria-checked=true]){position:relative}:host([aria-checked=true]):before{content:"";position:absolute;left:0;top:0;height:12px;width:12px;background:#1467ba url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20fill='none'%3e%3cpath%20stroke='%23FFF'%20stroke-width='2'%20d='M9%204%205%208%203%206'/%3e%3c/svg%3e") no-repeat center center}.container{display:flex;height:28px;background-color:var(--token-background-color, #f3f3f3);border:var(--token-focused-border, var(--token-border));box-sizing:border-box}.container .icon-wrapper{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:100%;overflow:hidden;background-color:var(--token-icon-background-color, transparent)}.container .icon-wrapper .icon{height:100%;width:100%;object-fit:contain;background-size:cover;background-repeat:no-repeat;background-position:center}.container .value{display:inline-block;align-self:center;padding:0 8px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container .delete-button-wrapper{display:flex;align-self:center;height:16px;width:16px;padding-right:8px;opacity:.5}.container .delete-button-wrapper:hover{cursor:pointer;filter:brightness(10%);opacity:1}`,Nl=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
565
+ `}updated(i){if(super.updated(i),this._lastRenderedScrollTop=this._lastKnownScrollTop,this.updateItems(),(this._increaseWidthOnNextRenderIfNeeded||this._reachedMaxWidth)&&this._firstVisibleIndex<this._lastVisibleIndex)if(this.querySelector("[item-index]"))this.adjustWidthIfNeeded();else{const e=new MutationObserver(()=>{this.adjustWidthIfNeeded(),e.disconnect()});e.observe(this)}}adjustWidthIfNeeded(){this._increaseWidthOnNextRenderIfNeeded?(this._increaseWidthOnNextRenderIfNeeded=!1,window.requestAnimationFrame(()=>{const i=Number.parseInt(getComputedStyle(this).maxWidth)-this.offsetWidth;if(i==0)this._reachedMaxWidth=!0,this.enableLineClampOnItemsIfNeeded();else{this._reachedMaxWidth=!1;const e=[...this.querySelectorAll("[item-index]")].map(n=>{if(n instanceof rt){n.enableLineClamp=!1;const s=n.missingWidthForTexts;return s>i&&(n.enableLineClamp=!0),s}}),t=Math.max(...e);t>0&&(this.style.width=`${this.offsetWidth+t}px`)}})):this._reachedMaxWidth&&this.enableLineClampOnItemsIfNeeded()}enableLineClampOnItemsIfNeeded(){this.querySelectorAll("[item-index]").forEach(i=>{i instanceof rt&&(i.enableLineClamp=i.enableLineClamp||i.missingWidthForTexts>0)})}increaseWidthOnNextRenderIfNeeded(){this._increaseWidthOnNextRenderIfNeeded=!0}updateItems(){const i=[...this.querySelectorAll("[item-index]")],e=new Map,t=document.createDocumentFragment();for(const n of this._itemsRenderData){const s=this.renderItem(n);s.parentElement||t.appendChild(s),e.set(n.dataHash,s);const r=i.indexOf(s);r!==-1&&i.splice(r,1)}this.appendChild(t);for(const n of i)n instanceof rt&&(n.enableLineClamp=!1),this.removeChild(n);e.forEach((n,s)=>{this._elementCache.set(s,n)})}renderItem({index:i,top:e,dataHash:t,data:n}){let s;return n?this._elementCache.has(t)?(s=this._elementCache.get(t),this._elementCache.delete(t)):(s=this.itemGenerator(n,i),s.setAttribute("slot","items")):(s=document.createElement("div"),s.setAttribute("placeholder-item",""),s.setAttribute("slot","items")),Object.assign(s.style,{transform:`translateY(${e}px)`,height:`${this.itemHeight}px`}),s.setAttribute("item-index",i.toString()),s.setAttribute("aria-setsize",String(this.finalSizeIsKnown?this.itemCount:-1)),s.setAttribute("aria-posinset",String(i+1)),(!s.id||s.id.startsWith(this.id+"_item_"))&&(s.id=this.id+"_item_"+i),this.itemCount-1==i?s.setAttribute("last",""):s.removeAttribute("last"),this.updateSelectedAttribute(i,s),this.updateFocusedAttribute(i,s),s}updateFocusedAttribute(i,e){this.focusIndex==i&&(this.focusTarget||document.activeElement==this)?(e.setAttribute("focused",""),this.setAttribute("aria-activedescendant",e.id)):e.removeAttribute("focused")}updateSelectedAttribute(i,e){const t=this.selectedIndices.indexOf(i)!==-1;t?e.setAttribute("selected",""):e.removeAttribute("selected"),e.setAttribute("aria-selected",String(t))}updateItemsRenderData(){if(this._itemsRenderData=[],this._visibleItemsNum=Math.min(Math.ceil(this.height/this.itemHeight),this.itemCount),this._visibleItemsNum>0){this._firstVisibleIndex=this.normalizeIndex(Math.floor(this._lastKnownScrollTop/this.itemHeight)),this._lastVisibleIndex=this.normalizeIndex(this._firstVisibleIndex+this._visibleItemsNum);const i=this.normalizeIndex(this._firstVisibleIndex-2),e=this.normalizeIndex(this._lastVisibleIndex+2);this.requestData(i,e);for(let t=i;t<=e;t++){const n=t-i,s=this.items[n];let r;s?r=JSON.stringify(s):r=`placeholder-${n}`,this._itemsRenderData.push({index:t,top:this.itemHeight*t,physicalIndex:n,dataHash:r,data:s})}}else this._firstVisibleIndex=0,this._lastVisibleIndex=0}normalizeIndex(i){return Math.max(0,Math.min(i,this.itemCount-1))}get height(){return this.offsetHeight}requestData(i,e){!Number.isNaN(i)&&!Number.isNaN(e)&&this.dispatchEvent(new CustomEvent("data-request",{detail:{startIndex:i,stopIndex:e}}))}handleSelection(i,e){if(i<0||this.itemCount<=i)return;const t=i%this._visibleItemsNum,n=this.items[t];if(!n||n.disabled)return;let s=!0;if(this.selectionType!=="trigger-only"){const r=this.selectedIndices.indexOf(i);s=r==-1,s?this.selectionType==="single"?this.selectedIndices=[i]:this.selectedIndices.push(i):this.selectedIndices.splice(r,1),this.requestUpdate("selectedIndices")}this.focusIndex=i,this.dispatchSelectionEvent(i,s,e)}dispatchSelectionEvent(i,e,t){this.dispatchEvent(new CustomEvent("selection",{detail:{index:i,selected:e,hasModifier:t}}))}handleClick(i){const e=i.composedPath().find(t=>t.hasAttribute&&t.hasAttribute("item-index"));if(e){const t=parseInt(e.getAttribute("item-index"));if(Number.isInteger(t)){if(i.button==0||i.button==1){const n=i.type=="auxclick"&&i.button==1||i.metaKey||i.ctrlKey;this.handleSelection(t,n)}this.focusIndex=t}}}},Re.ID="sd-virtual-list",Re.ensureDefined=()=>{rt.ensureDefined(),customElements.get(Re.ID)||customElements.define(Re.ID,Re)},Re);Ne([b({type:Number,attribute:"item-height",reflect:!0})],Te.prototype,"itemHeight",2);Ne([b({type:Number})],Te.prototype,"itemCount",2);Ne([b({type:Array,attribute:!1})],Te.prototype,"items",2);Ne([b({type:String,attribute:"selection-type",reflect:!0,noAccessor:!0})],Te.prototype,"selectionType",2);Ne([b({type:String,attribute:!0,reflect:!0})],Te.prototype,"id",2);Ne([b({type:String,reflect:!0})],Te.prototype,"role",2);Ne([b({type:Number,attribute:"focus-index",reflect:!0})],Te.prototype,"focusIndex",1);Ne([b({type:Array,attribute:!1})],Te.prototype,"selectedIndices",1);let ti=Te;ti.ensureDefined();let Rl=class rr{constructor(e,t){this.eventTarget=e,this.keydownHandler=t,this.catchedKeys=["Down","ArrowDown","Up","ArrowUp","Enter"],this.markAsFocusTargetHandler=()=>this.eventTarget.setAttribute("focus-target",""),this.unmarkAsFocusTargetHandler=()=>this.eventTarget.removeAttribute("focus-target"),this.delegateKeyDownEvent=n=>{if(this.catchedKeys.indexOf(n.key)!==-1){const s=n.key.toLocaleLowerCase();let r=0;const o=s.includes("enter");o||(r=s.includes("down")?1:-1),this.keydownHandler(n,r,o),n.preventDefault(),n.stopPropagation(),n.stopImmediatePropagation()}}}static delegateTo(e){return new rr(e,t=>e.dispatchEvent(new KeyboardEvent(t.type,t)))}connect(e){var t,n;if(e!=null){e.addEventListener("keydown",this.delegateKeyDownEvent),e.addEventListener("focus",this.markAsFocusTargetHandler),e.addEventListener("blur",this.unmarkAsFocusTargetHandler);const s=document.activeElement;(e.contains(s)||(n=(t=e.shadowRoot)==null?void 0:t.activeElement)!=null&&n.contains(s))&&this.markAsFocusTargetHandler()}}disconnect(e){e!=null&&(e.removeEventListener("keydown",this.delegateKeyDownEvent),e.removeEventListener("focus",this.markAsFocusTargetHandler),e.removeEventListener("blur",this.unmarkAsFocusTargetHandler),this.unmarkAsFocusTargetHandler())}};class Pl{constructor(e,t,n,s){this.inputElement=e,this.notSelectedTokensProvider=t,this.initializeCallback=s,this.filter=(r,o)=>r?o.filter(a=>a.disabled||a.deactivated?!1:a.caption&&a.caption.toLowerCase().includes(r)):o,ti.ensureDefined(),this._tokenList=new ti,this._tokenList.style.minWidth="250px",this._tokenList.style.maxHeight="49vh",this._tokenList.itemHeight=50,this._tokenList.addEventListener("pointerdown",()=>{this.pointerDown=!0,window.addEventListener("pointerup",()=>{this.pointerDown=!1,this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.isUpdatePending||this._tokenList.requestUpdate()},{once:!0,capture:!0})}),this._tokenList.addEventListener("selection",r=>{const o=r.detail.index,a=this._suggestItems[o];n(a),this.hide()}),this._tokenList.addEventListener("data-request",r=>{this.lastRequestedStartIndex=r.detail.startIndex,this.lastRequestedStopIndex=r.detail.stopIndex,this.pointerDown||this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.items=this._suggestItems.slice(this.lastRequestedStartIndex,this.lastRequestedStopIndex+1)}),new Rl(this._tokenList,(r,o,a)=>{this._tokenList.dispatchEvent(new KeyboardEvent(r.type,r)),!a&&!this.isOpened&&this.show()}).connect(e)}show(){this.inputElement.effectiveDisabled||(this.popover,this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():(this._tokenList.itemCount=this._suggestItems.length,this._tokenList.focusIndex=-1,this._tokenList.style.width=null,requestAnimationFrame(()=>{this.lastRequestedStartIndex!=null&&(this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.items=this._suggestItems.slice(this.lastRequestedStartIndex,this.lastRequestedStopIndex+1))}),this.popover.show()))}refreshItems(){this.isOpened&&(this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():(this._tokenList.itemCount=this._suggestItems.length,this._tokenList.items=[],this._tokenList.style.width=null))}filterItems(e){const t=this.notSelectedTokensProvider();return this.filter(e,t)}hide(){var e;this._suggestItems=[],this._tokenList.itemCount=0,this._tokenList.items=[],(e=this._popover)==null||e.hide()}get list(){return this._tokenList}get popover(){return this._popover||(this._popover=this.createPopover(),this.initializeCallback(this)),this._popover}createPopover(){const e=new hn;return e.setAttribute("trigger-type","manual"),e.setAttribute("placement","bottom-start"),e.setAttribute("modal",""),e.setAttribute("popover-for","token-autosuggest-popover"),e.setAttribute("offset","-2"),e.targetElement=this.inputElement,e.appendChild(this._tokenList),e}get isOpened(){return this._popover&&this._popover.hasAttribute("open")}get focusedSuggestToken(){return this._suggestItems[this._tokenList.focusIndex]}}class ni extends vn{}ni.directiveName="unsafeSVG",ni.resultType=2;const Ml=Vs(ni),Dl=`:host{flex-shrink:0;max-width:100%}:host([aria-checked=true]){position:relative}:host([aria-checked=true]):before{content:"";position:absolute;left:0;top:0;height:12px;width:12px;background:#1467ba url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20fill='none'%3e%3cpath%20stroke='%23FFF'%20stroke-width='2'%20d='M9%204%205%208%203%206'/%3e%3c/svg%3e") no-repeat center center}.container{display:flex;height:28px;background-color:var(--sd-token-background-color, #f3f3f3);border:var(--sd-token-focused-border, var(--sd-token-border));box-sizing:border-box}.container .icon-wrapper{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:100%;overflow:hidden;background-color:var(--sd-token-icon-background-color, transparent)}.container .icon-wrapper .icon{height:100%;width:100%;object-fit:contain;background-size:cover;background-repeat:no-repeat;background-position:center}.container .value{display:inline-block;align-self:center;padding:0 8px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container .delete-button-wrapper{display:flex;align-self:center;height:16px;width:16px;padding-right:8px;opacity:.5}.container .delete-button-wrapper:hover{cursor:pointer;filter:brightness(10%);opacity:1}`,Nl=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
566
566
  <path d="m3.5 12.5 9-9m-9 0 9 9" style="fill:none;stroke:#333;stroke-linecap:square;stroke-width:1.1px"/>\r
567
567
  </svg>`;var jl=Object.defineProperty,Bl=Object.getOwnPropertyDescriptor,je=(i,e,t,n)=>{for(var s=n>1?void 0:n?Bl(e,t):e,r=i.length-1,o;r>=0;r--)(o=i[r])&&(s=(n?o(e,t,s):o(s))||s);return n&&s&&jl(e,t,s),s};const Ci={fromAttribute:i=>i=="true",toAttribute:i=>i};var $e;const Le=($e=class extends ue{constructor(){super(...arguments),this.value="",this.type="",this.icon="",this.iconPlaceholder="",this.iconBackgroundColor="",this._checked=!1}static get styles(){return Ze(Dl)}set checked(e){const t=this._checked;this._checked=!this.disabled&&e,this.requestUpdate("checked",t)}get checked(){return this._checked}firstUpdated(e){super.firstUpdated(e),this.tabIndex=-1,this.setAttribute("role","option"),this.setAttribute("aria-selected","true"),this.addEventListener("click",n=>{n.stopPropagation(),n.getModifierState("Control")?this.checked=!this.checked:(this.checked=!0,this._tokenClickHandler&&this._tokenClickHandler(this.index))});const t=this.shadowRoot.querySelector(".delete-button-wrapper");t&&t.addEventListener("click",n=>{n.stopPropagation(),this._tokenDeleteHandler&&this._tokenDeleteHandler(this.index)})}render(){return Z`
568
568
  <div class="container">
@@ -572,11 +572,11 @@ export function getItems(): ExtendedTokenData[] {
572
572
  <div class="value">${this.value}</div>
573
573
  ${this.disabled?z:Z` <div class="delete-button-wrapper">${Ml(Nl)}</div> `}
574
574
  </div>
575
- `}renderIcon(){if(this.icon||this.iconPlaceholder){const e=this.iconBackgroundColor!=null?`--token-icon-background-color: ${this.iconBackgroundColor}`:void 0;return Z`
575
+ `}renderIcon(){if(this.icon||this.iconPlaceholder){const e=this.iconBackgroundColor!=null?`--sd-token-icon-background-color: ${this.iconBackgroundColor}`:void 0;return Z`
576
576
  <div class="icon-wrapper" style="${le(e)}" role="img">
577
577
  <div part="icon" class="icon"></div>
578
578
  </div>
579
- `}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}},$e.ID="sd-token",$e.ensureDefined=()=>{customElements.get($e.ID)||customElements.define($e.ID,$e)},$e);je([b({type:String,attribute:!0,reflect:!0})],Le.prototype,"value",2);je([b({type:String,attribute:!0,reflect:!0})],Le.prototype,"type",2);je([b({type:String})],Le.prototype,"icon",2);je([b({type:String})],Le.prototype,"iconPlaceholder",2);je([b({type:String})],Le.prototype,"iconBackgroundColor",2);je([b({converter:Ci,reflect:!0,attribute:"aria-disabled"})],Le.prototype,"disabled",2);je([b({converter:Ci,reflect:!0,attribute:"aria-current"})],Le.prototype,"current",2);je([b({converter:Ci,reflect:!0,attribute:"aria-checked"})],Le.prototype,"checked",1);let $n=Le;const zl=(i,e)=>{const t=document.createElement($n.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};$n.ensureDefined();const Xt="web application/json";class Ul{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(o=>e.items[o])),r=new Blob([s],{type:Xt});navigator.clipboard.write([new ClipboardItem({[Xt]:r})])}}async readFromClipboard(e){const t=await navigator.clipboard.read();for(const n of t)if(n.types.includes(Xt)){const r=await(await n.getType(Xt)).text(),o=JSON.parse(r);Array.isArray(o)&&e(o)}}}const Hl=":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){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--token-border: 1px solid transparent;margin:2px}.input:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-within ::slotted(sd-token[aria-current=true]){outline:2px solid #1467ba;--token-focused-border: 1px solid #fff}.container{outline:none;display:flex;flex-wrap:wrap;gap:4px;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 Fl{constructor(e,t){this.tokenSelector=e;const n=new Map,s=r=>{const o=r.target;if(e.removeAttribute("drag-source"),!e.contains(o)){const a=r.addedIndexes;a&&e.removeTokens(a.map(l=>n.get(l)))}n.clear()};e.addEventListener("dragstart",r=>{const o=r.target;if(o instanceof $n){if(o.disabled){r.preventDefault();return}e.setAttribute("drag-source",""),o.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,d)=>(n.set(d,c.index),e.items[c.index]));if(r.dataTransfer.setData("text/sd-token-selector",JSON.stringify(l)),r.dataTransfer.dropEffect="move",r.dataTransfer.effectAllowed="move",a.length>1){const c=this.createCustomDragImage(o,l.length);r.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",s,{once:!0})}}}),e.addEventListener("dragenter",r=>{e.setAttribute("drop",""),r.preventDefault()}),e.addEventListener("dragover",r=>r.preventDefault()),e.addEventListener("dragleave",r=>{r.target==e&&e.removeAttribute("drop")}),e.addEventListener("drop",r=>{e.removeAttribute("drop");const o=r.dataTransfer.getData("text/sd-token-selector");if(o)try{const a=JSON.parse(o);Array.isArray(a)&&(r.addedIndexes=t(a),r.preventDefault())}catch{}}),e.addEventListener("dragend",()=>{window.removeEventListener("drop",s),e.removeAttribute("drag-source"),n.clear()})}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 r=document.createElement("div");r.appendChild(n),r.appendChild(s),n=r}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 Wl=Object.defineProperty,ql=Object.getOwnPropertyDescriptor,ge=(i,e,t,n)=>{for(var s=n>1?void 0:n?ql(e,t):e,r=i.length-1,o;r>=0;r--)(o=i[r])&&(s=(n?o(e,t,s):o(s))||s);return n&&s&&Wl(e,t,s),s};function Vl(i,e){let t;return function(...n){t!=null&&clearTimeout(t),t=window.setTimeout(()=>i(...n),e)}}var Se;const de=(Se=class extends ue{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=zl,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.selectOrAddItems=e=>{const t=[],n=e.map((s,r)=>{const o=s.caption==null?-1:this.findIndex(s);return o!=-1&&!this.items[o].disabled&&!this.selectedIndexes.includes(o)?(t.push(r),o):-1}).filter(s=>s!=-1);return n.length>0&&this.handleTokenSelection(n),t},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=Vl(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return Ze(Hl)}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"?Z`<div class="container" tabindex="0">
579
+ `}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}},$e.ID="sd-token",$e.ensureDefined=()=>{customElements.get($e.ID)||customElements.define($e.ID,$e)},$e);je([b({type:String,attribute:!0,reflect:!0})],Le.prototype,"value",2);je([b({type:String,attribute:!0,reflect:!0})],Le.prototype,"type",2);je([b({type:String})],Le.prototype,"icon",2);je([b({type:String})],Le.prototype,"iconPlaceholder",2);je([b({type:String})],Le.prototype,"iconBackgroundColor",2);je([b({converter:Ci,reflect:!0,attribute:"aria-disabled"})],Le.prototype,"disabled",2);je([b({converter:Ci,reflect:!0,attribute:"aria-current"})],Le.prototype,"current",2);je([b({converter:Ci,reflect:!0,attribute:"aria-checked"})],Le.prototype,"checked",1);let $n=Le;const zl=(i,e)=>{const t=document.createElement($n.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};$n.ensureDefined();const Xt="web application/json";class Ul{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(o=>e.items[o])),r=new Blob([s],{type:Xt});navigator.clipboard.write([new ClipboardItem({[Xt]:r})])}}async readFromClipboard(e){const t=await navigator.clipboard.read();for(const n of t)if(n.types.includes(Xt)){const r=await(await n.getType(Xt)).text(),o=JSON.parse(r);Array.isArray(o)&&e(o)}}}const Hl=":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){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--sd-token-border: 1px solid transparent;margin:2px}.input:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-within ::slotted(sd-token[aria-current=true]){outline:2px solid #1467ba;--sd-token-focused-border: 1px solid #fff}.container{outline:none;display:flex;flex-wrap:wrap;gap:4px;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 Fl{constructor(e,t){this.tokenSelector=e;const n=new Map,s=r=>{const o=r.target;if(e.removeAttribute("drag-source"),!e.contains(o)){const a=r.addedIndexes;a&&e.removeTokens(a.map(l=>n.get(l)))}n.clear()};e.addEventListener("dragstart",r=>{const o=r.target;if(o instanceof $n){if(o.disabled){r.preventDefault();return}e.setAttribute("drag-source",""),o.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,d)=>(n.set(d,c.index),e.items[c.index]));if(r.dataTransfer.setData("text/sd-token-selector",JSON.stringify(l)),r.dataTransfer.dropEffect="move",r.dataTransfer.effectAllowed="move",a.length>1){const c=this.createCustomDragImage(o,l.length);r.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",s,{once:!0})}}}),e.addEventListener("dragenter",r=>{e.setAttribute("drop",""),r.preventDefault()}),e.addEventListener("dragover",r=>r.preventDefault()),e.addEventListener("dragleave",r=>{r.target==e&&e.removeAttribute("drop")}),e.addEventListener("drop",r=>{e.removeAttribute("drop");const o=r.dataTransfer.getData("text/sd-token-selector");if(o)try{const a=JSON.parse(o);Array.isArray(a)&&(r.addedIndexes=t(a),r.preventDefault())}catch{}}),e.addEventListener("dragend",()=>{window.removeEventListener("drop",s),e.removeAttribute("drag-source"),n.clear()})}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 r=document.createElement("div");r.appendChild(n),r.appendChild(s),n=r}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 Wl=Object.defineProperty,ql=Object.getOwnPropertyDescriptor,ge=(i,e,t,n)=>{for(var s=n>1?void 0:n?ql(e,t):e,r=i.length-1,o;r>=0;r--)(o=i[r])&&(s=(n?o(e,t,s):o(s))||s);return n&&s&&Wl(e,t,s),s};function Vl(i,e){let t;return function(...n){t!=null&&clearTimeout(t),t=window.setTimeout(()=>i(...n),e)}}var Se;const de=(Se=class extends ue{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=zl,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.selectOrAddItems=e=>{const t=[],n=e.map((s,r)=>{const o=s.caption==null?-1:this.findIndex(s);return o!=-1&&!this.items[o].disabled&&!this.selectedIndexes.includes(o)?(t.push(r),o):-1}).filter(s=>s!=-1);return n.length>0&&this.handleTokenSelection(n),t},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=Vl(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return Ze(Hl)}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"?Z`<div class="container" tabindex="0">
580
580
  <slot name="items"
581
581
  >${this.placeholder?Z`<span part="remove-only-placeholder" class="placeholder"
582
582
  >${this.placeholder}</span
@@ -802,19 +802,19 @@ https://github.com/highlightjs/highlight.js/issues/2277`),B=u,$=v),k===void 0&&(
802
802
  <p>In addition it allows to inject elements with slots named <code>before-icon</code> &amp; <code>after-icon</code>.</p>
803
803
  <h2 id="css-custom-properties-&amp;-parts">CSS Custom Properties &amp; parts</h2>
804
804
  <ul>
805
- <li><code>--token-background-color</code><ul>
805
+ <li><code>--sd-token-background-color</code><ul>
806
806
  <li>Defines the background color of the token.</li>
807
807
  </ul>
808
808
  </li>
809
- <li><code>--token-border</code><ul>
809
+ <li><code>--sd-token-border</code><ul>
810
810
  <li>Defines the border of the token.</li>
811
811
  </ul>
812
812
  </li>
813
- <li><code>--token-focused-border</code><ul>
813
+ <li><code>--sd-token-focused-border</code><ul>
814
814
  <li>Defines the border of the currently active, focused token.</li>
815
815
  </ul>
816
816
  </li>
817
- <li><code>--token-icon-background-color</code><ul>
817
+ <li><code>--sd-token-icon-background-color</code><ul>
818
818
  <li>Defines the icon background color of the token.</li>
819
819
  </ul>
820
820
  </li>
package/dist/token-selector-with-externals.js CHANGED
@@ -112,7 +112,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var We=Object.
112
112
  <div class="container" style="height: ${this.itemCount*this.itemHeight}px">
113
113
  <slot name="items"></slot>
114
114
  </div>
115
- `}updated(e){if(super.updated(e),this._lastRenderedScrollTop=this._lastKnownScrollTop,this.updateItems(),(this._increaseWidthOnNextRenderIfNeeded||this._reachedMaxWidth)&&this._firstVisibleIndex<this._lastVisibleIndex)if(this.querySelector("[item-index]"))this.adjustWidthIfNeeded();else{let t=new MutationObserver(()=>{this.adjustWidthIfNeeded(),t.disconnect()});t.observe(this)}}adjustWidthIfNeeded(){this._increaseWidthOnNextRenderIfNeeded?(this._increaseWidthOnNextRenderIfNeeded=!1,window.requestAnimationFrame(()=>{let e=Number.parseInt(getComputedStyle(this).maxWidth)-this.offsetWidth;if(e==0)this._reachedMaxWidth=!0,this.enableLineClampOnItemsIfNeeded();else{this._reachedMaxWidth=!1;let t=[...this.querySelectorAll("[item-index]")].map(o=>{if(o instanceof Pt){o.enableLineClamp=!1;let r=o.missingWidthForTexts;return r>e&&(o.enableLineClamp=!0),r}}),i=Math.max(...t);i>0&&(this.style.width=`${this.offsetWidth+i}px`)}})):this._reachedMaxWidth&&this.enableLineClampOnItemsIfNeeded()}enableLineClampOnItemsIfNeeded(){this.querySelectorAll("[item-index]").forEach(e=>{e instanceof Pt&&(e.enableLineClamp=e.enableLineClamp||e.missingWidthForTexts>0)})}increaseWidthOnNextRenderIfNeeded(){this._increaseWidthOnNextRenderIfNeeded=!0}updateItems(){let e=[...this.querySelectorAll("[item-index]")],t=new Map,i=document.createDocumentFragment();for(let o of this._itemsRenderData){let r=this.renderItem(o);r.parentElement||i.appendChild(r),t.set(o.dataHash,r);let s=e.indexOf(r);s!==-1&&e.splice(s,1)}this.appendChild(i);for(let o of e)o instanceof Pt&&(o.enableLineClamp=!1),this.removeChild(o);t.forEach((o,r)=>{this._elementCache.set(r,o)})}renderItem({index:e,top:t,dataHash:i,data:o}){let r;return o?this._elementCache.has(i)?(r=this._elementCache.get(i),this._elementCache.delete(i)):(r=this.itemGenerator(o,e),r.setAttribute("slot","items")):(r=document.createElement("div"),r.setAttribute("placeholder-item",""),r.setAttribute("slot","items")),Object.assign(r.style,{transform:`translateY(${t}px)`,height:`${this.itemHeight}px`}),r.setAttribute("item-index",e.toString()),r.setAttribute("aria-setsize",String(this.finalSizeIsKnown?this.itemCount:-1)),r.setAttribute("aria-posinset",String(e+1)),(!r.id||r.id.startsWith(this.id+"_item_"))&&(r.id=this.id+"_item_"+e),this.itemCount-1==e?r.setAttribute("last",""):r.removeAttribute("last"),this.updateSelectedAttribute(e,r),this.updateFocusedAttribute(e,r),r}updateFocusedAttribute(e,t){this.focusIndex==e&&(this.focusTarget||document.activeElement==this)?(t.setAttribute("focused",""),this.setAttribute("aria-activedescendant",t.id)):t.removeAttribute("focused")}updateSelectedAttribute(e,t){let i=this.selectedIndices.indexOf(e)!==-1;i?t.setAttribute("selected",""):t.removeAttribute("selected"),t.setAttribute("aria-selected",String(i))}updateItemsRenderData(){if(this._itemsRenderData=[],this._visibleItemsNum=Math.min(Math.ceil(this.height/this.itemHeight),this.itemCount),this._visibleItemsNum>0){this._firstVisibleIndex=this.normalizeIndex(Math.floor(this._lastKnownScrollTop/this.itemHeight)),this._lastVisibleIndex=this.normalizeIndex(this._firstVisibleIndex+this._visibleItemsNum);let e=this.normalizeIndex(this._firstVisibleIndex-2),t=this.normalizeIndex(this._lastVisibleIndex+2);this.requestData(e,t);for(let i=e;i<=t;i++){let o=i-e,r=this.items[o],s;r?s=JSON.stringify(r):s=`placeholder-${o}`,this._itemsRenderData.push({index:i,top:this.itemHeight*i,physicalIndex:o,dataHash:s,data:r})}}else this._firstVisibleIndex=0,this._lastVisibleIndex=0}normalizeIndex(e){return Math.max(0,Math.min(e,this.itemCount-1))}get height(){return this.offsetHeight}requestData(e,t){!Number.isNaN(e)&&!Number.isNaN(t)&&this.dispatchEvent(new CustomEvent("data-request",{detail:{startIndex:e,stopIndex:t}}))}handleSelection(e,t){if(e<0||this.itemCount<=e)return;let i=e%this._visibleItemsNum,o=this.items[i];if(!o||o.disabled)return;let r=!0;if(this.selectionType!=="trigger-only"){let s=this.selectedIndices.indexOf(e);r=s==-1,r?this.selectionType==="single"?this.selectedIndices=[e]:this.selectedIndices.push(e):this.selectedIndices.splice(s,1),this.requestUpdate("selectedIndices")}this.focusIndex=e,this.dispatchSelectionEvent(e,r,t)}dispatchSelectionEvent(e,t,i){this.dispatchEvent(new CustomEvent("selection",{detail:{index:e,selected:t,hasModifier:i}}))}handleClick(e){let t=e.composedPath().find(i=>i.hasAttribute&&i.hasAttribute("item-index"));if(t){let i=parseInt(t.getAttribute("item-index"));if(Number.isInteger(i)){if(e.button==0||e.button==1){let o=e.type=="auxclick"&&e.button==1||e.metaKey||e.ctrlKey;this.handleSelection(i,o)}this.focusIndex=i}}}},yt.ID="sd-virtual-list",yt.ensureDefined=()=>{Pt.ensureDefined(),customElements.get(yt.ID)||customElements.define(yt.ID,yt)},yt);xt([h({type:Number,attribute:"item-height",reflect:!0})],ut.prototype,"itemHeight",2);xt([h({type:Number})],ut.prototype,"itemCount",2);xt([h({type:Array,attribute:!1})],ut.prototype,"items",2);xt([h({type:String,attribute:"selection-type",reflect:!0,noAccessor:!0})],ut.prototype,"selectionType",2);xt([h({type:String,attribute:!0,reflect:!0})],ut.prototype,"id",2);xt([h({type:String,reflect:!0})],ut.prototype,"role",2);xt([h({type:Number,attribute:"focus-index",reflect:!0})],ut.prototype,"focusIndex",1);xt([h({type:Array,attribute:!1})],ut.prototype,"selectedIndices",1);var He=ut;He.ensureDefined();var Ue=class e{constructor(t,i){this.eventTarget=t,this.keydownHandler=i,this.catchedKeys=["Down","ArrowDown","Up","ArrowUp","Enter"],this.markAsFocusTargetHandler=()=>this.eventTarget.setAttribute("focus-target",""),this.unmarkAsFocusTargetHandler=()=>this.eventTarget.removeAttribute("focus-target"),this.delegateKeyDownEvent=o=>{if(this.catchedKeys.indexOf(o.key)!==-1){let r=o.key.toLocaleLowerCase(),s=0,n=r.includes("enter");n||(s=r.includes("down")?1:-1),this.keydownHandler(o,s,n),o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation()}}}static delegateTo(t){return new e(t,i=>t.dispatchEvent(new KeyboardEvent(i.type,i)))}connect(t){var i,o;if(t!=null){t.addEventListener("keydown",this.delegateKeyDownEvent),t.addEventListener("focus",this.markAsFocusTargetHandler),t.addEventListener("blur",this.unmarkAsFocusTargetHandler);let r=document.activeElement;(t.contains(r)||(o=(i=t.shadowRoot)==null?void 0:i.activeElement)!=null&&o.contains(r))&&this.markAsFocusTargetHandler()}}disconnect(t){t!=null&&(t.removeEventListener("keydown",this.delegateKeyDownEvent),t.removeEventListener("focus",this.markAsFocusTargetHandler),t.removeEventListener("blur",this.unmarkAsFocusTargetHandler),this.unmarkAsFocusTargetHandler())}};var be=class extends Lt{};be.directiveName="unsafeSVG",be.resultType=2;var Lo=Te(be);var Si=class{constructor(t,i,o,r){this.inputElement=t,this.notSelectedTokensProvider=i,this.initializeCallback=r,this.filter=(s,n)=>s?n.filter(a=>a.disabled||a.deactivated?!1:a.caption&&a.caption.toLowerCase().includes(s)):n,He.ensureDefined(),this._tokenList=new He,this._tokenList.style.minWidth="250px",this._tokenList.style.maxHeight="49vh",this._tokenList.itemHeight=50,this._tokenList.addEventListener("pointerdown",()=>{this.pointerDown=!0,window.addEventListener("pointerup",()=>{this.pointerDown=!1,this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.isUpdatePending||this._tokenList.requestUpdate()},{once:!0,capture:!0})}),this._tokenList.addEventListener("selection",s=>{let n=s.detail.index,a=this._suggestItems[n];o(a),this.hide()}),this._tokenList.addEventListener("data-request",s=>{this.lastRequestedStartIndex=s.detail.startIndex,this.lastRequestedStopIndex=s.detail.stopIndex,this.pointerDown||this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.items=this._suggestItems.slice(this.lastRequestedStartIndex,this.lastRequestedStopIndex+1)}),new Ue(this._tokenList,(s,n,a)=>{this._tokenList.dispatchEvent(new KeyboardEvent(s.type,s)),!a&&!this.isOpened&&this.show()}).connect(t)}show(){this.inputElement.effectiveDisabled||(this.popover,this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():(this._tokenList.itemCount=this._suggestItems.length,this._tokenList.focusIndex=-1,this._tokenList.style.width=null,requestAnimationFrame(()=>{this.lastRequestedStartIndex!=null&&(this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.items=this._suggestItems.slice(this.lastRequestedStartIndex,this.lastRequestedStopIndex+1))}),this.popover.show()))}refreshItems(){this.isOpened&&(this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():(this._tokenList.itemCount=this._suggestItems.length,this._tokenList.items=[],this._tokenList.style.width=null))}filterItems(t){let i=this.notSelectedTokensProvider();return this.filter(t,i)}hide(){var t;this._suggestItems=[],this._tokenList.itemCount=0,this._tokenList.items=[],(t=this._popover)==null||t.hide()}get list(){return this._tokenList}get popover(){return this._popover||(this._popover=this.createPopover(),this.initializeCallback(this)),this._popover}createPopover(){let t=new ge;return t.setAttribute("trigger-type","manual"),t.setAttribute("placement","bottom-start"),t.setAttribute("modal",""),t.setAttribute("popover-for","token-autosuggest-popover"),t.setAttribute("offset","-2"),t.targetElement=this.inputElement,t.appendChild(this._tokenList),t}get isOpened(){return this._popover&&this._popover.hasAttribute("open")}get focusedSuggestToken(){return this._suggestItems[this._tokenList.focusIndex]}},Qr=`:host{flex-shrink:0;max-width:100%}:host([aria-checked=true]){position:relative}:host([aria-checked=true]):before{content:"";position:absolute;left:0;top:0;height:12px;width:12px;background:#1467ba url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20fill='none'%3e%3cpath%20stroke='%23FFF'%20stroke-width='2'%20d='M9%204%205%208%203%206'/%3e%3c/svg%3e") no-repeat center center}.container{display:flex;height:28px;background-color:var(--token-background-color, #f3f3f3);border:var(--token-focused-border, var(--token-border));box-sizing:border-box}.container .icon-wrapper{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:100%;overflow:hidden;background-color:var(--token-icon-background-color, transparent)}.container .icon-wrapper .icon{height:100%;width:100%;object-fit:contain;background-size:cover;background-repeat:no-repeat;background-position:center}.container .value{display:inline-block;align-self:center;padding:0 8px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container .delete-button-wrapper{display:flex;align-self:center;height:16px;width:16px;padding-right:8px;opacity:.5}.container .delete-button-wrapper:hover{cursor:pointer;filter:brightness(10%);opacity:1}`,ts=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
115
+ `}updated(e){if(super.updated(e),this._lastRenderedScrollTop=this._lastKnownScrollTop,this.updateItems(),(this._increaseWidthOnNextRenderIfNeeded||this._reachedMaxWidth)&&this._firstVisibleIndex<this._lastVisibleIndex)if(this.querySelector("[item-index]"))this.adjustWidthIfNeeded();else{let t=new MutationObserver(()=>{this.adjustWidthIfNeeded(),t.disconnect()});t.observe(this)}}adjustWidthIfNeeded(){this._increaseWidthOnNextRenderIfNeeded?(this._increaseWidthOnNextRenderIfNeeded=!1,window.requestAnimationFrame(()=>{let e=Number.parseInt(getComputedStyle(this).maxWidth)-this.offsetWidth;if(e==0)this._reachedMaxWidth=!0,this.enableLineClampOnItemsIfNeeded();else{this._reachedMaxWidth=!1;let t=[...this.querySelectorAll("[item-index]")].map(o=>{if(o instanceof Pt){o.enableLineClamp=!1;let r=o.missingWidthForTexts;return r>e&&(o.enableLineClamp=!0),r}}),i=Math.max(...t);i>0&&(this.style.width=`${this.offsetWidth+i}px`)}})):this._reachedMaxWidth&&this.enableLineClampOnItemsIfNeeded()}enableLineClampOnItemsIfNeeded(){this.querySelectorAll("[item-index]").forEach(e=>{e instanceof Pt&&(e.enableLineClamp=e.enableLineClamp||e.missingWidthForTexts>0)})}increaseWidthOnNextRenderIfNeeded(){this._increaseWidthOnNextRenderIfNeeded=!0}updateItems(){let e=[...this.querySelectorAll("[item-index]")],t=new Map,i=document.createDocumentFragment();for(let o of this._itemsRenderData){let r=this.renderItem(o);r.parentElement||i.appendChild(r),t.set(o.dataHash,r);let s=e.indexOf(r);s!==-1&&e.splice(s,1)}this.appendChild(i);for(let o of e)o instanceof Pt&&(o.enableLineClamp=!1),this.removeChild(o);t.forEach((o,r)=>{this._elementCache.set(r,o)})}renderItem({index:e,top:t,dataHash:i,data:o}){let r;return o?this._elementCache.has(i)?(r=this._elementCache.get(i),this._elementCache.delete(i)):(r=this.itemGenerator(o,e),r.setAttribute("slot","items")):(r=document.createElement("div"),r.setAttribute("placeholder-item",""),r.setAttribute("slot","items")),Object.assign(r.style,{transform:`translateY(${t}px)`,height:`${this.itemHeight}px`}),r.setAttribute("item-index",e.toString()),r.setAttribute("aria-setsize",String(this.finalSizeIsKnown?this.itemCount:-1)),r.setAttribute("aria-posinset",String(e+1)),(!r.id||r.id.startsWith(this.id+"_item_"))&&(r.id=this.id+"_item_"+e),this.itemCount-1==e?r.setAttribute("last",""):r.removeAttribute("last"),this.updateSelectedAttribute(e,r),this.updateFocusedAttribute(e,r),r}updateFocusedAttribute(e,t){this.focusIndex==e&&(this.focusTarget||document.activeElement==this)?(t.setAttribute("focused",""),this.setAttribute("aria-activedescendant",t.id)):t.removeAttribute("focused")}updateSelectedAttribute(e,t){let i=this.selectedIndices.indexOf(e)!==-1;i?t.setAttribute("selected",""):t.removeAttribute("selected"),t.setAttribute("aria-selected",String(i))}updateItemsRenderData(){if(this._itemsRenderData=[],this._visibleItemsNum=Math.min(Math.ceil(this.height/this.itemHeight),this.itemCount),this._visibleItemsNum>0){this._firstVisibleIndex=this.normalizeIndex(Math.floor(this._lastKnownScrollTop/this.itemHeight)),this._lastVisibleIndex=this.normalizeIndex(this._firstVisibleIndex+this._visibleItemsNum);let e=this.normalizeIndex(this._firstVisibleIndex-2),t=this.normalizeIndex(this._lastVisibleIndex+2);this.requestData(e,t);for(let i=e;i<=t;i++){let o=i-e,r=this.items[o],s;r?s=JSON.stringify(r):s=`placeholder-${o}`,this._itemsRenderData.push({index:i,top:this.itemHeight*i,physicalIndex:o,dataHash:s,data:r})}}else this._firstVisibleIndex=0,this._lastVisibleIndex=0}normalizeIndex(e){return Math.max(0,Math.min(e,this.itemCount-1))}get height(){return this.offsetHeight}requestData(e,t){!Number.isNaN(e)&&!Number.isNaN(t)&&this.dispatchEvent(new CustomEvent("data-request",{detail:{startIndex:e,stopIndex:t}}))}handleSelection(e,t){if(e<0||this.itemCount<=e)return;let i=e%this._visibleItemsNum,o=this.items[i];if(!o||o.disabled)return;let r=!0;if(this.selectionType!=="trigger-only"){let s=this.selectedIndices.indexOf(e);r=s==-1,r?this.selectionType==="single"?this.selectedIndices=[e]:this.selectedIndices.push(e):this.selectedIndices.splice(s,1),this.requestUpdate("selectedIndices")}this.focusIndex=e,this.dispatchSelectionEvent(e,r,t)}dispatchSelectionEvent(e,t,i){this.dispatchEvent(new CustomEvent("selection",{detail:{index:e,selected:t,hasModifier:i}}))}handleClick(e){let t=e.composedPath().find(i=>i.hasAttribute&&i.hasAttribute("item-index"));if(t){let i=parseInt(t.getAttribute("item-index"));if(Number.isInteger(i)){if(e.button==0||e.button==1){let o=e.type=="auxclick"&&e.button==1||e.metaKey||e.ctrlKey;this.handleSelection(i,o)}this.focusIndex=i}}}},yt.ID="sd-virtual-list",yt.ensureDefined=()=>{Pt.ensureDefined(),customElements.get(yt.ID)||customElements.define(yt.ID,yt)},yt);xt([h({type:Number,attribute:"item-height",reflect:!0})],ut.prototype,"itemHeight",2);xt([h({type:Number})],ut.prototype,"itemCount",2);xt([h({type:Array,attribute:!1})],ut.prototype,"items",2);xt([h({type:String,attribute:"selection-type",reflect:!0,noAccessor:!0})],ut.prototype,"selectionType",2);xt([h({type:String,attribute:!0,reflect:!0})],ut.prototype,"id",2);xt([h({type:String,reflect:!0})],ut.prototype,"role",2);xt([h({type:Number,attribute:"focus-index",reflect:!0})],ut.prototype,"focusIndex",1);xt([h({type:Array,attribute:!1})],ut.prototype,"selectedIndices",1);var He=ut;He.ensureDefined();var Ue=class e{constructor(t,i){this.eventTarget=t,this.keydownHandler=i,this.catchedKeys=["Down","ArrowDown","Up","ArrowUp","Enter"],this.markAsFocusTargetHandler=()=>this.eventTarget.setAttribute("focus-target",""),this.unmarkAsFocusTargetHandler=()=>this.eventTarget.removeAttribute("focus-target"),this.delegateKeyDownEvent=o=>{if(this.catchedKeys.indexOf(o.key)!==-1){let r=o.key.toLocaleLowerCase(),s=0,n=r.includes("enter");n||(s=r.includes("down")?1:-1),this.keydownHandler(o,s,n),o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation()}}}static delegateTo(t){return new e(t,i=>t.dispatchEvent(new KeyboardEvent(i.type,i)))}connect(t){var i,o;if(t!=null){t.addEventListener("keydown",this.delegateKeyDownEvent),t.addEventListener("focus",this.markAsFocusTargetHandler),t.addEventListener("blur",this.unmarkAsFocusTargetHandler);let r=document.activeElement;(t.contains(r)||(o=(i=t.shadowRoot)==null?void 0:i.activeElement)!=null&&o.contains(r))&&this.markAsFocusTargetHandler()}}disconnect(t){t!=null&&(t.removeEventListener("keydown",this.delegateKeyDownEvent),t.removeEventListener("focus",this.markAsFocusTargetHandler),t.removeEventListener("blur",this.unmarkAsFocusTargetHandler),this.unmarkAsFocusTargetHandler())}};var be=class extends Lt{};be.directiveName="unsafeSVG",be.resultType=2;var Lo=Te(be);var Si=class{constructor(t,i,o,r){this.inputElement=t,this.notSelectedTokensProvider=i,this.initializeCallback=r,this.filter=(s,n)=>s?n.filter(a=>a.disabled||a.deactivated?!1:a.caption&&a.caption.toLowerCase().includes(s)):n,He.ensureDefined(),this._tokenList=new He,this._tokenList.style.minWidth="250px",this._tokenList.style.maxHeight="49vh",this._tokenList.itemHeight=50,this._tokenList.addEventListener("pointerdown",()=>{this.pointerDown=!0,window.addEventListener("pointerup",()=>{this.pointerDown=!1,this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.isUpdatePending||this._tokenList.requestUpdate()},{once:!0,capture:!0})}),this._tokenList.addEventListener("selection",s=>{let n=s.detail.index,a=this._suggestItems[n];o(a),this.hide()}),this._tokenList.addEventListener("data-request",s=>{this.lastRequestedStartIndex=s.detail.startIndex,this.lastRequestedStopIndex=s.detail.stopIndex,this.pointerDown||this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.items=this._suggestItems.slice(this.lastRequestedStartIndex,this.lastRequestedStopIndex+1)}),new Ue(this._tokenList,(s,n,a)=>{this._tokenList.dispatchEvent(new KeyboardEvent(s.type,s)),!a&&!this.isOpened&&this.show()}).connect(t)}show(){this.inputElement.effectiveDisabled||(this.popover,this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():(this._tokenList.itemCount=this._suggestItems.length,this._tokenList.focusIndex=-1,this._tokenList.style.width=null,requestAnimationFrame(()=>{this.lastRequestedStartIndex!=null&&(this._tokenList.increaseWidthOnNextRenderIfNeeded(),this._tokenList.items=this._suggestItems.slice(this.lastRequestedStartIndex,this.lastRequestedStopIndex+1))}),this.popover.show()))}refreshItems(){this.isOpened&&(this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():(this._tokenList.itemCount=this._suggestItems.length,this._tokenList.items=[],this._tokenList.style.width=null))}filterItems(t){let i=this.notSelectedTokensProvider();return this.filter(t,i)}hide(){var t;this._suggestItems=[],this._tokenList.itemCount=0,this._tokenList.items=[],(t=this._popover)==null||t.hide()}get list(){return this._tokenList}get popover(){return this._popover||(this._popover=this.createPopover(),this.initializeCallback(this)),this._popover}createPopover(){let t=new ge;return t.setAttribute("trigger-type","manual"),t.setAttribute("placement","bottom-start"),t.setAttribute("modal",""),t.setAttribute("popover-for","token-autosuggest-popover"),t.setAttribute("offset","-2"),t.targetElement=this.inputElement,t.appendChild(this._tokenList),t}get isOpened(){return this._popover&&this._popover.hasAttribute("open")}get focusedSuggestToken(){return this._suggestItems[this._tokenList.focusIndex]}},Qr=`:host{flex-shrink:0;max-width:100%}:host([aria-checked=true]){position:relative}:host([aria-checked=true]):before{content:"";position:absolute;left:0;top:0;height:12px;width:12px;background:#1467ba url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20fill='none'%3e%3cpath%20stroke='%23FFF'%20stroke-width='2'%20d='M9%204%205%208%203%206'/%3e%3c/svg%3e") no-repeat center center}.container{display:flex;height:28px;background-color:var(--sd-token-background-color, #f3f3f3);border:var(--sd-token-focused-border, var(--sd-token-border));box-sizing:border-box}.container .icon-wrapper{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:100%;overflow:hidden;background-color:var(--sd-token-icon-background-color, transparent)}.container .icon-wrapper .icon{height:100%;width:100%;object-fit:contain;background-size:cover;background-repeat:no-repeat;background-position:center}.container .value{display:inline-block;align-self:center;padding:0 8px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container .delete-button-wrapper{display:flex;align-self:center;height:16px;width:16px;padding-right:8px;opacity:.5}.container .delete-button-wrapper:hover{cursor:pointer;filter:brightness(10%);opacity:1}`,ts=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
116
116
  <path d="m3.5 12.5 9-9m-9 0 9 9" style="fill:none;stroke:#333;stroke-linecap:square;stroke-width:1.1px"/>\r
117
117
  </svg>`,es=Object.defineProperty,is=Object.getOwnPropertyDescriptor,_t=(e,t,i,o)=>{for(var r=o>1?void 0:o?is(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&&es(t,i,r),r},$i={fromAttribute:e=>e=="true",toAttribute:e=>e},qt,ft=(qt=class extends P{constructor(){super(...arguments),this.value="",this.type="",this.icon="",this.iconPlaceholder="",this.iconBackgroundColor="",this._checked=!1}static get styles(){return X(Qr)}set checked(e){let t=this._checked;this._checked=!this.disabled&&e,this.requestUpdate("checked",t)}get checked(){return this._checked}firstUpdated(e){super.firstUpdated(e),this.tabIndex=-1,this.setAttribute("role","option"),this.setAttribute("aria-selected","true"),this.addEventListener("click",i=>{i.stopPropagation(),i.getModifierState("Control")?this.checked=!this.checked:(this.checked=!0,this._tokenClickHandler&&this._tokenClickHandler(this.index))});let t=this.shadowRoot.querySelector(".delete-button-wrapper");t&&t.addEventListener("click",i=>{i.stopPropagation(),this._tokenDeleteHandler&&this._tokenDeleteHandler(this.index)})}render(){return k`
118
118
  <div class="container">
@@ -122,11 +122,11 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var We=Object.
122
122
  <div class="value">${this.value}</div>
123
123
  ${this.disabled?b:k` <div class="delete-button-wrapper">${Lo(ts)}</div> `}
124
124
  </div>
125
- `}renderIcon(){if(this.icon||this.iconPlaceholder){let e=this.iconBackgroundColor!=null?`--token-icon-background-color: ${this.iconBackgroundColor}`:void 0;return k`
125
+ `}renderIcon(){if(this.icon||this.iconPlaceholder){let e=this.iconBackgroundColor!=null?`--sd-token-icon-background-color: ${this.iconBackgroundColor}`:void 0;return k`
126
126
  <div class="icon-wrapper" style="${V(e)}" role="img">
127
127
  <div part="icon" class="icon"></div>
128
128
  </div>
129
- `}return b}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&Xt.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}},qt.ID="sd-token",qt.ensureDefined=()=>{customElements.get(qt.ID)||customElements.define(qt.ID,qt)},qt);_t([h({type:String,attribute:!0,reflect:!0})],ft.prototype,"value",2);_t([h({type:String,attribute:!0,reflect:!0})],ft.prototype,"type",2);_t([h({type:String})],ft.prototype,"icon",2);_t([h({type:String})],ft.prototype,"iconPlaceholder",2);_t([h({type:String})],ft.prototype,"iconBackgroundColor",2);_t([h({converter:$i,reflect:!0,attribute:"aria-disabled"})],ft.prototype,"disabled",2);_t([h({converter:$i,reflect:!0,attribute:"aria-current"})],ft.prototype,"current",2);_t([h({converter:$i,reflect:!0,attribute:"aria-checked"})],ft.prototype,"checked",1);var Be=ft,Oo=(e,t)=>{let i=document.createElement(Be.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};Be.ensureDefined();var ze="web application/json",Ii=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:ze});navigator.clipboard.write([new ClipboardItem({[ze]:s})])}}async readFromClipboard(t){let i=await navigator.clipboard.read();for(let o of i)if(o.types.includes(ze)){let r=await(await o.getType(ze)).text(),s=JSON.parse(r);Array.isArray(s)&&t(s)}}},os=":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){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--token-border: 1px solid transparent;margin:2px}.input:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-within ::slotted(sd-token[aria-current=true]){outline:2px solid #1467ba;--token-focused-border: 1px solid #fff}.container{outline:none;display:flex;flex-wrap:wrap;gap:4px;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}",Ci=class{constructor(t,i){this.tokenSelector=t;let o=new Map,r=s=>{let n=s.target;if(t.removeAttribute("drag-source"),!t.contains(n)){let a=s.addedIndexes;a&&t.removeTokens(a.map(l=>o.get(l)))}o.clear()};t.addEventListener("dragstart",s=>{let n=s.target;if(n instanceof Be){if(n.disabled){s.preventDefault();return}t.setAttribute("drag-source",""),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,d)=>(o.set(d,c.index),t.items[c.index]));if(s.dataTransfer.setData("text/sd-token-selector",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,{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/sd-token-selector");if(n)try{let a=JSON.parse(n);Array.isArray(a)&&(s.addedIndexes=i(a),s.preventDefault())}catch{}}),t.addEventListener("dragend",()=>{window.removeEventListener("drop",r),t.removeAttribute("drag-source"),o.clear()})}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}},rs=Object.defineProperty,ss=Object.getOwnPropertyDescriptor,tt=(e,t,i,o)=>{for(var r=o>1?void 0:o?ss(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&&rs(t,i,r),r};function ns(e,t){let i;return function(...o){i!=null&&clearTimeout(i),i=window.setTimeout(()=>e(...o),t)}}var Po=(e=>(e.RemoveOnly="remove-only",e.Multi="multi",e))(Po||{}),wt,Y=(wt=class extends P{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=Oo,this._autoSuggestItemGenerator=Le,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.selectOrAddItems=e=>{let t=[],i=e.map((o,r)=>{let s=o.caption==null?-1:this.findIndex(o);return s!=-1&&!this.items[s].disabled&&!this.selectedIndexes.includes(s)?(t.push(r),s):-1}).filter(o=>o!=-1);return i.length>0&&this.handleTokenSelection(i),t},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=ns(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return X(os)}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"?k`<div class="container" tabindex="0">
129
+ `}return b}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&Xt.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}},qt.ID="sd-token",qt.ensureDefined=()=>{customElements.get(qt.ID)||customElements.define(qt.ID,qt)},qt);_t([h({type:String,attribute:!0,reflect:!0})],ft.prototype,"value",2);_t([h({type:String,attribute:!0,reflect:!0})],ft.prototype,"type",2);_t([h({type:String})],ft.prototype,"icon",2);_t([h({type:String})],ft.prototype,"iconPlaceholder",2);_t([h({type:String})],ft.prototype,"iconBackgroundColor",2);_t([h({converter:$i,reflect:!0,attribute:"aria-disabled"})],ft.prototype,"disabled",2);_t([h({converter:$i,reflect:!0,attribute:"aria-current"})],ft.prototype,"current",2);_t([h({converter:$i,reflect:!0,attribute:"aria-checked"})],ft.prototype,"checked",1);var Be=ft,Oo=(e,t)=>{let i=document.createElement(Be.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};Be.ensureDefined();var ze="web application/json",Ii=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:ze});navigator.clipboard.write([new ClipboardItem({[ze]:s})])}}async readFromClipboard(t){let i=await navigator.clipboard.read();for(let o of i)if(o.types.includes(ze)){let r=await(await o.getType(ze)).text(),s=JSON.parse(r);Array.isArray(s)&&t(s)}}},os=":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){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--sd-token-border: 1px solid transparent;margin:2px}.input:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-within ::slotted(sd-token[aria-current=true]){outline:2px solid #1467ba;--sd-token-focused-border: 1px solid #fff}.container{outline:none;display:flex;flex-wrap:wrap;gap:4px;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}",Ci=class{constructor(t,i){this.tokenSelector=t;let o=new Map,r=s=>{let n=s.target;if(t.removeAttribute("drag-source"),!t.contains(n)){let a=s.addedIndexes;a&&t.removeTokens(a.map(l=>o.get(l)))}o.clear()};t.addEventListener("dragstart",s=>{let n=s.target;if(n instanceof Be){if(n.disabled){s.preventDefault();return}t.setAttribute("drag-source",""),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,d)=>(o.set(d,c.index),t.items[c.index]));if(s.dataTransfer.setData("text/sd-token-selector",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,{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/sd-token-selector");if(n)try{let a=JSON.parse(n);Array.isArray(a)&&(s.addedIndexes=i(a),s.preventDefault())}catch{}}),t.addEventListener("dragend",()=>{window.removeEventListener("drop",r),t.removeAttribute("drag-source"),o.clear()})}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}},rs=Object.defineProperty,ss=Object.getOwnPropertyDescriptor,tt=(e,t,i,o)=>{for(var r=o>1?void 0:o?ss(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&&rs(t,i,r),r};function ns(e,t){let i;return function(...o){i!=null&&clearTimeout(i),i=window.setTimeout(()=>e(...o),t)}}var Po=(e=>(e.RemoveOnly="remove-only",e.Multi="multi",e))(Po||{}),wt,Y=(wt=class extends P{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=Oo,this._autoSuggestItemGenerator=Le,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.selectOrAddItems=e=>{let t=[],i=e.map((o,r)=>{let s=o.caption==null?-1:this.findIndex(o);return s!=-1&&!this.items[s].disabled&&!this.selectedIndexes.includes(s)?(t.push(r),s):-1}).filter(o=>o!=-1);return i.length>0&&this.handleTokenSelection(i),t},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=ns(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return X(os)}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"?k`<div class="container" tabindex="0">
130
130
  <slot name="items"
131
131
  >${this.placeholder?k`<span part="remove-only-placeholder" class="placeholder"
132
132
  >${this.placeholder}</span