ngx-kit 6.1.0 → 6.3.0

package/time-picker/README.md

@@ -1,95 +1,95 @@
-# ngx-kit/time-picker
-
-An analog clock time picker (MUI-style), usable either inline or as a popup attached to a text input, with 12h/24h format support and a configurable minute step.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-## Setup (optional)
-
-```ts
-// app.config.ts
-import { provideTimePicker } from 'ngx-kit/time-picker';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideTimePicker({
-      format: '24',
-      minuteStep: 5,
-      confirmButtonText: 'Done',
-    }),
-  ],
-};
-```
-
-`provideTimePicker` only needs the fields you want to override — everything else falls back to the defaults (`confirmButtonText: 'Ok'`, `cancelButtonText: 'Cancel'`, `amText: 'AM'`, `pmText: 'PM'`, `format: '12'`, `minuteStep: 1`, `autoSwitchToMinute: true`).
-
-## Usage — popup attached to an input
-
-```html
-<input
-  type="text"
-  formControlName="time"
-  ngxInputTimePicker
-  #dp="ngxInputTimePicker"
-/>
-<button (click)="dp.toggle()">Open</button>
-```
-
-`[ngxInputTimePicker]` is a full `ControlValueAccessor` + `Validator`, so it works with `ngModel`/`formControl`/`formControlName`. The value is always a string in `HH:MM` (24h) form, e.g. `'14:35'`.
-
-If the typed text isn't a valid time, the control gets a `{ invalid: true }` error (in addition to whatever built-in validators like `Validators.required` you add yourself):
-
-```html
-@if (form.get('time')?.hasError('invalid')) {
-  <div class="text-danger">Invalid time</div>
-}
-@if (form.get('time')?.hasError('required')) {
-  <div class="text-danger">Time is required</div>
-}
-```
-
-## Usage — inline (always visible)
-
-```html
-<ngx-time-picker format="24" [(value)]="time" (change)="onTimeChange($event)"></ngx-time-picker>
-```
-
-## API
-
-### `[ngxInputTimePicker]`
-
-| Input | Type | Default | Description |
-| --- | --- | --- | --- |
-| `openOnCLick` | `boolean` | `true` | Open the popup when the input itself is clicked |
-| `format` | `'12' \| '24'` | from config | |
-
-| Output | Type | Description |
-| --- | --- | --- |
-| `change` | `EventEmitter<string \| null>` | Emitted when the user confirms a time |
-
-| Member | Description |
-| --- | --- |
-| `toggle()` | Opens the popup if closed, closes it if open |
-
-### `<ngx-time-picker>`
-
-| Input | Type | Default | Description |
-| --- | --- | --- | --- |
-| `value` (model, two-way) | `string` | `'12:00'` | Bind with `[(value)]` |
-| `format` | `'12' \| '24'` | from config | |
-| `minuteStep` | `number` | from config | |
-| `disabled` | `boolean` | `false` | |
-| `autoSwitchToMinute` | `boolean` | from config | Switch to minute-selection mode right after picking the hour |
-
-| Output | Type | Description |
-| --- | --- | --- |
-| `change` | `EventEmitter<string \| null>` | Emitted when "OK" is pressed |
-| `cancel` | `EventEmitter<void>` | Emitted when "Cancel" is pressed |
-
-## Dark mode and RTL
-
-Supported automatically.
+# ngx-kit/time-picker
+
+An analog clock time picker (MUI-style), usable either inline or as a popup attached to a text input, with 12h/24h format support and a configurable minute step.
+
+## Install
+
+```bash
+npm install ngx-kit
+```
+
+## Setup (optional)
+
+```ts
+// app.config.ts
+import { provideTimePicker } from 'ngx-kit/time-picker';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTimePicker({
+      format: '24',
+      minuteStep: 5,
+      confirmButtonText: 'Done',
+    }),
+  ],
+};
+```
+
+`provideTimePicker` only needs the fields you want to override — everything else falls back to the defaults (`confirmButtonText: 'Ok'`, `cancelButtonText: 'Cancel'`, `amText: 'AM'`, `pmText: 'PM'`, `format: '12'`, `minuteStep: 1`, `autoSwitchToMinute: true`).
+
+## Usage — popup attached to an input
+
+```html
+<input
+  type="text"
+  formControlName="time"
+  ngxInputTimePicker
+  #dp="ngxInputTimePicker"
+/>
+<button (click)="dp.toggle()">Open</button>
+```
+
+`[ngxInputTimePicker]` is a full `ControlValueAccessor` + `Validator`, so it works with `ngModel`/`formControl`/`formControlName`. The value is always a string in `HH:MM` (24h) form, e.g. `'14:35'`.
+
+If the typed text isn't a valid time, the control gets a `{ invalid: true }` error (in addition to whatever built-in validators like `Validators.required` you add yourself):
+
+```html
+@if (form.get('time')?.hasError('invalid')) {
+  <div class="text-danger">Invalid time</div>
+}
+@if (form.get('time')?.hasError('required')) {
+  <div class="text-danger">Time is required</div>
+}
+```
+
+## Usage — inline (always visible)
+
+```html
+<ngx-time-picker format="24" [(value)]="time" (change)="onTimeChange($event)"></ngx-time-picker>
+```
+
+## API
+
+### `[ngxInputTimePicker]`
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `openOnCLick` | `boolean` | `true` | Open the popup when the input itself is clicked |
+| `format` | `'12' \| '24'` | from config | |
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `change` | `EventEmitter<string \| null>` | Emitted when the user confirms a time |
+
+| Member | Description |
+| --- | --- |
+| `toggle()` | Opens the popup if closed, closes it if open |
+
+### `<ngx-time-picker>`
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` (model, two-way) | `string` | `'12:00'` | Bind with `[(value)]` |
+| `format` | `'12' \| '24'` | from config | |
+| `minuteStep` | `number` | from config | |
+| `disabled` | `boolean` | `false` | |
+| `autoSwitchToMinute` | `boolean` | from config | Switch to minute-selection mode right after picking the hour |
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `change` | `EventEmitter<string \| null>` | Emitted when "OK" is pressed |
+| `cancel` | `EventEmitter<void>` | Emitted when "Cancel" is pressed |
+
+## Dark mode and RTL
+
+Supported automatically.

package/types/ngx-kit-date-picker.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, InjectionToken, Type, EventEmitter, ElementRef, OnInit, AfterViewInit, Provider } from '@angular/core';
+import { TemplateRef, InjectionToken, Type, EventEmitter, ElementRef, OnInit, Provider, ViewContainerRef, Renderer2 } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import * as ngx_kit_date_picker from 'ngx-kit/date-picker';
-import { BrowserService } from 'ngx-kit/shared';
+import { OverlayService } from 'ngx-kit/shared';
 
 declare class NgxDatePickerConfig {
     previousButtonTemplate?: TemplateRef<any>;
@@ -10,8 +10,6 @@ declare class NgxDatePickerConfig {
     caretDownIconTemplate?: TemplateRef<any>;
     todayButton: boolean;
     clearButton: boolean;
-    clearButtonText: string;
-    todayButtonText: string;
 }
 
 declare type DatePickerView = 'year' | 'month' | 'day';
@@ -35,7 +33,13 @@ interface IDateAdapter {
     get narrowDays(): string[];
     get shortDays(): string[];
     get longDays(): string[];
+    /** Display index used by existing month-grid APIs. */
     startOfWeek: number;
+    /** Native JavaScript weekday (0=Sunday ... 6=Saturday) where a week starts. */
+    weekStartDay: number;
+    /** Returns the real Gregorian Date at the start/end of the locale week. */
+    getStartOfWeek(date: Date): Date;
+    getEndOfWeek(date: Date): Date;
     /** convert js date to locale */
     toLocale(date: Date): CalendarDate;
     /** get today of localy */
@@ -92,7 +96,6 @@ declare class DateAdapterRegistry {
 declare class NgxInputDatePicker implements ControlValueAccessor, Validator {
     private el;
     protected readonly dateAdapterRegistry: DateAdapterRegistry;
-    theme: 'light' | 'dark' | 'auto';
     openOnCLick: i0.InputSignal<boolean>;
     change: EventEmitter<Date>;
     private value?;
@@ -137,13 +140,34 @@ declare class NgxInputDatePicker implements ControlValueAccessor, Validator {
     /** Formats a value and sets it on the input element. */
     protected _formatValue(value: Date | null, setChange?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxInputDatePicker, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxInputDatePicker, "[ngxInputDatePicker]", ["ngxInputDatePicker"], { "theme": { "alias": "theme"; "required": false; }; "openOnCLick": { "alias": "openOnCLick"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "setMin": { "alias": "min"; "required": false; }; "setMax": { "alias": "max"; "required": false; }; "setConfig": { "alias": "config"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxInputDatePicker, "[ngxInputDatePicker]", ["ngxInputDatePicker"], { "openOnCLick": { "alias": "openOnCLick"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "setMin": { "alias": "min"; "required": false; }; "setMax": { "alias": "max"; "required": false; }; "setConfig": { "alias": "config"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }
 
-declare class MsEvents<DateInput = Date> {
+/**
+ * Calendar event model.
+ *
+ * `end` is inclusive for day based calendar rendering.
+ * `color` is used as the event accent color and can be overridden by
+ * `backgroundColor`, `borderColor` and `textColor`.
+ */
+interface MsEvents<DateInput = Date> {
+    id?: string | number;
     title?: string;
     start: DateInput;
     end?: DateInput;
+    allDay?: boolean;
+    color?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    className?: string | string[];
+    data?: unknown;
+}
+interface MsEventViewer<DateInput = Date> extends MsEvents<DateInput> {
+    continuesBefore?: boolean;
+    continuesAfter?: boolean;
+    isStart?: boolean;
+    isEnd?: boolean;
 }
 
 declare class DateModel<InputDate = Date> {
@@ -161,13 +185,45 @@ declare class DateViewMonth extends DateModel {
 }
 declare class DateViewDay extends DateModel {
     day: number;
-    events?: MsEvents[];
+    events?: MsEventViewer[];
+    inRange?: boolean;
+    rangeStart?: boolean;
+    rangeEnd?: boolean;
+    inRangePreview?: boolean;
 }
 declare class DateViewWeek extends DateModel {
     time: number;
     weeks: string[];
     displayTime: string;
 }
+interface CalendarMonthEventSegment extends MsEventViewer {
+    start: Date;
+    end: Date;
+    row: number;
+    startColumn: number;
+    endColumn: number;
+    lane: number;
+    continuesBefore: boolean;
+    continuesAfter: boolean;
+    isStart: boolean;
+    isEnd: boolean;
+}
+interface CalendarDayColumn {
+    date: Date;
+    label: string;
+    dayNumber: string;
+    isToday: boolean;
+    events: CalendarTimedEvent[];
+}
+interface CalendarTimedEvent extends MsEventViewer {
+    start: Date;
+    end: Date;
+    top: number;
+    height: number;
+    allDay: boolean;
+    column: number;
+    columnCount: number;
+}
 
 declare abstract class NgxDatePickerBase {
     protected _locale: string;
@@ -185,16 +241,30 @@ declare abstract class NgxDatePickerBase {
     displayMonth: string;
     minDate: Date | null;
     maxDate: Date | null;
-    renderCalendar(view: CalendarView | DatePickerView, selected?: CalendarDate, events?: MsEvents[], callback?: Function): void;
+    renderCalendar(view: CalendarView, selected?: CalendarDate, events?: MsEvents[], callback?: Function): void;
+    renderِDatePicker(view: DatePickerView, selected?: CalendarDate, events?: MsEvents[], callback?: Function): void;
     renderYear(): void;
     renderMonth(): void;
-    /** only in calendar view */
-    renderWeek(): void;
-    renderDay(selected?: CalendarDate, _events?: MsEvents[]): void;
+    renderWeek(anchorDate?: Date): void;
+    /** Returns the seven real dates belonging to the locale's week. */
+    getWeekDates(anchor: Date): Date[];
+    getEventsForDate(date: Date, events?: MsEvents[]): MsEventViewer[];
+    protected normalizeEvent(event: MsEvents): {
+        event: MsEvents;
+        start: Date;
+        end: Date;
+    };
+    /**
+     * Renders a 6-row month grid and attaches events to every visible day.
+     *
+     * The event list is normalized to MsEventViewer so the template can draw
+     * continuation edges similar to FullCalendar's month view.
+     */
+    renderDay(selected?: CalendarDate, events?: MsEvents[]): void;
     checkActiveDate(date: Date): boolean;
     checkActiveMonth(year: number, month: number): boolean;
     checkActiveYear(year: number): boolean;
-    private getEvents;
+    protected getEvents(date: Date, events?: MsEvents[]): MsEventViewer[];
 }
 
 interface ISelectedEvent {
@@ -202,48 +272,140 @@ interface ISelectedEvent {
     event: MsEvents;
 }
 
-declare class NgxCalendarComponent extends NgxDatePickerBase implements OnInit, AfterViewInit {
-    protected readonly browserService: BrowserService;
-    theme: 'light' | 'dark';
-    set setTheme(val: 'light' | 'dark' | 'auto');
+type CalendarEventInteractionType = 'move' | 'resize-start' | 'resize-end';
+interface CalendarEventChange {
+    event: MsEvents;
+    previousEvent: MsEvents;
+    interaction: CalendarEventInteractionType;
+    deltaDays: number;
+    deltaMinutes: number;
+}
+
+declare class NgxCalendarLocalization {
+    clear: string;
+    today: string;
+    /** Range picker labels. */
+    rangeStart: string;
+    rangeEnd: string;
+    day: string;
+    month: string;
+    week: string;
+    year: string;
+    event: string;
+}
+
+interface EventInteractionState {
+    type: CalendarEventInteractionType;
+    source: MsEvents;
+    previousEvent: MsEvents;
+    pointerId: number;
+    startX: number;
+    startY: number;
+    originColumn: number;
+    originRow: number;
+    preview: MsEvents;
+    deltaDays: number;
+    deltaMinutes: number;
+    active: boolean;
+    surface: 'month' | 'timed' | 'all-day';
+}
+declare class NgxCalendarComponent extends NgxDatePickerBase implements OnInit {
+    defaultLocalization: NgxCalendarLocalization;
+    localize: i0.InputSignal<NgxCalendarLocalization>;
+    resizeAndMovable: i0.InputSignal<boolean>;
     _config: NgxDatePickerConfig;
     set config(val: NgxDatePickerConfig);
     set locale(val: string);
-    /** The minimum valid date. */
     set setMin(value: Date | null | undefined);
-    /** The maximum valid date. */
     set setMax(value: Date | null | undefined);
     view: CalendarView;
-    _events: MsEvents[];
+    private _events;
     set events(val: MsEvents[]);
+    get events(): MsEvents[];
     dateChange: EventEmitter<DateViewDay>;
     selectEvent: EventEmitter<ISelectedEvent>;
-    defaultHeight: number;
-    minHeight: number;
+    eventChange: EventEmitter<CalendarEventChange>;
+    eventsChange: EventEmitter<MsEvents<Date>[]>;
     selected?: Date;
+    anchorDate: Date;
+    eventViewItems: {
+        event: MsEventViewer;
+        start: Date;
+        end: Date;
+    }[];
+    monthEventSegments: CalendarMonthEventSegment[];
+    monthEventRows: CalendarMonthEventSegment[][];
+    weekDays: CalendarDayColumn[];
+    allDayByColumn: CalendarTimedEvent[][];
+    timeSlots: number[];
+    readonly hourHeight = 64;
+    readonly timeColumnWidth = 64;
     calendarWrapper: i0.Signal<ElementRef<HTMLElement> | undefined>;
+    protected interaction: EventInteractionState | null;
     constructor();
     ngOnInit(): void;
-    ngAfterViewInit(): void;
-    onResize(ev: Event): void;
+    onResize(): void;
+    onDocumentPointerMove(event: PointerEvent): void;
+    onDocumentPointerUp(event: PointerEvent): void;
+    onDocumentPointerCancel(event: PointerEvent): void;
     calcCellSize(): void;
     renderCalendar(view: CalendarView): void;
+    private get renderEvents();
+    private syncAnchorToLocale;
+    private renderTimedView;
+    /**
+     * Builds a collision layout per overlap cluster. Each cluster gets its own
+     * column count, which prevents a short 09:00 event from being unnecessarily
+     * squeezed because another event overlaps at 15:00.
+     */
+    private buildTimedEventsForDay;
+    private buildAllDayEventsForDay;
+    /** Creates FullCalendar-style horizontal segments for the six visible month rows. */
+    private buildMonthEventSegments;
+    private dayIndexInMonthGrid;
+    private normalizedEvents;
+    private renderEventSources;
+    private renderEventView;
+    get headerText(): string;
+    formatDateRange(start: Date, end: Date): string;
+    formatEventDate(date: Date): string;
+    formatTime(minutes: number): string;
     changeView(v: CalendarView): void;
     gotoToday(): void;
     selectDay(ev: Event, item: DateViewDay): void;
-    selectMonth(ev: Event, item: DateViewMonth): void;
-    selectYear(ev: Event, item: DateViewYear): void;
     next(): void;
     previous(): void;
-    onclickEvent(item: DateViewDay, event: MsEvents): void;
+    private navigate;
+    onclickEvent(ev: Event, item: DateViewDay, event: MsEvents): void;
+    onTimedEventClick(ev: Event, event: MsEvents, date: Date): void;
+    startMonthEventInteraction(ev: PointerEvent, segment: CalendarMonthEventSegment, type?: CalendarEventInteractionType): void;
+    startTimedEventInteraction(ev: PointerEvent, event: CalendarTimedEvent, type?: CalendarEventInteractionType): void;
+    private beginInteraction;
+    private updateEventInteraction;
+    private finishEventInteraction;
+    private cancelEventInteraction;
+    private monthPointerDelta;
+    private allDayPointerDelta;
+    private timedPointerDelta;
+    private columnAtPoint;
+    private snapMinutes;
+    private applyEventDelta;
+    private addDays;
+    private addMinutes;
+    private isWithinBounds;
+    private sameEvent;
+    private sameEventValue;
+    private startOfDay;
+    private endOfDay;
+    private readonly defaultHeight;
+    minHeight: number;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxCalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxCalendarComponent, "ngx-calendar", never, { "setTheme": { "alias": "theme"; "required": false; }; "config": { "alias": "config"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "setMin": { "alias": "min"; "required": false; }; "setMax": { "alias": "max"; "required": false; }; "view": { "alias": "view"; "required": false; }; "events": { "alias": "events"; "required": false; }; }, { "dateChange": "dateChange"; "selectEvent": "selectEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxCalendarComponent, "ngx-calendar", never, { "localize": { "alias": "localize"; "required": false; "isSignal": true; }; "resizeAndMovable": { "alias": "resizeAndMovable"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "setMin": { "alias": "min"; "required": false; }; "setMax": { "alias": "max"; "required": false; }; "view": { "alias": "view"; "required": false; }; "events": { "alias": "events"; "required": false; }; }, { "dateChange": "dateChange"; "selectEvent": "selectEvent"; "eventChange": "eventChange"; "eventsChange": "eventsChange"; }, never, never, true, never>;
 }
 
 declare class NgxInputDatePickerComponent extends NgxDatePickerBase implements ControlValueAccessor, Validator, OnInit {
-    protected readonly browserService: BrowserService;
-    theme: 'light' | 'dark';
-    set setTheme(val: 'light' | 'dark' | 'auto');
+    defaultLocalization: NgxCalendarLocalization;
+    localize: i0.InputSignal<NgxCalendarLocalization>;
     config: NgxDatePickerConfig;
     set setConfig(val: NgxDatePickerConfig);
     set locale(val: string);
@@ -253,7 +415,6 @@ declare class NgxInputDatePickerComponent extends NgxDatePickerBase implements C
     set setMax(value: Date | null | undefined);
     view: DatePickerView;
     change: EventEmitter<Date | null>;
-    wrapperWidth: number;
     selected?: CalendarDate;
     calendarHeader: string;
     isDisabled: boolean;
@@ -274,7 +435,7 @@ declare class NgxInputDatePickerComponent extends NgxDatePickerBase implements C
     registerOnTouched(fn: any): void;
     registerOnValidatorChange?(fn: () => void): void;
     setDisabledState(disabled: boolean): void;
-    renderCalendar(view: 'year' | 'month' | 'day'): void;
+    renderِDatePicker(view: DatePickerView): void;
     gotoToday(): void;
     changeView(v: DatePickerView): void;
     next(): void;
@@ -285,10 +446,116 @@ declare class NgxInputDatePickerComponent extends NgxDatePickerBase implements C
     clear(): void;
     stopPagination(ev: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxInputDatePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxInputDatePickerComponent, "ngx-date-picker", never, { "setTheme": { "alias": "theme"; "required": false; }; "setConfig": { "alias": "config"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "setMin": { "alias": "min"; "required": false; }; "setMax": { "alias": "max"; "required": false; }; "view": { "alias": "view"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxInputDatePickerComponent, "ngx-date-picker", never, { "localize": { "alias": "localize"; "required": false; "isSignal": true; }; "setConfig": { "alias": "config"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "setMin": { "alias": "min"; "required": false; }; "setMax": { "alias": "max"; "required": false; }; "view": { "alias": "view"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }
 
 declare function provideDateAdapters(...additional: DateAdapterRegistration[]): Provider[];
 
-export { DATE_ADAPTERS, DEFAULT_DATE_ADAPTERS, NgxCalendarComponent, NgxDatePickerConfig, NgxInputDatePicker, NgxInputDatePickerComponent, getLocals, provideDateAdapters };
-export type { CalendarDate, DateAdapterRegistration, IDateAdapter };
+/**
+ * A date range used by ngx-kit date range picker.
+ *
+ * `end` is null while the user is selecting the second date.
+ */
+interface NgxDateRange<T = Date> {
+    start: T | null;
+    end: T | null;
+}
+declare function createDateRange<T = Date>(start?: T | null, end?: T | null): NgxDateRange<T>;
+
+declare function normalizeDateRange(value: NgxDateRange<Date> | readonly [Date | null, Date | null] | null | undefined): NgxDateRange<Date>;
+declare function isCompleteDateRange(range: NgxDateRange<Date>): boolean;
+declare function isDateInRange(date: Date, range: NgxDateRange<Date>): boolean;
+declare function isDateInPreviewRange(date: Date, start: Date | null, previewEnd: Date | null): boolean;
+
+declare class NgxDateRangePickerComponent extends NgxDatePickerBase implements ControlValueAccessor, Validator, OnInit {
+    defaultLocalization: NgxCalendarLocalization;
+    localize: i0.InputSignal<NgxCalendarLocalization>;
+    config: NgxDatePickerConfig;
+    set locale(value: string);
+    set min(value: Date | null | undefined);
+    set max(value: Date | null | undefined);
+    view: DatePickerView;
+    rangeChange: EventEmitter<NgxDateRange<Date>>;
+    change: EventEmitter<NgxDateRange<Date>>;
+    range: NgxDateRange<Date>;
+    hoverDate: Date | null;
+    weekDays: {
+        min: string;
+        name: string;
+    }[];
+    calendarHeader: string;
+    protected _onChange: (_value: NgxDateRange<Date>) => void;
+    protected _onTouched: () => void;
+    protected _validatorOnChange: () => void;
+    isDisabled: boolean;
+    ngOnInit(): void;
+    updateConfig(value: NgxDatePickerConfig): void;
+    writeValue(value: NgxDateRange<Date> | readonly [Date | null, Date | null] | null): void;
+    registerOnChange(fn: (value: NgxDateRange<Date>) => void): void;
+    registerOnTouched(fn: () => void): void;
+    registerOnValidatorChange(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    validate(_control: AbstractControl): ValidationErrors | null;
+    renderِDatePicker(view: DatePickerView): void;
+    private init;
+    changeView(view: DatePickerView): void;
+    gotoToday(): void;
+    next(): void;
+    previous(): void;
+    selectDay(event: Event, item: DateViewDay): void;
+    selectMonth(event: Event, item: DateViewMonth): void;
+    selectYear(event: Event, item: DateViewYear): void;
+    onDayEnter(item: DateViewDay): void;
+    onDayLeave(): void;
+    clear(): void;
+    private applyRangeState;
+    private emitValue;
+    stopPagination(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDateRangePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxDateRangePickerComponent, "ngx-date-range-picker", never, { "localize": { "alias": "localize"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "view": { "alias": "view"; "required": false; }; }, { "rangeChange": "rangeChange"; "change": "change"; }, never, never, true, never>;
+}
+
+declare class NgxInputDateRangePicker implements ControlValueAccessor, Validator {
+    private readonly el;
+    protected readonly dateAdapterRegistry: DateAdapterRegistry;
+    protected readonly overlayService: OverlayService;
+    protected readonly viewContainerRef: ViewContainerRef;
+    protected readonly renderer: Renderer2;
+    openOnClick: boolean;
+    displayFormat: string;
+    rangeSeparator: string;
+    private _locale;
+    set locale(value: string);
+    get locale(): string;
+    set setMin(value: Date | null | undefined);
+    set setMax(value: Date | null | undefined);
+    config: NgxDatePickerConfig;
+    change: EventEmitter<NgxDateRange<Date>>;
+    private min;
+    private max;
+    private value;
+    private pickerRef?;
+    private isDisabled;
+    private adapter;
+    private _onChange;
+    private _onTouched;
+    private _validatorOnChange;
+    constructor(el: ElementRef<HTMLInputElement>);
+    ngOnChanges(): void;
+    onClick(event: Event): void;
+    onBlur(): void;
+    writeValue(value: NgxDateRange<Date> | readonly [Date | null, Date | null] | null): void;
+    registerOnChange(fn: (value: NgxDateRange<Date>) => void): void;
+    registerOnTouched(fn: () => void): void;
+    registerOnValidatorChange(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    toggle(): void;
+    validate(_control: AbstractControl): ValidationErrors | null;
+    private formatValue;
+    private destroyDatePicker;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxInputDateRangePicker, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxInputDateRangePicker, "input[ngxInputDateRangePicker]", ["ngxInputDateRangePicker"], { "openOnClick": { "alias": "openOnClick"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "rangeSeparator": { "alias": "rangeSeparator"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "setMin": { "alias": "min"; "required": false; }; "setMax": { "alias": "max"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}
+
+export { DATE_ADAPTERS, DEFAULT_DATE_ADAPTERS, DateModel, DateViewDay, DateViewMonth, DateViewWeek, DateViewYear, NgxCalendarComponent, NgxDatePickerConfig, NgxDateRangePickerComponent, NgxInputDatePicker, NgxInputDatePickerComponent, NgxInputDateRangePicker, createDateRange, getLocals, isCompleteDateRange, isDateInPreviewRange, isDateInRange, normalizeDateRange, provideDateAdapters };
+export type { CalendarDate, CalendarDayColumn, CalendarEventChange, CalendarEventInteractionType, CalendarMonthEventSegment, CalendarTimedEvent, DateAdapterRegistration, IDateAdapter, MsEventViewer, MsEvents, NgxDateRange };