ng-primitives 0.89.0 → 0.91.0

package/fesm2022/ng-primitives-date-picker.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, inject, TemplateRef, ViewContainerRef, Injector, Directive, contentChild, computed, ElementRef, HostListener, input, numberAttribute, booleanAttribute, output, signal, afterNextRender } from '@angular/core';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { setupButton } from 'ng-primitives/button';
+import { ngpButton } from 'ng-primitives/button';
 import { injectDateAdapter } from 'ng-primitives/date-time';
 import { uniqueId } from 'ng-primitives/utils';
 import { explicitEffect } from 'ng-primitives/internal';
@@ -113,10 +113,10 @@ class NgpDatePickerCellRender {
     ngOnDestroy() {
         this.viewRefs.forEach(viewRef => viewRef.destroy());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerCellRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpDatePickerCellRender, isStandalone: true, selector: "[ngpDatePickerCellRender]", providers: [{ provide: NgpDatePickerCellRenderToken, useExisting: NgpDatePickerCellRender }], exportAs: ["ngpDatePickerCellRender"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerCellRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpDatePickerCellRender, isStandalone: true, selector: "[ngpDatePickerCellRender]", providers: [{ provide: NgpDatePickerCellRenderToken, useExisting: NgpDatePickerCellRender }], exportAs: ["ngpDatePickerCellRender"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerCellRender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerCellRender, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDatePickerCellRender]',
@@ -180,18 +180,18 @@ class NgpDatePickerCell {
         /**
          * Access the child date picker date button.
          */
-        this.datePickerButton = contentChild(NgpDatePickerDateButtonToken, {
-            descendants: true,
-        });
+        this.datePickerButton = contentChild(NgpDatePickerDateButtonToken, ...(ngDevMode ? [{ debugName: "datePickerButton", descendants: true }] : [{
+                descendants: true,
+            }]));
         /**
          * Access the label id.
          */
-        this.labelId = computed(() => this.state().label()?.id());
+        this.labelId = computed(() => this.state().label()?.id(), ...(ngDevMode ? [{ debugName: "labelId" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.11", type: NgpDatePickerCell, isStandalone: true, selector: "[ngpDatePickerCell]", host: { attributes: { "role": "gridcell" }, properties: { "attr.data-selected": "datePickerButton()?.selected() ? \"\" : null", "attr.aria-selected": "datePickerButton()?.selected()", "attr.aria-disabled": "datePickerButton()?.disabled()", "attr.data-disabled": "datePickerButton()?.disabled() ? \"\" : null", "attr.aria-labelledby": "labelId()" } }, queries: [{ propertyName: "datePickerButton", first: true, predicate: NgpDatePickerDateButtonToken, descendants: true, isSignal: true }], exportAs: ["ngpDatePickerCell"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.9", type: NgpDatePickerCell, isStandalone: true, selector: "[ngpDatePickerCell]", host: { attributes: { "role": "gridcell" }, properties: { "attr.data-selected": "datePickerButton()?.selected() ? \"\" : null", "attr.aria-selected": "datePickerButton()?.selected()", "attr.aria-disabled": "datePickerButton()?.disabled()", "attr.data-disabled": "datePickerButton()?.disabled() ? \"\" : null", "attr.aria-labelledby": "labelId()" } }, queries: [{ propertyName: "datePickerButton", first: true, predicate: NgpDatePickerDateButtonToken, descendants: true, isSignal: true }], exportAs: ["ngpDatePickerCell"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerCell, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDatePickerCell]',
@@ -205,7 +205,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[attr.aria-labelledby]': 'labelId()',
                     },
                 }]
-        }] });
+        }], propDecorators: { datePickerButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgpDatePickerDateButtonToken), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
 
 /**
  * A button that represents a date in the date picker grid.
@@ -235,31 +237,32 @@ class NgpDatePickerDateButton {
         /**
          * Determine if this is the focused date.
          */
-        this.focused = computed(() => this.dateAdapter.isSameDay(this.date, this.state().focusedDate()));
+        this.focused = computed(() => this.dateAdapter.isSameDay(this.date, this.state().focusedDate()), ...(ngDevMode ? [{ debugName: "focused" }] : []));
         /**
          * Determine if this is the selected date.
+         * @internal
          */
-        this.selected = computed(() => this.state().isSelected(this.date));
+        this.selected = computed(() => this.state().isSelected(this.date), ...(ngDevMode ? [{ debugName: "selected" }] : []));
         /**
          * Determine if this is the start date of the range.
          */
-        this.start = computed(() => this.state().isStartOfRange(this.date));
+        this.start = computed(() => this.state().isStartOfRange(this.date), ...(ngDevMode ? [{ debugName: "start" }] : []));
         /**
          * Determine if this is the end date of the range.
          */
-        this.end = computed(() => this.state().isEndOfRange(this.date));
+        this.end = computed(() => this.state().isEndOfRange(this.date), ...(ngDevMode ? [{ debugName: "end" }] : []));
         /**
          * Determine if this is between the start and end dates of the range.
          */
-        this.betweenRange = computed(() => this.state().isBetweenRange(this.date));
+        this.betweenRange = computed(() => this.state().isBetweenRange(this.date), ...(ngDevMode ? [{ debugName: "betweenRange" }] : []));
         /**
          * Determine if this date is outside the current month.
          */
-        this.outside = computed(() => !this.dateAdapter.isSameMonth(this.date, this.state().focusedDate()));
+        this.outside = computed(() => !this.dateAdapter.isSameMonth(this.date, this.state().focusedDate()), ...(ngDevMode ? [{ debugName: "outside" }] : []));
         /**
          * Determine if this date is today.
          */
-        this.today = computed(() => this.dateAdapter.isSameDay(this.date, this.dateAdapter.now()));
+        this.today = computed(() => this.dateAdapter.isSameDay(this.date, this.dateAdapter.now()), ...(ngDevMode ? [{ debugName: "today" }] : []));
         /**
          * Determine if this date is disabled.
          * @internal
@@ -277,13 +280,13 @@ class NgpDatePickerDateButton {
                 return true;
             }
             return false;
-        });
+        }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         /**
          * Determine if the element is a button.
          */
         this.isButton = this.elementRef.nativeElement.tagName === 'BUTTON';
         this.state().registerButton(this);
-        setupButton({ disabled: this.disabled });
+        ngpButton({ disabled: this.disabled });
     }
     ngOnDestroy() {
         this.state().unregisterButton(this);
@@ -422,10 +425,10 @@ class NgpDatePickerDateButton {
     getDirection() {
         return getComputedStyle(this.elementRef.nativeElement).direction === 'rtl' ? 'rtl' : 'ltr';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerDateButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpDatePickerDateButton, isStandalone: true, selector: "[ngpDatePickerDateButton]", host: { listeners: { "click": "select()", "keydown.enter": "select($event)", "keydown.space": "select($event)", "keydown.arrowLeft": "focusPrevious($event)", "keydown.arrowRight": "focusNext($event)", "keydown.arrowUp": "focusAbove($event)", "keydown.arrowDown": "focusBelow($event)", "keydown.home": "focusFirst($event)", "keydown.end": "focusLast($event)", "keydown.pageUp": "focusPreviousMonth($event)", "keydown.pageDown": "focusNextMonth($event)" }, properties: { "attr.role": "!isButton ? \"button\" : null", "attr.tabindex": "focused() ? 0 : -1", "attr.data-selected": "selected() ? \"\" : null", "attr.aria-disabled": "disabled()", "attr.data-outside-month": "outside() ? \"\" : null", "attr.data-today": "today() ? \"\" : null", "attr.data-range-start": "start() ? \"\" : null", "attr.data-range-end": "end() ? \"\" : null", "attr.data-range-between": "betweenRange() ? \"\" : null" } }, providers: [{ provide: NgpDatePickerDateButtonToken, useExisting: NgpDatePickerDateButton }], exportAs: ["ngpDatePickerDateButton"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerDateButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpDatePickerDateButton, isStandalone: true, selector: "[ngpDatePickerDateButton]", host: { listeners: { "click": "select()", "keydown.enter": "select($event)", "keydown.space": "select($event)", "keydown.arrowLeft": "focusPrevious($event)", "keydown.arrowRight": "focusNext($event)", "keydown.arrowUp": "focusAbove($event)", "keydown.arrowDown": "focusBelow($event)", "keydown.home": "focusFirst($event)", "keydown.end": "focusLast($event)", "keydown.pageUp": "focusPreviousMonth($event)", "keydown.pageDown": "focusNextMonth($event)" }, properties: { "attr.role": "!isButton ? \"button\" : null", "attr.tabindex": "focused() ? 0 : -1", "attr.data-selected": "selected() ? \"\" : null", "attr.aria-disabled": "disabled()", "attr.data-outside-month": "outside() ? \"\" : null", "attr.data-today": "today() ? \"\" : null", "attr.data-range-start": "start() ? \"\" : null", "attr.data-range-end": "end() ? \"\" : null", "attr.data-range-between": "betweenRange() ? \"\" : null" } }, providers: [{ provide: NgpDatePickerDateButtonToken, useExisting: NgpDatePickerDateButton }], exportAs: ["ngpDatePickerDateButton"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerDateButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerDateButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDatePickerDateButton]',
@@ -490,12 +493,12 @@ class NgpDatePickerGrid {
         /**
          * Determine the id for the label.
          */
-        this.labelId = computed(() => this.state().label()?.id());
+        this.labelId = computed(() => this.state().label()?.id(), ...(ngDevMode ? [{ debugName: "labelId" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpDatePickerGrid, isStandalone: true, selector: "[ngpDatePickerGrid]", host: { attributes: { "role": "grid" }, properties: { "attr.aria-labelledby": "labelId()", "attr.data-disabled": "state().disabled() ? \"\" : null" } }, exportAs: ["ngpDatePickerGrid"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpDatePickerGrid, isStandalone: true, selector: "[ngpDatePickerGrid]", host: { attributes: { "role": "grid" }, properties: { "attr.aria-labelledby": "labelId()", "attr.data-disabled": "state().disabled() ? \"\" : null" } }, exportAs: ["ngpDatePickerGrid"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerGrid, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDatePickerGrid]',
@@ -528,18 +531,18 @@ class NgpDatePickerLabel {
         /**
          * Define a unique id for the label.
          */
-        this.id = input(uniqueId('ngp-date-picker-label'));
+        this.id = input(uniqueId('ngp-date-picker-label'), ...(ngDevMode ? [{ debugName: "id" }] : []));
         /**
          * Define the aria live attribute.
          */
-        this.ariaLive = input('polite', {
-            alias: 'aria-live',
-        });
+        this.ariaLive = input('polite', ...(ngDevMode ? [{ debugName: "ariaLive", alias: 'aria-live' }] : [{
+                alias: 'aria-live',
+            }]));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpDatePickerLabel, isStandalone: true, selector: "[ngpDatePickerLabel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "aria-live", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()", "attr.aria-live": "ariaLive()", "attr.data-disabled": "state().disabled() ? \"\" : null" } }, providers: [{ provide: NgpDatePickerLabelToken, useExisting: NgpDatePickerLabel }], exportAs: ["ngpDatePickerLabel"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpDatePickerLabel, isStandalone: true, selector: "[ngpDatePickerLabel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "aria-live", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()", "attr.aria-live": "ariaLive()", "attr.data-disabled": "state().disabled() ? \"\" : null" } }, providers: [{ provide: NgpDatePickerLabelToken, useExisting: NgpDatePickerLabel }], exportAs: ["ngpDatePickerLabel"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDatePickerLabel]',
@@ -551,7 +554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[attr.data-disabled]': 'state().disabled() ? "" : null',
                     },
                 }]
-        }] });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-live", required: false }] }] } });
 
 /**
  * A button that navigates to the next month.
@@ -594,8 +597,8 @@ class NgpDatePickerNextMonth {
                 return true;
             }
             return false;
-        });
-        setupButton({ disabled: this.disabled });
+        }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        ngpButton({ disabled: this.disabled });
     }
     /**
      * Navigate to the next month.
@@ -616,10 +619,10 @@ class NgpDatePickerNextMonth {
         });
         this.state().setFocusedDate(date, 'mouse', 'forward');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerNextMonth, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpDatePickerNextMonth, isStandalone: true, selector: "[ngpDatePickerNextMonth]", host: { listeners: { "click": "navigateToNextMonth()" }, properties: { "attr.aria-disabled": "disabled()", "attr.type": "isButton ? \"button\" : null" } }, exportAs: ["ngpDatePickerNextMonth"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerNextMonth, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpDatePickerNextMonth, isStandalone: true, selector: "[ngpDatePickerNextMonth]", host: { listeners: { "click": "navigateToNextMonth()" }, properties: { "attr.aria-disabled": "disabled()", "attr.type": "isButton ? \"button\" : null" } }, exportAs: ["ngpDatePickerNextMonth"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerNextMonth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerNextMonth, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDatePickerNextMonth]',
@@ -676,8 +679,8 @@ class NgpDatePickerPreviousMonth {
                 return true;
             }
             return false;
-        });
-        setupButton({ disabled: this.disabled });
+        }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        ngpButton({ disabled: this.disabled });
     }
     /**
      * Navigate to the previous month.
@@ -698,10 +701,10 @@ class NgpDatePickerPreviousMonth {
         date = this.dateAdapter.subtract(date, { months: 1 });
         this.state().setFocusedDate(date, 'mouse', 'backward');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerPreviousMonth, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpDatePickerPreviousMonth, isStandalone: true, selector: "[ngpDatePickerPreviousMonth]", host: { listeners: { "click": "navigateToPreviouMonth()" }, properties: { "attr.aria-disabled": "disabled()", "attr.type": "isButton ? \"button\" : null" } }, exportAs: ["ngpDatePickerPreviousMonth"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerPreviousMonth, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpDatePickerPreviousMonth, isStandalone: true, selector: "[ngpDatePickerPreviousMonth]", host: { listeners: { "click": "navigateToPreviouMonth()" }, properties: { "attr.aria-disabled": "disabled()", "attr.type": "isButton ? \"button\" : null" } }, exportAs: ["ngpDatePickerPreviousMonth"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerPreviousMonth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerPreviousMonth, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDatePickerPreviousMonth]',
@@ -768,7 +771,7 @@ class NgpDatePickerRowRender {
                 firstDay = this.dateAdapter.add(firstDay, { days: 1 });
             }
             return days;
-        });
+        }, ...(ngDevMode ? [{ debugName: "days" }] : []));
         // get the weeks to display.
         this.weeks = computed(() => {
             const days = this.days();
@@ -777,7 +780,7 @@ class NgpDatePickerRowRender {
                 weeks.push(days.slice(i, i + 7));
             }
             return weeks;
-        });
+        }, ...(ngDevMode ? [{ debugName: "weeks" }] : []));
         /**
          * Store the embedded view refs of each rendered row.
          */
@@ -849,10 +852,10 @@ class NgpDatePickerRowRender {
         const firstDay = this.state().firstDayOfWeek();
         return (DAYS_PER_WEEK + firstDay + DAYS_PER_WEEK - 1 - lastDay) % DAYS_PER_WEEK;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerRowRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpDatePickerRowRender, isStandalone: true, selector: "[ngpDatePickerRowRender]", providers: [{ provide: NgpDatePickerRowRenderToken, useExisting: NgpDatePickerRowRender }], exportAs: ["ngpDatePickerRowRender"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerRowRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpDatePickerRowRender, isStandalone: true, selector: "[ngpDatePickerRowRender]", providers: [{ provide: NgpDatePickerRowRenderToken, useExisting: NgpDatePickerRowRender }], exportAs: ["ngpDatePickerRowRender"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerRowRender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePickerRowRender, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDatePickerRowRender]',
@@ -894,28 +897,29 @@ class NgpDatePicker {
         /**
          * The minimum date that can be selected.
          */
-        this.min = input(undefined, {
-            alias: 'ngpDatePickerMin',
-        });
+        this.min = input(undefined, ...(ngDevMode ? [{ debugName: "min", alias: 'ngpDatePickerMin' }] : [{
+                alias: 'ngpDatePickerMin',
+            }]));
         /**
          * The maximum date that can be selected.
          */
-        this.max = input(undefined, {
-            alias: 'ngpDatePickerMax',
-        });
+        this.max = input(undefined, ...(ngDevMode ? [{ debugName: "max", alias: 'ngpDatePickerMax' }] : [{
+                alias: 'ngpDatePickerMax',
+            }]));
         /**
          * Determine if the date picker is disabled.
          */
-        this.disabled = input(false, {
-            alias: 'ngpDatePickerDisabled',
-            transform: booleanAttribute,
-        });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpDatePickerDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpDatePickerDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
          * A function that is called to determine if a specific date should be disabled.
          */
-        this.dateDisabled = input(() => false, {
-            alias: 'ngpDatePickerDateDisabled',
-        });
+        this.dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled", alias: 'ngpDatePickerDateDisabled' }] : [{
+                alias: 'ngpDatePickerDateDisabled',
+            }]));
         /**
          * Sets which day starts the week in the calendar.
          * Accepts 0-7 where 1=Monday, 2=Tuesday, 3=Wednesday, 4=Thursday, 5=Friday, 6=Saturday, 7=Sunday.
@@ -923,16 +927,17 @@ class NgpDatePicker {
          * Note: Update calendar header column order when changing from Sunday start.
          * @default 7 (Sunday)
          */
-        this.firstDayOfWeek = input(transformToFirstDayOfWeekNumber(this.config.firstDayOfWeek), {
-            alias: 'ngpDatePickerFirstDayOfWeek',
-            transform: transformToFirstDayOfWeekNumber,
-        });
+        this.firstDayOfWeek = input(transformToFirstDayOfWeekNumber(this.config.firstDayOfWeek), ...(ngDevMode ? [{ debugName: "firstDayOfWeek", alias: 'ngpDatePickerFirstDayOfWeek',
+                transform: transformToFirstDayOfWeekNumber }] : [{
+                alias: 'ngpDatePickerFirstDayOfWeek',
+                transform: transformToFirstDayOfWeekNumber,
+            }]));
         /**
          * The selected value.
          */
-        this.date = input(undefined, {
-            alias: 'ngpDatePickerDate',
-        });
+        this.date = input(undefined, ...(ngDevMode ? [{ debugName: "date", alias: 'ngpDatePickerDate' }] : [{
+                alias: 'ngpDatePickerDate',
+            }]));
         /**
          * Emit when the date changes.
          */
@@ -942,9 +947,9 @@ class NgpDatePicker {
         /**
          * The focused value.
          */
-        this.focusedDate = input(this.dateAdapter.now(), {
-            alias: 'ngpDatePickerFocusedDate',
-        });
+        this.focusedDate = input(this.dateAdapter.now(), ...(ngDevMode ? [{ debugName: "focusedDate", alias: 'ngpDatePickerFocusedDate' }] : [{
+                alias: 'ngpDatePickerFocusedDate',
+            }]));
         /**
          * Emit when the focused date changes.
          */
@@ -955,11 +960,11 @@ class NgpDatePicker {
          * Detect the label element.
          * @internal
          */
-        this.label = contentChild(NgpDatePickerLabelToken, { descendants: true });
+        this.label = contentChild(NgpDatePickerLabelToken, ...(ngDevMode ? [{ debugName: "label", descendants: true }] : [{ descendants: true }]));
         /**
          * Access all the date picker buttons
          */
-        this.buttons = signal([]);
+        this.buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : []));
         /**
          * The date picker state.
          */
@@ -1079,10 +1084,10 @@ class NgpDatePicker {
     isBetweenRange(_) {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.11", type: NgpDatePicker, isStandalone: true, selector: "[ngpDatePicker]", inputs: { min: { classPropertyName: "min", publicName: "ngpDatePickerMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpDatePickerMax", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpDatePickerDisabled", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "ngpDatePickerDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "ngpDatePickerFirstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "ngpDatePickerDate", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "ngpDatePickerFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "ngpDatePickerDateChange", focusedDateChange: "ngpDatePickerFocusedDateChange" }, host: { properties: { "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [provideDatePickerState()], queries: [{ propertyName: "label", first: true, predicate: NgpDatePickerLabelToken, descendants: true, isSignal: true }], exportAs: ["ngpDatePicker"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.9", type: NgpDatePicker, isStandalone: true, selector: "[ngpDatePicker]", inputs: { min: { classPropertyName: "min", publicName: "ngpDatePickerMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpDatePickerMax", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpDatePickerDisabled", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "ngpDatePickerDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "ngpDatePickerFirstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "ngpDatePickerDate", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "ngpDatePickerFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "ngpDatePickerDateChange", focusedDateChange: "ngpDatePickerFocusedDateChange" }, host: { properties: { "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [provideDatePickerState()], queries: [{ propertyName: "label", first: true, predicate: NgpDatePickerLabelToken, descendants: true, isSignal: true }], exportAs: ["ngpDatePicker"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDatePicker, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDatePicker]',
@@ -1092,7 +1097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[attr.data-disabled]': 'state.disabled() ? "" : null',
                     },
                 }]
-        }] });
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDatePickerMin", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDatePickerMax", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDatePickerDisabled", required: false }] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDatePickerDateDisabled", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDatePickerFirstDayOfWeek", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDatePickerDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["ngpDatePickerDateChange"] }], focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDatePickerFocusedDate", required: false }] }], focusedDateChange: [{ type: i0.Output, args: ["ngpDatePickerFocusedDateChange"] }], label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgpDatePickerLabelToken), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class NgpDateRangePicker {
     constructor() {
@@ -1108,28 +1113,29 @@ class NgpDateRangePicker {
         /**
          * The minimum date that can be selected.
          */
-        this.min = input(undefined, {
-            alias: 'ngpDateRangePickerMin',
-        });
+        this.min = input(undefined, ...(ngDevMode ? [{ debugName: "min", alias: 'ngpDateRangePickerMin' }] : [{
+                alias: 'ngpDateRangePickerMin',
+            }]));
         /**
          * The maximum date that can be selected.
          */
-        this.max = input(undefined, {
-            alias: 'ngpDateRangePickerMax',
-        });
+        this.max = input(undefined, ...(ngDevMode ? [{ debugName: "max", alias: 'ngpDateRangePickerMax' }] : [{
+                alias: 'ngpDateRangePickerMax',
+            }]));
         /**
          * Determine if the date picker is disabled.
          */
-        this.disabled = input(false, {
-            alias: 'ngpDateRangePickerDisabled',
-            transform: booleanAttribute,
-        });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpDateRangePickerDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpDateRangePickerDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
          * A function that is called to determine if a specific date should be disabled.
          */
-        this.dateDisabled = input(() => false, {
-            alias: 'ngpDateRangePickerDateDisabled',
-        });
+        this.dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled", alias: 'ngpDateRangePickerDateDisabled' }] : [{
+                alias: 'ngpDateRangePickerDateDisabled',
+            }]));
         /**
          * Sets which day starts the week in the calendar.
          * Accepts 0-7 where 1=Monday, 2=Tuesday, 3=Wednesday, 4=Thursday, 5=Friday, 6=Saturday, 7=Sunday.
@@ -1137,16 +1143,17 @@ class NgpDateRangePicker {
          * Note: Update calendar header column order when changing from Sunday start.
          * @default 7 (Sunday)
          */
-        this.firstDayOfWeek = input(transformToFirstDayOfWeekNumber(this.config.firstDayOfWeek), {
-            alias: 'ngpDateRangePickerFirstDayOfWeek',
-            transform: transformToFirstDayOfWeekNumber,
-        });
+        this.firstDayOfWeek = input(transformToFirstDayOfWeekNumber(this.config.firstDayOfWeek), ...(ngDevMode ? [{ debugName: "firstDayOfWeek", alias: 'ngpDateRangePickerFirstDayOfWeek',
+                transform: transformToFirstDayOfWeekNumber }] : [{
+                alias: 'ngpDateRangePickerFirstDayOfWeek',
+                transform: transformToFirstDayOfWeekNumber,
+            }]));
         /**
          * The selected start date
          */
-        this.startDate = input(undefined, {
-            alias: 'ngpDateRangePickerStartDate',
-        });
+        this.startDate = input(undefined, ...(ngDevMode ? [{ debugName: "startDate", alias: 'ngpDateRangePickerStartDate' }] : [{
+                alias: 'ngpDateRangePickerStartDate',
+            }]));
         /**
          * Emit when the date changes.
          */
@@ -1156,9 +1163,9 @@ class NgpDateRangePicker {
         /**
          * The selected end date
          */
-        this.endDate = input(undefined, {
-            alias: 'ngpDateRangePickerEndDate',
-        });
+        this.endDate = input(undefined, ...(ngDevMode ? [{ debugName: "endDate", alias: 'ngpDateRangePickerEndDate' }] : [{
+                alias: 'ngpDateRangePickerEndDate',
+            }]));
         /**
          * Emit when the end date changes.
          */
@@ -1168,9 +1175,9 @@ class NgpDateRangePicker {
         /**
          * The focused value.
          */
-        this.focusedDate = input(this.dateAdapter.now(), {
-            alias: 'ngpDateRangePickerFocusedDate',
-        });
+        this.focusedDate = input(this.dateAdapter.now(), ...(ngDevMode ? [{ debugName: "focusedDate", alias: 'ngpDateRangePickerFocusedDate' }] : [{
+                alias: 'ngpDateRangePickerFocusedDate',
+            }]));
         /**
          * Emit when the focused date changes.
          */
@@ -1181,11 +1188,11 @@ class NgpDateRangePicker {
          * Detect the label element.
          * @internal
          */
-        this.label = contentChild(NgpDatePickerLabelToken, { descendants: true });
+        this.label = contentChild(NgpDatePickerLabelToken, ...(ngDevMode ? [{ debugName: "label", descendants: true }] : [{ descendants: true }]));
         /**
          * Access all the date picker buttons
          */
-        this.buttons = signal([]);
+        this.buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : []));
         /**
          * The date range picker state.
          */
@@ -1365,10 +1372,10 @@ class NgpDateRangePicker {
         }
         return this.dateAdapter.isAfter(date, start) && this.dateAdapter.isBefore(date, end);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.11", type: NgpDateRangePicker, isStandalone: true, selector: "[ngpDateRangePicker]", inputs: { min: { classPropertyName: "min", publicName: "ngpDateRangePickerMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpDateRangePickerMax", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpDateRangePickerDisabled", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "ngpDateRangePickerDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "ngpDateRangePickerFirstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "ngpDateRangePickerStartDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "ngpDateRangePickerEndDate", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "ngpDateRangePickerFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDateChange: "ngpDateRangePickerStartDateChange", endDateChange: "ngpDateRangePickerEndDateChange", focusedDateChange: "ngpDateRangePickerFocusedDateChange" }, host: { properties: { "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [provideDateRangePickerState()], queries: [{ propertyName: "label", first: true, predicate: NgpDatePickerLabelToken, descendants: true, isSignal: true }], exportAs: ["ngpDateRangePicker"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.9", type: NgpDateRangePicker, isStandalone: true, selector: "[ngpDateRangePicker]", inputs: { min: { classPropertyName: "min", publicName: "ngpDateRangePickerMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpDateRangePickerMax", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpDateRangePickerDisabled", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "ngpDateRangePickerDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "ngpDateRangePickerFirstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "ngpDateRangePickerStartDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "ngpDateRangePickerEndDate", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "ngpDateRangePickerFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDateChange: "ngpDateRangePickerStartDateChange", endDateChange: "ngpDateRangePickerEndDateChange", focusedDateChange: "ngpDateRangePickerFocusedDateChange" }, host: { properties: { "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [provideDateRangePickerState()], queries: [{ propertyName: "label", first: true, predicate: NgpDatePickerLabelToken, descendants: true, isSignal: true }], exportAs: ["ngpDateRangePicker"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDateRangePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDateRangePicker, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDateRangePicker]',
@@ -1378,7 +1385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[attr.data-disabled]': 'state.disabled() ? "" : null',
                     },
                 }]
-        }] });
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDateRangePickerMin", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDateRangePickerMax", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDateRangePickerDisabled", required: false }] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDateRangePickerDateDisabled", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDateRangePickerFirstDayOfWeek", required: false }] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDateRangePickerStartDate", required: false }] }], startDateChange: [{ type: i0.Output, args: ["ngpDateRangePickerStartDateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDateRangePickerEndDate", required: false }] }], endDateChange: [{ type: i0.Output, args: ["ngpDateRangePickerEndDateChange"] }], focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpDateRangePickerFocusedDate", required: false }] }], focusedDateChange: [{ type: i0.Output, args: ["ngpDateRangePickerFocusedDateChange"] }], label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgpDatePickerLabelToken), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.