@onereach/ui-components 8.4.1-beta.3657.0 → 8.5.0

package/dist/bundled/v2/components/OrDateTimePickerV3-d0b03343.js

@@ -0,0 +1,1715 @@
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
+import { u as useProxyModelValue } from './OrBottomSheetV3-022aa5f7.js';
+import { n as normalizeComponent } from './OrAvatar-7d519020.js';
+import { _ as __vue_component__$9 } from './OrButtonV3-b67957f9.js';
+import { _ as __vue_component__$a } from './OrLabelV3-1654fb1f.js';
+import { _ as __vue_component__$b } from './OrIconV3-cbb77e49.js';
+import { _ as __vue_component__$c } from './OrIconButtonV3-331241ce.js';
+import { _ as __vue_component__$d } from './OrMenuV3-ae616ef0.js';
+import { _ as __vue_component__$e } from './OrMenuItemV3-4fe259d2.js';
+import { _ as __vue_component__$h, I as InputBoxSize } from './OrInputBoxV3-95cfbd71.js';
+import { _ as __vue_component__$f } from './OrErrorV3-e9243e0b.js';
+import { _ as __vue_component__$g } from './OrHintV3-f31f7a39.js';
+import { _ as __vue_component__$i } from './OrPopoverV3-3af55d28.js';
+import { D as DropdownClose, a as DropdownOpen } from './OrDatePickerV3-169c5415.js';
+
+function formatDate(value) {
+  return value.toLocaleString(navigator.language, {
+    dateStyle: 'short',
+    timeZone: 'UTC'
+  });
+}
+
+var DateTimePickerTimeFormat;
+(function (DateTimePickerTimeFormat) {
+  DateTimePickerTimeFormat["Auto"] = "auto";
+  DateTimePickerTimeFormat["H12"] = "h12";
+  DateTimePickerTimeFormat["H23"] = "h23";
+})(DateTimePickerTimeFormat || (DateTimePickerTimeFormat = {}));
+
+function formatTime(value, format) {
+  return value.toLocaleString(navigator.language, {
+    timeStyle: 'short',
+    hourCycle: format !== DateTimePickerTimeFormat.Auto ? format : undefined,
+    timeZone: 'UTC'
+  });
+}
+
+function getCurrentDate() {
+  const currentDate = new Date();
+  return new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), currentDate.getUTCDate()));
+}
+
+function getDatePlaceholder() {
+  const sample = new Date(Date.UTC(1111, 1, 3, 4, 5)).toLocaleString(navigator.language, {
+    dateStyle: 'short',
+    timeZone: 'UTC'
+  });
+  return sample.replace(/1/g, 'Y').replace(/02/, 'MM').replace(/2/, 'M').replace(/03/g, 'DD').replace(/3/, 'D');
+}
+
+function getNextMonthDate() {
+  const currentDate = new Date();
+  return new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth() + 1, currentDate.getUTCDate()));
+}
+
+function getTimePlaceholder(format) {
+  const sample = new Date(Date.UTC(1, 1, 3, 4, 5)).toLocaleString(navigator.language, {
+    timeStyle: 'short',
+    hourCycle: format !== DateTimePickerTimeFormat.Auto ? format : undefined,
+    timeZone: 'UTC'
+  });
+  return sample.replace(/04/, 'HH').replace(/4/, 'H').replace(/05/, 'MM').replace(/5/, 'M').replace(/AM|PM/, 'A');
+}
+
+const DateTimePickerDateControl = [
+// Layout
+'layout-inline-row',
+// Interactivity
+'interactivity-click',
+// Theme (focus)
+'focus-visible:theme-border-underline', 'focus-visible:theme-border-2-inherit', 'dark:focus-visible:theme-border-2-inherit-dark',
+// Theme (selected)
+'selected:theme-border-underline', 'selected:theme-border-2-inherit', 'dark:selected:theme-border-2-inherit-dark'];
+const DateTimePickerDateControlPlaceholder = [
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script$8 = defineComponent({
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      default: undefined
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-date-control-v3', ...DateTimePickerDateControl]);
+    const placeholderStyles = computed(() => [...DateTimePickerDateControlPlaceholder]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const placeholder = getDatePlaceholder();
+    return {
+      root,
+      rootStyles,
+      placeholderStyles,
+      proxyModelValue,
+      placeholder,
+      formatDate
+    };
+  }
+});
+
+/* script */
+const __vue_script__$8 = script$8;
+
+/* template */
+var __vue_render__$8 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "contenteditable": !_vm.disabled,
+      "selected": _vm.selected,
+      "required": _vm.required,
+      "readonly": _vm.readonly,
+      "disabled": _vm.disabled
+    },
+    on: {
+      "keydown": function ($event) {
+        $event.preventDefault();
+      }
+    }
+  }, [_vm.proxyModelValue ? [_vm._v("\n    " + _vm._s(_vm.formatDate(_vm.proxyModelValue)) + "\n  ")] : [_c('span', {
+    class: _vm.placeholderStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.placeholder) + "\n    ")])]], 2);
+};
+var __vue_staticRenderFns__$8 = [];
+
+/* style */
+const __vue_inject_styles__$8 = undefined;
+/* scoped */
+const __vue_scope_id__$8 = undefined;
+/* module identifier */
+const __vue_module_identifier__$8 = undefined;
+/* functional template */
+const __vue_is_functional_template__$8 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$8 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$8,
+  staticRenderFns: __vue_staticRenderFns__$8
+}, __vue_inject_styles__$8, __vue_script__$8, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined);
+var OrDateTimePickerDateControl = __vue_component__$8;
+
+const DateTimePickerDateSelect = [
+// Layout
+'layout-column',
+// Spacing
+'px-md', 'py-md', 'gap-sm'];
+const DateTimePickerDateSelectButtonGroup = [
+// Layout
+'grid content-start', 'grid-cols-7',
+// Box
+'h-[262px]',
+// Spacing
+'mx-[-2px]', 'my-[-2px]'];
+const DateTimePickerDateSelectButtonGroupWeekdayItem = [
+// 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'];
+const DateTimePickerDateSelectButtonGroupDateItem = [
+// Box
+'!min-w-fit',
+// Spacing
+'mx-[2px]', 'my-[2px]', '!px-sm', '!py-sm',
+// Typography
+'typography-caption-regular'];
+const DateTimePickerDateSelectButtonGroupCurrentDateItem = [
+// Theme
+'theme-foreground-primary', 'dark:theme-foreground-primary-dark', 'theme-outline-1-primary', 'dark:theme-outline-1-primary-dark'];
+const DateTimePickerDateSelectButtonGroupInRangeDateItem = [
+// Spacing
+'!mx-none', '!px-[10px]',
+// Shape
+'!rounded-none',
+// Theme
+'theme-background-primary-translucent-2', 'dark:theme-background-primary-translucent-2-dark'];
+
+var script$7 = defineComponent({
+  components: {
+    OrButton: __vue_component__$9
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      default: undefined
+    },
+    initialValue: {
+      type: Date,
+      required: true
+    },
+    dateFilter: {
+      type: Function,
+      default: undefined
+    },
+    rangeStart: {
+      type: Date,
+      default: undefined
+    },
+    rangeEnd: {
+      type: Date,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-date-select-v3', ...DateTimePickerDateSelect]);
+    const buttonGroupStyles = computed(() => [...DateTimePickerDateSelectButtonGroup]);
+    const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupWeekdayItem]);
+    const buttonGroupDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupDateItem]);
+    const buttonGroupCurrentDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupCurrentDateItem]);
+    const buttonGroupInRangeDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupInRangeDateItem]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const dayOptions = computed(() => {
+      const monthStartDate = new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), 1, props.initialValue.getUTCHours(), props.initialValue.getUTCMinutes()));
+      const monthEndDate = new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth() + 1, 0, props.initialValue.getUTCHours(), props.initialValue.getUTCMinutes()));
+      const calendarStartDate = new Date(Date.UTC(monthStartDate.getUTCFullYear(), monthStartDate.getUTCMonth(), 1 - monthStartDate.getUTCDay(), monthStartDate.getUTCHours(), monthStartDate.getUTCMinutes()));
+      const calendarEndDate = new Date(Date.UTC(monthEndDate.getUTCFullYear(), monthEndDate.getUTCMonth() + 1, 7 - monthEndDate.getUTCDay(), monthEndDate.getUTCHours(), monthEndDate.getUTCMinutes()));
+      return (() => {
+        let options = [],
+          value = calendarStartDate;
+        while (Number(value) !== Number(calendarEndDate)) {
+          options = [...options, value];
+          value = new Date(Date.UTC(value.getUTCFullYear(), value.getUTCMonth(), value.getUTCDate() + 1, value.getUTCHours(), value.getUTCMinutes()));
+        }
+        return options;
+      })();
+    });
+    const currentDate = computed(() => {
+      const value = new Date();
+      value.setUTCHours(props.initialValue.getUTCHours());
+      value.setUTCMinutes(props.initialValue.getUTCMinutes());
+      value.setUTCSeconds(props.initialValue.getUTCSeconds());
+      value.setUTCMilliseconds(props.initialValue.getUTCMilliseconds());
+      return value;
+    });
+    // Methods
+    function formatWeekday(value) {
+      return value.toLocaleString(navigator.language, {
+        weekday: 'short',
+        timeZone: 'UTC'
+      });
+    }
+    function formatDay(value) {
+      return value.toLocaleString(navigator.language, {
+        day: 'numeric',
+        timeZone: 'UTC'
+      });
+    }
+    return {
+      root,
+      rootStyles,
+      buttonGroupStyles,
+      buttonGroupWeekdayItemStyles,
+      buttonGroupDateItemStyles,
+      buttonGroupCurrentDateItemStyles,
+      buttonGroupInRangeDateItemStyles,
+      proxyModelValue,
+      dayOptions,
+      currentDate,
+      formatWeekday,
+      formatDay
+    };
+  }
+});
+
+/* script */
+const __vue_script__$7 = script$7;
+
+/* template */
+var __vue_render__$7 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_c('div', {
+    class: _vm.buttonGroupStyles
+  }, [_vm._l(7, function (weekday) {
+    return _c('div', {
+      key: weekday,
+      class: _vm.buttonGroupWeekdayItemStyles
+    }, [_vm._v("\n      " + _vm._s(_vm.formatWeekday(_vm.dayOptions[weekday - 1])) + "\n    ")]);
+  }), _vm._v(" "), _vm._l(_vm.dayOptions, function (value) {
+    var _obj;
+    return _c('OrButton', {
+      key: Number(value),
+      class: (_obj = {}, _obj[_vm.buttonGroupDateItemStyles.join(' ')] = true, _obj[_vm.buttonGroupCurrentDateItemStyles.join(' ')] = Number(value) !== Number(_vm.proxyModelValue) && Number(value) !== Number(_vm.rangeStart) && Number(value) !== Number(_vm.rangeEnd) && Number(value) === Number(_vm.currentDate), _obj[_vm.buttonGroupInRangeDateItemStyles.join(' ')] = _vm.rangeStart && Number(value) > Number(_vm.rangeStart) && _vm.rangeEnd && Number(value) < Number(_vm.rangeEnd), _obj),
+      attrs: {
+        "variant": Number(value) === Number(_vm.proxyModelValue) || _vm.rangeStart && Number(value) === Number(_vm.rangeStart) || _vm.rangeEnd && Number(value) === Number(_vm.rangeEnd) ? 'contained' : 'text',
+        "color": Number(value) === Number(_vm.proxyModelValue) || _vm.rangeStart && Number(value) === Number(_vm.rangeStart) || _vm.rangeEnd && Number(value) === Number(_vm.rangeEnd) ? 'primary' : 'inherit',
+        "disabled": _vm.dateFilter && !_vm.dateFilter(value)
+      },
+      on: {
+        "click": function ($event) {
+          $event.stopPropagation();
+          _vm.proxyModelValue = value;
+        }
+      }
+    }, [_vm._v("\n      " + _vm._s(_vm.formatDay(value)) + "\n    ")]);
+  })], 2)]);
+};
+var __vue_staticRenderFns__$7 = [];
+
+/* style */
+const __vue_inject_styles__$7 = undefined;
+/* scoped */
+const __vue_scope_id__$7 = undefined;
+/* module identifier */
+const __vue_module_identifier__$7 = undefined;
+/* functional template */
+const __vue_is_functional_template__$7 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$7 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$7,
+  staticRenderFns: __vue_staticRenderFns__$7
+}, __vue_inject_styles__$7, __vue_script__$7, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined);
+var OrDateTimePickerDateSelect = __vue_component__$7;
+
+const DateTimePickerMobileControl = [
+// 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'];
+const DateTimePickerMobileControlContent = [
+// Typography
+'typography-headline-1'];
+
+var script$6 = defineComponent({
+  components: {
+    OrLabel: __vue_component__$a
+  },
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-mobile-control-v3', ...DateTimePickerMobileControl]);
+    const contentStyles = computed(() => [...DateTimePickerMobileControlContent]);
+    return {
+      root,
+      rootStyles,
+      contentStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__$6 = script$6;
+
+/* template */
+var __vue_render__$6 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "selected": _vm.selected ? '' : null
+    }
+  }, [_c('OrLabel', [_vm._v(_vm._s(_vm.label))]), _vm._v(" "), _c('div', {
+    class: _vm.contentStyles
+  }, [_vm._t("default")], 2)], 1);
+};
+var __vue_staticRenderFns__$6 = [];
+
+/* style */
+const __vue_inject_styles__$6 = undefined;
+/* scoped */
+const __vue_scope_id__$6 = undefined;
+/* module identifier */
+const __vue_module_identifier__$6 = undefined;
+/* functional template */
+const __vue_is_functional_template__$6 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$6 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$6,
+  staticRenderFns: __vue_staticRenderFns__$6
+}, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined);
+var OrDateTimePickerMobileControl = __vue_component__$6;
+
+const DateTimePickerMonthSelect = [
+// Layout
+'layout-row justify-between',
+// Spacing
+'px-md', 'py-md', 'gap-md'];
+
+var script$5 = defineComponent({
+  components: {
+    OrButton: __vue_component__$9,
+    OrIcon: __vue_component__$b,
+    OrIconButton: __vue_component__$c,
+    OrMenu: __vue_component__$d,
+    OrMenuItem: __vue_component__$e
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      required: true
+    },
+    yearFilter: {
+      type: Function,
+      default: undefined
+    },
+    monthFilter: {
+      type: Function,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const yearButton = ref();
+    const monthButton = ref();
+    const yearButtonRoot = computed(() => {
+      var _a;
+      return (_a = yearButton.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const monthButtonRoot = computed(() => {
+      var _a;
+      return (_a = monthButton.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const yearMenu = ref();
+    const monthMenu = ref();
+    const yearMenuState = computed(() => {
+      var _a;
+      return (_a = yearMenu.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
+    const monthMenuState = computed(() => {
+      var _a;
+      return (_a = monthMenu.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const yearOptions = computed(() => {
+      return Array.from({
+        length: 11
+      }).map((_value, index, _ref) => {
+        let {
+          length
+        } = _ref;
+        const value = proxyModelValue.value.getUTCFullYear() - Math.floor(length / 2) + index;
+        return new Date(Date.UTC(value, proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+      });
+    });
+    const monthOptions = computed(() => {
+      return Array.from({
+        length: 12
+      }, (_value, index) => {
+        const value = index;
+        return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), value, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+      });
+    });
+    // Methods
+    function goToNextMonth() {
+      proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() + 1, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+    }
+    function goToPreviousMonth() {
+      proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() - 1, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+    }
+    function formatYear(value) {
+      return value.toLocaleString(navigator.language, {
+        year: 'numeric',
+        timeZone: 'UTC'
+      });
+    }
+    function formatMonth(value) {
+      return value.toLocaleString(navigator.language, {
+        month: 'long',
+        timeZone: 'UTC'
+      });
+    }
+    return {
+      root,
+      yearButton,
+      monthButton,
+      yearButtonRoot,
+      monthButtonRoot,
+      yearMenu,
+      monthMenu,
+      yearMenuState,
+      monthMenuState,
+      rootStyles,
+      proxyModelValue,
+      yearOptions,
+      monthOptions,
+      goToNextMonth,
+      goToPreviousMonth,
+      formatYear,
+      formatMonth
+    };
+  }
+});
+
+/* script */
+const __vue_script__$5 = script$5;
+
+/* template */
+var __vue_render__$5 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_c('OrIconButton', {
+    attrs: {
+      "icon": 'chevron_left'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.goToPreviousMonth();
+      }
+    }
+  }), _vm._v(" "), _c('div', {
+    class: ['layout-row-reverse', 'gap-md']
+  }, [_c('OrButton', {
+    ref: "yearButton",
+    attrs: {
+      "variant": 'link',
+      "color": 'inherit'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        _vm.monthMenu.close();
+        _vm.yearMenu.open();
+      }
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.formatYear(_vm.proxyModelValue)) + " "), _c('OrIcon', {
+    attrs: {
+      "icon": _vm.yearMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
+    }
+  })], 1), _vm._v(" "), _c('OrButton', {
+    ref: "monthButton",
+    attrs: {
+      "variant": 'link',
+      "color": 'inherit'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        _vm.yearMenu.close();
+        _vm.monthMenu.open();
+      }
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.formatMonth(_vm.proxyModelValue)) + " "), _c('OrIcon', {
+    attrs: {
+      "icon": _vm.monthMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
+    }
+  })], 1), _vm._v(" "), _c('OrMenu', {
+    ref: "yearMenu",
+    attrs: {
+      "trigger": _vm.yearButtonRoot
+    }
+  }, _vm._l(_vm.yearOptions, function (value) {
+    return _c('OrMenuItem', {
+      key: Number(value),
+      attrs: {
+        "selected": Number(value) === Number(_vm.proxyModelValue),
+        "disabled": _vm.yearFilter && !_vm.yearFilter(value)
+      },
+      on: {
+        "click": function ($event) {
+          $event.stopPropagation();
+          _vm.proxyModelValue = value;
+          _vm.yearMenu.close();
+        }
+      }
+    }, [_vm._v("\n        " + _vm._s(_vm.formatYear(value)) + "\n      ")]);
+  }), 1), _vm._v(" "), _c('OrMenu', {
+    ref: "monthMenu",
+    attrs: {
+      "trigger": _vm.monthButtonRoot
+    }
+  }, _vm._l(_vm.monthOptions, function (value) {
+    return _c('OrMenuItem', {
+      key: Number(value),
+      attrs: {
+        "selected": Number(value) === Number(_vm.proxyModelValue),
+        "disabled": _vm.monthFilter && !_vm.monthFilter(value)
+      },
+      on: {
+        "click": function ($event) {
+          $event.stopPropagation();
+          _vm.proxyModelValue = value;
+          _vm.monthMenu.close();
+        }
+      }
+    }, [_vm._v("\n        " + _vm._s(_vm.formatMonth(value)) + "\n      ")]);
+  }), 1)], 1), _vm._v(" "), _c('OrIconButton', {
+    attrs: {
+      "icon": 'chevron_right'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.goToNextMonth();
+      }
+    }
+  })], 1);
+};
+var __vue_staticRenderFns__$5 = [];
+
+/* style */
+const __vue_inject_styles__$5 = undefined;
+/* scoped */
+const __vue_scope_id__$5 = undefined;
+/* module identifier */
+const __vue_module_identifier__$5 = undefined;
+/* functional template */
+const __vue_is_functional_template__$5 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$5 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$5,
+  staticRenderFns: __vue_staticRenderFns__$5
+}, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined);
+var OrDateTimePickerMonthSelect = __vue_component__$5;
+
+const DateTimePickerPopoverFooter = [
+// 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-overline', 'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark'];
+
+var script$4 = defineComponent({
+  components: {
+    OrButton: __vue_component__$9
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['apply', 'reset'],
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-popover-footer-v3', ...DateTimePickerPopoverFooter]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__$4 = script$4;
+
+/* template */
+var __vue_render__$4 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('footer', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_c('OrButton', {
+    attrs: {
+      "variant": 'outlined',
+      "disabled": _vm.disabled
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.$emit('apply');
+      }
+    }
+  }, [_vm._v("\n    Done\n  ")]), _vm._v(" "), _c('OrButton', {
+    attrs: {
+      "variant": 'text'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.$emit('reset');
+      }
+    }
+  }, [_vm._v("\n    Cancel\n  ")])], 1);
+};
+var __vue_staticRenderFns__$4 = [];
+
+/* style */
+const __vue_inject_styles__$4 = undefined;
+/* scoped */
+const __vue_scope_id__$4 = undefined;
+/* module identifier */
+const __vue_module_identifier__$4 = undefined;
+/* functional template */
+const __vue_is_functional_template__$4 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$4 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$4,
+  staticRenderFns: __vue_staticRenderFns__$4
+}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined);
+var OrDateTimePickerPopoverFooter = __vue_component__$4;
+
+const DateTimePickerPopoverHeader = [
+// Layout
+'layout-row md:hidden',
+// Spacing
+'px-md', 'py-md', 'gap-xl'];
+
+var script$3 = defineComponent({
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-popover-header-v3', ...DateTimePickerPopoverHeader]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__$3 = script$3;
+
+/* template */
+var __vue_render__$3 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('header', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$3 = [];
+
+/* style */
+const __vue_inject_styles__$3 = undefined;
+/* scoped */
+const __vue_scope_id__$3 = undefined;
+/* module identifier */
+const __vue_module_identifier__$3 = undefined;
+/* functional template */
+const __vue_is_functional_template__$3 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$3 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$3,
+  staticRenderFns: __vue_staticRenderFns__$3
+}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined);
+var OrDateTimePickerPopoverHeader = __vue_component__$3;
+
+const DateTimePickerTimeControl = [
+// Layout
+'layout-inline-row',
+// Interactivity
+'interactivity-click',
+// Theme (focus)
+'focus-visible:theme-border-underline', 'focus-visible:theme-border-2-inherit', 'dark:focus-visible:theme-border-2-inherit-dark',
+// Theme (selected)
+'selected:theme-border-underline', 'selected:theme-border-2-inherit', 'dark:selected:theme-border-2-inherit-dark'];
+const DateTimePickerTimeControlPlaceholder = [
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script$2 = defineComponent({
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-time-control-v3', ...DateTimePickerTimeControl]);
+    const placeholderStyles = computed(() => [...DateTimePickerTimeControlPlaceholder]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const placeholder = getTimePlaceholder(props.format);
+    return {
+      root,
+      rootStyles,
+      placeholderStyles,
+      proxyModelValue,
+      placeholder,
+      formatTime
+    };
+  }
+});
+
+/* script */
+const __vue_script__$2 = script$2;
+
+/* template */
+var __vue_render__$2 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "contenteditable": !_vm.disabled,
+      "selected": _vm.selected,
+      "required": _vm.required,
+      "readonly": _vm.readonly,
+      "disabled": _vm.disabled
+    }
+  }, [_vm.proxyModelValue ? [_vm._v("\n    " + _vm._s(_vm.formatTime(_vm.proxyModelValue, _vm.format)) + "\n  ")] : [_c('span', {
+    class: _vm.placeholderStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.placeholder) + "\n    ")])]], 2);
+};
+var __vue_staticRenderFns__$2 = [];
+
+/* style */
+const __vue_inject_styles__$2 = undefined;
+/* scoped */
+const __vue_scope_id__$2 = undefined;
+/* module identifier */
+const __vue_module_identifier__$2 = undefined;
+/* functional template */
+const __vue_is_functional_template__$2 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$2 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$2,
+  staticRenderFns: __vue_staticRenderFns__$2
+}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined);
+var OrDateTimePickerTimeControl = __vue_component__$2;
+
+const DateTimePickerTimeSelect = [
+// 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'];
+const DateTimePickerTimeSelectButtonGroup = [
+// Layout
+'layout-column',
+// Box
+'h-[294px] md:h-[238px]',
+// Overflow
+'overflow-x-hidden', 'overflow-y-auto'];
+const DateTimePickerTimeSelectButtonGroupItem = [
+// Box
+'!min-w-fit',
+// Typography
+'typography-caption-regular'];
+
+var script$1 = defineComponent({
+  components: {
+    OrButton: __vue_component__$9
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      default: undefined
+    },
+    initialValue: {
+      type: Date,
+      required: true
+    },
+    format: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
+    hoursFilter: {
+      type: Function,
+      default: undefined
+    },
+    minutesFilter: {
+      type: Function,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root'],
+  setup(props, context) {
+    var _a;
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-time-select-v3', ...DateTimePickerTimeSelect]);
+    const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
+    const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyTimeFormat = computed(() => {
+      if (props.format === DateTimePickerTimeFormat.Auto) {
+        const timeSample = new Date(1970, 0);
+        if (timeSample.toLocaleTimeString(navigator.language).includes('12')) {
+          return DateTimePickerTimeFormat.H12;
+        }
+        return DateTimePickerTimeFormat.H23;
+      }
+      return props.format;
+    });
+    const hoursRange = ref(((_a = proxyModelValue.value) !== null && _a !== void 0 ? _a : props.initialValue).getUTCHours() < 12 ? 'am' : 'pm');
+    watch(hoursRange, value => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+      switch (value) {
+        case 'am':
+          proxyModelValue.value = new Date(Date.UTC(((_a = proxyModelValue.value) !== null && _a !== void 0 ? _a : props.initialValue).getUTCFullYear(), ((_b = proxyModelValue.value) !== null && _b !== void 0 ? _b : props.initialValue).getUTCMonth(), ((_c = proxyModelValue.value) !== null && _c !== void 0 ? _c : props.initialValue).getUTCDate(), ((_d = proxyModelValue.value) !== null && _d !== void 0 ? _d : props.initialValue).getUTCHours() - 12, ((_e = proxyModelValue.value) !== null && _e !== void 0 ? _e : props.initialValue).getUTCMinutes()));
+          break;
+        case 'pm':
+          proxyModelValue.value = new Date(Date.UTC(((_f = proxyModelValue.value) !== null && _f !== void 0 ? _f : props.initialValue).getUTCFullYear(), ((_g = proxyModelValue.value) !== null && _g !== void 0 ? _g : props.initialValue).getUTCMonth(), ((_h = proxyModelValue.value) !== null && _h !== void 0 ? _h : props.initialValue).getUTCDate(), ((_j = proxyModelValue.value) !== null && _j !== void 0 ? _j : props.initialValue).getUTCHours() + 12, ((_k = proxyModelValue.value) !== null && _k !== void 0 ? _k : props.initialValue).getUTCMinutes()));
+          break;
+      }
+    });
+    const hoursOptions = computed(() => {
+      return Array.from({
+        length: 24
+      }, (_value, index) => {
+        var _a, _b, _c, _d;
+        const value = index;
+        return new Date(Date.UTC(((_a = proxyModelValue.value) !== null && _a !== void 0 ? _a : props.initialValue).getUTCFullYear(), ((_b = proxyModelValue.value) !== null && _b !== void 0 ? _b : props.initialValue).getUTCMonth(), ((_c = proxyModelValue.value) !== null && _c !== void 0 ? _c : props.initialValue).getUTCDate(), value, ((_d = proxyModelValue.value) !== null && _d !== void 0 ? _d : props.initialValue).getUTCMinutes()));
+      }).filter(value => {
+        if (proxyTimeFormat.value === DateTimePickerTimeFormat.H23) {
+          return true;
+        }
+        switch (hoursRange.value) {
+          case 'am':
+            return value.getUTCHours() < 12;
+          case 'pm':
+            return value.getUTCHours() >= 12;
+        }
+      });
+    });
+    const minutesOptions = computed(() => {
+      return Array.from({
+        length: 60
+      }, (_value, index) => {
+        var _a, _b, _c, _d;
+        const value = index;
+        return new Date(Date.UTC(((_a = proxyModelValue.value) !== null && _a !== void 0 ? _a : props.initialValue).getUTCFullYear(), ((_b = proxyModelValue.value) !== null && _b !== void 0 ? _b : props.initialValue).getUTCMonth(), ((_c = proxyModelValue.value) !== null && _c !== void 0 ? _c : props.initialValue).getUTCDate(), ((_d = proxyModelValue.value) !== null && _d !== void 0 ? _d : props.initialValue).getUTCHours(), value));
+      });
+    });
+    // Methods
+    function formatHours(value) {
+      return value.toLocaleString(navigator.language, {
+        hour: 'numeric',
+        hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
+        timeZone: 'UTC'
+      }).replace(/\s(am|pm)/i, '');
+    }
+    function formatMinutes(value) {
+      return String(value.getUTCMinutes()).padStart(2, '0');
+    }
+    return {
+      root,
+      rootStyles,
+      buttonGroupStyles,
+      buttonGroupItemStyles,
+      proxyModelValue,
+      proxyTimeFormat,
+      hoursRange,
+      hoursOptions,
+      minutesOptions,
+      formatHours,
+      formatMinutes
+    };
+  }
+});
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_c('div', {
+    class: _vm.buttonGroupStyles
+  }, _vm._l(_vm.hoursOptions, function (value) {
+    return _c('OrButton', {
+      key: Number(value),
+      class: _vm.buttonGroupItemStyles,
+      attrs: {
+        "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
+        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
+        "disabled": _vm.hoursFilter && !_vm.hoursFilter(value)
+      },
+      on: {
+        "click": function ($event) {
+          $event.stopPropagation();
+          _vm.proxyModelValue = value;
+        }
+      }
+    }, [_vm._v("\n      " + _vm._s(_vm.formatHours(value)) + "\n    ")]);
+  }), 1), _vm._v("\n\n  :\n\n  "), _c('div', {
+    class: _vm.buttonGroupStyles
+  }, _vm._l(_vm.minutesOptions, function (value) {
+    return _c('OrButton', {
+      key: Number(value),
+      class: _vm.buttonGroupItemStyles,
+      attrs: {
+        "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
+        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
+        "disabled": _vm.minutesFilter && !_vm.minutesFilter(value)
+      },
+      on: {
+        "click": function ($event) {
+          $event.stopPropagation();
+          _vm.proxyModelValue = value;
+        }
+      }
+    }, [_vm._v("\n      " + _vm._s(_vm.formatMinutes(value)) + "\n    ")]);
+  }), 1), _vm._v(" "), _vm.proxyTimeFormat === 'h12' ? [_c('div', {
+    class: _vm.buttonGroupStyles
+  }, [_c('OrButton', {
+    class: _vm.buttonGroupItemStyles,
+    attrs: {
+      "variant": _vm.hoursRange === 'am' ? 'contained' : 'text',
+      "color": _vm.hoursRange === 'am' ? 'primary' : 'inherit'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        _vm.hoursRange = 'am';
+      }
+    }
+  }, [_vm._v("\n        AM\n      ")]), _vm._v(" "), _c('OrButton', {
+    class: _vm.buttonGroupItemStyles,
+    attrs: {
+      "variant": _vm.hoursRange === 'pm' ? 'contained' : 'text',
+      "color": _vm.hoursRange === 'pm' ? 'primary' : 'inherit'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        _vm.hoursRange = 'pm';
+      }
+    }
+  }, [_vm._v("\n        PM\n      ")])], 1)] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__$1 = [];
+
+/* style */
+const __vue_inject_styles__$1 = undefined;
+/* scoped */
+const __vue_scope_id__$1 = undefined;
+/* module identifier */
+const __vue_module_identifier__$1 = undefined;
+/* functional template */
+const __vue_is_functional_template__$1 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1,
+  staticRenderFns: __vue_staticRenderFns__$1
+}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
+var OrDateTimePickerTimeSelect = __vue_component__$1;
+
+const DateTimePicker = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs'];
+const DateTimePickerDatePopover = [
+// Box
+'w-[298px]'];
+const DateTimePickerTimePopover = [];
+
+var script = defineComponent({
+  components: {
+    OrDateTimePickerDateControl,
+    OrDateTimePickerDateSelect,
+    OrDateTimePickerMobileControl,
+    OrDateTimePickerMonthSelect,
+    OrDateTimePickerPopoverFooter,
+    OrDateTimePickerPopoverHeader,
+    OrDateTimePickerTimeControl,
+    OrDateTimePickerTimeSelect,
+    OrError: __vue_component__$f,
+    OrHint: __vue_component__$g,
+    OrIcon: __vue_component__$b,
+    OrIconButton: __vue_component__$c,
+    OrInputBox: __vue_component__$h,
+    OrLabel: __vue_component__$a,
+    OrPopover: __vue_component__$i
+  },
+  directives: {
+    DropdownClose,
+    DropdownOpen
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      default: undefined
+    },
+    timeFormat: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
+    yearFilter: {
+      type: Function,
+      default: undefined
+    },
+    monthFilter: {
+      type: Function,
+      default: undefined
+    },
+    dateFilter: {
+      type: Function,
+      default: undefined
+    },
+    hoursFilter: {
+      type: Function,
+      default: undefined
+    },
+    minutesFilter: {
+      type: Function,
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: InputBoxSize.M
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
+  expose: ['root', 'focus', 'blur'],
+  setup(props, context) {
+    var _a;
+    // Refs
+    const root = ref();
+    const inputBox = ref();
+    const inputBoxRoot = computed(() => {
+      var _a;
+      return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const datePopover = ref();
+    const datePopoverState = computed(() => {
+      var _a;
+      return (_a = datePopover.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
+    const timePopover = ref();
+    const timePopoverState = computed(() => {
+      var _a;
+      return (_a = timePopover.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
+    // Styles
+    const rootStyles = computed(() => ['or-date-time-picker-v3', ...DateTimePicker]);
+    const datePopoverStyles = computed(() => ['or-date-time-picker-date-popover-v3', ...DateTimePickerDatePopover]);
+    const timePopoverStyles = computed(() => ['or-date-time-picker-time-popover-v3', ...DateTimePickerTimePopover]);
+    // State
+    const initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : getCurrentDate());
+    watch(() => props.modelValue, value => {
+      initialValue.value = value !== null && value !== void 0 ? value : getCurrentDate();
+    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value;
+    });
+    const isInvalidDraftModelValue = computed(() => {
+      if (draftModelValue.value) {
+        if (props.yearFilter && !props.yearFilter(draftModelValue.value)) {
+          return true;
+        }
+        if (props.monthFilter && !props.monthFilter(draftModelValue.value)) {
+          return true;
+        }
+        if (props.dateFilter && !props.dateFilter(draftModelValue.value)) {
+          return true;
+        }
+        if (props.hoursFilter && !props.hoursFilter(draftModelValue.value)) {
+          return true;
+        }
+        if (props.minutesFilter && !props.minutesFilter(draftModelValue.value)) {
+          return true;
+        }
+        return false;
+      }
+      return true;
+    });
+    // Methods
+    function apply() {
+      proxyModelValue.value = draftModelValue.value;
+    }
+    function reset() {
+      draftModelValue.value = proxyModelValue.value;
+    }
+    function toggleDatePopover() {
+      if (!props.readonly && !props.disabled) {
+        const popoverInstance = datePopover.value;
+        if (popoverInstance) {
+          if (datePopoverState.value === 'open') {
+            popoverInstance.close();
+          } else {
+            popoverInstance.open();
+          }
+        }
+        closeTimePopover();
+      }
+    }
+    function toggleTimePopover() {
+      if (!props.readonly && !props.disabled) {
+        const popoverInstance = timePopover.value;
+        if (popoverInstance) {
+          if (timePopoverState.value === 'open') {
+            popoverInstance.close();
+          } else {
+            popoverInstance.open();
+          }
+        }
+        closeDatePopover();
+      }
+    }
+    function closeDatePopover() {
+      const popoverInstance = datePopover.value;
+      if (popoverInstance) {
+        popoverInstance.close();
+      }
+    }
+    function closeTimePopover() {
+      const popoverInstance = timePopover.value;
+      if (popoverInstance) {
+        popoverInstance.close();
+      }
+    }
+    function formatDateAlt(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
+        dateStyle: 'medium',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatTimeAlt(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
+        timeStyle: 'short',
+        hourCycle: props.timeFormat !== DateTimePickerTimeFormat.Auto ? props.timeFormat : undefined,
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    return {
+      root,
+      inputBox,
+      inputBoxRoot,
+      datePopover,
+      datePopoverState,
+      timePopover,
+      timePopoverState,
+      rootStyles,
+      datePopoverStyles,
+      timePopoverStyles,
+      initialValue,
+      proxyModelValue,
+      draftModelValue,
+      isInvalidDraftModelValue,
+      apply,
+      reset,
+      toggleDatePopover,
+      toggleTimePopover,
+      closeDatePopover,
+      closeTimePopover,
+      formatDateAlt,
+      formatTimeAlt
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_vm.label ? [_c('OrLabel', {
+    attrs: {
+      "variant": 'input',
+      "required": _vm.required,
+      "disabled": _vm.disabled
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm._t("addon")];
+      },
+      proxy: true
+    }], null, true)
+  }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
+    directives: [{
+      name: "dropdown-open",
+      rawName: "v-dropdown-open",
+      value: _vm.toggleDatePopover,
+      expression: "toggleDatePopover"
+    }, {
+      name: "dropdown-close",
+      rawName: "v-dropdown-close",
+      value: _vm.closeDatePopover,
+      expression: "closeDatePopover"
+    }],
+    ref: "inputBox",
+    attrs: {
+      "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
+      "size": _vm.size,
+      "invalid": !!_vm.error,
+      "readonly": _vm.readonly,
+      "disabled": _vm.disabled
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm.modelValue ? [_c('OrIconButton', {
+          attrs: {
+            "icon": 'close',
+            "color": 'inherit',
+            "disabled": _vm.readonly || _vm.disabled
+          },
+          on: {
+            "click": function ($event) {
+              $event.stopPropagation();
+              return _vm.$emit('update:modelValue', undefined);
+            }
+          }
+        })] : [_c('OrIcon', {
+          attrs: {
+            "icon": 'calendar_month',
+            "variant": 'outlined'
+          }
+        })]];
+      },
+      proxy: true
+    }])
+  }, [_c('OrDateTimePickerDateControl', {
+    directives: [{
+      name: "dropdown-open",
+      rawName: "v-dropdown-open",
+      value: _vm.toggleDatePopover,
+      expression: "toggleDatePopover"
+    }, {
+      name: "dropdown-close",
+      rawName: "v-dropdown-close",
+      value: _vm.closeDatePopover,
+      expression: "closeDatePopover"
+    }],
+    attrs: {
+      "selected": _vm.datePopover && _vm.datePopover.state === 'open',
+      "required": _vm.required,
+      "readonly": _vm.readonly,
+      "disabled": _vm.disabled
+    },
+    model: {
+      value: _vm.draftModelValue,
+      callback: function ($$v) {
+        _vm.draftModelValue = $$v;
+      },
+      expression: "draftModelValue"
+    }
+  }), _vm._v(" "), _c('OrDateTimePickerTimeControl', {
+    directives: [{
+      name: "dropdown-open",
+      rawName: "v-dropdown-open",
+      value: _vm.toggleTimePopover,
+      expression: "toggleTimePopover"
+    }, {
+      name: "dropdown-close",
+      rawName: "v-dropdown-close",
+      value: _vm.closeTimePopover,
+      expression: "closeTimePopover"
+    }],
+    attrs: {
+      "format": _vm.timeFormat,
+      "selected": _vm.timePopover && _vm.timePopover.state === 'open',
+      "required": _vm.required,
+      "readonly": _vm.readonly,
+      "disabled": _vm.disabled
+    },
+    model: {
+      value: _vm.draftModelValue,
+      callback: function ($$v) {
+        _vm.draftModelValue = $$v;
+      },
+      expression: "draftModelValue"
+    }
+  }), _vm._v(" "), _c('OrPopover', {
+    ref: "datePopover",
+    class: _vm.datePopoverStyles,
+    attrs: {
+      "custom-styles": _vm.datePopoverStyles,
+      "variant": 'auto',
+      "bottom-sheet-props": {
+        variant: 'basic'
+      },
+      "trigger": _vm.inputBoxRoot,
+      "placement": 'bottom-start'
+    },
+    on: {
+      "close": function ($event) {
+        return _vm.reset();
+      }
+    }
+  }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
+    attrs: {
+      "label": 'Date'
+    }
+  }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
+    attrs: {
+      "label": 'Time'
+    }
+  }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
+    attrs: {
+      "year-filter": _vm.yearFilter,
+      "month-filter": _vm.monthFilter
+    },
+    model: {
+      value: _vm.initialValue,
+      callback: function ($$v) {
+        _vm.initialValue = $$v;
+      },
+      expression: "initialValue"
+    }
+  }), _vm._v(" "), _c('OrDateTimePickerDateSelect', {
+    attrs: {
+      "initial-value": _vm.initialValue,
+      "date-filter": _vm.dateFilter
+    },
+    model: {
+      value: _vm.draftModelValue,
+      callback: function ($$v) {
+        _vm.draftModelValue = $$v;
+      },
+      expression: "draftModelValue"
+    }
+  }), _vm._v(" "), _c('OrDateTimePickerPopoverFooter', {
+    attrs: {
+      "disabled": _vm.isInvalidDraftModelValue
+    },
+    on: {
+      "apply": function ($event) {
+        _vm.apply();
+        _vm.datePopover.close();
+      },
+      "reset": function ($event) {
+        _vm.reset();
+        _vm.datePopover.close();
+      }
+    }
+  })], 1), _vm._v(" "), _c('OrPopover', {
+    ref: "timePopover",
+    class: _vm.timePopoverStyles,
+    attrs: {
+      "custom-styles": _vm.timePopoverStyles,
+      "variant": 'auto',
+      "bottom-sheet-props": {
+        variant: 'basic'
+      },
+      "trigger": _vm.inputBoxRoot,
+      "placement": 'bottom-start'
+    },
+    on: {
+      "close": function ($event) {
+        return _vm.reset();
+      }
+    }
+  }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
+    attrs: {
+      "label": 'Date'
+    }
+  }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
+    attrs: {
+      "label": 'Time'
+    }
+  }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
+    attrs: {
+      "initial-value": _vm.initialValue,
+      "format": _vm.timeFormat,
+      "hours-filter": _vm.hoursFilter,
+      "minutes-filter": _vm.minutesFilter
+    },
+    model: {
+      value: _vm.draftModelValue,
+      callback: function ($$v) {
+        _vm.draftModelValue = $$v;
+      },
+      expression: "draftModelValue"
+    }
+  }), _vm._v(" "), _c('OrDateTimePickerPopoverFooter', {
+    attrs: {
+      "disabled": _vm.isInvalidDraftModelValue
+    },
+    on: {
+      "apply": function ($event) {
+        _vm.apply();
+        _vm.timePopover.close();
+      },
+      "reset": function ($event) {
+        _vm.reset();
+        _vm.timePopover.close();
+      }
+    }
+  })], 1), _vm._v(" "), _c('div', {
+    class: ['grow']
+  })], 1), _vm._v(" "), !_vm.error ? [_vm.hint ? [_c('OrHint', {
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")])] : _vm._e()] : _vm._e(), _vm._v(" "), typeof _vm.error === 'string' ? [_c('OrError', {
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { DateTimePickerTimeFormat as D, OrDateTimePickerDateControl as O, __vue_component__ as _, OrDateTimePickerDateSelect as a, OrDateTimePickerMobileControl as b, OrDateTimePickerMonthSelect as c, OrDateTimePickerPopoverFooter as d, OrDateTimePickerPopoverHeader as e, formatDate as f, getCurrentDate as g, getNextMonthDate as h, formatTime as i, OrDateTimePickerTimeControl as j, OrDateTimePickerTimeSelect as k, getDatePlaceholder as l, getTimePlaceholder as m, DateTimePicker as n, DateTimePickerDatePopover as o, DateTimePickerTimePopover as p };