@onereach/ui-components 23.2.0-beta.5525.0 → 23.2.1-beta.5569.0

package/dist/esm/OrDateTimePicker.vue_vue_type_script_lang-BPE3fOtA.mjs

@@ -0,0 +1,1404 @@
+import { DropdownClose as re, DropdownOpen as ne } from "@onereach/ui-components-common/directives";
+import { useProxyModelValue as Z, useDateMask as ae, useTimeMask as ie, useDateFormat as le, useTimeFormat as ue, useLocale as se, useResponsive as de } from "@onereach/ui-components-common/hooks";
+import { O as me } from "./OrError-B5ihH6-3.mjs";
+import { O as ce } from "./OrHint-NvbZyURY.mjs";
+import { O as _ } from "./OrIconButton-BlHCLpeW.mjs";
+import { O as x } from "./OrIcon-k8cyvh-D.mjs";
+import { O as fe } from "./OrInputBox-6ciokFdU.mjs";
+import { a as pe } from "./OrInputBox.vue_vue_type_script_lang-q2L7rmth.mjs";
+import { O as ee } from "./OrLabel-DssheqEn.mjs";
+import { O as ye } from "./OrPopover-DbygLPtT.mjs";
+import { toArray as J, exclude as ge, include as ve } from "@onereach/ui-components-common/utils";
+import { defineComponent as L, ref as y, computed as a, toRef as $, openBlock as g, createElementBlock as h, normalizeClass as v, withModifiers as D, Fragment as Y, createTextVNode as S, toDisplayString as B, resolveComponent as q, createElementVNode as R, renderList as j, createBlock as W, withCtx as M, createVNode as V, renderSlot as te, watch as K, nextTick as oe, createCommentVNode as be } from "vue";
+import { TimeFormat as A } from "@onereach/ui-components-common/types";
+import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { O as z } from "./OrButton-C_hXddAf.mjs";
+import { O as he } from "./OrMenuItem-BHRMA0L1.mjs";
+import { O as Te } from "./OrMenu-CJT4Snay.mjs";
+const Ce = (e, t, l) => typeof t == "function" ? t(e, l) : e.toLocaleString(l, {
+  dateStyle: t,
+  timeZone: "UTC"
+}), De = (e, t, l) => e.toLocaleString(l, {
+  dateStyle: "medium",
+  timeZone: "UTC"
+}), Se = (e, t, l) => e.toLocaleString(l, {
+  timeStyle: "short",
+  hourCycle: typeof t != "function" && t !== A.Auto ? t : void 0,
+  timeZone: "UTC"
+}), ke = (e, t, l) => typeof t == "function" ? t(e, l) : e.toLocaleString(l, {
+  timeStyle: "short",
+  hourCycle: t !== A.Auto ? t : void 0,
+  timeZone: "UTC"
+}), Q = () => {
+  const e = /* @__PURE__ */ new Date();
+  return new Date(Date.UTC(
+    e.getUTCFullYear(),
+    e.getUTCMonth(),
+    e.getUTCDate()
+  ));
+}, X = (e, t) => {
+  const l = e.getBoundingClientRect(), f = t.getBoundingClientRect();
+  l.top >= f.top && l.bottom <= f.bottom || (t.scrollTop = e.offsetTop - t.offsetTop - t.clientHeight / 2 + e.clientHeight / 2);
+}, Ue = [
+  // Layout
+  "layout-inline-row",
+  // Interactivity
+  "interactivity-click",
+  // Theme (focus)
+  "focus-visible:theme-border-inherit focus-visible:border-b-2",
+  "dark:focus-visible:theme-border-inherit-dark",
+  // Theme (selected)
+  "selected:theme-border-inherit selected:border-b-2",
+  "dark:selected:theme-border-inherit-dark"
+], Me = [
+  // Theme
+  "theme-foreground-outline",
+  "dark:theme-foreground-outline-dark"
+], Fe = L({
+  name: "OrDateTimePickerDateControl",
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    modelValue: {
+      type: void 0,
+      default: void 0
+    },
+    format: {
+      type: [String, Function],
+      required: !0
+    },
+    locale: {
+      type: String,
+      required: !0
+    },
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  expose: [
+    "root"
+  ],
+  setup(e, t) {
+    const l = y(), f = a(() => [
+      "or-date-time-picker-date-control-v3",
+      ...Ue
+    ]), p = a(() => [
+      ...Me
+    ]), b = Z($(e, "modelValue"), t.emit), u = ae($(e, "format"), $(e, "locale"));
+    return {
+      root: l,
+      rootStyles: f,
+      placeholderStyles: p,
+      model: b,
+      placeholder: u,
+      formatDate: Ce
+    };
+  }
+}), Oe = ["contenteditable", "selected", "required", "readonly", "disabled"], Pe = ["disabled"];
+function Ve(e, t, l, f, p, b) {
+  return g(), h("div", {
+    ref: "root",
+    class: v(e.rootStyles),
+    contenteditable: !e.disabled,
+    selected: e.selected,
+    required: e.required,
+    readonly: e.readonly,
+    disabled: e.disabled,
+    onKeydown: t[0] || (t[0] = D(() => {
+    }, ["prevent"]))
+  }, [
+    e.model ? (g(), h(Y, { key: 0 }, [
+      S(B(e.formatDate(e.model, e.format, e.locale)), 1)
+    ], 64)) : (g(), h("span", {
+      key: 1,
+      class: v(e.placeholderStyles),
+      disabled: e.disabled
+    }, B(e.placeholder), 11, Pe))
+  ], 42, Oe);
+}
+const $e = /* @__PURE__ */ E(Fe, [["render", Ve]]), Be = [
+  // Layout
+  "layout-column",
+  // Spacing
+  "px-md",
+  "py-md",
+  "gap-sm"
+], Ne = [
+  // Layout
+  "grid content-start",
+  "grid-cols-7",
+  // Box
+  "h-[262px]",
+  // Spacing
+  "-mx-[2px]",
+  "-my-[2px]"
+], we = [
+  // Layout
+  "layout-row justify-center",
+  // Interactivity
+  "interactivity-default",
+  // Spacing
+  "mx-[2px]",
+  "my-[2px]",
+  "px-sm",
+  "py-sm",
+  // Typography
+  "typography-caption-regular",
+  // Theme
+  "theme-foreground-outline",
+  "dark:theme-foreground-outline-dark"
+], Ie = [
+  // Box
+  "!min-w-fit",
+  // Spacing
+  "mx-[2px]",
+  "my-[2px]",
+  "!px-sm",
+  "!py-sm",
+  // Typography
+  "typography-caption-regular"
+], He = [
+  // Theme
+  "theme-foreground-primary",
+  "dark:theme-foreground-primary-dark",
+  "theme-outline-primary outline-1",
+  "dark:theme-outline-primary-dark"
+], Ge = [
+  "theme-background-primary-translucent-3",
+  "dark:theme-background-primary-translucent-3-dark"
+], qe = [
+  // Spacing
+  "!mx-0",
+  "!px-[10px]",
+  // Shape
+  "!rounded-0",
+  // Theme
+  "theme-background-primary-translucent-2",
+  "dark:theme-background-primary-translucent-2-dark"
+], Le = L({
+  name: "OrDateTimePickerDateSelect",
+  components: {
+    OrButton: z
+  },
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    modelValue: {
+      type: void 0,
+      default: void 0
+    },
+    initialValue: {
+      type: Date,
+      required: !0
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    format: {
+      type: [String, Function],
+      required: !0
+    },
+    weekStartsOn: {
+      type: Number,
+      default: 0
+    },
+    locale: {
+      type: String,
+      required: !0
+    },
+    dateFilter: {
+      type: Function,
+      default: void 0
+    },
+    dateHighlighter: {
+      type: Function,
+      default: void 0
+    },
+    rangeStart: {
+      type: Date,
+      default: void 0
+    },
+    rangeEnd: {
+      type: Date,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  expose: [
+    "root"
+  ],
+  setup(e, t) {
+    const l = y(), f = a(() => [
+      "or-date-time-picker-date-select-v3",
+      ...Be
+    ]), p = a(() => [
+      ...Ne
+    ]), b = a(() => [
+      ...we
+    ]), u = a(() => [
+      ...Ie
+    ]), o = a(() => [
+      ...Ge
+    ]), F = a(() => [
+      ...He
+    ]), k = a(() => [
+      ...qe
+    ]), r = Z($(e, "modelValue"), t.emit), m = a(() => {
+      const i = Math.min(Math.abs(e.weekStartsOn), 7), O = new Date(Date.UTC(
+        e.initialValue.getUTCFullYear(),
+        e.initialValue.getUTCMonth(),
+        1,
+        e.initialValue.getUTCHours(),
+        e.initialValue.getUTCMinutes()
+      )), d = new Date(Date.UTC(
+        e.initialValue.getUTCFullYear(),
+        e.initialValue.getUTCMonth() + 1,
+        0,
+        e.initialValue.getUTCHours(),
+        e.initialValue.getUTCMinutes()
+      )), T = (O.getUTCDay() - i + 7) % 7, n = (i - d.getUTCDay() + 6) % 7, C = new Date(Date.UTC(
+        O.getUTCFullYear(),
+        O.getUTCMonth(),
+        O.getUTCDate() - T,
+        O.getUTCHours(),
+        O.getUTCMinutes()
+      )), P = new Date(Date.UTC(
+        d.getUTCFullYear(),
+        d.getUTCMonth(),
+        d.getUTCDate() + n + 1,
+        d.getUTCHours(),
+        d.getUTCMinutes()
+      ));
+      return (() => {
+        let G = [], U = C;
+        for (; Number(U) < Number(P); )
+          G = [...G, U], U = new Date(Date.UTC(
+            U.getUTCFullYear(),
+            U.getUTCMonth(),
+            U.getUTCDate() + 1,
+            U.getUTCHours(),
+            U.getUTCMinutes()
+          ));
+        return G;
+      })();
+    }), w = a(() => {
+      const i = /* @__PURE__ */ new Date();
+      return i.setUTCHours(e.initialValue.getUTCHours()), i.setUTCMinutes(e.initialValue.getUTCMinutes()), i.setUTCSeconds(e.initialValue.getUTCSeconds()), i.setUTCMilliseconds(e.initialValue.getUTCMilliseconds()), i;
+    });
+    function s(i) {
+      return i.toLocaleString(e.locale, {
+        weekday: "short",
+        timeZone: "UTC"
+      });
+    }
+    function I(i) {
+      return i.toLocaleString(e.locale, {
+        day: "numeric",
+        timeZone: "UTC"
+      });
+    }
+    function H(i) {
+      return e.multiple ? J(r.value).map(Number).includes(Number(i)) : Number(r.value) === Number(i);
+    }
+    function N(i) {
+      e.multiple ? r.value = H(i) ? ge(i, J(r.value)) : ve(i, J(r.value)) : r.value = i;
+    }
+    return {
+      root: l,
+      rootStyles: f,
+      buttonGroupStyles: p,
+      buttonGroupWeekdayItemStyles: b,
+      buttonGroupDateItemStyles: u,
+      buttonGroupHighlitedDateItemStyles: o,
+      buttonGroupCurrentDateItemStyles: F,
+      buttonGroupInRangeDateItemStyles: k,
+      model: r,
+      dayOptions: m,
+      currentDate: w,
+      isDateSelected: H,
+      toggleDateSelection: N,
+      formatWeekday: s,
+      formatDay: I
+    };
+  }
+});
+function Ye(e, t, l, f, p, b) {
+  const u = q("OrButton");
+  return g(), h("div", {
+    ref: "root",
+    class: v(e.rootStyles)
+  }, [
+    R("div", {
+      class: v(e.buttonGroupStyles)
+    }, [
+      (g(), h(Y, null, j(7, (o) => R("div", {
+        key: o,
+        class: v(e.buttonGroupWeekdayItemStyles)
+      }, B(e.formatWeekday(e.dayOptions[o - 1])), 3)), 64)),
+      (g(!0), h(Y, null, j(e.dayOptions, (o) => (g(), W(u, {
+        key: Number(o),
+        class: v({
+          [e.buttonGroupDateItemStyles.join(" ")]: !0,
+          [e.buttonGroupHighlitedDateItemStyles.join(" ")]: !e.isDateSelected(o) && e.dateHighlighter && e.dateHighlighter(o),
+          [e.buttonGroupCurrentDateItemStyles.join(" ")]: !e.isDateSelected(o) && Number(o) !== Number(e.rangeStart) && Number(o) !== Number(e.rangeEnd) && Number(o) === Number(e.currentDate),
+          [e.buttonGroupInRangeDateItemStyles.join(" ")]: e.rangeStart && Number(o) > Number(e.rangeStart) && e.rangeEnd && Number(o) < Number(e.rangeEnd)
+        }),
+        variant: e.isDateSelected(o) || e.rangeStart && Number(o) === Number(e.rangeStart) || e.rangeEnd && Number(o) === Number(e.rangeEnd) ? "contained" : "text",
+        color: e.isDateSelected(o) || e.rangeStart && Number(o) === Number(e.rangeStart) || e.rangeEnd && Number(o) === Number(e.rangeEnd) ? "primary" : "inherit",
+        disabled: e.disabled || e.dateFilter && !e.dateFilter(o),
+        onClick: D((F) => e.toggleDateSelection(o), ["stop"])
+      }, {
+        default: M(() => [
+          S(B(e.formatDay(o)), 1)
+        ]),
+        _: 2
+      }, 1032, ["class", "variant", "color", "disabled", "onClick"]))), 128))
+    ], 2)
+  ], 2);
+}
+const Ee = /* @__PURE__ */ E(Le, [["render", Ye]]), Ae = [
+  // Layout
+  "layout-column",
+  // Interactivity
+  "interactivity-auto",
+  // Spacing
+  "gap-xs",
+  // Theme
+  "theme-foreground-outline",
+  "dark:theme-foreground-outline-dark",
+  // Theme (selected)
+  "selected:theme-foreground-default",
+  "dark:selected:theme-foreground-default-dark"
+], Re = [
+  // Typography
+  "typography-headline-1"
+], je = L({
+  name: "OrDateTimePickerMobileControl",
+  components: {
+    OrLabel: ee
+  },
+  props: {
+    label: {
+      type: String,
+      required: !0
+    },
+    selected: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  expose: [
+    "root"
+  ],
+  setup() {
+    const e = y(), t = a(() => [
+      "or-date-time-picker-mobile-control-v3",
+      ...Ae
+    ]), l = a(() => [
+      ...Re
+    ]);
+    return {
+      root: e,
+      rootStyles: t,
+      contentStyles: l
+    };
+  }
+}), Ze = ["selected"];
+function We(e, t, l, f, p, b) {
+  const u = q("OrLabel");
+  return g(), h("div", {
+    ref: "root",
+    class: v(e.rootStyles),
+    selected: e.selected
+  }, [
+    V(u, null, {
+      default: M(() => [
+        S(B(e.label), 1)
+      ]),
+      _: 1
+    }),
+    R("div", {
+      class: v(e.contentStyles)
+    }, [
+      te(e.$slots, "default")
+    ], 2)
+  ], 10, Ze);
+}
+const Ke = /* @__PURE__ */ E(je, [["render", We]]), ze = [
+  // Layout
+  "layout-row justify-between",
+  // Spacing
+  "px-md",
+  "py-md",
+  "gap-md"
+], Je = L({
+  name: "OrDateTimePickerMonthSelect",
+  components: {
+    OrButton: z,
+    OrIcon: x,
+    OrIconButton: _,
+    OrMenu: Te,
+    OrMenuItem: he
+  },
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    modelValue: {
+      type: void 0,
+      required: !0
+    },
+    locale: {
+      type: String,
+      required: !0
+    },
+    yearsOptionsLength: {
+      type: Number,
+      default: 5
+    },
+    yearFilter: {
+      type: Function,
+      default: void 0
+    },
+    monthFilter: {
+      type: Function,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  expose: [
+    "root"
+  ],
+  setup(e, t) {
+    const l = y(), f = a(() => [
+      "or-date-time-picker-month-select-v3",
+      ...ze
+    ]), p = y(), b = a(() => {
+      var n;
+      return (n = p.value) == null ? void 0 : n.root;
+    }), u = y([]), o = y(), F = a(() => {
+      var n;
+      return (n = o.value) == null ? void 0 : n.root;
+    }), k = y(), r = a(() => {
+      var n;
+      return (n = k.value) == null ? void 0 : n.state;
+    }), m = y(), w = a(() => {
+      var n;
+      return (n = m.value) == null ? void 0 : n.state;
+    }), s = Z($(e, "modelValue"), t.emit), I = a(() => {
+      const n = Math.max(e.yearsOptionsLength, 1) * 2 + 1;
+      return Array.from({ length: n }).map((C, P, { length: G }) => {
+        const U = s.value.getUTCFullYear() - Math.floor(G / 2) + P;
+        return new Date(Date.UTC(
+          U,
+          s.value.getUTCMonth(),
+          s.value.getUTCDate(),
+          s.value.getUTCHours(),
+          s.value.getUTCMinutes()
+        ));
+      });
+    }), H = a(() => Array.from({ length: 12 }, (n, C) => {
+      const P = C;
+      return new Date(Date.UTC(
+        s.value.getUTCFullYear(),
+        P,
+        s.value.getUTCDate(),
+        s.value.getUTCHours(),
+        s.value.getUTCMinutes()
+      ));
+    }));
+    K(r, async (n) => {
+      if (n) {
+        await oe();
+        const C = T(u.value, I.value);
+        C == null || C.scrollIntoView({
+          behavior: "instant",
+          block: "center"
+        });
+      }
+    });
+    function N() {
+      s.value = new Date(Date.UTC(
+        s.value.getUTCFullYear(),
+        s.value.getUTCMonth() + 1,
+        s.value.getUTCDate(),
+        s.value.getUTCHours(),
+        s.value.getUTCMinutes()
+      ));
+    }
+    function i() {
+      s.value = new Date(Date.UTC(
+        s.value.getUTCFullYear(),
+        s.value.getUTCMonth() - 1,
+        s.value.getUTCDate(),
+        s.value.getUTCHours(),
+        s.value.getUTCMinutes()
+      ));
+    }
+    function O(n) {
+      return n.toLocaleString(e.locale, {
+        year: "numeric",
+        timeZone: "UTC"
+      });
+    }
+    function d(n) {
+      return n.toLocaleString(e.locale, {
+        month: "long",
+        timeZone: "UTC"
+      });
+    }
+    function T(n, C) {
+      var P;
+      return (P = n.find((G, U) => s.value.getUTCFullYear() === C[U].getUTCFullYear())) == null ? void 0 : P.root;
+    }
+    return {
+      root: l,
+      rootStyles: f,
+      yearButton: p,
+      yearsButtons: u,
+      yearButtonRoot: b,
+      monthButton: o,
+      monthButtonRoot: F,
+      yearMenu: k,
+      yearMenuState: r,
+      monthMenu: m,
+      monthMenuState: w,
+      model: s,
+      yearOptions: I,
+      monthOptions: H,
+      goToNextMonth: N,
+      goToPreviousMonth: i,
+      formatYear: O,
+      formatMonth: d
+    };
+  }
+}), Qe = {
+  class: /* @__PURE__ */ v(["layout-row-reverse", "gap-md"])
+};
+function Xe(e, t, l, f, p, b) {
+  const u = q("OrIconButton"), o = q("OrIcon"), F = q("OrButton"), k = q("OrMenuItem"), r = q("OrMenu");
+  return g(), h("div", {
+    ref: "root",
+    class: v(e.rootStyles)
+  }, [
+    V(u, {
+      icon: "chevron_left",
+      disabled: e.disabled,
+      onClick: t[0] || (t[0] = D((m) => e.goToPreviousMonth(), ["stop"]))
+    }, null, 8, ["disabled"]),
+    R("div", Qe, [
+      V(F, {
+        ref: "yearButton",
+        variant: "link",
+        color: "inherit",
+        disabled: e.disabled,
+        onClick: t[1] || (t[1] = D((m) => {
+          e.monthMenu && e.monthMenu.close(), e.yearMenu && e.yearMenu.toggle();
+        }, ["stop"]))
+      }, {
+        default: M(() => [
+          S(B(e.formatYear(e.model)) + " ", 1),
+          V(o, {
+            icon: e.yearMenuState === "open" ? "arrow_drop_up" : "arrow_drop_down"
+          }, null, 8, ["icon"])
+        ]),
+        _: 1
+      }, 8, ["disabled"]),
+      V(F, {
+        ref: "monthButton",
+        variant: "link",
+        color: "inherit",
+        disabled: e.disabled,
+        onClick: t[2] || (t[2] = D((m) => {
+          e.yearMenu && e.yearMenu.close(), e.monthMenu && e.monthMenu.toggle();
+        }, ["stop"]))
+      }, {
+        default: M(() => [
+          S(B(e.formatMonth(e.model)) + " ", 1),
+          V(o, {
+            icon: e.monthMenuState === "open" ? "arrow_drop_up" : "arrow_drop_down"
+          }, null, 8, ["icon"])
+        ]),
+        _: 1
+      }, 8, ["disabled"]),
+      V(r, {
+        ref: "yearMenu",
+        trigger: e.yearButtonRoot
+      }, {
+        default: M(() => [
+          (g(!0), h(Y, null, j(e.yearOptions, (m) => (g(), W(k, {
+            key: Number(m),
+            ref_for: !0,
+            ref: "yearsButtons",
+            selected: Number(m) === Number(e.model),
+            disabled: e.yearFilter && !e.yearFilter(m),
+            onClick: D((w) => {
+              e.model = m, e.yearMenu && e.yearMenu.close();
+            }, ["stop"])
+          }, {
+            default: M(() => [
+              S(B(e.formatYear(m)), 1)
+            ]),
+            _: 2
+          }, 1032, ["selected", "disabled", "onClick"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["trigger"]),
+      V(r, {
+        ref: "monthMenu",
+        trigger: e.monthButtonRoot
+      }, {
+        default: M(() => [
+          (g(!0), h(Y, null, j(e.monthOptions, (m) => (g(), W(k, {
+            key: Number(m),
+            selected: Number(m) === Number(e.model),
+            disabled: e.monthFilter && !e.monthFilter(m),
+            onClick: D((w) => {
+              e.model = m, e.monthMenu && e.monthMenu.close();
+            }, ["stop"])
+          }, {
+            default: M(() => [
+              S(B(e.formatMonth(m)), 1)
+            ]),
+            _: 2
+          }, 1032, ["selected", "disabled", "onClick"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["trigger"])
+    ]),
+    V(u, {
+      icon: "chevron_right",
+      disabled: e.disabled,
+      onClick: t[3] || (t[3] = D((m) => e.goToNextMonth(), ["stop"]))
+    }, null, 8, ["disabled"])
+  ], 2);
+}
+const _e = /* @__PURE__ */ E(Je, [["render", Xe]]), xe = [
+  // Layout
+  "layout-row-reverse",
+  // Layout (children)
+  "children:grow",
+  // Spacing
+  "px-md md:px-sm",
+  "py-md md:py-sm",
+  "gap-md md:gap-sm",
+  // Theme
+  "theme-border-outline-variant border-t-1",
+  "dark:theme-border-outline-variant-dark"
+], et = L({
+  name: "OrDateTimePickerPopoverFooter",
+  components: {
+    OrButton: z
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "apply",
+    "reset"
+  ],
+  expose: [
+    "root"
+  ],
+  setup() {
+    const e = y(), t = a(() => [
+      "or-date-time-picker-popover-footer-v3",
+      ...xe
+    ]);
+    return {
+      root: e,
+      rootStyles: t
+    };
+  }
+});
+function tt(e, t, l, f, p, b) {
+  const u = q("OrButton");
+  return g(), h("footer", {
+    ref: "root",
+    class: v(e.rootStyles)
+  }, [
+    V(u, {
+      variant: "outlined",
+      disabled: e.disabled,
+      onClick: t[0] || (t[0] = D((o) => e.$emit("apply"), ["stop"]))
+    }, {
+      default: M(() => [
+        S(" Done ")
+      ]),
+      _: 1
+    }, 8, ["disabled"]),
+    V(u, {
+      variant: "text",
+      onClick: t[1] || (t[1] = D((o) => e.$emit("reset"), ["stop"]))
+    }, {
+      default: M(() => [
+        S(" Cancel ")
+      ]),
+      _: 1
+    })
+  ], 2);
+}
+const ot = /* @__PURE__ */ E(et, [["render", tt]]), rt = [
+  // Layout
+  "layout-row md:hidden",
+  // Spacing
+  "px-md",
+  "py-md",
+  "gap-xl"
+], nt = L({
+  name: "OrDateTimePickerPopoverHeader",
+  expose: [
+    "root"
+  ],
+  setup() {
+    const e = y(), t = a(() => [
+      "or-date-time-picker-popover-header-v3",
+      ...rt
+    ]);
+    return {
+      root: e,
+      rootStyles: t
+    };
+  }
+});
+function at(e, t, l, f, p, b) {
+  return g(), h("header", {
+    ref: "root",
+    class: v(e.rootStyles)
+  }, [
+    te(e.$slots, "default")
+  ], 2);
+}
+const it = /* @__PURE__ */ E(nt, [["render", at]]), lt = [
+  // Layout
+  "layout-inline-row",
+  // Interactivity
+  "interactivity-click",
+  // Theme (focus)
+  "focus-visible:theme-border-inherit focus-visible:border-b-2",
+  "dark:focus-visible:theme-border-inherit-dark",
+  // Theme (selected)
+  "selected:theme-border-inherit selected:border-b-2",
+  "dark:selected:theme-border-inherit-dark"
+], ut = [
+  // Theme
+  "theme-foreground-outline",
+  "dark:theme-foreground-outline-dark"
+], st = L({
+  name: "OrDateTimePickerTimeControl",
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    modelValue: {
+      type: void 0,
+      default: void 0
+    },
+    format: {
+      type: [String, Function],
+      required: !0
+    },
+    locale: {
+      type: String,
+      required: !0
+    },
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  expose: [
+    "root"
+  ],
+  setup(e, t) {
+    const l = y(), f = a(() => [
+      "or-date-time-picker-time-control-v3",
+      ...lt
+    ]), p = a(() => [
+      ...ut
+    ]), b = Z($(e, "modelValue"), t.emit), u = ie($(e, "format"), $(e, "locale"));
+    return {
+      root: l,
+      rootStyles: f,
+      placeholderStyles: p,
+      model: b,
+      placeholder: u,
+      formatTime: ke
+    };
+  }
+}), dt = ["contenteditable", "selected", "required", "readonly", "disabled"], mt = ["disabled"];
+function ct(e, t, l, f, p, b) {
+  return g(), h("div", {
+    ref: "root",
+    class: v(e.rootStyles),
+    contenteditable: !e.disabled,
+    selected: e.selected,
+    required: e.required,
+    readonly: e.readonly,
+    disabled: e.disabled,
+    onKeydown: t[0] || (t[0] = D(() => {
+    }, ["prevent"]))
+  }, [
+    e.model ? (g(), h(Y, { key: 0 }, [
+      S(B(e.formatTime(e.model, e.format, e.locale)), 1)
+    ], 64)) : (g(), h("span", {
+      key: 1,
+      class: v(e.placeholderStyles),
+      disabled: e.disabled
+    }, B(e.placeholder), 11, mt))
+  ], 42, dt);
+}
+const ft = /* @__PURE__ */ E(st, [["render", ct]]), pt = [
+  // Layout
+  "layout-row justify-center",
+  // Spacing
+  "px-md",
+  "py-md",
+  "gap-sm",
+  // Typography
+  "typography-body-2-regular",
+  // Theme
+  "theme-foreground-default",
+  "dark:theme-foreground-default-dark"
+], yt = [
+  // Layout
+  "layout-column",
+  // Box
+  "h-[294px] md:h-[238px]",
+  // Overflow
+  "overflow-x-hidden",
+  "overflow-y-auto"
+], gt = [
+  // Box
+  "!min-w-fit",
+  // Typography
+  "typography-caption-regular"
+], vt = L({
+  name: "OrDateTimePickerTimeSelect",
+  components: {
+    OrButton: z
+  },
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    modelValue: {
+      type: void 0,
+      default: void 0
+    },
+    initialValue: {
+      type: Date,
+      required: !0
+    },
+    format: {
+      type: [String, Function],
+      required: !0
+    },
+    locale: {
+      type: String,
+      required: !0
+    },
+    hoursFilter: {
+      type: Function,
+      default: void 0
+    },
+    minutesFilter: {
+      type: Function,
+      default: void 0
+    },
+    hourStep: {
+      type: Number,
+      default: 1
+    },
+    minuteStep: {
+      type: Number,
+      default: 1
+    },
+    isActive: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  expose: [
+    "root"
+  ],
+  setup(e, t) {
+    const l = y(), f = y(), p = y(), b = y([]), u = y([]), o = a(() => [
+      "or-date-time-picker-time-select-v3",
+      ...pt
+    ]), F = a(() => [
+      ...yt
+    ]), k = a(() => [
+      ...gt
+    ]), r = Z($(e, "modelValue"), t.emit), m = y((r.value ?? e.initialValue).getUTCHours() < 12 ? "am" : "pm");
+    K(m, (d) => {
+      switch (d) {
+        case "am":
+          r.value = new Date(Date.UTC(
+            (r.value ?? e.initialValue).getUTCFullYear(),
+            (r.value ?? e.initialValue).getUTCMonth(),
+            (r.value ?? e.initialValue).getUTCDate(),
+            (r.value ?? e.initialValue).getUTCHours() - 12,
+            (r.value ?? e.initialValue).getUTCMinutes()
+          ));
+          break;
+        case "pm":
+          r.value = new Date(Date.UTC(
+            (r.value ?? e.initialValue).getUTCFullYear(),
+            (r.value ?? e.initialValue).getUTCMonth(),
+            (r.value ?? e.initialValue).getUTCDate(),
+            (r.value ?? e.initialValue).getUTCHours() + 12,
+            (r.value ?? e.initialValue).getUTCMinutes()
+          ));
+          break;
+      }
+    }), K(() => e.isActive, (d) => {
+      oe(() => {
+        if (!d || !r.value)
+          return;
+        const T = O(b.value, s.value), n = O(u.value, I.value);
+        T && f.value && X(T, f.value), n && p.value && X(n, p.value);
+      });
+    }, { immediate: !0 });
+    const w = a(() => typeof e.format == "function" || e.format === A.Auto ? new Date(1970, 0).toLocaleTimeString(e.locale).includes("12") ? A.H12 : A.H23 : e.format), s = a(() => {
+      const d = e.hourStep > 0 ? e.hourStep : 1;
+      return Array.from({ length: Math.ceil(24 / d) }, (T, n) => {
+        const C = n * d;
+        return new Date(Date.UTC(
+          (r.value ?? e.initialValue).getUTCFullYear(),
+          (r.value ?? e.initialValue).getUTCMonth(),
+          (r.value ?? e.initialValue).getUTCDate(),
+          C,
+          (r.value ?? e.initialValue).getUTCMinutes()
+        ));
+      }).filter((T) => {
+        if (w.value === A.H23)
+          return !0;
+        switch (m.value) {
+          case "am":
+            return T.getUTCHours() < 12;
+          case "pm":
+            return T.getUTCHours() >= 12;
+        }
+      });
+    }), I = a(() => {
+      const d = e.minuteStep > 0 ? e.minuteStep : 1;
+      return Array.from({ length: Math.ceil(60 / d) }, (T, n) => {
+        const C = n * d;
+        return new Date(Date.UTC(
+          (r.value ?? e.initialValue).getUTCFullYear(),
+          (r.value ?? e.initialValue).getUTCMonth(),
+          (r.value ?? e.initialValue).getUTCDate(),
+          (r.value ?? e.initialValue).getUTCHours(),
+          C
+        ));
+      });
+    });
+    function H(d) {
+      return d.toLocaleString(e.locale, {
+        hour: "numeric",
+        hourCycle: typeof e.format != "function" && e.format !== A.Auto ? e.format : void 0,
+        timeZone: "UTC"
+      }).replace(/\D/g, "");
+    }
+    function N(d) {
+      return String(d.getUTCMinutes()).padStart(2, "0");
+    }
+    function i(d) {
+      return [...d].sort((T, n) => T.root.compareDocumentPosition(n.root) & 2 ? 1 : -1);
+    }
+    function O(d, T) {
+      var n;
+      return (n = i(d).find((C, P) => Number(r.value) === Number(T[P]))) == null ? void 0 : n.root;
+    }
+    return {
+      root: l,
+      rootStyles: o,
+      hoursContainer: f,
+      minutesContainer: p,
+      hoursButtons: b,
+      minutesButtons: u,
+      buttonGroupStyles: F,
+      buttonGroupItemStyles: k,
+      model: r,
+      dayPeriod: m,
+      proxyTimeFormat: w,
+      hoursOptions: s,
+      minutesOptions: I,
+      formatHours: H,
+      formatMinutes: N
+    };
+  }
+});
+function bt(e, t, l, f, p, b) {
+  const u = q("OrButton");
+  return g(), h("div", {
+    ref: "root",
+    class: v(e.rootStyles)
+  }, [
+    R("div", {
+      ref: "hoursContainer",
+      class: v(e.buttonGroupStyles)
+    }, [
+      (g(!0), h(Y, null, j(e.hoursOptions, (o) => (g(), W(u, {
+        ref_for: !0,
+        ref: "hoursButtons",
+        key: Number(o),
+        class: v(e.buttonGroupItemStyles),
+        variant: Number(o) === Number(e.model) ? "contained" : "text",
+        color: Number(o) === Number(e.model) ? "primary" : "inherit",
+        disabled: e.hoursFilter && !e.hoursFilter(o),
+        onClick: D((F) => e.model = o, ["stop"])
+      }, {
+        default: M(() => [
+          S(B(e.formatHours(o)), 1)
+        ]),
+        _: 2
+      }, 1032, ["class", "variant", "color", "disabled", "onClick"]))), 128))
+    ], 2),
+    S(" : "),
+    R("div", {
+      ref: "minutesContainer",
+      class: v(e.buttonGroupStyles)
+    }, [
+      (g(!0), h(Y, null, j(e.minutesOptions, (o) => (g(), W(u, {
+        ref_for: !0,
+        ref: "minutesButtons",
+        key: Number(o),
+        class: v(e.buttonGroupItemStyles),
+        variant: Number(o) === Number(e.model) ? "contained" : "text",
+        color: Number(o) === Number(e.model) ? "primary" : "inherit",
+        disabled: e.minutesFilter && !e.minutesFilter(o),
+        onClick: D((F) => e.model = o, ["stop"])
+      }, {
+        default: M(() => [
+          S(B(e.formatMinutes(o)), 1)
+        ]),
+        _: 2
+      }, 1032, ["class", "variant", "color", "disabled", "onClick"]))), 128))
+    ], 2),
+    e.proxyTimeFormat === "h12" ? (g(), h("div", {
+      key: 0,
+      class: v(e.buttonGroupStyles)
+    }, [
+      V(u, {
+        class: v(e.buttonGroupItemStyles),
+        variant: e.dayPeriod === "am" ? "contained" : "text",
+        color: e.dayPeriod === "am" ? "primary" : "inherit",
+        onClick: t[0] || (t[0] = D((o) => e.dayPeriod = "am", ["stop"]))
+      }, {
+        default: M(() => [
+          S(" AM ")
+        ]),
+        _: 1
+      }, 8, ["class", "variant", "color"]),
+      V(u, {
+        class: v(e.buttonGroupItemStyles),
+        variant: e.dayPeriod === "pm" ? "contained" : "text",
+        color: e.dayPeriod === "pm" ? "primary" : "inherit",
+        onClick: t[1] || (t[1] = D((o) => e.dayPeriod = "pm", ["stop"]))
+      }, {
+        default: M(() => [
+          S(" PM ")
+        ]),
+        _: 1
+      }, 8, ["class", "variant", "color"])
+    ], 2)) : be("", !0)
+  ], 2);
+}
+const ht = /* @__PURE__ */ E(vt, [["render", bt]]), Tt = [
+  // Layout
+  "layout-column",
+  // Spacing
+  "gap-xs"
+], Ct = [
+  // Box
+  "w-[290px]"
+], Dt = [], Yt = L({
+  name: "OrDateTimePicker",
+  components: {
+    OrDateTimePickerDateControl: $e,
+    OrDateTimePickerDateSelect: Ee,
+    OrDateTimePickerMobileControl: Ke,
+    OrDateTimePickerMonthSelect: _e,
+    OrDateTimePickerPopoverFooter: ot,
+    OrDateTimePickerPopoverHeader: it,
+    OrDateTimePickerTimeControl: ft,
+    OrDateTimePickerTimeSelect: ht,
+    OrError: me,
+    OrHint: ce,
+    OrIcon: x,
+    OrIconButton: _,
+    OrInputBox: fe,
+    OrLabel: ee,
+    OrPopover: ye
+  },
+  directives: {
+    DropdownClose: re,
+    DropdownOpen: ne
+  },
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    modelValue: {
+      type: void 0,
+      default: void 0
+    },
+    dateFormat: {
+      type: [String, Function],
+      default: void 0
+    },
+    timeFormat: {
+      type: [String, Function],
+      default: void 0
+    },
+    yearsOptionsLength: {
+      type: Number,
+      default: 5
+    },
+    weekStartsOn: {
+      type: Number,
+      default: 0
+    },
+    locale: {
+      type: String,
+      default: void 0
+    },
+    yearFilter: {
+      type: Function,
+      default: void 0
+    },
+    monthFilter: {
+      type: Function,
+      default: void 0
+    },
+    dateFilter: {
+      type: Function,
+      default: void 0
+    },
+    dateHighlighter: {
+      type: Function,
+      default: void 0
+    },
+    hoursFilter: {
+      type: Function,
+      default: void 0
+    },
+    minutesFilter: {
+      type: Function,
+      default: void 0
+    },
+    hourStep: {
+      type: Number,
+      default: 1
+    },
+    minuteStep: {
+      type: Number,
+      default: 1
+    },
+    variant: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    anchor: {
+      type: Object,
+      default: void 0
+    },
+    label: {
+      type: String,
+      default: void 0
+    },
+    hint: {
+      type: String,
+      default: void 0
+    },
+    error: {
+      type: [String, Boolean],
+      default: void 0
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "input",
+    "keydown",
+    "keyup",
+    "focus",
+    "blur"
+  ],
+  expose: [
+    "root",
+    "focus",
+    "blur"
+  ],
+  setup(e, t) {
+    const l = y(), f = a(() => [
+      "or-date-time-picker-v3",
+      ...Tt,
+      ...e.variant === pe.Embedded ? ["grow"] : []
+    ]), p = y(), b = a(() => {
+      var c;
+      return (c = p.value) == null ? void 0 : c.root;
+    }), u = y(), o = a(() => {
+      var c;
+      return (c = u.value) == null ? void 0 : c.state;
+    }), F = a(() => [
+      "or-date-time-picker-date-popover-v3",
+      ...U.value ? [] : Ct
+    ]), k = y(), r = a(() => {
+      var c;
+      return (c = k.value) == null ? void 0 : c.state;
+    }), m = a(() => [
+      "or-date-time-picker-time-popover-v3",
+      ...Dt
+    ]), w = le($(e, "dateFormat")), s = ue($(e, "timeFormat")), I = se($(e, "locale")), H = y(e.modelValue ?? Q());
+    K(() => e.modelValue, (c) => {
+      H.value = c ?? Q();
+    });
+    const N = Z($(e, "modelValue"), t.emit), i = y(N.value);
+    K(N, (c) => {
+      i.value = c;
+    });
+    const O = a(() => i.value ? !!(e.yearFilter && !e.yearFilter(i.value) || e.monthFilter && !e.monthFilter(i.value) || e.dateFilter && !e.dateFilter(i.value) || e.hoursFilter && !e.hoursFilter(i.value) || e.minutesFilter && !e.minutesFilter(i.value)) : !0);
+    function d() {
+      N.value = i.value;
+    }
+    function T() {
+      i.value = N.value;
+    }
+    function n() {
+      if (!e.readonly && !e.disabled) {
+        const c = u.value;
+        c && (o.value === "open" ? c.close() : c.open()), G();
+      }
+    }
+    function C() {
+      if (!e.readonly && !e.disabled) {
+        const c = k.value;
+        c && (r.value === "open" ? c.close() : c.open()), P();
+      }
+    }
+    function P() {
+      const c = u.value;
+      c && c.close();
+    }
+    function G() {
+      const c = k.value;
+      c && c.close();
+    }
+    const { isMobile: U } = de();
+    return {
+      root: l,
+      rootStyles: f,
+      inputBox: p,
+      inputBoxRoot: b,
+      datePopover: u,
+      datePopoverState: o,
+      datePopoverStyles: F,
+      timePopover: k,
+      timePopoverState: r,
+      timePopoverStyles: m,
+      resolvedDateFormat: w,
+      resolvedTimeFormat: s,
+      resolvedLocale: I,
+      initialValue: H,
+      model: N,
+      draft: i,
+      invalid: O,
+      apply: d,
+      reset: T,
+      toggleDatePopover: n,
+      toggleTimePopover: C,
+      closeDatePopover: P,
+      closeTimePopover: G,
+      formatMobileDate: De,
+      formatMobileTime: Se
+    };
+  }
+});
+export {
+  $e as O,
+  Yt as _,
+  Ee as a,
+  Ke as b,
+  _e as c,
+  ot as d,
+  it as e,
+  ft as f,
+  ht as g,
+  Ce as h,
+  De as i,
+  Se as j,
+  ke as k,
+  Q as l,
+  X as s
+};
+//# sourceMappingURL=OrDateTimePicker.vue_vue_type_script_lang-BPE3fOtA.mjs.map