@muibook/components 10.0.1 → 11.0.1

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

@@ -0,0 +1,407 @@
+import "../mui-input/index.js";
+import "../mui-chip/index.js";
+import "../mui-stack/hstack/index.js";
+class w extends HTMLElement {
+  constructor() {
+    super(), this.selectedItems = [], this.highlightedIndex = -1, this.inputValue = "", this.mql = null, this.mqlHandler = null, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return [
+      "id",
+      "label",
+      "hide-label",
+      "placeholder",
+      "options",
+      "value",
+      "allow-custom",
+      "disabled",
+      "size",
+      "name",
+      "placement",
+      "mobile-stack",
+      "breakpoint"
+    ];
+  }
+  get value() {
+    return this.selectedItems.map((t) => ({ ...t }));
+  }
+  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);
+  }
+  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();
+  }
+  disconnectedCallback() {
+    this.cleanupBreakpointListener();
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && (t === "value" && this.syncSelectedFromAttribute(), (t === "breakpoint" || t === "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 = () => {
+      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;
+    }
+    if (t && typeof t == "object") {
+      const e = t, i = e.value, s = i == null ? "" : String(i).trim();
+      return s ? {
+        ...e,
+        value: s,
+        label: String(e.label ?? s).trim() || s
+      } : null;
+    }
+    return null;
+  }
+  parseOptions() {
+    const t = this.getAttribute("options") || "[]";
+    let e = [];
+    try {
+      e = JSON.parse(t);
+    } catch {
+      e = t.split(",").map((s) => s.trim()).filter(Boolean);
+    }
+    return Array.isArray(e) ? e.map((i) => this.normalizeOption(i)).filter((i) => !!i) : [];
+  }
+  parseValueAttribute() {
+    const t = this.getAttribute("value") || "[]";
+    let e = [];
+    try {
+      e = JSON.parse(t);
+    } catch {
+      e = t.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 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 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);
+  }
+  get normalizedSize() {
+    const t = this.getAttribute("size") || "medium";
+    return ["x-small", "small", "medium", "large"].includes(t) ? t : "medium";
+  }
+  get allowCustom() {
+    return this.hasAttribute("allow-custom");
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  get placement() {
+    return this.getAttribute("placement") === "after" ? "after" : "before";
+  }
+  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;
+  }
+  get selectedValues() {
+    return this.selectedItems.map((t) => t.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);
+  }
+  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());
+    return !i && !s;
+  }
+  emitQueryChange() {
+    this.dispatchEvent(
+      new CustomEvent("chip-input-query-change", {
+        detail: { query: this.inputValue },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  emitChange(t, e, i) {
+    this.syncValueAttribute();
+    const s = {
+      action: t,
+      values: this.selectedValues,
+      items: this.selectedItems.map((r) => ({ ...r })),
+      added: e ? { ...e } : 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) {
+    var i;
+    this.inputValue = t;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("mui-input");
+    e && e.setAttribute("value", t);
+  }
+  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;
+  }
+  restoreInputFocus(t, e) {
+    requestAnimationFrame(() => {
+      const i = this.getInnerInput();
+      if (!(!i || this.disabled) && (i.focus({ preventScroll: !0 }), !(t == null || e == null)))
+        try {
+          i.setSelectionRange(t, e);
+        } catch {
+        }
+    });
+  }
+  rerenderAndPreserveFocus(t, e) {
+    this.render(), this.setupListeners(), this.restoreInputFocus(t, e);
+  }
+  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 };
+    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);
+    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;
+      const s = this.inputValue.length;
+      this.rerenderAndPreserveFocus(s, s);
+      return;
+    }
+    if (t.key === "ArrowUp" && i > 0) {
+      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex - 1 + i) % i;
+      const s = this.inputValue.length;
+      this.rerenderAndPreserveFocus(s, s);
+      return;
+    }
+    if (t.key === "Escape") {
+      this.highlightedIndex = -1;
+      const s = this.inputValue.length;
+      this.rerenderAndPreserveFocus(s, s);
+      return;
+    }
+    if (t.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);
+        return;
+      }
+      this.showCreateOption && this.addValue(this.inputValue);
+    }
+  }
+  setupListeners() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector("mui-input");
+    t && (t.oninput = (e) => {
+      var n;
+      const i = this.getInnerInput(), s = (i == null ? void 0 : i.selectionStart) ?? null, r = (i == null ? void 0 : i.selectionEnd) ?? null, a = (n = e.detail) == null ? void 0 : n.value, l = t.getAttribute("value") || "";
+      this.inputValue = a ?? l, this.highlightedIndex = -1, this.emitQueryChange(), this.rerenderAndPreserveFocus(s, r);
+    }, t.onkeydown = (e) => {
+      this.handleKeyboard(e);
+    }, this.shadowRoot.querySelectorAll("[data-option-value]").forEach((e) => {
+      e.addEventListener("mousedown", (i) => {
+        i.preventDefault();
+        const s = e.getAttribute("data-option-value");
+        s && this.addValue(s);
+      });
+    }), this.shadowRoot.querySelectorAll("[data-remove-value]").forEach((e) => {
+      e.addEventListener("dismiss", (i) => {
+        i.stopPropagation();
+        const s = e.getAttribute("data-remove-value");
+        s && !this.disabled && this.removeValue(s);
+      });
+    }));
+  }
+  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") || "", l = this.filteredOptions, n = `${t}-listbox`, d = !this.disabled && (l.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0, c = l.map((o, v) => {
+      const h = v === this.highlightedIndex;
+      return (
+        /*html*/
+        `
+          <button
+            type="button"
+            class="option ${h ? "active" : ""}"
+            role="option"
+            aria-selected="${h ? "true" : "false"}"
+            data-option-value="${o.value}"
+          >${o.label}</button>
+        `
+      );
+    }).join(""), u = l.length, p = this.showCreateOption ? (
+      /*html*/
+      `
+          <button
+            type="button"
+            class="option ${this.highlightedIndex === u ? "active" : ""}"
+            role="option"
+            aria-selected="${this.highlightedIndex === u ? "true" : "false"}"
+            data-option-value="${this.inputValue.trim()}"
+          >Add "${this.inputValue.trim()}"</button>
+        `
+    ) : "", m = this.placement, b = this.placement === "after" ? "chip-slot-shell after-shell" : "chip-slot-shell before-shell", g = this.selectedItems.length ? (
+      /*html*/
+      `
+          <mui-h-stack
+            slot="${m}"
+            class="${b} ${r ? "mobile-stack" : ""}"
+            space="var(--stroke-size-200)"
+            aligny="center"
+          >
+            ${this.selectedItems.map(
+        (o) => (
+          /*html*/
+          `
+                  <mui-chip
+                    usage="input"
+                    size="${this.normalizedSize}"
+                    dismiss
+                    ${this.disabled ? "disabled" : ""}
+                    data-remove-value="${o.value}"
+                    aria-label="Remove ${o.label}"
+                  >${o.label}</mui-chip>
+                `
+        )
+      ).join("")}
+          </mui-h-stack>
+        `
+    ) : "", f = a ? this.selectedValues.map((o) => `<input type="hidden" name="${a}" value="${o}" />`).join("") : "";
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: inline-block;
+          width: 100%;
+          --chip-input-before-max-width: min(70%, 52rem);
+        }
+        .stack {
+          display: grid;
+          gap: var(--space-100);
+        }
+        .listbox {
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          border-radius: var(--radius-100);
+          background: var(--surface-elevated-100);
+          overflow: hidden;
+        }
+        mui-h-stack.chip-slot-shell {
+          background: var(--chip-input-background, #333333);
+          padding: var(--chip-input-shell-padding, 2px);
+          border: var(--chip-input-shell-border, 1px 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;
+          overflow-y: hidden;
+          -webkit-overflow-scrolling: touch;
+        }
+        mui-h-stack.chip-slot-shell.before-shell {
+          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        mui-h-stack.chip-slot-shell.after-shell {
+          border-left: none;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+        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-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-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);
+        }
+        .option {
+          width: 100%;
+          text-align: left;
+          border: none;
+          background: transparent;
+          padding: var(--space-200) var(--space-300);
+          cursor: pointer;
+          color: var(--text-color);
+        }
+        .option.active,
+        .option:hover {
+          background: var(--surface-elevated-200);
+        }
+      </style>
+
+      <div class="stack">
+        <mui-input
+          style="
+            --input-before-slot-max-width: var(--chip-input-before-max-width);
+            --input-after-slot-max-width: var(--chip-input-after-max-width, var(--chip-input-before-max-width));
+            --input-slot-wrap: wrap;
+            --input-slot-overflow-x: ${r ? "hidden" : "visible"};
+          "
+          id="${t}"
+          label="${e}"
+          ${s ? "hide-label" : ""}
+          size="${this.normalizedSize}"
+          placeholder="${i}"
+          value="${this.inputValue}"
+          ${r ? 'slot-layout="stack-mobile"' : ""}
+          ${this.disabled ? "disabled" : ""}
+          aria-controls="${n}"
+          aria-autocomplete="list"
+        >
+          ${g}
+        </mui-input>
+
+        ${d ? `<div id="${n}" class="listbox" role="listbox">${c}${p}</div>` : ""}
+      </div>
+
+      ${f}
+    `;
+  }
+}
+customElements.get("mui-chip-input") || customElements.define("mui-chip-input", w);

package/dist/esm/components/mui-code/index.js

@@ -1,6 +1,6 @@
-class i extends HTMLElement {
+class s extends HTMLElement {
   static get observedAttributes() {
-    return ["size", "scrollable"];
+    return ["size", "scrollable", "wrap"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -13,7 +13,7 @@ class i extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.hasAttribute("scrollable"), t = (
+    const t = this.hasAttribute("scrollable"), e = this.hasAttribute("wrap"), i = (
       /*css*/
       `
       :host {
@@ -44,13 +44,15 @@ class i extends HTMLElement {
         padding: var(--space-400) var(--space-500);
         box-sizing: border-box;
         width: 100%;
-        overflow-x: ${e ? "auto" : "visible"};
-        white-space: ${e ? "nowrap" : "wrap"};
+        overflow-x: ${e ? "hidden" : t ? "auto" : "visible"};
+        white-space: ${e ? "pre-wrap" : t ? "nowrap" : "normal"};
+        overflow-wrap: ${e ? "anywhere" : "normal"};
+        word-break: ${e ? "break-word" : "normal"};
       }
 
       code:focus-visible {
-        outline: ${e ? "var(--outline-thick)" : "none"};
-        outline-offset: ${e ? "calc(-1 * var(--stroke-size-500))" : "none"};
+        outline: ${t && !e ? "var(--outline-thick)" : "none"};
+        outline-offset: ${t && !e ? "calc(-1 * var(--stroke-size-500))" : "none"};
       }
 
       @media (min-width: 600px) {
@@ -63,9 +65,9 @@ class i extends HTMLElement {
     );
     this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${t}</style>
+      <style>${i}</style>
       <code><slot></slot></code>
   `;
   }
 }
-customElements.get("mui-code") || customElements.define("mui-code", i);
+customElements.get("mui-code") || customElements.define("mui-code", s);

package/dist/esm/components/mui-dialog/index.js

@@ -1,8 +1,8 @@
 import "../mui-icons/close/index.js";
 import "../mui-button/index.js";
-class l extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
-    return ["open", "width"];
+    return ["open", "width", "content-max-height"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -51,6 +51,15 @@ class l extends HTMLElement {
         padding: var(--space-500);
       }
 
+      :host([content-max-height="none"]) .content {
+        max-height: none;
+        overflow-y: visible;
+      }
+
+      :host([content-padding="none"]) .content {
+        padding: var(--space-000);
+      }
+
       .actions {
         display: flex;
         justify-content: flex-end;
@@ -80,10 +89,10 @@ class l extends HTMLElement {
         </div>
       </dialog>
     `, this.dialogEl = this.shadowRoot.querySelector("dialog"), this.footerEl = this.shadowRoot.querySelector(".actions"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]');
-    const i = this.shadowRoot.querySelector(".close");
-    i == null || i.addEventListener("click", () => this.close()), this.dialogEl.addEventListener("click", (e) => {
+    const e = this.shadowRoot.querySelector(".close");
+    e == null || e.addEventListener("click", () => this.close()), this.dialogEl.addEventListener("click", (i) => {
       const o = this.dialogEl.getBoundingClientRect();
-      e.clientX >= o.left && e.clientX <= o.right && e.clientY >= o.top && e.clientY <= o.bottom || this.close();
+      i.clientX >= o.left && i.clientX <= o.right && i.clientY >= o.top && i.clientY <= o.bottom || this.close();
     }), (a = this.actionsSlot) == null || a.addEventListener("slotchange", () => this.updateFooterVisibility()), this.updateFooterVisibility(), this.syncOpenState();
   }
   updateFooterVisibility() {
@@ -91,8 +100,8 @@ class l extends HTMLElement {
     const t = this.actionsSlot.assignedElements().length > 0;
     this.footerEl.hidden = !t;
   }
-  attributeChangedCallback(t, s, i) {
-    t === "open" && this.syncOpenState(), t === "width" && this.dialogEl && (this.dialogEl.style.width = i || "350px");
+  attributeChangedCallback(t, s, e) {
+    t === "open" && this.syncOpenState(), t === "width" && this.dialogEl && (this.dialogEl.style.width = e || "350px");
   }
   syncOpenState() {
     this.dialogEl && (this.hasAttribute("open") ? this.dialogEl.open || this.dialogEl.showModal() : this.dialogEl.open && this.dialogEl.close());
@@ -104,4 +113,4 @@ class l extends HTMLElement {
     this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("mui-dialog-close", { bubbles: !0, composed: !0 }));
   }
 }
-customElements.get("mui-dialog") || customElements.define("mui-dialog", l);
+customElements.get("mui-dialog") || customElements.define("mui-dialog", n);