npm - @fundamental-ngx/platform - Versions diffs - 0.58.0-rc.8 → 0.58.0-rc.80 - Mend

@fundamental-ngx/platform 0.58.0-rc.8 → 0.58.0-rc.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/fesm2022/fundamental-ngx-platform-form.mjs CHANGED Viewed

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, ContentChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, Inject, Injectable, forwardRef, EventEmitter, inject, DestroyRef, TemplateRef, ElementRef, booleanAttribute, ViewChildren, ContentChildren, ViewChild, Output, Optional, Self, SkipSelf, Attribute, NgModule, HostListener, NgZone, Injector, Pipe, ChangeDetectorRef, signal, isDevMode, computed, Renderer2, LOCALE_ID } from '@angular/core';
+import { InjectionToken, ContentChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, Inject, Injectable, forwardRef, EventEmitter, inject, DestroyRef, TemplateRef, ElementRef, booleanAttribute, ViewChildren, ContentChildren, ViewChild, Output, Optional, Self, SkipSelf, Attribute, NgModule, input, HostListener, NgZone, Injector, Pipe, ChangeDetectorRef, signal, isDevMode, computed, Renderer2, LOCALE_ID } from '@angular/core';
 import * as i1$4 from '@fundamental-ngx/cdk/forms';
 import { FD_FORM_FIELD, FD_FORM_FIELD_CONTROL, CvaControl, CvaDirective } from '@fundamental-ngx/cdk/forms';
 import * as i1 from '@fundamental-ngx/platform/shared';
 import { ColumnLayoutGridClass, ResponsiveBreakPointConfig, RESPONSIVE_BREAKPOINTS_CONFIG, BaseInput, InLineLayoutCollectionBaseInput, coerceArraySafe, MatchingStrategy, CollectionBaseInput, isOptionItem, isJsObject, isFunction, isDataSource, ArrayMultiInputDataSource, ObservableMultiInputDataSource, isString, MultiInputDataSource, DATA_PROVIDERS, FormFieldGroup, FormGroupContainer, ArrayComboBoxDataSource, ObservableComboBoxDataSource, ComboBoxDataSource, FDP_DO_CHECK, FDP_FORM_SUBMIT, ArrayMultiComboBoxDataSource, ObservableMultiComboBoxDataSource, isSelectableOptionItem, MultiComboBoxDataSource } from '@fundamental-ngx/platform/shared';
 import * as i1$1 from '@angular/forms';
 import { Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule, ControlContainer, NgForm, NgControl, FormGroupDirective } from '@angular/forms';
-import { uniqBy, merge as merge$1, cloneDeep } from 'lodash-es';
+import * as i2 from '@fundamental-ngx/cdk/utils';
+import { uniqBy, RangeSelector, KeyUtil, TemplateDirective, InitialFocusDirective, DisplayFnPipe, warnOnce, DynamicComponentService, merge as merge$1, cloneDeep, isFunction as isFunction$1, selectStrategy, resizeObservable, SearchHighlightPipe, destroyObservable, RtlService, OnlyDigitsDirective } from '@fundamental-ngx/cdk/utils';
 import * as i2$2 from 'rxjs';
 import { Subject, BehaviorSubject, combineLatest, filter, tap, Subscription, isObservable, fromEvent, merge, of, timer, interval } from 'rxjs';
 import { distinctUntilChanged, map, switchMap, startWith, debounceTime, tap as tap$1, filter as filter$1, take, takeUntil, skip } from 'rxjs/operators';
@@ -21,8 +22,6 @@ import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent } from
 import { GRID_COLUMNS_NUMBER } from '@fundamental-ngx/core/layout-grid';
 import * as i2$1 from '@fundamental-ngx/core/content-density';
 import { ContentDensityModule, contentDensityObserverProviders, CONTENT_DENSITY_DIRECTIVE, ContentDensityGlobalKeyword, ContentDensityObserver } from '@fundamental-ngx/core/content-density';
-import * as i2 from '@fundamental-ngx/cdk/utils';
-import { RangeSelector, KeyUtil, TemplateDirective, InitialFocusDirective, DisplayFnPipe, warnOnce, DynamicComponentService, isFunction as isFunction$1, selectStrategy, resizeObservable, SearchHighlightPipe, destroyObservable, RtlService, OnlyDigitsDirective } from '@fundamental-ngx/cdk/utils';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CheckboxComponent as CheckboxComponent$1 } from '@fundamental-ngx/core/checkbox';
 import { FdCalendarViewEnum } from '@fundamental-ngx/core/calendar';
@@ -1542,6 +1541,19 @@ class PlatformDatePickerComponent extends BaseInput {
         this.selectedMultipleDateRangesChange = new EventEmitter();
         /** Event thrown every time calendar active view is changed */
         this.activeViewChange = new EventEmitter();
+        /**
+         * Whether to show the calendar legend for special days.
+         * When enabled, displays a legend below the calendar showing the special day markers and their descriptions.
+         * @default false
+         */
+        this.showCalendarLegend = input(false, ...(ngDevMode ? [{ debugName: "showCalendarLegend", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Whether to display the calendar legend in column layout.
+         * When true, legend items are displayed vertically in a single column.
+         * When false, legend items are displayed horizontally in rows.
+         * @default false
+         */
+        this.legendCol = input(false, ...(ngDevMode ? [{ debugName: "legendCol", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** @hidden */
         this._datePickerValid = true;
         /** @hidden */
@@ -1649,13 +1661,13 @@ class PlatformDatePickerComponent extends BaseInput {
         this.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PlatformDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PlatformDatePickerComponent, isStandalone: true, selector: "fdp-date-picker", inputs: { value: "value", type: "type", selectedDate: "selectedDate", selectedMultipleDates: "selectedMultipleDates", selectedRangeDate: "selectedRangeDate", selectedMultipleDateRanges: "selectedMultipleDateRanges", startingDayOfWeek: "startingDayOfWeek", rangeHoverEffect: "rangeHoverEffect", useValidation: "useValidation", showTodayButton: "showTodayButton", todayButtonLabel: "todayButtonLabel", allowNull: "allowNull", activeView: "activeView", placement: "placement", appendTo: "appendTo", closeOnDateChoose: "closeOnDateChoose", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", showWeekNumbers: "showWeekNumbers", allowMultipleSelection: "allowMultipleSelection", isOpen: "isOpen", inline: "inline", processInputOnBlur: "processInputOnBlur", preventScrollOnFocus: "preventScrollOnFocus", mobile: "mobile", mobileConfig: "mobileConfig", mobileLandscape: "mobileLandscape", mobilePortrait: "mobilePortrait", disableFunction: "disableFunction", disableRangeStartFunction: "disableRangeStartFunction", disableRangeEndFunction: "disableRangeEndFunction" }, outputs: { isOpenChange: "isOpenChange", selectedDateChange: "selectedDateChange", selectedMultipleDatesChange: "selectedMultipleDatesChange", selectedRangeDateChange: "selectedRangeDateChange", selectedMultipleDateRangesChange: "selectedMultipleDateRangesChange", activeViewChange: "activeViewChange" }, host: { listeners: { "blur": "onTouched()" } }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatePickerComponent, multi: true }], viewQueries: [{ propertyName: "fdDatePickerComponent", first: true, predicate: DatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-date-picker\n    [inputId]=\"id\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [type]=\"type\"\n    [state]=\"state\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [selectedDate]=\"selectedDate\"\n    [selectedMultipleDates]=\"selectedMultipleDates\"\n    [selectedRangeDate]=\"selectedRangeDate\"\n    [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n    [showTodayButton]=\"showTodayButton\"\n    [todayButtonLabel]=\"todayButtonLabel\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [rangeHoverEffect]=\"rangeHoverEffect\"\n    [useValidation]=\"useValidation\"\n    [allowNull]=\"allowNull\"\n    [activeView]=\"activeView\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [disabled]=\"disabled\"\n    [closeOnDateChoose]=\"closeOnDateChoose\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [allowMultipleSelection]=\"allowMultipleSelection\"\n    [isOpen]=\"isOpen\"\n    [disableFunction]=\"disableFunction\"\n    [disableRangeStartFunction]=\"disableRangeStartFunction\"\n    [disableRangeEndFunction]=\"disableRangeEndFunction\"\n    [inline]=\"inline\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDateChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (selectedDateChange)=\"handleSelectedDateChange($event)\"\n    (selectedMultipleDatesChange)=\"handleSelectedMultipleDatesChange($event)\"\n    (selectedRangeDateChange)=\"handleSelectedRangeDateChange($event)\"\n    (selectedMultipleDateRangesChange)=\"handleSelectedMultipleDateRangesChange($event)\"\n>\n    <ng-content></ng-content>\n</fd-date-picker>\n", dependencies: [{ kind: "component", type: DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "customDateTimeFormat", "message", "messageTriggers", "selectedDate", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "isOpen", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "dateRangeFormat", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "activeViewChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: PlatformDatePickerComponent, isStandalone: true, selector: "fdp-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDates: { classPropertyName: "selectedMultipleDates", publicName: "selectedMultipleDates", isSignal: false, isRequired: false, transformFunction: null }, selectedRangeDate: { classPropertyName: "selectedRangeDate", publicName: "selectedRangeDate", isSignal: false, isRequired: false, transformFunction: null }, selectedMultipleDateRanges: { classPropertyName: "selectedMultipleDateRanges", publicName: "selectedMultipleDateRanges", isSignal: false, isRequired: false, transformFunction: null }, startingDayOfWeek: { classPropertyName: "startingDayOfWeek", publicName: "startingDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, rangeHoverEffect: { classPropertyName: "rangeHoverEffect", publicName: "rangeHoverEffect", isSignal: false, isRequired: false, transformFunction: null }, useValidation: { classPropertyName: "useValidation", publicName: "useValidation", isSignal: false, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: false, isRequired: false, transformFunction: null }, todayButtonLabel: { classPropertyName: "todayButtonLabel", publicName: "todayButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, closeOnDateChoose: { classPropertyName: "closeOnDateChoose", publicName: "closeOnDateChoose", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, buttonFocusable: { classPropertyName: "buttonFocusable", publicName: "buttonFocusable", isSignal: false, isRequired: false, transformFunction: null }, specialDaysRules: { classPropertyName: "specialDaysRules", publicName: "specialDaysRules", isSignal: false, isRequired: false, transformFunction: null }, yearGrid: { classPropertyName: "yearGrid", publicName: "yearGrid", isSignal: false, isRequired: false, transformFunction: null }, aggregatedYearGrid: { classPropertyName: "aggregatedYearGrid", publicName: "aggregatedYearGrid", isSignal: false, isRequired: false, transformFunction: null }, markWeekends: { classPropertyName: "markWeekends", publicName: "markWeekends", isSignal: false, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: false, isRequired: false, transformFunction: null }, allowMultipleSelection: { classPropertyName: "allowMultipleSelection", publicName: "allowMultipleSelection", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: null }, processInputOnBlur: { classPropertyName: "processInputOnBlur", publicName: "processInputOnBlur", isSignal: false, isRequired: false, transformFunction: null }, preventScrollOnFocus: { classPropertyName: "preventScrollOnFocus", publicName: "preventScrollOnFocus", isSignal: false, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: false, isRequired: false, transformFunction: null }, mobileConfig: { classPropertyName: "mobileConfig", publicName: "mobileConfig", isSignal: false, isRequired: false, transformFunction: null }, mobileLandscape: { classPropertyName: "mobileLandscape", publicName: "mobileLandscape", isSignal: false, isRequired: false, transformFunction: null }, mobilePortrait: { classPropertyName: "mobilePortrait", publicName: "mobilePortrait", isSignal: false, isRequired: false, transformFunction: null }, showCalendarLegend: { classPropertyName: "showCalendarLegend", publicName: "showCalendarLegend", isSignal: true, isRequired: false, transformFunction: null }, legendCol: { classPropertyName: "legendCol", publicName: "legendCol", isSignal: true, isRequired: false, transformFunction: null }, disableFunction: { classPropertyName: "disableFunction", publicName: "disableFunction", isSignal: false, isRequired: false, transformFunction: null }, disableRangeStartFunction: { classPropertyName: "disableRangeStartFunction", publicName: "disableRangeStartFunction", isSignal: false, isRequired: false, transformFunction: null }, disableRangeEndFunction: { classPropertyName: "disableRangeEndFunction", publicName: "disableRangeEndFunction", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", selectedDateChange: "selectedDateChange", selectedMultipleDatesChange: "selectedMultipleDatesChange", selectedRangeDateChange: "selectedRangeDateChange", selectedMultipleDateRangesChange: "selectedMultipleDateRangesChange", activeViewChange: "activeViewChange" }, host: { listeners: { "blur": "onTouched()" } }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatePickerComponent, multi: true }], viewQueries: [{ propertyName: "fdDatePickerComponent", first: true, predicate: DatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-date-picker\n    [inputId]=\"id\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [type]=\"type\"\n    [state]=\"state\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [selectedDate]=\"selectedDate\"\n    [selectedMultipleDates]=\"selectedMultipleDates\"\n    [selectedRangeDate]=\"selectedRangeDate\"\n    [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n    [showTodayButton]=\"showTodayButton\"\n    [todayButtonLabel]=\"todayButtonLabel\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [rangeHoverEffect]=\"rangeHoverEffect\"\n    [useValidation]=\"useValidation\"\n    [allowNull]=\"allowNull\"\n    [activeView]=\"activeView\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [disabled]=\"disabled\"\n    [closeOnDateChoose]=\"closeOnDateChoose\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [showCalendarLegend]=\"showCalendarLegend()\"\n    [legendCol]=\"legendCol()\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [allowMultipleSelection]=\"allowMultipleSelection\"\n    [isOpen]=\"isOpen\"\n    [disableFunction]=\"disableFunction\"\n    [disableRangeStartFunction]=\"disableRangeStartFunction\"\n    [disableRangeEndFunction]=\"disableRangeEndFunction\"\n    [inline]=\"inline\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDateChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (selectedDateChange)=\"handleSelectedDateChange($event)\"\n    (selectedMultipleDatesChange)=\"handleSelectedMultipleDatesChange($event)\"\n    (selectedRangeDateChange)=\"handleSelectedRangeDateChange($event)\"\n    (selectedMultipleDateRangesChange)=\"handleSelectedMultipleDateRangesChange($event)\"\n>\n    <ng-content></ng-content>\n</fd-date-picker>\n", dependencies: [{ kind: "component", type: DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "customDateTimeFormat", "message", "messageTriggers", "selectedDate", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "dateRangeFormat", "showCalendarLegend", "legendCol", "state", "isOpen", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "activeViewChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PlatformDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-date-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatePickerComponent, multi: true }], host: {
                         '(blur)': 'onTouched()'
-                    }, imports: [DatePickerComponent, FormsModule], template: "<fd-date-picker\n    [inputId]=\"id\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [type]=\"type\"\n    [state]=\"state\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [selectedDate]=\"selectedDate\"\n    [selectedMultipleDates]=\"selectedMultipleDates\"\n    [selectedRangeDate]=\"selectedRangeDate\"\n    [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n    [showTodayButton]=\"showTodayButton\"\n    [todayButtonLabel]=\"todayButtonLabel\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [rangeHoverEffect]=\"rangeHoverEffect\"\n    [useValidation]=\"useValidation\"\n    [allowNull]=\"allowNull\"\n    [activeView]=\"activeView\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [disabled]=\"disabled\"\n    [closeOnDateChoose]=\"closeOnDateChoose\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [allowMultipleSelection]=\"allowMultipleSelection\"\n    [isOpen]=\"isOpen\"\n    [disableFunction]=\"disableFunction\"\n    [disableRangeStartFunction]=\"disableRangeStartFunction\"\n    [disableRangeEndFunction]=\"disableRangeEndFunction\"\n    [inline]=\"inline\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDateChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (selectedDateChange)=\"handleSelectedDateChange($event)\"\n    (selectedMultipleDatesChange)=\"handleSelectedMultipleDatesChange($event)\"\n    (selectedRangeDateChange)=\"handleSelectedRangeDateChange($event)\"\n    (selectedMultipleDateRangesChange)=\"handleSelectedMultipleDateRangesChange($event)\"\n>\n    <ng-content></ng-content>\n</fd-date-picker>\n" }]
+                    }, imports: [DatePickerComponent, FormsModule], template: "<fd-date-picker\n    [inputId]=\"id\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [type]=\"type\"\n    [state]=\"state\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [selectedDate]=\"selectedDate\"\n    [selectedMultipleDates]=\"selectedMultipleDates\"\n    [selectedRangeDate]=\"selectedRangeDate\"\n    [selectedMultipleDateRanges]=\"selectedMultipleDateRanges\"\n    [showTodayButton]=\"showTodayButton\"\n    [todayButtonLabel]=\"todayButtonLabel\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [rangeHoverEffect]=\"rangeHoverEffect\"\n    [useValidation]=\"useValidation\"\n    [allowNull]=\"allowNull\"\n    [activeView]=\"activeView\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [disabled]=\"disabled\"\n    [closeOnDateChoose]=\"closeOnDateChoose\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [showCalendarLegend]=\"showCalendarLegend()\"\n    [legendCol]=\"legendCol()\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [allowMultipleSelection]=\"allowMultipleSelection\"\n    [isOpen]=\"isOpen\"\n    [disableFunction]=\"disableFunction\"\n    [disableRangeStartFunction]=\"disableRangeStartFunction\"\n    [disableRangeEndFunction]=\"disableRangeEndFunction\"\n    [inline]=\"inline\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDateChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (selectedDateChange)=\"handleSelectedDateChange($event)\"\n    (selectedMultipleDatesChange)=\"handleSelectedMultipleDatesChange($event)\"\n    (selectedRangeDateChange)=\"handleSelectedRangeDateChange($event)\"\n    (selectedMultipleDateRangesChange)=\"handleSelectedMultipleDateRangesChange($event)\"\n>\n    <ng-content></ng-content>\n</fd-date-picker>\n" }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], type: [{
@@ -1751,7 +1763,7 @@ function createMissingDateImplementationError$1(provider) {
 class DynamicFormGeneratorDatepickerComponent extends BaseDynamicFormGeneratorControl {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicFormGeneratorDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: DynamicFormGeneratorDatepickerComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-datepicker", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-date-picker\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [name]=\"name\"\n            [formControlName]=\"name\"\n            [inline]=\"formItem.guiOptions?.inline !== false\"\n            [allowNull]=\"false\"\n        ></fdp-date-picker>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: PlatformDatePickerComponent, selector: "fdp-date-picker", inputs: ["value", "type", "selectedDate", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "showTodayButton", "todayButtonLabel", "allowNull", "activeView", "placement", "appendTo", "closeOnDateChoose", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "isOpen", "inline", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "activeViewChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: DynamicFormGeneratorDatepickerComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-datepicker", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-date-picker\n            [id]=\"id\"\n            [placeholder]=\"placeholder\"\n            [name]=\"name\"\n            [formControlName]=\"name\"\n            [inline]=\"formItem.guiOptions?.inline !== false\"\n            [allowNull]=\"false\"\n        ></fdp-date-picker>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: PlatformDatePickerComponent, selector: "fdp-date-picker", inputs: ["value", "type", "selectedDate", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "showTodayButton", "todayButtonLabel", "allowNull", "activeView", "placement", "appendTo", "closeOnDateChoose", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "isOpen", "inline", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "showCalendarLegend", "legendCol", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "activeViewChange"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicFormGeneratorDatepickerComponent, decorators: [{
             type: Component,
@@ -2880,6 +2892,13 @@ class AutoCompleteDirective {
                 if (!this._triggerTypeAhead()) {
                     return;
                 }
+                // Check if this is a new typing session after programmatic input modification
+                const currentNativeValue = this._element.value;
+                if (this.inputText.length > currentNativeValue.length + 1) {
+                    // Reset inputText to current value and don't do typeahead
+                    this.inputText = currentNativeValue;
+                    return;
+                }
                 this._oldValue = this.inputText;
                 const item = this._searchByStrategy();
                 if (item) {
@@ -4582,7 +4601,7 @@ class FormGeneratorService {
      */
     async getFormValue(form, renderValue = false) {
         await this._triggerFieldsOnchange(form);
-        const formValue = cloneDeep(form.value);
+        const formValue = structuredClone(form.value);
         for (const [i, control] of Object.entries(form.controls)) {
             const formItem = control.formItem;
             if (!isFormFieldItem(formItem)) {
@@ -4645,7 +4664,7 @@ class FormGeneratorService {
      * @returns `Set` where key is item name, and boolean value if field needs to be shown.
      */
     async checkVisibleFormItems(form) {
-        const formValue = this._getFormValueWithoutUngrouped(cloneDeep(form.value));
+        const formValue = this._getFormValueWithoutUngrouped(structuredClone(form.value));
         return await this._checkFormControlsVisibility(form, formValue);
     }
     /**
@@ -6787,6 +6806,8 @@ class ComboboxComponent extends BaseCombobox {
         this.providers = providers;
         /** Event emitted when item is selected. */
         this.selectionChange = new EventEmitter();
+        /** @hidden */
+        this._itemMousedown = false;
     }
     /** @hidden */
     ngOnInit() {
@@ -6829,7 +6850,7 @@ class ComboboxComponent extends BaseCombobox {
         this.selectionChange.emit(event);
     }
     /** @hidden Method to set selected item */
-    selectOptionItem(item) {
+    selectOptionItem(item, shouldClosePopover = true) {
         if (this.mobile) {
             this._selectedElement = item;
             this.inputText = item.label;
@@ -6838,7 +6859,9 @@ class ComboboxComponent extends BaseCombobox {
         }
         this.inputText = item.label;
         this._checkAndUpdate(item);
-        this.isOpenChangeHandle(false);
+        if (shouldClosePopover) {
+            this.isOpenChangeHandle(false);
+        }
     }
     /** @hidden Method to set as selected */
     setAsSelected(item) {
@@ -6887,6 +6910,13 @@ class ComboboxComponent extends BaseCombobox {
         this.isOpenChangeHandle(false);
     }
     /** @hidden */
+    onItemFocused(value) {
+        if (!this._itemMousedown && !this.mobile) {
+            this.selectOptionItem(value, false);
+        }
+        this._itemMousedown = false;
+    }
+    /** @hidden */
     _getLabelledBy() {
         let retVal = this.ariaLabelledBy;
         if (this.stateMessage) {
@@ -6936,7 +6966,7 @@ class ComboboxComponent extends BaseCombobox {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ComboboxComponent, isStandalone: true, selector: "fdp-combobox", outputs: { selectionChange: "selectionChange" }, providers: [
             { provide: FD_FORM_FIELD_CONTROL, useExisting: ComboboxComponent, multi: true },
             contentDensityObserverProviders()
-        ], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"autoResize ? null : minWidth\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        additionalBodyClass=\"fdp-combobox__popover\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [state]=\"mobile && isOpen ? null : state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [isControl]=\"true\"\n            (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled\"\n            [glyphAriaLabel]=\"ariaLabel\"\n            (click)=\"openInMobileMode()\"\n        >\n            <input\n                #searchInputElement\n                fdp-auto-complete\n                [options]=\"_suggestions\"\n                [inputText]=\"inputText\"\n                [mobile]=\"mobile\"\n                (onComplete)=\"_onCompleteTerm($event)\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"_getLabelledBy()\"\n                [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                [attr.aria-required]=\"required\"\n                fd-input-group-input\n                tabindex=\"0\"\n                [id]=\"id\"\n                [name]=\"name\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [disabled]=\"disabled\"\n                [ngModel]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged($event)\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched()\"\n                (blur)=\"_onBlur($event)\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                [attr.aria-readonly]=\"readonly\"\n            />\n        </fd-input-group>\n        @if (isOpen) {\n            <div class=\"fdp-combobox__count-list-results\" role=\"status\">\n                @if (_flatSuggestions.length || '0'; as count) {\n                    {{\n                        (count === 1\n                            ? 'platformCombobox.countListResultsSingular'\n                            : 'platformCombobox.countListResultsPlural'\n                        ) | fdTranslate: { count: count }\n                    }}\n                }\n            </div>\n        }\n        @if (mobile || isOpen ? null : !!stateMessage) {\n            <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n        }\n    </fd-form-input-message-group>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        [hasMessage]=\"!!stateMessage\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-combobox__list\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [byline]=\"byline\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n    >\n        @if (stateMessage) {\n            <li\n                [attr.aria-label]=\"stateMessage\"\n                fd-list-message\n                tabindex=\"-1\"\n                role=\"presentation\"\n                [type]=\"state || 'default'\"\n                [innerHtml]=\"stateMessage\"\n                [attr.id]=\"'fdp-list-message-combobox-state-message-' + id\"\n            ></li>\n        }\n        @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n            <li\n                fd-list-message\n                tabindex=\"-1\"\n                role=\"presentation\"\n                [type]=\"state || 'default'\"\n                [attr.id]=\"'fdp-list-message-combobox-error-message-' + id\"\n            >\n                <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n            </li>\n        }\n        <ng-content></ng-content>\n        @if (isGroup) {\n            @for (group of _suggestions; track group) {\n                @if (!groupItemTemplate) {\n                    <li fd-list-group-header role=\"option\">\n                        <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n                    </li>\n                } @else {\n                    <ng-template\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-template>\n                }\n                @for (optionItem of group.children; track optionItem; let i = $index) {\n                    <li\n                        (click)=\"handleOptionItem(optionItem)\"\n                        fd-list-item\n                        role=\"option\"\n                        [tabindex]=\"0\"\n                        (keyDown)=\"handlePressEnter($event, optionItem)\"\n                        [selected]=\"isSelectedOptionItem(optionItem)\"\n                        [value]=\"optionItem\"\n                    >\n                        <ng-template\n                            [ngTemplateOutlet]=\"listItem\"\n                            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (optionItem of _suggestions; track optionItem; let i = $index) {\n                <li\n                    (click)=\"handleOptionItem(optionItem)\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (keyDown)=\"handlePressEnter($event, optionItem)\"\n                    [selected]=\"isSelectedOptionItem(optionItem)\"\n                    [value]=\"optionItem\"\n                >\n                    <ng-template\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (isSelectedOptionItem(optionItem) && !!selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(isSelectedOptionItem(optionItem) && selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!optionItemTemplate) {\n        <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight: inputText\"></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3$2.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i3$2.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i6.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"autoResize ? null : minWidth\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        additionalBodyClass=\"fdp-combobox__popover\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [state]=\"mobile && isOpen ? null : state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [isControl]=\"true\"\n            (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled\"\n            [glyphAriaLabel]=\"ariaLabel\"\n            (click)=\"openInMobileMode()\"\n        >\n            <input\n                #searchInputElement\n                fdp-auto-complete\n                [options]=\"_suggestions\"\n                [inputText]=\"inputText\"\n                [mobile]=\"mobile\"\n                (onComplete)=\"_onCompleteTerm($event)\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"_getLabelledBy()\"\n                [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                [attr.aria-required]=\"required\"\n                fd-input-group-input\n                tabindex=\"0\"\n                [id]=\"id\"\n                [name]=\"name\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [disabled]=\"disabled\"\n                [ngModel]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged($event)\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched()\"\n                (blur)=\"_onBlur($event)\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                [attr.aria-readonly]=\"readonly\"\n            />\n        </fd-input-group>\n        @if (isOpen) {\n            <div class=\"fdp-combobox__count-list-results\" role=\"status\">\n                @if (_flatSuggestions.length || '0'; as count) {\n                    {{\n                        (count === 1\n                            ? 'platformCombobox.countListResultsSingular'\n                            : 'platformCombobox.countListResultsPlural'\n                        ) | fdTranslate: { count: count }\n                    }}\n                }\n            </div>\n        }\n        @if (mobile || isOpen ? null : !!stateMessage) {\n            <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n        }\n    </fd-form-input-message-group>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        [hasMessage]=\"!!stateMessage\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-combobox__list\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [byline]=\"byline\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n    >\n        @if (stateMessage) {\n            <li\n                [attr.aria-label]=\"stateMessage\"\n                fd-list-message\n                tabindex=\"-1\"\n                role=\"presentation\"\n                [type]=\"state || 'default'\"\n                [innerHtml]=\"stateMessage\"\n                [attr.id]=\"'fdp-list-message-combobox-state-message-' + id\"\n            ></li>\n        }\n        @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n            <li\n                fd-list-message\n                tabindex=\"-1\"\n                role=\"presentation\"\n                [type]=\"state || 'default'\"\n                [attr.id]=\"'fdp-list-message-combobox-error-message-' + id\"\n            >\n                <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n            </li>\n        }\n        <ng-content></ng-content>\n        @if (isGroup) {\n            @for (group of _suggestions; track group) {\n                @if (!groupItemTemplate) {\n                    <li fd-list-group-header role=\"option\">\n                        <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n                    </li>\n                } @else {\n                    <ng-template\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-template>\n                }\n                @for (optionItem of group.children; track optionItem; let i = $index) {\n                    <li\n                        (click)=\"handleOptionItem(optionItem)\"\n                        (mousedown)=\"_itemMousedown = true\"\n                        (focus)=\"onItemFocused(optionItem)\"\n                        fd-list-item\n                        ariaRole=\"option\"\n                        [tabindex]=\"0\"\n                        (keyDown)=\"handlePressEnter($event, optionItem)\"\n                        [selected]=\"isSelectedOptionItem(optionItem)\"\n                        [value]=\"optionItem\"\n                    >\n                        <ng-template\n                            [ngTemplateOutlet]=\"listItem\"\n                            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (optionItem of _suggestions; track optionItem; let i = $index) {\n                <li\n                    (click)=\"handleOptionItem(optionItem)\"\n                    (mousedown)=\"_itemMousedown = true\"\n                    (focus)=\"onItemFocused(optionItem)\"\n                    fd-list-item\n                    ariaRole=\"option\"\n                    [tabindex]=\"0\"\n                    (keyDown)=\"handlePressEnter($event, optionItem)\"\n                    [selected]=\"isSelectedOptionItem(optionItem)\"\n                    [value]=\"optionItem\"\n                >\n                    <ng-template\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (isSelectedOptionItem(optionItem) && !!selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(isSelectedOptionItem(optionItem) && selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!optionItemTemplate) {\n        <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight: inputText\"></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3$2.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i3$2.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i6.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -6959,7 +6989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         SearchHighlightPipe,
                         FdTranslatePipe,
                         ContentDensityModule
-                    ], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"autoResize ? null : minWidth\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        additionalBodyClass=\"fdp-combobox__popover\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [state]=\"mobile && isOpen ? null : state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [isControl]=\"true\"\n            (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled\"\n            [glyphAriaLabel]=\"ariaLabel\"\n            (click)=\"openInMobileMode()\"\n        >\n            <input\n                #searchInputElement\n                fdp-auto-complete\n                [options]=\"_suggestions\"\n                [inputText]=\"inputText\"\n                [mobile]=\"mobile\"\n                (onComplete)=\"_onCompleteTerm($event)\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"_getLabelledBy()\"\n                [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                [attr.aria-required]=\"required\"\n                fd-input-group-input\n                tabindex=\"0\"\n                [id]=\"id\"\n                [name]=\"name\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [disabled]=\"disabled\"\n                [ngModel]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged($event)\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched()\"\n                (blur)=\"_onBlur($event)\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                [attr.aria-readonly]=\"readonly\"\n            />\n        </fd-input-group>\n        @if (isOpen) {\n            <div class=\"fdp-combobox__count-list-results\" role=\"status\">\n                @if (_flatSuggestions.length || '0'; as count) {\n                    {{\n                        (count === 1\n                            ? 'platformCombobox.countListResultsSingular'\n                            : 'platformCombobox.countListResultsPlural'\n                        ) | fdTranslate: { count: count }\n                    }}\n                }\n            </div>\n        }\n        @if (mobile || isOpen ? null : !!stateMessage) {\n            <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n        }\n    </fd-form-input-message-group>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        [hasMessage]=\"!!stateMessage\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-combobox__list\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [byline]=\"byline\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n    >\n        @if (stateMessage) {\n            <li\n                [attr.aria-label]=\"stateMessage\"\n                fd-list-message\n                tabindex=\"-1\"\n                role=\"presentation\"\n                [type]=\"state || 'default'\"\n                [innerHtml]=\"stateMessage\"\n                [attr.id]=\"'fdp-list-message-combobox-state-message-' + id\"\n            ></li>\n        }\n        @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n            <li\n                fd-list-message\n                tabindex=\"-1\"\n                role=\"presentation\"\n                [type]=\"state || 'default'\"\n                [attr.id]=\"'fdp-list-message-combobox-error-message-' + id\"\n            >\n                <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n            </li>\n        }\n        <ng-content></ng-content>\n        @if (isGroup) {\n            @for (group of _suggestions; track group) {\n                @if (!groupItemTemplate) {\n                    <li fd-list-group-header role=\"option\">\n                        <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n                    </li>\n                } @else {\n                    <ng-template\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-template>\n                }\n                @for (optionItem of group.children; track optionItem; let i = $index) {\n                    <li\n                        (click)=\"handleOptionItem(optionItem)\"\n                        fd-list-item\n                        role=\"option\"\n                        [tabindex]=\"0\"\n                        (keyDown)=\"handlePressEnter($event, optionItem)\"\n                        [selected]=\"isSelectedOptionItem(optionItem)\"\n                        [value]=\"optionItem\"\n                    >\n                        <ng-template\n                            [ngTemplateOutlet]=\"listItem\"\n                            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (optionItem of _suggestions; track optionItem; let i = $index) {\n                <li\n                    (click)=\"handleOptionItem(optionItem)\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (keyDown)=\"handlePressEnter($event, optionItem)\"\n                    [selected]=\"isSelectedOptionItem(optionItem)\"\n                    [value]=\"optionItem\"\n                >\n                    <ng-template\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (isSelectedOptionItem(optionItem) && !!selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(isSelectedOptionItem(optionItem) && selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!optionItemTemplate) {\n        <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight: inputText\"></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"] }]
+                    ], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"autoResize ? null : minWidth\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        additionalBodyClass=\"fdp-combobox__popover\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [state]=\"mobile && isOpen ? null : state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [isControl]=\"true\"\n            (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled\"\n            [glyphAriaLabel]=\"ariaLabel\"\n            (click)=\"openInMobileMode()\"\n        >\n            <input\n                #searchInputElement\n                fdp-auto-complete\n                [options]=\"_suggestions\"\n                [inputText]=\"inputText\"\n                [mobile]=\"mobile\"\n                (onComplete)=\"_onCompleteTerm($event)\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"_getLabelledBy()\"\n                [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                [attr.aria-required]=\"required\"\n                fd-input-group-input\n                tabindex=\"0\"\n                [id]=\"id\"\n                [name]=\"name\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [disabled]=\"disabled\"\n                [ngModel]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged($event)\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched()\"\n                (blur)=\"_onBlur($event)\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                [attr.aria-readonly]=\"readonly\"\n            />\n        </fd-input-group>\n        @if (isOpen) {\n            <div class=\"fdp-combobox__count-list-results\" role=\"status\">\n                @if (_flatSuggestions.length || '0'; as count) {\n                    {{\n                        (count === 1\n                            ? 'platformCombobox.countListResultsSingular'\n                            : 'platformCombobox.countListResultsPlural'\n                        ) | fdTranslate: { count: count }\n                    }}\n                }\n            </div>\n        }\n        @if (mobile || isOpen ? null : !!stateMessage) {\n            <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n        }\n    </fd-form-input-message-group>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        [hasMessage]=\"!!stateMessage\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-combobox__list\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [byline]=\"byline\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n    >\n        @if (stateMessage) {\n            <li\n                [attr.aria-label]=\"stateMessage\"\n                fd-list-message\n                tabindex=\"-1\"\n                role=\"presentation\"\n                [type]=\"state || 'default'\"\n                [innerHtml]=\"stateMessage\"\n                [attr.id]=\"'fdp-list-message-combobox-state-message-' + id\"\n            ></li>\n        }\n        @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n            <li\n                fd-list-message\n                tabindex=\"-1\"\n                role=\"presentation\"\n                [type]=\"state || 'default'\"\n                [attr.id]=\"'fdp-list-message-combobox-error-message-' + id\"\n            >\n                <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n            </li>\n        }\n        <ng-content></ng-content>\n        @if (isGroup) {\n            @for (group of _suggestions; track group) {\n                @if (!groupItemTemplate) {\n                    <li fd-list-group-header role=\"option\">\n                        <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n                    </li>\n                } @else {\n                    <ng-template\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-template>\n                }\n                @for (optionItem of group.children; track optionItem; let i = $index) {\n                    <li\n                        (click)=\"handleOptionItem(optionItem)\"\n                        (mousedown)=\"_itemMousedown = true\"\n                        (focus)=\"onItemFocused(optionItem)\"\n                        fd-list-item\n                        ariaRole=\"option\"\n                        [tabindex]=\"0\"\n                        (keyDown)=\"handlePressEnter($event, optionItem)\"\n                        [selected]=\"isSelectedOptionItem(optionItem)\"\n                        [value]=\"optionItem\"\n                    >\n                        <ng-template\n                            [ngTemplateOutlet]=\"listItem\"\n                            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (optionItem of _suggestions; track optionItem; let i = $index) {\n                <li\n                    (click)=\"handleOptionItem(optionItem)\"\n                    (mousedown)=\"_itemMousedown = true\"\n                    (focus)=\"onItemFocused(optionItem)\"\n                    fd-list-item\n                    ariaRole=\"option\"\n                    [tabindex]=\"0\"\n                    (keyDown)=\"handlePressEnter($event, optionItem)\"\n                    [selected]=\"isSelectedOptionItem(optionItem)\"\n                    [value]=\"optionItem\"\n                >\n                    <ng-template\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (isSelectedOptionItem(optionItem) && !!selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(isSelectedOptionItem(optionItem) && selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!optionItemTemplate) {\n        <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight: inputText\"></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.DialogConfig, decorators: [{
                     type: Optional
                 }] }, { type: i2.DynamicComponentService }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: Map, decorators: [{
@@ -7144,6 +7174,19 @@ class PlatformDatetimePickerComponent extends BaseInput {
         this.datetimeChange = new EventEmitter();
         /** Event emitted when popover closes. */
         this.onClose = new EventEmitter();
+        /**
+         * Whether to show the calendar legend for special days.
+         * When enabled, displays a legend below the calendar showing the special day markers and their descriptions.
+         * @default false
+         */
+        this.showCalendarLegend = input(false, ...(ngDevMode ? [{ debugName: "showCalendarLegend", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Whether to display the calendar legend in column layout.
+         * When true, legend items are displayed vertically in a single column.
+         * When false, legend items are displayed horizontally in rows.
+         * @default false
+         */
+        this.legendCol = input(false, ...(ngDevMode ? [{ debugName: "legendCol", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** @hidden */
         this._dateTimeAdapter = inject(DatetimeAdapter, {
             optional: true
@@ -7242,11 +7285,11 @@ class PlatformDatetimePickerComponent extends BaseInput {
         customPopoverEl.style.display = 'inline';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PlatformDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PlatformDatetimePickerComponent, isStandalone: true, selector: "fdp-datetime-picker", inputs: { value: "value", placement: "placement", appendTo: "appendTo", meridian: "meridian", displaySeconds: "displaySeconds", displayMinutes: "displayMinutes", displayHours: "displayHours", useValidation: "useValidation", isOpen: "isOpen", startingDayOfWeek: "startingDayOfWeek", activeView: "activeView", allowNull: "allowNull", keepTwoDigitsTime: "keepTwoDigitsTime", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", spinnerButtons: "spinnerButtons", showWeekNumbers: "showWeekNumbers", showFooter: "showFooter", processInputOnBlur: "processInputOnBlur", preventScrollOnFocus: "preventScrollOnFocus", mobile: "mobile", mobileConfig: "mobileConfig", mobileLandscape: "mobileLandscape", mobilePortrait: "mobilePortrait", disableFunction: "disableFunction" }, outputs: { isOpenChange: "isOpenChange", activeViewChange: "activeViewChange", datetimeChange: "datetimeChange", onClose: "onClose" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatetimePickerComponent, multi: true }], viewQueries: [{ propertyName: "dateTimePickerComponent", first: true, predicate: DatetimePickerComponent, descendants: true }, { propertyName: "_elRef", first: true, predicate: DatetimePickerComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "_control", first: true, predicate: DatetimePickerComponent, descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-datetime-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"_isRequired\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [useValidation]=\"useValidation\"\n    [isOpen]=\"isOpen\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [activeView]=\"activeView\"\n    [allowNull]=\"allowNull && !_isRequired\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [showFooter]=\"showFooter\"\n    [disableFunction]=\"disableFunction\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDatetimeInputChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (touched)=\"onTouched()\"\n>\n    <ng-content></ng-content>\n</fd-datetime-picker>\n", dependencies: [{ kind: "component", type: DatetimePickerComponent, selector: "fd-datetime-picker", inputs: ["placeholder", "placement", "appendTo", "disabled", "inputId", "required", "customDateTimeFormat", "meridian", "displaySeconds", "ariaLabelledBy", "message", "messageTriggers", "displayMinutes", "displayHours", "useValidation", "date", "isOpen", "startingDayOfWeek", "activeView", "allowNull", "keepTwoDigitsTime", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "spinnerButtons", "showWeekNumbers", "showFooter", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "isFullWidth", "disableFunction"], outputs: ["isOpenChange", "activeViewChange", "dateChange", "calendarChange", "timeChange", "onClose", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: PlatformDatetimePickerComponent, isStandalone: true, selector: "fdp-datetime-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, meridian: { classPropertyName: "meridian", publicName: "meridian", isSignal: false, isRequired: false, transformFunction: null }, displaySeconds: { classPropertyName: "displaySeconds", publicName: "displaySeconds", isSignal: false, isRequired: false, transformFunction: null }, displayMinutes: { classPropertyName: "displayMinutes", publicName: "displayMinutes", isSignal: false, isRequired: false, transformFunction: null }, displayHours: { classPropertyName: "displayHours", publicName: "displayHours", isSignal: false, isRequired: false, transformFunction: null }, useValidation: { classPropertyName: "useValidation", publicName: "useValidation", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, startingDayOfWeek: { classPropertyName: "startingDayOfWeek", publicName: "startingDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, keepTwoDigitsTime: { classPropertyName: "keepTwoDigitsTime", publicName: "keepTwoDigitsTime", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, buttonFocusable: { classPropertyName: "buttonFocusable", publicName: "buttonFocusable", isSignal: false, isRequired: false, transformFunction: null }, specialDaysRules: { classPropertyName: "specialDaysRules", publicName: "specialDaysRules", isSignal: false, isRequired: false, transformFunction: null }, yearGrid: { classPropertyName: "yearGrid", publicName: "yearGrid", isSignal: false, isRequired: false, transformFunction: null }, aggregatedYearGrid: { classPropertyName: "aggregatedYearGrid", publicName: "aggregatedYearGrid", isSignal: false, isRequired: false, transformFunction: null }, markWeekends: { classPropertyName: "markWeekends", publicName: "markWeekends", isSignal: false, isRequired: false, transformFunction: null }, spinnerButtons: { classPropertyName: "spinnerButtons", publicName: "spinnerButtons", isSignal: false, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: false, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: false, isRequired: false, transformFunction: null }, processInputOnBlur: { classPropertyName: "processInputOnBlur", publicName: "processInputOnBlur", isSignal: false, isRequired: false, transformFunction: null }, preventScrollOnFocus: { classPropertyName: "preventScrollOnFocus", publicName: "preventScrollOnFocus", isSignal: false, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: false, isRequired: false, transformFunction: null }, mobileConfig: { classPropertyName: "mobileConfig", publicName: "mobileConfig", isSignal: false, isRequired: false, transformFunction: null }, mobileLandscape: { classPropertyName: "mobileLandscape", publicName: "mobileLandscape", isSignal: false, isRequired: false, transformFunction: null }, mobilePortrait: { classPropertyName: "mobilePortrait", publicName: "mobilePortrait", isSignal: false, isRequired: false, transformFunction: null }, showCalendarLegend: { classPropertyName: "showCalendarLegend", publicName: "showCalendarLegend", isSignal: true, isRequired: false, transformFunction: null }, legendCol: { classPropertyName: "legendCol", publicName: "legendCol", isSignal: true, isRequired: false, transformFunction: null }, disableFunction: { classPropertyName: "disableFunction", publicName: "disableFunction", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", activeViewChange: "activeViewChange", datetimeChange: "datetimeChange", onClose: "onClose" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatetimePickerComponent, multi: true }], viewQueries: [{ propertyName: "dateTimePickerComponent", first: true, predicate: DatetimePickerComponent, descendants: true }, { propertyName: "_elRef", first: true, predicate: DatetimePickerComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "_control", first: true, predicate: DatetimePickerComponent, descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-datetime-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"_isRequired\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [useValidation]=\"useValidation\"\n    [isOpen]=\"isOpen\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [activeView]=\"activeView\"\n    [allowNull]=\"allowNull && !_isRequired\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [showCalendarLegend]=\"showCalendarLegend()\"\n    [legendCol]=\"legendCol()\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [showFooter]=\"showFooter\"\n    [disableFunction]=\"disableFunction\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDatetimeInputChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (touched)=\"onTouched()\"\n>\n    <ng-content></ng-content>\n</fd-datetime-picker>\n", dependencies: [{ kind: "component", type: DatetimePickerComponent, selector: "fd-datetime-picker", inputs: ["placeholder", "placement", "appendTo", "disabled", "inputId", "required", "customDateTimeFormat", "meridian", "displaySeconds", "ariaLabelledBy", "message", "messageTriggers", "displayMinutes", "displayHours", "useValidation", "date", "isOpen", "startingDayOfWeek", "activeView", "allowNull", "keepTwoDigitsTime", "state", "buttonFocusable", "yearGrid", "aggregatedYearGrid", "markWeekends", "spinnerButtons", "showWeekNumbers", "showFooter", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "isFullWidth", "specialDaysRules", "showCalendarLegend", "legendCol", "disableFunction"], outputs: ["isOpenChange", "activeViewChange", "dateChange", "calendarChange", "timeChange", "onClose", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PlatformDatetimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatetimePickerComponent, multi: true }], imports: [DatetimePickerComponent, FormsModule], template: "<fd-datetime-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"_isRequired\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [useValidation]=\"useValidation\"\n    [isOpen]=\"isOpen\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [activeView]=\"activeView\"\n    [allowNull]=\"allowNull && !_isRequired\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [showFooter]=\"showFooter\"\n    [disableFunction]=\"disableFunction\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDatetimeInputChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (touched)=\"onTouched()\"\n>\n    <ng-content></ng-content>\n</fd-datetime-picker>\n" }]
+            args: [{ selector: 'fdp-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformDatetimePickerComponent, multi: true }], imports: [DatetimePickerComponent, FormsModule], template: "<fd-datetime-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"_isRequired\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [placement]=\"placement\"\n    [appendTo]=\"appendTo\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [useValidation]=\"useValidation\"\n    [isOpen]=\"isOpen\"\n    [startingDayOfWeek]=\"startingDayOfWeek\"\n    [activeView]=\"activeView\"\n    [allowNull]=\"allowNull && !_isRequired\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [specialDaysRules]=\"specialDaysRules\"\n    [showCalendarLegend]=\"showCalendarLegend()\"\n    [legendCol]=\"legendCol()\"\n    [yearGrid]=\"yearGrid\"\n    [aggregatedYearGrid]=\"aggregatedYearGrid\"\n    [markWeekends]=\"markWeekends\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [showFooter]=\"showFooter\"\n    [disableFunction]=\"disableFunction\"\n    [processInputOnBlur]=\"processInputOnBlur\"\n    [preventScrollOnFocus]=\"preventScrollOnFocus\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [mobileLandscape]=\"mobileLandscape\"\n    [mobilePortrait]=\"mobilePortrait\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"handleDatetimeInputChange($event)\"\n    (activeViewChange)=\"handleActiveViewChange($event)\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (touched)=\"onTouched()\"\n>\n    <ng-content></ng-content>\n</fd-datetime-picker>\n" }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], placement: [{
@@ -10489,6 +10532,11 @@ class PlatformTimePickerComponent extends BaseInput {
         this.keepTwoDigitsTime = false;
         /** Event emitted when the state of the isOpen property changes. */
         this.isOpenChange = new EventEmitter();
+        /**
+         * The interval between selectable minutes (e.g., 1 for every minute, 5 for 5-minute intervals, 15 for 15-minute intervals).
+         * Defaults to 1 (every minute).
+         */
+        this.minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
@@ -10517,11 +10565,11 @@ class PlatformTimePickerComponent extends BaseInput {
         this.onTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PlatformTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: PlatformTimePickerComponent, isStandalone: true, selector: "fdp-time-picker", inputs: { value: "value", time: "time", spinnerButtons: "spinnerButtons", meridian: "meridian", displaySeconds: "displaySeconds", displayMinutes: "displayMinutes", displayHours: "displayHours", placeholder: "placeholder", timePickerInputLabel: "timePickerInputLabel", allowNull: "allowNull", tablet: "tablet", placement: "placement", state: "state", buttonFocusable: "buttonFocusable", useValidation: "useValidation", keepTwoDigitsTime: "keepTwoDigitsTime", displayFormat: "displayFormat", parseFormat: "parseFormat" }, outputs: { isOpenChange: "isOpenChange" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformTimePickerComponent, multi: true }], viewQueries: [{ propertyName: "timePickerComponent", first: true, predicate: TimePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-time-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [required]=\"required\"\n    [time]=\"time\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displayFormat]=\"displayFormat\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [placeholder]=\"placeholder\"\n    [timePickerInputLabel]=\"timePickerInputLabel\"\n    [allowNull]=\"allowNull\"\n    [tablet]=\"tablet\"\n    [placement]=\"placement\"\n    [parseFormat]=\"parseFormat\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [useValidation]=\"useValidation\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (ngModelChange)=\"handleTimeChange($event)\"\n    [(ngModel)]=\"value\"\n>\n    <ng-content></ng-content>\n</fd-time-picker>\n", dependencies: [{ kind: "component", type: TimePickerComponent, selector: "fd-time-picker", inputs: ["time", "inputId", "disabled", "required", "spinnerButtons", "meridian", "displaySeconds", "displayMinutes", "displayHours", "placeholder", "timePickerInputLabel", "timePickerButtonLabel", "ariaLabelledBy", "allowNull", "tablet", "message", "messageType", "messageTriggers", "placement", "useValidation", "state", "buttonFocusable", "keepTwoDigitsTime", "displayFormat", "parseFormat", "valueStateSuccessMessage", "valueStateInformationMessage", "valueStateWarningMessage", "valueStateErrorMessage"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: PlatformTimePickerComponent, isStandalone: true, selector: "fdp-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: false, isRequired: false, transformFunction: null }, spinnerButtons: { classPropertyName: "spinnerButtons", publicName: "spinnerButtons", isSignal: false, isRequired: false, transformFunction: null }, meridian: { classPropertyName: "meridian", publicName: "meridian", isSignal: false, isRequired: false, transformFunction: null }, displaySeconds: { classPropertyName: "displaySeconds", publicName: "displaySeconds", isSignal: false, isRequired: false, transformFunction: null }, displayMinutes: { classPropertyName: "displayMinutes", publicName: "displayMinutes", isSignal: false, isRequired: false, transformFunction: null }, displayHours: { classPropertyName: "displayHours", publicName: "displayHours", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, timePickerInputLabel: { classPropertyName: "timePickerInputLabel", publicName: "timePickerInputLabel", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, tablet: { classPropertyName: "tablet", publicName: "tablet", isSignal: false, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, buttonFocusable: { classPropertyName: "buttonFocusable", publicName: "buttonFocusable", isSignal: false, isRequired: false, transformFunction: null }, useValidation: { classPropertyName: "useValidation", publicName: "useValidation", isSignal: false, isRequired: false, transformFunction: null }, keepTwoDigitsTime: { classPropertyName: "keepTwoDigitsTime", publicName: "keepTwoDigitsTime", isSignal: false, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: false, isRequired: false, transformFunction: null }, parseFormat: { classPropertyName: "parseFormat", publicName: "parseFormat", isSignal: false, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange" }, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformTimePickerComponent, multi: true }], viewQueries: [{ propertyName: "timePickerComponent", first: true, predicate: TimePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-time-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [required]=\"required\"\n    [time]=\"time\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displayFormat]=\"displayFormat\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [minuteStep]=\"minuteStep()\"\n    [placeholder]=\"placeholder\"\n    [timePickerInputLabel]=\"timePickerInputLabel\"\n    [allowNull]=\"allowNull\"\n    [tablet]=\"tablet\"\n    [placement]=\"placement\"\n    [parseFormat]=\"parseFormat\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [useValidation]=\"useValidation\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (ngModelChange)=\"handleTimeChange($event)\"\n    [(ngModel)]=\"value\"\n>\n    <ng-content></ng-content>\n</fd-time-picker>\n", dependencies: [{ kind: "component", type: TimePickerComponent, selector: "fd-time-picker", inputs: ["time", "inputId", "disabled", "required", "spinnerButtons", "meridian", "displaySeconds", "displayMinutes", "displayHours", "placeholder", "timePickerInputLabel", "timePickerButtonLabel", "ariaLabelledBy", "allowNull", "tablet", "message", "messageType", "messageTriggers", "placement", "useValidation", "state", "buttonFocusable", "keepTwoDigitsTime", "displayFormat", "parseFormat", "valueStateSuccessMessage", "valueStateInformationMessage", "valueStateWarningMessage", "valueStateErrorMessage", "minuteStep"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PlatformTimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformTimePickerComponent, multi: true }], imports: [TimePickerComponent, FormsModule], template: "<fd-time-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [required]=\"required\"\n    [time]=\"time\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displayFormat]=\"displayFormat\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [placeholder]=\"placeholder\"\n    [timePickerInputLabel]=\"timePickerInputLabel\"\n    [allowNull]=\"allowNull\"\n    [tablet]=\"tablet\"\n    [placement]=\"placement\"\n    [parseFormat]=\"parseFormat\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [useValidation]=\"useValidation\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (ngModelChange)=\"handleTimeChange($event)\"\n    [(ngModel)]=\"value\"\n>\n    <ng-content></ng-content>\n</fd-time-picker>\n" }]
+            args: [{ selector: 'fdp-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FD_FORM_FIELD_CONTROL, useExisting: PlatformTimePickerComponent, multi: true }], imports: [TimePickerComponent, FormsModule], template: "<fd-time-picker\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.ariaLabelledBy]=\"ariaLabelledBy\"\n    [attr.ariaDescribedBy]=\"ariaDescribedBy\"\n    [inputId]=\"id\"\n    [required]=\"required\"\n    [time]=\"time\"\n    [meridian]=\"meridian\"\n    [disabled]=\"disabled\"\n    [displayFormat]=\"displayFormat\"\n    [spinnerButtons]=\"spinnerButtons\"\n    [displaySeconds]=\"displaySeconds\"\n    [displayMinutes]=\"displayMinutes\"\n    [displayHours]=\"displayHours\"\n    [minuteStep]=\"minuteStep()\"\n    [placeholder]=\"placeholder\"\n    [timePickerInputLabel]=\"timePickerInputLabel\"\n    [allowNull]=\"allowNull\"\n    [tablet]=\"tablet\"\n    [placement]=\"placement\"\n    [parseFormat]=\"parseFormat\"\n    [state]=\"state\"\n    [buttonFocusable]=\"buttonFocusable\"\n    [useValidation]=\"useValidation\"\n    [keepTwoDigitsTime]=\"keepTwoDigitsTime\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n    (ngModelChange)=\"handleTimeChange($event)\"\n    [(ngModel)]=\"value\"\n>\n    <ng-content></ng-content>\n</fd-time-picker>\n" }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], time: [{