@muibook/components 5.2.1 → 6.0.0

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

@@ -1,66 +1,78 @@
-import "../mui-icons/check/index.js";
-import "../mui-icons/warning/index.js";
-import "../mui-icons/attention/index.js";
-class r extends HTMLElement {
+class a extends HTMLElement {
   static get observedAttributes() {
-    return ["variant", "message"];
+    return ["variant", "message", "label", "hide-label"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
-    const t = this.getAttribute("variant") || "default";
-    this.setAttribute("variant", t);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; }
+
+        mui-body { margin-top: var(--space-200); }
+        mui-body::part(display) { display: flex; }
+        mui-body::part(align-items) { align-items: center; }
+        mui-body::part(gap) { gap: var(--space-100); }
+
+        ::slotted(mui-checkbox) { padding-left: var(--space-025); }
+      </style>
+
+      <slot></slot>
+      <div class="message-container"></div>
+    `;
+  }
+  // -----------------------
+  // Property getters/setters
+  // -----------------------
+  get variant() {
+    return this.getAttribute("variant") || "default";
+  }
+  set variant(e) {
+    this.setAttribute("variant", e);
+  }
+  get message() {
+    return this.getAttribute("message") || "";
+  }
+  set message(e) {
+    this.setAttribute("message", e);
+  }
+  get label() {
+    return this.getAttribute("label") || "";
   }
+  set label(e) {
+    this.setAttribute("label", e);
+  }
+  get hideLabel() {
+    return this.hasAttribute("hide-label");
+  }
+  set hideLabel(e) {
+    e ? this.setAttribute("hide-label", "") : this.removeAttribute("hide-label");
+  }
+  // -----------------------
+  // Lifecycle methods
+  // -----------------------
   connectedCallback() {
-    this.render(), this.passAttributesToChild();
+    this.renderMessage(), this.passAttributesToChild();
   }
-  attributeChangedCallback(t, e, i) {
-    (t === "variant" || t === "message") && (this.render(), this.passAttributesToChild());
+  attributeChangedCallback(e) {
+    ["variant", "message", "label", "hide-label"].includes(e) && (this.renderMessage(), this.passAttributesToChild());
   }
+  // -----------------------
+  // Helper methods
+  // -----------------------
   passAttributesToChild() {
-    var a;
+    var s;
     if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector("slot"), e = (a = t == null ? void 0 : t.assignedElements) == null ? void 0 : a.call(t)[0];
-    if (!e) return;
-    ["variant", "label", "hide-label"].forEach((s) => {
-      this.hasAttribute(s) ? e.setAttribute(s, this.getAttribute(s) || "") : e.removeAttribute(s);
+    const e = this.shadowRoot.querySelector("slot"), i = (s = e == null ? void 0 : e.assignedElements) == null ? void 0 : s.call(e)[0];
+    i && ["variant", "label", "hide-label"].forEach((t) => {
+      this.hasAttribute(t) ? i.setAttribute(t, this.getAttribute(t) || "") : i.removeAttribute(t);
     });
   }
-  render() {
-    const t = this.getAttribute("message"), e = this.getAttribute("variant");
+  renderMessage() {
     if (!this.shadowRoot) return;
-    let i = "";
-    e === "success" ? i = "check" : e === "warning" ? i = "warning" : e === "error" && (i = "attention"), this.shadowRoot.innerHTML = /*html*/
-    `
-      <style>
-        :host {
-          display: block;
-        }
-
-        mui-body {
-          margin-top: var(--space-200);
-        }
-        mui-body::part(display) {
-          display: flex;
-        }
-        mui-body::part(align-items) {
-          align-items: center;
-        }
-        mui-body::part(gap) {
-          gap: var(--space-100);
-        }
-
-        ::slotted(mui-checkbox) {
-          padding-left: var(--space-025);
-        }
-      </style>
-
-      <slot></slot>
-      ${t ? `
-        <mui-body size="small" variant="${e}">
-          ${i ? `<mui-icon-${i}></mui-icon-${i}>` : ""}
-          ${t}
-        </mui-body>` : ""}
-    `;
+    const e = this.shadowRoot.querySelector(".message-container");
+    if (!e) return;
+    const i = this.variant, s = this.message;
+    let t = "";
+    i === "success" ? t = "<mui-icon-check></mui-icon-check>" : i === "warning" ? t = "<mui-icon-warning></mui-icon-warning>" : i === "error" && (t = "<mui-icon-attention></mui-icon-attention>"), e.innerHTML = s ? `<mui-body size="small" variant="${i}">${t}${s}</mui-body>` : "";
   }
 }
-customElements.get("mui-field") || customElements.define("mui-field", r);
+customElements.get("mui-field") || customElements.define("mui-field", a);

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

@@ -3,7 +3,10 @@ class s extends HTMLElement {
     return ["length", "weight", "direction"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.setAttribute("role", "presentation"), this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.updateStyles();
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.shadowRoot && (this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.setAttribute("role", "presentation"), this.updateStyles());
   }
   attributeChangedCallback() {
     this.updateStyles();

package/dist/types/components/mui-field/index.d.ts

@@ -1,3 +1 @@
-import "../mui-icons/check";
-import "../mui-icons/warning";
-import "../mui-icons/attention";
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muibook/components",
-  "version": "5.2.1",
+  "version": "6.0.0",
   "type": "module",
   "description": "A library of MUI-based design system components.",
   "author": "Michael Trilford",