@dintecom/ngx-datetime-picker 22.0.1 → 22.1.0

package/fesm2022/dintecom-ngx-datetime-picker.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
 import { Injectable, signal, inject, ChangeDetectorRef, ElementRef, EventEmitter, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, Injector, TemplateRef, LOCALE_ID, input, Input, Optional, Inject, Directive, output, afterNextRender, viewChild, ViewContainerRef, untracked, makeEnvironmentProviders, forwardRef, Renderer2, model, Pipe, NgModule, computed } from '@angular/core';
-import { Subject, Subscription, filter, take, defer, merge, of } from 'rxjs';
+import { Subject, Subscription, filter, take, defer, timer, of, merge } from 'rxjs';
 import { DOCUMENT, Location, NgClass, getLocaleFirstDayOfWeek, CommonModule } from '@angular/common';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { NoopScrollStrategy, Overlay, OverlayContainer, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ESCAPE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, SPACE } from '@angular/cdk/keycodes';
 import { coerceBooleanProperty, coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';
-import { startWith, debounceTime, take as take$1, filter as filter$1 } from 'rxjs/operators';
+import { startWith, debounce, take as take$1, filter as filter$1 } from 'rxjs/operators';
 import { FocusTrapFactory, CdkMonitorFocus, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
 import { Platform, PlatformModule } from '@angular/cdk/platform';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
@@ -60,10 +60,10 @@ class OwlDateTimeIntl {
     hour12AMLabel = 'AM';
     /** A label for the hour12 button (PM) */
     hour12PMLabel = 'PM';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeIntl, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeIntl, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -425,10 +425,10 @@ class OwlDialogContainerComponent extends BasePortalOutlet {
             this.focusTrap.destroy();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: OwlDialogContainerComponent, isStandalone: true, 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>\n", dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: OwlDialogContainerComponent, isStandalone: true, 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>\n", dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDialogContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-dialog-container', changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class.owl-dialog-container]': 'owlDialogContainerClass',
@@ -682,10 +682,10 @@ class OwlDialogService {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDialogService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDialogService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDialogService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 /**
@@ -729,6 +729,13 @@ class DateTimeAdapter {
     millisecondsInDay = 86400000;
     /** total milliseconds in a minute. */
     milliseondsInMinute = 60000;
+    /**
+     * Checks whether the text matches the parse format.
+     * Used by the strictFormat input, accepts any text unless an adapter overrides it.
+     */
+    isValidFormat(value, parseFormat) {
+        return true;
+    }
     /**
      * Compare two given dates
      * 1 if the first date is after the second,
@@ -825,6 +832,43 @@ class DateTimeAdapter {
 /** InjectionToken for date time picker that can be used to override default format. */
 const OWL_DATE_TIME_FORMATS = new InjectionToken('OWL_DATE_TIME_FORMATS');
 
+function defaultOptionsFactory() {
+    return DefaultOptions.create();
+}
+function multiYearOptionsFactory(options) {
+    return options.multiYear;
+}
+class DefaultOptions {
+    static create() {
+        // Always return new instance
+        return {
+            multiYear: {
+                yearRows: 7,
+                yearsPerRow: 3
+            },
+            lazyValidation: false,
+            strictFormat: false,
+            wrapTimer: false,
+            timerInputDebounce: 750
+        };
+    }
+}
+class OptionsTokens {
+    static all = new InjectionToken('All options token');
+    static multiYear = new InjectionToken('Grid view options token');
+}
+const optionsProviders = [
+    {
+        provide: OptionsTokens.all,
+        useFactory: defaultOptionsFactory,
+    },
+    {
+        provide: OptionsTokens.multiYear,
+        useFactory: multiYearOptionsFactory,
+        deps: [OptionsTokens.all],
+    },
+];
+
 /**
  * date-time.class
  */
@@ -838,6 +882,8 @@ var DateView;
 class OwlDateTime {
     dateTimeAdapter;
     dateTimeFormats;
+    /** Global defaults of the inputs, see provideOwlDateTimeOptions */
+    options = inject(OptionsTokens.all, { optional: true });
     /**
      * Whether to show the second's timer
      */
@@ -908,6 +954,29 @@ class OwlDateTime {
     set stepSecond(val) {
         this._stepSecond = coerceNumberProperty(val, 1);
     }
+    /**
+     * Whether the hour, minute and second boxes go from the max to the min and back (59 → 0)
+     * instead of carrying over to the next hour or day.
+     * Defaults to the wrapTimer global option (false).
+     */
+    _wrapTimer;
+    get wrapTimer() {
+        return this._wrapTimer ?? this.options?.wrapTimer ?? false;
+    }
+    set wrapTimer(val) {
+        this._wrapTimer = coerceBooleanProperty(val);
+    }
+    /**
+     * Milliseconds the hour, minute and second boxes wait after typing before applying the value,
+     * 0 applies it at once. Defaults to the timerInputDebounce global option (750).
+     */
+    _timerInputDebounce = null;
+    get timerInputDebounce() {
+        return this._timerInputDebounce ?? this.options?.timerInputDebounce ?? 750;
+    }
+    set timerInputDebounce(val) {
+        this._timerInputDebounce = coerceNumberProperty(val, null);
+    }
     /**
      * Set the first day of week
      */
@@ -994,10 +1063,10 @@ class OwlDateTime {
             ? obj
             : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTime, deps: [{ token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: OwlDateTime, isStandalone: true, inputs: { showSecondsTimer: { classPropertyName: "showSecondsTimer", publicName: "showSecondsTimer", isSignal: false, isRequired: false, transformFunction: null }, hour12Timer: { classPropertyName: "hour12Timer", publicName: "hour12Timer", isSignal: false, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, showCalendarWeeks: { classPropertyName: "showCalendarWeeks", publicName: "showCalendarWeeks", isSignal: true, isRequired: false, transformFunction: null }, yearOnly: { classPropertyName: "yearOnly", publicName: "yearOnly", isSignal: true, isRequired: false, transformFunction: null }, multiyearOnly: { classPropertyName: "multiyearOnly", publicName: "multiyearOnly", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: false, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: false, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: false, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTime, deps: [{ token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: OwlDateTime, isStandalone: true, inputs: { showSecondsTimer: { classPropertyName: "showSecondsTimer", publicName: "showSecondsTimer", isSignal: false, isRequired: false, transformFunction: null }, hour12Timer: { classPropertyName: "hour12Timer", publicName: "hour12Timer", isSignal: false, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, showCalendarWeeks: { classPropertyName: "showCalendarWeeks", publicName: "showCalendarWeeks", isSignal: true, isRequired: false, transformFunction: null }, yearOnly: { classPropertyName: "yearOnly", publicName: "yearOnly", isSignal: true, isRequired: false, transformFunction: null }, multiyearOnly: { classPropertyName: "multiyearOnly", publicName: "multiyearOnly", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: false, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: false, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: false, isRequired: false, transformFunction: null }, wrapTimer: { classPropertyName: "wrapTimer", publicName: "wrapTimer", isSignal: false, isRequired: false, transformFunction: null }, timerInputDebounce: { classPropertyName: "timerInputDebounce", publicName: "timerInputDebounce", isSignal: false, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTime, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTime, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: DateTimeAdapter, decorators: [{
                     type: Optional
@@ -1016,6 +1085,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Input
             }], stepSecond: [{
                 type: Input
+            }], wrapTimer: [{
+                type: Input
+            }], timerInputDebounce: [{
+                type: Input
             }], firstDayOfWeek: [{
                 type: Input
             }], hideOtherMonths: [{
@@ -1165,10 +1238,10 @@ class OwlCalendarBodyComponent {
             }
         }, { injector: this.injector });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OwlCalendarBodyComponent, isStandalone: true, selector: "[owl-date-time-calendar-body]", inputs: { activeCell: { classPropertyName: "activeCell", publicName: "activeCell", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, numCols: { classPropertyName: "numCols", publicName: "numCols", isSignal: true, isRequired: false, transformFunction: null }, cellRatio: { classPropertyName: "cellRatio", publicName: "cellRatio", isSignal: true, isRequired: false, transformFunction: null }, todayValue: { classPropertyName: "todayValue", publicName: "todayValue", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null } }, 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) {\n    <tr role=\"row\">\n        @for (item of row; track $index; let colIndex = $index) {\n            <td\n                class=\"owl-dt-calendar-cell {{ item.cellClass }}\"\n                [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n                [class.owl-dt-calendar-cell-active]=\"\n                    isActiveCell(rowIndex, colIndex)\n                \"\n                [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n                [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n                [class.owl-dt-calendar-cell-range-from]=\"\n                    isRangeFrom(item.value)\n                \"\n                [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n                [attr.aria-label]=\"item.ariaLabel\"\n                [attr.aria-disabled]=\"!item.enabled || null\"\n                [attr.aria-current]=\"item.value === todayValue() ? 'date' : null\"\n                [attr.aria-selected]=\"isSelected(item.value)\"\n                [style.width.%]=\"100 / numCols()\"\n                [style.paddingTop.%]=\"(50 * cellRatio()) / numCols()\"\n                [style.paddingBottom.%]=\"(50 * cellRatio()) / numCols()\"\n                (click)=\"selectCell(item)\"\n            >\n                <span\n                    class=\"owl-dt-calendar-cell-content\"\n                    [ngClass]=\"{\n                        'owl-dt-calendar-cell-out': item.out,\n                        'owl-dt-calendar-cell-today': item.value === todayValue(),\n                        'owl-dt-calendar-cell-selected': isSelected(item.value),\n                    }\"\n                >\n                    {{ item.displayValue }}\n                </span>\n            </td>\n        }\n    </tr>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OwlCalendarBodyComponent, isStandalone: true, selector: "[owl-date-time-calendar-body]", inputs: { activeCell: { classPropertyName: "activeCell", publicName: "activeCell", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, numCols: { classPropertyName: "numCols", publicName: "numCols", isSignal: true, isRequired: false, transformFunction: null }, cellRatio: { classPropertyName: "cellRatio", publicName: "cellRatio", isSignal: true, isRequired: false, transformFunction: null }, todayValue: { classPropertyName: "todayValue", publicName: "todayValue", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null } }, 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) {\n    <tr role=\"row\">\n        @for (item of row; track $index; let colIndex = $index) {\n            <td\n                class=\"owl-dt-calendar-cell {{ item.cellClass }}\"\n                [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n                [class.owl-dt-calendar-cell-active]=\"\n                    isActiveCell(rowIndex, colIndex)\n                \"\n                [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n                [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n                [class.owl-dt-calendar-cell-range-from]=\"\n                    isRangeFrom(item.value)\n                \"\n                [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n                [attr.aria-label]=\"item.ariaLabel\"\n                [attr.aria-disabled]=\"!item.enabled || null\"\n                [attr.aria-current]=\"item.value === todayValue() ? 'date' : null\"\n                [attr.aria-selected]=\"isSelected(item.value)\"\n                [style.width.%]=\"100 / numCols()\"\n                [style.paddingTop.%]=\"(50 * cellRatio()) / numCols()\"\n                [style.paddingBottom.%]=\"(50 * cellRatio()) / numCols()\"\n                (click)=\"selectCell(item)\"\n            >\n                <span\n                    class=\"owl-dt-calendar-cell-content\"\n                    [ngClass]=\"{\n                        'owl-dt-calendar-cell-out': item.out,\n                        'owl-dt-calendar-cell-today': item.value === todayValue(),\n                        'owl-dt-calendar-cell-selected': isSelected(item.value),\n                    }\"\n                >\n                    {{ item.displayValue }}\n                </span>\n            </td>\n        }\n    </tr>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlCalendarBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlCalendarBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: '[owl-date-time-calendar-body]', exportAs: 'owlDateTimeCalendarBody', host: {
                         '[class.owl-dt-calendar-body]': 'owlDTCalendarBodyClass'
@@ -1630,10 +1703,10 @@ class OwlMonthViewComponent {
     focusActiveCell() {
         this.calendarBodyElm().focusActiveCell();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlMonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OwlMonthViewComponent, isStandalone: true, selector: "owl-date-time-month-view", inputs: { hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", isSignal: true, isRequired: false, transformFunction: null }, showCalendarWeeks: { classPropertyName: "showCalendarWeeks", publicName: "showCalendarWeeks", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: false, isRequired: false, transformFunction: null }, pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, isSignal: true }], exportAs: ["owlYearView"], ngImport: i0, template: "@if (showCalendarWeeks()) {\n    <ul class=\"week-number\">\n        @for (week of weekNumbers; track week) {\n            <li>\n                <span>{{ week }}</span>\n            </li>\n        }\n    </ul>\n}\n<table\n    class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n    [ngClass]=\"{ 'owl-calendar-weeks': showCalendarWeeks() }\"\n    [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths()\"\n>\n    <thead class=\"owl-dt-calendar-header\">\n        <tr class=\"owl-dt-weekdays\">\n            @for (weekday of weekdays; track weekday.short) {\n                <th\n                    [attr.aria-label]=\"weekday.long\"\n                    class=\"owl-dt-weekday\"\n                    scope=\"col\"\n                >\n                    <span>{{ weekday.short }}</span>\n                </th>\n            }\n        </tr>\n        <tr>\n            <th\n                class=\"owl-dt-calendar-table-divider\"\n                [ngClass]=\"{ 'owl-calendar-weeks': showCalendarWeeks() }\"\n                aria-hidden=\"true\"\n                colspan=\"7\"\n            ></th>\n        </tr>\n    </thead>\n    <tbody\n        owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"days\"\n        [todayValue]=\"todayDate\"\n        [selectedValues]=\"selectedDates\"\n        [selectMode]=\"selectMode\"\n        [activeCell]=\"activeCell\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\"\n    ></tbody>\n</table>\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: 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlMonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OwlMonthViewComponent, isStandalone: true, selector: "owl-date-time-month-view", inputs: { hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", isSignal: true, isRequired: false, transformFunction: null }, showCalendarWeeks: { classPropertyName: "showCalendarWeeks", publicName: "showCalendarWeeks", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: false, isRequired: false, transformFunction: null }, pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, isSignal: true }], exportAs: ["owlYearView"], ngImport: i0, template: "@if (showCalendarWeeks()) {\n    <ul class=\"week-number\">\n        @for (week of weekNumbers; track week) {\n            <li>\n                <span>{{ week }}</span>\n            </li>\n        }\n    </ul>\n}\n<table\n    class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n    [ngClass]=\"{ 'owl-calendar-weeks': showCalendarWeeks() }\"\n    [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths()\"\n>\n    <thead class=\"owl-dt-calendar-header\">\n        <tr class=\"owl-dt-weekdays\">\n            @for (weekday of weekdays; track weekday.short) {\n                <th\n                    [attr.aria-label]=\"weekday.long\"\n                    class=\"owl-dt-weekday\"\n                    scope=\"col\"\n                >\n                    <span>{{ weekday.short }}</span>\n                </th>\n            }\n        </tr>\n        <tr>\n            <th\n                class=\"owl-dt-calendar-table-divider\"\n                [ngClass]=\"{ 'owl-calendar-weeks': showCalendarWeeks() }\"\n                aria-hidden=\"true\"\n                colspan=\"7\"\n            ></th>\n        </tr>\n    </thead>\n    <tbody\n        owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"days\"\n        [todayValue]=\"todayDate\"\n        [selectedValues]=\"selectedDates\"\n        [selectMode]=\"selectMode\"\n        [activeCell]=\"activeCell\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\"\n    ></tbody>\n</table>\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: 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: "22.0.5", ngImport: i0, type: OwlMonthViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlMonthViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time-month-view', exportAs: 'owlYearView', host: {
                         '[class.owl-dt-calendar-view]': 'owlDTCalendarView'
@@ -1994,10 +2067,10 @@ class OwlYearViewComponent {
     focusActiveCell() {
         this.calendarBodyElm().focusActiveCell();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: OwlYearViewComponent, isStandalone: true, 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, isSignal: true }], exportAs: ["owlMonthView"], ngImport: i0, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n    <tr>\n        <th class=\"owl-dt-calendar-table-divider\" aria-hidden=\"true\" colspan=\"3\"></th>\n    </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body role=\"grid\"\n           [rows]=\"months\" [numCols]=\"3\" [cellRatio]=\"3 / 7\"\n           [activeCell]=\"activeCell\"\n           [todayValue]=\"todayMonth\"\n           [selectedValues]=\"selectedMonths\"\n           [selectMode]=\"selectMode\"\n           (keydown)=\"handleCalendarKeydown($event)\"\n           (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: OwlYearViewComponent, isStandalone: true, 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, isSignal: true }], exportAs: ["owlMonthView"], ngImport: i0, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n    <tr>\n        <th class=\"owl-dt-calendar-table-divider\" aria-hidden=\"true\" colspan=\"3\"></th>\n    </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body role=\"grid\"\n           [rows]=\"months\" [numCols]=\"3\" [cellRatio]=\"3 / 7\"\n           [activeCell]=\"activeCell\"\n           [todayValue]=\"todayMonth\"\n           [selectedValues]=\"selectedMonths\"\n           [selectMode]=\"selectMode\"\n           (keydown)=\"handleCalendarKeydown($event)\"\n           (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\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: "22.0.5", ngImport: i0, type: OwlYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlYearViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time-year-view', exportAs: 'owlMonthView', host: {
                         '[class.owl-dt-calendar-view]': 'owlDTCalendarView'
@@ -2018,39 +2091,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Input
             }], change: [{ type: i0.Output, args: ["change"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], pickerMomentChange: [{ type: i0.Output, args: ["pickerMomentChange"] }], keyboardEnter: [{ type: i0.Output, args: ["keyboardEnter"] }], calendarBodyElm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OwlCalendarBodyComponent), { isSignal: true }] }] } });
 
-function defaultOptionsFactory() {
-    return DefaultOptions.create();
-}
-function multiYearOptionsFactory(options) {
-    return options.multiYear;
-}
-class DefaultOptions {
-    static create() {
-        // Always return new instance
-        return {
-            multiYear: {
-                yearRows: 7,
-                yearsPerRow: 3
-            }
-        };
-    }
-}
-class OptionsTokens {
-    static all = new InjectionToken('All options token');
-    static multiYear = new InjectionToken('Grid view options token');
-}
-const optionsProviders = [
-    {
-        provide: OptionsTokens.all,
-        useFactory: defaultOptionsFactory,
-    },
-    {
-        provide: OptionsTokens.multiYear,
-        useFactory: multiYearOptionsFactory,
-        deps: [OptionsTokens.all],
-    },
-];
-
 /**
  * calendar-multi-year-view.component
  */
@@ -2378,10 +2418,10 @@ class OwlMultiYearViewComponent {
     focusActiveCell() {
         this.calendarBodyElm().focusActiveCell();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlMultiYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: OwlMultiYearViewComponent, isStandalone: true, 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, isSignal: true }], ngImport: i0, template: "<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n        [disabled]=\"!previousEnabled()\" [attr.aria-label]=\"prevButtonLabel\"\n        type=\"button\" tabindex=\"0\" (click)=\"prevYearList($event)\">\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n             version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 250.738 250.738\"\n             style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\"\n             width=\"100%\" height=\"100%\">\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\"/>\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n    <tr>\n        <th colspan=\"3\">{{tableHeader}}</th>\n    </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body role=\"grid\"\n           [rows]=\"years\" [numCols]=\"3\" [cellRatio]=\"3 / 7\"\n           [activeCell]=\"activeCell\"\n           [todayValue]=\"todayYear\"\n           [selectedValues]=\"selectedYears\"\n           [selectMode]=\"selectMode\"\n           (keydown)=\"handleCalendarKeydown($event)\"\n           (select)=\"selectCalendarCell($event)\"></tbody>\n</table>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n        [disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\n        type=\"button\" tabindex=\"0\" (click)=\"nextYearList($event)\">\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n             viewBox=\"0 0 250.738 250.738\" style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\">\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\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\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\n                C197.237,120.447,195.534,115.448,191.75,111.689z\"/>\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlMultiYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: OwlMultiYearViewComponent, isStandalone: true, 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, isSignal: true }], ngImport: i0, template: "<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n        [disabled]=\"!previousEnabled()\" [attr.aria-label]=\"prevButtonLabel\"\n        type=\"button\" tabindex=\"0\" (click)=\"prevYearList($event)\">\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n             version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 250.738 250.738\"\n             style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\"\n             width=\"100%\" height=\"100%\">\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\"/>\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n    <tr>\n        <th colspan=\"3\">{{tableHeader}}</th>\n    </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body role=\"grid\"\n           [rows]=\"years\" [numCols]=\"3\" [cellRatio]=\"3 / 7\"\n           [activeCell]=\"activeCell\"\n           [todayValue]=\"todayYear\"\n           [selectedValues]=\"selectedYears\"\n           [selectMode]=\"selectMode\"\n           (keydown)=\"handleCalendarKeydown($event)\"\n           (select)=\"selectCalendarCell($event)\"></tbody>\n</table>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n        [disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\n        type=\"button\" tabindex=\"0\" (click)=\"nextYearList($event)\">\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n             viewBox=\"0 0 250.738 250.738\" style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\">\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\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\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\n                C197.237,120.447,195.534,115.448,191.75,111.689z\"/>\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\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: "22.0.5", ngImport: i0, type: OwlMultiYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlMultiYearViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time-multi-year-view', host: {
                         '[class.owl-dt-calendar-view]': 'owlDTCalendarView',
@@ -2759,10 +2799,10 @@ class OwlCalendarComponent {
             ? obj
             : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OwlCalendarComponent, isStandalone: true, selector: "owl-date-time-calendar", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, yearOnly: { classPropertyName: "yearOnly", publicName: "yearOnly", isSignal: true, isRequired: false, transformFunction: null }, showCalendarWeeks: { classPropertyName: "showCalendarWeeks", publicName: "showCalendarWeeks", isSignal: true, isRequired: false, transformFunction: null }, multiyearOnly: { classPropertyName: "multiyearOnly", publicName: "multiyearOnly", isSignal: true, isRequired: false, transformFunction: null }, hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", isSignal: true, isRequired: false, transformFunction: null } }, 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\">\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n    <button\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\"\n        tabindex=\"0\"\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n        [disabled]=\"!prevButtonEnabled()\"\n        [attr.aria-label]=\"prevButtonLabel\"\n        (click)=\"previousClicked()\"\n    >\n        <span\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\n            tabindex=\"-1\"\n        >\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                version=\"1.1\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 250.738 250.738\"\n                style=\"enable-background: new 0 0 250.738 250.738\"\n                xml:space=\"preserve\"\n                width=\"100%\"\n                height=\"100%\"\n            >\n                <path\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\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\"\n                />\n            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n    <div class=\"owl-dt-calendar-control-content\">\n        <button\n            class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"periodButtonLabel\"\n            (click)=\"toggleViews()\"\n        >\n            <span\n                class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\"\n            >\n                {{ periodButtonText }}\n\n                <span\n                    class=\"owl-dt-control-button-arrow\"\n                    [style.transform]=\"\n                        'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\n                    \"\n                >\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\n                    <svg\n                        version=\"1.1\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                        x=\"0px\"\n                        y=\"0px\"\n                        width=\"50%\"\n                        height=\"50%\"\n                        viewBox=\"0 0 292.362 292.362\"\n                        style=\"enable-background: new 0 0 292.362 292.362\"\n                        xml:space=\"preserve\"\n                    >\n                        <g>\n                            <path\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\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\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\"\n                            />\n                        </g>\n                    </svg>\n                    <!-- </editor-fold> -->\n                </span>\n            </span>\n        </button>\n    </div>\n    <button\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\"\n        tabindex=\"0\"\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n        [disabled]=\"!nextButtonEnabled()\"\n        [attr.aria-label]=\"nextButtonLabel\"\n        (click)=\"nextClicked()\"\n    >\n        <span\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\n            tabindex=\"-1\"\n        >\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n            <svg\n                version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 250.738 250.738\"\n                style=\"enable-background: new 0 0 250.738 250.738\"\n                xml:space=\"preserve\"\n            >\n                <path\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\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\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\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\n                />\n            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n</div>\n<div class=\"owl-dt-calendar-main\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n    @switch (currentView) {\n        @case (DateView.MONTH) {\n            <owl-date-time-month-view\n                [pickerMoment]=\"pickerMoment\"\n                [firstDayOfWeek]=\"firstDayOfWeek()\"\n                [selected]=\"selected\"\n                [selecteds]=\"selecteds\"\n                [selectMode]=\"selectMode()\"\n                [minDate]=\"minDate\"\n                [showCalendarWeeks]=\"showCalendarWeeks()\"\n                [maxDate]=\"maxDate\"\n                [dateFilter]=\"dateFilter()\"\n                [hideOtherMonths]=\"hideOtherMonths()\"\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n                (selectedChange)=\"dateSelected($event)\"\n                (userSelection)=\"userSelected()\"\n            ></owl-date-time-month-view>\n        }\n        @case (DateView.YEAR) {\n            <owl-date-time-year-view\n                [pickerMoment]=\"pickerMoment\"\n                [selected]=\"selected\"\n                [selecteds]=\"selecteds\"\n                [selectMode]=\"selectMode()\"\n                [minDate]=\"minDate\"\n                [maxDate]=\"maxDate\"\n                [dateFilter]=\"dateFilter()\"\n                (keyboardEnter)=\"focusActiveCell()\"\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n                (monthSelected)=\"selectMonthInYearView($event)\"\n                (change)=\"goToDateInView($event, DateView.MONTH)\"\n            ></owl-date-time-year-view>\n        }\n        @case (DateView.MULTI_YEARS) {\n            <owl-date-time-multi-year-view\n                [pickerMoment]=\"pickerMoment\"\n                [selected]=\"selected\"\n                [selecteds]=\"selecteds\"\n                [selectMode]=\"selectMode()\"\n                [minDate]=\"minDate\"\n                [maxDate]=\"maxDate\"\n                [dateFilter]=\"dateFilter()\"\n                (keyboardEnter)=\"focusActiveCell()\"\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n                (yearSelected)=\"selectYearInMultiYearView($event)\"\n                (change)=\"goToDateInView($event, DateView.YEAR)\"\n            ></owl-date-time-multi-year-view>\n        }\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { 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"] }, { 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: OwlMultiYearViewComponent, selector: "owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["change", "yearSelected", "pickerMomentChange", "keyboardEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OwlCalendarComponent, isStandalone: true, selector: "owl-date-time-calendar", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, yearOnly: { classPropertyName: "yearOnly", publicName: "yearOnly", isSignal: true, isRequired: false, transformFunction: null }, showCalendarWeeks: { classPropertyName: "showCalendarWeeks", publicName: "showCalendarWeeks", isSignal: true, isRequired: false, transformFunction: null }, multiyearOnly: { classPropertyName: "multiyearOnly", publicName: "multiyearOnly", isSignal: true, isRequired: false, transformFunction: null }, hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", isSignal: true, isRequired: false, transformFunction: null } }, 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\">\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n    <button\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\"\n        tabindex=\"0\"\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n        [disabled]=\"!prevButtonEnabled()\"\n        [attr.aria-label]=\"prevButtonLabel\"\n        (click)=\"previousClicked()\"\n    >\n        <span\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\n            tabindex=\"-1\"\n        >\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                version=\"1.1\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 250.738 250.738\"\n                style=\"enable-background: new 0 0 250.738 250.738\"\n                xml:space=\"preserve\"\n                width=\"100%\"\n                height=\"100%\"\n            >\n                <path\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\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\"\n                />\n            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n    <div class=\"owl-dt-calendar-control-content\">\n        <button\n            class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"periodButtonLabel\"\n            (click)=\"toggleViews()\"\n        >\n            <span\n                class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\"\n            >\n                {{ periodButtonText }}\n\n                <span\n                    class=\"owl-dt-control-button-arrow\"\n                    [style.transform]=\"\n                        'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\n                    \"\n                >\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\n                    <svg\n                        version=\"1.1\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                        x=\"0px\"\n                        y=\"0px\"\n                        width=\"50%\"\n                        height=\"50%\"\n                        viewBox=\"0 0 292.362 292.362\"\n                        style=\"enable-background: new 0 0 292.362 292.362\"\n                        xml:space=\"preserve\"\n                    >\n                        <g>\n                            <path\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\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\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\"\n                            />\n                        </g>\n                    </svg>\n                    <!-- </editor-fold> -->\n                </span>\n            </span>\n        </button>\n    </div>\n    <button\n        class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\"\n        tabindex=\"0\"\n        [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n        [disabled]=\"!nextButtonEnabled()\"\n        [attr.aria-label]=\"nextButtonLabel\"\n        (click)=\"nextClicked()\"\n    >\n        <span\n            class=\"owl-dt-control-content owl-dt-control-button-content\"\n            tabindex=\"-1\"\n        >\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n            <svg\n                version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 250.738 250.738\"\n                style=\"enable-background: new 0 0 250.738 250.738\"\n                xml:space=\"preserve\"\n            >\n                <path\n                    style=\"fill-rule: evenodd; clip-rule: evenodd\"\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\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\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\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\n                />\n            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n</div>\n<div class=\"owl-dt-calendar-main\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n    @switch (currentView) {\n        @case (DateView.MONTH) {\n            <owl-date-time-month-view\n                [pickerMoment]=\"pickerMoment\"\n                [firstDayOfWeek]=\"firstDayOfWeek()\"\n                [selected]=\"selected\"\n                [selecteds]=\"selecteds\"\n                [selectMode]=\"selectMode()\"\n                [minDate]=\"minDate\"\n                [showCalendarWeeks]=\"showCalendarWeeks()\"\n                [maxDate]=\"maxDate\"\n                [dateFilter]=\"dateFilter()\"\n                [hideOtherMonths]=\"hideOtherMonths()\"\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n                (selectedChange)=\"dateSelected($event)\"\n                (userSelection)=\"userSelected()\"\n            ></owl-date-time-month-view>\n        }\n        @case (DateView.YEAR) {\n            <owl-date-time-year-view\n                [pickerMoment]=\"pickerMoment\"\n                [selected]=\"selected\"\n                [selecteds]=\"selecteds\"\n                [selectMode]=\"selectMode()\"\n                [minDate]=\"minDate\"\n                [maxDate]=\"maxDate\"\n                [dateFilter]=\"dateFilter()\"\n                (keyboardEnter)=\"focusActiveCell()\"\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n                (monthSelected)=\"selectMonthInYearView($event)\"\n                (change)=\"goToDateInView($event, DateView.MONTH)\"\n            ></owl-date-time-year-view>\n        }\n        @case (DateView.MULTI_YEARS) {\n            <owl-date-time-multi-year-view\n                [pickerMoment]=\"pickerMoment\"\n                [selected]=\"selected\"\n                [selecteds]=\"selecteds\"\n                [selectMode]=\"selectMode()\"\n                [minDate]=\"minDate\"\n                [maxDate]=\"maxDate\"\n                [dateFilter]=\"dateFilter()\"\n                (keyboardEnter)=\"focusActiveCell()\"\n                (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n                (yearSelected)=\"selectYearInMultiYearView($event)\"\n                (change)=\"goToDateInView($event, DateView.YEAR)\"\n            ></owl-date-time-multi-year-view>\n        }\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { 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"] }, { 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: OwlMultiYearViewComponent, selector: "owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["change", "yearSelected", "pickerMomentChange", "keyboardEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time-calendar', exportAs: 'owlDateTimeCalendar', host: {
                         '[class.owl-dt-calendar]': 'owlDTCalendarClass'
@@ -2807,6 +2847,12 @@ class OwlTimerBoxComponent {
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     step = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Whether the value goes from the max to the min and back */
+    wrap = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
+    /** Milliseconds to wait after typing before applying the value, 0 applies it at once */
+    inputDebounce = input(750, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputDebounce" }] : /* istanbul ignore next */ []));
     inputLabel = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputLabel" }] : /* istanbul ignore next */ []));
     valueChange = output();
@@ -2814,8 +2860,11 @@ class OwlTimerBoxComponent {
     inputStream = new Subject();
     inputStreamSub = Subscription.EMPTY;
     hasFocus = false;
+    /** Whether the user typed into the box: the typed text is shown as is until the focus leaves */
+    editing = false;
+    injector = inject(Injector);
     get displayValue() {
-        if (this.hasFocus) {
+        if (this.hasFocus && this.editing) {
             // Don't try to reformat the value that user is currently editing
             return this.valueInput().nativeElement.value;
         }
@@ -2834,7 +2883,7 @@ class OwlTimerBoxComponent {
     constructor() {
     }
     ngOnInit() {
-        this.inputStreamSub = this.inputStream.pipe(debounceTime(750)).subscribe((val) => {
+        this.inputStreamSub = this.inputStream.pipe(debounce(() => (this.inputDebounce() > 0 ? timer(this.inputDebounce()) : of(0)))).subscribe((val) => {
             if (val) {
                 const inputValue = coerceNumberProperty(val, 0);
                 this.updateValueViaInput(inputValue);
@@ -2846,13 +2895,18 @@ class OwlTimerBoxComponent {
         this.unbindValueInputMouseWheel();
         this.inputStreamSub.unsubscribe();
     }
+    /** With wrap, past the max goes to the min (59 → 0), otherwise carries over to the larger unit. */
     upBtnClicked() {
-        this.updateValue(this.value() + this.step());
+        const value = this.stepBase + this.step();
+        this.updateValue(this.wrap() && value > this.max() ? this.min() : value);
     }
+    /** With wrap, past the min goes to the max (0 → 59), otherwise carries over to the larger unit. */
     downBtnClicked() {
-        this.updateValue(this.value() - this.step());
+        const value = this.stepBase - this.step();
+        this.updateValue(this.wrap() && value < this.min() ? this.max() : value);
     }
     handleInputChange(val) {
+        this.editing = true;
         this.inputStream.next(val);
     }
     focusIn() {
@@ -2860,13 +2914,32 @@ class OwlTimerBoxComponent {
     }
     focusOut(value) {
         this.hasFocus = false;
+        this.editing = false;
         if (value) {
             const inputValue = coerceNumberProperty(value, 0);
             this.updateValueViaInput(inputValue);
         }
     }
+    /** The value the arrows step from: the typed number while it is not applied yet */
+    get stepBase() {
+        if (this.editing) {
+            const typed = coerceNumberProperty(this.valueInput().nativeElement.value, NaN);
+            if (typed >= this.min() && typed <= this.max()) {
+                return typed;
+            }
+        }
+        return this.value();
+    }
+    /** Applies the arrow buttons, keys or wheel: the box shows the new value even while focused */
     updateValue(value) {
+        this.editing = false;
+        // Drop the typed text waiting for the debounce, the arrows already stepped from it
+        this.inputStream.next('');
         this.valueChange.emit(value);
+        if (this.hasFocus) {
+            // Keep the new value selected, so typing replaces it
+            afterNextRender(() => this.valueInput().nativeElement.select(), { injector: this.injector });
+        }
     }
     updateValueViaInput(value) {
         if (value > this.max() || value < this.min()) {
@@ -2895,15 +2968,15 @@ class OwlTimerBoxComponent {
     unbindValueInputMouseWheel() {
         this.valueInput().nativeElement.removeEventListener('onwheel' in document ? 'wheel' : 'mousewheel', this.onValueInputMouseWheelBind);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlTimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OwlTimerBoxComponent, isStandalone: true, selector: "owl-date-time-timer-box", inputs: { showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, upBtnAriaLabel: { classPropertyName: "upBtnAriaLabel", publicName: "upBtnAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, upBtnDisabled: { classPropertyName: "upBtnDisabled", publicName: "upBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, downBtnAriaLabel: { classPropertyName: "downBtnAriaLabel", publicName: "downBtnAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, downBtnDisabled: { classPropertyName: "downBtnDisabled", publicName: "downBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, boxValue: { classPropertyName: "boxValue", publicName: "boxValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.owl-dt-timer-box": "owlDTTimerBoxClass" } }, viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], exportAs: ["owlDateTimeTimerBox"], ngImport: i0, template: "@if (showDivider()) {\n    <div class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n}\n<button\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"upBtnDisabled()\"\n    [attr.aria-label]=\"upBtnAriaLabel()\"\n    (click)=\"upBtnClicked()\"\n>\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background: new 0 0 451.847 451.846\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\"\n        >\n            <path\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\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\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\n            />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n    <input\n        class=\"owl-dt-timer-input\"\n        maxlength=\"2\"\n        inputmode=\"numeric\"\n        [value]=\"displayValue\"\n        (keydown.arrowup)=\"!upBtnDisabled() && upBtnClicked()\"\n        (keydown.arrowdown)=\"!downBtnDisabled() && downBtnClicked()\"\n        (input)=\"handleInputChange(valueInput.value)\"\n        (focusin)=\"focusIn()\"\n        (focusout)=\"focusOut(valueInput.value)\"\n        #valueInput\n    />\n    <span class=\"owl-hidden-accessible\">{{ inputLabel() }}</span>\n</label>\n<button\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"downBtnDisabled()\"\n    [attr.aria-label]=\"downBtnAriaLabel()\"\n    (click)=\"downBtnClicked()\"\n>\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background: new 0 0 451.847 451.846\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\"\n        >\n            <path\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\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\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\"\n            />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlTimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OwlTimerBoxComponent, isStandalone: true, selector: "owl-date-time-timer-box", inputs: { showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, upBtnAriaLabel: { classPropertyName: "upBtnAriaLabel", publicName: "upBtnAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, upBtnDisabled: { classPropertyName: "upBtnDisabled", publicName: "upBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, downBtnAriaLabel: { classPropertyName: "downBtnAriaLabel", publicName: "downBtnAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, downBtnDisabled: { classPropertyName: "downBtnDisabled", publicName: "downBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, boxValue: { classPropertyName: "boxValue", publicName: "boxValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, inputDebounce: { classPropertyName: "inputDebounce", publicName: "inputDebounce", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.owl-dt-timer-box": "owlDTTimerBoxClass" } }, viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], exportAs: ["owlDateTimeTimerBox"], ngImport: i0, template: "@if (showDivider()) {\n    <div class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n}\n<button\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"upBtnDisabled()\"\n    [attr.aria-label]=\"upBtnAriaLabel()\"\n    (click)=\"upBtnClicked()\"\n>\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background: new 0 0 451.847 451.846\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\"\n        >\n            <path\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\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\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\n            />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n    <input\n        class=\"owl-dt-timer-input\"\n        maxlength=\"2\"\n        inputmode=\"numeric\"\n        [value]=\"displayValue\"\n        (keydown.arrowup)=\"!upBtnDisabled() && upBtnClicked()\"\n        (keydown.arrowdown)=\"!downBtnDisabled() && downBtnClicked()\"\n        (input)=\"handleInputChange(valueInput.value)\"\n        (focusin)=\"valueInput.select(); focusIn()\"\n        (focusout)=\"focusOut(valueInput.value)\"\n        #valueInput\n    />\n    <span class=\"owl-hidden-accessible\">{{ inputLabel() }}</span>\n</label>\n<button\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"downBtnDisabled()\"\n    [attr.aria-label]=\"downBtnAriaLabel()\"\n    (click)=\"downBtnClicked()\"\n>\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background: new 0 0 451.847 451.846\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\"\n        >\n            <path\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\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\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\"\n            />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlTimerBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlTimerBoxComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'owlDateTimeTimerBox', selector: 'owl-date-time-timer-box', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.owl-dt-timer-box]': 'owlDTTimerBoxClass'
-                    }, template: "@if (showDivider()) {\n    <div class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n}\n<button\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"upBtnDisabled()\"\n    [attr.aria-label]=\"upBtnAriaLabel()\"\n    (click)=\"upBtnClicked()\"\n>\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background: new 0 0 451.847 451.846\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\"\n        >\n            <path\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\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\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\n            />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n    <input\n        class=\"owl-dt-timer-input\"\n        maxlength=\"2\"\n        inputmode=\"numeric\"\n        [value]=\"displayValue\"\n        (keydown.arrowup)=\"!upBtnDisabled() && upBtnClicked()\"\n        (keydown.arrowdown)=\"!downBtnDisabled() && downBtnClicked()\"\n        (input)=\"handleInputChange(valueInput.value)\"\n        (focusin)=\"focusIn()\"\n        (focusout)=\"focusOut(valueInput.value)\"\n        #valueInput\n    />\n    <span class=\"owl-hidden-accessible\">{{ inputLabel() }}</span>\n</label>\n<button\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"downBtnDisabled()\"\n    [attr.aria-label]=\"downBtnAriaLabel()\"\n    (click)=\"downBtnClicked()\"\n>\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background: new 0 0 451.847 451.846\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\"\n        >\n            <path\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\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\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\"\n            />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n" }]
-        }], ctorParameters: () => [], propDecorators: { showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], upBtnAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "upBtnAriaLabel", required: false }] }], upBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "upBtnDisabled", required: false }] }], downBtnAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "downBtnAriaLabel", required: false }] }], downBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "downBtnDisabled", required: false }] }], boxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "boxValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], inputLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }] } });
+                    }, template: "@if (showDivider()) {\n    <div class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n}\n<button\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"upBtnDisabled()\"\n    [attr.aria-label]=\"upBtnAriaLabel()\"\n    (click)=\"upBtnClicked()\"\n>\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background: new 0 0 451.847 451.846\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\"\n        >\n            <path\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\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\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\n            />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n    <input\n        class=\"owl-dt-timer-input\"\n        maxlength=\"2\"\n        inputmode=\"numeric\"\n        [value]=\"displayValue\"\n        (keydown.arrowup)=\"!upBtnDisabled() && upBtnClicked()\"\n        (keydown.arrowdown)=\"!downBtnDisabled() && downBtnClicked()\"\n        (input)=\"handleInputChange(valueInput.value)\"\n        (focusin)=\"valueInput.select(); focusIn()\"\n        (focusout)=\"focusOut(valueInput.value)\"\n        #valueInput\n    />\n    <span class=\"owl-hidden-accessible\">{{ inputLabel() }}</span>\n</label>\n<button\n    class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"downBtnDisabled()\"\n    [attr.aria-label]=\"downBtnAriaLabel()\"\n    (click)=\"downBtnClicked()\"\n>\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background: new 0 0 451.847 451.846\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\"\n        >\n            <path\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\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\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\"\n            />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n" }]
+        }], ctorParameters: () => [], propDecorators: { showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], upBtnAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "upBtnAriaLabel", required: false }] }], upBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "upBtnDisabled", required: false }] }], downBtnAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "downBtnAriaLabel", required: false }] }], downBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "downBtnDisabled", required: false }] }], boxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "boxValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], inputDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDebounce", required: false }] }], inputLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }] } });
 
 /**
  * timer.component
@@ -2968,6 +3041,16 @@ class OwlTimerComponent {
      */
     stepSecond = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stepSecond" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the boxes go from the max to the min and back
+     */
+    wrapTimer = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrapTimer" }] : /* istanbul ignore next */ []));
+    /**
+     * Milliseconds the boxes wait after typing before applying the value
+     */
+    timerInputDebounce = input(750, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timerInputDebounce" }] : /* istanbul ignore next */ []));
     get hourValue() {
         return this.dateTimeAdapter.getHours(this.pickerMoment);
     }
@@ -3172,22 +3255,22 @@ class OwlTimerComponent {
             ? obj
             : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlTimerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OwlTimerComponent, isStandalone: true, selector: "owl-date-time-timer", inputs: { pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", isSignal: false, isRequired: false, transformFunction: null }, minDateTime: { classPropertyName: "minDateTime", publicName: "minDateTime", isSignal: false, isRequired: false, transformFunction: null }, maxDateTime: { classPropertyName: "maxDateTime", publicName: "maxDateTime", isSignal: false, isRequired: false, transformFunction: null }, showSecondsTimer: { classPropertyName: "showSecondsTimer", publicName: "showSecondsTimer", isSignal: true, isRequired: false, transformFunction: null }, hour12Timer: { classPropertyName: "hour12Timer", publicName: "hour12Timer", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: true, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: true, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.owl-dt-timer": "owlDTTimerClass", "attr.tabindex": "owlDTTimeTabIndex" } }, exportAs: ["owlDateTimeTimer"], ngImport: i0, template: "<owl-date-time-timer-box\n    [upBtnAriaLabel]=\"upHourButtonLabel\"\n    [downBtnAriaLabel]=\"downHourButtonLabel\"\n    [upBtnDisabled]=\"!upHourEnabled()\"\n    [downBtnDisabled]=\"!downHourEnabled()\"\n    [boxValue]=\"hourBoxValue\"\n    [value]=\"hourValue\"\n    [min]=\"0\"\n    [max]=\"23\"\n    [step]=\"stepHour()\"\n    [inputLabel]=\"'Hour'\"\n    (inputChange)=\"setHourValueViaInput($event)\"\n    (valueChange)=\"setHourValue($event)\"\n></owl-date-time-timer-box>\n<owl-date-time-timer-box\n    [showDivider]=\"true\"\n    [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n    [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\n    [value]=\"minuteValue\"\n    [min]=\"0\"\n    [max]=\"59\"\n    [step]=\"stepMinute()\"\n    [inputLabel]=\"'Minute'\"\n    (inputChange)=\"setMinuteValue($event)\"\n    (valueChange)=\"setMinuteValue($event)\"\n></owl-date-time-timer-box>\n@if (showSecondsTimer()) {\n    <owl-date-time-timer-box\n        [showDivider]=\"true\"\n        [upBtnAriaLabel]=\"upSecondButtonLabel\"\n        [downBtnAriaLabel]=\"downSecondButtonLabel\"\n        [upBtnDisabled]=\"!upSecondEnabled()\"\n        [downBtnDisabled]=\"!downSecondEnabled()\"\n        [value]=\"secondValue\"\n        [min]=\"0\"\n        [max]=\"59\"\n        [step]=\"stepSecond()\"\n        [inputLabel]=\"'Second'\"\n        (inputChange)=\"setSecondValue($event)\"\n        (valueChange)=\"setSecondValue($event)\"\n    ></owl-date-time-timer-box>\n}\n@if (hour12Timer()) {\n    <div class=\"owl-dt-timer-hour12\">\n        <button\n            class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"setMeridiem($event)\"\n        >\n            <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n                {{ hour12ButtonLabel }}\n            </span>\n        </button>\n    </div>\n}\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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlTimerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OwlTimerComponent, isStandalone: true, selector: "owl-date-time-timer", inputs: { pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", isSignal: false, isRequired: false, transformFunction: null }, minDateTime: { classPropertyName: "minDateTime", publicName: "minDateTime", isSignal: false, isRequired: false, transformFunction: null }, maxDateTime: { classPropertyName: "maxDateTime", publicName: "maxDateTime", isSignal: false, isRequired: false, transformFunction: null }, showSecondsTimer: { classPropertyName: "showSecondsTimer", publicName: "showSecondsTimer", isSignal: true, isRequired: false, transformFunction: null }, hour12Timer: { classPropertyName: "hour12Timer", publicName: "hour12Timer", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: true, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: true, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: true, isRequired: false, transformFunction: null }, wrapTimer: { classPropertyName: "wrapTimer", publicName: "wrapTimer", isSignal: true, isRequired: false, transformFunction: null }, timerInputDebounce: { classPropertyName: "timerInputDebounce", publicName: "timerInputDebounce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.owl-dt-timer": "owlDTTimerClass", "attr.tabindex": "owlDTTimeTabIndex" } }, exportAs: ["owlDateTimeTimer"], ngImport: i0, template: "<owl-date-time-timer-box\n    [upBtnAriaLabel]=\"upHourButtonLabel\"\n    [downBtnAriaLabel]=\"downHourButtonLabel\"\n    [upBtnDisabled]=\"!upHourEnabled()\"\n    [downBtnDisabled]=\"!downHourEnabled()\"\n    [boxValue]=\"hourBoxValue\"\n    [value]=\"hourValue\"\n    [min]=\"0\"\n    [max]=\"23\"\n    [step]=\"stepHour()\"\n    [wrap]=\"wrapTimer()\"\n    [inputDebounce]=\"timerInputDebounce()\"\n    [inputLabel]=\"'Hour'\"\n    (inputChange)=\"setHourValueViaInput($event)\"\n    (valueChange)=\"setHourValue($event)\"\n></owl-date-time-timer-box>\n<owl-date-time-timer-box\n    [showDivider]=\"true\"\n    [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n    [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\n    [value]=\"minuteValue\"\n    [min]=\"0\"\n    [max]=\"59\"\n    [step]=\"stepMinute()\"\n    [wrap]=\"wrapTimer()\"\n    [inputDebounce]=\"timerInputDebounce()\"\n    [inputLabel]=\"'Minute'\"\n    (inputChange)=\"setMinuteValue($event)\"\n    (valueChange)=\"setMinuteValue($event)\"\n></owl-date-time-timer-box>\n@if (showSecondsTimer()) {\n    <owl-date-time-timer-box\n        [showDivider]=\"true\"\n        [upBtnAriaLabel]=\"upSecondButtonLabel\"\n        [downBtnAriaLabel]=\"downSecondButtonLabel\"\n        [upBtnDisabled]=\"!upSecondEnabled()\"\n        [downBtnDisabled]=\"!downSecondEnabled()\"\n        [value]=\"secondValue\"\n        [min]=\"0\"\n        [max]=\"59\"\n        [step]=\"stepSecond()\"\n        [wrap]=\"wrapTimer()\"\n        [inputDebounce]=\"timerInputDebounce()\"\n        [inputLabel]=\"'Second'\"\n        (inputChange)=\"setSecondValue($event)\"\n        (valueChange)=\"setSecondValue($event)\"\n    ></owl-date-time-timer-box>\n}\n@if (hour12Timer()) {\n    <div class=\"owl-dt-timer-hour12\">\n        <button\n            class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"setMeridiem($event)\"\n        >\n            <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n                {{ hour12ButtonLabel }}\n            </span>\n        </button>\n    </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: OwlTimerBoxComponent, selector: "owl-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "wrap", "inputDebounce", "inputLabel"], outputs: ["valueChange", "inputChange"], exportAs: ["owlDateTimeTimerBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlTimerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlTimerComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'owlDateTimeTimer', selector: 'owl-date-time-timer', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.owl-dt-timer]': 'owlDTTimerClass',
                         '[attr.tabindex]': 'owlDTTimeTabIndex'
-                    }, imports: [OwlTimerBoxComponent], template: "<owl-date-time-timer-box\n    [upBtnAriaLabel]=\"upHourButtonLabel\"\n    [downBtnAriaLabel]=\"downHourButtonLabel\"\n    [upBtnDisabled]=\"!upHourEnabled()\"\n    [downBtnDisabled]=\"!downHourEnabled()\"\n    [boxValue]=\"hourBoxValue\"\n    [value]=\"hourValue\"\n    [min]=\"0\"\n    [max]=\"23\"\n    [step]=\"stepHour()\"\n    [inputLabel]=\"'Hour'\"\n    (inputChange)=\"setHourValueViaInput($event)\"\n    (valueChange)=\"setHourValue($event)\"\n></owl-date-time-timer-box>\n<owl-date-time-timer-box\n    [showDivider]=\"true\"\n    [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n    [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\n    [value]=\"minuteValue\"\n    [min]=\"0\"\n    [max]=\"59\"\n    [step]=\"stepMinute()\"\n    [inputLabel]=\"'Minute'\"\n    (inputChange)=\"setMinuteValue($event)\"\n    (valueChange)=\"setMinuteValue($event)\"\n></owl-date-time-timer-box>\n@if (showSecondsTimer()) {\n    <owl-date-time-timer-box\n        [showDivider]=\"true\"\n        [upBtnAriaLabel]=\"upSecondButtonLabel\"\n        [downBtnAriaLabel]=\"downSecondButtonLabel\"\n        [upBtnDisabled]=\"!upSecondEnabled()\"\n        [downBtnDisabled]=\"!downSecondEnabled()\"\n        [value]=\"secondValue\"\n        [min]=\"0\"\n        [max]=\"59\"\n        [step]=\"stepSecond()\"\n        [inputLabel]=\"'Second'\"\n        (inputChange)=\"setSecondValue($event)\"\n        (valueChange)=\"setSecondValue($event)\"\n    ></owl-date-time-timer-box>\n}\n@if (hour12Timer()) {\n    <div class=\"owl-dt-timer-hour12\">\n        <button\n            class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"setMeridiem($event)\"\n        >\n            <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n                {{ hour12ButtonLabel }}\n            </span>\n        </button>\n    </div>\n}\n" }]
+                    }, imports: [OwlTimerBoxComponent], template: "<owl-date-time-timer-box\n    [upBtnAriaLabel]=\"upHourButtonLabel\"\n    [downBtnAriaLabel]=\"downHourButtonLabel\"\n    [upBtnDisabled]=\"!upHourEnabled()\"\n    [downBtnDisabled]=\"!downHourEnabled()\"\n    [boxValue]=\"hourBoxValue\"\n    [value]=\"hourValue\"\n    [min]=\"0\"\n    [max]=\"23\"\n    [step]=\"stepHour()\"\n    [wrap]=\"wrapTimer()\"\n    [inputDebounce]=\"timerInputDebounce()\"\n    [inputLabel]=\"'Hour'\"\n    (inputChange)=\"setHourValueViaInput($event)\"\n    (valueChange)=\"setHourValue($event)\"\n></owl-date-time-timer-box>\n<owl-date-time-timer-box\n    [showDivider]=\"true\"\n    [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n    [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\n    [value]=\"minuteValue\"\n    [min]=\"0\"\n    [max]=\"59\"\n    [step]=\"stepMinute()\"\n    [wrap]=\"wrapTimer()\"\n    [inputDebounce]=\"timerInputDebounce()\"\n    [inputLabel]=\"'Minute'\"\n    (inputChange)=\"setMinuteValue($event)\"\n    (valueChange)=\"setMinuteValue($event)\"\n></owl-date-time-timer-box>\n@if (showSecondsTimer()) {\n    <owl-date-time-timer-box\n        [showDivider]=\"true\"\n        [upBtnAriaLabel]=\"upSecondButtonLabel\"\n        [downBtnAriaLabel]=\"downSecondButtonLabel\"\n        [upBtnDisabled]=\"!upSecondEnabled()\"\n        [downBtnDisabled]=\"!downSecondEnabled()\"\n        [value]=\"secondValue\"\n        [min]=\"0\"\n        [max]=\"59\"\n        [step]=\"stepSecond()\"\n        [wrap]=\"wrapTimer()\"\n        [inputDebounce]=\"timerInputDebounce()\"\n        [inputLabel]=\"'Second'\"\n        (inputChange)=\"setSecondValue($event)\"\n        (valueChange)=\"setSecondValue($event)\"\n    ></owl-date-time-timer-box>\n}\n@if (hour12Timer()) {\n    <div class=\"owl-dt-timer-hour12\">\n        <button\n            class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"setMeridiem($event)\"\n        >\n            <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n                {{ hour12ButtonLabel }}\n            </span>\n        </button>\n    </div>\n}\n" }]
         }], propDecorators: { pickerMoment: [{
                 type: Input
             }], minDateTime: [{
                 type: Input
             }], maxDateTime: [{
                 type: Input
-            }], showSecondsTimer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSecondsTimer", required: false }] }], hour12Timer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12Timer", required: false }] }], stepHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepHour", required: false }] }], stepMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinute", required: false }] }], stepSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSecond", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
+            }], showSecondsTimer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSecondsTimer", required: false }] }], hour12Timer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12Timer", required: false }] }], stepHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepHour", required: false }] }], stepMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinute", required: false }] }], stepSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSecond", required: false }] }], wrapTimer: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapTimer", required: false }] }], timerInputDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "timerInputDebounce", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
 
 /**
  * date-time-picker-container.component
@@ -3203,6 +3286,8 @@ class OwlDateTimeContainerComponent {
     ...(ngDevMode ? [{ debugName: "timer" }] : /* istanbul ignore next */ []));
     picker;
     activeSelectedIndex = 0; // The current active SelectedIndex in range select mode (0: 'from', 1: 'to')
+    /** Whether an inverted range is corrected only on 'Set' or when the other end is activated (see OwlDateTimeComponent). */
+    lazyValidation = false;
     /** Emits when an animation state changes. */
     animationStateChanged = new EventEmitter();
     // retain start and end time
@@ -3400,12 +3485,7 @@ class OwlDateTimeContainerComponent {
             const selecteds = [...this.picker.selecteds];
             // check if the 'from' is after 'to' or 'to'is before 'from'
             // 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.activeSelectedIndex === 1 &&
-                    selecteds[0] &&
-                    this.dateTimeAdapter.compare(this.pickerMoment, selecteds[0]) === -1)) {
+            if (!this.lazyValidation && this.isRangeInverted(selecteds)) {
                 selecteds[0] = this.pickerMoment;
                 selecteds[1] = this.pickerMoment;
             }
@@ -3433,6 +3513,7 @@ class OwlDateTimeContainerComponent {
      * Handle click on set button
      */
     onSetClicked(event) {
+        this.checkInvertedRange();
         if (!this.picker.dateTimeChecker(this.pickerMoment)) {
             this.hidePicker$.next(null);
             event.preventDefault();
@@ -3527,6 +3608,7 @@ class OwlDateTimeContainerComponent {
             if (this.picker.selecteds && selected) {
                 this.pickerMoment = this.dateTimeAdapter.clone(selected);
             }
+            this.checkInvertedRange();
         }
         return;
     }
@@ -3624,6 +3706,31 @@ class OwlDateTimeContainerComponent {
         // check the updated dateTime
         return this.picker.dateTimeChecker(result) ? result : null;
     }
+    /**
+     * Whether the picker moment of the active end is after 'to' (or before 'from').
+     */
+    isRangeInverted(selecteds) {
+        return ((this.activeSelectedIndex === 0 &&
+            !!selecteds[1] &&
+            this.dateTimeAdapter.compare(this.pickerMoment, selecteds[1]) === 1) ||
+            (this.activeSelectedIndex === 1 &&
+                !!selecteds[0] &&
+                this.dateTimeAdapter.compare(this.pickerMoment, selecteds[0]) === -1));
+    }
+    /**
+     * With lazyValidation, sets both the 'from' and 'to' to the picker moment when the range is inverted.
+     */
+    checkInvertedRange() {
+        if (!this.lazyValidation || !this.picker.isInRangeMode) {
+            return;
+        }
+        const selecteds = [...this.picker.selecteds];
+        if (this.isRangeInverted(selecteds)) {
+            selecteds[0] = this.pickerMoment;
+            selecteds[1] = this.pickerMoment;
+            this.picker.select(selecteds);
+        }
+    }
     /**
      * Focus to the picker
      * */
@@ -3658,10 +3765,10 @@ class OwlDateTimeContainerComponent {
         }
         return duration;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OwlDateTimeContainerComponent, isStandalone: true, 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, isSignal: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true, isSignal: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0, template: "<div\n    [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n    class=\"owl-dt-container-inner\"\n>\n    @if (pickerType === 'both' || pickerType === 'calendar') {\n        <owl-date-time-calendar\n            class=\"owl-dt-container-row\"\n            [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n            [(pickerMoment)]=\"pickerMoment\"\n            [selected]=\"picker.selected\"\n            [selecteds]=\"picker.selecteds\"\n            [selectMode]=\"picker.selectMode\"\n            [minDate]=\"picker.minDateTime\"\n            [maxDate]=\"picker.maxDateTime\"\n            [dateFilter]=\"picker.dateTimeFilter\"\n            [startView]=\"picker.startView()\"\n            [yearOnly]=\"picker.yearOnly()\"\n            [showCalendarWeeks]=\"picker.showCalendarWeeks()\"\n            [multiyearOnly]=\"picker.multiyearOnly()\"\n            [hideOtherMonths]=\"picker.hideOtherMonths\"\n            (yearSelected)=\"picker.selectYear($event)\"\n            (monthSelected)=\"picker.selectMonth($event)\"\n            (dateClicked)=\"picker.selectDate($event)\"\n            (selectedChange)=\"dateSelected($event)\"\n        ></owl-date-time-calendar>\n    }\n    @if (pickerType === 'both' || pickerType === 'timer') {\n        <owl-date-time-timer\n            class=\"owl-dt-container-row\"\n            [pickerMoment]=\"pickerMoment\"\n            [minDateTime]=\"picker.minDateTime\"\n            [maxDateTime]=\"picker.maxDateTime\"\n            [showSecondsTimer]=\"picker.showSecondsTimer\"\n            [hour12Timer]=\"picker.hour12Timer\"\n            [stepHour]=\"picker.stepHour\"\n            [stepMinute]=\"picker.stepMinute\"\n            [stepSecond]=\"picker.stepSecond\"\n            (selectedChange)=\"timeSelected($event)\"\n        ></owl-date-time-timer>\n    }\n    @if (picker.isInRangeMode) {\n        <div\n            role=\"radiogroup\"\n            class=\"owl-dt-container-info owl-dt-container-row\"\n        >\n            <div\n                role=\"radio\"\n                [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n                [attr.aria-checked]=\"activeSelectedIndex === 0\"\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n                [ngClass]=\"{\n                    'owl-dt-container-info-active': activeSelectedIndex === 0,\n                }\"\n                (click)=\"handleClickOnInfoGroup($event, 0)\"\n                (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n                #from\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\n                    tabindex=\"-1\"\n                >\n                    <span class=\"owl-dt-container-info-label\"\n                        >{{ fromLabel }}:</span\n                    >\n                    <span class=\"owl-dt-container-info-value\">{{\n                        fromFormattedValue\n                    }}</span>\n                </span>\n            </div>\n            <div\n                role=\"radio\"\n                [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n                [attr.aria-checked]=\"activeSelectedIndex === 1\"\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n                [ngClass]=\"{\n                    'owl-dt-container-info-active': activeSelectedIndex === 1,\n                }\"\n                (click)=\"handleClickOnInfoGroup($event, 1)\"\n                (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n                #to\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\n                    tabindex=\"-1\"\n                >\n                    <span class=\"owl-dt-container-info-label\"\n                        >{{ toLabel }}:</span\n                    >\n                    <span class=\"owl-dt-container-info-value\">{{\n                        toFormattedValue\n                    }}</span>\n                </span>\n            </div>\n        </div>\n    }\n    @if (showControlButtons) {\n        <div class=\"owl-dt-container-buttons owl-dt-container-row\">\n            <button\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n                type=\"button\"\n                tabindex=\"0\"\n                (click)=\"onCancelClicked($event)\"\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\n                    tabindex=\"-1\"\n                >\n                    {{ cancelLabel }}\n                </span>\n            </button>\n            <button\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n                type=\"button\"\n                tabindex=\"0\"\n                (click)=\"onSetClicked($event)\"\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\n                    tabindex=\"-1\"\n                >\n                    {{ setLabel }}\n                </span>\n            </button>\n        </div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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"] }, { kind: "component", type: OwlTimerComponent, selector: "owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OwlDateTimeContainerComponent, isStandalone: true, 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, isSignal: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true, isSignal: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0, template: "<div\n    [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n    class=\"owl-dt-container-inner\"\n>\n    @if (pickerType === 'both' || pickerType === 'calendar') {\n        <owl-date-time-calendar\n            class=\"owl-dt-container-row\"\n            [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n            [(pickerMoment)]=\"pickerMoment\"\n            [selected]=\"picker.selected\"\n            [selecteds]=\"picker.selecteds\"\n            [selectMode]=\"picker.selectMode\"\n            [minDate]=\"picker.minDateTime\"\n            [maxDate]=\"picker.maxDateTime\"\n            [dateFilter]=\"picker.dateTimeFilter\"\n            [startView]=\"picker.startView()\"\n            [yearOnly]=\"picker.yearOnly()\"\n            [showCalendarWeeks]=\"picker.showCalendarWeeks()\"\n            [multiyearOnly]=\"picker.multiyearOnly()\"\n            [hideOtherMonths]=\"picker.hideOtherMonths\"\n            (yearSelected)=\"picker.selectYear($event)\"\n            (monthSelected)=\"picker.selectMonth($event)\"\n            (dateClicked)=\"picker.selectDate($event)\"\n            (selectedChange)=\"dateSelected($event)\"\n        ></owl-date-time-calendar>\n    }\n    @if (pickerType === 'both' || pickerType === 'timer') {\n        <owl-date-time-timer\n            class=\"owl-dt-container-row\"\n            [pickerMoment]=\"pickerMoment\"\n            [minDateTime]=\"picker.minDateTime\"\n            [maxDateTime]=\"picker.maxDateTime\"\n            [showSecondsTimer]=\"picker.showSecondsTimer\"\n            [hour12Timer]=\"picker.hour12Timer\"\n            [stepHour]=\"picker.stepHour\"\n            [stepMinute]=\"picker.stepMinute\"\n            [stepSecond]=\"picker.stepSecond\"\n            [wrapTimer]=\"picker.wrapTimer\"\n            [timerInputDebounce]=\"picker.timerInputDebounce\"\n            (selectedChange)=\"timeSelected($event)\"\n        ></owl-date-time-timer>\n    }\n    @if (picker.isInRangeMode) {\n        <div\n            role=\"radiogroup\"\n            class=\"owl-dt-container-info owl-dt-container-row\"\n        >\n            <div\n                role=\"radio\"\n                [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n                [attr.aria-checked]=\"activeSelectedIndex === 0\"\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n                [ngClass]=\"{\n                    'owl-dt-container-info-active': activeSelectedIndex === 0,\n                }\"\n                (click)=\"handleClickOnInfoGroup($event, 0)\"\n                (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n                #from\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\n                    tabindex=\"-1\"\n                >\n                    <span class=\"owl-dt-container-info-label\"\n                        >{{ fromLabel }}:</span\n                    >\n                    <span class=\"owl-dt-container-info-value\">{{\n                        fromFormattedValue\n                    }}</span>\n                </span>\n            </div>\n            <div\n                role=\"radio\"\n                [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n                [attr.aria-checked]=\"activeSelectedIndex === 1\"\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n                [ngClass]=\"{\n                    'owl-dt-container-info-active': activeSelectedIndex === 1,\n                }\"\n                (click)=\"handleClickOnInfoGroup($event, 1)\"\n                (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n                #to\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\n                    tabindex=\"-1\"\n                >\n                    <span class=\"owl-dt-container-info-label\"\n                        >{{ toLabel }}:</span\n                    >\n                    <span class=\"owl-dt-container-info-value\">{{\n                        toFormattedValue\n                    }}</span>\n                </span>\n            </div>\n        </div>\n    }\n    @if (showControlButtons) {\n        <div class=\"owl-dt-container-buttons owl-dt-container-row\">\n            <button\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n                type=\"button\"\n                tabindex=\"0\"\n                (click)=\"onCancelClicked($event)\"\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\n                    tabindex=\"-1\"\n                >\n                    {{ cancelLabel }}\n                </span>\n            </button>\n            <button\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n                type=\"button\"\n                tabindex=\"0\"\n                (click)=\"onSetClicked($event)\"\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\n                    tabindex=\"-1\"\n                >\n                    {{ setLabel }}\n                </span>\n            </button>\n        </div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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"] }, { kind: "component", type: OwlTimerComponent, selector: "owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond", "wrapTimer", "timerInputDebounce"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeContainerComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'owlDateTimeContainer', selector: 'owl-date-time-container', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, host: {
                         '(animate.enter)': 'onAnimateEnter($event)',
@@ -3677,7 +3784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         OwlCalendarComponent,
                         OwlTimerComponent,
                         NgClass,
-                    ], template: "<div\n    [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n    class=\"owl-dt-container-inner\"\n>\n    @if (pickerType === 'both' || pickerType === 'calendar') {\n        <owl-date-time-calendar\n            class=\"owl-dt-container-row\"\n            [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n            [(pickerMoment)]=\"pickerMoment\"\n            [selected]=\"picker.selected\"\n            [selecteds]=\"picker.selecteds\"\n            [selectMode]=\"picker.selectMode\"\n            [minDate]=\"picker.minDateTime\"\n            [maxDate]=\"picker.maxDateTime\"\n            [dateFilter]=\"picker.dateTimeFilter\"\n            [startView]=\"picker.startView()\"\n            [yearOnly]=\"picker.yearOnly()\"\n            [showCalendarWeeks]=\"picker.showCalendarWeeks()\"\n            [multiyearOnly]=\"picker.multiyearOnly()\"\n            [hideOtherMonths]=\"picker.hideOtherMonths\"\n            (yearSelected)=\"picker.selectYear($event)\"\n            (monthSelected)=\"picker.selectMonth($event)\"\n            (dateClicked)=\"picker.selectDate($event)\"\n            (selectedChange)=\"dateSelected($event)\"\n        ></owl-date-time-calendar>\n    }\n    @if (pickerType === 'both' || pickerType === 'timer') {\n        <owl-date-time-timer\n            class=\"owl-dt-container-row\"\n            [pickerMoment]=\"pickerMoment\"\n            [minDateTime]=\"picker.minDateTime\"\n            [maxDateTime]=\"picker.maxDateTime\"\n            [showSecondsTimer]=\"picker.showSecondsTimer\"\n            [hour12Timer]=\"picker.hour12Timer\"\n            [stepHour]=\"picker.stepHour\"\n            [stepMinute]=\"picker.stepMinute\"\n            [stepSecond]=\"picker.stepSecond\"\n            (selectedChange)=\"timeSelected($event)\"\n        ></owl-date-time-timer>\n    }\n    @if (picker.isInRangeMode) {\n        <div\n            role=\"radiogroup\"\n            class=\"owl-dt-container-info owl-dt-container-row\"\n        >\n            <div\n                role=\"radio\"\n                [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n                [attr.aria-checked]=\"activeSelectedIndex === 0\"\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n                [ngClass]=\"{\n                    'owl-dt-container-info-active': activeSelectedIndex === 0,\n                }\"\n                (click)=\"handleClickOnInfoGroup($event, 0)\"\n                (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n                #from\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\n                    tabindex=\"-1\"\n                >\n                    <span class=\"owl-dt-container-info-label\"\n                        >{{ fromLabel }}:</span\n                    >\n                    <span class=\"owl-dt-container-info-value\">{{\n                        fromFormattedValue\n                    }}</span>\n                </span>\n            </div>\n            <div\n                role=\"radio\"\n                [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n                [attr.aria-checked]=\"activeSelectedIndex === 1\"\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n                [ngClass]=\"{\n                    'owl-dt-container-info-active': activeSelectedIndex === 1,\n                }\"\n                (click)=\"handleClickOnInfoGroup($event, 1)\"\n                (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n                #to\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\n                    tabindex=\"-1\"\n                >\n                    <span class=\"owl-dt-container-info-label\"\n                        >{{ toLabel }}:</span\n                    >\n                    <span class=\"owl-dt-container-info-value\">{{\n                        toFormattedValue\n                    }}</span>\n                </span>\n            </div>\n        </div>\n    }\n    @if (showControlButtons) {\n        <div class=\"owl-dt-container-buttons owl-dt-container-row\">\n            <button\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n                type=\"button\"\n                tabindex=\"0\"\n                (click)=\"onCancelClicked($event)\"\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\n                    tabindex=\"-1\"\n                >\n                    {{ cancelLabel }}\n                </span>\n            </button>\n            <button\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n                type=\"button\"\n                tabindex=\"0\"\n                (click)=\"onSetClicked($event)\"\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\n                    tabindex=\"-1\"\n                >\n                    {{ setLabel }}\n                </span>\n            </button>\n        </div>\n    }\n</div>\n" }]
+                    ], template: "<div\n    [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n    class=\"owl-dt-container-inner\"\n>\n    @if (pickerType === 'both' || pickerType === 'calendar') {\n        <owl-date-time-calendar\n            class=\"owl-dt-container-row\"\n            [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n            [(pickerMoment)]=\"pickerMoment\"\n            [selected]=\"picker.selected\"\n            [selecteds]=\"picker.selecteds\"\n            [selectMode]=\"picker.selectMode\"\n            [minDate]=\"picker.minDateTime\"\n            [maxDate]=\"picker.maxDateTime\"\n            [dateFilter]=\"picker.dateTimeFilter\"\n            [startView]=\"picker.startView()\"\n            [yearOnly]=\"picker.yearOnly()\"\n            [showCalendarWeeks]=\"picker.showCalendarWeeks()\"\n            [multiyearOnly]=\"picker.multiyearOnly()\"\n            [hideOtherMonths]=\"picker.hideOtherMonths\"\n            (yearSelected)=\"picker.selectYear($event)\"\n            (monthSelected)=\"picker.selectMonth($event)\"\n            (dateClicked)=\"picker.selectDate($event)\"\n            (selectedChange)=\"dateSelected($event)\"\n        ></owl-date-time-calendar>\n    }\n    @if (pickerType === 'both' || pickerType === 'timer') {\n        <owl-date-time-timer\n            class=\"owl-dt-container-row\"\n            [pickerMoment]=\"pickerMoment\"\n            [minDateTime]=\"picker.minDateTime\"\n            [maxDateTime]=\"picker.maxDateTime\"\n            [showSecondsTimer]=\"picker.showSecondsTimer\"\n            [hour12Timer]=\"picker.hour12Timer\"\n            [stepHour]=\"picker.stepHour\"\n            [stepMinute]=\"picker.stepMinute\"\n            [stepSecond]=\"picker.stepSecond\"\n            [wrapTimer]=\"picker.wrapTimer\"\n            [timerInputDebounce]=\"picker.timerInputDebounce\"\n            (selectedChange)=\"timeSelected($event)\"\n        ></owl-date-time-timer>\n    }\n    @if (picker.isInRangeMode) {\n        <div\n            role=\"radiogroup\"\n            class=\"owl-dt-container-info owl-dt-container-row\"\n        >\n            <div\n                role=\"radio\"\n                [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n                [attr.aria-checked]=\"activeSelectedIndex === 0\"\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n                [ngClass]=\"{\n                    'owl-dt-container-info-active': activeSelectedIndex === 0,\n                }\"\n                (click)=\"handleClickOnInfoGroup($event, 0)\"\n                (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n                #from\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\n                    tabindex=\"-1\"\n                >\n                    <span class=\"owl-dt-container-info-label\"\n                        >{{ fromLabel }}:</span\n                    >\n                    <span class=\"owl-dt-container-info-value\">{{\n                        fromFormattedValue\n                    }}</span>\n                </span>\n            </div>\n            <div\n                role=\"radio\"\n                [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n                [attr.aria-checked]=\"activeSelectedIndex === 1\"\n                class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n                [ngClass]=\"{\n                    'owl-dt-container-info-active': activeSelectedIndex === 1,\n                }\"\n                (click)=\"handleClickOnInfoGroup($event, 1)\"\n                (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n                #to\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-container-range-content\"\n                    tabindex=\"-1\"\n                >\n                    <span class=\"owl-dt-container-info-label\"\n                        >{{ toLabel }}:</span\n                    >\n                    <span class=\"owl-dt-container-info-value\">{{\n                        toFormattedValue\n                    }}</span>\n                </span>\n            </div>\n        </div>\n    }\n    @if (showControlButtons) {\n        <div class=\"owl-dt-container-buttons owl-dt-container-row\">\n            <button\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n                type=\"button\"\n                tabindex=\"0\"\n                (click)=\"onCancelClicked($event)\"\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\n                    tabindex=\"-1\"\n                >\n                    {{ cancelLabel }}\n                </span>\n            </button>\n            <button\n                class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n                type=\"button\"\n                tabindex=\"0\"\n                (click)=\"onSetClicked($event)\"\n            >\n                <span\n                    class=\"owl-dt-control-content owl-dt-control-button-content\"\n                    tabindex=\"-1\"\n                >\n                    {{ setLabel }}\n                </span>\n            </button>\n        </div>\n    }\n</div>\n" }]
         }], propDecorators: { calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OwlCalendarComponent), { isSignal: true }] }], timer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OwlTimerComponent), { isSignal: true }] }] } });
 
 /**
@@ -3813,12 +3920,35 @@ class OwlDateTimeComponent extends OwlDateTime {
     set opened(val) {
         val ? this.open() : this.close();
     }
+    /** Whether the picker is being opened: from open() until afterPickerOpen. */
+    _opening = false;
+    get opening() {
+        return this._opening;
+    }
+    /** Whether the picker is being closed: from close() until afterPickerClosed. */
+    _closing = false;
+    get closing() {
+        return this._closing;
+    }
     /**
      * The scroll strategy when the picker is open
      * Learn more this from https://material.angular.io/cdk/overlay/overview#scroll-strategies
      * */
     scrollStrategy = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    /**
+     * For the range mode: when false, an inverted range ('from' after 'to' or 'to' before 'from')
+     * is corrected on every change by setting both ends to the same value. When true, it is corrected only
+     * when 'Set' is clicked or the other end is activated, so the time can be edited step by step.
+     * Defaults to the lazyValidation global option (false).
+     * */
+    _lazyValidation;
+    get lazyValidation() {
+        return this._lazyValidation ?? this.options?.lazyValidation ?? false;
+    }
+    set lazyValidation(value) {
+        this._lazyValidation = coerceBooleanProperty(value);
+    }
     /**
      * Callback when the picker is closed
      * */
@@ -3831,6 +3961,14 @@ class OwlDateTimeComponent extends OwlDateTime {
      * Callback when the picker is open
      * */
     afterPickerOpen = output();
+    /**
+     * Emits at the start of open(), before the picker is created
+     * */
+    pickerOpening = output();
+    /**
+     * Emits at the start of close(), before the picker is destroyed
+     * */
+    pickerClosing = output();
     /**
      * Emits selected year in multi-year view
      * This doesn't imply a change on the selected date.
@@ -3952,6 +4090,8 @@ class OwlDateTimeComponent extends OwlDateTime {
         if (!this._dtInput) {
             throw Error('Attempted to open an DateTimePicker with no associated input.');
         }
+        this._opening = true;
+        this.pickerOpening.emit();
         if (this.document) {
             this.focusedElementBeforeOpen = this.document.activeElement;
         }
@@ -3969,6 +4109,7 @@ class OwlDateTimeComponent extends OwlDateTime {
         }
         this.pickerMode === 'dialog' ? this.openAsDialog() : this.openAsPopup();
         this.pickerContainer.picker = this;
+        this.pickerContainer.lazyValidation = this.lazyValidation;
         // Listen to picker container's hidePickerStream
         this.hidePickerStreamSub = this.pickerContainer.hidePickerStream.subscribe(() => {
             this.close();
@@ -4030,12 +4171,16 @@ class OwlDateTimeComponent extends OwlDateTime {
      * Hide the picker
      */
     close() {
-        if (!this._opened) {
+        // Detaching the popup calls close() again, emit pickerClosing once
+        if (!this._opened || this._closing) {
             return;
         }
+        this._closing = true;
+        this.pickerClosing.emit();
         this.disposeOverlayResources();
         const completeClose = () => {
             if (this._opened) {
+                this._closing = false;
                 this._opened = false;
                 const selected = this.selected || this.selecteds;
                 this.afterPickerClosed.emit(selected);
@@ -4124,8 +4269,9 @@ class OwlDateTimeComponent extends OwlDateTime {
             this.beforePickerOpen.emit(null);
         }));
         this.dialogEventsSub.add(this.dialogRef.afterOpen().subscribe(() => {
-            this.afterPickerOpen.emit(null);
+            this._opening = false;
             this._opened = true;
+            this.afterPickerOpen.emit(null);
         }));
         this.dialogEventsSub.add(this.dialogRef.afterClosed().subscribe(() => this.close()));
     }
@@ -4155,8 +4301,9 @@ class OwlDateTimeComponent extends OwlDateTime {
             this.pickerOpenedStreamSub = this.pickerContainer.pickerOpenedStream
                 .pipe(take$1(1))
                 .subscribe(() => {
-                this.afterPickerOpen.emit(null);
+                this._opening = false;
                 this._opened = true;
+                this.afterPickerOpen.emit(null);
             });
         }
     }
@@ -4230,10 +4377,10 @@ class OwlDateTimeComponent extends OwlDateTime {
             }
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: OwlDateTimeComponent, isStandalone: true, selector: "owl-date-time", inputs: { backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: false, isRequired: false, transformFunction: null }, endAt: { classPropertyName: "endAt", publicName: "endAt", isSignal: false, isRequired: false, transformFunction: null }, pickerType: { classPropertyName: "pickerType", publicName: "pickerType", isSignal: false, isRequired: false, transformFunction: null }, pickerMode: { classPropertyName: "pickerMode", publicName: "pickerMode", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: false, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null } }, 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: OwlDateTimeComponent, isStandalone: true, selector: "owl-date-time", inputs: { backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: false, isRequired: false, transformFunction: null }, endAt: { classPropertyName: "endAt", publicName: "endAt", isSignal: false, isRequired: false, transformFunction: null }, pickerType: { classPropertyName: "pickerType", publicName: "pickerType", isSignal: false, isRequired: false, transformFunction: null }, pickerMode: { classPropertyName: "pickerMode", publicName: "pickerMode", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: false, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, lazyValidation: { classPropertyName: "lazyValidation", publicName: "lazyValidation", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { afterPickerClosed: "afterPickerClosed", beforePickerOpen: "beforePickerOpen", afterPickerOpen: "afterPickerOpen", pickerOpening: "pickerOpening", pickerClosing: "pickerClosing", 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: "22.0.5", ngImport: i0, type: OwlDateTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time', exportAs: 'owlDateTime', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "" }]
         }], ctorParameters: () => [], propDecorators: { backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], startAt: [{
@@ -4248,7 +4395,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Input
             }], opened: [{
                 type: Input
-            }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], afterPickerClosed: [{ type: i0.Output, args: ["afterPickerClosed"] }], beforePickerOpen: [{ type: i0.Output, args: ["beforePickerOpen"] }], afterPickerOpen: [{ type: i0.Output, args: ["afterPickerOpen"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
+            }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], lazyValidation: [{
+                type: Input
+            }], afterPickerClosed: [{ type: i0.Output, args: ["afterPickerClosed"] }], beforePickerOpen: [{ type: i0.Output, args: ["beforePickerOpen"] }], afterPickerOpen: [{ type: i0.Output, args: ["afterPickerOpen"] }], pickerOpening: [{ type: i0.Output, args: ["pickerOpening"] }], pickerClosing: [{ type: i0.Output, args: ["pickerClosing"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
 
 /**
  * provide-date-time.ts
@@ -4287,7 +4436,8 @@ function provideOwlDateTime() {
  * Provides custom options for OwlDateTime.
  * This is optional - default options will be used if not provided.
  *
- * @param options - Custom options for multi-year view configuration
+ * @param options - Custom options: multi-year view configuration and the global defaults of the inputs,
+ * the missing ones keep their default values
  *
  * @example
  * ```typescript
@@ -4299,17 +4449,19 @@ function provideOwlDateTime() {
  *       multiYear: {
  *         yearsPerRow: 4,
  *         yearRows: 5
- *       }
+ *       },
+ *       lazyValidation: true
  *     })
  *   ]
  * });
  * ```
  */
 function provideOwlDateTimeOptions(options) {
+    const defaults = DefaultOptions.create();
     return [
         {
             provide: OptionsTokens.all,
-            useValue: options,
+            useValue: { ...defaults, ...options, multiYear: { ...defaults.multiYear, ...options.multiYear } },
         },
         {
             provide: OptionsTokens.multiYear,
@@ -4406,6 +4558,48 @@ function createDateWithOverflow(year, month, date, hours = 0, minutes = 0, secon
     }
     return result;
 }
+/**
+ * Checks whether the text matches the Intl format of the locale,
+ * e.g. `11/9/2026, 1:05 PM` for `en-US` and the full input format.
+ * Whitespace in the format literals matches any whitespace,
+ * since Intl puts non-breaking spaces where the user types plain ones.
+ */
+function isValidIntlFormat(value, locale, format) {
+    const dtf = new Intl.DateTimeFormat(locale, { ...format, timeZone: 'utc' });
+    let pattern = '^';
+    for (const part of dtf.formatToParts()) {
+        switch (part.type) {
+            case 'day':
+                pattern += '(0?[1-9]|[12][0-9]|3[01])';
+                break;
+            case 'month':
+                pattern += '(0?[1-9]|1[0-2])';
+                break;
+            case 'year':
+                pattern += '([0-9]{1,4})';
+                break;
+            case 'hour':
+                pattern += dtf.resolvedOptions().hour12
+                    ? '(0?[1-9]|1[0-2])'
+                    : '([01]?[0-9]|2[0-3])';
+                break;
+            case 'minute':
+            case 'second':
+                pattern += '([0-5]?[0-9])';
+                break;
+            case 'dayPeriod':
+                pattern += '([ap]m?)';
+                break;
+            case 'literal':
+                pattern += part.value
+                    .replace(/[.*+?^${}()|[\]\\/]/g, '\\$&')
+                    .replace(/\s+/g, '\\s+');
+                break;
+        }
+    }
+    pattern += '$';
+    return new RegExp(pattern, 'i').test(value);
+}
 
 /**
  * constants
@@ -4601,6 +4795,12 @@ class NativeDateTimeAdapter extends DateTimeAdapter {
     isValid(date) {
         return date && !isNaN(date.getTime());
     }
+    isValidFormat(value, parseFormat) {
+        if (SUPPORTS_INTL_API) {
+            return isValidIntlFormat(value, this.getLocale(), parseFormat);
+        }
+        return this.isValid(new Date(value));
+    }
     invalid() {
         return new Date(NaN);
     }
@@ -4716,10 +4916,10 @@ class NativeDateTimeAdapter extends DateTimeAdapter {
         const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
         return dtf.format(d);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NativeDateTimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NativeDateTimeAdapter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NativeDateTimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NativeDateTimeAdapter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NativeDateTimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NativeDateTimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5047,6 +5247,12 @@ class UnixTimestampDateTimeAdapter extends DateTimeAdapter {
     isValid(date) {
         return (date || date === 0) && !isNaN(date);
     }
+    isValidFormat(value, parseFormat) {
+        if (SUPPORTS_INTL_API) {
+            return isValidIntlFormat(value, this.getLocale(), parseFormat);
+        }
+        return this.isValid(new Date(value).getTime());
+    }
     now() {
         return new Date().getTime();
     }
@@ -5075,10 +5281,10 @@ class UnixTimestampDateTimeAdapter extends DateTimeAdapter {
     toIso8601(date) {
         return new Date(date).toISOString();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UnixTimestampDateTimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UnixTimestampDateTimeAdapter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnixTimestampDateTimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnixTimestampDateTimeAdapter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UnixTimestampDateTimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnixTimestampDateTimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5225,10 +5431,10 @@ class OwlDateTimeTriggerDirective {
             this.changeDetector.markForCheck();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: OwlDateTimeTriggerDirective, isStandalone: true, selector: "[owlDateTimeTrigger]", inputs: { dtPicker: { classPropertyName: "dtPicker", publicName: "owlDateTimeTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: OwlDateTimeTriggerDirective, isStandalone: true, selector: "[owlDateTimeTrigger]", inputs: { dtPicker: { classPropertyName: "dtPicker", publicName: "owlDateTimeTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[owlDateTimeTrigger]',
@@ -5309,24 +5515,40 @@ class OwlDateTimeInputDirective {
             element.blur();
         }
     }
-    /** The minimum valid date. */
+    /** The minimum valid date. With strictFormat, it is year 1 by default. */
     _min;
     get min() {
-        return this._min;
+        return this._min ?? (this.strictFormat ? this.strictMin : null);
     }
     set min(value) {
         this._min = this.getValidDate(this.dateTimeAdapter.deserialize(value));
         this.validatorOnChange();
     }
-    /** The maximum valid date. */
+    /** The maximum valid date. With strictFormat, it is year 9999 by default. */
     _max;
     get max() {
-        return this._max;
+        return this._max ?? (this.strictFormat ? this.strictMax : null);
     }
     set max(value) {
         this._max = this.getValidDate(this.dateTimeAdapter.deserialize(value));
         this.validatorOnChange();
     }
+    /**
+     * Whether the typed text must match the display format of the picker (adapter isValidFormat),
+     * otherwise it gets the owlDateTimeParse error. Also limits min and max to 4-digit years.
+     * Defaults to the strictFormat global option (false).
+     */
+    _strictFormat;
+    get strictFormat() {
+        return this._strictFormat ?? this.options?.strictFormat ?? false;
+    }
+    set strictFormat(value) {
+        this._strictFormat = coerceBooleanProperty(value);
+        this.validatorOnChange();
+    }
+    options = inject(OptionsTokens.all, { optional: true });
+    strictMin;
+    strictMax;
     /**
      * The picker's select mode
      */
@@ -5418,9 +5640,11 @@ class OwlDateTimeInputDirective {
     validatorOnChange = () => { };
     /** The form control validator for whether the input parses. */
     parseValidator = () => {
-        return this.lastValueValid
-            ? null
-            : { owlDateTimeParse: { text: this.elmRef.nativeElement.value } };
+        const text = this.elmRef.nativeElement.value;
+        if (!text) {
+            return null;
+        }
+        return this.lastValueValid ? null : { owlDateTimeParse: { text } };
     };
     /** The form control validator for the min date. */
     minValidator = (control) => {
@@ -5553,6 +5777,9 @@ class OwlDateTimeInputDirective {
                 `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
                 `custom implementation.`);
         }
+        // The strict format allows 4-digit years only
+        this.strictMin = this.dateTimeAdapter.createDate(1, 0, 1, 0, 0, 0);
+        this.strictMax = this.dateTimeAdapter.createDate(9999, 11, 31, 23, 59, 59);
         this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {
             this.value = this.value;
         });
@@ -5636,6 +5863,7 @@ class OwlDateTimeInputDirective {
         else {
             this.changeInputInRangeFromToMode(value);
         }
+        this.validatorOnChange();
     }
     handleChangeOnHost(event) {
         let v;
@@ -5713,6 +5941,15 @@ class OwlDateTimeInputDirective {
             ? obj
             : null;
     }
+    /**
+     * Whether the input text matches the display format of the picker, checked with strictFormat only.
+     * An empty text is valid, it means no value.
+     */
+    isValidText(text) {
+        return (!text ||
+            !this.strictFormat ||
+            this.dateTimeAdapter.isValidFormat(text, this.dtPicker.formatString));
+    }
     /**
      * Convert a time string to a date-time string
      * When pickerType is 'timer', the value in the picker's input is a time string.
@@ -5733,12 +5970,15 @@ class OwlDateTimeInputDirective {
      * Handle input change in single mode
      */
     changeInputInSingleMode(inputValue) {
+        inputValue = (inputValue || '').trim();
+        const validText = this.isValidText(inputValue);
         let value = inputValue;
         if (this.dtPicker.pickerType === 'timer') {
             value = this.convertTimeStringToDateTimeString(value, this.value);
         }
         let result = this.dateTimeAdapter.parse(value, this.dateTimeFormats.parseInput);
-        this.lastValueValid = !result || this.dateTimeAdapter.isValid(result);
+        this.lastValueValid =
+            validText && (!result || this.dateTimeAdapter.isValid(result));
         result = this.getValidDate(result);
         // if the newValue is the same as the oldValue, we intend to not fire the valueChange event
         // result equals to null means there is input event, but the input value is invalid
@@ -5757,6 +5997,8 @@ class OwlDateTimeInputDirective {
      * Handle input change in rangeFrom or rangeTo mode
      */
     changeInputInRangeFromToMode(inputValue) {
+        inputValue = (inputValue || '').trim();
+        const validText = this.isValidText(inputValue);
         const originalValue = this._selectMode === 'rangeFrom'
             ? this._values[0]
             : this._values[1];
@@ -5764,7 +6006,8 @@ class OwlDateTimeInputDirective {
             inputValue = this.convertTimeStringToDateTimeString(inputValue, originalValue);
         }
         let result = this.dateTimeAdapter.parse(inputValue, this.dateTimeFormats.parseInput);
-        this.lastValueValid = !result || this.dateTimeAdapter.isValid(result);
+        this.lastValueValid =
+            validText && (!result || this.dateTimeAdapter.isValid(result));
         result = this.getValidDate(result);
         // if the newValue is the same as the oldValue, we intend to not fire the valueChange event
         if ((this._selectMode === 'rangeFrom' &&
@@ -5791,9 +6034,10 @@ class OwlDateTimeInputDirective {
      * Handle input change in range mode
      */
     changeInputInRangeMode(inputValue) {
-        const selecteds = inputValue.split(this.rangeSeparator());
-        let fromString = selecteds[0];
-        let toString = selecteds[1];
+        const selecteds = (inputValue || '').trim().split(this.rangeSeparator());
+        let fromString = (selecteds[0] || '').trim();
+        let toString = (selecteds[1] || '').trim();
+        const validText = this.isValidText(fromString) && this.isValidText(toString);
         if (this.dtPicker.pickerType === 'timer') {
             fromString = this.convertTimeStringToDateTimeString(fromString, this.values[0]);
             toString = this.convertTimeStringToDateTimeString(toString, this.values[1]);
@@ -5801,7 +6045,8 @@ class OwlDateTimeInputDirective {
         let from = this.dateTimeAdapter.parse(fromString, this.dateTimeFormats.parseInput);
         let to = this.dateTimeAdapter.parse(toString, this.dateTimeFormats.parseInput);
         this.lastValueValid =
-            (!from || this.dateTimeAdapter.isValid(from)) &&
+            validText &&
+                (!from || this.dateTimeAdapter.isValid(from)) &&
                 (!to || this.dateTimeAdapter.isValid(to));
         from = this.getValidDate(from);
         to = this.getValidDate(to);
@@ -5828,13 +6073,13 @@ class OwlDateTimeInputDirective {
         }
         return first === second;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: OwlDateTimeInputDirective, isStandalone: true, selector: "input[owlDateTime]", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, owlDateTime: { classPropertyName: "owlDateTime", publicName: "owlDateTime", isSignal: false, isRequired: false, transformFunction: null }, owlDateTimeFilter: { classPropertyName: "owlDateTimeFilter", publicName: "owlDateTimeFilter", isSignal: false, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "_disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: false, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _disabled: "_disabledChange", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: OwlDateTimeInputDirective, isStandalone: true, selector: "input[owlDateTime]", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, owlDateTime: { classPropertyName: "owlDateTime", publicName: "owlDateTime", isSignal: false, isRequired: false, transformFunction: null }, owlDateTimeFilter: { classPropertyName: "owlDateTimeFilter", publicName: "owlDateTimeFilter", isSignal: false, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "_disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, strictFormat: { classPropertyName: "strictFormat", publicName: "strictFormat", isSignal: false, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: false, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _disabled: "_disabledChange", 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: "22.0.5", ngImport: i0, type: OwlDateTimeInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[owlDateTime]',
@@ -5865,6 +6110,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Input
             }], max: [{
                 type: Input
+            }], strictFormat: [{
+                type: Input
             }], selectMode: [{
                 type: Input
             }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", required: false }] }], value: [{
@@ -5889,10 +6136,10 @@ class NumberFixedLenPipe {
         }
         return numString;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NumberFixedLenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: NumberFixedLenPipe, isStandalone: true, name: "numberFixedLen" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NumberFixedLenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: NumberFixedLenPipe, isStandalone: true, name: "numberFixedLen" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NumberFixedLenPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NumberFixedLenPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'numberFixedLen', }]
         }] });
@@ -6150,10 +6397,10 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
     selectDate(normalizedDate) {
         this.dateSelected.emit(normalizedDate);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: OwlDateTimeInlineComponent, isStandalone: true, 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, isSignal: 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: OwlDateTimeInlineComponent, isStandalone: true, 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, isSignal: 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: "22.0.5", ngImport: i0, type: OwlDateTimeInlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeInlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'owl-date-time-inline', host: {
                         '[class.owl-dt-inline]': 'owlDTInlineClass'
@@ -6206,14 +6453,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * ```
  */
 class OwlDialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: OwlDialogModule, imports: [CommonModule, A11yModule, OverlayModule, PortalModule, OwlDialogContainerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDialogModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: OwlDialogModule, imports: [CommonModule, A11yModule, OverlayModule, PortalModule, OwlDialogContainerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDialogModule, providers: [
             OWL_DIALOG_SCROLL_STRATEGY_PROVIDER,
             OwlDialogService,
         ], imports: [CommonModule, A11yModule, OverlayModule, PortalModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, A11yModule, OverlayModule, PortalModule, OwlDialogContainerComponent],
@@ -6329,16 +6576,16 @@ class OwlHourInputComponent {
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlHourInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OwlHourInputComponent, isStandalone: true, selector: "owl-hour-input", inputs: { upBtnAriaLabel: { classPropertyName: "upBtnAriaLabel", publicName: "upBtnAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, downBtnAriaLabel: { classPropertyName: "downBtnAriaLabel", publicName: "downBtnAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hour12Timer: { classPropertyName: "hour12Timer", publicName: "hour12Timer", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class.owl-hour-input": "owlHourInputClass" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlHourInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OwlHourInputComponent, isStandalone: true, selector: "owl-hour-input", inputs: { upBtnAriaLabel: { classPropertyName: "upBtnAriaLabel", publicName: "upBtnAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, downBtnAriaLabel: { classPropertyName: "downBtnAriaLabel", publicName: "downBtnAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hour12Timer: { classPropertyName: "hour12Timer", publicName: "hour12Timer", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class.owl-hour-input": "owlHourInputClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => OwlHourInputComponent),
                 multi: true
             }
-        ], exportAs: ["owlHourInput"], ngImport: i0, template: "<owl-date-time-timer-box\n    [upBtnAriaLabel]=\"upBtnAriaLabel()\"\n    [downBtnAriaLabel]=\"downBtnAriaLabel()\"\n    [upBtnDisabled]=\"disabled()\"\n    [downBtnDisabled]=\"disabled()\"\n    [boxValue]=\"boxValue()\"\n    [value]=\"value()\"\n    [min]=\"0\"\n    [max]=\"23\"\n    [step]=\"step()\"\n    [inputLabel]=\"'Hour'\"\n    (inputChange)=\"setValueViaInput($event)\"\n    (valueChange)=\"setValue($event)\"\n></owl-date-time-timer-box>\n\n@if (hour12Timer()) {\n    <div class=\"owl-dt-timer-hour12\">\n        <button\n            class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"setMeridian()\"\n            [disabled]=\"disabled()\"\n        >\n            <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n                {{ hour12ButtonLabel() }}\n            </span>\n        </button>\n    </div>\n}\n", 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"] }] });
+        ], exportAs: ["owlHourInput"], ngImport: i0, template: "<owl-date-time-timer-box\n    [upBtnAriaLabel]=\"upBtnAriaLabel()\"\n    [downBtnAriaLabel]=\"downBtnAriaLabel()\"\n    [upBtnDisabled]=\"disabled()\"\n    [downBtnDisabled]=\"disabled()\"\n    [boxValue]=\"boxValue()\"\n    [value]=\"value()\"\n    [min]=\"0\"\n    [max]=\"23\"\n    [step]=\"step()\"\n    [inputLabel]=\"'Hour'\"\n    (inputChange)=\"setValueViaInput($event)\"\n    (valueChange)=\"setValue($event)\"\n></owl-date-time-timer-box>\n\n@if (hour12Timer()) {\n    <div class=\"owl-dt-timer-hour12\">\n        <button\n            class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"setMeridian()\"\n            [disabled]=\"disabled()\"\n        >\n            <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n                {{ hour12ButtonLabel() }}\n            </span>\n        </button>\n    </div>\n}\n", dependencies: [{ kind: "component", type: OwlTimerBoxComponent, selector: "owl-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "wrap", "inputDebounce", "inputLabel"], outputs: ["valueChange", "inputChange"], exportAs: ["owlDateTimeTimerBox"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlHourInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlHourInputComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'owlHourInput', selector: 'owl-hour-input', imports: [OwlTimerBoxComponent], host: {
                         '[class.owl-hour-input]': 'owlHourInputClass'
@@ -6389,8 +6636,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * ```
  */
 class OwlDateTimeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeModule, imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule, OwlDateTimeTriggerDirective,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeModule, imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule, OwlDateTimeTriggerDirective,
             OwlDateTimeInputDirective,
             OwlDateTimeComponent,
             OwlDateTimeContainerComponent,
@@ -6414,13 +6661,13 @@ class OwlDateTimeModule {
             OwlMultiYearViewComponent,
             OwlYearViewComponent,
             OwlMonthViewComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeModule, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeModule, providers: [
             OwlDateTimeIntl,
             OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER,
             ...optionsProviders,
         ], imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule, OwlDateTimeTriggerDirective,
@@ -6466,13 +6713,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * @see provideOwlNativeDateTime
  */
 class NativeDateTimeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: NativeDateTimeModule, imports: [PlatformModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NativeDateTimeModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: NativeDateTimeModule, imports: [PlatformModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NativeDateTimeModule, providers: [
             { provide: DateTimeAdapter, useClass: NativeDateTimeAdapter },
         ], imports: [PlatformModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NativeDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NativeDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [PlatformModule],
@@ -6496,11 +6743,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * ```
  */
 class OwlNativeDateTimeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlNativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: OwlNativeDateTimeModule, imports: [NativeDateTimeModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlNativeDateTimeModule, providers: [{ provide: OWL_DATE_TIME_FORMATS, useValue: OWL_NATIVE_DATE_TIME_FORMATS }], imports: [NativeDateTimeModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlNativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: OwlNativeDateTimeModule, imports: [NativeDateTimeModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlNativeDateTimeModule, providers: [{ provide: OWL_DATE_TIME_FORMATS, useValue: OWL_NATIVE_DATE_TIME_FORMATS }], imports: [NativeDateTimeModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OwlNativeDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OwlNativeDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [NativeDateTimeModule],