@onereach/ui-components 4.9.1-beta.2907.0 → 4.10.0

package/dist/bundled/v3/{OrDatePicker.vue_vue_type_script_lang-8ec017e2.js → OrDatePicker.vue_vue_type_script_lang-0e648149.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from './components/OrDateTimePickerV3/hooks/useCurrentDate.js';
 import { s as script$1, a as script$2, b as script$4 } from './OrDateTimePickerMonthSelect-8857f024.js';
-import { s as script$3, a as script$5, b as script$6 } from './OrDateTimePickerPopoverHeader-bb988d7c.js';
+import { s as script$3, a as script$5, b as script$6 } from './OrDateTimePickerPopoverHeader-ec90761f.js';
 import { DatePicker, DatePickerPopover } from './components/OrDatePickerV3/styles.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrHintV3/OrHint.js';
@@ -128,6 +128,20 @@ var script = defineComponent({
     }, {
       immediate: true
     });
+    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;
+        }
+      }
+      return false;
+    });
     // Methods
     function apply() {
       var _a;
@@ -172,6 +186,7 @@ var script = defineComponent({
       initialModelValue,
       proxyModelValue,
       draftModelValue,
+      isInvalidDraftModelValue,
       apply,
       reset,
       togglePopover,

package/dist/bundled/v3/{OrDateTimePicker.vue_vue_type_script_lang-fec947db.js → OrDateTimePicker.vue_vue_type_script_lang-69d65518.js}

@@ -1,8 +1,9 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from './components/OrDateTimePickerV3/hooks/useCurrentDate.js';
 import { s as script$1, a as script$2, b as script$4 } from './OrDateTimePickerMonthSelect-8857f024.js';
-import { s as script$3, a as script$5, b as script$6 } from './OrDateTimePickerPopoverHeader-bb988d7c.js';
-import { s as script$7, a as script$8 } from './OrDateTimePickerTimeSelect-01a39297.js';
+import { s as script$3, a as script$5, b as script$6 } from './OrDateTimePickerPopoverHeader-ec90761f.js';
+import { s as script$7, a as script$8 } from './OrDateTimePickerTimeSelect-683ab20d.js';
+import { DateTimePickerTimeFormat } from './components/OrDateTimePickerV3/props.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './components/OrDateTimePickerV3/styles.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrHintV3/OrHint.js';
@@ -54,6 +55,10 @@ var script = defineComponent({
       type: Date,
       default: undefined
     },
+    timeFormat: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
     yearFilter: {
       type: Function,
       default: undefined
@@ -145,6 +150,26 @@ var script = defineComponent({
     }, {
       immediate: true
     });
+    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;
+    });
     // Methods
     function apply() {
       var _a;
@@ -202,6 +227,7 @@ var script = defineComponent({
       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 : '--';
     }
@@ -219,6 +245,7 @@ var script = defineComponent({
       initialModelValue,
       proxyModelValue,
       draftModelValue,
+      isInvalidDraftModelValue,
       apply,
       reset,
       toggleDatePopover,

package/dist/bundled/v3/{OrDateTimePickerPopoverHeader-bb988d7c.js → OrDateTimePickerPopoverHeader-ec90761f.js}

@@ -74,6 +74,12 @@ var script$1 = defineComponent({
   components: {
     OrButton: script$4
   },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
   emits: ['apply', 'reset'],
   expose: ['root'],
   setup() {
@@ -95,11 +101,12 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.rootStyles)
   }, [createVNode(_component_OrButton, {
     variant: 'outlined',
+    disabled: _ctx.disabled,
     onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.$emit('apply'), ["stop"]))
   }, {
     default: withCtx(() => [createTextVNode(" Done ")]),
     _: 1 /* STABLE */
-  }), createVNode(_component_OrButton, {
+  }, 8 /* PROPS */, ["disabled"]), createVNode(_component_OrButton, {
     variant: 'text',
     onClick: _cache[1] || (_cache[1] = withModifiers($event => _ctx.$emit('reset'), ["stop"]))
   }, {

package/dist/bundled/v3/{OrDateTimePickerTimeSelect-01a39297.js → OrDateTimePickerTimeSelect-683ab20d.js}

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useTimePlaceholder } from './components/OrDateTimePickerV3/hooks/useTimePlaceholder.js';
-import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withModifiers, withCtx } from 'vue';
+import { DateTimePickerTimeFormat } from './components/OrDateTimePickerV3/props.js';
+import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withModifiers, withCtx, createVNode, createCommentVNode } from 'vue';
 import './components/OrButtonV3/OrButton.js';
 import { s as script$2 } from './OrButton.vue_vue_type_script_lang-e8969bd3.js';
 
@@ -26,6 +27,10 @@ var script$1 = defineComponent({
       type: Date,
       default: undefined
     },
+    format: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
     required: {
       type: Boolean,
       default: false
@@ -53,11 +58,12 @@ var script$1 = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
-    const placeholder = useTimePlaceholder();
+    const placeholder = useTimePlaceholder(props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined);
     // Methods
     function formatModelValue(value) {
       return value.toLocaleString(navigator.language, {
         timeStyle: 'short',
+        hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC'
       });
     }
@@ -134,6 +140,10 @@ var script = defineComponent({
       type: Date,
       required: true
     },
+    format: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
     hoursFilter: {
       type: Function,
       default: undefined
@@ -162,12 +172,43 @@ var script = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
+    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(proxyModelValue.value.getUTCHours() < 12 ? 'am' : 'pm');
+    watch(hoursRange, value => {
+      switch (value) {
+        case 'am':
+          proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours() - 12, proxyModelValue.value.getUTCMinutes()));
+          break;
+        case 'pm':
+          proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours() + 12, proxyModelValue.value.getUTCMinutes()));
+          break;
+      }
+    });
     const hoursOptions = computed(() => {
       return Array.from({
         length: 24
       }, (_value, index) => {
         const value = index;
         return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), value, proxyModelValue.value.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(() => {
@@ -182,8 +223,9 @@ var script = defineComponent({
     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');
@@ -194,6 +236,8 @@ var script = defineComponent({
       buttonGroupStyles,
       buttonGroupItemStyles,
       proxyModelValue,
+      proxyTimeFormat,
+      hoursRange,
       hoursOptions,
       minutesOptions,
       formatHours,
@@ -237,7 +281,26 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
       _: 2 /* DYNAMIC */
     }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "color", "disabled", "onClick"]);
-  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)], 2 /* CLASS */);
+  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), _ctx.proxyTimeFormat === 'h12' ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(_ctx.buttonGroupStyles)
+  }, [createVNode(_component_OrButton, {
+    class: normalizeClass(_ctx.buttonGroupItemStyles),
+    variant: _ctx.hoursRange === 'am' ? 'contained' : 'text',
+    color: _ctx.hoursRange === 'am' ? 'primary' : 'inherit',
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.hoursRange = 'am', ["stop"]))
+  }, {
+    default: withCtx(() => [createTextVNode(" AM ")]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["class", "variant", "color"]), createVNode(_component_OrButton, {
+    class: normalizeClass(_ctx.buttonGroupItemStyles),
+    variant: _ctx.hoursRange === 'pm' ? 'contained' : 'text',
+    color: _ctx.hoursRange === 'pm' ? 'primary' : 'inherit',
+    onClick: _cache[1] || (_cache[1] = withModifiers($event => _ctx.hoursRange = 'pm', ["stop"]))
+  }, {
+    default: withCtx(() => [createTextVNode(" PM ")]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["class", "variant", "color"])], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
 script.render = render;

package/dist/bundled/v3/{OrTimePicker.vue_vue_type_script_lang-c737eaa8.js → OrTimePicker.vue_vue_type_script_lang-a300ab1b.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from './components/OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { s as script$1, a as script$2, b as script$3 } from './OrDateTimePickerPopoverHeader-bb988d7c.js';
-import { s as script$4, a as script$5 } from './OrDateTimePickerTimeSelect-01a39297.js';
+import { s as script$1, a as script$2, b as script$3 } from './OrDateTimePickerPopoverHeader-ec90761f.js';
+import { s as script$4, a as script$5 } from './OrDateTimePickerTimeSelect-683ab20d.js';
 import { TimePicker, TimePickerPopover } from './components/OrTimePickerV3/styles.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrHintV3/OrHint.js';
@@ -10,6 +10,7 @@ import './components/OrIconButtonV3/OrIconButton.js';
 import './components/OrInputBoxV3/OrInputBox.js';
 import './components/OrLabelV3/OrLabel.js';
 import './components/OrPopoverV3/OrPopover.js';
+import { DateTimePickerTimeFormat } from './components/OrDateTimePickerV3/props.js';
 import { s as script$6 } from './OrError.vue_vue_type_script_lang-df7b5e32.js';
 import { s as script$7 } from './OrHint.vue_vue_type_script_lang-0f5e8377.js';
 import { s as script$8 } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';
@@ -50,6 +51,10 @@ var script = defineComponent({
       type: Date,
       default: undefined
     },
+    format: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
     hoursFilter: {
       type: Function,
       default: undefined
@@ -123,6 +128,17 @@ var script = defineComponent({
     }, {
       immediate: true
     });
+    const isInvalidDraftModelValue = computed(() => {
+      if (draftModelValue.value) {
+        if (props.hoursFilter && !props.hoursFilter(draftModelValue.value)) {
+          return true;
+        }
+        if (props.minutesFilter && !props.minutesFilter(draftModelValue.value)) {
+          return true;
+        }
+      }
+      return false;
+    });
     // Methods
     function apply() {
       var _a;
@@ -153,6 +169,7 @@ var script = defineComponent({
       var _a;
       return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
         timeStyle: 'short',
+        hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
     }
@@ -167,6 +184,7 @@ var script = defineComponent({
       initialModelValue,
       proxyModelValue,
       draftModelValue,
+      isInvalidDraftModelValue,
       apply,
       reset,
       togglePopover,

package/dist/bundled/v3/components/OrDatePickerV3/OrDatePicker.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrDatePicker.vue_vue_type_script_lang-8ec017e2.js';
-export { s as default } from '../../OrDatePicker.vue_vue_type_script_lang-8ec017e2.js';
+import { s as script } from '../../OrDatePicker.vue_vue_type_script_lang-0e648149.js';
+export { s as default } from '../../OrDatePicker.vue_vue_type_script_lang-0e648149.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
@@ -50,7 +50,7 @@ import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../../OrMenuItem.vue_vue_type_script_lang-b338d68a.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-bb988d7c.js';
+import '../../OrDateTimePickerPopoverHeader-ec90761f.js';
 import '../OrLabelV3/OrLabel.js';
 import '../../OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
 import '../OrLabelV3/props.js';
@@ -160,6 +160,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "initial-value": _ctx.initialModelValue,
         "date-filter": _ctx.dateFilter
       }, null, 8 /* PROPS */, ["modelValue", "initial-value", "date-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+        disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[3] || (_cache[3] = $event => {
           _ctx.apply();
           _ctx.popover.close();
@@ -168,7 +169,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.reset();
           _ctx.popover.close();
         })
-      })]),
+      }, null, 8 /* PROPS */, ["disabled"])]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["class", "trigger"]), _hoisted_1]),
     _: 1 /* STABLE */

package/dist/bundled/v3/components/OrDatePickerV3/OrDatePicker.vue.d.ts

@@ -61,6 +61,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     initialModelValue: Date;
     proxyModelValue: import("vue-demi").WritableComputedRef<Date | undefined>;
     draftModelValue: import("vue-demi").Ref<Date | undefined>;
+    isInvalidDraftModelValue: import("vue-demi").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     togglePopover: () => void;

package/dist/bundled/v3/components/OrDatePickerV3/index.js

@@ -1,4 +1,4 @@
-export { s as OrDatePickerV3 } from '../../OrDatePicker.vue_vue_type_script_lang-8ec017e2.js';
+export { s as OrDatePickerV3 } from '../../OrDatePicker.vue_vue_type_script_lang-0e648149.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
@@ -50,7 +50,7 @@ import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../../OrMenuItem.vue_vue_type_script_lang-b338d68a.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-bb988d7c.js';
+import '../../OrDateTimePickerPopoverHeader-ec90761f.js';
 import '../OrLabelV3/OrLabel.js';
 import '../../OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
 import '../OrLabelV3/props.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrDateTimePicker.vue_vue_type_script_lang-fec947db.js';
-export { s as default } from '../../OrDateTimePicker.vue_vue_type_script_lang-fec947db.js';
+import { s as script } from '../../OrDateTimePicker.vue_vue_type_script_lang-69d65518.js';
+export { s as default } from '../../OrDateTimePicker.vue_vue_type_script_lang-69d65518.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
@@ -50,13 +50,15 @@ import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../../OrMenuItem.vue_vue_type_script_lang-b338d68a.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-bb988d7c.js';
+import '../../OrDateTimePickerPopoverHeader-ec90761f.js';
 import '../OrLabelV3/OrLabel.js';
 import '../../OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
-import '../../OrDateTimePickerTimeSelect-01a39297.js';
+import '../../OrDateTimePickerTimeSelect-683ab20d.js';
 import './hooks/useTimePlaceholder.js';
+import './props.js';
+import '../OrInputBoxV3/props.js';
 import './styles.js';
 import '../OrErrorV3/OrError.js';
 import '../../OrError.vue_vue_type_script_lang-df7b5e32.js';
@@ -66,7 +68,6 @@ import '../../OrHint.vue_vue_type_script_lang-0f5e8377.js';
 import '../OrHintV3/styles.js';
 import '../OrInputBoxV3/OrInputBox.js';
 import '../../OrInputBox.vue_vue_type_script_lang-49fb179a.js';
-import '../OrInputBoxV3/props.js';
 import '../OrInputBoxV3/styles.js';
 import '../../directives/dropdown-close.js';
 import '../../directives/dropdown-open.js';
@@ -134,10 +135,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8 /* PROPS */, ["modelValue", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleDatePopover], [_directive_dropdown_close, _ctx.closeDatePopover]]), withDirectives(createVNode(_component_OrDateTimePickerTimeControl, {
       modelValue: _ctx.draftModelValue,
       "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.draftModelValue = $event),
+      format: _ctx.timeFormat,
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleTimePopover], [_directive_dropdown_close, _ctx.closeTimePopover]]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleTimePopover], [_directive_dropdown_close, _ctx.closeTimePopover]]), createVNode(_component_OrPopover, {
       ref: "datePopover",
       class: normalizeClass(_ctx.datePopoverStyles),
       variant: 'auto',
@@ -176,6 +178,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "initial-value": _ctx.initialModelValue,
         "date-filter": _ctx.dateFilter
       }, null, 8 /* PROPS */, ["modelValue", "initial-value", "date-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+        disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[4] || (_cache[4] = $event => {
           _ctx.apply();
           _ctx.datePopover.close();
@@ -184,7 +187,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.reset();
           _ctx.datePopover.close();
         })
-      })]),
+      }, null, 8 /* PROPS */, ["disabled"])]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["class", "trigger"]), createVNode(_component_OrPopover, {
       ref: "timePopover",
@@ -217,9 +220,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         modelValue: _ctx.draftModelValue,
         "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.draftModelValue = $event),
         "initial-value": _ctx.initialModelValue,
+        format: _ctx.timeFormat,
         "hours-filter": _ctx.hoursFilter,
         "minutes-filter": _ctx.minutesFilter
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "hours-filter", "minutes-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "hours-filter", "minutes-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+        disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[8] || (_cache[8] = $event => {
           _ctx.apply();
           _ctx.timePopover.close();
@@ -228,7 +233,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.reset();
           _ctx.timePopover.close();
         })
-      })]),
+      }, null, 8 /* PROPS */, ["disabled"])]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["class", "trigger"]), _hoisted_1]),
     _: 1 /* STABLE */

package/dist/bundled/v3/components/OrDateTimePickerV3/OrDateTimePicker.vue.d.ts

@@ -1,11 +1,15 @@
 import { PropType } from 'vue-demi';
-import { DateTimePickerSize } from './props';
+import { DateTimePickerSize, DateTimePickerTimeFormat } from './props';
 import { FilterFunction } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: DateConstructor;
         default: undefined;
     };
+    timeFormat: {
+        type: PropType<"auto" | "h12" | "h23">;
+        default: DateTimePickerTimeFormat;
+    };
     yearFilter: {
         type: PropType<FilterFunction>;
         default: undefined;
@@ -72,6 +76,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     initialModelValue: Date;
     proxyModelValue: import("vue-demi").WritableComputedRef<Date | undefined>;
     draftModelValue: import("vue-demi").Ref<Date | undefined>;
+    isInvalidDraftModelValue: import("vue-demi").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     toggleDatePopover: () => void;
@@ -85,6 +90,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: DateConstructor;
         default: undefined;
     };
+    timeFormat: {
+        type: PropType<"auto" | "h12" | "h23">;
+        default: DateTimePickerTimeFormat;
+    };
     yearFilter: {
         type: PropType<FilterFunction>;
         default: undefined;
@@ -145,6 +154,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Date;
+    timeFormat: "auto" | "h12" | "h23";
     yearFilter: FilterFunction;
     monthFilter: FilterFunction;
     dateFilter: FilterFunction;

package/dist/bundled/v3/components/OrDateTimePickerV3/hooks/useTimePlaceholder.d.ts

@@ -1 +1 @@
-export declare function useTimePlaceholder(): string;
+export declare function useTimePlaceholder(hourCycle?: Intl.DateTimeFormatOptions['hourCycle']): string;

package/dist/bundled/v3/components/OrDateTimePickerV3/hooks/useTimePlaceholder.js

@@ -1,6 +1,7 @@
-function useTimePlaceholder() {
+function useTimePlaceholder(hourCycle) {
   const sample = new Date(Date.UTC(1, 1, 3, 4, 5)).toLocaleString(navigator.language, {
     timeStyle: 'short',
+    hourCycle,
     timeZone: 'UTC'
   });
   return sample.replace(/04/, 'HH').replace(/4/, 'H').replace(/05/, 'MM').replace(/5/, 'M').replace(/AM|PM/, 'A');

package/dist/bundled/v3/components/OrDateTimePickerV3/index.js

@@ -1,4 +1,5 @@
-export { s as OrDateTimePickerV3 } from '../../OrDateTimePicker.vue_vue_type_script_lang-fec947db.js';
+export { DateTimePickerTimeFormat } from './props.js';
+export { s as OrDateTimePickerV3 } from '../../OrDateTimePicker.vue_vue_type_script_lang-69d65518.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
@@ -50,12 +51,12 @@ import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../../OrMenuItem.vue_vue_type_script_lang-b338d68a.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-bb988d7c.js';
+import '../../OrDateTimePickerPopoverHeader-ec90761f.js';
 import '../OrLabelV3/OrLabel.js';
 import '../../OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
-import '../../OrDateTimePickerTimeSelect-01a39297.js';
+import '../../OrDateTimePickerTimeSelect-683ab20d.js';
 import './hooks/useTimePlaceholder.js';
 import './styles.js';
 import '../OrErrorV3/OrError.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/props.d.ts

@@ -1 +1,6 @@
+export declare enum DateTimePickerTimeFormat {
+    Auto = "auto",
+    H12 = "h12",
+    H23 = "h23"
+}
 export { InputBoxSize as DateTimePickerSize } from '../or-input-box-v3';

package/dist/bundled/v3/components/OrDateTimePickerV3/props.js

@@ -1 +1,10 @@
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
+
+var DateTimePickerTimeFormat;
+(function (DateTimePickerTimeFormat) {
+  DateTimePickerTimeFormat["Auto"] = "auto";
+  DateTimePickerTimeFormat["H12"] = "h12";
+  DateTimePickerTimeFormat["H23"] = "h23";
+})(DateTimePickerTimeFormat || (DateTimePickerTimeFormat = {}));
+
+export { DateTimePickerTimeFormat };

package/dist/bundled/v3/components/OrDateTimePickerV3/styles.js

@@ -6,8 +6,6 @@ const DateTimePicker = [
 const DateTimePickerDatePopover = [
 // Box
 'w-[298px]'];
-const DateTimePickerTimePopover = [
-// Box
-'w-[224px]'];
+const DateTimePickerTimePopover = [];
 
 export { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover };

package/dist/bundled/v3/components/OrTimePickerV3/OrTimePicker.js

@@ -1,9 +1,9 @@
-import { s as script } from '../../OrTimePicker.vue_vue_type_script_lang-c737eaa8.js';
-export { s as default } from '../../OrTimePicker.vue_vue_type_script_lang-c737eaa8.js';
+import { s as script } from '../../OrTimePicker.vue_vue_type_script_lang-a300ab1b.js';
+export { s as default } from '../../OrTimePicker.vue_vue_type_script_lang-a300ab1b.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerPopoverHeader-bb988d7c.js';
+import '../../OrDateTimePickerPopoverHeader-ec90761f.js';
 import '../OrLabelV3/OrLabel.js';
 import '../../OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
 import '../OrLabelV3/props.js';
@@ -18,8 +18,10 @@ import '../../index-09d1cb24.js';
 import '../../index-f4d8e24c.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
-import '../../OrDateTimePickerTimeSelect-01a39297.js';
+import '../../OrDateTimePickerTimeSelect-683ab20d.js';
 import '../OrDateTimePickerV3/hooks/useTimePlaceholder.js';
+import '../OrDateTimePickerV3/props.js';
+import '../OrInputBoxV3/props.js';
 import './styles.js';
 import '../OrErrorV3/OrError.js';
 import '../../OrError.vue_vue_type_script_lang-df7b5e32.js';
@@ -58,7 +60,6 @@ import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInputBoxV3/OrInputBox.js';
 import '../../OrInputBox.vue_vue_type_script_lang-49fb179a.js';
-import '../OrInputBoxV3/props.js';
 import '../OrInputBoxV3/styles.js';
 import '../../directives/dropdown-close.js';
 import '../../directives/dropdown-open.js';
@@ -117,10 +118,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [withDirectives(createVNode(_component_OrDateTimePickerTimeControl, {
       modelValue: _ctx.draftModelValue,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event),
+      format: _ctx.format,
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.togglePopover], [_directive_dropdown_close, _ctx.closePopover]]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.togglePopover], [_directive_dropdown_close, _ctx.closePopover]]), createVNode(_component_OrPopover, {
       ref: "popover",
       class: normalizeClass(_ctx.popoverStyles),
       variant: 'auto',
@@ -145,9 +147,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         modelValue: _ctx.draftModelValue,
         "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.draftModelValue = $event),
         "initial-value": _ctx.initialModelValue,
+        format: _ctx.format,
         "hours-filter": _ctx.hoursFilter,
         "minutes-filter": _ctx.minutesFilter
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "hours-filter", "minutes-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "hours-filter", "minutes-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+        disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[2] || (_cache[2] = $event => {
           _ctx.apply();
           _ctx.popover.close();
@@ -156,7 +160,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.reset();
           _ctx.popover.close();
         })
-      })]),
+      }, null, 8 /* PROPS */, ["disabled"])]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["class", "trigger"]), _hoisted_1]),
     _: 1 /* STABLE */