@cas-smartdesign/token-selector 0.16.2 → 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 x, unsafeCSS as T, html as m, 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 S from "@cas-smartdesign/field-validation-message";
 import { generator as _ } from "@cas-smartdesign/list-item";
 import C from "@cas-smartdesign/popover";
-import I from "@cas-smartdesign/list";
-import { KeyDownDelegator as A } from "@cas-smartdesign/element-utils";
-import { ifDefined as P } from "lit/directives/if-defined.js";
-import { unsafeSVG as L } from "lit/directives/unsafe-svg.js";
+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 D from "@cas-smartdesign/image-tools";
 class O {
-  constructor(e, t, i, s) {
-    this.inputElement = e, this.notSelectedTokensProvider = t, this.initializeCallback = s, this.filter = (n, o) => n ? o.filter((d) => d.disabled || d.deactivated ? !1 : d.caption && d.caption.toLowerCase().includes(n)) : o, I.ensureDefined(), this._tokenList = new I(), this._tokenList.style.minWidth = "250px", this._tokenList.addEventListener("selection", (n) => {
-      const o = n.detail.index, d = this._suggestItems[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();
-    }), new A(this._tokenList, (n, o, d) => {
-      this._tokenList.dispatchEvent(new KeyboardEvent(n.type, n)), !d && !this.isOpened && this.show();
+    }), 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 O {
   }
   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;
@@ -51,15 +61,15 @@ class O {
     return this._suggestItems[this._tokenList.focusIndex];
   }
 }
-const M = ":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}", $ = `<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 q = Object.defineProperty, G = Object.getOwnPropertyDescriptor, g = (r, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? G(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 && q(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 y = {
+const w = {
   fromAttribute: (r) => r == "true",
   toAttribute: (r) => r
 };
@@ -69,7 +79,7 @@ const p = (u = class extends x {
     super(...arguments), this.value = "", this.type = "", this.icon = "", this.iconPlaceholder = "", this.iconBackgroundColor = "", this._checked = !1;
   }
   static get styles() {
-    return T(M);
+    return T(q);
   }
   set checked(e) {
     const t = this._checked;
@@ -94,7 +104,7 @@ const p = (u = class extends x {
                 ${this.renderIcon()}
                 <slot name="after-icon"></slot>
                 <div class="value">${this.value}</div>
-                ${this.disabled ? w : m` <div class="delete-button-wrapper">${L($)}</div> `}
+                ${this.disabled ? I : m` <div class="delete-button-wrapper">${P(M)}</div> `}
             </div>
         `;
   }
@@ -102,12 +112,12 @@ const p = (u = class extends x {
     if (this.icon || this.iconPlaceholder) {
       const e = this.iconBackgroundColor != null ? `--token-icon-background-color: ${this.iconBackgroundColor}` : void 0;
       return m`
-                <div class="icon-wrapper" style="${P(e)}" role="img">
+                <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) && D.showImage(this.shadowRoot.querySelector(".icon"), this.icon, this.iconPlaceholder), e.has("disabled") && !this.disabled && this.checked && (this.checked = !1);
@@ -137,22 +147,22 @@ g([
   a({ type: String })
 ], p.prototype, "iconBackgroundColor", 2);
 g([
-  a({ converter: y, reflect: !0, attribute: "aria-disabled" })
+  a({ converter: w, reflect: !0, attribute: "aria-disabled" })
 ], p.prototype, "disabled", 2);
 g([
-  a({ converter: y, reflect: !0, attribute: "aria-current" })
+  a({ converter: w, reflect: !0, attribute: "aria-current" })
 ], p.prototype, "current", 2);
 g([
-  a({ converter: y, reflect: !0, attribute: "aria-checked" })
+  a({ converter: w, reflect: !0, attribute: "aria-checked" })
 ], p.prototype, "checked", 1);
 let b = p;
-const B = (r, e) => {
+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;
 };
 b.ensureDefined();
 const k = "web application/json";
-class F {
+class B {
   constructor(e, t, i) {
     navigator.clipboard && (e.addEventListener("copy", () => {
       t() || this.writeToClipboard(e);
@@ -165,16 +175,16 @@ class F {
   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
         })
       ]);
     }
@@ -183,56 +193,56 @@ class F {
     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){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 N {
+const F = ":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 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.contains(o)) {
-        const d = n.addedIndexes;
+        const d = s.addedIndexes;
         d && e.removeTokens(d.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;
         }
         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 (n.dataTransfer.setData("text/sd-token-selector", JSON.stringify(v)), n.dataTransfer.dropEffect = "move", n.dataTransfer.effectAllowed = "move", d.length > 1) {
+          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);
-            n.dataTransfer.setDragImage(f, -14, -14);
+            s.dataTransfer.setDragImage(f, -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 d = JSON.parse(o);
-          Array.isArray(d) && (n.addedIndexes = t(d), n.preventDefault());
+          Array.isArray(d) && (s.addedIndexes = t(d), s.preventDefault());
         } catch {
         }
     }), e.addEventListener("dragend", () => {
-      window.removeEventListener("drop", s), i.clear();
+      window.removeEventListener("drop", n), i.clear();
     });
   }
   createCustomDragImage(e, t) {
@@ -240,14 +250,14 @@ class N {
     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,
@@ -261,21 +271,21 @@ class N {
     }), i.slot = "items", this.tokenSelector.appendChild(i), requestAnimationFrame(() => i.remove()), i;
   }
 }
-var j = 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 && j(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 R(r, e) {
+function K(r, e) {
   let t;
   return function(...i) {
     t != null && clearTimeout(t), t = window.setTimeout(() => r(...i), e);
   };
 }
-var V = /* @__PURE__ */ ((r) => (r.RemoveOnly = "remove-only", r.Multi = "multi", r))(V || {}), h;
-const l = (h = class extends x {
+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 = B, this._autoSuggestItemGenerator = _, 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;
@@ -327,14 +337,14 @@ const l = (h = class extends x {
       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 = R(this.showFilteredTokenSuggestions.bind(this), 200);
+    }, this.debouncedShowTokenSuggestPopover = K(this.showFilteredTokenSuggestions.bind(this), 200);
   }
   static get styles() {
-    return T(H);
+    return T(F);
   }
   get tokenGenerator() {
     return this._tokenGenerator;
@@ -362,7 +372,7 @@ const l = (h = class extends x {
                       <slot name="items"
                           >${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>` : m`
@@ -386,22 +396,22 @@ const l = (h = class extends x {
     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 F(
+    }), new B(
       this,
       () => {
         var t;
         return (t = this.inputElement) == null ? void 0 : t.value;
       },
       (t) => this.addMatchingItems(t)
-    ), new N(this, (t) => this.addMatchingItems(t));
+    ), new H(this, (t) => this.addMatchingItems(t));
   }
   addMatchingItems(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;
   }
   removeSelectionOrActiveToken() {
@@ -427,8 +437,8 @@ const l = (h = class extends x {
       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;
       }
@@ -478,18 +488,18 @@ const l = (h = class extends x {
     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((o) => this.removeTokens([o]));
+      }), s.setDeleteHandler((o) => this.removeTokens([o]));
     }), this.appendChild(t), this._tokenSuggestPopover && this._tokenSuggestPopover.refreshItems();
   }
   removeTokens(e) {
@@ -510,8 +520,8 @@ const l = (h = class extends x {
   }
   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: {
@@ -575,31 +585,31 @@ const l = (h = class extends x {
     var e;
     return !!((e = this.inputElement) != null && e.value);
   }
-}, h.ID = "sd-token-selector", h.ensureDefined = () => {
-  b.ensureDefined(), customElements.get(h.ID) || customElements.define(h.ID, h);
-}, h.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 })
 ], l.prototype, "selectionMode", 2);
-c([
+h([
   a({ type: Array, attribute: !1 })
 ], l.prototype, "items", 2);
-c([
+h([
   a({ type: Array, attribute: !1 })
 ], l.prototype, "selectedIndexes", 2);
-c([
+h([
   a({ type: String, reflect: !0 })
 ], l.prototype, "placeholder", 2);
-c([
+h([
   a({ type: String, reflect: !0, attribute: "suggest-list-class" })
 ], l.prototype, "suggestListClass", 2);
-c([
+h([
   a({ type: String, reflect: !0, attribute: "input-label" })
 ], l.prototype, "inputLabel", 2);
-c([
+h([
   a({
     converter: {
       fromAttribute: (r) => r == "true",
@@ -609,25 +619,25 @@ c([
     attribute: "aria-disabled"
   })
 ], l.prototype, "disabled", 2);
-c([
+h([
   a({ type: String, attribute: !0 })
 ], l.prototype, "validationMessage", 2);
-c([
+h([
   a({ type: String, attribute: !0 })
 ], l.prototype, "validationIconSrc", 2);
-c([
+h([
   a({ converter: S.levelConverter, attribute: !0, reflect: !0 })
 ], l.prototype, "validationLevel", 2);
-c([
+h([
   a({ type: String, reflect: !0, attribute: "token-type" })
 ], l.prototype, "tokenType", 2);
-c([
+h([
   a({ type: Boolean, reflect: !0, attribute: "case-sensitive" })
 ], l.prototype, "caseSensitive", 2);
 let se = l;
 export {
   V as SelectionMode,
   se as default,
-  B as generator
+  G as generator
 };
 //# sourceMappingURL=token-selector.mjs.map