@muibook/components 19.0.1 → 19.1.0

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

@@ -1,4 +1,4 @@
-class S extends HTMLElement {
+class I extends HTMLElement {
   static get observedAttributes() {
     return [
       "type",
@@ -23,87 +23,121 @@ class S extends HTMLElement {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
-    this.cleanupListeners();
+    var e;
+    this.cleanupListeners(), (e = this._slotResizeObserver) == null || e.disconnect();
   }
-  attributeChangedCallback(t, r, e) {
-    var d;
-    const o = (d = this.shadowRoot) == null ? void 0 : d.querySelector("input");
+  attributeChangedCallback(e, r, t) {
+    var h;
+    const o = (h = this.shadowRoot) == null ? void 0 : h.querySelector("input");
     if (o) {
-      if (t === "value") {
-        o.value = e ?? "", this.updateCharacterCount();
+      if (e === "value") {
+        o.value = t ?? "", this.updateCharacterCount();
         return;
       }
-      if (t === "disabled") {
-        e === null || e === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "");
+      if (e === "disabled") {
+        t === null || t === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "");
         return;
       }
       ["type", "placeholder", "label", "hide-label", "variant", "optional", "max-length", "size", "slot-layout"].includes(
-        t
+        e
       ) && (this.render(), this.setupListener());
     }
   }
   cleanupListeners() {
     var r;
-    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
-    t && this._changeHandler && (t.removeEventListener("change", this._changeHandler), t.removeEventListener("input", this._changeHandler));
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    e && this._changeHandler && (e.removeEventListener("change", this._changeHandler), e.removeEventListener("input", this._changeHandler));
   }
   setupListener() {
     if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector("input");
-    t && (this.cleanupListeners(), this._changeHandler = (r) => {
-      const e = r.target;
-      this.setAttribute("value", e.value);
+    const e = this.shadowRoot.querySelector("input");
+    e && (this.cleanupListeners(), this._changeHandler = (r) => {
+      const t = r.target;
+      this.setAttribute("value", t.value);
       const o = {
-        detail: { value: e.value },
+        detail: { value: t.value },
         bubbles: !0,
         composed: !0
       };
       this.dispatchEvent(new CustomEvent("change", o)), this.dispatchEvent(new CustomEvent("input", o)), this.updateCharacterCount();
-    }, t.addEventListener("change", this._changeHandler), t.addEventListener("input", this._changeHandler), this.updateCharacterCount());
+    }, e.addEventListener("change", this._changeHandler), e.addEventListener("input", this._changeHandler), this.updateCharacterCount());
   }
   updateCharacterCount() {
-    var e, o;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input"), r = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".char-count");
-    !t || !r || t.maxLength <= 0 || (r.textContent = `${t.value.length}/${t.maxLength}`);
+    var t, o;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input"), r = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".char-count");
+    !e || !r || e.maxLength <= 0 || (r.textContent = `${e.value.length}/${e.maxLength}`);
   }
   updateSlottedButtons() {
     requestAnimationFrame(() => {
-      var n, u, p;
-      const t = this.getAttribute("size") || "medium", e = ["x-small", "small", "medium", "large"].includes(t) ? t : "medium", o = (n = this.shadowRoot) == null ? void 0 : n.querySelector('slot[name="before"]'), d = (u = this.shadowRoot) == null ? void 0 : u.querySelector('slot[name="after"]'), f = (p = this.shadowRoot) == null ? void 0 : p.querySelector('slot[name="hint"]'), c = (h) => {
-        if (!h) return;
-        h.assignedNodes({ flatten: !0 }).forEach((s) => {
-          if (s.nodeType === Node.ELEMENT_NODE) {
-            const i = s, a = i.tagName.toLowerCase();
-            (a === "mui-button" || a === "mui-link") && (i.setAttribute("usage", "input"), i.setAttribute("size", e), i.removeAttribute("variant"), i.removeAttribute("weight")), a === "mui-chip" && (i.setAttribute("usage", "input"), i.setAttribute("size", e)), a === "mui-addon" && i.setAttribute("size", e);
+      var T, E, S, A, O, f, m, R;
+      const e = this.getAttribute("size") || "medium", t = ["x-small", "small", "medium", "large"].includes(e) ? e : "medium", o = (T = this.shadowRoot) == null ? void 0 : T.querySelector('slot[name="before"]'), h = (E = this.shadowRoot) == null ? void 0 : E.querySelector('slot[name="after"]'), N = (S = this.shadowRoot) == null ? void 0 : S.querySelector('slot[name="inside-before"]'), g = (A = this.shadowRoot) == null ? void 0 : A.querySelector('slot[name="inside-after"]'), l = (O = this.shadowRoot) == null ? void 0 : O.querySelector('slot[name="hint"]'), x = {
+        "x-small": "var(--action-icon-only-size-x-small)",
+        small: "var(--action-icon-only-size-small)",
+        medium: "var(--action-icon-only-size)",
+        large: "var(--action-icon-only-size-large)"
+      }[t] || "var(--action-icon-only-size)", z = (s) => {
+        if (!s) return;
+        s.assignedNodes({ flatten: !0 }).forEach((a) => {
+          if (a.nodeType === Node.ELEMENT_NODE) {
+            const i = a, c = i.tagName.toLowerCase();
+            (c === "mui-button" || c === "mui-link") && (i.setAttribute("usage", "input"), i.setAttribute("size", t), i.style.setProperty("--input-slot-min-height", x), i.removeAttribute("variant"), i.removeAttribute("weight")), c === "mui-chip" && (i.setAttribute("usage", "input"), i.setAttribute("size", t)), c === "mui-addon" && i.setAttribute("size", t);
           }
         });
       };
-      if (c(o), c(d), f) {
-        const h = {
+      z(o), z(h);
+      const L = {
+        "x-small": "xx-small",
+        small: "x-small",
+        medium: "x-small",
+        large: "small"
+      }, v = {
+        "x-small": "x-small",
+        small: "x-small",
+        medium: "small",
+        large: "medium"
+      }, b = L[t] || "x-small", w = v[t] || "small", C = (s) => {
+        s && s.assignedNodes({ flatten: !0 }).forEach((u) => {
+          if (u.nodeType !== Node.ELEMENT_NODE) return;
+          const a = u, i = a.tagName.toLowerCase();
+          if (i === "mui-hint") {
+            a.removeAttribute("aria-hidden");
+            return;
+          }
+          i.startsWith("mui-icon-") && a.setAttribute("size", b), i === "mui-badge" && a.setAttribute("size", w), a.setAttribute("aria-hidden", "true");
+        });
+      };
+      if (C(N), C(g), l) {
+        const s = {
           "x-small": "xx-small",
           small: "x-small",
           medium: "x-small",
           large: "small"
-        }, b = {
+        }, u = {
           "x-small": "x-small",
           small: "x-small",
           medium: "small",
           large: "medium"
-        }, s = h[e] || "x-small", i = b[e] || "small";
-        f.assignedNodes({ flatten: !0 }).forEach((a) => {
-          if (a.nodeType !== Node.ELEMENT_NODE) return;
-          const l = a, m = l.tagName.toLowerCase();
-          if (m === "mui-hint") {
-            l.removeAttribute("aria-hidden");
+        }, a = s[t] || "x-small", i = u[t] || "small";
+        l.assignedNodes({ flatten: !0 }).forEach((c) => {
+          if (c.nodeType !== Node.ELEMENT_NODE) return;
+          const p = c, $ = p.tagName.toLowerCase();
+          if ($ === "mui-hint") {
+            p.removeAttribute("aria-hidden");
             return;
           }
-          m.startsWith("mui-icon-") && !l.hasAttribute("size") && l.setAttribute("size", s), m === "mui-badge" && !l.hasAttribute("size") && l.setAttribute("size", i), l.setAttribute("aria-hidden", "true");
+          $.startsWith("mui-icon-") && !p.hasAttribute("size") && p.setAttribute("size", a), $ === "mui-badge" && !p.hasAttribute("size") && p.setAttribute("size", i), p.setAttribute("aria-hidden", "true");
         });
       }
+      (f = this._slotResizeObserver) == null || f.disconnect();
+      const d = (m = this.shadowRoot) == null ? void 0 : m.querySelector(".inside-before-slot"), n = (R = this.shadowRoot) == null ? void 0 : R.querySelector(".inside-after-cluster"), y = () => {
+        const s = (d == null ? void 0 : d.offsetWidth) || 0, u = (n == null ? void 0 : n.offsetWidth) || 0;
+        this.style.setProperty("--input-inside-before-space", `${s}px`), this.style.setProperty("--input-inside-after-space", `${u}px`);
+      };
+      y(), typeof ResizeObserver < "u" && (this._slotResizeObserver = new ResizeObserver(() => y()), d && this._slotResizeObserver.observe(d), n && this._slotResizeObserver.observe(n));
     });
   }
   render() {
-    const t = [
+    const e = [
       "text",
       "password",
       "email",
@@ -116,7 +150,14 @@ class S extends HTMLElement {
       "datetime-local",
       "month",
       "week"
-    ], r = this.getAttribute("type") || "text", e = t.includes(r) ? r : "text", o = this.getAttribute("name") || "", d = this.getAttribute("value") || "", f = this.getAttribute("placeholder") || "", c = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, n = this.getAttribute("label") || "", u = this.hasAttribute("optional"), p = this.hasAttribute("hide-label"), h = this.hasAttribute("disabled"), b = p && n ? `aria-label="${n}"` : "", s = this.getAttribute("max-length"), i = s && Number(s) > 0 ? String(Number(s)) : "", a = this.getAttribute("size") || "medium", m = ["x-small", "small", "medium", "large"].includes(a) ? a : "medium", v = this.getAttribute("variant") || "", g = v || "", x = (this.getAttribute("slot-layout") || "inline") === "stack-mobile" ? "input-wrapper stack-mobile" : "input-wrapper", w = this.querySelector('[slot="before"]') !== null, z = this.querySelector('[slot="after"]') !== null, y = this.querySelector('[slot="hint"]') !== null, E = [g, w ? "before" : "", z ? "after" : "", y ? "hint" : ""].filter(Boolean).join(" "), A = (
+    ], r = this.getAttribute("type") || "text", t = e.includes(r) ? r : "text", o = this.getAttribute("name") || "", h = this.getAttribute("value") || "", N = this.getAttribute("placeholder") || "", g = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, l = this.getAttribute("label") || "", k = this.hasAttribute("optional"), x = this.hasAttribute("hide-label"), z = this.hasAttribute("disabled"), L = x && l ? `aria-label="${l}"` : "", v = this.getAttribute("max-length"), b = v && Number(v) > 0 ? String(Number(v)) : "", w = this.getAttribute("size") || "medium", d = ["x-small", "small", "medium", "large"].includes(w) ? w : "medium", n = this.getAttribute("variant") || "", y = n || "", E = (this.getAttribute("slot-layout") || "inline") === "stack-mobile" ? "input-wrapper stack-mobile" : "input-wrapper", S = this.querySelector('[slot="before"]') !== null, A = this.querySelector('[slot="after"]') !== null, O = this.querySelector('[slot="inside-before"]') !== null, f = this.querySelector('[slot="inside-after"]') !== null, m = this.querySelector('[slot="hint"]') !== null, R = [
+      y,
+      S ? "before" : "",
+      A ? "after" : "",
+      O ? "inside-before" : "",
+      f ? "inside-after" : "",
+      m ? "hint" : ""
+    ].filter(Boolean).join(" "), s = (
       /*html*/
       `
       <style>
@@ -124,6 +165,20 @@ class S extends HTMLElement {
           display: inline-block;
           width: 100%;
           container-type: inline-size;
+          --input-inline-offset: var(--space-300);
+          --input-inline-gap: var(--space-100);
+        }
+        :host([size="x-small"]) {
+          --input-inline-offset: var(--space-200);
+        }
+        :host([size="small"]) {
+          --input-inline-offset: var(--space-300);
+        }
+        :host([size="medium"]) {
+          --input-inline-offset: var(--space-300);
+        }
+        :host([size="large"]) {
+          --input-inline-offset: var(--space-400);
         }
         :host([type="date"]),
         :host([type="time"]),
@@ -169,11 +224,20 @@ class S extends HTMLElement {
           align-items: stretch;
           position: relative;
         }
+        .input-shell {
+          position: relative;
+          flex: 1 1 auto;
+          min-width: 0;
+          display: flex;
+          align-items: stretch;
+        }
         .input-wrapper.stack-mobile {
           display: flex;
         }
         .before-slot,
         .after-slot,
+        .inside-before-slot,
+        .inside-after-slot,
         .hint-slot {
           display: inline-flex;
           align-items: stretch;
@@ -184,12 +248,12 @@ class S extends HTMLElement {
           scrollbar-width: thin;
           flex: 0 1 auto;
         }
-        .hint-slot {
+        .inside-before-slot {
           position: absolute;
-          right: var(--space-300);
+          left: var(--input-inline-offset);
           top: 50%;
           transform: translateY(-50%);
-          z-index: 1;
+          z-index: 2;
           pointer-events: none;
           display: inline-flex;
           align-items: center;
@@ -199,14 +263,28 @@ class S extends HTMLElement {
           overflow: visible;
           flex: 0 0 auto;
         }
-        :host([size="x-small"]) .hint-slot {
-          right: var(--space-200);
-        }
-        :host([size="small"]) .hint-slot {
-          right: var(--space-300);
+        .inside-after-cluster {
+          position: absolute;
+          right: var(--input-inline-offset);
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 2;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: var(--space-100);
+          overflow: visible;
+          flex: 0 0 auto;
         }
-        :host([size="large"]) .hint-slot {
-          right: var(--space-400);
+        .hint-slot {
+          pointer-events: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          color: var(--text-color-optional);
+          gap: var(--space-100);
+          overflow: visible;
+          flex: 0 0 auto;
         }
         .before-slot {
           max-width: none;
@@ -237,9 +315,12 @@ class S extends HTMLElement {
           overflow-y: visible;
         }
         .input-wrapper.stack-mobile .hint-slot {
-          right: var(--space-200);
+          position: static;
+          transform: none;
+        }
+        .input-wrapper.stack-mobile .inside-before-slot,
+        .input-wrapper.stack-mobile .inside-after-cluster {
           top: calc(var(--action-icon-only-size) / 2);
-          transform: translateY(-50%);
         }
         .input-wrapper.stack-mobile slot[name="before"]::slotted(mui-addon),
         .input-wrapper.stack-mobile slot[name="after"]::slotted(mui-addon) {
@@ -336,36 +417,56 @@ class S extends HTMLElement {
           padding: var(--action-padding-x-small);
           font-size: var(--text-font-size-xs);
           line-height: var(--text-line-height-xs);
+          --input-inline-padding-current: var(--space-200);
+        }
+        input.size-x-small.inside-before:not(.before) {
+          padding-left: calc(var(--input-inline-padding-current) + var(--input-inside-before-space, 0px) + var(--input-inline-gap));
         }
+        input.size-x-small.inside-after:not(.after),
         input.size-x-small.hint:not(.after) {
-          padding-right: calc(var(--space-500) + var(--space-200));
+          padding-right: calc(var(--input-inline-padding-current) + var(--input-inside-after-space, 0px) + var(--input-inline-gap));
         }
         input.size-small {
           min-height: var(--action-icon-only-size-small);
           padding: var(--action-padding-small);
           font-size: var(--text-font-size-s);
           line-height: var(--text-line-height-s);
+          --input-inline-padding-current: var(--space-300);
+        }
+        input.size-small.inside-before:not(.before) {
+          padding-left: calc(var(--input-inline-padding-current) + var(--input-inside-before-space, 0px) + var(--input-inline-gap));
         }
+        input.size-small.inside-after:not(.after),
         input.size-small.hint:not(.after) {
-          padding-right: calc(var(--space-500) + var(--space-300));
+          padding-right: calc(var(--input-inline-padding-current) + var(--input-inside-after-space, 0px) + var(--input-inline-gap));
         }
         input.size-medium {
           min-height: 4.4rem;
           padding: var(--space-200) var(--space-300);
           font-size: var(--text-font-size);
           line-height: var(--text-line-height);
+          --input-inline-padding-current: var(--space-300);
         }
+        input.size-medium.inside-before:not(.before) {
+          padding-left: calc(var(--input-inline-padding-current) + var(--input-inside-before-space, 0px) + var(--input-inline-gap));
+        }
+        input.size-medium.inside-after:not(.after),
         input.size-medium.hint:not(.after) {
-          padding-right: calc(var(--space-600) + var(--space-300));
+          padding-right: calc(var(--input-inline-padding-current) + var(--input-inside-after-space, 0px) + var(--input-inline-gap));
         }
         input.size-large {
           min-height: var(--action-icon-only-size-large);
           padding: var(--space-300) var(--space-400);
           font-size: var(--text-font-size-l);
           line-height: var(--text-line-height-l);
+          --input-inline-padding-current: var(--space-400);
+        }
+        input.size-large.inside-before:not(.before) {
+          padding-left: calc(var(--input-inline-padding-current) + var(--input-inside-before-space, 0px) + var(--input-inline-gap));
         }
+        input.size-large.inside-after:not(.after),
         input.size-large.hint:not(.after) {
-          padding-right: calc(var(--space-700) + var(--space-300));
+          padding-right: calc(var(--input-inline-padding-current) + var(--input-inside-after-space, 0px) + var(--input-inline-gap));
         }
         input:hover {
           border-color: var(--form-default-border-color-hover);
@@ -487,9 +588,13 @@ class S extends HTMLElement {
         slot[name="before"]::slotted(*:focus),
         input:focus,
         slot[name="after"]::slotted(*:focus),
+        slot[name="inside-before"]::slotted(*:focus),
+        slot[name="inside-after"]::slotted(*:focus),
         slot[name="before"]::slotted(*:hover),
         input:hover,
-        slot[name="after"]::slotted(*:hover) { z-index: 1; }
+        slot[name="after"]::slotted(*:hover),
+        slot[name="inside-before"]::slotted(*:hover),
+        slot[name="inside-after"]::slotted(*:hover) { z-index: 1; }
 
       /* Ensure feedback styles appear above SELECT and focusable Items */
         input.success,
@@ -502,10 +607,17 @@ class S extends HTMLElement {
         /* Slotted items */
         slot[name="before"]::slotted(*),
         slot[name="after"]::slotted(*) { flex: none; }
+        slot[name="inside-before"]::slotted(*),
+        slot[name="inside-after"]::slotted(*) {
+          flex: none;
+          pointer-events: none;
+        }
         slot[name="hint"]::slotted(*) {
           flex: none;
           pointer-events: none;
         }
+        slot[name="inside-before"]::slotted(mui-hint),
+        slot[name="inside-after"]::slotted(mui-hint),
         slot[name="hint"]::slotted(mui-hint) {
           pointer-events: auto;
         }
@@ -514,33 +626,43 @@ class S extends HTMLElement {
         
 
       </style>
-      ${n ? `<label for="${c}" class="${[p ? "vh" : "", u ? "label-with-optional" : ""].filter(Boolean).join(" ")}">${n}${u ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
-    <div class="${x}">
+      ${l ? `<label for="${g}" class="${[x ? "vh" : "", k ? "label-with-optional" : ""].filter(Boolean).join(" ")}">${l}${k ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
+    <div class="${E}">
       <div class="before-slot">
         <slot name="before"></slot>
       </div>
-      <input
-        class="${[E, `size-${m}`].filter(Boolean).join(" ")}"
-        type="${e}"
-        name="${o}"
-        id="${c}"
-        value="${d}"
-        placeholder="${f}"
-        ${h ? 'disabled aria-disabled="true"' : ""}
-        ${i ? `maxlength="${i}"` : ""}
-        ${b}
-      />
-      <div class="hint-slot">
-        <slot name="hint"></slot>
+      <div class="input-shell">
+        <div class="inside-before-slot">
+          <slot name="inside-before"></slot>
+        </div>
+        <input
+          class="${[R, `size-${d}`].filter(Boolean).join(" ")}"
+          type="${t}"
+          name="${o}"
+          id="${g}"
+          value="${h}"
+          placeholder="${N}"
+          ${z ? 'disabled aria-disabled="true"' : ""}
+          ${b ? `maxlength="${b}"` : ""}
+          ${L}
+        />
+        ${f || m ? `<div class="inside-after-cluster">
+          ${f ? `<div class="inside-after-slot">
+            <slot name="inside-after"></slot>
+          </div>` : ""}
+          ${m ? `<div class="hint-slot">
+            <slot name="hint"></slot>
+          </div>` : ""}
+        </div>` : ""}
       </div>
       <div class="after-slot">
         <slot name="after"></slot>
       </div>
     </div>
-    ${i ? '<div class="meta"><span class="char-count"></span></div>' : ""}
+    ${b ? '<div class="meta"><span class="char-count"></span></div>' : ""}
     `
     );
-    this.shadowRoot && (this.shadowRoot.innerHTML = A, this.updateSlottedButtons());
+    this.shadowRoot && (this.shadowRoot.innerHTML = s, this.updateSlottedButtons());
   }
 }
-customElements.get("mui-input") || customElements.define("mui-input", S);
+customElements.get("mui-input") || customElements.define("mui-input", I);