ng-primitives 0.68.0 → 0.69.1

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

@@ -1,9 +1,9 @@
 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 { 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 { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import { uniqueId, onChange } from 'ng-primitives/utils';
 
 const NgpDatePickerRowRenderToken = new InjectionToken('NgpDatePickerRowRenderToken');
@@ -107,18 +107,39 @@ function injectDatePickerDateButton() {
     return inject(NgpDatePickerDateButtonToken);
 }
 
-const NgpDatePickerToken = new InjectionToken('NgpDatePickerToken');
 /**
- * Inject the DatePicker directive instance
+ * The state token  for the DateRangePicker primitive.
  */
-function injectDatePicker() {
-    return inject(NgpDatePickerToken);
-}
+const NgpDateRangePickerStateToken = createStateToken('DateRangePicker');
+/**
+ * Provides the DateRangePicker state.
+ */
+const provideDateRangePickerState = createStateProvider(NgpDateRangePickerStateToken);
+/**
+ * Injects the DateRangePicker state.
+ */
+const injectDateRangePickerState = createStateInjector(NgpDateRangePickerStateToken);
 /**
- * Provide the DatePicker directive instance
+ * The DateRangePicker state registration function.
  */
-function provideDatePicker(datePicker) {
-    return { provide: NgpDatePickerToken, useExisting: datePicker };
+const dateRangePickerState = createState(NgpDateRangePickerStateToken);
+
+const NgpDatePickerStateToken = createStateToken('DatePicker');
+const provideDatePickerState = createStateProvider(NgpDatePickerStateToken);
+const injectDatePickerState = createStateInjector(NgpDatePickerStateToken);
+const datePickerState = createState(NgpDatePickerStateToken);
+function injectDateControllerState() {
+    const datePickerState = injectDatePickerState({ optional: true });
+    const dateRangePickerState = injectDateRangePickerState({ optional: true });
+    if (datePickerState()) {
+        return datePickerState;
+    }
+    else if (dateRangePickerState()) {
+        return dateRangePickerState;
+    }
+    else {
+        throw new Error('No date picker or date range picker state found');
+    }
 }
 
 /**
@@ -129,7 +150,7 @@ class NgpDatePickerCell {
         /**
          * Access the date picker.
          */
-        this.datePicker = injectDatePicker();
+        this.state = injectDateControllerState();
         /**
          * Access the child date picker date button.
          */
@@ -139,7 +160,7 @@ class NgpDatePickerCell {
         /**
          * Access the label id.
          */
-        this.labelId = computed(() => this.datePicker.label()?.id());
+        this.labelId = computed(() => this.state().label()?.id());
     }
     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 }); }
@@ -160,11 +181,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 }]
         }] });
 
-const NgpDatePickerStateToken = createStateToken('DatePicker');
-const provideDatePickerState = createStateProvider(NgpDatePickerStateToken);
-const injectDatePickerState = createStateInjector(NgpDatePickerStateToken);
-const datePickerState = createState(NgpDatePickerStateToken);
-
 /**
  * A button that represents a date in the date picker grid.
  */
@@ -178,14 +194,10 @@ class NgpDatePickerDateButton {
          * Access the focus monitor.
          */
         this.focusMonitor = inject(FocusMonitor);
-        /**
-         * Access the date picker.
-         */
-        this.datePicker = injectDatePicker();
         /**
          * Access the date picker state.
          */
-        this.state = injectDatePickerState();
+        this.state = injectDateControllerState();
         /**
          * Access the date adapter.
          */
@@ -200,12 +212,20 @@ class NgpDatePickerDateButton {
         this.focused = computed(() => this.dateAdapter.isSameDay(this.date, this.state().focusedDate()));
         /**
          * Determine if this is the selected date.
-         * @internal
          */
-        this.selected = computed(() => {
-            const selected = this.state().date();
-            return selected && this.dateAdapter.isSameDay(this.date, selected);
-        });
+        this.selected = computed(() => this.state().isSelected(this.date));
+        /**
+         * Determine if this is the start date of the range.
+         */
+        this.start = computed(() => this.state().isStartOfRange(this.date));
+        /**
+         * Determine if this is the end date of the range.
+         */
+        this.end = computed(() => this.state().isEndOfRange(this.date));
+        /**
+         * Determine if this is between the start and end dates of the range.
+         */
+        this.betweenRange = computed(() => this.state().isBetweenRange(this.date));
         /**
          * Determine if this date is outside the current month.
          */
@@ -236,11 +256,11 @@ class NgpDatePickerDateButton {
          * Determine if the element is a button.
          */
         this.isButton = this.elementRef.nativeElement.tagName === 'BUTTON';
-        this.datePicker.registerButton(this);
+        this.state().registerButton(this);
         setupButton({ disabled: this.disabled });
     }
     ngOnDestroy() {
-        this.datePicker.unregisterButton(this);
+        this.state().unregisterButton(this);
     }
     /**
      * When the button is clicked, select the date.
@@ -256,9 +276,8 @@ class NgpDatePickerDateButton {
             event.preventDefault();
             event.stopPropagation();
         }
-        this.state().date.set(this.date);
-        this.state().dateChange.emit(this.date);
-        this.datePicker.setFocusedDate(this.date, 'mouse', 'forward');
+        this.state().select(this.date);
+        this.state().setFocusedDate(this.date, 'mouse', 'forward');
     }
     /**
      * Focus if this is the current focused date.
@@ -368,7 +387,7 @@ class NgpDatePickerDateButton {
         }
     }
     focusDate(date, direction) {
-        this.datePicker.setFocusedDate(date, 'keyboard', direction);
+        this.state().setFocusedDate(date, 'keyboard', direction);
     }
     /**
      * Get the direction of the element.
@@ -377,7 +396,7 @@ class NgpDatePickerDateButton {
         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" } }, providers: [{ provide: NgpDatePickerDateButtonToken, useExisting: NgpDatePickerDateButton }], exportAs: ["ngpDatePickerDateButton"], ngImport: i0 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDatePickerDateButton, decorators: [{
             type: Directive,
@@ -392,6 +411,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[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',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { select: [{
@@ -437,7 +459,7 @@ class NgpDatePickerGrid {
         /**
          * Access the date picker state.
          */
-        this.state = injectDatePickerState();
+        this.state = injectDateControllerState();
         /**
          * Determine the id for the label.
          */
@@ -475,7 +497,7 @@ class NgpDatePickerLabel {
         /**
          * Access the date picker.
          */
-        this.state = injectDatePickerState();
+        this.state = injectDateControllerState();
         /**
          * Define a unique id for the label.
          */
@@ -517,14 +539,10 @@ class NgpDatePickerNextMonth {
          * Access the date adapter.
          */
         this.dateAdapter = injectDateAdapter();
-        /**
-         * Access the date picker.
-         */
-        this.datePicker = injectDatePicker();
         /**
          * Access the date picker state.
          */
-        this.state = injectDatePickerState();
+        this.state = injectDateControllerState();
         /**
          * Determine if this is a button element
          */
@@ -569,7 +587,7 @@ class NgpDatePickerNextMonth {
             second: 0,
             millisecond: 0,
         });
-        this.datePicker.setFocusedDate(date, 'mouse', 'forward');
+        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 }); }
@@ -602,14 +620,10 @@ class NgpDatePickerPreviousMonth {
          * Access the date adapter.
          */
         this.dateAdapter = injectDateAdapter();
-        /**
-         * Access the date picker.
-         */
-        this.datePicker = injectDatePicker();
         /**
          * Access the date picker state.
          */
-        this.state = injectDatePickerState();
+        this.state = injectDateControllerState();
         /**
          * Determine if this is a button element
          */
@@ -655,7 +669,7 @@ class NgpDatePickerPreviousMonth {
             second: 0,
             millisecond: 0,
         });
-        this.datePicker.setFocusedDate(date, 'mouse', 'backward');
+        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 }); }
@@ -687,7 +701,7 @@ class NgpDatePickerRowRender {
         /**
          * Access the date picker.
          */
-        this.state = injectDatePickerState();
+        this.state = injectDateControllerState();
         /**
          * Access the template ref for the cell.
          */
@@ -910,15 +924,308 @@ class NgpDatePicker {
     unregisterButton(button) {
         this.buttons.update(buttons => buttons.filter(b => b !== button));
     }
+    /**
+     * Select a date.
+     * @param date The date to select.
+     * @internal
+     */
+    select(date) {
+        this.state.date.set(date);
+        this.dateChange.emit(date);
+    }
+    /**
+     * Determine if a date is selected.
+     * @param date The date to check.
+     * @returns True if the date is selected, false otherwise.
+     * @internal
+     */
+    isSelected(date) {
+        const selected = this.state.date();
+        if (!selected) {
+            return false;
+        }
+        return this.dateAdapter.isSameDay(date, selected);
+    }
+    /**
+     * Determine if a date is the start of a range. In a date picker, this is always false.
+     * @param date The date to check.
+     * @returns Always false.
+     * @internal
+     */
+    isStartOfRange(_) {
+        return false;
+    }
+    /**
+     * Determine if a date is the end of a range. In a date picker, this is always false.
+     * @param date The date to check.
+     * @returns Always false.
+     * @internal
+     */
+    isEndOfRange(_) {
+        return false;
+    }
+    /**
+     * Determine if a date is between the start and end dates. In a date picker, this is always false.
+     * @param date The date to check.
+     * @returns True if the date is between the start and end dates, false otherwise.
+     * @internal
+     */
+    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 }, 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: [provideDatePicker(NgpDatePicker), 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 }, 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,
             args: [{
                     selector: '[ngpDatePicker]',
                     exportAs: 'ngpDatePicker',
-                    providers: [provideDatePicker(NgpDatePicker), provideDatePickerState()],
+                    providers: [provideDatePickerState()],
+                    host: {
+                        '[attr.data-disabled]': 'state.disabled() ? "" : null',
+                    },
+                }]
+        }] });
+
+class NgpDateRangePicker {
+    constructor() {
+        this.dateAdapter = injectDateAdapter();
+        /**
+         * Access the injector.
+         */
+        this.injector = inject(Injector);
+        /**
+         * The minimum date that can be selected.
+         */
+        this.min = input(undefined, {
+            alias: 'ngpDateRangePickerMin',
+        });
+        /**
+         * The maximum date that can be selected.
+         */
+        this.max = input(undefined, {
+            alias: 'ngpDateRangePickerMax',
+        });
+        /**
+         * Determine if the date picker is disabled.
+         */
+        this.disabled = input(false, {
+            alias: 'ngpDateRangePickerDisabled',
+            transform: booleanAttribute,
+        });
+        /**
+         * A function that is called to determine if a specific date should be disabled.
+         */
+        this.dateDisabled = input(() => false, {
+            alias: 'ngpDateRangePickerDateDisabled',
+        });
+        /**
+         * The selected start date
+         */
+        this.startDate = input(undefined, {
+            alias: 'ngpDateRangePickerStartDate',
+        });
+        /**
+         * Emit when the date changes.
+         */
+        this.startDateChange = output({
+            alias: 'ngpDateRangePickerStartDateChange',
+        });
+        /**
+         * The selected end date
+         */
+        this.endDate = input(undefined, {
+            alias: 'ngpDateRangePickerEndDate',
+        });
+        /**
+         * Emit when the end date changes.
+         */
+        this.endDateChange = output({
+            alias: 'ngpDateRangePickerEndDateChange',
+        });
+        /**
+         * The focused value.
+         */
+        this.focusedDate = input(this.dateAdapter.now(), {
+            alias: 'ngpDateRangePickerFocusedDate',
+        });
+        /**
+         * Emit when the focused date changes.
+         */
+        this.focusedDateChange = output({
+            alias: 'ngpDateRangePickerFocusedDateChange',
+        });
+        /**
+         * Detect the label element.
+         * @internal
+         */
+        this.label = contentChild(NgpDatePickerLabelToken, { descendants: true });
+        /**
+         * Access all the date picker buttons
+         */
+        this.buttons = signal([]);
+        /**
+         * The date range picker state.
+         */
+        this.state = dateRangePickerState(this);
+    }
+    /**
+     * Set the focused date.
+     * @param date The date to focus.
+     * @internal
+     */
+    setFocusedDate(date, origin = 'mouse', direction) {
+        if (this.state.disabled()) {
+            return;
+        }
+        const min = this.state.min();
+        const max = this.state.max();
+        if (min && this.dateAdapter.isBefore(date, min)) {
+            date = min;
+        }
+        if (max && this.dateAdapter.isAfter(date, max)) {
+            date = max;
+        }
+        // if the date is disabled, find the next available date in the specified direction.
+        if (this.state.dateDisabled()(date)) {
+            let nextDate = this.dateAdapter.add(date, { days: direction === 'forward' ? 1 : -1 });
+            while (this.state.dateDisabled()(nextDate) ||
+                (min && this.dateAdapter.isBefore(nextDate, min)) ||
+                (max && this.dateAdapter.isAfter(nextDate, max))) {
+                nextDate = this.dateAdapter.add(nextDate, { days: direction === 'forward' ? 1 : -1 });
+            }
+            date = nextDate;
+        }
+        this.state.focusedDate.set(date);
+        this.focusedDateChange.emit(date);
+        if (origin === 'keyboard') {
+            afterNextRender({
+                write: () => this.buttons().forEach(button => button.focus()),
+            }, {
+                injector: this.injector,
+            });
+        }
+    }
+    /**
+     * Register a date button.
+     * @param button The date button to register.
+     * @internal
+     */
+    registerButton(button) {
+        this.buttons.update(buttons => [...buttons, button]);
+    }
+    /**
+     * Unregister a date button.
+     * @param button The date button to unregister.
+     * @internal
+     */
+    unregisterButton(button) {
+        this.buttons.update(buttons => buttons.filter(b => b !== button));
+    }
+    /**
+     * Select a date.
+     * @param date The date to select.
+     * @internal
+     */
+    /**
+     * Handles the selection of a date within the date range picker.
+     *
+     * Selection logic:
+     * - If neither a start date nor an end date is selected:
+     *   - Sets the selected date as the start date.
+     * - If a start date is selected but no end date:
+     *   - If the selected date is after the start date, sets it as the end date.
+     *   - If the selected date is before or equal to the start date, resets the start date to the selected date.
+     * - If both start and end dates are already selected:
+     *   - Resets the selection, setting the selected date as the new start date and clearing the end date.
+     *
+     * @param date The date to select.
+     */
+    select(date) {
+        const start = this.state.startDate();
+        const end = this.state.endDate();
+        if (!start && !end) {
+            this.state.startDate.set(date);
+            this.startDateChange.emit(date);
+            return;
+        }
+        if (start && !end) {
+            if (this.dateAdapter.isAfter(date, start)) {
+                this.state.endDate.set(date);
+                this.endDateChange.emit(date);
+            }
+            else {
+                this.state.startDate.set(date);
+                this.startDateChange.emit(date);
+            }
+            return;
+        }
+        // If both start and end are selected, reset selection
+        this.state.startDate.set(date);
+        this.startDateChange.emit(date);
+        this.state.endDate.set(undefined);
+        this.endDateChange.emit(undefined);
+    }
+    /**
+     * Determine if a date is selected. A date is selected if it is either the start date or the end date.
+     * @param date The date to check.
+     * @returns True if the date is selected, false otherwise.
+     * @internal
+     */
+    isSelected(date) {
+        const start = this.state.startDate();
+        const end = this.state.endDate();
+        if (!start && !end) {
+            return false;
+        }
+        const isStartSelected = start ? this.dateAdapter.isSameDay(date, start) : false;
+        const isEndSelected = end ? this.dateAdapter.isSameDay(date, end) : false;
+        return isStartSelected || isEndSelected;
+    }
+    /**
+     * Determine if a date is the start of a range.
+     * @param date The date to check.
+     * @returns Always false.
+     * @internal
+     */
+    isStartOfRange(date) {
+        const start = this.state.startDate();
+        return start ? this.dateAdapter.isSameDay(date, start) : false;
+    }
+    /**
+     * Determine if a date is the end of a range.
+     * @param date The date to check.
+     * @returns Always false.
+     * @internal
+     */
+    isEndOfRange(date) {
+        const end = this.state.endDate();
+        return end ? this.dateAdapter.isSameDay(date, end) : false;
+    }
+    /**
+     * Determine if a date is between the start and end dates.
+     * @param date The date to check.
+     * @returns True if the date is between the start and end dates, false otherwise.
+     * @internal
+     */
+    isBetweenRange(date) {
+        const start = this.state.startDate();
+        const end = this.state.endDate();
+        if (!start || !end) {
+            return false;
+        }
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpDateRangePicker, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpDateRangePicker]',
+                    exportAs: 'ngpDateRangePicker',
+                    providers: [provideDateRangePickerState()],
                     host: {
                         '[attr.data-disabled]': 'state.disabled() ? "" : null',
                     },
@@ -929,5 +1236,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, NgpDatePickerToken, injectDatePicker, injectDatePickerCellDate, injectDatePickerCellRender, injectDatePickerDateButton, injectDatePickerLabel, injectDatePickerRowRender, injectDatePickerState, injectDatePickerWeek, provideDatePickerState };
+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 };
 //# sourceMappingURL=ng-primitives-date-picker.mjs.map