@muibook/components 20.0.0 → 20.1.0

package/dist/esm/components/mui-chip-input/index.js

@@ -24,88 +24,89 @@ class w extends HTMLElement {
     ];
   }
   get value() {
-    return this.selectedItems.map((t) => ({ ...t }));
+    return this.selectedItems.map((e) => ({ ...e }));
   }
-  set value(t) {
-    this.selectedItems = (Array.isArray(t) ? t : []).filter((e) => e && typeof e.value == "string").map((e) => ({ ...e, label: String(e.label ?? e.value), value: String(e.value) })), this.syncValueAttribute(), this.rerenderAndPreserveFocus(0, 0);
+  set value(e) {
+    this.selectedItems = (Array.isArray(e) ? e : []).filter((t) => t && typeof t.value == "string").map((t) => ({ ...t, label: String(t.label ?? t.value), value: String(t.value) })), this.syncValueAttribute(), this.rerenderAndPreserveFocus(0, 0);
+  }
+  focus(e) {
+    const t = this.getInnerInput();
+    t ? t.focus(e) : super.focus(e);
   }
   connectedCallback() {
-    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("id") || this.setAttribute(
-      "id",
-      `mui-chip-input-${Math.random().toString(36).slice(2, 9)}`
-    ), this.syncSelectedFromAttribute(), this.setupBreakpointListener(), this.render(), this.setupListeners();
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("id") || this.setAttribute("id", `mui-chip-input-${Math.random().toString(36).slice(2, 9)}`), this.syncSelectedFromAttribute(), this.setupBreakpointListener(), this.render(), this.setupListeners();
   }
   disconnectedCallback() {
     this.cleanupBreakpointListener();
   }
-  attributeChangedCallback(t, e, i) {
-    e !== i && (t === "value" && this.syncSelectedFromAttribute(), (t === "breakpoint" || t === "mobile-stack") && this.setupBreakpointListener(), this.render(), this.setupListeners());
+  attributeChangedCallback(e, t, i) {
+    t !== i && (e === "value" && this.syncSelectedFromAttribute(), (e === "breakpoint" || e === "mobile-stack") && this.setupBreakpointListener(), this.render(), this.setupListeners());
   }
   cleanupBreakpointListener() {
     this.mql && this.mqlHandler && this.mql.removeEventListener("change", this.mqlHandler), this.mql = null, this.mqlHandler = null;
   }
   setupBreakpointListener() {
     this.cleanupBreakpointListener();
-    const t = this.getAttribute("breakpoint");
-    if (!t || this.hasAttribute("mobile-stack")) return;
-    const e = Number.parseInt(t, 10);
-    Number.isNaN(e) || e <= 0 || (this.mql = window.matchMedia(`(max-width: ${e}px)`), this.mqlHandler = () => {
+    const e = this.getAttribute("breakpoint");
+    if (!e || this.hasAttribute("mobile-stack")) return;
+    const t = Number.parseInt(e, 10);
+    Number.isNaN(t) || t <= 0 || (this.mql = window.matchMedia(`(max-width: ${t}px)`), this.mqlHandler = () => {
       this.render(), this.setupListeners();
     }, this.mql.addEventListener("change", this.mqlHandler));
   }
-  normalizeOption(t) {
-    if (typeof t == "string") {
-      const e = t.trim();
-      return e ? { value: e, label: e } : null;
+  normalizeOption(e) {
+    if (typeof e == "string") {
+      const t = e.trim();
+      return t ? { value: t, label: t } : null;
     }
-    if (t && typeof t == "object") {
-      const e = t, i = e.value, s = i == null ? "" : String(i).trim();
+    if (e && typeof e == "object") {
+      const t = e, i = t.value, s = i == null ? "" : String(i).trim();
       return s ? {
-        ...e,
+        ...t,
         value: s,
-        label: String(e.label ?? s).trim() || s
+        label: String(t.label ?? s).trim() || s
       } : null;
     }
     return null;
   }
   parseOptions() {
-    const t = this.getAttribute("options") || "[]";
-    let e = [];
+    const e = this.getAttribute("options") || "[]";
+    let t = [];
     try {
-      e = JSON.parse(t);
+      t = JSON.parse(e);
     } catch {
-      e = t.split(",").map((s) => s.trim()).filter(Boolean);
+      t = e.split(",").map((s) => s.trim()).filter(Boolean);
     }
-    return Array.isArray(e) ? e.map((i) => this.normalizeOption(i)).filter((i) => !!i) : [];
+    return Array.isArray(t) ? t.map((i) => this.normalizeOption(i)).filter((i) => !!i) : [];
   }
   parseValueAttribute() {
-    const t = this.getAttribute("value") || "[]";
-    let e = [];
+    const e = this.getAttribute("value") || "[]";
+    let t = [];
     try {
-      e = JSON.parse(t);
+      t = JSON.parse(e);
     } catch {
-      e = t.split(",").map((o) => o.trim()).filter(Boolean);
+      t = e.split(",").map((l) => l.trim()).filter(Boolean);
     }
-    if (!Array.isArray(e)) return [];
-    const i = new Map(this.parseOptions().map((a) => [a.value.toLowerCase(), a])), s = e.map((a) => {
-      const o = this.normalizeOption(a);
-      return o ? i.get(o.value.toLowerCase()) || o : null;
+    if (!Array.isArray(t)) return [];
+    const i = new Map(this.parseOptions().map((a) => [a.value.toLowerCase(), a])), s = t.map((a) => {
+      const l = this.normalizeOption(a);
+      return l ? i.get(l.value.toLowerCase()) || l : null;
     }).filter((a) => !!a), r = /* @__PURE__ */ new Set();
     return s.filter((a) => {
-      const o = a.value.toLowerCase();
-      return r.has(o) ? !1 : (r.add(o), !0);
+      const l = a.value.toLowerCase();
+      return r.has(l) ? !1 : (r.add(l), !0);
     });
   }
   syncSelectedFromAttribute() {
     this.selectedItems = this.parseValueAttribute();
   }
   syncValueAttribute() {
-    const t = JSON.stringify(this.selectedItems);
-    this.getAttribute("value") !== t && this.setAttribute("value", t);
+    const e = JSON.stringify(this.selectedItems);
+    this.getAttribute("value") !== e && this.setAttribute("value", e);
   }
   get normalizedSize() {
-    const t = this.getAttribute("size") || "medium";
-    return ["x-small", "small", "medium", "large"].includes(t) ? t : "medium";
+    const e = this.getAttribute("size") || "medium";
+    return ["x-small", "small", "medium", "large"].includes(e) ? e : "medium";
   }
   get allowCustom() {
     return this.hasAttribute("allow-custom");
@@ -116,28 +117,28 @@ class w extends HTMLElement {
   get placement() {
     return this.getAttribute("placement") === "after" ? "after" : "before";
   }
-  set placement(t) {
-    const e = t === "after" ? "after" : "before";
-    this.setAttribute("placement", e);
+  set placement(e) {
+    const t = e === "after" ? "after" : "before";
+    this.setAttribute("placement", t);
   }
   get useStackLayout() {
     if (this.hasAttribute("mobile-stack")) return !0;
-    const t = this.getAttribute("breakpoint");
-    if (!t) return !1;
-    const e = Number.parseInt(t, 10);
-    return Number.isNaN(e) || e <= 0 ? !1 : window.matchMedia(`(max-width: ${e}px)`).matches;
+    const e = this.getAttribute("breakpoint");
+    if (!e) return !1;
+    const t = Number.parseInt(e, 10);
+    return Number.isNaN(t) || t <= 0 ? !1 : window.matchMedia(`(max-width: ${t}px)`).matches;
   }
   get selectedValues() {
-    return this.selectedItems.map((t) => t.value);
+    return this.selectedItems.map((e) => e.value);
   }
   get filteredOptions() {
-    const t = new Set(this.selectedValues.map((i) => i.toLowerCase())), e = this.inputValue.toLowerCase().trim();
-    return this.parseOptions().filter((i) => t.has(i.value.toLowerCase()) ? !1 : e ? i.label.toLowerCase().includes(e) : !0);
+    const e = new Set(this.selectedValues.map((i) => i.toLowerCase())), t = this.inputValue.toLowerCase().trim();
+    return this.parseOptions().filter((i) => e.has(i.value.toLowerCase()) ? !1 : t ? i.label.toLowerCase().includes(t) : !0);
   }
   get showCreateOption() {
-    const t = this.inputValue.trim();
-    if (!this.allowCustom || !t) return !1;
-    const i = this.parseOptions().some((r) => r.value.toLowerCase() === t.toLowerCase()), s = this.selectedValues.some((r) => r.toLowerCase() === t.toLowerCase());
+    const e = this.inputValue.trim();
+    if (!this.allowCustom || !e) return !1;
+    const i = this.parseOptions().some((r) => r.value.toLowerCase() === e.toLowerCase()), s = this.selectedValues.some((r) => r.toLowerCase() === e.toLowerCase());
     return !i && !s;
   }
   emitQueryChange() {
@@ -149,76 +150,76 @@ class w extends HTMLElement {
       })
     );
   }
-  emitChange(t, e, i) {
+  emitChange(e, t, i) {
     this.syncValueAttribute();
     const s = {
-      action: t,
+      action: e,
       values: this.selectedValues,
       items: this.selectedItems.map((r) => ({ ...r })),
-      added: e ? { ...e } : null,
+      added: t ? { ...t } : null,
       removed: i ? { ...i } : null
     };
     this.dispatchEvent(new CustomEvent("chip-input-change", { detail: s, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: s, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", { detail: s, bubbles: !0, composed: !0 }));
   }
-  setInputValue(t) {
+  setInputValue(e) {
     var i;
-    this.inputValue = t;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("mui-input");
-    e && e.setAttribute("value", t);
+    this.inputValue = e;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("mui-input");
+    t && t.setAttribute("value", e);
   }
   getInnerInput() {
-    var e, i;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("mui-input");
-    return ((i = t == null ? void 0 : t.shadowRoot) == null ? void 0 : i.querySelector("input")) ?? null;
+    var t, i;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("mui-input");
+    return ((i = e == null ? void 0 : e.shadowRoot) == null ? void 0 : i.querySelector("input")) ?? null;
   }
-  restoreInputFocus(t, e) {
+  restoreInputFocus(e, t) {
     requestAnimationFrame(() => {
       const i = this.getInnerInput();
-      if (!(!i || this.disabled) && (i.focus({ preventScroll: !0 }), !(t == null || e == null)))
+      if (!(!i || this.disabled) && (i.focus({ preventScroll: !0 }), !(e == null || t == null)))
         try {
-          i.setSelectionRange(t, e);
+          i.setSelectionRange(e, t);
         } catch {
         }
     });
   }
-  rerenderAndPreserveFocus(t, e) {
-    this.render(), this.setupListeners(), this.restoreInputFocus(t, e);
+  rerenderAndPreserveFocus(e, t) {
+    this.render(), this.setupListeners(), this.restoreInputFocus(e, t);
   }
-  addValue(t) {
-    const e = t.trim();
-    if (!e || this.selectedValues.some((r) => r.toLowerCase() === e.toLowerCase())) return;
-    const s = this.parseOptions().find((r) => r.value.toLowerCase() === e.toLowerCase()) || { value: e, label: e, custom: !0 };
+  addValue(e) {
+    const t = e.trim();
+    if (!t || this.selectedValues.some((r) => r.toLowerCase() === t.toLowerCase())) return;
+    const s = this.parseOptions().find((r) => r.value.toLowerCase() === t.toLowerCase()) || { value: t, label: t, custom: !0 };
     this.selectedItems = [...this.selectedItems, s], this.highlightedIndex = -1, this.setInputValue(""), this.emitChange("add", s), this.rerenderAndPreserveFocus(0, 0);
   }
-  removeValue(t) {
-    const e = this.selectedItems.findIndex((r) => r.value === t);
-    if (e < 0) return;
-    const i = this.selectedItems[e];
-    this.selectedItems = this.selectedItems.filter((r) => r.value !== t), this.emitChange("remove", void 0, i);
+  removeValue(e) {
+    const t = this.selectedItems.findIndex((r) => r.value === e);
+    if (t < 0) return;
+    const i = this.selectedItems[t];
+    this.selectedItems = this.selectedItems.filter((r) => r.value !== e), this.emitChange("remove", void 0, i);
     const s = this.inputValue.length;
     this.rerenderAndPreserveFocus(s, s);
   }
-  handleKeyboard(t) {
-    const e = this.filteredOptions, i = e.length + (this.showCreateOption ? 1 : 0);
-    if (t.key === "ArrowDown" && i > 0) {
-      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex + 1 + i) % i, this.updateListbox();
+  handleKeyboard(e) {
+    const t = this.filteredOptions, i = t.length + (this.showCreateOption ? 1 : 0);
+    if (e.key === "ArrowDown" && i > 0) {
+      e.preventDefault(), this.highlightedIndex = (this.highlightedIndex + 1 + i) % i, this.updateListbox();
       return;
     }
-    if (t.key === "ArrowUp" && i > 0) {
-      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex - 1 + i) % i, this.updateListbox();
+    if (e.key === "ArrowUp" && i > 0) {
+      e.preventDefault(), this.highlightedIndex = (this.highlightedIndex - 1 + i) % i, this.updateListbox();
       return;
     }
-    if (t.key === "Escape") {
+    if (e.key === "Escape") {
       this.highlightedIndex = -1, this.updateListbox();
       return;
     }
-    if (t.key === "Backspace" && !this.inputValue && this.selectedItems.length > 0) {
+    if (e.key === "Backspace" && !this.inputValue && this.selectedItems.length > 0) {
       this.removeValue(this.selectedItems[this.selectedItems.length - 1].value);
       return;
     }
-    if (t.key === "Enter" || t.key === ",") {
-      if (t.preventDefault(), this.highlightedIndex >= 0 && this.highlightedIndex < e.length) {
-        this.addValue(e[this.highlightedIndex].value);
+    if (e.key === "Enter" || e.key === ",") {
+      if (e.preventDefault(), this.highlightedIndex >= 0 && this.highlightedIndex < t.length) {
+        this.addValue(t[this.highlightedIndex].value);
         return;
       }
       this.showCreateOption && this.addValue(this.inputValue);
@@ -226,17 +227,17 @@ class w extends HTMLElement {
   }
   setupListeners() {
     if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector("mui-input");
-    if (!t) return;
-    t.oninput = (i) => {
+    const e = this.shadowRoot.querySelector("mui-input");
+    if (!e) return;
+    e.oninput = (i) => {
       var a;
-      const s = (a = i.detail) == null ? void 0 : a.value, r = t.getAttribute("value") || "";
+      const s = (a = i.detail) == null ? void 0 : a.value, r = e.getAttribute("value") || "";
       this.inputValue = s ?? r, this.highlightedIndex = -1, this.emitQueryChange(), this.updateListbox();
-    }, t.onkeydown = (i) => {
+    }, e.onkeydown = (i) => {
       this.handleKeyboard(i);
     };
-    const e = this.shadowRoot.querySelector(".listbox");
-    e && (e.onmousedown = (i) => {
+    const t = this.shadowRoot.querySelector(".listbox");
+    t && (t.onmousedown = (i) => {
       const s = i.target, r = s == null ? void 0 : s.closest("[data-option-value]");
       if (!r) return;
       i.preventDefault();
@@ -252,14 +253,14 @@ class w extends HTMLElement {
   }
   updateListbox() {
     if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector(".listbox");
-    if (!t) return;
-    const e = this.filteredOptions;
-    if (!(!this.disabled && (e.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0)) {
-      t.hidden = !0, t.innerHTML = "";
+    const e = this.shadowRoot.querySelector(".listbox");
+    if (!e) return;
+    const t = this.filteredOptions;
+    if (!(!this.disabled && (t.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0)) {
+      e.hidden = !0, e.innerHTML = "";
       return;
     }
-    const s = e.map((o, u) => {
+    const s = t.map((l, u) => {
       const n = u === this.highlightedIndex;
       return (
         /*html*/
@@ -270,11 +271,11 @@ class w extends HTMLElement {
             class="option ${n ? "active" : ""}"
             role="option"
             aria-selected="${n ? "true" : "false"}"
-            data-option-value="${o.value}"
-          >${o.label}</mui-button>
+            data-option-value="${l.value}"
+          >${l.label}</mui-button>
         `
       );
-    }).join(""), r = e.length, a = this.showCreateOption ? (
+    }).join(""), r = t.length, a = this.showCreateOption ? (
       /*html*/
       `
           <mui-button
@@ -287,11 +288,11 @@ class w extends HTMLElement {
           >Add "${this.inputValue.trim()}"</mui-button>
         `
     ) : "";
-    t.hidden = !1, t.innerHTML = `${s}${a}`;
+    e.hidden = !1, e.innerHTML = `${s}${a}`;
   }
   render() {
-    const t = this.getAttribute("id") || "", e = this.getAttribute("label") || "", i = this.getAttribute("placeholder") || "Type to add", s = this.hasAttribute("hide-label"), r = this.useStackLayout, a = this.getAttribute("name") || "", o = this.filteredOptions, u = `${t}-listbox`, n = !this.disabled && (o.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0, c = o.map((l, v) => {
-      const d = v === this.highlightedIndex;
+    const e = this.getAttribute("id") || "", t = this.getAttribute("label") || "", i = this.getAttribute("placeholder") || "Type to add", s = this.hasAttribute("hide-label"), r = this.useStackLayout, a = this.getAttribute("name") || "", l = this.filteredOptions, u = `${e}-listbox`, n = !this.disabled && (l.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0, c = l.map((o, g) => {
+      const d = g === this.highlightedIndex;
       return (
         /*html*/
         `
@@ -301,11 +302,11 @@ class w extends HTMLElement {
             class="option ${d ? "active" : ""}"
             role="option"
             aria-selected="${d ? "true" : "false"}"
-            data-option-value="${l.value}"
-          >${l.label}</mui-button>
+            data-option-value="${o.value}"
+          >${o.label}</mui-button>
         `
       );
-    }).join(""), h = o.length, p = this.showCreateOption ? (
+    }).join(""), h = l.length, p = this.showCreateOption ? (
       /*html*/
       `
           <mui-button
@@ -323,11 +324,11 @@ class w extends HTMLElement {
           <mui-h-stack
             slot="${m}"
             class="${b} ${r ? "mobile-stack" : ""}"
-            space="var(--stroke-size-200)"
+            space="var(--stroke-size-100)"
             aligny="center"
           >
             ${this.selectedItems.map(
-        (l) => (
+        (o) => (
           /*html*/
           `
                   <mui-chip
@@ -335,15 +336,15 @@ class w extends HTMLElement {
                     size="${this.normalizedSize}"
                     dismiss
                     ${this.disabled ? "disabled" : ""}
-                    data-remove-value="${l.value}"
-                    aria-label="Remove ${l.label}"
-                  >${l.label}</mui-chip>
+                    data-remove-value="${o.value}"
+                    aria-label="Remove ${o.label}"
+                  >${o.label}</mui-chip>
                 `
         )
       ).join("")}
           </mui-h-stack>
         `
-    ) : "", g = a ? this.selectedValues.map((l) => `<input type="hidden" name="${a}" value="${l}" />`).join("") : "";
+    ) : "", v = a ? this.selectedValues.map((o) => `<input type="hidden" name="${a}" value="${o}" />`).join("") : "";
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -359,18 +360,28 @@ class w extends HTMLElement {
         .listbox {
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
-          border-radius: var(--radius-100);
+          border-radius: var(--form-radius-medium);
           background: var(--surface-elevated-100);
           overflow: hidden;
         }
+        :host([size="x-small"]) {
+          --chip-input-border-radius: var(--form-radius-x-small);
+        }
+        :host([size="small"]) {
+          --chip-input-border-radius: var(--form-radius-small);
+        }
+        :host([size="medium"]) {
+          --chip-input-border-radius: var(--form-radius-medium);
+        }
+        :host([size="large"]) {
+          --chip-input-border-radius: var(--form-radius-large);
+        }
         mui-h-stack.chip-slot-shell {
           background: var(--chip-input-background);
-          padding: var(--space-025);
-          border: var(--chip-input-shell-border, 1px solid var(--form-default-border-color));
+          border: var(--chip-input-shell-border, var(--stroke-size-100) solid var(--form-default-border-color));
           box-sizing: border-box;
           width: 100%;
           min-width: 0;
-          border-radius: var(--radius-100);
         }
         mui-h-stack.chip-slot-shell.mobile-stack {
           overflow-x: auto;
@@ -379,29 +390,27 @@ class w extends HTMLElement {
         }
         mui-h-stack.chip-slot-shell.before-shell {
           border-right: none;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
+          border-top-left-radius: var(--chip-input-border-radius);
+          border-bottom-left-radius: var(--chip-input-border-radius);
         }
         mui-h-stack.chip-slot-shell.after-shell {
           border-left: none;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
+          border-top-right-radius: var(--chip-input-border-radius);
+          border-bottom-right-radius: var(--chip-input-border-radius);
         }
         mui-h-stack.chip-slot-shell.mobile-stack.before-shell {
-          border-right: var(--chip-input-shell-border, 1px solid var(--form-default-border-color));
+          border-right: var(--chip-input-shell-border, var(--stroke-size-100) solid var(--form-default-border-color));
           border-bottom: none;
-          border-top-left-radius: var(--radius-100);
-          border-top-right-radius: var(--radius-100);
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
         }
         mui-h-stack.chip-slot-shell.mobile-stack.after-shell {
-          border-left: var(--chip-input-shell-border, 1px solid var(--form-default-border-color));
+          border-left: var(--chip-input-shell-border, var(--stroke-size-100) solid var(--form-default-border-color));
           border-top: none;
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-          border-bottom-left-radius: var(--radius-100);
-          border-bottom-right-radius: var(--radius-100);
+        }
+        mui-h-stack.chip-slot-shell.before-shell mui-chip:first-child {
+          --chip-radius-left: calc(var(--chip-input-border-radius) + var(--stroke-size-200));
+        }
+        mui-h-stack.chip-slot-shell.after-shell mui-chip:last-child {
+          --chip-radius-right: calc(var(--chip-input-border-radius) + var(--stroke-size-200));
         }
         .option {
           width: 100%;
@@ -418,8 +427,8 @@ class w extends HTMLElement {
             --input-slot-wrap: wrap;
             --input-slot-overflow-x: ${r ? "hidden" : "visible"};
           "
-          id="${t}"
-          label="${e}"
+          id="${e}"
+          label="${t}"
           ${s ? "hide-label" : ""}
           size="${this.normalizedSize}"
           placeholder="${i}"
@@ -437,7 +446,7 @@ class w extends HTMLElement {
         </div>
       </div>
 
-      ${g}
+      ${v}
     `;
   }
 }