@onereach/ui-components-vue2 16.2.0-beta.4827.0

package/dist/esm/components/or-date-time-picker/index.js

@@ -0,0 +1,842 @@
+import padStart from 'lodash/padStart';
+import { defineComponent, ref, getCurrentInstance } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { OrFloating as __vue_component__$2 } from '../or-floating/index.js';
+import { OrLabel as __vue_component__$3 } from '../or-label/index.js';
+import { OrError as __vue_component__$4 } from '../or-error/index.js';
+import { OrHint as __vue_component__$5 } from '../or-hint/index.js';
+import { OrCollapse as __vue_component__$6 } from '../or-collapse/index.js';
+import '../../OrButton.vue_rollup-plugin-vue_styles.0-2ffd2f88.js';
+import { OrIconButtonV2 as __vue_component__$7 } from '../or-icon-button-v2/index.js';
+import '../../OrIconButton.vue_rollup-plugin-vue_styles.0-b4273ff6.js';
+import { n as setStyle, r as requestAF, t as getCS, b as reflow, c as cancelAF } from '../../dom-11141778.js';
+import { p as pxToRem } from '../../px-to-rem-a21cdf39.js';
+import { s as styleInject } from '../../style-inject.es-87955792.js';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+import '@floating-ui/dom';
+import '../or-teleport/index.js';
+import 'portal-vue/dist/portal-vue.esm.js';
+import 'lodash/get';
+import 'lodash/isElement';
+import '@/constants';
+import '../or-icon/index.js';
+import '../../OrTooltip.vue_rollup-plugin-vue_styles.0-488d9edf.js';
+import 'lodash/isNil';
+import '../or-tooltip/or-tooltip-content/index.js';
+import '../or-loader/index.js';
+import '../../isString-f8e938a3.js';
+import '../../isArray-135d4ff2.js';
+import '../../isNull-ef42547d.js';
+import '../../isUndefined-f78f2fdc.js';
+import '../../isObject-fb5a9ae7.js';
+import '../or-tooltip/index.js';
+
+var OrDateTimePickerTypes;
+(function (OrDateTimePickerTypes) {
+  OrDateTimePickerTypes["date"] = "date";
+  OrDateTimePickerTypes["time"] = "time";
+  OrDateTimePickerTypes["dateTime"] = "dateTime";
+})(OrDateTimePickerTypes || (OrDateTimePickerTypes = {}));
+var OrDateTimePickerItemTypes;
+(function (OrDateTimePickerItemTypes) {
+  OrDateTimePickerItemTypes["day"] = "day";
+  OrDateTimePickerItemTypes["hours"] = "hours";
+  OrDateTimePickerItemTypes["minutes"] = "minutes";
+})(OrDateTimePickerItemTypes || (OrDateTimePickerItemTypes = {}));
+const DEFAULT_TEXT = {
+  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  days: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  hours: 'Hours',
+  minutes: 'Minutes'
+};
+
+var script$1 = defineComponent({
+  name: 'OrDateTimePickerCalendarItem',
+  props: {
+    value: {
+      type: Date,
+      required: false,
+      default: () => new Date()
+    },
+    type: {
+      type: String,
+      required: false,
+      default: () => OrDateTimePickerItemTypes.day
+    },
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isSelected: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isCurrent: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['select'],
+  computed: {
+    valueToShow() {
+      var _a, _b, _c;
+      switch (this.type) {
+        case OrDateTimePickerItemTypes.day:
+          return '' + ((_a = this.value) === null || _a === void 0 ? void 0 : _a.getDate());
+        case OrDateTimePickerItemTypes.hours:
+          return padStart('' + ((_b = this.value) === null || _b === void 0 ? void 0 : _b.getHours()), 2, '0');
+        case OrDateTimePickerItemTypes.minutes:
+          return padStart('' + ((_c = this.value) === null || _c === void 0 ? void 0 : _c.getMinutes()), 2, '0');
+        default:
+          throw new Error('Unknown type');
+      }
+    },
+    rootClasses() {
+      return {
+        'is-disabled': this.isDisabled,
+        'is-selected': this.isSelected,
+        'is-current': this.isCurrent
+      };
+    }
+  },
+  methods: {
+    select() {
+      if (this.isDisabled) return;
+      this.$emit('select', this.value);
+    }
+  }
+});
+
+var css_248z$1 = "@keyframes spinAround-data-v-411834e7{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-411834e7{from{opacity:1}to{opacity:0}}.or-calendar-item[data-v-411834e7]{width:1.75rem;height:1.75rem;font-size:var(--fs-0);font-weight:400;line-height:1.75rem;color:var(--c-neutral-6);text-align:center;border-radius:50%}.or-calendar-item.is-disabled[data-v-411834e7]{color:var(--c-neutral-4)}.or-calendar-item.is-current[data-v-411834e7]{background-color:var(--c-neutral-2)}.or-calendar-item:not(.is-disabled).is-selected[data-v-411834e7]{font-weight:700;color:var(--c-neutral-0);background-color:var(--c-primary)}.or-calendar-item:not(.is-disabled).is-selected[data-v-411834e7]:hover{background-color:var(--c-primary-lighten-20)}.or-calendar-item[data-v-411834e7]:not(.is-disabled):hover{cursor:pointer;background-color:var(--c-neutral-1)}";
+styleInject(css_248z$1);
+
+/* 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', {
+    staticClass: "or-calendar-item",
+    class: _vm.rootClasses,
+    on: {
+      "click": function ($event) {
+        $event.preventDefault();
+        return _vm.select.apply(null, arguments);
+      }
+    }
+  }, [_vm._v("\n  " + _vm._s(_vm.valueToShow) + "\n")]);
+};
+var __vue_staticRenderFns__$1 = [];
+
+/* style */
+const __vue_inject_styles__$1 = undefined;
+/* scoped */
+const __vue_scope_id__$1 = "data-v-411834e7";
+/* 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);
+
+const MINUTE = 1000 * 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+var script = defineComponent({
+  name: 'OrDateTimePicker',
+  components: {
+    OrDateTimePickerCalendarItem: __vue_component__$1,
+    OrFloating: __vue_component__$2,
+    OrLabel: __vue_component__$3,
+    OrError: __vue_component__$4,
+    OrHint: __vue_component__$5,
+    OrCollapse: __vue_component__$6,
+    OrIconButton: __vue_component__$7
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    id: {
+      type: String,
+      required: false,
+      default: null
+    },
+    type: {
+      type: String,
+      required: false,
+      default: () => OrDateTimePickerTypes.dateTime
+    },
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    error: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    hint: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    translations: {
+      type: Object,
+      required: false,
+      default: () => DEFAULT_TEXT
+    },
+    isRequired: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isReadonly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isInvalid: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isFullwidth: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    dateFilter: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    allowSeconds: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    const content = ref();
+    const wrapperRef = ref();
+    const isOpen = ref(false);
+    onClickOutside(content, evt => {
+      if (evt.composedPath().includes(wrapperRef.value)) return;
+      if (isOpen.value) isOpen.value = false;
+    });
+    return {
+      content,
+      wrapperRef,
+      isOpen
+    };
+  },
+  data() {
+    return {
+      isFocused: false,
+      reqAF: null,
+      monthToShow: new Date().getMonth(),
+      yearToShow: new Date().getFullYear()
+    };
+  },
+  computed: {
+    inputHours: {
+      get: function () {
+        if (!this.modelValue) return '';
+        return padStart('' + this.modelValue.getHours(), 2, '0');
+      },
+      set: function (val) {
+        var _a;
+        let hours = +val;
+        hours = hours >= 24 ? 23 : hours < 0 ? 0 : hours;
+        const date = (_a = this.modelValue) !== null && _a !== void 0 ? _a : this.today;
+        const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, date.getMinutes(), date.getSeconds());
+        this.$emit('update:modelValue', newDate);
+      }
+    },
+    inputMinutes: {
+      get: function () {
+        if (!this.modelValue) return '';
+        return padStart('' + this.modelValue.getMinutes(), 2, '0');
+      },
+      set: function (val) {
+        var _a;
+        let minutes = +val;
+        minutes = minutes >= 60 ? 59 : minutes < 0 ? 0 : minutes;
+        const date = (_a = this.modelValue) !== null && _a !== void 0 ? _a : this.today;
+        const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), minutes, date.getSeconds());
+        this.$emit('update:modelValue', newDate);
+      }
+    },
+    inputSeconds: {
+      get: function () {
+        if (!this.modelValue) return '';
+        return padStart('' + this.modelValue.getSeconds(), 2, '0');
+      },
+      set: function (val) {
+        var _a;
+        let seconds = +val;
+        seconds = seconds >= 60 ? 59 : seconds < 0 ? 0 : seconds;
+        const date = (_a = this.modelValue) !== null && _a !== void 0 ? _a : this.today;
+        const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), seconds);
+        this.$emit('update:modelValue', newDate);
+      }
+    },
+    localId() {
+      var _a, _b;
+      return (_a = this.id) !== null && _a !== void 0 ? _a : `date-time-picker-${(_b = getCurrentInstance()) === null || _b === void 0 ? void 0 : _b.uid}`;
+    },
+    dateValue() {
+      if (!this.modelValue) return '';
+      const year = padStart('' + this.modelValue.getFullYear(), 4, '0');
+      const month = padStart('' + (this.modelValue.getMonth() + 1), 2, '0');
+      const day = padStart('' + this.modelValue.getDate(), 2, '0');
+      return `${year}-${month}-${day}`;
+    },
+    timeValue() {
+      if (!this.modelValue) return '';
+      const hours = padStart('' + this.modelValue.getHours(), 2, '0');
+      const minutes = padStart('' + this.modelValue.getMinutes(), 2, '0');
+      if (this.isShowSeconds) {
+        const seconds = padStart('' + this.modelValue.getSeconds(), 2, '0');
+        return `${hours}:${minutes}:${seconds}`;
+      }
+      return `${hours}:${minutes}`;
+    },
+    isInactive() {
+      return this.isDisabled || this.isReadonly;
+    },
+    isShowError() {
+      return !!this.error && this.isInvalid;
+    },
+    isShowHint() {
+      return !!this.hint && !this.isShowError;
+    },
+    isShowInfo() {
+      return this.isShowError || this.isShowHint;
+    },
+    isShowDate() {
+      return this.type === OrDateTimePickerTypes.date || this.type === OrDateTimePickerTypes.dateTime;
+    },
+    isShowTime() {
+      return this.type === OrDateTimePickerTypes.time || this.type === OrDateTimePickerTypes.dateTime;
+    },
+    isShowSeconds() {
+      return this.isShowTime && this.allowSeconds;
+    },
+    today() {
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    },
+    firstDayOfMonth() {
+      return new Date(this.yearToShow, this.monthToShow, 1);
+    },
+    lastDayOfMonth() {
+      return new Date(this.yearToShow, this.monthToShow + 1, 0);
+    },
+    calendar() {
+      const start = new Date(this.yearToShow, this.monthToShow, 1 - (this.firstDayOfMonth.getDay() + 6) % 7);
+      const end = new Date(this.yearToShow, this.monthToShow + 1, (7 - this.lastDayOfMonth.getDay()) % 7);
+      const daysToShow = (+end - +start) / DAY;
+      const rowsCount = daysToShow / 7; // week
+      const calendar = [];
+      const startMonthYear = start.getFullYear();
+      const startMonthMonth = start.getMonth();
+      const startMonthDay = start.getDate();
+      for (let i = 0; i < rowsCount; i++) {
+        const row = [];
+        for (let j = 0; j < 7; j++) {
+          const offset = j + i * 7;
+          const current = new Date(startMonthYear, startMonthMonth, startMonthDay + offset);
+          row.push(current);
+        }
+        calendar.push(row);
+      }
+      return calendar;
+    },
+    hours() {
+      const rowsCount = 4;
+      const columnsCount = 24 / rowsCount;
+      const zeroDate = new Date(0);
+      const hours = [];
+      for (let i = 0; i < rowsCount; i++) {
+        const row = [];
+        for (let j = 0; j < columnsCount; j++) {
+          const hour = new Date(zeroDate.getFullYear(), zeroDate.getMonth(), zeroDate.getDate(), j + i * columnsCount);
+          row.push(hour);
+        }
+        hours.push(row);
+      }
+      return hours;
+    },
+    minutes() {
+      const rowsCount = 4;
+      const step = 5;
+      const columnsCount = 60 / step / rowsCount;
+      const zeroDate = new Date(0);
+      const minutes = [];
+      for (let i = 0; i < rowsCount; i++) {
+        const row = [];
+        for (let j = 0; j < columnsCount; j++) {
+          const minute = new Date(zeroDate.getFullYear(), zeroDate.getMonth(), zeroDate.getDate(), 0, step * (j + i * columnsCount));
+          row.push(minute);
+        }
+        minutes.push(row);
+      }
+      return minutes;
+    },
+    typeClass() {
+      switch (this.type) {
+        case OrDateTimePickerTypes.date:
+          return 'is-date-type';
+        case OrDateTimePickerTypes.time:
+          return 'is-time-type';
+        case OrDateTimePickerTypes.dateTime:
+          if (this.allowSeconds) return 'is-date-time-type-seconds';
+          return 'is-date-time-type';
+        default:
+          throw new Error('Unknown type');
+      }
+    },
+    rootClasses() {
+      return [this.typeClass, ...(this.isFullwidth ? ['is-fullwidth'] : [])];
+    },
+    wrapperClasses() {
+      return {
+        'is-disabled': this.isDisabled,
+        'is-readonly': this.isReadonly,
+        'is-focused': this.isFocused,
+        'is-required': this.isRequired,
+        'has-error': this.isInvalid
+      };
+    }
+  },
+  methods: {
+    isDayDisabled(date) {
+      const res = +date < +this.firstDayOfMonth || +date > +this.lastDayOfMonth;
+      if (this.dateFilter) {
+        return this.dateFilter(date) || res;
+      }
+      return res;
+    },
+    isDaySelected(date) {
+      if (!this.modelValue) return false;
+      const selectedDay = new Date(this.modelValue.getFullYear(), this.modelValue.getMonth(), this.modelValue.getDate());
+      return +date >= +selectedDay && +date < +selectedDay + DAY;
+    },
+    isHourSelected(date) {
+      if (!this.modelValue) return false;
+      return this.modelValue.getHours() === date.getHours();
+    },
+    isMinuteSelected(date) {
+      if (!this.modelValue) return false;
+      return this.modelValue.getMinutes() === date.getMinutes();
+    },
+    beforeEnter(el) {
+      setStyle(el, 'opacity', 0);
+    },
+    enter(el) {
+      const {
+        scrollHeight,
+        parentElement
+      } = el;
+      this.reqAF = requestAF(() => {
+        const pt = parseFloat(getCS(parentElement).paddingTop);
+        const pb = parseFloat(getCS(parentElement).paddingBottom);
+        const height = scrollHeight + pt + pb;
+        if (parentElement) {
+          reflow(parentElement);
+          setStyle(parentElement, 'height', pxToRem(height));
+        }
+        setStyle(el, 'opacity', 1);
+      });
+    },
+    leave(el) {
+      this.reqAF = requestAF(() => {
+        el.style.opacity = '0';
+      });
+    },
+    cancelRequestAF() {
+      cancelAF(this.reqAF);
+    },
+    toggle() {
+      var _a;
+      if (this.isInactive) return;
+      this.isOpen = !this.isOpen;
+      const dateToShow = (_a = this.modelValue) !== null && _a !== void 0 ? _a : new Date();
+      this.monthToShow = dateToShow.getMonth();
+      this.yearToShow = dateToShow.getFullYear();
+    },
+    decrementMonth() {
+      this.monthToShow--;
+      if (this.monthToShow < 0) {
+        this.monthToShow = 11;
+        this.yearToShow--;
+      }
+    },
+    incrementMonth() {
+      this.monthToShow++;
+      if (this.monthToShow >= 12) {
+        this.monthToShow = 0;
+        this.yearToShow++;
+      }
+    },
+    handleDaySelect(date) {
+      var _a, _b;
+      if (this.type === OrDateTimePickerTypes.date) {
+        this.$emit('update:modelValue', date);
+      } else {
+        const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), ((_a = this.modelValue) !== null && _a !== void 0 ? _a : date).getHours(), ((_b = this.modelValue) !== null && _b !== void 0 ? _b : date).getMinutes());
+        this.$emit('update:modelValue', newDate);
+      }
+    },
+    handleHourSelect(date) {
+      var _a;
+      const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), ((_a = this.modelValue) !== null && _a !== void 0 ? _a : date).getMinutes());
+      this.$emit('update:modelValue', newDate);
+    },
+    handleMinuteSelect(date) {
+      var _a;
+      const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), ((_a = this.modelValue) !== null && _a !== void 0 ? _a : date).getHours(), date.getMinutes());
+      this.$emit('update:modelValue', newDate);
+    }
+  }
+});
+
+var css_248z = "@keyframes spinAround-data-v-262d55b4{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-262d55b4{from{opacity:1}to{opacity:0}}.or-date-time-picker[data-v-262d55b4]{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.or-date-time-picker.is-fullwidth[data-v-262d55b4]{width:100%!important}.or-date-time-picker.is-date-type[data-v-262d55b4]{width:7.125rem}.or-date-time-picker.is-time-type[data-v-262d55b4]{width:7.125rem}.or-date-time-picker.is-date-time-type[data-v-262d55b4]{width:11.25rem}.or-date-time-picker.is-date-time-type-seconds[data-v-262d55b4]{width:13.25rem}.or-date-time-picker .or-label[data-v-262d55b4]{margin-bottom:var(--s-1)}.or-date-time-picker-info[data-v-262d55b4]{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--s-2)}.or-date-time-picker-input-wrapper[data-v-262d55b4]{position:relative;width:100%;height:2.25rem;padding:.625rem;font-size:var(--fs-1);line-height:1rem;background-color:var(--c-neutral-1);border:1px solid var(--c-neutral-2);border-radius:var(--s-2);transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:border-color,background-color,-webkit-box-shadow}.or-date-time-picker-input-wrapper[data-v-262d55b4]:not(.is-readonly):hover{cursor:pointer;background-color:var(--c-neutral-0)}.or-date-time-picker-input-wrapper.is-disabled[data-v-262d55b4],.or-date-time-picker-input-wrapper[data-v-262d55b4]:disabled{cursor:not-allowed;background-color:var(--c-neutral-2);border-color:var(--c-neutral-2)}.or-date-time-picker-input-wrapper.has-error[data-v-262d55b4]{border-color:var(--c-error)}@media (hover:hover) and (pointer:fine){.or-date-time-picker-input-wrapper.has-error[data-v-262d55b4]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover{border-color:var(--c-error-darken-3)}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.or-date-time-picker-input-wrapper.has-error[data-v-262d55b4]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover{border-color:var(--c-error-darken-3)}}.or-date-time-picker-input-wrapper.has-error[data-v-262d55b4]:not(:disabled):not(.is-readonly):not(.is-loading):focus{border-color:var(--c-error-darken-5)}.or-date-time-picker-input-wrapper.has-error.is-disabled[data-v-262d55b4],.or-date-time-picker-input-wrapper.has-error[data-v-262d55b4]:disabled{cursor:not-allowed;border-color:var(--c-error-lighten-20)}.or-date-time-picker-input-wrapper .placeholder[data-v-262d55b4],.or-date-time-picker-input-wrapper .value[data-v-262d55b4]{display:flex;flex-direction:row;justify-content:space-between;width:100%;white-space:nowrap;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:opacity}.or-date-time-picker-input-wrapper .placeholder[data-v-262d55b4]{color:var(--c-neutral-4);user-select:none}.content[data-v-262d55b4]{display:flex;flex-direction:column;text-align:center;background-color:var(--c-neutral-0);border:1px solid var(--c-neutral-2);border-radius:var(--s-2)}.content .picker-header[data-v-262d55b4]{display:flex;flex-direction:row;gap:var(--s-3);justify-content:space-between;padding:var(--s-4) var(--s-3);font-size:var(--fs-1);font-weight:700;color:var(--c-neutral-6);text-align:center}.content .picker-header-centered[data-v-262d55b4]{margin:auto}.content .calendar[data-v-262d55b4]{padding:0 var(--s-3) var(--s-3);font-size:var(--fs-0);line-height:.875rem}.content .calendar-week-days[data-v-262d55b4]{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--s-1);color:var(--c-neutral-4)}.content .calendar-week-days>*[data-v-262d55b4]{width:var(--s-6)}.content .calendar-days[data-v-262d55b4]{display:flex;flex-direction:column;gap:var(--s-2)}.content .calendar-days-row[data-v-262d55b4]{display:flex;flex-direction:row;gap:var(--s-2);justify-content:space-around}.content .time-footer[data-v-262d55b4]{display:inline-flex;flex-direction:row;justify-content:space-between;width:100%;line-height:var(--s-6);text-align:center;border-top:1px solid var(--c-neutral-2)}.content .time-footer input[data-v-262d55b4]::-webkit-inner-spin-button,.content .time-footer input[data-v-262d55b4]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.content .time-footer input[type=number][data-v-262d55b4]{-moz-appearance:textfield}.content .time-footer-input[data-v-262d55b4]{font-size:var(--fs-0);text-align:center;border:none}.content .time-footer-input-tripple[data-v-262d55b4]{max-width:96px}.content .time-footer-input[data-v-262d55b4]:focus-visible{background-color:var(--c-neutral-2);outline:0}.content .time-table[data-v-262d55b4]{display:flex;flex-direction:row;gap:var(--s-4)}.content .time-table-column[data-v-262d55b4]{display:flex;flex-direction:column}.content .time-table-column-time[data-v-262d55b4]{display:flex;flex-direction:column;gap:var(--s-2);padding:0 var(--s-3) var(--s-3)}.content .time-table-column-time-row[data-v-262d55b4]{display:flex;flex-direction:row;gap:var(--s-2);justify-content:space-around}";
+styleInject(css_248z);
+
+/* 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', {
+    staticClass: "or-date-time-picker",
+    class: _vm.rootClasses
+  }, [_vm.$slots['label-default'] || _vm.label ? _c('or-label', {
+    attrs: {
+      "is-required": _vm.isRequired,
+      "for": _vm.localId
+    },
+    scopedSlots: _vm._u([{
+      key: "default",
+      fn: function () {
+        return [_vm._t("label-default", function () {
+          return [_vm._v("\n        " + _vm._s(_vm.label) + "\n      ")];
+        })];
+      },
+      proxy: true
+    }, {
+      key: "append",
+      fn: function () {
+        return [_vm._t("label-append")];
+      },
+      proxy: true
+    }], null, true)
+  }) : _vm._e(), _vm._v(" "), _c('div', {
+    ref: "wrapperRef",
+    staticClass: "or-date-time-picker-input-wrapper",
+    class: _vm.wrapperClasses,
+    on: {
+      "click": function ($event) {
+        $event.preventDefault();
+        return _vm.toggle.apply(null, arguments);
+      }
+    }
+  }, [_c('input', {
+    attrs: {
+      "id": _vm.localId,
+      "type": "hidden",
+      "disabled": _vm.isDisabled,
+      "readonly": _vm.isReadonly
+    },
+    domProps: {
+      "value": _vm.modelValue
+    }
+  }), _vm._v(" "), !_vm.modelValue ? _c('div', {
+    staticClass: "placeholder"
+  }, [_vm.isShowDate ? _c('div', [_vm._v("\n        YYYY-MM-DD\n      ")]) : _vm._e(), _vm._v(" "), _vm.isShowTime ? _c('div', [_vm._v("\n        HH:MM"), _vm.isShowSeconds ? _c('span', [_vm._v(":SS")]) : _vm._e()]) : _vm._e()]) : _c('div', {
+    staticClass: "value"
+  }, [_vm.isShowDate ? _c('div', [_vm._v("\n        " + _vm._s(_vm.dateValue) + "\n      ")]) : _vm._e(), _vm._v(" "), _vm.isShowTime ? _c('div', [_vm._v("\n        " + _vm._s(_vm.timeValue) + "\n      ")]) : _vm._e()])]), _vm._v(" "), _c('or-collapse', {
+    attrs: {
+      "is-visible": _vm.isShowInfo
+    }
+  }, [_c('div', {
+    staticClass: "or-date-time-picker-info"
+  }, [_c('transition', {
+    attrs: {
+      "mode": "out-in"
+    },
+    on: {
+      "before-enter": _vm.beforeEnter,
+      "enter": _vm.enter,
+      "after-enter": _vm.cancelRequestAF,
+      "leave": _vm.leave,
+      "after-leave": _vm.cancelRequestAF
+    }
+  }, [_vm.isShowHint ? _c('or-hint', {
+    key: _vm.hint,
+    staticClass: "or-date-time-picker-hint",
+    attrs: {
+      "hint": _vm.hint
+    }
+  }) : _vm._e()], 1), _vm._v(" "), _c('transition', {
+    attrs: {
+      "mode": "out-in"
+    },
+    on: {
+      "before-enter": _vm.beforeEnter,
+      "enter": _vm.enter,
+      "after-enter": _vm.cancelRequestAF,
+      "leave": _vm.leave,
+      "after-leave": _vm.cancelRequestAF
+    }
+  }, [_vm.isShowError ? _c('or-error', {
+    key: _vm.error,
+    staticClass: "or-date-time-picker-error",
+    attrs: {
+      "error": _vm.error
+    }
+  }) : _vm._e()], 1)], 1)]), _vm._v(" "), _vm.isOpen ? _c('or-floating', {
+    attrs: {
+      "trigger": _vm.wrapperRef,
+      "offset": 4,
+      "placement": "bottom-start",
+      "is-using-flip": "",
+      "is-using-shift": ""
+    }
+  }, [_c('div', {
+    ref: "content",
+    staticClass: "content"
+  }, [_vm.isShowDate ? [_c('div', {
+    staticClass: "picker-header"
+  }, [_c('or-icon-button', {
+    attrs: {
+      "icon": "keyboard_arrow_left",
+      "icon-color": "neutral-6"
+    },
+    on: {
+      "click": _vm.decrementMonth
+    }
+  }), _vm._v(" "), _c('div', [_vm._v("\n            " + _vm._s(_vm.translations.months[_vm.monthToShow]) + " " + _vm._s(_vm.yearToShow) + "\n          ")]), _vm._v(" "), _c('or-icon-button', {
+    attrs: {
+      "icon": "keyboard_arrow_right",
+      "icon-color": "neutral-6"
+    },
+    on: {
+      "click": _vm.incrementMonth
+    }
+  })], 1), _vm._v(" "), _c('div', {
+    staticClass: "calendar"
+  }, [_c('div', {
+    staticClass: "calendar-week-days"
+  }, _vm._l(_vm.translations.days, function (day) {
+    return _c('div', {
+      key: day
+    }, [_vm._v("\n              " + _vm._s(day) + "\n            ")]);
+  }), 0), _vm._v(" "), _c('div', {
+    staticClass: "calendar-days"
+  }, _vm._l(_vm.calendar, function (row, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "calendar-days-row"
+    }, _vm._l(row, function (day) {
+      return _c('or-date-time-picker-calendar-item', {
+        key: +day,
+        attrs: {
+          "value": day,
+          "type": "day",
+          "is-current": +day === +_vm.today,
+          "is-disabled": _vm.isDayDisabled(day),
+          "is-selected": _vm.isDaySelected(day)
+        },
+        on: {
+          "select": _vm.handleDaySelect
+        }
+      });
+    }), 1);
+  }), 0)]), _vm._v(" "), _vm.isShowTime ? _c('div', {
+    staticClass: "time-footer"
+  }, [_c('input', {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.inputHours,
+      expression: "inputHours"
+    }],
+    staticClass: "time-footer-input",
+    class: {
+      'time-footer-input-tripple': _vm.isShowSeconds
+    },
+    attrs: {
+      "type": "number",
+      "placeholder": "00"
+    },
+    domProps: {
+      "value": _vm.inputHours
+    },
+    on: {
+      "input": function ($event) {
+        if ($event.target.composing) {
+          return;
+        }
+        _vm.inputHours = $event.target.value;
+      }
+    }
+  }), _vm._v(" "), _c('span', [_vm._v(":")]), _vm._v(" "), _c('input', {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.inputMinutes,
+      expression: "inputMinutes"
+    }],
+    staticClass: "time-footer-input",
+    class: {
+      'time-footer-input-tripple': _vm.isShowSeconds
+    },
+    attrs: {
+      "type": "number",
+      "placeholder": "00"
+    },
+    domProps: {
+      "value": _vm.inputMinutes
+    },
+    on: {
+      "input": function ($event) {
+        if ($event.target.composing) {
+          return;
+        }
+        _vm.inputMinutes = $event.target.value;
+      }
+    }
+  }), _vm._v(" "), _vm.isShowSeconds ? _c('span', [_vm._v(":")]) : _vm._e(), _vm._v(" "), _vm.isShowSeconds ? _c('input', {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.inputSeconds,
+      expression: "inputSeconds"
+    }],
+    staticClass: "time-footer-input",
+    class: {
+      'time-footer-input-tripple': _vm.isShowSeconds
+    },
+    attrs: {
+      "type": "number",
+      "placeholder": "00"
+    },
+    domProps: {
+      "value": _vm.inputSeconds
+    },
+    on: {
+      "input": function ($event) {
+        if ($event.target.composing) {
+          return;
+        }
+        _vm.inputSeconds = $event.target.value;
+      }
+    }
+  }) : _vm._e()]) : _vm._e()] : [_c('div', {
+    staticClass: "time-table"
+  }, [_c('div', {
+    staticClass: "time-table-column"
+  }, [_c('div', {
+    staticClass: "picker-header"
+  }, [_c('span', {
+    staticClass: "picker-header-centered"
+  }, [_vm._v("\n                " + _vm._s(_vm.translations.hours) + "\n              ")])]), _vm._v(" "), _c('div', {
+    staticClass: "time-table-column-time"
+  }, _vm._l(_vm.hours, function (row, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "time-table-column-time-row"
+    }, _vm._l(row, function (hour) {
+      return _c('or-date-time-picker-calendar-item', {
+        key: +hour,
+        attrs: {
+          "value": hour,
+          "type": "hours",
+          "is-selected": _vm.isHourSelected(hour)
+        },
+        on: {
+          "select": _vm.handleHourSelect
+        }
+      });
+    }), 1);
+  }), 0)]), _vm._v(" "), _c('div', {
+    staticClass: "time-table-column"
+  }, [_c('div', {
+    staticClass: "picker-header"
+  }, [_c('span', {
+    staticClass: "picker-header-centered"
+  }, [_vm._v("\n                " + _vm._s(_vm.translations.minutes) + "\n              ")])]), _vm._v(" "), _c('div', {
+    staticClass: "time-table-column-time"
+  }, _vm._l(_vm.minutes, function (row, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "time-table-column-time-row"
+    }, _vm._l(row, function (minute) {
+      return _c('or-date-time-picker-calendar-item', {
+        key: +minute,
+        attrs: {
+          "value": minute,
+          "type": "minutes",
+          "is-selected": _vm.isMinuteSelected(minute)
+        },
+        on: {
+          "select": _vm.handleMinuteSelect
+        }
+      });
+    }), 1);
+  }), 0)])])]], 2)]) : _vm._e()], 1);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-262d55b4";
+/* 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 { DEFAULT_TEXT, __vue_component__ as OrDateTimePicker, OrDateTimePickerItemTypes, OrDateTimePickerTypes };