@cas-smartdesign/token-selector 0.17.2 → 0.18.0

package/dist/token-selector.d.ts

@@ -82,7 +82,17 @@ export default class TokenSelector extends LitElement {
     protected firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void;
     private handleInputKeyDown;
     private handleKeyDown;
-    private addMatchingItems;
+    /**
+     *
+     * Called when items were given by paste or drag events to token-selector.
+     * The purpose of this function is to add or create items accordingly.
+     *
+     * @param {unknown[]} items the pasted or dropped items
+     * @return {number[]} the indexes that were added successfully
+     */
+    selectOrAddItems: (items: unknown & {
+        caption?: string;
+    }[]) => number[];
     removeSelectionOrActiveToken(): void;
     private updateActiveToken;
     private commitTokenValue;
@@ -94,7 +104,7 @@ export default class TokenSelector extends LitElement {
     private isTokenNotSelected;
     private get tokenSuggestPopover();
     private updateItems;
-    removeTokens(tokenIndexes: number[]): void;
+    removeTokens(indexes: number[]): void;
     private onTokenClick;
     private disableIfNeeded;
     private handleTokenSelection;
@@ -102,7 +112,7 @@ export default class TokenSelector extends LitElement {
     private get inputElement();
     get activeTokenElement(): Token | null;
     private getTokenElement;
-    private findIndex;
+    findIndex(token: TokenData): number;
     get activeTokenIndex(): number;
     set activeTokenIndex(value: number);
     private get hasInputValue();

package/dist/token-selector.mjs

@@ -1,40 +1,46 @@
-import { LitElement as x, unsafeCSS as T, html as m, nothing as I } from "lit";
+import { LitElement as I, unsafeCSS as T, html as m, nothing as x } 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 L from "@cas-smartdesign/popover";
 import y from "@cas-smartdesign/virtual-list";
-import { KeyDownDelegator as L } from "@cas-smartdesign/element-utils";
+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 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) => {
+    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("pointerdown", () => {
+      this.pointerDown = !0, window.addEventListener(
+        "pointerup",
+        () => {
+          this.pointerDown = !1, this._tokenList.increaseWidthOnNextRenderIfNeeded(), this._tokenList.isUpdatePending || this._tokenList.requestUpdate();
+        },
+        { once: !0, capture: !0 }
+      );
+    }), 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 = 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 L(this._tokenList, (s, o, d) => {
+    }), new C(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.itemCount = this._suggestItems.length, this._tokenList.focusIndex = -1, requestAnimationFrame(() => {
-      this.lastRequestedStartIndex != null && (this._tokenList.items = this._suggestItems.slice(
+    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.lastRequestedStartIndex != null && (this._tokenList.increaseWidthOnNextRenderIfNeeded(), 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.itemCount = this._suggestItems.length, this._tokenList.items = []));
+    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 = [], this._tokenList.style.width = null));
   }
   filterItems(e) {
     const t = this.notSelectedTokensProvider();
@@ -51,7 +57,7 @@ class O {
     return this._popover || (this._popover = this.createPopover(), this.initializeCallback(this)), this._popover;
   }
   createPopover() {
-    const e = new C();
+    const e = new L();
     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() {
@@ -64,17 +70,17 @@ class O {
 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, 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--)
+var R = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, g = (r, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? $(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;
+  return i && n && R(e, t, n), n;
 };
 const w = {
   fromAttribute: (r) => r == "true",
   toAttribute: (r) => r
 };
 var u;
-const p = (u = class extends x {
+const p = (u = class extends I {
   constructor() {
     super(...arguments), this.value = "", this.type = "", this.icon = "", this.iconPlaceholder = "", this.iconBackgroundColor = "", this._checked = !1;
   }
@@ -104,7 +110,7 @@ const p = (u = class extends x {
                 ${this.renderIcon()}
                 <slot name="after-icon"></slot>
                 <div class="value">${this.value}</div>
-                ${this.disabled ? I : m` <div class="delete-button-wrapper">${P(M)}</div> `}
+                ${this.disabled ? x : m` <div class="delete-button-wrapper">${P(M)}</div> `}
             </div>
         `;
   }
@@ -117,7 +123,7 @@ const p = (u = class extends x {
                 </div>
             `;
     }
-    return I;
+    return x;
   }
   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);
@@ -156,13 +162,13 @@ g([
   a({ converter: w, reflect: !0, attribute: "aria-checked" })
 ], p.prototype, "checked", 1);
 let b = p;
-const G = (r, e) => {
+const N = (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 B {
+class G {
   constructor(e, t, i) {
     navigator.clipboard && (e.addEventListener("copy", () => {
       t() || this.writeToClipboard(e);
@@ -198,13 +204,13 @@ class B {
       }
   }
 }
-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 {
+const B = ":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}.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 F {
   constructor(e, t) {
     this.tokenSelector = e;
     const i = /* @__PURE__ */ new Map(), n = (s) => {
       const o = s.target;
-      if (!e.contains(o)) {
+      if (e.removeAttribute("drag-source"), !e.contains(o)) {
         const d = s.addedIndexes;
         d && e.removeTokens(d.map((v) => i.get(v)));
       }
@@ -217,7 +223,7 @@ class H {
           s.preventDefault();
           return;
         }
-        o.setAttribute("aria-checked", "true");
+        e.setAttribute("drag-source", ""), 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]));
@@ -271,21 +277,21 @@ class H {
     }), i.slot = "items", this.tokenSelector.appendChild(i), requestAnimationFrame(() => i.remove()), i;
   }
 }
-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--)
+var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, h = (r, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? K(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;
+  return i && n && H(e, t, n), n;
 };
-function K(r, e) {
+function j(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 || {}), c;
-const l = (c = class extends x {
+var U = /* @__PURE__ */ ((r) => (r.RemoveOnly = "remove-only", r.Multi = "multi", r))(U || {}), c;
+const l = (c = class extends I {
   constructor() {
-    super(...arguments), this.selectionMode = "multi", this.items = [], this.selectedIndexes = [], this._tokenGenerator = G, this._autoSuggestItemGenerator = _, this.additionalTokenCommittingKeys = [], this._activeTokenIndex = -1, this.handleInputKeyDown = (e, t) => {
+    super(...arguments), this.selectionMode = "multi", this.items = [], this.selectedIndexes = [], this._tokenGenerator = N, 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;
@@ -333,6 +339,12 @@ const l = (c = class extends x {
           break;
         }
       }
+    }, this.selectOrAddItems = (e) => {
+      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)
@@ -341,10 +353,10 @@ const l = (c = class extends x {
         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);
+    }, this.debouncedShowTokenSuggestPopover = j(this.showFilteredTokenSuggestions.bind(this), 200);
   }
   static get styles() {
-    return T(F);
+    return T(B);
   }
   get tokenGenerator() {
     return this._tokenGenerator;
@@ -372,7 +384,7 @@ const l = (c = class extends x {
                       <slot name="items"
                           >${this.placeholder ? m`<span part="remove-only-placeholder" class="placeholder"
                                     >${this.placeholder}</span
-                                >` : I}</slot
+                                >` : x}</slot
                       >
                   </div>
                   <slot class="additonal-content" name="additional-content"></slot>` : m`
@@ -398,21 +410,14 @@ const l = (c = class extends x {
       !this.contains(i) && !this.shadowRoot.contains(i) && this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(
         (n) => n.checked = !1
       );
-    }), new B(
+    }), new G(
       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 = [], 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;
+      (t) => this.selectOrAddItems(t)
+    ), new F(this, (t) => this.selectOrAddItems(t));
   }
   removeSelectionOrActiveToken() {
     if (!this.disabled) {
@@ -503,20 +508,26 @@ const l = (c = class extends x {
     }), 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]
-        }
-      })
-    )));
+    if (!(this.disabled || e == null || e.length == 0))
+      if (this.activeTokenIndex != -1 && e.includes(this.activeTokenElement.index) && (this.activeTokenIndex = -1), this.selectionMode == "remove-only")
+        this.dispatchEvent(
+          new CustomEvent("tokens-removed", {
+            detail: {
+              removedIndices: e
+            }
+          })
+        );
+      else {
+        const t = e.filter((i) => this.selectedIndexes.includes(i));
+        t.length > 0 && (this.selectedIndexes = this.selectedIndexes.filter((i) => !t.includes(i)), this.dispatchEvent(
+          new CustomEvent("tokens-removed", {
+            detail: {
+              removedIndices: t,
+              selectedIndices: [...this.selectedIndexes]
+            }
+          })
+        ));
+      }
   }
   onTokenClick(e, t) {
     let i;
@@ -588,7 +599,7 @@ const l = (c = class extends x {
 }, c.ID = "sd-token-selector", c.ensureDefined = () => {
   b.ensureDefined(), customElements.get(c.ID) || customElements.define(c.ID, c);
 }, c.shadowRootOptions = {
-  ...x.shadowRootOptions,
+  ...I.shadowRootOptions,
   delegatesFocus: !0
 }, c);
 h([
@@ -636,8 +647,8 @@ h([
 ], l.prototype, "caseSensitive", 2);
 let se = l;
 export {
-  V as SelectionMode,
+  U as SelectionMode,
   se as default,
-  G as generator
+  N as generator
 };
 //# sourceMappingURL=token-selector.mjs.map