@festo-ui/angular 10.0.1-dev.852 → 10.1.0

package/index.d.ts

@@ -1399,15 +1399,90 @@ declare class FngDatePickerComponent implements ControlValueAccessor {
     hint: string | undefined;
     error: string | undefined;
     options: FngDatePickerOptions;
-    /** A locale code for the locale format rules to use. */
-    locale: string | undefined;
-    format: string | undefined;
-    /** The time zone. A time zone offset from GMT (such as `'+0430'`) */
-    timezone: string | undefined;
+    private _deprecatedFormat;
+    private _deprecatedLocale;
+    private _deprecatedTimezone;
+    /**
+     * @deprecated Use the `formatDate` input instead.
+     * This property is kept for backward compatibility and will be removed in version 11.0.0.
+     * Migration: Replace `format` with a custom `formatDate` function.
+     */
+    set format(value: string | undefined);
+    /**
+     * @deprecated Use Angular's built-in locale support with injection tokens instead.
+     * This property is kept for backward compatibility and will be removed in version 11.0.0.
+     * Migration: Use LOCALE_ID injection token or pass locale via the `formatDate` function.
+     */
+    set locale(value: string | undefined);
+    /**
+     * @deprecated Timezone handling is now delegated to the JavaScript Date object and platform implementation.
+     * This property is kept for backward compatibility and will be removed in version 11.0.0.
+     * Migration: Timezone conversion should be handled in your application layer or via the `formatDate` function.
+     */
+    set timezone(value: string | undefined);
+    /**
+     * Function to format the date for display in the input field.
+     * Defaults to using the application's configured locale (via LOCALE_ID) for consistent, predictable formatting.
+     *
+     * @default Uses `Intl.DateTimeFormat(localeId)` where localeId is the injected LOCALE_ID token.
+     * This ensures consistent rendering across all users and browser/OS locales.
+     *
+     * @example
+     * // Custom format with specific options (e.g., short date format)
+     * formatDate = (date: Date) => {
+     *   return new Intl.DateTimeFormat('en-US', {
+     *     year: 'numeric',
+     *     month: '2-digit',
+     *     day: '2-digit'
+     *   }).format(date);
+     * }
+     *
+     * @example
+     * // Custom format using date-fns
+     * formatDate = (date: Date) => {
+     *   return format(date, 'dd/MM/yyyy', { locale: enUS });
+     * }
+     *
+     * @example
+     * // Custom format using day.js
+     * formatDate = (date: Date) => {
+     *   return dayjs(date).locale('en-US').format('DD/MM/YYYY');
+     * }
+     */
+    formatDate: (date: Date) => string;
+    /**
+     * Function to parse user input into a Date object.
+     * If not provided, uses intelligent heuristics to guess the date format (dd-mm-yyyy by default).
+     * This input gives consumers full control over locale-aware date parsing.
+     *
+     * @example
+     * // Custom parser using date-fns
+     * parseDate = (input: string) => {
+     *   const locale = enUS; // or your desired locale
+     *   try {
+     *     return parse(input, 'MM/dd/yyyy', new Date(), { locale });
+     *   } catch {
+     *     return null;
+     *   }
+     * }
+     *
+     * @example
+     * // Custom parser using day.js
+     * parseDate = (input: string) => {
+     *   const parsed = dayjs(input, 'MM/DD/YYYY');
+     *   return parsed.isValid() ? parsed.toDate() : null;
+     * }
+     */
+    parseDate?: (input: string) => Date | null;
     get required(): boolean;
     set required(value: boolean);
     protected innerRequired: boolean;
+    /** If true, allows manual input in the date picker field */
+    allowManualInput: boolean;
+    /** If true, opening the calendar is triggered on input click; if false, only the calendar icon opens it */
+    openOnInputClick: boolean;
     connector: ElementRef | undefined;
+    dateInput: ElementRef | undefined;
     width: string | undefined;
     display: string;
     get displayValue(): string;
@@ -1415,6 +1490,9 @@ declare class FngDatePickerComponent implements ControlValueAccessor {
     private innerValue;
     private complete;
     private datePicker;
+    private static readonly DATE_PATTERN;
+    /** Expand 2-digit years: 0–99 → 2000–2099 */
+    private static expandYear;
     constructor(overlay: Overlay, localeDefault: string, cd: ChangeDetectorRef);
     onTouched: (() => any) | undefined;
     onChange: ((date: Date) => any) | undefined;
@@ -1426,8 +1504,21 @@ declare class FngDatePickerComponent implements ControlValueAccessor {
     setDisabledState?(isDisabled: boolean): void;
     toggle(event: Event): void;
     private dispose;
+    onDateInputBlur(): void;
+    /**
+     * Default date parsing implementation using intelligent heuristics.
+     * Tries to guess the date format by analyzing which parts could be day/month/year.
+     * Accepts common separators: / - . and space
+     * Defaults to dd-mm-yyyy when ambiguous.
+     *
+     * This is used as a fallback when no custom parseDate input is provided.
+     * For locale-aware or custom format parsing, provide your own parseDate function.
+     */
+    private defaultParseDate;
+    onDateInputClick(event: Event): void;
+    onDateInputKeyDown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FngDatePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FngDatePickerComponent, "fng-date-picker", never, { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "error": { "alias": "error"; "required": false; }; "options": { "alias": "options"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "format": { "alias": "format"; "required": false; }; "timezone": { "alias": "timezone"; "required": false; }; "required": { "alias": "required"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FngDatePickerComponent, "fng-date-picker", never, { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "error": { "alias": "error"; "required": false; }; "options": { "alias": "options"; "required": false; }; "format": { "alias": "format"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "timezone": { "alias": "timezone"; "required": false; }; "formatDate": { "alias": "formatDate"; "required": false; }; "parseDate": { "alias": "parseDate"; "required": false; }; "required": { "alias": "required"; "required": false; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; }; "openOnInputClick": { "alias": "openOnInputClick"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
 interface FngDateRangePickerOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/angular",
-  "version": "10.0.1-dev.852",
+  "version": "10.1.0",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",
@@ -40,4 +40,4 @@
     }
   },
   "sideEffects": false
-}
+}