@cas-smartdesign/token-selector 0.21.4 → 1.0.0

package/dist/token-selector.mjs

@@ -1,4 +1,4 @@
-import { LitElement as w, unsafeCSS as T, html as m, nothing as x } from "lit";
+import { LitElement as x, unsafeCSS as T, nothing as w, html as m } from "lit";
 import { property as d } from "lit/decorators/property.js";
 import "@cas-smartdesign/lit-input";
 import S from "@cas-smartdesign/field-validation-message";
@@ -8,11 +8,11 @@ import y from "@cas-smartdesign/virtual-list";
 import { KeyDownDelegator as A } from "@cas-smartdesign/element-utils";
 import { ifDefined as C } from "lit/directives/if-defined.js";
 import { unsafeSVG as P } from "lit/directives/unsafe-svg.js";
-import D from "@cas-smartdesign/image-tools";
+import { placeholderDirective as D } from "@cas-smartdesign/image-tools";
 let O = 0;
 class q {
-  constructor(e, t, i, s) {
-    this.inputElement = e, this.notSelectedTokensProvider = t, this.initializeCallback = s, this.filter = (n, o) => n ? o.filter((a) => a.disabled || a.deactivated ? !1 : a.caption && a.caption.toLowerCase().includes(n)) : o, y.ensureDefined(), this._tokenList = new y(), this._tokenList.id = "sd_token_suggest_popover_list_" + O++, this._tokenList.style.minWidth = "250px", this._tokenList.style.maxHeight = "49vh", this._tokenList.itemHeight = 50, this._tokenList.addEventListener("pointerdown", () => {
+  constructor(e, t, i, n) {
+    this.inputElement = e, this.notSelectedTokensProvider = t, this.initializeCallback = n, this.filter = (s, o) => s ? o.filter((a) => a.disabled || a.deactivated ? !1 : a.caption && a.caption.toLowerCase().includes(s)) : o, y.ensureDefined(), this._tokenList = new y(), this._tokenList.id = "sd_token_suggest_popover_list_" + O++, this._tokenList.style.minWidth = "250px", this._tokenList.style.maxHeight = "49vh", this._tokenList.itemHeight = 50, this._tokenList.addEventListener("pointerdown", () => {
       this.pointerDown = !0, window.addEventListener(
         "pointerup",
         () => {
@@ -20,20 +20,20 @@ class q {
         },
         { once: !0, capture: !0 }
       );
-    }), this._tokenList.addEventListener("selection", (n) => {
-      const o = n.detail.index, a = this._suggestItems[o];
+    }), this._tokenList.addEventListener("selection", (s) => {
+      const o = s.detail.index, a = this._suggestItems[o];
       i(a), this.hide();
-    }), this._tokenList.addEventListener("data-request", (n) => {
-      this.lastRequestedStartIndex = n.detail.startIndex, this.lastRequestedStopIndex = n.detail.stopIndex, this.pointerDown || this._tokenList.increaseWidthOnNextRenderIfNeeded(), this._tokenList.items = this._suggestItems.slice(
+    }), this._tokenList.addEventListener("data-request", (s) => {
+      this.lastRequestedStartIndex = s.detail.startIndex, this.lastRequestedStopIndex = s.detail.stopIndex, this.pointerDown || this._tokenList.increaseWidthOnNextRenderIfNeeded(), this._tokenList.items = this._suggestItems.slice(
         this.lastRequestedStartIndex,
         this.lastRequestedStopIndex + 1
       );
-    }), new A(this._tokenList, (n, o, a) => {
-      this._tokenList.dispatchEvent(new KeyboardEvent(n.type, n)), !a && !this.isOpened && this.show();
+    }), new A(this._tokenList, (s, o, a) => {
+      this._tokenList.dispatchEvent(new KeyboardEvent(s.type, s)), !a && !this.isOpened && this.show();
     }).connect(e);
   }
   show() {
-    this.inputElement.effectiveDisabled || (this.popover, this._suggestItems = this.filterItems((this.inputElement.value || "").toLowerCase()), this._suggestItems.length == 0 ? this.hide() : (this._tokenList.itemCount = this._suggestItems.length, this._tokenList.focusIndex = -1, this._tokenList.style.width = null, requestAnimationFrame(() => {
+    this.inputElement.effectiveDisabled || (this.ensurePopover(), this._suggestItems = this.filterItems((this.inputElement.value || "").toLowerCase()), this._suggestItems.length == 0 ? this.hide() : (this._tokenList.itemCount = this._suggestItems.length, this._tokenList.focusIndex = -1, this._tokenList.style.width = null, requestAnimationFrame(() => {
       this.lastRequestedStartIndex != null && (this._tokenList.increaseWidthOnNextRenderIfNeeded(), this._tokenList.items = this._suggestItems.slice(
         this.lastRequestedStartIndex,
         this.lastRequestedStopIndex + 1
@@ -47,15 +47,17 @@ class q {
     const t = this.notSelectedTokensProvider();
     return this.filter(e, t);
   }
+  ensurePopover() {
+    this._popover || (this._popover = this.createPopover(), this.initializeCallback(this));
+  }
   hide() {
-    var e;
-    this._suggestItems = [], this._tokenList.itemCount = 0, this._tokenList.items = [], (e = this._popover) == null || e.hide();
+    this._suggestItems = [], this._tokenList.itemCount = 0, this._tokenList.items = [], this._popover?.hide();
   }
   get list() {
     return this._tokenList;
   }
   get popover() {
-    return this._popover || (this._popover = this.createPopover(), this.initializeCallback(this)), this._popover;
+    return this.ensurePopover(), this._popover;
   }
   createPopover() {
     const e = new L();
@@ -72,16 +74,16 @@ const M = `:host{flex-shrink:0;max-width:100%;height:28px}:host([aria-checked=tr
   <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 R = Object.defineProperty, N = Object.getOwnPropertyDescriptor, f = (r, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? N(e, t) : e, n = r.length - 1, o; n >= 0; n--)
-    (o = r[n]) && (s = (i ? o(e, t, s) : o(s)) || s);
-  return i && s && R(e, t, s), s;
+  for (var n = i > 1 ? void 0 : i ? N(e, t) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (n = (i ? o(e, t, n) : o(n)) || n);
+  return i && n && R(e, t, n), n;
 };
 const I = {
   fromAttribute: (r) => r == "true",
   toAttribute: (r) => r
 };
 var u;
-const p = (u = class extends w {
+const p = (u = class extends x {
   constructor() {
     super(...arguments), this.value = "", this.type = "", this.icon = "", this.iconPlaceholder = "", this.iconBackgroundColor = "", this._checked = !1;
   }
@@ -97,12 +99,12 @@ const p = (u = class extends w {
   }
   firstUpdated(e) {
     super.firstUpdated(e), this.tabIndex = -1, this.setAttribute("role", "option"), this.setAttribute("aria-selected", "true"), this.addEventListener("click", (i) => {
-      const s = window.getSelection();
-      if (s && s.type == "Range")
+      const n = window.getSelection();
+      if (n && n.type == "Range")
         return;
       i.stopPropagation();
-      const n = i.getModifierState("Control");
-      this.disabled || (n ? this.checked = !this.checked : this.checked = !0), this._tokenClickHandler && this._tokenClickHandler(this.index, n);
+      const s = i.getModifierState("Control");
+      this.disabled || (s ? this.checked = !this.checked : this.checked = !0), this._tokenClickHandler && this._tokenClickHandler(this.index, s);
     });
     const t = this.shadowRoot.querySelector(".delete-button-wrapper");
     t && t.addEventListener("click", (i) => {
@@ -116,7 +118,7 @@ const p = (u = class extends w {
                 ${this.renderIcon()}
                 <slot name="after-icon"></slot>
                 <div class="value">${this.value}</div>
-                ${this.disabled ? x : m` <div class="delete-button-wrapper">${P($)}</div> `}
+                ${this.disabled ? w : m` <div class="delete-button-wrapper">${P($)}</div> `}
             </div>
         `;
   }
@@ -125,14 +127,18 @@ const p = (u = class extends w {
       const e = this.iconBackgroundColor != null ? `--sd-token-icon-background-color: ${this.iconBackgroundColor}` : void 0;
       return m`
                 <div class="icon-wrapper" style="${C(e)}" role="img">
-                    <div part="icon" class="icon"></div>
+                    <div
+                        part="icon"
+                        class="icon"
+                        style="background-image:${D(this.icon, this.iconPlaceholder)}"
+                    ></div>
                 </div>
             `;
     }
-    return x;
+    return w;
   }
   updated(e) {
-    super.updated(e), (e.has("icon") || e.has("iconPlaceholder")) && (this.icon || this.iconPlaceholder) && D.showImage(this.shadowRoot.querySelector(".icon"), this.icon, this.iconPlaceholder), e.has("disabled") && !this.disabled && this.checked && (this.checked = !1);
+    super.updated(e), e.has("disabled") && !this.disabled && this.checked && (this.checked = !1);
   }
   setClickHandler(e) {
     this._tokenClickHandler = e;
@@ -174,11 +180,11 @@ const F = (r, e) => {
 };
 b.ensureDefined();
 const k = "web application/json";
-class G {
+class V {
   constructor(e, t, i) {
     navigator.clipboard && (e.addEventListener("copy", () => {
-      const s = window.getSelection();
-      (!s || s.type != "Range") && !t() && this.writeToClipboard(e);
+      const n = window.getSelection();
+      (!n || n.type != "Range") && !t() && this.writeToClipboard(e);
     }), e.addEventListener("cut", () => {
       t() || (e.removeSelectionOrActiveToken(), this.writeToClipboard(e));
     }), e.addEventListener("paste", () => {
@@ -188,16 +194,16 @@ class G {
   writeToClipboard(e) {
     const t = e.querySelectorAll("[slot='items'][aria-checked='true']"), i = [];
     if (t.length > 0)
-      t.forEach((s) => i.push(s.index));
+      t.forEach((n) => i.push(n.index));
     else if (e.activeTokenIndex != -1) {
-      const s = e.activeTokenElement;
-      s && i.push(s.index);
+      const n = e.activeTokenElement;
+      n && i.push(n.index);
     }
     if (i.length > 0) {
-      const s = JSON.stringify(i.map((o) => e.items[o])), n = new Blob([s], { type: k });
+      const n = JSON.stringify(i.map((o) => e.items[o])), s = new Blob([n], { type: k });
       navigator.clipboard.write([
         new ClipboardItem({
-          [k]: n
+          [k]: s
         })
       ]);
     }
@@ -206,56 +212,56 @@ class G {
     const t = await navigator.clipboard.read();
     for (const i of t)
       if (i.types.includes(k)) {
-        const n = await (await i.getType(k)).text(), o = JSON.parse(n);
+        const s = await (await i.getType(k)).text(), o = JSON.parse(s);
         Array.isArray(o) && e(o);
       }
   }
 }
-const H = ":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--sd-token-border: 1px solid transparent;margin:1px}:host([selection-mode=multi][aria-disabled=true]){opacity:.6}:host([selection-mode=multi][aria-disabled=true]) .input[effective-disabled]{opacity:1}:host([selection-mode=multi][aria-disabled=true]) ::slotted([aria-disabled=true]){opacity:1}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-visible ::slotted(sd-token[aria-current=true]){outline:1px solid #1467ba;--sd-token-focused-border: 1px solid #fff}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])),.container:focus-visible ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])){outline-color:#767676}.container{outline:none;display:flex;flex-wrap:wrap;gap:6px;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:6px}";
-class B {
+const G = ":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--sd-token-border: 1px solid transparent;margin:1px}:host([selection-mode=multi][aria-disabled=true]){opacity:.6}:host([selection-mode=multi][aria-disabled=true]) .input[effective-disabled]{opacity:1}:host([selection-mode=multi][aria-disabled=true]) ::slotted([aria-disabled=true]){opacity:1}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-visible ::slotted(sd-token[aria-current=true]){outline:1px solid #1467ba;--sd-token-focused-border: 1px solid #fff}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])),.container:focus-visible ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])){outline-color:#767676}.container{outline:none;display:flex;flex-wrap:wrap;gap:6px;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:6px}";
+class H {
   constructor(e, t) {
     this.tokenSelector = e;
-    const i = /* @__PURE__ */ new Map(), s = (n) => {
-      const o = n.target;
+    const i = /* @__PURE__ */ new Map(), n = (s) => {
+      const o = s.target;
       if (e.removeAttribute("drag-source"), !e.contains(o)) {
-        const a = n.addedIndexes;
+        const a = s.addedIndexes;
         a && e.removeTokens(a.map((v) => i.get(v)));
       }
       i.clear();
     };
-    e.addEventListener("dragstart", (n) => {
-      const o = n.target;
+    e.addEventListener("dragstart", (s) => {
+      const o = s.target;
       if (o instanceof b) {
         if (o.disabled) {
-          n.preventDefault();
+          s.preventDefault();
           return;
         }
         e.setAttribute("drag-source", ""), o.setAttribute("aria-checked", "true");
         const a = e.querySelectorAll("[slot='items'][aria-checked='true']");
         if (a.length > 0) {
           const v = Array.from(a).filter((g) => !g.disabled).map((g, E) => (i.set(E, g.index), e.items[g.index]));
-          if (n.dataTransfer.setData("text/sd-token-selector", JSON.stringify(v)), n.dataTransfer.dropEffect = "move", n.dataTransfer.effectAllowed = "move", a.length > 1) {
+          if (s.dataTransfer.setData("text/sd-token-selector", JSON.stringify(v)), s.dataTransfer.dropEffect = "move", s.dataTransfer.effectAllowed = "move", a.length > 1) {
             const g = this.createCustomDragImage(o, v.length);
-            n.dataTransfer.setDragImage(g, -14, -14);
+            s.dataTransfer.setDragImage(g, -14, -14);
           }
-          window.addEventListener("drop", s, { once: !0 });
+          window.addEventListener("drop", n, { once: !0 });
         }
       }
-    }), e.addEventListener("dragenter", (n) => {
-      e.setAttribute("drop", ""), n.preventDefault();
-    }), e.addEventListener("dragover", (n) => n.preventDefault()), e.addEventListener("dragleave", (n) => {
-      n.target == e && e.removeAttribute("drop");
-    }), e.addEventListener("drop", (n) => {
+    }), e.addEventListener("dragenter", (s) => {
+      e.setAttribute("drop", ""), s.preventDefault();
+    }), e.addEventListener("dragover", (s) => s.preventDefault()), e.addEventListener("dragleave", (s) => {
+      s.target == e && e.removeAttribute("drop");
+    }), e.addEventListener("drop", (s) => {
       e.removeAttribute("drop");
-      const o = n.dataTransfer.getData("text/sd-token-selector");
+      const o = s.dataTransfer.getData("text/sd-token-selector");
       if (o)
         try {
           const a = JSON.parse(o);
-          Array.isArray(a) && (n.addedIndexes = t(a), n.preventDefault());
+          Array.isArray(a) && (s.addedIndexes = t(a), s.preventDefault());
         } catch {
         }
     }), e.addEventListener("dragend", () => {
-      window.removeEventListener("drop", s), e.removeAttribute("drag-source"), i.clear();
+      window.removeEventListener("drop", n), e.removeAttribute("drag-source"), i.clear();
     });
   }
   createCustomDragImage(e, t) {
@@ -263,14 +269,14 @@ class B {
     if (i.setAttribute("aria-disabled", "true"), this.tokenSelector.tokenType)
       i.value = t + " " + this.tokenSelector.tokenType;
     else {
-      const s = document.createElement("div");
-      s.innerText = "+" + (t - 1), Object.assign(s.style, {
+      const n = document.createElement("div");
+      n.innerText = "+" + (t - 1), Object.assign(n.style, {
         position: "absolute",
         left: "90%",
         top: "75%"
       });
-      const n = document.createElement("div");
-      n.appendChild(i), n.appendChild(s), i = n;
+      const s = document.createElement("div");
+      s.appendChild(i), s.appendChild(n), i = s;
     }
     return Object.assign(i.style, {
       height: e.offsetHeight,
@@ -284,19 +290,19 @@ class B {
     }), i.slot = "items", this.tokenSelector.appendChild(i), requestAnimationFrame(() => i.remove()), i;
   }
 }
-var V = Object.defineProperty, K = Object.getOwnPropertyDescriptor, c = (r, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? K(e, t) : e, n = r.length - 1, o; n >= 0; n--)
-    (o = r[n]) && (s = (i ? o(e, t, s) : o(s)) || s);
-  return i && s && V(e, t, s), s;
+var B = Object.defineProperty, c = (r, e, t, i) => {
+  for (var n = void 0, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (n = o(e, t, n) || n);
+  return n && B(e, t, n), n;
 };
-function j(r, e) {
+function K(r, e) {
   let t;
   return function(...i) {
     t != null && clearTimeout(t), t = window.setTimeout(() => r(...i), e);
   };
 }
 var U = /* @__PURE__ */ ((r) => (r.RemoveOnly = "remove-only", r.Multi = "multi", r))(U || {}), h;
-const l = (h = class extends w {
+const l = (h = class extends x {
   constructor() {
     super(...arguments), this.selectionMode = "multi", this.items = [], this.selectedIndexes = [], this._tokenGenerator = F, this._autoSuggestItemGenerator = _, this.additionalTokenCommittingKeys = [], this._activeTokenIndex = -1, this.handleInputKeyDown = (e, t) => {
       if ((e.key === "Enter" || this.additionalTokenCommittingKeys.includes(e.key)) && t.value) {
@@ -347,23 +353,22 @@ const l = (h = class extends w {
         }
       }
     }, this.selectOrAddItems = (e) => {
-      const t = [], i = e.map((s, n) => {
-        const o = s.caption == null ? -1 : this.findIndex(s);
-        return o != -1 && !this.items[o].disabled && !this.selectedIndexes.includes(o) ? (t.push(n), o) : -1;
-      }).filter((s) => s != -1);
+      const t = [], i = e.map((n, s) => {
+        const o = n.caption == null ? -1 : this.findIndex(n);
+        return o != -1 && !this.items[o].disabled && !this.selectedIndexes.includes(o) ? (t.push(s), o) : -1;
+      }).filter((n) => n != -1);
       return i.length > 0 && this.handleTokenSelection(i), t;
     }, this.handleWindowPointerDown = (e) => {
       const t = this.inputElement;
-      if (!t || !t.value)
-        return;
-      e.composedPath().some((s) => {
-        if (s instanceof HTMLElement && (e.composedPath().indexOf(t) > -1 || s.getAttribute("popover-for") === "token-autosuggest-popover"))
+      if (!t || !t.value) return;
+      e.composedPath().some((n) => {
+        if (n instanceof HTMLElement && (e.composedPath().indexOf(t) > -1 || n.getAttribute("popover-for") === "token-autosuggest-popover"))
           return !0;
       }) || this.commitTokenValue(t.value);
-    }, this.debouncedShowTokenSuggestPopover = j(this.showFilteredTokenSuggestions.bind(this), 200);
+    }, this.debouncedShowTokenSuggestPopover = K(this.showFilteredTokenSuggestions.bind(this), 200);
   }
   static get styles() {
-    return T(H);
+    return T(G);
   }
   get tokenGenerator() {
     return this._tokenGenerator;
@@ -392,7 +397,7 @@ const l = (h = class extends w {
                       <slot name="items"
                           >${this.placeholder ? m`<span part="remove-only-placeholder" class="placeholder"
                                     >${this.placeholder}</span
-                                >` : x}</slot
+                                >` : w}</slot
                       >
                   </div>
                   <slot class="additonal-content" name="additional-content" @focusin=${this.clearCheckedTokens}></slot>` : m`
@@ -420,14 +425,11 @@ const l = (h = class extends w {
       !this.contains(i) && !this.shadowRoot.contains(i) && this.clearCheckedTokens();
     }), this.addEventListener("focusin", () => {
       this.selectionMode == "remove-only" && this.activeTokenIndex == -1 && this.items.length > 0 && !this.disabled && (this.activeTokenIndex = 0);
-    }), new G(
+    }), new V(
       this,
-      () => {
-        var t;
-        return (t = this.inputElement) == null ? void 0 : t.value;
-      },
+      () => this.inputElement?.value,
       (t) => this.selectOrAddItems(t)
-    ), new B(this, (t) => this.selectOrAddItems(t));
+    ), new H(this, (t) => this.selectOrAddItems(t));
   }
   clearCheckedTokens() {
     this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(
@@ -449,13 +451,12 @@ const l = (h = class extends w {
     }
   }
   updateActiveToken(e) {
-    var i;
     if (this.disabled)
       return;
     const t = this.querySelectorAll("[slot='items']").length - 1;
-    if (this.activeTokenIndex == -1 ? e < 0 && (this.activeTokenIndex = t) : this.activeTokenIndex == t && e > 0 && this.selectionMode == "multi" ? (this.activeTokenIndex = -1, this.focus()) : this.activeTokenIndex = Math.max(0, Math.min(t, this.activeTokenIndex + e)), this.activeTokenIndex > -1 && ((i = this.inputElement) == null || i.setAttribute("focus-visible", ""), this.scrollHeight > this.offsetHeight)) {
-      const s = this.activeTokenElement;
-      s.scrollIntoViewIfNeeded ? s.scrollIntoViewIfNeeded() : s.scrollIntoView();
+    if (this.activeTokenIndex == -1 ? e < 0 && (this.activeTokenIndex = t) : this.activeTokenIndex == t && e > 0 && this.selectionMode == "multi" ? (this.activeTokenIndex = -1, this.focus()) : this.activeTokenIndex = Math.max(0, Math.min(t, this.activeTokenIndex + e)), this.activeTokenIndex > -1 && (this.inputElement?.setAttribute("focus-visible", ""), this.scrollHeight > this.offsetHeight)) {
+      const i = this.activeTokenElement;
+      i.scrollIntoViewIfNeeded ? i.scrollIntoViewIfNeeded() : i.scrollIntoView();
     }
   }
   commitTokenValue(e) {
@@ -465,13 +466,13 @@ const l = (h = class extends w {
       const i = this.tokenSuggestPopover.focusedSuggestToken;
       if (i) {
         if (!i.disabled) {
-          const s = this.findIndex(i);
-          this.handleTokenSelection([s]), this.tokenSuggestPopover.hide();
+          const n = this.findIndex(i);
+          this.handleTokenSelection([n]), this.tokenSuggestPopover.hide();
         }
         return;
       }
     }
-    if (!(e != null && e.trim()))
+    if (!e?.trim())
       return;
     const t = this.items.findIndex(
       (i) => this.caseSensitive ? i.caption == e : i.caption.toLowerCase() == e.toLowerCase()
@@ -517,21 +518,20 @@ const l = (h = class extends w {
       return;
     this.activeTokenIndex = -1;
     const e = this.inputElement;
-    e && (!this._tokenSuggestPopover || !this._tokenSuggestPopover.isOpened) && (e.value = ""), this.querySelectorAll("[slot='items']").forEach((s) => {
-      this.removeChild(s);
+    e && (!this._tokenSuggestPopover || !this._tokenSuggestPopover.isOpened) && (e.value = ""), this.querySelectorAll("[slot='items']").forEach((n) => {
+      this.removeChild(n);
     });
     const t = document.createDocumentFragment();
     let i = [];
-    this.selectionMode == "remove-only" ? i = this.items.map((s) => this.disableIfNeeded(s)) : this.selectedIndexes.forEach((s) => {
-      i.push(this.disableIfNeeded(this.items[s]));
-    }), i.forEach((s) => {
-      const n = this.tokenGenerator(s, this.findIndex(s));
-      n.slot = "items", t.appendChild(n), n.id || (n.id = window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)), n.setClickHandler((o, a) => this.onTokenClick(n, !0, a)), n.addEventListener("click", () => {
-        var a;
-        (a = this.inputElement) == null || a.removeAttribute("focus-visible");
+    this.selectionMode == "remove-only" ? i = this.items.map((n) => this.disableIfNeeded(n)) : this.selectedIndexes.forEach((n) => {
+      i.push(this.disableIfNeeded(this.items[n]));
+    }), i.forEach((n) => {
+      const s = this.tokenGenerator(n, this.findIndex(n));
+      s.slot = "items", t.appendChild(s), s.id || (s.id = window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)), s.setClickHandler((o, a) => this.onTokenClick(s, !0, a)), s.addEventListener("click", () => {
+        this.inputElement?.removeAttribute("focus-visible");
         const o = window.getSelection();
         (!o || o.type != "Range") && document.activeElement != this && this.focus();
-      }), n.setDeleteHandler((o) => this.removeTokens([o]));
+      }), s.setDeleteHandler((o) => this.removeTokens([o]));
     }), this.appendChild(t), this._tokenSuggestPopover && this._tokenSuggestPopover.refreshItems();
   }
   removeTokens(e) {
@@ -557,10 +557,10 @@ const l = (h = class extends w {
       }
   }
   onTokenClick(e, t, i) {
-    let s;
-    this.querySelectorAll("[slot='items']").forEach((n, o) => {
-      e == n ? s = o : i || n.setAttribute("aria-checked", "false");
-    }), this.activeTokenIndex = s, this.setAttribute("aria-activedescendant", this.activeTokenElement.id), this._tokenSuggestPopover && this._tokenSuggestPopover.isOpened && this._tokenSuggestPopover.hide(), i || this.dispatchEvent(
+    let n;
+    this.querySelectorAll("[slot='items']").forEach((s, o) => {
+      e == s ? n = o : i || s.setAttribute("aria-checked", "false");
+    }), this.activeTokenIndex = n, this.setAttribute("aria-activedescendant", this.activeTokenElement.id), this._tokenSuggestPopover && this._tokenSuggestPopover.isOpened && this._tokenSuggestPopover.hide(), i || this.dispatchEvent(
       new CustomEvent("token-clicked", {
         detail: {
           index: e.index,
@@ -620,33 +620,32 @@ const l = (h = class extends w {
     }
   }
   get hasInputValue() {
-    var e;
-    return !!((e = this.inputElement) != null && e.value);
+    return !!this.inputElement?.value;
   }
 }, h.ID = "sd-token-selector", h.ensureDefined = () => {
   b.ensureDefined(), customElements.get(h.ID) || customElements.define(h.ID, h);
 }, h.shadowRootOptions = {
-  ...w.shadowRootOptions,
+  ...x.shadowRootOptions,
   delegatesFocus: !0
 }, h);
 c([
   d({ type: String, attribute: "selection-mode", reflect: !0 })
-], l.prototype, "selectionMode", 2);
+], l.prototype, "selectionMode");
 c([
   d({ type: Array, attribute: !1 })
-], l.prototype, "items", 2);
+], l.prototype, "items");
 c([
   d({ type: Array, attribute: !1 })
-], l.prototype, "selectedIndexes", 2);
+], l.prototype, "selectedIndexes");
 c([
   d({ type: String, reflect: !0 })
-], l.prototype, "placeholder", 2);
+], l.prototype, "placeholder");
 c([
   d({ type: String, reflect: !0, attribute: "suggest-list-class" })
-], l.prototype, "suggestListClass", 2);
+], l.prototype, "suggestListClass");
 c([
   d({ type: String, reflect: !0, attribute: "input-label" })
-], l.prototype, "inputLabel", 2);
+], l.prototype, "inputLabel");
 c([
   d({
     converter: {
@@ -656,26 +655,26 @@ c([
     reflect: !0,
     attribute: "aria-disabled"
   })
-], l.prototype, "disabled", 2);
+], l.prototype, "disabled");
 c([
   d({ type: String, attribute: !0 })
-], l.prototype, "validationMessage", 2);
+], l.prototype, "validationMessage");
 c([
   d({ type: String, attribute: !0 })
-], l.prototype, "validationIconSrc", 2);
+], l.prototype, "validationIconSrc");
 c([
   d({ converter: S.levelConverter, attribute: !0, reflect: !0 })
-], l.prototype, "validationLevel", 2);
+], l.prototype, "validationLevel");
 c([
   d({ type: String, reflect: !0, attribute: "token-type" })
-], l.prototype, "tokenType", 2);
+], l.prototype, "tokenType");
 c([
   d({ type: Boolean, reflect: !0, attribute: "case-sensitive" })
-], l.prototype, "caseSensitive", 2);
-let ne = l;
+], l.prototype, "caseSensitive");
+let se = l;
 export {
   U as SelectionMode,
-  ne as default,
+  se as default,
   F as generator
 };
 //# sourceMappingURL=token-selector.mjs.map