barsa-calendar 2.1.4 → 2.1.5

package/fesm2022/barsa-calendar.mjs

@@ -1912,7 +1912,7 @@ class DateTimePickerComponent extends BaseComponent {
                 useFactory: getDateService
             },
             CalendarService
-        ], viewQueries: [{ propertyName: "timeComponent", first: true, predicate: TimeComponent, descendants: true }, { propertyName: "inputGroupComponent", first: true, predicate: InputGroupComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (inlineMode) {\n<ng-container\n    *ngTemplateOutlet=\"\n        daterangeMode ? dateRangeTpl : month;\n        context: {\n            $implicit: selectedMonth$ | async,\n            width: width$ | async,\n            height: height,\n            rtl: rtl$ | async,\n            weekDays: weekDays,\n            weekDaysMin: weekDaysMin,\n            today: today,\n            deviceSize: deviceSize,\n            popover: popover\n        }\n    \"\n>\n</ng-container>\n}\n<ng-template #dateRangeTpl>\n    <bc-calendar-selection-days\n        fd-toolbar-item\n        [inline]=\"true\"\n        [monthInfo]=\"(selectedMonth$ | async)!!\"\n        (rangeChange)=\"onRangeChange($event)\"\n    ></bc-calendar-selection-days>\n</ng-template>\n<fd-input-group\n    placement=\"after\"\n    glyph=\"calendar\"\n    glyphAriaLabel=\"select day\"\n    ariaLabelledBy=\"fd-input-group-icon-label-2\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    [button]=\"true\"\n    [state]=\"isValid ? 'success' : 'error'\"\n    [showFocus]=\"true\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [style.display]=\"!buttonMenuMode || inlineMode ? 'inherit' : 'none'\"\n    (addOnButtonClicked)=\"onOpenPopover(popover, dialogTemplate)\"\n>\n</fd-input-group>\n@if (buttonMenuMode) {\n<button\n    fd-button\n    [label]=\"tempFormmatedDate || placeholder\"\n    [title]=\"placeholder\"\n    [fdType]=\"value ? 'standard' : 'transparent'\"\n    [fdMenu]=\"true\"\n    (click)=\"onOpenPopover(popover, dialogTemplate)\"\n    [class.placeholder-custom]=\"!value\"\n    class=\"menu-button-datepicker\"\n></button>\n}\n\n<fd-popover #popover (isOpenChange)=\"onPopoverOpenChange($event)\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n    <fd-popover-body [style.width.px]=\"width$ | async\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                month;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    width: width$ | async,\n                    height: height,\n                    rtl: rtl$ | async,\n                    weekDays: weekDays,\n                    weekDaysMin: weekDaysMin,\n                    today: today,\n                    deviceSize: deviceSize,\n                    popover: popover\n                }\n            \"\n        >\n        </ng-container>\n        <div fd-popover-body-footer>\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-right>\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\n                </div>\n            </div>\n        </div>\n    </fd-popover-body>\n</fd-popover>\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-body>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    month;\n                    context: {\n                        $implicit: selectedMonth$ | async,\n                        width: width$ | async,\n                        height: height,\n                        rtl: rtl$ | async,\n                        weekDays: weekDays,\n                        weekDaysMin: weekDaysMin,\n                        today: today,\n                        deviceSize: deviceSize,\n                        popover: popover,\n                        dialog: dialog\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            <container *ngTemplateOutlet=\"footerButtons; context: { dialog: dialog }\"></container>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n<ng-template #footerButtons let-dialog=\"dialog\">\n    <fd-button-bar [label]=\"'Ok' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onOk(popover, dialog)\"></fd-button-bar>\n    <fd-button-bar\n        [label]=\"'Clear' | bbbTranslate\"\n        fdType=\"standard\"\n        (click)=\"onClear(popover, dialog)\"\n    ></fd-button-bar>\n    <fd-button-bar [label]=\"'Cancel' | bbbTranslate\" (click)=\"onCancel(popover, dialog)\"></fd-button-bar>\n</ng-template>\n<ng-template\n    #month\n    let-selectedMonth\n    let-width=\"width\"\n    let-height=\"height\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-popover=\"popover\"\n    let-dialog=\"dialog\"\n>\n    @if (showDate) {\n    <fd-toolbar [fdType]=\"'transparent'\">\n        <button\n            fd-button\n            fd-toolbar-item\n            [label]=\"(showDate ? 'DateR_Today' : 'Now') | bbbTranslate\"\n            (click)=\"onToday()\"\n        ></button>\n        @if (showDate) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"rtl ? 'navigation-right-arrow' : 'navigation-left-arrow'\"\n            (click)=\"onPrevTap()\"\n        ></button>\n        } @if (showDate) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"rtl ? 'navigation-left-arrow' : 'navigation-right-arrow'\"\n            (click)=\"onNextTap()\"\n        ></button>\n        } @if (showDate) {\n        <div class=\"month-years-wrapper\" fd-title fd-toolbar-item>\n            @if (selectionMode === 'day' || selectionMode === 'month') {\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.monthName\"\n                (click)=\"selectionMode = 'month'\"\n            ></button>\n            }\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.year\"\n                (click)=\"selectionMode = 'year'\"\n            ></button>\n        </div>\n        }\n    </fd-toolbar>\n    }\n    <div style=\"display: flex\">\n        @switch (selectionMode) { @case ('month') {\n        <div class=\"month-year-selection-wrapper\">\n            @for (month of months; track month; let i = $index) {\n            <button\n                style=\"flex-grow: 1; width: 33%\"\n                fd-button\n                [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\n                [label]=\"month\"\n                (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\n            ></button>\n            }\n        </div>\n        } @case ('year') {\n        <div class=\"month-year-selection-wrapper\">\n            @for (year of years; track year) {\n            <button\n                style=\"flex-grow: 1; width: 25%\"\n                fd-button\n                [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\n                [label]=\"year\"\n                (click)=\"selectionMode = 'day'; onYearSelected(year)\"\n            ></button>\n            }\n        </div>\n        } @default {\n        <div style=\"display: flex\">\n            @if (showDate) {\n            <bc-calendar-month\n                [style.width]=\"width\"\n                [containerHeight]=\"height\"\n                [containerWidth]=\"width\"\n                [rtl]=\"rtl\"\n                [monthWeeksCount]=\"selectedMonth.weeksCount\"\n                [weekDays]=\"weekDays\"\n                [weekDaysMin]=\"weekDaysMin\"\n                [today]=\"today\"\n                [datePicker]=\"true\"\n                [dateRange]=\"true\"\n                [selectedDate]=\"startSelectedDay ? startSelectedDay.date : value\"\n                [days]=\"selectedMonth.days\"\n                [deviceSize]=\"deviceSize\"\n                (dayClick)=\"onDayClick($event, popover, dialog)\"\n            ></bc-calendar-month>\n            }\n            <div class=\"seperator\"></div>\n            @if (showTime) {\n            <div>\n                <fd-time\n                    style=\"direction: ltr\"\n                    fdCompact\n                    [keepTwoDigits]=\"true\"\n                    [(ngModel)]=\"timeValue\"\n                    [displaySeconds]=\"false\"\n                ></fd-time>\n                <div style=\"display: flex; gap: 0.2rem; padding: 0.5rem\">\n                    <input\n                        fd-form-control\n                        class=\"remove-arrow\"\n                        style=\"width: 3rem\"\n                        [value]=\"timeValue?.minute\"\n                        type=\"number\"\n                        maxValue=\"23\"\n                        (input)=\"onMinuteTextChange($event)\"\n                    />\n                    <input\n                        fd-form-control\n                        style=\"width: 3rem\"\n                        class=\"remove-arrow\"\n                        [value]=\"timeValue?.hour\"\n                        type=\"number\"\n                        maxValue=\"59\"\n                        (input)=\"onHourTextChange($event)\"\n                    />\n                </div>\n            </div>\n            }\n        </div>\n        } }\n    </div>\n</ng-template>\n", styles: [":host{display:block}fd-popover{display:block}fd-input-group ::ng-deep input{direction:ltr}fd-time ::ng-deep .fd-time{padding-top:0}.seperator{border-left:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NumbersOnlyInputDirective, selector: "input[type=number], input[numbersOnly]" }, { kind: "component", type: i2$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i2$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: i5$1.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i9.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: "component", type: i10.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i10.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i10.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i5$2.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i6$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: i6$1.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i6$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i13.TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "component", type: i7.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: ["monthWeeksCount", "weekDays", "weekDaysMin", "today", "containerHeight", "days", "calendarFields", "rtl", "deviceSize", "moDataList", "datePicker", "rangePicker", "canDelete", "canAdd", "canEdit", "canView", "selectedDate", "startSelectedDayIndex", "endSelectedDayIndex"], outputs: ["editEvent", "deleteEvent", "daySelect", "dayClick", "dayMouseMove", "dayMouseUp", "dayMouseDown", "showEvent"] }, { kind: "component", type: CalendarSelectionDaysComponent, selector: "bc-calendar-selection-days", inputs: ["startSelectedDayIndex", "endSelectedDayIndex", "monthInfo", "inline"], outputs: ["rangeChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "timeComponent", first: true, predicate: TimeComponent, descendants: true }, { propertyName: "inputGroupComponent", first: true, predicate: InputGroupComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (inlineMode) {\n<ng-container\n    *ngTemplateOutlet=\"\n        daterangeMode ? dateRangeTpl : month;\n        context: {\n            $implicit: selectedMonth$ | async,\n            width: width$ | async,\n            height: height,\n            rtl: rtl$ | async,\n            weekDays: weekDays,\n            weekDaysMin: weekDaysMin,\n            today: today,\n            deviceSize: deviceSize,\n            popover: popover\n        }\n    \"\n>\n</ng-container>\n}\n<ng-template #dateRangeTpl>\n    <bc-calendar-selection-days\n        fd-toolbar-item\n        [inline]=\"true\"\n        [monthInfo]=\"(selectedMonth$ | async)!!\"\n        (rangeChange)=\"onRangeChange($event)\"\n    ></bc-calendar-selection-days>\n</ng-template>\n<fd-input-group\n    placement=\"after\"\n    glyph=\"calendar\"\n    glyphAriaLabel=\"select day\"\n    ariaLabelledBy=\"fd-input-group-icon-label-2\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    [button]=\"true\"\n    [state]=\"isValid ? 'success' : 'error'\"\n    [showFocus]=\"true\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [style.display]=\"!buttonMenuMode || inlineMode ? 'inherit' : 'none'\"\n    (addOnButtonClicked)=\"onOpenPopover(popover, dialogTemplate)\"\n>\n</fd-input-group>\n@if (buttonMenuMode) {\n<button\n    fd-button\n    [label]=\"tempFormmatedDate || placeholder\"\n    [title]=\"placeholder\"\n    [fdType]=\"value ? 'standard' : 'transparent'\"\n    [fdMenu]=\"true\"\n    (click)=\"onOpenPopover(popover, dialogTemplate)\"\n    [class.placeholder-custom]=\"!value\"\n    class=\"menu-button-datepicker\"\n></button>\n}\n\n<fd-popover #popover (isOpenChange)=\"onPopoverOpenChange($event)\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n    <fd-popover-body [style.width.px]=\"width$ | async\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                daterangeMode ? dateRangeTpl : month;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    width: width$ | async,\n                    height: height,\n                    rtl: rtl$ | async,\n                    weekDays: weekDays,\n                    weekDaysMin: weekDaysMin,\n                    today: today,\n                    deviceSize: deviceSize,\n                    popover: popover\n                }\n            \"\n        >\n        </ng-container>\n        <div fd-popover-body-footer>\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-right>\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\n                </div>\n            </div>\n        </div>\n    </fd-popover-body>\n</fd-popover>\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-body>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    month;\n                    context: {\n                        $implicit: selectedMonth$ | async,\n                        width: width$ | async,\n                        height: height,\n                        rtl: rtl$ | async,\n                        weekDays: weekDays,\n                        weekDaysMin: weekDaysMin,\n                        today: today,\n                        deviceSize: deviceSize,\n                        popover: popover,\n                        dialog: dialog\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            <container *ngTemplateOutlet=\"footerButtons; context: { dialog: dialog }\"></container>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n<ng-template #footerButtons let-dialog=\"dialog\">\n    <fd-button-bar [label]=\"'Ok' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onOk(popover, dialog)\"></fd-button-bar>\n    <fd-button-bar\n        [label]=\"'Clear' | bbbTranslate\"\n        fdType=\"standard\"\n        (click)=\"onClear(popover, dialog)\"\n    ></fd-button-bar>\n    <fd-button-bar [label]=\"'Cancel' | bbbTranslate\" (click)=\"onCancel(popover, dialog)\"></fd-button-bar>\n</ng-template>\n<ng-template\n    #month\n    let-selectedMonth\n    let-width=\"width\"\n    let-height=\"height\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-popover=\"popover\"\n    let-dialog=\"dialog\"\n>\n    @if (showDate) {\n    <fd-toolbar [fdType]=\"'transparent'\">\n        <button\n            fd-button\n            fd-toolbar-item\n            [label]=\"(showDate ? 'DateR_Today' : 'Now') | bbbTranslate\"\n            (click)=\"onToday()\"\n        ></button>\n        @if (showDate) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"rtl ? 'navigation-right-arrow' : 'navigation-left-arrow'\"\n            (click)=\"onPrevTap()\"\n        ></button>\n        } @if (showDate) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"rtl ? 'navigation-left-arrow' : 'navigation-right-arrow'\"\n            (click)=\"onNextTap()\"\n        ></button>\n        } @if (showDate) {\n        <div class=\"month-years-wrapper\" fd-title fd-toolbar-item>\n            @if (selectionMode === 'day' || selectionMode === 'month') {\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.monthName\"\n                (click)=\"selectionMode = 'month'\"\n            ></button>\n            }\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.year\"\n                (click)=\"selectionMode = 'year'\"\n            ></button>\n        </div>\n        }\n    </fd-toolbar>\n    }\n    <div style=\"display: flex\">\n        @switch (selectionMode) { @case ('month') {\n        <div class=\"month-year-selection-wrapper\">\n            @for (month of months; track month; let i = $index) {\n            <button\n                style=\"flex-grow: 1; width: 33%\"\n                fd-button\n                [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\n                [label]=\"month\"\n                (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\n            ></button>\n            }\n        </div>\n        } @case ('year') {\n        <div class=\"month-year-selection-wrapper\">\n            @for (year of years; track year) {\n            <button\n                style=\"flex-grow: 1; width: 25%\"\n                fd-button\n                [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\n                [label]=\"year\"\n                (click)=\"selectionMode = 'day'; onYearSelected(year)\"\n            ></button>\n            }\n        </div>\n        } @default {\n        <div style=\"display: flex\">\n            @if (showDate) {\n            <bc-calendar-month\n                [style.width]=\"width\"\n                [containerHeight]=\"height\"\n                [containerWidth]=\"width\"\n                [rtl]=\"rtl\"\n                [monthWeeksCount]=\"selectedMonth.weeksCount\"\n                [weekDays]=\"weekDays\"\n                [weekDaysMin]=\"weekDaysMin\"\n                [today]=\"today\"\n                [datePicker]=\"true\"\n                [dateRange]=\"true\"\n                [selectedDate]=\"startSelectedDay ? startSelectedDay.date : value\"\n                [days]=\"selectedMonth.days\"\n                [deviceSize]=\"deviceSize\"\n                (dayClick)=\"onDayClick($event, popover, dialog)\"\n            ></bc-calendar-month>\n            }\n            <div class=\"seperator\"></div>\n            @if (showTime) {\n            <div>\n                <fd-time\n                    style=\"direction: ltr\"\n                    fdCompact\n                    [keepTwoDigits]=\"true\"\n                    [(ngModel)]=\"timeValue\"\n                    [displaySeconds]=\"false\"\n                ></fd-time>\n                <div style=\"display: flex; gap: 0.2rem; padding: 0.5rem\">\n                    <input\n                        fd-form-control\n                        class=\"remove-arrow\"\n                        style=\"width: 3rem\"\n                        [value]=\"timeValue?.minute\"\n                        type=\"number\"\n                        maxValue=\"23\"\n                        (input)=\"onMinuteTextChange($event)\"\n                    />\n                    <input\n                        fd-form-control\n                        style=\"width: 3rem\"\n                        class=\"remove-arrow\"\n                        [value]=\"timeValue?.hour\"\n                        type=\"number\"\n                        maxValue=\"59\"\n                        (input)=\"onHourTextChange($event)\"\n                    />\n                </div>\n            </div>\n            }\n        </div>\n        } }\n    </div>\n</ng-template>\n", styles: [":host{display:block}fd-popover{display:block}fd-input-group ::ng-deep input{direction:ltr}fd-time ::ng-deep .fd-time{padding-top:0}.seperator{border-left:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NumbersOnlyInputDirective, selector: "input[type=number], input[numbersOnly]" }, { kind: "component", type: i2$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i2$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: i5$1.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8$1.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i9.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: "component", type: i10.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i10.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i10.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i5$2.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i6$1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: i6$1.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i6$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i13.TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "component", type: i7.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: ["monthWeeksCount", "weekDays", "weekDaysMin", "today", "containerHeight", "days", "calendarFields", "rtl", "deviceSize", "moDataList", "datePicker", "rangePicker", "canDelete", "canAdd", "canEdit", "canView", "selectedDate", "startSelectedDayIndex", "endSelectedDayIndex"], outputs: ["editEvent", "deleteEvent", "daySelect", "dayClick", "dayMouseMove", "dayMouseUp", "dayMouseDown", "showEvent"] }, { kind: "component", type: CalendarSelectionDaysComponent, selector: "bc-calendar-selection-days", inputs: ["startSelectedDayIndex", "endSelectedDayIndex", "monthInfo", "inline"], outputs: ["rangeChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -1926,7 +1926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useFactory: getDateService
                         },
                         CalendarService
-                    ], standalone: false, template: "@if (inlineMode) {\n<ng-container\n    *ngTemplateOutlet=\"\n        daterangeMode ? dateRangeTpl : month;\n        context: {\n            $implicit: selectedMonth$ | async,\n            width: width$ | async,\n            height: height,\n            rtl: rtl$ | async,\n            weekDays: weekDays,\n            weekDaysMin: weekDaysMin,\n            today: today,\n            deviceSize: deviceSize,\n            popover: popover\n        }\n    \"\n>\n</ng-container>\n}\n<ng-template #dateRangeTpl>\n    <bc-calendar-selection-days\n        fd-toolbar-item\n        [inline]=\"true\"\n        [monthInfo]=\"(selectedMonth$ | async)!!\"\n        (rangeChange)=\"onRangeChange($event)\"\n    ></bc-calendar-selection-days>\n</ng-template>\n<fd-input-group\n    placement=\"after\"\n    glyph=\"calendar\"\n    glyphAriaLabel=\"select day\"\n    ariaLabelledBy=\"fd-input-group-icon-label-2\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    [button]=\"true\"\n    [state]=\"isValid ? 'success' : 'error'\"\n    [showFocus]=\"true\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [style.display]=\"!buttonMenuMode || inlineMode ? 'inherit' : 'none'\"\n    (addOnButtonClicked)=\"onOpenPopover(popover, dialogTemplate)\"\n>\n</fd-input-group>\n@if (buttonMenuMode) {\n<button\n    fd-button\n    [label]=\"tempFormmatedDate || placeholder\"\n    [title]=\"placeholder\"\n    [fdType]=\"value ? 'standard' : 'transparent'\"\n    [fdMenu]=\"true\"\n    (click)=\"onOpenPopover(popover, dialogTemplate)\"\n    [class.placeholder-custom]=\"!value\"\n    class=\"menu-button-datepicker\"\n></button>\n}\n\n<fd-popover #popover (isOpenChange)=\"onPopoverOpenChange($event)\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n    <fd-popover-body [style.width.px]=\"width$ | async\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                month;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    width: width$ | async,\n                    height: height,\n                    rtl: rtl$ | async,\n                    weekDays: weekDays,\n                    weekDaysMin: weekDaysMin,\n                    today: today,\n                    deviceSize: deviceSize,\n                    popover: popover\n                }\n            \"\n        >\n        </ng-container>\n        <div fd-popover-body-footer>\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-right>\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\n                </div>\n            </div>\n        </div>\n    </fd-popover-body>\n</fd-popover>\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-body>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    month;\n                    context: {\n                        $implicit: selectedMonth$ | async,\n                        width: width$ | async,\n                        height: height,\n                        rtl: rtl$ | async,\n                        weekDays: weekDays,\n                        weekDaysMin: weekDaysMin,\n                        today: today,\n                        deviceSize: deviceSize,\n                        popover: popover,\n                        dialog: dialog\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            <container *ngTemplateOutlet=\"footerButtons; context: { dialog: dialog }\"></container>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n<ng-template #footerButtons let-dialog=\"dialog\">\n    <fd-button-bar [label]=\"'Ok' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onOk(popover, dialog)\"></fd-button-bar>\n    <fd-button-bar\n        [label]=\"'Clear' | bbbTranslate\"\n        fdType=\"standard\"\n        (click)=\"onClear(popover, dialog)\"\n    ></fd-button-bar>\n    <fd-button-bar [label]=\"'Cancel' | bbbTranslate\" (click)=\"onCancel(popover, dialog)\"></fd-button-bar>\n</ng-template>\n<ng-template\n    #month\n    let-selectedMonth\n    let-width=\"width\"\n    let-height=\"height\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-popover=\"popover\"\n    let-dialog=\"dialog\"\n>\n    @if (showDate) {\n    <fd-toolbar [fdType]=\"'transparent'\">\n        <button\n            fd-button\n            fd-toolbar-item\n            [label]=\"(showDate ? 'DateR_Today' : 'Now') | bbbTranslate\"\n            (click)=\"onToday()\"\n        ></button>\n        @if (showDate) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"rtl ? 'navigation-right-arrow' : 'navigation-left-arrow'\"\n            (click)=\"onPrevTap()\"\n        ></button>\n        } @if (showDate) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"rtl ? 'navigation-left-arrow' : 'navigation-right-arrow'\"\n            (click)=\"onNextTap()\"\n        ></button>\n        } @if (showDate) {\n        <div class=\"month-years-wrapper\" fd-title fd-toolbar-item>\n            @if (selectionMode === 'day' || selectionMode === 'month') {\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.monthName\"\n                (click)=\"selectionMode = 'month'\"\n            ></button>\n            }\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.year\"\n                (click)=\"selectionMode = 'year'\"\n            ></button>\n        </div>\n        }\n    </fd-toolbar>\n    }\n    <div style=\"display: flex\">\n        @switch (selectionMode) { @case ('month') {\n        <div class=\"month-year-selection-wrapper\">\n            @for (month of months; track month; let i = $index) {\n            <button\n                style=\"flex-grow: 1; width: 33%\"\n                fd-button\n                [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\n                [label]=\"month\"\n                (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\n            ></button>\n            }\n        </div>\n        } @case ('year') {\n        <div class=\"month-year-selection-wrapper\">\n            @for (year of years; track year) {\n            <button\n                style=\"flex-grow: 1; width: 25%\"\n                fd-button\n                [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\n                [label]=\"year\"\n                (click)=\"selectionMode = 'day'; onYearSelected(year)\"\n            ></button>\n            }\n        </div>\n        } @default {\n        <div style=\"display: flex\">\n            @if (showDate) {\n            <bc-calendar-month\n                [style.width]=\"width\"\n                [containerHeight]=\"height\"\n                [containerWidth]=\"width\"\n                [rtl]=\"rtl\"\n                [monthWeeksCount]=\"selectedMonth.weeksCount\"\n                [weekDays]=\"weekDays\"\n                [weekDaysMin]=\"weekDaysMin\"\n                [today]=\"today\"\n                [datePicker]=\"true\"\n                [dateRange]=\"true\"\n                [selectedDate]=\"startSelectedDay ? startSelectedDay.date : value\"\n                [days]=\"selectedMonth.days\"\n                [deviceSize]=\"deviceSize\"\n                (dayClick)=\"onDayClick($event, popover, dialog)\"\n            ></bc-calendar-month>\n            }\n            <div class=\"seperator\"></div>\n            @if (showTime) {\n            <div>\n                <fd-time\n                    style=\"direction: ltr\"\n                    fdCompact\n                    [keepTwoDigits]=\"true\"\n                    [(ngModel)]=\"timeValue\"\n                    [displaySeconds]=\"false\"\n                ></fd-time>\n                <div style=\"display: flex; gap: 0.2rem; padding: 0.5rem\">\n                    <input\n                        fd-form-control\n                        class=\"remove-arrow\"\n                        style=\"width: 3rem\"\n                        [value]=\"timeValue?.minute\"\n                        type=\"number\"\n                        maxValue=\"23\"\n                        (input)=\"onMinuteTextChange($event)\"\n                    />\n                    <input\n                        fd-form-control\n                        style=\"width: 3rem\"\n                        class=\"remove-arrow\"\n                        [value]=\"timeValue?.hour\"\n                        type=\"number\"\n                        maxValue=\"59\"\n                        (input)=\"onHourTextChange($event)\"\n                    />\n                </div>\n            </div>\n            }\n        </div>\n        } }\n    </div>\n</ng-template>\n", styles: [":host{display:block}fd-popover{display:block}fd-input-group ::ng-deep input{direction:ltr}fd-time ::ng-deep .fd-time{padding-top:0}.seperator{border-left:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}\n"] }]
+                    ], standalone: false, template: "@if (inlineMode) {\n<ng-container\n    *ngTemplateOutlet=\"\n        daterangeMode ? dateRangeTpl : month;\n        context: {\n            $implicit: selectedMonth$ | async,\n            width: width$ | async,\n            height: height,\n            rtl: rtl$ | async,\n            weekDays: weekDays,\n            weekDaysMin: weekDaysMin,\n            today: today,\n            deviceSize: deviceSize,\n            popover: popover\n        }\n    \"\n>\n</ng-container>\n}\n<ng-template #dateRangeTpl>\n    <bc-calendar-selection-days\n        fd-toolbar-item\n        [inline]=\"true\"\n        [monthInfo]=\"(selectedMonth$ | async)!!\"\n        (rangeChange)=\"onRangeChange($event)\"\n    ></bc-calendar-selection-days>\n</ng-template>\n<fd-input-group\n    placement=\"after\"\n    glyph=\"calendar\"\n    glyphAriaLabel=\"select day\"\n    ariaLabelledBy=\"fd-input-group-icon-label-2\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    [button]=\"true\"\n    [state]=\"isValid ? 'success' : 'error'\"\n    [showFocus]=\"true\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [style.display]=\"!buttonMenuMode || inlineMode ? 'inherit' : 'none'\"\n    (addOnButtonClicked)=\"onOpenPopover(popover, dialogTemplate)\"\n>\n</fd-input-group>\n@if (buttonMenuMode) {\n<button\n    fd-button\n    [label]=\"tempFormmatedDate || placeholder\"\n    [title]=\"placeholder\"\n    [fdType]=\"value ? 'standard' : 'transparent'\"\n    [fdMenu]=\"true\"\n    (click)=\"onOpenPopover(popover, dialogTemplate)\"\n    [class.placeholder-custom]=\"!value\"\n    class=\"menu-button-datepicker\"\n></button>\n}\n\n<fd-popover #popover (isOpenChange)=\"onPopoverOpenChange($event)\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n    <fd-popover-body [style.width.px]=\"width$ | async\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                daterangeMode ? dateRangeTpl : month;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    width: width$ | async,\n                    height: height,\n                    rtl: rtl$ | async,\n                    weekDays: weekDays,\n                    weekDaysMin: weekDaysMin,\n                    today: today,\n                    deviceSize: deviceSize,\n                    popover: popover\n                }\n            \"\n        >\n        </ng-container>\n        <div fd-popover-body-footer>\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-right>\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\n                </div>\n            </div>\n        </div>\n    </fd-popover-body>\n</fd-popover>\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-body>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    month;\n                    context: {\n                        $implicit: selectedMonth$ | async,\n                        width: width$ | async,\n                        height: height,\n                        rtl: rtl$ | async,\n                        weekDays: weekDays,\n                        weekDaysMin: weekDaysMin,\n                        today: today,\n                        deviceSize: deviceSize,\n                        popover: popover,\n                        dialog: dialog\n                    }\n                \"\n            >\n            </ng-container>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            <container *ngTemplateOutlet=\"footerButtons; context: { dialog: dialog }\"></container>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n<ng-template #footerButtons let-dialog=\"dialog\">\n    <fd-button-bar [label]=\"'Ok' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onOk(popover, dialog)\"></fd-button-bar>\n    <fd-button-bar\n        [label]=\"'Clear' | bbbTranslate\"\n        fdType=\"standard\"\n        (click)=\"onClear(popover, dialog)\"\n    ></fd-button-bar>\n    <fd-button-bar [label]=\"'Cancel' | bbbTranslate\" (click)=\"onCancel(popover, dialog)\"></fd-button-bar>\n</ng-template>\n<ng-template\n    #month\n    let-selectedMonth\n    let-width=\"width\"\n    let-height=\"height\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-popover=\"popover\"\n    let-dialog=\"dialog\"\n>\n    @if (showDate) {\n    <fd-toolbar [fdType]=\"'transparent'\">\n        <button\n            fd-button\n            fd-toolbar-item\n            [label]=\"(showDate ? 'DateR_Today' : 'Now') | bbbTranslate\"\n            (click)=\"onToday()\"\n        ></button>\n        @if (showDate) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"rtl ? 'navigation-right-arrow' : 'navigation-left-arrow'\"\n            (click)=\"onPrevTap()\"\n        ></button>\n        } @if (showDate) {\n        <button\n            fd-button\n            fd-toolbar-item\n            [fdType]=\"'transparent'\"\n            [glyph]=\"rtl ? 'navigation-left-arrow' : 'navigation-right-arrow'\"\n            (click)=\"onNextTap()\"\n        ></button>\n        } @if (showDate) {\n        <div class=\"month-years-wrapper\" fd-title fd-toolbar-item>\n            @if (selectionMode === 'day' || selectionMode === 'month') {\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.monthName\"\n                (click)=\"selectionMode = 'month'\"\n            ></button>\n            }\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.year\"\n                (click)=\"selectionMode = 'year'\"\n            ></button>\n        </div>\n        }\n    </fd-toolbar>\n    }\n    <div style=\"display: flex\">\n        @switch (selectionMode) { @case ('month') {\n        <div class=\"month-year-selection-wrapper\">\n            @for (month of months; track month; let i = $index) {\n            <button\n                style=\"flex-grow: 1; width: 33%\"\n                fd-button\n                [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\n                [label]=\"month\"\n                (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\n            ></button>\n            }\n        </div>\n        } @case ('year') {\n        <div class=\"month-year-selection-wrapper\">\n            @for (year of years; track year) {\n            <button\n                style=\"flex-grow: 1; width: 25%\"\n                fd-button\n                [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\n                [label]=\"year\"\n                (click)=\"selectionMode = 'day'; onYearSelected(year)\"\n            ></button>\n            }\n        </div>\n        } @default {\n        <div style=\"display: flex\">\n            @if (showDate) {\n            <bc-calendar-month\n                [style.width]=\"width\"\n                [containerHeight]=\"height\"\n                [containerWidth]=\"width\"\n                [rtl]=\"rtl\"\n                [monthWeeksCount]=\"selectedMonth.weeksCount\"\n                [weekDays]=\"weekDays\"\n                [weekDaysMin]=\"weekDaysMin\"\n                [today]=\"today\"\n                [datePicker]=\"true\"\n                [dateRange]=\"true\"\n                [selectedDate]=\"startSelectedDay ? startSelectedDay.date : value\"\n                [days]=\"selectedMonth.days\"\n                [deviceSize]=\"deviceSize\"\n                (dayClick)=\"onDayClick($event, popover, dialog)\"\n            ></bc-calendar-month>\n            }\n            <div class=\"seperator\"></div>\n            @if (showTime) {\n            <div>\n                <fd-time\n                    style=\"direction: ltr\"\n                    fdCompact\n                    [keepTwoDigits]=\"true\"\n                    [(ngModel)]=\"timeValue\"\n                    [displaySeconds]=\"false\"\n                ></fd-time>\n                <div style=\"display: flex; gap: 0.2rem; padding: 0.5rem\">\n                    <input\n                        fd-form-control\n                        class=\"remove-arrow\"\n                        style=\"width: 3rem\"\n                        [value]=\"timeValue?.minute\"\n                        type=\"number\"\n                        maxValue=\"23\"\n                        (input)=\"onMinuteTextChange($event)\"\n                    />\n                    <input\n                        fd-form-control\n                        style=\"width: 3rem\"\n                        class=\"remove-arrow\"\n                        [value]=\"timeValue?.hour\"\n                        type=\"number\"\n                        maxValue=\"59\"\n                        (input)=\"onHourTextChange($event)\"\n                    />\n                </div>\n            </div>\n            }\n        </div>\n        } }\n    </div>\n</ng-template>\n", styles: [":host{display:block}fd-popover{display:block}fd-input-group ::ng-deep input{direction:ltr}fd-time ::ng-deep .fd-time{padding-top:0}.seperator{border-left:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.DatetimeAdapter }, { type: i1.DateTimeToCaptionPipe }, { type: i1.LogService }, { type: i2$1.DialogService }, { type: i1.PortalService }], propDecorators: { placeholder: [{
                 type: Input
             }], primaryCalendarType: [{