nxt-pick-datetime 21.0.0 → 22.0.0

package/fesm2022/nxt-pick-datetime.mjs

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { signal, InjectionToken, inject, ElementRef, NgZone, input, output, computed, Component, linkedSignal, viewChild, Injectable, afterRenderEffect, Directive, Pipe, forwardRef, Renderer2, effect, DOCUMENT, Injector, TemplateRef, ViewContainerRef, NgModule } from '@angular/core';
-import { take, debounceTime, distinctUntilChanged, filter, concatAll } from 'rxjs/operators';
+import { signal, InjectionToken, inject, ElementRef, NgZone, Injector, DestroyRef, input, output, computed, afterNextRender, Component, linkedSignal, viewChild, Injectable, afterRenderEffect, Directive, Pipe, forwardRef, Renderer2, effect, DOCUMENT, TemplateRef, ViewContainerRef } from '@angular/core';
 import { CdkMonitorFocus, CdkTrapFocus, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
 import { Subject, defer, of, merge } from 'rxjs';
 import { coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';
-import { trigger, state, transition, style, animate, group, query, animateChild, keyframes } from '@angular/animations';
+import { debounceTime, distinctUntilChanged, filter, take, concatAll } from 'rxjs/operators';
 import { NoopScrollStrategy, Overlay, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import { Location } from '@angular/common';
@@ -14,7 +13,8 @@ import { outputToObservable } from '@angular/core/rxjs-interop';
 class DateTimeAdapter {
     constructor() {
         /** The locale to use for all dates */
-        this.locale = signal(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+        this.locale = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
         /** total milliseconds in a day */
         this.millisecondsInDay = 86400000;
         /** total milliseconds in a minute */
@@ -121,45 +121,56 @@ class CalendarBodyComponent {
     constructor() {
         this.elmRef = inject(ElementRef);
         this.ngZone = inject(NgZone);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
         /**
          * The cell number of the active cell in the table.
          */
-        this.activeCell = input(0, ...(ngDevMode ? [{ debugName: "activeCell" }] : []));
+        this.activeCell = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
         /**
          * The cells to display in the table.
          */
-        this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : []));
+        this.rows = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rows" }] : /* istanbul ignore next */ []));
         /**
          * The number of columns in the table.
          */
-        this.numCols = input(7, ...(ngDevMode ? [{ debugName: "numCols" }] : []));
+        this.numCols = input(7, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numCols" }] : /* istanbul ignore next */ []));
         /**
          * The ratio (width / height) to use for the cells in the table.
          */
-        this.cellRatio = input(1, ...(ngDevMode ? [{ debugName: "cellRatio" }] : []));
+        this.cellRatio = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellRatio" }] : /* istanbul ignore next */ []));
         /**
          * The value in the table that corresponds to today.
          */
-        this.todayValue = input(...(ngDevMode ? [undefined, { debugName: "todayValue" }] : []));
+        this.todayValue = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "todayValue" }] : /* istanbul ignore next */ []));
         /**
          * The value in the table that is currently selected.
          */
-        this.selectedValues = input(...(ngDevMode ? [undefined, { debugName: "selectedValues" }] : []));
+        this.selectedValues = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectedValues" }] : /* istanbul ignore next */ []));
         /**
          * Current picker select mode
          */
-        this.selectMode = input(...(ngDevMode ? [undefined, { debugName: "selectMode" }] : []));
+        this.selectMode = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectMode" }] : /* istanbul ignore next */ []));
         /**
          * Emit when a calendar cell is selected
          */
         this.select = output();
-        this.isInSingleMode = computed(() => this.selectMode() === 'single', ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : []));
+        this.isInSingleMode = computed(() => this.selectMode() === 'single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : /* istanbul ignore next */ []));
         this.isInRangeMode = computed(() => {
             const selectMode = this.selectMode();
             return (selectMode === 'range' ||
                 selectMode === 'rangeFrom' ||
                 selectMode === 'rangeTo');
-        }, ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : /* istanbul ignore next */ []));
     }
     selectCell(cell) {
         this.select.emit(cell);
@@ -227,21 +238,21 @@ class CalendarBodyComponent {
      * Focus to a active cell
      */
     focusActiveCell() {
-        this.ngZone.runOutsideAngular(() => {
-            this.ngZone.onStable
-                .asObservable()
-                .pipe(take(1))
-                .subscribe(() => {
-                this.elmRef.nativeElement
-                    ?.querySelector('.nxt-dt-calendar-cell-active')
-                    ?.focus();
+        if (!this.destroyRef.destroyed)
+            afterNextRender(() => {
+                this.ngZone.runOutsideAngular(() => {
+                    this.elmRef.nativeElement
+                        ?.querySelector('.nxt-dt-calendar-cell-active')
+                        ?.focus();
+                });
+            }, {
+                injector: this.injector
             });
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarBodyComponent, isStandalone: true, selector: "[nxtDateTimeCalendarBody]", 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.nxt-dt-calendar-body": "true" } }, exportAs: ["nxtDateTimeCalendarBody"], ngImport: i0, template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\r\n<tr role=\"row\">\r\n    @for (item of row; track colIndex; let colIndex = $index) {\r\n    <td class=\"nxt-dt-calendar-cell {{item.cellClass}}\"\r\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\r\n        [class.nxt-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\r\n        [class.nxt-dt-calendar-cell-disabled]=\"!item.enabled\"\r\n        [class.nxt-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\r\n        [class.nxt-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\r\n        [class.nxt-dt-calendar-cell-range-from-long]=\"isInRange(item.value + 7)\"\r\n        [class.nxt-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\r\n        [class.nxt-dt-calendar-cell-range-to-long]=\"isInRange(item.value - 7)\"\r\n        [attr.aria-label]=\"item.ariaLabel\"\r\n        [attr.aria-disabled]=\"!item.enabled || null\"\r\n        [style.width.%]=\"100 / numCols()\"\r\n        [style.paddingTop.%]=\"50 * cellRatio() / numCols()\"\r\n        [style.paddingBottom.%]=\"50 * cellRatio() / numCols()\"\r\n        (click)=\"selectCell(item)\">\r\n        <span class=\"nxt-dt-calendar-cell-content\"\r\n            [class]=\"{\r\n                'nxt-dt-calendar-cell-out': item.out,\r\n                'nxt-dt-calendar-cell-today': item.value === todayValue(),\r\n                'nxt-dt-calendar-cell-selected': isSelected(item.value)\r\n              }\">\r\n            {{item.displayValue}}\r\n        </span>\r\n    </td>\r\n    }\r\n</tr>\r\n}\r\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarBodyComponent, isStandalone: true, selector: "[nxtDateTimeCalendarBody]", 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.nxt-dt-calendar-body": "true" } }, exportAs: ["nxtDateTimeCalendarBody"], ngImport: i0, template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\r\n<tr role=\"row\">\r\n    @for (item of row; track colIndex; let colIndex = $index) {\r\n    <td class=\"nxt-dt-calendar-cell {{item.cellClass}}\"\r\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\r\n        [class.nxt-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\r\n        [class.nxt-dt-calendar-cell-disabled]=\"!item.enabled\"\r\n        [class.nxt-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\r\n        [class.nxt-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\r\n        [class.nxt-dt-calendar-cell-range-from-long]=\"isInRange(item.value + 7)\"\r\n        [class.nxt-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\r\n        [class.nxt-dt-calendar-cell-range-to-long]=\"isInRange(item.value - 7)\"\r\n        [attr.aria-label]=\"item.ariaLabel\"\r\n        [attr.aria-disabled]=\"!item.enabled || null\"\r\n        [style.width.%]=\"100 / numCols()\"\r\n        [style.paddingTop.%]=\"50 * cellRatio() / numCols()\"\r\n        [style.paddingBottom.%]=\"50 * cellRatio() / numCols()\"\r\n        (click)=\"selectCell(item)\">\r\n        <span class=\"nxt-dt-calendar-cell-content\"\r\n            [class]=\"{\r\n                'nxt-dt-calendar-cell-out': item.out,\r\n                'nxt-dt-calendar-cell-today': item.value === todayValue(),\r\n                'nxt-dt-calendar-cell-selected': isSelected(item.value)\r\n              }\">\r\n            {{item.displayValue}}\r\n        </span>\r\n    </td>\r\n    }\r\n</tr>\r\n}\r\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: '[nxtDateTimeCalendarBody]', exportAs: 'nxtDateTimeCalendarBody', preserveWhitespaces: false, host: {
                         '[class.nxt-dt-calendar-body]': 'true'
@@ -259,13 +270,14 @@ class MonthViewComponent {
         /**
          * Whether to hide dates in other months at the start or end of the current month
          */
-        this.hideOtherMonths = input(false, ...(ngDevMode ? [{ debugName: "hideOtherMonths" }] : []));
+        this.hideOtherMonths = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideOtherMonths" }] : /* istanbul ignore next */ []));
         this._firstDayOfWeek = 0;
         /**
          * Define the first day of a week
          * Sunday: 0 ~ Saturday: 6
          */
-        this.firstDayOfWeek = input(this._firstDayOfWeek, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : {}), transform: (val) => {
+        this.firstDayOfWeek = input(this._firstDayOfWeek, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: (val) => {
                 if (val >= 0 && val <= 6 && val !== this._firstDayOfWeek) {
                     return this._firstDayOfWeek = val;
                 }
@@ -274,31 +286,33 @@ class MonthViewComponent {
         /**
          * The select mode of the picker;
          */
-        this.selectMode = input('single', ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
+        this.selectMode = input('single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
         /** The currently selected date */
-        this.selected = input(undefined, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: value => {
+        this.selected = input(undefined, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
-        this.selecteds = input([], { ...(ngDevMode ? { debugName: "selecteds" } : {}), transform: values => values.map(v => {
+        this.selecteds = input([], { ...(ngDevMode ? { debugName: "selecteds" } : /* istanbul ignore next */ {}), transform: values => values.map(v => {
                 v = this.dateTimeAdapter.deserialize(v);
                 return this.getValidDate(v);
             }) });
-        this.pickerMoment = input(undefined, { ...(ngDevMode ? { debugName: "pickerMoment" } : {}), transform: value => {
+        this.pickerMoment = input(undefined, { ...(ngDevMode ? { debugName: "pickerMoment" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value) || this.dateTimeAdapter.now();
             } });
         /**
          * A function used to filter which dates are selectable
          */
-        this.dateTimeFilter = input(...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : []));
+        this.dateTimeFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : /* istanbul ignore next */ []));
         /** The minimum selectable date */
-        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : {}), transform: value => {
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
         /** The maximum selectable date */
-        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : {}), transform: value => {
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
@@ -311,7 +325,8 @@ class MonthViewComponent {
             return weekdays
                 .slice(firstDayOfWeek)
                 .concat(weekdays.slice(0, firstDayOfWeek));
-        }, ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
         this._daysData = computed(() => {
             if (!this.pickerMoment()) {
                 return;
@@ -347,13 +362,15 @@ class MonthViewComponent {
                 todayDate,
                 firstRowOffset
             };
-        }, ...(ngDevMode ? [{ debugName: "_daysData" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_daysData" }] : /* istanbul ignore next */ []));
         this.days = computed(() => {
             const days = this._daysData()?.days;
             if (days != undefined)
                 return this._days = days;
             return this._days;
-        }, ...(ngDevMode ? [{ debugName: "days" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []));
         this.activeCell = computed(() => {
             if (this.pickerMoment()) {
                 return (this.dateTimeAdapter.getDate(this.pickerMoment()) +
@@ -361,12 +378,15 @@ class MonthViewComponent {
                     1);
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "activeCell" }] : []));
-        this.isInSingleMode = computed(() => this.selectMode() === 'single', ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
+        this.isInSingleMode = computed(() => this.selectMode() === 'single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : /* istanbul ignore next */ []));
         this.isInRangeMode = computed(() => (this.selectMode() === 'range' ||
             this.selectMode() === 'rangeFrom' ||
-            this.selectMode() === 'rangeTo'), ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : []));
-        this.firstDateOfMonth = linkedSignal({ ...(ngDevMode ? { debugName: "firstDateOfMonth" } : {}), source: () => this.pickerMoment(),
+            this.selectMode() === 'rangeTo'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : /* istanbul ignore next */ []));
+        this.firstDateOfMonth = linkedSignal({ ...(ngDevMode ? { debugName: "firstDateOfMonth" } : /* istanbul ignore next */ {}), source: () => this.pickerMoment(),
             computation: (val) => this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(val), this.dateTimeAdapter.getMonth(val), 1) });
         /**
          * The date of the month that today falls on.
@@ -376,7 +396,8 @@ class MonthViewComponent {
             if (todayDate != undefined)
                 return this._todayDate = todayDate;
             return this._todayDate;
-        }, ...(ngDevMode ? [{ debugName: "todayDate" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "todayDate" }] : /* istanbul ignore next */ []));
         /**
          * An array to hold all selectedDates' value
          * the value is the day number in current month
@@ -406,7 +427,8 @@ class MonthViewComponent {
                 });
             }
             return this._selectedDates = selectedDates;
-        }, ...(ngDevMode ? [{ debugName: "selectedDates" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedDates" }] : /* istanbul ignore next */ []));
         this._firstRowOffset = 0;
         // the index of cell that contains the first date of the month
         this.firstRowOffset = computed(() => {
@@ -414,7 +436,8 @@ class MonthViewComponent {
             if (firstRowOffset != undefined)
                 return this._firstRowOffset = firstRowOffset;
             return this._firstRowOffset;
-        }, ...(ngDevMode ? [{ debugName: "firstRowOffset" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstRowOffset" }] : /* istanbul ignore next */ []));
         /**
          * Callback to invoke when a new date is selected
          */
@@ -426,7 +449,8 @@ class MonthViewComponent {
         /** Emits when any date is activated */
         this.pickerMomentChange = output();
         /** The body of calendar table */
-        this.calendarBodyElm = viewChild(CalendarBodyComponent, ...(ngDevMode ? [{ debugName: "calendarBodyElm" }] : []));
+        this.calendarBodyElm = viewChild(CalendarBodyComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendarBodyElm" }] : /* istanbul ignore next */ []));
     }
     /**
      * Handle a calendarCell selected
@@ -566,10 +590,10 @@ class MonthViewComponent {
     focusActiveCell() {
         this.calendarBodyElm()?.focusActiveCell();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MonthViewComponent, isStandalone: true, selector: "nxt-date-time-month-view", inputs: { hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", 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 }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: true, isRequired: false, transformFunction: null }, pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", 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 } }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.nxt-dt-calendar-view": "true" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: CalendarBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<table class=\"nxt-dt-calendar-table nxt-dt-calendar-month-table\"\r\n    [class.nxt-dt-calendar-only-current-month]=\"hideOtherMonths()\">\r\n    <thead class=\"nxt-dt-calendar-header\">\r\n        <tr class=\"nxt-dt-weekdays\">\r\n            @for (weekday of weekdays(); track weekday.long) {\r\n            <th [attr.aria-label]=\"weekday.long\"\r\n                class=\"nxt-dt-weekday\"\r\n                scope=\"col\">\r\n                <span>{{weekday.short}}</span>\r\n            </th>\r\n            }\r\n        </tr>\r\n        <tr>\r\n            <th class=\"nxt-dt-calendar-table-divider\"\r\n                aria-hidden=\"true\"\r\n                colspan=\"7\"></th>\r\n        </tr>\r\n    </thead>\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n    <tbody nxtDateTimeCalendarBody\r\n        role=\"grid\"\r\n        [rows]=\"days()\"\r\n        [todayValue]=\"todayDate()\"\r\n        [selectedValues]=\"selectedDates()\"\r\n        [selectMode]=\"selectMode()\"\r\n        [activeCell]=\"activeCell() ?? 0\"\r\n        (keydown)=\"handleCalendarKeydown($event)\"\r\n        (select)=\"selectCalendarCell($event)\">\r\n    </tbody>\r\n</table>\r\n", styles: [""], dependencies: [{ kind: "component", type: CalendarBodyComponent, selector: "[nxtDateTimeCalendarBody]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["nxtDateTimeCalendarBody"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MonthViewComponent, isStandalone: true, selector: "nxt-date-time-month-view", inputs: { hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", 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 }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: true, isRequired: false, transformFunction: null }, pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", 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 } }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.nxt-dt-calendar-view": "true" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: CalendarBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<table class=\"nxt-dt-calendar-table nxt-dt-calendar-month-table\"\r\n    [class.nxt-dt-calendar-only-current-month]=\"hideOtherMonths()\">\r\n    <thead class=\"nxt-dt-calendar-header\">\r\n        <tr class=\"nxt-dt-weekdays\">\r\n            @for (weekday of weekdays(); track weekday.long) {\r\n            <th [attr.aria-label]=\"weekday.long\"\r\n                class=\"nxt-dt-weekday\"\r\n                scope=\"col\">\r\n                <span>{{weekday.short}}</span>\r\n            </th>\r\n            }\r\n        </tr>\r\n        <tr>\r\n            <th class=\"nxt-dt-calendar-table-divider\"\r\n                aria-hidden=\"true\"\r\n                colspan=\"7\"></th>\r\n        </tr>\r\n    </thead>\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n    <tbody nxtDateTimeCalendarBody\r\n        role=\"grid\"\r\n        [rows]=\"days()\"\r\n        [todayValue]=\"todayDate()\"\r\n        [selectedValues]=\"selectedDates()\"\r\n        [selectMode]=\"selectMode()\"\r\n        [activeCell]=\"activeCell() ?? 0\"\r\n        (keydown)=\"handleCalendarKeydown($event)\"\r\n        (select)=\"selectCalendarCell($event)\">\r\n    </tbody>\r\n</table>\r\n", styles: [""], dependencies: [{ kind: "component", type: CalendarBodyComponent, selector: "[nxtDateTimeCalendarBody]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["nxtDateTimeCalendarBody"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonthViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxt-date-time-month-view', preserveWhitespaces: false, imports: [
                         CalendarBodyComponent
@@ -581,50 +605,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 class DateTimeIntl {
     constructor() {
         /** A label for the up second button (used by screen readers).  */
-        this.upSecondLabel = signal($localize `:@@nxt-pick-datetime.up-second:Add a second`, ...(ngDevMode ? [{ debugName: "upSecondLabel" }] : []));
+        this.upSecondLabel = signal($localize `:@@nxt-pick-datetime.up-second:Add a second`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "upSecondLabel" }] : /* istanbul ignore next */ []));
         /** A label for the down second button (used by screen readers).  */
-        this.downSecondLabel = signal($localize `:@@nxt-pick-datetime.down-second:Minus a second`, ...(ngDevMode ? [{ debugName: "downSecondLabel" }] : []));
+        this.downSecondLabel = signal($localize `:@@nxt-pick-datetime.down-second:Minus a second`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "downSecondLabel" }] : /* istanbul ignore next */ []));
         /** A label for the up minute button (used by screen readers).  */
-        this.upMinuteLabel = signal($localize `:@@nxt-pick-datetime.up-minute:Add a minute`, ...(ngDevMode ? [{ debugName: "upMinuteLabel" }] : []));
+        this.upMinuteLabel = signal($localize `:@@nxt-pick-datetime.up-minute:Add a minute`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "upMinuteLabel" }] : /* istanbul ignore next */ []));
         /** A label for the down minute button (used by screen readers).  */
-        this.downMinuteLabel = signal($localize `:@@nxt-pick-datetime.down-minute:Minus a minute`, ...(ngDevMode ? [{ debugName: "downMinuteLabel" }] : []));
+        this.downMinuteLabel = signal($localize `:@@nxt-pick-datetime.down-minute:Minus a minute`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "downMinuteLabel" }] : /* istanbul ignore next */ []));
         /** A label for the up hour button (used by screen readers).  */
-        this.upHourLabel = signal($localize `:@@nxt-pick-datetime.up-hour:Add a hour`, ...(ngDevMode ? [{ debugName: "upHourLabel" }] : []));
+        this.upHourLabel = signal($localize `:@@nxt-pick-datetime.up-hour:Add a hour`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "upHourLabel" }] : /* istanbul ignore next */ []));
         /** A label for the down hour button (used by screen readers).  */
-        this.downHourLabel = signal($localize `:@@nxt-pick-datetime.down-hour:Minus a hour`, ...(ngDevMode ? [{ debugName: "downHourLabel" }] : []));
+        this.downHourLabel = signal($localize `:@@nxt-pick-datetime.down-hour:Minus a hour`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "downHourLabel" }] : /* istanbul ignore next */ []));
         /** A label for the previous month button (used by screen readers) */
-        this.prevMonthLabel = signal($localize `:@@nxt-pick-datetime.prev-month:Previous month`, ...(ngDevMode ? [{ debugName: "prevMonthLabel" }] : []));
+        this.prevMonthLabel = signal($localize `:@@nxt-pick-datetime.prev-month:Previous month`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prevMonthLabel" }] : /* istanbul ignore next */ []));
         /** A label for the next month button (used by screen readers) */
-        this.nextMonthLabel = signal($localize `:@@nxt-pick-datetime.next-month:Next month`, ...(ngDevMode ? [{ debugName: "nextMonthLabel" }] : []));
+        this.nextMonthLabel = signal($localize `:@@nxt-pick-datetime.next-month:Next month`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []));
         /** A label for the previous year button (used by screen readers) */
-        this.prevYearLabel = signal($localize `:@@nxt-pick-datetime.prev-year:Previous year`, ...(ngDevMode ? [{ debugName: "prevYearLabel" }] : []));
+        this.prevYearLabel = signal($localize `:@@nxt-pick-datetime.prev-year:Previous year`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prevYearLabel" }] : /* istanbul ignore next */ []));
         /** A label for the next year button (used by screen readers) */
-        this.nextYearLabel = signal($localize `:@@nxt-pick-datetime.next-year:Next year`, ...(ngDevMode ? [{ debugName: "nextYearLabel" }] : []));
+        this.nextYearLabel = signal($localize `:@@nxt-pick-datetime.next-year:Next year`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextYearLabel" }] : /* istanbul ignore next */ []));
         /** A label for the previous multi-year button (used by screen readers) */
-        this.prevMultiYearLabel = signal($localize `:@@nxt-pick-datetime.prev-multi-year:Previous 21 years`, ...(ngDevMode ? [{ debugName: "prevMultiYearLabel" }] : []));
+        this.prevMultiYearLabel = signal($localize `:@@nxt-pick-datetime.prev-multi-year:Previous 21 years`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prevMultiYearLabel" }] : /* istanbul ignore next */ []));
         /** A label for the next multi-year button (used by screen readers) */
-        this.nextMultiYearLabel = signal($localize `:@@nxt-pick-datetime.next-multi-year:Next 21 years`, ...(ngDevMode ? [{ debugName: "nextMultiYearLabel" }] : []));
+        this.nextMultiYearLabel = signal($localize `:@@nxt-pick-datetime.next-multi-year:Next 21 years`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextMultiYearLabel" }] : /* istanbul ignore next */ []));
         /** A label for the 'switch to month view' button (used by screen readers) */
-        this.switchToMonthViewLabel = signal($localize `:@@nxt-pick-datetime.switch-to-month:Change to month view`, ...(ngDevMode ? [{ debugName: "switchToMonthViewLabel" }] : []));
+        this.switchToMonthViewLabel = signal($localize `:@@nxt-pick-datetime.switch-to-month:Change to month view`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "switchToMonthViewLabel" }] : /* istanbul ignore next */ []));
         /** A label for the 'switch to year view' button (used by screen readers) */
-        this.switchToMultiYearViewLabel = signal($localize `:@@nxt-pick-datetime.switch-to-year-month:Choose month and year`, ...(ngDevMode ? [{ debugName: "switchToMultiYearViewLabel" }] : []));
+        this.switchToMultiYearViewLabel = signal($localize `:@@nxt-pick-datetime.switch-to-year-month:Choose month and year`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "switchToMultiYearViewLabel" }] : /* istanbul ignore next */ []));
         /** A label for the cancel button */
-        this.cancelBtnLabel = signal($localize `:@@nxt-pick-datetime.cancel:Cancel`, ...(ngDevMode ? [{ debugName: "cancelBtnLabel" }] : []));
+        this.cancelBtnLabel = signal($localize `:@@nxt-pick-datetime.cancel:Cancel`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cancelBtnLabel" }] : /* istanbul ignore next */ []));
         /** A label for the set button */
-        this.setBtnLabel = signal($localize `:@@nxt-pick-datetime.set:Set`, ...(ngDevMode ? [{ debugName: "setBtnLabel" }] : []));
+        this.setBtnLabel = signal($localize `:@@nxt-pick-datetime.set:Set`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "setBtnLabel" }] : /* istanbul ignore next */ []));
         /** A label for the range 'from' in picker info */
-        this.rangeFromLabel = signal($localize `:@@nxt-pick-datetime.from:From`, ...(ngDevMode ? [{ debugName: "rangeFromLabel" }] : []));
+        this.rangeFromLabel = signal($localize `:@@nxt-pick-datetime.from:From`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangeFromLabel" }] : /* istanbul ignore next */ []));
         /** A label for the range 'to' in picker info */
-        this.rangeToLabel = signal($localize `:@@nxt-pick-datetime.to:To`, ...(ngDevMode ? [{ debugName: "rangeToLabel" }] : []));
+        this.rangeToLabel = signal($localize `:@@nxt-pick-datetime.to:To`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangeToLabel" }] : /* istanbul ignore next */ []));
         /** A label for the hour12 button (AM) */
-        this.hour12AMLabel = signal($localize `:@@nxt-pick-datetime.time-am:AM`, ...(ngDevMode ? [{ debugName: "hour12AMLabel" }] : []));
+        this.hour12AMLabel = signal($localize `:@@nxt-pick-datetime.time-am:AM`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hour12AMLabel" }] : /* istanbul ignore next */ []));
         /** A label for the hour12 button (PM) */
-        this.hour12PMLabel = signal($localize `:@@nxt-pick-datetime.time-pm:PM`, ...(ngDevMode ? [{ debugName: "hour12PMLabel" }] : []));
+        this.hour12PMLabel = signal($localize `:@@nxt-pick-datetime.time-pm:PM`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hour12PMLabel" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeIntl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeIntl, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -642,36 +686,39 @@ class MultiYearViewComponent {
         /**
          * The select mode of the picker;
          */
-        this.selectMode = input('single', ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
+        this.selectMode = input('single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
         /** The currently selected date */
-        this.selected = input(undefined, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: value => {
+        this.selected = input(undefined, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
-        this.selecteds = input([], { ...(ngDevMode ? { debugName: "selecteds" } : {}), transform: values => values.map(v => {
+        this.selecteds = input([], { ...(ngDevMode ? { debugName: "selecteds" } : /* istanbul ignore next */ {}), transform: values => values.map(v => {
                 v = this.dateTimeAdapter.deserialize(v);
                 return this.getValidDate(v);
             }) });
         /** Settable signal for pickerMoment */
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._pickerMomentInput = input(undefined, { ...(ngDevMode ? { debugName: "_pickerMomentInput" } : {}), alias: 'pickerMoment' });
-        this._pickerMoment = linkedSignal({ ...(ngDevMode ? { debugName: "_pickerMoment" } : {}), source: () => this._pickerMomentInput(),
+        this._pickerMomentInput = input(undefined, { ...(ngDevMode ? { debugName: "_pickerMomentInput" } : /* istanbul ignore next */ {}), alias: 'pickerMoment' });
+        this._pickerMoment = linkedSignal({ ...(ngDevMode ? { debugName: "_pickerMoment" } : /* istanbul ignore next */ {}), source: () => this._pickerMomentInput(),
             computation: v => v });
         this.pickerMoment = computed(() => {
             const value = this.dateTimeAdapter.deserialize(this._pickerMoment());
             return this.getValidDate(value) || this.dateTimeAdapter.now();
-        }, ...(ngDevMode ? [{ debugName: "pickerMoment" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerMoment" }] : /* istanbul ignore next */ []));
         /**
          * A function used to filter which dates are selectable
          */
-        this.dateTimeFilter = input(...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : []));
+        this.dateTimeFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : /* istanbul ignore next */ []));
         /** The minimum selectable date */
-        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : {}), transform: value => {
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
         /** The maximum selectable date */
-        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : {}), transform: value => {
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
@@ -693,13 +740,18 @@ class MultiYearViewComponent {
                 years,
                 todayYear
             };
-        }, ...(ngDevMode ? [{ debugName: "yearsData" }] : []));
-        this.years = computed(() => this.yearsData().years, ...(ngDevMode ? [{ debugName: "years" }] : []));
-        this.todayYear = computed(() => this.yearsData().todayYear, ...(ngDevMode ? [{ debugName: "todayYear" }] : []));
-        this.isInSingleMode = computed(() => this.selectMode() === 'single', ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "yearsData" }] : /* istanbul ignore next */ []));
+        this.years = computed(() => this.yearsData().years, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
+        this.todayYear = computed(() => this.yearsData().todayYear, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "todayYear" }] : /* istanbul ignore next */ []));
+        this.isInSingleMode = computed(() => this.selectMode() === 'single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : /* istanbul ignore next */ []));
         this.isInRangeMode = computed(() => (this.selectMode() === 'range' ||
             this.selectMode() === 'rangeFrom' ||
-            this.selectMode() === 'rangeTo'), ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : []));
+            this.selectMode() === 'rangeTo'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : /* istanbul ignore next */ []));
         this.selectedYears = computed(() => {
             let selectedYears = new Array();
             if (this.isInSingleMode() && this.selected()) {
@@ -714,20 +766,23 @@ class MultiYearViewComponent {
                 });
             }
             return selectedYears;
-        }, ...(ngDevMode ? [{ debugName: "selectedYears" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedYears" }] : /* istanbul ignore next */ []));
         this.activeCell = computed(() => {
             if (this.pickerMoment()) {
                 return this.dateTimeAdapter.getYear(this.pickerMoment()) % (YEARS_PER_ROW * YEAR_ROWS);
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "activeCell" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
         this.tableHeader = computed(() => {
             const years = this.years();
             if (years && years.length > 0) {
                 return `${years[0][0].displayValue} ~ ${years[YEAR_ROWS - 1][YEARS_PER_ROW - 1].displayValue}`;
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "tableHeader" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableHeader" }] : /* istanbul ignore next */ []));
         this.prevButtonLabel = this.pickerIntl.prevMultiYearLabel.asReadonly();
         this.nextButtonLabel = this.pickerIntl.nextMultiYearLabel.asReadonly();
         /**
@@ -745,7 +800,8 @@ class MultiYearViewComponent {
         /** Emits when use keyboard enter to select a calendar cell */
         this.keyboardEnter = output();
         /** The body of calendar table */
-        this.calendarBodyElm = viewChild(CalendarBodyComponent, ...(ngDevMode ? [{ debugName: "calendarBodyElm" }] : []));
+        this.calendarBodyElm = viewChild(CalendarBodyComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendarBodyElm" }] : /* istanbul ignore next */ []));
     }
     /**
      * Handle a calendarCell selected
@@ -878,10 +934,10 @@ class MultiYearViewComponent {
     focusActiveCell() {
         this.calendarBodyElm()?.focusActiveCell();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: MultiYearViewComponent, isStandalone: true, selector: "nxt-date-time-multi-year-view", inputs: { selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: true, isRequired: false, transformFunction: null }, _pickerMomentInput: { classPropertyName: "_pickerMomentInput", publicName: "pickerMoment", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", 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 } }, outputs: { change: "change", yearSelected: "yearSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.nxt-dt-calendar-view": "true", "class.nxt-dt-calendar-multi-year-view": "true" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: CalendarBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n    [disabled]=\"!previousEnabled()\"\r\n    [attr.aria-label]=\"prevButtonLabel()\"\r\n    type=\"button\"\r\n    tabindex=\"0\"\r\n    (click)=\"prevYearList($event)\">\r\n    <span class=\"nxt-dt-control-button-content\"\r\n        tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            version=\"1.1\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 250.738 250.738\"\r\n            style=\"enable-background:new 0 0 250.738 250.738;\"\r\n            xml:space=\"preserve\"\r\n            width=\"100%\"\r\n            height=\"100%\">\r\n            <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\r\n                d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n<table class=\"nxt-dt-calendar-table nxt-dt-calendar-multi-year-table\">\r\n    <thead class=\"nxt-dt-calendar-header\">\r\n        <tr>\r\n            <th colspan=\"3\">{{tableHeader()}}</th>\r\n        </tr>\r\n    </thead>\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n    <tbody nxtDateTimeCalendarBody\r\n        role=\"grid\"\r\n        [rows]=\"years()\"\r\n        [numCols]=\"3\"\r\n        [cellRatio]=\"3 / 7\"\r\n        [activeCell]=\"activeCell() ?? 0\"\r\n        [todayValue]=\"todayYear()\"\r\n        [selectedValues]=\"selectedYears()\"\r\n        [selectMode]=\"selectMode()\"\r\n        (keydown)=\"handleCalendarKeydown($event)\"\r\n        (select)=\"selectCalendarCell($event)\"></tbody>\r\n</table>\r\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n    [disabled]=\"!nextEnabled()\"\r\n    [attr.aria-label]=\"nextButtonLabel()\"\r\n    type=\"button\"\r\n    tabindex=\"0\"\r\n    (click)=\"nextYearList($event)\">\r\n    <span class=\"nxt-dt-control-button-content\"\r\n        tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\r\n        <svg version=\"1.1\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 250.738 250.738\"\r\n            style=\"enable-background:new 0 0 250.738 250.738;\"\r\n            xml:space=\"preserve\">\r\n            <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\r\n                d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\r\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\r\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\r\n                C197.237,120.447,195.534,115.448,191.75,111.689z\" />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "component", type: CalendarBodyComponent, selector: "[nxtDateTimeCalendarBody]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["nxtDateTimeCalendarBody"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: MultiYearViewComponent, isStandalone: true, selector: "nxt-date-time-multi-year-view", inputs: { selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: true, isRequired: false, transformFunction: null }, _pickerMomentInput: { classPropertyName: "_pickerMomentInput", publicName: "pickerMoment", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", 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 } }, outputs: { change: "change", yearSelected: "yearSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.nxt-dt-calendar-view": "true", "class.nxt-dt-calendar-multi-year-view": "true" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: CalendarBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n    [disabled]=\"!previousEnabled()\"\r\n    [attr.aria-label]=\"prevButtonLabel()\"\r\n    type=\"button\"\r\n    tabindex=\"0\"\r\n    (click)=\"prevYearList($event)\">\r\n    <span class=\"nxt-dt-control-button-content\"\r\n        tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            version=\"1.1\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 250.738 250.738\"\r\n            style=\"enable-background:new 0 0 250.738 250.738;\"\r\n            xml:space=\"preserve\"\r\n            width=\"100%\"\r\n            height=\"100%\">\r\n            <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\r\n                d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n<table class=\"nxt-dt-calendar-table nxt-dt-calendar-multi-year-table\">\r\n    <thead class=\"nxt-dt-calendar-header\">\r\n        <tr>\r\n            <th colspan=\"3\">{{tableHeader()}}</th>\r\n        </tr>\r\n    </thead>\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n    <tbody nxtDateTimeCalendarBody\r\n        role=\"grid\"\r\n        [rows]=\"years()\"\r\n        [numCols]=\"3\"\r\n        [cellRatio]=\"3 / 7\"\r\n        [activeCell]=\"activeCell() ?? 0\"\r\n        [todayValue]=\"todayYear()\"\r\n        [selectedValues]=\"selectedYears()\"\r\n        [selectMode]=\"selectMode()\"\r\n        (keydown)=\"handleCalendarKeydown($event)\"\r\n        (select)=\"selectCalendarCell($event)\"></tbody>\r\n</table>\r\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n    [disabled]=\"!nextEnabled()\"\r\n    [attr.aria-label]=\"nextButtonLabel()\"\r\n    type=\"button\"\r\n    tabindex=\"0\"\r\n    (click)=\"nextYearList($event)\">\r\n    <span class=\"nxt-dt-control-button-content\"\r\n        tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\r\n        <svg version=\"1.1\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 250.738 250.738\"\r\n            style=\"enable-background:new 0 0 250.738 250.738;\"\r\n            xml:space=\"preserve\">\r\n            <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\r\n                d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\r\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\r\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\r\n                C197.237,120.447,195.534,115.448,191.75,111.689z\" />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "component", type: CalendarBodyComponent, selector: "[nxtDateTimeCalendarBody]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["nxtDateTimeCalendarBody"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiYearViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxt-date-time-multi-year-view', preserveWhitespaces: false, imports: [
                         CalendarBodyComponent
@@ -902,31 +958,33 @@ class YearViewComponent {
         /**
          * The select mode of the picker;
          */
-        this.selectMode = input('single', ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
+        this.selectMode = input('single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
         /** The currently selected date */
-        this.selected = input(undefined, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: value => {
+        this.selected = input(undefined, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
-        this.selecteds = input([], { ...(ngDevMode ? { debugName: "selecteds" } : {}), transform: values => values.map(v => {
+        this.selecteds = input([], { ...(ngDevMode ? { debugName: "selecteds" } : /* istanbul ignore next */ {}), transform: values => values.map(v => {
                 v = this.dateTimeAdapter.deserialize(v);
                 return this.getValidDate(v);
             }) });
-        this.pickerMoment = input(undefined, { ...(ngDevMode ? { debugName: "pickerMoment" } : {}), transform: value => {
+        this.pickerMoment = input(undefined, { ...(ngDevMode ? { debugName: "pickerMoment" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value) || this.dateTimeAdapter.now();
             } });
         /**
          * A function used to filter which dates are selectable
          */
-        this.dateTimeFilter = input(...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : []));
+        this.dateTimeFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : /* istanbul ignore next */ []));
         /** The minimum selectable date */
-        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : {}), transform: value => {
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
         /** The maximum selectable date */
-        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : {}), transform: value => {
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
@@ -950,29 +1008,35 @@ class YearViewComponent {
                 months,
                 todayMonth
             };
-        }, ...(ngDevMode ? [{ debugName: "monthsData" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthsData" }] : /* istanbul ignore next */ []));
         this.months = computed(() => {
             const months = this.monthsData()?.months;
             if (months != undefined)
                 return this._months = months;
             return this._months;
-        }, ...(ngDevMode ? [{ debugName: "months" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
         this.activeCell = computed(() => {
             if (this.pickerMoment()) {
                 return this.dateTimeAdapter.getMonth(this.pickerMoment());
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "activeCell" }] : []));
-        this.isInSingleMode = computed(() => this.selectMode() === 'single', ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
+        this.isInSingleMode = computed(() => this.selectMode() === 'single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : /* istanbul ignore next */ []));
         this.isInRangeMode = computed(() => (this.selectMode() === 'range' ||
             this.selectMode() === 'rangeFrom' ||
-            this.selectMode() === 'rangeTo'), ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : []));
+            this.selectMode() === 'rangeTo'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : /* istanbul ignore next */ []));
         this.todayMonth = computed(() => {
             const todayMonth = this.monthsData()?.todayMonth;
             if (todayMonth != undefined)
                 return this._todayMonth = todayMonth;
             return this._todayMonth;
-        }, ...(ngDevMode ? [{ debugName: "todayMonth" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "todayMonth" }] : /* istanbul ignore next */ []));
         /**
          * An array to hold all selectedDates' month value
          * the value is the month number in current year
@@ -992,7 +1056,8 @@ class YearViewComponent {
                 selectedMonths[1] = this.getMonthInCurrentYear(this.selecteds()[1]);
             }
             return selectedMonths;
-        }, ...(ngDevMode ? [{ debugName: "selectedMonths" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedMonths" }] : /* istanbul ignore next */ []));
         /**
          * Callback to invoke when a new month is selected
          */
@@ -1008,7 +1073,8 @@ class YearViewComponent {
         /** Emits when use keyboard enter to select a calendar cell */
         this.keyboardEnter = output();
         /** The body of calendar table */
-        this.calendarBodyElm = viewChild(CalendarBodyComponent, ...(ngDevMode ? [{ debugName: "calendarBodyElm" }] : []));
+        this.calendarBodyElm = viewChild(CalendarBodyComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendarBodyElm" }] : /* istanbul ignore next */ []));
     }
     /**
      * Handle a calendarCell selected
@@ -1154,10 +1220,10 @@ class YearViewComponent {
     focusActiveCell() {
         this.calendarBodyElm()?.focusActiveCell();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: YearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: YearViewComponent, isStandalone: true, selector: "nxt-date-time-year-view", inputs: { selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: true, isRequired: false, transformFunction: null }, pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", 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 } }, outputs: { change: "change", monthSelected: "monthSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.nxt-dt-calendar-view": "true" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: CalendarBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<table class=\"nxt-dt-calendar-table nxt-dt-calendar-year-table\">\r\n    <thead class=\"nxt-dt-calendar-header\">\r\n        <tr>\r\n            <th class=\"nxt-dt-calendar-table-divider\"\r\n                aria-hidden=\"true\"\r\n                colspan=\"3\"></th>\r\n        </tr>\r\n    </thead>\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n    <tbody nxtDateTimeCalendarBody\r\n        role=\"grid\"\r\n        [rows]=\"months()\"\r\n        [numCols]=\"3\"\r\n        [cellRatio]=\"3 / 7\"\r\n        [activeCell]=\"activeCell() ?? 0\"\r\n        [todayValue]=\"todayMonth()\"\r\n        [selectedValues]=\"selectedMonths()\"\r\n        [selectMode]=\"selectMode()\"\r\n        (keydown)=\"handleCalendarKeydown($event)\"\r\n        (select)=\"selectCalendarCell($event)\">\r\n    </tbody>\r\n</table>\r\n", styles: [""], dependencies: [{ kind: "component", type: CalendarBodyComponent, selector: "[nxtDateTimeCalendarBody]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["nxtDateTimeCalendarBody"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: YearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: YearViewComponent, isStandalone: true, selector: "nxt-date-time-year-view", inputs: { selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: true, isRequired: false, transformFunction: null }, pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", 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 } }, outputs: { change: "change", monthSelected: "monthSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.nxt-dt-calendar-view": "true" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: CalendarBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<table class=\"nxt-dt-calendar-table nxt-dt-calendar-year-table\">\r\n    <thead class=\"nxt-dt-calendar-header\">\r\n        <tr>\r\n            <th class=\"nxt-dt-calendar-table-divider\"\r\n                aria-hidden=\"true\"\r\n                colspan=\"3\"></th>\r\n        </tr>\r\n    </thead>\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n    <tbody nxtDateTimeCalendarBody\r\n        role=\"grid\"\r\n        [rows]=\"months()\"\r\n        [numCols]=\"3\"\r\n        [cellRatio]=\"3 / 7\"\r\n        [activeCell]=\"activeCell() ?? 0\"\r\n        [todayValue]=\"todayMonth()\"\r\n        [selectedValues]=\"selectedMonths()\"\r\n        [selectMode]=\"selectMode()\"\r\n        (keydown)=\"handleCalendarKeydown($event)\"\r\n        (select)=\"selectCalendarCell($event)\">\r\n    </tbody>\r\n</table>\r\n", styles: [""], dependencies: [{ kind: "component", type: CalendarBodyComponent, selector: "[nxtDateTimeCalendarBody]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["nxtDateTimeCalendarBody"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: YearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: YearViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxt-date-time-year-view', preserveWhitespaces: false, imports: [
                         CalendarBodyComponent
@@ -1171,18 +1237,22 @@ class CalendarComponent {
         this.elmRef = inject(ElementRef);
         this.pickerIntl = inject(DateTimeIntl);
         this.ngZone = inject(NgZone);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
         this.dateTimeAdapter = inject(DateTimeAdapter);
         this.dateTimeFormats = inject(NXT_DATE_TIME_FORMATS);
         /**
          * Date filter for the month and year view
          */
-        this.dateTimeFilter = input(...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : []));
+        this.dateTimeFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : /* istanbul ignore next */ []));
         /**
          * Set the first day of week
          */
-        this.firstDayOfWeek = input(0, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
+        this.firstDayOfWeek = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
         /** The minimum selectable date */
-        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : {}), transform: (value) => {
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (value) => {
                 value = this.dateTimeAdapter.deserialize(value);
                 value = this.getValidDate(value);
                 return value
@@ -1190,7 +1260,7 @@ class CalendarComponent {
                     : undefined;
             } });
         /** The maximum selectable date */
-        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : {}), transform: (value) => {
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (value) => {
                 value = this.dateTimeAdapter.deserialize(value);
                 value = this.getValidDate(value);
                 return value
@@ -1199,32 +1269,36 @@ class CalendarComponent {
             } });
         /** The current picker moment */
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._pickerMomentInput = input(undefined, { ...(ngDevMode ? { debugName: "_pickerMomentInput" } : {}), alias: 'pickerMoment' });
+        this._pickerMomentInput = input(undefined, { ...(ngDevMode ? { debugName: "_pickerMomentInput" } : /* istanbul ignore next */ {}), alias: 'pickerMoment' });
         /** Settable signal for pickerMoment */
-        this._pickerMoment = linkedSignal({ ...(ngDevMode ? { debugName: "_pickerMoment" } : {}), source: () => this._pickerMomentInput(),
+        this._pickerMoment = linkedSignal({ ...(ngDevMode ? { debugName: "_pickerMoment" } : /* istanbul ignore next */ {}), source: () => this._pickerMomentInput(),
             computation: v => v });
         this.pickerMoment = computed(() => {
             const value = this.dateTimeAdapter.deserialize(this._pickerMoment());
             return this.getValidDate(value) || this.dateTimeAdapter.now();
-        }, ...(ngDevMode ? [{ debugName: "pickerMoment" }] : []));
-        this.selectMode = input(...(ngDevMode ? [undefined, { debugName: "selectMode" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerMoment" }] : /* istanbul ignore next */ []));
+        this.selectMode = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectMode" }] : /* istanbul ignore next */ []));
         /** The currently selected moment */
-        this.selected = input(undefined, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: (value) => {
+        this.selected = input(undefined, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: (value) => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
-        this.selecteds = input([], { ...(ngDevMode ? { debugName: "selecteds" } : {}), transform: (values) => values.map(v => {
+        this.selecteds = input([], { ...(ngDevMode ? { debugName: "selecteds" } : /* istanbul ignore next */ {}), transform: (values) => values.map(v => {
                 v = this.dateTimeAdapter.deserialize(v);
                 return this.getValidDate(v);
             }) });
         /**
          * The view that the calendar should start in
          */
-        this.startView = input('month', ...(ngDevMode ? [{ debugName: "startView" }] : []));
+        this.startView = input('month', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
         /**
          * Whether to hide dates in other months at the start or end of the current month
          */
-        this.hideOtherMonths = input(false, ...(ngDevMode ? [{ debugName: "hideOtherMonths" }] : []));
+        this.hideOtherMonths = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideOtherMonths" }] : /* istanbul ignore next */ []));
         /** Emits when the currently picker moment changes */
         this.pickerMomentChange = output();
         /** Emits when the currently selected date changes */
@@ -1245,10 +1319,12 @@ class CalendarComponent {
         this.monthSelected = output();
         this.periodButtonText = computed(() => this.isMonthView()
             ? this.dateTimeAdapter.format(this.pickerMoment(), this.dateTimeFormats.monthYearLabel)
-            : this.dateTimeAdapter.getYearName(this.pickerMoment()), ...(ngDevMode ? [{ debugName: "periodButtonText" }] : []));
+            : this.dateTimeAdapter.getYearName(this.pickerMoment()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "periodButtonText" }] : /* istanbul ignore next */ []));
         this.periodButtonLabel = computed(() => this.isMonthView()
             ? this.pickerIntl.switchToMultiYearViewLabel()
-            : this.pickerIntl.switchToMonthViewLabel(), ...(ngDevMode ? [{ debugName: "periodButtonLabel" }] : []));
+            : this.pickerIntl.switchToMonthViewLabel(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "periodButtonLabel" }] : /* istanbul ignore next */ []));
         this.prevButtonLabel = computed(() => {
             const currentView = this.currentView();
             if (currentView === 'month') {
@@ -1258,7 +1334,8 @@ class CalendarComponent {
                 return this.pickerIntl.prevYearLabel();
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "prevButtonLabel" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prevButtonLabel" }] : /* istanbul ignore next */ []));
         this.nextButtonLabel = computed(() => {
             const currentView = this.currentView();
             if (currentView === 'month') {
@@ -1268,18 +1345,23 @@ class CalendarComponent {
                 return this.pickerIntl.nextYearLabel();
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "nextButtonLabel" }] : []));
-        this.currentView = linkedSignal({ ...(ngDevMode ? { debugName: "currentView" } : {}), source: () => this.startView(),
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextButtonLabel" }] : /* istanbul ignore next */ []));
+        this.currentView = linkedSignal({ ...(ngDevMode ? { debugName: "currentView" } : /* istanbul ignore next */ {}), source: () => this.startView(),
             computation: v => v });
-        this.isInSingleMode = computed(() => this.selectMode() === 'single', ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : []));
+        this.isInSingleMode = computed(() => this.selectMode() === 'single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : /* istanbul ignore next */ []));
         this.isInRangeMode = computed(() => {
             const selectMode = this.selectMode();
             return (selectMode === 'range' ||
                 selectMode === 'rangeFrom' ||
                 selectMode === 'rangeTo');
-        }, ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : []));
-        this.showControlArrows = computed(() => this.currentView() !== 'multi-years', ...(ngDevMode ? [{ debugName: "showControlArrows" }] : []));
-        this.isMonthView = computed(() => this.currentView() === 'month', ...(ngDevMode ? [{ debugName: "isMonthView" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : /* istanbul ignore next */ []));
+        this.showControlArrows = computed(() => this.currentView() !== 'multi-years', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showControlArrows" }] : /* istanbul ignore next */ []));
+        this.isMonthView = computed(() => this.currentView() === 'month', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMonthView" }] : /* istanbul ignore next */ []));
         /**
          * Date filter for the month and year view
          */
@@ -1294,12 +1376,11 @@ class CalendarComponent {
         };
         afterRenderEffect(() => {
             this.currentView();
-            this.focusActiveCell();
-            /*this.ngZone.runOutsideAngular(() => {
+            this.ngZone.runOutsideAngular(() => {
                 this.elmRef.nativeElement
-                    ?.querySelector<HTMLElement>('.nxt-dt-calendar-cell-active')
-                    ?.focus()
-            })*/
+                    ?.querySelector('.nxt-dt-calendar-cell-active')
+                    ?.focus();
+            });
         });
     }
     /**
@@ -1373,16 +1454,14 @@ class CalendarComponent {
      * Focus to the host element
      */
     focusActiveCell() {
-        this.ngZone.runOutsideAngular(() => {
-            this.ngZone.onStable
-                .asObservable()
-                .pipe(take(1))
-                .subscribe(() => {
-                this.elmRef.nativeElement
-                    ?.querySelector('.nxt-dt-calendar-cell-active')
-                    ?.focus();
-            });
-        });
+        if (!this.destroyRef.destroyed)
+            afterNextRender(() => {
+                this.ngZone.runOutsideAngular(() => {
+                    this.elmRef.nativeElement
+                        ?.querySelector('.nxt-dt-calendar-cell-active')
+                        ?.focus();
+                });
+            }, { injector: this.injector });
     }
     selectYearInMultiYearView(normalizedYear) {
         this.yearSelected.emit(normalizedYear);
@@ -1421,10 +1500,10 @@ class CalendarComponent {
             ? obj
             : undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CalendarComponent, isStandalone: true, selector: "nxt-date-time-calendar", inputs: { dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", 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 }, _pickerMomentInput: { classPropertyName: "_pickerMomentInput", publicName: "pickerMoment", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pickerMomentChange: "pickerMomentChange", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.nxt-dt-calendar": "true" } }, ngImport: i0, template: "<div class=\"nxt-dt-calendar-control\">\r\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\r\n    <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows()? 'visible': 'hidden'\"\r\n        [disabled]=\"!prevButtonEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel()\"\r\n        (click)=\"previousClicked()\">\r\n        <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\r\n            tabindex=\"-1\">\r\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                version=\"1.1\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background:new 0 0 250.738 250.738;\"\r\n                xml:space=\"preserve\"\r\n                width=\"100%\"\r\n                height=\"100%\">\r\n                <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\r\n                    d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n    <div class=\"nxt-dt-calendar-control-content\">\r\n        <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-period-button\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.aria-label]=\"periodButtonLabel()\"\r\n            (click)=\"toggleViews()\">\r\n            <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\r\n                tabindex=\"-1\">\r\n                {{periodButtonText()}}\r\n\r\n                <span class=\"nxt-dt-control-button-arrow\"\r\n                    [style.transform]=\"'rotate(' + (isMonthView()? 0 : 180) +'deg)'\">\r\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\r\n                    <svg version=\"1.1\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                        x=\"0px\"\r\n                        y=\"0px\"\r\n                        width=\"50%\"\r\n                        height=\"50%\"\r\n                        viewBox=\"0 0 292.362 292.362\"\r\n                        style=\"enable-background:new 0 0 292.362 292.362;\"\r\n                        xml:space=\"preserve\">\r\n                        <g>\r\n                            <path d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\r\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\r\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\" />\r\n                        </g>\r\n                    </svg>\r\n                    <!-- </editor-fold> -->\r\n                </span>\r\n            </span>\r\n        </button>\r\n    </div>\r\n    <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows()? 'visible': 'hidden'\"\r\n        [disabled]=\"!nextButtonEnabled()\"\r\n        [attr.aria-label]=\"nextButtonLabel()\"\r\n        (click)=\"nextClicked()\">\r\n        <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\r\n            tabindex=\"-1\">\r\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\r\n            <svg version=\"1.1\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background:new 0 0 250.738 250.738;\"\r\n                xml:space=\"preserve\">\r\n                <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\r\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\r\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\r\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\r\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\" />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n</div>\r\n<div class=\"nxt-dt-calendar-main\"\r\n    cdkMonitorSubtreeFocus\r\n    tabindex=\"-1\">\r\n    @switch (currentView()) {\r\n    @case ('month') {\r\n    <nxt-date-time-month-view [pickerMoment]=\"pickerMoment()\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n        [selected]=\"selected()\"\r\n        [selecteds]=\"selecteds()\"\r\n        [selectMode]=\"selectMode() ?? 'single'\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [dateTimeFilter]=\"dateTimeFilter()\"\r\n        [hideOtherMonths]=\"hideOtherMonths()\"\r\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n        (selectedChange)=\"dateSelected($event)\"\r\n        (userSelection)=\"userSelected()\" />\r\n    }\r\n    @case ('year') {\r\n    <nxt-date-time-year-view [pickerMoment]=\"pickerMoment()\"\r\n        [selected]=\"selected()\"\r\n        [selecteds]=\"selecteds()\"\r\n        [selectMode]=\"selectMode() ?? 'single'\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [dateTimeFilter]=\"dateTimeFilter()\"\r\n        (keyboardEnter)=\"focusActiveCell()\"\r\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n        (monthSelected)=\"selectMonthInYearView($event)\"\r\n        (change)=\"goToDateInView($event, 'month')\" />\r\n    }\r\n    @case ('multi-years') {\r\n    <nxt-date-time-multi-year-view [pickerMoment]=\"pickerMoment()\"\r\n        [selected]=\"selected()\"\r\n        [selecteds]=\"selecteds()\"\r\n        [selectMode]=\"selectMode() ?? 'single'\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [dateTimeFilter]=\"dateTimeFilter()\"\r\n        (keyboardEnter)=\"focusActiveCell()\"\r\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n        (yearSelected)=\"selectYearInMultiYearView($event)\"\r\n        (change)=\"goToDateInView($event, 'year')\" />\r\n    }\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: MonthViewComponent, selector: "nxt-date-time-month-view", inputs: ["hideOtherMonths", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateTimeFilter", "min", "max"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"] }, { kind: "component", type: YearViewComponent, selector: "nxt-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateTimeFilter", "min", "max"], outputs: ["change", "monthSelected", "pickerMomentChange", "keyboardEnter"] }, { kind: "component", type: MultiYearViewComponent, selector: "nxt-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateTimeFilter", "min", "max"], outputs: ["change", "yearSelected", "pickerMomentChange", "keyboardEnter"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarComponent, isStandalone: true, selector: "nxt-date-time-calendar", inputs: { dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", 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 }, _pickerMomentInput: { classPropertyName: "_pickerMomentInput", publicName: "pickerMoment", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selecteds: { classPropertyName: "selecteds", publicName: "selecteds", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pickerMomentChange: "pickerMomentChange", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.nxt-dt-calendar": "true" } }, ngImport: i0, template: "<div class=\"nxt-dt-calendar-control\">\r\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\r\n    <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows()? 'visible': 'hidden'\"\r\n        [disabled]=\"!prevButtonEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel()\"\r\n        (click)=\"previousClicked()\">\r\n        <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\r\n            tabindex=\"-1\">\r\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                version=\"1.1\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background:new 0 0 250.738 250.738;\"\r\n                xml:space=\"preserve\"\r\n                width=\"100%\"\r\n                height=\"100%\">\r\n                <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\r\n                    d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n    <div class=\"nxt-dt-calendar-control-content\">\r\n        <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-period-button\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.aria-label]=\"periodButtonLabel()\"\r\n            (click)=\"toggleViews()\">\r\n            <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\r\n                tabindex=\"-1\">\r\n                {{periodButtonText()}}\r\n\r\n                <span class=\"nxt-dt-control-button-arrow\"\r\n                    [style.transform]=\"'rotate(' + (isMonthView()? 0 : 180) +'deg)'\">\r\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\r\n                    <svg version=\"1.1\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                        x=\"0px\"\r\n                        y=\"0px\"\r\n                        width=\"50%\"\r\n                        height=\"50%\"\r\n                        viewBox=\"0 0 292.362 292.362\"\r\n                        style=\"enable-background:new 0 0 292.362 292.362;\"\r\n                        xml:space=\"preserve\">\r\n                        <g>\r\n                            <path d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\r\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\r\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\" />\r\n                        </g>\r\n                    </svg>\r\n                    <!-- </editor-fold> -->\r\n                </span>\r\n            </span>\r\n        </button>\r\n    </div>\r\n    <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        [style.visibility]=\"showControlArrows()? 'visible': 'hidden'\"\r\n        [disabled]=\"!nextButtonEnabled()\"\r\n        [attr.aria-label]=\"nextButtonLabel()\"\r\n        (click)=\"nextClicked()\">\r\n        <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\r\n            tabindex=\"-1\">\r\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\r\n            <svg version=\"1.1\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                x=\"0px\"\r\n                y=\"0px\"\r\n                viewBox=\"0 0 250.738 250.738\"\r\n                style=\"enable-background:new 0 0 250.738 250.738;\"\r\n                xml:space=\"preserve\">\r\n                <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\r\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\r\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\r\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\r\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\" />\r\n            </svg>\r\n            <!-- </editor-fold> -->\r\n        </span>\r\n    </button>\r\n</div>\r\n<div class=\"nxt-dt-calendar-main\"\r\n    cdkMonitorSubtreeFocus\r\n    tabindex=\"-1\">\r\n    @switch (currentView()) {\r\n    @case ('month') {\r\n    <nxt-date-time-month-view [pickerMoment]=\"pickerMoment()\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n        [selected]=\"selected()\"\r\n        [selecteds]=\"selecteds()\"\r\n        [selectMode]=\"selectMode() ?? 'single'\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [dateTimeFilter]=\"dateTimeFilter()\"\r\n        [hideOtherMonths]=\"hideOtherMonths()\"\r\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n        (selectedChange)=\"dateSelected($event)\"\r\n        (userSelection)=\"userSelected()\" />\r\n    }\r\n    @case ('year') {\r\n    <nxt-date-time-year-view [pickerMoment]=\"pickerMoment()\"\r\n        [selected]=\"selected()\"\r\n        [selecteds]=\"selecteds()\"\r\n        [selectMode]=\"selectMode() ?? 'single'\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [dateTimeFilter]=\"dateTimeFilter()\"\r\n        (keyboardEnter)=\"focusActiveCell()\"\r\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n        (monthSelected)=\"selectMonthInYearView($event)\"\r\n        (change)=\"goToDateInView($event, 'month')\" />\r\n    }\r\n    @case ('multi-years') {\r\n    <nxt-date-time-multi-year-view [pickerMoment]=\"pickerMoment()\"\r\n        [selected]=\"selected()\"\r\n        [selecteds]=\"selecteds()\"\r\n        [selectMode]=\"selectMode() ?? 'single'\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [dateTimeFilter]=\"dateTimeFilter()\"\r\n        (keyboardEnter)=\"focusActiveCell()\"\r\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\r\n        (yearSelected)=\"selectYearInMultiYearView($event)\"\r\n        (change)=\"goToDateInView($event, 'year')\" />\r\n    }\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: MonthViewComponent, selector: "nxt-date-time-month-view", inputs: ["hideOtherMonths", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateTimeFilter", "min", "max"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"] }, { kind: "component", type: YearViewComponent, selector: "nxt-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateTimeFilter", "min", "max"], outputs: ["change", "monthSelected", "pickerMomentChange", "keyboardEnter"] }, { kind: "component", type: MultiYearViewComponent, selector: "nxt-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateTimeFilter", "min", "max"], outputs: ["change", "yearSelected", "pickerMomentChange", "keyboardEnter"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxt-date-time-calendar', preserveWhitespaces: false, imports: [
                         CdkMonitorFocus,
@@ -1445,50 +1524,60 @@ class DateTimeDirective {
         /**
          * When true, shows a timer to configure the seconds value
          */
-        this.showSecondsTimer = input(false, ...(ngDevMode ? [{ debugName: "showSecondsTimer" }] : []));
+        this.showSecondsTimer = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSecondsTimer" }] : /* istanbul ignore next */ []));
         /**
          * When true, the timer will be in 12-hour format mode
          */
-        this.hour12Timer = input(false, ...(ngDevMode ? [{ debugName: "hour12Timer" }] : []));
+        this.hour12Timer = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hour12Timer" }] : /* istanbul ignore next */ []));
         /**
          * The view that the calendar should start on
          */
-        this.startView = input('month', ...(ngDevMode ? [{ debugName: "startView" }] : []));
+        this.startView = input('month', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
         /**
          * Hours to change per step
          */
-        this.stepHour = input(1, ...(ngDevMode ? [{ debugName: "stepHour" }] : []));
+        this.stepHour = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepHour" }] : /* istanbul ignore next */ []));
         /**
          * Minutes to change per step
          */
-        this.stepMinute = input(1, ...(ngDevMode ? [{ debugName: "stepMinute" }] : []));
+        this.stepMinute = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepMinute" }] : /* istanbul ignore next */ []));
         /**
          * Seconds to change per step
          */
-        this.stepSecond = input(1, ...(ngDevMode ? [{ debugName: "stepSecond" }] : []));
+        this.stepSecond = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepSecond" }] : /* istanbul ignore next */ []));
         /**
          * Set the first day of week
          *
          * Valid values are from 0 [Sunday] to 6 [Saturday]
          */
-        this.firstDayOfWeek = input(0, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
+        this.firstDayOfWeek = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
         /**
          * If true, don't show dates from preious / next month on the calendar month view
          */
-        this.hideOtherMonths = input(false, ...(ngDevMode ? [{ debugName: "hideOtherMonths" }] : []));
+        this.hideOtherMonths = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideOtherMonths" }] : /* istanbul ignore next */ []));
         this.id = `nxt-dt-picker-${nextUniqueId++}`;
         this.formatString = computed(() => this.pickerType() === 'both'
             ? this.dateTimeFormats.fullPickerInput
             : this.pickerType() === 'calendar'
                 ? this.dateTimeFormats.datePickerInput
-                : this.dateTimeFormats.timePickerInput, ...(ngDevMode ? [{ debugName: "formatString" }] : []));
+                : this.dateTimeFormats.timePickerInput, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formatString" }] : /* istanbul ignore next */ []));
         /**
          * Date Time Checker to check if the give dateTime is selectable
          */
         this.dateTimeChecker = signal((dateTime) => (!!dateTime &&
             (!this.dateTimeFilter() || this.dateTimeFilter()(dateTime)) &&
             (!this.min() || this.dateTimeAdapter.compare(dateTime, this.min()) >= 0) &&
-            (!this.max() || this.dateTimeAdapter.compare(dateTime, this.max()) <= 0)), ...(ngDevMode ? [{ debugName: "dateTimeChecker" }] : []));
+            (!this.max() || this.dateTimeAdapter.compare(dateTime, this.max()) <= 0)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateTimeChecker" }] : /* istanbul ignore next */ []));
     }
     getValidDate(obj) {
         return this.dateTimeAdapter.isDateInstance(obj) &&
@@ -1496,10 +1585,10 @@ class DateTimeDirective {
             ? obj
             : undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: DateTimeDirective, isStandalone: true, inputs: { showSecondsTimer: { classPropertyName: "showSecondsTimer", publicName: "showSecondsTimer", isSignal: true, isRequired: false, transformFunction: null }, hour12Timer: { classPropertyName: "hour12Timer", publicName: "hour12Timer", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", 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 }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DateTimeDirective, isStandalone: true, inputs: { showSecondsTimer: { classPropertyName: "showSecondsTimer", publicName: "showSecondsTimer", isSignal: true, isRequired: false, transformFunction: null }, hour12Timer: { classPropertyName: "hour12Timer", publicName: "hour12Timer", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", 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 }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, hideOtherMonths: { classPropertyName: "hideOtherMonths", publicName: "hideOtherMonths", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeDirective, decorators: [{
             type: Directive
         }], propDecorators: { showSecondsTimer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSecondsTimer", required: false }] }], hour12Timer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12Timer", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", 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 }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], hideOtherMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOtherMonths", required: false }] }] } });
 
@@ -1513,10 +1602,10 @@ class NumberFixedLenPipe {
             return number;
         return number.toFixed(0).padStart(Math.floor(len), '0');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NumberFixedLenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: NumberFixedLenPipe, isStandalone: true, name: "numberFixedLen" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumberFixedLenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: NumberFixedLenPipe, isStandalone: true, name: "numberFixedLen" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NumberFixedLenPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumberFixedLenPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'numberFixedLen'
@@ -1526,25 +1615,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 /** @internal */
 class TimerBoxComponent {
     constructor() {
-        this.showDivider = input(false, ...(ngDevMode ? [{ debugName: "showDivider" }] : []));
-        this.upBtnAriaLabel = input(...(ngDevMode ? [undefined, { debugName: "upBtnAriaLabel" }] : []));
-        this.upBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "upBtnDisabled" }] : []));
-        this.downBtnAriaLabel = input(...(ngDevMode ? [undefined, { debugName: "downBtnAriaLabel" }] : []));
-        this.downBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "downBtnDisabled" }] : []));
+        this.showDivider = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showDivider" }] : /* istanbul ignore next */ []));
+        this.upBtnAriaLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "upBtnAriaLabel" }] : /* istanbul ignore next */ []));
+        this.upBtnDisabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "upBtnDisabled" }] : /* istanbul ignore next */ []));
+        this.downBtnAriaLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "downBtnAriaLabel" }] : /* istanbul ignore next */ []));
+        this.downBtnDisabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "downBtnDisabled" }] : /* istanbul ignore next */ []));
         /**
          * Value would be displayed in the box
          * If it is undefiend, the box would display [value]
          */
-        this.boxValue = input(...(ngDevMode ? [undefined, { debugName: "boxValue" }] : []));
-        this.value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
-        this.max = input(0, ...(ngDevMode ? [{ debugName: "max" }] : []));
-        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
-        this.inputLabel = input(...(ngDevMode ? [undefined, { debugName: "inputLabel" }] : []));
+        this.boxValue = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "boxValue" }] : /* istanbul ignore next */ []));
+        this.value = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.min = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.step = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        this.inputLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "inputLabel" }] : /* istanbul ignore next */ []));
         this.valueChange = output();
         this.inputChange = output();
         this.inputStream = new Subject();
-        this.displayValue = computed(() => this.boxValue() || this.value(), ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+        this.displayValue = computed(() => this.boxValue() || this.value(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.inputStreamSub = this.inputStream.pipe(debounceTime(500), distinctUntilChanged()).subscribe((val) => {
@@ -1576,10 +1677,10 @@ class TimerBoxComponent {
         }
         this.inputChange.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TimerBoxComponent, isStandalone: true, selector: "nxt-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.nxt-dt-timer-box": "true" } }, ngImport: i0, template: "@if (showDivider()) {\r\n<div class=\"nxt-dt-timer-divider\"\r\n    aria-hidden=\"true\"></div>\r\n}\r\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n    type=\"button\"\r\n    tabindex=\"-1\"\r\n    [disabled]=\"upBtnDisabled()\"\r\n    [attr.aria-label]=\"upBtnAriaLabel()\"\r\n    (click)=\"upBtnClicked()\">\r\n    <span class=\"nxt-dt-control-button-content\"\r\n        tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            version=\"1.1\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 451.847 451.846\"\r\n            style=\"enable-background:new 0 0 451.847 451.846;\"\r\n            xml:space=\"preserve\"\r\n            width=\"100%\"\r\n            height=\"100%\">\r\n            <path d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\r\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\r\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\" />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n<label class=\"nxt-dt-timer-content\">\r\n    <input class=\"nxt-dt-timer-input\"\r\n        maxlength=\"2\"\r\n        [value]=\"displayValue() | numberFixedLen : 2\"\r\n        (input)=\"handleInputChange(valueInput.value)\"\r\n        #valueInput>\r\n    <span class=\"nxt-hidden-accessible\">{{inputLabel()}}</span>\r\n</label>\r\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n    type=\"button\"\r\n    tabindex=\"-1\"\r\n    [disabled]=\"downBtnDisabled()\"\r\n    [attr.aria-label]=\"downBtnAriaLabel()\"\r\n    (click)=\"downBtnClicked()\">\r\n    <span class=\"nxt-dt-control-button-content\"\r\n        tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            version=\"1.1\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 451.847 451.846\"\r\n            style=\"enable-background:new 0 0 451.847 451.846;\"\r\n            xml:space=\"preserve\"\r\n            width=\"100%\"\r\n            height=\"100%\">\r\n            <path d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\r\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\r\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\" />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: NumberFixedLenPipe, name: "numberFixedLen" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TimerBoxComponent, isStandalone: true, selector: "nxt-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.nxt-dt-timer-box": "true" } }, ngImport: i0, template: "@if (showDivider()) {\r\n<div class=\"nxt-dt-timer-divider\"\r\n    aria-hidden=\"true\"></div>\r\n}\r\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n    type=\"button\"\r\n    tabindex=\"-1\"\r\n    [disabled]=\"upBtnDisabled()\"\r\n    [attr.aria-label]=\"upBtnAriaLabel()\"\r\n    (click)=\"upBtnClicked()\">\r\n    <span class=\"nxt-dt-control-button-content\"\r\n        tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            version=\"1.1\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 451.847 451.846\"\r\n            style=\"enable-background:new 0 0 451.847 451.846;\"\r\n            xml:space=\"preserve\"\r\n            width=\"100%\"\r\n            height=\"100%\">\r\n            <path d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\r\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\r\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\" />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n<label class=\"nxt-dt-timer-content\">\r\n    <input class=\"nxt-dt-timer-input\"\r\n        maxlength=\"2\"\r\n        [value]=\"displayValue() | numberFixedLen : 2\"\r\n        (input)=\"handleInputChange(valueInput.value)\"\r\n        #valueInput>\r\n    <span class=\"nxt-hidden-accessible\">{{inputLabel()}}</span>\r\n</label>\r\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\r\n    type=\"button\"\r\n    tabindex=\"-1\"\r\n    [disabled]=\"downBtnDisabled()\"\r\n    [attr.aria-label]=\"downBtnAriaLabel()\"\r\n    (click)=\"downBtnClicked()\">\r\n    <span class=\"nxt-dt-control-button-content\"\r\n        tabindex=\"-1\">\r\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            version=\"1.1\"\r\n            x=\"0px\"\r\n            y=\"0px\"\r\n            viewBox=\"0 0 451.847 451.846\"\r\n            style=\"enable-background:new 0 0 451.847 451.846;\"\r\n            xml:space=\"preserve\"\r\n            width=\"100%\"\r\n            height=\"100%\">\r\n            <path d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\r\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\r\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\" />\r\n        </svg>\r\n        <!-- </editor-fold> -->\r\n    </span>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: NumberFixedLenPipe, name: "numberFixedLen" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimerBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimerBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxt-date-time-timer-box', preserveWhitespaces: false, imports: [
                         NumberFixedLenPipe
@@ -1591,45 +1692,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 class TimerComponent {
     constructor() {
         this.ngZone = inject(NgZone);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
         this.elmRef = inject(ElementRef);
         this.pickerIntl = inject(DateTimeIntl);
         this.dateTimeAdapter = inject(DateTimeAdapter);
         /** The current picker moment */
-        this.pickerMoment = input(undefined, { ...(ngDevMode ? { debugName: "pickerMoment" } : {}), transform: value => {
+        this.pickerMoment = input(undefined, { ...(ngDevMode ? { debugName: "pickerMoment" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value) || this.dateTimeAdapter.now();
             } });
         /** The minimum selectable date time */
-        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : {}), transform: value => {
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
         /** The maximum selectable date time */
-        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : {}), transform: value => {
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
         /**
          * Whether to show the second's timer
          */
-        this.showSecondsTimer = input(false, ...(ngDevMode ? [{ debugName: "showSecondsTimer" }] : []));
+        this.showSecondsTimer = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSecondsTimer" }] : /* istanbul ignore next */ []));
         /**
          * Whether the timer is in hour12 format
          */
-        this.hour12Timer = input(false, ...(ngDevMode ? [{ debugName: "hour12Timer" }] : []));
+        this.hour12Timer = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hour12Timer" }] : /* istanbul ignore next */ []));
         /**
          * Hours to change per step
          */
-        this.stepHour = input(1, ...(ngDevMode ? [{ debugName: "stepHour" }] : []));
+        this.stepHour = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepHour" }] : /* istanbul ignore next */ []));
         /**
          * Minutes to change per step
          */
-        this.stepMinute = input(1, ...(ngDevMode ? [{ debugName: "stepMinute" }] : []));
+        this.stepMinute = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepMinute" }] : /* istanbul ignore next */ []));
         /**
          * Seconds to change per step
          */
-        this.stepSecond = input(1, ...(ngDevMode ? [{ debugName: "stepSecond" }] : []));
-        this.hourValue = computed(() => this.dateTimeAdapter.getHours(this.pickerMoment()), ...(ngDevMode ? [{ debugName: "hourValue" }] : []));
+        this.stepSecond = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepSecond" }] : /* istanbul ignore next */ []));
+        this.hourValue = computed(() => this.dateTimeAdapter.getHours(this.pickerMoment()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourValue" }] : /* istanbul ignore next */ []));
         this.hoursWithPM = computed(() => {
             let hours = this.hourValue();
             let isPM;
@@ -1653,10 +1762,11 @@ class TimerComponent {
                 }
                 return { hours, isPM };
             }
-        }, ...(ngDevMode ? [{ debugName: "hoursWithPM" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hoursWithPM" }] : /* istanbul ignore next */ []));
         this._isPM = false;
         // a flag indicates the current timer moment is in PM or AM
-        this.isPM = linkedSignal({ ...(ngDevMode ? { debugName: "isPM" } : {}), source: () => this.hoursWithPM().isPM,
+        this.isPM = linkedSignal({ ...(ngDevMode ? { debugName: "isPM" } : /* istanbul ignore next */ {}), source: () => this.hoursWithPM().isPM,
             computation: (v) => {
                 if (v != undefined)
                     return this._isPM = v;
@@ -1667,9 +1777,12 @@ class TimerComponent {
          * We need this because the value displayed in hourBox it not
          * the same as the hourValue when the timer is in hour12Timer mode.
          */
-        this.hourBoxValue = computed(() => this.hoursWithPM().hours, ...(ngDevMode ? [{ debugName: "hourBoxValue" }] : []));
-        this.minuteValue = computed(() => this.dateTimeAdapter.getMinutes(this.pickerMoment()), ...(ngDevMode ? [{ debugName: "minuteValue" }] : []));
-        this.secondValue = computed(() => this.dateTimeAdapter.getSeconds(this.pickerMoment()), ...(ngDevMode ? [{ debugName: "secondValue" }] : []));
+        this.hourBoxValue = computed(() => this.hoursWithPM().hours, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourBoxValue" }] : /* istanbul ignore next */ []));
+        this.minuteValue = computed(() => this.dateTimeAdapter.getMinutes(this.pickerMoment()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minuteValue" }] : /* istanbul ignore next */ []));
+        this.secondValue = computed(() => this.dateTimeAdapter.getSeconds(this.pickerMoment()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondValue" }] : /* istanbul ignore next */ []));
         this.upHourButtonLabel = this.pickerIntl.upHourLabel.asReadonly();
         this.downHourButtonLabel = this.pickerIntl.downHourLabel.asReadonly();
         this.upMinuteButtonLabel = this.pickerIntl.upMinuteLabel.asReadonly();
@@ -1678,51 +1791,58 @@ class TimerComponent {
         this.downSecondButtonLabel = this.pickerIntl.downSecondLabel.asReadonly();
         this.hour12ButtonLabel = computed(() => this.isPM()
             ? this.pickerIntl.hour12PMLabel()
-            : this.pickerIntl.hour12AMLabel(), ...(ngDevMode ? [{ debugName: "hour12ButtonLabel" }] : []));
+            : this.pickerIntl.hour12AMLabel(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hour12ButtonLabel" }] : /* istanbul ignore next */ []));
         this.selectedChange = output();
         /**
          * Check if the up hour button is enabled
          */
         this.upHourEnabled = computed(() => (!this.max() ||
-            this.compareHours(this.stepHour(), this.max()) < 1), ...(ngDevMode ? [{ debugName: "upHourEnabled" }] : []));
+            this.compareHours(this.stepHour(), this.max()) < 1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "upHourEnabled" }] : /* istanbul ignore next */ []));
         /**
          * Check if the down hour button is enabled
          */
         this.downHourEnabled = computed(() => (!this.min() ||
-            this.compareHours(-this.stepHour(), this.min()) > -1), ...(ngDevMode ? [{ debugName: "downHourEnabled" }] : []));
+            this.compareHours(-this.stepHour(), this.min()) > -1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "downHourEnabled" }] : /* istanbul ignore next */ []));
         /**
          * Check if the up minute button is enabled
          */
         this.upMinuteEnabled = computed(() => (!this.max() ||
-            this.compareMinutes(this.stepMinute(), this.max()) < 1), ...(ngDevMode ? [{ debugName: "upMinuteEnabled" }] : []));
+            this.compareMinutes(this.stepMinute(), this.max()) < 1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "upMinuteEnabled" }] : /* istanbul ignore next */ []));
         /**
          * Check if the down minute button is enabled
          */
         this.downMinuteEnabled = computed(() => (!this.min() ||
-            this.compareMinutes(-this.stepMinute(), this.min()) > -1), ...(ngDevMode ? [{ debugName: "downMinuteEnabled" }] : []));
+            this.compareMinutes(-this.stepMinute(), this.min()) > -1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "downMinuteEnabled" }] : /* istanbul ignore next */ []));
         /**
          * Check if the up second button is enabled
          */
         this.upSecondEnabled = computed(() => (!this.max() ||
-            this.compareSeconds(this.stepSecond(), this.max()) < 1), ...(ngDevMode ? [{ debugName: "upSecondEnabled" }] : []));
+            this.compareSeconds(this.stepSecond(), this.max()) < 1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "upSecondEnabled" }] : /* istanbul ignore next */ []));
         /**
          * Check if the down second button is enabled
          */
         this.downSecondEnabled = computed(() => (!this.min() ||
-            this.compareSeconds(-this.stepSecond(), this.min()) > -1), ...(ngDevMode ? [{ debugName: "downSecondEnabled" }] : []));
+            this.compareSeconds(-this.stepSecond(), this.min()) > -1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "downSecondEnabled" }] : /* istanbul ignore next */ []));
     }
     /**
      * Focus to the host element
      */
     focus() {
-        this.ngZone.runOutsideAngular(() => {
-            this.ngZone.onStable
-                .asObservable()
-                .pipe(take(1))
-                .subscribe(() => {
-                this.elmRef.nativeElement.focus();
+        if (!this.destroyRef.destroyed)
+            afterNextRender(() => {
+                this.ngZone.runOutsideAngular(() => {
+                    this.elmRef.nativeElement.focus();
+                });
+            }, {
+                injector: this.injector
             });
-        });
     }
     /**
      * Set the hour value via typing into timer box input
@@ -1806,10 +1926,10 @@ class TimerComponent {
             ? obj
             : undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TimerComponent, isStandalone: true, selector: "nxt-date-time-timer", inputs: { pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", 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 }, 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.nxt-dt-timer": "true", "attr.tabindex": "-1" } }, ngImport: i0, template: "<nxt-date-time-timer-box [upBtnAriaLabel]=\"upHourButtonLabel()\"\r\n    [downBtnAriaLabel]=\"downHourButtonLabel()\"\r\n    [upBtnDisabled]=\"!upHourEnabled()\"\r\n    [downBtnDisabled]=\"!downHourEnabled()\"\r\n    [boxValue]=\"hourBoxValue()\"\r\n    [value]=\"hourValue()\"\r\n    [min]=\"0\"\r\n    [max]=\"23\"\r\n    [step]=\"stepHour()\"\r\n    inputLabel=\"Hour\"\r\n    (inputChange)=\"setHourValueViaInput($event)\"\r\n    (valueChange)=\"setHourValue($event)\" />\r\n<nxt-date-time-timer-box [showDivider]=\"true\"\r\n    [upBtnAriaLabel]=\"upMinuteButtonLabel()\"\r\n    [downBtnAriaLabel]=\"downMinuteButtonLabel()\"\r\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\r\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\r\n    [value]=\"minuteValue()\"\r\n    [min]=\"0\"\r\n    [max]=\"59\"\r\n    [step]=\"stepMinute()\"\r\n    inputLabel=\"Minute\"\r\n    (inputChange)=\"setMinuteValue($event)\"\r\n    (valueChange)=\"setMinuteValue($event)\" />\r\n@if (showSecondsTimer()) {\r\n<nxt-date-time-timer-box [showDivider]=\"true\"\r\n    [upBtnAriaLabel]=\"upSecondButtonLabel()\"\r\n    [downBtnAriaLabel]=\"downSecondButtonLabel()\"\r\n    [upBtnDisabled]=\"!upSecondEnabled()\"\r\n    [downBtnDisabled]=\"!downSecondEnabled()\"\r\n    [value]=\"secondValue()\"\r\n    [min]=\"0\"\r\n    [max]=\"59\"\r\n    [step]=\"stepSecond()\"\r\n    inputLabel=\"Second\"\r\n    (inputChange)=\"setSecondValue($event)\"\r\n    (valueChange)=\"setSecondValue($event)\" />\r\n}\r\n\r\n@if (hour12Timer()) {\r\n<div class=\"nxt-dt-timer-hour12\">\r\n    <button class=\"nxt-dt-control-button nxt-dt-timer-hour12-box\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        (click)=\"setMeridiem($event)\">\r\n        <span class=\"nxt-dt-control-button-content\"\r\n            tabindex=\"-1\">\r\n            {{hour12ButtonLabel()}}\r\n        </span>\r\n    </button>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: TimerBoxComponent, selector: "nxt-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TimerComponent, isStandalone: true, selector: "nxt-date-time-timer", inputs: { pickerMoment: { classPropertyName: "pickerMoment", publicName: "pickerMoment", 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 }, 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.nxt-dt-timer": "true", "attr.tabindex": "-1" } }, ngImport: i0, template: "<nxt-date-time-timer-box [upBtnAriaLabel]=\"upHourButtonLabel()\"\r\n    [downBtnAriaLabel]=\"downHourButtonLabel()\"\r\n    [upBtnDisabled]=\"!upHourEnabled()\"\r\n    [downBtnDisabled]=\"!downHourEnabled()\"\r\n    [boxValue]=\"hourBoxValue()\"\r\n    [value]=\"hourValue()\"\r\n    [min]=\"0\"\r\n    [max]=\"23\"\r\n    [step]=\"stepHour()\"\r\n    inputLabel=\"Hour\"\r\n    (inputChange)=\"setHourValueViaInput($event)\"\r\n    (valueChange)=\"setHourValue($event)\" />\r\n<nxt-date-time-timer-box [showDivider]=\"true\"\r\n    [upBtnAriaLabel]=\"upMinuteButtonLabel()\"\r\n    [downBtnAriaLabel]=\"downMinuteButtonLabel()\"\r\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\r\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\r\n    [value]=\"minuteValue()\"\r\n    [min]=\"0\"\r\n    [max]=\"59\"\r\n    [step]=\"stepMinute()\"\r\n    inputLabel=\"Minute\"\r\n    (inputChange)=\"setMinuteValue($event)\"\r\n    (valueChange)=\"setMinuteValue($event)\" />\r\n@if (showSecondsTimer()) {\r\n<nxt-date-time-timer-box [showDivider]=\"true\"\r\n    [upBtnAriaLabel]=\"upSecondButtonLabel()\"\r\n    [downBtnAriaLabel]=\"downSecondButtonLabel()\"\r\n    [upBtnDisabled]=\"!upSecondEnabled()\"\r\n    [downBtnDisabled]=\"!downSecondEnabled()\"\r\n    [value]=\"secondValue()\"\r\n    [min]=\"0\"\r\n    [max]=\"59\"\r\n    [step]=\"stepSecond()\"\r\n    inputLabel=\"Second\"\r\n    (inputChange)=\"setSecondValue($event)\"\r\n    (valueChange)=\"setSecondValue($event)\" />\r\n}\r\n\r\n@if (hour12Timer()) {\r\n<div class=\"nxt-dt-timer-hour12\">\r\n    <button class=\"nxt-dt-control-button nxt-dt-timer-hour12-box\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        (click)=\"setMeridiem($event)\">\r\n        <span class=\"nxt-dt-control-button-content\"\r\n            tabindex=\"-1\">\r\n            {{hour12ButtonLabel()}}\r\n        </span>\r\n    </button>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: TimerBoxComponent, selector: "nxt-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxt-date-time-timer', preserveWhitespaces: false, imports: [
                         TimerBoxComponent
@@ -1819,34 +1939,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, template: "<nxt-date-time-timer-box [upBtnAriaLabel]=\"upHourButtonLabel()\"\r\n    [downBtnAriaLabel]=\"downHourButtonLabel()\"\r\n    [upBtnDisabled]=\"!upHourEnabled()\"\r\n    [downBtnDisabled]=\"!downHourEnabled()\"\r\n    [boxValue]=\"hourBoxValue()\"\r\n    [value]=\"hourValue()\"\r\n    [min]=\"0\"\r\n    [max]=\"23\"\r\n    [step]=\"stepHour()\"\r\n    inputLabel=\"Hour\"\r\n    (inputChange)=\"setHourValueViaInput($event)\"\r\n    (valueChange)=\"setHourValue($event)\" />\r\n<nxt-date-time-timer-box [showDivider]=\"true\"\r\n    [upBtnAriaLabel]=\"upMinuteButtonLabel()\"\r\n    [downBtnAriaLabel]=\"downMinuteButtonLabel()\"\r\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\r\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\r\n    [value]=\"minuteValue()\"\r\n    [min]=\"0\"\r\n    [max]=\"59\"\r\n    [step]=\"stepMinute()\"\r\n    inputLabel=\"Minute\"\r\n    (inputChange)=\"setMinuteValue($event)\"\r\n    (valueChange)=\"setMinuteValue($event)\" />\r\n@if (showSecondsTimer()) {\r\n<nxt-date-time-timer-box [showDivider]=\"true\"\r\n    [upBtnAriaLabel]=\"upSecondButtonLabel()\"\r\n    [downBtnAriaLabel]=\"downSecondButtonLabel()\"\r\n    [upBtnDisabled]=\"!upSecondEnabled()\"\r\n    [downBtnDisabled]=\"!downSecondEnabled()\"\r\n    [value]=\"secondValue()\"\r\n    [min]=\"0\"\r\n    [max]=\"59\"\r\n    [step]=\"stepSecond()\"\r\n    inputLabel=\"Second\"\r\n    (inputChange)=\"setSecondValue($event)\"\r\n    (valueChange)=\"setSecondValue($event)\" />\r\n}\r\n\r\n@if (hour12Timer()) {\r\n<div class=\"nxt-dt-timer-hour12\">\r\n    <button class=\"nxt-dt-control-button nxt-dt-timer-hour12-box\"\r\n        type=\"button\"\r\n        tabindex=\"0\"\r\n        (click)=\"setMeridiem($event)\">\r\n        <span class=\"nxt-dt-control-button-content\"\r\n            tabindex=\"-1\">\r\n            {{hour12ButtonLabel()}}\r\n        </span>\r\n    </button>\r\n</div>\r\n}\r\n" }]
         }], propDecorators: { pickerMoment: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerMoment", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], 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"] }] } });
 
-/** @internal */
-const dateTimePickerAnimations = {
-    transformPicker: trigger('transformPicker', [
-        state('void', style({ opacity: 0, transform: 'scale(1, 0)' })),
-        state('enter', style({ opacity: 1, transform: 'scale(1, 1)' })),
-        transition('void => enter', group([
-            query('@fadeInPicker', animateChild(), { optional: true }),
-            animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
-        ])),
-        transition('enter => void', animate('100ms linear', style({ opacity: 0 })))
-    ]),
-    fadeInPicker: trigger('fadeInPicker', [
-        state('enter', style({ opacity: 1 })),
-        state('void', style({ opacity: 0 })),
-        transition('void => enter', animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
-    ])
-};
-
 /** @internal */
 class DateTimeContainerComponent {
     constructor() {
         this.elmRef = inject(ElementRef);
         this.pickerIntl = inject(DateTimeIntl);
         this.dateTimeAdapter = inject(DateTimeAdapter);
-        this.calendar = viewChild(CalendarComponent, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
-        this.timer = viewChild(TimerComponent, ...(ngDevMode ? [{ debugName: "timer" }] : []));
-        this.picker = signal(undefined, ...(ngDevMode ? [{ debugName: "picker" }] : []));
-        this.activeSelectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeSelectedIndex" }] : [])); // The current active SelectedIndex in range select mode (0: 'from', 1: 'to')
+        this.calendar = viewChild(CalendarComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
+        this.timer = viewChild(TimerComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timer" }] : /* istanbul ignore next */ []));
+        this.picker = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []));
+        this.activeSelectedIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeSelectedIndex" }] : /* istanbul ignore next */ [])); // The current active SelectedIndex in range select mode (0: 'from', 1: 'to')
         /**
          * Stream emits when try to hide picker
          */
@@ -1863,28 +1969,50 @@ class DateTimeContainerComponent {
          * The current picker moment. This determines which time period is shown and which date is
          * highlighted when using keyboard navigation.
          */
-        this._clamPickerMoment = signal(undefined, ...(ngDevMode ? [{ debugName: "_clamPickerMoment" }] : []));
-        this.pickerType = computed(() => this.picker()?.pickerType(), ...(ngDevMode ? [{ debugName: "pickerType" }] : []));
-        this.pickerMode = computed(() => this.picker()?.pickerMode(), ...(ngDevMode ? [{ debugName: "pickerMode" }] : []));
-        this.min = computed(() => this.picker()?.min(), ...(ngDevMode ? [{ debugName: "min" }] : []));
-        this.max = computed(() => this.picker()?.max(), ...(ngDevMode ? [{ debugName: "max" }] : []));
-        this.selected = computed(() => this.picker()?.selected(), ...(ngDevMode ? [{ debugName: "selected" }] : []));
-        this.selecteds = computed(() => this.picker()?.selecteds(), ...(ngDevMode ? [{ debugName: "selecteds" }] : []));
-        this.selectMode = computed(() => this.picker()?.selectMode(), ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
-        this.isInRangeMode = computed(() => this.picker()?.isInRangeMode(), ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : []));
-        this.firstDayOfWeek = computed(() => this.picker()?.firstDayOfWeek(), ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
-        this.dateTimeFilter = computed(() => this.picker()?.dateTimeFilter(), ...(ngDevMode ? [{ debugName: "dateTimeFilter" }] : []));
-        this.startView = computed(() => this.picker()?.startView(), ...(ngDevMode ? [{ debugName: "startView" }] : []));
-        this.hideOtherMonths = computed(() => this.picker()?.hideOtherMonths(), ...(ngDevMode ? [{ debugName: "hideOtherMonths" }] : []));
-        this.showSecondsTimer = computed(() => this.picker()?.showSecondsTimer(), ...(ngDevMode ? [{ debugName: "showSecondsTimer" }] : []));
-        this.hour12Timer = computed(() => this.picker()?.hour12Timer(), ...(ngDevMode ? [{ debugName: "hour12Timer" }] : []));
-        this.stepHour = computed(() => this.picker()?.stepHour(), ...(ngDevMode ? [{ debugName: "stepHour" }] : []));
-        this.stepMinute = computed(() => this.picker()?.stepMinute(), ...(ngDevMode ? [{ debugName: "stepMinute" }] : []));
-        this.stepSecond = computed(() => this.picker()?.stepSecond(), ...(ngDevMode ? [{ debugName: "stepSecond" }] : []));
-        this.disabled = computed(() => this.picker()?.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.formatString = computed(() => this.picker()?.formatString(), ...(ngDevMode ? [{ debugName: "formatString" }] : []));
-        this.startAt = computed(() => this.picker()?.startAt(), ...(ngDevMode ? [{ debugName: "startAt" }] : []));
-        this.dateTimeChecker = computed(() => this.picker()?.dateTimeChecker(), ...(ngDevMode ? [{ debugName: "dateTimeChecker" }] : []));
+        this._clamPickerMoment = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_clamPickerMoment" }] : /* istanbul ignore next */ []));
+        this.pickerType = computed(() => this.picker()?.pickerType(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerType" }] : /* istanbul ignore next */ []));
+        this.pickerMode = computed(() => this.picker()?.pickerMode(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerMode" }] : /* istanbul ignore next */ []));
+        this.min = computed(() => this.picker()?.min(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = computed(() => this.picker()?.max(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => this.picker()?.selected(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.selecteds = computed(() => this.picker()?.selecteds(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selecteds" }] : /* istanbul ignore next */ []));
+        this.selectMode = computed(() => this.picker()?.selectMode(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
+        this.isInRangeMode = computed(() => this.picker()?.isInRangeMode(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : /* istanbul ignore next */ []));
+        this.firstDayOfWeek = computed(() => this.picker()?.firstDayOfWeek(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+        this.dateTimeFilter = computed(() => this.picker()?.dateTimeFilter(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateTimeFilter" }] : /* istanbul ignore next */ []));
+        this.startView = computed(() => this.picker()?.startView(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+        this.hideOtherMonths = computed(() => this.picker()?.hideOtherMonths(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideOtherMonths" }] : /* istanbul ignore next */ []));
+        this.showSecondsTimer = computed(() => this.picker()?.showSecondsTimer(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSecondsTimer" }] : /* istanbul ignore next */ []));
+        this.hour12Timer = computed(() => this.picker()?.hour12Timer(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hour12Timer" }] : /* istanbul ignore next */ []));
+        this.stepHour = computed(() => this.picker()?.stepHour(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepHour" }] : /* istanbul ignore next */ []));
+        this.stepMinute = computed(() => this.picker()?.stepMinute(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepMinute" }] : /* istanbul ignore next */ []));
+        this.stepSecond = computed(() => this.picker()?.stepSecond(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepSecond" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => this.picker()?.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.formatString = computed(() => this.picker()?.formatString(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formatString" }] : /* istanbul ignore next */ []));
+        this.startAt = computed(() => this.picker()?.startAt(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+        this.dateTimeChecker = computed(() => this.picker()?.dateTimeChecker(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateTimeChecker" }] : /* istanbul ignore next */ []));
         this.cancelLabel = this.pickerIntl.cancelBtnLabel.asReadonly();
         this.setLabel = this.pickerIntl.setBtnLabel.asReadonly();
         /**
@@ -1903,7 +2031,8 @@ class DateTimeContainerComponent {
             return value
                 ? this.dateTimeAdapter.format(value, this.formatString())
                 : '';
-        }, ...(ngDevMode ? [{ debugName: "fromFormattedValue" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fromFormattedValue" }] : /* istanbul ignore next */ []));
         /**
          * The range 'to' formatted value
          */
@@ -1912,7 +2041,8 @@ class DateTimeContainerComponent {
             return value
                 ? this.dateTimeAdapter.format(value, this.formatString())
                 : '';
-        }, ...(ngDevMode ? [{ debugName: "toFormattedValue" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toFormattedValue" }] : /* istanbul ignore next */ []));
         /**
          * Cases in which the control buttons show in the picker
          * 1) picker mode is 'dialog'
@@ -1924,7 +2054,57 @@ class DateTimeContainerComponent {
             return (pickerMode === 'dialog' ||
                 (pickerType !== 'calendar' &&
                     pickerMode !== 'inline'));
-        }, ...(ngDevMode ? [{ debugName: "showControlButtons" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showControlButtons" }] : /* istanbul ignore next */ []));
+    }
+    static { this.animate = true; }
+    transformPickerEnter({ target, animationComplete }) {
+        if (!DateTimeContainerComponent.animate) {
+            this.pickerOpened$.next();
+            animationComplete();
+            return;
+        }
+        let anim = target.animate([
+            { opacity: 0, transform: 'scale(1, 0)' },
+            { opacity: 1, transform: 'scale(1, 1)' }
+        ], {
+            duration: 400,
+            easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)'
+        });
+        const inner = target.querySelector('.nxt-dt-container-inner');
+        if (inner) {
+            inner.style.opacity = '0';
+            anim = inner.animate([
+                { opacity: 0 },
+                { opacity: 1 }
+            ], {
+                duration: 400,
+                delay: 100,
+                easing: 'cubic-bezier(0.55, 0, 0.55, 0.2)'
+            });
+        }
+        anim.addEventListener('finish', () => {
+            if (inner)
+                inner.style.opacity = '';
+            this.pickerOpened$.next();
+            animationComplete();
+        });
+    }
+    transformPickerLeave({ target, animationComplete }) {
+        if (!DateTimeContainerComponent.animate) {
+            animationComplete();
+            return;
+        }
+        const anim = target.animate([
+            { opacity: 1 },
+            { opacity: 0 }
+        ], {
+            duration: 100,
+            easing: 'linear'
+        });
+        anim.addEventListener('finish', () => {
+            animationComplete();
+        });
     }
     get pickerMoment() {
         return this._clamPickerMoment();
@@ -1943,12 +2123,6 @@ class DateTimeContainerComponent {
     ngAfterViewInit() {
         this.focusPicker();
     }
-    handleContainerAnimationDone(event) {
-        const toState = event.toState;
-        if (toState === 'enter') {
-            this.pickerOpened$.next();
-        }
-    }
     dateSelected(date) {
         let result;
         const picker = this.picker();
@@ -2162,18 +2336,12 @@ class DateTimeContainerComponent {
             timer.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DateTimeContainerComponent, isStandalone: true, selector: "nxt-date-time-container", host: { listeners: { "@transformPicker.done": "handleContainerAnimationDone($event)" }, properties: { "class.nxt-dt-container": "true", "class.nxt-dt-popup-container": "pickerMode() === 'popup'", "class.nxt-dt-dialog-container": "pickerMode() === 'dialog'", "class.nxt-dt-inline-container": "pickerMode() === 'inline'", "class.nxt-dt-container-disabled": "disabled()", "attr.id": "picker()?.id", "@transformPicker": "pickerMode() === 'inline' ? '' : 'enter'" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: CalendarComponent, descendants: true, isSignal: true }, { propertyName: "timer", first: true, predicate: TimerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div [cdkTrapFocus]=\"pickerMode() !== 'inline'\"\r\n    [@fadeInPicker]=\"pickerMode() === 'inline'? '' : 'enter'\"\r\n    class=\"nxt-dt-container-inner\">\r\n\r\n    @if (pickerType() === 'both' || pickerType() === 'calendar') {\r\n    <nxt-date-time-calendar class=\"nxt-dt-container-row\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek() ?? 0\"\r\n        [(pickerMoment)]=\"pickerMoment\"\r\n        [selected]=\"selected()\"\r\n        [selecteds]=\"selecteds() ?? []\"\r\n        [selectMode]=\"selectMode()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [dateTimeFilter]=\"dateTimeFilter()\"\r\n        [startView]=\"startView() ?? 'month'\"\r\n        [hideOtherMonths]=\"!!hideOtherMonths()\"\r\n        (yearSelected)=\"picker()?.selectYear($event)\"\r\n        (monthSelected)=\"picker()?.selectMonth($event)\"\r\n        (selectedChange)=\"dateSelected($event)\" />\r\n    }\r\n\r\n    @if (pickerType() === 'both' || pickerType() === 'timer') {\r\n    <nxt-date-time-timer class=\"nxt-dt-container-row\"\r\n        [pickerMoment]=\"pickerMoment\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [showSecondsTimer]=\"!!showSecondsTimer()\"\r\n        [hour12Timer]=\"!!hour12Timer()\"\r\n        [stepHour]=\"stepHour() ?? 1\"\r\n        [stepMinute]=\"stepMinute() ?? 1\"\r\n        [stepSecond]=\"stepSecond() ?? 1\"\r\n        (selectedChange)=\"timeSelected($event)\" />\r\n    }\r\n\r\n    @if (isInRangeMode()) {\r\n    <div role=\"radiogroup\"\r\n        class=\"nxt-dt-container-info nxt-dt-container-row\">\r\n        <div role=\"radio\"\r\n            [tabindex]=\"activeSelectedIndex() === 0 ? 0 : -1\"\r\n            [attr.aria-checked]=\"activeSelectedIndex() === 0\"\r\n            class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-from\"\r\n            [class.nxt-dt-container-info-active]=\"activeSelectedIndex() === 0\"\r\n            (click)=\"handleClickOnInfoGroup($event, 0)\"\r\n            (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\r\n            #from>\r\n            <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\r\n                tabindex=\"-1\">\r\n                <span class=\"nxt-dt-container-info-label\">{{fromLabel()}}:</span>\r\n                <span class=\"nxt-dt-container-info-value\">{{fromFormattedValue()}}</span>\r\n            </span>\r\n        </div>\r\n        <div role=\"radio\"\r\n            [tabindex]=\"activeSelectedIndex() === 1 ? 0 : -1\"\r\n            [attr.aria-checked]=\"activeSelectedIndex() === 1\"\r\n            class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-to\"\r\n            [class.nxt-dt-container-info-active]=\"activeSelectedIndex() === 1\"\r\n            (click)=\"handleClickOnInfoGroup($event, 1)\"\r\n            (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\r\n            #to>\r\n            <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\r\n                tabindex=\"-1\">\r\n                <span class=\"nxt-dt-container-info-label\">{{toLabel()}}:</span>\r\n                <span class=\"nxt-dt-container-info-value\">{{toFormattedValue()}}</span>\r\n            </span>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    @if (showControlButtons()) {\r\n    <div class=\"nxt-dt-container-buttons nxt-dt-container-row\">\r\n        <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"onCancelClicked($event)\">\r\n            <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\r\n                tabindex=\"-1\">\r\n                {{cancelLabel()}}\r\n            </span>\r\n        </button>\r\n        <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"onSetClicked($event)\">\r\n            <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\r\n                tabindex=\"-1\">\r\n                {{setLabel()}}\r\n            </span>\r\n        </button>\r\n    </div>\r\n    }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CalendarComponent, selector: "nxt-date-time-calendar", inputs: ["dateTimeFilter", "firstDayOfWeek", "min", "max", "pickerMoment", "selectMode", "selected", "selecteds", "startView", "hideOtherMonths"], outputs: ["pickerMomentChange", "selectedChange", "userSelection", "yearSelected", "monthSelected"] }, { kind: "component", type: TimerComponent, selector: "nxt-date-time-timer", inputs: ["pickerMoment", "min", "max", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"] }], animations: [
-            dateTimePickerAnimations.transformPicker,
-            dateTimePickerAnimations.fadeInPicker
-        ] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DateTimeContainerComponent, isStandalone: true, selector: "nxt-date-time-container", host: { listeners: { "animate.enter": "transformPickerEnter($event)", "animate.leave": "transformPickerLeave($event)" }, properties: { "class.nxt-dt-container": "true", "class.nxt-dt-popup-container": "pickerMode() === 'popup'", "class.nxt-dt-dialog-container": "pickerMode() === 'dialog'", "class.nxt-dt-inline-container": "pickerMode() === 'inline'", "class.nxt-dt-container-disabled": "disabled()", "attr.id": "picker()?.id" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: CalendarComponent, descendants: true, isSignal: true }, { propertyName: "timer", first: true, predicate: TimerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div [cdkTrapFocus]=\"pickerMode() !== 'inline'\"\n    class=\"nxt-dt-container-inner\">\n\n    @if (pickerType() === 'both' || pickerType() === 'calendar') {\n    <nxt-date-time-calendar class=\"nxt-dt-container-row\"\n        [firstDayOfWeek]=\"firstDayOfWeek() ?? 0\"\n        [(pickerMoment)]=\"pickerMoment\"\n        [selected]=\"selected()\"\n        [selecteds]=\"selecteds() ?? []\"\n        [selectMode]=\"selectMode()\"\n        [min]=\"min()\"\n        [max]=\"max()\"\n        [dateTimeFilter]=\"dateTimeFilter()\"\n        [startView]=\"startView() ?? 'month'\"\n        [hideOtherMonths]=\"!!hideOtherMonths()\"\n        (yearSelected)=\"picker()?.selectYear($event)\"\n        (monthSelected)=\"picker()?.selectMonth($event)\"\n        (selectedChange)=\"dateSelected($event)\" />\n    }\n\n    @if (pickerType() === 'both' || pickerType() === 'timer') {\n    <nxt-date-time-timer class=\"nxt-dt-container-row\"\n        [pickerMoment]=\"pickerMoment\"\n        [min]=\"min()\"\n        [max]=\"max()\"\n        [showSecondsTimer]=\"!!showSecondsTimer()\"\n        [hour12Timer]=\"!!hour12Timer()\"\n        [stepHour]=\"stepHour() ?? 1\"\n        [stepMinute]=\"stepMinute() ?? 1\"\n        [stepSecond]=\"stepSecond() ?? 1\"\n        (selectedChange)=\"timeSelected($event)\" />\n    }\n\n    @if (isInRangeMode()) {\n    <div role=\"radiogroup\"\n        class=\"nxt-dt-container-info nxt-dt-container-row\">\n        <div role=\"radio\"\n            [tabindex]=\"activeSelectedIndex() === 0 ? 0 : -1\"\n            [attr.aria-checked]=\"activeSelectedIndex() === 0\"\n            class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-from\"\n            [class.nxt-dt-container-info-active]=\"activeSelectedIndex() === 0\"\n            (click)=\"handleClickOnInfoGroup($event, 0)\"\n            (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n            #from>\n            <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\n                tabindex=\"-1\">\n                <span class=\"nxt-dt-container-info-label\">{{fromLabel()}}:</span>\n                <span class=\"nxt-dt-container-info-value\">{{fromFormattedValue()}}</span>\n            </span>\n        </div>\n        <div role=\"radio\"\n            [tabindex]=\"activeSelectedIndex() === 1 ? 0 : -1\"\n            [attr.aria-checked]=\"activeSelectedIndex() === 1\"\n            class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-to\"\n            [class.nxt-dt-container-info-active]=\"activeSelectedIndex() === 1\"\n            (click)=\"handleClickOnInfoGroup($event, 1)\"\n            (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n            #to>\n            <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\n                tabindex=\"-1\">\n                <span class=\"nxt-dt-container-info-label\">{{toLabel()}}:</span>\n                <span class=\"nxt-dt-container-info-value\">{{toFormattedValue()}}</span>\n            </span>\n        </div>\n    </div>\n    }\n\n    @if (showControlButtons()) {\n    <div class=\"nxt-dt-container-buttons nxt-dt-container-row\">\n        <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"onCancelClicked($event)\">\n            <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{cancelLabel()}}\n            </span>\n        </button>\n        <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"onSetClicked($event)\">\n            <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n                tabindex=\"-1\">\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: CalendarComponent, selector: "nxt-date-time-calendar", inputs: ["dateTimeFilter", "firstDayOfWeek", "min", "max", "pickerMoment", "selectMode", "selected", "selecteds", "startView", "hideOtherMonths"], outputs: ["pickerMomentChange", "selectedChange", "userSelection", "yearSelected", "monthSelected"] }, { kind: "component", type: TimerComponent, selector: "nxt-date-time-timer", inputs: ["pickerMoment", "min", "max", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxt-date-time-container', preserveWhitespaces: false, animations: [
-                        dateTimePickerAnimations.transformPicker,
-                        dateTimePickerAnimations.fadeInPicker
-                    ], imports: [
+            args: [{ selector: 'nxt-date-time-container', preserveWhitespaces: false, imports: [
                         CdkTrapFocus,
                         CalendarComponent,
                         TimerComponent
@@ -2184,9 +2352,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[class.nxt-dt-inline-container]': "pickerMode() === 'inline'",
                         '[class.nxt-dt-container-disabled]': 'disabled()',
                         '[attr.id]': 'picker()?.id',
-                        '[@transformPicker]': "pickerMode() === 'inline' ? '' : 'enter'",
-                        '(@transformPicker.done)': 'handleContainerAnimationDone($event)'
-                    }, template: "<div [cdkTrapFocus]=\"pickerMode() !== 'inline'\"\r\n    [@fadeInPicker]=\"pickerMode() === 'inline'? '' : 'enter'\"\r\n    class=\"nxt-dt-container-inner\">\r\n\r\n    @if (pickerType() === 'both' || pickerType() === 'calendar') {\r\n    <nxt-date-time-calendar class=\"nxt-dt-container-row\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek() ?? 0\"\r\n        [(pickerMoment)]=\"pickerMoment\"\r\n        [selected]=\"selected()\"\r\n        [selecteds]=\"selecteds() ?? []\"\r\n        [selectMode]=\"selectMode()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [dateTimeFilter]=\"dateTimeFilter()\"\r\n        [startView]=\"startView() ?? 'month'\"\r\n        [hideOtherMonths]=\"!!hideOtherMonths()\"\r\n        (yearSelected)=\"picker()?.selectYear($event)\"\r\n        (monthSelected)=\"picker()?.selectMonth($event)\"\r\n        (selectedChange)=\"dateSelected($event)\" />\r\n    }\r\n\r\n    @if (pickerType() === 'both' || pickerType() === 'timer') {\r\n    <nxt-date-time-timer class=\"nxt-dt-container-row\"\r\n        [pickerMoment]=\"pickerMoment\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [showSecondsTimer]=\"!!showSecondsTimer()\"\r\n        [hour12Timer]=\"!!hour12Timer()\"\r\n        [stepHour]=\"stepHour() ?? 1\"\r\n        [stepMinute]=\"stepMinute() ?? 1\"\r\n        [stepSecond]=\"stepSecond() ?? 1\"\r\n        (selectedChange)=\"timeSelected($event)\" />\r\n    }\r\n\r\n    @if (isInRangeMode()) {\r\n    <div role=\"radiogroup\"\r\n        class=\"nxt-dt-container-info nxt-dt-container-row\">\r\n        <div role=\"radio\"\r\n            [tabindex]=\"activeSelectedIndex() === 0 ? 0 : -1\"\r\n            [attr.aria-checked]=\"activeSelectedIndex() === 0\"\r\n            class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-from\"\r\n            [class.nxt-dt-container-info-active]=\"activeSelectedIndex() === 0\"\r\n            (click)=\"handleClickOnInfoGroup($event, 0)\"\r\n            (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\r\n            #from>\r\n            <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\r\n                tabindex=\"-1\">\r\n                <span class=\"nxt-dt-container-info-label\">{{fromLabel()}}:</span>\r\n                <span class=\"nxt-dt-container-info-value\">{{fromFormattedValue()}}</span>\r\n            </span>\r\n        </div>\r\n        <div role=\"radio\"\r\n            [tabindex]=\"activeSelectedIndex() === 1 ? 0 : -1\"\r\n            [attr.aria-checked]=\"activeSelectedIndex() === 1\"\r\n            class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-to\"\r\n            [class.nxt-dt-container-info-active]=\"activeSelectedIndex() === 1\"\r\n            (click)=\"handleClickOnInfoGroup($event, 1)\"\r\n            (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\r\n            #to>\r\n            <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\r\n                tabindex=\"-1\">\r\n                <span class=\"nxt-dt-container-info-label\">{{toLabel()}}:</span>\r\n                <span class=\"nxt-dt-container-info-value\">{{toFormattedValue()}}</span>\r\n            </span>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    @if (showControlButtons()) {\r\n    <div class=\"nxt-dt-container-buttons nxt-dt-container-row\">\r\n        <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"onCancelClicked($event)\">\r\n            <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\r\n                tabindex=\"-1\">\r\n                {{cancelLabel()}}\r\n            </span>\r\n        </button>\r\n        <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\r\n            type=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"onSetClicked($event)\">\r\n            <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\r\n                tabindex=\"-1\">\r\n                {{setLabel()}}\r\n            </span>\r\n        </button>\r\n    </div>\r\n    }\r\n</div>\r\n" }]
+                        '(animate.enter)': 'transformPickerEnter($event)',
+                        '(animate.leave)': 'transformPickerLeave($event)'
+                    }, template: "<div [cdkTrapFocus]=\"pickerMode() !== 'inline'\"\n    class=\"nxt-dt-container-inner\">\n\n    @if (pickerType() === 'both' || pickerType() === 'calendar') {\n    <nxt-date-time-calendar class=\"nxt-dt-container-row\"\n        [firstDayOfWeek]=\"firstDayOfWeek() ?? 0\"\n        [(pickerMoment)]=\"pickerMoment\"\n        [selected]=\"selected()\"\n        [selecteds]=\"selecteds() ?? []\"\n        [selectMode]=\"selectMode()\"\n        [min]=\"min()\"\n        [max]=\"max()\"\n        [dateTimeFilter]=\"dateTimeFilter()\"\n        [startView]=\"startView() ?? 'month'\"\n        [hideOtherMonths]=\"!!hideOtherMonths()\"\n        (yearSelected)=\"picker()?.selectYear($event)\"\n        (monthSelected)=\"picker()?.selectMonth($event)\"\n        (selectedChange)=\"dateSelected($event)\" />\n    }\n\n    @if (pickerType() === 'both' || pickerType() === 'timer') {\n    <nxt-date-time-timer class=\"nxt-dt-container-row\"\n        [pickerMoment]=\"pickerMoment\"\n        [min]=\"min()\"\n        [max]=\"max()\"\n        [showSecondsTimer]=\"!!showSecondsTimer()\"\n        [hour12Timer]=\"!!hour12Timer()\"\n        [stepHour]=\"stepHour() ?? 1\"\n        [stepMinute]=\"stepMinute() ?? 1\"\n        [stepSecond]=\"stepSecond() ?? 1\"\n        (selectedChange)=\"timeSelected($event)\" />\n    }\n\n    @if (isInRangeMode()) {\n    <div role=\"radiogroup\"\n        class=\"nxt-dt-container-info nxt-dt-container-row\">\n        <div role=\"radio\"\n            [tabindex]=\"activeSelectedIndex() === 0 ? 0 : -1\"\n            [attr.aria-checked]=\"activeSelectedIndex() === 0\"\n            class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-from\"\n            [class.nxt-dt-container-info-active]=\"activeSelectedIndex() === 0\"\n            (click)=\"handleClickOnInfoGroup($event, 0)\"\n            (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n            #from>\n            <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\n                tabindex=\"-1\">\n                <span class=\"nxt-dt-container-info-label\">{{fromLabel()}}:</span>\n                <span class=\"nxt-dt-container-info-value\">{{fromFormattedValue()}}</span>\n            </span>\n        </div>\n        <div role=\"radio\"\n            [tabindex]=\"activeSelectedIndex() === 1 ? 0 : -1\"\n            [attr.aria-checked]=\"activeSelectedIndex() === 1\"\n            class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-to\"\n            [class.nxt-dt-container-info-active]=\"activeSelectedIndex() === 1\"\n            (click)=\"handleClickOnInfoGroup($event, 1)\"\n            (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n            #to>\n            <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\n                tabindex=\"-1\">\n                <span class=\"nxt-dt-container-info-label\">{{toLabel()}}:</span>\n                <span class=\"nxt-dt-container-info-value\">{{toFormattedValue()}}</span>\n            </span>\n        </div>\n    </div>\n    }\n\n    @if (showControlButtons()) {\n    <div class=\"nxt-dt-container-buttons nxt-dt-container-row\">\n        <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"onCancelClicked($event)\">\n            <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{cancelLabel()}}\n            </span>\n        </button>\n        <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"onSetClicked($event)\">\n            <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{setLabel()}}\n            </span>\n        </button>\n    </div>\n    }\n</div>\n" }]
         }], propDecorators: { calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CalendarComponent), { isSignal: true }] }], timer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TimerComponent), { isSignal: true }] }] } });
 
 /** @internal */
@@ -2198,7 +2366,8 @@ const NXT_DATETIME_VALUE_ACCESSOR$1 = {
 class DateTimeInlineComponent extends DateTimeDirective {
     constructor() {
         super(...arguments);
-        this.container = viewChild(DateTimeContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
+        this.container = viewChild(DateTimeContainerComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
         /**
          * Set the type of the dateTime picker
          *
@@ -2206,11 +2375,12 @@ class DateTimeInlineComponent extends DateTimeDirective {
          * -    `'calendar'` - show only calendar
          * -    `'timer'` - show only timer
          */
-        this.pickerType = input('both', ...(ngDevMode ? [{ debugName: "pickerType" }] : []));
+        this.pickerType = input('both', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerType" }] : /* istanbul ignore next */ []));
         /** Whether the date time picker should be disabled */
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._disabled = input(false, { ...(ngDevMode ? { debugName: "_disabled" } : {}), alias: 'disabled' });
-        this.disabled = linkedSignal({ ...(ngDevMode ? { debugName: "disabled" } : {}), source: () => this._disabled(),
+        this._disabled = input(false, { ...(ngDevMode ? { debugName: "_disabled" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+        this.disabled = linkedSignal({ ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), source: () => this._disabled(),
             computation: v => v });
         /**
          * The picker select mode
@@ -2220,20 +2390,22 @@ class DateTimeInlineComponent extends DateTimeDirective {
          * -    `'rangeFrom'` - an open range with a fixed start date
          * -    `'rangeTo'` - an open range with a fixed end date
          */
-        this.selectMode = input('single', ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
+        this.selectMode = input('single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._valueInput = input(undefined, { ...(ngDevMode ? { debugName: "_valueInput" } : {}), alias: 'value' });
-        this._value = linkedSignal({ ...(ngDevMode ? { debugName: "_value" } : {}), source: () => this._valueInput(),
+        this._valueInput = input(undefined, { ...(ngDevMode ? { debugName: "_valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        this._value = linkedSignal({ ...(ngDevMode ? { debugName: "_value" } : /* istanbul ignore next */ {}), source: () => this._valueInput(),
             computation: v => v });
         this.value = computed(() => {
             let value = this._value();
             value = this.dateTimeAdapter.deserialize(value);
             value = this.getValidDate(value);
             return value;
-        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._valuesInput = input(undefined, { ...(ngDevMode ? { debugName: "_valuesInput" } : {}), alias: 'values' });
-        this._values = linkedSignal({ ...(ngDevMode ? { debugName: "_values" } : {}), source: () => this._valuesInput(),
+        this._valuesInput = input(undefined, { ...(ngDevMode ? { debugName: "_valuesInput" } : /* istanbul ignore next */ {}), alias: 'values' });
+        this._values = linkedSignal({ ...(ngDevMode ? { debugName: "_values" } : /* istanbul ignore next */ {}), source: () => this._valuesInput(),
             computation: v => v });
         this.values = computed(() => {
             let values = this._values();
@@ -2248,13 +2420,14 @@ class DateTimeInlineComponent extends DateTimeDirective {
             else {
                 return [];
             }
-        }, ...(ngDevMode ? [{ debugName: "values" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
         /**
          * The date to show when picker opens
          *
          * Defaults to selected date (if available) or current date.
          */
-        this._startAt = input(undefined, { ...(ngDevMode ? { debugName: "_startAt" } : {}), 
+        this._startAt = input(undefined, { ...(ngDevMode ? { debugName: "_startAt" } : /* istanbul ignore next */ {}), 
             // eslint-disable-next-line @angular-eslint/no-input-rename
             alias: 'startAt',
             transform: date => this.getValidDate(this.dateTimeAdapter.deserialize(date)) });
@@ -2277,16 +2450,18 @@ class DateTimeInlineComponent extends DateTimeDirective {
             else {
                 return;
             }
-        }, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
         /** A function to filter available date & time */
-        this.dateTimeFilter = input(...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : []));
+        this.dateTimeFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : /* istanbul ignore next */ []));
         /** The minimum valid date */
-        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : {}), transform: value => {
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
         /** The maximum valid date */
-        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : {}), transform: value => {
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => {
                 value = this.dateTimeAdapter.deserialize(value);
                 return this.getValidDate(value);
             } });
@@ -2302,16 +2477,18 @@ class DateTimeInlineComponent extends DateTimeDirective {
          * This doesn't imply a change on the selected date.
          */
         this.monthSelected = output();
-        this.selected = linkedSignal({ ...(ngDevMode ? { debugName: "selected" } : {}), source: () => this.value(),
+        this.selected = linkedSignal({ ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), source: () => this.value(),
             computation: v => v });
-        this.selecteds = linkedSignal({ ...(ngDevMode ? { debugName: "selecteds" } : {}), source: () => this.values(),
+        this.selecteds = linkedSignal({ ...(ngDevMode ? { debugName: "selecteds" } : /* istanbul ignore next */ {}), source: () => this.values(),
             computation: v => v || [] });
         this.isOpen = signal(true).asReadonly();
         this.pickerMode = signal('inline').asReadonly();
-        this.isInSingleMode = computed(() => this.selectMode() === 'single', ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : []));
+        this.isInSingleMode = computed(() => this.selectMode() === 'single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : /* istanbul ignore next */ []));
         this.isInRangeMode = computed(() => (this.selectMode() === 'range' ||
             this.selectMode() === 'rangeFrom' ||
-            this.selectMode() === 'rangeTo'), ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : []));
+            this.selectMode() === 'rangeTo'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         const container = this.container();
@@ -2367,10 +2544,10 @@ class DateTimeInlineComponent extends DateTimeDirective {
     selectMonth(normalizedMonth) {
         this.monthSelected.emit(normalizedMonth);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeInlineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: DateTimeInlineComponent, isStandalone: true, selector: "nxt-date-time-inline", inputs: { pickerType: { classPropertyName: "pickerType", publicName: "pickerType", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, _valueInput: { classPropertyName: "_valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, _valuesInput: { classPropertyName: "_valuesInput", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, _startAt: { classPropertyName: "_startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", 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 } }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.nxt-dt-inline": "true" } }, providers: [NXT_DATETIME_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "container", first: true, predicate: DateTimeContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<nxt-date-time-container />\r\n", styles: [""], dependencies: [{ kind: "component", type: DateTimeContainerComponent, selector: "nxt-date-time-container" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeInlineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: DateTimeInlineComponent, isStandalone: true, selector: "nxt-date-time-inline", inputs: { pickerType: { classPropertyName: "pickerType", publicName: "pickerType", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, _valueInput: { classPropertyName: "_valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, _valuesInput: { classPropertyName: "_valuesInput", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, _startAt: { classPropertyName: "_startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", 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 } }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.nxt-dt-inline": "true" } }, providers: [NXT_DATETIME_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "container", first: true, predicate: DateTimeContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<nxt-date-time-container />\r\n", styles: [""], dependencies: [{ kind: "component", type: DateTimeContainerComponent, selector: "nxt-date-time-container" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeInlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeInlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxt-date-time-inline', preserveWhitespaces: false, providers: [NXT_DATETIME_VALUE_ACCESSOR$1], imports: [
                         DateTimeContainerComponent
@@ -2403,20 +2580,21 @@ class DateTimeInputDirective {
         /**
          * The date & time picker this input is associated with
          */
-        this.dateTime = input(undefined, { ...(ngDevMode ? { debugName: "dateTime" } : {}), alias: 'nxtDateTime' });
+        this.dateTime = input(undefined, { ...(ngDevMode ? { debugName: "dateTime" } : /* istanbul ignore next */ {}), alias: 'nxtDateTime' });
         /**
          * A function to filter available date & time
          */
-        this.dateTimeFilter = input(...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : []));
+        this.dateTimeFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateTimeFilter" }] : /* istanbul ignore next */ []));
         /** Whether the date & time picker input is disabled */
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._disabled = input(false, { ...(ngDevMode ? { debugName: "_disabled" } : {}), alias: 'disabled' });
-        this.disabled = linkedSignal({ ...(ngDevMode ? { debugName: "disabled" } : {}), source: () => this._disabled(),
+        this._disabled = input(false, { ...(ngDevMode ? { debugName: "_disabled" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+        this.disabled = linkedSignal({ ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), source: () => this._disabled(),
             computation: v => v });
         /** The minimum valid date */
-        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : {}), transform: value => this.getValidDate(this.dateTimeAdapter.deserialize(value)) });
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => this.getValidDate(this.dateTimeAdapter.deserialize(value)) });
         /** The maximum valid date */
-        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : {}), transform: value => this.getValidDate(this.dateTimeAdapter.deserialize(value)) });
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => this.getValidDate(this.dateTimeAdapter.deserialize(value)) });
         /**
          * The picker select mode
          *
@@ -2425,14 +2603,16 @@ class DateTimeInputDirective {
          * -    `'rangeFrom'` - an open range with a fixed start date
          * -    `'rangeTo'` - an open range with a fixed end date
          */
-        this.selectMode = input('single', ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
+        this.selectMode = input('single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
         /**
          * The character to separate the 'from' and 'to' in input value
          */
-        this.rangeSeparator = input('~', ...(ngDevMode ? [{ debugName: "rangeSeparator" }] : []));
+        this.rangeSeparator = input('~', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangeSeparator" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._valueInput = input(undefined, { ...(ngDevMode ? { debugName: "_valueInput" } : {}), alias: 'value' });
-        this._value = linkedSignal({ ...(ngDevMode ? { debugName: "_value" } : {}), source: () => this._valueInput(),
+        this._valueInput = input(undefined, { ...(ngDevMode ? { debugName: "_valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        this._value = linkedSignal({ ...(ngDevMode ? { debugName: "_value" } : /* istanbul ignore next */ {}), source: () => this._valueInput(),
             computation: v => v });
         this.valueValidity = computed(() => {
             let value = this._value();
@@ -2442,12 +2622,13 @@ class DateTimeInputDirective {
                 value,
                 lastValueValid
             };
-        }, { ...(ngDevMode ? { debugName: "valueValidity" } : {}), equal: (a, b) => a.lastValueValid == b.lastValueValid && this.dateTimeAdapter.isEqual(a.value, b.value) });
-        this.parsedValue = linkedSignal(() => this.valueValidity().value, ...(ngDevMode ? [{ debugName: "parsedValue" }] : []));
+        }, { ...(ngDevMode ? { debugName: "valueValidity" } : /* istanbul ignore next */ {}), equal: (a, b) => a.lastValueValid == b.lastValueValid && this.dateTimeAdapter.isEqual(a.value, b.value) });
+        this.parsedValue = linkedSignal(() => this.valueValidity().value, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parsedValue" }] : /* istanbul ignore next */ []));
         this.value = this.parsedValue.asReadonly();
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._valuesInput = input(new Array(), { ...(ngDevMode ? { debugName: "_valuesInput" } : {}), alias: 'values' });
-        this._values = linkedSignal({ ...(ngDevMode ? { debugName: "_values" } : {}), source: () => this._valuesInput(),
+        this._valuesInput = input(new Array(), { ...(ngDevMode ? { debugName: "_valuesInput" } : /* istanbul ignore next */ {}), alias: 'values' });
+        this._values = linkedSignal({ ...(ngDevMode ? { debugName: "_values" } : /* istanbul ignore next */ {}), source: () => this._valuesInput(),
             computation: v => v });
         this.valuesValidity = computed(() => {
             let values = this._values();
@@ -2470,8 +2651,9 @@ class DateTimeInputDirective {
                 values,
                 lastValueValid
             };
-        }, { ...(ngDevMode ? { debugName: "valuesValidity" } : {}), equal: (a, b) => a.lastValueValid == b.lastValueValid && this.dateTimeAdapter.isEqual(a.values[0], b.values[0]) && this.dateTimeAdapter.isEqual(a.values[1], b.values[1]) });
-        this.parsedValues = linkedSignal(() => this.valuesValidity().values, ...(ngDevMode ? [{ debugName: "parsedValues" }] : []));
+        }, { ...(ngDevMode ? { debugName: "valuesValidity" } : /* istanbul ignore next */ {}), equal: (a, b) => a.lastValueValid == b.lastValueValid && this.dateTimeAdapter.isEqual(a.values[0], b.values[0]) && this.dateTimeAdapter.isEqual(a.values[1], b.values[1]) });
+        this.parsedValues = linkedSignal(() => this.valuesValidity().values, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parsedValues" }] : /* istanbul ignore next */ []));
         this.values = this.parsedValues.asReadonly();
         this.nativeElementValue = computed(() => {
             /**
@@ -2520,7 +2702,8 @@ class DateTimeInputDirective {
                 }
             }
             return undefined;
-        }, ...(ngDevMode ? [{ debugName: "nativeElementValue" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeElementValue" }] : /* istanbul ignore next */ []));
         /**
          * Callback to invoke when `change` event is fired on this `<input>`
          */
@@ -2529,16 +2712,19 @@ class DateTimeInputDirective {
          * Callback to invoke when an `input` event is fired on this `<input>`.
          */
         this.dateTimeInput = output();
-        this.isInSingleMode = computed(() => this.selectMode() === 'single', ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : []));
+        this.isInSingleMode = computed(() => this.selectMode() === 'single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : /* istanbul ignore next */ []));
         this.isInRangeMode = computed(() => {
             const selectMode = this.selectMode();
             return (selectMode === 'range' ||
                 selectMode === 'rangeFrom' ||
                 selectMode === 'rangeTo');
-        }, ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : /* istanbul ignore next */ []));
         /** The date-time-picker that this input is associated with */
-        this.dtPicker = signal(undefined, ...(ngDevMode ? [{ debugName: "dtPicker" }] : []));
-        this.lastValueValid = linkedSignal({ ...(ngDevMode ? { debugName: "lastValueValid" } : {}), source: () => this.valueValidity().lastValueValid && this.valuesValidity().lastValueValid,
+        this.dtPicker = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dtPicker" }] : /* istanbul ignore next */ []));
+        this.lastValueValid = linkedSignal({ ...(ngDevMode ? { debugName: "lastValueValid" } : /* istanbul ignore next */ {}), source: () => this.valueValidity().lastValueValid && this.valuesValidity().lastValueValid,
             computation: v => v });
         /** The form control validator for whether the input parses */
         this.parseValidator = computed(() => {
@@ -2546,7 +2732,8 @@ class DateTimeInputDirective {
             return () => lastValueValid
                 ? null
                 : { dateTimeParse: { text: this.elmRef.nativeElement.value } };
-        }, ...(ngDevMode ? [{ debugName: "parseValidator" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parseValidator" }] : /* istanbul ignore next */ []));
         /** The form control validator for the min date */
         this.minValidator = computed(() => {
             const min = this.min();
@@ -2578,7 +2765,8 @@ class DateTimeInputDirective {
                 }
                 return null;
             };
-        }, ...(ngDevMode ? [{ debugName: "minValidator" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minValidator" }] : /* istanbul ignore next */ []));
         /** The form control validator for the max date */
         this.maxValidator = computed(() => {
             const max = this.max();
@@ -2610,7 +2798,8 @@ class DateTimeInputDirective {
                 }
                 return null;
             };
-        }, ...(ngDevMode ? [{ debugName: "maxValidator" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxValidator" }] : /* istanbul ignore next */ []));
         /** The form control validator for the date filter */
         this.filterValidator = computed(() => {
             const dateTimeFilter = this.dateTimeFilter();
@@ -2622,7 +2811,8 @@ class DateTimeInputDirective {
                     ? null
                     : { dateTimeFilter: true };
             };
-        }, ...(ngDevMode ? [{ debugName: "filterValidator" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterValidator" }] : /* istanbul ignore next */ []));
         /**
          * The form control validator for the range.
          * Check whether the 'before' value is before the 'to' value
@@ -2641,7 +2831,8 @@ class DateTimeInputDirective {
                     ? null
                     : { dateTimeRange: true };
             };
-        }, ...(ngDevMode ? [{ debugName: "rangeValidator" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangeValidator" }] : /* istanbul ignore next */ []));
         /** The combined form control validator for this input */
         this.validator = computed(() => Validators.compose([
             this.parseValidator(),
@@ -2649,17 +2840,21 @@ class DateTimeInputDirective {
             this.maxValidator(),
             this.filterValidator(),
             this.rangeValidator()
-        ]), ...(ngDevMode ? [{ debugName: "validator" }] : []));
+        ]), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validator" }] : /* istanbul ignore next */ []));
         /** Emits when the value changes (either due to user input or programmatic change) */
         this.valueChange = output();
         /** Emits when the disabled state has changed */
         this.disabledChange = output();
         /** @internal */
-        this.inputAriaOwns = computed(() => (this.dtPicker()?.isOpen() && this.dtPicker().id) || undefined, ...(ngDevMode ? [{ debugName: "inputAriaOwns" }] : []));
+        this.inputAriaOwns = computed(() => (this.dtPicker()?.isOpen() && this.dtPicker().id) || undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputAriaOwns" }] : /* istanbul ignore next */ []));
         /** @internal */
-        this.minIso8601 = computed(() => this.min() ? this.dateTimeAdapter.toIso8601(this.min()) : undefined, ...(ngDevMode ? [{ debugName: "minIso8601" }] : []));
+        this.minIso8601 = computed(() => this.min() ? this.dateTimeAdapter.toIso8601(this.min()) : undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minIso8601" }] : /* istanbul ignore next */ []));
         /** @internal */
-        this.maxIso8601 = computed(() => this.max() ? this.dateTimeAdapter.toIso8601(this.max()) : undefined, ...(ngDevMode ? [{ debugName: "maxIso8601" }] : []));
+        this.maxIso8601 = computed(() => this.max() ? this.dateTimeAdapter.toIso8601(this.max()) : undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxIso8601" }] : /* istanbul ignore next */ []));
         let picker;
         effect(() => {
             /**
@@ -2978,13 +3173,13 @@ class DateTimeInputDirective {
         }
         return first == second;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: DateTimeInputDirective, isStandalone: true, selector: "input[nxtDateTime]", inputs: { dateTime: { classPropertyName: "dateTime", publicName: "nxtDateTime", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", 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 }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: true, isRequired: false, transformFunction: null }, _valueInput: { classPropertyName: "_valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, _valuesInput: { classPropertyName: "_valuesInput", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput", valueChange: "valueChange", disabledChange: "disabledChange" }, host: { listeners: { "keydown": "handleKeydownOnHost($event)", "blur": "handleBlurOnHost($event)", "input": "handleInputOnHost($event)", "change": "handleChangeOnHost($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "inputAriaOwns()", "attr.min": "minIso8601()", "attr.max": "maxIso8601()", "disabled": "disabled()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DateTimeInputDirective, isStandalone: true, selector: "input[nxtDateTime]", inputs: { dateTime: { classPropertyName: "dateTime", publicName: "nxtDateTime", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFilter: { classPropertyName: "dateTimeFilter", publicName: "dateTimeFilter", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", 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 }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: true, isRequired: false, transformFunction: null }, _valueInput: { classPropertyName: "_valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, _valuesInput: { classPropertyName: "_valuesInput", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput", valueChange: "valueChange", disabledChange: "disabledChange" }, host: { listeners: { "keydown": "handleKeydownOnHost($event)", "blur": "handleBlurOnHost($event)", "input": "handleInputOnHost($event)", "change": "handleChangeOnHost($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "inputAriaOwns()", "attr.min": "minIso8601()", "attr.max": "maxIso8601()", "disabled": "disabled()" } }, providers: [
             NXT_DATETIME_VALUE_ACCESSOR,
             NXT_DATETIME_VALIDATORS
         ], exportAs: ["nxtDateTimeInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[nxtDateTime]',
@@ -3009,22 +3204,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 
 class DateTimeTriggerDirective {
     constructor() {
-        this.dtPicker = input(undefined, { ...(ngDevMode ? { debugName: "dtPicker" } : {}), alias: 'nxtDateTimeTrigger' });
+        this.dtPicker = input(undefined, { ...(ngDevMode ? { debugName: "dtPicker" } : /* istanbul ignore next */ {}), alias: 'nxtDateTimeTrigger' });
+        /** Use the event to calculate origin when opening in dialog mode */
+        this.dialogOrigin = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogOrigin" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._disabled = input(undefined, { ...(ngDevMode ? { debugName: "_disabled" } : {}), alias: 'disabled' });
-        this.disabled = computed(() => this._disabled() ?? !!this.dtPicker()?.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this._disabled = input(undefined, { ...(ngDevMode ? { debugName: "_disabled" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+        this.disabled = computed(() => this._disabled() ?? !!this.dtPicker()?.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     }
     handleClickOnHost(event) {
         const dtPicker = this.dtPicker();
         if (dtPicker) {
-            dtPicker.open();
+            dtPicker.open(this.dialogOrigin() ? event : undefined);
             event.stopPropagation();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: DateTimeTriggerDirective, isStandalone: true, selector: "[nxtDateTimeTrigger]", inputs: { dtPicker: { classPropertyName: "dtPicker", publicName: "nxtDateTimeTrigger", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.nxt-dt-trigger-disabled": "disabled()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DateTimeTriggerDirective, isStandalone: true, selector: "[nxtDateTimeTrigger]", inputs: { dtPicker: { classPropertyName: "dtPicker", publicName: "nxtDateTimeTrigger", isSignal: true, isRequired: false, transformFunction: null }, dialogOrigin: { classPropertyName: "dialogOrigin", publicName: "dialogOrigin", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.nxt-dt-trigger-disabled": "disabled()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nxtDateTimeTrigger]',
@@ -3033,7 +3232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '(click)': 'handleClickOnHost($event)'
                     }
                 }]
-        }], propDecorators: { dtPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxtDateTimeTrigger", required: false }] }], _disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], propDecorators: { dtPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxtDateTimeTrigger", required: false }] }], dialogOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogOrigin", required: false }] }], _disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /** @internal */
 let uniqueId = 0;
@@ -3067,6 +3266,11 @@ class DialogConfig {
         this.width = '';
         /** Height of the dialog */
         this.height = '';
+        /**
+         * The min-width of the overlay panel.
+         * If a number is provided, pixel units are assumed.
+         */
+        this.minWidth = '18.5em';
         /**
          * The max-width of the overlay panel.
          * If a number is provided, pixel units are assumed.
@@ -3121,14 +3325,21 @@ class DialogRef {
     }
     close(dialogResult) {
         this.result = dialogResult;
-        outputToObservable(this.container.animationStateChanged)
-            .pipe(filter((event) => event.phaseName === 'start'), take(1))
-            .subscribe(() => {
+        if (!this.container.destroyRef.destroyed) {
+            outputToObservable(this.container.animationStateChanged)
+                .pipe(filter((event) => event.phaseName === 'start'), take(1))
+                .subscribe(() => {
+                this._beforeClose$.next(dialogResult);
+                this._beforeClose$.complete();
+                this.overlayRef.detachBackdrop();
+            });
+            this.container.startExitAnimation();
+        }
+        else {
             this._beforeClose$.next(dialogResult);
             this._beforeClose$.complete();
             this.overlayRef.detachBackdrop();
-        });
-        this.container.startExitAnimation();
+        }
     }
     /**
      * Gets an observable that emits when the overlay's backdrop has been clicked.
@@ -3220,45 +3431,78 @@ function extendObject(dest, ...sources) {
     return dest;
 }
 
-/** @internal */
-const zoomFadeIn = {
-    opacity: 0,
-    transform: 'translateX({{ x }}) translateY({{ y }}) scale({{scale}})'
-};
-/** @internal */
-const zoomFadeInFrom = {
-    opacity: 0,
-    transform: 'translateX({{ x }}) translateY({{ y }}) scale({{scale}})',
-    transformOrigin: '{{ ox }} {{ oy }}'
-};
 /** @internal */
 class DialogContainerComponent extends BasePortalOutlet {
+    static { this.animate = true; }
     constructor() {
-        super(...arguments);
+        super();
         this.elementRef = inject(ElementRef);
         this.focusTrapFactory = inject(ConfigurableFocusTrapFactory);
         this.document = inject(DOCUMENT, { optional: true });
-        this.portalOutlet = viewChild(CdkPortalOutlet, ...(ngDevMode ? [{ debugName: "portalOutlet" }] : []));
+        this.destroyRef = inject(DestroyRef);
+        this.portalOutlet = viewChild(CdkPortalOutlet, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "portalOutlet" }] : /* istanbul ignore next */ []));
         /** The class that traps and manages focus within the dialog */
-        this.focusTrap = signal(undefined, ...(ngDevMode ? [{ debugName: "focusTrap" }] : []));
+        this.focusTrap = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusTrap" }] : /* istanbul ignore next */ []));
         /** ID of the element that should be considered as the dialog's label */
-        this.ariaLabelledBy = signal(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
+        this.ariaLabelledBy = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
         /** Emits when an animation state changes */
         this.animationStateChanged = output();
-        this.isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
-        this._config = signal(undefined, ...(ngDevMode ? [{ debugName: "_config" }] : []));
+        this.isAnimating = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAnimating" }] : /* istanbul ignore next */ []));
+        this._config = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_config" }] : /* istanbul ignore next */ []));
         this.config = this._config.asReadonly();
-        this.state = signal('enter', ...(ngDevMode ? [{ debugName: "state" }] : []));
         // for animation purpose
-        this.params = signal({
+        this.params = {
             x: '0px',
             y: '0px',
             ox: '50%',
             oy: '50%',
             scale: 0
-        }, ...(ngDevMode ? [{ debugName: "params" }] : []));
-        /** @internal */
-        this.dialogContainerAnimation = computed(() => ({ value: this.state(), params: this.params() }), ...(ngDevMode ? [{ debugName: "dialogContainerAnimation" }] : []));
+        };
+        afterNextRender(() => {
+            const params = this.params;
+            const target = this.elementRef.nativeElement;
+            this.isAnimating.set(true);
+            this.animationStateChanged.emit({
+                phaseName: 'start',
+                toState: 'enter'
+            });
+            if (target && DialogContainerComponent.animate) {
+                target.animate([
+                    {
+                        opacity: 0,
+                        transform: `translateX(${params.x}) translateY(${params.y}) scale(${params.scale})`,
+                        transformOrigin: `${params.ox} ${params.oy}`
+                    },
+                    {
+                        opacity: 1,
+                        transform: 'translateX(0px) translateY(0px) scale(1)',
+                        transformOrigin: '50% 50%'
+                    }
+                ], {
+                    duration: 300,
+                    easing: 'cubic-bezier(0.35, 0, 0.25, 1)'
+                }).addEventListener('finish', () => {
+                    target.animate([
+                        { transform: 'scale(1)', offset: 0 },
+                        { transform: 'scale(1.05)', offset: 0.3 },
+                        { transform: 'scale(.95)', offset: 0.8 },
+                        { transform: 'scale(1)', offset: 1.0 }
+                    ], {
+                        duration: 150
+                    }).addEventListener('finish', () => {
+                        this.endEnterAnimation();
+                    });
+                });
+            }
+            else {
+                this.endEnterAnimation();
+            }
+        });
     }
     /**
      * Attach a ComponentPortal as content to this dialog container.
@@ -3280,22 +3524,51 @@ class DialogContainerComponent extends BasePortalOutlet {
             this.calculateZoomOrigin(config.event);
         }
     }
-    onAnimationStart(event) {
+    startExitAnimation() {
+        const params = this.params;
+        const target = this.elementRef.nativeElement;
         this.isAnimating.set(true);
-        this.animationStateChanged.emit(event);
-    }
-    onAnimationDone(event) {
-        if (event.toState === 'enter') {
-            this.trapFocus();
+        this.animationStateChanged.emit({
+            phaseName: 'start',
+            toState: 'exit'
+        });
+        if (target && DialogContainerComponent.animate) {
+            target.animate([
+                {
+                    opacity: 1,
+                    transform: 'translateX(0px) translateY(0px) scale(1)'
+                },
+                {
+                    opacity: 0,
+                    transform: `translateX(${params.x}) translateY(${params.y}) scale(${params.scale})`
+                }
+            ], {
+                duration: 200
+            }).addEventListener('finish', () => {
+                this.endExitAnimation();
+            });
         }
-        else if (event.toState === 'exit') {
-            this.restoreFocus();
+        else {
+            this.endExitAnimation();
         }
-        this.animationStateChanged.emit(event);
+    }
+    endEnterAnimation() {
+        this.trapFocus();
+        if (!this.destroyRef.destroyed)
+            this.animationStateChanged.emit({
+                phaseName: 'done',
+                toState: 'enter'
+            });
         this.isAnimating.set(false);
     }
-    startExitAnimation() {
-        this.state.set('exit');
+    endExitAnimation() {
+        this.restoreFocus();
+        if (!this.destroyRef.destroyed)
+            this.animationStateChanged.emit({
+                phaseName: 'done',
+                toState: 'exit'
+            });
+        this.isAnimating.set(false);
     }
     /**
      * Calculate origin used in the `zoomFadeInFrom()`
@@ -3310,13 +3583,13 @@ class DialogContainerComponent extends BasePortalOutlet {
         const y = clientY - hh;
         const ox = clientX / window.innerWidth;
         const oy = clientY / window.innerHeight;
-        this.params.set({
+        this.params = {
             x: `${x}px`,
             y: `${y}px`,
             ox: `${ox * 100}%`,
             oy: `${oy * 100}%`,
             scale: 0
-        });
+        };
     }
     /**
      * Save the focused element before dialog was open
@@ -3346,58 +3619,12 @@ class DialogContainerComponent extends BasePortalOutlet {
             this.focusTrap.set(undefined);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: DialogContainerComponent, isStandalone: true, selector: "nxt-dialog-container", outputs: { animationStateChanged: "animationStateChanged" }, host: { listeners: { "@slideModal.start": "onAnimationStart($event)", "@slideModal.done": "onAnimationDone($event)" }, properties: { "class.nxt-dialog-container": "true", "attr.tabindex": "-1", "attr.aria-labelledby": "ariaLabelledBy()", "attr.id": "config()?.id", "attr.role": "config()?.role", "attr.aria-describedby": "config()?.ariaDescribedBy", "@slideModal": "dialogContainerAnimation()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet />\r\n", dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
-            trigger('slideModal', [
-                transition('void => enter', [
-                    style(zoomFadeInFrom),
-                    animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style('*')),
-                    animate('150ms', keyframes([
-                        style({ transform: 'scale(1)', offset: 0 }),
-                        style({ transform: 'scale(1.05)', offset: 0.3 }),
-                        style({ transform: 'scale(.95)', offset: 0.8 }),
-                        style({ transform: 'scale(1)', offset: 1.0 })
-                    ])),
-                    animateChild()
-                ], {
-                    params: {
-                        x: '0px',
-                        y: '0px',
-                        ox: '50%',
-                        oy: '50%',
-                        scale: 1
-                    }
-                }),
-                transition('enter => exit', [animateChild(), animate(200, style(zoomFadeIn))], { params: { x: '0px', y: '0px', ox: '50%', oy: '50%' } })
-            ])
-        ] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: DialogContainerComponent, isStandalone: true, selector: "nxt-dialog-container", outputs: { animationStateChanged: "animationStateChanged" }, host: { properties: { "class.nxt-dialog-container": "true", "attr.tabindex": "-1", "attr.aria-labelledby": "ariaLabelledBy()", "attr.id": "config()?.id", "attr.role": "config()?.role", "attr.aria-describedby": "config()?.ariaDescribedBy" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet />\r\n", dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxt-dialog-container', animations: [
-                        trigger('slideModal', [
-                            transition('void => enter', [
-                                style(zoomFadeInFrom),
-                                animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style('*')),
-                                animate('150ms', keyframes([
-                                    style({ transform: 'scale(1)', offset: 0 }),
-                                    style({ transform: 'scale(1.05)', offset: 0.3 }),
-                                    style({ transform: 'scale(.95)', offset: 0.8 }),
-                                    style({ transform: 'scale(1)', offset: 1.0 })
-                                ])),
-                                animateChild()
-                            ], {
-                                params: {
-                                    x: '0px',
-                                    y: '0px',
-                                    ox: '50%',
-                                    oy: '50%',
-                                    scale: 1
-                                }
-                            }),
-                            transition('enter => exit', [animateChild(), animate(200, style(zoomFadeIn))], { params: { x: '0px', y: '0px', ox: '50%', oy: '50%' } })
-                        ])
-                    ], imports: [
+            args: [{ selector: 'nxt-dialog-container', imports: [
                         CdkPortalOutlet
                     ], host: {
                         '[class.nxt-dialog-container]': 'true',
@@ -3405,12 +3632,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[attr.aria-labelledby]': 'ariaLabelledBy()',
                         '[attr.id]': 'config()?.id',
                         '[attr.role]': 'config()?.role',
-                        '[attr.aria-describedby]': 'config()?.ariaDescribedBy',
-                        '[@slideModal]': 'dialogContainerAnimation()',
-                        '(@slideModal.start)': 'onAnimationStart($event)',
-                        '(@slideModal.done)': 'onAnimationDone($event)'
+                        '[attr.aria-describedby]': 'config()?.ariaDescribedBy'
                     }, template: "<ng-template cdkPortalOutlet />\r\n" }]
-        }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], animationStateChanged: [{ type: i0.Output, args: ["animationStateChanged"] }] } });
+        }], ctorParameters: () => [], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], animationStateChanged: [{ type: i0.Output, args: ["animationStateChanged"] }] } });
 
 /** @internal */
 const NXT_DIALOG_DATA = new InjectionToken('NXT_DIALOG_DATA');
@@ -3604,10 +3828,10 @@ class DialogService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3637,19 +3861,22 @@ class DateTimeComponent extends DateTimeDirective {
         this.overlay = inject(Overlay);
         this.viewContainerRef = inject(ViewContainerRef);
         this.dialogService = inject(DialogService);
-        this.ngZone = inject(NgZone);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
         this.defaultScrollStrategy = inject(NXT_DTPICKER_SCROLL_STRATEGY, { optional: true }) ?? (() => this.overlay.scrollStrategies.block());
         this.document = inject(DOCUMENT, { optional: true });
         /** Custom class for the picker backdrop */
-        this.backdropClass = input(...(ngDevMode ? [undefined, { debugName: "backdropClass" }] : []));
+        this.backdropClass = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "backdropClass" }] : /* istanbul ignore next */ []));
         /** Custom class for the picker overlay pane */
-        this.panelClass = input(...(ngDevMode ? [undefined, { debugName: "panelClass" }] : []));
+        this.panelClass = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "panelClass" }] : /* istanbul ignore next */ []));
         /**
          * The date to show when picker opens
          *
          * Defaults to selected date (if available) or current date.
          */
-        this._startAt = input(undefined, { ...(ngDevMode ? { debugName: "_startAt" } : {}), 
+        this._startAt = input(undefined, { ...(ngDevMode ? { debugName: "_startAt" } : /* istanbul ignore next */ {}), 
             // eslint-disable-next-line @angular-eslint/no-input-rename
             alias: 'startAt',
             transform: date => this.getValidDate(this.dateTimeAdapter.deserialize(date)) });
@@ -3674,7 +3901,8 @@ class DateTimeComponent extends DateTimeDirective {
                 }
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
         /**
          * Set the type of the dateTime picker
          *
@@ -3682,14 +3910,15 @@ class DateTimeComponent extends DateTimeDirective {
          * -    `'calendar'` - show only calendar
          * -    `'timer'` - show only timer
          */
-        this.pickerType = input('both', ...(ngDevMode ? [{ debugName: "pickerType" }] : []));
+        this.pickerType = input('both', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerType" }] : /* istanbul ignore next */ []));
         /**
          * The style the picker would open as
          *
          * -    `'popup'` - display picker attached to the trigger element
          * -    `'dialog'` - display picker as a dialog
          */
-        this.pickerMode = input('popup', { ...(ngDevMode ? { debugName: "pickerMode" } : {}), transform: mode => {
+        this.pickerMode = input('popup', { ...(ngDevMode ? { debugName: "pickerMode" } : /* istanbul ignore next */ {}), transform: mode => {
                 if (mode === 'popup') {
                     return mode;
                 }
@@ -3699,17 +3928,19 @@ class DateTimeComponent extends DateTimeDirective {
             } });
         /** Whether the date time picker should be disabled */
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._disabled = input(undefined, { ...(ngDevMode ? { debugName: "_disabled" } : {}), alias: 'disabled' });
-        this.disabled = linkedSignal({ ...(ngDevMode ? { debugName: "disabled" } : {}), source: () => this._disabled(),
+        this._disabled = input(undefined, { ...(ngDevMode ? { debugName: "_disabled" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+        this.disabled = linkedSignal({ ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), source: () => this._disabled(),
             computation: value => value ?? !!this.dtInput()?.disabled() });
         /** Whether the calendar is open */
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this._isOpen = input(false, { ...(ngDevMode ? { debugName: "_isOpen" } : {}), alias: 'isOpen' });
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this._isOpen = input(false, { ...(ngDevMode ? { debugName: "_isOpen" } : /* istanbul ignore next */ {}), alias: 'isOpen' });
+        this.isOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
         /**
          * The scroll strategy when the picker is open (see [CDK documentation](https://material.angular.io/cdk/overlay/overview#scroll-strategies))
          */
-        this.scrollStrategy = input(...(ngDevMode ? [undefined, { debugName: "scrollStrategy" }] : []));
+        this.scrollStrategy = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
         /**
          * Callback when the picker is opened
          */
@@ -3744,19 +3975,29 @@ class DateTimeComponent extends DateTimeDirective {
          * Emits when the date time picker is disabled
          */
         this.disabledChange = output();
-        this._dtInput = signal(undefined, ...(ngDevMode ? [{ debugName: "_dtInput" }] : []));
+        this._dtInput = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_dtInput" }] : /* istanbul ignore next */ []));
         this.dtInput = this._dtInput.asReadonly();
-        this.valueChange = computed(() => this._dtInput()?.valueChange, ...(ngDevMode ? [{ debugName: "valueChange" }] : []));
-        this.selected = signal(undefined, ...(ngDevMode ? [{ debugName: "selected" }] : []));
-        this.selecteds = signal(new Array(), ...(ngDevMode ? [{ debugName: "selecteds" }] : []));
+        this.valueChange = computed(() => this._dtInput()?.valueChange, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueChange" }] : /* istanbul ignore next */ []));
+        this.selected = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.selecteds = signal(new Array(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selecteds" }] : /* istanbul ignore next */ []));
         /** The minimum selectable date */
-        this.min = computed(() => this.dtInput()?.min(), ...(ngDevMode ? [{ debugName: "min" }] : []));
+        this.min = computed(() => this.dtInput()?.min(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
         /** The maximum selectable date */
-        this.max = computed(() => this.dtInput()?.max(), ...(ngDevMode ? [{ debugName: "max" }] : []));
-        this.dateTimeFilter = computed(() => this.dtInput()?.dateTimeFilter(), ...(ngDevMode ? [{ debugName: "dateTimeFilter" }] : []));
-        this.selectMode = computed(() => this.dtInput()?.selectMode(), ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
-        this.isInSingleMode = computed(() => !!this.dtInput()?.isInSingleMode(), ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : []));
-        this.isInRangeMode = computed(() => !!this.dtInput()?.isInRangeMode(), ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : []));
+        this.max = computed(() => this.dtInput()?.max(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.dateTimeFilter = computed(() => this.dtInput()?.dateTimeFilter(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateTimeFilter" }] : /* istanbul ignore next */ []));
+        this.selectMode = computed(() => this.dtInput()?.selectMode(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
+        this.isInSingleMode = computed(() => !!this.dtInput()?.isInSingleMode(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInSingleMode" }] : /* istanbul ignore next */ []));
+        this.isInRangeMode = computed(() => !!this.dtInput()?.isInRangeMode(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInRangeMode" }] : /* istanbul ignore next */ []));
         effect((registerCleanup) => {
             const vc = this.valueChange();
             if (vc) {
@@ -3816,7 +4057,7 @@ class DateTimeComponent extends DateTimeDirective {
         }
         this._dtInput.set(inputDirective);
     }
-    open() {
+    open(event) {
         if (this.isOpen() || this.disabled()) {
             return;
         }
@@ -3839,7 +4080,7 @@ class DateTimeComponent extends DateTimeDirective {
             this.selected.set(this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.selected()), this.dateTimeAdapter.getMonth(this.selected()), this.dateTimeAdapter.getDate(this.selected()), this.dateTimeAdapter.getHours(this._startAt()), this.dateTimeAdapter.getMinutes(this._startAt()), this.dateTimeAdapter.getSeconds(this._startAt())));
         }
         if (this.pickerMode() === 'dialog')
-            this.openAsDialog();
+            this.openAsDialog(event);
         else
             this.openAsPopup();
         if (this.pickerContainer)
@@ -3849,8 +4090,8 @@ class DateTimeComponent extends DateTimeDirective {
             this.close();
         });
         // Listen to picker container's confirmSelectedStream
-        this.confirmSelectedStreamSub = this.pickerContainer?.confirmSelectedStream.subscribe((event) => {
-            this.confirmSelect(event);
+        this.confirmSelectedStreamSub = this.pickerContainer?.confirmSelectedStream.subscribe((e) => {
+            this.confirmSelect(e);
         });
     }
     /**
@@ -3958,10 +4199,11 @@ class DateTimeComponent extends DateTimeDirective {
     /**
      * Open the picker as a dialog
      */
-    openAsDialog() {
+    openAsDialog(event) {
         const backdropClass = this.backdropClass();
         const panelClass = this.panelClass();
         this.dialogRef = this.dialogService.open(DateTimeContainerComponent, {
+            event,
             autoFocus: false,
             backdropClass: [
                 'cdk-overlay-dark-backdrop',
@@ -3996,12 +4238,12 @@ class DateTimeComponent extends DateTimeDirective {
             const componentRef = this.popupRef?.attach(this.pickerContainerPortal);
             this.pickerContainer = componentRef?.instance;
             // Update the position once the calendar has rendered.
-            this.ngZone.onStable
-                .asObservable()
-                .pipe(take(1))
-                .subscribe(() => {
-                this.popupRef?.updatePosition();
-            });
+            if (!this.destroyRef.destroyed)
+                afterNextRender(() => {
+                    this.popupRef?.updatePosition();
+                }, {
+                    injector: this.injector
+                });
             // emit open stream
             this.pickerOpenedStreamSub = this.pickerContainer?.pickerOpenedStream
                 .pipe(take(1))
@@ -4089,67 +4331,17 @@ class DateTimeComponent extends DateTimeDirective {
             ]);
         return;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: DateTimeComponent, isStandalone: true, selector: "nxt-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: true, isRequired: false, transformFunction: null }, pickerType: { classPropertyName: "pickerType", publicName: "pickerType", isSignal: true, isRequired: false, transformFunction: null }, pickerMode: { classPropertyName: "pickerMode", publicName: "pickerMode", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _isOpen: { classPropertyName: "_isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { afterPickerOpened: "open", afterPickerClosed: "close", yearSelected: "yearSelected", monthSelected: "monthSelected", isOpenChange: "isOpenChange", confirmSelectedChange: "confirmSelectedChange", disabledChange: "disabledChange" }, usesInheritance: true, ngImport: i0, template: "\r\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: DateTimeComponent, isStandalone: true, selector: "nxt-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: true, isRequired: false, transformFunction: null }, pickerType: { classPropertyName: "pickerType", publicName: "pickerType", isSignal: true, isRequired: false, transformFunction: null }, pickerMode: { classPropertyName: "pickerMode", publicName: "pickerMode", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _isOpen: { classPropertyName: "_isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { afterPickerOpened: "open", afterPickerClosed: "close", yearSelected: "yearSelected", monthSelected: "monthSelected", isOpenChange: "isOpenChange", confirmSelectedChange: "confirmSelectedChange", disabledChange: "disabledChange" }, usesInheritance: true, ngImport: i0, template: "\r\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxt-date-time', preserveWhitespaces: false, template: "\r\n" }]
         }], 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: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], pickerType: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerType", required: false }] }], pickerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerMode", required: false }] }], _disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], afterPickerOpened: [{ type: i0.Output, args: ["open"] }], afterPickerClosed: [{ type: i0.Output, args: ["close"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], isOpenChange: [{ type: i0.Output, args: ["isOpenChange"] }], confirmSelectedChange: [{ type: i0.Output, args: ["confirmSelectedChange"] }], disabledChange: [{ type: i0.Output, args: ["disabledChange"] }] } });
 
-/** @deprecated use standalone imports */
-class DateTimeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: DateTimeModule, imports: [CalendarComponent,
-            TimerComponent,
-            DateTimeTriggerDirective,
-            DateTimeInputDirective,
-            DateTimeComponent,
-            DateTimeInlineComponent,
-            MultiYearViewComponent,
-            YearViewComponent,
-            MonthViewComponent], exports: [CalendarComponent,
-            TimerComponent,
-            DateTimeTriggerDirective,
-            DateTimeInputDirective,
-            DateTimeComponent,
-            DateTimeInlineComponent,
-            MultiYearViewComponent,
-            YearViewComponent,
-            MonthViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CalendarComponent,
-                        TimerComponent,
-                        DateTimeTriggerDirective,
-                        DateTimeInputDirective,
-                        DateTimeComponent,
-                        DateTimeInlineComponent,
-                        MultiYearViewComponent,
-                        YearViewComponent,
-                        MonthViewComponent
-                    ],
-                    exports: [
-                        CalendarComponent,
-                        TimerComponent,
-                        DateTimeTriggerDirective,
-                        DateTimeInputDirective,
-                        DateTimeComponent,
-                        DateTimeInlineComponent,
-                        MultiYearViewComponent,
-                        YearViewComponent,
-                        MonthViewComponent
-                    ]
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CalendarComponent, DateTimeAdapter, DateTimeComponent, DateTimeInlineComponent, DateTimeInputDirective, DateTimeIntl, DateTimeModule, DateTimeTriggerDirective, MonthViewComponent, MultiYearViewComponent, NXT_DATE_TIME_FORMATS, TimerComponent, YearViewComponent };
+export { CalendarComponent, DateTimeAdapter, DateTimeComponent, DateTimeInlineComponent, DateTimeInputDirective, DateTimeIntl, DateTimeTriggerDirective, MonthViewComponent, MultiYearViewComponent, NXT_DATE_TIME_FORMATS, TimerComponent, YearViewComponent };
 //# sourceMappingURL=nxt-pick-datetime.mjs.map