@fundamental-ngx/core 0.57.5 → 0.57.6

package/datetime-picker/index.d.ts

@@ -141,6 +141,8 @@ declare class DatetimePickerComponent<D> implements DateTimePicker<D>, OnInit, O
      * Row, Columns and method to display year can be modified
      */
     yearGrid: CalendarYearGrid;
+    /** Whether to stop event propagation for collapsed time items */
+    timeItemStopPropagationSourcing: boolean;
     /**
      * Object to customize aggregated year grid,
      * Row, Columns and method to display year can be modified
@@ -367,7 +369,7 @@ declare class DatetimePickerComponent<D> implements DateTimePicker<D>, OnInit, O
     /** @hidden */
     private _setUpMobileMode;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatetimePickerComponent<any>, [null, null, { optional: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatetimePickerComponent<any>, "fd-datetime-picker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "required": { "alias": "required"; "required": false; }; "customDateTimeFormat": { "alias": "customDateTimeFormat"; "required": false; }; "meridian": { "alias": "meridian"; "required": false; }; "displaySeconds": { "alias": "displaySeconds"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageTriggers": { "alias": "messageTriggers"; "required": false; }; "displayMinutes": { "alias": "displayMinutes"; "required": false; }; "displayHours": { "alias": "displayHours"; "required": false; }; "useValidation": { "alias": "useValidation"; "required": false; }; "date": { "alias": "date"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "startingDayOfWeek": { "alias": "startingDayOfWeek"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "keepTwoDigitsTime": { "alias": "keepTwoDigitsTime"; "required": false; }; "state": { "alias": "state"; "required": false; }; "buttonFocusable": { "alias": "buttonFocusable"; "required": false; }; "specialDaysRules": { "alias": "specialDaysRules"; "required": false; }; "yearGrid": { "alias": "yearGrid"; "required": false; }; "aggregatedYearGrid": { "alias": "aggregatedYearGrid"; "required": false; }; "markWeekends": { "alias": "markWeekends"; "required": false; }; "spinnerButtons": { "alias": "spinnerButtons"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "processInputOnBlur": { "alias": "processInputOnBlur"; "required": false; }; "preventScrollOnFocus": { "alias": "preventScrollOnFocus"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "mobileConfig": { "alias": "mobileConfig"; "required": false; }; "mobileLandscape": { "alias": "mobileLandscape"; "required": false; }; "mobilePortrait": { "alias": "mobilePortrait"; "required": false; }; "isFullWidth": { "alias": "isFullWidth"; "required": false; }; "disableFunction": { "alias": "disableFunction"; "required": false; }; }, { "isOpenChange": "isOpenChange"; "activeViewChange": "activeViewChange"; "dateChange": "dateChange"; "calendarChange": "calendarChange"; "timeChange": "timeChange"; "onClose": "onClose"; "touched": "touched"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatetimePickerComponent<any>, "fd-datetime-picker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "required": { "alias": "required"; "required": false; }; "customDateTimeFormat": { "alias": "customDateTimeFormat"; "required": false; }; "meridian": { "alias": "meridian"; "required": false; }; "displaySeconds": { "alias": "displaySeconds"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageTriggers": { "alias": "messageTriggers"; "required": false; }; "displayMinutes": { "alias": "displayMinutes"; "required": false; }; "displayHours": { "alias": "displayHours"; "required": false; }; "useValidation": { "alias": "useValidation"; "required": false; }; "date": { "alias": "date"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "startingDayOfWeek": { "alias": "startingDayOfWeek"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "keepTwoDigitsTime": { "alias": "keepTwoDigitsTime"; "required": false; }; "state": { "alias": "state"; "required": false; }; "buttonFocusable": { "alias": "buttonFocusable"; "required": false; }; "specialDaysRules": { "alias": "specialDaysRules"; "required": false; }; "yearGrid": { "alias": "yearGrid"; "required": false; }; "timeItemStopPropagationSourcing": { "alias": "timeItemStopPropagationSourcing"; "required": false; }; "aggregatedYearGrid": { "alias": "aggregatedYearGrid"; "required": false; }; "markWeekends": { "alias": "markWeekends"; "required": false; }; "spinnerButtons": { "alias": "spinnerButtons"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "processInputOnBlur": { "alias": "processInputOnBlur"; "required": false; }; "preventScrollOnFocus": { "alias": "preventScrollOnFocus"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "mobileConfig": { "alias": "mobileConfig"; "required": false; }; "mobileLandscape": { "alias": "mobileLandscape"; "required": false; }; "mobilePortrait": { "alias": "mobilePortrait"; "required": false; }; "isFullWidth": { "alias": "isFullWidth"; "required": false; }; "disableFunction": { "alias": "disableFunction"; "required": false; }; }, { "isOpenChange": "isOpenChange"; "activeViewChange": "activeViewChange"; "dateChange": "dateChange"; "calendarChange": "calendarChange"; "timeChange": "timeChange"; "onClose": "onClose"; "touched": "touched"; }, never, ["*"], true, never>;
     static ngAcceptInputType_processInputOnBlur: unknown;
 }
 

package/fesm2022/fundamental-ngx-core-datetime-picker.mjs

@@ -206,6 +206,8 @@ class DatetimePickerComponent {
             rows: 4,
             cols: 5
         };
+        /** Whether to stop event propagation for collapsed time items */
+        this.timeItemStopPropagationSourcing = false;
         /**
          * Object to customize aggregated year grid,
          * Row, Columns and method to display year can be modified
@@ -649,7 +651,7 @@ class DatetimePickerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatetimePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.DatetimeAdapter, optional: true }, { token: DATE_TIME_FORMATS, optional: true }, { token: i2.PopoverFormMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: DatetimePickerComponent, isStandalone: true, selector: "fd-datetime-picker", inputs: { placeholder: "placeholder", placement: "placement", appendTo: "appendTo", disabled: "disabled", inputId: "inputId", required: "required", customDateTimeFormat: "customDateTimeFormat", meridian: "meridian", displaySeconds: "displaySeconds", ariaLabelledBy: "ariaLabelledBy", message: "message", messageTriggers: "messageTriggers", displayMinutes: "displayMinutes", displayHours: "displayHours", useValidation: "useValidation", date: "date", 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", "processInputOnBlur", booleanAttribute], preventScrollOnFocus: "preventScrollOnFocus", mobile: "mobile", mobileConfig: "mobileConfig", mobileLandscape: "mobileLandscape", mobilePortrait: "mobilePortrait", isFullWidth: "isFullWidth", disableFunction: "disableFunction" }, outputs: { isOpenChange: "isOpenChange", activeViewChange: "activeViewChange", dateChange: "dateChange", calendarChange: "calendarChange", timeChange: "timeChange", onClose: "onClose", touched: "touched" }, host: { classAttribute: "fd-datetime" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: DatetimePickerComponent, isStandalone: true, selector: "fd-datetime-picker", inputs: { placeholder: "placeholder", placement: "placement", appendTo: "appendTo", disabled: "disabled", inputId: "inputId", required: "required", customDateTimeFormat: "customDateTimeFormat", meridian: "meridian", displaySeconds: "displaySeconds", ariaLabelledBy: "ariaLabelledBy", message: "message", messageTriggers: "messageTriggers", displayMinutes: "displayMinutes", displayHours: "displayHours", useValidation: "useValidation", date: "date", isOpen: "isOpen", startingDayOfWeek: "startingDayOfWeek", activeView: "activeView", allowNull: "allowNull", keepTwoDigitsTime: "keepTwoDigitsTime", state: "state", buttonFocusable: "buttonFocusable", specialDaysRules: "specialDaysRules", yearGrid: "yearGrid", timeItemStopPropagationSourcing: "timeItemStopPropagationSourcing", aggregatedYearGrid: "aggregatedYearGrid", markWeekends: "markWeekends", spinnerButtons: "spinnerButtons", showWeekNumbers: "showWeekNumbers", showFooter: "showFooter", processInputOnBlur: ["processInputOnBlur", "processInputOnBlur", booleanAttribute], preventScrollOnFocus: "preventScrollOnFocus", mobile: "mobile", mobileConfig: "mobileConfig", mobileLandscape: "mobileLandscape", mobilePortrait: "mobilePortrait", isFullWidth: "isFullWidth", disableFunction: "disableFunction" }, outputs: { isOpenChange: "isOpenChange", activeViewChange: "activeViewChange", dateChange: "dateChange", calendarChange: "calendarChange", timeChange: "timeChange", onClose: "onClose", touched: "touched" }, host: { classAttribute: "fd-datetime" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatetimePickerComponent),
@@ -668,7 +670,7 @@ class DatetimePickerComponent {
             PopoverFormMessageService,
             PopoverService,
             DynamicComponentService
-        ], viewQueries: [{ propertyName: "_calendarCmp", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }, { propertyName: "_formMessageTemplate", first: true, predicate: ["formMessageTemplate"], descendants: true }, { propertyName: "_pickerTemplate", first: true, predicate: ["pickerTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [placement]=\"placement\"\n        [appendTo]=\"appendTo\"\n        [class.fd-popover-full-width]=\"isFullWidth\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body\n            aria-labelledby=\"fd-form-message\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-hidden]=\"!isOpen\"\n            [style.display]=\"'block'\"\n        >\n            @if (_showPopoverContents) {\n                <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n            }\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        #inputGroupComponent\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [isControl]=\"true\"\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [class.fd-datetime__mobile-control]=\"mobile\"\n        glyph=\"date-time\"\n        [isExpanded]=\"isOpen\"\n        [glyphAriaLabel]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        [iconTitle]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        (addOnButtonClicked)=\"togglePopover()\"\n    >\n        <input\n            type=\"text\"\n            class=\"fd-input\"\n            fd-input-group-input\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"'coreDatetimePicker.datetimeInputLabel' | fdTranslate\"\n            [attr.id]=\"inputId\"\n            [attr.aria-required]=\"required\"\n            [placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"_inputFieldDate | translateDayPeriod\"\n            (keydown.f4)=\"togglePopover()\"\n            (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (blur)=\"handleOnTouched($event)\"\n            (click)=\"mobile && openPopover()\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #formMessageTemplate>\n    @if (_message) {\n        <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n    }\n</ng-template>\n<ng-template #pickerTemplate>\n    <div class=\"fd-datetime__wrapper\">\n        <ng-template [ngTemplateOutlet]=\"formMessageTemplate\"></ng-template>\n        <div\n            class=\"fd-datetime__display-type-switcher\"\n            [class.fd-datetime__display-type-switcher--desktop]=\"!mobile || (mobile && mobileLandscape)\"\n            [class.fd-datetime__display-type-switcher--mobile]=\"mobile && mobilePortrait\"\n        >\n            <fd-segmented-button [(ngModel)]=\"_displayType\">\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeDateLabel' | fdTranslate\"\n                    value=\"date\"\n                ></button>\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeTimeLabel' | fdTranslate\"\n                    value=\"time\"\n                ></button>\n            </fd-segmented-button>\n        </div>\n        <ng-content></ng-content>\n        <div class=\"fd-datetime__container\" [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\">\n            <fd-calendar\n                [ngClass]=\"[\n                    !mobile && _displayType === 'date' ? 'fd-datetime__active-display-type' : '',\n                    mobile && mobilePortrait && _displayType === 'date' ? 'fd-datetime__mobile-display' : ''\n                ]\"\n                calType=\"single\"\n                [activeView]=\"activeView\"\n                [disableFunction]=\"disableFunction || null\"\n                [selectedDate]=\"_tempDate\"\n                [escapeFocusFunction]=\"null\"\n                [markWeekends]=\"markWeekends\"\n                [specialDaysRules]=\"specialDaysRules\"\n                [showWeekNumbers]=\"showWeekNumbers\"\n                [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                [yearGrid]=\"yearGrid\"\n                [startingDayOfWeek]=\"startingDayOfWeek\"\n                (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                (selectedDateChange)=\"handleDateChange($event)\"\n                (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n            ></fd-calendar>\n            @if (!mobilePortrait) {\n                <div class=\"fd-datetime__separator\"></div>\n            }\n            @if (isOpen) {\n                <fd-time\n                    [ngClass]=\"[\n                        !mobile && _displayType === 'time' ? 'fd-datetime__active-display-type' : '',\n                        mobile && mobilePortrait && _displayType === 'time' ? 'fd-datetime__mobile-display' : ''\n                    ]\"\n                    [disabled]=\"disabled\"\n                    [elementsAtOnce]=\"5\"\n                    [keepTwoDigits]=\"keepTwoDigitsTime\"\n                    [ngModel]=\"_tempTime\"\n                    [spinnerButtons]=\"spinnerButtons\"\n                    [meridian]=\"_meridian\"\n                    [displaySeconds]=\"_displaySeconds\"\n                    [displayMinutes]=\"_displayMinutes\"\n                    [displayHours]=\"_displayHours\"\n                    (ngModelChange)=\"handleTimeChange($event)\"\n                ></fd-time>\n            }\n        </div>\n        @if (!mobile && showFooter) {\n            <div fd-popover-body-footer>\n                <div class=\"fd-datetime__bar\" fd-bar barDesign=\"footer\">\n                    <div fd-bar-right>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"emphasized\"\n                                [disabled]=\"!_tempDate\"\n                                [label]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                (click)=\"submit()\"\n                            ></button>\n                        </fd-bar-element>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"transparent\"\n                                [label]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                (click)=\"cancel()\"\n                            ></button>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [".fd-datetime{display:block}.fd-datetime__bar{overflow:hidden}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__mobile-control{display:inline-block;max-width:100%}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 1rem}.fd-datetime__container--mobile-portrait>*:not(.fd-datetime__mobile-display){display:none!important}.fd-datetime__separator{background-color:#d3d3d3;width:.0625rem;margin:2.625rem 1.75rem;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}.fd-datetime__display-type-switcher--mobile{display:flex}.fd-popover-full-width{width:100%}@media (max-width: 60rem){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: 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: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "mobileLandscape", "mobilePortrait", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "dateRangeFormat", "previousButtonDisableFunction", "nextButtonDisableFunction", "associatedLegendId", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: TranslateDayPeriodPipe, name: "translateDayPeriod" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_calendarCmp", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }, { propertyName: "_formMessageTemplate", first: true, predicate: ["formMessageTemplate"], descendants: true }, { propertyName: "_pickerTemplate", first: true, predicate: ["pickerTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [placement]=\"placement\"\n        [appendTo]=\"appendTo\"\n        [class.fd-popover-full-width]=\"isFullWidth\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body\n            aria-labelledby=\"fd-form-message\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-hidden]=\"!isOpen\"\n            [style.display]=\"'block'\"\n        >\n            @if (_showPopoverContents) {\n                <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n            }\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        #inputGroupComponent\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [isControl]=\"true\"\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [class.fd-datetime__mobile-control]=\"mobile\"\n        glyph=\"date-time\"\n        [isExpanded]=\"isOpen\"\n        [glyphAriaLabel]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        [iconTitle]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        (addOnButtonClicked)=\"togglePopover()\"\n    >\n        <input\n            type=\"text\"\n            class=\"fd-input\"\n            fd-input-group-input\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"'coreDatetimePicker.datetimeInputLabel' | fdTranslate\"\n            [attr.id]=\"inputId\"\n            [attr.aria-required]=\"required\"\n            [placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"_inputFieldDate | translateDayPeriod\"\n            (keydown.f4)=\"togglePopover()\"\n            (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (blur)=\"handleOnTouched($event)\"\n            (click)=\"mobile && openPopover()\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #formMessageTemplate>\n    @if (_message) {\n        <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n    }\n</ng-template>\n<ng-template #pickerTemplate>\n    <div class=\"fd-datetime__wrapper\">\n        <ng-template [ngTemplateOutlet]=\"formMessageTemplate\"></ng-template>\n        <div\n            class=\"fd-datetime__display-type-switcher\"\n            [class.fd-datetime__display-type-switcher--desktop]=\"!mobile || (mobile && mobileLandscape)\"\n            [class.fd-datetime__display-type-switcher--mobile]=\"mobile && mobilePortrait\"\n        >\n            <fd-segmented-button [(ngModel)]=\"_displayType\">\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeDateLabel' | fdTranslate\"\n                    value=\"date\"\n                ></button>\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeTimeLabel' | fdTranslate\"\n                    value=\"time\"\n                ></button>\n            </fd-segmented-button>\n        </div>\n        <ng-content></ng-content>\n        <div class=\"fd-datetime__container\" [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\">\n            <fd-calendar\n                [ngClass]=\"[\n                    !mobile && _displayType === 'date' ? 'fd-datetime__active-display-type' : '',\n                    mobile && mobilePortrait && _displayType === 'date' ? 'fd-datetime__mobile-display' : ''\n                ]\"\n                calType=\"single\"\n                [activeView]=\"activeView\"\n                [disableFunction]=\"disableFunction || null\"\n                [selectedDate]=\"_tempDate\"\n                [escapeFocusFunction]=\"null\"\n                [markWeekends]=\"markWeekends\"\n                [specialDaysRules]=\"specialDaysRules\"\n                [showWeekNumbers]=\"showWeekNumbers\"\n                [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                [yearGrid]=\"yearGrid\"\n                [startingDayOfWeek]=\"startingDayOfWeek\"\n                (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                (selectedDateChange)=\"handleDateChange($event)\"\n                (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n            ></fd-calendar>\n            @if (!mobilePortrait) {\n                <div class=\"fd-datetime__separator\"></div>\n            }\n            @if (isOpen) {\n                <fd-time\n                    [ngClass]=\"[\n                        !mobile && _displayType === 'time' ? 'fd-datetime__active-display-type' : '',\n                        mobile && mobilePortrait && _displayType === 'time' ? 'fd-datetime__mobile-display' : ''\n                    ]\"\n                    [disabled]=\"disabled\"\n                    [elementsAtOnce]=\"5\"\n                    [keepTwoDigits]=\"keepTwoDigitsTime\"\n                    [ngModel]=\"_tempTime\"\n                    [spinnerButtons]=\"spinnerButtons\"\n                    [meridian]=\"_meridian\"\n                    [displaySeconds]=\"_displaySeconds\"\n                    [displayMinutes]=\"_displayMinutes\"\n                    [displayHours]=\"_displayHours\"\n                    [timeItemStopPropagationSourcing]=\"timeItemStopPropagationSourcing\"\n                    (ngModelChange)=\"handleTimeChange($event)\"\n                ></fd-time>\n            }\n        </div>\n        @if (!mobile && showFooter) {\n            <div fd-popover-body-footer>\n                <div class=\"fd-datetime__bar\" fd-bar barDesign=\"footer\">\n                    <div fd-bar-right>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"emphasized\"\n                                [disabled]=\"!_tempDate\"\n                                [label]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                (click)=\"submit()\"\n                            ></button>\n                        </fd-bar-element>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"transparent\"\n                                [label]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                (click)=\"cancel()\"\n                            ></button>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [".fd-datetime{display:block}.fd-datetime__bar{overflow:hidden}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__mobile-control{display:inline-block;max-width:100%}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 1rem}.fd-datetime__container--mobile-portrait>*:not(.fd-datetime__mobile-display){display:none!important}.fd-datetime__separator{background-color:#d3d3d3;width:.0625rem;margin:2.625rem 1.75rem;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}.fd-datetime__display-type-switcher--mobile{display:flex}.fd-popover-full-width{width:100%}@media (max-width: 60rem){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: 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: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "selectedMultipleDates", "selectedRangeDate", "selectedMultipleDateRanges", "markWeekends", "showWeekNumbers", "allowMultipleSelection", "mobileLandscape", "mobilePortrait", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "dateRangeFormat", "previousButtonDisableFunction", "nextButtonDisableFunction", "associatedLegendId", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedMultipleDatesChange", "selectedRangeDateChange", "selectedMultipleDateRangesChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons", "timeItemStopPropagationSourcing"] }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: TranslateDayPeriodPipe, name: "translateDayPeriod" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatetimePickerComponent, decorators: [{
             type: Component,
@@ -713,7 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         BarElementDirective,
                         FdTranslatePipe,
                         TranslateDayPeriodPipe
-                    ], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [placement]=\"placement\"\n        [appendTo]=\"appendTo\"\n        [class.fd-popover-full-width]=\"isFullWidth\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body\n            aria-labelledby=\"fd-form-message\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-hidden]=\"!isOpen\"\n            [style.display]=\"'block'\"\n        >\n            @if (_showPopoverContents) {\n                <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n            }\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        #inputGroupComponent\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [isControl]=\"true\"\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [class.fd-datetime__mobile-control]=\"mobile\"\n        glyph=\"date-time\"\n        [isExpanded]=\"isOpen\"\n        [glyphAriaLabel]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        [iconTitle]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        (addOnButtonClicked)=\"togglePopover()\"\n    >\n        <input\n            type=\"text\"\n            class=\"fd-input\"\n            fd-input-group-input\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"'coreDatetimePicker.datetimeInputLabel' | fdTranslate\"\n            [attr.id]=\"inputId\"\n            [attr.aria-required]=\"required\"\n            [placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"_inputFieldDate | translateDayPeriod\"\n            (keydown.f4)=\"togglePopover()\"\n            (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (blur)=\"handleOnTouched($event)\"\n            (click)=\"mobile && openPopover()\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #formMessageTemplate>\n    @if (_message) {\n        <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n    }\n</ng-template>\n<ng-template #pickerTemplate>\n    <div class=\"fd-datetime__wrapper\">\n        <ng-template [ngTemplateOutlet]=\"formMessageTemplate\"></ng-template>\n        <div\n            class=\"fd-datetime__display-type-switcher\"\n            [class.fd-datetime__display-type-switcher--desktop]=\"!mobile || (mobile && mobileLandscape)\"\n            [class.fd-datetime__display-type-switcher--mobile]=\"mobile && mobilePortrait\"\n        >\n            <fd-segmented-button [(ngModel)]=\"_displayType\">\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeDateLabel' | fdTranslate\"\n                    value=\"date\"\n                ></button>\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeTimeLabel' | fdTranslate\"\n                    value=\"time\"\n                ></button>\n            </fd-segmented-button>\n        </div>\n        <ng-content></ng-content>\n        <div class=\"fd-datetime__container\" [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\">\n            <fd-calendar\n                [ngClass]=\"[\n                    !mobile && _displayType === 'date' ? 'fd-datetime__active-display-type' : '',\n                    mobile && mobilePortrait && _displayType === 'date' ? 'fd-datetime__mobile-display' : ''\n                ]\"\n                calType=\"single\"\n                [activeView]=\"activeView\"\n                [disableFunction]=\"disableFunction || null\"\n                [selectedDate]=\"_tempDate\"\n                [escapeFocusFunction]=\"null\"\n                [markWeekends]=\"markWeekends\"\n                [specialDaysRules]=\"specialDaysRules\"\n                [showWeekNumbers]=\"showWeekNumbers\"\n                [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                [yearGrid]=\"yearGrid\"\n                [startingDayOfWeek]=\"startingDayOfWeek\"\n                (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                (selectedDateChange)=\"handleDateChange($event)\"\n                (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n            ></fd-calendar>\n            @if (!mobilePortrait) {\n                <div class=\"fd-datetime__separator\"></div>\n            }\n            @if (isOpen) {\n                <fd-time\n                    [ngClass]=\"[\n                        !mobile && _displayType === 'time' ? 'fd-datetime__active-display-type' : '',\n                        mobile && mobilePortrait && _displayType === 'time' ? 'fd-datetime__mobile-display' : ''\n                    ]\"\n                    [disabled]=\"disabled\"\n                    [elementsAtOnce]=\"5\"\n                    [keepTwoDigits]=\"keepTwoDigitsTime\"\n                    [ngModel]=\"_tempTime\"\n                    [spinnerButtons]=\"spinnerButtons\"\n                    [meridian]=\"_meridian\"\n                    [displaySeconds]=\"_displaySeconds\"\n                    [displayMinutes]=\"_displayMinutes\"\n                    [displayHours]=\"_displayHours\"\n                    (ngModelChange)=\"handleTimeChange($event)\"\n                ></fd-time>\n            }\n        </div>\n        @if (!mobile && showFooter) {\n            <div fd-popover-body-footer>\n                <div class=\"fd-datetime__bar\" fd-bar barDesign=\"footer\">\n                    <div fd-bar-right>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"emphasized\"\n                                [disabled]=\"!_tempDate\"\n                                [label]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                (click)=\"submit()\"\n                            ></button>\n                        </fd-bar-element>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"transparent\"\n                                [label]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                (click)=\"cancel()\"\n                            ></button>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [".fd-datetime{display:block}.fd-datetime__bar{overflow:hidden}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__mobile-control{display:inline-block;max-width:100%}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 1rem}.fd-datetime__container--mobile-portrait>*:not(.fd-datetime__mobile-display){display:none!important}.fd-datetime__separator{background-color:#d3d3d3;width:.0625rem;margin:2.625rem 1.75rem;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}.fd-datetime__display-type-switcher--mobile{display:flex}.fd-popover-full-width{width:100%}@media (max-width: 60rem){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"] }]
+                    ], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [placement]=\"placement\"\n        [appendTo]=\"appendTo\"\n        [class.fd-popover-full-width]=\"isFullWidth\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body\n            aria-labelledby=\"fd-form-message\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-hidden]=\"!isOpen\"\n            [style.display]=\"'block'\"\n        >\n            @if (_showPopoverContents) {\n                <ng-template [ngTemplateOutlet]=\"pickerTemplate\"></ng-template>\n            }\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        #inputGroupComponent\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [isControl]=\"true\"\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [class.fd-datetime__mobile-control]=\"mobile\"\n        glyph=\"date-time\"\n        [isExpanded]=\"isOpen\"\n        [glyphAriaLabel]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        [iconTitle]=\"'coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate\"\n        (addOnButtonClicked)=\"togglePopover()\"\n    >\n        <input\n            type=\"text\"\n            class=\"fd-input\"\n            fd-input-group-input\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"'coreDatetimePicker.datetimeInputLabel' | fdTranslate\"\n            [attr.id]=\"inputId\"\n            [attr.aria-required]=\"required\"\n            [placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [ngModel]=\"_inputFieldDate | translateDayPeriod\"\n            (keydown.f4)=\"togglePopover()\"\n            (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n            (ngModelChange)=\"handleInputChange($event, true)\"\n            (blur)=\"handleOnTouched($event)\"\n            (click)=\"mobile && openPopover()\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #formMessageTemplate>\n    @if (_message) {\n        <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n    }\n</ng-template>\n<ng-template #pickerTemplate>\n    <div class=\"fd-datetime__wrapper\">\n        <ng-template [ngTemplateOutlet]=\"formMessageTemplate\"></ng-template>\n        <div\n            class=\"fd-datetime__display-type-switcher\"\n            [class.fd-datetime__display-type-switcher--desktop]=\"!mobile || (mobile && mobileLandscape)\"\n            [class.fd-datetime__display-type-switcher--mobile]=\"mobile && mobilePortrait\"\n        >\n            <fd-segmented-button [(ngModel)]=\"_displayType\">\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeDateLabel' | fdTranslate\"\n                    value=\"date\"\n                ></button>\n                <button\n                    fd-button\n                    [label]=\"'coreDatetimePicker.displayTypeTimeLabel' | fdTranslate\"\n                    value=\"time\"\n                ></button>\n            </fd-segmented-button>\n        </div>\n        <ng-content></ng-content>\n        <div class=\"fd-datetime__container\" [class.fd-datetime__container--mobile-portrait]=\"mobile && mobilePortrait\">\n            <fd-calendar\n                [ngClass]=\"[\n                    !mobile && _displayType === 'date' ? 'fd-datetime__active-display-type' : '',\n                    mobile && mobilePortrait && _displayType === 'date' ? 'fd-datetime__mobile-display' : ''\n                ]\"\n                calType=\"single\"\n                [activeView]=\"activeView\"\n                [disableFunction]=\"disableFunction || null\"\n                [selectedDate]=\"_tempDate\"\n                [escapeFocusFunction]=\"null\"\n                [markWeekends]=\"markWeekends\"\n                [specialDaysRules]=\"specialDaysRules\"\n                [showWeekNumbers]=\"showWeekNumbers\"\n                [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                [yearGrid]=\"yearGrid\"\n                [startingDayOfWeek]=\"startingDayOfWeek\"\n                (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                (selectedDateChange)=\"handleDateChange($event)\"\n                (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n            ></fd-calendar>\n            @if (!mobilePortrait) {\n                <div class=\"fd-datetime__separator\"></div>\n            }\n            @if (isOpen) {\n                <fd-time\n                    [ngClass]=\"[\n                        !mobile && _displayType === 'time' ? 'fd-datetime__active-display-type' : '',\n                        mobile && mobilePortrait && _displayType === 'time' ? 'fd-datetime__mobile-display' : ''\n                    ]\"\n                    [disabled]=\"disabled\"\n                    [elementsAtOnce]=\"5\"\n                    [keepTwoDigits]=\"keepTwoDigitsTime\"\n                    [ngModel]=\"_tempTime\"\n                    [spinnerButtons]=\"spinnerButtons\"\n                    [meridian]=\"_meridian\"\n                    [displaySeconds]=\"_displaySeconds\"\n                    [displayMinutes]=\"_displayMinutes\"\n                    [displayHours]=\"_displayHours\"\n                    [timeItemStopPropagationSourcing]=\"timeItemStopPropagationSourcing\"\n                    (ngModelChange)=\"handleTimeChange($event)\"\n                ></fd-time>\n            }\n        </div>\n        @if (!mobile && showFooter) {\n            <div fd-popover-body-footer>\n                <div class=\"fd-datetime__bar\" fd-bar barDesign=\"footer\">\n                    <div fd-bar-right>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"emphasized\"\n                                [disabled]=\"!_tempDate\"\n                                [label]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeOkLabel' | fdTranslate\"\n                                (click)=\"submit()\"\n                            ></button>\n                        </fd-bar-element>\n                        <fd-bar-element>\n                            <button\n                                fd-button\n                                fdType=\"transparent\"\n                                [label]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                [ariaLabel]=\"'coreDatetimePicker.datetimeCancelLabel' | fdTranslate\"\n                                (click)=\"cancel()\"\n                            ></button>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [".fd-datetime{display:block}.fd-datetime__bar{overflow:hidden}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__mobile-control{display:inline-block;max-width:100%}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 1rem}.fd-datetime__container--mobile-portrait>*:not(.fd-datetime__mobile-display){display:none!important}.fd-datetime__separator{background-color:#d3d3d3;width:.0625rem;margin:2.625rem 1.75rem;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}.fd-datetime__display-type-switcher--mobile{display:flex}.fd-popover-full-width{width:100%}@media (max-width: 60rem){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DatetimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -771,6 +773,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Input
             }], yearGrid: [{
                 type: Input
+            }], timeItemStopPropagationSourcing: [{
+                type: Input
             }], aggregatedYearGrid: [{
                 type: Input
             }], markWeekends: [{