@muibook/components 19.6.0 → 20.1.0

package/dist/esm/components/mui-date-picker/index.js

@@ -0,0 +1,169 @@
+import "../mui-dropdown/index.js";
+import "../mui-input/index.js";
+import "../mui-calendar/index.js";
+import "../mui-time/index/index.js";
+import "../mui-rule/index.js";
+import "../mui-icons/calendar/index.js";
+class h extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    this.setAttribute("value", t ?? "");
+  }
+  focus(t) {
+    var a;
+    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("mui-input");
+    e && typeof e.focus == "function" ? e.focus(t) : super.focus(t);
+  }
+  connectedCallback() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: flex;
+          box-sizing: border-box;
+        }
+        ::slotted(.calendar-pane) {
+          flex: 0 0 auto;
+        }
+        ::slotted(mui-rule) {
+          opacity: 0.5;
+          margin-inline: var(--stroke-size-100);
+        }
+        ::slotted(.time-pane) {
+          flex: 1 1 auto;
+          min-width: 160px;
+          display: flex;
+          flex-direction: column;
+          min-height: 0;
+        }
+      </style>
+      <slot></slot>
+    `);
+  }
+}
+customElements.get("mui-date-picker-popover") || customElements.define("mui-date-picker-popover", h);
+class m extends HTMLElement {
+  constructor() {
+    super(), this.selectedDate = "", this.selectedTime = "", this.initialized = !1, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["value", "type", "label", "hide-label", "optional", "size", "variant"];
+  }
+  connectedCallback() {
+    this.syncAttributes(), this.render(), this.setupListeners(), this.initialized = !0;
+  }
+  attributeChangedCallback(t, e, a) {
+    var l, n, s;
+    if (e !== a)
+      if (t === "value") {
+        if (this.syncAttributes(), this.initialized) {
+          const i = (l = this.shadowRoot) == null ? void 0 : l.querySelector("mui-input"), r = (n = this.shadowRoot) == null ? void 0 : n.querySelector("mui-calendar"), o = (s = this.shadowRoot) == null ? void 0 : s.querySelector("mui-time");
+          i && i.setAttribute("value", this.formatDisplayValue(this.getAttribute("value") || "")), r && (this.selectedDate ? r.setAttribute("value", this.selectedDate) : r.removeAttribute("value")), o && (this.selectedTime ? o.setAttribute("value", this.selectedTime) : o.removeAttribute("value"));
+        }
+      } else
+        this.render(), this.setupListeners();
+  }
+  syncAttributes() {
+    const t = this.getAttribute("value") || "";
+    if (this.selectedDate = "", this.selectedTime = "", !!t && t) {
+      const e = t.split(" ");
+      e.length > 0 && (e[0].includes("-") ? (this.selectedDate = e[0], this.selectedTime = e.slice(1).join(" ")) : this.selectedTime = t);
+    }
+  }
+  isDateTimeType(t) {
+    return t === "datetime" || t === "datetimeslot";
+  }
+  formatDisplayValue(t) {
+    if (!t) return "";
+    const e = t.split(" ");
+    if (e.length > 0 && e[0].includes("-")) {
+      const a = e[0].split("-");
+      if (a.length === 3) {
+        const l = parseInt(a[0], 10), n = parseInt(a[1], 10) - 1, s = parseInt(a[2], 10);
+        if (!isNaN(l) && !isNaN(n) && !isNaN(s)) {
+          const r = `${s} ${["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][n]} ${l}`;
+          return e.length > 1 ? `${e.slice(1).join(" ")}, ${r}` : r;
+        }
+      }
+    }
+    return t;
+  }
+  setupListeners() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector("mui-calendar"), e = this.shadowRoot.querySelector("mui-time"), a = this.shadowRoot.querySelector("mui-input"), l = () => {
+      const s = this.getAttribute("type") || "date";
+      let i = "";
+      s === "date" ? i = this.selectedDate : this.isDateTimeType(s) && (this.selectedDate && this.selectedTime ? i = `${this.selectedDate} ${this.selectedTime}`.trim() : i = this.selectedDate || this.selectedTime), this.setAttribute("value", i), a && a.setAttribute("value", this.formatDisplayValue(i)), this.dispatchEvent(new CustomEvent("change", { detail: { value: i }, bubbles: !0, composed: !0 }));
+    };
+    t && t.addEventListener("change", (s) => {
+      const i = s.detail;
+      i && i.value && (this.selectedDate = i.value, l(), (this.getAttribute("type") || "date") === "date" && requestAnimationFrame(() => {
+        var u;
+        const o = (u = this.shadowRoot) == null ? void 0 : u.querySelector("mui-dropdown");
+        o && typeof o.close == "function" && o.close();
+      }));
+    }), e && e.addEventListener("change", (s) => {
+      const i = s.detail;
+      if (i && i.value) {
+        this.selectedTime = i.value, l();
+        const r = this.getAttribute("type") || "date";
+        this.isDateTimeType(r) && requestAnimationFrame(() => {
+          var u;
+          const o = (u = this.shadowRoot) == null ? void 0 : u.querySelector("mui-dropdown");
+          o && typeof o.close == "function" && o.close();
+        });
+      }
+    });
+    const n = this.shadowRoot.querySelector("mui-date-picker-popover");
+    n && n.addEventListener("click", (s) => {
+      s.stopPropagation();
+    });
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("value") || "", e = this.formatDisplayValue(t), a = this.getAttribute("type") || "date", l = this.getAttribute("label") || "", n = this.hasAttribute("hide-label") ? "hide-label" : "", s = this.hasAttribute("optional") ? "optional" : "", i = this.getAttribute("size") || "medium", r = this.getAttribute("variant") || "", o = this.isDateTimeType(a), d = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: inline-block;
+          width: 100%;
+        }
+        mui-dropdown {
+          width: 100%;
+          --dropdown-min-width: auto;
+        }
+        .time-pane {
+          width: 130px;
+        }
+      </style>
+      <mui-dropdown persistent>
+        <mui-input 
+          slot="action" 
+          value="${e}"
+          label="${l}"
+          size="${i}"
+          variant="${r}"
+          ${n}
+          ${s}
+          readonly>
+          <mui-button slot="after"><mui-icon-calendar></mui-icon-calendar></mui-button>
+        </mui-input>
+
+        <mui-date-picker-popover>
+          ${`<div class="calendar-pane"><mui-calendar value="${this.selectedDate}" slotted></mui-calendar></div>`}
+          ${o ? '<mui-rule direction="vertical" length="auto"></mui-rule>' : ""}
+          ${o ? `<div class="time-pane" style="position: relative;"><div style="position: absolute; inset: 0;"><mui-time variant="slots" value="${this.selectedTime}" style="--time-picker-height: 100%; height: 100%; --time-picker-radius: var(--stroke-size-200);" slotted></mui-time></div></div>` : ""}
+        </mui-date-picker-popover>
+      </mui-dropdown>
+    `
+    );
+    this.shadowRoot.innerHTML = d;
+  }
+}
+customElements.get("mui-date-picker") || customElements.define("mui-date-picker", m);