@imihai/angular-datetime-picker 21.0.2 → 22.0.6

package/fesm2022/imihai-angular-datetime-picker.mjs

@@ -62,10 +62,10 @@ class OwlDateTimeTriggerDirective {
             this.changeDetector.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: OwlDateTimeTriggerDirective, isStandalone: false, selector: "[owlDateTimeTrigger]", inputs: { dtPicker: ["owlDateTimeTrigger", "dtPicker"], disabled: "disabled" }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: OwlDateTimeTriggerDirective, isStandalone: false, selector: "[owlDateTimeTrigger]", inputs: { dtPicker: ["owlDateTimeTrigger", "dtPicker"], disabled: "disabled" }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[owlDateTimeTrigger]',
@@ -337,14 +337,12 @@ class OwlDateTime {
                     this.dateTimeAdapter.compare(dateTime, this.maxDateTime) <= 0));
         };
         if (!this.dateTimeAdapter) {
-            throw Error(`OwlDateTimePicker: No provider found for DateTimeAdapter. You must import one of the following ` +
-                `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
-                `custom implementation.`);
+            throw Error(`OwlDateTimePicker: No provider found for DateTimeAdapter. You must import ` +
+                `OwlLuxonDateTimeModule at your application root or provide a custom implementation.`);
         }
         if (!this.dateTimeFormats) {
-            throw Error(`OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import one of the following ` +
-                `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
-                `custom implementation.`);
+            throw Error(`OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import ` +
+                `OwlLuxonDateTimeModule at your application root or provide custom formats.`);
         }
         this._id = `owl-dt-picker-${nextUniqueId++}`;
     }
@@ -354,10 +352,10 @@ class OwlDateTime {
             ? obj
             : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTime, deps: [{ token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: OwlDateTime, isStandalone: true, inputs: { showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", startView: "startView", showCalendarWeeks: "showCalendarWeeks", yearOnly: "yearOnly", multiyearOnly: "multiyearOnly", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond", firstDayOfWeek: "firstDayOfWeek", hideOtherMonths: "hideOtherMonths" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTime, deps: [{ token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: OwlDateTime, isStandalone: true, inputs: { showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", startView: "startView", showCalendarWeeks: "showCalendarWeeks", yearOnly: "yearOnly", multiyearOnly: "multiyearOnly", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond", firstDayOfWeek: "firstDayOfWeek", hideOtherMonths: "hideOtherMonths" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTime, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTime, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: DateTimeAdapter, decorators: [{
                     type: Optional
@@ -441,10 +439,10 @@ class OwlDateTimeIntl {
         /** A label for the hour12 button (PM) */
         this.hour12PMLabel = 'PM';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeIntl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -566,10 +564,10 @@ class OwlCalendarBodyComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlCalendarBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OwlCalendarBodyComponent, isStandalone: false, selector: "[owl-date-time-calendar-body]", inputs: { activeCell: "activeCell", rows: "rows", numCols: "numCols", cellRatio: "cellRatio", todayValue: "todayValue", selectedValues: "selectedValues", selectMode: "selectMode" }, outputs: { select: "select" }, host: { properties: { "class.owl-dt-calendar-body": "owlDTCalendarBodyClass" } }, exportAs: ["owlDateTimeCalendarBody"], ngImport: i0, template: "@for (row of rows; track $index; let rowIndex = $index) {\r\n    <tr role=\"row\">\r\n        @for (item of row; track $index; let colIndex = $index) {\r\n            <td\r\n                class=\"owl-dt-calendar-cell {{ item.cellClass }}\"\r\n                [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\r\n                [class.owl-dt-calendar-cell-active]=\"\r\n                    isActiveCell(rowIndex, colIndex)\r\n                \"\r\n                [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\r\n                [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\r\n                [class.owl-dt-calendar-cell-range-from]=\"\r\n                    isRangeFrom(item.value)\r\n                \"\r\n                [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\r\n                [attr.aria-label]=\"item.ariaLabel\"\r\n                [attr.aria-disabled]=\"!item.enabled || null\"\r\n                [attr.aria-current]=\"item.value === todayValue ? 'date' : null\"\r\n                [attr.aria-selected]=\"isSelected(item.value)\"\r\n                [style.width.%]=\"100 / numCols\"\r\n                [style.paddingTop.%]=\"(50 * cellRatio) / numCols\"\r\n                [style.paddingBottom.%]=\"(50 * cellRatio) / numCols\"\r\n                (click)=\"selectCell(item)\"\r\n            >\r\n                <span\r\n                    class=\"owl-dt-calendar-cell-content\"\r\n                    [ngClass]=\"{\r\n                        'owl-dt-calendar-cell-out': item.out,\r\n                        'owl-dt-calendar-cell-today': item.value === todayValue,\r\n                        'owl-dt-calendar-cell-selected': isSelected(item.value),\r\n                    }\"\r\n                >\r\n                    {{ item.displayValue }}\r\n                </span>\r\n            </td>\r\n        }\r\n    </tr>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlCalendarBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: OwlCalendarBodyComponent, isStandalone: false, selector: "[owl-date-time-calendar-body]", inputs: { activeCell: "activeCell", rows: "rows", numCols: "numCols", cellRatio: "cellRatio", todayValue: "todayValue", selectedValues: "selectedValues", selectMode: "selectMode" }, outputs: { select: "select" }, host: { properties: { "class.owl-dt-calendar-body": "owlDTCalendarBodyClass" } }, exportAs: ["owlDateTimeCalendarBody"], ngImport: i0, template: "@for (row of rows; track $index; let rowIndex = $index) {\r\n    <tr role=\"row\">\r\n        @for (item of row; track $index; let colIndex = $index) {\r\n            <td\r\n                class=\"owl-dt-calendar-cell {{ item.cellClass }}\"\r\n                [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\r\n                [class.owl-dt-calendar-cell-active]=\"\r\n                    isActiveCell(rowIndex, colIndex)\r\n                \"\r\n                [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\r\n                [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\r\n                [class.owl-dt-calendar-cell-range-from]=\"\r\n                    isRangeFrom(item.value)\r\n                \"\r\n                [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\r\n                [attr.aria-label]=\"item.ariaLabel\"\r\n                [attr.aria-disabled]=\"!item.enabled || null\"\r\n                [attr.aria-current]=\"item.value === todayValue ? 'date' : null\"\r\n                [attr.aria-selected]=\"isSelected(item.value)\"\r\n                [style.width.%]=\"100 / numCols\"\r\n                [style.paddingTop.%]=\"(50 * cellRatio) / numCols\"\r\n                [style.paddingBottom.%]=\"(50 * cellRatio) / numCols\"\r\n                (click)=\"selectCell(item)\"\r\n            >\r\n                <span\r\n                    class=\"owl-dt-calendar-cell-content\"\r\n                    [ngClass]=\"{\r\n                        'owl-dt-calendar-cell-out': item.out,\r\n                        'owl-dt-calendar-cell-today': item.value === todayValue,\r\n                        'owl-dt-calendar-cell-selected': isSelected(item.value),\r\n                    }\"\r\n                >\r\n                    {{ item.displayValue }}\r\n                </span>\r\n            </td>\r\n        }\r\n    </tr>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlCalendarBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlCalendarBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: '[owl-date-time-calendar-body]', exportAs: 'owlDateTimeCalendarBody', host: {
                         '[class.owl-dt-calendar-body]': 'owlDTCalendarBodyClass'
@@ -660,15 +658,15 @@ class OwlMultiYearViewComponent {
         });
         this.setSelectedYears();
     }
-    get pickerMoment() {
-        return this._pickerMoment;
+    get pickerDateTime() {
+        return this._pickerDateTime;
     }
-    set pickerMoment(value) {
-        const oldMoment = this._pickerMoment;
+    set pickerDateTime(value) {
+        const oldDateTime = this._pickerDateTime;
         value = this.dateTimeAdapter.deserialize(value);
-        this._pickerMoment = this.getValidDate(value) || this.dateTimeAdapter.now();
-        if (oldMoment && this._pickerMoment &&
-            !this.isSameYearList(oldMoment, this._pickerMoment)) {
+        this._pickerDateTime = this.getValidDate(value) || this.dateTimeAdapter.now();
+        if (oldDateTime && this._pickerDateTime &&
+            !this.isSameYearList(oldDateTime, this._pickerDateTime)) {
             this.generateYearList();
         }
     }
@@ -718,8 +716,8 @@ class OwlMultiYearViewComponent {
             || this.selectMode === 'rangeTo';
     }
     get activeCell() {
-        if (this._pickerMoment) {
-            return this.dateTimeAdapter.getYear(this._pickerMoment) % (this.options.yearsPerRow * this.options.yearRows);
+        if (this._pickerDateTime) {
+            return this.dateTimeAdapter.getYear(this._pickerDateTime) % (this.options.yearsPerRow * this.options.yearRows);
         }
     }
     get tableHeader() {
@@ -759,7 +757,7 @@ class OwlMultiYearViewComponent {
          * */
         this.yearSelected = new EventEmitter();
         /** Emits when any date is activated. */
-        this.pickerMomentChange = new EventEmitter();
+        this.pickerDateTimeChange = new EventEmitter();
         /** Emits when use keyboard enter to select a calendar cell */
         this.keyboardEnter = new EventEmitter();
     }
@@ -778,16 +776,16 @@ class OwlMultiYearViewComponent {
     }
     selectYear(year) {
         this.yearSelected.emit(this.dateTimeAdapter.createDate(year, this.dateTimeAdapter.firstMonthOfTheYear, 1));
-        const firstDateOfMonth = this.dateTimeAdapter.createDate(year, this.dateTimeAdapter.getMonth(this.pickerMoment), 1);
+        const firstDateOfMonth = this.dateTimeAdapter.createDate(year, this.dateTimeAdapter.getMonth(this.pickerDateTime), 1);
         const daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(firstDateOfMonth);
-        const selected = this.dateTimeAdapter.createDate(year, this.dateTimeAdapter.getMonth(this.pickerMoment), Math.min(daysInMonth, this.dateTimeAdapter.getDate(this.pickerMoment)), this.dateTimeAdapter.getHours(this.pickerMoment), this.dateTimeAdapter.getMinutes(this.pickerMoment), this.dateTimeAdapter.getSeconds(this.pickerMoment));
+        const selected = this.dateTimeAdapter.createDate(year, this.dateTimeAdapter.getMonth(this.pickerDateTime), Math.min(daysInMonth, this.dateTimeAdapter.getDate(this.pickerDateTime)), this.dateTimeAdapter.getHours(this.pickerDateTime), this.dateTimeAdapter.getMinutes(this.pickerDateTime), this.dateTimeAdapter.getSeconds(this.pickerDateTime));
         this.change.emit(selected);
     }
     /**
      * Generate the previous year list
      * */
     prevYearList(event) {
-        this._pickerMoment = this.dateTimeAdapter.addCalendarYears(this.pickerMoment, -1 * this.options.yearsPerRow * this.options.yearRows);
+        this._pickerDateTime = this.dateTimeAdapter.addCalendarYears(this.pickerDateTime, -1 * this.options.yearsPerRow * this.options.yearRows);
         this.generateYearList();
         event.preventDefault();
     }
@@ -795,18 +793,18 @@ class OwlMultiYearViewComponent {
      * Generate the next year list
      * */
     nextYearList(event) {
-        this._pickerMoment = this.dateTimeAdapter.addCalendarYears(this.pickerMoment, this.options.yearsPerRow * this.options.yearRows);
+        this._pickerDateTime = this.dateTimeAdapter.addCalendarYears(this.pickerDateTime, this.options.yearsPerRow * this.options.yearRows);
         this.generateYearList();
         event.preventDefault();
     }
     generateYearList() {
         this._years = [];
-        const pickerMomentYear = this.dateTimeAdapter.getYear(this._pickerMoment);
-        const offset = pickerMomentYear % (this.options.yearsPerRow * this.options.yearRows);
+        const pickerDateTimeYear = this.dateTimeAdapter.getYear(this._pickerDateTime);
+        const offset = pickerDateTimeYear % (this.options.yearsPerRow * this.options.yearRows);
         for (let i = 0; i < this.options.yearRows; i++) {
             const row = [];
             for (let j = 0; j < this.options.yearsPerRow; j++) {
-                const year = pickerMomentYear - offset + (j + i * this.options.yearsPerRow);
+                const year = pickerDateTimeYear - offset + (j + i * this.options.yearsPerRow);
                 const yearCell = this.createYearCell(year);
                 row.push(yearCell);
             }
@@ -819,57 +817,57 @@ class OwlMultiYearViewComponent {
         if (!this.minDate) {
             return true;
         }
-        return !this.minDate || !this.isSameYearList(this._pickerMoment, this.minDate);
+        return !this.minDate || !this.isSameYearList(this._pickerDateTime, this.minDate);
     }
     /** Whether the next period button is enabled. */
     nextEnabled() {
-        return !this.maxDate || !this.isSameYearList(this._pickerMoment, this.maxDate);
+        return !this.maxDate || !this.isSameYearList(this._pickerDateTime, this.maxDate);
     }
     handleCalendarKeydown(event) {
-        let moment;
+        let dateTime;
         switch (event.keyCode) {
             // minus 1 year
             case LEFT_ARROW:
-                moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, -1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarYears(this._pickerDateTime, -1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // add 1 year
             case RIGHT_ARROW:
-                moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, 1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarYears(this._pickerDateTime, 1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // minus 3 years
             case UP_ARROW:
-                moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, -1 * this.options.yearsPerRow);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarYears(this._pickerDateTime, -1 * this.options.yearsPerRow);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // add 3 years
             case DOWN_ARROW:
-                moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, this.options.yearsPerRow);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarYears(this._pickerDateTime, this.options.yearsPerRow);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // go to the first year of the year page
             case HOME:
-                moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, -this.dateTimeAdapter.getYear(this._pickerMoment) % (this.options.yearsPerRow * this.options.yearRows));
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarYears(this._pickerDateTime, -this.dateTimeAdapter.getYear(this._pickerDateTime) % (this.options.yearsPerRow * this.options.yearRows));
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // go to the last year of the year page
             case END:
-                moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, (this.options.yearsPerRow * this.options.yearRows) - this.dateTimeAdapter.getYear(this._pickerMoment) % (this.options.yearsPerRow * this.options.yearRows) - 1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarYears(this._pickerDateTime, (this.options.yearsPerRow * this.options.yearRows) - this.dateTimeAdapter.getYear(this._pickerDateTime) % (this.options.yearsPerRow * this.options.yearRows) - 1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // minus 1 year page (or 10 year pages)
             case PAGE_UP:
-                moment = this.dateTimeAdapter.addCalendarYears(this.pickerMoment, event.altKey ? -10 * (this.options.yearsPerRow * this.options.yearRows) : -1 * (this.options.yearsPerRow * this.options.yearRows));
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarYears(this.pickerDateTime, event.altKey ? -10 * (this.options.yearsPerRow * this.options.yearRows) : -1 * (this.options.yearsPerRow * this.options.yearRows));
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // add 1 year page (or 10 year pages)
             case PAGE_DOWN:
-                moment = this.dateTimeAdapter.addCalendarYears(this.pickerMoment, event.altKey ? 10 * (this.options.yearsPerRow * this.options.yearRows) : (this.options.yearsPerRow * this.options.yearRows));
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarYears(this.pickerDateTime, event.altKey ? 10 * (this.options.yearsPerRow * this.options.yearRows) : (this.options.yearsPerRow * this.options.yearRows));
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             case ENTER:
-                this.selectYear(this.dateTimeAdapter.getYear(this._pickerMoment));
+                this.selectYear(this.dateTimeAdapter.getYear(this._pickerDateTime));
                 this.keyboardEnter.emit();
                 break;
             default:
@@ -937,10 +935,10 @@ class OwlMultiYearViewComponent {
     focusActiveCell() {
         this.calendarBodyElm.focusActiveCell();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlMultiYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }, { token: OptionsTokens.multiYear }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: OwlMultiYearViewComponent, isStandalone: false, selector: "owl-date-time-multi-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { change: "change", yearSelected: "yearSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView", "class.owl-dt-calendar-multi-year-view": "owlDTCalendarMultiYearView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], ngImport: i0, template: "<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\r\n        [disabled]=\"!previousEnabled()\" [attr.aria-label]=\"prevButtonLabel\"\r\n        type=\"button\" tabindex=\"0\" (click)=\"prevYearList($event)\">\r\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n             version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 250.738 250.738\"\r\n             style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\"\r\n             width=\"100%\" height=\"100%\">\r\n            <path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"/>\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\r\n    <thead class=\"owl-dt-calendar-header\">\r\n    <tr>\r\n        <th colspan=\"3\">{{tableHeader}}</th>\r\n    </tr>\r\n    </thead>\r\n    <tbody owl-date-time-calendar-body role=\"grid\"\r\n           [rows]=\"years\" [numCols]=\"3\" [cellRatio]=\"3 / 7\"\r\n           [activeCell]=\"activeCell\"\r\n           [todayValue]=\"todayYear\"\r\n           [selectedValues]=\"selectedYears\"\r\n           [selectMode]=\"selectMode\"\r\n           (keydown)=\"handleCalendarKeydown($event)\"\r\n           (select)=\"selectCalendarCell($event)\"></tbody>\r\n</table>\r\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\r\n        [disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\r\n        type=\"button\" tabindex=\"0\" (click)=\"nextYearList($event)\">\r\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\r\n    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\r\n             viewBox=\"0 0 250.738 250.738\" style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\">\r\n            <path style=\"fill-rule:evenodd;clip-rule:evenodd;\" d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\r\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\r\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\r\n                C197.237,120.447,195.534,115.448,191.75,111.689z\"/>\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "component", type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlMultiYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }, { token: OptionsTokens.multiYear }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: OwlMultiYearViewComponent, isStandalone: false, selector: "owl-date-time-multi-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerDateTime: "pickerDateTime", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { change: "change", yearSelected: "yearSelected", pickerDateTimeChange: "pickerDateTimeChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView", "class.owl-dt-calendar-multi-year-view": "owlDTCalendarMultiYearView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], ngImport: i0, template: "<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\r\n        [disabled]=\"!previousEnabled()\" [attr.aria-label]=\"prevButtonLabel\"\r\n        type=\"button\" tabindex=\"0\" (click)=\"prevYearList($event)\">\r\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n             version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 250.738 250.738\"\r\n             style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\"\r\n             width=\"100%\" height=\"100%\">\r\n            <path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"/>\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\r\n    <thead class=\"owl-dt-calendar-header\">\r\n    <tr>\r\n        <th colspan=\"3\">{{tableHeader}}</th>\r\n    </tr>\r\n    </thead>\r\n    <tbody owl-date-time-calendar-body role=\"grid\"\r\n           [rows]=\"years\" [numCols]=\"3\" [cellRatio]=\"3 / 7\"\r\n           [activeCell]=\"activeCell\"\r\n           [todayValue]=\"todayYear\"\r\n           [selectedValues]=\"selectedYears\"\r\n           [selectMode]=\"selectMode\"\r\n           (keydown)=\"handleCalendarKeydown($event)\"\r\n           (select)=\"selectCalendarCell($event)\"></tbody>\r\n</table>\r\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\r\n        [disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\r\n        type=\"button\" tabindex=\"0\" (click)=\"nextYearList($event)\">\r\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\r\n    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\r\n             viewBox=\"0 0 250.738 250.738\" style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\">\r\n            <path style=\"fill-rule:evenodd;clip-rule:evenodd;\" d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\r\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\r\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\r\n                C197.237,120.447,195.534,115.448,191.75,111.689z\"/>\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "component", type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlMultiYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlMultiYearViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time-multi-year-view', host: {
                         '[class.owl-dt-calendar-view]': 'owlDTCalendarView',
@@ -957,7 +955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], selecteds: [{
                 type: Input
-            }], pickerMoment: [{
+            }], pickerDateTime: [{
                 type: Input
             }], dateFilter: [{
                 type: Input
@@ -969,7 +967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Output
             }], yearSelected: [{
                 type: Output
-            }], pickerMomentChange: [{
+            }], pickerDateTimeChange: [{
                 type: Output
             }], keyboardEnter: [{
                 type: Output
@@ -1013,15 +1011,15 @@ class OwlYearViewComponent {
         }
         this.setSelectedMonths();
     }
-    get pickerMoment() {
-        return this._pickerMoment;
+    get pickerDateTime() {
+        return this._pickerDateTime;
     }
-    set pickerMoment(value) {
-        const oldMoment = this._pickerMoment;
+    set pickerDateTime(value) {
+        const oldDateTime = this._pickerDateTime;
         value = this.dateTimeAdapter.deserialize(value);
-        this._pickerMoment =
+        this._pickerDateTime =
             this.getValidDate(value) || this.dateTimeAdapter.now();
-        if (!this.hasSameYear(oldMoment, this._pickerMoment) &&
+        if (!this.hasSameYear(oldDateTime, this._pickerDateTime) &&
             this.initiated) {
             this.generateMonthList();
         }
@@ -1059,8 +1057,8 @@ class OwlYearViewComponent {
         return this._months;
     }
     get activeCell() {
-        if (this._pickerMoment) {
-            return this.dateTimeAdapter.getMonth(this._pickerMoment);
+        if (this._pickerDateTime) {
+            return this.dateTimeAdapter.getMonth(this._pickerDateTime);
         }
     }
     get isInSingleMode() {
@@ -1099,7 +1097,7 @@ class OwlYearViewComponent {
          * */
         this.monthSelected = new EventEmitter();
         /** Emits when any date is activated. */
-        this.pickerMomentChange = new EventEmitter();
+        this.pickerDateTimeChange = new EventEmitter();
         /** Emits when use keyboard enter to select a calendar cell */
         this.keyboardEnter = new EventEmitter();
         this.monthNames = this.dateTimeAdapter.getMonthNames('short');
@@ -1127,61 +1125,61 @@ class OwlYearViewComponent {
      * Handle a new month selected
      */
     selectMonth(month) {
-        const firstDateOfMonth = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.pickerMoment), month, 1);
+        const firstDateOfMonth = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.pickerDateTime), month, 1);
         this.monthSelected.emit(firstDateOfMonth);
         const daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(firstDateOfMonth);
-        const result = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.pickerMoment), month, Math.min(daysInMonth, this.dateTimeAdapter.getDate(this.pickerMoment)), this.dateTimeAdapter.getHours(this.pickerMoment), this.dateTimeAdapter.getMinutes(this.pickerMoment), this.dateTimeAdapter.getSeconds(this.pickerMoment));
+        const result = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.pickerDateTime), month, Math.min(daysInMonth, this.dateTimeAdapter.getDate(this.pickerDateTime)), this.dateTimeAdapter.getHours(this.pickerDateTime), this.dateTimeAdapter.getMinutes(this.pickerDateTime), this.dateTimeAdapter.getSeconds(this.pickerDateTime));
         this.change.emit(result);
     }
     /**
      * Handle keydown event on calendar body
      */
     handleCalendarKeydown(event) {
-        let moment;
+        let dateTime;
         switch (event.keyCode) {
             // minus 1 month
             case LEFT_ARROW:
-                moment = this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, -1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarMonths(this.pickerDateTime, -1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // add 1 month
             case RIGHT_ARROW:
-                moment = this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, 1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarMonths(this.pickerDateTime, 1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // minus 3 months
             case UP_ARROW:
-                moment = this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, -3);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarMonths(this.pickerDateTime, -3);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // add 3 months
             case DOWN_ARROW:
-                moment = this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, 3);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarMonths(this.pickerDateTime, 3);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // move to first month of current year
             case HOME:
-                moment = this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, -this.dateTimeAdapter.getMonth(this.pickerMoment));
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarMonths(this.pickerDateTime, -this.dateTimeAdapter.getMonth(this.pickerDateTime));
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // move to last month of current year
             case END:
-                moment = this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, 11 - this.dateTimeAdapter.getMonth(this.pickerMoment));
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarMonths(this.pickerDateTime, 11 - this.dateTimeAdapter.getMonth(this.pickerDateTime));
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // minus 1 year (or 10 year)
             case PAGE_UP:
-                moment = this.dateTimeAdapter.addCalendarYears(this.pickerMoment, event.altKey ? -10 : -1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarYears(this.pickerDateTime, event.altKey ? -10 : -1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // add 1 year (or 10 year)
             case PAGE_DOWN:
-                moment = this.dateTimeAdapter.addCalendarYears(this.pickerMoment, event.altKey ? 10 : 1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarYears(this.pickerDateTime, event.altKey ? 10 : 1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // Select current month
             case ENTER:
-                this.selectMonth(this.dateTimeAdapter.getMonth(this.pickerMoment));
+                this.selectMonth(this.dateTimeAdapter.getMonth(this.pickerDateTime));
                 this.keyboardEnter.emit();
                 break;
             default:
@@ -1194,7 +1192,7 @@ class OwlYearViewComponent {
      * Generate the calendar month list
      * */
     generateMonthList() {
-        if (!this.pickerMoment) {
+        if (!this.pickerDateTime) {
             return;
         }
         this.setSelectedMonths();
@@ -1215,7 +1213,7 @@ class OwlYearViewComponent {
      * Creates an CalendarCell for the given month.
      */
     createMonthCell(month) {
-        const startDateOfMonth = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.pickerMoment), month, 1);
+        const startDateOfMonth = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.pickerDateTime), month, 1);
         const ariaLabel = this.dateTimeAdapter.format(startDateOfMonth, this.dateTimeFormats.monthYearA11yLabel);
         const cellClass = 'owl-dt-month-' + month;
         return new CalendarCell(month, this.monthNames[month - this.dateTimeAdapter.firstMonthOfTheYear], ariaLabel, this.isMonthEnabled(month), false, cellClass);
@@ -1224,7 +1222,7 @@ class OwlYearViewComponent {
      * Check if the given month is enable
      */
     isMonthEnabled(month) {
-        const firstDateOfMonth = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.pickerMoment), month, 1);
+        const firstDateOfMonth = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.pickerDateTime), month, 1);
         // If any date in the month is selectable,
         // we count the month as enable
         for (let date = firstDateOfMonth; this.dateTimeAdapter.getMonth(date) === month; date = this.dateTimeAdapter.addCalendarDays(date, 1)) {
@@ -1244,11 +1242,11 @@ class OwlYearViewComponent {
      * Returns null if the given Date is in another year.
      */
     getMonthInCurrentYear(date) {
-        if (this.getValidDate(date) && this.getValidDate(this._pickerMoment)) {
-            const result = this.dateTimeAdapter.compareYear(date, this._pickerMoment);
-            // < 0 : the given date's year is before pickerMoment's year, we return -1 as selected month value.
-            // > 0 : the given date's year is after pickerMoment's year, we return 12 as selected month value.
-            // 0 : the give date's year is same as the pickerMoment's year, we return the actual month value.
+        if (this.getValidDate(date) && this.getValidDate(this._pickerDateTime)) {
+            const result = this.dateTimeAdapter.compareYear(date, this._pickerDateTime);
+            // < 0: the selected date is in an earlier year, so return -1.
+            // > 0: the selected date is in a later year, so return 12.
+            // 0: both values are in the same year, so return the actual month.
             if (result < 0) {
                 return -1;
             }
@@ -1299,10 +1297,10 @@ class OwlYearViewComponent {
     focusActiveCell() {
         this.calendarBodyElm.focusActiveCell();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: OwlYearViewComponent, isStandalone: false, selector: "owl-date-time-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { change: "change", monthSelected: "monthSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlMonthView"], ngImport: i0, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\r\n    <thead class=\"owl-dt-calendar-header\">\r\n    <tr>\r\n        <th class=\"owl-dt-calendar-table-divider\" aria-hidden=\"true\" colspan=\"3\"></th>\r\n    </tr>\r\n    </thead>\r\n    <tbody owl-date-time-calendar-body role=\"grid\"\r\n           [rows]=\"months\" [numCols]=\"3\" [cellRatio]=\"3 / 7\"\r\n           [activeCell]=\"activeCell\"\r\n           [todayValue]=\"todayMonth\"\r\n           [selectedValues]=\"selectedMonths\"\r\n           [selectMode]=\"selectMode\"\r\n           (keydown)=\"handleCalendarKeydown($event)\"\r\n           (select)=\"selectCalendarCell($event)\">\r\n    </tbody>\r\n</table>\r\n", styles: [""], dependencies: [{ kind: "component", type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: OwlYearViewComponent, isStandalone: false, selector: "owl-date-time-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerDateTime: "pickerDateTime", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { change: "change", monthSelected: "monthSelected", pickerDateTimeChange: "pickerDateTimeChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlMonthView"], ngImport: i0, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\r\n    <thead class=\"owl-dt-calendar-header\">\r\n    <tr>\r\n        <th class=\"owl-dt-calendar-table-divider\" aria-hidden=\"true\" colspan=\"3\"></th>\r\n    </tr>\r\n    </thead>\r\n    <tbody owl-date-time-calendar-body role=\"grid\"\r\n           [rows]=\"months\" [numCols]=\"3\" [cellRatio]=\"3 / 7\"\r\n           [activeCell]=\"activeCell\"\r\n           [todayValue]=\"todayMonth\"\r\n           [selectedValues]=\"selectedMonths\"\r\n           [selectMode]=\"selectMode\"\r\n           (keydown)=\"handleCalendarKeydown($event)\"\r\n           (select)=\"selectCalendarCell($event)\">\r\n    </tbody>\r\n</table>\r\n", styles: [""], dependencies: [{ kind: "component", type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlYearViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time-year-view', exportAs: 'owlMonthView', host: {
                         '[class.owl-dt-calendar-view]': 'owlDTCalendarView'
@@ -1320,7 +1318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], selecteds: [{
                 type: Input
-            }], pickerMoment: [{
+            }], pickerDateTime: [{
                 type: Input
             }], dateFilter: [{
                 type: Input
@@ -1332,7 +1330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Output
             }], monthSelected: [{
                 type: Output
-            }], pickerMomentChange: [{
+            }], pickerDateTimeChange: [{
                 type: Output
             }], keyboardEnter: [{
                 type: Output
@@ -1392,16 +1390,16 @@ class OwlMonthViewComponent {
         });
         this.setSelectedDates();
     }
-    get pickerMoment() {
-        return this._pickerMoment;
+    get pickerDateTime() {
+        return this._pickerDateTime;
     }
-    set pickerMoment(value) {
-        const oldMoment = this._pickerMoment;
+    set pickerDateTime(value) {
+        const oldDateTime = this._pickerDateTime;
         value = this.dateTimeAdapter.deserialize(value);
-        this._pickerMoment =
+        this._pickerDateTime =
             this.getValidDate(value) || this.dateTimeAdapter.now();
-        this.firstDateOfMonth = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this._pickerMoment), this.dateTimeAdapter.getMonth(this._pickerMoment), 1);
-        if (!this.isSameMonth(oldMoment, this._pickerMoment) &&
+        this.firstDateOfMonth = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this._pickerDateTime), this.dateTimeAdapter.getMonth(this._pickerDateTime), 1);
+        if (!this.isSameMonth(oldDateTime, this._pickerDateTime) &&
             this.initiated) {
             this.generateCalendar();
         }
@@ -1445,8 +1443,8 @@ class OwlMonthViewComponent {
         return this._days;
     }
     get activeCell() {
-        if (this.pickerMoment) {
-            return (this.dateTimeAdapter.getDate(this.pickerMoment) +
+        if (this.pickerDateTime) {
+            return (this.dateTimeAdapter.getDate(this.pickerDateTime) +
                 this.firstRowOffset -
                 1);
         }
@@ -1496,7 +1494,7 @@ class OwlMonthViewComponent {
          * */
         this.userSelection = new EventEmitter();
         /** Emits when any date is activated. */
-        this.pickerMomentChange = new EventEmitter();
+        this.pickerDateTimeChange = new EventEmitter();
     }
     ngOnInit() {
         this.updateFirstDayOfWeek(this.dateTimeAdapter.getLocale());
@@ -1540,57 +1538,57 @@ class OwlMonthViewComponent {
      * Handle keydown event on calendar body
      */
     handleCalendarKeydown(event) {
-        let moment;
+        let dateTime;
         switch (event.keyCode) {
             // minus 1 day
             case LEFT_ARROW:
-                moment = this.dateTimeAdapter.addCalendarDays(this.pickerMoment, -1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarDays(this.pickerDateTime, -1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // add 1 day
             case RIGHT_ARROW:
-                moment = this.dateTimeAdapter.addCalendarDays(this.pickerMoment, 1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarDays(this.pickerDateTime, 1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // minus 1 week
             case UP_ARROW:
-                moment = this.dateTimeAdapter.addCalendarDays(this.pickerMoment, -7);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarDays(this.pickerDateTime, -7);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // add 1 week
             case DOWN_ARROW:
-                moment = this.dateTimeAdapter.addCalendarDays(this.pickerMoment, 7);
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarDays(this.pickerDateTime, 7);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // move to first day of current month
             case HOME:
-                moment = this.dateTimeAdapter.addCalendarDays(this.pickerMoment, 1 - this.dateTimeAdapter.getDate(this.pickerMoment));
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarDays(this.pickerDateTime, 1 - this.dateTimeAdapter.getDate(this.pickerDateTime));
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // move to last day of current month
             case END:
-                moment = this.dateTimeAdapter.addCalendarDays(this.pickerMoment, this.dateTimeAdapter.getNumDaysInMonth(this.pickerMoment) -
-                    this.dateTimeAdapter.getDate(this.pickerMoment));
-                this.pickerMomentChange.emit(moment);
+                dateTime = this.dateTimeAdapter.addCalendarDays(this.pickerDateTime, this.dateTimeAdapter.getNumDaysInMonth(this.pickerDateTime) -
+                    this.dateTimeAdapter.getDate(this.pickerDateTime));
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // minus 1 month (or 1 year)
             case PAGE_UP:
-                moment = event.altKey
-                    ? this.dateTimeAdapter.addCalendarYears(this.pickerMoment, -1)
-                    : this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, -1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = event.altKey
+                    ? this.dateTimeAdapter.addCalendarYears(this.pickerDateTime, -1)
+                    : this.dateTimeAdapter.addCalendarMonths(this.pickerDateTime, -1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
             // add 1 month (or 1 year)
             case PAGE_DOWN:
-                moment = event.altKey
-                    ? this.dateTimeAdapter.addCalendarYears(this.pickerMoment, 1)
-                    : this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, 1);
-                this.pickerMomentChange.emit(moment);
+                dateTime = event.altKey
+                    ? this.dateTimeAdapter.addCalendarYears(this.pickerDateTime, 1)
+                    : this.dateTimeAdapter.addCalendarMonths(this.pickerDateTime, 1);
+                this.pickerDateTimeChange.emit(dateTime);
                 break;
-            // select the pickerMoment
+            // Select the active date.
             case ENTER:
-                if (!this.dateFilter || this.dateFilter(this.pickerMoment)) {
-                    this.selectDate(this.dateTimeAdapter.getDate(this.pickerMoment));
+                if (!this.dateFilter || this.dateFilter(this.pickerDateTime)) {
+                    this.selectDate(this.dateTimeAdapter.getDate(this.pickerDateTime));
                 }
                 break;
             default:
@@ -1620,7 +1618,7 @@ class OwlMonthViewComponent {
      * Generate the calendar days array
      * */
     generateCalendar() {
-        if (!this.pickerMoment) {
+        if (!this.pickerDateTime) {
             return;
         }
         this.todayDate = null;
@@ -1677,7 +1675,7 @@ class OwlMonthViewComponent {
      */
     createDateCell(date, daysDiff) {
         // total days of the month
-        const daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(this.pickerMoment);
+        const daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(this.pickerDateTime);
         const dateNum = this.dateTimeAdapter.getDate(date);
         // const dateName = this.dateNames[dateNum - 1];
         const dateName = dateNum.toString();
@@ -1759,10 +1757,10 @@ class OwlMonthViewComponent {
     focusActiveCell() {
         this.calendarBodyElm.focusActiveCell();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlMonthViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OwlMonthViewComponent, isStandalone: false, selector: "owl-date-time-month-view", inputs: { hideOtherMonths: "hideOtherMonths", showCalendarWeeks: "showCalendarWeeks", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlYearView"], ngImport: i0, template: "@if (showCalendarWeeks) {\r\n    <ul class=\"week-number\">\r\n        @for (week of weekNumbers; track week) {\r\n            <li>\r\n                <span>{{ week }}</span>\r\n            </li>\r\n        }\r\n    </ul>\r\n}\r\n<table\r\n    class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\r\n    [ngClass]=\"{ 'owl-calendar-weeks': showCalendarWeeks }\"\r\n    [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\"\r\n>\r\n    <thead class=\"owl-dt-calendar-header\">\r\n        <tr class=\"owl-dt-weekdays\">\r\n            @for (weekday of weekdays; track weekday.short) {\r\n                <th\r\n                    [attr.aria-label]=\"weekday.long\"\r\n                    class=\"owl-dt-weekday\"\r\n                    scope=\"col\"\r\n                >\r\n                    <span>{{ weekday.short }}</span>\r\n                </th>\r\n            }\r\n        </tr>\r\n        <tr>\r\n            <th\r\n                class=\"owl-dt-calendar-table-divider\"\r\n                [ngClass]=\"{ 'owl-calendar-weeks': showCalendarWeeks }\"\r\n                aria-hidden=\"true\"\r\n                colspan=\"7\"\r\n            ></th>\r\n        </tr>\r\n    </thead>\r\n    <tbody\r\n        owl-date-time-calendar-body\r\n        role=\"grid\"\r\n        [rows]=\"days\"\r\n        [todayValue]=\"todayDate\"\r\n        [selectedValues]=\"selectedDates\"\r\n        [selectMode]=\"selectMode\"\r\n        [activeCell]=\"activeCell\"\r\n        (keydown)=\"handleCalendarKeydown($event)\"\r\n        (select)=\"selectCalendarCell($event)\"\r\n    ></tbody>\r\n</table>\r\n", styles: [".week-number{display:flex;flex-direction:column;justify-content:space-between;margin:46px 0 14px;padding:0;list-style:none;border-right:1px solid rgba(0,0,0,.12);width:8%;font-weight:700}.week-number li{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlMonthViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: OwlMonthViewComponent, isStandalone: false, selector: "owl-date-time-month-view", inputs: { hideOtherMonths: "hideOtherMonths", showCalendarWeeks: "showCalendarWeeks", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerDateTime: "pickerDateTime", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerDateTimeChange: "pickerDateTimeChange" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlYearView"], ngImport: i0, template: "@if (showCalendarWeeks) {\r\n    <ul class=\"week-number\">\r\n        @for (week of weekNumbers; track week) {\r\n            <li>\r\n                <span>{{ week }}</span>\r\n            </li>\r\n        }\r\n    </ul>\r\n}\r\n<table\r\n    class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\r\n    [ngClass]=\"{ 'owl-calendar-weeks': showCalendarWeeks }\"\r\n    [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\"\r\n>\r\n    <thead class=\"owl-dt-calendar-header\">\r\n        <tr class=\"owl-dt-weekdays\">\r\n            @for (weekday of weekdays; track weekday.short) {\r\n                <th\r\n                    [attr.aria-label]=\"weekday.long\"\r\n                    class=\"owl-dt-weekday\"\r\n                    scope=\"col\"\r\n                >\r\n                    <span>{{ weekday.short }}</span>\r\n                </th>\r\n            }\r\n        </tr>\r\n        <tr>\r\n            <th\r\n                class=\"owl-dt-calendar-table-divider\"\r\n                [ngClass]=\"{ 'owl-calendar-weeks': showCalendarWeeks }\"\r\n                aria-hidden=\"true\"\r\n                colspan=\"7\"\r\n            ></th>\r\n        </tr>\r\n    </thead>\r\n    <tbody\r\n        owl-date-time-calendar-body\r\n        role=\"grid\"\r\n        [rows]=\"days\"\r\n        [todayValue]=\"todayDate\"\r\n        [selectedValues]=\"selectedDates\"\r\n        [selectMode]=\"selectMode\"\r\n        [activeCell]=\"activeCell\"\r\n        (keydown)=\"handleCalendarKeydown($event)\"\r\n        (select)=\"selectCalendarCell($event)\"\r\n    ></tbody>\r\n</table>\r\n", styles: [".week-number{display:flex;flex-direction:column;justify-content:space-between;margin:46px 0 14px;padding:0;list-style:none;border-right:1px solid rgba(0,0,0,.12);width:8%;font-weight:700}.week-number li{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlMonthViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlMonthViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time-month-view', exportAs: 'owlYearView', standalone: false, host: {
                         '[class.owl-dt-calendar-view]': 'owlDTCalendarView'
@@ -1786,7 +1784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], selecteds: [{
                 type: Input
-            }], pickerMoment: [{
+            }], pickerDateTime: [{
                 type: Input
             }], dateFilter: [{
                 type: Input
@@ -1798,7 +1796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Output
             }], userSelection: [{
                 type: Output
-            }], pickerMomentChange: [{
+            }], pickerDateTimeChange: [{
                 type: Output
             }], calendarBodyElm: [{
                 type: ViewChild,
@@ -1829,12 +1827,12 @@ class OwlCalendarComponent {
             ? this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(value), this.dateTimeAdapter.getMonth(value), this.dateTimeAdapter.getDate(value))
             : null;
     }
-    get pickerMoment() {
-        return this._pickerMoment;
+    get pickerDateTime() {
+        return this._pickerDateTime;
     }
-    set pickerMoment(value) {
+    set pickerDateTime(value) {
         value = this.dateTimeAdapter.deserialize(value);
-        this._pickerMoment =
+        this._pickerDateTime =
             this.getValidDate(value) || this.dateTimeAdapter.now();
     }
     get selected() {
@@ -1855,8 +1853,8 @@ class OwlCalendarComponent {
     }
     get periodButtonText() {
         return this.isMonthView
-            ? this.dateTimeAdapter.format(this.pickerMoment, this.dateTimeFormats.monthYearLabel)
-            : this.dateTimeAdapter.getYearName(this.pickerMoment);
+            ? this.dateTimeAdapter.format(this.pickerDateTime, this.dateTimeFormats.monthYearLabel)
+            : this.dateTimeAdapter.getYearName(this.pickerDateTime);
     }
     get periodButtonLabel() {
         return this.isMonthView
@@ -1937,8 +1935,8 @@ class OwlCalendarComponent {
          * Whether to should only the multi-year view.
          */
         this.multiyearOnly = false;
-        /** Emits when the currently picker moment changes. */
-        this.pickerMomentChange = new EventEmitter();
+        /** Emits when the displayed date and time changes. */
+        this.pickerDateTimeChange = new EventEmitter();
         /** Emits when the selected date changes. */
         this.dateClicked = new EventEmitter();
         /** Emits when the currently selected date changes. */
@@ -2014,19 +2012,19 @@ class OwlCalendarComponent {
      * Handles user clicks on the previous button.
      * */
     previousClicked() {
-        this.pickerMoment = this.isMonthView
-            ? this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, -1)
-            : this.dateTimeAdapter.addCalendarYears(this.pickerMoment, -1);
-        this.pickerMomentChange.emit(this.pickerMoment);
+        this.pickerDateTime = this.isMonthView
+            ? this.dateTimeAdapter.addCalendarMonths(this.pickerDateTime, -1)
+            : this.dateTimeAdapter.addCalendarYears(this.pickerDateTime, -1);
+        this.pickerDateTimeChange.emit(this.pickerDateTime);
     }
     /**
      * Handles user clicks on the next button.
      * */
     nextClicked() {
-        this.pickerMoment = this.isMonthView
-            ? this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, 1)
-            : this.dateTimeAdapter.addCalendarYears(this.pickerMoment, 1);
-        this.pickerMomentChange.emit(this.pickerMoment);
+        this.pickerDateTime = this.isMonthView
+            ? this.dateTimeAdapter.addCalendarMonths(this.pickerDateTime, 1)
+            : this.dateTimeAdapter.addCalendarYears(this.pickerDateTime, 1);
+        this.pickerDateTimeChange.emit(this.pickerDateTime);
     }
     dateSelected(date) {
         if (!this.dateFilterForViews(date)) {
@@ -2040,10 +2038,10 @@ class OwlCalendarComponent {
         }*/
     }
     /**
-     * Change the pickerMoment value and switch to a specific view
+     * Change the displayed date and switch to a specific view.
      */
     goToDateInView(date, view) {
-        this.handlePickerMomentChange(date);
+        this.handlePickerDateTimeChange(date);
         if ((!this.yearOnly && !this.multiyearOnly) ||
             (this.multiyearOnly && (view !== DateView.MONTH && view !== DateView.YEAR)) ||
             (this.yearOnly && view !== DateView.MONTH)) {
@@ -2055,11 +2053,11 @@ class OwlCalendarComponent {
         return;
     }
     /**
-     * Change the pickerMoment value
+     * Change the displayed date.
      */
-    handlePickerMomentChange(date) {
-        this.pickerMoment = this.dateTimeAdapter.clampDate(date, this.minDate, this.maxDate);
-        this.pickerMomentChange.emit(this.pickerMoment);
+    handlePickerDateTimeChange(date) {
+        this.pickerDateTime = this.dateTimeAdapter.clampDate(date, this.minDate, this.maxDate);
+        this.pickerDateTimeChange.emit(this.pickerDateTime);
         return;
     }
     userSelected() {
@@ -2069,13 +2067,13 @@ class OwlCalendarComponent {
      * Whether the previous period button is enabled.
      */
     prevButtonEnabled() {
-        return (!this.minDate || !this.isSameView(this.pickerMoment, this.minDate));
+        return (!this.minDate || !this.isSameView(this.pickerDateTime, this.minDate));
     }
     /**
      * Whether the next period button is enabled.
      */
     nextButtonEnabled() {
-        return (!this.maxDate || !this.isSameView(this.pickerMoment, this.maxDate));
+        return (!this.maxDate || !this.isSameView(this.pickerDateTime, this.maxDate));
     }
     /**
      * Focus to the host element
@@ -2129,14 +2127,14 @@ class OwlCalendarComponent {
             ? obj
             : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlCalendarComponent, deps: [{ token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OwlCalendarComponent, isStandalone: false, selector: "owl-date-time-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", pickerMoment: "pickerMoment", selected: "selected", selecteds: "selecteds", dateFilter: "dateFilter", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", startView: "startView", yearOnly: "yearOnly", showCalendarWeeks: "showCalendarWeeks", multiyearOnly: "multiyearOnly", hideOtherMonths: "hideOtherMonths" }, outputs: { pickerMomentChange: "pickerMomentChange", dateClicked: "dateClicked", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-calendar": "owlDTCalendarClass" } }, exportAs: ["owlDateTimeCalendar"], ngImport: i0, template: "<div class=\"owl-dt-calendar-control\">\r\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\r\n    <button\r\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\r\n        [disabled]=\"!prevButtonEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\"\r\n        (click)=\"previousClicked()\"\r\n    >\r\n        <span\r\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n            tabindex=\"-1\"\r\n        >\r\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                version=\"1.1\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background: new 0 0 250.738 250.738\"\r\n                xml:space=\"preserve\"\r\n                width=\"100%\"\r\n                height=\"100%\"\r\n            >\r\n                <path\r\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\r\n                    d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\r\n                />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n    <div class=\"owl-dt-calendar-control-content\">\r\n        <button\r\n            class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.aria-label]=\"periodButtonLabel\"\r\n            (click)=\"toggleViews()\"\r\n        >\r\n            <span\r\n                class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                tabindex=\"-1\"\r\n            >\r\n                {{ periodButtonText }}\r\n\r\n                <span\r\n                    class=\"owl-dt-control-button-arrow\"\r\n                    [style.transform]=\"\r\n                        'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\r\n                    \"\r\n                >\r\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\r\n                    <svg\r\n                        version=\"1.1\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                        x=\"0px\"\r\n                        y=\"0px\"\r\n                        width=\"50%\"\r\n                        height=\"50%\"\r\n                        viewBox=\"0 0 292.362 292.362\"\r\n                        style=\"enable-background: new 0 0 292.362 292.362\"\r\n                        xml:space=\"preserve\"\r\n                    >\r\n                        <g>\r\n                            <path\r\n                                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\r\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\r\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"\r\n                            />\r\n                        </g>\r\n                    </svg>\r\n                    <!-- </editor-fold> -->\r\n                </span>\r\n            </span>\r\n        </button>\r\n    </div>\r\n    <button\r\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\r\n        [disabled]=\"!nextButtonEnabled()\"\r\n        [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\"\r\n    >\r\n        <span\r\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n            tabindex=\"-1\"\r\n        >\r\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\r\n            <svg\r\n                version=\"1.1\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background: new 0 0 250.738 250.738\"\r\n                xml:space=\"preserve\"\r\n            >\r\n                <path\r\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\r\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\r\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\r\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\r\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\r\n                />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n</div>\r\n<div class=\"owl-dt-calendar-main\" cdkMonitorSubtreeFocus tabindex=\"-1\">\r\n    @switch (currentView) {\r\n        @case (DateView.MONTH) {\r\n            <owl-date-time-month-view\r\n                [pickerMoment]=\"pickerMoment\"\r\n                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [showCalendarWeeks]=\"showCalendarWeeks\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                [hideOtherMonths]=\"hideOtherMonths\"\r\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n                (selectedChange)=\"dateSelected($event)\"\r\n                (userSelection)=\"userSelected()\"\r\n            ></owl-date-time-month-view>\r\n        }\r\n        @case (DateView.YEAR) {\r\n            <owl-date-time-year-view\r\n                [pickerMoment]=\"pickerMoment\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                (keyboardEnter)=\"focusActiveCell()\"\r\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n                (monthSelected)=\"selectMonthInYearView($event)\"\r\n                (change)=\"goToDateInView($event, DateView.MONTH)\"\r\n            ></owl-date-time-year-view>\r\n        }\r\n        @case (DateView.MULTI_YEARS) {\r\n            <owl-date-time-multi-year-view\r\n                [pickerMoment]=\"pickerMoment\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                (keyboardEnter)=\"focusActiveCell()\"\r\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n                (yearSelected)=\"selectYearInMultiYearView($event)\"\r\n                (change)=\"goToDateInView($event, DateView.YEAR)\"\r\n            ></owl-date-time-multi-year-view>\r\n        }\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: OwlMultiYearViewComponent, selector: "owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["change", "yearSelected", "pickerMomentChange", "keyboardEnter"] }, { kind: "component", type: OwlYearViewComponent, selector: "owl-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["change", "monthSelected", "pickerMomentChange", "keyboardEnter"], exportAs: ["owlMonthView"] }, { kind: "component", type: OwlMonthViewComponent, selector: "owl-date-time-month-view", inputs: ["hideOtherMonths", "showCalendarWeeks", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"], exportAs: ["owlYearView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlCalendarComponent, deps: [{ token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: OwlCalendarComponent, isStandalone: false, selector: "owl-date-time-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", pickerDateTime: "pickerDateTime", selected: "selected", selecteds: "selecteds", dateFilter: "dateFilter", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", startView: "startView", yearOnly: "yearOnly", showCalendarWeeks: "showCalendarWeeks", multiyearOnly: "multiyearOnly", hideOtherMonths: "hideOtherMonths" }, outputs: { pickerDateTimeChange: "pickerDateTimeChange", dateClicked: "dateClicked", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-calendar": "owlDTCalendarClass" } }, exportAs: ["owlDateTimeCalendar"], ngImport: i0, template: "<div class=\"owl-dt-calendar-control\">\r\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\r\n    <button\r\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\r\n        [disabled]=\"!prevButtonEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\"\r\n        (click)=\"previousClicked()\"\r\n    >\r\n        <span\r\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n            tabindex=\"-1\"\r\n        >\r\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                version=\"1.1\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background: new 0 0 250.738 250.738\"\r\n                xml:space=\"preserve\"\r\n                width=\"100%\"\r\n                height=\"100%\"\r\n            >\r\n                <path\r\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\r\n                    d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\r\n                />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n    <div class=\"owl-dt-calendar-control-content\">\r\n        <button\r\n            class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.aria-label]=\"periodButtonLabel\"\r\n            (click)=\"toggleViews()\"\r\n        >\r\n            <span\r\n                class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                tabindex=\"-1\"\r\n            >\r\n                {{ periodButtonText }}\r\n\r\n                <span\r\n                    class=\"owl-dt-control-button-arrow\"\r\n                    [style.transform]=\"\r\n                        'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\r\n                    \"\r\n                >\r\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\r\n                    <svg\r\n                        version=\"1.1\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                        x=\"0px\"\r\n                        y=\"0px\"\r\n                        width=\"50%\"\r\n                        height=\"50%\"\r\n                        viewBox=\"0 0 292.362 292.362\"\r\n                        style=\"enable-background: new 0 0 292.362 292.362\"\r\n                        xml:space=\"preserve\"\r\n                    >\r\n                        <g>\r\n                            <path\r\n                                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\r\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\r\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"\r\n                            />\r\n                        </g>\r\n                    </svg>\r\n                    <!-- </editor-fold> -->\r\n                </span>\r\n            </span>\r\n        </button>\r\n    </div>\r\n    <button\r\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\r\n        [disabled]=\"!nextButtonEnabled()\"\r\n        [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\"\r\n    >\r\n        <span\r\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n            tabindex=\"-1\"\r\n        >\r\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\r\n            <svg\r\n                version=\"1.1\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background: new 0 0 250.738 250.738\"\r\n                xml:space=\"preserve\"\r\n            >\r\n                <path\r\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\r\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\r\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\r\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\r\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\r\n                />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n</div>\r\n<div class=\"owl-dt-calendar-main\" cdkMonitorSubtreeFocus tabindex=\"-1\">\r\n    @switch (currentView) {\r\n        @case (DateView.MONTH) {\r\n            <owl-date-time-month-view\r\n                [pickerDateTime]=\"pickerDateTime\"\r\n                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [showCalendarWeeks]=\"showCalendarWeeks\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                [hideOtherMonths]=\"hideOtherMonths\"\r\n                (pickerDateTimeChange)=\"handlePickerDateTimeChange($event)\"\r\n                (selectedChange)=\"dateSelected($event)\"\r\n                (userSelection)=\"userSelected()\"\r\n            ></owl-date-time-month-view>\r\n        }\r\n        @case (DateView.YEAR) {\r\n            <owl-date-time-year-view\r\n                [pickerDateTime]=\"pickerDateTime\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                (keyboardEnter)=\"focusActiveCell()\"\r\n                (pickerDateTimeChange)=\"handlePickerDateTimeChange($event)\"\r\n                (monthSelected)=\"selectMonthInYearView($event)\"\r\n                (change)=\"goToDateInView($event, DateView.MONTH)\"\r\n            ></owl-date-time-year-view>\r\n        }\r\n        @case (DateView.MULTI_YEARS) {\r\n            <owl-date-time-multi-year-view\r\n                [pickerDateTime]=\"pickerDateTime\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                (keyboardEnter)=\"focusActiveCell()\"\r\n                (pickerDateTimeChange)=\"handlePickerDateTimeChange($event)\"\r\n                (yearSelected)=\"selectYearInMultiYearView($event)\"\r\n                (change)=\"goToDateInView($event, DateView.YEAR)\"\r\n            ></owl-date-time-multi-year-view>\r\n        }\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: OwlMultiYearViewComponent, selector: "owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerDateTime", "dateFilter", "minDate", "maxDate"], outputs: ["change", "yearSelected", "pickerDateTimeChange", "keyboardEnter"] }, { kind: "component", type: OwlYearViewComponent, selector: "owl-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerDateTime", "dateFilter", "minDate", "maxDate"], outputs: ["change", "monthSelected", "pickerDateTimeChange", "keyboardEnter"], exportAs: ["owlMonthView"] }, { kind: "component", type: OwlMonthViewComponent, selector: "owl-date-time-month-view", inputs: ["hideOtherMonths", "showCalendarWeeks", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerDateTime", "dateFilter", "minDate", "maxDate"], outputs: ["selectedChange", "userSelection", "pickerDateTimeChange"], exportAs: ["owlYearView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time-calendar', exportAs: 'owlDateTimeCalendar', standalone: false, host: {
                         '[class.owl-dt-calendar]': 'owlDTCalendarClass'
-                    }, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"owl-dt-calendar-control\">\r\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\r\n    <button\r\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\r\n        [disabled]=\"!prevButtonEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\"\r\n        (click)=\"previousClicked()\"\r\n    >\r\n        <span\r\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n            tabindex=\"-1\"\r\n        >\r\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                version=\"1.1\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background: new 0 0 250.738 250.738\"\r\n                xml:space=\"preserve\"\r\n                width=\"100%\"\r\n                height=\"100%\"\r\n            >\r\n                <path\r\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\r\n                    d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\r\n                />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n    <div class=\"owl-dt-calendar-control-content\">\r\n        <button\r\n            class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.aria-label]=\"periodButtonLabel\"\r\n            (click)=\"toggleViews()\"\r\n        >\r\n            <span\r\n                class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                tabindex=\"-1\"\r\n            >\r\n                {{ periodButtonText }}\r\n\r\n                <span\r\n                    class=\"owl-dt-control-button-arrow\"\r\n                    [style.transform]=\"\r\n                        'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\r\n                    \"\r\n                >\r\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\r\n                    <svg\r\n                        version=\"1.1\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                        x=\"0px\"\r\n                        y=\"0px\"\r\n                        width=\"50%\"\r\n                        height=\"50%\"\r\n                        viewBox=\"0 0 292.362 292.362\"\r\n                        style=\"enable-background: new 0 0 292.362 292.362\"\r\n                        xml:space=\"preserve\"\r\n                    >\r\n                        <g>\r\n                            <path\r\n                                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\r\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\r\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"\r\n                            />\r\n                        </g>\r\n                    </svg>\r\n                    <!-- </editor-fold> -->\r\n                </span>\r\n            </span>\r\n        </button>\r\n    </div>\r\n    <button\r\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\r\n        [disabled]=\"!nextButtonEnabled()\"\r\n        [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\"\r\n    >\r\n        <span\r\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n            tabindex=\"-1\"\r\n        >\r\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\r\n            <svg\r\n                version=\"1.1\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background: new 0 0 250.738 250.738\"\r\n                xml:space=\"preserve\"\r\n            >\r\n                <path\r\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\r\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\r\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\r\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\r\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\r\n                />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n</div>\r\n<div class=\"owl-dt-calendar-main\" cdkMonitorSubtreeFocus tabindex=\"-1\">\r\n    @switch (currentView) {\r\n        @case (DateView.MONTH) {\r\n            <owl-date-time-month-view\r\n                [pickerMoment]=\"pickerMoment\"\r\n                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [showCalendarWeeks]=\"showCalendarWeeks\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                [hideOtherMonths]=\"hideOtherMonths\"\r\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n                (selectedChange)=\"dateSelected($event)\"\r\n                (userSelection)=\"userSelected()\"\r\n            ></owl-date-time-month-view>\r\n        }\r\n        @case (DateView.YEAR) {\r\n            <owl-date-time-year-view\r\n                [pickerMoment]=\"pickerMoment\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                (keyboardEnter)=\"focusActiveCell()\"\r\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n                (monthSelected)=\"selectMonthInYearView($event)\"\r\n                (change)=\"goToDateInView($event, DateView.MONTH)\"\r\n            ></owl-date-time-year-view>\r\n        }\r\n        @case (DateView.MULTI_YEARS) {\r\n            <owl-date-time-multi-year-view\r\n                [pickerMoment]=\"pickerMoment\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                (keyboardEnter)=\"focusActiveCell()\"\r\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n                (yearSelected)=\"selectYearInMultiYearView($event)\"\r\n                (change)=\"goToDateInView($event, DateView.YEAR)\"\r\n            ></owl-date-time-multi-year-view>\r\n        }\r\n    }\r\n</div>\r\n" }]
+                    }, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"owl-dt-calendar-control\">\r\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\r\n    <button\r\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\r\n        [disabled]=\"!prevButtonEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\"\r\n        (click)=\"previousClicked()\"\r\n    >\r\n        <span\r\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n            tabindex=\"-1\"\r\n        >\r\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                version=\"1.1\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background: new 0 0 250.738 250.738\"\r\n                xml:space=\"preserve\"\r\n                width=\"100%\"\r\n                height=\"100%\"\r\n            >\r\n                <path\r\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\r\n                    d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\r\n                />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n    <div class=\"owl-dt-calendar-control-content\">\r\n        <button\r\n            class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.aria-label]=\"periodButtonLabel\"\r\n            (click)=\"toggleViews()\"\r\n        >\r\n            <span\r\n                class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                tabindex=\"-1\"\r\n            >\r\n                {{ periodButtonText }}\r\n\r\n                <span\r\n                    class=\"owl-dt-control-button-arrow\"\r\n                    [style.transform]=\"\r\n                        'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\r\n                    \"\r\n                >\r\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\r\n                    <svg\r\n                        version=\"1.1\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                        x=\"0px\"\r\n                        y=\"0px\"\r\n                        width=\"50%\"\r\n                        height=\"50%\"\r\n                        viewBox=\"0 0 292.362 292.362\"\r\n                        style=\"enable-background: new 0 0 292.362 292.362\"\r\n                        xml:space=\"preserve\"\r\n                    >\r\n                        <g>\r\n                            <path\r\n                                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\r\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\r\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"\r\n                            />\r\n                        </g>\r\n                    </svg>\r\n                    <!-- </editor-fold> -->\r\n                </span>\r\n            </span>\r\n        </button>\r\n    </div>\r\n    <button\r\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\r\n        [disabled]=\"!nextButtonEnabled()\"\r\n        [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\"\r\n    >\r\n        <span\r\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n            tabindex=\"-1\"\r\n        >\r\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\r\n            <svg\r\n                version=\"1.1\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background: new 0 0 250.738 250.738\"\r\n                xml:space=\"preserve\"\r\n            >\r\n                <path\r\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\r\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\r\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\r\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\r\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\r\n                />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n</div>\r\n<div class=\"owl-dt-calendar-main\" cdkMonitorSubtreeFocus tabindex=\"-1\">\r\n    @switch (currentView) {\r\n        @case (DateView.MONTH) {\r\n            <owl-date-time-month-view\r\n                [pickerDateTime]=\"pickerDateTime\"\r\n                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [showCalendarWeeks]=\"showCalendarWeeks\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                [hideOtherMonths]=\"hideOtherMonths\"\r\n                (pickerDateTimeChange)=\"handlePickerDateTimeChange($event)\"\r\n                (selectedChange)=\"dateSelected($event)\"\r\n                (userSelection)=\"userSelected()\"\r\n            ></owl-date-time-month-view>\r\n        }\r\n        @case (DateView.YEAR) {\r\n            <owl-date-time-year-view\r\n                [pickerDateTime]=\"pickerDateTime\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                (keyboardEnter)=\"focusActiveCell()\"\r\n                (pickerDateTimeChange)=\"handlePickerDateTimeChange($event)\"\r\n                (monthSelected)=\"selectMonthInYearView($event)\"\r\n                (change)=\"goToDateInView($event, DateView.MONTH)\"\r\n            ></owl-date-time-year-view>\r\n        }\r\n        @case (DateView.MULTI_YEARS) {\r\n            <owl-date-time-multi-year-view\r\n                [pickerDateTime]=\"pickerDateTime\"\r\n                [selected]=\"selected\"\r\n                [selecteds]=\"selecteds\"\r\n                [selectMode]=\"selectMode\"\r\n                [minDate]=\"minDate\"\r\n                [maxDate]=\"maxDate\"\r\n                [dateFilter]=\"dateFilter\"\r\n                (keyboardEnter)=\"focusActiveCell()\"\r\n                (pickerDateTimeChange)=\"handlePickerDateTimeChange($event)\"\r\n                (yearSelected)=\"selectYearInMultiYearView($event)\"\r\n                (change)=\"goToDateInView($event, DateView.YEAR)\"\r\n            ></owl-date-time-multi-year-view>\r\n        }\r\n    }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -2148,7 +2146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], maxDate: [{
                 type: Input
-            }], pickerMoment: [{
+            }], pickerDateTime: [{
                 type: Input
             }], selected: [{
                 type: Input
@@ -2170,7 +2168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], hideOtherMonths: [{
                 type: Input
-            }], pickerMomentChange: [{
+            }], pickerDateTimeChange: [{
                 type: Output
             }], dateClicked: [{
                 type: Output
@@ -2274,10 +2272,10 @@ class OwlTimerBoxComponent {
     unbindValueInputMouseWheel() {
         this.valueInput.nativeElement.removeEventListener('onwheel' in document ? 'wheel' : 'mousewheel', this.onValueInputMouseWheelBind);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlTimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OwlTimerBoxComponent, isStandalone: false, selector: "owl-date-time-timer-box", inputs: { showDivider: "showDivider", upBtnAriaLabel: "upBtnAriaLabel", upBtnDisabled: "upBtnDisabled", downBtnAriaLabel: "downBtnAriaLabel", downBtnDisabled: "downBtnDisabled", boxValue: "boxValue", value: "value", min: "min", max: "max", step: "step", inputLabel: "inputLabel" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.owl-dt-timer-box": "owlDTTimerBoxClass" } }, viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, static: true }], exportAs: ["owlDateTimeTimerBox"], ngImport: i0, template: "@if (showDivider) {\r\n    <div class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\r\n}\r\n<button\r\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\r\n    type=\"button\"\r\n    tabindex=\"-1\"\r\n    [disabled]=\"upBtnDisabled\"\r\n    [attr.aria-label]=\"upBtnAriaLabel\"\r\n    (click)=\"upBtnClicked()\"\r\n>\r\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\r\n        <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            version=\"1.1\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 451.847 451.846\"\r\n            style=\"enable-background: new 0 0 451.847 451.846\"\r\n            xml:space=\"preserve\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n        >\r\n            <path\r\n                d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\r\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\r\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\r\n            />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n<label class=\"owl-dt-timer-content\">\r\n    <input\r\n        class=\"owl-dt-timer-input\"\r\n        maxlength=\"2\"\r\n        [value]=\"displayValue\"\r\n        (keydown.arrowup)=\"!upBtnDisabled && upBtnClicked()\"\r\n        (keydown.arrowdown)=\"!downBtnDisabled && downBtnClicked()\"\r\n        (input)=\"handleInputChange(valueInput.value)\"\r\n        (focusin)=\"focusIn()\"\r\n        (focusout)=\"focusOut(valueInput.value)\"\r\n        #valueInput\r\n    />\r\n    <span class=\"owl-hidden-accessible\">{{ inputLabel }}</span>\r\n</label>\r\n<button\r\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\r\n    type=\"button\"\r\n    tabindex=\"-1\"\r\n    [disabled]=\"downBtnDisabled\"\r\n    [attr.aria-label]=\"downBtnAriaLabel\"\r\n    (click)=\"downBtnClicked()\"\r\n>\r\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\r\n        <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            version=\"1.1\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 451.847 451.846\"\r\n            style=\"enable-background: new 0 0 451.847 451.846\"\r\n            xml:space=\"preserve\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n        >\r\n            <path\r\n                d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\r\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\r\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\"\r\n            />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlTimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: OwlTimerBoxComponent, isStandalone: false, selector: "owl-date-time-timer-box", inputs: { showDivider: "showDivider", upBtnAriaLabel: "upBtnAriaLabel", upBtnDisabled: "upBtnDisabled", downBtnAriaLabel: "downBtnAriaLabel", downBtnDisabled: "downBtnDisabled", boxValue: "boxValue", value: "value", min: "min", max: "max", step: "step", inputLabel: "inputLabel" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.owl-dt-timer-box": "owlDTTimerBoxClass" } }, viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, static: true }], exportAs: ["owlDateTimeTimerBox"], ngImport: i0, template: "@if (showDivider) {\r\n    <div class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\r\n}\r\n<button\r\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\r\n    type=\"button\"\r\n    tabindex=\"-1\"\r\n    [disabled]=\"upBtnDisabled\"\r\n    [attr.aria-label]=\"upBtnAriaLabel\"\r\n    (click)=\"upBtnClicked()\"\r\n>\r\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\r\n        <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            version=\"1.1\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 451.847 451.846\"\r\n            style=\"enable-background: new 0 0 451.847 451.846\"\r\n            xml:space=\"preserve\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n        >\r\n            <path\r\n                d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\r\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\r\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\r\n            />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n<label class=\"owl-dt-timer-content\">\r\n    <input\r\n        class=\"owl-dt-timer-input\"\r\n        maxlength=\"2\"\r\n        [value]=\"displayValue\"\r\n        (keydown.arrowup)=\"!upBtnDisabled && upBtnClicked()\"\r\n        (keydown.arrowdown)=\"!downBtnDisabled && downBtnClicked()\"\r\n        (input)=\"handleInputChange(valueInput.value)\"\r\n        (focusin)=\"focusIn()\"\r\n        (focusout)=\"focusOut(valueInput.value)\"\r\n        #valueInput\r\n    />\r\n    <span class=\"owl-hidden-accessible\">{{ inputLabel }}</span>\r\n</label>\r\n<button\r\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\r\n    type=\"button\"\r\n    tabindex=\"-1\"\r\n    [disabled]=\"downBtnDisabled\"\r\n    [attr.aria-label]=\"downBtnAriaLabel\"\r\n    (click)=\"downBtnClicked()\"\r\n>\r\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\r\n        <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            version=\"1.1\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 451.847 451.846\"\r\n            style=\"enable-background: new 0 0 451.847 451.846\"\r\n            xml:space=\"preserve\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n        >\r\n            <path\r\n                d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\r\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\r\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\"\r\n            />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlTimerBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlTimerBoxComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'owlDateTimeTimerBox', selector: 'owl-date-time-timer-box', standalone: false, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.owl-dt-timer-box]': 'owlDTTimerBoxClass'
@@ -2317,12 +2315,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * timer.component
  */
 class OwlTimerComponent {
-    get pickerMoment() {
-        return this._pickerMoment;
+    get pickerDateTime() {
+        return this._pickerDateTime;
     }
-    set pickerMoment(value) {
+    set pickerDateTime(value) {
         value = this.dateTimeAdapter.deserialize(value);
-        this._pickerMoment =
+        this._pickerDateTime =
             this.getValidDate(value) || this.dateTimeAdapter.now();
     }
     get minDateTime() {
@@ -2340,7 +2338,7 @@ class OwlTimerComponent {
         this._maxDateTime = this.getValidDate(value);
     }
     get hourValue() {
-        return this.dateTimeAdapter.getHours(this.pickerMoment);
+        return this.dateTimeAdapter.getHours(this.pickerDateTime);
     }
     /**
      * The value would be displayed in hourBox.
@@ -2371,10 +2369,10 @@ class OwlTimerComponent {
         }
     }
     get minuteValue() {
-        return this.dateTimeAdapter.getMinutes(this.pickerMoment);
+        return this.dateTimeAdapter.getMinutes(this.pickerDateTime);
     }
     get secondValue() {
-        return this.dateTimeAdapter.getSeconds(this.pickerMoment);
+        return this.dateTimeAdapter.getSeconds(this.pickerDateTime);
     }
     get upHourButtonLabel() {
         return this.pickerIntl.upHourLabel;
@@ -2411,7 +2409,7 @@ class OwlTimerComponent {
         this.pickerIntl = pickerIntl;
         this.cdRef = cdRef;
         this.dateTimeAdapter = dateTimeAdapter;
-        this.isPM = false; // a flag indicates the current timer moment is in PM or AM
+        this.isPM = false; // Whether the current time is PM in 12-hour mode.
         /**
          * Hours to change per step
          */
@@ -2454,17 +2452,17 @@ class OwlTimerComponent {
         this.setHourValue(hours);
     }
     setHourValue(hours) {
-        const m = this.dateTimeAdapter.setHours(this.pickerMoment, hours);
+        const m = this.dateTimeAdapter.setHours(this.pickerDateTime, hours);
         this.selectedChange.emit(m);
         this.cdRef.markForCheck();
     }
     setMinuteValue(minutes) {
-        const m = this.dateTimeAdapter.setMinutes(this.pickerMoment, minutes);
+        const m = this.dateTimeAdapter.setMinutes(this.pickerDateTime, minutes);
         this.selectedChange.emit(m);
         this.cdRef.markForCheck();
     }
     setSecondValue(seconds) {
-        const m = this.dateTimeAdapter.setSeconds(this.pickerMoment, seconds);
+        const m = this.dateTimeAdapter.setSeconds(this.pickerDateTime, seconds);
         this.selectedChange.emit(m);
         this.cdRef.markForCheck();
     }
@@ -2526,36 +2524,36 @@ class OwlTimerComponent {
             this.compareSeconds(-this.stepSecond, this.minDateTime) > -1);
     }
     /**
-     * PickerMoment's hour value +/- certain amount and compare it to the give date
+     * Adjust the displayed hour and compare it to the given date.
      * 1 is after the comparedDate
      * -1 is before the comparedDate
      * 0 is equal the comparedDate
      * */
     compareHours(amount, comparedDate) {
-        const hours = this.dateTimeAdapter.getHours(this.pickerMoment) + amount;
-        const result = this.dateTimeAdapter.setHours(this.pickerMoment, hours);
+        const hours = this.dateTimeAdapter.getHours(this.pickerDateTime) + amount;
+        const result = this.dateTimeAdapter.setHours(this.pickerDateTime, hours);
         return this.dateTimeAdapter.compare(result, comparedDate);
     }
     /**
-     * PickerMoment's minute value +/- certain amount and compare it to the give date
+     * Adjust the displayed minute and compare it to the given date.
      * 1 is after the comparedDate
      * -1 is before the comparedDate
      * 0 is equal the comparedDate
      * */
     compareMinutes(amount, comparedDate) {
-        const minutes = this.dateTimeAdapter.getMinutes(this.pickerMoment) + amount;
-        const result = this.dateTimeAdapter.setMinutes(this.pickerMoment, minutes);
+        const minutes = this.dateTimeAdapter.getMinutes(this.pickerDateTime) + amount;
+        const result = this.dateTimeAdapter.setMinutes(this.pickerDateTime, minutes);
         return this.dateTimeAdapter.compare(result, comparedDate);
     }
     /**
-     * PickerMoment's second value +/- certain amount and compare it to the give date
+     * Adjust the displayed second and compare it to the given date.
      * 1 is after the comparedDate
      * -1 is before the comparedDate
      * 0 is equal the comparedDate
      * */
     compareSeconds(amount, comparedDate) {
-        const seconds = this.dateTimeAdapter.getSeconds(this.pickerMoment) + amount;
-        const result = this.dateTimeAdapter.setSeconds(this.pickerMoment, seconds);
+        const seconds = this.dateTimeAdapter.getSeconds(this.pickerDateTime) + amount;
+        const result = this.dateTimeAdapter.setSeconds(this.pickerDateTime, seconds);
         return this.dateTimeAdapter.compare(result, comparedDate);
     }
     /**
@@ -2567,10 +2565,10 @@ class OwlTimerComponent {
             ? obj
             : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlTimerComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OwlTimerComponent, isStandalone: false, selector: "owl-date-time-timer", inputs: { pickerMoment: "pickerMoment", minDateTime: "minDateTime", maxDateTime: "maxDateTime", showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.owl-dt-timer": "owlDTTimerClass", "attr.tabindex": "owlDTTimeTabIndex" } }, exportAs: ["owlDateTimeTimer"], ngImport: i0, template: "<owl-date-time-timer-box\r\n    [upBtnAriaLabel]=\"upHourButtonLabel\"\r\n    [downBtnAriaLabel]=\"downHourButtonLabel\"\r\n    [upBtnDisabled]=\"!upHourEnabled()\"\r\n    [downBtnDisabled]=\"!downHourEnabled()\"\r\n    [boxValue]=\"hourBoxValue\"\r\n    [value]=\"hourValue\"\r\n    [min]=\"0\"\r\n    [max]=\"23\"\r\n    [step]=\"stepHour\"\r\n    [inputLabel]=\"'Hour'\"\r\n    (inputChange)=\"setHourValueViaInput($event)\"\r\n    (valueChange)=\"setHourValue($event)\"\r\n></owl-date-time-timer-box>\r\n<owl-date-time-timer-box\r\n    [showDivider]=\"true\"\r\n    [upBtnAriaLabel]=\"upMinuteButtonLabel\"\r\n    [downBtnAriaLabel]=\"downMinuteButtonLabel\"\r\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\r\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\r\n    [value]=\"minuteValue\"\r\n    [min]=\"0\"\r\n    [max]=\"59\"\r\n    [step]=\"stepMinute\"\r\n    [inputLabel]=\"'Minute'\"\r\n    (inputChange)=\"setMinuteValue($event)\"\r\n    (valueChange)=\"setMinuteValue($event)\"\r\n></owl-date-time-timer-box>\r\n@if (showSecondsTimer) {\r\n    <owl-date-time-timer-box\r\n        [showDivider]=\"true\"\r\n        [upBtnAriaLabel]=\"upSecondButtonLabel\"\r\n        [downBtnAriaLabel]=\"downSecondButtonLabel\"\r\n        [upBtnDisabled]=\"!upSecondEnabled()\"\r\n        [downBtnDisabled]=\"!downSecondEnabled()\"\r\n        [value]=\"secondValue\"\r\n        [min]=\"0\"\r\n        [max]=\"59\"\r\n        [step]=\"stepSecond\"\r\n        [inputLabel]=\"'Second'\"\r\n        (inputChange)=\"setSecondValue($event)\"\r\n        (valueChange)=\"setSecondValue($event)\"\r\n    ></owl-date-time-timer-box>\r\n}\r\n@if (hour12Timer) {\r\n    <div class=\"owl-dt-timer-hour12\">\r\n        <button\r\n            class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"setMeridiem($event)\"\r\n        >\r\n            <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n                {{ hour12ButtonLabel }}\r\n            </span>\r\n        </button>\r\n    </div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: OwlTimerBoxComponent, selector: "owl-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"], exportAs: ["owlDateTimeTimerBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlTimerComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: OwlTimerComponent, isStandalone: false, selector: "owl-date-time-timer", inputs: { pickerDateTime: "pickerDateTime", minDateTime: "minDateTime", maxDateTime: "maxDateTime", showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.owl-dt-timer": "owlDTTimerClass", "attr.tabindex": "owlDTTimeTabIndex" } }, exportAs: ["owlDateTimeTimer"], ngImport: i0, template: "<owl-date-time-timer-box\r\n    [upBtnAriaLabel]=\"upHourButtonLabel\"\r\n    [downBtnAriaLabel]=\"downHourButtonLabel\"\r\n    [upBtnDisabled]=\"!upHourEnabled()\"\r\n    [downBtnDisabled]=\"!downHourEnabled()\"\r\n    [boxValue]=\"hourBoxValue\"\r\n    [value]=\"hourValue\"\r\n    [min]=\"0\"\r\n    [max]=\"23\"\r\n    [step]=\"stepHour\"\r\n    [inputLabel]=\"'Hour'\"\r\n    (inputChange)=\"setHourValueViaInput($event)\"\r\n    (valueChange)=\"setHourValue($event)\"\r\n></owl-date-time-timer-box>\r\n<owl-date-time-timer-box\r\n    [showDivider]=\"true\"\r\n    [upBtnAriaLabel]=\"upMinuteButtonLabel\"\r\n    [downBtnAriaLabel]=\"downMinuteButtonLabel\"\r\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\r\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\r\n    [value]=\"minuteValue\"\r\n    [min]=\"0\"\r\n    [max]=\"59\"\r\n    [step]=\"stepMinute\"\r\n    [inputLabel]=\"'Minute'\"\r\n    (inputChange)=\"setMinuteValue($event)\"\r\n    (valueChange)=\"setMinuteValue($event)\"\r\n></owl-date-time-timer-box>\r\n@if (showSecondsTimer) {\r\n    <owl-date-time-timer-box\r\n        [showDivider]=\"true\"\r\n        [upBtnAriaLabel]=\"upSecondButtonLabel\"\r\n        [downBtnAriaLabel]=\"downSecondButtonLabel\"\r\n        [upBtnDisabled]=\"!upSecondEnabled()\"\r\n        [downBtnDisabled]=\"!downSecondEnabled()\"\r\n        [value]=\"secondValue\"\r\n        [min]=\"0\"\r\n        [max]=\"59\"\r\n        [step]=\"stepSecond\"\r\n        [inputLabel]=\"'Second'\"\r\n        (inputChange)=\"setSecondValue($event)\"\r\n        (valueChange)=\"setSecondValue($event)\"\r\n    ></owl-date-time-timer-box>\r\n}\r\n@if (hour12Timer) {\r\n    <div class=\"owl-dt-timer-hour12\">\r\n        <button\r\n            class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"setMeridiem($event)\"\r\n        >\r\n            <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n                {{ hour12ButtonLabel }}\r\n            </span>\r\n        </button>\r\n    </div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: OwlTimerBoxComponent, selector: "owl-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"], exportAs: ["owlDateTimeTimerBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlTimerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlTimerComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'owlDateTimeTimer', selector: 'owl-date-time-timer', preserveWhitespaces: false, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.owl-dt-timer]': 'owlDTTimerClass',
@@ -2578,7 +2576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     }, template: "<owl-date-time-timer-box\r\n    [upBtnAriaLabel]=\"upHourButtonLabel\"\r\n    [downBtnAriaLabel]=\"downHourButtonLabel\"\r\n    [upBtnDisabled]=\"!upHourEnabled()\"\r\n    [downBtnDisabled]=\"!downHourEnabled()\"\r\n    [boxValue]=\"hourBoxValue\"\r\n    [value]=\"hourValue\"\r\n    [min]=\"0\"\r\n    [max]=\"23\"\r\n    [step]=\"stepHour\"\r\n    [inputLabel]=\"'Hour'\"\r\n    (inputChange)=\"setHourValueViaInput($event)\"\r\n    (valueChange)=\"setHourValue($event)\"\r\n></owl-date-time-timer-box>\r\n<owl-date-time-timer-box\r\n    [showDivider]=\"true\"\r\n    [upBtnAriaLabel]=\"upMinuteButtonLabel\"\r\n    [downBtnAriaLabel]=\"downMinuteButtonLabel\"\r\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\r\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\r\n    [value]=\"minuteValue\"\r\n    [min]=\"0\"\r\n    [max]=\"59\"\r\n    [step]=\"stepMinute\"\r\n    [inputLabel]=\"'Minute'\"\r\n    (inputChange)=\"setMinuteValue($event)\"\r\n    (valueChange)=\"setMinuteValue($event)\"\r\n></owl-date-time-timer-box>\r\n@if (showSecondsTimer) {\r\n    <owl-date-time-timer-box\r\n        [showDivider]=\"true\"\r\n        [upBtnAriaLabel]=\"upSecondButtonLabel\"\r\n        [downBtnAriaLabel]=\"downSecondButtonLabel\"\r\n        [upBtnDisabled]=\"!upSecondEnabled()\"\r\n        [downBtnDisabled]=\"!downSecondEnabled()\"\r\n        [value]=\"secondValue\"\r\n        [min]=\"0\"\r\n        [max]=\"59\"\r\n        [step]=\"stepSecond\"\r\n        [inputLabel]=\"'Second'\"\r\n        (inputChange)=\"setSecondValue($event)\"\r\n        (valueChange)=\"setSecondValue($event)\"\r\n    ></owl-date-time-timer-box>\r\n}\r\n@if (hour12Timer) {\r\n    <div class=\"owl-dt-timer-hour12\">\r\n        <button\r\n            class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"setMeridiem($event)\"\r\n        >\r\n            <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\r\n                {{ hour12ButtonLabel }}\r\n            </span>\r\n        </button>\r\n    </div>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
                     type: Optional
-                }] }], propDecorators: { pickerMoment: [{
+                }] }], propDecorators: { pickerDateTime: [{
                 type: Input
             }], minDateTime: [{
                 type: Input
@@ -2614,12 +2612,12 @@ class OwlDateTimeContainerComponent {
     get pickerOpenedStream() {
         return this.pickerOpened$.asObservable();
     }
-    get pickerMoment() {
-        return this._clamPickerMoment;
+    get pickerDateTime() {
+        return this._clampedPickerDateTime;
     }
-    set pickerMoment(value) {
+    set pickerDateTime(value) {
         if (value) {
-            this._clamPickerMoment = this.dateTimeAdapter.clampDate(value, this.picker.minDateTime, this.picker.maxDateTime);
+            this._clampedPickerDateTime = this.dateTimeAdapter.clampDate(value, this.picker.minDateTime, this.picker.maxDateTime);
         }
         this.cdRef.markForCheck();
     }
@@ -2754,7 +2752,7 @@ class OwlDateTimeContainerComponent {
         if (this.picker.isInSingleMode) {
             result = this.dateSelectedInSingleMode(date);
             if (result) {
-                this.pickerMoment = result;
+                this.pickerDateTime = result;
                 this.picker.select(result);
             }
             else {
@@ -2768,18 +2766,18 @@ class OwlDateTimeContainerComponent {
         if (this.picker.isInRangeMode) {
             result = this.dateSelectedInRangeMode(date);
             if (result) {
-                this.pickerMoment = result[this.activeSelectedIndex];
+                this.pickerDateTime = result[this.activeSelectedIndex];
                 this.picker.select(result);
             }
         }
     }
     timeSelected(time) {
-        this.pickerMoment = this.dateTimeAdapter.clone(time);
-        if (!this.picker.dateTimeChecker(this.pickerMoment)) {
+        this.pickerDateTime = this.dateTimeAdapter.clone(time);
+        if (!this.picker.dateTimeChecker(this.pickerDateTime)) {
             return;
         }
         if (this.picker.isInSingleMode) {
-            this.picker.select(this.pickerMoment);
+            this.picker.select(this.pickerDateTime);
             return;
         }
         if (this.picker.isInRangeMode) {
@@ -2788,15 +2786,15 @@ class OwlDateTimeContainerComponent {
             // In this case, we set both the 'from' and 'to' the same value
             if ((this.activeSelectedIndex === 0 &&
                 selecteds[1] &&
-                this.dateTimeAdapter.compare(this.pickerMoment, selecteds[1]) === 1) ||
+                this.dateTimeAdapter.compare(this.pickerDateTime, selecteds[1]) === 1) ||
                 (this.activeSelectedIndex === 1 &&
                     selecteds[0] &&
-                    this.dateTimeAdapter.compare(this.pickerMoment, selecteds[0]) === -1)) {
-                selecteds[0] = this.pickerMoment;
-                selecteds[1] = this.pickerMoment;
+                    this.dateTimeAdapter.compare(this.pickerDateTime, selecteds[0]) === -1)) {
+                selecteds[0] = this.pickerDateTime;
+                selecteds[1] = this.pickerDateTime;
             }
             else {
-                selecteds[this.activeSelectedIndex] = this.pickerMoment;
+                selecteds[this.activeSelectedIndex] = this.pickerDateTime;
             }
             if (selecteds[0]) {
                 this.retainStartTime = this.dateTimeAdapter.clone(selecteds[0]);
@@ -2819,7 +2817,7 @@ class OwlDateTimeContainerComponent {
      * Handle click on set button
      */
     onSetClicked(event) {
-        if (!this.picker.dateTimeChecker(this.pickerMoment)) {
+        if (!this.picker.dateTimeChecker(this.pickerDateTime)) {
             this.hidePicker$.next(null);
             event.preventDefault();
             return;
@@ -2911,13 +2909,13 @@ class OwlDateTimeContainerComponent {
             this.activeSelectedIndex = index;
             const selected = this.picker.selecteds[this.activeSelectedIndex];
             if (this.picker.selecteds && selected) {
-                this.pickerMoment = this.dateTimeAdapter.clone(selected);
+                this.pickerDateTime = this.dateTimeAdapter.clone(selected);
             }
         }
         return;
     }
     initPicker() {
-        this.pickerMoment = this.picker.startAt || this.dateTimeAdapter.now();
+        this.pickerDateTime = this.picker.startAt || this.dateTimeAdapter.now();
         this.activeSelectedIndex = this.picker.selectMode === 'rangeTo' ? 1 : 0;
     }
     /**
@@ -3001,7 +2999,7 @@ class OwlDateTimeContainerComponent {
         let result;
         // if the picker is 'both', update the calendar date's time value
         if (this.picker.pickerType === 'both') {
-            result = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(date), this.dateTimeAdapter.getMonth(date), this.dateTimeAdapter.getDate(date), this.dateTimeAdapter.getHours(this.pickerMoment), this.dateTimeAdapter.getMinutes(this.pickerMoment), this.dateTimeAdapter.getSeconds(this.pickerMoment));
+            result = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(date), this.dateTimeAdapter.getMonth(date), this.dateTimeAdapter.getDate(date), this.dateTimeAdapter.getHours(this.pickerDateTime), this.dateTimeAdapter.getMinutes(this.pickerDateTime), this.dateTimeAdapter.getSeconds(this.pickerDateTime));
             result = this.dateTimeAdapter.clampDate(result, this.picker.minDateTime, this.picker.maxDateTime);
         }
         else {
@@ -3042,10 +3040,10 @@ class OwlDateTimeContainerComponent {
         }
         return duration;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OwlDateTimeContainerComponent, isStandalone: false, selector: "owl-date-time-container", host: { listeners: { "animate.enter": "onAnimateEnter($event)", "animate.leave": "onAnimateLeave($event)" }, properties: { "class.owl-dt-container": "owlDTContainerClass", "class.owl-dt-popup-container": "owlDTPopupContainerClass", "class.owl-dt-dialog-container": "owlDTDialogContainerClass", "class.owl-dt-inline-container": "owlDTInlineContainerClass", "class.owl-dt-container-disabled": "owlDTContainerDisabledClass", "attr.id": "owlDTContainerId" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: OwlCalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0, template: "<div\r\n    [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\r\n    class=\"owl-dt-container-inner\"\r\n>\r\n    @if (pickerType === 'both' || pickerType === 'calendar') {\r\n        <owl-date-time-calendar\r\n            class=\"owl-dt-container-row\"\r\n            [firstDayOfWeek]=\"picker.firstDayOfWeek\"\r\n            [(pickerMoment)]=\"pickerMoment\"\r\n            [selected]=\"picker.selected\"\r\n            [selecteds]=\"picker.selecteds\"\r\n            [selectMode]=\"picker.selectMode\"\r\n            [minDate]=\"picker.minDateTime\"\r\n            [maxDate]=\"picker.maxDateTime\"\r\n            [dateFilter]=\"picker.dateTimeFilter\"\r\n            [startView]=\"picker.startView\"\r\n            [yearOnly]=\"picker.yearOnly\"\r\n            [showCalendarWeeks]=\"picker.showCalendarWeeks\"\r\n            [multiyearOnly]=\"picker.multiyearOnly\"\r\n            [hideOtherMonths]=\"picker.hideOtherMonths\"\r\n            (yearSelected)=\"picker.selectYear($event)\"\r\n            (monthSelected)=\"picker.selectMonth($event)\"\r\n            (dateClicked)=\"picker.selectDate($event)\"\r\n            (selectedChange)=\"dateSelected($event)\"\r\n        ></owl-date-time-calendar>\r\n    }\r\n    @if (pickerType === 'both' || pickerType === 'timer') {\r\n        <owl-date-time-timer\r\n            class=\"owl-dt-container-row\"\r\n            [pickerMoment]=\"pickerMoment\"\r\n            [minDateTime]=\"picker.minDateTime\"\r\n            [maxDateTime]=\"picker.maxDateTime\"\r\n            [showSecondsTimer]=\"picker.showSecondsTimer\"\r\n            [hour12Timer]=\"picker.hour12Timer\"\r\n            [stepHour]=\"picker.stepHour\"\r\n            [stepMinute]=\"picker.stepMinute\"\r\n            [stepSecond]=\"picker.stepSecond\"\r\n            (selectedChange)=\"timeSelected($event)\"\r\n        ></owl-date-time-timer>\r\n    }\r\n    @if (picker.isInRangeMode) {\r\n        <div\r\n            role=\"radiogroup\"\r\n            class=\"owl-dt-container-info owl-dt-container-row\"\r\n        >\r\n            <div\r\n                role=\"radio\"\r\n                [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\r\n                [attr.aria-checked]=\"activeSelectedIndex === 0\"\r\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\r\n                [ngClass]=\"{\r\n                    'owl-dt-container-info-active': activeSelectedIndex === 0,\r\n                }\"\r\n                (click)=\"handleClickOnInfoGroup($event, 0)\"\r\n                (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\r\n                #from\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    <span class=\"owl-dt-container-info-label\"\r\n                        >{{ fromLabel }}:</span\r\n                    >\r\n                    <span class=\"owl-dt-container-info-value\">{{\r\n                        fromFormattedValue\r\n                    }}</span>\r\n                </span>\r\n            </div>\r\n            <div\r\n                role=\"radio\"\r\n                [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\r\n                [attr.aria-checked]=\"activeSelectedIndex === 1\"\r\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\r\n                [ngClass]=\"{\r\n                    'owl-dt-container-info-active': activeSelectedIndex === 1,\r\n                }\"\r\n                (click)=\"handleClickOnInfoGroup($event, 1)\"\r\n                (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\r\n                #to\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    <span class=\"owl-dt-container-info-label\"\r\n                        >{{ toLabel }}:</span\r\n                    >\r\n                    <span class=\"owl-dt-container-info-value\">{{\r\n                        toFormattedValue\r\n                    }}</span>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    }\r\n    @if (showControlButtons) {\r\n        <div class=\"owl-dt-container-buttons owl-dt-container-row\">\r\n            <button\r\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\r\n                type=\"button\"\r\n                tabindex=\"0\"\r\n                (click)=\"onCancelClicked($event)\"\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    {{ cancelLabel }}\r\n                </span>\r\n            </button>\r\n            <button\r\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\r\n                type=\"button\"\r\n                tabindex=\"0\"\r\n                (click)=\"onSetClicked($event)\"\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    {{ setLabel }}\r\n                </span>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: OwlTimerComponent, selector: "owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }, { kind: "component", type: OwlCalendarComponent, selector: "owl-date-time-calendar", inputs: ["minDate", "maxDate", "pickerMoment", "selected", "selecteds", "dateFilter", "firstDayOfWeek", "selectMode", "startView", "yearOnly", "showCalendarWeeks", "multiyearOnly", "hideOtherMonths"], outputs: ["pickerMomentChange", "dateClicked", "selectedChange", "userSelection", "yearSelected", "monthSelected"], exportAs: ["owlDateTimeCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: OwlDateTimeContainerComponent, isStandalone: false, selector: "owl-date-time-container", host: { listeners: { "animate.enter": "onAnimateEnter($event)", "animate.leave": "onAnimateLeave($event)" }, properties: { "class.owl-dt-container": "owlDTContainerClass", "class.owl-dt-popup-container": "owlDTPopupContainerClass", "class.owl-dt-dialog-container": "owlDTDialogContainerClass", "class.owl-dt-inline-container": "owlDTInlineContainerClass", "class.owl-dt-container-disabled": "owlDTContainerDisabledClass", "attr.id": "owlDTContainerId" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: OwlCalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0, template: "<div\r\n    [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\r\n    class=\"owl-dt-container-inner\"\r\n>\r\n    @if (pickerType === 'both' || pickerType === 'calendar') {\r\n        <owl-date-time-calendar\r\n            class=\"owl-dt-container-row\"\r\n            [firstDayOfWeek]=\"picker.firstDayOfWeek\"\r\n            [(pickerDateTime)]=\"pickerDateTime\"\r\n            [selected]=\"picker.selected\"\r\n            [selecteds]=\"picker.selecteds\"\r\n            [selectMode]=\"picker.selectMode\"\r\n            [minDate]=\"picker.minDateTime\"\r\n            [maxDate]=\"picker.maxDateTime\"\r\n            [dateFilter]=\"picker.dateTimeFilter\"\r\n            [startView]=\"picker.startView\"\r\n            [yearOnly]=\"picker.yearOnly\"\r\n            [showCalendarWeeks]=\"picker.showCalendarWeeks\"\r\n            [multiyearOnly]=\"picker.multiyearOnly\"\r\n            [hideOtherMonths]=\"picker.hideOtherMonths\"\r\n            (yearSelected)=\"picker.selectYear($event)\"\r\n            (monthSelected)=\"picker.selectMonth($event)\"\r\n            (dateClicked)=\"picker.selectDate($event)\"\r\n            (selectedChange)=\"dateSelected($event)\"\r\n        ></owl-date-time-calendar>\r\n    }\r\n    @if (pickerType === 'both' || pickerType === 'timer') {\r\n        <owl-date-time-timer\r\n            class=\"owl-dt-container-row\"\r\n            [pickerDateTime]=\"pickerDateTime\"\r\n            [minDateTime]=\"picker.minDateTime\"\r\n            [maxDateTime]=\"picker.maxDateTime\"\r\n            [showSecondsTimer]=\"picker.showSecondsTimer\"\r\n            [hour12Timer]=\"picker.hour12Timer\"\r\n            [stepHour]=\"picker.stepHour\"\r\n            [stepMinute]=\"picker.stepMinute\"\r\n            [stepSecond]=\"picker.stepSecond\"\r\n            (selectedChange)=\"timeSelected($event)\"\r\n        ></owl-date-time-timer>\r\n    }\r\n    @if (picker.isInRangeMode) {\r\n        <div\r\n            role=\"radiogroup\"\r\n            class=\"owl-dt-container-info owl-dt-container-row\"\r\n        >\r\n            <div\r\n                role=\"radio\"\r\n                [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\r\n                [attr.aria-checked]=\"activeSelectedIndex === 0\"\r\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\r\n                [ngClass]=\"{\r\n                    'owl-dt-container-info-active': activeSelectedIndex === 0,\r\n                }\"\r\n                (click)=\"handleClickOnInfoGroup($event, 0)\"\r\n                (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\r\n                #from\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    <span class=\"owl-dt-container-info-label\"\r\n                        >{{ fromLabel }}:</span\r\n                    >\r\n                    <span class=\"owl-dt-container-info-value\">{{\r\n                        fromFormattedValue\r\n                    }}</span>\r\n                </span>\r\n            </div>\r\n            <div\r\n                role=\"radio\"\r\n                [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\r\n                [attr.aria-checked]=\"activeSelectedIndex === 1\"\r\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\r\n                [ngClass]=\"{\r\n                    'owl-dt-container-info-active': activeSelectedIndex === 1,\r\n                }\"\r\n                (click)=\"handleClickOnInfoGroup($event, 1)\"\r\n                (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\r\n                #to\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    <span class=\"owl-dt-container-info-label\"\r\n                        >{{ toLabel }}:</span\r\n                    >\r\n                    <span class=\"owl-dt-container-info-value\">{{\r\n                        toFormattedValue\r\n                    }}</span>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    }\r\n    @if (showControlButtons) {\r\n        <div class=\"owl-dt-container-buttons owl-dt-container-row\">\r\n            <button\r\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\r\n                type=\"button\"\r\n                tabindex=\"0\"\r\n                (click)=\"onCancelClicked($event)\"\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    {{ cancelLabel }}\r\n                </span>\r\n            </button>\r\n            <button\r\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\r\n                type=\"button\"\r\n                tabindex=\"0\"\r\n                (click)=\"onSetClicked($event)\"\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    {{ setLabel }}\r\n                </span>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: OwlTimerComponent, selector: "owl-date-time-timer", inputs: ["pickerDateTime", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }, { kind: "component", type: OwlCalendarComponent, selector: "owl-date-time-calendar", inputs: ["minDate", "maxDate", "pickerDateTime", "selected", "selecteds", "dateFilter", "firstDayOfWeek", "selectMode", "startView", "yearOnly", "showCalendarWeeks", "multiyearOnly", "hideOtherMonths"], outputs: ["pickerDateTimeChange", "dateClicked", "selectedChange", "userSelection", "yearSelected", "monthSelected"], exportAs: ["owlDateTimeCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeContainerComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'owlDateTimeContainer', selector: 'owl-date-time-container', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, host: {
                         '(animate.enter)': 'onAnimateEnter($event)',
@@ -3056,7 +3054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         '[class.owl-dt-inline-container]': 'owlDTInlineContainerClass',
                         '[class.owl-dt-container-disabled]': 'owlDTContainerDisabledClass',
                         '[attr.id]': 'owlDTContainerId',
-                    }, template: "<div\r\n    [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\r\n    class=\"owl-dt-container-inner\"\r\n>\r\n    @if (pickerType === 'both' || pickerType === 'calendar') {\r\n        <owl-date-time-calendar\r\n            class=\"owl-dt-container-row\"\r\n            [firstDayOfWeek]=\"picker.firstDayOfWeek\"\r\n            [(pickerMoment)]=\"pickerMoment\"\r\n            [selected]=\"picker.selected\"\r\n            [selecteds]=\"picker.selecteds\"\r\n            [selectMode]=\"picker.selectMode\"\r\n            [minDate]=\"picker.minDateTime\"\r\n            [maxDate]=\"picker.maxDateTime\"\r\n            [dateFilter]=\"picker.dateTimeFilter\"\r\n            [startView]=\"picker.startView\"\r\n            [yearOnly]=\"picker.yearOnly\"\r\n            [showCalendarWeeks]=\"picker.showCalendarWeeks\"\r\n            [multiyearOnly]=\"picker.multiyearOnly\"\r\n            [hideOtherMonths]=\"picker.hideOtherMonths\"\r\n            (yearSelected)=\"picker.selectYear($event)\"\r\n            (monthSelected)=\"picker.selectMonth($event)\"\r\n            (dateClicked)=\"picker.selectDate($event)\"\r\n            (selectedChange)=\"dateSelected($event)\"\r\n        ></owl-date-time-calendar>\r\n    }\r\n    @if (pickerType === 'both' || pickerType === 'timer') {\r\n        <owl-date-time-timer\r\n            class=\"owl-dt-container-row\"\r\n            [pickerMoment]=\"pickerMoment\"\r\n            [minDateTime]=\"picker.minDateTime\"\r\n            [maxDateTime]=\"picker.maxDateTime\"\r\n            [showSecondsTimer]=\"picker.showSecondsTimer\"\r\n            [hour12Timer]=\"picker.hour12Timer\"\r\n            [stepHour]=\"picker.stepHour\"\r\n            [stepMinute]=\"picker.stepMinute\"\r\n            [stepSecond]=\"picker.stepSecond\"\r\n            (selectedChange)=\"timeSelected($event)\"\r\n        ></owl-date-time-timer>\r\n    }\r\n    @if (picker.isInRangeMode) {\r\n        <div\r\n            role=\"radiogroup\"\r\n            class=\"owl-dt-container-info owl-dt-container-row\"\r\n        >\r\n            <div\r\n                role=\"radio\"\r\n                [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\r\n                [attr.aria-checked]=\"activeSelectedIndex === 0\"\r\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\r\n                [ngClass]=\"{\r\n                    'owl-dt-container-info-active': activeSelectedIndex === 0,\r\n                }\"\r\n                (click)=\"handleClickOnInfoGroup($event, 0)\"\r\n                (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\r\n                #from\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    <span class=\"owl-dt-container-info-label\"\r\n                        >{{ fromLabel }}:</span\r\n                    >\r\n                    <span class=\"owl-dt-container-info-value\">{{\r\n                        fromFormattedValue\r\n                    }}</span>\r\n                </span>\r\n            </div>\r\n            <div\r\n                role=\"radio\"\r\n                [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\r\n                [attr.aria-checked]=\"activeSelectedIndex === 1\"\r\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\r\n                [ngClass]=\"{\r\n                    'owl-dt-container-info-active': activeSelectedIndex === 1,\r\n                }\"\r\n                (click)=\"handleClickOnInfoGroup($event, 1)\"\r\n                (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\r\n                #to\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    <span class=\"owl-dt-container-info-label\"\r\n                        >{{ toLabel }}:</span\r\n                    >\r\n                    <span class=\"owl-dt-container-info-value\">{{\r\n                        toFormattedValue\r\n                    }}</span>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    }\r\n    @if (showControlButtons) {\r\n        <div class=\"owl-dt-container-buttons owl-dt-container-row\">\r\n            <button\r\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\r\n                type=\"button\"\r\n                tabindex=\"0\"\r\n                (click)=\"onCancelClicked($event)\"\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    {{ cancelLabel }}\r\n                </span>\r\n            </button>\r\n            <button\r\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\r\n                type=\"button\"\r\n                tabindex=\"0\"\r\n                (click)=\"onSetClicked($event)\"\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    {{ setLabel }}\r\n                </span>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n" }]
+                    }, template: "<div\r\n    [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\r\n    class=\"owl-dt-container-inner\"\r\n>\r\n    @if (pickerType === 'both' || pickerType === 'calendar') {\r\n        <owl-date-time-calendar\r\n            class=\"owl-dt-container-row\"\r\n            [firstDayOfWeek]=\"picker.firstDayOfWeek\"\r\n            [(pickerDateTime)]=\"pickerDateTime\"\r\n            [selected]=\"picker.selected\"\r\n            [selecteds]=\"picker.selecteds\"\r\n            [selectMode]=\"picker.selectMode\"\r\n            [minDate]=\"picker.minDateTime\"\r\n            [maxDate]=\"picker.maxDateTime\"\r\n            [dateFilter]=\"picker.dateTimeFilter\"\r\n            [startView]=\"picker.startView\"\r\n            [yearOnly]=\"picker.yearOnly\"\r\n            [showCalendarWeeks]=\"picker.showCalendarWeeks\"\r\n            [multiyearOnly]=\"picker.multiyearOnly\"\r\n            [hideOtherMonths]=\"picker.hideOtherMonths\"\r\n            (yearSelected)=\"picker.selectYear($event)\"\r\n            (monthSelected)=\"picker.selectMonth($event)\"\r\n            (dateClicked)=\"picker.selectDate($event)\"\r\n            (selectedChange)=\"dateSelected($event)\"\r\n        ></owl-date-time-calendar>\r\n    }\r\n    @if (pickerType === 'both' || pickerType === 'timer') {\r\n        <owl-date-time-timer\r\n            class=\"owl-dt-container-row\"\r\n            [pickerDateTime]=\"pickerDateTime\"\r\n            [minDateTime]=\"picker.minDateTime\"\r\n            [maxDateTime]=\"picker.maxDateTime\"\r\n            [showSecondsTimer]=\"picker.showSecondsTimer\"\r\n            [hour12Timer]=\"picker.hour12Timer\"\r\n            [stepHour]=\"picker.stepHour\"\r\n            [stepMinute]=\"picker.stepMinute\"\r\n            [stepSecond]=\"picker.stepSecond\"\r\n            (selectedChange)=\"timeSelected($event)\"\r\n        ></owl-date-time-timer>\r\n    }\r\n    @if (picker.isInRangeMode) {\r\n        <div\r\n            role=\"radiogroup\"\r\n            class=\"owl-dt-container-info owl-dt-container-row\"\r\n        >\r\n            <div\r\n                role=\"radio\"\r\n                [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\r\n                [attr.aria-checked]=\"activeSelectedIndex === 0\"\r\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\r\n                [ngClass]=\"{\r\n                    'owl-dt-container-info-active': activeSelectedIndex === 0,\r\n                }\"\r\n                (click)=\"handleClickOnInfoGroup($event, 0)\"\r\n                (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\r\n                #from\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    <span class=\"owl-dt-container-info-label\"\r\n                        >{{ fromLabel }}:</span\r\n                    >\r\n                    <span class=\"owl-dt-container-info-value\">{{\r\n                        fromFormattedValue\r\n                    }}</span>\r\n                </span>\r\n            </div>\r\n            <div\r\n                role=\"radio\"\r\n                [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\r\n                [attr.aria-checked]=\"activeSelectedIndex === 1\"\r\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\r\n                [ngClass]=\"{\r\n                    'owl-dt-container-info-active': activeSelectedIndex === 1,\r\n                }\"\r\n                (click)=\"handleClickOnInfoGroup($event, 1)\"\r\n                (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\r\n                #to\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    <span class=\"owl-dt-container-info-label\"\r\n                        >{{ toLabel }}:</span\r\n                    >\r\n                    <span class=\"owl-dt-container-info-value\">{{\r\n                        toFormattedValue\r\n                    }}</span>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    }\r\n    @if (showControlButtons) {\r\n        <div class=\"owl-dt-container-buttons owl-dt-container-row\">\r\n            <button\r\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\r\n                type=\"button\"\r\n                tabindex=\"0\"\r\n                (click)=\"onCancelClicked($event)\"\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    {{ cancelLabel }}\r\n                </span>\r\n            </button>\r\n            <button\r\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\r\n                type=\"button\"\r\n                tabindex=\"0\"\r\n                (click)=\"onSetClicked($event)\"\r\n            >\r\n                <span\r\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\r\n                    tabindex=\"-1\"\r\n                >\r\n                    {{ setLabel }}\r\n                </span>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: DateTimeAdapter, decorators: [{
                     type: Optional
                 }] }], propDecorators: { calendar: [{
@@ -3139,7 +3137,8 @@ class OwlDialogRef {
         /**
          * The instance of component opened into modal
          * */
-        this.componentInstance = signal(undefined, ...(ngDevMode ? [{ debugName: "componentInstance" }] : []));
+        this.componentInstance = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "componentInstance" }] : /* istanbul ignore next */ []));
         /** Whether the user is allowed to close the dialog. */
         this.disableClose = true;
         this.disableClose = this.container.config.disableClose;
@@ -3285,7 +3284,8 @@ class OwlDialogContainerComponent extends BasePortalOutlet {
         this.ariaLabelledBy = null;
         /** Emits when an animation state changes. */
         this.animationStateChanged = new EventEmitter();
-        this.isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
+        this.isAnimating = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAnimating" }] : /* istanbul ignore next */ []));
         // for animation purpose
         this.params = {
             x: '0px',
@@ -3390,10 +3390,10 @@ class OwlDialogContainerComponent extends BasePortalOutlet {
             this.focusTrap.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDialogContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1.FocusTrapFactory }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: OwlDialogContainerComponent, isStandalone: false, selector: "owl-dialog-container", host: { properties: { "class.owl-dialog-container": "owlDialogContainerClass", "attr.tabindex": "owlDialogContainerTabIndex", "attr.id": "owlDialogContainerId", "attr.role": "owlDialogContainerRole", "attr.aria-labelledby": "owlDialogContainerAriaLabelledby", "attr.aria-describedby": "owlDialogContainerAriaDescribedby" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [cdkPortalOutlet]></ng-template>\r\n", dependencies: [{ kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDialogContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1.FocusTrapFactory }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: OwlDialogContainerComponent, isStandalone: false, selector: "owl-dialog-container", host: { properties: { "class.owl-dialog-container": "owlDialogContainerClass", "attr.tabindex": "owlDialogContainerTabIndex", "attr.id": "owlDialogContainerId", "attr.role": "owlDialogContainerRole", "attr.aria-labelledby": "owlDialogContainerAriaLabelledby", "attr.aria-describedby": "owlDialogContainerAriaDescribedby" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [cdkPortalOutlet]></ng-template>\r\n", dependencies: [{ kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDialogContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-dialog-container', standalone: false, host: {
                         '[class.owl-dialog-container]': 'owlDialogContainerClass',
@@ -3648,10 +3648,10 @@ class OwlDialogService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDialogService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: i2.Location, optional: true }, { token: OWL_DIALOG_SCROLL_STRATEGY }, { token: OWL_DIALOG_DEFAULT_OPTIONS, optional: true }, { token: OwlDialogService, optional: true, skipSelf: true }, { token: i1$1.OverlayContainer }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDialogService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDialogService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: i2.Location, optional: true }, { token: OWL_DIALOG_SCROLL_STRATEGY }, { token: OWL_DIALOG_DEFAULT_OPTIONS, optional: true }, { token: OwlDialogService, optional: true, skipSelf: true }, { token: i1$1.OverlayContainer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDialogService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDialogService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: i2.Location, decorators: [{
                     type: Optional
@@ -4190,10 +4190,10 @@ class OwlDateTimeComponent extends OwlDateTime {
             }
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: OwlDialogService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DTPICKER_SCROLL_STRATEGY }, { token: OWL_DATE_TIME_FORMATS, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: OwlDateTimeComponent, isStandalone: false, selector: "owl-date-time", inputs: { backdropClass: "backdropClass", panelClass: "panelClass", startAt: "startAt", endAt: "endAt", pickerType: "pickerType", pickerMode: "pickerMode", disabled: "disabled", opened: "opened", scrollStrategy: "scrollStrategy" }, outputs: { afterPickerClosed: "afterPickerClosed", beforePickerOpen: "beforePickerOpen", afterPickerOpen: "afterPickerOpen", yearSelected: "yearSelected", monthSelected: "monthSelected", dateSelected: "dateSelected" }, exportAs: ["owlDateTime"], usesInheritance: true, ngImport: i0, template: "", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: OwlDialogService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DTPICKER_SCROLL_STRATEGY }, { token: OWL_DATE_TIME_FORMATS, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: OwlDateTimeComponent, isStandalone: false, selector: "owl-date-time", inputs: { backdropClass: "backdropClass", panelClass: "panelClass", startAt: "startAt", endAt: "endAt", pickerType: "pickerType", pickerMode: "pickerMode", disabled: "disabled", opened: "opened", scrollStrategy: "scrollStrategy" }, outputs: { afterPickerClosed: "afterPickerClosed", beforePickerOpen: "beforePickerOpen", afterPickerOpen: "afterPickerOpen", yearSelected: "yearSelected", monthSelected: "monthSelected", dateSelected: "dateSelected" }, exportAs: ["owlDateTime"], usesInheritance: true, ngImport: i0, template: "", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time', exportAs: 'owlDateTime', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "" }]
         }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: OwlDialogService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
@@ -4529,14 +4529,12 @@ class OwlDateTimeInputDirective {
         /** Emits when the disabled state has changed */
         this.disabledChange = new EventEmitter();
         if (!this.dateTimeAdapter) {
-            throw Error(`OwlDateTimePicker: No provider found for DateTimePicker. You must import one of the following ` +
-                `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
-                `custom implementation.`);
+            throw Error(`OwlDateTimePicker: No provider found for DateTimeAdapter. You must import ` +
+                `OwlLuxonDateTimeModule at your application root or provide a custom implementation.`);
         }
         if (!this.dateTimeFormats) {
-            throw Error(`OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import one of the following ` +
-                `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
-                `custom implementation.`);
+            throw Error(`OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import ` +
+                `OwlLuxonDateTimeModule at your application root or provide custom formats.`);
         }
         this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {
             this.value = this.value;
@@ -4813,13 +4811,13 @@ class OwlDateTimeInputDirective {
         }
         return first === second;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: OwlDateTimeInputDirective, isStandalone: false, selector: "input[owlDateTime]", inputs: { required: "required", owlDateTime: "owlDateTime", owlDateTimeFilter: "owlDateTimeFilter", _disabled: "_disabled", min: "min", max: "max", selectMode: "selectMode", rangeSeparator: "rangeSeparator", value: "value", values: "values" }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput" }, host: { listeners: { "keydown": "handleKeydownOnHost($event)", "blur": "handleBlurOnHost($event)", "input": "handleInputOnHost($event)", "change": "handleChangeOnHost($event)" }, properties: { "attr.aria-haspopup": "owlDateTimeInputAriaHaspopup", "attr.aria-owns": "owlDateTimeInputAriaOwns", "attr.min": "minIso8601", "attr.max": "maxIso8601", "disabled": "owlDateTimeInputDisabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: OwlDateTimeInputDirective, isStandalone: false, selector: "input[owlDateTime]", inputs: { required: "required", owlDateTime: "owlDateTime", owlDateTimeFilter: "owlDateTimeFilter", _disabled: "_disabled", min: "min", max: "max", selectMode: "selectMode", rangeSeparator: "rangeSeparator", value: "value", values: "values" }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput" }, host: { listeners: { "keydown": "handleKeydownOnHost($event)", "blur": "handleBlurOnHost($event)", "input": "handleInputOnHost($event)", "change": "handleChangeOnHost($event)" }, properties: { "attr.aria-haspopup": "owlDateTimeInputAriaHaspopup", "attr.aria-owns": "owlDateTimeInputAriaOwns", "attr.min": "minIso8601", "attr.max": "maxIso8601", "disabled": "owlDateTimeInputDisabled" } }, providers: [
             OWL_DATETIME_VALUE_ACCESSOR$1,
             OWL_DATETIME_VALIDATORS,
         ], exportAs: ["owlDateTimeInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[owlDateTime]',
@@ -4890,10 +4888,10 @@ class NumberFixedLenPipe {
         }
         return numString;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberFixedLenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: NumberFixedLenPipe, isStandalone: false, name: "numberFixedLen" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumberFixedLenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: NumberFixedLenPipe, isStandalone: false, name: "numberFixedLen" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberFixedLenPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumberFixedLenPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'numberFixedLen',
@@ -5092,11 +5090,11 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
     writeValue(value) {
         if (this.isInSingleMode) {
             this.value = value;
-            this.container.pickerMoment = value;
+            this.container.pickerDateTime = value;
         }
         else {
             this.values = value;
-            this.container.pickerMoment = this._values[this.container.activeSelectedIndex];
+            this.container.pickerDateTime = this._values[this.container.activeSelectedIndex];
         }
     }
     registerOnChange(fn) {
@@ -5139,10 +5137,10 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
     selectDate(normalizedDate) {
         this.dateSelected.emit(normalizedDate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeInlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: OwlDateTimeInlineComponent, isStandalone: false, selector: "owl-date-time-inline", inputs: { pickerType: "pickerType", disabled: "disabled", selectMode: "selectMode", startAt: "startAt", endAt: "endAt", dateTimeFilter: ["owlDateTimeFilter", "dateTimeFilter"], minDateTime: ["min", "minDateTime"], maxDateTime: ["max", "maxDateTime"], value: "value", values: "values" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", dateSelected: "dateSelected" }, host: { properties: { "class.owl-dt-inline": "owlDTInlineClass" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR], viewQueries: [{ propertyName: "container", first: true, predicate: OwlDateTimeContainerComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<owl-date-time-container></owl-date-time-container>", styles: [":host{--container-enter-animation-duration: 0;--container-leave-animation-duration: 0}\n"], dependencies: [{ kind: "component", type: OwlDateTimeContainerComponent, selector: "owl-date-time-container", exportAs: ["owlDateTimeContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeInlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: OwlDateTimeInlineComponent, isStandalone: false, selector: "owl-date-time-inline", inputs: { pickerType: "pickerType", disabled: "disabled", selectMode: "selectMode", startAt: "startAt", endAt: "endAt", dateTimeFilter: ["owlDateTimeFilter", "dateTimeFilter"], minDateTime: ["min", "minDateTime"], maxDateTime: ["max", "maxDateTime"], value: "value", values: "values" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", dateSelected: "dateSelected" }, host: { properties: { "class.owl-dt-inline": "owlDTInlineClass" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR], viewQueries: [{ propertyName: "container", first: true, predicate: OwlDateTimeContainerComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<owl-date-time-container></owl-date-time-container>", styles: [":host{--container-enter-animation-duration: 0;--container-leave-animation-duration: 0}\n"], dependencies: [{ kind: "component", type: OwlDateTimeContainerComponent, selector: "owl-date-time-container", exportAs: ["owlDateTimeContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeInlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeInlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time-inline', host: {
                         '[class.owl-dt-inline]': 'owlDTInlineClass'
@@ -5192,14 +5190,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * dialog.module
  */
 class OwlDialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OwlDialogModule, declarations: [OwlDialogContainerComponent], imports: [CommonModule, A11yModule, OverlayModule, PortalModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDialogModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: OwlDialogModule, declarations: [OwlDialogContainerComponent], imports: [CommonModule, A11yModule, OverlayModule, PortalModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDialogModule, providers: [
             OWL_DIALOG_SCROLL_STRATEGY_PROVIDER,
             OwlDialogService,
         ], imports: [CommonModule, A11yModule, OverlayModule, PortalModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, A11yModule, OverlayModule, PortalModule],
@@ -5218,8 +5216,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * date-time.module
  */
 class OwlDateTimeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeModule, declarations: [OwlDateTimeTriggerDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeModule, declarations: [OwlDateTimeTriggerDirective,
             OwlDateTimeInputDirective,
             OwlDateTimeComponent,
             OwlDateTimeContainerComponent,
@@ -5240,13 +5238,13 @@ class OwlDateTimeModule {
             OwlMultiYearViewComponent,
             OwlYearViewComponent,
             OwlMonthViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeModule, providers: [
             OwlDateTimeIntl,
             OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER,
             ...optionsProviders,
         ], imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule],
@@ -5494,10 +5492,10 @@ class LuxonDateTimeAdapter extends DateTimeAdapter {
     setLocale(locale) {
         super.setLocale(locale || 'ru');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LuxonDateTimeAdapter, deps: [{ token: OWL_DATE_TIME_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LuxonDateTimeAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LuxonDateTimeAdapter, deps: [{ token: OWL_DATE_TIME_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LuxonDateTimeAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LuxonDateTimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LuxonDateTimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -5520,16 +5518,16 @@ const OWL_LUXON_DATE_TIME_FORMATS = {
  * luxon-date-time.module
  */
 class LuxonDateTimeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LuxonDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: LuxonDateTimeModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LuxonDateTimeModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LuxonDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: LuxonDateTimeModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LuxonDateTimeModule, providers: [
             {
                 provide: DateTimeAdapter,
                 useClass: LuxonDateTimeAdapter,
             },
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LuxonDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LuxonDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [
@@ -5541,16 +5539,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }] });
 class OwlLuxonDateTimeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlLuxonDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OwlLuxonDateTimeModule, imports: [LuxonDateTimeModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlLuxonDateTimeModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlLuxonDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: OwlLuxonDateTimeModule, imports: [LuxonDateTimeModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlLuxonDateTimeModule, providers: [
             {
                 provide: OWL_DATE_TIME_FORMATS,
                 useValue: OWL_LUXON_DATE_TIME_FORMATS,
             },
         ], imports: [LuxonDateTimeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OwlLuxonDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OwlLuxonDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LuxonDateTimeModule],
@@ -5811,10 +5809,10 @@ class UnixTimestampDateTimeAdapter extends DateTimeAdapter {
     stripDirectionalityCharacters(value) {
         return value.replace(/[\u200e\u200f]/g, '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UnixTimestampDateTimeAdapter, deps: [{ token: OWL_DATE_TIME_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UnixTimestampDateTimeAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UnixTimestampDateTimeAdapter, deps: [{ token: OWL_DATE_TIME_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UnixTimestampDateTimeAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UnixTimestampDateTimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UnixTimestampDateTimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional