ngx-datex 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-datex",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Modern Angular date range picker with Material Design featuring signals, control flow syntax, time picker, themes, and responsive design for Angular 21+",
   "peerDependencies": {
     "@angular/animations": "^21.1.1",

package/types/ngx-datex.d.ts

@@ -137,11 +137,11 @@ interface NgxDatexTheme {
 }
 /**
  * Configuration options for date picker behavior and validation.
+ * Note: Date format is configured in NgxDatexLocale.format, not here.
  *
  * @example
  * ```typescript
  * const config: NgxDatexConfig = {
- *   dateFormat: 'DD/MM/YYYY',
  *   firstDayOfWeek: 1, // Monday
  *   businessDaysOnly: true,
  *   closeOnSelect: false
@@ -149,8 +149,6 @@ interface NgxDatexTheme {
  * ```
  */
 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 */
@@ -172,22 +170,206 @@ interface NgxDatexConfig {
  * Localization configuration for the date picker.
  * Controls language, date formats, and UI text.
  *
+ * The `format` property is the primary way to control date formatting,
+ * following the vanilla-daterangepicker pattern.
+ *
  * @example
  * ```typescript
+ * // Basic date-only formats
  * const spanishLocale: NgxDatexLocale = {
- *   direction: 'ltr',
- *   format: 'DD/MM/YYYY',
+ *   locale: 'es-ES',
+ *   format: 'DD/MM/YYYY',        // 15/01/2024
+ *   separator: ' - ',
  *   daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
  *   monthNames: ['Enero', 'Febrero', 'Marzo', ...],
  *   applyLabel: 'Aplicar',
  *   cancelLabel: 'Cancelar'
  * };
+ *
+ * const americanLocale: NgxDatexLocale = {
+ *   locale: 'en-US',
+ *   format: 'MM/DD/YYYY',        // 01/15/2024
+ *   separator: ' - ',
+ *   daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+ *   monthNames: ['January', 'February', 'March', ...],
+ *   applyLabel: 'Apply',
+ *   cancelLabel: 'Cancel'
+ * };
+ *
+ * // Time picker formats (when timePicker=true)
+ * const spanishWithTime24h: NgxDatexLocale = {
+ *   locale: 'es-ES',
+ *   format: 'DD/MM/YYYY HH:mm',  // 15/01/2024 14:30
+ *   // ... other properties
+ * };
+ *
+ * const americanWithTime12h: NgxDatexLocale = {
+ *   locale: 'en-US',
+ *   format: 'MM/DD/YYYY hh:mm A', // 01/15/2024 02:30 PM
+ *   // ... other properties
+ * };
+ *
+ * // ISO format for APIs
+ * const isoFormat: NgxDatexLocale = {
+ *   locale: 'en-US',
+ *   format: 'YYYY-MM-DD',        // 2024-01-15
+ *   // ... other properties
+ * };
+ *
+ * const isoWithTime: NgxDatexLocale = {
+ *   locale: 'en-US',
+ *   format: 'YYYY-MM-DD HH:mm',  // 2024-01-15 14:30
+ *   // ... other properties
+ * };
  * ```
  */
 interface NgxDatexLocale {
+    /**
+     * Locale string for date formatting and internationalization.
+     * Used by @formkit/tempo for proper locale-aware formatting.
+     *
+     * This affects how dates are formatted according to regional conventions,
+     * including number formatting, month/day names, and cultural preferences.
+     *
+     * ## Common Locale Codes:
+     * - `'es-ES'` - Spanish (Spain)
+     * - `'es-MX'` - Spanish (Mexico)
+     * - `'en-US'` - English (United States)
+     * - `'en-GB'` - English (United Kingdom)
+     * - `'fr-FR'` - French (France)
+     * - `'de-DE'` - German (Germany)
+     * - `'it-IT'` - Italian (Italy)
+     * - `'pt-BR'` - Portuguese (Brazil)
+     * - `'ja-JP'` - Japanese (Japan)
+     * - `'zh-CN'` - Chinese (Simplified)
+     *
+     * @example
+     * ```typescript
+     * // Spanish locale
+     * const spanishLocale: NgxDatexLocale = {
+     *   locale: 'es-ES',
+     *   format: 'DD/MM/YYYY'
+     * };
+     *
+     * // US English locale
+     * const usLocale: NgxDatexLocale = {
+     *   locale: 'en-US',
+     *   format: 'MM/DD/YYYY'
+     * };
+     *
+     * // German locale
+     * const germanLocale: NgxDatexLocale = {
+     *   locale: 'de-DE',
+     *   format: 'DD.MM.YYYY'
+     * };
+     * ```
+     *
+     * @default undefined (uses browser default)
+     */
+    locale?: string;
     /** Text direction for RTL languages */
     direction?: 'ltr' | 'rtl';
-    /** Date format string */
+    /**
+     * Primary date format string using @formkit/tempo tokens.
+     * This format is used for ALL date display and parsing in the component.
+     *
+     * **IMPORTANT**: When using timePicker=true, you MUST include time tokens in the format.
+     * The component does NOT automatically add time formatting - you must specify it explicitly.
+     *
+     * ## Available Format Tokens:
+     *
+     * ### Date Tokens:
+     * - `YYYY` - 4 digit year (2024)
+     * - `YY` - 2 digit year (24)
+     * - `MM` - 2 digit month (01-12)
+     * - `M` - 1-2 digit month (1-12)
+     * - `DD` - 2 digit day (01-31)
+     * - `D` - 1-2 digit day (1-31)
+     *
+     * ### Time Tokens (24-hour):
+     * - `HH` - 2 digit hour 24-hour format (00-23)
+     * - `H` - 1-2 digit hour 24-hour format (0-23)
+     * - `mm` - 2 digit minutes (00-59)
+     * - `m` - 1-2 digit minutes (0-59)
+     * - `ss` - 2 digit seconds (00-59)
+     * - `s` - 1-2 digit seconds (0-59)
+     *
+     * ### Time Tokens (12-hour):
+     * - `hh` - 2 digit hour 12-hour format (01-12)
+     * - `h` - 1-2 digit hour 12-hour format (1-12)
+     * - `A` - AM/PM uppercase
+     * - `a` - am/pm lowercase
+     *
+     * ## Common Format Examples:
+     *
+     * ### Date Only Formats:
+     * ```typescript
+     * format: 'DD/MM/YYYY'     // 15/01/2024 (European)
+     * format: 'MM/DD/YYYY'     // 01/15/2024 (US)
+     * format: 'YYYY-MM-DD'     // 2024-01-15 (ISO)
+     * format: 'D/M/YYYY'       // 15/1/2024 (no leading zeros)
+     * format: 'DD-MM-YY'       // 15-01-24 (short year)
+     * ```
+     *
+     * ### Date + Time Formats (24-hour):
+     * ```typescript
+     * format: 'DD/MM/YYYY HH:mm'     // 15/01/2024 14:30
+     * format: 'MM/DD/YYYY HH:mm'     // 01/15/2024 14:30
+     * format: 'YYYY-MM-DD HH:mm'     // 2024-01-15 14:30
+     * format: 'DD/MM/YYYY HH:mm:ss'  // 15/01/2024 14:30:45
+     * ```
+     *
+     * ### Date + Time Formats (12-hour):
+     * ```typescript
+     * format: 'DD/MM/YYYY hh:mm A'   // 15/01/2024 02:30 PM
+     * format: 'MM/DD/YYYY hh:mm A'   // 01/15/2024 02:30 PM
+     * format: 'DD/MM/YYYY h:mm a'    // 15/01/2024 2:30 pm
+     * ```
+     *
+     * ## Usage with TimePicker:
+     *
+     * ```typescript
+     * // ❌ WRONG - Will only show date even with timePicker=true
+     * const wrongLocale: NgxDatexLocale = {
+     *   format: 'DD/MM/YYYY'  // Missing time format!
+     * };
+     *
+     * // ✅ CORRECT - Includes time format for timePicker=true
+     * const correctLocale24h: NgxDatexLocale = {
+     *   format: 'DD/MM/YYYY HH:mm'  // Shows: 15/01/2024 14:30
+     * };
+     *
+     * const correctLocale12h: NgxDatexLocale = {
+     *   format: 'DD/MM/YYYY hh:mm A'  // Shows: 15/01/2024 02:30 PM
+     * };
+     * ```
+     *
+     * ## Component Usage Examples:
+     *
+     * ```html
+     * <!-- Date only picker -->
+     * <ngx-datex
+     *   [locale]="{ format: 'DD/MM/YYYY' }"
+     *   [timePicker]="false">
+     * </ngx-datex>
+     *
+     * <!-- Date + time picker (24h) -->
+     * <ngx-datex
+     *   [locale]="{ format: 'DD/MM/YYYY HH:mm' }"
+     *   [timePicker]="true"
+     *   [timePicker24Hour]="true">
+     * </ngx-datex>
+     *
+     * <!-- Date + time picker (12h) -->
+     * <ngx-datex
+     *   [locale]="{ format: 'MM/DD/YYYY hh:mm A' }"
+     *   [timePicker]="true"
+     *   [timePicker24Hour]="false">
+     * </ngx-datex>
+     * ```
+     *
+     * @default 'DD/MM/YYYY'
+     */
     format?: string;
     /** Separator between start and end dates */
     separator?: string;
@@ -371,28 +553,165 @@ declare class NgxDatex implements OnInit, OnDestroy, ControlValueAccessor {
      * @example
      * ```typescript
      * const config: NgxDatexConfig = {
-     *   dateFormat: 'DD/MM/YYYY',
      *   firstDayOfWeek: 1,
-     *   businessDaysOnly: true
+     *   businessDaysOnly: true,
+     *   showWeekNumbers: true
      * };
      * ```
      */
     config: _angular_core.InputSignal<NgxDatexConfig>;
     /**
      * Localization settings for internationalization.
-     * Controls language, date formats, and UI text.
+     * Controls language, date formats, UI text, and regional preferences.
+     *
+     * This is the primary configuration for adapting the date picker to different
+     * languages, regions, and cultural conventions. The most important property
+     * is `format`, which controls how dates are displayed and parsed.
      *
      * @default SPANISH_LOCALE
      *
-     * @example
+     * ## Key Properties:
+     *
+     * - **`format`**: Date format string (REQUIRED for timePicker usage)
+     * - **`locale`**: Locale code for @formkit/tempo formatting
+     * - **`separator`**: Text between start and end dates
+     * - **`daysOfWeek`**: Short day names array
+     * - **`monthNames`**: Full month names array
+     * - **`applyLabel`**: Apply button text
+     * - **`cancelLabel`**: Cancel button text
+     *
+     * ## Format Examples:
+     *
+     * ### Date Only Formats:
+     * ```typescript
+     * // European format (DD/MM/YYYY)
+     * const europeanLocale: NgxDatexLocale = {
+     *   locale: 'es-ES',
+     *   format: 'DD/MM/YYYY',        // 15/01/2024
+     *   separator: ' - ',
+     *   daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+     *   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+     *                'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
+     *   applyLabel: 'Aplicar',
+     *   cancelLabel: 'Cancelar',
+     *   firstDay: 1  // Monday first
+     * };
+     *
+     * // US format (MM/DD/YYYY)
+     * const usLocale: NgxDatexLocale = {
+     *   locale: 'en-US',
+     *   format: 'MM/DD/YYYY',        // 01/15/2024
+     *   separator: ' - ',
+     *   daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+     *   monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
+     *                'July', 'August', 'September', 'October', 'November', 'December'],
+     *   applyLabel: 'Apply',
+     *   cancelLabel: 'Cancel',
+     *   firstDay: 0  // Sunday first
+     * };
+     *
+     * // ISO format (YYYY-MM-DD)
+     * const isoLocale: NgxDatexLocale = {
+     *   locale: 'en-US',
+     *   format: 'YYYY-MM-DD',        // 2024-01-15
+     *   separator: ' / ',
+     *   daysOfWeek: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+     *   monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
+     *                'July', 'August', 'September', 'October', 'November', 'December'],
+     *   applyLabel: 'Apply',
+     *   cancelLabel: 'Cancel',
+     *   firstDay: 1  // Monday first
+     * };
+     * ```
+     *
+     * ### Time Picker Formats:
      * ```typescript
+     * // Spanish with 24-hour time
+     * const spanishWithTime: NgxDatexLocale = {
+     *   locale: 'es-ES',
+     *   format: 'DD/MM/YYYY HH:mm',  // 15/01/2024 14:30
+     *   separator: ' - ',
+     *   daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+     *   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+     *                'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
+     *   applyLabel: 'Aplicar',
+     *   cancelLabel: 'Cancelar'
+     * };
+     *
+     * // US with 12-hour time
+     * const usWithTime: NgxDatexLocale = {
+     *   locale: 'en-US',
+     *   format: 'MM/DD/YYYY hh:mm A', // 01/15/2024 02:30 PM
+     *   separator: ' - ',
+     *   daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+     *   monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
+     *                'July', 'August', 'September', 'October', 'November', 'December'],
+     *   applyLabel: 'Apply',
+     *   cancelLabel: 'Cancel'
+     * };
+     *
+     * // French locale
      * const frenchLocale: NgxDatexLocale = {
+     *   locale: 'fr-FR',
      *   format: 'DD/MM/YYYY',
+     *   separator: ' au ',
      *   daysOfWeek: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
+     *   monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+     *                'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
      *   applyLabel: 'Appliquer',
-     *   cancelLabel: 'Annuler'
+     *   cancelLabel: 'Annuler',
+     *   customRangeLabel: 'Plage personnalisée',
+     *   firstDay: 1
+     * };
+     *
+     * // German locale
+     * const germanLocale: NgxDatexLocale = {
+     *   locale: 'de-DE',
+     *   format: 'DD.MM.YYYY',
+     *   separator: ' bis ',
+     *   daysOfWeek: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
+     *   monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
+     *                'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
+     *   applyLabel: 'Anwenden',
+     *   cancelLabel: 'Abbrechen',
+     *   customRangeLabel: 'Benutzerdefiniert',
+     *   firstDay: 1
      * };
      * ```
+     *
+     * ## Component Usage:
+     * ```html
+     * <!-- Spanish date picker -->
+     * <ngx-datex [locale]="spanishLocale"></ngx-datex>
+     *
+     * <!-- US date picker with time -->
+     * <ngx-datex
+     *   [locale]="usWithTime"
+     *   [timePicker]="true"
+     *   [timePicker24Hour]="false">
+     * </ngx-datex>
+     *
+     * <!-- French date picker -->
+     * <ngx-datex [locale]="frenchLocale"></ngx-datex>
+     *
+     * <!-- Using predefined locales -->
+     * <ngx-datex [locale]="SPANISH_LOCALE"></ngx-datex>
+     * <ngx-datex [locale]="US_ENGLISH_LOCALE"></ngx-datex>
+     * <ngx-datex [locale]="SPANISH_LOCALE_WITH_TIME"></ngx-datex>
+     * ```
+     *
+     * ## Important Notes:
+     *
+     * 1. **TimePicker Format**: When `timePicker=true`, you MUST include time tokens in the format
+     * 2. **Locale Code**: The `locale` property affects @formkit/tempo formatting behavior
+     * 3. **Day Order**: `daysOfWeek` array should match your `firstDay` setting
+     * 4. **Separator**: Used between start and end dates in range display
+     * 5. **Predefined Locales**: Use exported constants like `SPANISH_LOCALE`, `US_ENGLISH_LOCALE`
+     *
+     * @see {@link NgxDatexLocale} for complete interface documentation
+     * @see {@link SPANISH_LOCALE} for default Spanish configuration
+     * @see {@link US_ENGLISH_LOCALE} for US English configuration
+     * @see {@link SPANISH_LOCALE_WITH_TIME} for Spanish with time support
      */
     locale: _angular_core.InputSignal<NgxDatexLocale>;
     /**
@@ -500,6 +819,18 @@ declare class NgxDatex implements OnInit, OnDestroy, ControlValueAccessor {
      * ```
      */
     showCheckbox: _angular_core.InputSignal<boolean>;
+    /**
+     * Initial checked state of the checkbox.
+     * Only applies when showCheckbox is true.
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <ngx-datex [showCheckbox]="true" [checkboxChecked]="true"></ngx-datex>
+     * ```
+     */
+    checkboxChecked: _angular_core.InputSignal<boolean>;
     /**
      * Position of the checkbox relative to the input.
      *
@@ -1403,6 +1734,11 @@ declare class NgxDatex implements OnInit, OnDestroy, ControlValueAccessor {
      * ```
      */
     closeCalendar(): void;
+    /**
+     * Closes the calendar and checks for pending changes to emit.
+     * Used when calendar is closed without explicit apply (ESC, click outside, etc.)
+     */
+    private closeCalendarWithChangeCheck;
     /**
      * Applies the current selection and closes the calendar.
      * Only works if there's a valid selection to apply.
@@ -1454,6 +1790,28 @@ declare class NgxDatex implements OnInit, OnDestroy, ControlValueAccessor {
      */
     selectRange(label: string): void;
     selectCustomRange(): void;
+    /**
+     * Gets the current checkbox state.
+     *
+     * @returns Current checkbox checked state
+     *
+     * @example
+     * ```typescript
+     * const isChecked = this.datePicker.getCheckboxValue();
+     * ```
+     */
+    getCheckboxValue(): boolean;
+    /**
+     * Sets the checkbox state programmatically.
+     *
+     * @param checked - New checkbox state
+     *
+     * @example
+     * ```typescript
+     * this.datePicker.setCheckboxValue(true);
+     * ```
+     */
+    setCheckboxValue(checked: boolean): void;
     onInputClick(): void;
     onInputFocus(): void;
     onInputBlur(): void;
@@ -1507,7 +1865,7 @@ declare class NgxDatex implements OnInit, OnDestroy, ControlValueAccessor {
     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>;
+    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; }; "checkboxChecked": { "alias": "checkboxChecked"; "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>;
 }
 
 /**
@@ -1528,6 +1886,74 @@ declare class NgxDatex implements OnInit, OnDestroy, ControlValueAccessor {
  * ```
  */
 declare const SPANISH_LOCALE: NgxDatexLocale;
+/**
+ * Spanish locale with time picker support (24-hour format).
+ *
+ * Same as SPANISH_LOCALE but with DD/MM/YYYY HH:mm format for time picker usage.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="SPANISH_LOCALE_WITH_TIME" [timePicker]="true"></ngx-datex>
+ * ```
+ */
+declare const SPANISH_LOCALE_WITH_TIME: NgxDatexLocale;
+/**
+ * Spanish locale with time picker support (12-hour format).
+ *
+ * Same as SPANISH_LOCALE but with DD/MM/YYYY hh:mm A format for 12-hour time picker.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="SPANISH_LOCALE_WITH_TIME_12H" [timePicker]="true" [timePicker24Hour]="false"></ngx-datex>
+ * ```
+ */
+declare const SPANISH_LOCALE_WITH_TIME_12H: NgxDatexLocale;
+/**
+ * US English locale configuration.
+ *
+ * Provides English language support with MM/DD/YYYY format,
+ * English day/month names, and Sunday as the first day of the week.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="US_ENGLISH_LOCALE"></ngx-datex>
+ * ```
+ */
+declare const US_ENGLISH_LOCALE: NgxDatexLocale;
+/**
+ * US English locale with time picker support (12-hour format).
+ *
+ * Same as US_ENGLISH_LOCALE but with MM/DD/YYYY hh:mm A format for time picker usage.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="US_ENGLISH_LOCALE_WITH_TIME" [timePicker]="true" [timePicker24Hour]="false"></ngx-datex>
+ * ```
+ */
+declare const US_ENGLISH_LOCALE_WITH_TIME: NgxDatexLocale;
+/**
+ * ISO format locale configuration.
+ *
+ * Provides YYYY-MM-DD format commonly used in APIs and databases,
+ * with English labels and Monday as the first day of the week.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="ISO_LOCALE"></ngx-datex>
+ * ```
+ */
+declare const ISO_LOCALE: NgxDatexLocale;
+/**
+ * ISO format locale with time picker support (24-hour format).
+ *
+ * Same as ISO_LOCALE but with YYYY-MM-DD HH:mm format for time picker usage.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="ISO_LOCALE_WITH_TIME" [timePicker]="true"></ngx-datex>
+ * ```
+ */
+declare const ISO_LOCALE_WITH_TIME: NgxDatexLocale;
 /**
  * Default Material Design light theme.
  *
@@ -1576,8 +2002,8 @@ declare const DEFAULT_RANGES: Record<string, [Date, Date]>;
  *
  * // Update configuration
  * this.datexService.updateConfig({
- *   dateFormat: 'DD/MM/YYYY',
- *   firstDayOfWeek: 1
+ *   firstDayOfWeek: 1,
+ *   businessDaysOnly: true
  * });
  *
  * // Format a date range
@@ -1595,9 +2021,9 @@ declare class NgxDatexService {
      * @example
      * ```typescript
      * this.datexService.updateConfig({
-     *   dateFormat: 'YYYY-MM-DD',
      *   firstDayOfWeek: 0, // Sunday
-     *   businessDaysOnly: true
+     *   businessDaysOnly: true,
+     *   showWeekNumbers: true
      * });
      * ```
      */
@@ -2000,10 +2426,10 @@ declare class 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;
+    setStartDate(startDate: Date, minDate: Date | null, maxDate: Date | null, timePicker: boolean, timePickerIncrement: number, currentStartDate?: Date | null): Date;
     setEndDate(endDate: Date, startDate: Date, maxDate: Date | null, maxSpan: {
         [key: string]: number;
-    } | null, timePicker: boolean, timePickerIncrement: number): Date;
+    } | null, timePicker: boolean, timePickerIncrement: number, currentEndDate?: Date | null): Date;
     private getMaxSpanDays;
     isDateDisabled(date: Date, minDate: Date | null, maxDate: Date | null, maxSpan: {
         [key: string]: number;
@@ -2148,14 +2574,47 @@ declare function isSameMonth(date1: Date, date2: Date): boolean;
  * ```
  */
 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;
+/**
+ * Formats a date using the specified format string and locale.
+ * Follows vanilla-daterangepicker logic by always using locale.format.
+ *
+ * @param date - The date to format
+ * @param formatStr - Format string (e.g., 'DD/MM/YYYY', 'MM/DD/YYYY HH:mm')
+ * @param locale - Optional locale string (e.g., 'es-ES', 'en-US')
+ * @returns Formatted date string
+ *
+ * @example
+ * ```typescript
+ * const date = new Date('2024-01-15 14:30:00');
+ * formatDateValue(date, 'DD/MM/YYYY'); // '15/01/2024'
+ * formatDateValue(date, 'MM/DD/YYYY hh:mm A'); // '01/15/2024 02:30 PM'
+ * formatDateValue(date, 'DD/MM/YYYY HH:mm', 'es-ES'); // '15/01/2024 14:30'
+ * ```
+ */
+declare function formatDateValue(date: Date, formatStr: string, locale?: string): string;
+/**
+ * Parses a date string using the specified format string and locale.
+ * Follows vanilla-daterangepicker logic by always using locale.format.
+ *
+ * @param dateStr - The date string to parse
+ * @param formatStr - Format string (e.g., 'DD/MM/YYYY', 'MM/DD/YYYY HH:mm')
+ * @param locale - Optional locale string (e.g., 'es-ES', 'en-US')
+ * @returns Parsed Date object
+ *
+ * @example
+ * ```typescript
+ * const date1 = parseDateValue('15/01/2024', 'DD/MM/YYYY'); // January 15, 2024
+ * const date2 = parseDateValue('01/15/2024 02:30 PM', 'MM/DD/YYYY hh:mm A'); // January 15, 2024 14:30
+ * const date3 = parseDateValue('15/01/2024 14:30', 'DD/MM/YYYY HH:mm', 'es-ES'); // January 15, 2024 14:30
+ * ```
+ */
+declare function parseDateValue(dateStr: string, formatStr: string, locale?: string): Date;
+declare function isSameDate(date1: Date, date2: Date, unit?: 'day' | 'month' | 'year' | 'minute' | 'second'): 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 { DEFAULT_RANGES, ISO_LOCALE, ISO_LOCALE_WITH_TIME, MATERIAL_LIGHT_THEME, NgxDatex, NgxDatexCalendarService, NgxDatexOverlayService, NgxDatexService, NgxDatexTimePickerService, SPANISH_LOCALE, SPANISH_LOCALE_WITH_TIME, SPANISH_LOCALE_WITH_TIME_12H, US_ENGLISH_LOCALE, US_ENGLISH_LOCALE_WITH_TIME, 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 };