@muibook/components 10.0.1 → 11.0.1

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

@@ -1,73 +1,134 @@
-class m extends HTMLElement {
+class S extends HTMLElement {
   static get observedAttributes() {
-    return ["type", "name", "value", "placeholder", "id", "label", "disabled", "hide-label", "variant"];
+    return [
+      "type",
+      "name",
+      "value",
+      "placeholder",
+      "id",
+      "label",
+      "disabled",
+      "hide-label",
+      "variant",
+      "optional",
+      "max-length",
+      "size",
+      "slot-layout"
+    ];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.render(), this.setupListener();
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(e, r, o) {
-    var s;
-    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
-    if (t) {
-      if (e === "value") {
-        t.value = o ?? "";
+  attributeChangedCallback(t, i, e) {
+    var d;
+    const o = (d = this.shadowRoot) == null ? void 0 : d.querySelector("input");
+    if (o) {
+      if (t === "value") {
+        o.value = e ?? "", this.updateCharacterCount();
         return;
       }
-      if (e === "disabled") {
-        o === null || o === "false" ? t.removeAttribute("disabled") : t.setAttribute("disabled", "");
+      if (t === "disabled") {
+        e === null || e === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "");
         return;
       }
-      ["type", "placeholder", "label", "hide-label", "variant"].includes(e) && (this.render(), this.setupListener());
+      ["type", "placeholder", "label", "hide-label", "variant", "optional", "max-length", "size", "slot-layout"].includes(
+        t
+      ) && (this.render(), this.setupListener());
     }
   }
   cleanupListeners() {
-    var r;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
-    e && this._changeHandler && (e.removeEventListener("change", this._changeHandler), e.removeEventListener("input", this._changeHandler));
+    var i;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+    t && this._changeHandler && (t.removeEventListener("change", this._changeHandler), t.removeEventListener("input", this._changeHandler));
   }
   setupListener() {
     if (!this.shadowRoot) return;
-    const e = this.shadowRoot.querySelector("input");
-    e && (this.cleanupListeners(), this._changeHandler = (r) => {
-      const o = r.target;
-      this.setAttribute("value", o.value);
-      const t = {
-        detail: { value: o.value },
+    const t = this.shadowRoot.querySelector("input");
+    t && (this.cleanupListeners(), this._changeHandler = (i) => {
+      const e = i.target;
+      this.setAttribute("value", e.value);
+      const o = {
+        detail: { value: e.value },
         bubbles: !0,
         composed: !0
       };
-      this.dispatchEvent(new CustomEvent("change", t)), this.dispatchEvent(new CustomEvent("input", t));
-    }, e.addEventListener("change", this._changeHandler), e.addEventListener("input", this._changeHandler));
+      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());
+  }
+  updateCharacterCount() {
+    var e, o;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input"), i = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".char-count");
+    !t || !i || t.maxLength <= 0 || (i.textContent = `${t.value.length}/${t.maxLength}`);
   }
   updateSlottedButtons() {
     requestAnimationFrame(() => {
-      var t, s;
-      const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="before"]'), r = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="after"]'), o = (l) => {
-        if (!l) return;
-        l.assignedNodes({ flatten: !0 }).forEach((i) => {
-          if (i.nodeType === Node.ELEMENT_NODE) {
-            const a = i, n = a.tagName.toLowerCase();
-            (n === "mui-button" || n === "mui-link") && (a.setAttribute("usage", "input"), a.setAttribute("size", "medium"), a.removeAttribute("variant"), a.removeAttribute("weight"));
+      var l, h, p;
+      const t = this.getAttribute("size") || "medium", e = ["x-small", "small", "medium", "large"].includes(t) ? t : "medium", o = (l = this.shadowRoot) == null ? void 0 : l.querySelector('slot[name="before"]'), d = (h = this.shadowRoot) == null ? void 0 : h.querySelector('slot[name="after"]'), m = (p = this.shadowRoot) == null ? void 0 : p.querySelector('slot[name="hint"]'), u = (c) => {
+        if (!c) return;
+        c.assignedNodes({ flatten: !0 }).forEach((s) => {
+          if (s.nodeType === Node.ELEMENT_NODE) {
+            const r = s, a = r.tagName.toLowerCase();
+            (a === "mui-button" || a === "mui-link") && (r.setAttribute("usage", "input"), r.setAttribute("size", e), r.removeAttribute("variant"), r.removeAttribute("weight")), a === "mui-chip" && (r.setAttribute("usage", "input"), r.setAttribute("size", e));
           }
         });
       };
-      o(e), o(r);
+      if (u(o), u(d), m) {
+        const c = {
+          "x-small": "xx-small",
+          small: "x-small",
+          medium: "x-small",
+          large: "small"
+        }, b = {
+          "x-small": "x-small",
+          small: "x-small",
+          medium: "small",
+          large: "medium"
+        }, s = c[e] || "x-small", r = b[e] || "small";
+        m.assignedNodes({ flatten: !0 }).forEach((a) => {
+          if (a.nodeType !== Node.ELEMENT_NODE) return;
+          const n = a, f = n.tagName.toLowerCase();
+          f.startsWith("mui-icon-") && !n.hasAttribute("size") && n.setAttribute("size", s), f === "mui-badge" && !n.hasAttribute("size") && n.setAttribute("size", r), n.setAttribute("aria-hidden", "true");
+        });
+      }
     });
   }
   render() {
-    const e = ["text", "password", "email", "number", "search", "tel", "url", "date", "time"], r = this.getAttribute("type") || "text", o = e.includes(r) ? r : "text", t = this.getAttribute("name") || "", s = this.getAttribute("value") || "", l = this.getAttribute("placeholder") || "", d = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("label") || "", a = this.hasAttribute("hide-label"), n = this.hasAttribute("disabled"), u = a && i ? `aria-label="${i}"` : "", c = this.getAttribute("variant") || "", h = c || "", b = this.querySelector('[slot="before"]') !== null, p = this.querySelector('[slot="after"]') !== null, f = [h, b ? "before" : "", p ? "after" : ""].filter(Boolean).join(" "), v = (
+    const t = [
+      "text",
+      "password",
+      "email",
+      "number",
+      "search",
+      "tel",
+      "url",
+      "date",
+      "time",
+      "datetime-local",
+      "month",
+      "week"
+    ], i = this.getAttribute("type") || "text", e = t.includes(i) ? i : "text", o = this.getAttribute("name") || "", d = this.getAttribute("value") || "", m = this.getAttribute("placeholder") || "", u = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, l = this.getAttribute("label") || "", h = this.hasAttribute("optional"), p = this.hasAttribute("hide-label"), c = this.hasAttribute("disabled"), b = p && l ? `aria-label="${l}"` : "", s = this.getAttribute("max-length"), r = s && Number(s) > 0 ? String(Number(s)) : "", a = this.getAttribute("size") || "medium", f = ["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, y = this.querySelector('[slot="after"]') !== null, z = this.querySelector('[slot="hint"]') !== null, E = [g, w ? "before" : "", y ? "after" : "", z ? "hint" : ""].filter(Boolean).join(" "), A = (
       /*html*/
       `
       <style>
         :host {
           display: inline-block;
           width: 100%;
+          container-type: inline-size;
+        }
+        :host([type="date"]),
+        :host([type="time"]),
+        :host([type="datetime-local"]),
+        :host([type="month"]),
+        :host([type="week"]),
+        :host([type="number"]),
+        :host([type="search"]) {
+          color-scheme: light dark;
         }
         label {
           display: block;
@@ -76,13 +137,153 @@ class m extends HTMLElement {
           margin-bottom: var(--space-100);
           color: var(--text-color);
         }
+        .label-with-optional {
+          display: flex;
+          align-items: center;
+          gap: var(--space-100);
+        }
         .input-wrapper {
           display: flex;
           width: 100%;
+          align-items: stretch;
+          position: relative;
+        }
+        .input-wrapper.stack-mobile {
+          display: flex;
+        }
+        .before-slot,
+        .after-slot,
+        .hint-slot {
+          display: inline-flex;
+          align-items: stretch;
+          gap: var(--space-050);
+          flex-wrap: var(--input-slot-wrap, nowrap);
+          overflow-x: var(--input-slot-overflow-x, visible);
+          overflow-y: var(--input-slot-overflow-y, visible);
+          scrollbar-width: thin;
+          flex: 0 1 auto;
+        }
+        .hint-slot {
+          position: absolute;
+          right: var(--space-300);
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 1;
+          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;
+        }
+        :host([size="x-small"]) .hint-slot {
+          right: var(--space-200);
+        }
+        :host([size="small"]) .hint-slot {
+          right: var(--space-300);
+        }
+        :host([size="large"]) .hint-slot {
+          right: var(--space-400);
+        }
+        .before-slot {
+          max-width: none;
+        }
+        .after-slot {
+          max-width: none;
+        }
+        @container (min-width: 20rem) {
+          .before-slot {
+            max-width: var(--input-before-slot-max-width, 50%);
+          }
+          .after-slot {
+            max-width: var(--input-after-slot-max-width, 50%);
+          }
+        }
+        .input-wrapper.stack-mobile {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr);
+          gap: var(--space-000);
+        }
+        .input-wrapper.stack-mobile .before-slot,
+        .input-wrapper.stack-mobile .after-slot {
+          display: flex;
+          max-width: 100%;
+          width: 100%;
+          flex: 1 1 auto;
+          overflow-x: visible;
+          overflow-y: visible;
+        }
+        .input-wrapper.stack-mobile .hint-slot {
+          right: var(--space-200);
+          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) {
+          width: 100%;
+        }
+        .input-wrapper.stack-mobile .before-slot {
+          grid-row: 1;
+        }
+        .input-wrapper.stack-mobile input {
+          grid-row: 2;
+        }
+        .input-wrapper.stack-mobile .after-slot {
+          grid-row: 3;
+        }
+        .input-wrapper.stack-mobile input.before:not(.after) {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+          border-bottom-left-radius: var(--radius-100);
+          border-bottom-right-radius: var(--radius-100);
+        }
+        .input-wrapper.stack-mobile input.after:not(.before) {
+          border-top-left-radius: var(--radius-100);
+          border-top-right-radius: var(--radius-100);
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        .input-wrapper.stack-mobile input.before.after {
+          border-radius: 0;
+        }
+        .meta {
+          display: flex;
+          justify-content: flex-end;
+          margin-top: var(--space-100);
+          min-height: 1.8rem;
+        }
+        .char-count {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          color: var(--text-color);
+          opacity: 0.7;
+        }
+        .optional {
+          color: var(--text-color-optional);
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-050);
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          text-transform: uppercase;
+          font-weight: var(--font-weight-medium);
+        }
+        .optional-dot {
+          display: inline-flex;
+          align-items: center;
+          line-height: 1;
+        }
+        .optional-text {
+          display: inline-flex;
+          align-items: center;
         }
         input {
           min-height: 4.4rem;
-          width: 100%;
+          width: auto;
+          min-width: 0;
+          flex: 1 1 auto;
           line-height: var(--text-line-height);
           padding: var(--space-200) var(--space-300);
           box-sizing: border-box;
@@ -93,6 +294,42 @@ class m extends HTMLElement {
           color: var(--form-default-text-color);
           background: var(--input-background);
         }
+        input.size-x-small {
+          min-height: var(--action-icon-only-size-x-small);
+          padding: var(--action-padding-x-small);
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        input.size-x-small.hint:not(.after) {
+          padding-right: calc(var(--space-500) + var(--space-200));
+        }
+        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.size-small.hint:not(.after) {
+          padding-right: calc(var(--space-500) + var(--space-300));
+        }
+        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.size-medium.hint:not(.after) {
+          padding-right: calc(var(--space-600) + var(--space-300));
+        }
+        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.size-large.hint:not(.after) {
+          padding-right: calc(var(--space-700) + var(--space-300));
+        }
         input:hover {
           border-color: var(--form-default-border-color-hover);
           color: var(--form-default-text-color-hover);
@@ -105,6 +342,7 @@ class m extends HTMLElement {
           cursor: not-allowed;
           background-color: var(--input-background-disabled);
         }
+
         input.success {
           color: var(--form-success-text-color);
           border-color: var(--form-success-border-color);
@@ -227,29 +465,42 @@ class m extends HTMLElement {
         /* Slotted items */
         slot[name="before"]::slotted(*),
         slot[name="after"]::slotted(*) { flex: none; }
+        slot[name="hint"]::slotted(*) {
+          flex: none;
+          pointer-events: none;
+        }
 
         /* ========================================================================== */
         
 
       </style>
-      ${i ? `<label for="${d}" class="${a ? "vh" : ""}">${i}</label>` : ""}
-    <div class="input-wrapper">
-      <slot name="before"></slot>
+      ${l ? `<label for="${u}" class="${[p ? "vh" : "", h ? "label-with-optional" : ""].filter(Boolean).join(" ")}">${l}${h ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
+    <div class="${x}">
+      <div class="before-slot">
+        <slot name="before"></slot>
+      </div>
       <input
-        class="${f}"
-        type="${o}"
-        name="${t}"
-        id="${d}"
-        value="${s}"
-        placeholder="${l}"
-        ${n ? 'disabled aria-disabled="true"' : ""}
-        ${u}
+        class="${[E, `size-${f}`].filter(Boolean).join(" ")}"
+        type="${e}"
+        name="${o}"
+        id="${u}"
+        value="${d}"
+        placeholder="${m}"
+        ${c ? 'disabled aria-disabled="true"' : ""}
+        ${r ? `maxlength="${r}"` : ""}
+        ${b}
       />
-      <slot name="after"></slot>
+      <div class="hint-slot">
+        <slot name="hint"></slot>
+      </div>
+      <div class="after-slot">
+        <slot name="after"></slot>
+      </div>
     </div>
+    ${r ? '<div class="meta"><span class="char-count"></span></div>' : ""}
     `
     );
-    this.shadowRoot && (this.shadowRoot.innerHTML = v, this.updateSlottedButtons());
+    this.shadowRoot && (this.shadowRoot.innerHTML = A, this.updateSlottedButtons());
   }
 }
-customElements.get("mui-input") || customElements.define("mui-input", m);
+customElements.get("mui-input") || customElements.define("mui-input", S);