ngx-datex 1.0.0

package/types/ngx-datex.d.ts

@@ -0,0 +1,2161 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, OnInit, OnDestroy, ElementRef, Signal, OutputEmitterRef, ViewContainerRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { OverlayRef } from '@angular/cdk/overlay';
+
+/**
+ * Represents a date range value with start and end dates.
+ *
+ * @example
+ * ```typescript
+ * const dateValue: NgxDatexValue = {
+ *   startDate: new Date('2024-01-01'),
+ *   endDate: new Date('2024-01-31'),
+ *   label: 'January 2024'
+ * };
+ * ```
+ */
+interface NgxDatexValue {
+    /** The start date of the range. Always required. */
+    startDate: Date;
+    /** The end date of the range. Null for single date picker or incomplete selection. */
+    endDate: Date | null;
+    /** Optional label describing the date range (e.g., "Last 7 days"). */
+    label?: string;
+}
+/**
+ * Predefined date ranges configuration.
+ * Maps range labels to start and end date tuples.
+ *
+ * @example
+ * ```typescript
+ * const ranges: NgxDatexRange = {
+ *   'Today': [startOfDay(new Date()), endOfDay(new Date())],
+ *   'Last 7 days': [startOfDay(subDays(new Date(), 6)), endOfDay(new Date())]
+ * };
+ * ```
+ */
+interface NgxDatexRange {
+    /** Range label mapped to [startDate, endDate] tuple */
+    [key: string]: [Date, Date];
+}
+/**
+ * Complete theme configuration for the date picker.
+ * Defines colors, typography, spacing, borders, and shadows.
+ *
+ * @example
+ * ```typescript
+ * const customTheme: NgxDatexTheme = {
+ *   name: 'custom-dark',
+ *   colors: {
+ *     primary: '#bb86fc',
+ *     background: '#121212',
+ *     // ... other colors
+ *   },
+ *   // ... other theme properties
+ * };
+ * ```
+ */
+interface NgxDatexTheme {
+    /** Unique theme identifier */
+    name: string;
+    /** Color palette configuration */
+    colors: {
+        /** Primary brand color used for selections and highlights */
+        primary: string;
+        /** Secondary color for less prominent elements */
+        secondary: string;
+        /** Accent color for interactive elements */
+        accent: string;
+        /** Main background color */
+        background: string;
+        /** Surface color for cards and overlays */
+        surface: string;
+        /** Primary text color */
+        text: string;
+        /** Secondary text color for less important content */
+        textSecondary: string;
+        /** Border color for inputs and dividers */
+        border: string;
+        /** Hover state color */
+        hover: string;
+        /** Selected state background color */
+        selected: string;
+        /** Text color on selected backgrounds */
+        selectedText: string;
+        /** Disabled state color */
+        disabled: string;
+        /** Error state color */
+        error: string;
+        /** Success state color */
+        success: string;
+        /** Warning state color */
+        warning: string;
+    };
+    /** Typography configuration */
+    typography: {
+        /** Font family stack */
+        fontFamily: string;
+        /** Base font size */
+        fontSize: string;
+        /** Base font weight */
+        fontWeight: string;
+        /** Base line height */
+        lineHeight: string;
+    };
+    /** Spacing scale configuration */
+    spacing: {
+        /** Extra small spacing (4px) */
+        xs: string;
+        /** Small spacing (8px) */
+        sm: string;
+        /** Medium spacing (16px) */
+        md: string;
+        /** Large spacing (24px) */
+        lg: string;
+        /** Extra large spacing (32px) */
+        xl: string;
+    };
+    /** Border radius configuration */
+    borderRadius: {
+        /** Small border radius */
+        sm: string;
+        /** Medium border radius */
+        md: string;
+        /** Large border radius */
+        lg: string;
+    };
+    /** Box shadow configuration */
+    shadows: {
+        /** Small shadow for subtle elevation */
+        sm: string;
+        /** Medium shadow for cards */
+        md: string;
+        /** Large shadow for modals */
+        lg: string;
+    };
+}
+/**
+ * Configuration options for date picker behavior and validation.
+ *
+ * @example
+ * ```typescript
+ * const config: NgxDatexConfig = {
+ *   dateFormat: 'DD/MM/YYYY',
+ *   firstDayOfWeek: 1, // Monday
+ *   businessDaysOnly: true,
+ *   closeOnSelect: false
+ * };
+ * ```
+ */
+interface NgxDatexConfig {
+    /** Date format string (default: 'DD/MM/YYYY') */
+    dateFormat?: string;
+    /** First day of week (0 = Sunday, 1 = Monday, etc.) */
+    firstDayOfWeek?: number;
+    /** Whether to show week numbers in calendar */
+    showWeekNumbers?: boolean;
+    /** Restrict selection to business days only (Mon-Fri) */
+    businessDaysOnly?: boolean;
+    /** Array of specific dates to disable */
+    disabledDates?: Date[];
+    /** Array of days of week to disable (0 = Sunday, 1 = Monday, etc.) */
+    disabledDaysOfWeek?: number[];
+    /** Whether to close picker immediately after selection */
+    closeOnSelect?: boolean;
+    /** Whether to show clear button */
+    clearable?: boolean;
+    /** Whether to highlight today's date */
+    showToday?: boolean;
+}
+/**
+ * Localization configuration for the date picker.
+ * Controls language, date formats, and UI text.
+ *
+ * @example
+ * ```typescript
+ * const spanishLocale: NgxDatexLocale = {
+ *   direction: 'ltr',
+ *   format: 'DD/MM/YYYY',
+ *   daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+ *   monthNames: ['Enero', 'Febrero', 'Marzo', ...],
+ *   applyLabel: 'Aplicar',
+ *   cancelLabel: 'Cancelar'
+ * };
+ * ```
+ */
+interface NgxDatexLocale {
+    /** Text direction for RTL languages */
+    direction?: 'ltr' | 'rtl';
+    /** Date format string */
+    format?: string;
+    /** Separator between start and end dates */
+    separator?: string;
+    /** Text for apply button */
+    applyLabel?: string;
+    /** Text for cancel button */
+    cancelLabel?: string;
+    /** Week column header label */
+    weekLabel?: string;
+    /** Label for custom range option */
+    customRangeLabel?: string;
+    /** Short day names (7 items, starting with configured first day) */
+    daysOfWeek?: string[];
+    /** Full month names (12 items, January to December) */
+    monthNames?: string[];
+    /** First day of week (0 = Sunday, 1 = Monday, etc.) */
+    firstDay?: number;
+}
+interface NgxDatexTimeValue {
+    hour: number;
+    minute: number;
+    ampm: string;
+}
+interface NgxDatexOverlayPosition {
+    originX: string;
+    originY: string;
+    overlayX: string;
+    overlayY: string;
+}
+interface NgxDatexValidationResult {
+    isValid: boolean;
+    error?: string;
+    errorCode?: string;
+}
+interface NgxDatexInputs {
+    config: NgxDatexConfig;
+    locale: NgxDatexLocale;
+    theme: NgxDatexTheme;
+    appearance: 'fill' | 'outline';
+    floatLabel: 'always' | 'auto';
+    label: string;
+    placeholder: string;
+    calendarIcon: string;
+    showCalendarIcon: boolean;
+    calendarIconPosition: 'prefix' | 'suffix';
+    showCheckbox: boolean;
+    checkboxPosition: 'prefix' | 'suffix';
+    readonly: boolean;
+    disabled: boolean;
+    showHeader: boolean;
+    showFooter: boolean;
+    singleDatePicker: boolean;
+    autoApply: boolean;
+    showDropdowns: boolean;
+    timePicker: boolean;
+    timePicker24Hour: boolean;
+    timePickerIncrement: number;
+    timePickerSeconds: boolean;
+    linkedCalendars: boolean;
+    autoUpdateInput: boolean;
+    alwaysShowCalendars: boolean;
+    showCustomRangeLabel: boolean;
+    startDate: Date | null;
+    endDate: Date | null;
+    minDate: Date | null;
+    maxDate: Date | null;
+    maxSpan: {
+        [key: string]: number;
+    } | null;
+    showWeekNumbers: boolean;
+    showISOWeekNumbers: boolean;
+    buttonClasses: string;
+    applyButtonClasses: string;
+    cancelButtonClasses: string;
+    isInvalidDate: ((date: Date) => boolean) | null;
+    isCustomDate: ((date: Date) => string | string[] | false) | null;
+    minYear: number;
+    maxYear: number;
+    ranges: Record<string, [Date, Date]>;
+    opens: 'left' | 'right' | 'center';
+    drops: 'up' | 'down' | 'auto';
+    headerTemplate: TemplateRef<unknown> | null;
+    footerTemplate: TemplateRef<unknown> | null;
+    dayTemplate: TemplateRef<unknown> | null;
+    ariaLabel: string;
+    ariaDescribedBy: string;
+}
+interface NgxDatexOutputs {
+    dateChange: NgxDatexValue | null;
+    rangeChange: {
+        startDate: Date;
+        endDate: Date | null;
+    };
+    openEvent: void;
+    closeEvent: void;
+    monthChange: Date;
+    yearChange: number;
+    dateHover: Date;
+    validationError: {
+        error: string;
+        errorCode?: string;
+    };
+    checkboxChange: boolean;
+}
+
+/**
+ * NgxDatex - Advanced Angular Date Range Picker Component
+ *
+ * A feature-rich, accessible date picker component that provides both single date
+ * and date range selection capabilities. Built with Angular signals for optimal
+ * performance and modern Angular patterns.
+ *
+ * ## Key Features
+ * - 📅 Single date and date range selection
+ * - ⏰ Optional time picker with 12/24 hour formats
+ * - 🎨 Customizable themes and styling
+ * - 🌍 Full internationalization support
+ * - 📱 Mobile-responsive design
+ * - ♿ WCAG accessibility compliant
+ * - 🔧 Extensive configuration options
+ * - 📋 Angular Forms integration (ControlValueAccessor)
+ *
+ * ## Basic Usage
+ * ```html
+ * <ngx-datex
+ *   [(ngModel)]="selectedRange"
+ *   [locale]="locale"
+ *   [ranges]="predefinedRanges">
+ * </ngx-datex>
+ * ```
+ *
+ * ## Advanced Configuration
+ * ```typescript
+ * // Component
+ * export class MyComponent {
+ *   selectedRange: NgxDatexValue | null = null;
+ *
+ *   customRanges = {
+ *     'Today': [startOfDay(new Date()), endOfDay(new Date())],
+ *     'Last 7 Days': [startOfDay(subDays(new Date(), 6)), endOfDay(new Date())]
+ *   };
+ *
+ *   onDateChange(value: NgxDatexValue | null) {
+ *     console.log('Selected range:', value);
+ *   }
+ * }
+ * ```
+ *
+ * ```html
+ * <!-- Template -->
+ * <ngx-datex
+ *   [singleDatePicker]="false"
+ *   [timePicker]="true"
+ *   [autoApply]="false"
+ *   [showDropdowns]="true"
+ *   [ranges]="customRanges"
+ *   [minDate]="minDate"
+ *   [maxDate]="maxDate"
+ *   (dateChange)="onDateChange($event)"
+ *   (rangeChange)="onRangeChange($event)">
+ * </ngx-datex>
+ * ```
+ *
+ * @see {@link NgxDatexValue} for the value interface
+ * @see {@link NgxDatexConfig} for configuration options
+ * @see {@link NgxDatexLocale} for localization settings
+ * @see {@link NgxDatexTheme} for theming options
+ */
+declare class NgxDatex implements OnInit, OnDestroy, ControlValueAccessor {
+    inputElement: ElementRef<HTMLInputElement>;
+    calendarTemplate: TemplateRef<unknown>;
+    private readonly datexService;
+    private readonly overlayService;
+    private readonly timePickerService;
+    private readonly calendarService;
+    private readonly platformId;
+    private readonly viewContainerRef;
+    /**
+     * General configuration options for the date picker.
+     *
+     * @example
+     * ```typescript
+     * const config: NgxDatexConfig = {
+     *   dateFormat: 'DD/MM/YYYY',
+     *   firstDayOfWeek: 1,
+     *   businessDaysOnly: true
+     * };
+     * ```
+     */
+    config: _angular_core.InputSignal<NgxDatexConfig>;
+    /**
+     * Localization settings for internationalization.
+     * Controls language, date formats, and UI text.
+     *
+     * @default SPANISH_LOCALE
+     *
+     * @example
+     * ```typescript
+     * const frenchLocale: NgxDatexLocale = {
+     *   format: 'DD/MM/YYYY',
+     *   daysOfWeek: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
+     *   applyLabel: 'Appliquer',
+     *   cancelLabel: 'Annuler'
+     * };
+     * ```
+     */
+    locale: _angular_core.InputSignal<NgxDatexLocale>;
+    /**
+     * Theme configuration for styling the date picker.
+     * Defines colors, typography, spacing, and visual appearance.
+     *
+     * @default MATERIAL_LIGHT_THEME
+     *
+     * @example
+     * ```typescript
+     * const darkTheme: NgxDatexTheme = {
+     *   name: 'dark',
+     *   colors: { primary: '#bb86fc', background: '#121212', ... }
+     * };
+     * ```
+     */
+    theme: _angular_core.InputSignal<NgxDatexTheme>;
+    /**
+     * Material form field appearance style.
+     *
+     * @default 'outline'
+     *
+     * @example
+     * ```html
+     * <ngx-datex appearance="fill"></ngx-datex>
+     * <ngx-datex appearance="outline"></ngx-datex>
+     * ```
+     */
+    appearance: _angular_core.InputSignal<"fill" | "outline">;
+    /**
+     * Controls when the form field label should float.
+     *
+     * @default 'auto'
+     *
+     * @example
+     * ```html
+     * <ngx-datex floatLabel="always"></ngx-datex>
+     * <ngx-datex floatLabel="auto"></ngx-datex>
+     * ```
+     */
+    floatLabel: _angular_core.InputSignal<"always" | "auto">;
+    /**
+     * Label text displayed above the input field.
+     *
+     * @default ''
+     *
+     * @example
+     * ```html
+     * <ngx-datex label="Select Date Range"></ngx-datex>
+     * ```
+     */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * Placeholder text shown when no date is selected.
+     *
+     * @default 'Seleccionar fecha'
+     *
+     * @example
+     * ```html
+     * <ngx-datex placeholder="Choose your dates"></ngx-datex>
+     * ```
+     */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Material icon name for the calendar icon.
+     *
+     * @default 'calendar_today'
+     *
+     * @example
+     * ```html
+     * <ngx-datex calendarIcon="event" [showCalendarIcon]="true"></ngx-datex>
+     * ```
+     */
+    calendarIcon: _angular_core.InputSignal<string>;
+    /**
+     * Whether to display the calendar icon.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCalendarIcon]="true"></ngx-datex>
+     * ```
+     */
+    showCalendarIcon: _angular_core.InputSignal<boolean>;
+    /**
+     * Position of the calendar icon relative to the input.
+     *
+     * @default 'suffix'
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCalendarIcon]="true" calendarIconPosition="prefix"></ngx-datex>
+     * ```
+     */
+    calendarIconPosition: _angular_core.InputSignal<"prefix" | "suffix">;
+    /**
+     * Whether to display a checkbox alongside the input.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCheckbox]="true" (checkboxChange)="onCheckboxChange($event)"></ngx-datex>
+     * ```
+     */
+    showCheckbox: _angular_core.InputSignal<boolean>;
+    /**
+     * Position of the checkbox relative to the input.
+     *
+     * @default 'prefix'
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCheckbox]="true" checkboxPosition="suffix"></ngx-datex>
+     * ```
+     */
+    checkboxPosition: _angular_core.InputSignal<"prefix" | "suffix">;
+    /**
+     * Whether the input field is readonly.
+     * When true, users can only interact with the calendar popup.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [readonly]="true"></ngx-datex>
+     * ```
+     */
+    readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the entire component is disabled.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [disabled]="isFormDisabled"></ngx-datex>
+     * ```
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show the calendar header with navigation controls.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showHeader]="false"></ngx-datex>
+     * ```
+     */
+    showHeader: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show the calendar footer with apply/cancel buttons.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showFooter]="false" [autoApply]="true"></ngx-datex>
+     * ```
+     */
+    showFooter: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to use single date selection mode instead of date range selection.
+     * When true, only one date can be selected at a time.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <!-- Single date picker -->
+     * <ngx-datex [singleDatePicker]="true"></ngx-datex>
+     *
+     * <!-- Date range picker (default) -->
+     * <ngx-datex [singleDatePicker]="false"></ngx-datex>
+     * ```
+     */
+    singleDatePicker: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to automatically apply the selection without requiring the Apply button.
+     * When true, selections are applied immediately. Automatically disabled when timePicker is enabled.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <!-- Auto-apply selections -->
+     * <ngx-datex [autoApply]="true"></ngx-datex>
+     *
+     * <!-- Require Apply button -->
+     * <ngx-datex [autoApply]="false" [showFooter]="true"></ngx-datex>
+     * ```
+     */
+    autoApply: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show month and year dropdown selectors in the calendar header.
+     * Allows quick navigation to distant dates.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showDropdowns]="true"></ngx-datex>
+     * ```
+     */
+    showDropdowns: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to enable time selection alongside date selection.
+     * Adds time picker controls to the calendar.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <!-- Date and time picker -->
+     * <ngx-datex [timePicker]="true" [timePicker24Hour]="true"></ngx-datex>
+     *
+     * <!-- Date only picker -->
+     * <ngx-datex [timePicker]="false"></ngx-datex>
+     * ```
+     */
+    timePicker: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to use 24-hour time format instead of 12-hour AM/PM format.
+     * Only applies when timePicker is enabled.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- 24-hour format: 14:30 -->
+     * <ngx-datex [timePicker]="true" [timePicker24Hour]="true"></ngx-datex>
+     *
+     * <!-- 12-hour format: 2:30 PM -->
+     * <ngx-datex [timePicker]="true" [timePicker24Hour]="false"></ngx-datex>
+     * ```
+     */
+    timePicker24Hour: _angular_core.InputSignal<boolean>;
+    /**
+     * The increment step for minute selection in the time picker.
+     * Minutes will be rounded to the nearest increment.
+     *
+     * @default 1
+     *
+     * @example
+     * ```html
+     * <!-- 15-minute increments: 00, 15, 30, 45 -->
+     * <ngx-datex [timePicker]="true" [timePickerIncrement]="15"></ngx-datex>
+     *
+     * <!-- 5-minute increments: 00, 05, 10, 15, 20... -->
+     * <ngx-datex [timePicker]="true" [timePickerIncrement]="5"></ngx-datex>
+     * ```
+     */
+    timePickerIncrement: _angular_core.InputSignal<number>;
+    /**
+     * Whether to show seconds in the time picker.
+     * Only applies when timePicker is enabled.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [timePicker]="true" [timePickerSeconds]="true"></ngx-datex>
+     * ```
+     */
+    timePickerSeconds: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the left and right calendars should be linked for navigation.
+     * When true, navigating one calendar automatically updates the other.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- Linked navigation -->
+     * <ngx-datex [linkedCalendars]="true"></ngx-datex>
+     *
+     * <!-- Independent navigation -->
+     * <ngx-datex [linkedCalendars]="false"></ngx-datex>
+     * ```
+     */
+    linkedCalendars: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to automatically update the input field with the selected value.
+     * When false, the input remains unchanged until manually updated.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- Auto-update input -->
+     * <ngx-datex [autoUpdateInput]="true"></ngx-datex>
+     *
+     * <!-- Manual input updates -->
+     * <ngx-datex [autoUpdateInput]="false"></ngx-datex>
+     * ```
+     */
+    autoUpdateInput: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to always show both calendars even in single date picker mode.
+     * Useful for consistent layout regardless of picker mode.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [singleDatePicker]="true" [alwaysShowCalendars]="true"></ngx-datex>
+     * ```
+     */
+    alwaysShowCalendars: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show the "Custom Range" option in the predefined ranges list.
+     * Only applies when ranges are configured.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- Show custom range option -->
+     * <ngx-datex [ranges]="predefinedRanges" [showCustomRangeLabel]="true"></ngx-datex>
+     *
+     * <!-- Hide custom range option -->
+     * <ngx-datex [ranges]="predefinedRanges" [showCustomRangeLabel]="false"></ngx-datex>
+     * ```
+     */
+    showCustomRangeLabel: _angular_core.InputSignal<boolean>;
+    readonly effectiveAutoApply: Signal<boolean>;
+    /**
+     * The initial start date for the date picker.
+     * If not provided, defaults to today.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * const startDate = new Date('2024-01-01');
+     * ```
+     *
+     * ```html
+     * <ngx-datex [startDate]="startDate" [endDate]="endDate"></ngx-datex>
+     * ```
+     */
+    startDate: _angular_core.InputSignal<Date>;
+    /**
+     * The initial end date for the date picker.
+     * If not provided, defaults to the start date (single date) or today (range).
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * const endDate = new Date('2024-01-31');
+     * ```
+     *
+     * ```html
+     * <ngx-datex [startDate]="startDate" [endDate]="endDate"></ngx-datex>
+     * ```
+     */
+    endDate: _angular_core.InputSignal<Date>;
+    /**
+     * The minimum selectable date.
+     * Users cannot select dates before this date.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * // Restrict to dates from today onwards
+     * const minDate = new Date();
+     * ```
+     *
+     * ```html
+     * <ngx-datex [minDate]="minDate"></ngx-datex>
+     * ```
+     */
+    minDate: _angular_core.InputSignal<Date>;
+    /**
+     * The maximum selectable date.
+     * Users cannot select dates after this date.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * // Restrict to dates within the next year
+     * const maxDate = new Date();
+     * maxDate.setFullYear(maxDate.getFullYear() + 1);
+     * ```
+     *
+     * ```html
+     * <ngx-datex [maxDate]="maxDate"></ngx-datex>
+     * ```
+     */
+    maxDate: _angular_core.InputSignal<Date>;
+    /**
+     * The maximum allowed span between start and end dates.
+     * Prevents users from selecting ranges that exceed the specified duration.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * // Limit to 30 days maximum
+     * const maxSpan = { days: 30 };
+     *
+     * // Limit to 3 months maximum
+     * const maxSpan = { months: 3 };
+     *
+     * // Limit to 1 year maximum
+     * const maxSpan = { years: 1 };
+     * ```
+     *
+     * ```html
+     * <ngx-datex [maxSpan]="maxSpan"></ngx-datex>
+     * ```
+     */
+    maxSpan: _angular_core.InputSignal<{
+        [key: string]: number;
+    }>;
+    /**
+     * Whether to show week numbers in the calendar.
+     * Displays ISO week numbers on the left side of each week row.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showWeekNumbers]="true"></ngx-datex>
+     * ```
+     */
+    showWeekNumbers: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show ISO week numbers instead of standard week numbers.
+     * Only applies when showWeekNumbers is true.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showWeekNumbers]="true" [showISOWeekNumbers]="true"></ngx-datex>
+     * ```
+     */
+    showISOWeekNumbers: _angular_core.InputSignal<boolean>;
+    /**
+     * CSS classes to apply to calendar buttons.
+     * Used for styling navigation and action buttons.
+     *
+     * @default 'btn btn-sm'
+     *
+     * @example
+     * ```html
+     * <ngx-datex buttonClasses="btn btn-outline-primary btn-sm"></ngx-datex>
+     * ```
+     */
+    buttonClasses: _angular_core.InputSignal<string>;
+    /**
+     * CSS classes to apply to the Apply button.
+     * Combined with buttonClasses for the final styling.
+     *
+     * @default 'btn-success'
+     *
+     * @example
+     * ```html
+     * <ngx-datex applyButtonClasses="btn-primary"></ngx-datex>
+     * ```
+     */
+    applyButtonClasses: _angular_core.InputSignal<string>;
+    /**
+     * CSS classes to apply to the Cancel button.
+     * Combined with buttonClasses for the final styling.
+     *
+     * @default 'btn-danger'
+     *
+     * @example
+     * ```html
+     * <ngx-datex cancelButtonClasses="btn-secondary"></ngx-datex>
+     * ```
+     */
+    cancelButtonClasses: _angular_core.InputSignal<string>;
+    /**
+     * Function to determine if a specific date should be disabled.
+     * Return true to disable the date, false to enable it.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * // Disable weekends
+     * const isInvalidDate = (date: Date): boolean => {
+     *   const day = date.getDay();
+     *   return day === 0 || day === 6; // Sunday or Saturday
+     * };
+     *
+     * // Disable specific dates
+     * const blackoutDates = [new Date('2024-12-25'), new Date('2024-01-01')];
+     * const isInvalidDate = (date: Date): boolean => {
+     *   return blackoutDates.some(blackout =>
+     *     date.toDateString() === blackout.toDateString()
+     *   );
+     * };
+     * ```
+     *
+     * ```html
+     * <ngx-datex [isInvalidDate]="isInvalidDate"></ngx-datex>
+     * ```
+     */
+    isInvalidDate: _angular_core.InputSignal<(date: Date) => boolean>;
+    /**
+     * Function to apply custom CSS classes to specific dates.
+     * Return a string or array of strings for CSS classes, or false for no custom styling.
+     *
+     * @default null
+     *
+     * @example
+     * ```typescript
+     * // Highlight holidays
+     * const isCustomDate = (date: Date): string | string[] | false => {
+     *   const holidays = [new Date('2024-12-25'), new Date('2024-01-01')];
+     *   if (holidays.some(holiday => date.toDateString() === holiday.toDateString())) {
+     *     return 'holiday-date';
+     *   }
+     *   return false;
+     * };
+     *
+     * // Multiple classes for different date types
+     * const isCustomDate = (date: Date): string | string[] | false => {
+     *   if (date.getDay() === 0) return ['weekend', 'sunday'];
+     *   if (date.getDay() === 6) return ['weekend', 'saturday'];
+     *   return false;
+     * };
+     * ```
+     *
+     * ```html
+     * <ngx-datex [isCustomDate]="isCustomDate"></ngx-datex>
+     * ```
+     */
+    isCustomDate: _angular_core.InputSignal<(date: Date) => string | string[] | false>;
+    /**
+     * The minimum year to show in the year dropdown.
+     * Only applies when showDropdowns is true.
+     *
+     * @default Current year - 100
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showDropdowns]="true" [minYear]="2020" [maxYear]="2030"></ngx-datex>
+     * ```
+     */
+    minYear: _angular_core.InputSignal<number>;
+    /**
+     * The maximum year to show in the year dropdown.
+     * Only applies when showDropdowns is true.
+     *
+     * @default Current year + 100
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showDropdowns]="true" [minYear]="2020" [maxYear]="2030"></ngx-datex>
+     * ```
+     */
+    maxYear: _angular_core.InputSignal<number>;
+    /**
+     * Predefined date ranges that users can quickly select.
+     * Displayed as a sidebar list for easy access to common date ranges.
+     *
+     * @default DEFAULT_RANGES
+     *
+     * @example
+     * ```typescript
+     * const customRanges = {
+     *   'Today': [startOfDay(new Date()), endOfDay(new Date())],
+     *   'Yesterday': [
+     *     startOfDay(subDays(new Date(), 1)),
+     *     endOfDay(subDays(new Date(), 1))
+     *   ],
+     *   'Last 7 Days': [
+     *     startOfDay(subDays(new Date(), 6)),
+     *     endOfDay(new Date())
+     *   ],
+     *   'Last 30 Days': [
+     *     startOfDay(subDays(new Date(), 29)),
+     *     endOfDay(new Date())
+     *   ],
+     *   'This Month': [
+     *     startOfMonth(new Date()),
+     *     endOfMonth(new Date())
+     *   ]
+     * };
+     * ```
+     *
+     * ```html
+     * <ngx-datex [ranges]="customRanges"></ngx-datex>
+     * ```
+     */
+    ranges: _angular_core.InputSignal<Record<string, [Date, Date]>>;
+    /**
+     * The horizontal alignment of the calendar overlay relative to the input.
+     * Controls where the calendar appears horizontally.
+     *
+     * @default 'center'
+     *
+     * @example
+     * ```html
+     * <!-- Calendar opens to the left of the input -->
+     * <ngx-datex opens="left"></ngx-datex>
+     *
+     * <!-- Calendar opens to the right of the input -->
+     * <ngx-datex opens="right"></ngx-datex>
+     *
+     * <!-- Calendar opens centered on the input -->
+     * <ngx-datex opens="center"></ngx-datex>
+     * ```
+     */
+    opens: _angular_core.InputSignal<"left" | "right" | "center">;
+    /**
+     * The vertical alignment of the calendar overlay relative to the input.
+     * Controls where the calendar appears vertically.
+     *
+     * @default 'auto'
+     *
+     * @example
+     * ```html
+     * <!-- Calendar always opens below the input -->
+     * <ngx-datex drops="down"></ngx-datex>
+     *
+     * <!-- Calendar always opens above the input -->
+     * <ngx-datex drops="up"></ngx-datex>
+     *
+     * <!-- Calendar opens in the best available space -->
+     * <ngx-datex drops="auto"></ngx-datex>
+     * ```
+     */
+    drops: _angular_core.InputSignal<"auto" | "up" | "down">;
+    /**
+     * Custom template for the calendar header.
+     * Allows complete customization of the header area including navigation controls.
+     *
+     * @default null
+     *
+     * @example
+     * ```html
+     * <ngx-datex [headerTemplate]="customHeader">
+     * </ngx-datex>
+     *
+     * <ng-template #customHeader>
+     *   <div class="custom-header">
+     *     <button (click)="previousMonth()">Previous</button>
+     *     <span>{{ currentMonth }}</span>
+     *     <button (click)="nextMonth()">Next</button>
+     *   </div>
+     * </ng-template>
+     * ```
+     */
+    headerTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Custom template for the calendar footer.
+     * Allows complete customization of the footer area including action buttons.
+     *
+     * @default null
+     *
+     * @example
+     * ```html
+     * <ngx-datex [footerTemplate]="customFooter">
+     * </ngx-datex>
+     *
+     * <ng-template #customFooter>
+     *   <div class="custom-footer">
+     *     <button (click)="clearSelection()">Clear</button>
+     *     <button (click)="applySelection()">Apply</button>
+     *   </div>
+     * </ng-template>
+     * ```
+     */
+    footerTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Custom template for individual calendar day cells.
+     * Allows complete customization of how each date is displayed.
+     *
+     * @default null
+     *
+     * @example
+     * ```html
+     * <ngx-datex [dayTemplate]="customDay">
+     * </ngx-datex>
+     *
+     * <ng-template #customDay let-date="date" let-isSelected="isSelected">
+     *   <div class="custom-day" [class.selected]="isSelected">
+     *     <span>{{ date.getDate() }}</span>
+     *     <small *ngIf="hasEvent(date)">•</small>
+     *   </div>
+     * </ng-template>
+     * ```
+     */
+    dayTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * ARIA label for the date picker input.
+     * Provides accessible description for screen readers.
+     *
+     * @default 'Date picker'
+     *
+     * @example
+     * ```html
+     * <ngx-datex ariaLabel="Select booking dates"></ngx-datex>
+     * <ngx-datex ariaLabel="Choose event date range"></ngx-datex>
+     * ```
+     */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * ARIA described-by attribute for the date picker input.
+     * References additional descriptive text for screen readers.
+     *
+     * @default ''
+     *
+     * @example
+     * ```html
+     * <ngx-datex ariaDescribedBy="date-help-text"></ngx-datex>
+     * <div id="date-help-text">Select your preferred date range</div>
+     * ```
+     */
+    ariaDescribedBy: _angular_core.InputSignal<string>;
+    /**
+     * Emitted when the selected date or date range changes.
+     * Provides the complete NgxDatexValue with start and end dates.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (dateChange)="onDateChange($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onDateChange(value: NgxDatexValue | null) {
+     *   if (value) {
+     *     console.log('Start:', value.startDate);
+     *     console.log('End:', value.endDate);
+     *   }
+     * }
+     * ```
+     */
+    dateChange: OutputEmitterRef<NgxDatexValue | null>;
+    /**
+     * Emitted when a date range is selected (not for single date picker).
+     * Provides start and end dates separately for convenience.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (rangeChange)="onRangeChange($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onRangeChange(range: { startDate: Date; endDate: Date | null }) {
+     *   console.log('Range selected:', range.startDate, 'to', range.endDate);
+     * }
+     * ```
+     */
+    rangeChange: OutputEmitterRef<{
+        startDate: Date;
+        endDate: Date | null;
+    }>;
+    /**
+     * Emitted when the calendar overlay is opened.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (openEvent)="onCalendarOpen()"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onCalendarOpen() {
+     *   console.log('Calendar opened');
+     *   // Perform actions when calendar opens
+     * }
+     * ```
+     */
+    openEvent: OutputEmitterRef<void>;
+    /**
+     * Emitted when the calendar overlay is closed.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (closeEvent)="onCalendarClose()"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onCalendarClose() {
+     *   console.log('Calendar closed');
+     *   // Perform cleanup or validation
+     * }
+     * ```
+     */
+    closeEvent: OutputEmitterRef<void>;
+    /**
+     * Emitted when the displayed month changes in the calendar.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (monthChange)="onMonthChange($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onMonthChange(date: Date) {
+     *   console.log('Month changed to:', date.getMonth() + 1, date.getFullYear());
+     * }
+     * ```
+     */
+    monthChange: OutputEmitterRef<Date>;
+    /**
+     * Emitted when the displayed year changes in the calendar.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (yearChange)="onYearChange($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onYearChange(year: number) {
+     *   console.log('Year changed to:', year);
+     * }
+     * ```
+     */
+    yearChange: OutputEmitterRef<number>;
+    /**
+     * Emitted when a date is hovered in the calendar.
+     * Useful for showing preview information or highlighting date ranges.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (dateHover)="onDateHover($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onDateHover(date: Date) {
+     *   console.log('Hovering over:', date);
+     *   // Show preview or update UI
+     * }
+     * ```
+     */
+    dateHover: OutputEmitterRef<Date>;
+    /**
+     * Emitted when a validation error occurs.
+     * Provides error message and optional error code for handling.
+     *
+     * @example
+     * ```html
+     * <ngx-datex (validationError)="onValidationError($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onValidationError(error: { error: string; errorCode?: string }) {
+     *   console.error('Validation error:', error.error);
+     *   if (error.errorCode) {
+     *     // Handle specific error types
+     *     switch (error.errorCode) {
+     *       case 'MIN_DATE':
+     *         // Handle minimum date error
+     *         break;
+     *       case 'MAX_DATE':
+     *         // Handle maximum date error
+     *         break;
+     *     }
+     *   }
+     * }
+     * ```
+     */
+    validationError: OutputEmitterRef<{
+        error: string;
+        errorCode?: string;
+    }>;
+    /**
+     * Emitted when the checkbox state changes (if showCheckbox is enabled).
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCheckbox]="true" (checkboxChange)="onCheckboxChange($event)"></ngx-datex>
+     * ```
+     *
+     * ```typescript
+     * onCheckboxChange(checked: boolean) {
+     *   console.log('Checkbox is now:', checked ? 'checked' : 'unchecked');
+     * }
+     * ```
+     */
+    checkboxChange: OutputEmitterRef<boolean>;
+    private readonly _isOpen;
+    private readonly _currentValue;
+    private readonly _leftCalendarMonth;
+    private readonly _rightCalendarMonth;
+    private readonly _hoverDate;
+    private readonly _errorMessage;
+    private readonly _startTime;
+    private readonly _endTime;
+    private readonly _overlayPosition;
+    private readonly _inputFocused;
+    private readonly _displayValue;
+    private readonly _checkboxValue;
+    private readonly _leftCalendarMatrix;
+    private readonly _rightCalendarMatrix;
+    private _internalStartDate;
+    private _internalEndDate;
+    private oldStartDate;
+    private oldEndDate;
+    private previousRightTime;
+    get currentStartDate(): Date;
+    set currentStartDate(value: Date);
+    get currentEndDate(): Date | null;
+    set currentEndDate(value: Date | null);
+    readonly isOpen: Signal<boolean>;
+    readonly currentValue: Signal<NgxDatexValue | null>;
+    readonly displayValue: Signal<string>;
+    readonly hasStartDate: Signal<boolean>;
+    readonly hasEndDate: Signal<boolean>;
+    readonly leftCalendarMonth: Signal<Date>;
+    readonly rightCalendarMonth: Signal<Date>;
+    readonly leftCalendarMatrix: Signal<Date[][]>;
+    readonly rightCalendarMatrix: Signal<Date[][]>;
+    readonly errorMessage: Signal<string>;
+    readonly hasError: Signal<boolean>;
+    readonly checkboxValue: Signal<boolean>;
+    readonly leftCalendarMonthValue: Signal<number>;
+    readonly leftCalendarYearValue: Signal<number>;
+    readonly rightCalendarMonthValue: Signal<number>;
+    readonly rightCalendarYearValue: Signal<number>;
+    readonly monthNames: Signal<string[]>;
+    readonly daysOfWeek: Signal<string[]>;
+    readonly availableYears: Signal<number[]>;
+    readonly rangeEntries: Signal<{
+        label: string;
+        range: [Date, Date];
+    }[]>;
+    readonly showRanges: Signal<boolean>;
+    readonly isMobileDevice: Signal<boolean>;
+    readonly headerTitle: Signal<string>;
+    readonly canApplyValue: Signal<boolean>;
+    readonly arrowDirection: Signal<'up' | 'down' | 'left' | 'right'>;
+    readonly arrowAlignment: Signal<'start' | 'center' | 'end'>;
+    readonly formattedSelectedRange: Signal<string>;
+    readonly currentLabel: Signal<string>;
+    readonly isCustomRange: Signal<boolean>;
+    readonly selectedStartHour: Signal<number>;
+    readonly selectedStartMinute: Signal<number>;
+    readonly selectedStartAmPm: Signal<string>;
+    readonly selectedEndHour: Signal<number>;
+    readonly selectedEndMinute: Signal<number>;
+    readonly selectedEndAmPm: Signal<string>;
+    readonly hours24: Signal<number[]>;
+    readonly hours12: Signal<number[]>;
+    readonly minutes: Signal<number[]>;
+    readonly availableStartHours: Signal<{
+        value: number;
+        disabled: boolean;
+    }[]>;
+    readonly availableEndHours: Signal<{
+        value: number;
+        disabled: boolean;
+    }[]>;
+    readonly availableStartMinutes: Signal<{
+        value: number;
+        disabled: boolean;
+    }[]>;
+    readonly availableEndMinutes: Signal<{
+        value: number;
+        disabled: boolean;
+    }[]>;
+    private onChange;
+    private onTouched;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    writeValue(value: NgxDatexValue | null): void;
+    registerOnChange(fn: (value: NgxDatexValue | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Toggles the calendar visibility.
+     * Opens the calendar if closed, closes it if open.
+     * Does nothing if the component is disabled or readonly.
+     *
+     * @example
+     * ```typescript
+     * // In component
+     * @ViewChild(NgxDatex) datePicker!: NgxDatex;
+     *
+     * togglePicker() {
+     *   this.datePicker.toggle();
+     * }
+     * ```
+     */
+    toggle(): void;
+    /**
+     * Opens the calendar overlay.
+     * Saves current state for potential cancellation and initializes the calendar view.
+     *
+     * @example
+     * ```typescript
+     * // Programmatically open the calendar
+     * this.datePicker.openCalendar();
+     * ```
+     */
+    openCalendar(): void;
+    /**
+     * Closes the calendar overlay.
+     * Handles incomplete selections and emits change events if values have changed.
+     *
+     * @example
+     * ```typescript
+     * // Programmatically close the calendar
+     * this.datePicker.closeCalendar();
+     * ```
+     */
+    closeCalendar(): void;
+    /**
+     * Applies the current selection and closes the calendar.
+     * Only works if there's a valid selection to apply.
+     *
+     * @example
+     * ```typescript
+     * // Apply current selection programmatically
+     * if (this.datePicker.canApplyValue()) {
+     *   this.datePicker.apply();
+     * }
+     * ```
+     */
+    apply(): void;
+    /**
+     * Cancels the current selection and reverts to the previous values.
+     * Closes the calendar without applying changes.
+     *
+     * @example
+     * ```typescript
+     * // Cancel current selection
+     * this.datePicker.cancel();
+     * ```
+     */
+    cancel(): void;
+    /**
+     * Selects a specific date in the calendar.
+     * Handles both single date and range selection logic.
+     *
+     * @param date - The date to select
+     *
+     * @example
+     * ```typescript
+     * // Programmatically select a date
+     * const today = new Date();
+     * this.datePicker.selectDate(today);
+     * ```
+     */
+    selectDate(date: Date): void;
+    /**
+     * Selects a predefined date range by label.
+     *
+     * @param label - The label of the range to select (must exist in ranges configuration)
+     *
+     * @example
+     * ```typescript
+     * // Select "Last 7 days" range
+     * this.datePicker.selectRange('Last 7 days');
+     * ```
+     */
+    selectRange(label: string): void;
+    selectCustomRange(): void;
+    onInputClick(): void;
+    onInputFocus(): void;
+    onInputBlur(): void;
+    onInputKeydown(event: KeyboardEvent): void;
+    onInputKeyup(): void;
+    onDateHover(date: Date): void;
+    onCalendarMouseLeave(): void;
+    onCalendarKeydown(event: KeyboardEvent): void;
+    onCheckboxChange(checked: boolean): void;
+    previousMonth(calendar: 'left' | 'right'): void;
+    nextMonth(calendar: 'left' | 'right'): void;
+    canNavigatePrevious(calendar: 'left' | 'right'): boolean;
+    canNavigateNext(calendar: 'left' | 'right'): boolean;
+    onMonthChange(calendar: 'left' | 'right', event: Event): void;
+    onYearChange(calendar: 'left' | 'right', event: Event): void;
+    isRangeActive(label: string): boolean;
+    isDisabled(date: Date): boolean;
+    isSelected(date: Date): boolean;
+    isInRange(date: Date): boolean;
+    isRangeStart(date: Date): boolean;
+    isRangeEnd(date: Date): boolean;
+    isToday(date: Date): boolean;
+    isOtherMonth(date: Date, calendarMonth: Date): boolean;
+    isHovered(date: Date): boolean;
+    isHoverStart(date: Date): boolean;
+    isHoverEnd(date: Date): boolean;
+    formatDateForAria(date: Date): string;
+    onStartHourChange(event: Event): void;
+    onStartMinuteChange(event: Event): void;
+    onStartAmPmChange(event: Event): void;
+    onEndHourChange(event: Event): void;
+    onEndMinuteChange(event: Event): void;
+    onEndAmPmChange(event: Event): void;
+    private initializeComponent;
+    private initializeDefaultDates;
+    private initializeWithInputDates;
+    private initializeCalendars;
+    private updateMonthsInView;
+    private updateLeftCalendarMatrix;
+    private updateRightCalendarMatrix;
+    private updateTimeSignalsFromDate;
+    private setStartDate;
+    private setEndDate;
+    private updateElement;
+    private updateCurrentValue;
+    private emitValueChange;
+    private updateView;
+    private updateTimePickers;
+    private updateTimeFromPicker;
+    private elementChanged;
+    private parseInputDate;
+    private createOverlay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDatex, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxDatex, "ngx-datex", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "calendarIcon": { "alias": "calendarIcon"; "required": false; "isSignal": true; }; "showCalendarIcon": { "alias": "showCalendarIcon"; "required": false; "isSignal": true; }; "calendarIconPosition": { "alias": "calendarIconPosition"; "required": false; "isSignal": true; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; "isSignal": true; }; "checkboxPosition": { "alias": "checkboxPosition"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "singleDatePicker": { "alias": "singleDatePicker"; "required": false; "isSignal": true; }; "autoApply": { "alias": "autoApply"; "required": false; "isSignal": true; }; "showDropdowns": { "alias": "showDropdowns"; "required": false; "isSignal": true; }; "timePicker": { "alias": "timePicker"; "required": false; "isSignal": true; }; "timePicker24Hour": { "alias": "timePicker24Hour"; "required": false; "isSignal": true; }; "timePickerIncrement": { "alias": "timePickerIncrement"; "required": false; "isSignal": true; }; "timePickerSeconds": { "alias": "timePickerSeconds"; "required": false; "isSignal": true; }; "linkedCalendars": { "alias": "linkedCalendars"; "required": false; "isSignal": true; }; "autoUpdateInput": { "alias": "autoUpdateInput"; "required": false; "isSignal": true; }; "alwaysShowCalendars": { "alias": "alwaysShowCalendars"; "required": false; "isSignal": true; }; "showCustomRangeLabel": { "alias": "showCustomRangeLabel"; "required": false; "isSignal": true; }; "startDate": { "alias": "startDate"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "maxSpan": { "alias": "maxSpan"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "showISOWeekNumbers": { "alias": "showISOWeekNumbers"; "required": false; "isSignal": true; }; "buttonClasses": { "alias": "buttonClasses"; "required": false; "isSignal": true; }; "applyButtonClasses": { "alias": "applyButtonClasses"; "required": false; "isSignal": true; }; "cancelButtonClasses": { "alias": "cancelButtonClasses"; "required": false; "isSignal": true; }; "isInvalidDate": { "alias": "isInvalidDate"; "required": false; "isSignal": true; }; "isCustomDate": { "alias": "isCustomDate"; "required": false; "isSignal": true; }; "minYear": { "alias": "minYear"; "required": false; "isSignal": true; }; "maxYear": { "alias": "maxYear"; "required": false; "isSignal": true; }; "ranges": { "alias": "ranges"; "required": false; "isSignal": true; }; "opens": { "alias": "opens"; "required": false; "isSignal": true; }; "drops": { "alias": "drops"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; "isSignal": true; }; "dayTemplate": { "alias": "dayTemplate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; "rangeChange": "rangeChange"; "openEvent": "openEvent"; "closeEvent": "closeEvent"; "monthChange": "monthChange"; "yearChange": "yearChange"; "dateHover": "dateHover"; "validationError": "validationError"; "checkboxChange": "checkboxChange"; }, never, never, true, never>;
+}
+
+/**
+ * @fileoverview Default configurations for NgxDatex component.
+ *
+ * This file contains predefined locales, themes, and date ranges
+ * that can be used out-of-the-box or as starting points for customization.
+ */
+/**
+ * Default Spanish locale configuration.
+ *
+ * Provides Spanish language support with DD/MM/YYYY format,
+ * Spanish day/month names, and Monday as the first day of the week.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="SPANISH_LOCALE"></ngx-datex>
+ * ```
+ */
+declare const SPANISH_LOCALE: NgxDatexLocale;
+/**
+ * Default Material Design light theme.
+ *
+ * A clean, modern theme following Material Design principles
+ * with blue primary colors and proper contrast ratios.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [theme]="MATERIAL_LIGHT_THEME"></ngx-datex>
+ * ```
+ */
+declare const MATERIAL_LIGHT_THEME: NgxDatexTheme;
+/**
+ * Default predefined date ranges in Spanish.
+ *
+ * Provides commonly used date ranges like "Today", "Last 7 days", etc.
+ * All ranges are calculated dynamically based on the current date.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [ranges]="DEFAULT_RANGES"></ngx-datex>
+ *
+ * // Or customize with your own ranges
+ * const customRanges = {
+ *   ...DEFAULT_RANGES,
+ *   'Custom Range': [startDate, endDate]
+ * };
+ * ```
+ */
+declare const DEFAULT_RANGES: Record<string, [Date, Date]>;
+
+/**
+ * Core service for NgxDatex component operations.
+ *
+ * Provides essential functionality for:
+ * - Configuration management
+ * - Locale handling
+ * - Date formatting
+ * - Calendar matrix generation
+ * - Date validation
+ *
+ * @example
+ * ```typescript
+ * // Inject the service
+ * constructor(private datexService: NgxDatexService) {}
+ *
+ * // Update configuration
+ * this.datexService.updateConfig({
+ *   dateFormat: 'DD/MM/YYYY',
+ *   firstDayOfWeek: 1
+ * });
+ *
+ * // Format a date range
+ * const formatted = this.datexService.formatDateValue(dateRange, 'DD/MM/YYYY');
+ * ```
+ */
+declare class NgxDatexService {
+    private config;
+    private locale;
+    /**
+     * Updates the component configuration.
+     *
+     * @param config - Partial configuration object to merge with existing config
+     *
+     * @example
+     * ```typescript
+     * this.datexService.updateConfig({
+     *   dateFormat: 'YYYY-MM-DD',
+     *   firstDayOfWeek: 0, // Sunday
+     *   businessDaysOnly: true
+     * });
+     * ```
+     */
+    updateConfig(config: NgxDatexConfig): void;
+    /**
+     * Sets the locale configuration for internationalization.
+     *
+     * @param locale - Locale configuration object
+     *
+     * @example
+     * ```typescript
+     * this.datexService.setLocale({
+     *   format: 'DD/MM/YYYY',
+     *   daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+     *   monthNames: ['Enero', 'Febrero', ...],
+     *   applyLabel: 'Aplicar',
+     *   cancelLabel: 'Cancelar'
+     * });
+     * ```
+     */
+    setLocale(locale: NgxDatexLocale): void;
+    /**
+     * Formats a date range value into a display string.
+     *
+     * @param value - The date range value to format
+     * @param format - Optional format string (uses locale format if not provided)
+     * @returns Formatted date string
+     *
+     * @example
+     * ```typescript
+     * const dateRange: NgxDatexValue = {
+     *   startDate: new Date('2024-01-01'),
+     *   endDate: new Date('2024-01-31')
+     * };
+     *
+     * const formatted = this.datexService.formatDateValue(dateRange, 'DD/MM/YYYY');
+     * // Returns: "01/01/2024 - 31/01/2024"
+     * ```
+     */
+    formatDateValue(value: NgxDatexValue | null, format?: string): string;
+    buildCalendarMatrix(month: Date): Date[][];
+    validateDate(date: Date): NgxDatexValidationResult;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDatexService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgxDatexService>;
+}
+
+/**
+ * @fileoverview NgxDatex Overlay Service
+ *
+ * Service responsible for managing the calendar overlay positioning, creation, and lifecycle.
+ * Handles both desktop and mobile overlay strategies with proper event management.
+ */
+
+/**
+ * Service for managing calendar overlay positioning and lifecycle.
+ *
+ * Provides methods to create, position, and manage the calendar overlay
+ * with support for both desktop and mobile layouts. Handles click outside
+ * detection, keyboard events, and responsive positioning.
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * constructor(private overlayService: NgxDatexOverlayService) {}
+ *
+ * openCalendar() {
+ *   this.overlayService.createOverlay(
+ *     this.inputElement,
+ *     this.calendarTemplate,
+ *     this.viewContainerRef,
+ *     this.locale,
+ *     'center',
+ *     'auto',
+ *     () => this.closeCalendar(),
+ *     (event) => this.handleKeydown(event),
+ *     (position) => this.updatePosition(position)
+ *   );
+ * }
+ * ```
+ */
+declare class NgxDatexOverlayService {
+    private overlayRef?;
+    private readonly overlay;
+    /**
+     * Creates and configures the calendar overlay.
+     *
+     * Sets up the overlay with appropriate positioning strategy, event handlers,
+     * and responsive behavior. Reuses existing overlay if already created.
+     *
+     * @param inputElement - Reference to the input element for positioning
+     * @param calendarTemplate - Template reference for the calendar content
+     * @param viewContainerRef - View container for template portal
+     * @param locale - Localization settings for RTL/LTR direction
+     * @param opens - Horizontal alignment preference
+     * @param drops - Vertical alignment preference
+     * @param onOutsideClick - Callback for clicks outside the overlay
+     * @param onKeydown - Callback for keyboard events
+     * @param onPositionChange - Callback for position updates
+     * @returns The created or existing overlay reference
+     *
+     * @example
+     * ```typescript
+     * const overlayRef = this.overlayService.createOverlay(
+     *   this.inputElement,
+     *   this.calendarTemplate,
+     *   this.viewContainerRef,
+     *   this.locale(),
+     *   this.opens(),
+     *   this.drops(),
+     *   () => this.closeCalendar(),
+     *   (event) => {
+     *     if (event.key === 'Escape') {
+     *       this.closeCalendar();
+     *     }
+     *   },
+     *   (position) => this.updateArrowPosition(position)
+     * );
+     * ```
+     */
+    createOverlay(inputElement: ElementRef<HTMLInputElement>, calendarTemplate: TemplateRef<unknown>, viewContainerRef: ViewContainerRef, locale: NgxDatexLocale, opens: 'left' | 'right' | 'center', drops: 'up' | 'down' | 'auto', onOutsideClick: () => void, onKeydown: (event: KeyboardEvent) => void, onPositionChange: (position: NgxDatexOverlayPosition) => void): OverlayRef;
+    /**
+     * Closes the calendar overlay without disposing it.
+     *
+     * Detaches the overlay content while keeping the overlay reference
+     * for potential reuse. The overlay can be reopened without recreation.
+     *
+     * @example
+     * ```typescript
+     * // Close the overlay
+     * this.overlayService.closeOverlay();
+     * ```
+     */
+    closeOverlay(): void;
+    /**
+     * Completely disposes of the overlay and cleans up resources.
+     *
+     * Detaches content, disposes the overlay reference, and cleans up
+     * all associated resources. Should be called during component destruction.
+     *
+     * @example
+     * ```typescript
+     * ngOnDestroy() {
+     *   this.overlayService.disposeOverlay();
+     * }
+     * ```
+     */
+    disposeOverlay(): void;
+    /**
+     * Sets up event listeners for the overlay.
+     *
+     * Configures click outside detection and keyboard event handling
+     * with different strategies for desktop and mobile devices.
+     *
+     * @private
+     * @param inputElement - Reference to the input element
+     * @param onOutsideClick - Callback for outside clicks
+     * @param onKeydown - Callback for keyboard events
+     */
+    private setupOverlayEvents;
+    /**
+     * Creates the overlay configuration based on device type and preferences.
+     *
+     * Returns different configurations for mobile and desktop devices,
+     * with appropriate positioning strategies and styling.
+     *
+     * @private
+     * @param inputElement - Reference to the input element
+     * @param locale - Localization settings
+     * @param opens - Horizontal alignment preference
+     * @param drops - Vertical alignment preference
+     * @param onPositionChange - Callback for position updates
+     * @returns Overlay configuration object
+     */
+    private getOverlayConfig;
+    /**
+     * Creates the flexible positioning strategy for desktop overlays.
+     *
+     * Configures multiple fallback positions based on user preferences
+     * and available space, with automatic repositioning on scroll.
+     *
+     * @private
+     * @param inputElement - Reference to the input element
+     * @param opens - Horizontal alignment preference
+     * @param drops - Vertical alignment preference
+     * @param onPositionChange - Callback for position updates
+     * @returns Flexible connected position strategy
+     */
+    private getPositionStrategy;
+    /**
+     * Generates position configurations based on user preferences.
+     *
+     * Creates an array of connected positions with fallbacks,
+     * prioritizing user preferences while providing alternatives
+     * when space is limited.
+     *
+     * @private
+     * @param opens - Horizontal alignment preference
+     * @param drops - Vertical alignment preference
+     * @returns Array of connected position configurations
+     */
+    private getPositions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDatexOverlayService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgxDatexOverlayService>;
+}
+
+/**
+ * Service for managing time picker operations and validations.
+ *
+ * Handles time component updates, validates time selections against date constraints,
+ * and provides available time options based on minimum/maximum date restrictions.
+ * Supports both 12-hour and 24-hour time formats with proper AM/PM handling.
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * constructor(private timePickerService: NgxDatexTimePickerService) {}
+ *
+ * onTimeChange(side: 'start' | 'end', component: 'hour' | 'minute', value: number) {
+ *   this.timePickerService.updateTimeFromPicker(
+ *     this.currentStartDate,
+ *     this.currentEndDate,
+ *     side,
+ *     component,
+ *     value,
+ *     this.startTime,
+ *     this.endTime,
+ *     this.timePicker24Hour,
+ *     this.singleDatePicker,
+ *     (date) => this.setStartDate(date),
+ *     (date) => this.setEndDate(date),
+ *     (side, time) => this.updateTimeSignal(side, time)
+ *   );
+ * }
+ * ```
+ */
+declare class NgxDatexTimePickerService {
+    /**
+     * Updates time from picker component changes and applies to dates.
+     *
+     * Handles time component updates (hour, minute, AM/PM) and applies the changes
+     * to the corresponding dates. Manages single date picker logic and ensures
+     * end dates don't precede start dates on the same day.
+     *
+     * @param currentStartDate - Current start date
+     * @param currentEndDate - Current end date (can be null)
+     * @param side - Which time picker is being updated ('start' or 'end')
+     * @param component - Which time component is changing ('hour', 'minute', or 'ampm')
+     * @param value - New value for the time component
+     * @param startTime - Current start time value
+     * @param endTime - Current end time value
+     * @param timePicker24Hour - Whether using 24-hour format
+     * @param singleDatePicker - Whether in single date picker mode
+     * @param onStartDateChange - Callback for start date changes
+     * @param onEndDateChange - Callback for end date changes
+     * @param onTimeChange - Callback for time signal updates
+     *
+     * @example
+     * ```typescript
+     * // Update start hour to 14 (2 PM)
+     * this.timePickerService.updateTimeFromPicker(
+     *   this.startDate,
+     *   this.endDate,
+     *   'start',
+     *   'hour',
+     *   14,
+     *   this.startTime,
+     *   this.endTime,
+     *   true, // 24-hour format
+     *   false, // range picker
+     *   (date) => this.updateStartDate(date),
+     *   (date) => this.updateEndDate(date),
+     *   (side, time) => this.updateTimeSignal(side, time)
+     * );
+     * ```
+     */
+    updateTimeFromPicker(currentStartDate: Date, currentEndDate: Date | null, side: 'start' | 'end', component: 'hour' | 'minute' | 'ampm', value: string | number, startTime: NgxDatexTimeValue, endTime: NgxDatexTimeValue, timePicker24Hour: boolean, singleDatePicker: boolean, onStartDateChange: (date: Date) => void, onEndDateChange: (date: Date) => void, onTimeChange: (side: 'start' | 'end', time: NgxDatexTimeValue) => void): void;
+    /**
+     * Applies time values to a date object.
+     *
+     * Creates a new date with the specified time components applied.
+     * Handles 12-hour to 24-hour conversion and ensures proper time formatting.
+     *
+     * @private
+     * @param date - Base date to apply time to
+     * @param time - Time value with hour, minute, and AM/PM
+     * @param is24Hour - Whether using 24-hour format
+     * @returns New date with applied time
+     *
+     * @example
+     * ```typescript
+     * const date = new Date('2024-01-15');
+     * const time = { hour: 2, minute: 30, ampm: 'PM' };
+     * const result = this.applyTimeToDate(date, time, false);
+     * // Result: 2024-01-15 14:30:00
+     * ```
+     */
+    private applyTimeToDate;
+    /**
+     * Extracts time components from a date object.
+     *
+     * Converts a date to time picker format, handling both 12-hour and 24-hour
+     * formats with proper AM/PM designation.
+     *
+     * @param date - Date to extract time from
+     * @param timePicker24Hour - Whether using 24-hour format
+     * @returns Time value object with hour, minute, and AM/PM
+     *
+     * @example
+     * ```typescript
+     * const date = new Date('2024-01-15 14:30:00');
+     *
+     * // 24-hour format
+     * const time24 = this.updateTimeSignalsFromDate(date, true);
+     * // Result: { hour: 14, minute: 30, ampm: 'AM' }
+     *
+     * // 12-hour format
+     * const time12 = this.updateTimeSignalsFromDate(date, false);
+     * // Result: { hour: 2, minute: 30, ampm: 'PM' }
+     * ```
+     */
+    updateTimeSignalsFromDate(date: Date, timePicker24Hour: boolean): NgxDatexTimeValue;
+    /**
+     * Gets available hours based on date constraints.
+     *
+     * Returns an array of hour options with disabled state based on minimum/maximum
+     * date restrictions and start date constraints for end time selection.
+     *
+     * @param date - Date to get hours for
+     * @param minDate - Minimum allowed date
+     * @param maxDate - Maximum allowed date
+     * @param timePicker24Hour - Whether using 24-hour format
+     * @param timeValue - Current time value for AM/PM context
+     * @param isEndTime - Whether this is for end time selection
+     * @param startDate - Start date for end time validation
+     * @returns Array of hour options with availability status
+     *
+     * @example
+     * ```typescript
+     * const availableHours = this.timePickerService.getAvailableHours(
+     *   new Date('2024-01-15'),
+     *   new Date('2024-01-15 10:00:00'), // minDate
+     *   new Date('2024-01-15 18:00:00'), // maxDate
+     *   false, // 12-hour format
+     *   { hour: 2, minute: 0, ampm: 'PM' },
+     *   false, // start time
+     * );
+     * // Result: [
+     * //   { value: 1, disabled: true },  // Before minDate
+     * //   { value: 2, disabled: false }, // Available
+     * //   { value: 6, disabled: true },  // After maxDate
+     * // ]
+     * ```
+     */
+    getAvailableHours(date: Date | null, minDate: Date | null, maxDate: Date | null, timePicker24Hour: boolean, timeValue: NgxDatexTimeValue, isEndTime?: boolean, startDate?: Date): {
+        value: number;
+        disabled: boolean;
+    }[];
+    /**
+     * Gets available minutes based on date and hour constraints.
+     *
+     * Returns an array of minute options with disabled state based on minimum/maximum
+     * date restrictions, time picker increment, and start date constraints.
+     *
+     * @param date - Date to get minutes for
+     * @param minDate - Minimum allowed date
+     * @param maxDate - Maximum allowed date
+     * @param timeValue - Current time value for hour context
+     * @param timePickerIncrement - Minute increment step
+     * @param timePicker24Hour - Whether using 24-hour format
+     * @param isEndTime - Whether this is for end time selection
+     * @param startDate - Start date for end time validation
+     * @returns Array of minute options with availability status
+     *
+     * @example
+     * ```typescript
+     * const availableMinutes = this.timePickerService.getAvailableMinutes(
+     *   new Date('2024-01-15'),
+     *   new Date('2024-01-15 14:15:00'), // minDate
+     *   new Date('2024-01-15 14:45:00'), // maxDate
+     *   { hour: 14, minute: 30, ampm: 'PM' },
+     *   15, // 15-minute increments
+     *   true, // 24-hour format
+     *   false, // start time
+     * );
+     * // Result: [
+     * //   { value: 0, disabled: true },  // Before minDate
+     * //   { value: 15, disabled: false }, // Available
+     * //   { value: 30, disabled: false }, // Available
+     * //   { value: 45, disabled: false }, // Available
+     * // ]
+     * ```
+     */
+    getAvailableMinutes(date: Date | null, minDate: Date | null, maxDate: Date | null, timeValue: NgxDatexTimeValue, timePickerIncrement: number, timePicker24Hour: boolean, isEndTime?: boolean, startDate?: Date): {
+        value: number;
+        disabled: boolean;
+    }[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDatexTimePickerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgxDatexTimePickerService>;
+}
+
+declare class NgxDatexCalendarService {
+    updateMonthsInView(startDate: Date, endDate: Date | null, currentLeftMonth: Date, currentRightMonth: Date, singleDatePicker: boolean, linkedCalendars: boolean, maxDate: Date | null, onLeftMonthChange: (month: Date) => void, onRightMonthChange: (month: Date) => void): void;
+    setStartDate(startDate: Date, minDate: Date | null, maxDate: Date | null, timePicker: boolean, timePickerIncrement: number): Date;
+    setEndDate(endDate: Date, startDate: Date, maxDate: Date | null, maxSpan: {
+        [key: string]: number;
+    } | null, timePicker: boolean, timePickerIncrement: number): Date;
+    private getMaxSpanDays;
+    isDateDisabled(date: Date, minDate: Date | null, maxDate: Date | null, maxSpan: {
+        [key: string]: number;
+    } | null, currentStartDate: Date | null, currentEndDate: Date | null, singleDatePicker: boolean, isInvalidDateFn: ((date: Date) => boolean) | null): boolean;
+    isDateSelected(date: Date, currentStartDate: Date | null, currentEndDate: Date | null, singleDatePicker: boolean): boolean;
+    isDateInRange(date: Date, currentStartDate: Date | null, currentEndDate: Date | null, singleDatePicker: boolean): boolean;
+    isDateRangeStart(date: Date, currentStartDate: Date | null): boolean;
+    isDateRangeEnd(date: Date, currentEndDate: Date | null): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDatexCalendarService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgxDatexCalendarService>;
+}
+
+/**
+ * @fileoverview Date utility functions for NgxDatex component.
+ * Provides date manipulation, formatting, and validation utilities.
+ * Built on top of @formkit/tempo for reliable date operations.
+ */
+/**
+ * Adds the specified number of days to a date.
+ *
+ * @param date - The base date
+ * @param days - Number of days to add (can be negative)
+ * @returns New date with days added
+ *
+ * @example
+ * ```typescript
+ * const tomorrow = addDays(new Date(), 1);
+ * const lastWeek = addDays(new Date(), -7);
+ * ```
+ */
+declare function addDays(date: Date, days: number): Date;
+/**
+ * Adds the specified number of months to a date.
+ *
+ * @param date - The base date
+ * @param months - Number of months to add (can be negative)
+ * @returns New date with months added
+ *
+ * @example
+ * ```typescript
+ * const nextMonth = addMonths(new Date(), 1);
+ * const lastYear = addMonths(new Date(), -12);
+ * ```
+ */
+declare function addMonths(date: Date, months: number): Date;
+/**
+ * Returns a new date set to the start of the day (00:00:00.000).
+ *
+ * @param date - The input date
+ * @returns New date at start of day
+ *
+ * @example
+ * ```typescript
+ * const today = startOfDay(new Date()); // Today at 00:00:00
+ * ```
+ */
+declare function startOfDay(date: Date): Date;
+/**
+ * Returns a new date set to the end of the day (23:59:59.999).
+ *
+ * @param date - The input date
+ * @returns New date at end of day
+ *
+ * @example
+ * ```typescript
+ * const endToday = endOfDay(new Date()); // Today at 23:59:59.999
+ * ```
+ */
+declare function endOfDay(date: Date): Date;
+/**
+ * Returns a new date set to the first day of the month.
+ *
+ * @param date - The input date
+ * @returns New date at start of month
+ *
+ * @example
+ * ```typescript
+ * const monthStart = startOfMonth(new Date()); // 1st day of current month
+ * ```
+ */
+declare function startOfMonth(date: Date): Date;
+/**
+ * Returns a new date set to the start of the week.
+ *
+ * @param date - The input date
+ * @param firstDay - First day of week (0 = Sunday, 1 = Monday, etc.)
+ * @returns New date at start of week
+ *
+ * @example
+ * ```typescript
+ * const mondayStart = startOfWeek(new Date(), 1); // Start of week (Monday)
+ * const sundayStart = startOfWeek(new Date(), 0); // Start of week (Sunday)
+ * ```
+ */
+declare function startOfWeek(date: Date, firstDay?: number): Date;
+/**
+ * Checks if two dates represent the same day.
+ *
+ * @param date1 - First date to compare
+ * @param date2 - Second date to compare
+ * @returns True if dates are on the same day
+ *
+ * @example
+ * ```typescript
+ * const today = new Date();
+ * const todayEvening = new Date();
+ * todayEvening.setHours(23, 59, 59);
+ *
+ * isSameDay(today, todayEvening); // true
+ * ```
+ */
+declare function isSameDay(date1: Date, date2: Date): boolean;
+/**
+ * Checks if two dates are in the same month and year.
+ *
+ * @param date1 - First date to compare
+ * @param date2 - Second date to compare
+ * @returns True if dates are in the same month
+ *
+ * @example
+ * ```typescript
+ * const jan1 = new Date(2024, 0, 1);
+ * const jan31 = new Date(2024, 0, 31);
+ *
+ * isSameMonth(jan1, jan31); // true
+ * ```
+ */
+declare function isSameMonth(date1: Date, date2: Date): boolean;
+/**
+ * Checks if two dates are in the same year.
+ *
+ * @param date1 - First date to compare
+ * @param date2 - Second date to compare
+ * @returns True if dates are in the same year
+ *
+ * @example
+ * ```typescript
+ * const jan2024 = new Date(2024, 0, 1);
+ * const dec2024 = new Date(2024, 11, 31);
+ *
+ * isSameYear(jan2024, dec2024); // true
+ * ```
+ */
+declare function isSameYear(date1: Date, date2: Date): boolean;
+declare function formatDateValue(date: Date, formatStr: string): string;
+declare function parseDateValue(dateStr: string, formatStr: string): Date;
+declare function isSameDate(date1: Date, date2: Date, unit?: 'day' | 'month' | 'year'): boolean;
+declare function isValidDate(date: Date | null | undefined): date is Date;
+declare function isBeforeDate(date1: Date, date2: Date): boolean;
+declare function getStartOfMonth(date: Date): Date;
+declare function getStartOfWeek(date: Date, firstDay?: number): Date;
+declare function isMobileDevice(): boolean;
+
+export { DEFAULT_RANGES, MATERIAL_LIGHT_THEME, NgxDatex, NgxDatexCalendarService, NgxDatexOverlayService, NgxDatexService, NgxDatexTimePickerService, SPANISH_LOCALE, addDays, addMonths, endOfDay, formatDateValue, getStartOfMonth, getStartOfWeek, isBeforeDate, isMobileDevice, isSameDate, isSameDay, isSameMonth, isSameYear, isValidDate, parseDateValue, startOfDay, startOfMonth, startOfWeek };
+export type { NgxDatexConfig, NgxDatexInputs, NgxDatexLocale, NgxDatexOutputs, NgxDatexOverlayPosition, NgxDatexRange, NgxDatexTheme, NgxDatexTimeValue, NgxDatexValidationResult, NgxDatexValue };