@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-form-date-time.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$2 = require('./index-fc264952.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-de8540eb.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formDateTimeCss = ":host{display:block;opacity:1}:host .flex{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;min-height:2.875rem;max-height:2.875rem;background:var(--light, #ffffff);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container.valid{border:var(--border-width-01, 0.0625rem) solid var(--app-color, #5a30f4)}:host .outer-container.invalid{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host .outer-container.focused{border:var(--border-width-01, 0.0625rem) solid var(--dark, #000000)}:host .outer-container .input-container input{display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0;width:100%;color:var(--dark, #000000);font-size:var(--font-size-16, 1rem);line-height:1.5;vertical-align:unset;background:var(--light, #ffffff);border:none}:host .outer-container .input-container input:focus{outline:0}:host .outer-container .input-container input[type=reset],:host .outer-container .input-container input[type=button],:host .outer-container .input-container input[type=submit],:host .outer-container .input-container input[type=checkbox],:host .outer-container .input-container input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}:host .outer-container .input-container input[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}:host .outer-container .input-container input.native{padding:0rem 1rem}:host .outer-container .icon-prefix,:host .outer-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem)}:host .outer-container .clear{padding-right:var(--spacing-08, 0.5rem)}:host .readonly{padding:0.5rem 0.5rem 0 0;color:var(--dark, #000000)}:host(.ios) .outer-container .input-container input{caret-color:transparent}:host(.history) .readonly{padding:0 !important}:host(.x-large) .readonly{font-size:var(--font-size-36, 2.25rem)}:host(.condition-block) .outer-container{border:none}:host(.condition-block) .outer-container .icon-prefix{display:none}:host(.condition-block) .outer-container .input-container input{background-color:var(--stable-light, #f1f1f1)}:host([size=medium]:not(.readonly)) .outer-container{min-height:1.875rem;max-height:1.875rem;border-radius:var(--border-radius-04, 0.25rem)}:host([size=medium]:not(.readonly)) .outer-container .input-container input{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not(.readonly)) .outer-container .input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not(.readonly)) .outer-container .input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not(.readonly)) .outer-container .input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not(.readonly)) .outer-container .input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=small]:not(.readonly)) .outer-container{min-height:1.375rem;max-height:1.375rem;border-radius:var(--border-radius-04, 0.25rem)}:host([size=small]:not(.readonly)) .outer-container .input-container input{font-size:var(--font-size-14, 0.875rem)}:host([size=small]:not(.readonly)) .outer-container .input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=small]:not(.readonly)) .outer-container .input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=small]:not(.readonly)) .outer-container .input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=small]:not(.readonly)) .outer-container .input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}";
@@ -45,9 +46,9 @@ const YooFormDateTimeComponent = class {
     const calendar = document.createElement('yoo-calendar');
     calendar.classList.add('calendar-picker', this.type);
     calendar.style.backgroundColor = this.host.classList.contains('condition-block') ? 'stable-light' : null;
-    calendar.style.minHeight = index$1.isWeb(this.host) ? undefined : 'unset';
+    calendar.style.minHeight = overlays.isWeb(this.host) ? undefined : 'unset';
     if (this.selectedMinHours) {
-      this.value = index$1.dateAdd(new Date(), 'hour', this.selectedMinHours);
+      this.value = overlays.dateAdd(new Date(), 'hour', this.selectedMinHours);
     }
     calendar.isRange = this.isRange;
     calendar.size = this.size;
@@ -70,18 +71,18 @@ const YooFormDateTimeComponent = class {
     time.maxDate = this.maxDate;
     time.clearable = this.clearable;
     time.isSchedule = this.isSchedule;
-    time.type = !index$1.isNativeMobile() ? this.type : 'time';
+    time.type = !overlays.isNativeMobile() ? this.type : 'time';
     time.minDate = this.isSchedule ? new Date() : this.minDate;
     time.step = this.step;
     time.addEventListener('inputChanged', (event) => this.onTimeInputChanged(event));
     time.addEventListener('amPmToggled', (event) => this.onAmPmToggled(event));
-    time.addEventListener('closePicker', () => this.dialog && index$1.closeModal(null, this.dialog));
+    time.addEventListener('closePicker', () => this.dialog && overlays.closeModal(null, this.dialog));
     this.timePicker = time;
     return time;
   }
   handleClickOutside(event) {
     if (this.dialog && !event.composedPath().includes(this.dialog)) {
-      index$1.closeModal(null, this.dialog);
+      overlays.closeModal(null, this.dialog);
     }
   }
   async getElement() {
@@ -93,16 +94,16 @@ const YooFormDateTimeComponent = class {
       // inform about the validity if there is an initial value
       formInputHelpers.validate(this, this.value);
     }
-    this.is24Hour = index$1.is24Hour();
-    this.isNativeMobileDatePicker = index$1.isNativeMobile() && [index$2.FormFieldType.date.toString(), index$2.FormFieldType.time.toString(), index$2.FormFieldType.datetime.toString()].indexOf(this.type) >= 0;
+    this.is24Hour = overlays.is24Hour();
+    this.isNativeMobileDatePicker = overlays.isNativeMobile() && [index$1.FormFieldType.date.toString(), index$1.FormFieldType.time.toString(), index$1.FormFieldType.datetime.toString()].indexOf(this.type) >= 0;
     switch (this.type) {
-      case index$2.FormFieldType.date:
+      case index$1.FormFieldType.date:
         this.iconPrefix = this.allowOcr ? 'scan' : 'calendar';
         break;
-      case index$2.FormFieldType.datetime:
+      case index$1.FormFieldType.datetime:
         this.iconPrefix = 'date-time';
         break;
-      case index$2.FormFieldType.time:
+      case index$1.FormFieldType.time:
         this.iconPrefix = 'alarm';
         break;
     }
@@ -119,13 +120,13 @@ const YooFormDateTimeComponent = class {
     }
   }
   isTimeInput(inputType) {
-    return inputType === index$2.FormFieldType.time;
+    return inputType === index$1.FormFieldType.time;
   }
   isDateTimeInput(inputType) {
-    return inputType === index$2.FormFieldType.datetime;
+    return inputType === index$1.FormFieldType.datetime;
   }
   isDateInput(inputType) {
-    return inputType === index$2.FormFieldType.date;
+    return inputType === index$1.FormFieldType.date;
   }
   onInputChanged() {
     const inputValue = commonHelpers.querySelectorDeep(this.host, 'input').value;
@@ -143,20 +144,20 @@ const YooFormDateTimeComponent = class {
       return null;
     }
     if (this.isRange && this.value[0] && this.value[1] && typeof this.value === 'object') {
-      const lowerBound = index$1.dateFormat(this.value[0], this.dateDisplayFormat);
-      const upperBound = index$1.dateFormat(this.value[1], this.dateDisplayFormat);
+      const lowerBound = overlays.dateFormat(this.value[0], this.dateDisplayFormat);
+      const upperBound = overlays.dateFormat(this.value[1], this.dateDisplayFormat);
       return `${lowerBound} - ${upperBound}`;
     }
     let formattedDate;
     switch (this.type) {
-      case index$2.FormFieldType.time:
+      case index$1.FormFieldType.time:
         return formInputHelpers.getTimeDisplayValue(this.value, this.is24Hour);
-      case index$2.FormFieldType.date:
-        return index$1.dateFormat(this.value, 'L');
-      case index$2.FormFieldType.datetime: {
-        formattedDate = index$1.dateFormat(this.value, this.datetimeDisplayFormat);
+      case index$1.FormFieldType.date:
+        return overlays.dateFormat(this.value, 'L');
+      case index$1.FormFieldType.datetime: {
+        formattedDate = overlays.dateFormat(this.value, this.datetimeDisplayFormat);
         const dateTime = formattedDate.split(' ');
-        return `${dateTime[0]} ${index$1.translate('YOOBICAT')} ${dateTime[1]} ${!this.is24Hour ? dateTime[2] : ''}`;
+        return `${dateTime[0]} ${overlays.translate('YOOBICAT')} ${dateTime[1]} ${!this.is24Hour ? dateTime[2] : ''}`;
       }
       default:
         return this.value;
@@ -166,7 +167,7 @@ const YooFormDateTimeComponent = class {
     ev.stopPropagation();
     const defaultValue = new Date();
     const prevMinutes = defaultValue.getMinutes();
-    const minutes = index$1.getRoundedMinutes(defaultValue, this.step || MINUTES_INCREMENT_SIZE);
+    const minutes = overlays.getRoundedMinutes(defaultValue, this.step || MINUTES_INCREMENT_SIZE);
     defaultValue.setMinutes(+minutes);
     const newMinutes = defaultValue.getMinutes();
     if (newMinutes === 0 && prevMinutes !== newMinutes) {
@@ -181,26 +182,26 @@ const YooFormDateTimeComponent = class {
   }
   getReadOnlyValue() {
     switch (this.type) {
-      case index$2.FormFieldType.date:
-        return index$1.pipes.dateFormat.transform(this.value, this.format || this.dateDisplayFormat);
-      case index$2.FormFieldType.datetime:
-        return index$1.pipes.dateFormat.transform(this.value, this.format || this.datetimeDisplayFormat);
-      case index$2.FormFieldType.time:
-        return index$1.pipes.dateFormat.transform(this.value, this.format || this.timeDisplayFormat);
+      case index$1.FormFieldType.date:
+        return overlays.pipes.dateFormat.transform(this.value, this.format || this.dateDisplayFormat);
+      case index$1.FormFieldType.datetime:
+        return overlays.pipes.dateFormat.transform(this.value, this.format || this.datetimeDisplayFormat);
+      case index$1.FormFieldType.time:
+        return overlays.pipes.dateFormat.transform(this.value, this.format || this.timeDisplayFormat);
       default:
-        return index$1.pipes.dateFormat.transform(this.value, this.format || this.dateDisplayFormat);
+        return overlays.pipes.dateFormat.transform(this.value, this.format || this.dateDisplayFormat);
     }
   }
   updateTimeValue(originalDate, newTime) {
     let updatedValue = originalDate;
-    const newHours = index$1.getHours(newTime);
-    const newMinutes = index$1.getMinutes(newTime);
-    updatedValue = index$1.setDateHours(updatedValue, newHours);
-    updatedValue = index$1.setDateMinutes(updatedValue, newMinutes);
+    const newHours = overlays.getHours(newTime);
+    const newMinutes = overlays.getMinutes(newTime);
+    updatedValue = overlays.setDateHours(updatedValue, newHours);
+    updatedValue = overlays.setDateMinutes(updatedValue, newMinutes);
     return updatedValue;
   }
   updateModalCssClass() {
-    if (!index$1.isWeb(this.host) && !index$1.isNativeMobile()) {
+    if (!overlays.isWeb(this.host) && !overlays.isNativeMobile()) {
       return 'context-menu emulate-calendar';
     }
     else {
@@ -226,11 +227,11 @@ const YooFormDateTimeComponent = class {
     if (this.isTimeInput(this.type) || this.isDateTimeInput(this.type) || this.isSchedule) {
       this.dialog.appendChild(this.time);
     }
-    if (index$1.isWeb(this.host)) {
+    if (overlays.isWeb(this.host)) {
       const { left, top, width, height } = this.outerContainer.getBoundingClientRect();
-      const modalHostYPosition = ((_a = index$1.findParent(this.host, 'yoo-ion-modal')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().y) || 0;
-      this.dialog.style.left = `${index$1.isFullScreenFalse() ? 16 : left}px`;
-      this.dialog.style.top = `${top - (index$1.isFullScreenFalse() ? modalHostYPosition : -height)}px`;
+      const modalHostYPosition = ((_a = overlays.findParent(this.host, 'yoo-ion-modal')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().y) || 0;
+      this.dialog.style.left = `${overlays.isFullScreenFalse() ? 16 : left}px`;
+      this.dialog.style.top = `${top - (overlays.isFullScreenFalse() ? modalHostYPosition : -height)}px`;
       this.dialog.style.width = `${width}px`;
       this.dialog.style.minWidth = '16rem';
       this.dialog.style.position = 'absolute';
@@ -238,9 +239,9 @@ const YooFormDateTimeComponent = class {
       this.dialog.style.marginTop = 'var(--spacing-08)';
       this.dialog.style.backgroundColor = 'var(--light)';
       this.dialog.style.height = 'auto';
-      index$1.showModal(this.dialog, null, this.updateModalCssClass(), this.getModalAnimation('Enter'), this.getModalAnimation('Leave'), true, false, null, null, null, null, null, null, null, () => {
+      overlays.showModal(this.dialog, null, this.updateModalCssClass(), this.getModalAnimation('Enter'), this.getModalAnimation('Leave'), true, false, null, null, null, null, null, null, null, () => {
         if (this.dialog) {
-          const { placement } = index$1.getDialogPosition(this.outerContainer.getBoundingClientRect(), 'below', this.dialog, width);
+          const { placement } = overlays.getDialogPosition(this.outerContainer.getBoundingClientRect(), 'below', this.dialog, width);
           const maxDialogHeight = placement === 'above' ? top : window.innerHeight - (top + height);
           this.dialog.style.transition = 'all 750ms';
           this.dialog.style.maxHeight = `${maxDialogHeight}px`;
@@ -249,14 +250,14 @@ const YooFormDateTimeComponent = class {
       }).then(onClose);
     }
     else {
-      index$1.showModal(this.dialog, { half: true, coeffHalf: this.isTimeInput(this.type) ? 0.33 : 0.66 }, null, index$1.getModalAnimation('Enter', 'Y'), index$1.getModalAnimation('Leave', 'Y'), true, false).then(onClose);
+      overlays.showModal(this.dialog, { half: true, coeffHalf: this.isTimeInput(this.type) ? 0.33 : 0.66 }, null, overlays.getModalAnimation('Enter', 'Y'), overlays.getModalAnimation('Leave', 'Y'), true, false).then(onClose);
     }
   }
   onDateChanged(event) {
     if (!this.isRange) {
       const newDate = new Date(event.detail.date);
       if (!this.isDateInput(this.type) && this.currentTime) {
-        newDate.setHours(index$1.getHours(this.currentTime), index$1.getMinutes(this.currentTime));
+        newDate.setHours(overlays.getHours(this.currentTime), overlays.getMinutes(this.currentTime));
       }
       const value = formInputHelpers.convertValueForInputType(newDate, this.type, this.useISOString);
       this.currentTime = value;
@@ -264,7 +265,7 @@ const YooFormDateTimeComponent = class {
       // adapt the new min of the time picker each time a new date is chosen into the calendar
       if (this.isSchedule) {
         const now = new Date();
-        this.timePicker.minDate = index$1.isDateAfter(this.value, now, 'day') ? index$1.startOf(now, 'day') : new Date();
+        this.timePicker.minDate = overlays.isDateAfter(this.value, now, 'day') ? overlays.startOf(now, 'day') : new Date();
       }
     }
   }
@@ -272,17 +273,17 @@ const YooFormDateTimeComponent = class {
     const dateRange = event.detail;
     let lowerBound = dateRange[0].date;
     if (lowerBound) {
-      lowerBound = index$1.startOf(lowerBound, 'day');
+      lowerBound = overlays.startOf(lowerBound, 'day');
     }
     let upperBound = dateRange[1].date;
     if (upperBound) {
-      upperBound = index$1.endOf(upperBound, 'day');
+      upperBound = overlays.endOf(upperBound, 'day');
     }
     const formattedLowerBound = formInputHelpers.convertValueForInputType(lowerBound, 'date', this.useISOString);
     const formattedUpperBound = upperBound ? formInputHelpers.convertValueForInputType(upperBound, 'date', this.useISOString) : formattedLowerBound;
     formInputHelpers.setValueAndValidateInput([formattedLowerBound, formattedUpperBound], this);
     // IOS display bug - it was not refreshing the values without it
-    if (index$1.isIOS() && this.inputField) {
+    if (overlays.isIOS() && this.inputField) {
       this.inputField.value = this.getDisplayValue();
     }
   }
@@ -292,7 +293,7 @@ const YooFormDateTimeComponent = class {
     if (this.isTimeInput(this.type)) {
       formInputHelpers.setValueAndValidateInput(this.currentTime, this);
     }
-    else if ((this.isSchedule && (!index$1.isNativeMobile() || index$1.isAndroid())) || this.isDateTimeInput(this.type)) {
+    else if ((this.isSchedule && (!overlays.isNativeMobile() || overlays.isAndroid())) || this.isDateTimeInput(this.type)) {
       // Here we simply increment/decrement time to avoid changing dates
       const updatedValue = this.updateTimeValue(this.value, this.currentTime);
       formInputHelpers.setValueAndValidateInput(formInputHelpers.convertValueForInputType(updatedValue, this.type, this.useISOString), this);
@@ -300,7 +301,7 @@ const YooFormDateTimeComponent = class {
   }
   onCalendarDoneClicked() {
     if (this.dialog && this.type === 'date') {
-      index$1.closeModal(null, this.dialog);
+      overlays.closeModal(null, this.dialog);
     }
   }
   onAmPmToggled(event) {
@@ -308,12 +309,12 @@ const YooFormDateTimeComponent = class {
       const timePeriod = event === null || event === void 0 ? void 0 : event.detail;
       if (timePeriod === 'AM') {
         // We subtract 12h to the current time
-        const updatedDate = index$1.dateSub(this.value, 'h', 12);
+        const updatedDate = overlays.dateSub(this.value, 'h', 12);
         formInputHelpers.setValueAndValidateInput(formInputHelpers.convertValueForInputType(updatedDate, this.type, this.useISOString), this);
       }
       else if (timePeriod === 'PM') {
         // We add 12h to the current time
-        const updatedDate = index$1.dateAdd(this.value, 'h', 12);
+        const updatedDate = overlays.dateAdd(this.value, 'h', 12);
         formInputHelpers.setValueAndValidateInput(formInputHelpers.convertValueForInputType(updatedDate, this.type, this.useISOString), this);
       }
     }
@@ -322,7 +323,7 @@ const YooFormDateTimeComponent = class {
     if (!this.isShowingOcr) {
       this.isShowingOcr = true;
       let dialog = document.createElement('yoo-form-barcode-dialog');
-      dialog.hasScandit = index$1.getSession().hasScandit;
+      dialog.hasScandit = overlays.getSession().hasScandit;
       dialog.mainMode = 'ocr';
       const scannedSuccessListener = (ev) => {
         this.isShowingOcr = false;
@@ -330,10 +331,10 @@ const YooFormDateTimeComponent = class {
           formInputHelpers.setValueAndValidateInput(ev.detail, this);
           this.value = ev.detail;
         }
-        index$1.closeModal(null, dialog);
+        overlays.closeModal(null, dialog);
       };
       dialog.addEventListener('scannedSuccess', scannedSuccessListener);
-      index$1.showModal(dialog).then(() => {
+      overlays.showModal(dialog).then(() => {
         if (dialog) {
           dialog.removeEventListener('scannedSuccess', scannedSuccessListener);
           dialog = null;
@@ -343,10 +344,10 @@ const YooFormDateTimeComponent = class {
   }
   renderInputField() {
     const displayValue = this.getDisplayValue();
-    return (index.h("input", { name: "datetime", class: this.isNativeMobileDatePicker ? 'native' : '', readonly: true, ref: (el) => (this.inputField = el), placeholder: !this.placeholdertolabel ? index$1.translate(this.placeholder) : '', value: displayValue, required: this.required, onInput: () => this.onInputChanged(), onFocus: () => formInputHelpers.onInputFocused(this, '.outer-container'), onClick: (ev) => this.onInputClick(ev), tabindex: this.inputTabIndex }));
+    return (index.h("input", { name: "datetime", class: this.isNativeMobileDatePicker ? 'native' : '', readonly: true, ref: (el) => (this.inputField = el), placeholder: !this.placeholdertolabel ? overlays.translate(this.placeholder) : '', value: displayValue, required: this.required, onInput: () => this.onInputChanged(), onFocus: () => formInputHelpers.onInputFocused(this, '.outer-container'), onClick: (ev) => this.onInputClick(ev), tabindex: this.inputTabIndex }));
   }
   renderNativeInput() {
-    return (index.h("div", { ref: (el) => (this.outerContainer = el), class: "outer-container" }, this.iconPrefix && (index.h("div", { class: "icon-prefix", onClick: (ev) => this.onInputClick(ev) }, index.h("yoo-icon", { name: this.iconPrefix, size: this.getIconSize() }))), index.h("div", { class: "input-container flex" }, this.renderInputField()), this.validity === false && (index.h("div", { class: "icon-suffix invalid" }, index.h("yoo-icon", { name: "rejected", size: this.getIconSize(), color: "danger" }))), !this.isEmpty && this.clearable && (index.h("div", { class: "icon-suffix clear", onClick: (ev) => this.onClearClicked(ev) }, index.h("yoo-icon", { name: "cross", size: this.getIconSize() }))), this.allowOcr && index$1.getSession().hasScandit && (index.h("div", { class: "icon-suffix ocr", onClick: () => this.onTriggerOCR() }, index.h("yoo-icon", { name: "camera", size: this.getIconSize() }))), !index$1.isNativeMobile() && (index.h("div", { class: "icon-suffix toggle", onClick: (event) => this.onToggle(event) }, index.h("yoo-icon", { name: this.customDatePickerArrow, size: this.getIconSize() })))));
+    return (index.h("div", { ref: (el) => (this.outerContainer = el), class: "outer-container" }, this.iconPrefix && (index.h("div", { class: "icon-prefix", onClick: (ev) => this.onInputClick(ev) }, index.h("yoo-icon", { name: this.iconPrefix, size: this.getIconSize() }))), index.h("div", { class: "input-container flex" }, this.renderInputField()), this.validity === false && (index.h("div", { class: "icon-suffix invalid" }, index.h("yoo-icon", { name: "rejected", size: this.getIconSize(), color: "danger" }))), !this.isEmpty && this.clearable && (index.h("div", { class: "icon-suffix clear", onClick: (ev) => this.onClearClicked(ev) }, index.h("yoo-icon", { name: "cross", size: this.getIconSize() }))), this.allowOcr && overlays.getSession().hasScandit && (index.h("div", { class: "icon-suffix ocr", onClick: () => this.onTriggerOCR() }, index.h("yoo-icon", { name: "camera", size: this.getIconSize() }))), !overlays.isNativeMobile() && (index.h("div", { class: "icon-suffix toggle", onClick: (event) => this.onToggle(event) }, index.h("yoo-icon", { name: this.customDatePickerArrow, size: this.getIconSize() })))));
   }
   renderReadonly() {
     return index.h("div", { class: "readonly" }, this.getReadOnlyValue());

package/dist/cjs/yoo-form-daterange.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const formDaterangeCss = ":host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background:var(--light, #ffffff);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .dropdown-container{display:-ms-flexbox;display:flex;-ms-flex:33%;flex:33%}:host .outer-container .dropdown-container .mode-text{-ms-flex:1;flex:1}:host .outer-container .bottom-container{padding:1rem}:host .outer-container .bottom-container .timespan-text{margin-bottom:var(--spacing-04, 0.25rem)}:host .outer-container .dynamic-checkbox-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:1rem}:host .outer-container .dynamic-checkbox-container yoo-form-checkbox{margin-right:0.5rem}:host .outer-container .dynamic-timescale-container{display:-ms-flexbox;display:flex}:host .outer-container .dynamic-timescale-container .timespan-container{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;margin-right:var(--spacing-16, 1rem)}:host .outer-container .dynamic-timescale-container .timespan-container .timespan-text{margin-bottom:var(--spacing-04, 0.25rem)}:host .outer-container .dynamic-timescale-container .timescale-container{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host .outer-container .dynamic-timescale-container .timescale-container .timescale-text{-ms-flex:0.75;flex:0.75;margin-bottom:var(--spacing-04, 0.25rem)}:host .outer-container .dynamic-timescale-container .timescale-container .timescale-selected{display:-ms-flexbox;display:flex}:host .outer-container .dynamic-timescale-container .timescale-container .timescale-selected .timescale-selected-text{margin-right:var(--spacing-08, 0.5rem)}:host(.web){font-size:var(--font-size-14, 0.875rem)}";
 
@@ -24,8 +25,8 @@ const YooFormDateRangeComponent = class {
     this.selectedTimescale = 'month';
     this.selectedTimespan = 1;
     this.modes = [
-      { title: index$1.translate('YOOBICLAST'), value: 'dynamic' },
-      { title: index$1.translate('BETWEEN'), value: 'calendar' }
+      { title: overlays.translate('YOOBICLAST'), value: 'dynamic' },
+      { title: overlays.translate('BETWEEN'), value: 'calendar' }
     ];
   }
   componentWillLoad() {
@@ -36,7 +37,7 @@ const YooFormDateRangeComponent = class {
       this.dateRangeMode = this.selectedDateRange.mode || 'dynamic';
       if (!this.selectedDateRange.endDate && !this.selectedDateRange.startDate && this.selectedDateRange.mode === 'dynamic') {
         this.selectedDateRange.endDate = new Date();
-        this.selectedDateRange.startDate = index$1.dateSub(new Date(), this.selectedDateRange.timescale, this.selectedDateRange.amount);
+        this.selectedDateRange.startDate = overlays.dateSub(new Date(), this.selectedDateRange.timescale, this.selectedDateRange.amount);
       }
     }
     else {
@@ -100,7 +101,7 @@ const YooFormDateRangeComponent = class {
     this.onUpdateValue();
   }
   onUpdateValue() {
-    const dates = index$1.getDatesFromDateRange(this.selectedDateRange);
+    const dates = overlays.getDatesFromDateRange(this.selectedDateRange);
     this.selectedDateRange = this.selectedDateRange || this.getDefaultDateRange();
     this.selectedDateRange.startDate = dates.startDate;
     this.selectedDateRange.endDate = dates.endDate;
@@ -116,12 +117,12 @@ const YooFormDateRangeComponent = class {
     }
     else {
       endDate = new Date();
-      startDate = index$1.dateSub(endDate, this.selectedTimescale, this.selectedTimespan);
+      startDate = overlays.dateSub(endDate, this.selectedTimescale, this.selectedTimespan);
       return [startDate, endDate];
     }
   }
   renderCalendarMode() {
-    return (index.h("div", { class: "bottom-container" }, index.h("div", { class: "timespan-text" }, index.h("span", null, index$1.translate('DATES'))), index.h("yoo-form-date-time", { size: this.size, onInputChanged: (ev) => this.onCalendarDateChange(ev), isRange: true, clearable: true, value: this.getRangeFromSelectedDateRange(), inputTabIndex: this.inputTabIndex + 1 })));
+    return (index.h("div", { class: "bottom-container" }, index.h("div", { class: "timespan-text" }, index.h("span", null, overlays.translate('DATES'))), index.h("yoo-form-date-time", { size: this.size, onInputChanged: (ev) => this.onCalendarDateChange(ev), isRange: true, clearable: true, value: this.getRangeFromSelectedDateRange(), inputTabIndex: this.inputTabIndex + 1 })));
   }
   renderNumberInput() {
     return (index.h("yoo-form-input", { size: this.size, inputTabIndex: this.inputTabIndex, type: "number", min: "1", max: "99", value: this.selectedTimespan, onInputChanged: (event) => this.onTimespanChanged(event) }));
@@ -130,19 +131,19 @@ const YooFormDateRangeComponent = class {
     return (index.h("yoo-form-number-picker", { size: this.size, min: 1, max: 99, value: this.selectedTimespan, onInputChanged: (event) => this.onTimespanChanged(event) }));
   }
   renderTimespan() {
-    return (index.h("div", { class: "timespan-container" }, index.h("div", { class: "timespan-text" }, index.h("span", null, index$1.translate('TIMESPAN'))), index$1.isWeb(this.el) ? this.renderNumberInput() : this.renderNumberPicker()));
+    return (index.h("div", { class: "timespan-container" }, index.h("div", { class: "timespan-text" }, index.h("span", null, overlays.translate('TIMESPAN'))), overlays.isWeb(this.el) ? this.renderNumberInput() : this.renderNumberPicker()));
   }
   renderTimeScaleAutocomplete() {
-    return (index.h("yoo-form-autocomplete", { size: index$1.isWeb(this.el) ? 'medium' : 'large', values: ['day', 'week', 'month', 'year'], value: this.selectedTimescale, useTranslate: true, iconPrefix: "calendar", displayType: "card-list", isLocal: true, hideHeader: true, onInputChanged: (ev) => this.onTimescaleChanged(ev) }));
+    return (index.h("yoo-form-autocomplete", { size: overlays.isWeb(this.el) ? 'medium' : 'large', values: ['day', 'week', 'month', 'year'], value: this.selectedTimescale, useTranslate: true, iconPrefix: "calendar", displayType: "card-list", isLocal: true, hideHeader: true, onInputChanged: (ev) => this.onTimescaleChanged(ev) }));
   }
   renderTimeScale() {
-    return (index.h("div", { class: "timescale-container" }, index.h("div", { class: "timescale-text" }, index.h("span", null, index$1.translate('TIMESCALE'))), this.renderTimeScaleAutocomplete()));
+    return (index.h("div", { class: "timescale-container" }, index.h("div", { class: "timescale-text" }, index.h("span", null, overlays.translate('TIMESCALE'))), this.renderTimeScaleAutocomplete()));
   }
   renderNotSliding() {
     var _a;
     return [
       index.h("yoo-form-checkbox", { value: (_a = this.selectedDateRange) === null || _a === void 0 ? void 0 : _a.notsliding, onInputChanged: (ev) => this.onNotSlidingChanged(ev) }),
-      index.h("span", null, index$1.translate('NOTSLIDING'))
+      index.h("span", null, overlays.translate('NOTSLIDING'))
     ];
   }
   renderDynamicTimescaleMode() {
@@ -156,7 +157,7 @@ const YooFormDateRangeComponent = class {
     return index.h("yoo-tabs", { class: "no-margin", tabs: this.modes, initialIndex: selectedIndex, onTabSelected: (event) => this.onTabSelected(event) });
   }
   renderReadonly() {
-    return index.h("div", { class: "readonly" }, index$1.getDatesRangeDisplay(this.value));
+    return index.h("div", { class: "readonly" }, overlays.getDatesRangeDisplay(this.value));
   }
   renderEditable() {
     return (index.h("div", { class: "outer-container" }, this.renderModeChoice(), this.isCalendarMode() ? this.renderCalendarMode() : this.renderDynamicTimescaleMode()));