@cas-smartdesign/token-selector 0.15.0

package/dist/token-selector.mjs

@@ -0,0 +1,637 @@
+import { LitElement as b, unsafeCSS as T, html as v, nothing as w } 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 { 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, o) => {
+      if (!n)
+        return !0;
+      if (o.disabled || o.deactivated)
+        return !1;
+      if (o.caption && o.caption.toLowerCase().includes(n))
+        return !0;
+    }, I.ensureDefined(), this._tokenList = new I(), this._tokenList.style.minWidth = "250px", this._tokenList.addEventListener("selection", (n) => {
+      const o = n.detail.index, c = this._suggestItems[o];
+      i(c), this.hide();
+    }), new C(this._tokenList, (n, o, c) => {
+      this._tokenList.dispatchEvent(new KeyboardEvent(n.type, n)), !c && !this.isOpened && this.show();
+    }).connect(e);
+  }
+  show() {
+    this.inputElement.effectiveDisabled || (this.popover, this._suggestItems = this.filterItems((this.inputElement.value || "").toLowerCase()), this._suggestItems.length == 0 ? this.hide() : (this._tokenList.items = this._suggestItems.map((e) => ({ ...e, contentMode: "text" })), this._tokenList.focusIndex = -1, Object.assign(this._tokenList.style, {
+      minWidth: `${Math.max(this.popover.targetElement.offsetWidth, 250)}px`
+    }), this.popover.show()));
+  }
+  refreshItems() {
+    this.isOpened && (this._suggestItems = this.filterItems((this.inputElement.value || "").toLowerCase()), this._suggestItems.length == 0 ? this.hide() : this._tokenList.items = this._suggestItems.map((e) => ({ ...e, contentMode: "text" })));
+  }
+  filterItems(e) {
+    const t = this.notSelectedTokensProvider();
+    return e ? t.filter((i) => this.filter(e, i)) : t;
+  }
+  hide() {
+    var e;
+    this._suggestItems = [], this._tokenList.items = [], (e = this._popover) == null || e.hide();
+  }
+  get list() {
+    return this._tokenList;
+  }
+  get popover() {
+    return this._popover || (this._popover = this.createPopover(), this.initializeCallback(this)), this._popover;
+  }
+  createPopover() {
+    const e = new _();
+    return e.setAttribute("trigger-type", "manual"), e.setAttribute("placement", "bottom-start"), e.setAttribute("modal", ""), e.setAttribute("popover-for", "token-autosuggest-popover"), e.setAttribute("offset", "-2"), e.targetElement = this.inputElement, e.appendChild(this._tokenList), e;
+  }
+  get isOpened() {
+    return this._popover && this._popover.hasAttribute("open");
+  }
+  get focusedSuggestToken() {
+    return this._suggestItems[this._tokenList.focusIndex];
+  }
+}
+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
+  <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 = (r, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? q(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 && $(e, t, s), s;
+};
+const x = {
+  fromAttribute: (r) => r == "true",
+  toAttribute: (r) => r
+};
+var u;
+const p = (u = class extends b {
+  constructor() {
+    super(...arguments), this.value = "", this.type = "", this.icon = "", this.iconPlaceholder = "", this.iconBackgroundColor = "", this._checked = !1;
+  }
+  static get styles() {
+    return T(O);
+  }
+  set checked(e) {
+    const t = this._checked;
+    this._checked = !this.disabled && e, this.requestUpdate("checked", t);
+  }
+  get checked() {
+    return this._checked;
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.tabIndex = -1, this.setAttribute("role", "option"), this.setAttribute("aria-selected", "true"), this.addEventListener("click", (i) => {
+      i.stopPropagation(), i.getModifierState("Control") ? this.checked = !this.checked : (this.checked = !0, this._tokenClickHandler && this._tokenClickHandler(this.index));
+    });
+    const t = this.shadowRoot.querySelector(".delete-button-wrapper");
+    t && t.addEventListener("click", (i) => {
+      i.stopPropagation(), this._tokenDeleteHandler && this._tokenDeleteHandler(this.index);
+    });
+  }
+  render() {
+    return v`
+            <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> `}
+            </div>
+        `;
+  }
+  renderIcon() {
+    if (this.icon || this.iconPlaceholder) {
+      const e = this.iconBackgroundColor != null ? `--token-icon-background-color: ${this.iconBackgroundColor}` : void 0;
+      return v`
+                <div class="icon-wrapper" style="${A(e)}" role="img">
+                    <div class="icon"></div>
+                </div>
+            `;
+    }
+    return w;
+  }
+  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);
+  }
+  setClickHandler(e) {
+    this._tokenClickHandler = e;
+  }
+  setDeleteHandler(e) {
+    this._tokenDeleteHandler = e;
+  }
+}, u.ID = "sd-token", u.ensureDefined = () => {
+  customElements.get(u.ID) || customElements.define(u.ID, u);
+}, u);
+g([
+  a({ type: String, attribute: !0, reflect: !0 })
+], p.prototype, "value", 2);
+g([
+  a({ type: String, attribute: !0, reflect: !0 })
+], p.prototype, "type", 2);
+g([
+  a({ type: String })
+], p.prototype, "icon", 2);
+g([
+  a({ type: String })
+], p.prototype, "iconPlaceholder", 2);
+g([
+  a({ type: String })
+], p.prototype, "iconBackgroundColor", 2);
+g([
+  a({ converter: x, reflect: !0, attribute: "aria-disabled" })
+], p.prototype, "disabled", 2);
+g([
+  a({ converter: x, reflect: !0, attribute: "aria-current" })
+], p.prototype, "current", 2);
+g([
+  a({ converter: x, reflect: !0, attribute: "aria-checked" })
+], p.prototype, "checked", 1);
+let k = p;
+const G = (r, e) => {
+  const t = document.createElement(k.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";
+class B {
+  constructor(e, t, i) {
+    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(i);
+    }));
+  }
+  writeToClipboard(e) {
+    const t = e.querySelectorAll("[slot='items'][aria-checked='true']"), i = [];
+    if (t.length > 0)
+      t.forEach((s) => i.push(s.index));
+    else if (e.activeTokenIndex != -1) {
+      const s = e.activeTokenElement;
+      s && i.push(s.index);
+    }
+    if (i.length > 0) {
+      const s = JSON.stringify(i.map((o) => e.items[o])), n = new Blob([s], { type: m });
+      navigator.clipboard.write([
+        new ClipboardItem({
+          [m]: n
+        })
+      ]);
+    }
+  }
+  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(), o = JSON.parse(n);
+        Array.isArray(o) && e(o);
+      }
+  }
+}
+const F = ":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 H {
+  constructor(e, t) {
+    this.tokenSelector = e;
+    let i = [];
+    const s = (n) => {
+      const o = n.target;
+      e.contains(o) || e.removeTokens(i), i = [];
+    };
+    e.addEventListener("dragstart", (n) => {
+      const o = n.target;
+      if (o instanceof k) {
+        if (o.disabled) {
+          n.preventDefault();
+          return;
+        }
+        o.setAttribute("aria-checked", "true");
+        const c = e.querySelectorAll("[slot='items'][aria-checked='true']");
+        if (c.length > 0) {
+          const y = Array.from(c).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", c.length > 1) {
+            const f = this.createCustomDragImage(o, y.length);
+            n.dataTransfer.setDragImage(f, -14, -14);
+          }
+          window.addEventListener("drop", s, { capture: !0, 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.removeAttribute("drop");
+      const o = n.dataTransfer.getData("text/plain");
+      if (o)
+        try {
+          const c = JSON.parse(o);
+          Array.isArray(c) && (t(c), n.preventDefault());
+        } catch {
+        }
+    }), e.addEventListener("dragend", () => {
+      window.removeEventListener("drop", s), i = [];
+    });
+  }
+  createCustomDragImage(e, t) {
+    let i = e.cloneNode(!0);
+    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, {
+        position: "absolute",
+        left: "90%",
+        top: "75%"
+      });
+      const n = document.createElement("div");
+      n.appendChild(i), n.appendChild(s), i = n;
+    }
+    return Object.assign(i.style, {
+      height: e.offsetHeight,
+      outline: "none",
+      maxWidth: "500px",
+      position: "absolute",
+      display: "block",
+      left: "-99999px",
+      overflow: "visible",
+      margin: "1px"
+    }), i.slot = "items", this.tokenSelector.appendChild(i), requestAnimationFrame(() => i.remove()), i;
+  }
+}
+var N = Object.defineProperty, j = Object.getOwnPropertyDescriptor, d = (r, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? j(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 && N(e, t, s), s;
+};
+function K(r, e) {
+  let t;
+  return function(...i) {
+    t != null && clearTimeout(t), t = window.setTimeout(() => r(...i), e);
+  };
+}
+var R = /* @__PURE__ */ ((r) => (r.RemoveOnly = "remove-only", r.Multi = "multi", r))(R || {}), h;
+const l = (h = class extends b {
+  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) => {
+      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 = K(this.showFilteredTokenSuggestions.bind(this), 200);
+  }
+  static get styles() {
+    return T(F);
+  }
+  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" ? v`<div class="container" tabindex="0">
+                      <slot name="items"
+                          >${this.placeholder ? v`<span part="remove-only-placeholder" class="placeholder"
+                                    >${this.placeholder}</span
+                                >` : w}</slot
+                      >
+                  </div>
+                  <slot class="additonal-content" name="additional-content"></slot>` : v`
+                  <sd-lit-input
+                      class="input"
+                      .extendedPrefix=${!0}
+                      .label=${this.inputLabel}
+                      .validationLevel=${this.validationLevel}
+                      .validationIconSrc=${this.validationIconSrc}
+                      .validationMessage=${this.validationMessage}
+                      .alwaysFloatLabel=${this.selectedIndexes.length > 0}
+                      .placeholder=${this.selectedIndexes.length == 0 ? this.placeholder : ""}
+                      .disabled=${this.disabled}
+                      tabindex="0"
+                      ><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 i = t.relatedTarget;
+      !this.contains(i) && !this.shadowRoot.contains(i) && this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(
+        (s) => s.checked = !1
+      );
+    }), new B(
+      this,
+      () => {
+        var t;
+        return (t = this.inputElement) == null ? void 0 : t.value;
+      },
+      (t) => this.addMatchingItems(t)
+    ), 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);
+  }
+  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((i) => !i.disabled).map((i) => i.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 i = this.tokenSuggestPopover.focusedSuggestToken;
+      if (i) {
+        if (!i.disabled) {
+          const s = this.findIndex(i);
+          this.handleTokenSelection([s]), this.tokenSuggestPopover.hide();
+        }
+        return;
+      }
+    }
+    if (!(e != null && e.trim()))
+      return;
+    const 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");
+        const 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 D(
+      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 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", () => {
+        document.activeElement != this && this.focus();
+      }), n.setDeleteHandler((o) => this.removeTokens([o]));
+    }), 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((s, n) => {
+      e == s ? i = n : s.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) {
+      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);
+  }
+}, h.ID = "sd-token-selector", h.ensureDefined = () => {
+  k.ensureDefined(), customElements.get(h.ID) || customElements.define(h.ID, h);
+}, h.shadowRootOptions = {
+  ...b.shadowRootOptions,
+  delegatesFocus: !0
+}, h);
+d([
+  a({ type: String, attribute: "selection-mode", reflect: !0 })
+], l.prototype, "selectionMode", 2);
+d([
+  a({ type: Array, attribute: !1 })
+], l.prototype, "items", 2);
+d([
+  a({ type: Array, attribute: !1 })
+], l.prototype, "selectedIndexes", 2);
+d([
+  a({ type: String, reflect: !0 })
+], l.prototype, "placeholder", 2);
+d([
+  a({ type: String, reflect: !0, attribute: "suggest-list-class" })
+], l.prototype, "suggestListClass", 2);
+d([
+  a({ type: String, reflect: !0, attribute: "input-label" })
+], l.prototype, "inputLabel", 2);
+d([
+  a({
+    converter: {
+      fromAttribute: (r) => r == "true",
+      toAttribute: (r) => r
+    },
+    reflect: !0,
+    attribute: "aria-disabled"
+  })
+], l.prototype, "disabled", 2);
+d([
+  a({ type: String, attribute: !0 })
+], l.prototype, "validationMessage", 2);
+d([
+  a({ type: String, attribute: !0 })
+], l.prototype, "validationIconSrc", 2);
+d([
+  a({ converter: E.levelConverter, attribute: !0, reflect: !0 })
+], l.prototype, "validationLevel", 2);
+d([
+  a({ type: String, reflect: !0, attribute: "token-type" })
+], l.prototype, "tokenType", 2);
+d([
+  a({ type: Boolean, reflect: !0, attribute: "case-sensitive" })
+], l.prototype, "caseSensitive", 2);
+let ie = l;
+export {
+  R as SelectionMode,
+  ie as default,
+  G as generator
+};
+//# sourceMappingURL=token-selector.mjs.map