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

package/fesm2022/festo-ui-angular.mjs

@@ -4440,6 +4440,11 @@ class FngFlatpickrComponent {
             this.dateChange.emit(dateOption[0]);
         }
     }
+    setDate(date, triggerChange = true, dateFormat) {
+        if (this.datePicker) {
+            this.datePicker.setDate(date, triggerChange, dateFormat);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FngFlatpickrComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FngFlatpickrComponent, isStandalone: true, selector: "fng-flatpickr", inputs: { date: "date", options: "options" }, outputs: { dateChange: "dateChange" }, viewQueries: [{ propertyName: "datePickerRef", first: true, predicate: ["datePicker"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"fng-flatpickr\">\r\n  <div #datePicker></div>\r\n</div>\r\n", encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -4478,6 +4483,42 @@ class FngDatePickerComponent {
     set disabled(value) {
         this.innerDisabled = coerceBooleanProperty(value);
     }
+    /**
+     * @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) {
+        this._deprecatedFormat = value;
+        if (value) {
+            console.warn('FngDatePickerComponent: The "format" input is deprecated and will be removed in version 11.0.0. ' +
+                'Use the "formatDate" input instead to provide a custom formatting function.');
+        }
+    }
+    /**
+     * @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) {
+        this._deprecatedLocale = value;
+        if (value) {
+            console.warn('FngDatePickerComponent: The "locale" input is deprecated and will be removed in version 11.0.0. ' +
+                'Use Angular\'s LOCALE_ID injection token or configure locale in your formatDate function instead.');
+        }
+    }
+    /**
+     * @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) {
+        this._deprecatedTimezone = value;
+        if (value) {
+            console.warn('FngDatePickerComponent: The "timezone" input is deprecated and will be removed in version 11.0.0. ' +
+                'Timezone handling should be managed at the application layer using libraries like date-fns or day.js.');
+        }
+    }
     get required() {
         return this.innerRequired;
     }
@@ -4488,10 +4529,12 @@ class FngDatePickerComponent {
         if (!this.value) {
             return '';
         }
-        const format = this.format || 'mediumDate';
-        const locale = this.locale || this.localeDefault;
-        const timezone = this.timezone;
-        return formatDate(this.value, format, locale, timezone);
+        return this.formatDate(this.value);
+    }
+    static { this.DATE_PATTERN = /^(\d{1,4})[/\-.\s](\d{1,2})[/\-.\s](\d{1,4})$/; }
+    /** Expand 2-digit years: 0–99 → 2000–2099 */
+    static expandYear(y) {
+        return y >= 0 && y < 100 ? y + 2000 : y;
     }
     constructor(overlay, localeDefault, cd) {
         this.overlay = overlay;
@@ -4499,7 +4542,51 @@ class FngDatePickerComponent {
         this.cd = cd;
         this.innerDisabled = false;
         this.options = {};
+        /**
+         * 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');
+         * }
+         */
+        this.formatDate = (date) => {
+            if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+                return '';
+            }
+            const locale = this._deprecatedLocale || this.localeDefault;
+            const options = {};
+            if (this._deprecatedTimezone) {
+                options.timeZone = this._deprecatedTimezone;
+            }
+            return new Intl.DateTimeFormat(locale, options).format(date);
+        };
         this.innerRequired = false;
+        /** If true, allows manual input in the date picker field */
+        this.allowManualInput = false;
+        /** If true, opening the calendar is triggered on input click; if false, only the calendar icon opens it */
+        this.openOnInputClick = true;
         this.display = 'block';
         this.innerValue = new Date();
         this.complete = new Subject();
@@ -4590,19 +4677,144 @@ class FngDatePickerComponent {
             this.datePickerRef.dispose();
             this.datePickerRef = undefined;
         }
+        if (this.datePicker != null) {
+            this.datePicker = undefined;
+        }
         if (this.complete != null) {
             this.complete.next(true);
             this.complete.complete();
         }
     }
+    onDateInputBlur() {
+        if (this.allowManualInput && this.dateInput?.nativeElement) {
+            const raw = this.dateInput.nativeElement.value;
+            if (raw) {
+                // Only parse if calendar is NOT open - flatpickr handles it when open
+                if (!this.datePicker) {
+                    const parsedDate = this.parseDate ? this.parseDate(raw) : this.defaultParseDate(raw);
+                    if (parsedDate && !isNaN(parsedDate.getTime())) {
+                        this.value = parsedDate;
+                    }
+                    else {
+                        // Reset input to last valid value on invalid input
+                        this.dateInput.nativeElement.value = this.displayValue;
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * 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.
+     */
+    defaultParseDate(dateString) {
+        const trim = dateString.trim();
+        const match = trim.match(FngDatePickerComponent.DATE_PATTERN);
+        if (!match) {
+            return null;
+        }
+        let part1 = parseInt(match[1], 10);
+        let part2 = parseInt(match[2], 10);
+        let part3 = parseInt(match[3], 10);
+        // Try to determine the format intelligently
+        // If any part is > 31, it's definitely the year
+        let day, month, year;
+        if (part1 > 31) {
+            // Format: yyyy-mm-dd or yyyy-dd-mm
+            year = part1;
+            // Try both interpretations and pick the valid one
+            const attempt1 = new Date(year, part2 - 1, part3);
+            const attempt2 = new Date(year, part3 - 1, part2);
+            if (!isNaN(attempt1.getTime()) && attempt1.getDate() === part3 && attempt1.getMonth() === part2 - 1) {
+                return attempt1;
+            }
+            if (!isNaN(attempt2.getTime()) && attempt2.getDate() === part2 && attempt2.getMonth() === part3 - 1) {
+                return attempt2;
+            }
+            return null;
+        }
+        else if (part3 > 31) {
+            // Format: dd-mm-yyyy or mm-dd-yyyy
+            year = part3;
+            // Try dd-mm-yyyy first (more common internationally)
+            let result = new Date(year, part2 - 1, part1);
+            if (!isNaN(result.getTime()) && result.getDate() === part1 && result.getMonth() === part2 - 1) {
+                return result;
+            }
+            // Then try mm-dd-yyyy (US format)
+            result = new Date(year, part1 - 1, part2);
+            if (!isNaN(result.getTime()) && result.getDate() === part2 && result.getMonth() === part1 - 1) {
+                return result;
+            }
+            return null;
+        }
+        else if (part2 > 12) {
+            // part2 is clearly a day (> 12), so format is part1-day-part3 or similar
+            // Ambiguous between yyyy-dd-mm and mm-yyyy-dd which doesn't make sense
+            // Assume mm-dd-yyyy or dd-mm-yyyy, and since part2 > 12 it's dd, so mm-dd-yyyy
+            month = part1 - 1;
+            day = part2;
+            year = FngDatePickerComponent.expandYear(part3);
+            const result = new Date(year, month, day);
+            if (!isNaN(result.getTime()) && result.getDate() === day && result.getMonth() === month) {
+                return result;
+            }
+            return null;
+        }
+        else if (part1 > 12) {
+            // part1 is clearly a day (> 12), so format is dd-mm-yyyy
+            day = part1;
+            month = part2 - 1;
+            year = FngDatePickerComponent.expandYear(part3);
+            const result = new Date(year, month, day);
+            if (!isNaN(result.getTime()) && result.getDate() === day && result.getMonth() === month) {
+                return result;
+            }
+            return null;
+        }
+        else {
+            // All parts <= 12, ambiguous - try dd-mm-yyyy first (more common)
+            const expandedPart3 = FngDatePickerComponent.expandYear(part3);
+            let result = new Date(expandedPart3, part2 - 1, part1);
+            if (!isNaN(result.getTime()) && result.getDate() === part1 && result.getMonth() === part2 - 1) {
+                return result;
+            }
+            // Then try mm-dd-yyyy
+            result = new Date(expandedPart3, part1 - 1, part2);
+            if (!isNaN(result.getTime()) && result.getDate() === part2 && result.getMonth() === part1 - 1) {
+                return result;
+            }
+            return null;
+        }
+    }
+    onDateInputClick(event) {
+        if (this.allowManualInput && !this.openOnInputClick) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    onDateInputKeyDown(event) {
+        if (this.allowManualInput) {
+            event.stopPropagation();
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.onDateInputBlur();
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FngDatePickerComponent, deps: [{ token: i1$2.Overlay }, { token: LOCALE_ID }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FngDatePickerComponent, isStandalone: true, selector: "fng-date-picker", inputs: { value: "value", disabled: "disabled", hint: "hint", error: "error", options: "options", locale: "locale", format: "format", timezone: "timezone", required: "required", width: "width" }, host: { listeners: { "document:keydown": "hide($event)" }, properties: { "style.width": "this.width", "style.display": "this.display" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FngDatePickerComponent, isStandalone: true, selector: "fng-date-picker", inputs: { value: "value", disabled: "disabled", hint: "hint", error: "error", options: "options", format: "format", locale: "locale", timezone: "timezone", formatDate: "formatDate", parseDate: "parseDate", required: "required", allowManualInput: "allowManualInput", openOnInputClick: "openOnInputClick", width: "width" }, host: { listeners: { "document:keydown": "hide($event)" }, properties: { "style.width": "this.width", "style.display": "this.display" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FngDatePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "connector", first: true, predicate: ["connector"], descendants: true, static: true }], ngImport: i0, template: "<label #connector class=\"fng-date-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i\n    class=\"fng-icon-svg fng-icon-svg--time-calendar\"\n    [class.fwe-color-hero]=\"datePickerRef != null\"\n    [class.fwe-color-control-disabled]=\"disabled\"\n  ></i>\n  <input\n    aria-label=\"picked date\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"datePickerRef != null\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled\"\n    />\n    <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n    @if (hint) {\n      <span class=\"fwe-input-text-info\">{{ hint }}</span>\n    }\n    @if (error) {\n      <span class=\"fwe-input-text-invalid\">{{ error }}</span>\n    }\n  </label>\n", styles: [".fwe-border-hero{border-color:var(--fwe-hero)!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "connector", first: true, predicate: ["connector"], descendants: true, static: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<label\n  #connector\n  class=\"fng-date-picker fwe-input-text fwe-input-text-icon\"\n  [class.fng-date-picker--editable]=\"allowManualInput\"\n  (click)=\"openOnInputClick ? toggle($event) : null\"\n>\n  <i\n    class=\"fng-icon-svg fng-icon-svg--time-calendar\"\n    [class.fwe-color-hero]=\"datePickerRef != null\"\n    [class.fwe-color-control-disabled]=\"disabled\"\n    (click)=\"$event.stopPropagation(); toggle($event)\"\n  ></i>\n  <input\n    #dateInput\n    aria-label=\"picked date\"\n    type=\"text\"\n    [readonly]=\"!allowManualInput\"\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"datePickerRef != null\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled\"\n    (click)=\"onDateInputClick($event)\"\n    (keydown)=\"onDateInputKeyDown($event)\"\n    (blur)=\"onDateInputBlur()\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  @if (hint) {\n    <span class=\"fwe-input-text-info\">{{ hint }}</span>\n  }\n  @if (error) {\n    <span class=\"fwe-input-text-invalid\">{{ error }}</span>\n  }\n</label>\n", styles: [".fwe-border-hero{border-color:var(--fwe-hero)!important}.fng-date-picker,.fng-date-picker i,.fng-date-picker input{cursor:pointer}.fng-date-picker--editable input{cursor:text}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FngDatePickerComponent, decorators: [{
             type: Component,
@@ -4612,7 +4824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => FngDatePickerComponent),
                             multi: true
                         }
-                    ], encapsulation: ViewEncapsulation.None, template: "<label #connector class=\"fng-date-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i\n    class=\"fng-icon-svg fng-icon-svg--time-calendar\"\n    [class.fwe-color-hero]=\"datePickerRef != null\"\n    [class.fwe-color-control-disabled]=\"disabled\"\n  ></i>\n  <input\n    aria-label=\"picked date\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"datePickerRef != null\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled\"\n    />\n    <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n    @if (hint) {\n      <span class=\"fwe-input-text-info\">{{ hint }}</span>\n    }\n    @if (error) {\n      <span class=\"fwe-input-text-invalid\">{{ error }}</span>\n    }\n  </label>\n", styles: [".fwe-border-hero{border-color:var(--fwe-hero)!important}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<label\n  #connector\n  class=\"fng-date-picker fwe-input-text fwe-input-text-icon\"\n  [class.fng-date-picker--editable]=\"allowManualInput\"\n  (click)=\"openOnInputClick ? toggle($event) : null\"\n>\n  <i\n    class=\"fng-icon-svg fng-icon-svg--time-calendar\"\n    [class.fwe-color-hero]=\"datePickerRef != null\"\n    [class.fwe-color-control-disabled]=\"disabled\"\n    (click)=\"$event.stopPropagation(); toggle($event)\"\n  ></i>\n  <input\n    #dateInput\n    aria-label=\"picked date\"\n    type=\"text\"\n    [readonly]=\"!allowManualInput\"\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"datePickerRef != null\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled\"\n    (click)=\"onDateInputClick($event)\"\n    (keydown)=\"onDateInputKeyDown($event)\"\n    (blur)=\"onDateInputBlur()\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  @if (hint) {\n    <span class=\"fwe-input-text-info\">{{ hint }}</span>\n  }\n  @if (error) {\n    <span class=\"fwe-input-text-invalid\">{{ error }}</span>\n  }\n</label>\n", styles: [".fwe-border-hero{border-color:var(--fwe-hero)!important}.fng-date-picker,.fng-date-picker i,.fng-date-picker input{cursor:pointer}.fng-date-picker--editable input{cursor:text}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -4626,17 +4838,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], options: [{
                 type: Input
-            }], locale: [{
-                type: Input
             }], format: [{
                 type: Input
+            }], locale: [{
+                type: Input
             }], timezone: [{
                 type: Input
+            }], formatDate: [{
+                type: Input
+            }], parseDate: [{
+                type: Input
             }], required: [{
                 type: Input
+            }], allowManualInput: [{
+                type: Input
+            }], openOnInputClick: [{
+                type: Input
             }], connector: [{
                 type: ViewChild,
                 args: ['connector', { static: true }]
+            }], dateInput: [{
+                type: ViewChild,
+                args: ['dateInput']
             }], width: [{
                 type: Input
             }, {