ng-primitives 0.70.0 → 0.71.0

package/date-picker/config/date-picker-config.d.ts

@@ -0,0 +1,22 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { NgpDatePickerFirstDayOfWeekNumber } from '../date-picker/date-picker-first-day-of-week';
+export interface NgpDatePickerConfig {
+    /**
+     * Define the first day of the week for the date picker calendar.
+     * @default 7 (Sunday)
+     */
+    firstDayOfWeek: NgpDatePickerFirstDayOfWeekNumber;
+}
+export declare const defaultDatePickerConfig: NgpDatePickerConfig;
+export declare const NgpDatePickerConfigToken: InjectionToken<NgpDatePickerConfig>;
+/**
+ * Provide the default DatePicker / DateRangePicker configuration
+ * @param config The DatePicker / DateRangePicker configuration
+ * @returns The provider
+ */
+export declare function provideDatePickerConfig(config: Partial<NgpDatePickerConfig>): Provider[];
+/**
+ * Inject the DatePicker / DateRangePicker configuration
+ * @returns The global DatePicker / DateRangePicker configuration
+ */
+export declare function injectDatePickerConfig(): NgpDatePickerConfig;

package/date-picker/date-picker/date-picker-first-day-of-week.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The first day of the week as a number (0-7).
+ * - `1` = Monday
+ * - `2` = Tuesday
+ * - `3` = Wednesday
+ * - `4` = Thursday
+ * - `5` = Friday
+ * - `6` = Saturday
+ * - `7` = Sunday
+ */
+export type NgpDatePickerFirstDayOfWeekNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+/**
+ * The first day of the week as a number (0-7).
+ * - `1` = Monday
+ * - `2` = Tuesday
+ * - `3` = Wednesday
+ * - `4` = Thursday
+ * - `5` = Friday
+ * - `6` = Saturday
+ * - `7` = Sunday
+ */
+export type NgpDatePickerFirstDayOfWeekNumberInput = NgpDatePickerFirstDayOfWeekNumber | `${NgpDatePickerFirstDayOfWeekNumber}`;
+/**
+ * Transform the first day of the week input value to a number (0-7) for the start of the week in
+ * the calendar.
+ * @param firstDayOfWeek The first day of the week input value (number).
+ * @returns The first day of the week number.
+ */
+export declare function transformToFirstDayOfWeekNumber(firstDayOfWeek: NgpDatePickerFirstDayOfWeekNumberInput): NgpDatePickerFirstDayOfWeekNumber;

package/date-picker/date-picker/date-picker.d.ts

@@ -10,6 +10,10 @@ export declare class NgpDatePicker<T> {
      * Access the date adapter.
      */
     private readonly dateAdapter;
+    /**
+     * Access the date picker config.
+     */
+    private readonly config;
     /**
      * Access the injector.
      */
@@ -30,6 +34,14 @@ export declare class NgpDatePicker<T> {
      * A function that is called to determine if a specific date should be disabled.
      */
     readonly dateDisabled: import("@angular/core").InputSignal<(date: T) => boolean>;
+    /**
+     * 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.
+     * Defaults to NgpDatePickerConfig.firstDayOfWeek (default 7 if not overridden).
+     * Note: Update calendar header column order when changing from Sunday start.
+     * @default 7 (Sunday)
+     */
+    readonly firstDayOfWeek: import("@angular/core").InputSignalWithTransform<import("./date-picker-first-day-of-week").NgpDatePickerFirstDayOfWeekNumber, import("./date-picker-first-day-of-week").NgpDatePickerFirstDayOfWeekNumberInput>;
     /**
      * The selected value.
      */
@@ -112,5 +124,5 @@ export declare class NgpDatePicker<T> {
      */
     isBetweenRange(_: T): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpDatePicker<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDatePicker<any>, "[ngpDatePicker]", ["ngpDatePicker"], { "min": { "alias": "ngpDatePickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpDatePickerMax"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpDatePickerDisabled"; "required": false; "isSignal": true; }; "dateDisabled": { "alias": "ngpDatePickerDateDisabled"; "required": false; "isSignal": true; }; "date": { "alias": "ngpDatePickerDate"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "ngpDatePickerFocusedDate"; "required": false; "isSignal": true; }; }, { "dateChange": "ngpDatePickerDateChange"; "focusedDateChange": "ngpDatePickerFocusedDateChange"; }, ["label"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDatePicker<any>, "[ngpDatePicker]", ["ngpDatePicker"], { "min": { "alias": "ngpDatePickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpDatePickerMax"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpDatePickerDisabled"; "required": false; "isSignal": true; }; "dateDisabled": { "alias": "ngpDatePickerDateDisabled"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "ngpDatePickerFirstDayOfWeek"; "required": false; "isSignal": true; }; "date": { "alias": "ngpDatePickerDate"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "ngpDatePickerFocusedDate"; "required": false; "isSignal": true; }; }, { "dateChange": "ngpDatePickerDateChange"; "focusedDateChange": "ngpDatePickerFocusedDateChange"; }, ["label"], never, true, never>;
 }

package/date-picker/date-picker-row-render/date-picker-row-render.d.ts

@@ -30,6 +30,10 @@ export declare class NgpDatePickerRowRender<T> implements OnDestroy {
      * Store the embedded view refs of each rendered row.
      */
     private readonly viewRefs;
+    /**
+     * Store the previously rendered month.
+     */
+    private previousMonth;
     constructor();
     ngOnDestroy(): void;
     /**
@@ -40,6 +44,14 @@ export declare class NgpDatePickerRowRender<T> implements OnDestroy {
      * Destroy the row.
      */
     private destroyRows;
+    /**
+     * Get the offset of the first day of the week.
+     * @param firstCalendarDay The first day of the calendar without the offset.
+     * @returns The offset of the first day of the week.
+     *
+     * @internal
+     */
+    getFirstDayOfWeekOffset(firstCalendarDay: T): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpDatePickerRowRender<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDatePickerRowRender<any>, "[ngpDatePickerRowRender]", ["ngpDatePickerRowRender"], {}, {}, never, never, true, never>;
 }

package/date-picker/date-range-picker/date-range-picker.d.ts

@@ -4,6 +4,10 @@ import { NgpDatePickerDateButton } from '../date-picker-date-button/date-picker-
 import * as i0 from "@angular/core";
 export declare class NgpDateRangePicker<T> {
     private readonly dateAdapter;
+    /**
+     * Access the date range picker config.
+     */
+    private readonly config;
     /**
      * Access the injector.
      */
@@ -24,6 +28,14 @@ export declare class NgpDateRangePicker<T> {
      * A function that is called to determine if a specific date should be disabled.
      */
     readonly dateDisabled: import("@angular/core").InputSignal<(date: T) => boolean>;
+    /**
+     * 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.
+     * Defaults to NgpDatePickerConfig.firstDayOfWeek (default 7 if not overridden).
+     * Note: Update calendar header column order when changing from Sunday start.
+     * @default 7 (Sunday)
+     */
+    readonly firstDayOfWeek: import("@angular/core").InputSignalWithTransform<import("../date-picker/date-picker-first-day-of-week").NgpDatePickerFirstDayOfWeekNumber, import("../date-picker/date-picker-first-day-of-week").NgpDatePickerFirstDayOfWeekNumberInput>;
     /**
      * The selected start date
      */
@@ -128,5 +140,5 @@ export declare class NgpDateRangePicker<T> {
      */
     isBetweenRange(date: T): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpDateRangePicker<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDateRangePicker<any>, "[ngpDateRangePicker]", ["ngpDateRangePicker"], { "min": { "alias": "ngpDateRangePickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpDateRangePickerMax"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpDateRangePickerDisabled"; "required": false; "isSignal": true; }; "dateDisabled": { "alias": "ngpDateRangePickerDateDisabled"; "required": false; "isSignal": true; }; "startDate": { "alias": "ngpDateRangePickerStartDate"; "required": false; "isSignal": true; }; "endDate": { "alias": "ngpDateRangePickerEndDate"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "ngpDateRangePickerFocusedDate"; "required": false; "isSignal": true; }; }, { "startDateChange": "ngpDateRangePickerStartDateChange"; "endDateChange": "ngpDateRangePickerEndDateChange"; "focusedDateChange": "ngpDateRangePickerFocusedDateChange"; }, ["label"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDateRangePicker<any>, "[ngpDateRangePicker]", ["ngpDateRangePicker"], { "min": { "alias": "ngpDateRangePickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpDateRangePickerMax"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpDateRangePickerDisabled"; "required": false; "isSignal": true; }; "dateDisabled": { "alias": "ngpDateRangePickerDateDisabled"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "ngpDateRangePickerFirstDayOfWeek"; "required": false; "isSignal": true; }; "startDate": { "alias": "ngpDateRangePickerStartDate"; "required": false; "isSignal": true; }; "endDate": { "alias": "ngpDateRangePickerEndDate"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "ngpDateRangePickerFocusedDate"; "required": false; "isSignal": true; }; }, { "startDateChange": "ngpDateRangePickerStartDateChange"; "endDateChange": "ngpDateRangePickerEndDateChange"; "focusedDateChange": "ngpDateRangePickerFocusedDateChange"; }, ["label"], never, true, never>;
 }

package/date-picker/index.d.ts

@@ -1,3 +1,4 @@
+export { injectDatePickerConfig, provideDatePickerConfig } from './config/date-picker-config';
 export { NgpDatePickerCellRender } from './date-picker-cell-render/date-picker-cell-render';
 export { injectDatePickerCellDate, injectDatePickerCellRender, NgpDatePickerCellRenderToken, } from './date-picker-cell-render/date-picker-cell-render-token';
 export { NgpDatePickerCell } from './date-picker-cell/date-picker-cell';
@@ -11,6 +12,7 @@ export { NgpDatePickerPreviousMonth } from './date-picker-previous-month/date-pi
 export { NgpDatePickerRowRender } from './date-picker-row-render/date-picker-row-render';
 export { injectDatePickerRowRender, injectDatePickerWeek, NgpDatePickerRowRenderToken, } from './date-picker-row-render/date-picker-row-render-token';
 export { NgpDatePicker } from './date-picker/date-picker';
+export { transformToFirstDayOfWeekNumber, type NgpDatePickerFirstDayOfWeekNumber, type NgpDatePickerFirstDayOfWeekNumberInput, } from './date-picker/date-picker-first-day-of-week';
 export { injectDatePickerState, provideDatePickerState } from './date-picker/date-picker-state';
 export { NgpDateRangePicker } from './date-range-picker/date-range-picker';
 export { provideDateRangePickerState, injectDateRangePickerState, } from './date-range-picker/date-range-picker-state';

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

@@ -1,10 +1,35 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, ViewContainerRef, Injector, Directive, contentChild, computed, ElementRef, HostListener, input, booleanAttribute, output, signal, afterNextRender } 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 { injectDateAdapter } from 'ng-primitives/date-time';
-import { setupButton } from 'ng-primitives/internal';
-import { uniqueId, onChange } from 'ng-primitives/utils';
+import { setupButton, explicitEffect } from 'ng-primitives/internal';
+import { uniqueId } from 'ng-primitives/utils';
+
+const defaultDatePickerConfig = {
+    firstDayOfWeek: 7,
+};
+const NgpDatePickerConfigToken = new InjectionToken('NgpDatePickerConfigToken');
+/**
+ * Provide the default DatePicker / DateRangePicker configuration
+ * @param config The DatePicker / DateRangePicker configuration
+ * @returns The provider
+ */
+function provideDatePickerConfig(config) {
+    return [
+        {
+            provide: NgpDatePickerConfigToken,
+            useValue: { ...defaultDatePickerConfig, ...config },
+        },
+    ];
+}
+/**
+ * Inject the DatePicker / DateRangePicker configuration
+ * @returns The global DatePicker / DateRangePicker configuration
+ */
+function injectDatePickerConfig() {
+    return inject(NgpDatePickerConfigToken, { optional: true }) ?? defaultDatePickerConfig;
+}
 
 const NgpDatePickerRowRenderToken = new InjectionToken('NgpDatePickerRowRenderToken');
 /**
@@ -689,6 +714,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 args: ['click']
             }] } });
 
+/**
+ * The number of days in a week.
+ * @internal
+ */
+const DAYS_PER_WEEK = 7;
 /**
  * A structural directive that renders a row of weekdays in the date picker grid.
  */
@@ -720,9 +750,11 @@ class NgpDatePickerRowRender {
             // Get the first and last day of the month.
             let firstDay = this.dateAdapter.startOfMonth(month);
             let lastDay = this.dateAdapter.endOfMonth(month);
+            // calculate the offset of the first day of the week.
+            const firstDayOfWeekOffset = this.getFirstDayOfWeekOffset(firstDay);
             // find the first and last day of visible in the grid.
             firstDay = this.dateAdapter.subtract(firstDay, {
-                days: this.dateAdapter.getDay(firstDay),
+                days: firstDayOfWeekOffset,
             });
             lastDay = this.dateAdapter.add(lastDay, {
                 days: 6 - this.dateAdapter.getDay(lastDay),
@@ -747,12 +779,12 @@ class NgpDatePickerRowRender {
          * Store the embedded view refs of each rendered row.
          */
         this.viewRefs = [];
-        // re-render the rows when the month changes.
-        onChange(this.state().focusedDate, (date, previousDate) => {
-            if (!date || !previousDate || !this.dateAdapter.isSameMonth(date, previousDate)) {
-                this.renderRows();
-            }
-        });
+        /**
+         * Store the previously rendered month.
+         */
+        this.previousMonth = null;
+        // Wait for the inputs of the containing picker to be initialized.
+        explicitEffect([this.state().focusedDate, this.state().firstDayOfWeek], () => this.renderRows());
     }
     ngOnDestroy() {
         this.destroyRows();
@@ -761,6 +793,13 @@ class NgpDatePickerRowRender {
      * Render the row.
      */
     renderRows() {
+        // If the focused date has not changed, do not re-render.
+        if (this.previousMonth &&
+            this.dateAdapter.isSameMonth(this.previousMonth, this.state().focusedDate())) {
+            return;
+        }
+        // Store the current focused month.
+        this.previousMonth = this.state().focusedDate();
         const weeks = this.weeks();
         // clear the view container.
         this.destroyRows();
@@ -783,6 +822,17 @@ class NgpDatePickerRowRender {
             viewRef.destroy();
         }
     }
+    /**
+     * Get the offset of the first day of the week.
+     * @param firstCalendarDay The first day of the calendar without the offset.
+     * @returns The offset of the first day of the week.
+     *
+     * @internal
+     */
+    getFirstDayOfWeekOffset(firstCalendarDay) {
+        return ((DAYS_PER_WEEK + this.dateAdapter.getDay(firstCalendarDay) - this.state().firstDayOfWeek()) %
+            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 }); }
 }
@@ -795,6 +845,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Transform the first day of the week input value to a number (0-7) for the start of the week in
+ * the calendar.
+ * @param firstDayOfWeek The first day of the week input value (number).
+ * @returns The first day of the week number.
+ */
+function transformToFirstDayOfWeekNumber(firstDayOfWeek) {
+    if (!firstDayOfWeek) {
+        return 7;
+    }
+    return numberAttribute(firstDayOfWeek);
+}
+
 /**
  * The outermost container for the date picker.
  */
@@ -804,6 +867,10 @@ class NgpDatePicker {
          * Access the date adapter.
          */
         this.dateAdapter = injectDateAdapter();
+        /**
+         * Access the date picker config.
+         */
+        this.config = injectDatePickerConfig();
         /**
          * Access the injector.
          */
@@ -833,6 +900,17 @@ class NgpDatePicker {
         this.dateDisabled = input(() => false, {
             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.
+         * Defaults to NgpDatePickerConfig.firstDayOfWeek (default 7 if not overridden).
+         * 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,
+        });
         /**
          * The selected value.
          */
@@ -974,7 +1052,7 @@ class NgpDatePicker {
         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 }, 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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePicker, decorators: [{
             type: Directive,
@@ -991,6 +1069,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
 class NgpDateRangePicker {
     constructor() {
         this.dateAdapter = injectDateAdapter();
+        /**
+         * Access the date range picker config.
+         */
+        this.config = injectDatePickerConfig();
         /**
          * Access the injector.
          */
@@ -1020,6 +1102,17 @@ class NgpDateRangePicker {
         this.dateDisabled = input(() => false, {
             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.
+         * Defaults to NgpDatePickerConfig.firstDayOfWeek (default 7 if not overridden).
+         * 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,
+        });
         /**
          * The selected start date
          */
@@ -1218,7 +1311,7 @@ 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 }, 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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDateRangePicker, decorators: [{
             type: Directive,
@@ -1236,5 +1329,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NgpDatePicker, NgpDatePickerCell, NgpDatePickerCellRender, NgpDatePickerCellRenderToken, NgpDatePickerDateButton, NgpDatePickerDateButtonToken, NgpDatePickerGrid, NgpDatePickerLabel, NgpDatePickerLabelToken, NgpDatePickerNextMonth, NgpDatePickerPreviousMonth, NgpDatePickerRowRender, NgpDatePickerRowRenderToken, NgpDateRangePicker, injectDatePickerCellDate, injectDatePickerCellRender, injectDatePickerDateButton, injectDatePickerLabel, injectDatePickerRowRender, injectDatePickerState, injectDatePickerWeek, injectDateRangePickerState, provideDatePickerState, provideDateRangePickerState };
+export { NgpDatePicker, NgpDatePickerCell, NgpDatePickerCellRender, NgpDatePickerCellRenderToken, NgpDatePickerDateButton, NgpDatePickerDateButtonToken, NgpDatePickerGrid, NgpDatePickerLabel, NgpDatePickerLabelToken, NgpDatePickerNextMonth, NgpDatePickerPreviousMonth, NgpDatePickerRowRender, NgpDatePickerRowRenderToken, NgpDateRangePicker, injectDatePickerCellDate, injectDatePickerCellRender, injectDatePickerConfig, injectDatePickerDateButton, injectDatePickerLabel, injectDatePickerRowRender, injectDatePickerState, injectDatePickerWeek, injectDateRangePickerState, provideDatePickerConfig, provideDatePickerState, provideDateRangePickerState, transformToFirstDayOfWeekNumber };
 //# sourceMappingURL=ng-primitives-date-picker.mjs.map