@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-calendar.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const calendarCss = ":host{display:block;opacity:1}:host .unavailable{color:var(--stable, #adadad)}:host .toolbar-tools{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}:host .toolbar-tools yoo-tooltip{padding:0.25rem}:host .toolbar-tools yoo-tooltip yoo-button{padding:0}:host .toolbar-tools h2{font-weight:var(--font-weight-400, 400);text-transform:capitalize}:host .toolbar-tools yoo-button{padding:0.25rem}:host .toolbar-tools .active-day{-ms-flex:1 2 auto;flex:1 2 auto;text-align:center}:host .days{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .week-header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;min-height:1.875rem;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-14, 0.875rem)}:host .week-header .day{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0.3125rem;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);font-style:normal;text-align:center}:host .calendar-container.modern yoo-ion-slide{width:auto !important}:host .week{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--spacing-04, 0.25rem) 0;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4))}:host .week .day{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3.5rem;text-align:center;cursor:pointer}:host .week .day.active .day-number{width:50%;max-width:var(--spacing-24, 1.5rem);padding:5%}:host .week .day:not(.in-range) .day-number:after{display:block;padding-top:100%;content:\"\"}:host .week .day.grey-day{opacity:0.3}:host .week .day.today.active .day-number{color:var(--light, #ffffff);background:var(--app-color, #5a30f4)}:host .week .day.today .day-number{color:var(--app-color, #5a30f4)}:host .week .day.today .marker{background:var(--app-color, #5a30f4)}:host .week .day.single-range .day-number{color:var(--light, #ffffff);background:var(--app-color, #5a30f4)}:host .week .day.active .day-number{color:var(--light, #ffffff);background:var(--dark, #000000)}:host .week .day .day-number{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-18, 1.125rem);font-style:normal;line-height:normal}:host .week .marker{width:0.375rem;height:0.375rem;margin-top:0;margin-bottom:var(--spacing-04, 0.25rem);background:var(--app-color-10, rgba(90, 48, 244, 0.1));border-radius:50%}:host .week.modern .day{-ms-flex-pack:center;justify-content:center;height:auto;margin-right:var(--spacing-08, 0.5rem);color:var(--dark, #000000)}:host .week.modern .day .day-inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;min-width:var(--spacing-32, 2rem);max-width:var(--spacing-32, 2rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);background-color:var(--light, #ffffff);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}:host .week.modern .day .day-inner .title{font-size:var(--font-size-24, 1.5rem)}:host .week.modern .day .day-inner .secondary-title{font-size:var(--font-size-14, 0.875rem)}:host .week.modern .day .day-inner.unavailable{color:var(--stable, #adadad);background-color:var(--stable-light, #f1f1f1)}:host .week.modern .day.active{color:var(--light, #ffffff)}:host .week.modern .day.active .day-inner{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host .week.modern .day.active .day-inner.unavailable{color:var(--light, #ffffff)}:host .week.modern .day.grey-day{color:var(--stable, #adadad);opacity:1}:host .ion-slide{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .mobile-calendar-header{position:-webkit-sticky;position:sticky;top:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;width:100%;margin-bottom:1.25rem;background:var(--light, #ffffff);border-top:0.625rem solid var(--light, #ffffff)}:host .mobile-calendar-header .active-month-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .mobile-calendar-header .active-month-container.flex{-ms-flex:1;flex:1}:host .mobile-calendar-header .active-month-container .prev-month{height:1.5rem;padding:0rem 0.3125rem 0rem 1rem}:host .mobile-calendar-header .active-month-container .active-month{color:var(--dark, #000000);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-20, 1.25rem);font-style:normal}:host .mobile-calendar-header .done{margin-right:var(--spacing-08, 0.5rem)}:host .mobile-calendar-header .calendar-tools{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:end;justify-content:flex-end}:host .mobile-calendar-header .calendar-tools .calendar-toggle{padding-right:var(--spacing-16, 1rem);color:var(--stable-alt, #d0d0d0);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);font-style:normal}:host .mobile-calendar-header .calendar-tools .calendar-toggle:last-child{padding-right:0.4375rem}:host .mobile-calendar-header .calendar-tools .calendar-toggle.today:hover{color:var(--app-color, #5a30f4)}:host .mobile-calendar-header .calendar-tools .calendar-toggle.active{color:var(--app-color, #5a30f4)}:host .mobile-days{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;color:var(--dark, #000000)}:host .mobile-days .day-number{width:var(--spacing-16, 1rem);border-radius:50%}:host .mobile-days .in-range .day-number{width:100%;color:var(--light, #ffffff) !important;background:var(--app-color, #5a30f4);border-radius:0;opacity:0.6}:host .mobile-days .in-range.first-day{position:relative;background:none}:host .mobile-days .in-range.first-day .day-number{border-radius:var(--spacing-08, 0.5rem) 0 0 var(--spacing-08, 0.5rem)}:host .mobile-days .in-range.first-day:after{position:absolute;right:0;margin-left:0.8125rem;background:var(--app-color, #5a30f4);opacity:0.6;content:\"\"}:host .mobile-days .in-range.last-day{position:relative;background:none}:host .mobile-days .in-range.last-day .day-number{border-radius:0 var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0}:host .mobile-days .in-range.last-day:before{position:absolute;margin-right:var(--spacing-16, 1rem);background:var(--app-color, #5a30f4);opacity:0.6;content:\"\"}:host .mobile-days .in-range.first-day .day-number,:host .mobile-days .in-range.last-day .day-number{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-18, 1.125rem);font-style:normal;line-height:normal;z-index:1;color:var(--light, #ffffff);background:var(--app-color, #5a30f4);opacity:1}:host([hidden]){display:none}:host([display-mode=week]) .week{border-bottom:none}:host([display-mode=month]) .calendar-container .swiper-control{padding-top:var(--spacing-16, 1rem)}:host([is-date-picker]){min-height:28.75rem}:host([modern-date-picker]){min-height:0}:host([is-range]) .week .day.grey-day:not(.diff-month){pointer-events:none}:host(.date) .mobile-days .week:last-child{border-bottom:none}:host(.stable-light) .mobile-days .week-header .day{background:var(--stable-light, #f1f1f1)}:host(.web) .days{height:100%}:host(.web) .days .week-header{margin-right:0.75rem;margin-left:0.75rem}:host(.web) .days yoo-ion-scroll .web-days{margin-bottom:var(--spacing-16, 1rem)}:host(.web) .days yoo-ion-scroll .web-days.hidden{display:none;opacity:0}:host(.web) .days yoo-ion-scroll .web-days.space .week{padding-bottom:var(--spacing-08, 0.5rem)}:host(.web) .days yoo-ion-scroll .active-month{margin-left:var(--spacing-16, 1rem);font-size:var(--font-size-18, 1.125rem)}:host(.web) .days yoo-ion-scroll .active-month.flex{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin:0;padding:0 var(--spacing-04, 0.25rem);font-size:var(--font-size-16, 1rem)}:host(.web) .days yoo-ion-scroll .week .day .day-number{font-size:var(--font-size-14, 0.875rem)}:host(.web) .days yoo-ion-scroll .week .marker{width:0.375rem;height:0.375rem}:host(.web[modern-date-picker]){display:-ms-flexbox;display:flex}:host(.web[modern-date-picker]) .next-month,:host(.web[modern-date-picker]) .prev-month{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.web[modern-date-picker]) .next-month yoo-tag,:host(.web[modern-date-picker]) .prev-month yoo-tag{-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));cursor:pointer}:host(.web[modern-date-picker]) .prev-month{padding-right:var(--spacing-08, 0.5rem)}:host(.web[modern-date-picker]) .next-month{padding-left:var(--spacing-08, 0.5rem)}:host(.web.calendar-picker){min-height:17.3125rem}:host(.web.calendar-picker) .mobile-calendar-header .active-month-container .prev-month{padding:0rem 0.3125rem 0rem 0rem}:host(.web.calendar-picker) .week-header{margin-bottom:var(--spacing-04, 0.25rem)}:host(.web.calendar-picker) .week-header .day{font-size:var(--font-size-14, 0.875rem)}:host(.web.calendar-picker) .week .day{height:2rem;font-size:var(--font-size-14, 0.875rem)}:host(.web.calendar-picker) .week .day .day-number{font-size:var(--font-size-14, 0.875rem)}:host(.web.calendar-picker) .week .day .marker{display:none}:host(.web.calendar-picker) .week .day.active .day-number{background:var(--app-color, #5a30f4)}@media only screen and (max-width: 350px){:host .mobile-calendar-header .calendar-tools .calendar-toggle{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:4rem}}:host([size=extra-small]){width:100%;min-height:unset;border:solid 0.0625rem var(--stable-light, #f1f1f1);border-radius:0.125rem}:host([size=extra-small]) div.mobile-calendar-header{margin:1rem 0 0 0;border-top:none}:host([size=extra-small]) div.active-month-container{-ms-flex-pack:justify;justify-content:space-between;width:100%}:host([size=extra-small]) .active-month-container span.prev-month{padding:0 0.5rem;color:var(--dark, #000000);cursor:pointer}:host([size=extra-small]) .active-month-container span.active-month{font-weight:bold;font-size:0.75rem}:host([size=extra-small]) .active-month-container span.next-month{padding:0 0.5rem;color:var(--dark, #000000);cursor:pointer}:host([size=extra-small]) .day-text{color:var(--text-color, #807f83);font-size:0.75rem}:host([size=extra-small]) .week{padding-top:var(--spacing-08, 0.5rem)}:host([size=extra-small]) .week .day{height:unset}:host([size=extra-small]) .week .day div.day-number{font-size:0.75rem;border-radius:0.125rem}:host([size=extra-small]) .week .day.active .day-number{background:var(--app-color, #5a30f4)}:host([size=extra-small]) .in-range.first-day:after,:host([size=extra-small]) .in-range.last-day:before{background:none}:host([size=small]){width:100%;min-height:unset;border:solid 0.0625rem var(--stable-light, #f1f1f1);border-radius:0.125rem}:host([size=small]) div.mobile-calendar-header{margin:1rem 0 0 0;border-top:none}:host([size=small]) div.active-month-container{-ms-flex-pack:justify;justify-content:space-between;width:100%}:host([size=small]) .active-month-container span.prev-month{padding:0 0.5rem;color:var(--dark, #000000);cursor:pointer}:host([size=small]) .active-month-container span.active-month{font-size:0.75rem}:host([size=small]) .active-month-container span.next-month{padding:0 0.5rem;color:var(--dark, #000000);cursor:pointer}:host([size=small]) .day-text{color:var(--text-color, #807f83);font-size:0.75rem}:host([size=small]) .week{border-bottom:none}:host([size=small]) .week .day{height:unset}:host([size=small]) .week .day div.day-number{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--font-size-12, 0.75rem)}:host([size=small]) .week .day.active .day-number{background:var(--app-color, #5a30f4)}:host([size=small]) .in-range.first-day:after,:host([size=small]) .in-range.last-day:before{background:none}:host(.no-border){border:none}:host(.no-margin-top) .mobile-calendar-header{margin-top:0 !important}:host(.padding-bottom){padding-bottom:var(--spacing-08, 0.5rem)}";
 
@@ -28,7 +29,7 @@ const YooCalendarComponent = class {
     this.isRange = false;
     this.size = 'medium';
     this.slideChanged = true;
-    this.weekdays = index$1.getWeekDays();
+    this.weekdays = overlays.getWeekDays();
     this.renderedMonths = [-1, 0, 1];
     this.initialSlide = 1;
     this.cachedSlides = 1;
@@ -36,15 +37,15 @@ const YooCalendarComponent = class {
     this.singleRange = false;
     this.calendarWebTabs = [
       {
-        title: index$1.translate('YOOBICTODAY'),
+        title: overlays.translate('YOOBICTODAY'),
         value: 'today'
       },
       {
-        title: index$1.translate('YOOBICWEEK'),
+        title: overlays.translate('YOOBICWEEK'),
         value: 'week'
       },
       {
-        title: index$1.translate('MONTH'),
+        title: overlays.translate('MONTH'),
         value: 'month'
       }
     ];
@@ -62,13 +63,13 @@ const YooCalendarComponent = class {
     return this.isDatePicker && this.modernDatePicker && this.isWeekDisplay;
   }
   async setActiveDay(day) {
-    const prevActiveDay = index$1.dateAdd(day, this.displayMode, -1);
-    const nextActiveDay = index$1.dateAdd(day, this.displayMode, 1);
+    const prevActiveDay = overlays.dateAdd(day, this.displayMode, -1);
+    const nextActiveDay = overlays.dateAdd(day, this.displayMode, 1);
     if (!this.initialActiveDay) {
       this.initialActiveDay = day;
     }
-    const monthStartDay = index$1.startOf(day, 'month');
-    const monthEndDay = index$1.endOf(day, 'month');
+    const monthStartDay = overlays.startOf(day, 'month');
+    const monthEndDay = overlays.endOf(day, 'month');
     const [previousMonthStartDay, previousMonthEndDay, timeSpanStart, timeSpanEnd, nextMonthStartDay, nextMonthEndDay] = this.generateTimespan(day);
     // Current month
     const [weeks, greyDays] = this.generateCalendarDays(timeSpanStart, timeSpanEnd);
@@ -80,7 +81,7 @@ const YooCalendarComponent = class {
     // Next Month
     const [nextWeeks, nextGreyDays] = this.generateCalendarDays(nextMonthStartDay, nextMonthEndDay);
     // These variables will always be undefined on mobile but added a check just to be safe
-    if ((!this.loadedNextMonthDay && !this.loadedPreviousMonthDay) || index$1.isIonic(this.host)) {
+    if ((!this.loadedNextMonthDay && !this.loadedPreviousMonthDay) || overlays.isIonic(this.host)) {
       this.activeDays = [prevActiveDay, day, nextActiveDay];
       this.weeks = weeks;
       this.renderedMonthsWeeks = [prevWeeks, this.weeks, nextWeeks];
@@ -106,24 +107,24 @@ const YooCalendarComponent = class {
       _activeDay = this.activeDay[0];
     }
     else {
-      this.activeDay ? (_activeDay = this.activeDay) : this.minDate && index$1.isDateAfter(this.minDate, new Date()) ? (_activeDay = this.minDate) : (_activeDay = new Date());
+      this.activeDay ? (_activeDay = this.activeDay) : this.minDate && overlays.isDateAfter(this.minDate, new Date()) ? (_activeDay = this.minDate) : (_activeDay = new Date());
     }
     if (this.dateRange) {
-      this.rangeLowerBound = index$1.resetTime(this.dateRange[0]);
-      this.rangeUpperBound = index$1.resetTime(this.dateRange[1]);
+      this.rangeLowerBound = overlays.resetTime(this.dateRange[0]);
+      this.rangeUpperBound = overlays.resetTime(this.dateRange[1]);
     }
-    if (this.maxDate && index$1.isDateAfter(_activeDay, this.maxDate)) {
+    if (this.maxDate && overlays.isDateAfter(_activeDay, this.maxDate)) {
       _activeDay = this.maxDate;
       this.setActiveDay(_activeDay);
     }
-    else if (this.minDate && index$1.isDateBefore(_activeDay, this.minDate)) {
+    else if (this.minDate && overlays.isDateBefore(_activeDay, this.minDate)) {
       _activeDay = this.minDate;
       this.setActiveDay(_activeDay);
     }
     else {
       this.setActiveDay(_activeDay);
     }
-    this.activeYear = index$1.getYear(index$1.dateFormat(this.activeDayState, 'YYYY'));
+    this.activeYear = overlays.getYear(overlays.dateFormat(this.activeDayState, 'YYYY'));
   }
   componentDidLoad() {
     if (this.calendarScroll && !this.useModernDatePickerWeek) {
@@ -145,21 +146,21 @@ const YooCalendarComponent = class {
     }
   }
   isActiveDay(day) {
-    return index$1.dateFormat(day, 'L') === index$1.dateFormat(this.activeDayState, 'L');
+    return overlays.dateFormat(day, 'L') === overlays.dateFormat(this.activeDayState, 'L');
   }
   isNextYear(day) {
-    const nextYearFromToday = index$1.getYear(index$1.dateFormat(day, 'YYYY'));
+    const nextYearFromToday = overlays.getYear(overlays.dateFormat(day, 'YYYY'));
     return this.activeYear < nextYearFromToday;
   }
   isPreviousYear(day) {
-    const lastYearFromToday = index$1.getYear(index$1.dateFormat(day, 'YYYY'));
+    const lastYearFromToday = overlays.getYear(overlays.dateFormat(day, 'YYYY'));
     return this.activeYear > lastYearFromToday;
   }
   isInDateRange(date, rangeLowerBound, rangeUpperBound) {
-    if (index$1.isDateBefore(date, rangeLowerBound)) {
+    if (overlays.isDateBefore(date, rangeLowerBound)) {
       return false;
     }
-    if (this.rangeUpperBound ? index$1.isDateAfter(date, rangeUpperBound) : index$1.isDateAfter(date, rangeLowerBound)) {
+    if (this.rangeUpperBound ? overlays.isDateAfter(date, rangeUpperBound) : overlays.isDateAfter(date, rangeLowerBound)) {
       return false;
     }
     // Date is in the range
@@ -168,28 +169,28 @@ const YooCalendarComponent = class {
   // Grey days are either not in the current month, below the min date, above the max date or closing days
   isGreyDay(day, monthIndex) {
     var _a;
-    if (this.minDate && index$1.isDateBefore(day, this.minDate) && !index$1.isSameDate(day, index$1.resetTime(this.minDate))) {
+    if (this.minDate && overlays.isDateBefore(day, this.minDate) && !overlays.isSameDate(day, overlays.resetTime(this.minDate))) {
       return true;
     }
-    if (this.maxDate && index$1.isDateAfter(day, this.maxDate) && !index$1.isSameDate(day, index$1.resetTime(this.minDate))) {
+    if (this.maxDate && overlays.isDateAfter(day, this.maxDate) && !overlays.isSameDate(day, overlays.resetTime(this.minDate))) {
       return true;
     }
-    if (((_a = this.closingDays) === null || _a === void 0 ? void 0 : _a.length) && this.closingDays.includes(index$1.day(day))) {
+    if (((_a = this.closingDays) === null || _a === void 0 ? void 0 : _a.length) && this.closingDays.includes(overlays.day(day))) {
       return true;
     }
-    const dayToCheck = index$1.dateFormat(day, 'L');
+    const dayToCheck = overlays.dateFormat(day, 'L');
     return this.renderedGreyDays[monthIndex].indexOf(dayToCheck) > -1;
   }
   /**
    * Generate the start and end date for 3 months (previous, current, next)
    */
   generateTimespan(day) {
-    const timeSpanStart = index$1.startOf(day, this.displayMode);
-    const timeSpanEnd = index$1.endOf(day, this.displayMode);
-    const previousMonthStartDay = index$1.dateSub(timeSpanStart, `${this.displayMode}s`, 1);
-    const previousMonthEndDay = index$1.dateSub(timeSpanEnd, `${this.displayMode}s`, 1);
-    const nextMonthStartDay = index$1.dateAdd(timeSpanStart, `${this.displayMode}s`, 1);
-    const nextMonthEndDay = index$1.dateAdd(timeSpanEnd, `${this.displayMode}s`, 1);
+    const timeSpanStart = overlays.startOf(day, this.displayMode);
+    const timeSpanEnd = overlays.endOf(day, this.displayMode);
+    const previousMonthStartDay = overlays.dateSub(timeSpanStart, `${this.displayMode}s`, 1);
+    const previousMonthEndDay = overlays.dateSub(timeSpanEnd, `${this.displayMode}s`, 1);
+    const nextMonthStartDay = overlays.dateAdd(timeSpanStart, `${this.displayMode}s`, 1);
+    const nextMonthEndDay = overlays.dateAdd(timeSpanEnd, `${this.displayMode}s`, 1);
     return [previousMonthStartDay, previousMonthEndDay, timeSpanStart, timeSpanEnd, nextMonthStartDay, nextMonthEndDay];
   }
   /**
@@ -210,7 +211,7 @@ const YooCalendarComponent = class {
     weeks = weeks.filter((w) => w.length > 0);
     let lastWeek = weeks[weeks.length - 1];
     let nextMonthGreyDays = [];
-    const firstDayInNextMonth = index$1.dateAdd(endDay, 'days', 1);
+    const firstDayInNextMonth = overlays.dateAdd(endDay, 'days', 1);
     [lastWeek, nextMonthGreyDays] = this.generateNextMonthGreyDays(firstDayInNextMonth, lastWeek);
     greyDays = [...greyDays, ...nextMonthGreyDays];
     weeks[weeks.length - 1] = lastWeek;
@@ -221,12 +222,12 @@ const YooCalendarComponent = class {
     const previousMonthGreyDays = [];
     let count = 0;
     // First day of the current week
-    const indexOfStartWeekDay = this.weekdays.indexOf(lodash.capitalize(index$1.dateFormat(currentDay, 'dddd')));
+    const indexOfStartWeekDay = this.weekdays.indexOf(lodash.capitalize(overlays.dateFormat(currentDay, 'dddd')));
     if (indexOfStartWeekDay > 0) {
       while (count < indexOfStartWeekDay) {
         // All all days of the last month which belong to the same week as the current day to the display and record them as greyed out
-        const dayInLastMonth = index$1.dateSub(currentDay, 'days', indexOfStartWeekDay - count);
-        previousMonthGreyDays.push(index$1.dateFormat(dayInLastMonth, 'L'));
+        const dayInLastMonth = overlays.dateSub(currentDay, 'days', indexOfStartWeekDay - count);
+        previousMonthGreyDays.push(overlays.dateFormat(dayInLastMonth, 'L'));
         firstWeek.push(dayInLastMonth);
         count += 1;
       }
@@ -239,7 +240,7 @@ const YooCalendarComponent = class {
     while (currentDay <= endDay) {
       weeks[weekIndex].push(currentDay);
       // Increment the day
-      currentDay = index$1.dateAdd(currentDay, 'days', 1);
+      currentDay = overlays.dateAdd(currentDay, 'days', 1);
       count += 1;
       if (count > 6) {
         // reset count, increment week index
@@ -254,8 +255,8 @@ const YooCalendarComponent = class {
     let endCount = 0;
     const nextMonthGreyDays = [];
     while ((lastWeek === null || lastWeek === void 0 ? void 0 : lastWeek.length) < 7) {
-      const dayInNextMonth = index$1.dateAdd(firstDayInNextMonth, 'days', endCount);
-      nextMonthGreyDays.push(index$1.dateFormat(dayInNextMonth, 'L'));
+      const dayInNextMonth = overlays.dateAdd(firstDayInNextMonth, 'days', endCount);
+      nextMonthGreyDays.push(overlays.dateFormat(dayInNextMonth, 'L'));
       lastWeek.push(dayInNextMonth);
       endCount += 1;
     }
@@ -298,11 +299,11 @@ const YooCalendarComponent = class {
       this.renderedMonths.shift();
     }
     // in case of a week display in "modern" style, always select the monday as it will be always visible whatever the size of the screen
-    let nextDate = index$1.dateAdd(this.activeDayState, this.displayMode, 1);
+    let nextDate = overlays.dateAdd(this.activeDayState, this.displayMode, 1);
     if (this.useModernDatePickerWeek) {
-      nextDate = index$1.startOf(nextDate, 'w');
+      nextDate = overlays.startOf(nextDate, 'w');
     }
-    if (this.maxDate && index$1.isDateAfter(index$1.dateFormat(nextDate, 'YYYY-MM-DD HH:mm'), this.maxDate)) {
+    if (this.maxDate && overlays.isDateAfter(overlays.dateFormat(nextDate, 'YYYY-MM-DD HH:mm'), this.maxDate)) {
       this.setActiveDay(this.maxDate);
     }
     else {
@@ -316,10 +317,10 @@ const YooCalendarComponent = class {
       this.renderedMonths.pop();
     }
     // in case of a week display in "modern" style, always select the monday as it will be always visible whatever the size of the screen
-    let previousDate = index$1.dateSub(this.activeDayState, this.displayMode, 1);
+    let previousDate = overlays.dateSub(this.activeDayState, this.displayMode, 1);
     if (this.useModernDatePickerWeek)
-      previousDate = index$1.startOf(previousDate, 'w');
-    if (this.minDate && index$1.isDateBefore(index$1.dateFormat(previousDate, 'YYYY-MM-DD HH:mm'), this.minDate)) {
+      previousDate = overlays.startOf(previousDate, 'w');
+    if (this.minDate && overlays.isDateBefore(overlays.dateFormat(previousDate, 'YYYY-MM-DD HH:mm'), this.minDate)) {
       this.setActiveDay(this.minDate);
     }
     else {
@@ -339,20 +340,20 @@ const YooCalendarComponent = class {
     else if (this.isRange && this.rangeUpperBound) {
       // Different conditions - here if max is defined -min always exists
       this.singleRange = false;
-      if (index$1.isDateAfter(day, this.rangeUpperBound)) {
+      if (overlays.isDateAfter(day, this.rangeUpperBound)) {
         this.rangeUpperBound = day;
       }
-      else if (index$1.isDateBefore(day, this.rangeLowerBound)) {
+      else if (overlays.isDateBefore(day, this.rangeLowerBound)) {
         this.rangeLowerBound = day;
       }
-      else if (index$1.isDateAfter(day, this.rangeLowerBound) && index$1.isDateBefore(day, this.rangeUpperBound)) {
+      else if (overlays.isDateAfter(day, this.rangeLowerBound) && overlays.isDateBefore(day, this.rangeUpperBound)) {
         this.rangeUpperBound = day;
       }
-      else if (index$1.isSameDate(day, this.rangeUpperBound)) {
+      else if (overlays.isSameDate(day, this.rangeUpperBound)) {
         this.rangeLowerBound = day;
         this.rangeUpperBound = null;
       }
-      else if (index$1.isSameDate(day, this.rangeLowerBound)) {
+      else if (overlays.isSameDate(day, this.rangeLowerBound)) {
         this.singleRange = true;
         this.rangeLowerBound = day;
         this.rangeUpperBound = null;
@@ -361,13 +362,13 @@ const YooCalendarComponent = class {
     }
     else if (this.isRange) {
       this.singleRange = false;
-      if (index$1.isDateAfter(day, this.rangeLowerBound)) {
+      if (overlays.isDateAfter(day, this.rangeLowerBound)) {
         this.rangeUpperBound = day;
       }
-      else if (index$1.isDateBefore(day, this.rangeLowerBound)) {
+      else if (overlays.isDateBefore(day, this.rangeLowerBound)) {
         this.rangeLowerBound = day;
       }
-      else if (index$1.isSameDate(day, this.rangeLowerBound)) {
+      else if (overlays.isSameDate(day, this.rangeLowerBound)) {
         // Lower Bound becomes the only selected day in this case
         this.singleRange = true;
         this.rangeLowerBound = day;
@@ -404,7 +405,7 @@ const YooCalendarComponent = class {
   }
   getDayClass(day, slideIndex) {
     let dayClass = 'day ';
-    if (index$1.isToday(day)) {
+    if (overlays.isToday(day)) {
       dayClass += 'today ';
     }
     if (this.isActiveDay(day) && !this.isRange) {
@@ -412,20 +413,20 @@ const YooCalendarComponent = class {
     }
     if (this.isGreyDay(day, slideIndex)) {
       dayClass += 'grey-day ';
-      if (!index$1.isSameMonth(day, this.activeDay) && !(this.minDate && index$1.isDateBefore(day, this.minDate, 'day')) && !(this.maxDate && index$1.isDateAfter(day, this.maxDate, 'day'))) {
+      if (!overlays.isSameMonth(day, this.activeDay) && !(this.minDate && overlays.isDateBefore(day, this.minDate, 'day')) && !(this.maxDate && overlays.isDateAfter(day, this.maxDate, 'day'))) {
         dayClass += 'diff-month ';
       }
     }
     if (this.isRange && this.rangeLowerBound && this.isInDateRange(day, this.rangeLowerBound, this.rangeUpperBound) && !this.singleRange) {
       dayClass += 'in-range ';
-      if (index$1.isSameDate(day, this.rangeLowerBound)) {
+      if (overlays.isSameDate(day, this.rangeLowerBound)) {
         dayClass += 'first-day ';
       }
-      else if (index$1.isSameDate(day, this.rangeUpperBound)) {
+      else if (overlays.isSameDate(day, this.rangeUpperBound)) {
         dayClass += 'last-day ';
       }
     }
-    else if (this.isRange && this.singleRange && index$1.isSameDate(day, this.rangeLowerBound)) {
+    else if (this.isRange && this.singleRange && overlays.isSameDate(day, this.rangeLowerBound)) {
       dayClass += 'single-range';
     }
     return dayClass;
@@ -443,11 +444,11 @@ const YooCalendarComponent = class {
   }
   renderModernWeek() {
     var _a;
-    if (index$1.isWeb(this.host)) {
+    if (overlays.isWeb(this.host)) {
       let displayPrevious = true;
       if (this.minDate) {
-        const previousSunday = index$1.dateSub(index$1.startOf(this.activeDayState, 'week'), 'd', 1);
-        displayPrevious = index$1.isDateAfter(index$1.dateFormat(previousSunday, 'YYYY-MM-DD HH:mm'), this.minDate);
+        const previousSunday = overlays.dateSub(overlays.startOf(this.activeDayState, 'week'), 'd', 1);
+        displayPrevious = overlays.isDateAfter(overlays.dateFormat(previousSunday, 'YYYY-MM-DD HH:mm'), this.minDate);
       }
       return [
         ((_a = this.renderedMonths) === null || _a === void 0 ? void 0 : _a.length) > 1 && [
@@ -486,32 +487,32 @@ const YooCalendarComponent = class {
     var _a;
     if (!day)
       return;
-    const dateNumber = index$1.dateFormat(day, 'D');
+    const dateNumber = overlays.dateFormat(day, 'D');
     const useModernDatePickerWeek = this.useModernDatePickerWeek;
     let available = true;
     if (this.minDate) {
-      available = available && index$1.isDateSameOrAfter(day, this.minDate, 'day');
+      available = available && overlays.isDateSameOrAfter(day, this.minDate, 'day');
     }
     if (this.maxDate) {
-      available = available && index$1.isDateSameOrBefore(day, this.maxDate, 'day');
+      available = available && overlays.isDateSameOrBefore(day, this.maxDate, 'day');
     }
     const clickEvent = available ? this.onSelectDay.bind(this, day) : () => null;
     // do it after assigning the event, as we still want to be able to click on the day, even if it is a closing day (UX design)
     if ((_a = this.closingDays) === null || _a === void 0 ? void 0 : _a.length) {
-      available = available && !this.closingDays.includes(index$1.day(day));
+      available = available && !this.closingDays.includes(overlays.day(day));
     }
-    return (index.h("div", { class: this.getDayClass(day, monthIndex), onClick: clickEvent }, index.h("div", { class: { 'day-inner': useModernDatePickerWeek, 'day-number': !useModernDatePickerWeek, unavailable: !available } }, useModernDatePickerWeek && index.h("div", { class: "secondary-title" }, index$1.dateFormat(day, 'ddd' || monthIndex.toString())), useModernDatePickerWeek && index.h("div", { class: "title" }, dateNumber), useModernDatePickerWeek && index.h("div", { class: "secondary-title" }, index$1.dateFormat(day, 'MMM')), useModernDatePickerWeek && this.renderMarker(day), !useModernDatePickerWeek && dateNumber), !useModernDatePickerWeek && this.renderMarker(day)));
+    return (index.h("div", { class: this.getDayClass(day, monthIndex), onClick: clickEvent }, index.h("div", { class: { 'day-inner': useModernDatePickerWeek, 'day-number': !useModernDatePickerWeek, unavailable: !available } }, useModernDatePickerWeek && index.h("div", { class: "secondary-title" }, overlays.dateFormat(day, 'ddd' || monthIndex.toString())), useModernDatePickerWeek && index.h("div", { class: "title" }, dateNumber), useModernDatePickerWeek && index.h("div", { class: "secondary-title" }, overlays.dateFormat(day, 'MMM')), useModernDatePickerWeek && this.renderMarker(day), !useModernDatePickerWeek && dateNumber), !useModernDatePickerWeek && this.renderMarker(day)));
   }
   renderMarker(day) {
     var _a, _b;
-    const hasMarker = (_a = this.markers) === null || _a === void 0 ? void 0 : _a.some((marker) => index$1.isSameDate(day, marker));
+    const hasMarker = (_a = this.markers) === null || _a === void 0 ? void 0 : _a.some((marker) => overlays.isSameDate(day, marker));
     const style = { visibility: hasMarker ? undefined : 'hidden' };
     const hidden = this.isExtraSmall && !hasMarker;
     return !!((_b = this.markers) === null || _b === void 0 ? void 0 : _b.length) && index.h("div", { class: "marker", style: style, hidden: hidden });
   }
   renderWeekHeader() {
     const dayTextFormat = (this.size === 'small' || this.isExtraSmall) ? 1 : 3;
-    return (index.h("div", { class: "week-header" }, this.weeks[0].map((day) => (index.h("div", { class: "day" }, index.h("div", { class: "day-text" }, index$1.pipes.dateFormat.transform(day, this.isExtraSmall ? 'dd' : 'ddd').slice(0, dayTextFormat)))))));
+    return (index.h("div", { class: "week-header" }, this.weeks[0].map((day) => (index.h("div", { class: "day" }, index.h("div", { class: "day-text" }, overlays.pipes.dateFormat.transform(day, this.isExtraSmall ? 'dd' : 'ddd').slice(0, dayTextFormat)))))));
   }
   renderWeeks(weeks, monthIndex) {
     return weeks.map((days) => index.h("div", { class: `week mode-${this.displayMode}` }, days.map((day) => this.renderDay(day, monthIndex))));
@@ -535,18 +536,18 @@ const YooCalendarComponent = class {
   loadMore(loadPrevious = false) {
     if (loadPrevious) {
       if (this.loadedPreviousMonthDay) {
-        this.loadedPreviousMonthDay = index$1.dateSub(this.loadedPreviousMonthDay, 'months', MONTHS_TO_ADD);
+        this.loadedPreviousMonthDay = overlays.dateSub(this.loadedPreviousMonthDay, 'months', MONTHS_TO_ADD);
       }
       else {
-        this.loadedPreviousMonthDay = index$1.dateSub(this.initialActiveDay, 'months', MONTHS_TO_ADD);
+        this.loadedPreviousMonthDay = overlays.dateSub(this.initialActiveDay, 'months', MONTHS_TO_ADD);
       }
     }
     else {
       if (this.loadedNextMonthDay) {
-        this.loadedNextMonthDay = index$1.dateAdd(this.loadedNextMonthDay, 'months', MONTHS_TO_ADD);
+        this.loadedNextMonthDay = overlays.dateAdd(this.loadedNextMonthDay, 'months', MONTHS_TO_ADD);
       }
       else {
-        this.loadedNextMonthDay = index$1.dateAdd(this.initialActiveDay, 'months', MONTHS_TO_ADD);
+        this.loadedNextMonthDay = overlays.dateAdd(this.initialActiveDay, 'months', MONTHS_TO_ADD);
       }
     }
     const generateTimespanParam = loadPrevious ? this.loadedPreviousMonthDay : this.loadedNextMonthDay;
@@ -564,8 +565,8 @@ const YooCalendarComponent = class {
     this.activeDays = [...activeDaysBegin, previousMonthStartDay, timeSpanStart, nextMonthStartDay, ...activeDaysEnd];
     this.extraMonthsLoaded.emit({
       date: timeSpanStart,
-      startDate: index$1.startOf(timeSpanStart, this.displayMode),
-      endDate: index$1.endOf(timeSpanStart, this.displayMode),
+      startDate: overlays.startOf(timeSpanStart, this.displayMode),
+      endDate: overlays.endOf(timeSpanStart, this.displayMode),
       mode: this.displayMode,
       monthStartDay: previousMonthStartDay,
       monthEndDay: nextMonthStartDay
@@ -593,16 +594,16 @@ const YooCalendarComponent = class {
     return this.renderedMonthsWeeks[index$1].map((days) => index.h("div", { class: `week mode-${this.displayMode}` }, days.map((day) => this.renderDay(day, index$1))));
   }
   renderCalendarModeToggle() {
-    return (index.h("div", { class: "calendar-tools" }, index.h("span", { class: "calendar-toggle today", onClick: this.onSetToday.bind(this) }, index$1.translate('YOOBICTODAY')), index.h("span", { class: {
+    return (index.h("div", { class: "calendar-tools" }, index.h("span", { class: "calendar-toggle today", onClick: this.onSetToday.bind(this) }, overlays.translate('YOOBICTODAY')), index.h("span", { class: {
         'calendar-toggle': true,
         active: this.isWeekDisplay
-      }, onClick: this.onChangeModeClicked.bind(this, 'week') }, index$1.translate('YOOBICWEEK')), index.h("span", { class: {
+      }, onClick: this.onChangeModeClicked.bind(this, 'week') }, overlays.translate('YOOBICWEEK')), index.h("span", { class: {
         'calendar-toggle': true,
         active: this.isMonthDisplay
-      }, onClick: this.onChangeModeClicked.bind(this, 'month') }, index$1.translate('MONTH'))));
+      }, onClick: this.onChangeModeClicked.bind(this, 'month') }, overlays.translate('MONTH'))));
   }
   renderActiveMonth(activeDay) {
-    const activeText = activeDay && index$1.pipes.dateFormat.transform(activeDay, 'MMM YYYY');
+    const activeText = activeDay && overlays.pipes.dateFormat.transform(activeDay, 'MMM YYYY');
     return (index.h("span", { class: {
         'active-month': true,
         'flex': this.isExtraSmall
@@ -625,10 +626,10 @@ const YooCalendarComponent = class {
     return (index.h("span", { onClick: handler, class: `${values[0]}-month` }, index.h("yoo-tag", { size: "medium", icon: values[1], color: "light", iconOnlyColor: "dark", iconOnlySize: "medium" })));
   }
   renderCalendarHeaderMobile() {
-    return (index.h("div", { class: "mobile-calendar-header" }, index.h("div", { class: { 'active-month-container': true, 'flex': this.showDone && this.isDatePicker } }, this.renderMobileCalendarControls()), !this.isDatePicker && this.renderCalendarModeToggle(), this.isDatePicker && this.showDone && index.h("yoo-button", { class: "done", fill: "transparent", color: "app-color", size: "medium", onClick: () => this.doneClicked.emit() }, index$1.translate('DONE'))));
+    return (index.h("div", { class: "mobile-calendar-header" }, index.h("div", { class: { 'active-month-container': true, 'flex': this.showDone && this.isDatePicker } }, this.renderMobileCalendarControls()), !this.isDatePicker && this.renderCalendarModeToggle(), this.isDatePicker && this.showDone && index.h("yoo-button", { class: "done", fill: "transparent", color: "app-color", size: "medium", onClick: () => this.doneClicked.emit() }, overlays.translate('DONE'))));
   }
   render() {
-    return (index.h(index.Host, { class: { web: index$1.isWeb(this.host) } }, this.useModernDatePickerWeek && this.renderModernWeek(), !this.useModernDatePickerWeek && (index$1.isIonic(this.host) || this.isDatePicker ? this.renderMobileCalendar() : this.renderWebCalendar())));
+    return (index.h(index.Host, { class: { web: overlays.isWeb(this.host) } }, this.useModernDatePickerWeek && this.renderModernWeek(), !this.useModernDatePickerWeek && (overlays.isIonic(this.host) || this.isDatePicker ? this.renderMobileCalendar() : this.renderWebCalendar())));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-camera-preview-dialog.cjs.entry.js

@@ -2,16 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-c8609d4f.js');
-const index = require('./index-f3d7c03d.js');
-const cameraHelpers = require('./camera-helpers-7d48ffe0.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+const overlays = require('./overlays-b6c94fc8.js');
+require('./index-1fdbd9b3.js');
+const cameraHelpers = require('./camera-helpers-e092e5bd.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
 require('./lodash-597bda6d.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
-const CameraPreview = index.registerPlugin('CameraPreview', {
-    web: () => Promise.resolve().then(function () { return require('./web-7708d346.js'); }).then(m => new m.CameraPreviewWeb()),
+const CameraPreview = overlays.registerPlugin('CameraPreview', {
+    web: () => Promise.resolve().then(function () { return require('./web-765935d9.js'); }).then(m => new m.CameraPreviewWeb()),
 });
 
 function getFlashModeIconName(flashMode) {
@@ -30,7 +31,7 @@ const cameraPreviewDialogCss = ":host{position:relative}:host yoo-header{positio
 
 const YooCameraPreviewDialogComponent = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.regularMode = false;
     this.showLoader = false;
     this.listviewItems = [];
@@ -48,7 +49,7 @@ const YooCameraPreviewDialogComponent = class {
     window.document.body.classList.add('camera-preview');
     this.captures = [];
     this.photos = [];
-    if (index.isNativeMobile()) {
+    if (overlays.isNativeMobile()) {
       this.onStartCamera();
     }
   }
@@ -85,10 +86,10 @@ const YooCameraPreviewDialogComponent = class {
       height: window.innerHeight * 2,
       width: window.innerWidth * 2
     };
-    return CameraPreview.capture(cameraPreviewPictureOptions).then((data) => index.addFilePrefix(data.value));
+    return CameraPreview.capture(cameraPreviewPictureOptions).then((data) => overlays.addFilePrefix(data.value));
   }
   onCapture() {
-    if (index.isNativeMobile() && !this.isTapped) {
+    if (overlays.isNativeMobile() && !this.isTapped) {
       if (this.regularMode) {
         return CameraPreview.capture({
           quality: this.quality,
@@ -101,9 +102,9 @@ const YooCameraPreviewDialogComponent = class {
         })
           .then(async (path) => {
           var _a, _b;
-          if (index.isImage(path) && !((_b = (_a = index.getSession()) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.deletePhotos)) {
-            await index.PhotoLibrary.requestAuthorization({ read: true, write: true });
-            index.PhotoLibrary.saveImage(path, 'YOOBIC');
+          if (overlays.isImage(path) && !((_b = (_a = overlays.getSession()) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.deletePhotos)) {
+            await overlays.PhotoLibrary.requestAuthorization({ read: true, write: true });
+            overlays.PhotoLibrary.saveImage(path, 'YOOBIC');
           }
           this.capturedPath = path;
           this.stopCamera();
@@ -135,7 +136,7 @@ const YooCameraPreviewDialogComponent = class {
               this.onModalTimeout();
             }
             // setTimeout(() => this.ionScrollDiv ? this.ionScrollDiv.refresh() : null, 200);
-            index$1.forceUpdate(this);
+            index.forceUpdate(this);
           }
           this.isTapped = false;
         });
@@ -150,14 +151,14 @@ const YooCameraPreviewDialogComponent = class {
   }
   closeModalByType() {
     if (this.isCancel) {
-      index.closeModal(null);
+      overlays.closeModal(null);
     }
     else {
       if (this.regularMode) {
-        index.closeModal(this.capturedPath);
+        overlays.closeModal(this.capturedPath);
       }
       else {
-        index.closeModal(this.photos);
+        overlays.closeModal(this.photos);
       }
     }
   }
@@ -261,19 +262,19 @@ const YooCameraPreviewDialogComponent = class {
     return ev.touches || ev.originalEvent.touches;
   }
   renderHeader() {
-    return (index$1.h("div", { class: "header-container", ref: (el) => (this.listviewDiv = el) }, index$1.h("div", { class: "item-container" }, index$1.h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onCancel() }, index$1.h("yoo-icon", { name: "close" })), index$1.h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onToggleFrontCamera() }, index$1.h("yoo-icon", { name: "rotate-camera" })), index$1.h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onToggleFlashLight() }, index$1.h("yoo-icon", { name: getFlashModeIconName(this.flashMode) })), !this.regularMode && [
-      index$1.h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onResizePreview() }, index$1.h("yoo-icon", { name: "circle" })),
-      index$1.h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onToggleListView() }, index$1.h("yoo-icon", { name: "frame" })),
-      index$1.h("div", { onClick: () => {
+    return (index.h("div", { class: "header-container", ref: (el) => (this.listviewDiv = el) }, index.h("div", { class: "item-container" }, index.h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onCancel() }, index.h("yoo-icon", { name: "close" })), index.h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onToggleFrontCamera() }, index.h("yoo-icon", { name: "rotate-camera" })), index.h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onToggleFlashLight() }, index.h("yoo-icon", { name: getFlashModeIconName(this.flashMode) })), !this.regularMode && [
+      index.h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onResizePreview() }, index.h("yoo-icon", { name: "circle" })),
+      index.h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onToggleListView() }, index.h("yoo-icon", { name: "frame" })),
+      index.h("div", { onClick: () => {
           this.onSave();
-        }, class: "save-button" }, index.translate('YOOBICSAVE'))
-    ]), index$1.h("div", { class: "hidden-items-container" }, index$1.h("yoo-ion-scroll", { class: "relative", horizontalMode: true }, this.listviewItems.map((image, index) => {
-      return (index$1.h("yoo-img", { type: "background", class: "item", src: image, onClick: () => {
-          this.onImageClick(index);
-        } }, index === this.listviewItems.length - 1 ? (index$1.h("yoo-icon", { onClick: (ev) => {
+        }, class: "save-button" }, overlays.translate('YOOBICSAVE'))
+    ]), index.h("div", { class: "hidden-items-container" }, index.h("yoo-ion-scroll", { class: "relative", horizontalMode: true }, this.listviewItems.map((image, index$1) => {
+      return (index.h("yoo-img", { type: "background", class: "item", src: image, onClick: () => {
+          this.onImageClick(index$1);
+        } }, index$1 === this.listviewItems.length - 1 ? (index.h("yoo-icon", { onClick: (ev) => {
           this.onDeleteCaptured(ev);
         }, name: "cross", color: "light" })) : null));
-    }))), index$1.h("div", { class: "header-bottom-handler", onTouchStart: (ev) => {
+    }))), index.h("div", { class: "header-bottom-handler", onTouchStart: (ev) => {
         this.onHeaderTouchStart(ev);
       }, onTouchMove: (ev) => {
         this.onHeaderTouchMove(ev);
@@ -290,15 +291,15 @@ const YooCameraPreviewDialogComponent = class {
       imageSrc = this.imageData; // || 'https://via.placeholder.com/375x812';
     }
     return [
-      index$1.h("yoo-ion-content", { class: "content", scrollEnabled: false }, !this.regularMode && (index$1.h("div", { class: "camera-preview-container" }, index$1.h("div", { class: "helper-modal", ref: (el) => (this.helperModalDiv = el), onClick: () => this.onDismissHelperModal() }, index$1.h("div", { class: "modal-text" }, this.stitchDirection === 'from-left' ? index.translate('MOVERIGHTTOTAKEPICTURE') : index.translate('MOVEDOWNTOTAKEPICTURE')), index$1.h("div", { class: "modal-icon" }, index$1.h("yoo-icon", { size: "large", name: "next-photo" }))), index$1.h("yoo-img", { type: "background", class: "overlay", src: index$1.getAssetPath('./assets/camera-preview-dialog/camera.png') })))),
-      index$1.h("div", { class: "footer", onClick: () => {
+      index.h("yoo-ion-content", { class: "content", scrollEnabled: false }, !this.regularMode && (index.h("div", { class: "camera-preview-container" }, index.h("div", { class: "helper-modal", ref: (el) => (this.helperModalDiv = el), onClick: () => this.onDismissHelperModal() }, index.h("div", { class: "modal-text" }, this.stitchDirection === 'from-left' ? overlays.translate('MOVERIGHTTOTAKEPICTURE') : overlays.translate('MOVEDOWNTOTAKEPICTURE')), index.h("div", { class: "modal-icon" }, index.h("yoo-icon", { size: "large", name: "next-photo" }))), index.h("yoo-img", { type: "background", class: "overlay", src: index.getAssetPath('./assets/camera-preview-dialog/camera.png') })))),
+      index.h("div", { class: "footer", onClick: () => {
           this.onCapture();
-        } }, index$1.h("div", { class: "outer-circle" }, " "), index$1.h("div", { onTouchStart: () => {
+        } }, index.h("div", { class: "outer-circle" }, " "), index.h("div", { onTouchStart: () => {
           this.onCaptureInnerTouchStart();
         }, onTouchEnd: () => {
           this.onCaptureInnerTouchEnd();
         }, ref: (el) => (this.innerButtonDiv = el), class: "inner-circle" })),
-      imageSrc && this.stitchDirection && index$1.h("yoo-img", { type: "background", class: { 'image-bg': true, [this.stitchDirection]: true }, onTouchMove: (ev) => this.previewOnTouchMove(ev, this.stitchDirection), ref: (el) => (this.previewImageDiv = el), src: imageSrc })
+      imageSrc && this.stitchDirection && index.h("yoo-img", { type: "background", class: { 'image-bg': true, [this.stitchDirection]: true }, onTouchMove: (ev) => this.previewOnTouchMove(ev, this.stitchDirection), ref: (el) => (this.previewImageDiv = el), src: imageSrc })
     ];
   }
   previewOnTouchMove(ev, direction) {
@@ -329,10 +330,10 @@ const YooCameraPreviewDialogComponent = class {
     }
   }
   render() {
-    return (index$1.h(index$1.Host, { class: { transparent: index.isNativeMobile(), ...commonHelpers.getAppContext(this.host) } }, this.renderHeader(), this.renderBody()));
+    return (index.h(index.Host, { class: { transparent: overlays.isNativeMobile(), ...commonHelpers.getAppContext(this.host) } }, this.renderHeader(), this.renderBody()));
   }
   static get assetsDirs() { return ["assets/camera-preview-dialog"]; }
-  get host() { return index$1.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 YooCameraPreviewDialogComponent.style = cameraPreviewDialogCss;