carriera-intern 1.1.104 → 1.1.105

package/fesm2022/carriera-intern.mjs

@@ -5969,15 +5969,19 @@ class CalendarStrategy {
     startedHeight;
     FULL_SIZE;
     SCROLL_TYPE;
-    constructor(calendarService, startedHeight, FULL_SIZE, SCROLL_TYPE) {
+    zone;
+    constructor(calendarService, startedHeight, FULL_SIZE, SCROLL_TYPE, zone) {
         this.calendarService = calendarService;
         this.startedHeight = startedHeight;
         this.FULL_SIZE = FULL_SIZE;
         this.SCROLL_TYPE = SCROLL_TYPE;
+        this.zone = zone;
     }
     index$ = new Subject();
     scrolledIndexChange = this.index$.pipe(distinctUntilChanged());
     viewport;
+    rafId = null;
+    lastEmittedIndex = null;
     attach(viewport) {
         this.viewport = viewport;
         this.viewport.setTotalContentSize(this.startedHeight);
@@ -5988,20 +5992,53 @@ class CalendarStrategy {
         this.updateRenderedRange(this.viewport);
     }
     detach() {
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
         this.index$.complete();
         this.viewport = undefined;
     }
     onContentScrolled() {
-        if (this.viewport)
-            this.updateRenderedRange(this.viewport);
+        if (!this.viewport || this.rafId !== null)
+            return;
+        const schedule = () => {
+            this.rafId = requestAnimationFrame(() => {
+                this.rafId = null;
+                this.updateRenderedRange(this.viewport);
+            });
+        };
+        if (this.zone)
+            this.zone.runOutsideAngular(schedule);
+        else
+            schedule();
     }
     /** These do not matter for this case */
     onDataLengthChanged() { }
     onContentRendered() { }
     onRenderedOffsetChanged() { }
-    scrollToIndex(index, behavior) {
-        if (this.viewport)
-            this.viewport.scrollToOffset(this.getOffsetForIndex(index), behavior);
+    scrollToIndex(index, behavior, onSettled) {
+        this.reliableScrollToOffset(this.getOffsetForIndex(index), behavior, 0, onSettled);
+    }
+    reliableScrollToOffset(targetOffset, behavior, attempt, onSettled) {
+        const viewport = this.viewport;
+        if (!viewport)
+            return;
+        viewport.scrollToOffset(targetOffset, behavior);
+        const landed = Math.abs(viewport.measureScrollOffset() - targetOffset) <= 2;
+        if (targetOffset > 0 && behavior !== 'smooth' && !landed && attempt < 10) {
+            const retry = () => this.reliableScrollToOffset(targetOffset, behavior, attempt + 1, onSettled);
+            if (this.zone)
+                this.zone.runOutsideAngular(() => requestAnimationFrame(retry));
+            else
+                requestAnimationFrame(retry);
+        }
+        else if (onSettled) {
+            if (this.zone)
+                this.zone.run(onSettled);
+            else
+                onSettled();
+        }
     }
     scrollToOffset(offset, behavior) {
         if (this.viewport)
@@ -6018,7 +6055,7 @@ class CalendarStrategy {
             return;
         const offset = viewport.measureScrollOffset();
         const { start, end } = viewport.getRenderedRange();
-        const viewportSize = 230;
+        const viewportSize = viewport.getViewportSize();
         const dataLength = viewport.getDataLength();
         const newRange = { start, end };
         const firstVisibleIndex = this.getIndexForOffset(offset);
@@ -6035,18 +6072,26 @@ class CalendarStrategy {
                 newRange.end = Math.min(dataLength, this.getIndexForOffset(offset + viewportSize + BUFFER * 2));
             }
         }
-        viewport.setRenderedRange(newRange);
-        viewport.setRenderedContentOffset(this.getOffsetForIndex(newRange.start));
-        // Used for update of 2nd scroll that is listening
-        if (this.calendarService.selectedScroll === this.SCROLL_TYPE)
-            this.index$.next({
+        if (newRange.start !== start || newRange.end !== end) {
+            viewport.setRenderedRange(newRange);
+            viewport.setRenderedContentOffset(this.getOffsetForIndex(newRange.start));
+        }
+        if (this.calendarService.selectedScroll === this.SCROLL_TYPE) {
+            const monthChanged = firstVisibleIndex !== this.lastEmittedIndex;
+            this.lastEmittedIndex = firstVisibleIndex;
+            const emit = () => this.index$.next({
                 indx: firstVisibleIndex,
                 scrollOffset: offset,
                 cycleSize: this.FULL_SIZE,
                 type: this.SCROLL_TYPE,
             });
+            if (monthChanged && this.zone)
+                this.zone.run(emit);
+            else
+                emit();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarStrategy, deps: [{ token: CalendarDateTimePickerService }, { token: String }, { token: String }, { token: String }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarStrategy, deps: [{ token: CalendarDateTimePickerService }, { token: String }, { token: String }, { token: String }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarStrategy });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarStrategy, decorators: [{
@@ -6060,7 +6105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [String]
-                }] }] });
+                }] }, { type: i0.NgZone }] });
 
 class CustomDatetimePickersConstants {
     static timeMinutes = ['00', '15', '30', '45'];
@@ -6133,9 +6178,12 @@ class CaCustomDateTimePickersCalendarDaysComponent {
         const fillerCount = month.getDay();
         const lastDay = new Date(month.getFullYear(), month.getMonth() + 1, 0);
         const daysCount = lastDay.getDate();
+        const TOTAL_CELLS = 42;
+        const trailingCount = TOTAL_CELLS - fillerCount - daysCount;
         this.days = [
             ...Array.from({ length: fillerCount }).map(() => ''),
             ...Array.from({ length: daysCount }).map((_, i) => i + 1),
+            ...Array.from({ length: trailingCount }).map(() => ''),
         ];
     }
     constructor() { }
@@ -6199,6 +6247,7 @@ function factory$1(dir) {
 }
 class CaCustomDateTimePickerCalendarDatesMainComponent {
     calendarService;
+    zone;
     months;
     dateTime;
     currentIndex;
@@ -6223,9 +6272,11 @@ class CaCustomDateTimePickerCalendarDatesMainComponent {
     selMonth;
     selectedMonth;
     activeMonth = 0;
-    constructor(calendarService) {
+    contentReady = false;
+    constructor(calendarService, zone) {
         this.calendarService = calendarService;
-        this.scrollStrategy = new CalendarStrategy(this.calendarService, CalendarMainStringEnum.CYCLE_HEIGHT, CalendarMainStringEnum.FULL_SIZE, CalendarStringEnum.MAIN);
+        this.zone = zone;
+        this.scrollStrategy = new CalendarStrategy(this.calendarService, CalendarMainStringEnum.CYCLE_HEIGHT, CalendarMainStringEnum.FULL_SIZE, CalendarStringEnum.MAIN, this.zone);
     }
     ngOnInit() {
         this.initScrollListeners();
@@ -6233,7 +6284,6 @@ class CaCustomDateTimePickerCalendarDatesMainComponent {
     initScrollListeners() {
         this.selMonth = this.dateTime.getMonth();
         this.selectedYearFromInput = this.dateTime.getFullYear();
-        //this.selectedYearFromInput = this.months.getFullYear();
         this.calendarService.scrollToAutoIndex
             .pipe(takeUntil(this.destroy$))
             .subscribe((indx) => {
@@ -6255,14 +6305,9 @@ class CaCustomDateTimePickerCalendarDatesMainComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe((res) => {
             setTimeout(() => {
-                if (res) {
-                    const indx = this.findIndexInMonth(res);
-                    this.scrollStrategy.scrollToIndex(indx, CalendarStringEnum.AUTO);
-                }
-                else {
-                    this.scrollStrategy.scrollToIndex(this.currentIndex, CalendarStringEnum.AUTO);
-                }
-            }, 200);
+                const indx = res ? this.findIndexInMonth(res) : this.currentIndex;
+                this.scrollStrategy.scrollToIndex(indx, CalendarStringEnum.AUTO, () => (this.contentReady = true));
+            });
         });
         if (this.isMonthAndYearOnly) {
             setTimeout(() => {
@@ -6315,7 +6360,7 @@ class CaCustomDateTimePickerCalendarDatesMainComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CaCustomDateTimePickerCalendarDatesMainComponent, deps: [{ token: CalendarDateTimePickerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CaCustomDateTimePickerCalendarDatesMainComponent, deps: [{ token: CalendarDateTimePickerService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: CaCustomDateTimePickerCalendarDatesMainComponent, isStandalone: true, selector: "cai-custom-datetime-pickers--calendar-dates-main", inputs: { months: "months", dateTime: "dateTime", currentIndex: "currentIndex", currentYearIndex: "currentYearIndex", activeIndex: "activeIndex", monthYearsIndx: "monthYearsIndx", listPreview: "listPreview", isMonthAndYearOnly: "isMonthAndYearOnly" }, outputs: { setListPreviewToFull: "setListPreviewToFull", setAutoIndex: "setAutoIndex" }, providers: [
             {
                 provide: VIRTUAL_SCROLL_STRATEGY,
@@ -6324,7 +6369,7 @@ class CaCustomDateTimePickerCalendarDatesMainComponent {
                     forwardRef(() => CaCustomDateTimePickerCalendarDatesMainComponent),
                 ],
             },
-        ], ngImport: i0, template: "<div (mouseover)=\"mouseOverSetItem()\">\n  <cdk-virtual-scroll-viewport\n    #monthsScrollRef\n    [tabindex]=\"-1\"\n    (scrolledIndexChange)=\"onMonthChange($event)\"\n    style=\"height: 200px; width: 100%; margin: 0\"\n  >\n    <ng-container\n      *cdkVirtualFor=\"\n        let month of months;\n        let indx = index;\n        templateCacheSize: 10\n      \"\n    >\n      <div\n        class=\"calendar_indicator ta-font-bold\"\n        [class.full_calendar]=\"_listPreview === 'full_list'\"\n        [class.current_year]=\"\n          isMonthAndYearOnly\n            ? selectedYearFromInput === month.getFullYear()\n            : selectedYearFromInput === month.getFullYear() &&\n              selMonth === month.getMonth()\n        \"\n        [tabindex]=\"-1\"\n      >\n        @if (_listPreview === \"full_list\") {\n          <span>{{ getMonth(month.getMonth()) }} </span>\n        }\n        {{ month.getFullYear() }}\n      </div>\n      @if (_listPreview === \"full_list\") {\n        <div>\n          <cai-custom-datetime-picker-calendar-days\n            (selectDay)=\"selectDay($event)\"\n            [index]=\"indx\"\n            [month]=\"month\"\n            [selectedMonth]=\"month.getMonth().toString()\"\n            [year]=\"selectedYear\"\n            [dateTime]=\"dateTime\"\n            [activeMonth]=\"\n              selectedYearFromInput === month.getFullYear() &&\n              selMonth === month.getMonth()\n            \"\n          ></cai-custom-datetime-picker-calendar-days>\n        </div>\n      }\n      @if (_listPreview === \"month_list\") {\n        <div>\n          <div\n            class=\"month_list\"\n            [class.current_year]=\"selectedYearFromInput === month.getFullYear()\"\n          >\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(0, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  0 === selMonth,\n              }\"\n            >\n              JAN\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(1, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  1 === selMonth,\n              }\"\n            >\n              FEB\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(2, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  2 === selMonth,\n              }\"\n            >\n              MAR\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(3, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  3 === selMonth,\n              }\"\n            >\n              APR\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(4, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  4 === selMonth,\n              }\"\n            >\n              MAY\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(5, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  5 === selMonth,\n              }\"\n            >\n              JUN\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(6, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  6 === selMonth,\n              }\"\n            >\n              JUL\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(7, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  7 === selMonth,\n              }\"\n            >\n              AUG\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(8, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  8 === selMonth,\n              }\"\n            >\n              SEP\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(9, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  9 === selMonth,\n              }\"\n            >\n              OCT\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(10, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  10 === selMonth,\n              }\"\n            >\n              NOV\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(11, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  11 === selMonth,\n              }\"\n            >\n              DEC\n            </div>\n          </div>\n        </div>\n      }\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: CaCustomDateTimePickersCalendarDaysComponent, selector: "cai-custom-datetime-picker-calendar-days", inputs: ["dateTime", "year", "selectedMonth", "index", "activeMonth", "month"], outputs: ["selectDay"] }] });
+        ], ngImport: i0, template: "<div (mouseover)=\"mouseOverSetItem()\">\n  <cdk-virtual-scroll-viewport\n    #monthsScrollRef\n    [tabindex]=\"-1\"\n    (scrolledIndexChange)=\"onMonthChange($event)\"\n    style=\"height: 200px; width: 100%; margin: 0\"\n    [style.visibility]=\"contentReady ? 'visible' : 'hidden'\"\n  >\n    <ng-container\n      *cdkVirtualFor=\"\n        let month of months;\n        let indx = index;\n        templateCacheSize: 10\n      \"\n    >\n      <div\n        class=\"calendar_month_block\"\n        [class.month_block_full]=\"_listPreview === 'full_list'\"\n      >\n      <div\n        class=\"calendar_indicator ta-font-bold\"\n        [class.full_calendar]=\"_listPreview === 'full_list'\"\n        [class.current_year]=\"\n          isMonthAndYearOnly\n            ? selectedYearFromInput === month.getFullYear()\n            : selectedYearFromInput === month.getFullYear() &&\n              selMonth === month.getMonth()\n        \"\n        [tabindex]=\"-1\"\n      >\n        @if (_listPreview === \"full_list\") {\n          <span>{{ getMonth(month.getMonth()) }} </span>\n        }\n        {{ month.getFullYear() }}\n      </div>\n      @if (_listPreview === \"full_list\") {\n        <div>\n          <cai-custom-datetime-picker-calendar-days\n            (selectDay)=\"selectDay($event)\"\n            [index]=\"indx\"\n            [month]=\"month\"\n            [selectedMonth]=\"month.getMonth().toString()\"\n            [year]=\"selectedYear\"\n            [dateTime]=\"dateTime\"\n            [activeMonth]=\"\n              selectedYearFromInput === month.getFullYear() &&\n              selMonth === month.getMonth()\n            \"\n          ></cai-custom-datetime-picker-calendar-days>\n        </div>\n      }\n      @if (_listPreview === \"month_list\") {\n        <div>\n          <div\n            class=\"month_list\"\n            [class.current_year]=\"selectedYearFromInput === month.getFullYear()\"\n          >\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(0, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  0 === selMonth,\n              }\"\n            >\n              JAN\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(1, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  1 === selMonth,\n              }\"\n            >\n              FEB\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(2, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  2 === selMonth,\n              }\"\n            >\n              MAR\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(3, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  3 === selMonth,\n              }\"\n            >\n              APR\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(4, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  4 === selMonth,\n              }\"\n            >\n              MAY\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(5, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  5 === selMonth,\n              }\"\n            >\n              JUN\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(6, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  6 === selMonth,\n              }\"\n            >\n              JUL\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(7, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  7 === selMonth,\n              }\"\n            >\n              AUG\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(8, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  8 === selMonth,\n              }\"\n            >\n              SEP\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(9, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  9 === selMonth,\n              }\"\n            >\n              OCT\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(10, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  10 === selMonth,\n              }\"\n            >\n              NOV\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(11, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  11 === selMonth,\n              }\"\n            >\n              DEC\n            </div>\n          </div>\n        </div>\n      }\n      </div>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</div>\n", styles: [".calendar_month_block.month_block_full{height:182px;box-sizing:border-box;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: CaCustomDateTimePickersCalendarDaysComponent, selector: "cai-custom-datetime-picker-calendar-days", inputs: ["dateTime", "year", "selectedMonth", "index", "activeMonth", "month"], outputs: ["selectDay"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CaCustomDateTimePickerCalendarDatesMainComponent, decorators: [{
             type: Component,
@@ -6341,8 +6386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                                 forwardRef(() => CaCustomDateTimePickerCalendarDatesMainComponent),
                             ],
                         },
-                    ], template: "<div (mouseover)=\"mouseOverSetItem()\">\n  <cdk-virtual-scroll-viewport\n    #monthsScrollRef\n    [tabindex]=\"-1\"\n    (scrolledIndexChange)=\"onMonthChange($event)\"\n    style=\"height: 200px; width: 100%; margin: 0\"\n  >\n    <ng-container\n      *cdkVirtualFor=\"\n        let month of months;\n        let indx = index;\n        templateCacheSize: 10\n      \"\n    >\n      <div\n        class=\"calendar_indicator ta-font-bold\"\n        [class.full_calendar]=\"_listPreview === 'full_list'\"\n        [class.current_year]=\"\n          isMonthAndYearOnly\n            ? selectedYearFromInput === month.getFullYear()\n            : selectedYearFromInput === month.getFullYear() &&\n              selMonth === month.getMonth()\n        \"\n        [tabindex]=\"-1\"\n      >\n        @if (_listPreview === \"full_list\") {\n          <span>{{ getMonth(month.getMonth()) }} </span>\n        }\n        {{ month.getFullYear() }}\n      </div>\n      @if (_listPreview === \"full_list\") {\n        <div>\n          <cai-custom-datetime-picker-calendar-days\n            (selectDay)=\"selectDay($event)\"\n            [index]=\"indx\"\n            [month]=\"month\"\n            [selectedMonth]=\"month.getMonth().toString()\"\n            [year]=\"selectedYear\"\n            [dateTime]=\"dateTime\"\n            [activeMonth]=\"\n              selectedYearFromInput === month.getFullYear() &&\n              selMonth === month.getMonth()\n            \"\n          ></cai-custom-datetime-picker-calendar-days>\n        </div>\n      }\n      @if (_listPreview === \"month_list\") {\n        <div>\n          <div\n            class=\"month_list\"\n            [class.current_year]=\"selectedYearFromInput === month.getFullYear()\"\n          >\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(0, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  0 === selMonth,\n              }\"\n            >\n              JAN\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(1, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  1 === selMonth,\n              }\"\n            >\n              FEB\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(2, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  2 === selMonth,\n              }\"\n            >\n              MAR\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(3, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  3 === selMonth,\n              }\"\n            >\n              APR\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(4, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  4 === selMonth,\n              }\"\n            >\n              MAY\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(5, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  5 === selMonth,\n              }\"\n            >\n              JUN\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(6, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  6 === selMonth,\n              }\"\n            >\n              JUL\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(7, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  7 === selMonth,\n              }\"\n            >\n              AUG\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(8, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  8 === selMonth,\n              }\"\n            >\n              SEP\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(9, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  9 === selMonth,\n              }\"\n            >\n              OCT\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(10, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  10 === selMonth,\n              }\"\n            >\n              NOV\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(11, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  11 === selMonth,\n              }\"\n            >\n              DEC\n            </div>\n          </div>\n        </div>\n      }\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: CalendarDateTimePickerService }], propDecorators: { months: [{
+                    ], template: "<div (mouseover)=\"mouseOverSetItem()\">\n  <cdk-virtual-scroll-viewport\n    #monthsScrollRef\n    [tabindex]=\"-1\"\n    (scrolledIndexChange)=\"onMonthChange($event)\"\n    style=\"height: 200px; width: 100%; margin: 0\"\n    [style.visibility]=\"contentReady ? 'visible' : 'hidden'\"\n  >\n    <ng-container\n      *cdkVirtualFor=\"\n        let month of months;\n        let indx = index;\n        templateCacheSize: 10\n      \"\n    >\n      <div\n        class=\"calendar_month_block\"\n        [class.month_block_full]=\"_listPreview === 'full_list'\"\n      >\n      <div\n        class=\"calendar_indicator ta-font-bold\"\n        [class.full_calendar]=\"_listPreview === 'full_list'\"\n        [class.current_year]=\"\n          isMonthAndYearOnly\n            ? selectedYearFromInput === month.getFullYear()\n            : selectedYearFromInput === month.getFullYear() &&\n              selMonth === month.getMonth()\n        \"\n        [tabindex]=\"-1\"\n      >\n        @if (_listPreview === \"full_list\") {\n          <span>{{ getMonth(month.getMonth()) }} </span>\n        }\n        {{ month.getFullYear() }}\n      </div>\n      @if (_listPreview === \"full_list\") {\n        <div>\n          <cai-custom-datetime-picker-calendar-days\n            (selectDay)=\"selectDay($event)\"\n            [index]=\"indx\"\n            [month]=\"month\"\n            [selectedMonth]=\"month.getMonth().toString()\"\n            [year]=\"selectedYear\"\n            [dateTime]=\"dateTime\"\n            [activeMonth]=\"\n              selectedYearFromInput === month.getFullYear() &&\n              selMonth === month.getMonth()\n            \"\n          ></cai-custom-datetime-picker-calendar-days>\n        </div>\n      }\n      @if (_listPreview === \"month_list\") {\n        <div>\n          <div\n            class=\"month_list\"\n            [class.current_year]=\"selectedYearFromInput === month.getFullYear()\"\n          >\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(0, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  0 === selMonth,\n              }\"\n            >\n              JAN\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(1, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  1 === selMonth,\n              }\"\n            >\n              FEB\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(2, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  2 === selMonth,\n              }\"\n            >\n              MAR\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(3, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  3 === selMonth,\n              }\"\n            >\n              APR\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(4, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  4 === selMonth,\n              }\"\n            >\n              MAY\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(5, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  5 === selMonth,\n              }\"\n            >\n              JUN\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(6, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  6 === selMonth,\n              }\"\n            >\n              JUL\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(7, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  7 === selMonth,\n              }\"\n            >\n              AUG\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(8, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  8 === selMonth,\n              }\"\n            >\n              SEP\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(9, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  9 === selMonth,\n              }\"\n            >\n              OCT\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(10, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  10 === selMonth,\n              }\"\n            >\n              NOV\n            </div>\n            <div\n              class=\"month_list_item ta-font-medium\"\n              (click)=\"setCalendarListPreview(11, indx, $event)\"\n              [ngClass]=\"{\n                'current_month ta-font-bold':\n                  selectedYearFromInput === month.getFullYear() &&\n                  11 === selMonth,\n              }\"\n            >\n              DEC\n            </div>\n          </div>\n        </div>\n      }\n      </div>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</div>\n", styles: [".calendar_month_block.month_block_full{height:182px;box-sizing:border-box;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: CalendarDateTimePickerService }, { type: i0.NgZone }], propDecorators: { months: [{
                 type: Input
             }], dateTime: [{
                 type: Input
@@ -6396,6 +6441,7 @@ function factory(dir) {
 }
 class CaCustomDateTimePickersCalendarLeftComponent {
     calendarService;
+    zone;
     months;
     currentIndex;
     isMonthAndYearOnly = false;
@@ -6417,17 +6463,15 @@ class CaCustomDateTimePickersCalendarLeftComponent {
     _activeIndex = 0;
     set activeIndex(value) {
         this._activeIndex = value;
-        if (!this.isMonthAndYearOnly && this._activeIndex)
-            setTimeout(() => {
-                this.scrollStrategy.scrollToIndex(this._activeIndex, CalendarStringEnum.AUTO);
-            }, 200);
     }
     isHovered;
     isFirstCall = true;
+    contentReady = false;
     destroy$ = new Subject();
-    constructor(calendarService) {
+    constructor(calendarService, zone) {
         this.calendarService = calendarService;
-        this.scrollStrategy = new CalendarStrategy(this.calendarService, CalendarLeftStringEnum.CYCLE_HEIGHT, CalendarLeftStringEnum.FULL_SIZE, CalendarStringEnum.LEFT);
+        this.zone = zone;
+        this.scrollStrategy = new CalendarStrategy(this.calendarService, CalendarLeftStringEnum.CYCLE_HEIGHT, CalendarLeftStringEnum.FULL_SIZE, CalendarStringEnum.LEFT, this.zone);
     }
     scrollStrategy;
     ngOnInit() {
@@ -6453,12 +6497,12 @@ class CaCustomDateTimePickersCalendarLeftComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe((res) => {
             setTimeout(() => {
-                if (res) {
-                    const indx = this.findIndexInMonth(res);
-                    this.scrollStrategy.scrollToIndex(indx, CalendarStringEnum.AUTO);
-                }
-                else
-                    this.scrollStrategy.scrollToIndex(this.currentIndex, CalendarStringEnum.AUTO);
+                const indx = this.isMonthAndYearOnly
+                    ? this._currentYearIndex
+                    : res
+                        ? this.findIndexInMonth(res)
+                        : this.currentIndex;
+                this.scrollStrategy.scrollToIndex(indx, CalendarStringEnum.AUTO, () => (this.contentReady = true));
             });
         });
         if (this.isMonthAndYearOnly) {
@@ -6491,14 +6535,14 @@ class CaCustomDateTimePickersCalendarLeftComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CaCustomDateTimePickersCalendarLeftComponent, deps: [{ token: CalendarDateTimePickerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CaCustomDateTimePickersCalendarLeftComponent, deps: [{ token: CalendarDateTimePickerService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CaCustomDateTimePickersCalendarLeftComponent, isStandalone: true, selector: "cai-custom-datetime-pickers-calendar-left", inputs: { months: "months", currentIndex: "currentIndex", isMonthAndYearOnly: "isMonthAndYearOnly", listPreview: "listPreview", currentYearIndex: "currentYearIndex", activeIndex: "activeIndex" }, providers: [
             {
                 provide: VIRTUAL_SCROLL_STRATEGY,
                 useFactory: factory,
                 deps: [forwardRef(() => CaCustomDateTimePickersCalendarLeftComponent)],
             },
-        ], ngImport: i0, template: "<div (mouseover)=\"mouseOverSetItem()\">\n  <cdk-virtual-scroll-viewport\n    #leftSideRef\n    (scrolledIndexChange)=\"onScrollChanged($event)\"\n    style=\"height: 290px; width: 100%; margin: 0\"\n    [tabindex]=\"-1\"\n  >\n    <ng-container\n      *cdkVirtualFor=\"\n        let month of months;\n        let indx = index;\n        templateCacheSize: 10\n      \"\n    >\n      <div\n        (click)=\"selectMonth(indx, $event)\"\n        class=\"month-year-item ta-font-medium\"\n        [ngClass]=\"{\n          'current_month_year ta-font-bold': isMonthAndYearOnly\n            ? indx === _currentYearIndex\n            : indx === _activeIndex,\n        }\"\n        [innerHTML]=\"month | calendarmonths: _listPreview\"\n      ></div>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: CalendarMonthsPipe, name: "calendarmonths" }] });
+        ], ngImport: i0, template: "<div (mouseover)=\"mouseOverSetItem()\">\n  <cdk-virtual-scroll-viewport\n    #leftSideRef\n    (scrolledIndexChange)=\"onScrollChanged($event)\"\n    style=\"height: 290px; width: 100%; margin: 0\"\n    [tabindex]=\"-1\"\n    [style.visibility]=\"contentReady ? 'visible' : 'hidden'\"\n  >\n    <ng-container\n      *cdkVirtualFor=\"\n        let month of months;\n        let indx = index;\n        templateCacheSize: 10\n      \"\n    >\n      <div\n        (click)=\"selectMonth(indx, $event)\"\n        class=\"month-year-item ta-font-medium\"\n        [ngClass]=\"{\n          'current_month_year ta-font-bold': isMonthAndYearOnly\n            ? indx === _currentYearIndex\n            : indx === _activeIndex,\n        }\"\n        [innerHTML]=\"month | calendarmonths: _listPreview\"\n      ></div>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: CalendarMonthsPipe, name: "calendarmonths" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CaCustomDateTimePickersCalendarLeftComponent, decorators: [{
             type: Component,
@@ -6508,8 +6552,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useFactory: factory,
                             deps: [forwardRef(() => CaCustomDateTimePickersCalendarLeftComponent)],
                         },
-                    ], template: "<div (mouseover)=\"mouseOverSetItem()\">\n  <cdk-virtual-scroll-viewport\n    #leftSideRef\n    (scrolledIndexChange)=\"onScrollChanged($event)\"\n    style=\"height: 290px; width: 100%; margin: 0\"\n    [tabindex]=\"-1\"\n  >\n    <ng-container\n      *cdkVirtualFor=\"\n        let month of months;\n        let indx = index;\n        templateCacheSize: 10\n      \"\n    >\n      <div\n        (click)=\"selectMonth(indx, $event)\"\n        class=\"month-year-item ta-font-medium\"\n        [ngClass]=\"{\n          'current_month_year ta-font-bold': isMonthAndYearOnly\n            ? indx === _currentYearIndex\n            : indx === _activeIndex,\n        }\"\n        [innerHTML]=\"month | calendarmonths: _listPreview\"\n      ></div>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: CalendarDateTimePickerService }], propDecorators: { months: [{
+                    ], template: "<div (mouseover)=\"mouseOverSetItem()\">\n  <cdk-virtual-scroll-viewport\n    #leftSideRef\n    (scrolledIndexChange)=\"onScrollChanged($event)\"\n    style=\"height: 290px; width: 100%; margin: 0\"\n    [tabindex]=\"-1\"\n    [style.visibility]=\"contentReady ? 'visible' : 'hidden'\"\n  >\n    <ng-container\n      *cdkVirtualFor=\"\n        let month of months;\n        let indx = index;\n        templateCacheSize: 10\n      \"\n    >\n      <div\n        (click)=\"selectMonth(indx, $event)\"\n        class=\"month-year-item ta-font-medium\"\n        [ngClass]=\"{\n          'current_month_year ta-font-bold': isMonthAndYearOnly\n            ? indx === _currentYearIndex\n            : indx === _activeIndex,\n        }\"\n        [innerHTML]=\"month | calendarmonths: _listPreview\"\n      ></div>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: CalendarDateTimePickerService }, { type: i0.NgZone }], propDecorators: { months: [{
                 type: Input
             }], currentIndex: [{
                 type: Input