@cas-smartdesign/token-selector 0.21.3 → 0.21.4

package/dist/token-selector.mjs

@@ -1,4 +1,4 @@
-import { LitElement as w, unsafeCSS as T, html as v, nothing as x } from "lit";
+import { LitElement as w, unsafeCSS as T, html as m, nothing as x } from "lit";
 import { property as d } from "lit/decorators/property.js";
 import "@cas-smartdesign/lit-input";
 import S from "@cas-smartdesign/field-validation-message";
@@ -110,20 +110,20 @@ const p = (u = class extends w {
     });
   }
   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 ? x : v` <div class="delete-button-wrapper">${P($)}</div> `}
+                ${this.disabled ? x : m` <div class="delete-button-wrapper">${P($)}</div> `}
             </div>
         `;
   }
   renderIcon() {
     if (this.icon || this.iconPlaceholder) {
       const e = this.iconBackgroundColor != null ? `--sd-token-icon-background-color: ${this.iconBackgroundColor}` : void 0;
-      return v`
+      return m`
                 <div class="icon-wrapper" style="${C(e)}" role="img">
                     <div part="icon" class="icon"></div>
                 </div>
@@ -211,7 +211,7 @@ class G {
       }
   }
 }
-const H = ":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--sd-token-border: 1px solid transparent;margin:1px}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-visible ::slotted(sd-token[aria-current=true]){outline:1px solid #1467ba;--sd-token-focused-border: 1px solid #fff}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])),.container:focus-visible ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])){outline-color:#767676}.container{outline:none;display:flex;flex-wrap:wrap;gap:6px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:6px}";
+const H = ":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--sd-token-border: 1px solid transparent;margin:1px}:host([selection-mode=multi][aria-disabled=true]){opacity:.6}:host([selection-mode=multi][aria-disabled=true]) .input[effective-disabled]{opacity:1}:host([selection-mode=multi][aria-disabled=true]) ::slotted([aria-disabled=true]){opacity:1}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-visible ::slotted(sd-token[aria-current=true]){outline:1px solid #1467ba;--sd-token-focused-border: 1px solid #fff}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])),.container:focus-visible ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])){outline-color:#767676}.container{outline:none;display:flex;flex-wrap:wrap;gap:6px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:6px}";
 class B {
   constructor(e, t) {
     this.tokenSelector = e;
@@ -219,7 +219,7 @@ class B {
       const o = n.target;
       if (e.removeAttribute("drag-source"), !e.contains(o)) {
         const a = n.addedIndexes;
-        a && e.removeTokens(a.map((m) => i.get(m)));
+        a && e.removeTokens(a.map((v) => i.get(v)));
       }
       i.clear();
     };
@@ -233,9 +233,9 @@ class B {
         e.setAttribute("drag-source", ""), o.setAttribute("aria-checked", "true");
         const a = e.querySelectorAll("[slot='items'][aria-checked='true']");
         if (a.length > 0) {
-          const m = Array.from(a).filter((g) => !g.disabled).map((g, E) => (i.set(E, g.index), e.items[g.index]));
-          if (n.dataTransfer.setData("text/sd-token-selector", JSON.stringify(m)), n.dataTransfer.dropEffect = "move", n.dataTransfer.effectAllowed = "move", a.length > 1) {
-            const g = this.createCustomDragImage(o, m.length);
+          const v = Array.from(a).filter((g) => !g.disabled).map((g, E) => (i.set(E, g.index), e.items[g.index]));
+          if (n.dataTransfer.setData("text/sd-token-selector", JSON.stringify(v)), n.dataTransfer.dropEffect = "move", n.dataTransfer.effectAllowed = "move", a.length > 1) {
+            const g = this.createCustomDragImage(o, v.length);
             n.dataTransfer.setDragImage(g, -14, -14);
           }
           window.addEventListener("drop", s, { once: !0 });
@@ -388,14 +388,14 @@ const l = (h = class extends w {
     e ? e.focus() : this.shadowRoot.querySelector(".container").focus();
   }
   render() {
-    return this.selectionMode == "remove-only" ? v`<div class="container" tabindex="${this.disabled ? -1 : 0}">
+    return this.selectionMode == "remove-only" ? m`<div class="container" tabindex="${this.disabled ? -1 : 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
                                 >` : x}</slot
                       >
                   </div>
-                  <slot class="additonal-content" name="additional-content" @focusin=${this.clearCheckedTokens}></slot>` : v`
+                  <slot class="additonal-content" name="additional-content" @focusin=${this.clearCheckedTokens}></slot>` : m`
                   <sd-lit-input
                       class="input"
                       .extendedPrefix=${!0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cas-smartdesign/token-selector",
-  "version": "0.21.3",
+  "version": "0.21.4",
   "description": "A token-selector based on LitElement",
   "main": "dist/token-selector-with-externals.js",
   "module": "dist/token-selector.mjs",
@@ -12,8 +12,8 @@
     "@cas-smartdesign/field-validation-message": "^5.0.2",
     "@cas-smartdesign/image-tools": "^3.0.2",
     "@cas-smartdesign/virtual-list": "^6.2.3",
-    "@cas-smartdesign/list-item": "^7.2.3",
-    "@cas-smartdesign/lit-input": "^7.2.1",
+    "@cas-smartdesign/list-item": "^7.2.4",
+    "@cas-smartdesign/lit-input": "^7.2.2",
     "@cas-smartdesign/popover": "^4.1.2",
     "@cas-smartdesign/styles": "^3.6.2"
   },
@@ -26,8 +26,8 @@
     "access": "public"
   },
   "devDependencies": {
-    "@cas-smartdesign/button": "^5.0.2",
     "@cas-smartdesign/license-generator": "^1.6.3",
+    "@cas-smartdesign/button": "^5.0.2",
     "@cas-smartdesign/element-preview": "^0.2.2"
   },
   "scripts": {