@cas-smartdesign/token-selector 0.16.1 → 0.17.0

package/dist/token-selector.d.ts

@@ -1,7 +1,7 @@
 import { LitElement, TemplateResult, CSSResult, PropertyValues } from "lit";
 import "@cas-smartdesign/lit-input";
 import { ValidationLevel } from "@cas-smartdesign/field-validation-message";
-import { ItemGenerator } from "@cas-smartdesign/list";
+import { ItemGenerator } from "@cas-smartdesign/virtual-list";
 import { Filter } from "./token-suggest-popover";
 import Token, { TokenData } from "./token";
 export type { Filter as InMemoryFilter } from "./token-suggest-popover";

package/dist/token-selector.mjs

@@ -1,30 +1,40 @@
-import { LitElement as b, unsafeCSS as T, html as v, nothing as w } from "lit";
+import { LitElement as x, unsafeCSS as T, html as m, nothing as I } from "lit";
 import { property as a } from "lit/decorators/property.js";
 import "@cas-smartdesign/lit-input";
-import E from "@cas-smartdesign/field-validation-message";
-import { generator as S } from "@cas-smartdesign/list-item";
-import _ from "@cas-smartdesign/popover";
-import I from "@cas-smartdesign/list";
-import { KeyDownDelegator as C } from "@cas-smartdesign/element-utils";
+import S from "@cas-smartdesign/field-validation-message";
+import { generator as _ } from "@cas-smartdesign/list-item";
+import C from "@cas-smartdesign/popover";
+import y from "@cas-smartdesign/virtual-list";
+import { KeyDownDelegator as L } from "@cas-smartdesign/element-utils";
 import { ifDefined as A } from "lit/directives/if-defined.js";
 import { unsafeSVG as P } from "lit/directives/unsafe-svg.js";
-import L from "@cas-smartdesign/image-tools";
-class D {
-  constructor(e, t, i, s) {
-    this.inputElement = e, this.notSelectedTokensProvider = t, this.initializeCallback = s, this.filter = (n, r) => n ? r.filter((l) => l.disabled || l.deactivated ? !1 : l.caption && l.caption.toLowerCase().includes(n)) : r, I.ensureDefined(), this._tokenList = new I(), this._tokenList.style.minWidth = "250px", this._tokenList.addEventListener("selection", (n) => {
-      const r = n.detail.index, l = this._suggestItems[r];
-      i(l), this.hide();
-    }), new C(this._tokenList, (n, r, l) => {
-      this._tokenList.dispatchEvent(new KeyboardEvent(n.type, n)), !l && !this.isOpened && this.show();
+import D from "@cas-smartdesign/image-tools";
+class O {
+  constructor(e, t, i, n) {
+    this.inputElement = e, this.notSelectedTokensProvider = t, this.initializeCallback = n, this.filter = (s, o) => s ? o.filter((d) => d.disabled || d.deactivated ? !1 : d.caption && d.caption.toLowerCase().includes(s)) : o, y.ensureDefined(), this._tokenList = new y(), this._tokenList.style.minWidth = "250px", this._tokenList.style.maxHeight = "49vh", this._tokenList.itemHeight = 50, this._tokenList.addEventListener("selection", (s) => {
+      const o = s.detail.index, d = this._suggestItems[o];
+      i(d), this.hide();
+    }), this._tokenList.addEventListener("data-request", (s) => {
+      this.lastRequestedStartIndex = s.detail.startIndex, this.lastRequestedStopIndex = s.detail.stopIndex, this._tokenList.items = this._suggestItems.slice(
+        this.lastRequestedStartIndex,
+        this.lastRequestedStopIndex + 1
+      );
+    }), new L(this._tokenList, (s, o, d) => {
+      this._tokenList.dispatchEvent(new KeyboardEvent(s.type, s)), !d && !this.isOpened && this.show();
     }).connect(e);
   }
   show() {
-    this.inputElement.effectiveDisabled || (this.popover, this._suggestItems = this.filterItems((this.inputElement.value || "").toLowerCase()), this._suggestItems.length == 0 ? this.hide() : (this._tokenList.items = this._suggestItems.map((e) => ({ ...e, contentMode: "text" })), this._tokenList.focusIndex = -1, Object.assign(this._tokenList.style, {
+    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, requestAnimationFrame(() => {
+      this.lastRequestedStartIndex != null && (this._tokenList.items = this._suggestItems.slice(
+        this.lastRequestedStartIndex,
+        this.lastRequestedStopIndex + 1
+      ));
+    }), Object.assign(this._tokenList.style, {
       minWidth: `${Math.max(this.popover.targetElement.offsetWidth, 250)}px`
     }), this.popover.show()));
   }
   refreshItems() {
-    this.isOpened && (this._suggestItems = this.filterItems((this.inputElement.value || "").toLowerCase()), this._suggestItems.length == 0 ? this.hide() : this._tokenList.items = this._suggestItems.map((e) => ({ ...e, contentMode: "text" })));
+    this.isOpened && (this._suggestItems = this.filterItems((this.inputElement.value || "").toLowerCase()), this._suggestItems.length == 0 ? this.hide() : (this._tokenList.itemCount = this._suggestItems.length, this._tokenList.items = []));
   }
   filterItems(e) {
     const t = this.notSelectedTokensProvider();
@@ -32,7 +42,7 @@ class D {
   }
   hide() {
     var e;
-    this._suggestItems = [], this._tokenList.items = [], (e = this._popover) == null || e.hide();
+    this._suggestItems = [], this._tokenList.itemCount = 0, this._tokenList.items = [], (e = this._popover) == null || e.hide();
   }
   get list() {
     return this._tokenList;
@@ -41,7 +51,7 @@ class D {
     return this._popover || (this._popover = this.createPopover(), this.initializeCallback(this)), this._popover;
   }
   createPopover() {
-    const e = new _();
+    const e = new C();
     return e.setAttribute("trigger-type", "manual"), e.setAttribute("placement", "bottom-start"), e.setAttribute("modal", ""), e.setAttribute("popover-for", "token-autosuggest-popover"), e.setAttribute("offset", "-2"), e.targetElement = this.inputElement, e.appendChild(this._tokenList), e;
   }
   get isOpened() {
@@ -51,25 +61,25 @@ class D {
     return this._suggestItems[this._tokenList.focusIndex];
   }
 }
-const O = ":host{flex-shrink:0;max-width:100%}.container{display:flex;height:28px;background-color:var(--token-background-color, #f3f3f3);border:var(--token-border);box-sizing:border-box}.container .icon-wrapper{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:100%;overflow:hidden;background-color:var(--token-icon-background-color, transparent)}.container .icon-wrapper .icon{height:100%;width:100%;object-fit:contain;background-size:cover;background-repeat:no-repeat;background-position:center}.container .value{display:inline-block;align-self:center;padding:0 8px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container .delete-button-wrapper{display:flex;align-self:center;height:16px;width:16px;padding-right:8px;opacity:.5}.container .delete-button-wrapper:hover{cursor:pointer;filter:brightness(10%);opacity:1}", M = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
+const q = ":host{flex-shrink:0;max-width:100%}.container{display:flex;height:28px;background-color:var(--token-background-color, #f3f3f3);border:var(--token-border);box-sizing:border-box}.container .icon-wrapper{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:100%;overflow:hidden;background-color:var(--token-icon-background-color, transparent)}.container .icon-wrapper .icon{height:100%;width:100%;object-fit:contain;background-size:cover;background-repeat:no-repeat;background-position:center}.container .value{display:inline-block;align-self:center;padding:0 8px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container .delete-button-wrapper{display:flex;align-self:center;height:16px;width:16px;padding-right:8px;opacity:.5}.container .delete-button-wrapper:hover{cursor:pointer;filter:brightness(10%);opacity:1}", M = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
   <path d="m3.5 12.5 9-9m-9 0 9 9" style="fill:none;stroke:#333;stroke-linecap:square;stroke-width:1.1px"/>\r
 </svg>`;
-var $ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, g = (o, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? q(e, t) : e, n = o.length - 1, r; n >= 0; n--)
-    (r = o[n]) && (s = (i ? r(e, t, s) : r(s)) || s);
-  return i && s && $(e, t, s), s;
+var $ = Object.defineProperty, R = Object.getOwnPropertyDescriptor, g = (r, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? R(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 && $(e, t, n), n;
 };
-const x = {
-  fromAttribute: (o) => o == "true",
-  toAttribute: (o) => o
+const w = {
+  fromAttribute: (r) => r == "true",
+  toAttribute: (r) => r
 };
 var u;
-const p = (u = class extends b {
+const p = (u = class extends x {
   constructor() {
     super(...arguments), this.value = "", this.type = "", this.icon = "", this.iconPlaceholder = "", this.iconBackgroundColor = "", this._checked = !1;
   }
   static get styles() {
-    return T(O);
+    return T(q);
   }
   set checked(e) {
     const t = this._checked;
@@ -88,29 +98,29 @@ const p = (u = class extends b {
     });
   }
   render() {
-    return v`
+    return m`
             <div class="container">
                 <slot name="before-icon"></slot>
                 ${this.renderIcon()}
                 <slot name="after-icon"></slot>
                 <div class="value">${this.value}</div>
-                ${this.disabled ? w : v` <div class="delete-button-wrapper">${P(M)}</div> `}
+                ${this.disabled ? I : m` <div class="delete-button-wrapper">${P(M)}</div> `}
             </div>
         `;
   }
   renderIcon() {
     if (this.icon || this.iconPlaceholder) {
       const e = this.iconBackgroundColor != null ? `--token-icon-background-color: ${this.iconBackgroundColor}` : void 0;
-      return v`
+      return m`
                 <div class="icon-wrapper" style="${A(e)}" role="img">
                     <div class="icon"></div>
                 </div>
             `;
     }
-    return w;
+    return I;
   }
   updated(e) {
-    super.updated(e), (e.has("icon") || e.has("iconPlaceholder")) && (this.icon || this.iconPlaceholder) && L.showImage(this.shadowRoot.querySelector(".icon"), this.icon, this.iconPlaceholder), e.has("disabled") && !this.disabled && this.checked && (this.checked = !1);
+    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);
   }
   setClickHandler(e) {
     this._tokenClickHandler = e;
@@ -137,21 +147,21 @@ g([
   a({ type: String })
 ], p.prototype, "iconBackgroundColor", 2);
 g([
-  a({ converter: x, reflect: !0, attribute: "aria-disabled" })
+  a({ converter: w, reflect: !0, attribute: "aria-disabled" })
 ], p.prototype, "disabled", 2);
 g([
-  a({ converter: x, reflect: !0, attribute: "aria-current" })
+  a({ converter: w, reflect: !0, attribute: "aria-current" })
 ], p.prototype, "current", 2);
 g([
-  a({ converter: x, reflect: !0, attribute: "aria-checked" })
+  a({ converter: w, reflect: !0, attribute: "aria-checked" })
 ], p.prototype, "checked", 1);
-let k = p;
-const G = (o, e) => {
-  const t = document.createElement(k.ID);
-  return o && (t.value = o.caption, t.type = o.type, t.icon = o.icon, t.iconPlaceholder = o.iconPlaceholder, t.iconBackgroundColor = o.iconBackgroundColor, t.disabled = o.disabled, t.index = e), t;
+let b = p;
+const G = (r, e) => {
+  const t = document.createElement(b.ID);
+  return r && (t.value = r.caption, t.type = r.type, t.icon = r.icon, t.iconPlaceholder = r.iconPlaceholder, t.iconBackgroundColor = r.iconBackgroundColor, t.disabled = r.disabled, t.index = e), t;
 };
-k.ensureDefined();
-const m = "web application/json";
+b.ensureDefined();
+const k = "web application/json";
 class B {
   constructor(e, t, i) {
     navigator.clipboard && (e.addEventListener("copy", () => {
@@ -165,16 +175,16 @@ class B {
   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((r) => e.items[r])), n = new Blob([s], { type: m });
+      const n = JSON.stringify(i.map((o) => e.items[o])), s = new Blob([n], { type: k });
       navigator.clipboard.write([
         new ClipboardItem({
-          [m]: n
+          [k]: s
         })
       ]);
     }
@@ -182,9 +192,9 @@ class B {
   async readFromClipboard(e) {
     const t = await navigator.clipboard.read();
     for (const i of t)
-      if (i.types.includes(m)) {
-        const n = await (await i.getType(m)).text(), r = JSON.parse(n);
-        Array.isArray(r) && e(r);
+      if (i.types.includes(k)) {
+        const s = await (await i.getType(k)).text(), o = JSON.parse(s);
+        Array.isArray(o) && e(o);
       }
   }
 }
@@ -192,44 +202,47 @@ const F = ":host{display:flex;contain:layout style}:host .additonal-content::slo
 class H {
   constructor(e, t) {
     this.tokenSelector = e;
-    let i = [];
-    const s = (n) => {
-      const r = n.target;
-      e.contains(r) || e.removeTokens(i), i = [];
+    const i = /* @__PURE__ */ new Map(), n = (s) => {
+      const o = s.target;
+      if (!e.contains(o)) {
+        const d = s.addedIndexes;
+        d && e.removeTokens(d.map((v) => i.get(v)));
+      }
+      i.clear();
     };
-    e.addEventListener("dragstart", (n) => {
-      const r = n.target;
-      if (r instanceof k) {
-        if (r.disabled) {
-          n.preventDefault();
+    e.addEventListener("dragstart", (s) => {
+      const o = s.target;
+      if (o instanceof b) {
+        if (o.disabled) {
+          s.preventDefault();
           return;
         }
-        r.setAttribute("aria-checked", "true");
-        const l = e.querySelectorAll("[slot='items'][aria-checked='true']");
-        if (l.length > 0) {
-          const y = Array.from(l).filter((f) => !f.disabled).map((f) => (i.push(f.index), e.items[f.index]));
-          if (n.dataTransfer.setData("text/plain", JSON.stringify(y)), n.dataTransfer.dropEffect = "move", n.dataTransfer.effectAllowed = "move", l.length > 1) {
-            const f = this.createCustomDragImage(r, y.length);
-            n.dataTransfer.setDragImage(f, -14, -14);
+        o.setAttribute("aria-checked", "true");
+        const d = e.querySelectorAll("[slot='items'][aria-checked='true']");
+        if (d.length > 0) {
+          const v = Array.from(d).filter((f) => !f.disabled).map((f, E) => (i.set(E, f.index), e.items[f.index]));
+          if (s.dataTransfer.setData("text/sd-token-selector", JSON.stringify(v)), s.dataTransfer.dropEffect = "move", s.dataTransfer.effectAllowed = "move", d.length > 1) {
+            const f = this.createCustomDragImage(o, v.length);
+            s.dataTransfer.setDragImage(f, -14, -14);
           }
-          window.addEventListener("drop", s, { capture: !0, 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 r = n.dataTransfer.getData("text/plain");
-      if (r)
+      const o = s.dataTransfer.getData("text/sd-token-selector");
+      if (o)
         try {
-          const l = JSON.parse(r);
-          Array.isArray(l) && (t(l), n.preventDefault());
+          const d = JSON.parse(o);
+          Array.isArray(d) && (s.addedIndexes = t(d), s.preventDefault());
         } catch {
         }
     }), e.addEventListener("dragend", () => {
-      window.removeEventListener("drop", s), i = [];
+      window.removeEventListener("drop", n), i.clear();
     });
   }
   createCustomDragImage(e, t) {
@@ -237,14 +250,14 @@ class H {
     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,
@@ -258,21 +271,21 @@ class H {
     }), i.slot = "items", this.tokenSelector.appendChild(i), requestAnimationFrame(() => i.remove()), i;
   }
 }
-var N = Object.defineProperty, j = Object.getOwnPropertyDescriptor, c = (o, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(e, t) : e, n = o.length - 1, r; n >= 0; n--)
-    (r = o[n]) && (s = (i ? r(e, t, s) : r(s)) || s);
-  return i && s && N(e, t, s), s;
+var N = Object.defineProperty, j = Object.getOwnPropertyDescriptor, h = (r, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? j(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 && N(e, t, n), n;
 };
-function K(o, e) {
+function K(r, e) {
   let t;
   return function(...i) {
-    t != null && clearTimeout(t), t = window.setTimeout(() => o(...i), e);
+    t != null && clearTimeout(t), t = window.setTimeout(() => r(...i), e);
   };
 }
-var R = /* @__PURE__ */ ((o) => (o.RemoveOnly = "remove-only", o.Multi = "multi", o))(R || {}), h;
-const d = (h = class extends b {
+var V = /* @__PURE__ */ ((r) => (r.RemoveOnly = "remove-only", r.Multi = "multi", r))(V || {}), c;
+const l = (c = class extends x {
   constructor() {
-    super(...arguments), this.selectionMode = "multi", this.items = [], this.selectedIndexes = [], this._tokenGenerator = G, this._autoSuggestItemGenerator = S, this.additionalTokenCommittingKeys = [], this._activeTokenIndex = -1, this.handleInputKeyDown = (e, t) => {
+    super(...arguments), this.selectionMode = "multi", this.items = [], this.selectedIndexes = [], this._tokenGenerator = G, this._autoSuggestItemGenerator = _, 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;
@@ -324,8 +337,8 @@ const d = (h = class extends b {
       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"))
+      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 = K(this.showFilteredTokenSuggestions.bind(this), 200);
@@ -355,14 +368,14 @@ const d = (h = class extends b {
     this.inputElement ? this.inputElement.focus() : this.shadowRoot.querySelector(".container").focus();
   }
   render() {
-    return this.selectionMode == "remove-only" ? v`<div class="container" tabindex="0">
+    return this.selectionMode == "remove-only" ? m`<div class="container" tabindex="0">
                       <slot name="items"
-                          >${this.placeholder ? v`<span part="remove-only-placeholder" class="placeholder"
+                          >${this.placeholder ? m`<span part="remove-only-placeholder" class="placeholder"
                                     >${this.placeholder}</span
-                                >` : w}</slot
+                                >` : I}</slot
                       >
                   </div>
-                  <slot class="additonal-content" name="additional-content"></slot>` : v`
+                  <slot class="additonal-content" name="additional-content"></slot>` : m`
                   <sd-lit-input
                       class="input"
                       .extendedPrefix=${!0}
@@ -383,7 +396,7 @@ const d = (h = class extends b {
     super.firstUpdated(e), this.setAttribute("role", "listbox"), this.setAttribute("aria-multiselectable", "true"), this.hasAttribute("tabIndex") || (this.tabIndex = 0), this.addEventListener("focusout", (t) => {
       const i = t.relatedTarget;
       !this.contains(i) && !this.shadowRoot.contains(i) && this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(
-        (s) => s.checked = !1
+        (n) => n.checked = !1
       );
     }), new B(
       this,
@@ -395,11 +408,11 @@ const d = (h = class extends b {
     ), new H(this, (t) => this.addMatchingItems(t));
   }
   addMatchingItems(e) {
-    const t = e.map((i) => {
-      const s = i.caption == null ? -1 : this.findIndex(i);
-      return s != -1 && !this.items[s].disabled && !this.selectedIndexes.includes(s) ? s : -1;
-    }).filter((i) => i != -1);
-    t.length > 0 && this.handleTokenSelection(t);
+    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;
   }
   removeSelectionOrActiveToken() {
     if (!this.disabled) {
@@ -424,8 +437,8 @@ const d = (h = class extends b {
       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;
       }
@@ -457,7 +470,7 @@ const d = (h = class extends b {
     return !this.selectedIndexes.includes(e);
   }
   get tokenSuggestPopover() {
-    return !this._tokenSuggestPopover && this.inputElement && (this._tokenSuggestPopover = new D(
+    return !this._tokenSuggestPopover && this.inputElement && (this._tokenSuggestPopover = new O(
       this.inputElement,
       () => this.items.filter((e, t) => !e.disabled && this.isTokenNotSelected(t)),
       (e) => {
@@ -475,18 +488,18 @@ const d = (h = class extends b {
     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);
+    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(() => this.onTokenClick(n, !0)), n.addEventListener("click", () => {
+    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(() => this.onTokenClick(s, !0)), s.addEventListener("click", () => {
         document.activeElement != this && this.focus();
-      }), n.setDeleteHandler((r) => this.removeTokens([r]));
+      }), s.setDeleteHandler((o) => this.removeTokens([o]));
     }), this.appendChild(t), this._tokenSuggestPopover && this._tokenSuggestPopover.refreshItems();
   }
   removeTokens(e) {
@@ -507,8 +520,8 @@ const d = (h = class extends b {
   }
   onTokenClick(e, t) {
     let i;
-    this.querySelectorAll("[slot='items']").forEach((s, n) => {
-      e == s ? i = n : s.setAttribute("aria-checked", "false");
+    this.querySelectorAll("[slot='items']").forEach((n, s) => {
+      e == n ? i = s : n.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: {
@@ -572,59 +585,59 @@ const d = (h = class extends b {
     var e;
     return !!((e = this.inputElement) != null && e.value);
   }
-}, h.ID = "sd-token-selector", h.ensureDefined = () => {
-  k.ensureDefined(), customElements.get(h.ID) || customElements.define(h.ID, h);
-}, h.shadowRootOptions = {
-  ...b.shadowRootOptions,
+}, c.ID = "sd-token-selector", c.ensureDefined = () => {
+  b.ensureDefined(), customElements.get(c.ID) || customElements.define(c.ID, c);
+}, c.shadowRootOptions = {
+  ...x.shadowRootOptions,
   delegatesFocus: !0
-}, h);
-c([
+}, c);
+h([
   a({ type: String, attribute: "selection-mode", reflect: !0 })
-], d.prototype, "selectionMode", 2);
-c([
+], l.prototype, "selectionMode", 2);
+h([
   a({ type: Array, attribute: !1 })
-], d.prototype, "items", 2);
-c([
+], l.prototype, "items", 2);
+h([
   a({ type: Array, attribute: !1 })
-], d.prototype, "selectedIndexes", 2);
-c([
+], l.prototype, "selectedIndexes", 2);
+h([
   a({ type: String, reflect: !0 })
-], d.prototype, "placeholder", 2);
-c([
+], l.prototype, "placeholder", 2);
+h([
   a({ type: String, reflect: !0, attribute: "suggest-list-class" })
-], d.prototype, "suggestListClass", 2);
-c([
+], l.prototype, "suggestListClass", 2);
+h([
   a({ type: String, reflect: !0, attribute: "input-label" })
-], d.prototype, "inputLabel", 2);
-c([
+], l.prototype, "inputLabel", 2);
+h([
   a({
     converter: {
-      fromAttribute: (o) => o == "true",
-      toAttribute: (o) => o
+      fromAttribute: (r) => r == "true",
+      toAttribute: (r) => r
     },
     reflect: !0,
     attribute: "aria-disabled"
   })
-], d.prototype, "disabled", 2);
-c([
+], l.prototype, "disabled", 2);
+h([
   a({ type: String, attribute: !0 })
-], d.prototype, "validationMessage", 2);
-c([
+], l.prototype, "validationMessage", 2);
+h([
   a({ type: String, attribute: !0 })
-], d.prototype, "validationIconSrc", 2);
-c([
-  a({ converter: E.levelConverter, attribute: !0, reflect: !0 })
-], d.prototype, "validationLevel", 2);
-c([
+], l.prototype, "validationIconSrc", 2);
+h([
+  a({ converter: S.levelConverter, attribute: !0, reflect: !0 })
+], l.prototype, "validationLevel", 2);
+h([
   a({ type: String, reflect: !0, attribute: "token-type" })
-], d.prototype, "tokenType", 2);
-c([
+], l.prototype, "tokenType", 2);
+h([
   a({ type: Boolean, reflect: !0, attribute: "case-sensitive" })
-], d.prototype, "caseSensitive", 2);
-let ie = d;
+], l.prototype, "caseSensitive", 2);
+let se = l;
 export {
-  R as SelectionMode,
-  ie as default,
+  V as SelectionMode,
+  se as default,
   G as generator
 };
 //# sourceMappingURL=token-selector.mjs.map