@yuuvis/material 2.20.0 → 3.0.0-beta.20.0

package/fesm2022/yuuvis-material.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Inject, Injectable, inject, signal, makeEnvironmentProviders, provideEnvironmentInitializer, input, booleanAttribute, ElementRef, EnvironmentInjector, ApplicationRef, effect, createComponent, Directive, DestroyRef, viewChild, untracked, Input, HostBinding, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DOCUMENT, Inject, Injectable, inject, signal, makeEnvironmentProviders, provideEnvironmentInitializer, input, booleanAttribute, ElementRef, EnvironmentInjector, ApplicationRef, effect, createComponent, Directive, DestroyRef, viewChild, untracked, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { MAT_NATIVE_DATE_FORMATS, DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter, MAT_DATE_LOCALE, MAT_RIPPLE_GLOBAL_OPTIONS, NativeDateModule } from '@angular/material/core';
 import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormField, MatFormFieldControl } from '@angular/material/form-field';
@@ -10,16 +10,15 @@ import { MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
 import { TranslateService } from '@ngx-translate/core';
 import * as i1 from '@angular/common/http';
 import * as i2 from '@angular/platform-browser';
-import { DOCUMENT, CommonModule } from '@angular/common';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { MatDatepickerIntl, MatDatepicker, MatDatepickerInput, MatDateRangeInput, MatDateRangePicker, MatEndDate, MatStartDate } from '@angular/material/datepicker';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { fromEvent, debounceTime, ReplaySubject, BehaviorSubject, Subject } from 'rxjs';
 import { MatIconButton, MatButton } from '@angular/material/button';
-import { MatInput } from '@angular/material/input';
 import * as i1$1 from '@angular/forms';
 import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
 import { MatTimepicker, MatTimepickerInput } from '@angular/material/timepicker';
 
 class YmtMatIconRegistryService extends MatIconRegistry {
@@ -41,10 +40,10 @@ class YmtMatIconRegistryService extends MatIconRegistry {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtMatIconRegistryService, deps: [{ token: i1.HttpClient }, { token: i2.DomSanitizer }, { token: DOCUMENT }, { token: i0.ErrorHandler }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtMatIconRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtMatIconRegistryService, deps: [{ token: i1.HttpClient }, { token: i2.DomSanitizer }, { token: DOCUMENT }, { token: i0.ErrorHandler }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtMatIconRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtMatIconRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtMatIconRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -86,10 +85,10 @@ class YmtDatepickerIntlService extends MatDatepickerIntl {
     formatYearRangeLabel(start, end) {
         return super.formatYearRangeLabel(start, end);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtDatepickerIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtDatepickerIntlService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtDatepickerIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtDatepickerIntlService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtDatepickerIntlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtDatepickerIntlService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -121,7 +120,7 @@ function provideYmtDateAdapter(formats = YMT_DATE_FORMATS) {
 }
 class YmtDateAdapterService extends NativeDateAdapter {
     #translateService = inject(TranslateService);
-    locale = this.#translateService.currentLang;
+    locale = this.#translateService.getCurrentLang();
     constructor() {
         super();
     }
@@ -160,10 +159,10 @@ class YmtDateAdapterService extends NativeDateAdapter {
         };
         return date;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtDateAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtDateAdapterService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtDateAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtDateAdapterService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtDateAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtDateAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -264,8 +263,8 @@ class DeviceService {
      *
      * @default false
      */
-    smallScreenLayout = signal(false);
-    #supportsSmallScreens = signal(false);
+    smallScreenLayout = signal(false, ...(ngDevMode ? [{ debugName: "smallScreenLayout" }] : []));
+    #supportsSmallScreens = signal(false, ...(ngDevMode ? [{ debugName: "#supportsSmallScreens" }] : []));
     /**
      * `true` if the current device is a mobile phone (Android, iPhone, Windows Phone, etc.).
      * Populated once at service creation from `ngx-device-detector`.
@@ -420,10 +419,10 @@ class DeviceService {
         // keyboard appears, so we don't need to debounce
         return this.isMobile ? 0 : 500;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DeviceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DeviceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DeviceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DeviceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DeviceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DeviceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -463,10 +462,10 @@ class YmtMatPaginatorIntlService extends MatPaginatorIntl {
         this.rangeLabelSeparator = this.#translate.instant('ymt.paginator.rangeLabelSeparator');
         this.changes.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtMatPaginatorIntlService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtMatPaginatorIntlService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtMatPaginatorIntlService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtMatPaginatorIntlService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtMatPaginatorIntlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtMatPaginatorIntlService, decorators: [{
             type: Injectable
         }] });
 
@@ -477,7 +476,7 @@ const provideYmtMaterial = (customTheme, options) => {
          */
         {
             provide: MAT_DATE_LOCALE,
-            useFactory: (translate) => translate.defaultLang,
+            useFactory: (translate) => translate.getFallbackLang(),
             deps: [TranslateService]
         },
         { provide: MAT_DATE_FORMATS, useValue: YMT_DATE_FORMATS },
@@ -577,11 +576,11 @@ var YMT_ICON_BUTTON_SIZE;
 })(YMT_ICON_BUTTON_SIZE || (YMT_ICON_BUTTON_SIZE = {}));
 
 class YmtIconButtonDirective {
-    disabled = input(false, { transform: booleanAttribute });
-    disableRipple = input(false, { transform: booleanAttribute });
-    ariaDisabled = input(false, { transform: booleanAttribute, alias: 'aria-disabled' });
-    disabledInteractive = input(false, { transform: booleanAttribute });
-    size = input(YMT_ICON_BUTTON_SIZE.medium, { alias: 'icon-button-size' });
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disableRipple = input(false, ...(ngDevMode ? [{ debugName: "disableRipple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    ariaDisabled = input(false, ...(ngDevMode ? [{ debugName: "ariaDisabled", transform: booleanAttribute, alias: 'aria-disabled' }] : [{ transform: booleanAttribute, alias: 'aria-disabled' }]));
+    disabledInteractive = input(false, ...(ngDevMode ? [{ debugName: "disabledInteractive", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    size = input(YMT_ICON_BUTTON_SIZE.medium, ...(ngDevMode ? [{ debugName: "size", alias: 'icon-button-size' }] : [{ alias: 'icon-button-size' }]));
     #elRef = inject(ElementRef);
     #host = this.#elRef.nativeElement;
     #injector = inject(EnvironmentInjector);
@@ -623,10 +622,10 @@ class YmtIconButtonDirective {
         componentRef.changeDetectorRef.detectChanges();
         return componentRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtIconButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: YmtIconButtonDirective, isStandalone: true, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, ariaDisabled: { classPropertyName: "ariaDisabled", publicName: "aria-disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "icon-button-size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "mat-icon-button": "" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtIconButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: YmtIconButtonDirective, isStandalone: true, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, ariaDisabled: { classPropertyName: "ariaDisabled", publicName: "aria-disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "icon-button-size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "mat-icon-button": "" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtIconButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtIconButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]',
@@ -635,7 +634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         'mat-icon-button': ''
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], ariaDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-disabled", required: false }] }], disabledInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledInteractive", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon-button-size", required: false }] }] } });
 
 var YMT_BUTTON_SIZE;
 (function (YMT_BUTTON_SIZE) {
@@ -650,12 +649,12 @@ const MatButtonAttributeMap = {
     danger: 'mat-flat-button'
 };
 class YmtButtonDirective {
-    ymtButton = input('primary');
-    disabled = input(false, { transform: booleanAttribute });
-    ariaDisabled = input(false, { alias: 'aria-disabled', transform: booleanAttribute });
-    disableRipple = input(false, { transform: booleanAttribute });
-    disabledInteractive = input(false, { transform: booleanAttribute });
-    size = input(YMT_BUTTON_SIZE.medium, { alias: 'button-size' });
+    ymtButton = input('primary', ...(ngDevMode ? [{ debugName: "ymtButton" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    ariaDisabled = input(false, ...(ngDevMode ? [{ debugName: "ariaDisabled", alias: 'aria-disabled', transform: booleanAttribute }] : [{ alias: 'aria-disabled', transform: booleanAttribute }]));
+    disableRipple = input(false, ...(ngDevMode ? [{ debugName: "disableRipple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disabledInteractive = input(false, ...(ngDevMode ? [{ debugName: "disabledInteractive", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    size = input(YMT_BUTTON_SIZE.medium, ...(ngDevMode ? [{ debugName: "size", alias: 'button-size' }] : [{ alias: 'button-size' }]));
     // Todo: Add input "isBusy" as "busy inactive state": not clickable and with mat-spinner in button
     #environmentInjector = inject(EnvironmentInjector);
     #applicationRef = inject(ApplicationRef);
@@ -736,16 +735,16 @@ class YmtButtonDirective {
             ? this.#hostElement.classList.add(`ymt-button--size-m`)
             : this.#hostElement.classList.remove(`ymt-button--size-m`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: YmtButtonDirective, isStandalone: true, selector: "button[ymtButton], a[ymtButton]", inputs: { ymtButton: { classPropertyName: "ymtButton", publicName: "ymtButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaDisabled: { classPropertyName: "ariaDisabled", publicName: "aria-disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "button-size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: YmtButtonDirective, isStandalone: true, selector: "button[ymtButton], a[ymtButton]", inputs: { ymtButton: { classPropertyName: "ymtButton", publicName: "ymtButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaDisabled: { classPropertyName: "ariaDisabled", publicName: "aria-disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "button-size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YmtButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[ymtButton], a[ymtButton]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { ymtButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ymtButton", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-disabled", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], disabledInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledInteractive", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "button-size", required: false }] }] } });
 
 var EnumDatepickerMode;
 (function (EnumDatepickerMode) {
@@ -778,8 +777,8 @@ class DatepickerComponent {
     // Done: Check how to get the ngControl instance of this component (optionally set)
     #translate = inject(TranslateService);
     #dateAdapter = inject(DateAdapter);
-    #locale = signal(inject(MAT_DATE_LOCALE));
-    #injectNgControl = (ngC = inject(NgControl, { self: true, optional: true })) => (ngC ? (ngC.valueAccessor = this) && ngC : null);
+    #locale = signal(inject(MAT_DATE_LOCALE), ...(ngDevMode ? [{ debugName: "#locale" }] : []));
+    #injectNgControl = (ngC = inject(NgControl, { self: true, optional: true })) => ngC ? (ngC.valueAccessor = this) && ngC : null;
     #destroyRef = inject(DestroyRef);
     #formField = inject(MatFormField, { optional: true });
     // implemented as part of MatFormFieldControl interface
@@ -792,7 +791,7 @@ class DatepickerComponent {
         this.focused = false;
         this.propagateTouched();
     }
-    #value = signal(null);
+    #value = signal(null, ...(ngDevMode ? [{ debugName: "#value" }] : []));
     set value(v) {
         let _value = this.#dateAdapter.getValidDateOrNull(this.#dateAdapter.deserialize(v));
         const _previousValue = this.#dateAdapter.getValidDateOrNull(this.#dateAdapter.deserialize(this.ngControl?.value));
@@ -814,7 +813,7 @@ class DatepickerComponent {
     get value() {
         return this.#value();
     }
-    #disabled = signal(false);
+    #disabled = signal(false, ...(ngDevMode ? [{ debugName: "#disabled" }] : []));
     set disabled(v) {
         this.#disabled.set(coerceBooleanProperty(v));
         this.timepickerInput()?.setDisabledState(this.#disabled());
@@ -822,49 +821,49 @@ class DatepickerComponent {
     get disabled() {
         return this.#disabled();
     }
-    #id = signal('');
+    #id = signal('', ...(ngDevMode ? [{ debugName: "#id" }] : []));
     set id(v) {
         this.#id.set(v);
     }
     get id() {
         return this.#id();
     }
-    #placeholder = signal('');
+    #placeholder = signal('', ...(ngDevMode ? [{ debugName: "#placeholder" }] : []));
     set placeholder(v) {
         this.#placeholder.set(v);
     }
     get placeholder() {
         return this.#placeholder();
     }
-    #required = signal(false);
+    #required = signal(false, ...(ngDevMode ? [{ debugName: "#required" }] : []));
     set required(v) {
         this.#required.set(coerceBooleanProperty(v));
     }
     get required() {
         return this.#required();
     }
-    #userAriaDescribedBy = signal('');
+    #userAriaDescribedBy = signal('', ...(ngDevMode ? [{ debugName: "#userAriaDescribedBy" }] : []));
     set userAriaDescribedBy(v) {
         this.#userAriaDescribedBy.set(v);
     }
     get userAriaDescribedBy() {
         return this.#userAriaDescribedBy();
     }
-    #empty = signal(false);
+    #empty = signal(false, ...(ngDevMode ? [{ debugName: "#empty" }] : []));
     set empty(v) {
         this.#empty.set(v);
     }
     get empty() {
         return this.#empty();
     }
-    #errorState = signal(false);
+    #errorState = signal(false, ...(ngDevMode ? [{ debugName: "#errorState" }] : []));
     set errorState(v) {
         this.#errorState.set(v);
     }
     get errorState() {
         return this.#errorState();
     }
-    #focused = signal(false);
+    #focused = signal(false, ...(ngDevMode ? [{ debugName: "#focused" }] : []));
     set focused(v) {
         this.#focused.set(v);
     }
@@ -879,19 +878,19 @@ class DatepickerComponent {
     controlType = 'datepicker';
     disableAutomaticLabeling = false;
     datepickerMode = EnumDatepickerMode;
-    datepicker = viewChild('datepicker', { read: (MatDatepicker) });
-    rangepicker = viewChild('rangepicker');
-    timepicker = viewChild('timepicker', { read: (MatTimepicker) });
-    datepickerInput = viewChild('datepickerInput');
-    timepickerInput = viewChild('timepickerInput');
-    #mode = signal(EnumDatepickerMode.DATE);
+    datepicker = viewChild('datepicker', ...(ngDevMode ? [{ debugName: "datepicker", read: (MatDatepicker) }] : [{ read: (MatDatepicker) }]));
+    rangepicker = viewChild('rangepicker', ...(ngDevMode ? [{ debugName: "rangepicker" }] : []));
+    timepicker = viewChild('timepicker', ...(ngDevMode ? [{ debugName: "timepicker", read: (MatTimepicker) }] : [{ read: (MatTimepicker) }]));
+    datepickerInput = viewChild('datepickerInput', ...(ngDevMode ? [{ debugName: "datepickerInput" }] : []));
+    timepickerInput = viewChild('timepickerInput', ...(ngDevMode ? [{ debugName: "timepickerInput" }] : []));
+    #mode = signal(EnumDatepickerMode.DATE, ...(ngDevMode ? [{ debugName: "#mode" }] : []));
     set mode(v) {
         this.#mode.set(v);
     }
     get mode() {
         return this.#mode();
     }
-    #min = signal(null);
+    #min = signal(null, ...(ngDevMode ? [{ debugName: "#min" }] : []));
     set min(v) {
         const validValue = this.#dateAdapter.getValidDateOrNull(this.#dateAdapter.deserialize(v));
         if (!this.#dateAdapter.sameDate(validValue, this.#min())) {
@@ -901,7 +900,7 @@ class DatepickerComponent {
     get min() {
         return this.#min();
     }
-    #max = signal(null);
+    #max = signal(null, ...(ngDevMode ? [{ debugName: "#max" }] : []));
     set max(v) {
         const validValue = this.#dateAdapter.getValidDateOrNull(this.#dateAdapter.deserialize(v));
         if (!this.#dateAdapter.sameDate(validValue, this.#max())) {
@@ -911,7 +910,7 @@ class DatepickerComponent {
     get max() {
         return this.#max();
     }
-    #rangePlaceholder = signal({ startDate: 'Start Date', endDate: 'End Date' });
+    #rangePlaceholder = signal({ startDate: 'Start Date', endDate: 'End Date' }, ...(ngDevMode ? [{ debugName: "#rangePlaceholder" }] : []));
     set rangePlaceholder(v) {
         this.#rangePlaceholder.set(v);
     }
@@ -919,9 +918,9 @@ class DatepickerComponent {
         return this.#rangePlaceholder();
     }
     rangeValue = { start: '', end: '' };
-    startDateFormControlName = input('');
-    endDateFormControlName = input('');
-    formGroup = input();
+    startDateFormControlName = input('', ...(ngDevMode ? [{ debugName: "startDateFormControlName" }] : []));
+    endDateFormControlName = input('', ...(ngDevMode ? [{ debugName: "endDateFormControlName" }] : []));
+    formGroup = input(...(ngDevMode ? [undefined, { debugName: "formGroup" }] : []));
     constructor() {
         // triggers state changes for the MatFormFieldControl
         effect(() => {
@@ -1024,8 +1023,8 @@ class DatepickerComponent {
         this.rangepicker()?.open();
         this.timepicker()?.open();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DatepickerComponent, isStandalone: true, selector: "ymt-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, userAriaDescribedBy: { classPropertyName: "userAriaDescribedBy", publicName: "userAriaDescribedBy", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, rangePlaceholder: { classPropertyName: "rangePlaceholder", publicName: "rangePlaceholder", isSignal: false, isRequired: false, transformFunction: null }, startDateFormControlName: { classPropertyName: "startDateFormControlName", publicName: "startDateFormControlName", isSignal: true, isRequired: false, transformFunction: null }, endDateFormControlName: { classPropertyName: "endDateFormControlName", publicName: "endDateFormControlName", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusout()" }, properties: { "class.floating": "this.shouldLabelFloat" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: DatepickerComponent, isStandalone: true, selector: "ymt-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, userAriaDescribedBy: { classPropertyName: "userAriaDescribedBy", publicName: "userAriaDescribedBy", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, rangePlaceholder: { classPropertyName: "rangePlaceholder", publicName: "rangePlaceholder", isSignal: false, isRequired: false, transformFunction: null }, startDateFormControlName: { classPropertyName: "startDateFormControlName", publicName: "startDateFormControlName", isSignal: true, isRequired: false, transformFunction: null }, endDateFormControlName: { classPropertyName: "endDateFormControlName", publicName: "endDateFormControlName", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusout()" }, properties: { "class.floating": "shouldLabelFloat" } }, providers: [
             { provide: MatFormFieldControl, useExisting: DatepickerComponent },
             /*{
               provide: MAT_DATE_FORMATS,
@@ -1042,12 +1041,11 @@ class DatepickerComponent {
             },*/
             { provide: MatDatepickerIntl, useClass: YmtDatepickerIntlService },
             provideYmtDateAdapter()
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true, read: MatDatepicker, isSignal: true }, { propertyName: "rangepicker", first: true, predicate: ["rangepicker"], descendants: true, isSignal: true }, { propertyName: "timepicker", first: true, predicate: ["timepicker"], descendants: true, read: MatTimepicker, isSignal: true }, { propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true, isSignal: true }, { propertyName: "timepickerInput", first: true, predicate: ["timepickerInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@switch (mode) {\n  @case (datepickerMode.DATE) {\n    <input\n      [placeholder]=\"placeholder\"\n      [attr.disabled]=\"disabled\"\n      matInput\n      [matDatepicker]=\"datepicker\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [(ngModel)]=\"value\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n      #datepickerInput=\"matInput\"\n    />\n    <mat-datepicker #datepicker></mat-datepicker>\n  }\n  @case (datepickerMode.DATE_RANGE) {\n    @let formGroup = this.formGroup();\n    @let startDate = this.startDateFormControlName();\n    @let endDate = this.endDateFormControlName();\n    @if (formGroup && startDate && endDate) {\n      <mat-date-range-input\n        [rangePicker]=\"rangepicker\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [formGroup]=\"formGroup\"\n        #datepickerInput=\"matDateRangeInput\"\n      >\n        <input matStartDate [placeholder]=\"rangePlaceholder.startDate\" [formControlName]=\"startDate\"/>\n        <input matEndDate [placeholder]=\"rangePlaceholder.endDate\" [formControlName]=\"endDate\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #rangepicker></mat-date-range-picker>\n    } @else {\n      <mat-date-range-input\n        [rangePicker]=\"rangepicker\"\n        [min]=\"min\"\n        [max]=\"max\"\n        #datepickerInput=\"matDateRangeInput\"\n      >\n        <input matStartDate [placeholder]=\"rangePlaceholder.startDate\" (dateChange)=\"rangeValue.start = $event.value\"/>\n        <input matEndDate [placeholder]=\"rangePlaceholder.endDate\" (dateChange)=\"rangeValue.end = $event.value\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #rangepicker></mat-date-range-picker>\n    }\n  }\n  @case (datepickerMode.TIME) {\n      <input\n        [placeholder]=\"placeholder\"\n        [attr.disabled]=\"disabled\"\n        matInput\n        [matTimepicker]=\"timepicker\"\n        [(ngModel)]=\"value\"\n        [ngModelOptions]=\"{updateOn: 'blur'}\"\n        #datepickerInput=\"matInput\"\n        #timepickerInput=\"matTimepickerInput\"\n      >\n      <mat-timepicker #timepicker/>\n  }\n  @default {\n    <input\n      type=\"datetime-locale\"\n      [placeholder]=\"placeholder\"\n      matInput\n      [(ngModel)]=\"value\"\n      #datepickerInput=\"matInput\"\n    />\n  }\n}\n\n", styles: [":host{display:flex}:host input{width:100%;border:0;outline:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: 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: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "component", type: MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: NativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true, read: MatDatepicker, isSignal: true }, { propertyName: "rangepicker", first: true, predicate: ["rangepicker"], descendants: true, isSignal: true }, { propertyName: "timepicker", first: true, predicate: ["timepicker"], descendants: true, read: MatTimepicker, isSignal: true }, { propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true, isSignal: true }, { propertyName: "timepickerInput", first: true, predicate: ["timepickerInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@switch (mode) {\n  @case (datepickerMode.DATE) {\n    <input\n      [placeholder]=\"placeholder\"\n      [attr.disabled]=\"disabled\"\n      matInput\n      [matDatepicker]=\"datepicker\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [(ngModel)]=\"value\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n      #datepickerInput=\"matInput\"\n    />\n    <mat-datepicker #datepicker></mat-datepicker>\n  }\n  @case (datepickerMode.DATE_RANGE) {\n    @let formGroup = this.formGroup();\n    @let startDate = this.startDateFormControlName();\n    @let endDate = this.endDateFormControlName();\n    @if (formGroup && startDate && endDate) {\n      <mat-date-range-input\n        [rangePicker]=\"rangepicker\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [formGroup]=\"formGroup\"\n        #datepickerInput=\"matDateRangeInput\"\n      >\n        <input matStartDate [placeholder]=\"rangePlaceholder.startDate\" [formControlName]=\"startDate\"/>\n        <input matEndDate [placeholder]=\"rangePlaceholder.endDate\" [formControlName]=\"endDate\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #rangepicker></mat-date-range-picker>\n    } @else {\n      <mat-date-range-input\n        [rangePicker]=\"rangepicker\"\n        [min]=\"min\"\n        [max]=\"max\"\n        #datepickerInput=\"matDateRangeInput\"\n      >\n        <input matStartDate [placeholder]=\"rangePlaceholder.startDate\" (dateChange)=\"rangeValue.start = $event.value\"/>\n        <input matEndDate [placeholder]=\"rangePlaceholder.endDate\" (dateChange)=\"rangeValue.end = $event.value\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #rangepicker></mat-date-range-picker>\n    }\n  }\n  @case (datepickerMode.TIME) {\n      <input\n        [placeholder]=\"placeholder\"\n        [attr.disabled]=\"disabled\"\n        matInput\n        [matTimepicker]=\"timepicker\"\n        [(ngModel)]=\"value\"\n        [ngModelOptions]=\"{updateOn: 'blur'}\"\n        #datepickerInput=\"matInput\"\n        #timepickerInput=\"matTimepickerInput\"\n      >\n      <mat-timepicker #timepicker/>\n  }\n  @default {\n    <input\n      type=\"datetime-locale\"\n      [placeholder]=\"placeholder\"\n      matInput\n      [(ngModel)]=\"value\"\n      #datepickerInput=\"matInput\"\n    />\n  }\n}\n\n", styles: [":host{display:flex}:host input{width:100%;border:0;outline:0;background:transparent}\n"], dependencies: [{ kind: "directive", type: 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: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "component", type: MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: NativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymt-datepicker', standalone: true, imports: [
-                        CommonModule,
                         MatInput,
                         FormsModule,
                         ReactiveFormsModule,
@@ -1077,14 +1075,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         },*/
                         { provide: MatDatepickerIntl, useClass: YmtDatepickerIntlService },
                         provideYmtDateAdapter()
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (mode) {\n  @case (datepickerMode.DATE) {\n    <input\n      [placeholder]=\"placeholder\"\n      [attr.disabled]=\"disabled\"\n      matInput\n      [matDatepicker]=\"datepicker\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [(ngModel)]=\"value\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n      #datepickerInput=\"matInput\"\n    />\n    <mat-datepicker #datepicker></mat-datepicker>\n  }\n  @case (datepickerMode.DATE_RANGE) {\n    @let formGroup = this.formGroup();\n    @let startDate = this.startDateFormControlName();\n    @let endDate = this.endDateFormControlName();\n    @if (formGroup && startDate && endDate) {\n      <mat-date-range-input\n        [rangePicker]=\"rangepicker\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [formGroup]=\"formGroup\"\n        #datepickerInput=\"matDateRangeInput\"\n      >\n        <input matStartDate [placeholder]=\"rangePlaceholder.startDate\" [formControlName]=\"startDate\"/>\n        <input matEndDate [placeholder]=\"rangePlaceholder.endDate\" [formControlName]=\"endDate\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #rangepicker></mat-date-range-picker>\n    } @else {\n      <mat-date-range-input\n        [rangePicker]=\"rangepicker\"\n        [min]=\"min\"\n        [max]=\"max\"\n        #datepickerInput=\"matDateRangeInput\"\n      >\n        <input matStartDate [placeholder]=\"rangePlaceholder.startDate\" (dateChange)=\"rangeValue.start = $event.value\"/>\n        <input matEndDate [placeholder]=\"rangePlaceholder.endDate\" (dateChange)=\"rangeValue.end = $event.value\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #rangepicker></mat-date-range-picker>\n    }\n  }\n  @case (datepickerMode.TIME) {\n      <input\n        [placeholder]=\"placeholder\"\n        [attr.disabled]=\"disabled\"\n        matInput\n        [matTimepicker]=\"timepicker\"\n        [(ngModel)]=\"value\"\n        [ngModelOptions]=\"{updateOn: 'blur'}\"\n        #datepickerInput=\"matInput\"\n        #timepickerInput=\"matTimepickerInput\"\n      >\n      <mat-timepicker #timepicker/>\n  }\n  @default {\n    <input\n      type=\"datetime-locale\"\n      [placeholder]=\"placeholder\"\n      matInput\n      [(ngModel)]=\"value\"\n      #datepickerInput=\"matInput\"\n    />\n  }\n}\n\n", styles: [":host{display:flex}:host input{width:100%;border:0;outline:0;background:transparent}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { onFocusIn: [{
-                type: HostListener,
-                args: ['focusin']
-            }], onFocusout: [{
-                type: HostListener,
-                args: ['focusout']
-            }], value: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.floating]': 'shouldLabelFloat',
+                        '(focusin)': 'onFocusIn()',
+                        '(focusout)': 'onFocusout()'
+                    }, template: "@switch (mode) {\n  @case (datepickerMode.DATE) {\n    <input\n      [placeholder]=\"placeholder\"\n      [attr.disabled]=\"disabled\"\n      matInput\n      [matDatepicker]=\"datepicker\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [(ngModel)]=\"value\"\n      [ngModelOptions]=\"{updateOn: 'blur'}\"\n      #datepickerInput=\"matInput\"\n    />\n    <mat-datepicker #datepicker></mat-datepicker>\n  }\n  @case (datepickerMode.DATE_RANGE) {\n    @let formGroup = this.formGroup();\n    @let startDate = this.startDateFormControlName();\n    @let endDate = this.endDateFormControlName();\n    @if (formGroup && startDate && endDate) {\n      <mat-date-range-input\n        [rangePicker]=\"rangepicker\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [formGroup]=\"formGroup\"\n        #datepickerInput=\"matDateRangeInput\"\n      >\n        <input matStartDate [placeholder]=\"rangePlaceholder.startDate\" [formControlName]=\"startDate\"/>\n        <input matEndDate [placeholder]=\"rangePlaceholder.endDate\" [formControlName]=\"endDate\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #rangepicker></mat-date-range-picker>\n    } @else {\n      <mat-date-range-input\n        [rangePicker]=\"rangepicker\"\n        [min]=\"min\"\n        [max]=\"max\"\n        #datepickerInput=\"matDateRangeInput\"\n      >\n        <input matStartDate [placeholder]=\"rangePlaceholder.startDate\" (dateChange)=\"rangeValue.start = $event.value\"/>\n        <input matEndDate [placeholder]=\"rangePlaceholder.endDate\" (dateChange)=\"rangeValue.end = $event.value\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #rangepicker></mat-date-range-picker>\n    }\n  }\n  @case (datepickerMode.TIME) {\n      <input\n        [placeholder]=\"placeholder\"\n        [attr.disabled]=\"disabled\"\n        matInput\n        [matTimepicker]=\"timepicker\"\n        [(ngModel)]=\"value\"\n        [ngModelOptions]=\"{updateOn: 'blur'}\"\n        #datepickerInput=\"matInput\"\n        #timepickerInput=\"matTimepickerInput\"\n      >\n      <mat-timepicker #timepicker/>\n  }\n  @default {\n    <input\n      type=\"datetime-locale\"\n      [placeholder]=\"placeholder\"\n      matInput\n      [(ngModel)]=\"value\"\n      #datepickerInput=\"matInput\"\n    />\n  }\n}\n\n", styles: [":host{display:flex}:host input{width:100%;border:0;outline:0;background:transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -1096,10 +1092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], userAriaDescribedBy: [{
                 type: Input
-            }], shouldLabelFloat: [{
-                type: HostBinding,
-                args: ['class.floating']
-            }], mode: [{
+            }], datepicker: [{ type: i0.ViewChild, args: ['datepicker', { ...{ read: (MatDatepicker) }, isSignal: true }] }], rangepicker: [{ type: i0.ViewChild, args: ['rangepicker', { isSignal: true }] }], timepicker: [{ type: i0.ViewChild, args: ['timepicker', { ...{ read: (MatTimepicker) }, isSignal: true }] }], datepickerInput: [{ type: i0.ViewChild, args: ['datepickerInput', { isSignal: true }] }], timepickerInput: [{ type: i0.ViewChild, args: ['timepickerInput', { isSignal: true }] }], mode: [{
                 type: Input
             }], min: [{
                 type: Input
@@ -1107,26 +1100,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], rangePlaceholder: [{
                 type: Input
-            }] } });
+            }], startDateFormControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDateFormControlName", required: false }] }], endDateFormControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDateFormControlName", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }] } });
 
 class DatepickerToggleComponent {
     #intl = inject(MatDatepickerIntl);
     #destroyRef = inject(DestroyRef);
-    #datepicker = signal(null);
+    #datepicker = signal(null, ...(ngDevMode ? [{ debugName: "#datepicker" }] : []));
     set datepicker(v) {
         this.#datepicker.set(v);
     }
     get datepicker() {
         return this.#datepicker();
     }
-    #disabled = signal(false);
+    #disabled = signal(false, ...(ngDevMode ? [{ debugName: "#disabled" }] : []));
     set disabled(v) {
         this.#disabled.set(coerceBooleanProperty(v));
     }
     get disabled() {
         return this.#disabled();
     }
-    #ariaLabel = signal(this.#intl.openCalendarLabel);
+    #ariaLabel = signal(this.#intl.openCalendarLabel, ...(ngDevMode ? [{ debugName: "#ariaLabel" }] : []));
     set ariaLabel(v) {
         this.#ariaLabel.set(v);
     }
@@ -1165,14 +1158,14 @@ class DatepickerToggleComponent {
     ngOnDestroy() {
         this.stateChanges.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DatepickerToggleComponent, isStandalone: true, selector: "ymt-datepicker-toggle", inputs: { datepicker: ["for", "datepicker"], disabled: "disabled", ariaLabel: "ariaLabel" }, host: { listeners: { "click": "_open($event)" } }, providers: [{ provide: MatDatepickerIntl, useClass: YmtDatepickerIntlService }], exportAs: ["matDatepickerToggle"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: DatepickerToggleComponent, isStandalone: true, selector: "ymt-datepicker-toggle", inputs: { datepicker: ["for", "datepicker"], disabled: "disabled", ariaLabel: "ariaLabel" }, host: { listeners: { "click": "_open($event)" } }, providers: [{ provide: MatDatepickerIntl, useClass: YmtDatepickerIntlService }], exportAs: ["matDatepickerToggle"], ngImport: i0, template: `
     <button type="button" ymtIconButton [attr.aria-label]="ariaLabel" [aria-disabled]="disabled" [disabled]="disabled">
       <ng-content select="mat-icon"></ng-content>
     </button>
   `, isInline: true, dependencies: [{ kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerToggleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ymt-datepicker-toggle',