@ngx-mce/datetime-picker 21.2.6-next.5 → 21.2.6-next.6

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

@@ -1,25 +1,22 @@
 import { CdkMonitorFocus, CdkTrapFocus } from '@angular/cdk/a11y';
 import { ComponentPortal, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { Injectable, Optional, SkipSelf, inject, input, output, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, viewChild, Input, Inject, forwardRef, linkedSignal, Directive, ContentChild, Self, model, effect, untracked, HostBinding, DOCUMENT, EventEmitter, Output, booleanAttribute, TemplateRef, Attribute, signal, ViewChild, ElementRef, Injector } from '@angular/core';
+import { inject, Injectable, Optional, SkipSelf, input, output, computed, ElementRef, NgZone, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, viewChild, ChangeDetectorRef, Input, forwardRef, linkedSignal, Directive, Injector, ContentChild, model, effect, untracked, HostBinding, DOCUMENT, EventEmitter, ViewContainerRef, Output, booleanAttribute, TemplateRef, Attribute, signal, ViewChild } from '@angular/core';
 import { outputFromObservable, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i4 from '@angular/material/button';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
-import * as i1 from '@angular/material/core';
-import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, ErrorStateMatcher } from '@angular/material/core';
 import { Subject, Subscription, merge, of } from 'rxjs';
+import { Directionality } from '@angular/cdk/bidi';
 import { ESCAPE, hasModifierKey, SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, BACKSPACE } from '@angular/cdk/keycodes';
 import { take, startWith, debounceTime, filter, takeUntil } from 'rxjs/operators';
 import { Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { NgClass } from '@angular/common';
-import * as i2 from '@angular/cdk/bidi';
-import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
-import * as i2$1 from '@angular/forms';
-import { NgControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormBuilder, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i2$2 from '@angular/material/form-field';
+import * as i1 from '@angular/forms';
+import { NgForm, FormGroupDirective, NgControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer, FormBuilder, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/form-field';
 import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule, MatFormField } from '@angular/material/form-field';
-import * as i5$1 from '@angular/cdk/overlay';
 import { Overlay, FlexibleConnectedPositionStrategy, OverlayConfig } from '@angular/cdk/overlay';
 import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
@@ -52,15 +49,14 @@ class NgxDateRange {
  */
 class NgxMatDateSelectionModel {
     selection;
-    _adapter;
     _selectionChanged = new Subject();
     /** Emits when the selection has changed. */
     selectionChanged = this._selectionChanged;
+    _adapter = inject((DateAdapter));
     constructor(
     /** The current selection. */
-    selection, _adapter) {
+    selection) {
         this.selection = selection;
-        this._adapter = _adapter;
         this.selection = selection;
     }
     /**
@@ -84,14 +80,14 @@ class NgxMatDateSelectionModel {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDateSelectionModel, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: undefined }, { type: i1.DateAdapter }] });
+        }], ctorParameters: () => [{ type: undefined }] });
 /**
  * A selection model that contains a single date.
  * @docs-private
  */
 class NgxMatSingleDateSelectionModel extends NgxMatDateSelectionModel {
-    constructor(adapter) {
-        super(null, adapter);
+    constructor() {
+        super(null);
     }
     /**
      * Adds a date to the current selection. In the case of a single date selection, the added date
@@ -113,23 +109,23 @@ class NgxMatSingleDateSelectionModel extends NgxMatDateSelectionModel {
     }
     /** Clones the selection model. */
     clone() {
-        const clone = new NgxMatSingleDateSelectionModel(this._adapter);
+        const clone = new NgxMatSingleDateSelectionModel();
         clone.updateSelection(this.selection, this);
         return clone;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatSingleDateSelectionModel, deps: [{ token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatSingleDateSelectionModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatSingleDateSelectionModel });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatSingleDateSelectionModel, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.DateAdapter }] });
+        }], ctorParameters: () => [] });
 /**
  * A selection model that contains a date range.
  * @docs-private
  */
 class NgxMatRangeDateSelectionModel extends NgxMatDateSelectionModel {
-    constructor(adapter) {
-        super(new NgxDateRange(null, null), adapter);
+    constructor() {
+        super(new NgxDateRange(null, null));
     }
     /**
      * Adds a date to the current selection. In the case of a date range selection, the added date
@@ -176,19 +172,19 @@ class NgxMatRangeDateSelectionModel extends NgxMatDateSelectionModel {
     }
     /** Clones the selection model. */
     clone() {
-        const clone = new NgxMatRangeDateSelectionModel(this._adapter);
+        const clone = new NgxMatRangeDateSelectionModel();
         clone.updateSelection(this.selection, this);
         return clone;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatRangeDateSelectionModel, deps: [{ token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatRangeDateSelectionModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatRangeDateSelectionModel });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatRangeDateSelectionModel, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.DateAdapter }] });
+        }], ctorParameters: () => [] });
 /** @docs-private */
-function NGX_MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(parent, adapter) {
-    return parent || new NgxMatSingleDateSelectionModel(adapter);
+function NGX_MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(parent) {
+    return parent || new NgxMatSingleDateSelectionModel();
 }
 /**
  * Used to provide a single selection model to a component.
@@ -200,8 +196,8 @@ const NGX_MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER = {
     useFactory: NGX_MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY,
 };
 /** @docs-private */
-function NGX_MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(parent, adapter) {
-    return parent || new NgxMatRangeDateSelectionModel(adapter);
+function NGX_MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(parent) {
+    return parent || new NgxMatRangeDateSelectionModel();
 }
 /**
  * Used to provide a range selection model to a component.
@@ -220,6 +216,63 @@ function createMissingDateImplError$1(provider) {
         `custom implementation.`);
 }
 
+/** Datepicker data that requires internationalization. */
+class NgxMatDatepickerIntl {
+    /**
+     * Stream that emits whenever the labels here are changed. Use this to notify
+     * components if the labels have changed after initialization.
+     */
+    changes = new Subject();
+    /** A label for the calendar popup (used by screen readers). */
+    calendarLabel = 'Calendar';
+    /** A label for the button used to open the calendar popup (used by screen readers). */
+    openCalendarLabel = 'Open calendar';
+    /** Label for the button used to close the calendar popup. */
+    closeCalendarLabel = 'Close calendar';
+    /** A label for the previous month button (used by screen readers). */
+    prevMonthLabel = 'Previous month';
+    /** A label for the next month button (used by screen readers). */
+    nextMonthLabel = 'Next month';
+    /** A label for the previous year button (used by screen readers). */
+    prevYearLabel = 'Previous year';
+    /** A label for the next year button (used by screen readers). */
+    nextYearLabel = 'Next year';
+    /** A label for the previous multi-year button (used by screen readers). */
+    prevMultiYearLabel = 'Previous 24 years';
+    /** A label for the next multi-year button (used by screen readers). */
+    nextMultiYearLabel = 'Next 24 years';
+    /** A label for the 'switch to month view' button (used by screen readers). */
+    switchToMonthViewLabel = 'Choose date';
+    /** A label for the 'switch to year view' button (used by screen readers). */
+    switchToMultiYearViewLabel = 'Choose month and year';
+    /**
+     * A label for the first date of a range of dates (used by screen readers).
+     * @deprecated Provide your own internationalization string.
+     * @breaking-change 17.0.0
+     */
+    startDateLabel = 'Start date';
+    /**
+     * A label for the last date of a range of dates (used by screen readers).
+     * @deprecated Provide your own internationalization string.
+     * @breaking-change 17.0.0
+     */
+    endDateLabel = 'End date';
+    /** Formats a range of years (used for visuals). */
+    formatYearRange(start, end) {
+        return `${start} \u2013 ${end}`;
+    }
+    /** Formats a label for a range of years (used by screen readers). */
+    formatYearRangeLabel(start, end) {
+        return `${start} to ${end}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * An internal class that represents the data corresponding to a single calendar cell.
  * @docs-private
@@ -244,8 +297,6 @@ class NgxMatCalendarCell {
 }
 let calendarBodyId = 1;
 class NgxMatCalendarBody {
-    _elementRef;
-    _ngZone;
     _platform = inject(Platform);
     /**
      * Used to skip the next focus event when rendering the preview range.
@@ -323,11 +374,11 @@ class NgxMatCalendarBody {
         return `${100 / this.numCols()}%`;
     }, ...(ngDevMode ? [{ debugName: "_cellWidth" }] : /* istanbul ignore next */ []));
     _didDragSinceMouseDown = false;
-    constructor(_elementRef, _ngZone) {
-        this._elementRef = _elementRef;
-        this._ngZone = _ngZone;
-        _ngZone.runOutsideAngular(() => {
-            const element = _elementRef.nativeElement;
+    _elementRef = inject((ElementRef));
+    _ngZone = inject(NgZone);
+    constructor() {
+        this._ngZone.runOutsideAngular(() => {
+            const element = this._elementRef.nativeElement;
             element.addEventListener('mouseenter', this._enterHandler, true);
             element.addEventListener('touchmove', this._touchmoveHandler, true);
             element.addEventListener('focus', this._enterHandler, true);
@@ -601,7 +652,7 @@ class NgxMatCalendarBody {
     _id = `mat-calendar-body-${calendarBodyId++}`;
     _startDateLabelId = `${this._id}-start-date`;
     _endDateLabelId = `${this._id}-end-date`;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatCalendarBody, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxMatCalendarBody, isStandalone: true, selector: "[ngx-mat-calendar-body]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, todayValue: { classPropertyName: "todayValue", publicName: "todayValue", isSignal: true, isRequired: false, transformFunction: null }, startValue: { classPropertyName: "startValue", publicName: "startValue", isSignal: true, isRequired: false, transformFunction: null }, endValue: { classPropertyName: "endValue", publicName: "endValue", isSignal: true, isRequired: false, transformFunction: null }, labelMinRequiredCells: { classPropertyName: "labelMinRequiredCells", publicName: "labelMinRequiredCells", isSignal: true, isRequired: false, transformFunction: null }, numCols: { classPropertyName: "numCols", publicName: "numCols", isSignal: true, isRequired: false, transformFunction: null }, activeCell: { classPropertyName: "activeCell", publicName: "activeCell", isSignal: true, isRequired: false, transformFunction: null }, isRange: { classPropertyName: "isRange", publicName: "isRange", isSignal: true, isRequired: false, transformFunction: null }, cellAspectRatio: { classPropertyName: "cellAspectRatio", publicName: "cellAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, comparisonStart: { classPropertyName: "comparisonStart", publicName: "comparisonStart", isSignal: true, isRequired: false, transformFunction: null }, comparisonEnd: { classPropertyName: "comparisonEnd", publicName: "comparisonEnd", isSignal: true, isRequired: false, transformFunction: null }, previewStart: { classPropertyName: "previewStart", publicName: "previewStart", isSignal: true, isRequired: false, transformFunction: null }, previewEnd: { classPropertyName: "previewEnd", publicName: "previewEnd", isSignal: true, isRequired: false, transformFunction: null }, startDateAccessibleName: { classPropertyName: "startDateAccessibleName", publicName: "startDateAccessibleName", isSignal: true, isRequired: false, transformFunction: null }, endDateAccessibleName: { classPropertyName: "endDateAccessibleName", publicName: "endDateAccessibleName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValueChange: "selectedValueChange", previewChange: "previewChange", activeDateChange: "activeDateChange", dragStarted: "dragStarted", dragEnded: "dragEnded" }, host: { classAttribute: "ngx-mat-calendar-body" }, exportAs: ["matCalendarBody"], ngImport: i0, template: "<!--\nIf there's not enough space in the first row, create a separate label row. We mark this row as\naria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset()! < labelMinRequiredCells()!) {\n  <tr aria-hidden=\"true\">\n    <td\n      class=\"mat-calendar-body-label\"\n      [attr.colspan]=\"numCols()\"\n      [style.paddingTop]=\"_cellPadding()\"\n      [style.paddingBottom]=\"_cellPadding()\">\n      {{ label() }}\n    </td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n    This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n    because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n    table cells is maintained by setting the top and bottom padding as a percentage of the width\n    (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n    -->\n    @if (rowIndex === 0 && _firstRowOffset()) {\n      <td\n        class=\"mat-calendar-body-label\"\n        [attr.colspan]=\"_firstRowOffset()\"\n        [style.paddingTop]=\"_cellPadding()\"\n        [style.paddingBottom]=\"_cellPadding()\">\n        {{ _firstRowOffset()! >= labelMinRequiredCells()! ? label() : '' }}\n      </td>\n    }\n    <!--\n    Each gridcell in the calendar contains a button, which signals to assistive technology that the\n    cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n    background.\n    -->\n    @for (item of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"mat-calendar-body-cell-container\"\n        [style.width]=\"_cellWidth()\"\n        [style.paddingTop]=\"_cellPadding()\"\n        [style.paddingBottom]=\"_cellPadding()\"\n        [attr.data-mat-row]=\"rowIndex\"\n        [attr.data-mat-col]=\"colIndex\">\n        <button\n          type=\"button\"\n          class=\"mat-calendar-body-cell\"\n          [ngClass]=\"item.cssClasses\"\n          [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n          [class.mat-calendar-body-disabled]=\"!item.enabled\"\n          [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n          [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n          [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n          [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n          [class.mat-calendar-body-comparison-bridge-start]=\"\n            _isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\n          \"\n          [class.mat-calendar-body-comparison-bridge-end]=\"\n            _isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\n          \"\n          [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n          [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n          [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n          [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n          [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n          [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n          [attr.aria-label]=\"item.ariaLabel\"\n          [attr.aria-disabled]=\"!item.enabled || null\"\n          [attr.aria-pressed]=\"_isSelected(item.compareValue)\"\n          [attr.aria-current]=\"todayValue() === item.compareValue ? 'date' : null\"\n          [attr.aria-describedby]=\"_getDescribedby(item.compareValue)\"\n          (click)=\"_cellClicked(item, $event)\"\n          (focus)=\"_emitActiveDateChange(item, $event)\">\n          <span\n            class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n            [class.mat-calendar-body-selected]=\"_isSelected(item.compareValue)\"\n            [class.mat-calendar-body-comparison-identical]=\"\n              _isComparisonIdentical(item.compareValue)\n            \"\n            [class.mat-calendar-body-today]=\"todayValue() === item.compareValue\">\n            {{ item.displayValue }}\n          </span>\n          <span class=\"mat-calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n        </button>\n      </td>\n    }\n  </tr>\n}\n\n<label [id]=\"_startDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{ startDateAccessibleName() }}\n</label>\n<label [id]=\"_endDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{ endDateAccessibleName() }}\n</label>\n", styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;padding-left:4.7142857143%;padding-right:4.7142857143%;text-align:start;font-size:var(--mat-datepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-datepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}.mat-calendar-body-hidden-label{display:none}.mat-calendar-body-cell-container{position:relative;height:0;line-height:0}.mat-calendar-body-cell-container .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--mat-datepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-calendar-body-cell{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent}.mat-calendar-body-cell::-moz-focus-inner{border:0}.mat-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;outline:none;font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));margin:0}.mat-calendar-body-cell:before,.mat-calendar-body-cell:after,.mat-calendar-body-cell-preview{content:\"\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;display:block;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,.mat-calendar-body-range-start:after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start):before,.mat-calendar-body-comparison-start:after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,[dir=rtl] .mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start):before,[dir=rtl] .mat-calendar-body-comparison-start:after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0 999px 999px 0}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,.mat-calendar-body-range-end:after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end):before,.mat-calendar-body-comparison-end:after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,[dir=rtl] .mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end):before,[dir=rtl] .mat-calendar-body-comparison-end:after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:999px 0 0 999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start:after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end:after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start:after{width:90%}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:dashed 1px}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:0;border-left:dashed 1px}.mat-calendar-body-disabled{cursor:default}@media(forced-colors:active){.mat-calendar-body-disabled{opacity:.5}}.mat-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px;color:var(--mat-datepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mat-datepicker-calendar-date-outline-color, transparent)}.mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mat-datepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mat-calendar-body-cell-content.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:var(--mat-datepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media(forced-colors:active){.mat-calendar-body-cell-content{border:none}}@media(forced-colors:active){.mat-datepicker-popup:not(:empty),.mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected{outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}.mat-calendar-body-cell:before,.mat-calendar-body-cell:after,.mat-calendar-body-selected{background:none}.mat-calendar-body-in-range:before,.mat-calendar-body-comparison-bridge-start:before,.mat-calendar-body-comparison-bridge-end:before{border-top:solid 1px;border-bottom:solid 1px}.mat-calendar-body-range-start:before{border-left:solid 1px}[dir=rtl] .mat-calendar-body-range-start:before{border-left:0;border-right:solid 1px}.mat-calendar-body-range-end:before{border-right:solid 1px}[dir=rtl] .mat-calendar-body-range-end:before{border-right:0;border-left:solid 1px}.mat-calendar-body-in-comparison-range:before{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-comparison-start:before{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-comparison-start:before{border-left:0;border-right:dashed 1px}.mat-calendar-body-comparison-end:before{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-comparison-end:before{border-right:0;border-left:dashed 1px}}[dir=rtl] .mat-calendar-body-label{text-align:right}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatCalendarBody, decorators: [{
@@ -609,7 +660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
             args: [{ selector: '[ngx-mat-calendar-body]', host: {
                         class: 'ngx-mat-calendar-body',
                     }, exportAs: 'matCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<!--\nIf there's not enough space in the first row, create a separate label row. We mark this row as\naria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset()! < labelMinRequiredCells()!) {\n  <tr aria-hidden=\"true\">\n    <td\n      class=\"mat-calendar-body-label\"\n      [attr.colspan]=\"numCols()\"\n      [style.paddingTop]=\"_cellPadding()\"\n      [style.paddingBottom]=\"_cellPadding()\">\n      {{ label() }}\n    </td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n    This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n    because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n    table cells is maintained by setting the top and bottom padding as a percentage of the width\n    (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n    -->\n    @if (rowIndex === 0 && _firstRowOffset()) {\n      <td\n        class=\"mat-calendar-body-label\"\n        [attr.colspan]=\"_firstRowOffset()\"\n        [style.paddingTop]=\"_cellPadding()\"\n        [style.paddingBottom]=\"_cellPadding()\">\n        {{ _firstRowOffset()! >= labelMinRequiredCells()! ? label() : '' }}\n      </td>\n    }\n    <!--\n    Each gridcell in the calendar contains a button, which signals to assistive technology that the\n    cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n    background.\n    -->\n    @for (item of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"mat-calendar-body-cell-container\"\n        [style.width]=\"_cellWidth()\"\n        [style.paddingTop]=\"_cellPadding()\"\n        [style.paddingBottom]=\"_cellPadding()\"\n        [attr.data-mat-row]=\"rowIndex\"\n        [attr.data-mat-col]=\"colIndex\">\n        <button\n          type=\"button\"\n          class=\"mat-calendar-body-cell\"\n          [ngClass]=\"item.cssClasses\"\n          [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n          [class.mat-calendar-body-disabled]=\"!item.enabled\"\n          [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n          [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n          [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n          [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n          [class.mat-calendar-body-comparison-bridge-start]=\"\n            _isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\n          \"\n          [class.mat-calendar-body-comparison-bridge-end]=\"\n            _isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\n          \"\n          [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n          [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n          [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n          [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n          [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n          [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n          [attr.aria-label]=\"item.ariaLabel\"\n          [attr.aria-disabled]=\"!item.enabled || null\"\n          [attr.aria-pressed]=\"_isSelected(item.compareValue)\"\n          [attr.aria-current]=\"todayValue() === item.compareValue ? 'date' : null\"\n          [attr.aria-describedby]=\"_getDescribedby(item.compareValue)\"\n          (click)=\"_cellClicked(item, $event)\"\n          (focus)=\"_emitActiveDateChange(item, $event)\">\n          <span\n            class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n            [class.mat-calendar-body-selected]=\"_isSelected(item.compareValue)\"\n            [class.mat-calendar-body-comparison-identical]=\"\n              _isComparisonIdentical(item.compareValue)\n            \"\n            [class.mat-calendar-body-today]=\"todayValue() === item.compareValue\">\n            {{ item.displayValue }}\n          </span>\n          <span class=\"mat-calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n        </button>\n      </td>\n    }\n  </tr>\n}\n\n<label [id]=\"_startDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{ startDateAccessibleName() }}\n</label>\n<label [id]=\"_endDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{ endDateAccessibleName() }}\n</label>\n", styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;padding-left:4.7142857143%;padding-right:4.7142857143%;text-align:start;font-size:var(--mat-datepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-datepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}.mat-calendar-body-hidden-label{display:none}.mat-calendar-body-cell-container{position:relative;height:0;line-height:0}.mat-calendar-body-cell-container .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--mat-datepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-calendar-body-cell{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent}.mat-calendar-body-cell::-moz-focus-inner{border:0}.mat-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;outline:none;font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));margin:0}.mat-calendar-body-cell:before,.mat-calendar-body-cell:after,.mat-calendar-body-cell-preview{content:\"\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;display:block;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,.mat-calendar-body-range-start:after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start):before,.mat-calendar-body-comparison-start:after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,[dir=rtl] .mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start):before,[dir=rtl] .mat-calendar-body-comparison-start:after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0 999px 999px 0}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,.mat-calendar-body-range-end:after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end):before,.mat-calendar-body-comparison-end:after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,[dir=rtl] .mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end):before,[dir=rtl] .mat-calendar-body-comparison-end:after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:999px 0 0 999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start:after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end:after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end:after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start:after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start:after{width:90%}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:dashed 1px}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:0;border-left:dashed 1px}.mat-calendar-body-disabled{cursor:default}@media(forced-colors:active){.mat-calendar-body-disabled{opacity:.5}}.mat-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px;color:var(--mat-datepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mat-datepicker-calendar-date-outline-color, transparent)}.mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mat-datepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mat-calendar-body-cell-content.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:var(--mat-datepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media(forced-colors:active){.mat-calendar-body-cell-content{border:none}}@media(forced-colors:active){.mat-datepicker-popup:not(:empty),.mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected{outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}.mat-calendar-body-cell:before,.mat-calendar-body-cell:after,.mat-calendar-body-selected{background:none}.mat-calendar-body-in-range:before,.mat-calendar-body-comparison-bridge-start:before,.mat-calendar-body-comparison-bridge-end:before{border-top:solid 1px;border-bottom:solid 1px}.mat-calendar-body-range-start:before{border-left:solid 1px}[dir=rtl] .mat-calendar-body-range-start:before{border-left:0;border-right:solid 1px}.mat-calendar-body-range-end:before{border-right:solid 1px}[dir=rtl] .mat-calendar-body-range-end:before{border-right:0;border-left:solid 1px}.mat-calendar-body-in-comparison-range:before{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-comparison-start:before{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-comparison-start:before{border-left:0;border-right:dashed 1px}.mat-calendar-body-comparison-end:before{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-comparison-end:before{border-right:0;border-left:dashed 1px}}[dir=rtl] .mat-calendar-body-label{text-align:right}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], todayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayValue", required: false }] }], startValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "startValue", required: false }] }], endValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "endValue", required: false }] }], labelMinRequiredCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMinRequiredCells", required: false }] }], numCols: [{ type: i0.Input, args: [{ isSignal: true, alias: "numCols", required: false }] }], activeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeCell", required: false }] }], isRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRange", required: false }] }], cellAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellAspectRatio", required: false }] }], comparisonStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonStart", required: false }] }], comparisonEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonEnd", required: false }] }], previewStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewStart", required: false }] }], previewEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewEnd", required: false }] }], startDateAccessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDateAccessibleName", required: false }] }], endDateAccessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDateAccessibleName", required: false }] }], selectedValueChange: [{ type: i0.Output, args: ["selectedValueChange"] }], previewChange: [{ type: i0.Output, args: ["previewChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], dragStarted: [{ type: i0.Output, args: ["dragStarted"] }], dragEnded: [{ type: i0.Output, args: ["dragEnded"] }] } });
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], todayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayValue", required: false }] }], startValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "startValue", required: false }] }], endValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "endValue", required: false }] }], labelMinRequiredCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMinRequiredCells", required: false }] }], numCols: [{ type: i0.Input, args: [{ isSignal: true, alias: "numCols", required: false }] }], activeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeCell", required: false }] }], isRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRange", required: false }] }], cellAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellAspectRatio", required: false }] }], comparisonStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonStart", required: false }] }], comparisonEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonEnd", required: false }] }], previewStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewStart", required: false }] }], previewEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewEnd", required: false }] }], startDateAccessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDateAccessibleName", required: false }] }], endDateAccessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDateAccessibleName", required: false }] }], selectedValueChange: [{ type: i0.Output, args: ["selectedValueChange"] }], previewChange: [{ type: i0.Output, args: ["previewChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], dragStarted: [{ type: i0.Output, args: ["dragStarted"] }], dragEnded: [{ type: i0.Output, args: ["dragEnded"] }] } });
 /** Checks whether a node is a table cell element. */
 function isTableCell(node) {
     return node?.nodeName === 'TD';
@@ -661,10 +712,7 @@ function getActualTouchTarget(event) {
 const NGX_MAT_DATE_RANGE_SELECTION_STRATEGY = new InjectionToken('NGX_MAT_DATE_RANGE_SELECTION_STRATEGY');
 /** Provides the default date range selection behavior. */
 class DefaultNgxMatCalendarRangeStrategy {
-    _dateAdapter;
-    constructor(_dateAdapter) {
-        this._dateAdapter = _dateAdapter;
-    }
+    _dateAdapter = inject((DateAdapter));
     selectionFinished(date, currentRange) {
         let { start, end } = currentRange;
         if (start == null) {
@@ -726,15 +774,15 @@ class DefaultNgxMatCalendarRangeStrategy {
         }
         return new NgxDateRange(start, end);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefaultNgxMatCalendarRangeStrategy, deps: [{ token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefaultNgxMatCalendarRangeStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefaultNgxMatCalendarRangeStrategy });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DefaultNgxMatCalendarRangeStrategy, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.DateAdapter }] });
+        }] });
 /** @docs-private */
-function NGX_MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY(parent, adapter) {
-    return parent || new DefaultNgxMatCalendarRangeStrategy(adapter);
+function NGX_MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY(parent) {
+    return parent || new DefaultNgxMatCalendarRangeStrategy();
 }
 const NGX_MAT_CALENDAR_RANGE_STRATEGY_PROVIDER = {
     provide: NGX_MAT_DATE_RANGE_SELECTION_STRATEGY,
@@ -748,11 +796,6 @@ const DAYS_PER_WEEK = 7;
  * @docs-private
  */
 class NgxMatMonthView {
-    _changeDetectorRef;
-    _dateFormats;
-    _dateAdapter;
-    _dir;
-    _rangeStrategy;
     _rerenderSubscription = Subscription.EMPTY;
     /** Flag used to filter out space/enter keyup events that originated outside of the view. */
     _selectionKeyPressed = false;
@@ -763,6 +806,8 @@ class NgxMatMonthView {
         return this._activeDate;
     }
     set activeDate(value) {
+        if (!this._dateAdapter)
+            return;
         const oldActiveDate = this._activeDate;
         const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) ||
             this._dateAdapter.today();
@@ -777,7 +822,7 @@ class NgxMatMonthView {
         return this._selected;
     }
     set selected(value) {
-        if (value instanceof NgxDateRange) {
+        if (!this._dateAdapter || value instanceof NgxDateRange) {
             this._selected = value;
         }
         else {
@@ -791,6 +836,10 @@ class NgxMatMonthView {
         return this._minDate;
     }
     set minDate(value) {
+        if (!this._dateAdapter) {
+            this._minDate = null;
+            return;
+        }
         this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     _minDate = null;
@@ -799,6 +848,10 @@ class NgxMatMonthView {
         return this._maxDate;
     }
     set maxDate(value) {
+        if (!this._dateAdapter) {
+            this._maxDate = null;
+            return;
+        }
         this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     _maxDate = null;
@@ -855,12 +908,12 @@ class NgxMatMonthView {
     _todayDate = null;
     /** The names of the weekdays. */
     _weekdays = null;
-    constructor(_changeDetectorRef, _dateFormats, _dateAdapter, _dir, _rangeStrategy) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._dateFormats = _dateFormats;
-        this._dateAdapter = _dateAdapter;
-        this._dir = _dir;
-        this._rangeStrategy = _rangeStrategy;
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _dateFormats = inject(MAT_DATE_FORMATS, { optional: true });
+    _dateAdapter = inject((DateAdapter), { optional: true });
+    _dir = inject(Directionality, { optional: true });
+    _rangeStrategy = inject(NGX_MAT_DATE_RANGE_SELECTION_STRATEGY, { optional: true });
+    constructor() {
         if (!this._dateAdapter) {
             throw createMissingDateImplError$1('DateAdapter');
         }
@@ -870,6 +923,8 @@ class NgxMatMonthView {
         this._activeDate = this._dateAdapter.today();
     }
     ngAfterContentInit() {
+        if (!this._dateAdapter)
+            return;
         this._rerenderSubscription = this._dateAdapter.localeChanges
             .pipe(startWith(null))
             .subscribe(() => this._init());
@@ -919,8 +974,9 @@ class NgxMatMonthView {
     _updateActiveDate(event) {
         const month = event.value;
         const oldActiveDate = this._activeDate;
-        this.activeDate = this._getDateFromDayOfMonth(month);
-        if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
+        const dateToAssign = this._getDateFromDayOfMonth(month);
+        if (this._dateAdapter && dateToAssign && this._dateAdapter.compareDate(oldActiveDate, dateToAssign)) {
+            this.activeDate = dateToAssign;
             this.activeDateChange.emit(this._activeDate);
         }
     }
@@ -933,33 +989,33 @@ class NgxMatMonthView {
         const isRtl = this._isRtl();
         switch (event.keyCode) {
             case LEFT_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);
+                this.activeDate = this._dateAdapter?.addCalendarDays(this._activeDate, isRtl ? 1 : -1);
                 break;
             case RIGHT_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);
+                this.activeDate = this._dateAdapter?.addCalendarDays(this._activeDate, isRtl ? -1 : 1);
                 break;
             case UP_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, -7);
+                this.activeDate = this._dateAdapter?.addCalendarDays(this._activeDate, -7);
                 break;
             case DOWN_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 7);
+                this.activeDate = this._dateAdapter?.addCalendarDays(this._activeDate, 7);
                 break;
             case HOME:
-                this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 1 - this._dateAdapter.getDate(this._activeDate));
+                this.activeDate = this._dateAdapter?.addCalendarDays(this._activeDate, 1 - this._dateAdapter.getDate(this._activeDate));
                 break;
             case END:
-                this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, this._dateAdapter.getNumDaysInMonth(this._activeDate) -
+                this.activeDate = this._dateAdapter?.addCalendarDays(this._activeDate, this._dateAdapter.getNumDaysInMonth(this._activeDate) -
                     this._dateAdapter.getDate(this._activeDate));
                 break;
             case PAGE_UP:
                 this.activeDate = event.altKey
-                    ? this._dateAdapter.addCalendarYears(this._activeDate, -1)
-                    : this._dateAdapter.addCalendarMonths(this._activeDate, -1);
+                    ? this._dateAdapter?.addCalendarYears(this._activeDate, -1)
+                    : this._dateAdapter?.addCalendarMonths(this._activeDate, -1);
                 break;
             case PAGE_DOWN:
                 this.activeDate = event.altKey
-                    ? this._dateAdapter.addCalendarYears(this._activeDate, 1)
-                    : this._dateAdapter.addCalendarMonths(this._activeDate, 1);
+                    ? this._dateAdapter?.addCalendarYears(this._activeDate, 1)
+                    : this._dateAdapter?.addCalendarMonths(this._activeDate, 1);
                 break;
             case ENTER:
             case SPACE:
@@ -994,7 +1050,7 @@ class NgxMatMonthView {
                 // Don't prevent default or focus active cell on keys that we don't explicitly handle.
                 return;
         }
-        if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
+        if (this._dateAdapter && this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
             this.activeDateChange.emit(this.activeDate);
             this._focusActiveCellAfterViewChecked();
         }
@@ -1004,7 +1060,7 @@ class NgxMatMonthView {
     /** Handles keyup events on the calendar body when calendar is in month view. */
     _handleCalendarBodyKeyup(event) {
         if (event.keyCode === SPACE || event.keyCode === ENTER) {
-            if (this._selectionKeyPressed && this._canSelect(this._activeDate)) {
+            if (this._dateAdapter && this._selectionKeyPressed && this._canSelect(this._activeDate)) {
                 this._dateSelected({
                     value: this._dateAdapter.getDate(this._activeDate),
                     event,
@@ -1015,12 +1071,13 @@ class NgxMatMonthView {
     }
     /** Initializes this month view. */
     _init() {
+        if (!this._dateAdapter || !this._dateFormats)
+            return;
         this._setRanges(this.selected);
         this._todayDate = this._getCellCompareValue(this._dateAdapter.today());
         this._monthLabel = this._dateFormats.display.monthLabel
             ? this._dateAdapter.format(this.activeDate, this._dateFormats.display.monthLabel)
-            : this._dateAdapter
-                .getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)].toLocaleUpperCase();
+            : this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)].toLocaleUpperCase();
         const firstOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), 1);
         this._firstWeekOffset =
             (DAYS_PER_WEEK +
@@ -1086,10 +1143,14 @@ class NgxMatMonthView {
      *  active date. The returned date will have the same day of the month as the argument date.
      */
     _getDateFromDayOfMonth(dayOfMonth) {
+        if (!this._dateAdapter)
+            return null;
         return this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), dayOfMonth);
     }
     /** Initializes the weekdays. */
     _initWeekdays() {
+        if (!this._dateAdapter)
+            return;
         const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();
         const narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');
         const longWeekdays = this._dateAdapter.getDayOfWeekNames('long');
@@ -1101,6 +1162,8 @@ class NgxMatMonthView {
     }
     /** Creates MatCalendarCells for the dates in this month. */
     _createWeekCells() {
+        if (!this._dateAdapter || !this._dateFormats)
+            return;
         const daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);
         const dateNames = this._dateAdapter.getDateNames();
         this._weeks = [[]];
@@ -1118,6 +1181,8 @@ class NgxMatMonthView {
     }
     /** Date filter for the month */
     _shouldEnableDate(date) {
+        if (!this._dateAdapter)
+            return false;
         return (!!date &&
             (!this.minDate || this._dateAdapter.compareDate(date, this.minDate) >= 0) &&
             (!this.maxDate || this._dateAdapter.compareDate(date, this.maxDate) <= 0) &&
@@ -1128,12 +1193,14 @@ class NgxMatMonthView {
      * Returns null if the given Date is in another month.
      */
     _getDateInCurrentMonth(date) {
-        return date && this._hasSameMonthAndYear(date, this.activeDate)
+        return this._dateAdapter && date && this._hasSameMonthAndYear(date, this.activeDate)
             ? this._dateAdapter.getDate(date)
             : null;
     }
     /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
     _hasSameMonthAndYear(d1, d2) {
+        if (!this._dateAdapter)
+            return false;
         return !!(d1 &&
             d2 &&
             this._dateAdapter.getMonth(d1) == this._dateAdapter.getMonth(d2) &&
@@ -1141,7 +1208,7 @@ class NgxMatMonthView {
     }
     /** Gets the value that will be used to one cell to another. */
     _getCellCompareValue(date) {
-        if (date) {
+        if (this._dateAdapter && date) {
             // We use the time since the Unix epoch to compare dates in this view, rather than the
             // cell values, because we need to support ranges that span across multiple months/years.
             const year = this._dateAdapter.getYear(date);
@@ -1177,27 +1244,13 @@ class NgxMatMonthView {
     _clearPreview() {
         this._previewStart = this._previewEnd = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatMonthView, deps: [{ token: i0.ChangeDetectorRef }, { token: MAT_DATE_FORMATS, optional: true }, { token: i1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }, { token: NGX_MAT_DATE_RANGE_SELECTION_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxMatMonthView, isStandalone: true, selector: "ngx-mat-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, comparisonStart: { classPropertyName: "comparisonStart", publicName: "comparisonStart", isSignal: true, isRequired: false, transformFunction: null }, comparisonEnd: { classPropertyName: "comparisonEnd", publicName: "comparisonEnd", isSignal: true, isRequired: false, transformFunction: null }, startDateAccessibleName: { classPropertyName: "startDateAccessibleName", publicName: "startDateAccessibleName", isSignal: true, isRequired: false, transformFunction: null }, endDateAccessibleName: { classPropertyName: "endDateAccessibleName", publicName: "endDateAccessibleName", isSignal: true, isRequired: false, transformFunction: null }, activeDrag: { classPropertyName: "activeDrag", publicName: "activeDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", dragStarted: "dragStarted", dragEnded: "dragEnded", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_matCalendarBody", first: true, predicate: NgxMatCalendarBody, descendants: true, isSignal: true }], exportAs: ["ngxMatMonthView"], usesOnChanges: true, ngImport: i0, template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track $index) {\n        <th scope=\"col\">\n          <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n          <span aria-hidden=\"true\">{{ day.narrow }}</span>\n        </th>\n      }\n    </tr>\n    <tr>\n      <th\n        aria-hidden=\"true\"\n        class=\"mat-calendar-table-header-divider\"\n        colspan=\"7\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ngx-mat-calendar-body\n    [label]=\"_monthLabel\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [startValue]=\"_rangeStart!\"\n    [endValue]=\"_rangeEnd!\"\n    [comparisonStart]=\"_comparisonRangeStart\"\n    [comparisonEnd]=\"_comparisonRangeEnd\"\n    [previewStart]=\"_previewStart\"\n    [previewEnd]=\"_previewEnd\"\n    [isRange]=\"_isRange\"\n    [labelMinRequiredCells]=\"3\"\n    [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\"\n    [startDateAccessibleName]=\"startDateAccessibleName()\"\n    [endDateAccessibleName]=\"endDateAccessibleName()\"\n    (selectedValueChange)=\"_dateSelected($event)\"\n    (activeDateChange)=\"_updateActiveDate($event)\"\n    (previewChange)=\"_previewChanged($event)\"\n    (dragStarted)=\"dragStarted.emit($event)\"\n    (dragEnded)=\"_dragEnded($event)\"\n    (keyup)=\"_handleCalendarBodyKeyup($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"\n  ></tbody>\n</table>\n", dependencies: [{ kind: "component", type: NgxMatCalendarBody, selector: "[ngx-mat-calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"], exportAs: ["matCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxMatMonthView, isStandalone: true, selector: "ngx-mat-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, comparisonStart: { classPropertyName: "comparisonStart", publicName: "comparisonStart", isSignal: true, isRequired: false, transformFunction: null }, comparisonEnd: { classPropertyName: "comparisonEnd", publicName: "comparisonEnd", isSignal: true, isRequired: false, transformFunction: null }, startDateAccessibleName: { classPropertyName: "startDateAccessibleName", publicName: "startDateAccessibleName", isSignal: true, isRequired: false, transformFunction: null }, endDateAccessibleName: { classPropertyName: "endDateAccessibleName", publicName: "endDateAccessibleName", isSignal: true, isRequired: false, transformFunction: null }, activeDrag: { classPropertyName: "activeDrag", publicName: "activeDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", dragStarted: "dragStarted", dragEnded: "dragEnded", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_matCalendarBody", first: true, predicate: NgxMatCalendarBody, descendants: true, isSignal: true }], exportAs: ["ngxMatMonthView"], usesOnChanges: true, ngImport: i0, template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track $index) {\n        <th scope=\"col\">\n          <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n          <span aria-hidden=\"true\">{{ day.narrow }}</span>\n        </th>\n      }\n    </tr>\n    <tr>\n      <th\n        aria-hidden=\"true\"\n        class=\"mat-calendar-table-header-divider\"\n        colspan=\"7\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ngx-mat-calendar-body\n    [label]=\"_monthLabel\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [startValue]=\"_rangeStart!\"\n    [endValue]=\"_rangeEnd!\"\n    [comparisonStart]=\"_comparisonRangeStart\"\n    [comparisonEnd]=\"_comparisonRangeEnd\"\n    [previewStart]=\"_previewStart\"\n    [previewEnd]=\"_previewEnd\"\n    [isRange]=\"_isRange\"\n    [labelMinRequiredCells]=\"3\"\n    [activeCell]=\"_dateAdapter ? _dateAdapter.getDate(activeDate) - 1 : 0\"\n    [startDateAccessibleName]=\"startDateAccessibleName()\"\n    [endDateAccessibleName]=\"endDateAccessibleName()\"\n    (selectedValueChange)=\"_dateSelected($event)\"\n    (activeDateChange)=\"_updateActiveDate($event)\"\n    (previewChange)=\"_previewChanged($event)\"\n    (dragStarted)=\"dragStarted.emit($event)\"\n    (dragEnded)=\"_dragEnded($event)\"\n    (keyup)=\"_handleCalendarBodyKeyup($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"\n  ></tbody>\n</table>\n", dependencies: [{ kind: "component", type: NgxMatCalendarBody, selector: "[ngx-mat-calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"], exportAs: ["matCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatMonthView, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-month-view', exportAs: 'ngxMatMonthView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxMatCalendarBody], template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track $index) {\n        <th scope=\"col\">\n          <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n          <span aria-hidden=\"true\">{{ day.narrow }}</span>\n        </th>\n      }\n    </tr>\n    <tr>\n      <th\n        aria-hidden=\"true\"\n        class=\"mat-calendar-table-header-divider\"\n        colspan=\"7\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ngx-mat-calendar-body\n    [label]=\"_monthLabel\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [startValue]=\"_rangeStart!\"\n    [endValue]=\"_rangeEnd!\"\n    [comparisonStart]=\"_comparisonRangeStart\"\n    [comparisonEnd]=\"_comparisonRangeEnd\"\n    [previewStart]=\"_previewStart\"\n    [previewEnd]=\"_previewEnd\"\n    [isRange]=\"_isRange\"\n    [labelMinRequiredCells]=\"3\"\n    [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\"\n    [startDateAccessibleName]=\"startDateAccessibleName()\"\n    [endDateAccessibleName]=\"endDateAccessibleName()\"\n    (selectedValueChange)=\"_dateSelected($event)\"\n    (activeDateChange)=\"_updateActiveDate($event)\"\n    (previewChange)=\"_previewChanged($event)\"\n    (dragStarted)=\"dragStarted.emit($event)\"\n    (dragEnded)=\"_dragEnded($event)\"\n    (keyup)=\"_handleCalendarBodyKeyup($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"\n  ></tbody>\n</table>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: i2.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NGX_MAT_DATE_RANGE_SELECTION_STRATEGY]
-                }, {
-                    type: Optional
-                }] }], propDecorators: { activeDate: [{
+            args: [{ selector: 'ngx-mat-month-view', exportAs: 'ngxMatMonthView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxMatCalendarBody], template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track $index) {\n        <th scope=\"col\">\n          <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n          <span aria-hidden=\"true\">{{ day.narrow }}</span>\n        </th>\n      }\n    </tr>\n    <tr>\n      <th\n        aria-hidden=\"true\"\n        class=\"mat-calendar-table-header-divider\"\n        colspan=\"7\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ngx-mat-calendar-body\n    [label]=\"_monthLabel\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [startValue]=\"_rangeStart!\"\n    [endValue]=\"_rangeEnd!\"\n    [comparisonStart]=\"_comparisonRangeStart\"\n    [comparisonEnd]=\"_comparisonRangeEnd\"\n    [previewStart]=\"_previewStart\"\n    [previewEnd]=\"_previewEnd\"\n    [isRange]=\"_isRange\"\n    [labelMinRequiredCells]=\"3\"\n    [activeCell]=\"_dateAdapter ? _dateAdapter.getDate(activeDate) - 1 : 0\"\n    [startDateAccessibleName]=\"startDateAccessibleName()\"\n    [endDateAccessibleName]=\"endDateAccessibleName()\"\n    (selectedValueChange)=\"_dateSelected($event)\"\n    (activeDateChange)=\"_updateActiveDate($event)\"\n    (previewChange)=\"_previewChanged($event)\"\n    (dragStarted)=\"dragStarted.emit($event)\"\n    (dragEnded)=\"_dragEnded($event)\"\n    (keyup)=\"_handleCalendarBodyKeyup($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"\n  ></tbody>\n</table>\n" }]
+        }], ctorParameters: () => [], propDecorators: { activeDate: [{
                 type: Input
             }], selected: [{
                 type: Input
@@ -1214,9 +1267,6 @@ const yearsPerRow = 4;
  * @docs-private
  */
 class NgxMatMultiYearView {
-    _changeDetectorRef;
-    _dateAdapter;
-    _dir;
     _rerenderSubscription = Subscription.EMPTY;
     /** Flag used to filter out space/enter keyup events that originated outside of the view. */
     _selectionKeyPressed = false;
@@ -1225,6 +1275,8 @@ class NgxMatMultiYearView {
         return this._activeDate;
     }
     set activeDate(value) {
+        if (!this._dateAdapter)
+            return;
         const oldActiveDate = this._activeDate;
         const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) ||
             this._dateAdapter.today();
@@ -1239,7 +1291,7 @@ class NgxMatMultiYearView {
         return this._selected;
     }
     set selected(value) {
-        if (value instanceof NgxDateRange) {
+        if (!this._dateAdapter || value instanceof NgxDateRange) {
             this._selected = value;
         }
         else {
@@ -1253,6 +1305,10 @@ class NgxMatMultiYearView {
         return this._minDate;
     }
     set minDate(value) {
+        if (!this._dateAdapter) {
+            this._minDate = null;
+            return;
+        }
         this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     _minDate = null;
@@ -1261,6 +1317,10 @@ class NgxMatMultiYearView {
         return this._maxDate;
     }
     set maxDate(value) {
+        if (!this._dateAdapter) {
+            this._maxDate = null;
+            return;
+        }
         this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     _maxDate = null;
@@ -1282,16 +1342,18 @@ class NgxMatMultiYearView {
     _todayYear = 0;
     /** The year of the selected date. Null if the selected date is null. */
     _selectedYear = null;
-    constructor(_changeDetectorRef, _dateAdapter, _dir) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._dateAdapter = _dateAdapter;
-        this._dir = _dir;
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _dateAdapter = inject((DateAdapter), { optional: true });
+    _dir = inject(Directionality, { optional: true });
+    constructor() {
         if (!this._dateAdapter) {
             throw createMissingDateImplError$1('DateAdapter');
         }
         this._activeDate = this._dateAdapter.today();
     }
     ngAfterContentInit() {
+        if (!this._dateAdapter)
+            return;
         this._rerenderSubscription = this._dateAdapter.localeChanges
             .pipe(startWith(null))
             .subscribe(() => this._init());
@@ -1301,6 +1363,8 @@ class NgxMatMultiYearView {
     }
     /** Initializes this multi-year view. */
     _init() {
+        if (!this._dateAdapter)
+            return;
         this._todayYear = this._dateAdapter.getYear(this._dateAdapter.today());
         // We want a range years such that we maximize the number of
         // enabled dates visible at once. This prevents issues where the minimum year
@@ -1313,7 +1377,9 @@ class NgxMatMultiYearView {
         for (let i = 0, row = []; i < yearsPerPage; i++) {
             row.push(minYearOfPage + i);
             if (row.length == yearsPerRow) {
-                this._years.push(row.map((year) => this._createCellForYear(year)));
+                this._years.push(row
+                    .map(y => this._createCellForYear(y))
+                    .filter(y => y != null));
                 row = [];
             }
         }
@@ -1321,6 +1387,8 @@ class NgxMatMultiYearView {
     }
     /** Handles when a new year is selected. */
     _yearSelected(event) {
+        if (!this._dateAdapter)
+            return;
         const year = event.value;
         const selectedYear = this._dateAdapter.createDate(year, 0, 1);
         const selectedDate = this._getDateFromYear(year);
@@ -1340,8 +1408,9 @@ class NgxMatMultiYearView {
     _updateActiveDate(event) {
         const year = event.value;
         const oldActiveDate = this._activeDate;
-        this.activeDate = this._getDateFromYear(year);
-        if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
+        const dateToUse = this._getDateFromYear(year);
+        if (this._dateAdapter && dateToUse && this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDate = dateToUse;
             this.activeDateChange.emit(this.activeDate);
         }
     }
@@ -1351,30 +1420,30 @@ class NgxMatMultiYearView {
         const isRtl = this._isRtl();
         switch (event.keyCode) {
             case LEFT_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? 1 : -1);
+                this.activeDate = this._dateAdapter?.addCalendarYears(this._activeDate, isRtl ? 1 : -1);
                 break;
             case RIGHT_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? -1 : 1);
+                this.activeDate = this._dateAdapter?.addCalendarYears(this._activeDate, isRtl ? -1 : 1);
                 break;
             case UP_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -yearsPerRow);
+                this.activeDate = this._dateAdapter?.addCalendarYears(this._activeDate, -yearsPerRow);
                 break;
             case DOWN_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);
+                this.activeDate = this._dateAdapter?.addCalendarYears(this._activeDate, yearsPerRow);
                 break;
             case HOME:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate));
+                this.activeDate = this._dateAdapter?.addCalendarYears(this._activeDate, -getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate));
                 break;
             case END:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage -
+                this.activeDate = this._dateAdapter?.addCalendarYears(this._activeDate, yearsPerPage -
                     getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate) -
                     1);
                 break;
             case PAGE_UP:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
+                this.activeDate = this._dateAdapter?.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
                 break;
             case PAGE_DOWN:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
+                this.activeDate = this._dateAdapter?.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
                 break;
             case ENTER:
             case SPACE:
@@ -1388,7 +1457,7 @@ class NgxMatMultiYearView {
                 // Don't prevent default or focus active cell on keys that we don't explicitly handle.
                 return;
         }
-        if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
+        if (this._dateAdapter && this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
             this.activeDateChange.emit(this.activeDate);
         }
         this._focusActiveCellAfterViewChecked();
@@ -1398,7 +1467,7 @@ class NgxMatMultiYearView {
     /** Handles keyup events on the calendar body when calendar is in multi-year view. */
     _handleCalendarBodyKeyup(event) {
         if (event.keyCode === SPACE || event.keyCode === ENTER) {
-            if (this._selectionKeyPressed) {
+            if (this._dateAdapter && this._selectionKeyPressed) {
                 this._yearSelected({
                     value: this._dateAdapter.getYear(this._activeDate),
                     event,
@@ -1423,6 +1492,8 @@ class NgxMatMultiYearView {
      *  The returned date will have the same year as the argument date.
      */
     _getDateFromYear(year) {
+        if (!this._dateAdapter)
+            return null;
         const activeMonth = this._dateAdapter.getMonth(this.activeDate);
         const daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, activeMonth, 1));
         const normalizedDate = this._dateAdapter.createDate(year, activeMonth, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth));
@@ -1430,6 +1501,8 @@ class NgxMatMultiYearView {
     }
     /** Creates an MatCalendarCell for the given year. */
     _createCellForYear(year) {
+        if (!this._dateAdapter)
+            return null;
         const date = this._dateAdapter.createDate(year, 0, 1);
         const yearName = this._dateAdapter.getYearName(date);
         const cellClasses = this.dateClass() ? this.dateClass()(date, 'multi-year') : undefined;
@@ -1437,6 +1510,8 @@ class NgxMatMultiYearView {
     }
     /** Whether the given year is enabled. */
     _shouldEnableYear(year) {
+        if (!this._dateAdapter)
+            return false;
         // disable if the year is greater than maxDate lower than minDate
         if (year === undefined ||
             year === null ||
@@ -1463,6 +1538,8 @@ class NgxMatMultiYearView {
     }
     /** Sets the currently-highlighted year based on a model value. */
     _setSelectedYear(value) {
+        if (!this._dateAdapter)
+            return;
         this._selectedYear = null;
         if (value instanceof NgxDateRange) {
             const displayValue = value.start || value.end;
@@ -1474,17 +1551,13 @@ class NgxMatMultiYearView {
             this._selectedYear = this._dateAdapter.getYear(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatMultiYearView, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatMultiYearView, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: NgxMatMultiYearView, isStandalone: true, selector: "ngx-mat-multi-year-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_matCalendarBody", first: true, predicate: NgxMatCalendarBody, descendants: true, isSignal: true }], exportAs: ["ngxMatMultiYearView"], ngImport: i0, template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n    <tr>\n      <th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th>\n    </tr>\n  </thead>\n  <tbody\n    ngx-mat-calendar-body\n    [rows]=\"_years\"\n    [todayValue]=\"_todayYear\"\n    [startValue]=\"_selectedYear!\"\n    [endValue]=\"_selectedYear!\"\n    [numCols]=\"4\"\n    [cellAspectRatio]=\"4 / 7\"\n    [activeCell]=\"_getActiveCell()\"\n    (selectedValueChange)=\"_yearSelected($event)\"\n    (activeDateChange)=\"_updateActiveDate($event)\"\n    (keyup)=\"_handleCalendarBodyKeyup($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"\n  ></tbody>\n</table>\n", dependencies: [{ kind: "component", type: NgxMatCalendarBody, selector: "[ngx-mat-calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"], exportAs: ["matCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatMultiYearView, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-multi-year-view', exportAs: 'ngxMatMultiYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxMatCalendarBody], template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n    <tr>\n      <th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th>\n    </tr>\n  </thead>\n  <tbody\n    ngx-mat-calendar-body\n    [rows]=\"_years\"\n    [todayValue]=\"_todayYear\"\n    [startValue]=\"_selectedYear!\"\n    [endValue]=\"_selectedYear!\"\n    [numCols]=\"4\"\n    [cellAspectRatio]=\"4 / 7\"\n    [activeCell]=\"_getActiveCell()\"\n    (selectedValueChange)=\"_yearSelected($event)\"\n    (activeDateChange)=\"_updateActiveDate($event)\"\n    (keyup)=\"_handleCalendarBodyKeyup($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"\n  ></tbody>\n</table>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: i2.Directionality, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { activeDate: [{
+        }], ctorParameters: () => [], propDecorators: { activeDate: [{
                 type: Input
             }], selected: [{
                 type: Input
@@ -1506,6 +1579,8 @@ function isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {
  * "startingYear" will render when paged into view.
  */
 function getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {
+    if (!dateAdapter)
+        return 0;
     const activeYear = dateAdapter.getYear(activeDate);
     return euclideanModulo(activeYear - getStartingYear(dateAdapter, minDate, maxDate), yearsPerPage);
 }
@@ -1534,10 +1609,6 @@ function euclideanModulo(a, b) {
  * @docs-private
  */
 class NgxMatYearView {
-    _changeDetectorRef;
-    _dateFormats;
-    _dateAdapter;
-    _dir;
     _rerenderSubscription = Subscription.EMPTY;
     /** Flag used to filter out space/enter keyup events that originated outside of the view. */
     _selectionKeyPressed = false;
@@ -1546,6 +1617,8 @@ class NgxMatYearView {
         return this._activeDate;
     }
     set activeDate(value) {
+        if (!this._dateAdapter)
+            return;
         const oldActiveDate = this._activeDate;
         const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) ||
             this._dateAdapter.today();
@@ -1560,7 +1633,7 @@ class NgxMatYearView {
         return this._selected;
     }
     set selected(value) {
-        if (value instanceof NgxDateRange) {
+        if (!this._dateAdapter || value instanceof NgxDateRange) {
             this._selected = value;
         }
         else {
@@ -1574,6 +1647,10 @@ class NgxMatYearView {
         return this._minDate;
     }
     set minDate(value) {
+        if (!this._dateAdapter) {
+            this._minDate = null;
+            return;
+        }
         this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     _minDate = null;
@@ -1582,6 +1659,10 @@ class NgxMatYearView {
         return this._maxDate;
     }
     set maxDate(value) {
+        if (!this._dateAdapter) {
+            this._maxDate = null;
+            return;
+        }
         this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     _maxDate = null;
@@ -1608,11 +1689,11 @@ class NgxMatYearView {
      * Null if the selected Date is in a different year.
      */
     _selectedMonth = null;
-    constructor(_changeDetectorRef, _dateFormats, _dateAdapter, _dir) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._dateFormats = _dateFormats;
-        this._dateAdapter = _dateAdapter;
-        this._dir = _dir;
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _dateFormats = inject(MAT_DATE_FORMATS, { optional: true });
+    _dateAdapter = inject((DateAdapter), { optional: true });
+    _dir = inject(Directionality, { optional: true });
+    constructor() {
         if (!this._dateAdapter) {
             throw createMissingDateImplError$1('DateAdapter');
         }
@@ -1622,6 +1703,8 @@ class NgxMatYearView {
         this._activeDate = this._dateAdapter.today();
     }
     ngAfterContentInit() {
+        if (!this._dateAdapter)
+            return;
         this._rerenderSubscription = this._dateAdapter.localeChanges
             .pipe(startWith(null))
             .subscribe(() => this._init());
@@ -1631,6 +1714,8 @@ class NgxMatYearView {
     }
     /** Handles when a new month is selected. */
     _monthSelected(event) {
+        if (!this._dateAdapter)
+            return;
         const month = event.value;
         const selectedMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);
         this.monthSelected.emit(selectedMonth);
@@ -1650,8 +1735,9 @@ class NgxMatYearView {
     _updateActiveDate(event) {
         const month = event.value;
         const oldActiveDate = this._activeDate;
-        this.activeDate = this._getDateFromMonth(month);
-        if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
+        const dateToUse = this._getDateFromMonth(month);
+        if (this._dateAdapter && dateToUse && this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDate = dateToUse;
             this.activeDateChange.emit(this.activeDate);
         }
     }
@@ -1664,28 +1750,28 @@ class NgxMatYearView {
         const isRtl = this._isRtl();
         switch (event.keyCode) {
             case LEFT_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? 1 : -1);
+                this.activeDate = this._dateAdapter?.addCalendarMonths(this._activeDate, isRtl ? 1 : -1);
                 break;
             case RIGHT_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? -1 : 1);
+                this.activeDate = this._dateAdapter?.addCalendarMonths(this._activeDate, isRtl ? -1 : 1);
                 break;
             case UP_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -4);
+                this.activeDate = this._dateAdapter?.addCalendarMonths(this._activeDate, -4);
                 break;
             case DOWN_ARROW:
-                this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 4);
+                this.activeDate = this._dateAdapter?.addCalendarMonths(this._activeDate, 4);
                 break;
             case HOME:
-                this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -this._dateAdapter.getMonth(this._activeDate));
+                this.activeDate = this._dateAdapter?.addCalendarMonths(this._activeDate, -this._dateAdapter.getMonth(this._activeDate));
                 break;
             case END:
-                this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 11 - this._dateAdapter.getMonth(this._activeDate));
+                this.activeDate = this._dateAdapter?.addCalendarMonths(this._activeDate, 11 - this._dateAdapter.getMonth(this._activeDate));
                 break;
             case PAGE_UP:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
+                this.activeDate = this._dateAdapter?.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
                 break;
             case PAGE_DOWN:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
+                this.activeDate = this._dateAdapter?.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
                 break;
             case ENTER:
             case SPACE:
@@ -1699,7 +1785,7 @@ class NgxMatYearView {
                 // Don't prevent default or focus active cell on keys that we don't explicitly handle.
                 return;
         }
-        if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
+        if (this._dateAdapter && this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
             this.activeDateChange.emit(this.activeDate);
             this._focusActiveCellAfterViewChecked();
         }
@@ -1709,7 +1795,7 @@ class NgxMatYearView {
     /** Handles keyup events on the calendar body when calendar is in year view. */
     _handleCalendarBodyKeyup(event) {
         if (event.keyCode === SPACE || event.keyCode === ENTER) {
-            if (this._selectionKeyPressed) {
+            if (this._dateAdapter && this._selectionKeyPressed) {
                 this._monthSelected({
                     value: this._dateAdapter.getMonth(this._activeDate),
                     event,
@@ -1720,6 +1806,8 @@ class NgxMatYearView {
     }
     /** Initializes this year view. */
     _init() {
+        if (!this._dateAdapter)
+            return;
         this._setSelectedMonth(this.selected);
         this._todayMonth = this._getMonthInCurrentYear(this._dateAdapter.today());
         this._yearLabel = this._dateAdapter.getYearName(this.activeDate);
@@ -1729,7 +1817,9 @@ class NgxMatYearView {
             [0, 1, 2, 3],
             [4, 5, 6, 7],
             [8, 9, 10, 11],
-        ].map((row) => row.map((month) => this._createCellForMonth(month, monthNames[month])));
+        ].map(row => row
+            .map(m => this._createCellForMonth(m, monthNames[m]))
+            .filter(m => m != null));
         this._changeDetectorRef.markForCheck();
     }
     /** Focuses the active cell after the microtask queue is empty. */
@@ -1745,7 +1835,7 @@ class NgxMatYearView {
      * Returns null if the given Date is in another year.
      */
     _getMonthInCurrentYear(date) {
-        return date && this._dateAdapter.getYear(date) == this._dateAdapter.getYear(this.activeDate)
+        return this._dateAdapter && date && this._dateAdapter.getYear(date) == this._dateAdapter.getYear(this.activeDate)
             ? this._dateAdapter.getMonth(date)
             : null;
     }
@@ -1754,12 +1844,16 @@ class NgxMatYearView {
      *  The returned date will have the same month as the argument date.
      */
     _getDateFromMonth(month) {
+        if (!this._dateAdapter)
+            return null;
         const normalizedDate = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);
         const daysInMonth = this._dateAdapter.getNumDaysInMonth(normalizedDate);
         return this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth));
     }
     /** Creates an MatCalendarCell for the given month. */
     _createCellForMonth(month, monthName) {
+        if (!this._dateAdapter || !this._dateFormats)
+            return null;
         const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);
         const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.monthYearA11yLabel);
         const cellClasses = this.dateClass() ? this.dateClass()(date, 'year') : undefined;
@@ -1767,6 +1861,8 @@ class NgxMatYearView {
     }
     /** Whether the given month is enabled. */
     _shouldEnableMonth(month) {
+        if (!this._dateAdapter)
+            return false;
         const activeYear = this._dateAdapter.getYear(this.activeDate);
         if (month === undefined ||
             month === null ||
@@ -1791,7 +1887,7 @@ class NgxMatYearView {
      * just the month and year of this.maxDate
      */
     _isYearAndMonthAfterMaxDate(year, month) {
-        if (this.maxDate) {
+        if (this._dateAdapter && this.maxDate) {
             const maxYear = this._dateAdapter.getYear(this.maxDate);
             const maxMonth = this._dateAdapter.getMonth(this.maxDate);
             return year > maxYear || (year === maxYear && month > maxMonth);
@@ -1803,7 +1899,7 @@ class NgxMatYearView {
      * just the month and year of this.minDate
      */
     _isYearAndMonthBeforeMinDate(year, month) {
-        if (this.minDate) {
+        if (this._dateAdapter && this.minDate) {
             const minYear = this._dateAdapter.getYear(this.minDate);
             const minMonth = this._dateAdapter.getMonth(this.minDate);
             return year < minYear || (year === minYear && month < minMonth);
@@ -1824,22 +1920,13 @@ class NgxMatYearView {
             this._selectedMonth = this._getMonthInCurrentYear(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatYearView, deps: [{ token: i0.ChangeDetectorRef }, { token: MAT_DATE_FORMATS, optional: true }, { token: i1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: NgxMatYearView, isStandalone: true, selector: "ngx-mat-year-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", monthSelected: "monthSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_matCalendarBody", first: true, predicate: NgxMatCalendarBody, descendants: true, isSignal: true }], exportAs: ["ngxMatYearView"], ngImport: i0, template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n    <tr>\n      <th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th>\n    </tr>\n  </thead>\n  <tbody\n    ngx-mat-calendar-body\n    [label]=\"_yearLabel\"\n    [rows]=\"_months\"\n    [todayValue]=\"_todayMonth!\"\n    [startValue]=\"_selectedMonth!\"\n    [endValue]=\"_selectedMonth!\"\n    [labelMinRequiredCells]=\"2\"\n    [numCols]=\"4\"\n    [cellAspectRatio]=\"4 / 7\"\n    [activeCell]=\"_dateAdapter.getMonth(activeDate)\"\n    (selectedValueChange)=\"_monthSelected($event)\"\n    (activeDateChange)=\"_updateActiveDate($event)\"\n    (keyup)=\"_handleCalendarBodyKeyup($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: NgxMatCalendarBody, selector: "[ngx-mat-calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"], exportAs: ["matCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatYearView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: NgxMatYearView, isStandalone: true, selector: "ngx-mat-year-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", monthSelected: "monthSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_matCalendarBody", first: true, predicate: NgxMatCalendarBody, descendants: true, isSignal: true }], exportAs: ["ngxMatYearView"], ngImport: i0, template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n    <tr>\n      <th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th>\n    </tr>\n  </thead>\n  <tbody\n    ngx-mat-calendar-body\n    [label]=\"_yearLabel\"\n    [rows]=\"_months\"\n    [todayValue]=\"_todayMonth!\"\n    [startValue]=\"_selectedMonth!\"\n    [endValue]=\"_selectedMonth!\"\n    [labelMinRequiredCells]=\"2\"\n    [numCols]=\"4\"\n    [cellAspectRatio]=\"4 / 7\"\n    [activeCell]=\"_dateAdapter ? _dateAdapter.getMonth(activeDate) : 0\"\n    (selectedValueChange)=\"_monthSelected($event)\"\n    (activeDateChange)=\"_updateActiveDate($event)\"\n    (keyup)=\"_handleCalendarBodyKeyup($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: NgxMatCalendarBody, selector: "[ngx-mat-calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"], exportAs: ["matCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatYearView, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-year-view', exportAs: 'ngxMatYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxMatCalendarBody], template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n    <tr>\n      <th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th>\n    </tr>\n  </thead>\n  <tbody\n    ngx-mat-calendar-body\n    [label]=\"_yearLabel\"\n    [rows]=\"_months\"\n    [todayValue]=\"_todayMonth!\"\n    [startValue]=\"_selectedMonth!\"\n    [endValue]=\"_selectedMonth!\"\n    [labelMinRequiredCells]=\"2\"\n    [numCols]=\"4\"\n    [cellAspectRatio]=\"4 / 7\"\n    [activeCell]=\"_dateAdapter.getMonth(activeDate)\"\n    (selectedValueChange)=\"_monthSelected($event)\"\n    (activeDateChange)=\"_updateActiveDate($event)\"\n    (keyup)=\"_handleCalendarBodyKeyup($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: i2.Directionality, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { activeDate: [{
+            args: [{ selector: 'ngx-mat-year-view', exportAs: 'ngxMatYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxMatCalendarBody], template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n    <tr>\n      <th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th>\n    </tr>\n  </thead>\n  <tbody\n    ngx-mat-calendar-body\n    [label]=\"_yearLabel\"\n    [rows]=\"_months\"\n    [todayValue]=\"_todayMonth!\"\n    [startValue]=\"_selectedMonth!\"\n    [endValue]=\"_selectedMonth!\"\n    [labelMinRequiredCells]=\"2\"\n    [numCols]=\"4\"\n    [cellAspectRatio]=\"4 / 7\"\n    [activeCell]=\"_dateAdapter ? _dateAdapter.getMonth(activeDate) : 0\"\n    (selectedValueChange)=\"_monthSelected($event)\"\n    (activeDateChange)=\"_updateActiveDate($event)\"\n    (keyup)=\"_handleCalendarBodyKeyup($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n" }]
+        }], ctorParameters: () => [], propDecorators: { activeDate: [{
                 type: Input
             }], selected: [{
                 type: Input
@@ -1849,79 +1936,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                 type: Input
             }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], _matCalendarBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgxMatCalendarBody), { isSignal: true }] }] } });
 
-/** Datepicker data that requires internationalization. */
-class NgxMatDatepickerIntl {
-    /**
-     * Stream that emits whenever the labels here are changed. Use this to notify
-     * components if the labels have changed after initialization.
-     */
-    changes = new Subject();
-    /** A label for the calendar popup (used by screen readers). */
-    calendarLabel = 'Calendar';
-    /** A label for the button used to open the calendar popup (used by screen readers). */
-    openCalendarLabel = 'Open calendar';
-    /** Label for the button used to close the calendar popup. */
-    closeCalendarLabel = 'Close calendar';
-    /** A label for the previous month button (used by screen readers). */
-    prevMonthLabel = 'Previous month';
-    /** A label for the next month button (used by screen readers). */
-    nextMonthLabel = 'Next month';
-    /** A label for the previous year button (used by screen readers). */
-    prevYearLabel = 'Previous year';
-    /** A label for the next year button (used by screen readers). */
-    nextYearLabel = 'Next year';
-    /** A label for the previous multi-year button (used by screen readers). */
-    prevMultiYearLabel = 'Previous 24 years';
-    /** A label for the next multi-year button (used by screen readers). */
-    nextMultiYearLabel = 'Next 24 years';
-    /** A label for the 'switch to month view' button (used by screen readers). */
-    switchToMonthViewLabel = 'Choose date';
-    /** A label for the 'switch to year view' button (used by screen readers). */
-    switchToMultiYearViewLabel = 'Choose month and year';
-    /**
-     * A label for the first date of a range of dates (used by screen readers).
-     * @deprecated Provide your own internationalization string.
-     * @breaking-change 17.0.0
-     */
-    startDateLabel = 'Start date';
-    /**
-     * A label for the last date of a range of dates (used by screen readers).
-     * @deprecated Provide your own internationalization string.
-     * @breaking-change 17.0.0
-     */
-    endDateLabel = 'End date';
-    /** Formats a range of years (used for visuals). */
-    formatYearRange(start, end) {
-        return `${start} \u2013 ${end}`;
-    }
-    /** Formats a label for a range of years (used by screen readers). */
-    formatYearRangeLabel(start, end) {
-        return `${start} to ${end}`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerIntl, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerIntl, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 let calendarHeaderId = 1;
 /** Default header for MatCalendar */
 class NgxMatCalendarHeader {
-    _intl;
-    calendar;
-    _dateAdapter;
-    _dateFormats;
-    constructor(_intl, calendar, _dateAdapter, _dateFormats, changeDetectorRef) {
-        this._intl = _intl;
-        this.calendar = calendar;
-        this._dateAdapter = _dateAdapter;
-        this._dateFormats = _dateFormats;
-        this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());
+    _intl = inject(NgxMatDatepickerIntl);
+    calendar = inject(forwardRef(() => NgxMatCalendar));
+    _dateAdapter = inject((DateAdapter), { optional: true });
+    _dateFormats = inject(MAT_DATE_FORMATS, { optional: true });
+    changeDetectorRef = inject(ChangeDetectorRef);
+    constructor() {
+        this.calendar.stateChanges.subscribe(() => this.changeDetectorRef.markForCheck());
     }
     /** The display text for the current calendar view. */
     get periodButtonText() {
+        if (!this._dateAdapter || !this._dateFormats)
+            return "";
         if (this.calendar.currentView() == 'month') {
             return this._dateAdapter
                 .format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)
@@ -1934,6 +1963,8 @@ class NgxMatCalendarHeader {
     }
     /** The aria description for the current calendar view. */
     get periodButtonDescription() {
+        if (!this._dateAdapter || !this._dateFormats)
+            return "";
         if (this.calendar.currentView() == 'month') {
             return this._dateAdapter
                 .format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)
@@ -1974,6 +2005,8 @@ class NgxMatCalendarHeader {
     }
     /** Handles user clicks on the previous button. */
     previousClicked() {
+        if (!this._dateAdapter)
+            return;
         this.calendar.activeDate =
             this.calendar.currentView() == 'month'
                 ? this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1)
@@ -1981,6 +2014,8 @@ class NgxMatCalendarHeader {
     }
     /** Handles user clicks on the next button. */
     nextClicked() {
+        if (!this._dateAdapter)
+            return;
         this.calendar.activeDate =
             this.calendar.currentView() == 'month'
                 ? this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1)
@@ -1999,6 +2034,8 @@ class NgxMatCalendarHeader {
     }
     /** Whether the two dates represent the same view in the current view mode (month or year). */
     _isSameView(date1, date2) {
+        if (!this._dateAdapter)
+            return false;
         if (this.calendar.currentView() == 'month') {
             return (this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2) &&
                 this._dateAdapter.getMonth(date1) == this._dateAdapter.getMonth(date2));
@@ -2015,6 +2052,8 @@ class NgxMatCalendarHeader {
      * for the minimum year, and the second string is the formatted label for the maximum year.
      */
     _formatMinAndMaxYearLabels() {
+        if (!this._dateAdapter)
+            return ["", ""];
         // The offset from the active year to the "slot" for the starting year is the
         // *actual* first rendered year in the multi-year view, and the last year is
         // just yearsPerPage - 1 away.
@@ -2028,28 +2067,15 @@ class NgxMatCalendarHeader {
     }
     _id = `mat-calendar-header-${calendarHeaderId++}`;
     _periodButtonLabelId = `${this._id}-period-label`;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatCalendarHeader, deps: [{ token: NgxMatDatepickerIntl }, { token: forwardRef(() => NgxMatCalendar) }, { token: i1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatCalendarHeader, isStandalone: true, selector: "ngx-mat-calendar-header", exportAs: ["ngxMatCalendarHeader"], ngImport: i0, template: "<div class=\"mat-calendar-header\">\n  <div class=\"mat-calendar-controls\">\n    <button\n      mat-button\n      type=\"button\"\n      class=\"mat-calendar-period-button\"\n      (click)=\"currentPeriodClicked()\"\n      [attr.aria-label]=\"periodButtonLabel\"\n      [attr.aria-describedby]=\"_periodButtonLabelId\"\n      aria-live=\"polite\">\n      <span aria-hidden=\"true\">{{ periodButtonText }}</span>\n      <svg\n        class=\"mat-calendar-arrow\"\n        [class.mat-calendar-invert]=\"calendar.currentView() !== 'month'\"\n        viewBox=\"0 0 10 5\"\n        focusable=\"false\"\n        aria-hidden=\"true\">\n        <polygon points=\"0,0 5,5 10,0\" />\n      </svg>\n    </button>\n\n    <div class=\"mat-calendar-spacer\"></div>\n\n    <ng-content></ng-content>\n\n    <button\n      mat-icon-button\n      type=\"button\"\n      class=\"mat-calendar-previous-button\"\n      [disabled]=\"!previousEnabled()\"\n      (click)=\"previousClicked()\"\n      [attr.aria-label]=\"prevButtonLabel\"></button>\n\n    <button\n      mat-icon-button\n      type=\"button\"\n      class=\"mat-calendar-next-button\"\n      [disabled]=\"!nextEnabled()\"\n      (click)=\"nextClicked()\"\n      [attr.aria-label]=\"nextButtonLabel\"></button>\n  </div>\n</div>\n<label [id]=\"_periodButtonLabelId\" class=\"mat-calendar-hidden-label\">{{\n  periodButtonDescription\n}}</label>\n", dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatCalendarHeader, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-calendar-header', exportAs: 'ngxMatCalendarHeader', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatIconButton], template: "<div class=\"mat-calendar-header\">\n  <div class=\"mat-calendar-controls\">\n    <button\n      mat-button\n      type=\"button\"\n      class=\"mat-calendar-period-button\"\n      (click)=\"currentPeriodClicked()\"\n      [attr.aria-label]=\"periodButtonLabel\"\n      [attr.aria-describedby]=\"_periodButtonLabelId\"\n      aria-live=\"polite\">\n      <span aria-hidden=\"true\">{{ periodButtonText }}</span>\n      <svg\n        class=\"mat-calendar-arrow\"\n        [class.mat-calendar-invert]=\"calendar.currentView() !== 'month'\"\n        viewBox=\"0 0 10 5\"\n        focusable=\"false\"\n        aria-hidden=\"true\">\n        <polygon points=\"0,0 5,5 10,0\" />\n      </svg>\n    </button>\n\n    <div class=\"mat-calendar-spacer\"></div>\n\n    <ng-content></ng-content>\n\n    <button\n      mat-icon-button\n      type=\"button\"\n      class=\"mat-calendar-previous-button\"\n      [disabled]=\"!previousEnabled()\"\n      (click)=\"previousClicked()\"\n      [attr.aria-label]=\"prevButtonLabel\"></button>\n\n    <button\n      mat-icon-button\n      type=\"button\"\n      class=\"mat-calendar-next-button\"\n      [disabled]=\"!nextEnabled()\"\n      (click)=\"nextClicked()\"\n      [attr.aria-label]=\"nextButtonLabel\"></button>\n  </div>\n</div>\n<label [id]=\"_periodButtonLabelId\" class=\"mat-calendar-hidden-label\">{{\n  periodButtonDescription\n}}</label>\n" }]
-        }], ctorParameters: () => [{ type: NgxMatDatepickerIntl }, { type: NgxMatCalendar, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => NgxMatCalendar)]
-                }] }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [] });
 /** A calendar that is used as part of the datepicker. */
 class NgxMatCalendar {
-    _dateAdapter;
-    _dateFormats;
-    _changeDetectorRef;
     /** An input indicating the type of the header component, if set. */
     headerComponent = input(...(ngDevMode ? [undefined, { debugName: "headerComponent" }] : /* istanbul ignore next */ []));
     /** A portal containing the header component type for this calendar. */
@@ -2066,7 +2092,9 @@ class NgxMatCalendar {
         return this._startAt;
     }
     set startAt(value) {
-        this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._startAt = this._dateAdapter
+            ? this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value))
+            : null;
     }
     _startAt = null;
     /** Whether the calendar should be started in month or year view. */
@@ -2076,7 +2104,7 @@ class NgxMatCalendar {
         return this._selected;
     }
     set selected(value) {
-        if (value instanceof NgxDateRange) {
+        if (!this._dateAdapter || value instanceof NgxDateRange) {
             this._selected = value;
         }
         else {
@@ -2089,6 +2117,10 @@ class NgxMatCalendar {
         return this._minDate;
     }
     set minDate(value) {
+        if (!this._dateAdapter) {
+            this._minDate = null;
+            return;
+        }
         this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     _minDate = null;
@@ -2097,6 +2129,10 @@ class NgxMatCalendar {
         return this._maxDate;
     }
     set maxDate(value) {
+        if (!this._dateAdapter) {
+            this._maxDate = null;
+            return;
+        }
         this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     _maxDate = null;
@@ -2144,9 +2180,11 @@ class NgxMatCalendar {
      * highlighted when using keyboard navigation.
      */
     get activeDate() {
-        return this._clampedActiveDate ?? this._dateAdapter.today();
+        return this._clampedActiveDate ?? this._dateAdapter?.today();
     }
     set activeDate(value) {
+        if (!this._dateAdapter)
+            return;
         this._clampedActiveDate = this._dateAdapter.clampDate(value, this.minDate, this.maxDate);
         this.stateChanges.next();
         this._changeDetectorRef.markForCheck();
@@ -2158,22 +2196,25 @@ class NgxMatCalendar {
      * Emits whenever there is a state change that the header may need to respond to.
      */
     stateChanges = new Subject();
-    constructor(_intl, _dateAdapter, _dateFormats, _changeDetectorRef) {
-        this._dateAdapter = _dateAdapter;
-        this._dateFormats = _dateFormats;
-        this._changeDetectorRef = _changeDetectorRef;
+    _intl = inject(NgxMatDatepickerIntl);
+    _dateAdapter = inject((DateAdapter), { optional: true });
+    _dateFormats = inject(MAT_DATE_FORMATS, { optional: true });
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    constructor() {
         if (!this._dateAdapter) {
             throw createMissingDateImplError$1('DateAdapter');
         }
         if (!this._dateFormats) {
             throw createMissingDateImplError$1('MAT_DATE_FORMATS');
         }
-        this._intlChanges = _intl.changes.subscribe(() => {
-            _changeDetectorRef.markForCheck();
+        this._intlChanges = this._intl.changes.subscribe(() => {
+            this._changeDetectorRef.markForCheck();
             this.stateChanges.next();
         });
     }
     ngAfterContentInit() {
+        if (!this._dateAdapter)
+            return;
         this._calendarHeaderPortal = new ComponentPortal(this.headerComponent() || NgxMatCalendarHeader);
         this.activeDate = this.startAt || this._dateAdapter.today();
     }
@@ -2191,11 +2232,11 @@ class NgxMatCalendar {
         // Ignore date changes that are at a different time on the same day. This fixes issues where
         // the calendar re-renders when there is no meaningful change to [minDate] or [maxDate]
         // (#24435).
-        const minDateChange = changes['minDate'] &&
+        const minDateChange = this._dateAdapter && changes['minDate'] &&
             !this._dateAdapter.sameDate(changes['minDate'].previousValue, changes['minDate'].currentValue)
             ? changes['minDate']
             : undefined;
-        const maxDateChange = changes['maxDate'] &&
+        const maxDateChange = this._dateAdapter && changes['maxDate'] &&
             !this._dateAdapter.sameDate(changes['maxDate'].previousValue, changes['maxDate'].currentValue)
             ? changes['maxDate']
             : undefined;
@@ -2222,6 +2263,8 @@ class NgxMatCalendar {
     }
     /** Handles date selection in the month view. */
     _dateSelected(event) {
+        if (!this._dateAdapter)
+            return;
         let date = event.value;
         if (date && this.selected) {
             const selected = this.selected;
@@ -2275,7 +2318,7 @@ class NgxMatCalendar {
         // only the first component type. See https://github.com/angular/components/issues/22996.
         return this.monthView() || this.yearView() || this.multiYearView();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatCalendar, deps: [{ token: NgxMatDatepickerIntl }, { token: i1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxMatCalendar, isStandalone: true, selector: "ngx-mat-calendar", inputs: { headerComponent: { classPropertyName: "headerComponent", publicName: "headerComponent", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: false, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, comparisonStart: { classPropertyName: "comparisonStart", publicName: "comparisonStart", isSignal: true, isRequired: false, transformFunction: null }, comparisonEnd: { classPropertyName: "comparisonEnd", publicName: "comparisonEnd", isSignal: true, isRequired: false, transformFunction: null }, startDateAccessibleName: { classPropertyName: "startDateAccessibleName", publicName: "startDateAccessibleName", isSignal: true, isRequired: false, transformFunction: null }, endDateAccessibleName: { classPropertyName: "endDateAccessibleName", publicName: "endDateAccessibleName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected", viewChanged: "viewChanged", _userSelection: "_userSelection", _userDragDrop: "_userDragDrop" }, host: { classAttribute: "mat-calendar" }, providers: [NGX_MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER], viewQueries: [{ propertyName: "monthView", first: true, predicate: NgxMatMonthView, descendants: true, isSignal: true }, { propertyName: "yearView", first: true, predicate: NgxMatYearView, descendants: true, isSignal: true }, { propertyName: "multiYearView", first: true, predicate: NgxMatMultiYearView, descendants: true, isSignal: true }], exportAs: ["ngxMatCalendar"], usesOnChanges: true, ngImport: i0, template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\" />\n\n<div class=\"mat-calendar-content\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n  @switch (currentView()) {\n    @case ('month') {\n      <ngx-mat-month-view\n        [activeDate]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter()\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass()\"\n        [comparisonStart]=\"comparisonStart()\"\n        [comparisonEnd]=\"comparisonEnd()\"\n        [startDateAccessibleName]=\"startDateAccessibleName()\"\n        [endDateAccessibleName]=\"endDateAccessibleName()\"\n        (_userSelection)=\"_dateSelected($event)\"\n        (dragStarted)=\"_dragStarted($event)\"\n        (dragEnded)=\"_dragEnded($event)\"\n        [activeDrag]=\"_activeDrag\" />\n    }\n    @case ('year') {\n      <ngx-mat-year-view\n        [activeDate]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter()\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass()\"\n        (monthSelected)=\"_monthSelectedInYearView($event)\"\n        (selectedChange)=\"_goToDateInView($event, 'month')\" />\n    }\n    @case ('multi-year') {\n      <ngx-mat-multi-year-view\n        [activeDate]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter()\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass()\"\n        (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n        (selectedChange)=\"_goToDateInView($event, 'year')\" />\n    }\n  }\n</div>\n", styles: [".mat-calendar{display:block}.mat-calendar-header{padding:8px 8px 0}.mat-calendar-content{padding:0 8px 8px;outline:none}.mat-calendar-controls{display:flex;align-items:center;margin:5% calc(4.7142857143% - 16px)}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0;margin:0 8px}.mat-calendar-arrow{display:inline-block;width:10px;height:5px;margin:0 0 0 5px;vertical-align:middle}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}@media(forced-colors:active){.mat-calendar-arrow{fill:CanvasText}}.mat-calendar-previous-button,.mat-calendar-next-button{position:relative}.mat-calendar-previous-button:after,.mat-calendar-next-button:after{inset:0;position:absolute;content:\"\";margin:15.5px;border:0 solid currentColor;border-top-width:2px}[dir=rtl] .mat-calendar-previous-button,[dir=rtl] .mat-calendar-next-button{transform:rotate(180deg)}.mat-calendar-previous-button:after{border-left-width:2px;transform:translate(2px) rotate(-45deg)}.mat-calendar-next-button:after{border-right-width:2px;transform:translate(-2px) rotate(45deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px;color:var(--mat-datepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));font-size:var(--mat-datepicker-calendar-header-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-header-text-weight, var(--mat-sys-title-small-weight))}.mat-calendar-table-header-divider{position:relative;height:1px}.mat-calendar-table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px}.mat-calendar-body-cell-content:before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px) * -1)}.mat-calendar-body-cell:focus .mat-focus-indicator:before{content:\"\"}.mat-calendar-hidden-label{display:none}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: NgxMatMonthView, selector: "ngx-mat-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName", "activeDrag"], outputs: ["selectedChange", "_userSelection", "dragStarted", "dragEnded", "activeDateChange"], exportAs: ["ngxMatMonthView"] }, { kind: "component", type: NgxMatYearView, selector: "ngx-mat-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "monthSelected", "activeDateChange"], exportAs: ["ngxMatYearView"] }, { kind: "component", type: NgxMatMultiYearView, selector: "ngx-mat-multi-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "activeDateChange"], exportAs: ["ngxMatMultiYearView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatCalendar, decorators: [{
@@ -2283,14 +2326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
             args: [{ selector: 'ngx-mat-calendar', host: {
                         class: 'mat-calendar',
                     }, exportAs: 'ngxMatCalendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [NGX_MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER], imports: [CdkPortalOutlet, CdkMonitorFocus, NgxMatMonthView, NgxMatYearView, NgxMatMultiYearView], template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\" />\n\n<div class=\"mat-calendar-content\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n  @switch (currentView()) {\n    @case ('month') {\n      <ngx-mat-month-view\n        [activeDate]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter()\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass()\"\n        [comparisonStart]=\"comparisonStart()\"\n        [comparisonEnd]=\"comparisonEnd()\"\n        [startDateAccessibleName]=\"startDateAccessibleName()\"\n        [endDateAccessibleName]=\"endDateAccessibleName()\"\n        (_userSelection)=\"_dateSelected($event)\"\n        (dragStarted)=\"_dragStarted($event)\"\n        (dragEnded)=\"_dragEnded($event)\"\n        [activeDrag]=\"_activeDrag\" />\n    }\n    @case ('year') {\n      <ngx-mat-year-view\n        [activeDate]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter()\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass()\"\n        (monthSelected)=\"_monthSelectedInYearView($event)\"\n        (selectedChange)=\"_goToDateInView($event, 'month')\" />\n    }\n    @case ('multi-year') {\n      <ngx-mat-multi-year-view\n        [activeDate]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter()\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass()\"\n        (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n        (selectedChange)=\"_goToDateInView($event, 'year')\" />\n    }\n  }\n</div>\n", styles: [".mat-calendar{display:block}.mat-calendar-header{padding:8px 8px 0}.mat-calendar-content{padding:0 8px 8px;outline:none}.mat-calendar-controls{display:flex;align-items:center;margin:5% calc(4.7142857143% - 16px)}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0;margin:0 8px}.mat-calendar-arrow{display:inline-block;width:10px;height:5px;margin:0 0 0 5px;vertical-align:middle}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}@media(forced-colors:active){.mat-calendar-arrow{fill:CanvasText}}.mat-calendar-previous-button,.mat-calendar-next-button{position:relative}.mat-calendar-previous-button:after,.mat-calendar-next-button:after{inset:0;position:absolute;content:\"\";margin:15.5px;border:0 solid currentColor;border-top-width:2px}[dir=rtl] .mat-calendar-previous-button,[dir=rtl] .mat-calendar-next-button{transform:rotate(180deg)}.mat-calendar-previous-button:after{border-left-width:2px;transform:translate(2px) rotate(-45deg)}.mat-calendar-next-button:after{border-right-width:2px;transform:translate(-2px) rotate(45deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px;color:var(--mat-datepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));font-size:var(--mat-datepicker-calendar-header-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-header-text-weight, var(--mat-sys-title-small-weight))}.mat-calendar-table-header-divider{position:relative;height:1px}.mat-calendar-table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px}.mat-calendar-body-cell-content:before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px) * -1)}.mat-calendar-body-cell:focus .mat-focus-indicator:before{content:\"\"}.mat-calendar-hidden-label{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: NgxMatDatepickerIntl }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { headerComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerComponent", required: false }] }], startAt: [{
+        }], ctorParameters: () => [], propDecorators: { headerComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerComponent", required: false }] }], startAt: [{
                 type: Input
             }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], selected: [{
                 type: Input
@@ -2474,9 +2510,6 @@ class NgxMatDatepickerInputEvent {
 }
 /** Base class for datepicker inputs. */
 class NgxMatDatepickerInputBase {
-    _elementRef;
-    _dateAdapter;
-    _dateFormats;
     /** Whether the component has been initialized. */
     _isInitialized = false;
     /** The value of the input. */
@@ -2516,9 +2549,15 @@ class NgxMatDatepickerInputBase {
     dateInput = output();
     /** Emits when the internal state has changed */
     stateChanges = new Subject();
-    _onTouched = () => { };
-    _validatorOnChange = () => { };
-    _cvaOnChange = () => { };
+    _onTouched = () => {
+        // Intentionally left empty.
+    };
+    _validatorOnChange = () => {
+        // Intentionally left empty.
+    };
+    _cvaOnChange = () => {
+        // Intentionally left empty.
+    };
     _valueChangesSubscription = Subscription.EMPTY;
     _localeSubscription = Subscription.EMPTY;
     /**
@@ -2535,6 +2574,8 @@ class NgxMatDatepickerInputBase {
     };
     /** The form control validator for the date filter. */
     _filterValidator = (control) => {
+        if (!this._dateAdapter)
+            return null;
         const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
         return !controlValue || this._matchesFilter(controlValue)
             ? null
@@ -2542,6 +2583,8 @@ class NgxMatDatepickerInputBase {
     };
     /** The form control validator for the min date. */
     _minValidator = (control) => {
+        if (!this._dateAdapter)
+            return null;
         const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
         const min = this._getMinDate();
         return !min || !controlValue || this._dateAdapter.compareDate(min, controlValue) <= 0
@@ -2550,6 +2593,8 @@ class NgxMatDatepickerInputBase {
     };
     /** The form control validator for the max date. */
     _maxValidator = (control) => {
+        if (!this._dateAdapter)
+            return null;
         const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
         const max = this._getMaxDate();
         return !max || !controlValue || this._dateAdapter.compareDate(max, controlValue) >= 0
@@ -2581,10 +2626,10 @@ class NgxMatDatepickerInputBase {
     }
     /** Whether the last value set on the input was valid. */
     _lastValueValid = false;
-    constructor(_elementRef, _dateAdapter, _dateFormats) {
-        this._elementRef = _elementRef;
-        this._dateAdapter = _dateAdapter;
-        this._dateFormats = _dateFormats;
+    _elementRef = inject((ElementRef));
+    _dateAdapter = inject((DateAdapter), { optional: true });
+    _dateFormats = inject(MAT_DATE_FORMATS, { optional: true });
+    constructor() {
         if (!this._dateAdapter) {
             throw createMissingDateImplError$1('DateAdapter');
         }
@@ -2592,7 +2637,7 @@ class NgxMatDatepickerInputBase {
             throw createMissingDateImplError$1('MAT_DATE_FORMATS');
         }
         // Update the displayed date when the locale changes.
-        this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {
+        this._localeSubscription = this._dateAdapter.localeChanges.subscribe(() => {
             this._assignValueProgrammatically(this.value);
         });
     }
@@ -2600,7 +2645,7 @@ class NgxMatDatepickerInputBase {
         this._isInitialized = true;
     }
     ngOnChanges(changes) {
-        if (dateInputsHaveChanged(changes, this._dateAdapter)) {
+        if (this._dateAdapter && dateInputsHaveChanged(changes, this._dateAdapter)) {
             this.stateChanges.next(undefined);
         }
     }
@@ -2644,6 +2689,8 @@ class NgxMatDatepickerInputBase {
         }
     }
     _onInput(event) {
+        if (!this._dateAdapter || !this._dateFormats)
+            return;
         const lastValueWasValid = this._lastValueValid;
         const target = event.target;
         let date = this._dateAdapter.parse(target.value, this._dateFormats.parse.dateInput);
@@ -2686,8 +2733,9 @@ class NgxMatDatepickerInputBase {
     }
     /** Formats a value and sets it on the input element. */
     _formatValue(value) {
-        this._elementRef.nativeElement.value =
-            value != null ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';
+        this._elementRef.nativeElement.value = (this._dateAdapter && this._dateFormats && value != null)
+            ? this._dateAdapter.format(value, this._dateFormats.display.dateInput)
+            : '';
     }
     /** Assigns a value to the model. */
     _assignValue(value) {
@@ -2703,7 +2751,12 @@ class NgxMatDatepickerInputBase {
     }
     /** Whether a value is considered valid. */
     _isValidValue(value) {
-        return !value || this._dateAdapter.isValid(value);
+        if (value) {
+            return (this._dateAdapter)
+                ? this._dateAdapter.isValid(value)
+                : false;
+        }
+        return true;
     }
     /**
      * Checks whether a parent control is disabled. This is in place so that it can be overridden
@@ -2714,9 +2767,13 @@ class NgxMatDatepickerInputBase {
     }
     /** Programmatically assigns a value to the input. */
     _assignValueProgrammatically(value) {
-        value = this._dateAdapter.deserialize(value);
+        value = this._dateAdapter
+            ? this._dateAdapter.deserialize(value)
+            : null;
         this._lastValueValid = this._isValidValue(value);
-        value = this._dateAdapter.getValidDateOrNull(value);
+        value = this._dateAdapter
+            ? this._dateAdapter.getValidDateOrNull(value)
+            : null;
         this._assignValue(value);
         this._formatValue(value);
     }
@@ -2725,19 +2782,12 @@ class NgxMatDatepickerInputBase {
         const filter = this._getDateFilter();
         return !filter || filter(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerInputBase, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerInputBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatDatepickerInputBase, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerInputBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }], propDecorators: { value: [{
+        }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -2771,12 +2821,6 @@ const NGX_MAT_DATE_RANGE_INPUT_PARENT = new InjectionToken('NGX_MAT_DATE_RANGE_I
  * Base class for the individual inputs that can be projected inside a `mat-date-range-input`.
  */
 class NgxMatDateRangeInputPartBase extends NgxMatDatepickerInputBase {
-    _rangeInput;
-    _elementRef;
-    _defaultErrorStateMatcher;
-    _injector;
-    _parentForm;
-    _parentFormGroup;
     errorStateMatcher = null;
     /**
      * Form control bound to this input part.
@@ -2785,15 +2829,12 @@ class NgxMatDateRangeInputPartBase extends NgxMatDatepickerInputBase {
     ngControl = null;
     errorState = false;
     _dir = inject(Directionality, { optional: true });
-    constructor(_rangeInput, _elementRef, _defaultErrorStateMatcher, _injector, _parentForm, _parentFormGroup, dateAdapter, dateFormats) {
-        super(_elementRef, dateAdapter, dateFormats);
-        this._rangeInput = _rangeInput;
-        this._elementRef = _elementRef;
-        this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
-        this._injector = _injector;
-        this._parentForm = _parentForm;
-        this._parentFormGroup = _parentFormGroup;
-    }
+    _elementRef = inject((ElementRef));
+    _rangeInput = inject(NGX_MAT_DATE_RANGE_INPUT_PARENT);
+    _defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    _injector = inject(Injector);
+    _parentForm = inject(NgForm, { optional: true });
+    _parentFormGroup = inject(FormGroupDirective, { optional: true });
     ngOnInit() {
         // We need the date input to provide itself as a `ControlValueAccessor` and a `Validator`, while
         // injecting its `NgControl` so that the error state is handled correctly. This introduces a
@@ -2877,41 +2918,26 @@ class NgxMatDateRangeInputPartBase extends NgxMatDatepickerInputBase {
     _getAccessibleName() {
         return _computeAriaAccessibleName(this._elementRef.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDateRangeInputPartBase, deps: [{ token: NGX_MAT_DATE_RANGE_INPUT_PARENT }, { token: i0.ElementRef }, { token: i1.ErrorStateMatcher }, { token: i0.Injector }, { token: i2$1.NgForm, optional: true }, { token: i2$1.FormGroupDirective, optional: true }, { token: i1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDateRangeInputPartBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatDateRangeInputPartBase, isStandalone: true, inputs: { errorStateMatcher: "errorStateMatcher" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDateRangeInputPartBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NGX_MAT_DATE_RANGE_INPUT_PARENT]
-                }] }, { type: i0.ElementRef }, { type: i1.ErrorStateMatcher }, { type: i0.Injector }, { type: i2$1.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i2$1.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }], propDecorators: { errorStateMatcher: [{
+        }], propDecorators: { errorStateMatcher: [{
                 type: Input
             }] } });
 /** Input for entering the start date in a `mat-date-range-input`. */
 class NgxMatStartDate extends NgxMatDateRangeInputPartBase {
     /** Validator that checks that the start date isn't after the end date. */
     _startValidator = (control) => {
+        if (!this._dateAdapter)
+            return null;
         const start = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
         const end = this._model ? this._model.selection.end : null;
         return !start || !end || this._dateAdapter.compareDate(start, end) <= 0
             ? null
             : { matStartDateInvalid: { end: end, actual: start } };
     };
-    constructor(rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats) {
-        super(rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats);
-    }
     _validator = Validators.compose([...super._getValidators(), this._startValidator]);
     _getValueFromModel(modelValue) {
         return modelValue.start;
@@ -2921,10 +2947,12 @@ class NgxMatStartDate extends NgxMatDateRangeInputPartBase {
             return false;
         }
         else {
+            const fnCompare = (this._dateAdapter)
+                ? ch => !!this._dateAdapter.compareDate(ch.oldValue.start, ch.selection.start)
+                : _ => false;
             return !change.oldValue?.start
                 ? !!change.selection.start
-                : !change.selection.start ||
-                    !!this._dateAdapter.compareDate(change.oldValue.start, change.selection.start);
+                : !change.selection.start || fnCompare(change);
         }
     }
     _assignValueToModel(value) {
@@ -2955,8 +2983,8 @@ class NgxMatStartDate extends NgxMatDateRangeInputPartBase {
             super._onKeydown(event);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatStartDate, deps: [{ token: NGX_MAT_DATE_RANGE_INPUT_PARENT }, { token: i0.ElementRef }, { token: i1.ErrorStateMatcher }, { token: i0.Injector }, { token: i2$1.NgForm, optional: true }, { token: i2$1.FormGroupDirective, optional: true }, { token: i1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatStartDate, isStandalone: true, selector: "input[ngxMatStartDate]", inputs: { errorStateMatcher: "errorStateMatcher" }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { attributes: { "type": "text" }, listeners: { "input": "_onInput($event)", "change": "_onChange()", "keydown": "_onKeydown($event)", "blur": "_onBlur()" }, properties: { "disabled": "disabled", "attr.aria-haspopup": "_rangeInput.rangePicker ? \"dialog\" : null", "attr.aria-owns": "(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null", "attr.min": "_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null", "attr.max": "_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null" }, classAttribute: "mat-start-date mat-date-range-input-inner" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatStartDate, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatStartDate, isStandalone: true, selector: "input[ngxMatStartDate]", inputs: { errorStateMatcher: "errorStateMatcher" }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { attributes: { "type": "text" }, listeners: { "input": "_onInput($event)", "change": "_onChange()", "keydown": "_onKeydown($event)", "blur": "_onBlur()" }, properties: { "disabled": "disabled", "attr.aria-haspopup": "_rangeInput.rangePicker ? \"dialog\" : null", "attr.aria-owns": "(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null", "attr.min": "_dateAdapter && _getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null", "attr.max": "_dateAdapter && _getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null" }, classAttribute: "mat-start-date mat-date-range-input-inner" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: NgxMatStartDate, multi: true },
             { provide: NG_VALIDATORS, useExisting: NgxMatStartDate, multi: true },
         ], usesInheritance: true, ngImport: i0 });
@@ -2973,8 +3001,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '(keydown)': '_onKeydown($event)',
                         '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
                         '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
-                        '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null',
-                        '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null',
+                        '[attr.min]': '_dateAdapter && _getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null',
+                        '[attr.max]': '_dateAdapter && _getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null',
                         '(blur)': '_onBlur()',
                         type: 'text',
                     },
@@ -2987,34 +3015,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     outputs: ['dateChange', 'dateInput'],
                     inputs: ['errorStateMatcher'],
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NGX_MAT_DATE_RANGE_INPUT_PARENT]
-                }] }, { type: i0.ElementRef }, { type: i1.ErrorStateMatcher }, { type: i0.Injector }, { type: i2$1.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i2$1.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }] });
+        }] });
 /** Input for entering the end date in a `mat-date-range-input`. */
 class NgxMatEndDate extends NgxMatDateRangeInputPartBase {
     /** Validator that checks that the end date isn't before the start date. */
     _endValidator = (control) => {
+        if (!this._dateAdapter)
+            return null;
         const end = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
         const start = this._model ? this._model.selection.start : null;
         return !end || !start || this._dateAdapter.compareDate(end, start) >= 0
             ? null
             : { matEndDateInvalid: { start: start, actual: end } };
     };
-    constructor(rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats) {
-        super(rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats);
-    }
     _validator = Validators.compose([...super._getValidators(), this._endValidator]);
     _getValueFromModel(modelValue) {
         return modelValue.end;
@@ -3024,10 +3037,12 @@ class NgxMatEndDate extends NgxMatDateRangeInputPartBase {
             return false;
         }
         else {
+            const fnCompare = (this._dateAdapter)
+                ? ch => !!this._dateAdapter.compareDate(ch.oldValue.end, ch.selection.end)
+                : _ => false;
             return !change.oldValue?.end
                 ? !!change.selection.end
-                : !change.selection.end ||
-                    !!this._dateAdapter.compareDate(change.oldValue.end, change.selection.end);
+                : !change.selection.end || fnCompare(change);
         }
     }
     _assignValueToModel(value) {
@@ -3058,8 +3073,8 @@ class NgxMatEndDate extends NgxMatDateRangeInputPartBase {
             super._onKeydown(event);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatEndDate, deps: [{ token: NGX_MAT_DATE_RANGE_INPUT_PARENT }, { token: i0.ElementRef }, { token: i1.ErrorStateMatcher }, { token: i0.Injector }, { token: i2$1.NgForm, optional: true }, { token: i2$1.FormGroupDirective, optional: true }, { token: i1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatEndDate, isStandalone: true, selector: "input[ngxMatEndDate]", inputs: { errorStateMatcher: "errorStateMatcher" }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { attributes: { "type": "text" }, listeners: { "input": "_onInput($event)", "change": "_onChange()", "keydown": "_onKeydown($event)", "blur": "_onBlur()" }, properties: { "disabled": "disabled", "attr.aria-haspopup": "_rangeInput.rangePicker ? \"dialog\" : null", "attr.aria-owns": "(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null", "attr.min": "_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null", "attr.max": "_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null" }, classAttribute: "mat-end-date mat-date-range-input-inner" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatEndDate, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatEndDate, isStandalone: true, selector: "input[ngxMatEndDate]", inputs: { errorStateMatcher: "errorStateMatcher" }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { attributes: { "type": "text" }, listeners: { "input": "_onInput($event)", "change": "_onChange()", "keydown": "_onKeydown($event)", "blur": "_onBlur()" }, properties: { "disabled": "disabled", "attr.aria-haspopup": "_rangeInput.rangePicker ? \"dialog\" : null", "attr.aria-owns": "(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null", "attr.min": "_dateAdapter && _getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null", "attr.max": "_dateAdapter && _getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null" }, classAttribute: "mat-end-date mat-date-range-input-inner" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: NgxMatEndDate, multi: true },
             { provide: NG_VALIDATORS, useExisting: NgxMatEndDate, multi: true },
         ], usesInheritance: true, ngImport: i0 });
@@ -3076,8 +3091,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '(keydown)': '_onKeydown($event)',
                         '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
                         '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
-                        '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null',
-                        '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null',
+                        '[attr.min]': '_dateAdapter && _getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null',
+                        '[attr.max]': '_dateAdapter && _getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null',
                         '(blur)': '_onBlur()',
                         type: 'text',
                     },
@@ -3090,28 +3105,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     outputs: ['dateChange', 'dateInput'],
                     inputs: ['errorStateMatcher'],
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NGX_MAT_DATE_RANGE_INPUT_PARENT]
-                }] }, { type: i0.ElementRef }, { type: i1.ErrorStateMatcher }, { type: i0.Injector }, { type: i2$1.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i2$1.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }] });
+        }] });
 
 let nextUniqueId = 0;
 class NgxMatDateRangeInput {
-    _changeDetectorRef;
-    _elementRef;
-    _dateAdapter;
-    _formField;
     _closedSubscription = Subscription.EMPTY;
     /** Current value of the range input. */
     get value() {
@@ -3189,6 +3186,10 @@ class NgxMatDateRangeInput {
         return this._min;
     }
     set min(value) {
+        if (!this._dateAdapter) {
+            this._min = null;
+            return;
+        }
         const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         if (!this._dateAdapter.sameDate(validValue, this._min)) {
             this._min = validValue;
@@ -3201,6 +3202,10 @@ class NgxMatDateRangeInput {
         return this._max;
     }
     set max(value) {
+        if (!this._dateAdapter) {
+            this._max = null;
+            return;
+        }
         const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         if (!this._dateAdapter.sameDate(validValue, this._max)) {
             this._max = validValue;
@@ -3255,21 +3260,22 @@ class NgxMatDateRangeInput {
     ngControl;
     /** Emits when the input's state has changed. */
     stateChanges = new Subject();
-    constructor(_changeDetectorRef, _elementRef, control, _dateAdapter, _formField) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._elementRef = _elementRef;
-        this._dateAdapter = _dateAdapter;
-        this._formField = _formField;
-        if (!_dateAdapter) {
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _elementRef = inject((ElementRef));
+    control = inject(ControlContainer, { optional: true, self: true });
+    _dateAdapter = inject((DateAdapter), { optional: true });
+    _formField = inject(MAT_FORM_FIELD, { optional: true });
+    constructor() {
+        if (!this._dateAdapter) {
             throw createMissingDateImplError$1('DateAdapter');
         }
         // The datepicker module can be used both with MDC and non-MDC form fields. We have
         // to conditionally add the MDC input class so that the range picker looks correctly.
-        if (_formField?._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {
-            _elementRef.nativeElement.classList.add('mat-mdc-input-element', 'mat-mdc-form-field-input-control', 'mdc-text-field__input');
+        if (this._formField?._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {
+            this._elementRef.nativeElement.classList.add('mat-mdc-input-element', 'mat-mdc-form-field-input-control', 'mdc-text-field__input');
         }
         // TODO(crisbeto): remove `as any` after #18206 lands.
-        this.ngControl = control;
+        this.ngControl = this.control;
     }
     /**
      * Implemented as a part of `MatFormFieldControl`.
@@ -3309,7 +3315,7 @@ class NgxMatDateRangeInput {
         });
     }
     ngOnChanges(changes) {
-        if (dateInputsHaveChanged(changes, this._dateAdapter)) {
+        if (this._dateAdapter && dateInputsHaveChanged(changes, this._dateAdapter)) {
             this.stateChanges.next(undefined);
         }
     }
@@ -3397,7 +3403,7 @@ class NgxMatDateRangeInput {
     _isTargetRequired(target) {
         return target?.ngControl?.control?.hasValidator(Validators.required);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDateRangeInput, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2$1.ControlContainer, optional: true, self: true }, { token: i1.DateAdapter, optional: true }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatDateRangeInput, isStandalone: true, selector: "ngx-mat-date-range-input", inputs: { rangePicker: "rangePicker", required: "required", dateFilter: "dateFilter", min: "min", max: "max", disabled: "disabled", separator: "separator", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd" }, host: { attributes: { "role": "group" }, properties: { "class.mat-date-range-input-hide-placeholders": "_shouldHidePlaceholders()", "class.mat-date-range-input-required": "required", "attr.id": "id", "attr.aria-labelledby": "_getAriaLabelledby()", "attr.aria-describedby": "_ariaDescribedBy", "attr.data-mat-calendar": "rangePicker ? rangePicker.id : null" }, classAttribute: "mat-date-range-input" }, providers: [
             { provide: MatFormFieldControl, useExisting: NgxMatDateRangeInput },
             {
@@ -3426,18 +3432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                             useExisting: NgxMatDateRangeInput,
                         },
                     ], imports: [CdkMonitorFocus], template: "<div\n  class=\"mat-date-range-input-container\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"_updateFocus($event)\"\n>\n  <div class=\"mat-date-range-input-wrapper\">\n    <ng-content select=\"input[matStartDate]\"></ng-content>\n    <span class=\"mat-date-range-input-mirror\" aria-hidden=\"true\">{{\n      _getInputMirrorValue(\"start\")\n    }}</span>\n  </div>\n\n  <span\n    class=\"mat-date-range-input-separator\"\n    [class.mat-date-range-input-separator-hidden]=\"_shouldHideSeparator()\"\n    >{{ separator }}</span\n  >\n\n  <div class=\"mat-date-range-input-wrapper mat-date-range-input-end-wrapper\">\n    <ng-content select=\"input[matEndDate]\"></ng-content>\n    <span class=\"mat-date-range-input-mirror\" aria-hidden=\"true\">{{\n      _getInputMirrorValue(\"end\")\n    }}</span>\n  </div>\n</div>\n", styles: [".mat-date-range-input{display:block;width:100%}.mat-date-range-input-container{display:flex;align-items:center}.mat-date-range-input-separator{transition:opacity .4s .1333333333333s cubic-bezier(.25,.8,.25,1);margin:0 4px}._mat-animation-noopable .mat-date-range-input-separator{transition:none}.mat-date-range-input-separator-hidden{-webkit-user-select:none;user-select:none;opacity:0;transition:none}.mat-date-range-input-wrapper{position:relative;overflow:hidden;max-width:calc(50% - 4px)}.mat-date-range-input-end-wrapper{flex-grow:1}.mat-date-range-input-inner{position:absolute;top:0;left:0;font:inherit;background:transparent;color:currentColor;border:none;outline:none;padding:0;margin:0;vertical-align:bottom;text-align:inherit;appearance:none;width:100%;height:100%}.mat-date-range-input-inner:-moz-ui-invalid{box-shadow:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{-webkit-user-select:none;user-select:none;color:transparent!important;-webkit-text-fill-color:transparent;transition:none}@media(forced-colors:active){.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{opacity:0}}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{-webkit-user-select:none;user-select:none;color:transparent!important;-webkit-text-fill-color:transparent;transition:none}@media(forced-colors:active){.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{opacity:0}}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{-webkit-user-select:none;user-select:none;color:transparent!important;-webkit-text-fill-color:transparent;transition:none}@media(forced-colors:active){.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{opacity:0}}.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{-webkit-user-select:none;user-select:none;color:transparent!important;-webkit-text-fill-color:transparent;transition:none}@media(forced-colors:active){.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{opacity:0}}._mat-animation-noopable .mat-date-range-input-inner::placeholder{transition:none}._mat-animation-noopable .mat-date-range-input-inner::-moz-placeholder{transition:none}._mat-animation-noopable .mat-date-range-input-inner::-webkit-input-placeholder{transition:none}._mat-animation-noopable .mat-date-range-input-inner:-ms-input-placeholder{transition:none}.mat-date-range-input-mirror{-webkit-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;display:inline-block;min-width:2px}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:200px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2$1.ControlContainer, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_FORM_FIELD]
-                }] }], propDecorators: { rangePicker: [{
+        }], ctorParameters: () => [], propDecorators: { rangePicker: [{
                 type: Input
             }], required: [{
                 type: Input
@@ -3526,8 +3521,12 @@ class NgxMatTimepickerComponent {
             nonNullable: true,
         }),
     });
-    _onChange = () => { };
-    _onTouched = () => { };
+    _onChange = () => {
+        // Intentionally left empty.
+    };
+    _onTouched = () => {
+        // Intentionally left empty.
+    };
     value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     /** Hour */
     get hour() {
@@ -3707,7 +3706,7 @@ class NgxMatTimepickerComponent {
                 useExisting: forwardRef(() => NgxMatTimepickerComponent),
                 multi: true,
             },
-        ], exportAs: ["ngxMatTimepicker"], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <table class=\"ngx-mat-timepicker-table\">\n    <tbody class=\"ngx-mat-timepicker-tbody\">\n      @if (showSpinners()) {\n        <tr>\n          <td>\n            <button\n              type=\"button\"\n              mat-icon-button\n              aria-label=\"expand_less icon\"\n              (click)=\"change('hour', true)\"\n              [disabled]=\"disabled()\">\n              <mat-icon>\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <path d=\"M18 15l-6-6-6 6\" />\n                </svg>\n              </mat-icon>\n            </button>\n          </td>\n          <td></td>\n          <td>\n            <button\n              type=\"button\"\n              mat-icon-button\n              aria-label=\"expand_less icon\"\n              (click)=\"change('minute', true)\"\n              [disabled]=\"disabled() || disableMinute()\">\n              <mat-icon\n                ><svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <path d=\"M18 15l-6-6-6 6\" /></svg\n              ></mat-icon>\n            </button>\n          </td>\n          <td></td>\n          @if (showSeconds()) {\n            <td>\n              <button\n                type=\"button\"\n                mat-icon-button\n                aria-label=\"expand_less icon\"\n                (click)=\"change('second', true)\"\n                [disabled]=\"disabled() || disableMinute()\">\n                <mat-icon\n                  ><svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\">\n                    <path d=\"M18 15l-6-6-6 6\" /></svg\n                ></mat-icon>\n              </button>\n            </td>\n          }\n          @if (enableMeridian()) {\n            <td class=\"ngx-mat-timepicker-spacer\"></td>\n            <td></td>\n          }\n        </tr>\n      }\n\n      <tr>\n        <td>\n          <mat-form-field appearance=\"fill\" [color]=\"color()\">\n            <input\n              type=\"text\"\n              matInput\n              (input)=\"formatInput($any($event).target)\"\n              maxlength=\"2\"\n              formControlName=\"hour\"\n              (keydown.ArrowUp)=\"change('hour', true); $event.preventDefault()\"\n              (keydown.ArrowDown)=\"change('hour', false); $event.preventDefault()\"\n              (blur)=\"change('hour')\" />\n          </mat-form-field>\n        </td>\n        <td class=\"ngx-mat-timepicker-spacer\">&#58;</td>\n        <td>\n          <mat-form-field appearance=\"fill\" [color]=\"color()\">\n            <input\n              type=\"text\"\n              matInput\n              (input)=\"formatInput($any($event).target)\"\n              maxlength=\"2\"\n              formControlName=\"minute\"\n              (keydown.ArrowUp)=\"change('minute', true); $event.preventDefault()\"\n              (keydown.ArrowDown)=\"change('minute', false); $event.preventDefault()\"\n              (blur)=\"change('minute')\" />\n          </mat-form-field>\n        </td>\n        @if (showSeconds()) {\n          <td class=\"ngx-mat-timepicker-spacer\">&#58;</td>\n          <td>\n            <mat-form-field appearance=\"fill\" [color]=\"color()\">\n              <input\n                type=\"text\"\n                matInput\n                (input)=\"formatInput($any($event).target)\"\n                maxlength=\"2\"\n                formControlName=\"second\"\n                (keydown.ArrowUp)=\"change('second', true); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"change('second', false); $event.preventDefault()\"\n                (blur)=\"change('second')\" />\n            </mat-form-field>\n          </td>\n        }\n\n        @if (enableMeridian()) {\n          <td class=\"ngx-mat-timepicker-spacer\"></td>\n\n          <td class=\"ngx-mat-timepicker-meridian\">\n            <button\n              mat-button\n              (click)=\"toggleMeridian()\"\n              mat-stroked-button\n              [color]=\"color()\"\n              [disabled]=\"disabled()\">\n              {{ meridian() }}\n            </button>\n          </td>\n        }\n      </tr>\n\n      @if (showSpinners()) {\n        <tr>\n          <td>\n            <button\n              type=\"button\"\n              mat-icon-button\n              aria-label=\"keyboard_arrow_down icon\"\n              (click)=\"change('hour', false)\"\n              [disabled]=\"disabled()\">\n              <mat-icon>\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <path d=\"M6 9l6 6 6-6\" />\n                </svg>\n              </mat-icon>\n            </button>\n          </td>\n          <td></td>\n          <td>\n            <button\n              type=\"button\"\n              mat-icon-button\n              aria-label=\"keyboard_arrow_down icon\"\n              (click)=\"change('minute', false)\"\n              [disabled]=\"disabled() || disableMinute()\">\n              <mat-icon\n                ><svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <path d=\"M6 9l6 6 6-6\" /></svg\n              ></mat-icon>\n            </button>\n          </td>\n          @if (showSeconds()) {\n            <td></td>\n\n            <td>\n              <button\n                type=\"button\"\n                mat-icon-button\n                aria-label=\"keyboard_arrow_down icon\"\n                (click)=\"change('second', false)\"\n                [disabled]=\"disabled() || disableMinute()\">\n                <mat-icon\n                  ><svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\">\n                    <path d=\"M6 9l6 6 6-6\" /></svg\n                ></mat-icon>\n              </button>\n            </td>\n          }\n\n          @if (enableMeridian()) {\n            <td class=\"ngx-mat-timepicker-spacer\"></td>\n            <td></td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</form>\n", styles: [".ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td{text-align:center}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td.ngx-mat-timepicker-spacer{font-weight:700}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td.ngx-mat-timepicker-meridian .mdc-button{min-width:64px;line-height:36px;min-width:0;border-radius:50%;width:36px;height:36px;padding:0;flex-shrink:0}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button{display:inline-flex;align-items:center;justify-content:center;height:var(--mat-icon-button-state-layer-size, 40px);width:var(--mdc-icon-button-state-layer-size, 40px);line-height:var(--mdc-icon-button-state-layer-size, 40px);font-size:var(--mdc-icon-button-icon-size, 24px);color:var(--mdc-icon-button-icon-color, var(--mat-sys-on-surface-variant));padding:calc((var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2)}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button .mat-icon{font-size:var(--mdc-icon-button-icon-size, 24px)}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button svg{width:var(--mdc-icon-button-icon-size, 24px);height:var(--mdc-icon-button-icon-size, 24px);vertical-align:baseline}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button:disabled,.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-icon-button-disabled-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field{width:24px;max-width:24px;text-align:center}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field.mat-focused .mdc-text-field--filled .mat-mdc-form-field-focus-overlay,.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field:hover .mdc-text-field--filled .mat-mdc-form-field-focus-overlay{background-color:transparent}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled{background-color:transparent!important;padding:0!important}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled .mat-mdc-form-field-infix{padding:4px 0;min-height:1px!important}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled .mat-mdc-form-field-infix input{text-align:center;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], exportAs: ["ngxMatTimepicker"], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <table class=\"ngx-mat-timepicker-table\">\n    <tbody class=\"ngx-mat-timepicker-tbody\">\n      @if (showSpinners()) {\n        <tr>\n          <td>\n            <button\n              type=\"button\"\n              mat-icon-button\n              aria-label=\"expand_less icon\"\n              (click)=\"change('hour', true)\"\n              [disabled]=\"disabled()\">\n              <mat-icon>\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <path d=\"M18 15l-6-6-6 6\" />\n                </svg>\n              </mat-icon>\n            </button>\n          </td>\n          <td></td>\n          <td>\n            <button\n              type=\"button\"\n              mat-icon-button\n              aria-label=\"expand_less icon\"\n              (click)=\"change('minute', true)\"\n              [disabled]=\"disabled() || disableMinute()\">\n              <mat-icon\n                ><svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <path d=\"M18 15l-6-6-6 6\" /></svg\n              ></mat-icon>\n            </button>\n          </td>\n          <td></td>\n          @if (showSeconds()) {\n            <td>\n              <button\n                type=\"button\"\n                mat-icon-button\n                aria-label=\"expand_less icon\"\n                (click)=\"change('second', true)\"\n                [disabled]=\"disabled() || disableMinute()\">\n                <mat-icon\n                  ><svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\">\n                    <path d=\"M18 15l-6-6-6 6\" /></svg\n                ></mat-icon>\n              </button>\n            </td>\n          }\n          @if (enableMeridian()) {\n            <td class=\"ngx-mat-timepicker-spacer\"></td>\n            <td></td>\n          }\n        </tr>\n      }\n\n      <tr>\n        <td>\n          <mat-form-field appearance=\"fill\" [color]=\"color()\">\n            <input\n              type=\"text\"\n              matInput\n              (input)=\"formatInput($any($event).target)\"\n              maxlength=\"2\"\n              formControlName=\"hour\"\n              (keydown.ArrowUp)=\"change('hour', true); $event.preventDefault()\"\n              (keydown.ArrowDown)=\"change('hour', false); $event.preventDefault()\"\n              (blur)=\"change('hour')\" />\n          </mat-form-field>\n        </td>\n        <td class=\"ngx-mat-timepicker-spacer\">&#58;</td>\n        <td>\n          <mat-form-field appearance=\"fill\" [color]=\"color()\">\n            <input\n              type=\"text\"\n              matInput\n              (input)=\"formatInput($any($event).target)\"\n              maxlength=\"2\"\n              formControlName=\"minute\"\n              (keydown.ArrowUp)=\"change('minute', true); $event.preventDefault()\"\n              (keydown.ArrowDown)=\"change('minute', false); $event.preventDefault()\"\n              (blur)=\"change('minute')\" />\n          </mat-form-field>\n        </td>\n        @if (showSeconds()) {\n          <td class=\"ngx-mat-timepicker-spacer\">&#58;</td>\n          <td>\n            <mat-form-field appearance=\"fill\" [color]=\"color()\">\n              <input\n                type=\"text\"\n                matInput\n                (input)=\"formatInput($any($event).target)\"\n                maxlength=\"2\"\n                formControlName=\"second\"\n                (keydown.ArrowUp)=\"change('second', true); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"change('second', false); $event.preventDefault()\"\n                (blur)=\"change('second')\" />\n            </mat-form-field>\n          </td>\n        }\n\n        @if (enableMeridian()) {\n          <td class=\"ngx-mat-timepicker-spacer\"></td>\n\n          <td class=\"ngx-mat-timepicker-meridian\">\n            <button\n              mat-button\n              (click)=\"toggleMeridian()\"\n              mat-stroked-button\n              [color]=\"color()\"\n              [disabled]=\"disabled()\">\n              {{ meridian() }}\n            </button>\n          </td>\n        }\n      </tr>\n\n      @if (showSpinners()) {\n        <tr>\n          <td>\n            <button\n              type=\"button\"\n              mat-icon-button\n              aria-label=\"keyboard_arrow_down icon\"\n              (click)=\"change('hour', false)\"\n              [disabled]=\"disabled()\">\n              <mat-icon>\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <path d=\"M6 9l6 6 6-6\" />\n                </svg>\n              </mat-icon>\n            </button>\n          </td>\n          <td></td>\n          <td>\n            <button\n              type=\"button\"\n              mat-icon-button\n              aria-label=\"keyboard_arrow_down icon\"\n              (click)=\"change('minute', false)\"\n              [disabled]=\"disabled() || disableMinute()\">\n              <mat-icon\n                ><svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <path d=\"M6 9l6 6 6-6\" /></svg\n              ></mat-icon>\n            </button>\n          </td>\n          @if (showSeconds()) {\n            <td></td>\n\n            <td>\n              <button\n                type=\"button\"\n                mat-icon-button\n                aria-label=\"keyboard_arrow_down icon\"\n                (click)=\"change('second', false)\"\n                [disabled]=\"disabled() || disableMinute()\">\n                <mat-icon\n                  ><svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\">\n                    <path d=\"M6 9l6 6 6-6\" /></svg\n                ></mat-icon>\n              </button>\n            </td>\n          }\n\n          @if (enableMeridian()) {\n            <td class=\"ngx-mat-timepicker-spacer\"></td>\n            <td></td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</form>\n", styles: [".ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td{text-align:center}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td.ngx-mat-timepicker-spacer{font-weight:700}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td.ngx-mat-timepicker-meridian .mdc-button{min-width:64px;line-height:36px;min-width:0;border-radius:50%;width:36px;height:36px;padding:0;flex-shrink:0}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button{display:inline-flex;align-items:center;justify-content:center;height:var(--mat-icon-button-state-layer-size, 40px);width:var(--mdc-icon-button-state-layer-size, 40px);line-height:var(--mdc-icon-button-state-layer-size, 40px);font-size:var(--mdc-icon-button-icon-size, 24px);color:var(--mdc-icon-button-icon-color, var(--mat-sys-on-surface-variant));padding:calc((var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2)}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button .mat-icon{font-size:var(--mdc-icon-button-icon-size, 24px)}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button svg{width:var(--mdc-icon-button-icon-size, 24px);height:var(--mdc-icon-button-icon-size, 24px);vertical-align:baseline}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button:disabled,.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-icon-button-disabled-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field{width:24px;max-width:24px;text-align:center}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field.mat-focused .mdc-text-field--filled .mat-mdc-form-field-focus-overlay,.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field:hover .mdc-text-field--filled .mat-mdc-form-field-focus-overlay{background-color:transparent}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled{background-color:transparent!important;padding:0!important}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled .mat-mdc-form-field-infix{padding:4px 0;min-height:1px!important}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled .mat-mdc-form-field-infix input{text-align:center;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatTimepickerComponent, decorators: [{
             type: Component,
@@ -3751,10 +3750,6 @@ const NGX_MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
  * @docs-private
  */
 class NgxMatDatepickerContent {
-    _changeDetectorRef;
-    _globalModel;
-    _dateAdapter;
-    _rangeSelectionStrategy;
     _subscriptions = new Subscription();
     _model = null;
     /** Reference to the internal calendar component. */
@@ -3812,12 +3807,13 @@ class NgxMatDatepickerContent {
         return this._calendar().currentView() == 'month';
     }
     _modelTime = null;
-    constructor(_changeDetectorRef, _globalModel, _dateAdapter, _rangeSelectionStrategy, intl) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._globalModel = _globalModel;
-        this._dateAdapter = _dateAdapter;
-        this._rangeSelectionStrategy = _rangeSelectionStrategy;
-        this._closeButtonText = intl.closeCalendarLabel;
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _globalModel = inject((NgxMatDateSelectionModel));
+    _dateAdapter = inject((DateAdapter));
+    _rangeSelectionStrategy = inject(NGX_MAT_DATE_RANGE_SELECTION_STRATEGY, { optional: true });
+    _intl = inject(NgxMatDatepickerIntl);
+    constructor() {
+        this._closeButtonText = this._intl.closeCalendarLabel;
         effect(() => {
             const calendar = this._calendar();
             if (calendar) {
@@ -3921,8 +3917,8 @@ class NgxMatDatepickerContent {
             this._changeDetectorRef.detectChanges();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerContent, deps: [{ token: i0.ChangeDetectorRef }, { token: NgxMatDateSelectionModel }, { token: i1.DateAdapter }, { token: NGX_MAT_DATE_RANGE_SELECTION_STRATEGY, optional: true }, { token: NgxMatDatepickerIntl }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxMatDatepickerContent, isStandalone: true, selector: "ngx-mat-datepicker-content", inputs: { color: "color" }, host: { listeners: { "animationend": "_onAnimationEnd($event)" }, properties: { "class.mat-datepicker-content-touch": "datepicker!.touchUi", "class.mat-datepicker-content-touch-with-time": "!datepicker!.hideTime", "class.mat-primary": "this.isPrimary", "class.mat-accent": "this.isAccent", "class.mat-warn": "this.isWarn", "class.panel-enter-dropdown": "this.isEnterDropdown", "class.panel-enter-dialog": "this.isEnterDialog", "class.panel-leave": "this.isLeavingClass" }, classAttribute: "mat-datepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: NgxMatCalendar, descendants: true, isSignal: true }], exportAs: ["ngxMatDatepickerContent"], ngImport: i0, template: "<div\n  cdkTrapFocus\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n  class=\"mat-datepicker-content-container\"\n  [class.mat-datepicker-content-container-with-custom-header]=\"\n    datepicker?.calendarHeaderComponent()\n  \"\n  [class.mat-datepicker-content-container-with-actions]=\"_actionsPortal\"\n  [class.mat-datepicker-content-container-with-time]=\"!datepicker!._hideTime\"\n>\n  <ngx-mat-calendar\n    [id]=\"datepicker!.id\"\n    [ngClass]=\"datepicker!.panelClass\"\n    [startAt]=\"datepicker!.startAt\"\n    [startView]=\"datepicker!.startView()\"\n    [minDate]=\"datepicker!._getMinDate()\"\n    [maxDate]=\"datepicker!._getMaxDate()\"\n    [dateFilter]=\"datepicker!._getDateFilter()\"\n    [headerComponent]=\"datepicker!.calendarHeaderComponent()\"\n    [selected]=\"_getSelected()\"\n    [dateClass]=\"datepicker!.dateClass()\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\"\n    [class.calendar-fade-enter]=\"false\"\n    [startDateAccessibleName]=\"startDateAccessibleName\"\n    [endDateAccessibleName]=\"endDateAccessibleName\"\n    (yearSelected)=\"datepicker!._selectYear($event)\"\n    (monthSelected)=\"datepicker!._selectMonth($event)\"\n    (viewChanged)=\"datepicker!._viewChanged($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\"\n    (_userDragDrop)=\"_handleUserDragDrop($event)\"\n  />\n\n  @if (isViewMonth) {\n    @if (!datepicker!._hideTime) {\n      <div\n        class=\"time-container\"\n        [ngClass]=\"datepicker!.panelClass\"\n        [class.disable-seconds]=\"!datepicker!._showSeconds\"\n      >\n        <ngx-mat-timepicker\n          [showSpinners]=\"datepicker!._showSpinners\"\n          [showSeconds]=\"datepicker!._showSeconds\"\n          [disabled]=\"datepicker!._disabled || !_modelTime\"\n          [stepHour]=\"datepicker!._stepHour\"\n          [stepMinute]=\"datepicker!._stepMinute\"\n          [stepSecond]=\"datepicker!._stepSecond\"\n          [(ngModel)]=\"_modelTime\"\n          [color]=\"datepicker!._color\"\n          [enableMeridian]=\"datepicker!._enableMeridian\"\n          [disableMinute]=\"datepicker!._disableMinute\"\n          (ngModelChange)=\"onTimeChanged($event)\"\n        />\n      </div>\n    }\n  }\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\" />\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    mat-raised-button\n    [color]=\"color || 'primary'\"\n    class=\"mat-datepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"datepicker?.close()\"\n  >\n    {{ _closeButtonText }}\n  </button>\n</div>\n", styles: ["@keyframes panelDropdownEnter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panelDialogEnter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panelLeave{0%{opacity:1}to{opacity:0}}.panel-enter-dropdown{animation:panelDropdownEnter .12s cubic-bezier(0,0,.2,1)}.panel-enter-dialog{animation:panelDialogEnter .15s cubic-bezier(0,0,.2,1)}.panel-leave{animation:panelLeave .1s linear forwards;pointer-events:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.calendar-fade-enter{animation:fadeIn .12s .1s cubic-bezier(.55,0,.55,.2) forwards}\n", ".mat-datepicker-content{display:block;border-radius:var(--mat-datepicker-calendar-container-shape, var(--mat-sys-corner-large, 4px));background-color:var(--mat-datepicker-calendar-container-background-color, var(--mat-sys-surface-container-high));color:var(--mat-datepicker-calendar-container-text-color, var(--mat-sys-on-surface));box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12))}.mat-datepicker-content .mat-calendar{font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.time-container{display:flex;position:relative;padding-top:5px;justify-content:center}.time-container.disable-seconds .ngx-mat-timepicker .table{margin-left:9px}.time-container:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background-color:#0000001f}.mat-datepicker-content-touch{display:block;max-height:90vh;position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:815px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation:landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:90vh}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time{height:auto;max-height:none}}@media all and (orientation:portrait){.mat-datepicker-content-touch{max-height:100vh}.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time{height:auto;max-height:870px}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time.mat-datepicker-content-container-with-actions{max-height:none!important}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: NgxMatCalendar, selector: "ngx-mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["ngxMatCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["disabled", "showSpinners", "stepHour", "stepMinute", "stepSecond", "showSeconds", "disableMinute", "enableMeridian", "defaultTime", "color", "meridian", "value"], outputs: ["valueChange"], exportAs: ["ngxMatTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgxMatDatepickerContent, isStandalone: true, selector: "ngx-mat-datepicker-content", inputs: { color: "color" }, host: { listeners: { "animationend": "_onAnimationEnd($event)" }, properties: { "class.mat-datepicker-content-touch": "datepicker!.touchUi", "class.mat-datepicker-content-touch-with-time": "!datepicker!.hideTime", "class.mat-primary": "this.isPrimary", "class.mat-accent": "this.isAccent", "class.mat-warn": "this.isWarn", "class.panel-enter-dropdown": "this.isEnterDropdown", "class.panel-enter-dialog": "this.isEnterDialog", "class.panel-leave": "this.isLeavingClass" }, classAttribute: "mat-datepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: NgxMatCalendar, descendants: true, isSignal: true }], exportAs: ["ngxMatDatepickerContent"], ngImport: i0, template: "<div\n  cdkTrapFocus\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n  class=\"mat-datepicker-content-container\"\n  [class.mat-datepicker-content-container-with-custom-header]=\"\n    datepicker?.calendarHeaderComponent()\n  \"\n  [class.mat-datepicker-content-container-with-actions]=\"_actionsPortal\"\n  [class.mat-datepicker-content-container-with-time]=\"!datepicker!._hideTime\"\n>\n  <ngx-mat-calendar\n    [id]=\"datepicker!.id\"\n    [ngClass]=\"datepicker!.panelClass\"\n    [startAt]=\"datepicker!.startAt\"\n    [startView]=\"datepicker!.startView()\"\n    [minDate]=\"datepicker!._getMinDate()\"\n    [maxDate]=\"datepicker!._getMaxDate()\"\n    [dateFilter]=\"datepicker!._getDateFilter()\"\n    [headerComponent]=\"datepicker!.calendarHeaderComponent()\"\n    [selected]=\"_getSelected()\"\n    [dateClass]=\"datepicker!.dateClass()\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\"\n    [class.calendar-fade-enter]=\"false\"\n    [startDateAccessibleName]=\"startDateAccessibleName\"\n    [endDateAccessibleName]=\"endDateAccessibleName\"\n    (yearSelected)=\"datepicker!._selectYear($event)\"\n    (monthSelected)=\"datepicker!._selectMonth($event)\"\n    (viewChanged)=\"datepicker!._viewChanged($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\"\n    (_userDragDrop)=\"_handleUserDragDrop($event)\"\n  />\n\n  @if (isViewMonth) {\n    @if (!datepicker!._hideTime) {\n      <div\n        class=\"time-container\"\n        [ngClass]=\"datepicker!.panelClass\"\n        [class.disable-seconds]=\"!datepicker!._showSeconds\"\n      >\n        <ngx-mat-timepicker\n          [showSpinners]=\"datepicker!._showSpinners\"\n          [showSeconds]=\"datepicker!._showSeconds\"\n          [disabled]=\"datepicker!._disabled || !_modelTime\"\n          [stepHour]=\"datepicker!._stepHour\"\n          [stepMinute]=\"datepicker!._stepMinute\"\n          [stepSecond]=\"datepicker!._stepSecond\"\n          [(ngModel)]=\"_modelTime\"\n          [color]=\"datepicker!._color\"\n          [enableMeridian]=\"datepicker!._enableMeridian\"\n          [disableMinute]=\"datepicker!._disableMinute\"\n          (ngModelChange)=\"onTimeChanged($event)\"\n        />\n      </div>\n    }\n  }\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\" />\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    mat-raised-button\n    [color]=\"color || 'primary'\"\n    class=\"mat-datepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"datepicker?.close()\"\n  >\n    {{ _closeButtonText }}\n  </button>\n</div>\n", styles: ["@keyframes panelDropdownEnter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panelDialogEnter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panelLeave{0%{opacity:1}to{opacity:0}}.panel-enter-dropdown{animation:panelDropdownEnter .12s cubic-bezier(0,0,.2,1)}.panel-enter-dialog{animation:panelDialogEnter .15s cubic-bezier(0,0,.2,1)}.panel-leave{animation:panelLeave .1s linear forwards;pointer-events:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.calendar-fade-enter{animation:fadeIn .12s .1s cubic-bezier(.55,0,.55,.2) forwards}\n", ".mat-datepicker-content{display:block;border-radius:var(--mat-datepicker-calendar-container-shape, var(--mat-sys-corner-large, 4px));background-color:var(--mat-datepicker-calendar-container-background-color, var(--mat-sys-surface-container-high));color:var(--mat-datepicker-calendar-container-text-color, var(--mat-sys-on-surface));box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12))}.mat-datepicker-content .mat-calendar{font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.time-container{display:flex;position:relative;padding-top:5px;justify-content:center}.time-container.disable-seconds .ngx-mat-timepicker .table{margin-left:9px}.time-container:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background-color:#0000001f}.mat-datepicker-content-touch{display:block;max-height:90vh;position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:815px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation:landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:90vh}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time{height:auto;max-height:none}}@media all and (orientation:portrait){.mat-datepicker-content-touch{max-height:100vh}.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time{height:auto;max-height:870px}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time.mat-datepicker-content-container-with-actions{max-height:none!important}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: NgxMatCalendar, selector: "ngx-mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["ngxMatCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["disabled", "showSpinners", "stepHour", "stepMinute", "stepSecond", "showSeconds", "disableMinute", "enableMeridian", "defaultTime", "color", "meridian", "value"], outputs: ["valueChange"], exportAs: ["ngxMatTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerContent, decorators: [{
             type: Component,
@@ -3941,12 +3937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         CdkPortalOutlet,
                         MatButton,
                     ], template: "<div\n  cdkTrapFocus\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n  class=\"mat-datepicker-content-container\"\n  [class.mat-datepicker-content-container-with-custom-header]=\"\n    datepicker?.calendarHeaderComponent()\n  \"\n  [class.mat-datepicker-content-container-with-actions]=\"_actionsPortal\"\n  [class.mat-datepicker-content-container-with-time]=\"!datepicker!._hideTime\"\n>\n  <ngx-mat-calendar\n    [id]=\"datepicker!.id\"\n    [ngClass]=\"datepicker!.panelClass\"\n    [startAt]=\"datepicker!.startAt\"\n    [startView]=\"datepicker!.startView()\"\n    [minDate]=\"datepicker!._getMinDate()\"\n    [maxDate]=\"datepicker!._getMaxDate()\"\n    [dateFilter]=\"datepicker!._getDateFilter()\"\n    [headerComponent]=\"datepicker!.calendarHeaderComponent()\"\n    [selected]=\"_getSelected()\"\n    [dateClass]=\"datepicker!.dateClass()\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\"\n    [class.calendar-fade-enter]=\"false\"\n    [startDateAccessibleName]=\"startDateAccessibleName\"\n    [endDateAccessibleName]=\"endDateAccessibleName\"\n    (yearSelected)=\"datepicker!._selectYear($event)\"\n    (monthSelected)=\"datepicker!._selectMonth($event)\"\n    (viewChanged)=\"datepicker!._viewChanged($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\"\n    (_userDragDrop)=\"_handleUserDragDrop($event)\"\n  />\n\n  @if (isViewMonth) {\n    @if (!datepicker!._hideTime) {\n      <div\n        class=\"time-container\"\n        [ngClass]=\"datepicker!.panelClass\"\n        [class.disable-seconds]=\"!datepicker!._showSeconds\"\n      >\n        <ngx-mat-timepicker\n          [showSpinners]=\"datepicker!._showSpinners\"\n          [showSeconds]=\"datepicker!._showSeconds\"\n          [disabled]=\"datepicker!._disabled || !_modelTime\"\n          [stepHour]=\"datepicker!._stepHour\"\n          [stepMinute]=\"datepicker!._stepMinute\"\n          [stepSecond]=\"datepicker!._stepSecond\"\n          [(ngModel)]=\"_modelTime\"\n          [color]=\"datepicker!._color\"\n          [enableMeridian]=\"datepicker!._enableMeridian\"\n          [disableMinute]=\"datepicker!._disableMinute\"\n          (ngModelChange)=\"onTimeChanged($event)\"\n        />\n      </div>\n    }\n  }\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\" />\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    mat-raised-button\n    [color]=\"color || 'primary'\"\n    class=\"mat-datepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"datepicker?.close()\"\n  >\n    {{ _closeButtonText }}\n  </button>\n</div>\n", styles: ["@keyframes panelDropdownEnter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panelDialogEnter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panelLeave{0%{opacity:1}to{opacity:0}}.panel-enter-dropdown{animation:panelDropdownEnter .12s cubic-bezier(0,0,.2,1)}.panel-enter-dialog{animation:panelDialogEnter .15s cubic-bezier(0,0,.2,1)}.panel-leave{animation:panelLeave .1s linear forwards;pointer-events:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.calendar-fade-enter{animation:fadeIn .12s .1s cubic-bezier(.55,0,.55,.2) forwards}\n", ".mat-datepicker-content{display:block;border-radius:var(--mat-datepicker-calendar-container-shape, var(--mat-sys-corner-large, 4px));background-color:var(--mat-datepicker-calendar-container-background-color, var(--mat-sys-surface-container-high));color:var(--mat-datepicker-calendar-container-text-color, var(--mat-sys-on-surface));box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12))}.mat-datepicker-content .mat-calendar{font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.time-container{display:flex;position:relative;padding-top:5px;justify-content:center}.time-container.disable-seconds .ngx-mat-timepicker .table{margin-left:9px}.time-container:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background-color:#0000001f}.mat-datepicker-content-touch{display:block;max-height:90vh;position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:815px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation:landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:90vh}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time{height:auto;max-height:none}}@media all and (orientation:portrait){.mat-datepicker-content-touch{max-height:100vh}.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time{height:auto;max-height:870px}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time.mat-datepicker-content-container-with-actions{max-height:none!important}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: NgxMatDateSelectionModel }, { type: i1.DateAdapter }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [NGX_MAT_DATE_RANGE_SELECTION_STRATEGY]
-                }] }, { type: NgxMatDatepickerIntl }], propDecorators: { _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgxMatCalendar), { isSignal: true }] }], color: [{
+        }], ctorParameters: () => [], propDecorators: { _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgxMatCalendar), { isSignal: true }] }], color: [{
                 type: Input
             }], isPrimary: [{
                 type: HostBinding,
@@ -3969,13 +3960,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
             }] } });
 /** Base class for a datepicker. */
 class NgxMatDatepickerBase {
-    _overlay;
-    _ngZone;
-    _viewContainerRef;
-    _dateAdapter;
-    _dir;
-    _model;
-    _scrollStrategy;
     _inputStateChanges = Subscription.EMPTY;
     _document = inject(DOCUMENT);
     /** An input indicating the type of the custom header component for the calendar, if set. */
@@ -3987,7 +3971,9 @@ class NgxMatDatepickerBase {
         return this._startAt || (this.datepickerInput ? this.datepickerInput.getStartValue() : null);
     }
     set startAt(value) {
-        this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._startAt = (this._dateAdapter)
+            ? this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value))
+            : null;
     }
     _startAt = null;
     /** The view that the calendar should start in. */
@@ -4084,7 +4070,10 @@ class NgxMatDatepickerBase {
         return this._opened;
     }
     set opened(value) {
-        coerceBooleanProperty(value) ? this.open() : this.close();
+        if (coerceBooleanProperty(value))
+            this.open();
+        else
+            this.close();
     }
     _opened = false;
     /** Whether the timepicker'spinners is shown. */
@@ -4178,17 +4167,17 @@ class NgxMatDatepickerBase {
     datepickerInput;
     /** Emits when the datepicker's state changes. */
     stateChanges = new Subject();
-    constructor(_overlay, _ngZone, _viewContainerRef, scrollStrategy, _dateAdapter, _dir, _model) {
-        this._overlay = _overlay;
-        this._ngZone = _ngZone;
-        this._viewContainerRef = _viewContainerRef;
-        this._dateAdapter = _dateAdapter;
-        this._dir = _dir;
-        this._model = _model;
+    _overlay = inject(Overlay);
+    _ngZone = inject(NgZone);
+    _viewContainerRef = inject(ViewContainerRef);
+    _scrollStrategy = inject(NGX_MAT_DATEPICKER_SCROLL_STRATEGY);
+    _dateAdapter = inject((DateAdapter), { optional: true });
+    _dir = inject(Directionality, { optional: true });
+    _model = inject((NgxMatDateSelectionModel));
+    constructor() {
         if (!this._dateAdapter) {
             throw createMissingDateImplError$1('DateAdapter');
         }
-        this._scrollStrategy = scrollStrategy;
     }
     ngOnChanges(changes) {
         const positionChange = changes['xPosition'] || changes['yPosition'];
@@ -4348,7 +4337,7 @@ class NgxMatDatepickerBase {
                 isDialog ? 'cdk-overlay-dark-backdrop' : 'mat-overlay-transparent-backdrop',
                 this._backdropHarnessClass,
             ],
-            direction: this._dir,
+            direction: this._dir ?? "ltr",
             scrollStrategy: isDialog ? this._overlay.scrollStrategies.block() : this._scrollStrategy(),
             panelClass: `mat-datepicker-${isDialog ? 'dialog' : 'popup'}`,
         })));
@@ -4447,19 +4436,12 @@ class NgxMatDatepickerBase {
                     ctrlShiftMetaModifiers.every((modifier) => !hasModifierKey(event, modifier))));
         })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerBase, deps: [{ token: i5$1.Overlay }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: NGX_MAT_DATEPICKER_SCROLL_STRATEGY }, { token: i1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }, { token: NgxMatDateSelectionModel }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: NgxMatDatepickerBase, isStandalone: true, inputs: { calendarHeaderComponent: { classPropertyName: "calendarHeaderComponent", publicName: "calendarHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: false, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, touchUi: { classPropertyName: "touchUi", publicName: "touchUi", isSignal: false, isRequired: false, transformFunction: null }, hideTime: { classPropertyName: "hideTime", publicName: "hideTime", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, xPosition: { classPropertyName: "xPosition", publicName: "xPosition", isSignal: true, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: false, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: false, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: false, isRequired: false, transformFunction: null }, showSpinners: { classPropertyName: "showSpinners", publicName: "showSpinners", isSignal: false, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: false, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: false, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: false, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: false, isRequired: false, transformFunction: null }, enableMeridian: { classPropertyName: "enableMeridian", publicName: "enableMeridian", isSignal: false, isRequired: false, transformFunction: null }, disableMinute: { classPropertyName: "disableMinute", publicName: "disableMinute", isSignal: false, isRequired: false, transformFunction: null }, defaultTime: { classPropertyName: "defaultTime", publicName: "defaultTime", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", viewChanged: "viewChanged", openedStream: "opened", closedStream: "closed" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i5$1.Overlay }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NGX_MAT_DATEPICKER_SCROLL_STRATEGY]
-                }] }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: i2.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: NgxMatDateSelectionModel }], propDecorators: { calendarHeaderComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarHeaderComponent", required: false }] }], startAt: [{
+        }], ctorParameters: () => [], propDecorators: { calendarHeaderComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarHeaderComponent", required: false }] }], startAt: [{
                 type: Input
             }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], color: [{
                 type: Input
@@ -4567,15 +4549,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
 
 /** Button that will close the datepicker and assign the current selection to the data model. */
 class NgxMatDatepickerApply {
-    _datepicker;
-    constructor(_datepicker) {
-        this._datepicker = _datepicker;
-    }
+    _datepicker = inject((NgxMatDatepickerBase));
     _applySelection() {
         this._datepicker._applyPendingSelection();
         this._datepicker.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerApply, deps: [{ token: NgxMatDatepickerBase }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerApply, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatDatepickerApply, isStandalone: true, selector: "[ngxMatDatepickerApply], [ngxMatDateRangePickerApply]", host: { listeners: { "click": "_applySelection()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerApply, decorators: [{
@@ -4584,12 +4563,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     selector: '[ngxMatDatepickerApply], [ngxMatDateRangePickerApply]',
                     host: { '(click)': '_applySelection()' },
                 }]
-        }], ctorParameters: () => [{ type: NgxMatDatepickerBase }] });
+        }] });
 class NgxMatDatepickerClear {
-    _datepicker;
-    constructor(_datepicker) {
-        this._datepicker = _datepicker;
-    }
+    _datepicker = inject((NgxMatDatepickerBase));
     close = false;
     _clearSelection() {
         this._datepicker._clearSelection();
@@ -4597,7 +4573,7 @@ class NgxMatDatepickerClear {
             this._datepicker.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerClear, deps: [{ token: NgxMatDatepickerBase }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.6", type: NgxMatDatepickerClear, isStandalone: true, selector: "[ngxMatDatepickerClear], [ngxMatDateRangePickerClear]", inputs: { close: ["close", "close", booleanAttribute] }, host: { listeners: { "click": "_clearSelection()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerClear, decorators: [{
@@ -4606,7 +4582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     selector: '[ngxMatDatepickerClear], [ngxMatDateRangePickerClear]',
                     host: { '(click)': '_clearSelection()' },
                 }]
-        }], ctorParameters: () => [{ type: NgxMatDatepickerBase }], propDecorators: { close: [{
+        }], propDecorators: { close: [{
                 type: Input,
                 args: [{
                         transform: booleanAttribute,
@@ -4614,11 +4590,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
             }] } });
 /** Button that will close the datepicker and discard the current selection. */
 class NgxMatDatepickerCancel {
-    _datepicker;
-    constructor(_datepicker) {
-        this._datepicker = _datepicker;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerCancel, deps: [{ token: NgxMatDatepickerBase }], target: i0.ɵɵFactoryTarget.Directive });
+    _datepicker = inject((NgxMatDatepickerBase));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatDatepickerCancel, isStandalone: true, selector: "[ngxMatDatepickerCancel], [ngxMatDateRangePickerCancel]", host: { listeners: { "click": "_datepicker.close()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerCancel, decorators: [{
@@ -4627,20 +4600,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     selector: '[ngxMatDatepickerCancel], [ngxMatDateRangePickerCancel]',
                     host: { '(click)': '_datepicker.close()' },
                 }]
-        }], ctorParameters: () => [{ type: NgxMatDatepickerBase }] });
+        }] });
 /**
  * Container that can be used to project a row of action buttons
  * to the bottom of a datepicker or date range picker.
  */
 class NgxMatDatepickerActions {
-    _datepicker;
-    _viewContainerRef;
     _template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "_template" }] : /* istanbul ignore next */ []));
     _portal = null;
-    constructor(_datepicker, _viewContainerRef) {
-        this._datepicker = _datepicker;
-        this._viewContainerRef = _viewContainerRef;
-    }
+    _datepicker = inject((NgxMatDatepickerBase));
+    _viewContainerRef = inject(ViewContainerRef);
     ngAfterViewInit() {
         this._portal = new TemplatePortal(this._template(), this._viewContainerRef);
         this._datepicker.registerActions(this._portal);
@@ -4652,7 +4621,7 @@ class NgxMatDatepickerActions {
             this._portal?.detach();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerActions, deps: [{ token: NgxMatDatepickerBase }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: NgxMatDatepickerActions, isStandalone: true, selector: "ngx-mat-datepicker-actions, ngx-mat-date-range-picker-actions", viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template>
       <div class="mat-datepicker-actions">
@@ -4670,7 +4639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
       </div>
     </ng-template>
   `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".mat-datepicker-actions{display:flex;justify-content:flex-end;align-items:center;padding:8px}.mat-datepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-datepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
-        }], ctorParameters: () => [{ type: NgxMatDatepickerBase }, { type: i0.ViewContainerRef }], propDecorators: { _template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+        }], propDecorators: { _template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 /** @docs-private */
 const NGX_MAT_DATEPICKER_VALUE_ACCESSOR = {
@@ -4686,7 +4655,6 @@ const NGX_MAT_DATEPICKER_VALIDATORS = {
 };
 /** Directive used to connect an input to a MatDatepicker. */
 class NgxMatDatepickerInput extends NgxMatDatepickerInputBase {
-    _formField;
     _closedSubscription = Subscription.EMPTY;
     /** The datepicker that this input is associated with. */
     set ngxMatDatetimePicker(datepicker) {
@@ -4702,6 +4670,10 @@ class NgxMatDatepickerInput extends NgxMatDatepickerInputBase {
         return this._min;
     }
     set min(value) {
+        if (!this._dateAdapter) {
+            this._min = null;
+            return;
+        }
         const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         if (!this._dateAdapter.sameDate(validValue, this._min)) {
             this._min = validValue;
@@ -4714,6 +4686,10 @@ class NgxMatDatepickerInput extends NgxMatDatepickerInputBase {
         return this._max;
     }
     set max(value) {
+        if (!this._dateAdapter) {
+            this._max = null;
+            return;
+        }
         const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         if (!this._dateAdapter.sameDate(validValue, this._max)) {
             this._max = validValue;
@@ -4735,9 +4711,9 @@ class NgxMatDatepickerInput extends NgxMatDatepickerInputBase {
     _dateFilter = null;
     /** The combined form control validator for this input. */
     _validator;
-    constructor(elementRef, dateAdapter, dateFormats, _formField) {
-        super(elementRef, dateAdapter, dateFormats);
-        this._formField = _formField;
+    _formField = inject(MAT_FORM_FIELD, { optional: true });
+    constructor() {
+        super();
         this._validator = Validators.compose(super._getValidators());
     }
     /**
@@ -4795,8 +4771,8 @@ class NgxMatDatepickerInput extends NgxMatDatepickerInputBase {
     _shouldHandleChangeEvent(event) {
         return event.source !== this;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatDatepickerInput, isStandalone: true, selector: "input[ngxMatDatetimePicker]", inputs: { ngxMatDatetimePicker: "ngxMatDatetimePicker", min: "min", max: "max", dateFilter: ["matDatepickerFilter", "dateFilter"] }, host: { listeners: { "input": "_onInput($event)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_datepicker ? \"dialog\" : null", "attr.aria-owns": "(_datepicker?.opened && _datepicker?.id) || null", "attr.min": "min ? _dateAdapter.toIso8601(min) : null", "attr.max": "max ? _dateAdapter.toIso8601(max) : null", "attr.data-mat-calendar": "_datepicker ? _datepicker.id : null", "disabled": "disabled" }, classAttribute: "mat-datepicker-input" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxMatDatepickerInput, isStandalone: true, selector: "input[ngxMatDatetimePicker]", inputs: { ngxMatDatetimePicker: "ngxMatDatetimePicker", min: "min", max: "max", dateFilter: ["matDatepickerFilter", "dateFilter"] }, host: { listeners: { "input": "_onInput($event)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_datepicker ? \"dialog\" : null", "attr.aria-owns": "(_datepicker?.opened && _datepicker?.id) || null", "attr.min": "_dateAdapter && min ? _dateAdapter.toIso8601(min) : null", "attr.max": "_dateAdapter && max ? _dateAdapter.toIso8601(max) : null", "attr.data-mat-calendar": "_datepicker ? _datepicker.id : null", "disabled": "disabled" }, classAttribute: "mat-datepicker-input" }, providers: [
             NGX_MAT_DATEPICKER_VALUE_ACCESSOR,
             NGX_MAT_DATEPICKER_VALIDATORS,
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: NgxMatDatepickerInput },
@@ -4815,8 +4791,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         class: 'mat-datepicker-input',
                         '[attr.aria-haspopup]': '_datepicker ? "dialog" : null',
                         '[attr.aria-owns]': '(_datepicker?.opened && _datepicker?.id) || null',
-                        '[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',
-                        '[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',
+                        '[attr.min]': '_dateAdapter && min ? _dateAdapter.toIso8601(min) : null',
+                        '[attr.max]': '_dateAdapter && max ? _dateAdapter.toIso8601(max) : null',
                         // Used by the test harness to tie this input to its calendar. We can't depend on
                         // `aria-owns` for this, because it's only defined while the calendar is open.
                         '[attr.data-mat-calendar]': '_datepicker ? _datepicker.id : null',
@@ -4828,19 +4804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     },
                     exportAs: 'ngxMatDatepickerInput',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_FORM_FIELD]
-                }] }], propDecorators: { ngxMatDatetimePicker: [{
+        }], ctorParameters: () => [], propDecorators: { ngxMatDatetimePicker: [{
                 type: Input
             }], min: [{
                 type: Input
@@ -4863,8 +4827,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                 }]
         }] });
 class NgxMatDatepickerToggle {
-    _intl;
-    _changeDetectorRef;
     _stateChanges = Subscription.EMPTY;
     /** Datepicker instance that the button will toggle. */
     datepicker = input(undefined, { ...(ngDevMode ? { debugName: "datepicker" } : /* istanbul ignore next */ {}), alias: 'for' });
@@ -4887,9 +4849,9 @@ class NgxMatDatepickerToggle {
     disableRipple = input(...(ngDevMode ? [undefined, { debugName: "disableRipple" }] : /* istanbul ignore next */ []));
     /** Underlying button element. */
     _button = viewChild('button', ...(ngDevMode ? [{ debugName: "_button" }] : /* istanbul ignore next */ []));
-    constructor(_intl, _changeDetectorRef, defaultTabIndex) {
-        this._intl = _intl;
-        this._changeDetectorRef = _changeDetectorRef;
+    _intl = inject(NgxMatDatepickerIntl);
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    constructor(defaultTabIndex) {
         const parsedTabIndex = Number(defaultTabIndex);
         this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
         effect(() => {
@@ -4922,7 +4884,7 @@ class NgxMatDatepickerToggle {
         this._stateChanges.unsubscribe();
         this._stateChanges = merge(this._intl.changes, datepickerStateChanged, inputStateChanged, datepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerToggle, deps: [{ token: NgxMatDatepickerIntl }, { token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerToggle, deps: [{ token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: NgxMatDatepickerToggle, isStandalone: true, selector: "ngx-mat-datepicker-toggle", inputs: { datepicker: { classPropertyName: "datepicker", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mat-datepicker-toggle-active": "datepicker()?.opened", "class.mat-accent": "datepicker()?.color === \"accent\"", "class.mat-warn": "datepicker()?.color === \"warn\"", "attr.data-mat-calendar": "datepicker()?.id" }, classAttribute: "mat-datepicker-toggle" }, viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true, isSignal: true }], exportAs: ["ngxMatDatepickerToggle"], ngImport: i0, template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datepicker() ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel() || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple()\"\n>\n  <ng-content select=\"[ngxMatDatepickerToggleIcon]\">\n    <svg\n      class=\"mat-datepicker-toggle-default-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\n      />\n    </svg>\n  </ng-content>\n</button>\n", styles: [".mat-datepicker-toggle{pointer-events:auto;color:var(--mat-datepicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}@media(forced-colors:active){.mat-datepicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatepickerToggle, decorators: [{
@@ -4940,7 +4902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         // it so that the input doesn't get focused automatically by the form field (See #21836).
                         '(click)': '_open($event)',
                     }, exportAs: 'ngxMatDatepickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton], template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datepicker() ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel() || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple()\"\n>\n  <ng-content select=\"[ngxMatDatepickerToggleIcon]\">\n    <svg\n      class=\"mat-datepicker-toggle-default-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\n      />\n    </svg>\n  </ng-content>\n</button>\n", styles: [".mat-datepicker-toggle{pointer-events:auto;color:var(--mat-datepicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}@media(forced-colors:active){.mat-datepicker-toggle-default-icon{color:CanvasText}}\n"] }]
-        }], ctorParameters: () => [{ type: NgxMatDatepickerIntl }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']
                 }] }], propDecorators: { datepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], tabIndex: [{
@@ -5010,10 +4972,10 @@ class NgxMatDatetimePickerContentV2 {
             this.selectedDateTime.set(null);
         }
     }
-    onYearSelected(year) {
+    onYearSelected(_) {
         // Let the calendar handle year selection
     }
-    onMonthSelected(month) {
+    onMonthSelected(_) {
         // Let the calendar handle month selection
     }
     onTimeChanged(time) {
@@ -5125,7 +5087,7 @@ class NgxMatDatetimePickerContentV2 {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [".ngx-mat-datetime-picker-content-v2{display:flex;flex-direction:column;max-height:90vh;min-width:296px}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-content{display:flex;flex-direction:column}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-time{padding:16px;border-top:1px solid rgba(0,0,0,.12)}.mat-dark .ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-time{border-top-color:#ffffff1f}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px 16px;border-top:1px solid rgba(0,0,0,.12)}.mat-dark .ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-actions{border-top-color:#ffffff1f}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch{min-width:320px}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch .ngx-mat-datetime-picker-time{padding:24px}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch .ngx-mat-datetime-picker-actions{padding:16px 24px 24px}.ngx-mat-datetime-picker-content-v2 mat-calendar{display:block}.ngx-mat-datetime-picker-content-v2 mat-calendar .mat-calendar-header{padding:8px 8px 0}.ngx-mat-datetime-picker-content-v2 mat-calendar .mat-calendar-content{padding:0 8px 8px}.ngx-mat-datetime-picker-content-v2 ngx-mat-timepicker{width:100%;display:flex;justify-content:center;align-items:center}.ngx-mat-datetime-picker-content-v2 ngx-mat-timepicker .ngx-mat-timepicker-container{justify-content:center}.ngx-mat-datetime-picker-content-enter{opacity:0;transform:scale(.9);transition:opacity .15s cubic-bezier(.25,.8,.25,1),transform .15s cubic-bezier(.25,.8,.25,1)}.ngx-mat-datetime-picker-content-enter-active{opacity:1;transform:scale(1)}.ngx-mat-datetime-picker-content-exit{opacity:1;transform:scale(1);transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1)}.ngx-mat-datetime-picker-content-exit-active{opacity:0;transform:scale(.9)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["disabled", "showSpinners", "stepHour", "stepMinute", "stepSecond", "showSeconds", "disableMinute", "enableMeridian", "defaultTime", "color", "meridian", "value"], outputs: ["valueChange"], exportAs: ["ngxMatTimepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".ngx-mat-datetime-picker-content-v2{display:flex;flex-direction:column;max-height:90vh;min-width:296px}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-content{display:flex;flex-direction:column}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-time{padding:16px;border-top:1px solid rgba(0,0,0,.12)}.mat-dark .ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-time{border-top-color:#ffffff1f}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px 16px;border-top:1px solid rgba(0,0,0,.12)}.mat-dark .ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-actions{border-top-color:#ffffff1f}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch{min-width:320px}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch .ngx-mat-datetime-picker-time{padding:24px}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch .ngx-mat-datetime-picker-actions{padding:16px 24px 24px}.ngx-mat-datetime-picker-content-v2 mat-calendar{display:block}.ngx-mat-datetime-picker-content-v2 mat-calendar .mat-calendar-header{padding:8px 8px 0}.ngx-mat-datetime-picker-content-v2 mat-calendar .mat-calendar-content{padding:0 8px 8px}.ngx-mat-datetime-picker-content-v2 ngx-mat-timepicker{width:100%;display:flex;justify-content:center;align-items:center}.ngx-mat-datetime-picker-content-v2 ngx-mat-timepicker .ngx-mat-timepicker-container{justify-content:center}.ngx-mat-datetime-picker-content-enter{opacity:0;transform:scale(.9);transition:opacity .15s cubic-bezier(.25,.8,.25,1),transform .15s cubic-bezier(.25,.8,.25,1)}.ngx-mat-datetime-picker-content-enter-active{opacity:1;transform:scale(1)}.ngx-mat-datetime-picker-content-exit{opacity:1;transform:scale(1);transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1)}.ngx-mat-datetime-picker-content-exit-active{opacity:0;transform:scale(.9)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["disabled", "showSpinners", "stepHour", "stepMinute", "stepSecond", "showSeconds", "disableMinute", "enableMeridian", "defaultTime", "color", "meridian", "value"], outputs: ["valueChange"], exportAs: ["ngxMatTimepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxMatDatetimePickerContentV2, decorators: [{
             type: Component,
@@ -5272,9 +5234,15 @@ class NgxMatDatetimePickerInputV2 {
     dateInput = new EventEmitter();
     /** Emits when the internal state has changed */
     stateChanges = new Subject();
-    _onTouched = () => { };
-    _validatorOnChange = () => { };
-    _cvaOnChange = () => { };
+    _onTouched = () => {
+        // Intentionally left empty.
+    };
+    _validatorOnChange = () => {
+        // Intentionally left empty.
+    };
+    _cvaOnChange = () => {
+        // Intentionally left empty.
+    };
     _valueChangesSubscription = Subscription.EMPTY;
     _localeSubscription = Subscription.EMPTY;
     /** The form control validator for whether the input parses. */
@@ -5408,7 +5376,7 @@ class NgxMatDatetimePickerInputV2 {
     _onInput(event) {
         const target = event?.target;
         const parsedDate = this._dateAdapter?.parse(target.value, this._dateFormats.display.dateInput);
-        this._lastValueValid = this._dateAdapter?.isValid(parsedDate);
+        this._lastValueValid = this._dateAdapter ? this._dateAdapter.isValid(parsedDate) : false;
         const date = this._dateAdapter?.getValidDateOrNull(parsedDate);
         // Update internal value
         this._value.set(date);
@@ -5429,7 +5397,7 @@ class NgxMatDatetimePickerInputV2 {
         this._onTouched();
         this.stateChanges.next();
     }
-    _onClick(event) {
+    _onClick(_) {
         // Open the datepicker when clicking on the input
         if (this.ngxMatDatetimePicker && !this.disabled) {
             this.ngxMatDatetimePicker.open();
@@ -5477,7 +5445,7 @@ class NgxMatDatetimePickerInputV2 {
         return !filter || !value || filter(value);
     }
     // MatFormFieldControl methods
-    setDescribedByIds(ids) {
+    setDescribedByIds(_) {
         // Implementation for accessibility
     }
     onContainerClick() {
@@ -5647,7 +5615,7 @@ class NgxMatDatetimePickerV2 {
         this.closedStream.emit();
     }
     /** Applies the current pending selection on the overlay to the model. */
-    select(date) {
+    select(_) {
         // This will be handled by the content component
     }
     /** Get the minimum date from the input. */