@cas-smartdesign/token-selector 0.15.0 → 0.16.0

package/dist/docs/5_other.js

@@ -1 +1 @@
-import"./button.mjs";import{T as d,g as u}from"./doc.mjs";import{g as v}from"./token-provider.mjs";var l=(e=>(e.Accept="accept",e.Decline="decline",e.NoResponse="no-response-received",e.Tentative="tentative",e))(l||{}),r=(e=>(e.Free="free",e.Blocked="blocked",e))(r||{});function m(){const e=[];return e.push({caption:"Robert Glaser",overlapStatus:"free",invitationStatus:"accept",type:"participant",disabled:!1}),e.push({caption:"Britta Glatt",overlapStatus:"blocked",invitationStatus:"decline",type:"participant",disabled:!1}),e.push({caption:"Frank Shreeve",overlapStatus:"blocked",invitationStatus:"no-response-received",type:"participant",disabled:!1}),e.push({caption:"Mario Rossi",invitationStatus:"tentative",icon:"./monkey.svg",type:"participant",disabled:!1}),e}d.ensureDefined();document.querySelectorAll("#other-example sd-token-selector").forEach(e=>{const p=e.querySelector("sd-button"),t=e;if(t.hasAttribute("additional-icons")){t.tokenGenerator=(n,c)=>{const s=u(n,c),o=document.createElement("span");o.classList.add("overlap-indicator"),o.classList.add(n.overlapStatus),o.setAttribute("slot","before-icon");const a=document.createElement("img");return a.style.backgroundColor="transparent",a.src="state-"+n.invitationStatus+".svg",a.setAttribute("slot","after-icon"),s.appendChild(o),s.appendChild(a),s};const i=t.autoSuggestItemGenerator;t.autoSuggestItemGenerator=(n,c)=>{const s=document.createElement("span"),o=s.style;o.width="4px",o.height="100%",n.overlapStatus==r.Free?o.backgroundColor="#59a531":n.overlapStatus==r.Blocked?o.backgroundColor="#cc0000":o.backgroundColor="#999999",s.setAttribute("slot","left-content");const a=i(n,c);return a.appendChild(s),a},t.items=m(),t.selectedIndexes=[0,1,2,3]}else t.items=v(!0);t.addEventListener("token-created",i=>{t.items.push({caption:i.detail.value,type:"participant",disabled:!1,overlapStatus:r.Free,invitationStatus:l.NoResponse}),t.selectedIndexes.push(t.items.length-1)}),p.addEventListener("click",()=>t.openSuggestions())});
+import"./button.mjs";import{T as d,g as u}from"./doc.mjs";import{g as v}from"./token-provider.mjs";var l=(t=>(t.Accept="accept",t.Decline="decline",t.NoResponse="no-response-received",t.Tentative="tentative",t))(l||{}),c=(t=>(t.Free="free",t.Blocked="blocked",t))(c||{});function g(){const t=[];return t.push({caption:"Robert Glaser",overlapStatus:"free",invitationStatus:"accept",type:"participant",disabled:!1}),t.push({caption:"Britta Glatt",overlapStatus:"blocked",invitationStatus:"decline",type:"participant",disabled:!1}),t.push({caption:"Frank Shreeve",overlapStatus:"blocked",invitationStatus:"no-response-received",type:"participant",disabled:!1}),t.push({caption:"Mario Rossi",invitationStatus:"tentative",icon:"./monkey.svg",type:"participant",disabled:!1}),t}d.ensureDefined();document.querySelectorAll("#other-example sd-token-selector").forEach(t=>{const p=t.querySelector("sd-button"),o=t;if(o.hasAttribute("additional-icons")){o.tokenGenerator=(n,r)=>{const s=u(n,r),e=document.createElement("span");e.classList.add("overlap-indicator"),e.classList.add(n.overlapStatus),e.setAttribute("slot","before-icon");const i=document.createElement("img");return i.style.backgroundColor="transparent",i.src="state-"+n.invitationStatus+".svg",i.setAttribute("slot","after-icon"),s.appendChild(e),s.appendChild(i),s};const a=o.autoSuggestItemGenerator;o.autoSuggestItemGenerator=(n,r)=>{const s=document.createElement("span"),e=s.style;e.width="4px",e.height="100%",n.overlapStatus==c.Free?e.backgroundColor="#59a531":n.overlapStatus==c.Blocked?e.backgroundColor="#cc0000":e.backgroundColor="#999999",s.setAttribute("slot","left-content");const i=a(n,r);return i.appendChild(s),i},o.items=g(),o.selectedIndexes=[0,1,2,3]}else o.items=v(!0);o.hasAttribute("search-also-in-description")&&(o.suggestionFilter=(a,n)=>{if(!a)return n;const r=[],s=[];return n.forEach(e=>{e.disabled||e.deactivated||(e.caption&&e.caption.toLowerCase().includes(a)?r.push(e):e.description&&e.description.toLowerCase().includes(a)&&s.push(e))}),r.concat(s)}),o.addEventListener("token-created",a=>{o.items.push({caption:a.detail.value,type:"participant",disabled:!1,overlapStatus:c.Free,invitationStatus:l.NoResponse}),o.selectedIndexes.push(o.items.length-1)}),p.addEventListener("click",()=>o.openSuggestions())});

package/dist/docs/doc.mjs

@@ -287,7 +287,7 @@ document.querySelectorAll("#dnd-example sd-token-selector").forEach((tokenSelect
 }
 `,jo=`import "@cas-smartdesign/button";
 import { Button } from "@cas-smartdesign/button";
-import TokenSelector, { generator } from "@cas-smartdesign/token-selector";
+import TokenSelector, { TokenData, generator } from "@cas-smartdesign/token-selector";
 import { getItems, OverlapStatus, InvitationStatus, ExtendedTokenData } from "./token-provider";
 import { getItems as getDefaultItems } from "../token-provider";
 
@@ -339,6 +339,26 @@ document.querySelectorAll("#other-example sd-token-selector").forEach((el) => {
     } else {
         tokenSelector.items = getDefaultItems(true);
     }
+    if (tokenSelector.hasAttribute("search-also-in-description")) {
+        tokenSelector.suggestionFilter = (searchTerm: string, allTokens: TokenData[]) => {
+            if (!searchTerm) {
+                return allTokens;
+            }
+            const matchByCaption: TokenData[] = [];
+            const matchOnlyByDescription: TokenData[] = [];
+            allTokens.forEach((item) => {
+                if (item.disabled || item.deactivated) {
+                    return;
+                }
+                if (item.caption && item.caption.toLowerCase().includes(searchTerm)) {
+                    matchByCaption.push(item);
+                } else if (item.description && item.description.toLowerCase().includes(searchTerm)) {
+                    matchOnlyByDescription.push(item);
+                }
+            });
+            return matchByCaption.concat(matchOnlyByDescription);
+        };
+    }
 
     tokenSelector.addEventListener("token-created", ((event: CustomEvent) => {
         tokenSelector.items.push({
@@ -544,7 +564,7 @@ export function getItems(): ExtendedTokenData[] {
 	<slot name="items"></slot>
 	<slot id="default-slot"></slot>
 </div>
-`;let Il=0;const tt=class Qn extends Cl{constructor(){super(),this._items=[],this._selectedIndexes=[],this._itemGenerator=Ks,this.onDefaultSlotChange=()=>{let e=0;this.defaultSlot.assignedElements().forEach(t=>{this.isSeparator(t)||this.initListItem(t,e++)}),this.updateFocusedElement()},this.handleKeyDown=e=>{let t=!0;switch(e.key){case"ArrowDown":case"Down":this.focusIndex=Math.min(this.getListItems.length-1,this.focusIndex+1);break;case"ArrowUp":case"Up":this.focusIndex=Math.max(0,this.focusIndex-1);break;case"Enter":case"Space":case" ":this.handleSelection(this.focusIndex,e.metaKey||e.ctrlKey);break;case"End":case"PageDown":this.focusIndex=this.items.length-1;break;case"Home":case"PageUp":this.focusIndex=0;break;default:t=!1;break}t&&(e.preventDefault(),e.stopPropagation())},this._fallbackId=Qn.ID+"_"+Il++,this.addEventListener("pointerup",e=>{this.focusIndex=this.getListItems.indexOf(e.target),this.updateFocusedElement()}),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndexes&&(this.focusIndex=this.selectedIndexes[0]),this.focusIndex==-1&&this.childElementCount>0&&(this.focusIndex=0)):this.updateFocusedElement())}),this.addEventListener("blur",()=>this.removeFocusedItemAttributes())}get items(){return this._items}set items(e){this._items=e,this.render()}get itemGenerator(){return this._itemGenerator}set itemGenerator(e){this._itemGenerator=e,this.render()}get selectionType(){return this.getAttribute("selection-type")}set selectionType(e){e?this.setAttribute("selection-type",e):this.removeAttribute("selection-type")}get focusIndex(){return this.hasAttribute("focus-index")?Number(this.getAttribute("focus-index")):-1}set focusIndex(e){0<=e&&e<this.getListItems.length?this.setAttribute("focus-index",e.toString()):this.removeAttribute("focus-index")}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(e){this.toggleAttribute("focus-target",e)}getListItem(e){return this.shadowRoot?this.getListItems[e]:null}get getListItems(){return Array.prototype.slice.call(this.children).filter(e=>!this.isSeparator(e))}get selectedIndexes(){return this._selectedIndexes}set selectedIndexes(e){const t=this._selectedIndexes||[];this._selectedIndexes=e||[],t.filter(n=>!this._selectedIndexes.includes(n)).forEach(n=>{this.setSelectedAttr(this.getListItem(n),!1)}),this._selectedIndexes.filter(n=>!t.includes(n)).forEach(n=>{this.setSelectedAttr(this.getListItem(n),!0)})}static get observedAttributes(){return["focus-index","focus-target"]}is(){return Qn.ID}template(){const e=document.createElement("template");return e.innerHTML=Ol,e}removeFocusedItemAttributes(){if(this.focusIndex!=-1){const e=this.getListItem(this.focusIndex);e&&(e.removeAttribute("focused"),this.removeAttribute("aria-activedescendant"))}}connectedCallback(){super.connectedCallback(),this.defaultSlot.addEventListener("slotchange",this.onDefaultSlotChange),this.hasAttribute("role")||this.setAttribute("role","listbox"),this.id||(this.id=this._fallbackId),this.render(),this.addEventListener("keydown",this.handleKeyDown),this.selectionType||(this.selectionType="trigger-only")}get defaultSlot(){return this.shadowRoot.querySelector("#default-slot")}isSeparator(e){return e.tagName=="HR"||e.getAttribute("role")=="separator"}attributeChangedCallback(e,t,n){if(e==="focus-index"){const s=this.getListItem(t);s&&s.removeAttribute("focused"),this.updateFocusedElement()}else e==="focus-target"&&(this.focusTarget?this.updateFocusedElement():document.activeElement!=this&&this.removeFocusedItemAttributes())}increaseWidthIfNeeded(){window.requestAnimationFrame(()=>{let e=Number.MAX_SAFE_INTEGER;const t=getComputedStyle(this).maxWidth,n=this.offsetWidth;t.endsWith("px")&&(e=Number.parseInt(t)-n);const s=this.style.width;if(e==0||s.endsWith("px")&&n<Number.parseInt(s))this.enableLineClampOnItemsIfNeeded();else{const o=[...this.querySelectorAll("[slot='items']")].map(a=>{if(a instanceof Ct){a.enableLineClamp=!1;const l=a.missingWidthForTexts;return l>e&&(a.enableLineClamp=!0),l}}),r=Math.max(...o);if(r>0){const a=n+r;this.style.width=`${a}px`,this.offsetWidth<a&&this.enableLineClampOnItemsIfNeeded()}}})}enableLineClampOnItemsIfNeeded(){this.querySelectorAll("[slot='items']").forEach(e=>{e instanceof Ct&&(e.enableLineClamp=e.enableLineClamp||e.missingWidthForTexts>0)})}render(){if(!this.isConnected||!this.items)return;this.querySelectorAll("[slot='items']").forEach(n=>{this.removeChild(n)});const e=document.createDocumentFragment();let t=0;this.items.forEach((n,s)=>{const o=this.itemGenerator(n,s);this.isSeparator(o)||this.initListItem(o,t++),o.slot="items",e.appendChild(o)}),this.appendChild(e),this.updateFocusedElement()}initListItem(e,t){this.setSelectedAttr(e,this.selectedIndexes.includes(t)),e.addEventListener("click",n=>{this.handleItemClick(n,t)}),e.addEventListener("mousedown",n=>{n.button==1&&n.preventDefault()}),e.addEventListener("auxclick",n=>{this.handleItemClick(n,t)}),(!e.id||e.id.startsWith(this.id+"_item_"))&&(e.id=this.id+"_item_"+t)}ensureItemVisible(e){const t=e.getBoundingClientRect(),n=this.getBoundingClientRect();t.bottom>n.bottom?this.scrollTop+=t.bottom-n.bottom:t.top<n.top&&(this.scrollTop-=n.top-t.top)}updateFocusedElement(){const e=this.getListItem(this.focusIndex);e&&(this.focusTarget||document.activeElement==this)?(e.setAttribute("focused",""),this.setAttribute("aria-activedescendant",e.id),this.ensureItemVisible(e)):this.removeAttribute("aria-activedescendant")}handleItemClick(e,t){if(e.button!==null){const n=e.type=="auxclick"&&e.button==1||e.metaKey||e.ctrlKey;(e.button==0||e.button==1)&&this.handleSelection(t,n)}}handleSelection(e,t){const n=this.items[e];if(!n||n.disabled)return;const s=this.getListItem(e),o=this.isSelected(s);this.selectionType!=="trigger-only"&&(this.selectionType==="single"?this.selectedIndexes=o?[]:[e]:this.toggleSelection(s)?this._selectedIndexes.push(e):this.removeFromSelectedIndexes(e)),this.focusIndex=e,this.dispatchEvent(new CustomEvent("selection",{detail:{index:e,selected:this.selectionType=="trigger-only"||!o,hasModifier:t},bubbles:!0,composed:!0}))}removeFromSelectedIndexes(e){const t=this._selectedIndexes.indexOf(e);t!==-1&&this._selectedIndexes.splice(t,1)}toggleSelection(e){const t=!e.hasAttribute("selected");return this.setSelectedAttr(e,t),t}setSelectedAttr(e,t){e&&(t?e.setAttribute("selected",""):e.removeAttribute("selected"),e.setAttribute("aria-selected",String(t)))}isSelected(e){return e.hasAttribute("selected")}};tt.ID="sd-list",tt.ensureDefined=()=>{Ct.ensureDefined(),customElements.get(tt.ID)||customElements.define(tt.ID,tt)};let ei=tt;ei.ensureDefined();let Tl=class or{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 o=0;const r=s.includes("enter");r||(o=s.includes("down")?1:-1),this.keydownHandler(n,o,r),n.preventDefault(),n.stopPropagation(),n.stopImmediatePropagation()}}}static delegateTo(e){return new or(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 Ll{constructor(e,t,n,s){this.inputElement=e,this.notSelectedTokensProvider=t,this.initializeCallback=s,this.filter=(o,r)=>{if(!o)return!0;if(r.disabled||r.deactivated)return!1;if(r.caption&&r.caption.toLowerCase().includes(o))return!0},ei.ensureDefined(),this._tokenList=new ei,this._tokenList.style.minWidth="250px",this._tokenList.addEventListener("selection",o=>{const r=o.detail.index,a=this._suggestItems[r];n(a),this.hide()}),new Tl(this._tokenList,(o,r,a)=>{this._tokenList.dispatchEvent(new KeyboardEvent(o.type,o)),!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.items=this._suggestItems.map(e=>({...e,contentMode:"text"})),this._tokenList.focusIndex=-1,Object.assign(this._tokenList.style,{minWidth:`${Math.max(this.popover.targetElement.offsetWidth,250)}px`}),this.popover.show()))}refreshItems(){this.isOpened&&(this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():this._tokenList.items=this._suggestItems.map(e=>({...e,contentMode:"text"})))}filterItems(e){const t=this.notSelectedTokensProvider();return e?t.filter(n=>this.filter(e,n)):t}hide(){var e;this._suggestItems=[],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 dn;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 ti extends mn{}ti.directiveName="unsafeSVG",ti.resultType=2;const Pl=Vs(ti),Rl=":host{flex-shrink:0;max-width:100%}.container{display:flex;height:28px;background-color:var(--token-background-color, #f3f3f3);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}",Ml=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
+`;let Il=0;const tt=class Qn extends Cl{constructor(){super(),this._items=[],this._selectedIndexes=[],this._itemGenerator=Ks,this.onDefaultSlotChange=()=>{let e=0;this.defaultSlot.assignedElements().forEach(t=>{this.isSeparator(t)||this.initListItem(t,e++)}),this.updateFocusedElement()},this.handleKeyDown=e=>{let t=!0;switch(e.key){case"ArrowDown":case"Down":this.focusIndex=Math.min(this.getListItems.length-1,this.focusIndex+1);break;case"ArrowUp":case"Up":this.focusIndex=Math.max(0,this.focusIndex-1);break;case"Enter":case"Space":case" ":this.handleSelection(this.focusIndex,e.metaKey||e.ctrlKey);break;case"End":case"PageDown":this.focusIndex=this.items.length-1;break;case"Home":case"PageUp":this.focusIndex=0;break;default:t=!1;break}t&&(e.preventDefault(),e.stopPropagation())},this._fallbackId=Qn.ID+"_"+Il++,this.addEventListener("pointerup",e=>{this.focusIndex=this.getListItems.indexOf(e.target),this.updateFocusedElement()}),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndexes&&(this.focusIndex=this.selectedIndexes[0]),this.focusIndex==-1&&this.childElementCount>0&&(this.focusIndex=0)):this.updateFocusedElement())}),this.addEventListener("blur",()=>this.removeFocusedItemAttributes())}get items(){return this._items}set items(e){this._items=e,this.render()}get itemGenerator(){return this._itemGenerator}set itemGenerator(e){this._itemGenerator=e,this.render()}get selectionType(){return this.getAttribute("selection-type")}set selectionType(e){e?this.setAttribute("selection-type",e):this.removeAttribute("selection-type")}get focusIndex(){return this.hasAttribute("focus-index")?Number(this.getAttribute("focus-index")):-1}set focusIndex(e){0<=e&&e<this.getListItems.length?this.setAttribute("focus-index",e.toString()):this.removeAttribute("focus-index")}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(e){this.toggleAttribute("focus-target",e)}getListItem(e){return this.shadowRoot?this.getListItems[e]:null}get getListItems(){return Array.prototype.slice.call(this.children).filter(e=>!this.isSeparator(e))}get selectedIndexes(){return this._selectedIndexes}set selectedIndexes(e){const t=this._selectedIndexes||[];this._selectedIndexes=e||[],t.filter(n=>!this._selectedIndexes.includes(n)).forEach(n=>{this.setSelectedAttr(this.getListItem(n),!1)}),this._selectedIndexes.filter(n=>!t.includes(n)).forEach(n=>{this.setSelectedAttr(this.getListItem(n),!0)})}static get observedAttributes(){return["focus-index","focus-target"]}is(){return Qn.ID}template(){const e=document.createElement("template");return e.innerHTML=Ol,e}removeFocusedItemAttributes(){if(this.focusIndex!=-1){const e=this.getListItem(this.focusIndex);e&&(e.removeAttribute("focused"),this.removeAttribute("aria-activedescendant"))}}connectedCallback(){super.connectedCallback(),this.defaultSlot.addEventListener("slotchange",this.onDefaultSlotChange),this.hasAttribute("role")||this.setAttribute("role","listbox"),this.id||(this.id=this._fallbackId),this.render(),this.addEventListener("keydown",this.handleKeyDown),this.selectionType||(this.selectionType="trigger-only")}get defaultSlot(){return this.shadowRoot.querySelector("#default-slot")}isSeparator(e){return e.tagName=="HR"||e.getAttribute("role")=="separator"}attributeChangedCallback(e,t,n){if(e==="focus-index"){const s=this.getListItem(t);s&&s.removeAttribute("focused"),this.updateFocusedElement()}else e==="focus-target"&&(this.focusTarget?this.updateFocusedElement():document.activeElement!=this&&this.removeFocusedItemAttributes())}increaseWidthIfNeeded(){window.requestAnimationFrame(()=>{let e=Number.MAX_SAFE_INTEGER;const t=getComputedStyle(this).maxWidth,n=this.offsetWidth;t.endsWith("px")&&(e=Number.parseInt(t)-n);const s=this.style.width;if(e==0||s.endsWith("px")&&n<Number.parseInt(s))this.enableLineClampOnItemsIfNeeded();else{const o=[...this.querySelectorAll("[slot='items']")].map(a=>{if(a instanceof Ct){a.enableLineClamp=!1;const l=a.missingWidthForTexts;return l>e&&(a.enableLineClamp=!0),l}}),r=Math.max(...o);if(r>0){const a=n+r;this.style.width=`${a}px`,this.offsetWidth<a&&this.enableLineClampOnItemsIfNeeded()}}})}enableLineClampOnItemsIfNeeded(){this.querySelectorAll("[slot='items']").forEach(e=>{e instanceof Ct&&(e.enableLineClamp=e.enableLineClamp||e.missingWidthForTexts>0)})}render(){if(!this.isConnected||!this.items)return;this.querySelectorAll("[slot='items']").forEach(n=>{this.removeChild(n)});const e=document.createDocumentFragment();let t=0;this.items.forEach((n,s)=>{const o=this.itemGenerator(n,s);this.isSeparator(o)||this.initListItem(o,t++),o.slot="items",e.appendChild(o)}),this.appendChild(e),this.updateFocusedElement()}initListItem(e,t){this.setSelectedAttr(e,this.selectedIndexes.includes(t)),e.addEventListener("click",n=>{this.handleItemClick(n,t)}),e.addEventListener("mousedown",n=>{n.button==1&&n.preventDefault()}),e.addEventListener("auxclick",n=>{this.handleItemClick(n,t)}),(!e.id||e.id.startsWith(this.id+"_item_"))&&(e.id=this.id+"_item_"+t)}ensureItemVisible(e){const t=e.getBoundingClientRect(),n=this.getBoundingClientRect();t.bottom>n.bottom?this.scrollTop+=t.bottom-n.bottom:t.top<n.top&&(this.scrollTop-=n.top-t.top)}updateFocusedElement(){const e=this.getListItem(this.focusIndex);e&&(this.focusTarget||document.activeElement==this)?(e.setAttribute("focused",""),this.setAttribute("aria-activedescendant",e.id),this.ensureItemVisible(e)):this.removeAttribute("aria-activedescendant")}handleItemClick(e,t){if(e.button!==null){const n=e.type=="auxclick"&&e.button==1||e.metaKey||e.ctrlKey;(e.button==0||e.button==1)&&this.handleSelection(t,n)}}handleSelection(e,t){const n=this.items[e];if(!n||n.disabled)return;const s=this.getListItem(e),o=this.isSelected(s);this.selectionType!=="trigger-only"&&(this.selectionType==="single"?this.selectedIndexes=o?[]:[e]:this.toggleSelection(s)?this._selectedIndexes.push(e):this.removeFromSelectedIndexes(e)),this.focusIndex=e,this.dispatchEvent(new CustomEvent("selection",{detail:{index:e,selected:this.selectionType=="trigger-only"||!o,hasModifier:t},bubbles:!0,composed:!0}))}removeFromSelectedIndexes(e){const t=this._selectedIndexes.indexOf(e);t!==-1&&this._selectedIndexes.splice(t,1)}toggleSelection(e){const t=!e.hasAttribute("selected");return this.setSelectedAttr(e,t),t}setSelectedAttr(e,t){e&&(t?e.setAttribute("selected",""):e.removeAttribute("selected"),e.setAttribute("aria-selected",String(t)))}isSelected(e){return e.hasAttribute("selected")}};tt.ID="sd-list",tt.ensureDefined=()=>{Ct.ensureDefined(),customElements.get(tt.ID)||customElements.define(tt.ID,tt)};let ei=tt;ei.ensureDefined();let Tl=class or{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 o=0;const r=s.includes("enter");r||(o=s.includes("down")?1:-1),this.keydownHandler(n,o,r),n.preventDefault(),n.stopPropagation(),n.stopImmediatePropagation()}}}static delegateTo(e){return new or(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 Ll{constructor(e,t,n,s){this.inputElement=e,this.notSelectedTokensProvider=t,this.initializeCallback=s,this.filter=(o,r)=>o?r.filter(a=>a.disabled||a.deactivated?!1:a.caption&&a.caption.toLowerCase().includes(o)):r,ei.ensureDefined(),this._tokenList=new ei,this._tokenList.style.minWidth="250px",this._tokenList.addEventListener("selection",o=>{const r=o.detail.index,a=this._suggestItems[r];n(a),this.hide()}),new Tl(this._tokenList,(o,r,a)=>{this._tokenList.dispatchEvent(new KeyboardEvent(o.type,o)),!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.items=this._suggestItems.map(e=>({...e,contentMode:"text"})),this._tokenList.focusIndex=-1,Object.assign(this._tokenList.style,{minWidth:`${Math.max(this.popover.targetElement.offsetWidth,250)}px`}),this.popover.show()))}refreshItems(){this.isOpened&&(this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():this._tokenList.items=this._suggestItems.map(e=>({...e,contentMode:"text"})))}filterItems(e){const t=this.notSelectedTokensProvider();return this.filter(e,t)}hide(){var e;this._suggestItems=[],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 dn;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 ti extends mn{}ti.directiveName="unsafeSVG",ti.resultType=2;const Pl=Vs(ti),Rl=":host{flex-shrink:0;max-width:100%}.container{display:flex;height:28px;background-color:var(--token-background-color, #f3f3f3);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}",Ml=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
   <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
 </svg>`;var Dl=Object.defineProperty,Nl=Object.getOwnPropertyDescriptor,Me=(i,e,t,n)=>{for(var s=n>1?void 0:n?Nl(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&&Dl(e,t,s),s};const Oi={fromAttribute:i=>i=="true",toAttribute:i=>i};var Ce;const Te=(Ce=class extends be{constructor(){super(...arguments),this.value="",this.type="",this.icon="",this.iconPlaceholder="",this.iconBackgroundColor="",this._checked=!1}static get styles(){return ht(Rl)}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 X`
             <div class="container">
@@ -707,7 +727,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),B=u,C=v),k===void 0&&(
 <li>Reflects the <code>case-sensitive</code> attribute.</li>
 </ul>
 </li>
-<li><code>suggestionFilter</code>: <strong>Function (searchTerm: string, item: TokenData) =&gt; boolean</strong><ul>
+<li><code>suggestionFilter</code>: <strong>Function (searchTerm: string, allTokens: TokenData[]) =&gt; TokenData[]</strong><ul>
 <li>A custom filter function can be passed to override the default caption based search of suggestions.</li>
 </ul>
 </li>

package/dist/token-selector-with-externals.js

@@ -138,7 +138,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var ze=Object.
 	<slot name="items"></slot>
 	<slot id="default-slot"></slot>
 </div>
-`,Yr=0,Zt=class ki extends Lo{constructor(){super(),this._items=[],this._selectedIndexes=[],this._itemGenerator=Te,this.onDefaultSlotChange=()=>{let t=0;this.defaultSlot.assignedElements().forEach(i=>{this.isSeparator(i)||this.initListItem(i,t++)}),this.updateFocusedElement()},this.handleKeyDown=t=>{let i=!0;switch(t.key){case"ArrowDown":case"Down":this.focusIndex=Math.min(this.getListItems.length-1,this.focusIndex+1);break;case"ArrowUp":case"Up":this.focusIndex=Math.max(0,this.focusIndex-1);break;case"Enter":case"Space":case" ":this.handleSelection(this.focusIndex,t.metaKey||t.ctrlKey);break;case"End":case"PageDown":this.focusIndex=this.items.length-1;break;case"Home":case"PageUp":this.focusIndex=0;break;default:i=!1;break}i&&(t.preventDefault(),t.stopPropagation())},this._fallbackId=ki.ID+"_"+Yr++,this.addEventListener("pointerup",t=>{this.focusIndex=this.getListItems.indexOf(t.target),this.updateFocusedElement()}),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndexes&&(this.focusIndex=this.selectedIndexes[0]),this.focusIndex==-1&&this.childElementCount>0&&(this.focusIndex=0)):this.updateFocusedElement())}),this.addEventListener("blur",()=>this.removeFocusedItemAttributes())}get items(){return this._items}set items(t){this._items=t,this.render()}get itemGenerator(){return this._itemGenerator}set itemGenerator(t){this._itemGenerator=t,this.render()}get selectionType(){return this.getAttribute("selection-type")}set selectionType(t){t?this.setAttribute("selection-type",t):this.removeAttribute("selection-type")}get focusIndex(){return this.hasAttribute("focus-index")?Number(this.getAttribute("focus-index")):-1}set focusIndex(t){0<=t&&t<this.getListItems.length?this.setAttribute("focus-index",t.toString()):this.removeAttribute("focus-index")}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(t){this.toggleAttribute("focus-target",t)}getListItem(t){return this.shadowRoot?this.getListItems[t]:null}get getListItems(){return Array.prototype.slice.call(this.children).filter(t=>!this.isSeparator(t))}get selectedIndexes(){return this._selectedIndexes}set selectedIndexes(t){let i=this._selectedIndexes||[];this._selectedIndexes=t||[],i.filter(o=>!this._selectedIndexes.includes(o)).forEach(o=>{this.setSelectedAttr(this.getListItem(o),!1)}),this._selectedIndexes.filter(o=>!i.includes(o)).forEach(o=>{this.setSelectedAttr(this.getListItem(o),!0)})}static get observedAttributes(){return["focus-index","focus-target"]}is(){return ki.ID}template(){let t=document.createElement("template");return t.innerHTML=Xr,t}removeFocusedItemAttributes(){if(this.focusIndex!=-1){let t=this.getListItem(this.focusIndex);t&&(t.removeAttribute("focused"),this.removeAttribute("aria-activedescendant"))}}connectedCallback(){super.connectedCallback(),this.defaultSlot.addEventListener("slotchange",this.onDefaultSlotChange),this.hasAttribute("role")||this.setAttribute("role","listbox"),this.id||(this.id=this._fallbackId),this.render(),this.addEventListener("keydown",this.handleKeyDown),this.selectionType||(this.selectionType="trigger-only")}get defaultSlot(){return this.shadowRoot.querySelector("#default-slot")}isSeparator(t){return t.tagName=="HR"||t.getAttribute("role")=="separator"}attributeChangedCallback(t,i,o){if(t==="focus-index"){let r=this.getListItem(i);r&&r.removeAttribute("focused"),this.updateFocusedElement()}else t==="focus-target"&&(this.focusTarget?this.updateFocusedElement():document.activeElement!=this&&this.removeFocusedItemAttributes())}increaseWidthIfNeeded(){window.requestAnimationFrame(()=>{let t=Number.MAX_SAFE_INTEGER,i=getComputedStyle(this).maxWidth,o=this.offsetWidth;i.endsWith("px")&&(t=Number.parseInt(i)-o);let r=this.style.width;if(t==0||r.endsWith("px")&&o<Number.parseInt(r))this.enableLineClampOnItemsIfNeeded();else{let s=[...this.querySelectorAll("[slot='items']")].map(a=>{if(a instanceof qt){a.enableLineClamp=!1;let l=a.missingWidthForTexts;return l>t&&(a.enableLineClamp=!0),l}}),n=Math.max(...s);if(n>0){let a=o+n;this.style.width=`${a}px`,this.offsetWidth<a&&this.enableLineClampOnItemsIfNeeded()}}})}enableLineClampOnItemsIfNeeded(){this.querySelectorAll("[slot='items']").forEach(t=>{t instanceof qt&&(t.enableLineClamp=t.enableLineClamp||t.missingWidthForTexts>0)})}render(){if(!this.isConnected||!this.items)return;this.querySelectorAll("[slot='items']").forEach(o=>{this.removeChild(o)});let t=document.createDocumentFragment(),i=0;this.items.forEach((o,r)=>{let s=this.itemGenerator(o,r);this.isSeparator(s)||this.initListItem(s,i++),s.slot="items",t.appendChild(s)}),this.appendChild(t),this.updateFocusedElement()}initListItem(t,i){this.setSelectedAttr(t,this.selectedIndexes.includes(i)),t.addEventListener("click",o=>{this.handleItemClick(o,i)}),t.addEventListener("mousedown",o=>{o.button==1&&o.preventDefault()}),t.addEventListener("auxclick",o=>{this.handleItemClick(o,i)}),(!t.id||t.id.startsWith(this.id+"_item_"))&&(t.id=this.id+"_item_"+i)}ensureItemVisible(t){let i=t.getBoundingClientRect(),o=this.getBoundingClientRect();i.bottom>o.bottom?this.scrollTop+=i.bottom-o.bottom:i.top<o.top&&(this.scrollTop-=o.top-i.top)}updateFocusedElement(){let t=this.getListItem(this.focusIndex);t&&(this.focusTarget||document.activeElement==this)?(t.setAttribute("focused",""),this.setAttribute("aria-activedescendant",t.id),this.ensureItemVisible(t)):this.removeAttribute("aria-activedescendant")}handleItemClick(t,i){if(t.button!==null){let o=t.type=="auxclick"&&t.button==1||t.metaKey||t.ctrlKey;(t.button==0||t.button==1)&&this.handleSelection(i,o)}}handleSelection(t,i){let o=this.items[t];if(!o||o.disabled)return;let r=this.getListItem(t),s=this.isSelected(r);this.selectionType!=="trigger-only"&&(this.selectionType==="single"?this.selectedIndexes=s?[]:[t]:this.toggleSelection(r)?this._selectedIndexes.push(t):this.removeFromSelectedIndexes(t)),this.focusIndex=t,this.dispatchEvent(new CustomEvent("selection",{detail:{index:t,selected:this.selectionType=="trigger-only"||!s,hasModifier:i},bubbles:!0,composed:!0}))}removeFromSelectedIndexes(t){let i=this._selectedIndexes.indexOf(t);i!==-1&&this._selectedIndexes.splice(i,1)}toggleSelection(t){let i=!t.hasAttribute("selected");return this.setSelectedAttr(t,i),i}setSelectedAttr(t,i){t&&(i?t.setAttribute("selected",""):t.removeAttribute("selected"),t.setAttribute("aria-selected",String(i)))}isSelected(t){return t.hasAttribute("selected")}};Zt.ID="sd-list",Zt.ensureDefined=()=>{qt.ensureDefined(),customElements.get(Zt.ID)||customElements.define(Zt.ID,Zt)};var He=Zt;He.ensureDefined();var Ne=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 ve=class extends Ct{};ve.directiveName="unsafeSVG",ve.resultType=2;var Po=Ce(ve);var Si=class{constructor(t,i,o,r){this.inputElement=t,this.notSelectedTokensProvider=i,this.initializeCallback=r,this.filter=(s,n)=>{if(!s)return!0;if(n.disabled||n.deactivated)return!1;if(n.caption&&n.caption.toLowerCase().includes(s))return!0},He.ensureDefined(),this._tokenList=new He,this._tokenList.style.minWidth="250px",this._tokenList.addEventListener("selection",s=>{let n=s.detail.index,a=this._suggestItems[n];o(a),this.hide()}),new Ne(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.items=this._suggestItems.map(t=>({...t,contentMode:"text"})),this._tokenList.focusIndex=-1,Object.assign(this._tokenList.style,{minWidth:`${Math.max(this.popover.targetElement.offsetWidth,250)}px`}),this.popover.show()))}refreshItems(){this.isOpened&&(this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():this._tokenList.items=this._suggestItems.map(t=>({...t,contentMode:"text"})))}filterItems(t){let i=this.notSelectedTokensProvider();return t?i.filter(o=>this.filter(t,o)):i}hide(){var t;this._suggestItems=[],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 me;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]}},Jr=":host{flex-shrink:0;max-width:100%}.container{display:flex;height:28px;background-color:var(--token-background-color, #f3f3f3);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}",Zr=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
+`,Yr=0,Zt=class ki extends Lo{constructor(){super(),this._items=[],this._selectedIndexes=[],this._itemGenerator=Te,this.onDefaultSlotChange=()=>{let t=0;this.defaultSlot.assignedElements().forEach(i=>{this.isSeparator(i)||this.initListItem(i,t++)}),this.updateFocusedElement()},this.handleKeyDown=t=>{let i=!0;switch(t.key){case"ArrowDown":case"Down":this.focusIndex=Math.min(this.getListItems.length-1,this.focusIndex+1);break;case"ArrowUp":case"Up":this.focusIndex=Math.max(0,this.focusIndex-1);break;case"Enter":case"Space":case" ":this.handleSelection(this.focusIndex,t.metaKey||t.ctrlKey);break;case"End":case"PageDown":this.focusIndex=this.items.length-1;break;case"Home":case"PageUp":this.focusIndex=0;break;default:i=!1;break}i&&(t.preventDefault(),t.stopPropagation())},this._fallbackId=ki.ID+"_"+Yr++,this.addEventListener("pointerup",t=>{this.focusIndex=this.getListItems.indexOf(t.target),this.updateFocusedElement()}),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndexes&&(this.focusIndex=this.selectedIndexes[0]),this.focusIndex==-1&&this.childElementCount>0&&(this.focusIndex=0)):this.updateFocusedElement())}),this.addEventListener("blur",()=>this.removeFocusedItemAttributes())}get items(){return this._items}set items(t){this._items=t,this.render()}get itemGenerator(){return this._itemGenerator}set itemGenerator(t){this._itemGenerator=t,this.render()}get selectionType(){return this.getAttribute("selection-type")}set selectionType(t){t?this.setAttribute("selection-type",t):this.removeAttribute("selection-type")}get focusIndex(){return this.hasAttribute("focus-index")?Number(this.getAttribute("focus-index")):-1}set focusIndex(t){0<=t&&t<this.getListItems.length?this.setAttribute("focus-index",t.toString()):this.removeAttribute("focus-index")}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(t){this.toggleAttribute("focus-target",t)}getListItem(t){return this.shadowRoot?this.getListItems[t]:null}get getListItems(){return Array.prototype.slice.call(this.children).filter(t=>!this.isSeparator(t))}get selectedIndexes(){return this._selectedIndexes}set selectedIndexes(t){let i=this._selectedIndexes||[];this._selectedIndexes=t||[],i.filter(o=>!this._selectedIndexes.includes(o)).forEach(o=>{this.setSelectedAttr(this.getListItem(o),!1)}),this._selectedIndexes.filter(o=>!i.includes(o)).forEach(o=>{this.setSelectedAttr(this.getListItem(o),!0)})}static get observedAttributes(){return["focus-index","focus-target"]}is(){return ki.ID}template(){let t=document.createElement("template");return t.innerHTML=Xr,t}removeFocusedItemAttributes(){if(this.focusIndex!=-1){let t=this.getListItem(this.focusIndex);t&&(t.removeAttribute("focused"),this.removeAttribute("aria-activedescendant"))}}connectedCallback(){super.connectedCallback(),this.defaultSlot.addEventListener("slotchange",this.onDefaultSlotChange),this.hasAttribute("role")||this.setAttribute("role","listbox"),this.id||(this.id=this._fallbackId),this.render(),this.addEventListener("keydown",this.handleKeyDown),this.selectionType||(this.selectionType="trigger-only")}get defaultSlot(){return this.shadowRoot.querySelector("#default-slot")}isSeparator(t){return t.tagName=="HR"||t.getAttribute("role")=="separator"}attributeChangedCallback(t,i,o){if(t==="focus-index"){let r=this.getListItem(i);r&&r.removeAttribute("focused"),this.updateFocusedElement()}else t==="focus-target"&&(this.focusTarget?this.updateFocusedElement():document.activeElement!=this&&this.removeFocusedItemAttributes())}increaseWidthIfNeeded(){window.requestAnimationFrame(()=>{let t=Number.MAX_SAFE_INTEGER,i=getComputedStyle(this).maxWidth,o=this.offsetWidth;i.endsWith("px")&&(t=Number.parseInt(i)-o);let r=this.style.width;if(t==0||r.endsWith("px")&&o<Number.parseInt(r))this.enableLineClampOnItemsIfNeeded();else{let s=[...this.querySelectorAll("[slot='items']")].map(a=>{if(a instanceof qt){a.enableLineClamp=!1;let l=a.missingWidthForTexts;return l>t&&(a.enableLineClamp=!0),l}}),n=Math.max(...s);if(n>0){let a=o+n;this.style.width=`${a}px`,this.offsetWidth<a&&this.enableLineClampOnItemsIfNeeded()}}})}enableLineClampOnItemsIfNeeded(){this.querySelectorAll("[slot='items']").forEach(t=>{t instanceof qt&&(t.enableLineClamp=t.enableLineClamp||t.missingWidthForTexts>0)})}render(){if(!this.isConnected||!this.items)return;this.querySelectorAll("[slot='items']").forEach(o=>{this.removeChild(o)});let t=document.createDocumentFragment(),i=0;this.items.forEach((o,r)=>{let s=this.itemGenerator(o,r);this.isSeparator(s)||this.initListItem(s,i++),s.slot="items",t.appendChild(s)}),this.appendChild(t),this.updateFocusedElement()}initListItem(t,i){this.setSelectedAttr(t,this.selectedIndexes.includes(i)),t.addEventListener("click",o=>{this.handleItemClick(o,i)}),t.addEventListener("mousedown",o=>{o.button==1&&o.preventDefault()}),t.addEventListener("auxclick",o=>{this.handleItemClick(o,i)}),(!t.id||t.id.startsWith(this.id+"_item_"))&&(t.id=this.id+"_item_"+i)}ensureItemVisible(t){let i=t.getBoundingClientRect(),o=this.getBoundingClientRect();i.bottom>o.bottom?this.scrollTop+=i.bottom-o.bottom:i.top<o.top&&(this.scrollTop-=o.top-i.top)}updateFocusedElement(){let t=this.getListItem(this.focusIndex);t&&(this.focusTarget||document.activeElement==this)?(t.setAttribute("focused",""),this.setAttribute("aria-activedescendant",t.id),this.ensureItemVisible(t)):this.removeAttribute("aria-activedescendant")}handleItemClick(t,i){if(t.button!==null){let o=t.type=="auxclick"&&t.button==1||t.metaKey||t.ctrlKey;(t.button==0||t.button==1)&&this.handleSelection(i,o)}}handleSelection(t,i){let o=this.items[t];if(!o||o.disabled)return;let r=this.getListItem(t),s=this.isSelected(r);this.selectionType!=="trigger-only"&&(this.selectionType==="single"?this.selectedIndexes=s?[]:[t]:this.toggleSelection(r)?this._selectedIndexes.push(t):this.removeFromSelectedIndexes(t)),this.focusIndex=t,this.dispatchEvent(new CustomEvent("selection",{detail:{index:t,selected:this.selectionType=="trigger-only"||!s,hasModifier:i},bubbles:!0,composed:!0}))}removeFromSelectedIndexes(t){let i=this._selectedIndexes.indexOf(t);i!==-1&&this._selectedIndexes.splice(i,1)}toggleSelection(t){let i=!t.hasAttribute("selected");return this.setSelectedAttr(t,i),i}setSelectedAttr(t,i){t&&(i?t.setAttribute("selected",""):t.removeAttribute("selected"),t.setAttribute("aria-selected",String(i)))}isSelected(t){return t.hasAttribute("selected")}};Zt.ID="sd-list",Zt.ensureDefined=()=>{qt.ensureDefined(),customElements.get(Zt.ID)||customElements.define(Zt.ID,Zt)};var He=Zt;He.ensureDefined();var Ne=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 ve=class extends Ct{};ve.directiveName="unsafeSVG",ve.resultType=2;var Po=Ce(ve);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.addEventListener("selection",s=>{let n=s.detail.index,a=this._suggestItems[n];o(a),this.hide()}),new Ne(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.items=this._suggestItems.map(t=>({...t,contentMode:"text"})),this._tokenList.focusIndex=-1,Object.assign(this._tokenList.style,{minWidth:`${Math.max(this.popover.targetElement.offsetWidth,250)}px`}),this.popover.show()))}refreshItems(){this.isOpened&&(this._suggestItems=this.filterItems((this.inputElement.value||"").toLowerCase()),this._suggestItems.length==0?this.hide():this._tokenList.items=this._suggestItems.map(t=>({...t,contentMode:"text"})))}filterItems(t){let i=this.notSelectedTokensProvider();return this.filter(t,i)}hide(){var t;this._suggestItems=[],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 me;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]}},Jr=":host{flex-shrink:0;max-width:100%}.container{display:flex;height:28px;background-color:var(--token-background-color, #f3f3f3);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}",Zr=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
   <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
 </svg>`,Qr=Object.defineProperty,ts=Object.getOwnPropertyDescriptor,bt=(e,t,i,o)=>{for(var r=o>1?void 0:o?ts(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&&Qr(t,i,r),r},Ci={fromAttribute:e=>e=="true",toAttribute:e=>e},Nt,ht=(Nt=class extends U{constructor(){super(...arguments),this.value="",this.type="",this.icon="",this.iconPlaceholder="",this.iconBackgroundColor="",this._checked=!1}static get styles(){return it(Jr)}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 S`
             <div class="container">