@cas-smartdesign/token-selector 0.16.0 → 0.16.2

package/dist/docs/4_dnd.js

@@ -1 +1 @@
-import"./button.mjs";import{T as o,g as c}from"./doc.mjs";import{g as l}from"./token-provider.mjs";o.ensureDefined();const a=l(!0);a.forEach((e,d)=>e.value=d%3);const r=(e,d)=>{const t=[];a.forEach((s,n)=>{s.value==d&&t.push(n)}),e.selectedIndexes=t},i=[];let u=0;document.querySelectorAll("#dnd-example sd-token-selector").forEach(e=>{i.push(e);const d=u++;e.items=a,r(e,d),e.tokenGenerator=(t,s)=>{const n=c(t,s);return n.draggable=!0,n},e.addEventListener("token-created",t=>{const s={value:d,caption:t.detail.value,disabled:!1};a.push(s),e.items=a,e.selectedIndexes.push(a.length-1)}),e.addEventListener("tokens-selected",t=>{t.detail.selectedIndices.forEach(s=>a[s].value=d),i.forEach((s,n)=>{s!=e&&r(s,n)})}),e.addEventListener("tokens-removed",t=>t.detail.removedIndices.map(s=>a[s]).forEach(s=>s.value=-1)),e.querySelector("sd-button").addEventListener("click",()=>e.openSuggestions())});
+import"./button.mjs";import{T as o,g as l}from"./doc.mjs";import{g as u}from"./token-provider.mjs";o.ensureDefined();const d=u(!0);d.forEach((e,a)=>e.value=a%3);const i=(e,a)=>{const t=[];d.forEach((s,n)=>{s.value==a&&t.push(n)}),e.selectedIndexes=t},r=[];let c=0;const f=e=>{r.push(e);const a=c++;e.items=d,i(e,a),e.addEventListener("token-created",t=>{const s={value:a,caption:t.detail.value,disabled:!1};d.push(s),e.items=d,e.selectedIndexes.push(d.length-1)}),e.addEventListener("tokens-selected",t=>{t.detail.selectedIndices.forEach(s=>d[s].value=a),r.forEach((s,n)=>{s!=e&&i(s,n)})}),e.addEventListener("tokens-removed",t=>t.detail.removedIndices.map(s=>d[s]).forEach(s=>s.value=-1))};document.querySelectorAll("#dnd-example sd-token-selector").forEach(e=>{e.querySelector("sd-button").addEventListener("click",()=>e.openSuggestions()),e.tokenGenerator=(a,t)=>{const s=l(a,t);return s.draggable=!0,s},e.hasAttribute("different-tokens")?e.items=d.filter((a,t)=>t%2==0):f(e)});

package/dist/docs/doc.mjs

@@ -1,5 +1,7 @@
 (function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))n(s);new MutationObserver(s=>{for(const o of s)if(o.type==="childList")for(const r of o.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&n(r)}).observe(document,{childList:!0,subtree:!0});function t(s){const o={};return s.integrity&&(o.integrity=s.integrity),s.referrerPolicy&&(o.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?o.credentials="include":s.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function n(s){if(s.ep)return;s.ep=!0;const o=t(s);fetch(s.href,o)}})();const po="modulepreload",fo=function(i,e){return new URL(i,e).href},Wi={},Nt=function(e,t,n){let s=Promise.resolve();if(t&&t.length>0){const o=document.getElementsByTagName("link");s=Promise.all(t.map(r=>{if(r=fo(r,n),r in Wi)return;Wi[r]=!0;const a=r.endsWith(".css"),l=a?'[rel="stylesheet"]':"";if(!!n)for(let h=o.length-1;h>=0;h--){const p=o[h];if(p.href===r&&(!a||p.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${r}"]${l}`))return;const d=document.createElement("link");if(d.rel=a?"stylesheet":po,a||(d.as="script",d.crossOrigin=""),d.href=r,document.head.appendChild(d),a)return new Promise((h,p)=>{d.addEventListener("load",h),d.addEventListener("error",()=>p(new Error(`Unable to preload CSS for ${r}`)))})}))}return s.then(()=>e()).catch(o=>{const r=new Event("vite:preloadError",{cancelable:!0});if(r.payload=o,window.dispatchEvent(r),!r.defaultPrevented)throw o})},go=`<div id="remove-only-example" class="example-root">
 	<sd-token-selector selection-mode="remove-only"></sd-token-selector>
+	<h4>Maximum two visible lines</h4>
+	<sd-token-selector selection-mode="remove-only" style="max-height: 68px; overflow: auto"></sd-token-selector>
 	<h4>Disabled</h4>
 	<sd-token-selector selection-mode="remove-only" aria-disabled="true"></sd-token-selector>
 </div>
@@ -10,9 +12,7 @@
 }
 
 sd-token-selector {
-	padding-top: 8px;
-	padding-bottom: 8px;
-	margin: 1px;
+	margin: 8px 1px;
 }
 
 sd-token {
@@ -202,6 +202,9 @@ document.querySelectorAll("#editable-input-attributes-example sd-token-selector"
 	<sd-token-selector input-label="Third selector (explicit token type)" token-type="tokens from 3rd selector"
 		><sd-button icon="edit.svg" slot="additional-content"></sd-button
 	></sd-token-selector>
+	<sd-token-selector input-label="Fourth selector (reduced set of tokens)" different-tokens
+		><sd-button icon="edit.svg" slot="additional-content"></sd-button
+	></sd-token-selector>
 </div>
 `,To=`<h3 id="drag-and-drop-example">Drag and drop example</h3>
 `,Lo=`import "@cas-smartdesign/button";
@@ -229,19 +232,13 @@ const updateSelection = (selector: TokenSelector, selectorIndex: number) => {
 
 const allTokenSelectors: TokenSelector[] = [];
 let selectorCounter = 0;
-document.querySelectorAll("#dnd-example sd-token-selector").forEach((tokenSelector: TokenSelector) => {
+const setUpWithSharedTokens = (tokenSelector: TokenSelector) => {
     allTokenSelectors.push(tokenSelector);
     const selectorIndex = selectorCounter++;
 
     tokenSelector.items = items;
     updateSelection(tokenSelector, selectorIndex);
 
-    tokenSelector.tokenGenerator = (data: TokenData, index) => {
-        const token = generator(data, index);
-        token.draggable = true;
-        return token;
-    };
-
     tokenSelector.addEventListener("token-created", (event) => {
         const tokenData = {
             value: selectorIndex,
@@ -263,8 +260,21 @@ document.querySelectorAll("#dnd-example sd-token-selector").forEach((tokenSelect
     tokenSelector.addEventListener("tokens-removed", (event) =>
         event.detail.removedIndices.map((i) => items[i]).forEach((item) => (item.value = -1)),
     );
+};
 
+document.querySelectorAll("#dnd-example sd-token-selector").forEach((tokenSelector: TokenSelector) => {
     tokenSelector.querySelector("sd-button").addEventListener("click", () => tokenSelector.openSuggestions());
+    tokenSelector.tokenGenerator = (data: TokenData, index) => {
+        const token = generator(data, index);
+        token.draggable = true;
+        return token;
+    };
+
+    if (tokenSelector.hasAttribute("different-tokens")) {
+        tokenSelector.items = items.filter((_value, index) => index % 2 == 0);
+    } else {
+        setUpWithSharedTokens(tokenSelector);
+    }
 });
 `,Po={mainContent:Io,description:To,css:jt,initializer:{content:Lo,type:"typescript",initialize:()=>Nt(()=>import("./4_dnd.js"),__vite__mapDeps([5,3,1]),import.meta.url)}},Ro=Object.freeze(Object.defineProperty({__proto__:null,default:Po},Symbol.toStringTag,{value:"Module"})),Mo=`<div id="other-example" class="example-root">
 	<sd-token-selector input-label="Additional content" additional-icons
@@ -578,7 +588,7 @@ export function getItems(): ExtendedTokenData[] {
                 <div class="icon-wrapper" style="${le(e)}" role="img">
                     <div class="icon"></div>
                 </div>
-            `}return z}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&Gs.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Ce.ID="sd-token",Ce.ensureDefined=()=>{customElements.get(Ce.ID)||customElements.define(Ce.ID,Ce)},Ce);Me([y({type:String,attribute:!0,reflect:!0})],Te.prototype,"value",2);Me([y({type:String,attribute:!0,reflect:!0})],Te.prototype,"type",2);Me([y({type:String})],Te.prototype,"icon",2);Me([y({type:String})],Te.prototype,"iconPlaceholder",2);Me([y({type:String})],Te.prototype,"iconBackgroundColor",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-disabled"})],Te.prototype,"disabled",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-current"})],Te.prototype,"current",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-checked"})],Te.prototype,"checked",1);let An=Te;const jl=(i,e)=>{const t=document.createElement(An.ID);return i&&(t.value=i.caption,t.type=i.type,t.icon=i.icon,t.iconPlaceholder=i.iconPlaceholder,t.iconBackgroundColor=i.iconBackgroundColor,t.disabled=i.disabled,t.index=e),t};An.ensureDefined();const Kt="web application/json";class Bl{constructor(e,t,n){navigator.clipboard&&(e.addEventListener("copy",()=>{t()||this.writeToClipboard(e)}),e.addEventListener("cut",()=>{t()||(e.removeSelectionOrActiveToken(),this.writeToClipboard(e))}),e.addEventListener("paste",()=>{e.disabled||this.readFromClipboard(n)}))}writeToClipboard(e){const t=e.querySelectorAll("[slot='items'][aria-checked='true']"),n=[];if(t.length>0)t.forEach(s=>n.push(s.index));else if(e.activeTokenIndex!=-1){const s=e.activeTokenElement;s&&n.push(s.index)}if(n.length>0){const s=JSON.stringify(n.map(r=>e.items[r])),o=new Blob([s],{type:Kt});navigator.clipboard.write([new ClipboardItem({[Kt]:o})])}}async readFromClipboard(e){const t=await navigator.clipboard.read();for(const n of t)if(n.types.includes(Kt)){const o=await(await n.getType(Kt)).text(),r=JSON.parse(o);Array.isArray(r)&&e(r)}}}const zl=":host{display:flex;align-items:flex-end}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}";class Ul{constructor(e,t){this.tokenSelector=e;let n=[];const s=o=>{const r=o.target;e.contains(r)||e.removeTokens(n),n=[]};e.addEventListener("dragstart",o=>{const r=o.target;if(r instanceof An){if(r.disabled){o.preventDefault();return}r.setAttribute("aria-checked","true");const a=e.querySelectorAll("[slot='items'][aria-checked='true']");if(a.length>0){const l=Array.from(a).filter(c=>!c.disabled).map(c=>(n.push(c.index),e.items[c.index]));if(o.dataTransfer.setData("text/plain",JSON.stringify(l)),o.dataTransfer.dropEffect="move",o.dataTransfer.effectAllowed="move",a.length>1){const c=this.createCustomDragImage(r,l.length);o.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",s,{capture:!0,once:!0})}}}),e.addEventListener("dragenter",o=>{e.setAttribute("drop",""),o.preventDefault()}),e.addEventListener("dragover",o=>o.preventDefault()),e.addEventListener("dragleave",o=>{o.target==e&&e.removeAttribute("drop")}),e.addEventListener("drop",o=>{e.removeAttribute("drop");const r=o.dataTransfer.getData("text/plain");if(r)try{const a=JSON.parse(r);Array.isArray(a)&&(t(a),o.preventDefault())}catch{}}),e.addEventListener("dragend",()=>{window.removeEventListener("drop",s),n=[]})}createCustomDragImage(e,t){let n=e.cloneNode(!0);if(n.setAttribute("aria-disabled","true"),this.tokenSelector.tokenType)n.value=t+" "+this.tokenSelector.tokenType;else{const s=document.createElement("div");s.innerText="+"+(t-1),Object.assign(s.style,{position:"absolute",left:"90%",top:"75%"});const o=document.createElement("div");o.appendChild(n),o.appendChild(s),n=o}return Object.assign(n.style,{height:e.offsetHeight,outline:"none",maxWidth:"500px",position:"absolute",display:"block",left:"-99999px",overflow:"visible",margin:"1px"}),n.slot="items",this.tokenSelector.appendChild(n),requestAnimationFrame(()=>n.remove()),n}}var Fl=Object.defineProperty,Hl=Object.getOwnPropertyDescriptor,fe=(i,e,t,n)=>{for(var s=n>1?void 0:n?Hl(e,t):e,o=i.length-1,r;o>=0;o--)(r=i[o])&&(s=(n?r(e,t,s):r(s))||s);return n&&s&&Fl(e,t,s),s};function Wl(i,e){let t;return function(...n){t!=null&&clearTimeout(t),t=window.setTimeout(()=>i(...n),e)}}var Se;const de=(Se=class extends be{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=jl,this._autoSuggestItemGenerator=Ks,this.additionalTokenCommittingKeys=[],this._activeTokenIndex=-1,this.handleInputKeyDown=(e,t)=>{if((e.key==="Enter"||this.additionalTokenCommittingKeys.includes(e.key))&&t.value){e.preventDefault(),e.stopPropagation(),this.commitTokenValue(t.value);return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide();break}default:this.handleKeyDown(e)}},this.handleKeyDown=e=>{switch(e.key){case"ArrowLeft":{this.hasInputValue||this.updateActiveToken(-1);break}case"ArrowRight":{this.hasInputValue||this.updateActiveToken(1);break}case"Enter":{if(!this.hasInputValue&&this.activeTokenIndex!=-1){const t=this.activeTokenElement;e.getModifierState("Control")?t.checked=!t.checked:(t.checked=!0,this.onTokenClick(t,!1)),document.activeElement!=this&&this.focus()}break}case"Backspace":{this.hasInputValue||(this.activeTokenIndex==-1?this.updateActiveToken(-1):this.removeSelectionOrActiveToken());break}case"Clear":case"Delete":{this.removeSelectionOrActiveToken();break}case"a":{!this.hasInputValue&&e.getModifierState("Control")&&(this.querySelectorAll("[slot='items']").forEach(t=>t.checked=!0),e.preventDefault(),e.stopPropagation());break}}},this.handleWindowPointerDown=e=>{const t=this.inputElement;if(!t||!t.value)return;e.composedPath().some(s=>{if(s instanceof HTMLElement&&(e.composedPath().indexOf(t)>-1||s.getAttribute("popover-for")==="token-autosuggest-popover"))return!0})||this.commitTokenValue(t.value)},this.debouncedShowTokenSuggestPopover=Wl(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return ht(zl)}get tokenGenerator(){return this._tokenGenerator}set tokenGenerator(e){this._tokenGenerator=e,this.render()}get autoSuggestItemGenerator(){return this._autoSuggestItemGenerator}set autoSuggestItemGenerator(e){this._autoSuggestItemGenerator=e,this._tokenSuggestPopover&&(this._tokenSuggestPopover.list.itemGenerator=e)}setAdditionalTokenCommittingKeys(e){this.additionalTokenCommittingKeys=e}openSuggestions(){this.inputElement&&(this.focus(),this.tokenSuggestPopover.show())}focus(){this.inputElement?this.inputElement.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?X`<div class="container" tabindex="0">
+            `}return z}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&Gs.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Ce.ID="sd-token",Ce.ensureDefined=()=>{customElements.get(Ce.ID)||customElements.define(Ce.ID,Ce)},Ce);Me([y({type:String,attribute:!0,reflect:!0})],Te.prototype,"value",2);Me([y({type:String,attribute:!0,reflect:!0})],Te.prototype,"type",2);Me([y({type:String})],Te.prototype,"icon",2);Me([y({type:String})],Te.prototype,"iconPlaceholder",2);Me([y({type:String})],Te.prototype,"iconBackgroundColor",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-disabled"})],Te.prototype,"disabled",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-current"})],Te.prototype,"current",2);Me([y({converter:Oi,reflect:!0,attribute:"aria-checked"})],Te.prototype,"checked",1);let An=Te;const jl=(i,e)=>{const t=document.createElement(An.ID);return i&&(t.value=i.caption,t.type=i.type,t.icon=i.icon,t.iconPlaceholder=i.iconPlaceholder,t.iconBackgroundColor=i.iconBackgroundColor,t.disabled=i.disabled,t.index=e),t};An.ensureDefined();const Kt="web application/json";class Bl{constructor(e,t,n){navigator.clipboard&&(e.addEventListener("copy",()=>{t()||this.writeToClipboard(e)}),e.addEventListener("cut",()=>{t()||(e.removeSelectionOrActiveToken(),this.writeToClipboard(e))}),e.addEventListener("paste",()=>{e.disabled||this.readFromClipboard(n)}))}writeToClipboard(e){const t=e.querySelectorAll("[slot='items'][aria-checked='true']"),n=[];if(t.length>0)t.forEach(s=>n.push(s.index));else if(e.activeTokenIndex!=-1){const s=e.activeTokenElement;s&&n.push(s.index)}if(n.length>0){const s=JSON.stringify(n.map(r=>e.items[r])),o=new Blob([s],{type:Kt});navigator.clipboard.write([new ClipboardItem({[Kt]:o})])}}async readFromClipboard(e){const t=await navigator.clipboard.read();for(const n of t)if(n.types.includes(Kt)){const o=await(await n.getType(Kt)).text(),r=JSON.parse(o);Array.isArray(r)&&e(r)}}}const zl=":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}";class Ul{constructor(e,t){this.tokenSelector=e;const n=new Map,s=o=>{const r=o.target;if(!e.contains(r)){const a=o.addedIndexes;a&&e.removeTokens(a.map(l=>n.get(l)))}n.clear()};e.addEventListener("dragstart",o=>{const r=o.target;if(r instanceof An){if(r.disabled){o.preventDefault();return}r.setAttribute("aria-checked","true");const a=e.querySelectorAll("[slot='items'][aria-checked='true']");if(a.length>0){const l=Array.from(a).filter(c=>!c.disabled).map((c,d)=>(n.set(d,c.index),e.items[c.index]));if(o.dataTransfer.setData("text/sd-token-selector",JSON.stringify(l)),o.dataTransfer.dropEffect="move",o.dataTransfer.effectAllowed="move",a.length>1){const c=this.createCustomDragImage(r,l.length);o.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",s,{once:!0})}}}),e.addEventListener("dragenter",o=>{e.setAttribute("drop",""),o.preventDefault()}),e.addEventListener("dragover",o=>o.preventDefault()),e.addEventListener("dragleave",o=>{o.target==e&&e.removeAttribute("drop")}),e.addEventListener("drop",o=>{e.removeAttribute("drop");const r=o.dataTransfer.getData("text/sd-token-selector");if(r)try{const a=JSON.parse(r);Array.isArray(a)&&(o.addedIndexes=t(a),o.preventDefault())}catch{}}),e.addEventListener("dragend",()=>{window.removeEventListener("drop",s),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 o=document.createElement("div");o.appendChild(n),o.appendChild(s),n=o}return Object.assign(n.style,{height:e.offsetHeight,outline:"none",maxWidth:"500px",position:"absolute",display:"block",left:"-99999px",overflow:"visible",margin:"1px"}),n.slot="items",this.tokenSelector.appendChild(n),requestAnimationFrame(()=>n.remove()),n}}var Fl=Object.defineProperty,Hl=Object.getOwnPropertyDescriptor,fe=(i,e,t,n)=>{for(var s=n>1?void 0:n?Hl(e,t):e,o=i.length-1,r;o>=0;o--)(r=i[o])&&(s=(n?r(e,t,s):r(s))||s);return n&&s&&Fl(e,t,s),s};function Wl(i,e){let t;return function(...n){t!=null&&clearTimeout(t),t=window.setTimeout(()=>i(...n),e)}}var Se;const de=(Se=class extends be{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=jl,this._autoSuggestItemGenerator=Ks,this.additionalTokenCommittingKeys=[],this._activeTokenIndex=-1,this.handleInputKeyDown=(e,t)=>{if((e.key==="Enter"||this.additionalTokenCommittingKeys.includes(e.key))&&t.value){e.preventDefault(),e.stopPropagation(),this.commitTokenValue(t.value);return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide();break}default:this.handleKeyDown(e)}},this.handleKeyDown=e=>{switch(e.key){case"ArrowLeft":{this.hasInputValue||this.updateActiveToken(-1);break}case"ArrowRight":{this.hasInputValue||this.updateActiveToken(1);break}case"Enter":{if(!this.hasInputValue&&this.activeTokenIndex!=-1){const t=this.activeTokenElement;e.getModifierState("Control")?t.checked=!t.checked:(t.checked=!0,this.onTokenClick(t,!1)),document.activeElement!=this&&this.focus()}break}case"Backspace":{this.hasInputValue||(this.activeTokenIndex==-1?this.updateActiveToken(-1):this.removeSelectionOrActiveToken());break}case"Clear":case"Delete":{this.removeSelectionOrActiveToken();break}case"a":{!this.hasInputValue&&e.getModifierState("Control")&&(this.querySelectorAll("[slot='items']").forEach(t=>t.checked=!0),e.preventDefault(),e.stopPropagation());break}}},this.handleWindowPointerDown=e=>{const t=this.inputElement;if(!t||!t.value)return;e.composedPath().some(s=>{if(s instanceof HTMLElement&&(e.composedPath().indexOf(t)>-1||s.getAttribute("popover-for")==="token-autosuggest-popover"))return!0})||this.commitTokenValue(t.value)},this.debouncedShowTokenSuggestPopover=Wl(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return ht(zl)}get tokenGenerator(){return this._tokenGenerator}set tokenGenerator(e){this._tokenGenerator=e,this.render()}get autoSuggestItemGenerator(){return this._autoSuggestItemGenerator}set autoSuggestItemGenerator(e){this._autoSuggestItemGenerator=e,this._tokenSuggestPopover&&(this._tokenSuggestPopover.list.itemGenerator=e)}setAdditionalTokenCommittingKeys(e){this.additionalTokenCommittingKeys=e}openSuggestions(){this.inputElement&&(this.focus(),this.tokenSuggestPopover.show())}focus(){this.inputElement?this.inputElement.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?X`<div class="container" tabindex="0">
                       <slot name="items"
                           >${this.placeholder?X`<span part="remove-only-placeholder" class="placeholder"
                                     >${this.placeholder}</span
@@ -600,7 +610,7 @@ export function getItems(): ExtendedTokenData[] {
                       ><div class="token-wrapper" slot="prefix"><slot name="items"></slot></div>
                   </sd-lit-input>
                   <slot class="additonal-content" name="additional-content"></slot>
-              `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.hasAttribute("tabIndex")||(this.tabIndex=0),this.addEventListener("focusout",t=>{const n=t.relatedTarget;!this.contains(n)&&!this.shadowRoot.contains(n)&&this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(s=>s.checked=!1)}),new Bl(this,()=>{var t;return(t=this.inputElement)==null?void 0:t.value},t=>this.addMatchingItems(t)),new Ul(this,t=>this.addMatchingItems(t))}addMatchingItems(e){const t=e.map(n=>{const s=n.caption==null?-1:this.findIndex(n);return s!=-1&&!this.items[s].disabled&&!this.selectedIndexes.includes(s)?s:-1}).filter(n=>n!=-1);t.length>0&&this.handleTokenSelection(t)}removeSelectionOrActiveToken(){if(!this.disabled){const e=this.querySelectorAll("[slot='items'][aria-checked='true']");if(e.length>0){const t=Array.from(e);this.removeTokens(t.filter(n=>!n.disabled).map(n=>n.index))}else if(this.activeTokenIndex!=-1){const t=this.activeTokenElement;t&&!t.disabled&&this.removeTokens([t.index])}}}updateActiveToken(e){const t=this.querySelectorAll("[slot='items']").length-1;this.activeTokenIndex==-1?e<0&&(this.activeTokenIndex=t):this.activeTokenIndex==t&&e>0?(this.activeTokenIndex=-1,this.focus()):this.activeTokenIndex=Math.max(0,Math.min(t,this.activeTokenIndex+e))}commitTokenValue(e){if(this.disabled)return;if(this.tokenSuggestPopover.isOpened){const n=this.tokenSuggestPopover.focusedSuggestToken;if(n){if(!n.disabled){const s=this.findIndex(n);this.handleTokenSelection([s]),this.tokenSuggestPopover.hide()}return}}if(!(e!=null&&e.trim()))return;const t=this.items.findIndex(n=>this.caseSensitive?n.caption==e:n.caption.toLowerCase()==e.toLowerCase());this.selectedIndexes.includes(t)||(t>=0?this.handleTokenSelection([t]):this.handleTokenCreation(e)),this.requestUpdate("selectedIndexes"),this.tokenSuggestPopover.hide(),window.removeEventListener("pointerdown",this.handleWindowPointerDown)}updated(e){if(super.updated(e),this._tokenSuggestPopover&&(this.tokenSuggestPopover.list.className=this.suggestListClass||"",this.suggestionFilter&&(this.tokenSuggestPopover.filter=this.suggestionFilter)),e.has("selectionMode"))if(this.selectionMode=="multi"){this.setAttribute("aria-haspopup","listbox");const t=this.inputElement;t.addEventListener("immediate-value-change",n=>this.handleInputValueChange(n)),t.addEventListener("keydown",n=>this.handleInputKeyDown(n,t)),window.queueMicrotask(()=>this.tokenSuggestPopover)}else this.removeAttribute("aria-haspopup"),this.addEventListener("keydown",this.handleKeyDown),this._tokenSuggestPopover&&(this._tokenSuggestPopover.popover.remove(),this._tokenSuggestPopover=null);(e.size==0||e.has("selectionMode")||e.has("items")||e.has("selectedIndexes")||e.has("disabled"))&&this.updateItems()}handleInputValueChange(e){e.detail.value?(this.activeTokenIndex=-1,this.cancelSearch=!1,this.debouncedShowTokenSuggestPopover(),window.addEventListener("pointerdown",this.handleWindowPointerDown)):(this.tokenSuggestPopover.hide(),this.cancelSearch=!0)}showFilteredTokenSuggestions(){!this.cancelSearch&&this.inputElement.value&&this.tokenSuggestPopover.show()}isTokenNotSelected(e){return!this.selectedIndexes.includes(e)}get tokenSuggestPopover(){return!this._tokenSuggestPopover&&this.inputElement&&(this._tokenSuggestPopover=new Ll(this.inputElement,()=>this.items.filter((e,t)=>!e.disabled&&this.isTokenNotSelected(t)),e=>{const t=this.findIndex(e);this.handleTokenSelection([t]),window.removeEventListener("pointerdown",this.handleWindowPointerDown)},e=>{this.appendChild(e.popover),this.dispatchEvent(new CustomEvent("auto-suggest-initialized")),e.popover.addEventListener("close",()=>{this.inputElement.value&&!this.contains(document.activeElement)&&(this.inputElement.value="")})}),this._tokenSuggestPopover.list.itemGenerator=this._autoSuggestItemGenerator,this._tokenSuggestPopover.list.className=this.suggestListClass,this.suggestionFilter&&(this._tokenSuggestPopover.filter=this.suggestionFilter)),this._tokenSuggestPopover}updateItems(){if(!this.isConnected||!this.items)return;const e=this.inputElement;e&&(!this._tokenSuggestPopover||!this._tokenSuggestPopover.isOpened)&&(e.value=""),this.querySelectorAll("[slot='items']").forEach(s=>{this.removeChild(s)});const t=document.createDocumentFragment();let n=[];this.selectionMode=="remove-only"?n=this.items.map(s=>this.disableIfNeeded(s)):this.selectedIndexes.forEach(s=>{n.push(this.disableIfNeeded(this.items[s]))}),n.forEach(s=>{const o=this.tokenGenerator(s,this.findIndex(s));o.slot="items",t.appendChild(o),o.id||(o.id=window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)),o.setClickHandler(()=>this.onTokenClick(o,!0)),o.addEventListener("click",()=>{document.activeElement!=this&&this.focus()}),o.setDeleteHandler(r=>this.removeTokens([r]))}),this.appendChild(t),this._tokenSuggestPopover&&this._tokenSuggestPopover.refreshItems()}removeTokens(e){this.disabled||(this.activeTokenIndex!=-1&&e.includes(this.activeTokenElement.index)&&(this.activeTokenIndex=-1),this.selectionMode=="remove-only"?this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e}})):(this.selectedIndexes=this.selectedIndexes.filter(t=>!e.includes(t)),this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e,selectedIndices:[...this.selectedIndexes]}}))))}onTokenClick(e,t){let n;this.querySelectorAll("[slot='items']").forEach((s,o)=>{e==s?n=o:s.setAttribute("aria-checked","false")}),this.activeTokenIndex=n,this.setAttribute("aria-activedescendant",this.activeTokenElement.id),this._tokenSuggestPopover&&this._tokenSuggestPopover.isOpened&&this._tokenSuggestPopover.hide(),this.dispatchEvent(new CustomEvent("token-clicked",{detail:{index:e.index,tokenElement:e,byPointerDevice:t}}))}disableIfNeeded(e){return this.disabled?{...e,disabled:!0}:e}handleTokenSelection(e){this.selectedIndexes=this.selectedIndexes.concat(e),this.dispatchEvent(new CustomEvent("tokens-selected",{detail:{newIndices:e,selectedIndices:[...this.selectedIndexes]}}))}handleTokenCreation(e){this.dispatchEvent(new CustomEvent("token-created",{detail:{value:e}}))}get inputElement(){return this.shadowRoot.querySelector(".input")}get activeTokenElement(){return this.getTokenElement(this.activeTokenIndex)}getTokenElement(e){return this.querySelector("[slot='items']:nth-of-type("+(e+1)+")")}findIndex(e){return this.items.findIndex(t=>t.caption===e.caption)}get activeTokenIndex(){return this._activeTokenIndex}set activeTokenIndex(e){if(this._activeTokenIndex!=-1){const t=this.activeTokenElement;t&&(t.current=!1)}if(this._activeTokenIndex=e,e==-1)this.removeAttribute("aria-activedescendant");else{const t=this.activeTokenElement;t.current=!0,this.setAttribute("aria-activedescendant",t.id)}}get hasInputValue(){var e;return!!((e=this.inputElement)!=null&&e.value)}},Se.ID="sd-token-selector",Se.ensureDefined=()=>{An.ensureDefined(),customElements.get(Se.ID)||customElements.define(Se.ID,Se)},Se.shadowRootOptions={...be.shadowRootOptions,delegatesFocus:!0},Se);fe([y({type:String,attribute:"selection-mode",reflect:!0})],de.prototype,"selectionMode",2);fe([y({type:Array,attribute:!1})],de.prototype,"items",2);fe([y({type:Array,attribute:!1})],de.prototype,"selectedIndexes",2);fe([y({type:String,reflect:!0})],de.prototype,"placeholder",2);fe([y({type:String,reflect:!0,attribute:"suggest-list-class"})],de.prototype,"suggestListClass",2);fe([y({type:String,reflect:!0,attribute:"input-label"})],de.prototype,"inputLabel",2);fe([y({converter:{fromAttribute:i=>i=="true",toAttribute:i=>i},reflect:!0,attribute:"aria-disabled"})],de.prototype,"disabled",2);fe([y({type:String,attribute:!0})],de.prototype,"validationMessage",2);fe([y({type:String,attribute:!0})],de.prototype,"validationIconSrc",2);fe([y({converter:ln.levelConverter,attribute:!0,reflect:!0})],de.prototype,"validationLevel",2);fe([y({type:String,reflect:!0,attribute:"token-type"})],de.prototype,"tokenType",2);fe([y({type:Boolean,reflect:!0,attribute:"case-sensitive"})],de.prototype,"caseSensitive",2);let sh=de;function ar(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}function ql(i){if(i.__esModule)return i;var e=i.default;if(typeof e=="function"){var t=function n(){return this instanceof n?Reflect.construct(e,arguments,this.constructor):e.apply(this,arguments)};t.prototype=e.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(i).forEach(function(n){var s=Object.getOwnPropertyDescriptor(i,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:function(){return i[n]}})}),t}var Ii={exports:{}},U=String,lr=function(){return{isColorSupported:!1,reset:U,bold:U,dim:U,italic:U,underline:U,inverse:U,hidden:U,strikethrough:U,black:U,red:U,green:U,yellow:U,blue:U,magenta:U,cyan:U,white:U,gray:U,bgBlack:U,bgRed:U,bgGreen:U,bgYellow:U,bgBlue:U,bgMagenta:U,bgCyan:U,bgWhite:U}};Ii.exports=lr();Ii.exports.createColors=lr;var Vl=Ii.exports;const Gl={},Kl=Object.freeze(Object.defineProperty({__proto__:null,default:Gl},Symbol.toStringTag,{value:"Module"})),ye=ql(Kl);let gs=Vl,ms=ye,ni=class cr extends Error{constructor(e,t,n,s,o,r){super(e),this.name="CssSyntaxError",this.reason=e,o&&(this.file=o),s&&(this.source=s),r&&(this.plugin=r),typeof t<"u"&&typeof n<"u"&&(typeof t=="number"?(this.line=t,this.column=n):(this.line=t.line,this.column=t.column,this.endLine=n.line,this.endColumn=n.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,cr)}setMessage(){this.message=this.plugin?this.plugin+": ":"",this.message+=this.file?this.file:"<css input>",typeof this.line<"u"&&(this.message+=":"+this.line+":"+this.column),this.message+=": "+this.reason}showSourceCode(e){if(!this.source)return"";let t=this.source;e==null&&(e=gs.isColorSupported),ms&&e&&(t=ms(t));let n=t.split(/\r?\n/),s=Math.max(this.line-3,0),o=Math.min(this.line+2,n.length),r=String(o).length,a,l;if(e){let{bold:c,gray:d,red:h}=gs.createColors(!0);a=p=>c(h(p)),l=p=>d(p)}else a=l=c=>c;return n.slice(s,o).map((c,d)=>{let h=s+1+d,p=" "+(" "+h).slice(-r)+" | ";if(h===this.line){let m=l(p.replace(/\d/g," "))+c.slice(0,this.column-1).replace(/[^\t]/g," ");return a(">")+l(p)+c+`
+              `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.hasAttribute("tabIndex")||(this.tabIndex=0),this.addEventListener("focusout",t=>{const n=t.relatedTarget;!this.contains(n)&&!this.shadowRoot.contains(n)&&this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(s=>s.checked=!1)}),new Bl(this,()=>{var t;return(t=this.inputElement)==null?void 0:t.value},t=>this.addMatchingItems(t)),new Ul(this,t=>this.addMatchingItems(t))}addMatchingItems(e){const t=[],n=e.map((s,o)=>{const r=s.caption==null?-1:this.findIndex(s);return r!=-1&&!this.items[r].disabled&&!this.selectedIndexes.includes(r)?(t.push(o),r):-1}).filter(s=>s!=-1);return n.length>0&&this.handleTokenSelection(n),t}removeSelectionOrActiveToken(){if(!this.disabled){const e=this.querySelectorAll("[slot='items'][aria-checked='true']");if(e.length>0){const t=Array.from(e);this.removeTokens(t.filter(n=>!n.disabled).map(n=>n.index))}else if(this.activeTokenIndex!=-1){const t=this.activeTokenElement;t&&!t.disabled&&this.removeTokens([t.index])}}}updateActiveToken(e){const t=this.querySelectorAll("[slot='items']").length-1;this.activeTokenIndex==-1?e<0&&(this.activeTokenIndex=t):this.activeTokenIndex==t&&e>0?(this.activeTokenIndex=-1,this.focus()):this.activeTokenIndex=Math.max(0,Math.min(t,this.activeTokenIndex+e))}commitTokenValue(e){if(this.disabled)return;if(this.tokenSuggestPopover.isOpened){const n=this.tokenSuggestPopover.focusedSuggestToken;if(n){if(!n.disabled){const s=this.findIndex(n);this.handleTokenSelection([s]),this.tokenSuggestPopover.hide()}return}}if(!(e!=null&&e.trim()))return;const t=this.items.findIndex(n=>this.caseSensitive?n.caption==e:n.caption.toLowerCase()==e.toLowerCase());this.selectedIndexes.includes(t)||(t>=0?this.handleTokenSelection([t]):this.handleTokenCreation(e)),this.requestUpdate("selectedIndexes"),this.tokenSuggestPopover.hide(),window.removeEventListener("pointerdown",this.handleWindowPointerDown)}updated(e){if(super.updated(e),this._tokenSuggestPopover&&(this.tokenSuggestPopover.list.className=this.suggestListClass||"",this.suggestionFilter&&(this.tokenSuggestPopover.filter=this.suggestionFilter)),e.has("selectionMode"))if(this.selectionMode=="multi"){this.setAttribute("aria-haspopup","listbox");const t=this.inputElement;t.addEventListener("immediate-value-change",n=>this.handleInputValueChange(n)),t.addEventListener("keydown",n=>this.handleInputKeyDown(n,t)),window.queueMicrotask(()=>this.tokenSuggestPopover)}else this.removeAttribute("aria-haspopup"),this.addEventListener("keydown",this.handleKeyDown),this._tokenSuggestPopover&&(this._tokenSuggestPopover.popover.remove(),this._tokenSuggestPopover=null);(e.size==0||e.has("selectionMode")||e.has("items")||e.has("selectedIndexes")||e.has("disabled"))&&this.updateItems()}handleInputValueChange(e){e.detail.value?(this.activeTokenIndex=-1,this.cancelSearch=!1,this.debouncedShowTokenSuggestPopover(),window.addEventListener("pointerdown",this.handleWindowPointerDown)):(this.tokenSuggestPopover.hide(),this.cancelSearch=!0)}showFilteredTokenSuggestions(){!this.cancelSearch&&this.inputElement.value&&this.tokenSuggestPopover.show()}isTokenNotSelected(e){return!this.selectedIndexes.includes(e)}get tokenSuggestPopover(){return!this._tokenSuggestPopover&&this.inputElement&&(this._tokenSuggestPopover=new Ll(this.inputElement,()=>this.items.filter((e,t)=>!e.disabled&&this.isTokenNotSelected(t)),e=>{const t=this.findIndex(e);this.handleTokenSelection([t]),window.removeEventListener("pointerdown",this.handleWindowPointerDown)},e=>{this.appendChild(e.popover),this.dispatchEvent(new CustomEvent("auto-suggest-initialized")),e.popover.addEventListener("close",()=>{this.inputElement.value&&!this.contains(document.activeElement)&&(this.inputElement.value="")})}),this._tokenSuggestPopover.list.itemGenerator=this._autoSuggestItemGenerator,this._tokenSuggestPopover.list.className=this.suggestListClass,this.suggestionFilter&&(this._tokenSuggestPopover.filter=this.suggestionFilter)),this._tokenSuggestPopover}updateItems(){if(!this.isConnected||!this.items)return;const e=this.inputElement;e&&(!this._tokenSuggestPopover||!this._tokenSuggestPopover.isOpened)&&(e.value=""),this.querySelectorAll("[slot='items']").forEach(s=>{this.removeChild(s)});const t=document.createDocumentFragment();let n=[];this.selectionMode=="remove-only"?n=this.items.map(s=>this.disableIfNeeded(s)):this.selectedIndexes.forEach(s=>{n.push(this.disableIfNeeded(this.items[s]))}),n.forEach(s=>{const o=this.tokenGenerator(s,this.findIndex(s));o.slot="items",t.appendChild(o),o.id||(o.id=window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)),o.setClickHandler(()=>this.onTokenClick(o,!0)),o.addEventListener("click",()=>{document.activeElement!=this&&this.focus()}),o.setDeleteHandler(r=>this.removeTokens([r]))}),this.appendChild(t),this._tokenSuggestPopover&&this._tokenSuggestPopover.refreshItems()}removeTokens(e){this.disabled||(this.activeTokenIndex!=-1&&e.includes(this.activeTokenElement.index)&&(this.activeTokenIndex=-1),this.selectionMode=="remove-only"?this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e}})):(this.selectedIndexes=this.selectedIndexes.filter(t=>!e.includes(t)),this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e,selectedIndices:[...this.selectedIndexes]}}))))}onTokenClick(e,t){let n;this.querySelectorAll("[slot='items']").forEach((s,o)=>{e==s?n=o:s.setAttribute("aria-checked","false")}),this.activeTokenIndex=n,this.setAttribute("aria-activedescendant",this.activeTokenElement.id),this._tokenSuggestPopover&&this._tokenSuggestPopover.isOpened&&this._tokenSuggestPopover.hide(),this.dispatchEvent(new CustomEvent("token-clicked",{detail:{index:e.index,tokenElement:e,byPointerDevice:t}}))}disableIfNeeded(e){return this.disabled?{...e,disabled:!0}:e}handleTokenSelection(e){this.selectedIndexes=this.selectedIndexes.concat(e),this.dispatchEvent(new CustomEvent("tokens-selected",{detail:{newIndices:e,selectedIndices:[...this.selectedIndexes]}}))}handleTokenCreation(e){this.dispatchEvent(new CustomEvent("token-created",{detail:{value:e}}))}get inputElement(){return this.shadowRoot.querySelector(".input")}get activeTokenElement(){return this.getTokenElement(this.activeTokenIndex)}getTokenElement(e){return this.querySelector("[slot='items']:nth-of-type("+(e+1)+")")}findIndex(e){return this.items.findIndex(t=>t.caption===e.caption)}get activeTokenIndex(){return this._activeTokenIndex}set activeTokenIndex(e){if(this._activeTokenIndex!=-1){const t=this.activeTokenElement;t&&(t.current=!1)}if(this._activeTokenIndex=e,e==-1)this.removeAttribute("aria-activedescendant");else{const t=this.activeTokenElement;t.current=!0,this.setAttribute("aria-activedescendant",t.id)}}get hasInputValue(){var e;return!!((e=this.inputElement)!=null&&e.value)}},Se.ID="sd-token-selector",Se.ensureDefined=()=>{An.ensureDefined(),customElements.get(Se.ID)||customElements.define(Se.ID,Se)},Se.shadowRootOptions={...be.shadowRootOptions,delegatesFocus:!0},Se);fe([y({type:String,attribute:"selection-mode",reflect:!0})],de.prototype,"selectionMode",2);fe([y({type:Array,attribute:!1})],de.prototype,"items",2);fe([y({type:Array,attribute:!1})],de.prototype,"selectedIndexes",2);fe([y({type:String,reflect:!0})],de.prototype,"placeholder",2);fe([y({type:String,reflect:!0,attribute:"suggest-list-class"})],de.prototype,"suggestListClass",2);fe([y({type:String,reflect:!0,attribute:"input-label"})],de.prototype,"inputLabel",2);fe([y({converter:{fromAttribute:i=>i=="true",toAttribute:i=>i},reflect:!0,attribute:"aria-disabled"})],de.prototype,"disabled",2);fe([y({type:String,attribute:!0})],de.prototype,"validationMessage",2);fe([y({type:String,attribute:!0})],de.prototype,"validationIconSrc",2);fe([y({converter:ln.levelConverter,attribute:!0,reflect:!0})],de.prototype,"validationLevel",2);fe([y({type:String,reflect:!0,attribute:"token-type"})],de.prototype,"tokenType",2);fe([y({type:Boolean,reflect:!0,attribute:"case-sensitive"})],de.prototype,"caseSensitive",2);let sh=de;function ar(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}function ql(i){if(i.__esModule)return i;var e=i.default;if(typeof e=="function"){var t=function n(){return this instanceof n?Reflect.construct(e,arguments,this.constructor):e.apply(this,arguments)};t.prototype=e.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(i).forEach(function(n){var s=Object.getOwnPropertyDescriptor(i,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:function(){return i[n]}})}),t}var Ii={exports:{}},U=String,lr=function(){return{isColorSupported:!1,reset:U,bold:U,dim:U,italic:U,underline:U,inverse:U,hidden:U,strikethrough:U,black:U,red:U,green:U,yellow:U,blue:U,magenta:U,cyan:U,white:U,gray:U,bgBlack:U,bgRed:U,bgGreen:U,bgYellow:U,bgBlue:U,bgMagenta:U,bgCyan:U,bgWhite:U}};Ii.exports=lr();Ii.exports.createColors=lr;var Vl=Ii.exports;const Gl={},Kl=Object.freeze(Object.defineProperty({__proto__:null,default:Gl},Symbol.toStringTag,{value:"Module"})),ye=ql(Kl);let gs=Vl,ms=ye,ni=class cr extends Error{constructor(e,t,n,s,o,r){super(e),this.name="CssSyntaxError",this.reason=e,o&&(this.file=o),s&&(this.source=s),r&&(this.plugin=r),typeof t<"u"&&typeof n<"u"&&(typeof t=="number"?(this.line=t,this.column=n):(this.line=t.line,this.column=t.column,this.endLine=n.line,this.endColumn=n.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,cr)}setMessage(){this.message=this.plugin?this.plugin+": ":"",this.message+=this.file?this.file:"<css input>",typeof this.line<"u"&&(this.message+=":"+this.line+":"+this.column),this.message+=": "+this.reason}showSourceCode(e){if(!this.source)return"";let t=this.source;e==null&&(e=gs.isColorSupported),ms&&e&&(t=ms(t));let n=t.split(/\r?\n/),s=Math.max(this.line-3,0),o=Math.min(this.line+2,n.length),r=String(o).length,a,l;if(e){let{bold:c,gray:d,red:h}=gs.createColors(!0);a=p=>c(h(p)),l=p=>d(p)}else a=l=c=>c;return n.slice(s,o).map((c,d)=>{let h=s+1+d,p=" "+(" "+h).slice(-r)+" | ";if(h===this.line){let m=l(p.replace(/\d/g," "))+c.slice(0,this.column-1).replace(/[^\t]/g," ");return a(">")+l(p)+c+`
  `+m+a("^")}return" "+l(p)+c}).join(`
 `)}toString(){let e=this.showSourceCode();return e&&(e=`
 

package/dist/drag-and-drop-extension.d.ts

@@ -1,6 +1,6 @@
 import TokenSelector from "./token-selector";
 export default class DnDExtension {
     private tokenSelector;
-    constructor(tokenSelector: TokenSelector, addMatchingItems: (item: unknown[]) => void);
+    constructor(tokenSelector: TokenSelector, addMatchingItems: (item: unknown[]) => number[]);
     private createCustomDragImage;
 }

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

@@ -152,7 +152,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var ze=Object.
                 <div class="icon-wrapper" style="${V(e)}" role="img">
                     <div class="icon"></div>
                 </div>
-            `}return b}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&zt.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Nt.ID="sd-token",Nt.ensureDefined=()=>{customElements.get(Nt.ID)||customElements.define(Nt.ID,Nt)},Nt);bt([p({type:String,attribute:!0,reflect:!0})],ht.prototype,"value",2);bt([p({type:String,attribute:!0,reflect:!0})],ht.prototype,"type",2);bt([p({type:String})],ht.prototype,"icon",2);bt([p({type:String})],ht.prototype,"iconPlaceholder",2);bt([p({type:String})],ht.prototype,"iconBackgroundColor",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-disabled"})],ht.prototype,"disabled",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-current"})],ht.prototype,"current",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-checked"})],ht.prototype,"checked",1);var Ue=ht,Oo=(e,t)=>{let i=document.createElement(Ue.ID);return e&&(i.value=e.caption,i.type=e.type,i.icon=e.icon,i.iconPlaceholder=e.iconPlaceholder,i.iconBackgroundColor=e.iconBackgroundColor,i.disabled=e.disabled,i.index=t),i};Ue.ensureDefined();var Be="web application/json",_i=class{constructor(t,i,o){navigator.clipboard&&(t.addEventListener("copy",()=>{i()||this.writeToClipboard(t)}),t.addEventListener("cut",()=>{i()||(t.removeSelectionOrActiveToken(),this.writeToClipboard(t))}),t.addEventListener("paste",()=>{t.disabled||this.readFromClipboard(o)}))}writeToClipboard(t){let i=t.querySelectorAll("[slot='items'][aria-checked='true']"),o=[];if(i.length>0)i.forEach(r=>o.push(r.index));else if(t.activeTokenIndex!=-1){let r=t.activeTokenElement;r&&o.push(r.index)}if(o.length>0){let r=JSON.stringify(o.map(n=>t.items[n])),s=new Blob([r],{type:Be});navigator.clipboard.write([new ClipboardItem({[Be]:s})])}}async readFromClipboard(t){let i=await navigator.clipboard.read();for(let o of i)if(o.types.includes(Be)){let r=await(await o.getType(Be)).text(),s=JSON.parse(r);Array.isArray(s)&&t(s)}}},es=":host{display:flex;align-items:flex-end}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}",$i=class{constructor(t,i){this.tokenSelector=t;let o=[],r=s=>{let n=s.target;t.contains(n)||t.removeTokens(o),o=[]};t.addEventListener("dragstart",s=>{let n=s.target;if(n instanceof Ue){if(n.disabled){s.preventDefault();return}n.setAttribute("aria-checked","true");let a=t.querySelectorAll("[slot='items'][aria-checked='true']");if(a.length>0){let l=Array.from(a).filter(c=>!c.disabled).map(c=>(o.push(c.index),t.items[c.index]));if(s.dataTransfer.setData("text/plain",JSON.stringify(l)),s.dataTransfer.dropEffect="move",s.dataTransfer.effectAllowed="move",a.length>1){let c=this.createCustomDragImage(n,l.length);s.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",r,{capture:!0,once:!0})}}}),t.addEventListener("dragenter",s=>{t.setAttribute("drop",""),s.preventDefault()}),t.addEventListener("dragover",s=>s.preventDefault()),t.addEventListener("dragleave",s=>{s.target==t&&t.removeAttribute("drop")}),t.addEventListener("drop",s=>{t.removeAttribute("drop");let n=s.dataTransfer.getData("text/plain");if(n)try{let a=JSON.parse(n);Array.isArray(a)&&(i(a),s.preventDefault())}catch{}}),t.addEventListener("dragend",()=>{window.removeEventListener("drop",r),o=[]})}createCustomDragImage(t,i){let o=t.cloneNode(!0);if(o.setAttribute("aria-disabled","true"),this.tokenSelector.tokenType)o.value=i+" "+this.tokenSelector.tokenType;else{let r=document.createElement("div");r.innerText="+"+(i-1),Object.assign(r.style,{position:"absolute",left:"90%",top:"75%"});let s=document.createElement("div");s.appendChild(o),s.appendChild(r),o=s}return Object.assign(o.style,{height:t.offsetHeight,outline:"none",maxWidth:"500px",position:"absolute",display:"block",left:"-99999px",overflow:"visible",margin:"1px"}),o.slot="items",this.tokenSelector.appendChild(o),requestAnimationFrame(()=>o.remove()),o}},is=Object.defineProperty,os=Object.getOwnPropertyDescriptor,Q=(e,t,i,o)=>{for(var r=o>1?void 0:o?os(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=(o?n(t,i,r):n(r))||r);return o&&r&&is(t,i,r),r};function rs(e,t){let i;return function(...o){i!=null&&clearTimeout(i),i=window.setTimeout(()=>e(...o),t)}}var Do=(e=>(e.RemoveOnly="remove-only",e.Multi="multi",e))(Do||{}),gt,X=(gt=class extends U{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=Oo,this._autoSuggestItemGenerator=Te,this.additionalTokenCommittingKeys=[],this._activeTokenIndex=-1,this.handleInputKeyDown=(e,t)=>{if((e.key==="Enter"||this.additionalTokenCommittingKeys.includes(e.key))&&t.value){e.preventDefault(),e.stopPropagation(),this.commitTokenValue(t.value);return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide();break}default:this.handleKeyDown(e)}},this.handleKeyDown=e=>{switch(e.key){case"ArrowLeft":{this.hasInputValue||this.updateActiveToken(-1);break}case"ArrowRight":{this.hasInputValue||this.updateActiveToken(1);break}case"Enter":{if(!this.hasInputValue&&this.activeTokenIndex!=-1){let t=this.activeTokenElement;e.getModifierState("Control")?t.checked=!t.checked:(t.checked=!0,this.onTokenClick(t,!1)),document.activeElement!=this&&this.focus()}break}case"Backspace":{this.hasInputValue||(this.activeTokenIndex==-1?this.updateActiveToken(-1):this.removeSelectionOrActiveToken());break}case"Clear":case"Delete":{this.removeSelectionOrActiveToken();break}case"a":{!this.hasInputValue&&e.getModifierState("Control")&&(this.querySelectorAll("[slot='items']").forEach(t=>t.checked=!0),e.preventDefault(),e.stopPropagation());break}}},this.handleWindowPointerDown=e=>{let t=this.inputElement;!t||!t.value||e.composedPath().some(i=>{if(i instanceof HTMLElement&&(e.composedPath().indexOf(t)>-1||i.getAttribute("popover-for")==="token-autosuggest-popover"))return!0})||this.commitTokenValue(t.value)},this.debouncedShowTokenSuggestPopover=rs(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return it(es)}get tokenGenerator(){return this._tokenGenerator}set tokenGenerator(e){this._tokenGenerator=e,this.render()}get autoSuggestItemGenerator(){return this._autoSuggestItemGenerator}set autoSuggestItemGenerator(e){this._autoSuggestItemGenerator=e,this._tokenSuggestPopover&&(this._tokenSuggestPopover.list.itemGenerator=e)}setAdditionalTokenCommittingKeys(e){this.additionalTokenCommittingKeys=e}openSuggestions(){this.inputElement&&(this.focus(),this.tokenSuggestPopover.show())}focus(){this.inputElement?this.inputElement.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?S`<div class="container" tabindex="0">
+            `}return b}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&zt.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Nt.ID="sd-token",Nt.ensureDefined=()=>{customElements.get(Nt.ID)||customElements.define(Nt.ID,Nt)},Nt);bt([p({type:String,attribute:!0,reflect:!0})],ht.prototype,"value",2);bt([p({type:String,attribute:!0,reflect:!0})],ht.prototype,"type",2);bt([p({type:String})],ht.prototype,"icon",2);bt([p({type:String})],ht.prototype,"iconPlaceholder",2);bt([p({type:String})],ht.prototype,"iconBackgroundColor",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-disabled"})],ht.prototype,"disabled",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-current"})],ht.prototype,"current",2);bt([p({converter:Ci,reflect:!0,attribute:"aria-checked"})],ht.prototype,"checked",1);var Ue=ht,Oo=(e,t)=>{let i=document.createElement(Ue.ID);return e&&(i.value=e.caption,i.type=e.type,i.icon=e.icon,i.iconPlaceholder=e.iconPlaceholder,i.iconBackgroundColor=e.iconBackgroundColor,i.disabled=e.disabled,i.index=t),i};Ue.ensureDefined();var Be="web application/json",_i=class{constructor(t,i,o){navigator.clipboard&&(t.addEventListener("copy",()=>{i()||this.writeToClipboard(t)}),t.addEventListener("cut",()=>{i()||(t.removeSelectionOrActiveToken(),this.writeToClipboard(t))}),t.addEventListener("paste",()=>{t.disabled||this.readFromClipboard(o)}))}writeToClipboard(t){let i=t.querySelectorAll("[slot='items'][aria-checked='true']"),o=[];if(i.length>0)i.forEach(r=>o.push(r.index));else if(t.activeTokenIndex!=-1){let r=t.activeTokenElement;r&&o.push(r.index)}if(o.length>0){let r=JSON.stringify(o.map(n=>t.items[n])),s=new Blob([r],{type:Be});navigator.clipboard.write([new ClipboardItem({[Be]:s})])}}async readFromClipboard(t){let i=await navigator.clipboard.read();for(let o of i)if(o.types.includes(Be)){let r=await(await o.getType(Be)).text(),s=JSON.parse(r);Array.isArray(s)&&t(s)}}},es=":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}",$i=class{constructor(t,i){this.tokenSelector=t;let o=new Map,r=s=>{let n=s.target;if(!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 Ue){if(n.disabled){s.preventDefault();return}n.setAttribute("aria-checked","true");let a=t.querySelectorAll("[slot='items'][aria-checked='true']");if(a.length>0){let l=Array.from(a).filter(c=>!c.disabled).map((c,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),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}},is=Object.defineProperty,os=Object.getOwnPropertyDescriptor,Q=(e,t,i,o)=>{for(var r=o>1?void 0:o?os(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=(o?n(t,i,r):n(r))||r);return o&&r&&is(t,i,r),r};function rs(e,t){let i;return function(...o){i!=null&&clearTimeout(i),i=window.setTimeout(()=>e(...o),t)}}var Do=(e=>(e.RemoveOnly="remove-only",e.Multi="multi",e))(Do||{}),gt,X=(gt=class extends U{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=Oo,this._autoSuggestItemGenerator=Te,this.additionalTokenCommittingKeys=[],this._activeTokenIndex=-1,this.handleInputKeyDown=(e,t)=>{if((e.key==="Enter"||this.additionalTokenCommittingKeys.includes(e.key))&&t.value){e.preventDefault(),e.stopPropagation(),this.commitTokenValue(t.value);return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide();break}default:this.handleKeyDown(e)}},this.handleKeyDown=e=>{switch(e.key){case"ArrowLeft":{this.hasInputValue||this.updateActiveToken(-1);break}case"ArrowRight":{this.hasInputValue||this.updateActiveToken(1);break}case"Enter":{if(!this.hasInputValue&&this.activeTokenIndex!=-1){let t=this.activeTokenElement;e.getModifierState("Control")?t.checked=!t.checked:(t.checked=!0,this.onTokenClick(t,!1)),document.activeElement!=this&&this.focus()}break}case"Backspace":{this.hasInputValue||(this.activeTokenIndex==-1?this.updateActiveToken(-1):this.removeSelectionOrActiveToken());break}case"Clear":case"Delete":{this.removeSelectionOrActiveToken();break}case"a":{!this.hasInputValue&&e.getModifierState("Control")&&(this.querySelectorAll("[slot='items']").forEach(t=>t.checked=!0),e.preventDefault(),e.stopPropagation());break}}},this.handleWindowPointerDown=e=>{let t=this.inputElement;!t||!t.value||e.composedPath().some(i=>{if(i instanceof HTMLElement&&(e.composedPath().indexOf(t)>-1||i.getAttribute("popover-for")==="token-autosuggest-popover"))return!0})||this.commitTokenValue(t.value)},this.debouncedShowTokenSuggestPopover=rs(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return it(es)}get tokenGenerator(){return this._tokenGenerator}set tokenGenerator(e){this._tokenGenerator=e,this.render()}get autoSuggestItemGenerator(){return this._autoSuggestItemGenerator}set autoSuggestItemGenerator(e){this._autoSuggestItemGenerator=e,this._tokenSuggestPopover&&(this._tokenSuggestPopover.list.itemGenerator=e)}setAdditionalTokenCommittingKeys(e){this.additionalTokenCommittingKeys=e}openSuggestions(){this.inputElement&&(this.focus(),this.tokenSuggestPopover.show())}focus(){this.inputElement?this.inputElement.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?S`<div class="container" tabindex="0">
                       <slot name="items"
                           >${this.placeholder?S`<span part="remove-only-placeholder" class="placeholder"
                                     >${this.placeholder}</span
@@ -174,7 +174,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var ze=Object.
                       ><div class="token-wrapper" slot="prefix"><slot name="items"></slot></div>
                   </sd-lit-input>
                   <slot class="additonal-content" name="additional-content"></slot>
-              `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.hasAttribute("tabIndex")||(this.tabIndex=0),this.addEventListener("focusout",t=>{let i=t.relatedTarget;!this.contains(i)&&!this.shadowRoot.contains(i)&&this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(o=>o.checked=!1)}),new _i(this,()=>{var t;return(t=this.inputElement)==null?void 0:t.value},t=>this.addMatchingItems(t)),new $i(this,t=>this.addMatchingItems(t))}addMatchingItems(e){let t=e.map(i=>{let o=i.caption==null?-1:this.findIndex(i);return o!=-1&&!this.items[o].disabled&&!this.selectedIndexes.includes(o)?o:-1}).filter(i=>i!=-1);t.length>0&&this.handleTokenSelection(t)}removeSelectionOrActiveToken(){if(!this.disabled){let e=this.querySelectorAll("[slot='items'][aria-checked='true']");if(e.length>0){let t=Array.from(e);this.removeTokens(t.filter(i=>!i.disabled).map(i=>i.index))}else if(this.activeTokenIndex!=-1){let t=this.activeTokenElement;t&&!t.disabled&&this.removeTokens([t.index])}}}updateActiveToken(e){let t=this.querySelectorAll("[slot='items']").length-1;this.activeTokenIndex==-1?e<0&&(this.activeTokenIndex=t):this.activeTokenIndex==t&&e>0?(this.activeTokenIndex=-1,this.focus()):this.activeTokenIndex=Math.max(0,Math.min(t,this.activeTokenIndex+e))}commitTokenValue(e){if(this.disabled)return;if(this.tokenSuggestPopover.isOpened){let i=this.tokenSuggestPopover.focusedSuggestToken;if(i){if(!i.disabled){let o=this.findIndex(i);this.handleTokenSelection([o]),this.tokenSuggestPopover.hide()}return}}if(!(e!=null&&e.trim()))return;let t=this.items.findIndex(i=>this.caseSensitive?i.caption==e:i.caption.toLowerCase()==e.toLowerCase());this.selectedIndexes.includes(t)||(t>=0?this.handleTokenSelection([t]):this.handleTokenCreation(e)),this.requestUpdate("selectedIndexes"),this.tokenSuggestPopover.hide(),window.removeEventListener("pointerdown",this.handleWindowPointerDown)}updated(e){if(super.updated(e),this._tokenSuggestPopover&&(this.tokenSuggestPopover.list.className=this.suggestListClass||"",this.suggestionFilter&&(this.tokenSuggestPopover.filter=this.suggestionFilter)),e.has("selectionMode"))if(this.selectionMode=="multi"){this.setAttribute("aria-haspopup","listbox");let t=this.inputElement;t.addEventListener("immediate-value-change",i=>this.handleInputValueChange(i)),t.addEventListener("keydown",i=>this.handleInputKeyDown(i,t)),window.queueMicrotask(()=>this.tokenSuggestPopover)}else this.removeAttribute("aria-haspopup"),this.addEventListener("keydown",this.handleKeyDown),this._tokenSuggestPopover&&(this._tokenSuggestPopover.popover.remove(),this._tokenSuggestPopover=null);(e.size==0||e.has("selectionMode")||e.has("items")||e.has("selectedIndexes")||e.has("disabled"))&&this.updateItems()}handleInputValueChange(e){e.detail.value?(this.activeTokenIndex=-1,this.cancelSearch=!1,this.debouncedShowTokenSuggestPopover(),window.addEventListener("pointerdown",this.handleWindowPointerDown)):(this.tokenSuggestPopover.hide(),this.cancelSearch=!0)}showFilteredTokenSuggestions(){!this.cancelSearch&&this.inputElement.value&&this.tokenSuggestPopover.show()}isTokenNotSelected(e){return!this.selectedIndexes.includes(e)}get tokenSuggestPopover(){return!this._tokenSuggestPopover&&this.inputElement&&(this._tokenSuggestPopover=new Si(this.inputElement,()=>this.items.filter((e,t)=>!e.disabled&&this.isTokenNotSelected(t)),e=>{let t=this.findIndex(e);this.handleTokenSelection([t]),window.removeEventListener("pointerdown",this.handleWindowPointerDown)},e=>{this.appendChild(e.popover),this.dispatchEvent(new CustomEvent("auto-suggest-initialized")),e.popover.addEventListener("close",()=>{this.inputElement.value&&!this.contains(document.activeElement)&&(this.inputElement.value="")})}),this._tokenSuggestPopover.list.itemGenerator=this._autoSuggestItemGenerator,this._tokenSuggestPopover.list.className=this.suggestListClass,this.suggestionFilter&&(this._tokenSuggestPopover.filter=this.suggestionFilter)),this._tokenSuggestPopover}updateItems(){if(!this.isConnected||!this.items)return;let e=this.inputElement;e&&(!this._tokenSuggestPopover||!this._tokenSuggestPopover.isOpened)&&(e.value=""),this.querySelectorAll("[slot='items']").forEach(o=>{this.removeChild(o)});let t=document.createDocumentFragment(),i=[];this.selectionMode=="remove-only"?i=this.items.map(o=>this.disableIfNeeded(o)):this.selectedIndexes.forEach(o=>{i.push(this.disableIfNeeded(this.items[o]))}),i.forEach(o=>{let r=this.tokenGenerator(o,this.findIndex(o));r.slot="items",t.appendChild(r),r.id||(r.id=window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)),r.setClickHandler(()=>this.onTokenClick(r,!0)),r.addEventListener("click",()=>{document.activeElement!=this&&this.focus()}),r.setDeleteHandler(s=>this.removeTokens([s]))}),this.appendChild(t),this._tokenSuggestPopover&&this._tokenSuggestPopover.refreshItems()}removeTokens(e){this.disabled||(this.activeTokenIndex!=-1&&e.includes(this.activeTokenElement.index)&&(this.activeTokenIndex=-1),this.selectionMode=="remove-only"?this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e}})):(this.selectedIndexes=this.selectedIndexes.filter(t=>!e.includes(t)),this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e,selectedIndices:[...this.selectedIndexes]}}))))}onTokenClick(e,t){let i;this.querySelectorAll("[slot='items']").forEach((o,r)=>{e==o?i=r:o.setAttribute("aria-checked","false")}),this.activeTokenIndex=i,this.setAttribute("aria-activedescendant",this.activeTokenElement.id),this._tokenSuggestPopover&&this._tokenSuggestPopover.isOpened&&this._tokenSuggestPopover.hide(),this.dispatchEvent(new CustomEvent("token-clicked",{detail:{index:e.index,tokenElement:e,byPointerDevice:t}}))}disableIfNeeded(e){return this.disabled?{...e,disabled:!0}:e}handleTokenSelection(e){this.selectedIndexes=this.selectedIndexes.concat(e),this.dispatchEvent(new CustomEvent("tokens-selected",{detail:{newIndices:e,selectedIndices:[...this.selectedIndexes]}}))}handleTokenCreation(e){this.dispatchEvent(new CustomEvent("token-created",{detail:{value:e}}))}get inputElement(){return this.shadowRoot.querySelector(".input")}get activeTokenElement(){return this.getTokenElement(this.activeTokenIndex)}getTokenElement(e){return this.querySelector("[slot='items']:nth-of-type("+(e+1)+")")}findIndex(e){return this.items.findIndex(t=>t.caption===e.caption)}get activeTokenIndex(){return this._activeTokenIndex}set activeTokenIndex(e){if(this._activeTokenIndex!=-1){let t=this.activeTokenElement;t&&(t.current=!1)}if(this._activeTokenIndex=e,e==-1)this.removeAttribute("aria-activedescendant");else{let t=this.activeTokenElement;t.current=!0,this.setAttribute("aria-activedescendant",t.id)}}get hasInputValue(){var e;return!!((e=this.inputElement)!=null&&e.value)}},gt.ID="sd-token-selector",gt.ensureDefined=()=>{Ue.ensureDefined(),customElements.get(gt.ID)||customElements.define(gt.ID,gt)},gt.shadowRootOptions={...U.shadowRootOptions,delegatesFocus:!0},gt);Q([p({type:String,attribute:"selection-mode",reflect:!0})],X.prototype,"selectionMode",2);Q([p({type:Array,attribute:!1})],X.prototype,"items",2);Q([p({type:Array,attribute:!1})],X.prototype,"selectedIndexes",2);Q([p({type:String,reflect:!0})],X.prototype,"placeholder",2);Q([p({type:String,reflect:!0,attribute:"suggest-list-class"})],X.prototype,"suggestListClass",2);Q([p({type:String,reflect:!0,attribute:"input-label"})],X.prototype,"inputLabel",2);Q([p({converter:{fromAttribute:e=>e=="true",toAttribute:e=>e},reflect:!0,attribute:"aria-disabled"})],X.prototype,"disabled",2);Q([p({type:String,attribute:!0})],X.prototype,"validationMessage",2);Q([p({type:String,attribute:!0})],X.prototype,"validationIconSrc",2);Q([p({converter:ae.levelConverter,attribute:!0,reflect:!0})],X.prototype,"validationLevel",2);Q([p({type:String,reflect:!0,attribute:"token-type"})],X.prototype,"tokenType",2);Q([p({type:Boolean,reflect:!0,attribute:"case-sensitive"})],X.prototype,"caseSensitive",2);var ss=X;return qo(ns);})();
+              `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.hasAttribute("tabIndex")||(this.tabIndex=0),this.addEventListener("focusout",t=>{let i=t.relatedTarget;!this.contains(i)&&!this.shadowRoot.contains(i)&&this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(o=>o.checked=!1)}),new _i(this,()=>{var t;return(t=this.inputElement)==null?void 0:t.value},t=>this.addMatchingItems(t)),new $i(this,t=>this.addMatchingItems(t))}addMatchingItems(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}removeSelectionOrActiveToken(){if(!this.disabled){let e=this.querySelectorAll("[slot='items'][aria-checked='true']");if(e.length>0){let t=Array.from(e);this.removeTokens(t.filter(i=>!i.disabled).map(i=>i.index))}else if(this.activeTokenIndex!=-1){let t=this.activeTokenElement;t&&!t.disabled&&this.removeTokens([t.index])}}}updateActiveToken(e){let t=this.querySelectorAll("[slot='items']").length-1;this.activeTokenIndex==-1?e<0&&(this.activeTokenIndex=t):this.activeTokenIndex==t&&e>0?(this.activeTokenIndex=-1,this.focus()):this.activeTokenIndex=Math.max(0,Math.min(t,this.activeTokenIndex+e))}commitTokenValue(e){if(this.disabled)return;if(this.tokenSuggestPopover.isOpened){let i=this.tokenSuggestPopover.focusedSuggestToken;if(i){if(!i.disabled){let o=this.findIndex(i);this.handleTokenSelection([o]),this.tokenSuggestPopover.hide()}return}}if(!(e!=null&&e.trim()))return;let t=this.items.findIndex(i=>this.caseSensitive?i.caption==e:i.caption.toLowerCase()==e.toLowerCase());this.selectedIndexes.includes(t)||(t>=0?this.handleTokenSelection([t]):this.handleTokenCreation(e)),this.requestUpdate("selectedIndexes"),this.tokenSuggestPopover.hide(),window.removeEventListener("pointerdown",this.handleWindowPointerDown)}updated(e){if(super.updated(e),this._tokenSuggestPopover&&(this.tokenSuggestPopover.list.className=this.suggestListClass||"",this.suggestionFilter&&(this.tokenSuggestPopover.filter=this.suggestionFilter)),e.has("selectionMode"))if(this.selectionMode=="multi"){this.setAttribute("aria-haspopup","listbox");let t=this.inputElement;t.addEventListener("immediate-value-change",i=>this.handleInputValueChange(i)),t.addEventListener("keydown",i=>this.handleInputKeyDown(i,t)),window.queueMicrotask(()=>this.tokenSuggestPopover)}else this.removeAttribute("aria-haspopup"),this.addEventListener("keydown",this.handleKeyDown),this._tokenSuggestPopover&&(this._tokenSuggestPopover.popover.remove(),this._tokenSuggestPopover=null);(e.size==0||e.has("selectionMode")||e.has("items")||e.has("selectedIndexes")||e.has("disabled"))&&this.updateItems()}handleInputValueChange(e){e.detail.value?(this.activeTokenIndex=-1,this.cancelSearch=!1,this.debouncedShowTokenSuggestPopover(),window.addEventListener("pointerdown",this.handleWindowPointerDown)):(this.tokenSuggestPopover.hide(),this.cancelSearch=!0)}showFilteredTokenSuggestions(){!this.cancelSearch&&this.inputElement.value&&this.tokenSuggestPopover.show()}isTokenNotSelected(e){return!this.selectedIndexes.includes(e)}get tokenSuggestPopover(){return!this._tokenSuggestPopover&&this.inputElement&&(this._tokenSuggestPopover=new Si(this.inputElement,()=>this.items.filter((e,t)=>!e.disabled&&this.isTokenNotSelected(t)),e=>{let t=this.findIndex(e);this.handleTokenSelection([t]),window.removeEventListener("pointerdown",this.handleWindowPointerDown)},e=>{this.appendChild(e.popover),this.dispatchEvent(new CustomEvent("auto-suggest-initialized")),e.popover.addEventListener("close",()=>{this.inputElement.value&&!this.contains(document.activeElement)&&(this.inputElement.value="")})}),this._tokenSuggestPopover.list.itemGenerator=this._autoSuggestItemGenerator,this._tokenSuggestPopover.list.className=this.suggestListClass,this.suggestionFilter&&(this._tokenSuggestPopover.filter=this.suggestionFilter)),this._tokenSuggestPopover}updateItems(){if(!this.isConnected||!this.items)return;let e=this.inputElement;e&&(!this._tokenSuggestPopover||!this._tokenSuggestPopover.isOpened)&&(e.value=""),this.querySelectorAll("[slot='items']").forEach(o=>{this.removeChild(o)});let t=document.createDocumentFragment(),i=[];this.selectionMode=="remove-only"?i=this.items.map(o=>this.disableIfNeeded(o)):this.selectedIndexes.forEach(o=>{i.push(this.disableIfNeeded(this.items[o]))}),i.forEach(o=>{let r=this.tokenGenerator(o,this.findIndex(o));r.slot="items",t.appendChild(r),r.id||(r.id=window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)),r.setClickHandler(()=>this.onTokenClick(r,!0)),r.addEventListener("click",()=>{document.activeElement!=this&&this.focus()}),r.setDeleteHandler(s=>this.removeTokens([s]))}),this.appendChild(t),this._tokenSuggestPopover&&this._tokenSuggestPopover.refreshItems()}removeTokens(e){this.disabled||(this.activeTokenIndex!=-1&&e.includes(this.activeTokenElement.index)&&(this.activeTokenIndex=-1),this.selectionMode=="remove-only"?this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e}})):(this.selectedIndexes=this.selectedIndexes.filter(t=>!e.includes(t)),this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e,selectedIndices:[...this.selectedIndexes]}}))))}onTokenClick(e,t){let i;this.querySelectorAll("[slot='items']").forEach((o,r)=>{e==o?i=r:o.setAttribute("aria-checked","false")}),this.activeTokenIndex=i,this.setAttribute("aria-activedescendant",this.activeTokenElement.id),this._tokenSuggestPopover&&this._tokenSuggestPopover.isOpened&&this._tokenSuggestPopover.hide(),this.dispatchEvent(new CustomEvent("token-clicked",{detail:{index:e.index,tokenElement:e,byPointerDevice:t}}))}disableIfNeeded(e){return this.disabled?{...e,disabled:!0}:e}handleTokenSelection(e){this.selectedIndexes=this.selectedIndexes.concat(e),this.dispatchEvent(new CustomEvent("tokens-selected",{detail:{newIndices:e,selectedIndices:[...this.selectedIndexes]}}))}handleTokenCreation(e){this.dispatchEvent(new CustomEvent("token-created",{detail:{value:e}}))}get inputElement(){return this.shadowRoot.querySelector(".input")}get activeTokenElement(){return this.getTokenElement(this.activeTokenIndex)}getTokenElement(e){return this.querySelector("[slot='items']:nth-of-type("+(e+1)+")")}findIndex(e){return this.items.findIndex(t=>t.caption===e.caption)}get activeTokenIndex(){return this._activeTokenIndex}set activeTokenIndex(e){if(this._activeTokenIndex!=-1){let t=this.activeTokenElement;t&&(t.current=!1)}if(this._activeTokenIndex=e,e==-1)this.removeAttribute("aria-activedescendant");else{let t=this.activeTokenElement;t.current=!0,this.setAttribute("aria-activedescendant",t.id)}}get hasInputValue(){var e;return!!((e=this.inputElement)!=null&&e.value)}},gt.ID="sd-token-selector",gt.ensureDefined=()=>{Ue.ensureDefined(),customElements.get(gt.ID)||customElements.define(gt.ID,gt)},gt.shadowRootOptions={...U.shadowRootOptions,delegatesFocus:!0},gt);Q([p({type:String,attribute:"selection-mode",reflect:!0})],X.prototype,"selectionMode",2);Q([p({type:Array,attribute:!1})],X.prototype,"items",2);Q([p({type:Array,attribute:!1})],X.prototype,"selectedIndexes",2);Q([p({type:String,reflect:!0})],X.prototype,"placeholder",2);Q([p({type:String,reflect:!0,attribute:"suggest-list-class"})],X.prototype,"suggestListClass",2);Q([p({type:String,reflect:!0,attribute:"input-label"})],X.prototype,"inputLabel",2);Q([p({converter:{fromAttribute:e=>e=="true",toAttribute:e=>e},reflect:!0,attribute:"aria-disabled"})],X.prototype,"disabled",2);Q([p({type:String,attribute:!0})],X.prototype,"validationMessage",2);Q([p({type:String,attribute:!0})],X.prototype,"validationIconSrc",2);Q([p({converter:ae.levelConverter,attribute:!0,reflect:!0})],X.prototype,"validationLevel",2);Q([p({type:String,reflect:!0,attribute:"token-type"})],X.prototype,"tokenType",2);Q([p({type:Boolean,reflect:!0,attribute:"case-sensitive"})],X.prototype,"caseSensitive",2);var ss=X;return qo(ns);})();
 /*! Bundled license information:
 
 @lit/reactive-element/css-tag.js: