barsa-calendar 0.0.2 → 0.0.4

package/fesm2020/barsa-calendar.mjs

@@ -580,7 +580,7 @@ class CalendarService extends BaseComponent {
         const startOfMonth = this._dateService.startOfMonth(activeDate);
         const endOfMonth = this._dateService.endOfMonth(activeDate);
         const dateInfo = this._dateService.getDateInfo(activeDate);
-        const dayInWeek = this._dateService.day(startOfMonth) + 1; // we add 1 to the dayInWeek because it's starts with zero
+        const dayInWeek = this._dateService.day(startOfMonth); // we add 1 to the dayInWeek because it's starts with zero
         let weekCounter = 0;
         let dayCounter = 0;
         for (let i = 0; i < 42; i++) {
@@ -711,10 +711,10 @@ class DayNumberBoxComponent extends BaseComponent {
     }
 }
 DayNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DayNumberBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DayNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: { isWeekMode: "isWeekMode", isSingleDay: "isSingleDay", day: "day", isPickerMode: "isPickerMode", itemInRange: "itemInRange", isActive: "isActive" }, outputs: { dayClick: "dayClick", dayMouseDown: "dayMouseDown", dayMouseUp: "dayMouseUp", dayMouseMove: "dayMouseMove" }, host: { listeners: { "mouseup": "mouseup()", "mousedown": "mousedown()", "mousemove": "mousemove()", "click": "onClick()" }, properties: { "style.display": "this.display", "style.cursor": "this._cursor", "class": "this._hover", "class.fd-calendar__item--range": "this._itemInRange", "class.is-active": "this._isActive" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\r\n    fd-button\r\n    (click)=\"onDayBoxNumberClick($event, day)\"\r\n    [style.width]=\"isSingleDay ? 'auto' : '100%'\"\r\n    [style.maxWidth]=\"isSingleDay ? 'auto' : '100%'\"\r\n>\r\n    <div\r\n        [ngClass]=\"{\r\n            'fd-avatar--s': isWeekMode,\r\n            'fd-avatar--xs': !isWeekMode || (day.isToday && isPickerMode),\r\n            'fd-avatar': !isPickerMode || day.isToday,\r\n            'fd-avatar--circle': !isPickerMode || day.isToday\r\n        }\"\r\n        [class.not-today]=\"!day.isToday\"\r\n        [style.fontSize]=\"isWeekMode ? '1.7rem' : null\"\r\n    >\r\n        <span>{{ day.dayInMonth }}</span>\r\n    </div>\r\n</button>\r\n", styles: [":host{position:relative;height:100%;justify-content:center}button{justify-content:center;flex-direction:column;align-items:center;background-color:transparent;border:none;height:100%;max-height:100%}button.hover:hover .not-today{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}button div{cursor:pointer}button .not-today{background-color:transparent;color:var(--sapList_HeaderTextColor, #32363a)}button .not-today:hover{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DayNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: { isWeekMode: "isWeekMode", isSingleDay: "isSingleDay", day: "day", isPickerMode: "isPickerMode", itemInRange: "itemInRange", isActive: "isActive" }, outputs: { dayClick: "dayClick", dayMouseDown: "dayMouseDown", dayMouseUp: "dayMouseUp", dayMouseMove: "dayMouseMove" }, host: { listeners: { "mouseup": "mouseup()", "mousedown": "mousedown()", "mousemove": "mousemove()", "click": "onClick()" }, properties: { "style.display": "this.display", "style.cursor": "this._cursor", "class": "this._hover", "class.fd-calendar__item--range": "this._itemInRange", "class.is-active": "this._isActive" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\n    fd-button\n    (click)=\"onDayBoxNumberClick($event, day)\"\n    [style.width]=\"isSingleDay ? 'auto' : '100%'\"\n    [style.maxWidth]=\"isSingleDay ? 'auto' : '100%'\"\n    [ngClass]=\"day.isInMonth ? 'inMonth' : 'notInMonth'\"\n>\n    <div\n        [ngClass]=\"{\n            'fd-avatar--s': isWeekMode,\n            'fd-avatar--xs': !isWeekMode || (day.isToday && isPickerMode),\n            'fd-avatar': !isPickerMode || day.isToday,\n            'fd-avatar--circle': !isPickerMode || day.isToday\n        }\"\n        [class.not-today]=\"!day.isToday\"\n        [style.fontSize]=\"isWeekMode ? '1.7rem' : null\"\n    >\n        <span>{{ day.dayInMonth }}</span>\n    </div>\n</button>\n", styles: [":host{position:relative;height:100%;justify-content:center}button{justify-content:center;flex-direction:column;align-items:center;background-color:transparent;border:none;height:100%;max-height:100%}button.hover:hover .not-today{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}button div{cursor:pointer}button .not-today{background-color:transparent;color:var(--sapList_HeaderTextColor, #32363a)}button .not-today:hover{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}.notInMonth span{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DayNumberBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bc-day-number-box', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n    fd-button\r\n    (click)=\"onDayBoxNumberClick($event, day)\"\r\n    [style.width]=\"isSingleDay ? 'auto' : '100%'\"\r\n    [style.maxWidth]=\"isSingleDay ? 'auto' : '100%'\"\r\n>\r\n    <div\r\n        [ngClass]=\"{\r\n            'fd-avatar--s': isWeekMode,\r\n            'fd-avatar--xs': !isWeekMode || (day.isToday && isPickerMode),\r\n            'fd-avatar': !isPickerMode || day.isToday,\r\n            'fd-avatar--circle': !isPickerMode || day.isToday\r\n        }\"\r\n        [class.not-today]=\"!day.isToday\"\r\n        [style.fontSize]=\"isWeekMode ? '1.7rem' : null\"\r\n    >\r\n        <span>{{ day.dayInMonth }}</span>\r\n    </div>\r\n</button>\r\n", styles: [":host{position:relative;height:100%;justify-content:center}button{justify-content:center;flex-direction:column;align-items:center;background-color:transparent;border:none;height:100%;max-height:100%}button.hover:hover .not-today{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}button div{cursor:pointer}button .not-today{background-color:transparent;color:var(--sapList_HeaderTextColor, #32363a)}button .not-today:hover{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}\n"] }]
+            args: [{ selector: 'bc-day-number-box', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    fd-button\n    (click)=\"onDayBoxNumberClick($event, day)\"\n    [style.width]=\"isSingleDay ? 'auto' : '100%'\"\n    [style.maxWidth]=\"isSingleDay ? 'auto' : '100%'\"\n    [ngClass]=\"day.isInMonth ? 'inMonth' : 'notInMonth'\"\n>\n    <div\n        [ngClass]=\"{\n            'fd-avatar--s': isWeekMode,\n            'fd-avatar--xs': !isWeekMode || (day.isToday && isPickerMode),\n            'fd-avatar': !isPickerMode || day.isToday,\n            'fd-avatar--circle': !isPickerMode || day.isToday\n        }\"\n        [class.not-today]=\"!day.isToday\"\n        [style.fontSize]=\"isWeekMode ? '1.7rem' : null\"\n    >\n        <span>{{ day.dayInMonth }}</span>\n    </div>\n</button>\n", styles: [":host{position:relative;height:100%;justify-content:center}button{justify-content:center;flex-direction:column;align-items:center;background-color:transparent;border:none;height:100%;max-height:100%}button.hover:hover .not-today{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}button div{cursor:pointer}button .not-today{background-color:transparent;color:var(--sapList_HeaderTextColor, #32363a)}button .not-today:hover{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}.notInMonth span{opacity:.5}\n"] }]
         }], propDecorators: { display: [{
                 type: HostBinding,
                 args: ['style.display']
@@ -815,10 +815,10 @@ class EventPreviewComponent extends BaseComponent {
     }
 }
 EventPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: EventPreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-EventPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: EventPreviewComponent, selector: "bc-event-preview", inputs: { event: "event", calendarFields: "calendarFields", popover: "popover", popover2: "popover2", canEdit: "canEdit", canDelete: "canDelete" }, outputs: { deleteEvent: "deleteEvent", editEvent: "editEvent" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel style=\"min-width: 400px\">\n    <fd-layout-panel-header>\n        <fd-layout-panel-actions>\n            <fd-toolbar [clearBorder]=\"true\" [fdType]=\"'transparent'\">\n                <fdp-button\n                    *ngIf=\"canEdit\"\n                    fd-toolbar-item\n                    glyph=\"edit\"\n                    buttonType=\"transparent\"\n                    (click)=\"onEdit(event, popover, popover2)\"\n                ></fdp-button>\n                <fdp-button\n                    *ngIf=\"canDelete\"\n                    fd-toolbar-item\n                    glyph=\"delete\"\n                    buttonType=\"transparent\"\n                    (click)=\"onDelete(event, popover, popover2)\"\n                ></fdp-button>\n                <fdp-button\n                    fd-toolbar-item\n                    glyph=\"decline\"\n                    buttonType=\"transparent\"\n                    (click)=\"onClosePopover(popover)\"\n                ></fdp-button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body>\n        <fd-quick-view>\n            <fd-quick-view-subheader>\n                <fd-avatar\n                    size=\"xs\"\n                    glyph=\"color-fill\"\n                    [transparent]=\"true\"\n                    [style.color]=\"event[calendarFields.Color] ? event[calendarFields.Color] : ''\"\n                ></fd-avatar>\n                <fd-quick-view-subheader-title>\n                    {{ event[calendarFields.Title] }}\n                </fd-quick-view-subheader-title>\n                <fd-quick-view-subheader-subtitle>\n                    <span>{{ event.$StartDateInfo | eventDate: event.$EndDateInfo }} </span>\n                </fd-quick-view-subheader-subtitle>\n            </fd-quick-view-subheader>\n\n            <fd-quick-view-group>\n                <fd-quick-view-group-item *ngIf=\"event | barsaVisibleValue: calendarFields.Notes as notes\">\n                    <fd-quick-view-group-item-label>\n                        <fd-icon glyph=\"text-align-justified\"></fd-icon>\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <div fd-quick-view-group-item-content-element style=\"white-space: normal\">\n                            {{ notes }}\n                        </div>\n                    </fd-quick-view-group-item-content>\n                </fd-quick-view-group-item>\n                <fd-quick-view-group-item>\n                    <fd-quick-view-group-item-label>\n                        <fd-icon glyph=\"appointment\"></fd-icon>\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <span>\u06A9\u0627\u0631\u0628\u0631</span>\n                    </fd-quick-view-group-item-content>\n                </fd-quick-view-group-item>\n            </fd-quick-view-group>\n        </fd-quick-view>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n", styles: [":host{display:block;width:460px}:host ::ng-deep .fd-form-item{flex-direction:row}:host fd-avatar{min-width:1rem;width:1rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i4$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i4$1.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i4$1.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i4$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i5.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i5.QuickViewSubheaderComponent, selector: "fd-quick-view-subheader" }, { kind: "component", type: i5.QuickViewSubheaderTitleComponent, selector: "fd-quick-view-subheader-title" }, { kind: "component", type: i5.QuickViewSubheaderSubtitleComponent, selector: "fd-quick-view-subheader-subtitle" }, { kind: "component", type: i5.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i5.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i5.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i5.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i5.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: i6.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i6.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "pipe", type: i2.VisibleValuePipe, name: "barsaVisibleValue" }, { kind: "pipe", type: EventDatePipe, name: "eventDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EventPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: EventPreviewComponent, selector: "bc-event-preview", inputs: { event: "event", calendarFields: "calendarFields", popover: "popover", popover2: "popover2", canEdit: "canEdit", canDelete: "canDelete" }, outputs: { deleteEvent: "deleteEvent", editEvent: "editEvent" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel style=\"min-width: 400px\">\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-actions>\r\n            <fd-toolbar [clearBorder]=\"true\" [fdType]=\"'transparent'\">\r\n                <fdp-button\r\n                    *ngIf=\"canEdit\"\r\n                    fd-toolbar-item\r\n                    glyph=\"edit\"\r\n                    buttonType=\"transparent\"\r\n                    (click)=\"onEdit(event, popover, popover2)\"\r\n                ></fdp-button>\r\n                <fdp-button\r\n                    *ngIf=\"canDelete\"\r\n                    fd-toolbar-item\r\n                    glyph=\"delete\"\r\n                    buttonType=\"transparent\"\r\n                    (click)=\"onDelete(event, popover, popover2)\"\r\n                ></fdp-button>\r\n                <fdp-button\r\n                    fd-toolbar-item\r\n                    glyph=\"decline\"\r\n                    buttonType=\"transparent\"\r\n                    (click)=\"onClosePopover(popover)\"\r\n                ></fdp-button>\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n    </fd-layout-panel-header>\r\n    <fd-layout-panel-body>\r\n        <fd-quick-view>\r\n            <fd-quick-view-subheader>\r\n                <fd-avatar\r\n                    size=\"xs\"\r\n                    glyph=\"color-fill\"\r\n                    [transparent]=\"true\"\r\n                    [style.color]=\"event[calendarFields.Color] ? event[calendarFields.Color] : ''\"\r\n                ></fd-avatar>\r\n                <fd-quick-view-subheader-title>\r\n                    {{ event[calendarFields.Title] }}\r\n                </fd-quick-view-subheader-title>\r\n                <fd-quick-view-subheader-subtitle>\r\n                    <span>{{ event.$StartDateInfo | eventDate: event.$EndDateInfo }} </span>\r\n                </fd-quick-view-subheader-subtitle>\r\n            </fd-quick-view-subheader>\r\n\r\n            <fd-quick-view-group>\r\n                <fd-quick-view-group-item *ngIf=\"event | barsaVisibleValue: calendarFields.Notes as notes\">\r\n                    <fd-quick-view-group-item-label>\r\n                        <fd-icon glyph=\"text-align-justified\"></fd-icon>\r\n                    </fd-quick-view-group-item-label>\r\n                    <fd-quick-view-group-item-content>\r\n                        <div fd-quick-view-group-item-content-element style=\"white-space: normal\">\r\n                            {{ notes }}\r\n                        </div>\r\n                    </fd-quick-view-group-item-content>\r\n                </fd-quick-view-group-item>\r\n                <fd-quick-view-group-item>\r\n                    <fd-quick-view-group-item-label>\r\n                        <fd-icon glyph=\"appointment\"></fd-icon>\r\n                    </fd-quick-view-group-item-label>\r\n                    <fd-quick-view-group-item-content>\r\n                        <span>\u06A9\u0627\u0631\u0628\u0631</span>\r\n                    </fd-quick-view-group-item-content>\r\n                </fd-quick-view-group-item>\r\n            </fd-quick-view-group>\r\n        </fd-quick-view>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n", styles: [":host{display:block;width:460px}:host ::ng-deep .fd-form-item{flex-direction:row}:host fd-avatar{min-width:1rem;width:1rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i4$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i4$1.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i4$1.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i4$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i5.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i5.QuickViewSubheaderComponent, selector: "fd-quick-view-subheader" }, { kind: "component", type: i5.QuickViewSubheaderTitleComponent, selector: "fd-quick-view-subheader-title" }, { kind: "component", type: i5.QuickViewSubheaderSubtitleComponent, selector: "fd-quick-view-subheader-subtitle" }, { kind: "component", type: i5.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i5.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i5.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i5.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i5.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: i6.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i6.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "pipe", type: i2.VisibleValuePipe, name: "barsaVisibleValue" }, { kind: "pipe", type: EventDatePipe, name: "eventDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: EventPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bc-event-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel style=\"min-width: 400px\">\n    <fd-layout-panel-header>\n        <fd-layout-panel-actions>\n            <fd-toolbar [clearBorder]=\"true\" [fdType]=\"'transparent'\">\n                <fdp-button\n                    *ngIf=\"canEdit\"\n                    fd-toolbar-item\n                    glyph=\"edit\"\n                    buttonType=\"transparent\"\n                    (click)=\"onEdit(event, popover, popover2)\"\n                ></fdp-button>\n                <fdp-button\n                    *ngIf=\"canDelete\"\n                    fd-toolbar-item\n                    glyph=\"delete\"\n                    buttonType=\"transparent\"\n                    (click)=\"onDelete(event, popover, popover2)\"\n                ></fdp-button>\n                <fdp-button\n                    fd-toolbar-item\n                    glyph=\"decline\"\n                    buttonType=\"transparent\"\n                    (click)=\"onClosePopover(popover)\"\n                ></fdp-button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body>\n        <fd-quick-view>\n            <fd-quick-view-subheader>\n                <fd-avatar\n                    size=\"xs\"\n                    glyph=\"color-fill\"\n                    [transparent]=\"true\"\n                    [style.color]=\"event[calendarFields.Color] ? event[calendarFields.Color] : ''\"\n                ></fd-avatar>\n                <fd-quick-view-subheader-title>\n                    {{ event[calendarFields.Title] }}\n                </fd-quick-view-subheader-title>\n                <fd-quick-view-subheader-subtitle>\n                    <span>{{ event.$StartDateInfo | eventDate: event.$EndDateInfo }} </span>\n                </fd-quick-view-subheader-subtitle>\n            </fd-quick-view-subheader>\n\n            <fd-quick-view-group>\n                <fd-quick-view-group-item *ngIf=\"event | barsaVisibleValue: calendarFields.Notes as notes\">\n                    <fd-quick-view-group-item-label>\n                        <fd-icon glyph=\"text-align-justified\"></fd-icon>\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <div fd-quick-view-group-item-content-element style=\"white-space: normal\">\n                            {{ notes }}\n                        </div>\n                    </fd-quick-view-group-item-content>\n                </fd-quick-view-group-item>\n                <fd-quick-view-group-item>\n                    <fd-quick-view-group-item-label>\n                        <fd-icon glyph=\"appointment\"></fd-icon>\n                    </fd-quick-view-group-item-label>\n                    <fd-quick-view-group-item-content>\n                        <span>\u06A9\u0627\u0631\u0628\u0631</span>\n                    </fd-quick-view-group-item-content>\n                </fd-quick-view-group-item>\n            </fd-quick-view-group>\n        </fd-quick-view>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n", styles: [":host{display:block;width:460px}:host ::ng-deep .fd-form-item{flex-direction:row}:host fd-avatar{min-width:1rem;width:1rem}\n"] }]
+            args: [{ selector: 'bc-event-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel style=\"min-width: 400px\">\r\n    <fd-layout-panel-header>\r\n        <fd-layout-panel-actions>\r\n            <fd-toolbar [clearBorder]=\"true\" [fdType]=\"'transparent'\">\r\n                <fdp-button\r\n                    *ngIf=\"canEdit\"\r\n                    fd-toolbar-item\r\n                    glyph=\"edit\"\r\n                    buttonType=\"transparent\"\r\n                    (click)=\"onEdit(event, popover, popover2)\"\r\n                ></fdp-button>\r\n                <fdp-button\r\n                    *ngIf=\"canDelete\"\r\n                    fd-toolbar-item\r\n                    glyph=\"delete\"\r\n                    buttonType=\"transparent\"\r\n                    (click)=\"onDelete(event, popover, popover2)\"\r\n                ></fdp-button>\r\n                <fdp-button\r\n                    fd-toolbar-item\r\n                    glyph=\"decline\"\r\n                    buttonType=\"transparent\"\r\n                    (click)=\"onClosePopover(popover)\"\r\n                ></fdp-button>\r\n            </fd-toolbar>\r\n        </fd-layout-panel-actions>\r\n    </fd-layout-panel-header>\r\n    <fd-layout-panel-body>\r\n        <fd-quick-view>\r\n            <fd-quick-view-subheader>\r\n                <fd-avatar\r\n                    size=\"xs\"\r\n                    glyph=\"color-fill\"\r\n                    [transparent]=\"true\"\r\n                    [style.color]=\"event[calendarFields.Color] ? event[calendarFields.Color] : ''\"\r\n                ></fd-avatar>\r\n                <fd-quick-view-subheader-title>\r\n                    {{ event[calendarFields.Title] }}\r\n                </fd-quick-view-subheader-title>\r\n                <fd-quick-view-subheader-subtitle>\r\n                    <span>{{ event.$StartDateInfo | eventDate: event.$EndDateInfo }} </span>\r\n                </fd-quick-view-subheader-subtitle>\r\n            </fd-quick-view-subheader>\r\n\r\n            <fd-quick-view-group>\r\n                <fd-quick-view-group-item *ngIf=\"event | barsaVisibleValue: calendarFields.Notes as notes\">\r\n                    <fd-quick-view-group-item-label>\r\n                        <fd-icon glyph=\"text-align-justified\"></fd-icon>\r\n                    </fd-quick-view-group-item-label>\r\n                    <fd-quick-view-group-item-content>\r\n                        <div fd-quick-view-group-item-content-element style=\"white-space: normal\">\r\n                            {{ notes }}\r\n                        </div>\r\n                    </fd-quick-view-group-item-content>\r\n                </fd-quick-view-group-item>\r\n                <fd-quick-view-group-item>\r\n                    <fd-quick-view-group-item-label>\r\n                        <fd-icon glyph=\"appointment\"></fd-icon>\r\n                    </fd-quick-view-group-item-label>\r\n                    <fd-quick-view-group-item-content>\r\n                        <span>\u06A9\u0627\u0631\u0628\u0631</span>\r\n                    </fd-quick-view-group-item-content>\r\n                </fd-quick-view-group-item>\r\n            </fd-quick-view-group>\r\n        </fd-quick-view>\r\n    </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n", styles: [":host{display:block;width:460px}:host ::ng-deep .fd-form-item{flex-direction:row}:host fd-avatar{min-width:1rem;width:1rem}\n"] }]
         }], propDecorators: { event: [{
                 type: Input
             }], calendarFields: [{
@@ -879,10 +879,10 @@ class EventButtonComponent extends BaseComponent {
     }
 }
 EventButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: EventButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-EventButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: EventButtonComponent, selector: "bc-event-button", inputs: { buttonTemplate: "buttonTemplate", calendarFields: "calendarFields", task: "task", rtl: "rtl", canDelete: "canDelete", canEdit: "canEdit", deviceSize: "deviceSize" }, outputs: { deleteEvent: "deleteEvent", editEvent: "editEvent", openPopoverChange: "openPopoverChange" }, host: { properties: { "style.opacity": "this.opacity", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "defaultButtonTemplate", first: true, predicate: ["defaultButton"], descendants: true, static: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{ 'end-day': rtl, 'start-day': !rtl }\" *ngIf=\"!task.startdayIsInRow\"></span>\n<ng-container\n    *ngTemplateOutlet=\"\n        buttonTemplate;\n        context: {\n            $implicit: task,\n            calendarFields: calendarFields,\n            popover: popover\n        }\n    \"\n></ng-container>\n<span [ngClass]=\"{ 'start-day': rtl, 'end-day': !rtl }\" *ngIf=\"!task.enddayIsInRow\"></span>\n\n<fd-popover\n    #popover\n    placement=\"bottom\"\n    [mobile]=\"deviceSize === 's'\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [title]=\"task.event[calendarFields.Title]\"\n    (isOpenChange)=\"onPopOverOpenChange($event)\"\n>\n    <bc-event-preview\n        [event]=\"task.event\"\n        [calendarFields]=\"calendarFields\"\n        [popover]=\"popover\"\n        [canDelete]=\"canDelete\"\n        [canEdit]=\"canEdit\"\n        (deleteEvent)=\"deleteEvent.emit($event)\"\n        (editEvent)=\"editEvent.emit($event)\"\n    ></bc-event-preview>\n</fd-popover>\n\n<ng-template #defaultButton let-task let-popover=\"popover\" let-calendarFields=\"calendarFields\">\n    <button\n        fd-button\n        [compact]=\"true\"\n        [fdPopoverTrigger]=\"popover\"\n        [fdType]=\"task.inDay ? 'standard' : 'emphasized'\"\n        [label]=\"task | eventTime: calendarFields\"\n        [style.background-color]=\"task.event[calendarFields.Color]\"\n        class=\"task-title\"\n    ></button>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:row;align-items:stretch;justify-content:stretch;width:100%;height:100%;padding-top:1px}:host[rtl=true]{padding-right:3px}:host[rtl=false]{padding-left:3px}.task-title{justify-content:start!important;font-weight:400}button{flex-grow:1;border-radius:0!important;height:100%;max-height:100%;min-height:100%;border:none}.start-day{width:0;height:0;border-top:10px solid transparent;border-right:10px solid var(--sapButton_Emphasized_Background, #0a6ed1);border-bottom:10px solid transparent;height:100%}.end-day{width:0;height:0;border-top:10px solid transparent;border-left:10px solid var(--sapButton_Emphasized_Background, #0a6ed1);border-bottom:10px solid transparent;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i4.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i5$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i5$1.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: EventPreviewComponent, selector: "bc-event-preview", inputs: ["event", "calendarFields", "popover", "popover2", "canEdit", "canDelete"], outputs: ["deleteEvent", "editEvent"] }, { kind: "pipe", type: EventTimePipe, name: "eventTime" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EventButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: EventButtonComponent, selector: "bc-event-button", inputs: { buttonTemplate: "buttonTemplate", calendarFields: "calendarFields", task: "task", rtl: "rtl", canDelete: "canDelete", canEdit: "canEdit", deviceSize: "deviceSize" }, outputs: { deleteEvent: "deleteEvent", editEvent: "editEvent", openPopoverChange: "openPopoverChange" }, host: { properties: { "style.opacity": "this.opacity", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "defaultButtonTemplate", first: true, predicate: ["defaultButton"], descendants: true, static: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{ 'end-day': rtl, 'start-day': !rtl }\" *ngIf=\"!task.startdayIsInRow\"></span>\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        buttonTemplate;\r\n        context: {\r\n            $implicit: task,\r\n            calendarFields: calendarFields,\r\n            popover: popover\r\n        }\r\n    \"\r\n></ng-container>\r\n<span [ngClass]=\"{ 'start-day': rtl, 'end-day': !rtl }\" *ngIf=\"!task.enddayIsInRow\"></span>\r\n\r\n<fd-popover\r\n    #popover\r\n    placement=\"bottom\"\r\n    [mobile]=\"deviceSize === 's'\"\r\n    [focusTrapped]=\"true\"\r\n    [focusAutoCapture]=\"true\"\r\n    [title]=\"task.event[calendarFields.Title]\"\r\n    (isOpenChange)=\"onPopOverOpenChange($event)\"\r\n>\r\n    <bc-event-preview\r\n        [event]=\"task.event\"\r\n        [calendarFields]=\"calendarFields\"\r\n        [popover]=\"popover\"\r\n        [canDelete]=\"canDelete\"\r\n        [canEdit]=\"canEdit\"\r\n        (deleteEvent)=\"deleteEvent.emit($event)\"\r\n        (editEvent)=\"editEvent.emit($event)\"\r\n    ></bc-event-preview>\r\n</fd-popover>\r\n\r\n<ng-template #defaultButton let-task let-popover=\"popover\" let-calendarFields=\"calendarFields\">\r\n    <button\r\n        fd-button\r\n        [compact]=\"true\"\r\n        [fdPopoverTrigger]=\"popover\"\r\n        [fdType]=\"task.inDay ? 'standard' : 'emphasized'\"\r\n        [label]=\"task | eventTime: calendarFields\"\r\n        [style.background-color]=\"task.event[calendarFields.Color]\"\r\n        class=\"task-title\"\r\n    ></button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:row;align-items:stretch;justify-content:stretch;width:100%;height:100%;padding-top:1px}:host[rtl=true]{padding-right:3px}:host[rtl=false]{padding-left:3px}.task-title{justify-content:start!important;font-weight:400}button{flex-grow:1;border-radius:0!important;height:100%;max-height:100%;min-height:100%;border:none}.start-day{width:0;height:0;border-top:10px solid transparent;border-right:10px solid var(--sapButton_Emphasized_Background, #0a6ed1);border-bottom:10px solid transparent;height:100%}.end-day{width:0;height:0;border-top:10px solid transparent;border-left:10px solid var(--sapButton_Emphasized_Background, #0a6ed1);border-bottom:10px solid transparent;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i4.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i5$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i5$1.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: EventPreviewComponent, selector: "bc-event-preview", inputs: ["event", "calendarFields", "popover", "popover2", "canEdit", "canDelete"], outputs: ["deleteEvent", "editEvent"] }, { kind: "pipe", type: EventTimePipe, name: "eventTime" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: EventButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bc-event-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [ngClass]=\"{ 'end-day': rtl, 'start-day': !rtl }\" *ngIf=\"!task.startdayIsInRow\"></span>\n<ng-container\n    *ngTemplateOutlet=\"\n        buttonTemplate;\n        context: {\n            $implicit: task,\n            calendarFields: calendarFields,\n            popover: popover\n        }\n    \"\n></ng-container>\n<span [ngClass]=\"{ 'start-day': rtl, 'end-day': !rtl }\" *ngIf=\"!task.enddayIsInRow\"></span>\n\n<fd-popover\n    #popover\n    placement=\"bottom\"\n    [mobile]=\"deviceSize === 's'\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [title]=\"task.event[calendarFields.Title]\"\n    (isOpenChange)=\"onPopOverOpenChange($event)\"\n>\n    <bc-event-preview\n        [event]=\"task.event\"\n        [calendarFields]=\"calendarFields\"\n        [popover]=\"popover\"\n        [canDelete]=\"canDelete\"\n        [canEdit]=\"canEdit\"\n        (deleteEvent)=\"deleteEvent.emit($event)\"\n        (editEvent)=\"editEvent.emit($event)\"\n    ></bc-event-preview>\n</fd-popover>\n\n<ng-template #defaultButton let-task let-popover=\"popover\" let-calendarFields=\"calendarFields\">\n    <button\n        fd-button\n        [compact]=\"true\"\n        [fdPopoverTrigger]=\"popover\"\n        [fdType]=\"task.inDay ? 'standard' : 'emphasized'\"\n        [label]=\"task | eventTime: calendarFields\"\n        [style.background-color]=\"task.event[calendarFields.Color]\"\n        class=\"task-title\"\n    ></button>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:row;align-items:stretch;justify-content:stretch;width:100%;height:100%;padding-top:1px}:host[rtl=true]{padding-right:3px}:host[rtl=false]{padding-left:3px}.task-title{justify-content:start!important;font-weight:400}button{flex-grow:1;border-radius:0!important;height:100%;max-height:100%;min-height:100%;border:none}.start-day{width:0;height:0;border-top:10px solid transparent;border-right:10px solid var(--sapButton_Emphasized_Background, #0a6ed1);border-bottom:10px solid transparent;height:100%}.end-day{width:0;height:0;border-top:10px solid transparent;border-left:10px solid var(--sapButton_Emphasized_Background, #0a6ed1);border-bottom:10px solid transparent;height:100%}\n"] }]
+            args: [{ selector: 'bc-event-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [ngClass]=\"{ 'end-day': rtl, 'start-day': !rtl }\" *ngIf=\"!task.startdayIsInRow\"></span>\r\n<ng-container\r\n    *ngTemplateOutlet=\"\r\n        buttonTemplate;\r\n        context: {\r\n            $implicit: task,\r\n            calendarFields: calendarFields,\r\n            popover: popover\r\n        }\r\n    \"\r\n></ng-container>\r\n<span [ngClass]=\"{ 'start-day': rtl, 'end-day': !rtl }\" *ngIf=\"!task.enddayIsInRow\"></span>\r\n\r\n<fd-popover\r\n    #popover\r\n    placement=\"bottom\"\r\n    [mobile]=\"deviceSize === 's'\"\r\n    [focusTrapped]=\"true\"\r\n    [focusAutoCapture]=\"true\"\r\n    [title]=\"task.event[calendarFields.Title]\"\r\n    (isOpenChange)=\"onPopOverOpenChange($event)\"\r\n>\r\n    <bc-event-preview\r\n        [event]=\"task.event\"\r\n        [calendarFields]=\"calendarFields\"\r\n        [popover]=\"popover\"\r\n        [canDelete]=\"canDelete\"\r\n        [canEdit]=\"canEdit\"\r\n        (deleteEvent)=\"deleteEvent.emit($event)\"\r\n        (editEvent)=\"editEvent.emit($event)\"\r\n    ></bc-event-preview>\r\n</fd-popover>\r\n\r\n<ng-template #defaultButton let-task let-popover=\"popover\" let-calendarFields=\"calendarFields\">\r\n    <button\r\n        fd-button\r\n        [compact]=\"true\"\r\n        [fdPopoverTrigger]=\"popover\"\r\n        [fdType]=\"task.inDay ? 'standard' : 'emphasized'\"\r\n        [label]=\"task | eventTime: calendarFields\"\r\n        [style.background-color]=\"task.event[calendarFields.Color]\"\r\n        class=\"task-title\"\r\n    ></button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:row;align-items:stretch;justify-content:stretch;width:100%;height:100%;padding-top:1px}:host[rtl=true]{padding-right:3px}:host[rtl=false]{padding-left:3px}.task-title{justify-content:start!important;font-weight:400}button{flex-grow:1;border-radius:0!important;height:100%;max-height:100%;min-height:100%;border:none}.start-day{width:0;height:0;border-top:10px solid transparent;border-right:10px solid var(--sapButton_Emphasized_Background, #0a6ed1);border-bottom:10px solid transparent;height:100%}.end-day{width:0;height:0;border-top:10px solid transparent;border-left:10px solid var(--sapButton_Emphasized_Background, #0a6ed1);border-bottom:10px solid transparent;height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { defaultButtonTemplate: [{
                 type: ViewChild,
                 args: ['defaultButton', { static: true }]
@@ -932,10 +932,10 @@ class DayEventListComponent extends BaseComponent {
     }
 }
 DayEventListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DayEventListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DayEventListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: DayEventListComponent, selector: "bc-day-event-list", inputs: { day: "day", deviceSize: "deviceSize", weekDays: "weekDays", calendarFields: "calendarFields", rtl: "rtl", canDelete: "canDelete", canEdit: "canEdit", popover: "popover" }, outputs: { deleteEvent: "deleteEvent", editEvent: "editEvent", openPopOver: "openPopOver" }, usesInheritance: true, ngImport: i0, template: "<div fd-bar [barDesign]=\"'header-with-subheader'\">\n    <div fd-bar-left>\n        <fd-bar-element>\n            <fdp-button glyph=\"decline\" [buttonType]=\"'transparent'\" (click)=\"onClosePopover(popover)\"></fdp-button>\n        </fd-bar-element>\n    </div>\n    <div fd-bar-middle>\n        <fd-bar-element>\n            {{ weekDays[day.dayInWeek] }}\n        </fd-bar-element>\n    </div>\n    <div fd-bar-right>\n        <fd-bar-element> </fd-bar-element>\n    </div>\n</div>\n<div fd-bar [barDesign]=\"'subheader'\">\n    <div fd-bar-middle>\n        <fd-bar-element [fullWidth]=\"true\">\n            <bc-day-number-box [day]=\"day\" [isWeekMode]=\"true\"></bc-day-number-box>\n        </fd-bar-element>\n    </div>\n</div>\n<ul fd-list>\n    <li fd-list-item *ngFor=\"let task of day.tasks\" class=\"task-start-end\" (click)=\"popoverPreview.open()\">\n        <span [ngClass]=\"{ 'end-day': rtl, 'start-day': !rtl }\" *ngIf=\"task.isMiddle && !task.isStartDay\"></span>\n        <span class=\"middle-day\">{{ task.event[calendarFields.Title] }}</span>\n        <span\n            [ngClass]=\"{ 'start-day': rtl, 'end-day': !rtl }\"\n            *ngIf=\"(task.isMiddle || task.isStartDay) && !task.isEndDay\"\n        ></span>\n        <fd-popover\n            #popoverPreview\n            placement=\"bottom\"\n            [mobile]=\"deviceSize === 's'\"\n            [focusTrapped]=\"true\"\n            [focusAutoCapture]=\"true\"\n            [title]=\"task.event[calendarFields.Title]\"\n        >\n            <bc-event-preview\n                [event]=\"task.event\"\n                [calendarFields]=\"calendarFields\"\n                [popover]=\"popoverPreview\"\n                [canDelete]=\"canDelete\"\n                [canEdit]=\"canEdit\"\n                [popover2]=\"popover\"\n                (deleteEvent)=\"deleteEvent.emit($event)\"\n                (editEvent)=\"editEvent.emit($event)\"\n            ></bc-event-preview>\n        </fd-popover>\n    </li>\n</ul>\n", styles: [".task-start-end{cursor:pointer}.start-day{width:0;height:0;border-top:10px solid transparent;border-right:10px solid var(--sapButton_Emphasized_BorderColor, #0a6ed1);border-bottom:10px solid transparent}.middle-day{width:100%;min-width:200px;height:20px;background-color:var(--sapButton_Emphasized_Background, #0a6ed1);color:var(--sapButton_Emphasized_TextColor, #fff);text-align:center}.end-day{width:0;height:0;border-top:10px solid transparent;border-left:10px solid var(--sapButton_Emphasized_BorderColor, #0a6ed1);border-bottom:10px solid transparent}.event-list-number-day{width:40px;height:40px;flex-grow:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-grow:0!important}.event-list-number-day:hover{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}::ng-deep .fd-form-item{flex-direction:row!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i2$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i3$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "component", type: i5$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: EventPreviewComponent, selector: "bc-event-preview", inputs: ["event", "calendarFields", "popover", "popover2", "canEdit", "canDelete"], outputs: ["deleteEvent", "editEvent"] }, { kind: "component", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DayEventListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: DayEventListComponent, selector: "bc-day-event-list", inputs: { day: "day", deviceSize: "deviceSize", weekDays: "weekDays", calendarFields: "calendarFields", rtl: "rtl", canDelete: "canDelete", canEdit: "canEdit", popover: "popover" }, outputs: { deleteEvent: "deleteEvent", editEvent: "editEvent", openPopOver: "openPopOver" }, usesInheritance: true, ngImport: i0, template: "<div fd-bar [barDesign]=\"'header-with-subheader'\">\r\n    <div fd-bar-left>\r\n        <fd-bar-element>\r\n            <fdp-button glyph=\"decline\" [buttonType]=\"'transparent'\" (click)=\"onClosePopover(popover)\"></fdp-button>\r\n        </fd-bar-element>\r\n    </div>\r\n    <div fd-bar-middle>\r\n        <fd-bar-element>\r\n            {{ weekDays[day.dayInWeek] }}\r\n        </fd-bar-element>\r\n    </div>\r\n    <div fd-bar-right>\r\n        <fd-bar-element> </fd-bar-element>\r\n    </div>\r\n</div>\r\n<div fd-bar [barDesign]=\"'subheader'\">\r\n    <div fd-bar-middle>\r\n        <fd-bar-element [fullWidth]=\"true\">\r\n            <bc-day-number-box [day]=\"day\" [isWeekMode]=\"true\"></bc-day-number-box>\r\n        </fd-bar-element>\r\n    </div>\r\n</div>\r\n<ul fd-list>\r\n    <li fd-list-item *ngFor=\"let task of day.tasks\" class=\"task-start-end\" (click)=\"popoverPreview.open()\">\r\n        <span [ngClass]=\"{ 'end-day': rtl, 'start-day': !rtl }\" *ngIf=\"task.isMiddle && !task.isStartDay\"></span>\r\n        <span class=\"middle-day\">{{ task.event[calendarFields.Title] }}</span>\r\n        <span\r\n            [ngClass]=\"{ 'start-day': rtl, 'end-day': !rtl }\"\r\n            *ngIf=\"(task.isMiddle || task.isStartDay) && !task.isEndDay\"\r\n        ></span>\r\n        <fd-popover\r\n            #popoverPreview\r\n            placement=\"bottom\"\r\n            [mobile]=\"deviceSize === 's'\"\r\n            [focusTrapped]=\"true\"\r\n            [focusAutoCapture]=\"true\"\r\n            [title]=\"task.event[calendarFields.Title]\"\r\n        >\r\n            <bc-event-preview\r\n                [event]=\"task.event\"\r\n                [calendarFields]=\"calendarFields\"\r\n                [popover]=\"popoverPreview\"\r\n                [canDelete]=\"canDelete\"\r\n                [canEdit]=\"canEdit\"\r\n                [popover2]=\"popover\"\r\n                (deleteEvent)=\"deleteEvent.emit($event)\"\r\n                (editEvent)=\"editEvent.emit($event)\"\r\n            ></bc-event-preview>\r\n        </fd-popover>\r\n    </li>\r\n</ul>\r\n", styles: [".task-start-end{cursor:pointer}.start-day{width:0;height:0;border-top:10px solid transparent;border-right:10px solid var(--sapButton_Emphasized_BorderColor, #0a6ed1);border-bottom:10px solid transparent}.middle-day{width:100%;min-width:200px;height:20px;background-color:var(--sapButton_Emphasized_Background, #0a6ed1);color:var(--sapButton_Emphasized_TextColor, #fff);text-align:center}.end-day{width:0;height:0;border-top:10px solid transparent;border-left:10px solid var(--sapButton_Emphasized_BorderColor, #0a6ed1);border-bottom:10px solid transparent}.event-list-number-day{width:40px;height:40px;flex-grow:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-grow:0!important}.event-list-number-day:hover{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}::ng-deep .fd-form-item{flex-direction:row!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$2.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i2$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i3$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "component", type: i5$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: EventPreviewComponent, selector: "bc-event-preview", inputs: ["event", "calendarFields", "popover", "popover2", "canEdit", "canDelete"], outputs: ["deleteEvent", "editEvent"] }, { kind: "component", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DayEventListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bc-day-event-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fd-bar [barDesign]=\"'header-with-subheader'\">\n    <div fd-bar-left>\n        <fd-bar-element>\n            <fdp-button glyph=\"decline\" [buttonType]=\"'transparent'\" (click)=\"onClosePopover(popover)\"></fdp-button>\n        </fd-bar-element>\n    </div>\n    <div fd-bar-middle>\n        <fd-bar-element>\n            {{ weekDays[day.dayInWeek] }}\n        </fd-bar-element>\n    </div>\n    <div fd-bar-right>\n        <fd-bar-element> </fd-bar-element>\n    </div>\n</div>\n<div fd-bar [barDesign]=\"'subheader'\">\n    <div fd-bar-middle>\n        <fd-bar-element [fullWidth]=\"true\">\n            <bc-day-number-box [day]=\"day\" [isWeekMode]=\"true\"></bc-day-number-box>\n        </fd-bar-element>\n    </div>\n</div>\n<ul fd-list>\n    <li fd-list-item *ngFor=\"let task of day.tasks\" class=\"task-start-end\" (click)=\"popoverPreview.open()\">\n        <span [ngClass]=\"{ 'end-day': rtl, 'start-day': !rtl }\" *ngIf=\"task.isMiddle && !task.isStartDay\"></span>\n        <span class=\"middle-day\">{{ task.event[calendarFields.Title] }}</span>\n        <span\n            [ngClass]=\"{ 'start-day': rtl, 'end-day': !rtl }\"\n            *ngIf=\"(task.isMiddle || task.isStartDay) && !task.isEndDay\"\n        ></span>\n        <fd-popover\n            #popoverPreview\n            placement=\"bottom\"\n            [mobile]=\"deviceSize === 's'\"\n            [focusTrapped]=\"true\"\n            [focusAutoCapture]=\"true\"\n            [title]=\"task.event[calendarFields.Title]\"\n        >\n            <bc-event-preview\n                [event]=\"task.event\"\n                [calendarFields]=\"calendarFields\"\n                [popover]=\"popoverPreview\"\n                [canDelete]=\"canDelete\"\n                [canEdit]=\"canEdit\"\n                [popover2]=\"popover\"\n                (deleteEvent)=\"deleteEvent.emit($event)\"\n                (editEvent)=\"editEvent.emit($event)\"\n            ></bc-event-preview>\n        </fd-popover>\n    </li>\n</ul>\n", styles: [".task-start-end{cursor:pointer}.start-day{width:0;height:0;border-top:10px solid transparent;border-right:10px solid var(--sapButton_Emphasized_BorderColor, #0a6ed1);border-bottom:10px solid transparent}.middle-day{width:100%;min-width:200px;height:20px;background-color:var(--sapButton_Emphasized_Background, #0a6ed1);color:var(--sapButton_Emphasized_TextColor, #fff);text-align:center}.end-day{width:0;height:0;border-top:10px solid transparent;border-left:10px solid var(--sapButton_Emphasized_BorderColor, #0a6ed1);border-bottom:10px solid transparent}.event-list-number-day{width:40px;height:40px;flex-grow:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-grow:0!important}.event-list-number-day:hover{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}::ng-deep .fd-form-item{flex-direction:row!important}\n"] }]
+            args: [{ selector: 'bc-day-event-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fd-bar [barDesign]=\"'header-with-subheader'\">\r\n    <div fd-bar-left>\r\n        <fd-bar-element>\r\n            <fdp-button glyph=\"decline\" [buttonType]=\"'transparent'\" (click)=\"onClosePopover(popover)\"></fdp-button>\r\n        </fd-bar-element>\r\n    </div>\r\n    <div fd-bar-middle>\r\n        <fd-bar-element>\r\n            {{ weekDays[day.dayInWeek] }}\r\n        </fd-bar-element>\r\n    </div>\r\n    <div fd-bar-right>\r\n        <fd-bar-element> </fd-bar-element>\r\n    </div>\r\n</div>\r\n<div fd-bar [barDesign]=\"'subheader'\">\r\n    <div fd-bar-middle>\r\n        <fd-bar-element [fullWidth]=\"true\">\r\n            <bc-day-number-box [day]=\"day\" [isWeekMode]=\"true\"></bc-day-number-box>\r\n        </fd-bar-element>\r\n    </div>\r\n</div>\r\n<ul fd-list>\r\n    <li fd-list-item *ngFor=\"let task of day.tasks\" class=\"task-start-end\" (click)=\"popoverPreview.open()\">\r\n        <span [ngClass]=\"{ 'end-day': rtl, 'start-day': !rtl }\" *ngIf=\"task.isMiddle && !task.isStartDay\"></span>\r\n        <span class=\"middle-day\">{{ task.event[calendarFields.Title] }}</span>\r\n        <span\r\n            [ngClass]=\"{ 'start-day': rtl, 'end-day': !rtl }\"\r\n            *ngIf=\"(task.isMiddle || task.isStartDay) && !task.isEndDay\"\r\n        ></span>\r\n        <fd-popover\r\n            #popoverPreview\r\n            placement=\"bottom\"\r\n            [mobile]=\"deviceSize === 's'\"\r\n            [focusTrapped]=\"true\"\r\n            [focusAutoCapture]=\"true\"\r\n            [title]=\"task.event[calendarFields.Title]\"\r\n        >\r\n            <bc-event-preview\r\n                [event]=\"task.event\"\r\n                [calendarFields]=\"calendarFields\"\r\n                [popover]=\"popoverPreview\"\r\n                [canDelete]=\"canDelete\"\r\n                [canEdit]=\"canEdit\"\r\n                [popover2]=\"popover\"\r\n                (deleteEvent)=\"deleteEvent.emit($event)\"\r\n                (editEvent)=\"editEvent.emit($event)\"\r\n            ></bc-event-preview>\r\n        </fd-popover>\r\n    </li>\r\n</ul>\r\n", styles: [".task-start-end{cursor:pointer}.start-day{width:0;height:0;border-top:10px solid transparent;border-right:10px solid var(--sapButton_Emphasized_BorderColor, #0a6ed1);border-bottom:10px solid transparent}.middle-day{width:100%;min-width:200px;height:20px;background-color:var(--sapButton_Emphasized_Background, #0a6ed1);color:var(--sapButton_Emphasized_TextColor, #fff);text-align:center}.end-day{width:0;height:0;border-top:10px solid transparent;border-left:10px solid var(--sapButton_Emphasized_BorderColor, #0a6ed1);border-bottom:10px solid transparent}.event-list-number-day{width:40px;height:40px;flex-grow:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-grow:0!important}.event-list-number-day:hover{color:var(--sapButton_Hover_TextColor, #0854a0);background-color:var(--sapButton_Hover_Background, #ebf5fe);cursor:pointer}::ng-deep .fd-form-item{flex-direction:row!important}\n"] }]
         }], propDecorators: { day: [{
                 type: Input
             }], deviceSize: [{
@@ -1152,10 +1152,10 @@ class CalendarMonthComponent extends BaseComponent {
     }
 }
 CalendarMonthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CalendarMonthComponent, deps: [{ token: DaysInWeekPipe }, { token: i0.ChangeDetectorRef }, { token: CalendarService }], target: i0.ɵɵFactoryTarget.Component });
-CalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: { monthWeeksCount: "monthWeeksCount", weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", days: "days", calendarFields: "calendarFields", rtl: "rtl", deviceSize: "deviceSize", moDataList: "moDataList", datePicker: "datePicker", rangePicker: "rangePicker", canDelete: "canDelete", canAdd: "canAdd", canEdit: "canEdit", selectedDate: "selectedDate", startSelectedDayIndex: "startSelectedDayIndex", endSelectedDayIndex: "endSelectedDayIndex" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", daySelect: "daySelect", dayClick: "dayClick", dayMouseMove: "dayMouseMove", dayMouseUp: "dayMouseUp", dayMouseDown: "dayMouseDown", showEvent: "showEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table fd-table class=\"table-header\" [compact]=\"true\" [attr.picker]=\"datePicker\">\n    <thead fd-table-header>\n        <tr fd-table-row>\n            <th\n                class=\"weekday-header\"\n                *ngFor=\"let weekDay of selectedWeekDays\"\n                fd-table-cell\n                [class.noborder]=\"isPickerMode\"\n            >\n                {{ weekDay }}\n            </th>\n        </tr>\n    </thead>\n    <tbody fd-table-body>\n        <ng-container *ngFor=\"let weekDay of numberOfWeek\">\n            <tr fd-table-row>\n                <td\n                    [style.height.px]=\"dayHeight\"\n                    fd-table-cell\n                    colspan=\"7\"\n                    [style.border]=\"isPickerMode ? 'none' : null\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderTasks;\n                            context: {\n                                $implicit: isPickerMode ? null : moDataList[weekDay],\n                                weekIndex: weekDay,\n                                days: days | daysInWeek: weekDay,\n                                maxRowTasks: maxRowTasks,\n                                weekDays: weekDays,\n                                calendarFields: calendarFields,\n                                rtl: rtl,\n                                isPickerMode: isPickerMode\n                            }\n                        \"\n                    ></ng-container>\n                </td>\n            </tr>\n        </ng-container>\n    </tbody>\n</table>\n<ng-template\n    #renderTasks\n    let-task\n    let-weekIndex=\"weekIndex\"\n    let-weekDays=\"weekDays\"\n    let-days=\"days\"\n    let-maxRowTasks=\"maxRowTasks\"\n    let-calendarFields=\"calendarFields\"\n    let-deviceSize=\"deviceSize\"\n    let-rtl=\"rtl\"\n    let-isPickerMode=\"isPickerMode\"\n>\n    <table fd-table-body class=\"table-content\" [compact]=\"true\">\n        <tbody>\n            <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\n                <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\n                    <bc-day-number-box\n                        [class.fd-calendar__item]=\"isPickerMode\"\n                        [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\n                        [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\n                        [isPickerMode]=\"isPickerMode\"\n                        [day]=\"day\"\n                        [isActive]=\"\n                            day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\n                                | equalDate: selectedDate\n                        \"\n                        [itemInRange]=\"\n                            startSelectedDayIndex !== undefined &&\n                            endSelectedDayIndex !== undefined &&\n                            day.index >= startSelectedDayIndex &&\n                            day.index <= endSelectedDayIndex\n                        \"\n                        (dayClick)=\"onDayClick(day)\"\n                        (dayMouseMove)=\"onDayMouseMove(day)\"\n                        (dayMouseDown)=\"onDayMouseDown(day)\"\n                        (dayMouseUp)=\"onDayMouseUp(day)\"\n                    ></bc-day-number-box>\n                </td>\n            </tr>\n            <ng-container *ngIf=\"!isPickerMode\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderDayTasks;\n                        context: {\n                            $implicit: weekTasksArray[weekIndex],\n                            maxRowTasks: maxRowTasks,\n                            weekIndex: weekIndex,\n                            deviceSize: deviceSize,\n                            calendarFields: calendarFields,\n                            weekDays: weekDays\n                        }\n                    \"\n                ></ng-container>\n                <tr fd-table-row>\n                    <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n                        <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\n                            <button\n                                fd-button\n                                (click)=\"onMoreButton($event, popover)\"\n                                [fdType]=\"'transparent'\"\n                                [compact]=\"true\"\n                            >\n                                {{ day.tasks?.length - maxRowTasks?.length }}\n                                {{ 'More' | bbbTranslate }}\n                            </button>\n                            <fd-popover\n                                #popover\n                                [mobile]=\"deviceSize === 's'\"\n                                placement=\"bottom\"\n                                [focusTrapped]=\"true\"\n                                [focusAutoCapture]=\"true\"\n                                (isOpenChange)=\"onOpenPopoverChange($event)\"\n                            >\n                                <bc-day-event-list\n                                    [day]=\"day\"\n                                    [calendarFields]=\"calendarFields\"\n                                    [deviceSize]=\"deviceSize\"\n                                    [weekDays]=\"weekDays\"\n                                    [rtl]=\"rtl\"\n                                    [canDelete]=\"canDelete\"\n                                    [canEdit]=\"canEdit\"\n                                    [popover]=\"popover\"\n                                    (deleteEvent)=\"deleteEvent.emit($event)\"\n                                    (editEvent)=\"editEvent.emit($event)\"\n                                ></bc-day-event-list>\n                            </fd-popover>\n                        </ng-container>\n                    </td>\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n</ng-template>\n\n<ng-template\n    #renderDayTasks\n    let-weekTasks\n    let-maxRowTasks=\"maxRowTasks\"\n    let-weekIndex=\"weekIndex\"\n    let-deviceSize=\"deviceSize\"\n    let-calendarFields=\"calendarFields\"\n    let-weekDays=\"weekDays\"\n>\n    <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\n        <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\n            <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\n        </ng-container>\n        <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n            <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\n                <ng-container *ngIf=\"task.event; else newDaySelect\">\n                    <bc-event-button\n                        [task]=\"task\"\n                        [calendarFields]=\"calendarFields\"\n                        [deviceSize]=\"deviceSize\"\n                        [rtl]=\"rtl\"\n                        [canDelete]=\"canDelete\"\n                        [canEdit]=\"canEdit\"\n                        (deleteEvent)=\"deleteEvent.emit($event)\"\n                        (editEvent)=\"editEvent.emit($event)\"\n                        (openPopoverChange)=\"onOpenPopoverChange($event)\"\n                    ></bc-event-button>\n                </ng-container>\n                <ng-template #newDaySelect>\n                    <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n                </ng-template>\n            </td>\n        </ng-container>\n    </tr>\n</ng-template>\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.noborder{border:none!important}table[picker=true] thead,table[picker=true] tbody{border:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i4.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i5$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i6$1.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i6$1.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i6$1.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i6$1.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i6$1.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i6$1.DeprecatedTableCompactDirective, selector: "table[fd-table][compact]" }, { kind: "component", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DaysInWeekPipe, name: "daysInWeek" }, { kind: "pipe", type: EqualDatePipe, name: "equalDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: { monthWeeksCount: "monthWeeksCount", weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", days: "days", calendarFields: "calendarFields", rtl: "rtl", deviceSize: "deviceSize", moDataList: "moDataList", datePicker: "datePicker", rangePicker: "rangePicker", canDelete: "canDelete", canAdd: "canAdd", canEdit: "canEdit", selectedDate: "selectedDate", startSelectedDayIndex: "startSelectedDayIndex", endSelectedDayIndex: "endSelectedDayIndex" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", daySelect: "daySelect", dayClick: "dayClick", dayMouseMove: "dayMouseMove", dayMouseUp: "dayMouseUp", dayMouseDown: "dayMouseDown", showEvent: "showEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table fd-table class=\"table-header\" [compact]=\"true\" [attr.picker]=\"datePicker\">\r\n    <thead fd-table-header>\r\n        <tr fd-table-row>\r\n            <th\r\n                class=\"weekday-header\"\r\n                *ngFor=\"let weekDay of selectedWeekDays\"\r\n                fd-table-cell\r\n                [class.noborder]=\"isPickerMode\"\r\n            >\r\n                {{ weekDay }}\r\n            </th>\r\n        </tr>\r\n    </thead>\r\n    <tbody fd-table-body>\r\n        <ng-container *ngFor=\"let weekDay of numberOfWeek\">\r\n            <tr fd-table-row>\r\n                <td\r\n                    [style.height.px]=\"dayHeight\"\r\n                    fd-table-cell\r\n                    colspan=\"7\"\r\n                    [style.border]=\"isPickerMode ? 'none' : null\"\r\n                >\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderTasks;\r\n                            context: {\r\n                                $implicit: isPickerMode ? null : moDataList[weekDay],\r\n                                weekIndex: weekDay,\r\n                                days: days | daysInWeek: weekDay,\r\n                                maxRowTasks: maxRowTasks,\r\n                                weekDays: weekDays,\r\n                                calendarFields: calendarFields,\r\n                                rtl: rtl,\r\n                                isPickerMode: isPickerMode\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </td>\r\n            </tr>\r\n        </ng-container>\r\n    </tbody>\r\n</table>\r\n<ng-template\r\n    #renderTasks\r\n    let-task\r\n    let-weekIndex=\"weekIndex\"\r\n    let-weekDays=\"weekDays\"\r\n    let-days=\"days\"\r\n    let-maxRowTasks=\"maxRowTasks\"\r\n    let-calendarFields=\"calendarFields\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-rtl=\"rtl\"\r\n    let-isPickerMode=\"isPickerMode\"\r\n>\r\n    <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n        <tbody>\r\n            <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\r\n                <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\r\n                    <bc-day-number-box\r\n                        [class.fd-calendar__item]=\"isPickerMode\"\r\n                        [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\r\n                        [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\r\n                        [isPickerMode]=\"isPickerMode\"\r\n                        [day]=\"day\"\r\n                        [isActive]=\"\r\n                            day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\r\n                                | equalDate: selectedDate\r\n                        \"\r\n                        [itemInRange]=\"\r\n                            startSelectedDayIndex !== undefined &&\r\n                            endSelectedDayIndex !== undefined &&\r\n                            day.index >= startSelectedDayIndex &&\r\n                            day.index <= endSelectedDayIndex\r\n                        \"\r\n                        (dayClick)=\"onDayClick(day)\"\r\n                        (dayMouseMove)=\"onDayMouseMove(day)\"\r\n                        (dayMouseDown)=\"onDayMouseDown(day)\"\r\n                        (dayMouseUp)=\"onDayMouseUp(day)\"\r\n                    ></bc-day-number-box>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"!isPickerMode\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderDayTasks;\r\n                        context: {\r\n                            $implicit: weekTasksArray[weekIndex],\r\n                            maxRowTasks: maxRowTasks,\r\n                            weekIndex: weekIndex,\r\n                            deviceSize: deviceSize,\r\n                            calendarFields: calendarFields,\r\n                            weekDays: weekDays\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <tr fd-table-row>\r\n                    <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\r\n                        <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\r\n                            <button\r\n                                fd-button\r\n                                (click)=\"onMoreButton($event, popover)\"\r\n                                [fdType]=\"'transparent'\"\r\n                                [compact]=\"true\"\r\n                            >\r\n                                {{ day.tasks?.length - maxRowTasks?.length }}\r\n                                {{ 'More' | bbbTranslate }}\r\n                            </button>\r\n                            <fd-popover\r\n                                #popover\r\n                                [mobile]=\"deviceSize === 's'\"\r\n                                placement=\"bottom\"\r\n                                [focusTrapped]=\"true\"\r\n                                [focusAutoCapture]=\"true\"\r\n                                (isOpenChange)=\"onOpenPopoverChange($event)\"\r\n                            >\r\n                                <bc-day-event-list\r\n                                    [day]=\"day\"\r\n                                    [calendarFields]=\"calendarFields\"\r\n                                    [deviceSize]=\"deviceSize\"\r\n                                    [weekDays]=\"weekDays\"\r\n                                    [rtl]=\"rtl\"\r\n                                    [canDelete]=\"canDelete\"\r\n                                    [canEdit]=\"canEdit\"\r\n                                    [popover]=\"popover\"\r\n                                    (deleteEvent)=\"deleteEvent.emit($event)\"\r\n                                    (editEvent)=\"editEvent.emit($event)\"\r\n                                ></bc-day-event-list>\r\n                            </fd-popover>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderDayTasks\r\n    let-weekTasks\r\n    let-maxRowTasks=\"maxRowTasks\"\r\n    let-weekIndex=\"weekIndex\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-calendarFields=\"calendarFields\"\r\n    let-weekDays=\"weekDays\"\r\n>\r\n    <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\r\n        <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\r\n            <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n            <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\r\n                <ng-container *ngIf=\"task.event; else newDaySelect\">\r\n                    <bc-event-button\r\n                        [task]=\"task\"\r\n                        [calendarFields]=\"calendarFields\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [rtl]=\"rtl\"\r\n                        [canDelete]=\"canDelete\"\r\n                        [canEdit]=\"canEdit\"\r\n                        (deleteEvent)=\"deleteEvent.emit($event)\"\r\n                        (editEvent)=\"editEvent.emit($event)\"\r\n                        (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n                    ></bc-event-button>\r\n                </ng-container>\r\n                <ng-template #newDaySelect>\r\n                    <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\r\n                </ng-template>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n</ng-template>\r\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.noborder{border:none!important}table[picker=true] thead,table[picker=true] tbody{border:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i4.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i5$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i6$1.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i6$1.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i6$1.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i6$1.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i6$1.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i6$1.DeprecatedTableCompactDirective, selector: "table[fd-table][compact]" }, { kind: "component", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DaysInWeekPipe, name: "daysInWeek" }, { kind: "pipe", type: EqualDatePipe, name: "equalDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bc-calendar-month', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table fd-table class=\"table-header\" [compact]=\"true\" [attr.picker]=\"datePicker\">\n    <thead fd-table-header>\n        <tr fd-table-row>\n            <th\n                class=\"weekday-header\"\n                *ngFor=\"let weekDay of selectedWeekDays\"\n                fd-table-cell\n                [class.noborder]=\"isPickerMode\"\n            >\n                {{ weekDay }}\n            </th>\n        </tr>\n    </thead>\n    <tbody fd-table-body>\n        <ng-container *ngFor=\"let weekDay of numberOfWeek\">\n            <tr fd-table-row>\n                <td\n                    [style.height.px]=\"dayHeight\"\n                    fd-table-cell\n                    colspan=\"7\"\n                    [style.border]=\"isPickerMode ? 'none' : null\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            renderTasks;\n                            context: {\n                                $implicit: isPickerMode ? null : moDataList[weekDay],\n                                weekIndex: weekDay,\n                                days: days | daysInWeek: weekDay,\n                                maxRowTasks: maxRowTasks,\n                                weekDays: weekDays,\n                                calendarFields: calendarFields,\n                                rtl: rtl,\n                                isPickerMode: isPickerMode\n                            }\n                        \"\n                    ></ng-container>\n                </td>\n            </tr>\n        </ng-container>\n    </tbody>\n</table>\n<ng-template\n    #renderTasks\n    let-task\n    let-weekIndex=\"weekIndex\"\n    let-weekDays=\"weekDays\"\n    let-days=\"days\"\n    let-maxRowTasks=\"maxRowTasks\"\n    let-calendarFields=\"calendarFields\"\n    let-deviceSize=\"deviceSize\"\n    let-rtl=\"rtl\"\n    let-isPickerMode=\"isPickerMode\"\n>\n    <table fd-table-body class=\"table-content\" [compact]=\"true\">\n        <tbody>\n            <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\n                <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\n                    <bc-day-number-box\n                        [class.fd-calendar__item]=\"isPickerMode\"\n                        [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\n                        [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\n                        [isPickerMode]=\"isPickerMode\"\n                        [day]=\"day\"\n                        [isActive]=\"\n                            day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\n                                | equalDate: selectedDate\n                        \"\n                        [itemInRange]=\"\n                            startSelectedDayIndex !== undefined &&\n                            endSelectedDayIndex !== undefined &&\n                            day.index >= startSelectedDayIndex &&\n                            day.index <= endSelectedDayIndex\n                        \"\n                        (dayClick)=\"onDayClick(day)\"\n                        (dayMouseMove)=\"onDayMouseMove(day)\"\n                        (dayMouseDown)=\"onDayMouseDown(day)\"\n                        (dayMouseUp)=\"onDayMouseUp(day)\"\n                    ></bc-day-number-box>\n                </td>\n            </tr>\n            <ng-container *ngIf=\"!isPickerMode\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        renderDayTasks;\n                        context: {\n                            $implicit: weekTasksArray[weekIndex],\n                            maxRowTasks: maxRowTasks,\n                            weekIndex: weekIndex,\n                            deviceSize: deviceSize,\n                            calendarFields: calendarFields,\n                            weekDays: weekDays\n                        }\n                    \"\n                ></ng-container>\n                <tr fd-table-row>\n                    <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n                        <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\n                            <button\n                                fd-button\n                                (click)=\"onMoreButton($event, popover)\"\n                                [fdType]=\"'transparent'\"\n                                [compact]=\"true\"\n                            >\n                                {{ day.tasks?.length - maxRowTasks?.length }}\n                                {{ 'More' | bbbTranslate }}\n                            </button>\n                            <fd-popover\n                                #popover\n                                [mobile]=\"deviceSize === 's'\"\n                                placement=\"bottom\"\n                                [focusTrapped]=\"true\"\n                                [focusAutoCapture]=\"true\"\n                                (isOpenChange)=\"onOpenPopoverChange($event)\"\n                            >\n                                <bc-day-event-list\n                                    [day]=\"day\"\n                                    [calendarFields]=\"calendarFields\"\n                                    [deviceSize]=\"deviceSize\"\n                                    [weekDays]=\"weekDays\"\n                                    [rtl]=\"rtl\"\n                                    [canDelete]=\"canDelete\"\n                                    [canEdit]=\"canEdit\"\n                                    [popover]=\"popover\"\n                                    (deleteEvent)=\"deleteEvent.emit($event)\"\n                                    (editEvent)=\"editEvent.emit($event)\"\n                                ></bc-day-event-list>\n                            </fd-popover>\n                        </ng-container>\n                    </td>\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n</ng-template>\n\n<ng-template\n    #renderDayTasks\n    let-weekTasks\n    let-maxRowTasks=\"maxRowTasks\"\n    let-weekIndex=\"weekIndex\"\n    let-deviceSize=\"deviceSize\"\n    let-calendarFields=\"calendarFields\"\n    let-weekDays=\"weekDays\"\n>\n    <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\n        <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\n            <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\n        </ng-container>\n        <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n            <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\n                <ng-container *ngIf=\"task.event; else newDaySelect\">\n                    <bc-event-button\n                        [task]=\"task\"\n                        [calendarFields]=\"calendarFields\"\n                        [deviceSize]=\"deviceSize\"\n                        [rtl]=\"rtl\"\n                        [canDelete]=\"canDelete\"\n                        [canEdit]=\"canEdit\"\n                        (deleteEvent)=\"deleteEvent.emit($event)\"\n                        (editEvent)=\"editEvent.emit($event)\"\n                        (openPopoverChange)=\"onOpenPopoverChange($event)\"\n                    ></bc-event-button>\n                </ng-container>\n                <ng-template #newDaySelect>\n                    <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n                </ng-template>\n            </td>\n        </ng-container>\n    </tr>\n</ng-template>\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.noborder{border:none!important}table[picker=true] thead,table[picker=true] tbody{border:none}\n"] }]
+            args: [{ selector: 'bc-calendar-month', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table fd-table class=\"table-header\" [compact]=\"true\" [attr.picker]=\"datePicker\">\r\n    <thead fd-table-header>\r\n        <tr fd-table-row>\r\n            <th\r\n                class=\"weekday-header\"\r\n                *ngFor=\"let weekDay of selectedWeekDays\"\r\n                fd-table-cell\r\n                [class.noborder]=\"isPickerMode\"\r\n            >\r\n                {{ weekDay }}\r\n            </th>\r\n        </tr>\r\n    </thead>\r\n    <tbody fd-table-body>\r\n        <ng-container *ngFor=\"let weekDay of numberOfWeek\">\r\n            <tr fd-table-row>\r\n                <td\r\n                    [style.height.px]=\"dayHeight\"\r\n                    fd-table-cell\r\n                    colspan=\"7\"\r\n                    [style.border]=\"isPickerMode ? 'none' : null\"\r\n                >\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                            renderTasks;\r\n                            context: {\r\n                                $implicit: isPickerMode ? null : moDataList[weekDay],\r\n                                weekIndex: weekDay,\r\n                                days: days | daysInWeek: weekDay,\r\n                                maxRowTasks: maxRowTasks,\r\n                                weekDays: weekDays,\r\n                                calendarFields: calendarFields,\r\n                                rtl: rtl,\r\n                                isPickerMode: isPickerMode\r\n                            }\r\n                        \"\r\n                    ></ng-container>\r\n                </td>\r\n            </tr>\r\n        </ng-container>\r\n    </tbody>\r\n</table>\r\n<ng-template\r\n    #renderTasks\r\n    let-task\r\n    let-weekIndex=\"weekIndex\"\r\n    let-weekDays=\"weekDays\"\r\n    let-days=\"days\"\r\n    let-maxRowTasks=\"maxRowTasks\"\r\n    let-calendarFields=\"calendarFields\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-rtl=\"rtl\"\r\n    let-isPickerMode=\"isPickerMode\"\r\n>\r\n    <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n        <tbody>\r\n            <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\r\n                <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\r\n                    <bc-day-number-box\r\n                        [class.fd-calendar__item]=\"isPickerMode\"\r\n                        [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\r\n                        [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\r\n                        [isPickerMode]=\"isPickerMode\"\r\n                        [day]=\"day\"\r\n                        [isActive]=\"\r\n                            day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\r\n                                | equalDate: selectedDate\r\n                        \"\r\n                        [itemInRange]=\"\r\n                            startSelectedDayIndex !== undefined &&\r\n                            endSelectedDayIndex !== undefined &&\r\n                            day.index >= startSelectedDayIndex &&\r\n                            day.index <= endSelectedDayIndex\r\n                        \"\r\n                        (dayClick)=\"onDayClick(day)\"\r\n                        (dayMouseMove)=\"onDayMouseMove(day)\"\r\n                        (dayMouseDown)=\"onDayMouseDown(day)\"\r\n                        (dayMouseUp)=\"onDayMouseUp(day)\"\r\n                    ></bc-day-number-box>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"!isPickerMode\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        renderDayTasks;\r\n                        context: {\r\n                            $implicit: weekTasksArray[weekIndex],\r\n                            maxRowTasks: maxRowTasks,\r\n                            weekIndex: weekIndex,\r\n                            deviceSize: deviceSize,\r\n                            calendarFields: calendarFields,\r\n                            weekDays: weekDays\r\n                        }\r\n                    \"\r\n                ></ng-container>\r\n                <tr fd-table-row>\r\n                    <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\r\n                        <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\r\n                            <button\r\n                                fd-button\r\n                                (click)=\"onMoreButton($event, popover)\"\r\n                                [fdType]=\"'transparent'\"\r\n                                [compact]=\"true\"\r\n                            >\r\n                                {{ day.tasks?.length - maxRowTasks?.length }}\r\n                                {{ 'More' | bbbTranslate }}\r\n                            </button>\r\n                            <fd-popover\r\n                                #popover\r\n                                [mobile]=\"deviceSize === 's'\"\r\n                                placement=\"bottom\"\r\n                                [focusTrapped]=\"true\"\r\n                                [focusAutoCapture]=\"true\"\r\n                                (isOpenChange)=\"onOpenPopoverChange($event)\"\r\n                            >\r\n                                <bc-day-event-list\r\n                                    [day]=\"day\"\r\n                                    [calendarFields]=\"calendarFields\"\r\n                                    [deviceSize]=\"deviceSize\"\r\n                                    [weekDays]=\"weekDays\"\r\n                                    [rtl]=\"rtl\"\r\n                                    [canDelete]=\"canDelete\"\r\n                                    [canEdit]=\"canEdit\"\r\n                                    [popover]=\"popover\"\r\n                                    (deleteEvent)=\"deleteEvent.emit($event)\"\r\n                                    (editEvent)=\"editEvent.emit($event)\"\r\n                                ></bc-day-event-list>\r\n                            </fd-popover>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderDayTasks\r\n    let-weekTasks\r\n    let-maxRowTasks=\"maxRowTasks\"\r\n    let-weekIndex=\"weekIndex\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-calendarFields=\"calendarFields\"\r\n    let-weekDays=\"weekDays\"\r\n>\r\n    <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\r\n        <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\r\n            <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n            <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\r\n                <ng-container *ngIf=\"task.event; else newDaySelect\">\r\n                    <bc-event-button\r\n                        [task]=\"task\"\r\n                        [calendarFields]=\"calendarFields\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        [rtl]=\"rtl\"\r\n                        [canDelete]=\"canDelete\"\r\n                        [canEdit]=\"canEdit\"\r\n                        (deleteEvent)=\"deleteEvent.emit($event)\"\r\n                        (editEvent)=\"editEvent.emit($event)\"\r\n                        (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n                    ></bc-event-button>\r\n                </ng-container>\r\n                <ng-template #newDaySelect>\r\n                    <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\r\n                </ng-template>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n</ng-template>\r\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.noborder{border:none!important}table[picker=true] thead,table[picker=true] tbody{border:none}\n"] }]
         }], ctorParameters: function () { return [{ type: DaysInWeekPipe }, { type: i0.ChangeDetectorRef }, { type: CalendarService }]; }, propDecorators: { monthWeeksCount: [{
                 type: Input
             }], weekDays: [{
@@ -1368,7 +1368,7 @@ CalendarSelectionDaysComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             useFactory: getDateService
         },
         CalendarService
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fdp-button glyph=\"calendar\" buttonType=\"transparent\" [fdPopoverTrigger]=\"popover\"></fdp-button>\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\" [mobile]=\"(deviceSize$ | async) === 's'\">\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$ | async,\n                    popover: popover\n                }\n            \"\n        >\n        </ng-container>\n    </fd-popover-body>\n</fd-popover>\n\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>\n    <fd-toolbar [fdType]=\"'transparent'\">\n        <fdp-button fd-toolbar-item [label]=\"'DateR_Today' | bbbTranslate\" (click)=\"onToday()\"></fdp-button>\n        <fdp-button\n            buttonType=\"transparent\"\n            fd-toolbar-item\n            [glyph]=\"rtl ? 'navigation-right-arrow' : 'navigation-left-arrow'\"\n            (click)=\"onPrevTap()\"\n        ></fdp-button>\n        <fdp-button\n            buttonType=\"transparent\"\n            fd-toolbar-item\n            [glyph]=\"rtl ? 'navigation-left-arrow' : 'navigation-right-arrow'\"\n            (click)=\"onNextTap()\"\n        ></fdp-button>\n        <div class=\"month-years-wrapper\" fd-title fd-toolbar-item>\n            <button\n                *ngIf=\"selectionMode === 'day' || selectionMode === 'month'\"\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.monthName\"\n                (click)=\"selectionMode = 'month'\"\n            ></button>\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.year\"\n                (click)=\"selectionMode = 'year'\"\n            ></button>\n        </div>\n    </fd-toolbar>\n    <ng-container [ngSwitch]=\"selectionMode\">\n        <ng-container *ngSwitchCase=\"'month'\">\n            <div class=\"month-year-selection-wrapper\">\n                <button\n                    style=\"flex-grow: 1; width: 33%\"\n                    *ngFor=\"let month of months; let i = index\"\n                    fd-button\n                    [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\n                    [label]=\"month\"\n                    (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\n                ></button>\n            </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'year'\">\n            <div class=\"month-year-selection-wrapper\">\n                <button\n                    style=\"flex-grow: 1; width: 25%\"\n                    *ngFor=\"let year of years\"\n                    fd-button\n                    [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\n                    [label]=\"year\"\n                    (click)=\"selectionMode = 'day'; onYearSelected(year)\"\n                ></button>\n            </div>\n        </ng-container>\n        <bc-calendar-month\n            *ngSwitchDefault\n            [style.width]=\"width\"\n            [containerHeight]=\"height\"\n            [containerWidth]=\"width\"\n            [rtl]=\"rtl\"\n            [monthWeeksCount]=\"6\"\n            [weekDays]=\"weekDays\"\n            [weekDaysMin]=\"weekDaysMin\"\n            [today]=\"today\"\n            [datePicker]=\"true\"\n            [dateRange]=\"true\"\n            [days]=\"selectedMonth.days\"\n            [deviceSize]=\"deviceSize\"\n            (dayClick)=\"onDayClick($event, selectedMonth, popover)\"\n            (dayMouseMove)=\"onDayMouseMove($event, selectedMonth)\"\n            (dayMouseUp)=\"onDayMouseUp($event, selectedMonth, popover)\"\n            (dayMouseDown)=\"onDayMouseDown($event)\"\n            [startSelectedDayIndex]=\"startSelectedDayIndex\"\n            [endSelectedDayIndex]=\"endSelectedDayIndex\"\n        ></bc-calendar-month>\n    </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i5$1.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i6.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i6.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: ["monthWeeksCount", "weekDays", "weekDaysMin", "today", "containerHeight", "days", "calendarFields", "rtl", "deviceSize", "moDataList", "datePicker", "rangePicker", "canDelete", "canAdd", "canEdit", "selectedDate", "startSelectedDayIndex", "endSelectedDayIndex"], outputs: ["editEvent", "deleteEvent", "daySelect", "dayClick", "dayMouseMove", "dayMouseUp", "dayMouseDown", "showEvent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fdp-button glyph=\"calendar\" buttonType=\"transparent\" [fdPopoverTrigger]=\"popover\"></fdp-button>\r\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\" [mobile]=\"(deviceSize$ | async) === 's'\">\r\n    <fd-popover-body [style.width.px]=\"width$ | async\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                month;\r\n                context: {\r\n                    $implicit: selectedMonth$ | async,\r\n                    width: width$ | async,\r\n                    height: height,\r\n                    rtl: rtl$ | async,\r\n                    weekDays: weekDays,\r\n                    weekDaysMin: weekDaysMin,\r\n                    today: today,\r\n                    deviceSize: deviceSize$ | async,\r\n                    popover: popover\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n    </fd-popover-body>\r\n</fd-popover>\r\n\r\n<ng-template\r\n    #month\r\n    let-selectedMonth\r\n    let-width=\"width\"\r\n    let-height=\"height\"\r\n    let-rtl=\"rtl\"\r\n    let-today=\"today\"\r\n    let-showEvents=\"showEvents\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-popover=\"popover\"\r\n>\r\n    <fd-toolbar [fdType]=\"'transparent'\">\r\n        <fdp-button fd-toolbar-item [label]=\"'DateR_Today' | bbbTranslate\" (click)=\"onToday()\"></fdp-button>\r\n        <fdp-button\r\n            buttonType=\"transparent\"\r\n            fd-toolbar-item\r\n            [glyph]=\"rtl ? 'navigation-right-arrow' : 'navigation-left-arrow'\"\r\n            (click)=\"onPrevTap()\"\r\n        ></fdp-button>\r\n        <fdp-button\r\n            buttonType=\"transparent\"\r\n            fd-toolbar-item\r\n            [glyph]=\"rtl ? 'navigation-left-arrow' : 'navigation-right-arrow'\"\r\n            (click)=\"onNextTap()\"\r\n        ></fdp-button>\r\n        <div class=\"month-years-wrapper\" fd-title fd-toolbar-item>\r\n            <button\r\n                *ngIf=\"selectionMode === 'day' || selectionMode === 'month'\"\r\n                fd-button\r\n                [fdType]=\"'transparent'\"\r\n                [label]=\"selectedMonth.dateInfo.monthName\"\r\n                (click)=\"selectionMode = 'month'\"\r\n            ></button>\r\n            <button\r\n                fd-button\r\n                [fdType]=\"'transparent'\"\r\n                [label]=\"selectedMonth.dateInfo.year\"\r\n                (click)=\"selectionMode = 'year'\"\r\n            ></button>\r\n        </div>\r\n    </fd-toolbar>\r\n    <ng-container [ngSwitch]=\"selectionMode\">\r\n        <ng-container *ngSwitchCase=\"'month'\">\r\n            <div class=\"month-year-selection-wrapper\">\r\n                <button\r\n                    style=\"flex-grow: 1; width: 33%\"\r\n                    *ngFor=\"let month of months; let i = index\"\r\n                    fd-button\r\n                    [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\r\n                    [label]=\"month\"\r\n                    (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\r\n                ></button>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'year'\">\r\n            <div class=\"month-year-selection-wrapper\">\r\n                <button\r\n                    style=\"flex-grow: 1; width: 25%\"\r\n                    *ngFor=\"let year of years\"\r\n                    fd-button\r\n                    [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\r\n                    [label]=\"year\"\r\n                    (click)=\"selectionMode = 'day'; onYearSelected(year)\"\r\n                ></button>\r\n            </div>\r\n        </ng-container>\r\n        <bc-calendar-month\r\n            *ngSwitchDefault\r\n            [style.width]=\"width\"\r\n            [containerHeight]=\"height\"\r\n            [containerWidth]=\"width\"\r\n            [rtl]=\"rtl\"\r\n            [monthWeeksCount]=\"6\"\r\n            [weekDays]=\"weekDays\"\r\n            [weekDaysMin]=\"weekDaysMin\"\r\n            [today]=\"today\"\r\n            [datePicker]=\"true\"\r\n            [dateRange]=\"true\"\r\n            [days]=\"selectedMonth.days\"\r\n            [deviceSize]=\"deviceSize\"\r\n            (dayClick)=\"onDayClick($event, selectedMonth, popover)\"\r\n            (dayMouseMove)=\"onDayMouseMove($event, selectedMonth)\"\r\n            (dayMouseUp)=\"onDayMouseUp($event, selectedMonth, popover)\"\r\n            (dayMouseDown)=\"onDayMouseDown($event)\"\r\n            [startSelectedDayIndex]=\"startSelectedDayIndex\"\r\n            [endSelectedDayIndex]=\"endSelectedDayIndex\"\r\n        ></bc-calendar-month>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$1.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i5$1.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i6.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i6.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i7.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: ["monthWeeksCount", "weekDays", "weekDaysMin", "today", "containerHeight", "days", "calendarFields", "rtl", "deviceSize", "moDataList", "datePicker", "rangePicker", "canDelete", "canAdd", "canEdit", "selectedDate", "startSelectedDayIndex", "endSelectedDayIndex"], outputs: ["editEvent", "deleteEvent", "daySelect", "dayClick", "dayMouseMove", "dayMouseUp", "dayMouseDown", "showEvent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CalendarSelectionDaysComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bc-calendar-selection-days', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1377,7 +1377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                             useFactory: getDateService
                         },
                         CalendarService
-                    ], template: "<fdp-button glyph=\"calendar\" buttonType=\"transparent\" [fdPopoverTrigger]=\"popover\"></fdp-button>\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\" [mobile]=\"(deviceSize$ | async) === 's'\">\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$ | async,\n                    popover: popover\n                }\n            \"\n        >\n        </ng-container>\n    </fd-popover-body>\n</fd-popover>\n\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>\n    <fd-toolbar [fdType]=\"'transparent'\">\n        <fdp-button fd-toolbar-item [label]=\"'DateR_Today' | bbbTranslate\" (click)=\"onToday()\"></fdp-button>\n        <fdp-button\n            buttonType=\"transparent\"\n            fd-toolbar-item\n            [glyph]=\"rtl ? 'navigation-right-arrow' : 'navigation-left-arrow'\"\n            (click)=\"onPrevTap()\"\n        ></fdp-button>\n        <fdp-button\n            buttonType=\"transparent\"\n            fd-toolbar-item\n            [glyph]=\"rtl ? 'navigation-left-arrow' : 'navigation-right-arrow'\"\n            (click)=\"onNextTap()\"\n        ></fdp-button>\n        <div class=\"month-years-wrapper\" fd-title fd-toolbar-item>\n            <button\n                *ngIf=\"selectionMode === 'day' || selectionMode === 'month'\"\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.monthName\"\n                (click)=\"selectionMode = 'month'\"\n            ></button>\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.year\"\n                (click)=\"selectionMode = 'year'\"\n            ></button>\n        </div>\n    </fd-toolbar>\n    <ng-container [ngSwitch]=\"selectionMode\">\n        <ng-container *ngSwitchCase=\"'month'\">\n            <div class=\"month-year-selection-wrapper\">\n                <button\n                    style=\"flex-grow: 1; width: 33%\"\n                    *ngFor=\"let month of months; let i = index\"\n                    fd-button\n                    [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\n                    [label]=\"month\"\n                    (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\n                ></button>\n            </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'year'\">\n            <div class=\"month-year-selection-wrapper\">\n                <button\n                    style=\"flex-grow: 1; width: 25%\"\n                    *ngFor=\"let year of years\"\n                    fd-button\n                    [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\n                    [label]=\"year\"\n                    (click)=\"selectionMode = 'day'; onYearSelected(year)\"\n                ></button>\n            </div>\n        </ng-container>\n        <bc-calendar-month\n            *ngSwitchDefault\n            [style.width]=\"width\"\n            [containerHeight]=\"height\"\n            [containerWidth]=\"width\"\n            [rtl]=\"rtl\"\n            [monthWeeksCount]=\"6\"\n            [weekDays]=\"weekDays\"\n            [weekDaysMin]=\"weekDaysMin\"\n            [today]=\"today\"\n            [datePicker]=\"true\"\n            [dateRange]=\"true\"\n            [days]=\"selectedMonth.days\"\n            [deviceSize]=\"deviceSize\"\n            (dayClick)=\"onDayClick($event, selectedMonth, popover)\"\n            (dayMouseMove)=\"onDayMouseMove($event, selectedMonth)\"\n            (dayMouseUp)=\"onDayMouseUp($event, selectedMonth, popover)\"\n            (dayMouseDown)=\"onDayMouseDown($event)\"\n            [startSelectedDayIndex]=\"startSelectedDayIndex\"\n            [endSelectedDayIndex]=\"endSelectedDayIndex\"\n        ></bc-calendar-month>\n    </ng-container>\n</ng-template>\n" }]
+                    ], template: "<fdp-button glyph=\"calendar\" buttonType=\"transparent\" [fdPopoverTrigger]=\"popover\"></fdp-button>\r\n<fd-popover #popover [focusTrapped]=\"true\" [focusAutoCapture]=\"true\" [mobile]=\"(deviceSize$ | async) === 's'\">\r\n    <fd-popover-body [style.width.px]=\"width$ | async\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                month;\r\n                context: {\r\n                    $implicit: selectedMonth$ | async,\r\n                    width: width$ | async,\r\n                    height: height,\r\n                    rtl: rtl$ | async,\r\n                    weekDays: weekDays,\r\n                    weekDaysMin: weekDaysMin,\r\n                    today: today,\r\n                    deviceSize: deviceSize$ | async,\r\n                    popover: popover\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n    </fd-popover-body>\r\n</fd-popover>\r\n\r\n<ng-template\r\n    #month\r\n    let-selectedMonth\r\n    let-width=\"width\"\r\n    let-height=\"height\"\r\n    let-rtl=\"rtl\"\r\n    let-today=\"today\"\r\n    let-showEvents=\"showEvents\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-popover=\"popover\"\r\n>\r\n    <fd-toolbar [fdType]=\"'transparent'\">\r\n        <fdp-button fd-toolbar-item [label]=\"'DateR_Today' | bbbTranslate\" (click)=\"onToday()\"></fdp-button>\r\n        <fdp-button\r\n            buttonType=\"transparent\"\r\n            fd-toolbar-item\r\n            [glyph]=\"rtl ? 'navigation-right-arrow' : 'navigation-left-arrow'\"\r\n            (click)=\"onPrevTap()\"\r\n        ></fdp-button>\r\n        <fdp-button\r\n            buttonType=\"transparent\"\r\n            fd-toolbar-item\r\n            [glyph]=\"rtl ? 'navigation-left-arrow' : 'navigation-right-arrow'\"\r\n            (click)=\"onNextTap()\"\r\n        ></fdp-button>\r\n        <div class=\"month-years-wrapper\" fd-title fd-toolbar-item>\r\n            <button\r\n                *ngIf=\"selectionMode === 'day' || selectionMode === 'month'\"\r\n                fd-button\r\n                [fdType]=\"'transparent'\"\r\n                [label]=\"selectedMonth.dateInfo.monthName\"\r\n                (click)=\"selectionMode = 'month'\"\r\n            ></button>\r\n            <button\r\n                fd-button\r\n                [fdType]=\"'transparent'\"\r\n                [label]=\"selectedMonth.dateInfo.year\"\r\n                (click)=\"selectionMode = 'year'\"\r\n            ></button>\r\n        </div>\r\n    </fd-toolbar>\r\n    <ng-container [ngSwitch]=\"selectionMode\">\r\n        <ng-container *ngSwitchCase=\"'month'\">\r\n            <div class=\"month-year-selection-wrapper\">\r\n                <button\r\n                    style=\"flex-grow: 1; width: 33%\"\r\n                    *ngFor=\"let month of months; let i = index\"\r\n                    fd-button\r\n                    [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\r\n                    [label]=\"month\"\r\n                    (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\r\n                ></button>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'year'\">\r\n            <div class=\"month-year-selection-wrapper\">\r\n                <button\r\n                    style=\"flex-grow: 1; width: 25%\"\r\n                    *ngFor=\"let year of years\"\r\n                    fd-button\r\n                    [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\r\n                    [label]=\"year\"\r\n                    (click)=\"selectionMode = 'day'; onYearSelected(year)\"\r\n                ></button>\r\n            </div>\r\n        </ng-container>\r\n        <bc-calendar-month\r\n            *ngSwitchDefault\r\n            [style.width]=\"width\"\r\n            [containerHeight]=\"height\"\r\n            [containerWidth]=\"width\"\r\n            [rtl]=\"rtl\"\r\n            [monthWeeksCount]=\"6\"\r\n            [weekDays]=\"weekDays\"\r\n            [weekDaysMin]=\"weekDaysMin\"\r\n            [today]=\"today\"\r\n            [datePicker]=\"true\"\r\n            [dateRange]=\"true\"\r\n            [days]=\"selectedMonth.days\"\r\n            [deviceSize]=\"deviceSize\"\r\n            (dayClick)=\"onDayClick($event, selectedMonth, popover)\"\r\n            (dayMouseMove)=\"onDayMouseMove($event, selectedMonth)\"\r\n            (dayMouseUp)=\"onDayMouseUp($event, selectedMonth, popover)\"\r\n            (dayMouseDown)=\"onDayMouseDown($event)\"\r\n            [startSelectedDayIndex]=\"startSelectedDayIndex\"\r\n            [endSelectedDayIndex]=\"endSelectedDayIndex\"\r\n        ></bc-calendar-month>\r\n    </ng-container>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: CalendarService, decorators: [{
                     type: Self
                 }] }, { type: i2.PortalService }]; }, propDecorators: { startSelectedDayIndex: [{
@@ -1644,7 +1644,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             useFactory: getDateService
         },
         CalendarService
-    ], viewQueries: [{ propertyName: "timeComponent", first: true, predicate: TimeComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-input-group\n    placement=\"after\"\n    glyph=\"calendar\"\n    glyphAriaLabel=\"select day\"\n    [placeholder]=\"placeholder\"\n    ariaLabelledby=\"fd-input-group-icon-label-2\"\n    [button]=\"true\"\n    [state]=\"isValid ? 'success' : 'error'\"\n    [showFocus]=\"true\"\n    (addOnButtonClicked)=\"onOpenPopover(popover)\"\n    [ngModel]=\"value | dateTimeToCaption: formatPattern:culture:showDate:showTime\"\n    (ngModelChange)=\"onCaptionChanged($event)\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n>\n</fd-input-group>\n<fd-popover\n    #popover\n    (isOpenChange)=\"onPopoverOpenChange($event)\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [mobile]=\"(deviceSize$ | async) === 's'\"\n>\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$ | async,\n                    popover: popover\n                }\n            \"\n        >\n        </ng-container>\n        <div fd-popover-body-footer *ngIf=\"showTime\">\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-left *ngIf=\"rtl\">\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\n                </div>\n                <div fd-bar-right *ngIf=\"!rtl\">\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\n                </div>\n            </div>\n        </div>\n    </fd-popover-body>\n</fd-popover>\n<ng-template #footerButtons>\n    <fd-button-bar [label]=\"'Cancel' | bbbTranslate\" (click)=\"onCancel(popover)\"></fd-button-bar>\n    <fd-button-bar [label]=\"'Ok' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onOk(popover)\"></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>\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        <button\n            *ngIf=\"showDate\"\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        <button\n            *ngIf=\"showDate\"\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        <div class=\"month-years-wrapper\" *ngIf=\"showDate\" fd-title fd-toolbar-item>\n            <button\n                *ngIf=\"selectionMode === 'day' || selectionMode === 'month'\"\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.monthName\"\n                (click)=\"selectionMode = 'month'\"\n            ></button>\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.year\"\n                (click)=\"selectionMode = 'year'\"\n            ></button>\n        </div>\n    </fd-toolbar>\n    <div style=\"display: flex\">\n        <ng-container [ngSwitch]=\"selectionMode\">\n            <ng-container *ngSwitchCase=\"'month'\">\n                <div class=\"month-year-selection-wrapper\">\n                    <button\n                        style=\"flex-grow: 1; width: 33%\"\n                        *ngFor=\"let month of months; let i = index\"\n                        fd-button\n                        [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\n                        [label]=\"month\"\n                        (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\n                    ></button>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'year'\">\n                <div class=\"month-year-selection-wrapper\">\n                    <button\n                        style=\"flex-grow: 1; width: 25%\"\n                        *ngFor=\"let year of years\"\n                        fd-button\n                        [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\n                        [label]=\"year\"\n                        (click)=\"selectionMode = 'day'; onYearSelected(year)\"\n                    ></button>\n                </div>\n            </ng-container>\n            <div *ngSwitchDefault style=\"display: flex\">\n                <bc-calendar-month\n                    *ngIf=\"showDate\"\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)\"\n                ></bc-calendar-month>\n                <div class=\"seperator\"></div>\n                <fd-time\n                    *ngIf=\"showTime\"\n                    [(ngModel)]=\"timeValue\"\n                    [compact]=\"(deviceSize$ | async) !== 's'\"\n                    [displaySeconds]=\"false\"\n                ></fd-time>\n            </div>\n        </ng-container>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "component", type: i2$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i2$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$1.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i5$1.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i5$1.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i5$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i9.TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "directive", type: i9.DeprecatedTimeContentDensityDirective, selector: "fd-time-column[compact], fd-time[compact]" }, { kind: "component", type: i6.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i6.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: ["monthWeeksCount", "weekDays", "weekDaysMin", "today", "containerHeight", "days", "calendarFields", "rtl", "deviceSize", "moDataList", "datePicker", "rangePicker", "canDelete", "canAdd", "canEdit", "selectedDate", "startSelectedDayIndex", "endSelectedDayIndex"], outputs: ["editEvent", "deleteEvent", "daySelect", "dayClick", "dayMouseMove", "dayMouseUp", "dayMouseDown", "showEvent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.DateTimeToCaptionPipe, name: "dateTimeToCaption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "timeComponent", first: true, predicate: TimeComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-input-group\r\n    placement=\"after\"\r\n    glyph=\"calendar\"\r\n    glyphAriaLabel=\"select day\"\r\n    [placeholder]=\"placeholder\"\r\n    ariaLabelledby=\"fd-input-group-icon-label-2\"\r\n    [button]=\"true\"\r\n    [state]=\"isValid ? 'success' : 'error'\"\r\n    [showFocus]=\"true\"\r\n    (addOnButtonClicked)=\"onOpenPopover(popover)\"\r\n    [ngModel]=\"value | dateTimeToCaption: formatPattern:culture:showDate:showTime\"\r\n    (ngModelChange)=\"onCaptionChanged($event)\"\r\n    [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\"\r\n>\r\n</fd-input-group>\r\n<fd-popover\r\n    #popover\r\n    (isOpenChange)=\"onPopoverOpenChange($event)\"\r\n    [focusTrapped]=\"true\"\r\n    [focusAutoCapture]=\"true\"\r\n    [mobile]=\"(deviceSize$ | async) === 's'\"\r\n>\r\n    <fd-popover-body [style.width.px]=\"width$ | async\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                month;\r\n                context: {\r\n                    $implicit: selectedMonth$ | async,\r\n                    width: width$ | async,\r\n                    height: height,\r\n                    rtl: rtl$ | async,\r\n                    weekDays: weekDays,\r\n                    weekDaysMin: weekDaysMin,\r\n                    today: today,\r\n                    deviceSize: deviceSize$ | async,\r\n                    popover: popover\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n        <div fd-popover-body-footer *ngIf=\"showTime\">\r\n            <div fd-bar [barDesign]=\"'footer'\">\r\n                <div fd-bar-left *ngIf=\"rtl\">\r\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\r\n                </div>\r\n                <div fd-bar-right *ngIf=\"!rtl\">\r\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </fd-popover-body>\r\n</fd-popover>\r\n<ng-template #footerButtons>\r\n    <fd-button-bar [label]=\"'Cancel' | bbbTranslate\" (click)=\"onCancel(popover)\"></fd-button-bar>\r\n    <fd-button-bar [label]=\"'Ok' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onOk(popover)\"></fd-button-bar>\r\n</ng-template>\r\n<ng-template\r\n    #month\r\n    let-selectedMonth\r\n    let-width=\"width\"\r\n    let-height=\"height\"\r\n    let-rtl=\"rtl\"\r\n    let-today=\"today\"\r\n    let-showEvents=\"showEvents\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-popover=\"popover\"\r\n>\r\n    <fd-toolbar [fdType]=\"'transparent'\">\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            [label]=\"(showDate ? 'DateR_Today' : 'Now') | bbbTranslate\"\r\n            (click)=\"onToday()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"showDate\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            [fdType]=\"'transparent'\"\r\n            [glyph]=\"rtl ? 'navigation-right-arrow' : 'navigation-left-arrow'\"\r\n            (click)=\"onPrevTap()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"showDate\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            [fdType]=\"'transparent'\"\r\n            [glyph]=\"rtl ? 'navigation-left-arrow' : 'navigation-right-arrow'\"\r\n            (click)=\"onNextTap()\"\r\n        ></button>\r\n        <div class=\"month-years-wrapper\" *ngIf=\"showDate\" fd-title fd-toolbar-item>\r\n            <button\r\n                *ngIf=\"selectionMode === 'day' || selectionMode === 'month'\"\r\n                fd-button\r\n                [fdType]=\"'transparent'\"\r\n                [label]=\"selectedMonth.dateInfo.monthName\"\r\n                (click)=\"selectionMode = 'month'\"\r\n            ></button>\r\n            <button\r\n                fd-button\r\n                [fdType]=\"'transparent'\"\r\n                [label]=\"selectedMonth.dateInfo.year\"\r\n                (click)=\"selectionMode = 'year'\"\r\n            ></button>\r\n        </div>\r\n    </fd-toolbar>\r\n    <div style=\"display: flex\">\r\n        <ng-container [ngSwitch]=\"selectionMode\">\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                <div class=\"month-year-selection-wrapper\">\r\n                    <button\r\n                        style=\"flex-grow: 1; width: 33%\"\r\n                        *ngFor=\"let month of months; let i = index\"\r\n                        fd-button\r\n                        [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\r\n                        [label]=\"month\"\r\n                        (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\r\n                    ></button>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'year'\">\r\n                <div class=\"month-year-selection-wrapper\">\r\n                    <button\r\n                        style=\"flex-grow: 1; width: 25%\"\r\n                        *ngFor=\"let year of years\"\r\n                        fd-button\r\n                        [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\r\n                        [label]=\"year\"\r\n                        (click)=\"selectionMode = 'day'; onYearSelected(year)\"\r\n                    ></button>\r\n                </div>\r\n            </ng-container>\r\n            <div *ngSwitchDefault style=\"display: flex\">\r\n                <bc-calendar-month\r\n                    *ngIf=\"showDate\"\r\n                    [style.width]=\"width\"\r\n                    [containerHeight]=\"height\"\r\n                    [containerWidth]=\"width\"\r\n                    [rtl]=\"rtl\"\r\n                    [monthWeeksCount]=\"selectedMonth.weeksCount\"\r\n                    [weekDays]=\"weekDays\"\r\n                    [weekDaysMin]=\"weekDaysMin\"\r\n                    [today]=\"today\"\r\n                    [datePicker]=\"true\"\r\n                    [dateRange]=\"true\"\r\n                    [selectedDate]=\"startSelectedDay ? startSelectedDay.date : value\"\r\n                    [days]=\"selectedMonth.days\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    (dayClick)=\"onDayClick($event, popover)\"\r\n                ></bc-calendar-month>\r\n                <div class=\"seperator\"></div>\r\n                <fd-time\r\n                    *ngIf=\"showTime\"\r\n                    [(ngModel)]=\"timeValue\"\r\n                    [compact]=\"(deviceSize$ | async) !== 's'\"\r\n                    [displaySeconds]=\"false\"\r\n                ></fd-time>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "component", type: i2$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i2$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$1.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "component", type: i5$1.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i5$1.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i5$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i9.TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "directive", type: i9.DeprecatedTimeContentDensityDirective, selector: "fd-time-column[compact], fd-time[compact]" }, { kind: "component", type: i6.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i6.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: ["monthWeeksCount", "weekDays", "weekDaysMin", "today", "containerHeight", "days", "calendarFields", "rtl", "deviceSize", "moDataList", "datePicker", "rangePicker", "canDelete", "canAdd", "canEdit", "selectedDate", "startSelectedDayIndex", "endSelectedDayIndex"], outputs: ["editEvent", "deleteEvent", "daySelect", "dayClick", "dayMouseMove", "dayMouseUp", "dayMouseDown", "showEvent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.DateTimeToCaptionPipe, name: "dateTimeToCaption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bc-date-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1661,7 +1661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                             useFactory: getDateService
                         },
                         CalendarService
-                    ], template: "<fd-input-group\n    placement=\"after\"\n    glyph=\"calendar\"\n    glyphAriaLabel=\"select day\"\n    [placeholder]=\"placeholder\"\n    ariaLabelledby=\"fd-input-group-icon-label-2\"\n    [button]=\"true\"\n    [state]=\"isValid ? 'success' : 'error'\"\n    [showFocus]=\"true\"\n    (addOnButtonClicked)=\"onOpenPopover(popover)\"\n    [ngModel]=\"value | dateTimeToCaption: formatPattern:culture:showDate:showTime\"\n    (ngModelChange)=\"onCaptionChanged($event)\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n>\n</fd-input-group>\n<fd-popover\n    #popover\n    (isOpenChange)=\"onPopoverOpenChange($event)\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [mobile]=\"(deviceSize$ | async) === 's'\"\n>\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$ | async,\n                    popover: popover\n                }\n            \"\n        >\n        </ng-container>\n        <div fd-popover-body-footer *ngIf=\"showTime\">\n            <div fd-bar [barDesign]=\"'footer'\">\n                <div fd-bar-left *ngIf=\"rtl\">\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\n                </div>\n                <div fd-bar-right *ngIf=\"!rtl\">\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\n                </div>\n            </div>\n        </div>\n    </fd-popover-body>\n</fd-popover>\n<ng-template #footerButtons>\n    <fd-button-bar [label]=\"'Cancel' | bbbTranslate\" (click)=\"onCancel(popover)\"></fd-button-bar>\n    <fd-button-bar [label]=\"'Ok' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onOk(popover)\"></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>\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        <button\n            *ngIf=\"showDate\"\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        <button\n            *ngIf=\"showDate\"\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        <div class=\"month-years-wrapper\" *ngIf=\"showDate\" fd-title fd-toolbar-item>\n            <button\n                *ngIf=\"selectionMode === 'day' || selectionMode === 'month'\"\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.monthName\"\n                (click)=\"selectionMode = 'month'\"\n            ></button>\n            <button\n                fd-button\n                [fdType]=\"'transparent'\"\n                [label]=\"selectedMonth.dateInfo.year\"\n                (click)=\"selectionMode = 'year'\"\n            ></button>\n        </div>\n    </fd-toolbar>\n    <div style=\"display: flex\">\n        <ng-container [ngSwitch]=\"selectionMode\">\n            <ng-container *ngSwitchCase=\"'month'\">\n                <div class=\"month-year-selection-wrapper\">\n                    <button\n                        style=\"flex-grow: 1; width: 33%\"\n                        *ngFor=\"let month of months; let i = index\"\n                        fd-button\n                        [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\n                        [label]=\"month\"\n                        (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\n                    ></button>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'year'\">\n                <div class=\"month-year-selection-wrapper\">\n                    <button\n                        style=\"flex-grow: 1; width: 25%\"\n                        *ngFor=\"let year of years\"\n                        fd-button\n                        [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\n                        [label]=\"year\"\n                        (click)=\"selectionMode = 'day'; onYearSelected(year)\"\n                    ></button>\n                </div>\n            </ng-container>\n            <div *ngSwitchDefault style=\"display: flex\">\n                <bc-calendar-month\n                    *ngIf=\"showDate\"\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)\"\n                ></bc-calendar-month>\n                <div class=\"seperator\"></div>\n                <fd-time\n                    *ngIf=\"showTime\"\n                    [(ngModel)]=\"timeValue\"\n                    [compact]=\"(deviceSize$ | async) !== 's'\"\n                    [displaySeconds]=\"false\"\n                ></fd-time>\n            </div>\n        </ng-container>\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"] }]
+                    ], template: "<fd-input-group\r\n    placement=\"after\"\r\n    glyph=\"calendar\"\r\n    glyphAriaLabel=\"select day\"\r\n    [placeholder]=\"placeholder\"\r\n    ariaLabelledby=\"fd-input-group-icon-label-2\"\r\n    [button]=\"true\"\r\n    [state]=\"isValid ? 'success' : 'error'\"\r\n    [showFocus]=\"true\"\r\n    (addOnButtonClicked)=\"onOpenPopover(popover)\"\r\n    [ngModel]=\"value | dateTimeToCaption: formatPattern:culture:showDate:showTime\"\r\n    (ngModelChange)=\"onCaptionChanged($event)\"\r\n    [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\"\r\n>\r\n</fd-input-group>\r\n<fd-popover\r\n    #popover\r\n    (isOpenChange)=\"onPopoverOpenChange($event)\"\r\n    [focusTrapped]=\"true\"\r\n    [focusAutoCapture]=\"true\"\r\n    [mobile]=\"(deviceSize$ | async) === 's'\"\r\n>\r\n    <fd-popover-body [style.width.px]=\"width$ | async\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                month;\r\n                context: {\r\n                    $implicit: selectedMonth$ | async,\r\n                    width: width$ | async,\r\n                    height: height,\r\n                    rtl: rtl$ | async,\r\n                    weekDays: weekDays,\r\n                    weekDaysMin: weekDaysMin,\r\n                    today: today,\r\n                    deviceSize: deviceSize$ | async,\r\n                    popover: popover\r\n                }\r\n            \"\r\n        >\r\n        </ng-container>\r\n        <div fd-popover-body-footer *ngIf=\"showTime\">\r\n            <div fd-bar [barDesign]=\"'footer'\">\r\n                <div fd-bar-left *ngIf=\"rtl\">\r\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\r\n                </div>\r\n                <div fd-bar-right *ngIf=\"!rtl\">\r\n                    <container *ngTemplateOutlet=\"footerButtons\"></container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </fd-popover-body>\r\n</fd-popover>\r\n<ng-template #footerButtons>\r\n    <fd-button-bar [label]=\"'Cancel' | bbbTranslate\" (click)=\"onCancel(popover)\"></fd-button-bar>\r\n    <fd-button-bar [label]=\"'Ok' | bbbTranslate\" fdType=\"emphasized\" (click)=\"onOk(popover)\"></fd-button-bar>\r\n</ng-template>\r\n<ng-template\r\n    #month\r\n    let-selectedMonth\r\n    let-width=\"width\"\r\n    let-height=\"height\"\r\n    let-rtl=\"rtl\"\r\n    let-today=\"today\"\r\n    let-showEvents=\"showEvents\"\r\n    let-deviceSize=\"deviceSize\"\r\n    let-popover=\"popover\"\r\n>\r\n    <fd-toolbar [fdType]=\"'transparent'\">\r\n        <button\r\n            fd-button\r\n            fd-toolbar-item\r\n            [label]=\"(showDate ? 'DateR_Today' : 'Now') | bbbTranslate\"\r\n            (click)=\"onToday()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"showDate\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            [fdType]=\"'transparent'\"\r\n            [glyph]=\"rtl ? 'navigation-right-arrow' : 'navigation-left-arrow'\"\r\n            (click)=\"onPrevTap()\"\r\n        ></button>\r\n        <button\r\n            *ngIf=\"showDate\"\r\n            fd-button\r\n            fd-toolbar-item\r\n            [fdType]=\"'transparent'\"\r\n            [glyph]=\"rtl ? 'navigation-left-arrow' : 'navigation-right-arrow'\"\r\n            (click)=\"onNextTap()\"\r\n        ></button>\r\n        <div class=\"month-years-wrapper\" *ngIf=\"showDate\" fd-title fd-toolbar-item>\r\n            <button\r\n                *ngIf=\"selectionMode === 'day' || selectionMode === 'month'\"\r\n                fd-button\r\n                [fdType]=\"'transparent'\"\r\n                [label]=\"selectedMonth.dateInfo.monthName\"\r\n                (click)=\"selectionMode = 'month'\"\r\n            ></button>\r\n            <button\r\n                fd-button\r\n                [fdType]=\"'transparent'\"\r\n                [label]=\"selectedMonth.dateInfo.year\"\r\n                (click)=\"selectionMode = 'year'\"\r\n            ></button>\r\n        </div>\r\n    </fd-toolbar>\r\n    <div style=\"display: flex\">\r\n        <ng-container [ngSwitch]=\"selectionMode\">\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                <div class=\"month-year-selection-wrapper\">\r\n                    <button\r\n                        style=\"flex-grow: 1; width: 33%\"\r\n                        *ngFor=\"let month of months; let i = index\"\r\n                        fd-button\r\n                        [fdType]=\"selectedMonth.dateInfo.monthName === month ? 'emphasized' : 'transparent'\"\r\n                        [label]=\"month\"\r\n                        (click)=\"selectionMode = 'day'; onMonthSelected(month, i)\"\r\n                    ></button>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'year'\">\r\n                <div class=\"month-year-selection-wrapper\">\r\n                    <button\r\n                        style=\"flex-grow: 1; width: 25%\"\r\n                        *ngFor=\"let year of years\"\r\n                        fd-button\r\n                        [fdType]=\"selectedMonth.dateInfo.year === +year ? 'emphasized' : 'transparent'\"\r\n                        [label]=\"year\"\r\n                        (click)=\"selectionMode = 'day'; onYearSelected(year)\"\r\n                    ></button>\r\n                </div>\r\n            </ng-container>\r\n            <div *ngSwitchDefault style=\"display: flex\">\r\n                <bc-calendar-month\r\n                    *ngIf=\"showDate\"\r\n                    [style.width]=\"width\"\r\n                    [containerHeight]=\"height\"\r\n                    [containerWidth]=\"width\"\r\n                    [rtl]=\"rtl\"\r\n                    [monthWeeksCount]=\"selectedMonth.weeksCount\"\r\n                    [weekDays]=\"weekDays\"\r\n                    [weekDaysMin]=\"weekDaysMin\"\r\n                    [today]=\"today\"\r\n                    [datePicker]=\"true\"\r\n                    [dateRange]=\"true\"\r\n                    [selectedDate]=\"startSelectedDay ? startSelectedDay.date : value\"\r\n                    [days]=\"selectedMonth.days\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    (dayClick)=\"onDayClick($event, popover)\"\r\n                ></bc-calendar-month>\r\n                <div class=\"seperator\"></div>\r\n                <fd-time\r\n                    *ngIf=\"showTime\"\r\n                    [(ngModel)]=\"timeValue\"\r\n                    [compact]=\"(deviceSize$ | async) !== 's'\"\r\n                    [displaySeconds]=\"false\"\r\n                ></fd-time>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\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: function () { return [{ type: i2$3.DatetimeAdapter }, { type: i2.LogService }, { type: i2.PortalService }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], primaryCalendarType: [{
@@ -2098,10 +2098,10 @@ class CalendarWeekComponent extends BaseComponent {
     }
 }
 CalendarWeekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CalendarWeekComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CalendarService }], target: i0.ɵɵFactoryTarget.Component });
-CalendarWeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CalendarWeekComponent, selector: "bc-calendar-week", inputs: { weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", calendarFields: "calendarFields", rtl: "rtl", inDialog: "inDialog", deviceSize: "deviceSize", moDataList: "moDataList", days: "days", canDelete: "canDelete", canAdd: "canAdd", canEdit: "canEdit" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", showEvent: "showEvent", daySelect: "daySelect", dayClick: "dayClick" }, viewQueries: [{ propertyName: "tableTopEl", first: true, predicate: ["tableTop"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"table-container\"\n    [style.overflow-y]=\"inDialog ? 'scroll' : 'hidden'\"\n    style=\"overflow-y: hidden; flex-shrink: 0\"\n    #tableTop\n>\n    <table fd-table class=\"table-top\" [compact]=\"true\" [attr.daysCount]=\"days.length\">\n        <tbody fd-table-body>\n            <tr fd-table-row class=\"week-days\">\n                <td class=\"td-time\"></td>\n                <td [attr.rtl]=\"rtl\" class=\"weekday-header\" *ngFor=\"let day of days\" fd-table-cell style=\"width: 100%\">\n                    {{ day.dayName }}\n                </td>\n            </tr>\n            <tr fd-table-row class=\"week-numbers\">\n                <td class=\"td-time\"></td>\n                <td fd-table-cell *ngFor=\"let day of days\" [attr.rtl]=\"rtl\">\n                    <bc-day-number-box\n                        [day]=\"day\"\n                        [isWeekMode]=\"true\"\n                        [isSingleDay]=\"days.length === 1\"\n                        (dayClick)=\"onDayClick(day)\"\n                    ></bc-day-number-box>\n                </td>\n            </tr>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    renderDayTasks;\n                    context: {\n                        $implicit: weekTasksArray,\n                        maxRowTasks: maxRowTasks,\n                        weekIndex: 0\n                    }\n                \"\n            ></ng-container>\n        </tbody>\n    </table>\n</div>\n<ng-template #renderDayTasks let-weekTasks let-maxRowTasks=\"maxRowTasks\" let-weekIndex=\"weekIndex\">\n    <ng-container *ngFor=\"let rowTask of weekTasks | keyvalue; let i = index\">\n        <tr fd-table-row class=\"task-row\">\n            <td fd-table-cell class=\"fd-time\" style=\"border: none\"></td>\n            <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n                <td\n                    fd-table-cell\n                    *ngIf=\"task.colSpan && dayIndex < days.length\"\n                    [attr.colspan]=\"task.colSpan > days.length ? days.length : task.colSpan\"\n                    class=\"td-button\"\n                    [attr.hasevent]=\"!!task.event\"\n                >\n                    <bc-event-button\n                        *ngIf=\"task.event && !task.inDay; else newDaySelect\"\n                        [task]=\"task\"\n                        [rtl]=\"rtl\"\n                        [canDelete]=\"canDelete\"\n                        [canEdit]=\"canEdit\"\n                        [calendarFields]=\"calendarFields\"\n                        [deviceSize]=\"deviceSize\"\n                        (deleteEvent)=\"deleteEvent.emit($event)\"\n                        (editEvent)=\"editEvent.emit($event)\"\n                    ></bc-event-button>\n                    <ng-template #newDaySelect>\n                        <div style=\"width: 100%; height: 100%\" [attr.newDay]=\"true\"></div>\n                    </ng-template>\n                </td>\n            </ng-container>\n        </tr>\n    </ng-container>\n</ng-template>\n<div\n    class=\"table-container\"\n    style=\"overflow-y: hidden; overflow-x: auto; flex-grow: 1\"\n    [style.height.px]=\"inDialog ? containerHeight : null\"\n    [style.overflow-y]=\"inDialog ? 'scroll' : 'hidden'\"\n>\n    <table fd-table-body class=\"table-content\" [compact]=\"true\">\n        <tbody>\n            <tr class=\"tr-time\" style=\"height: 0rem\">\n                <td class=\"td-time\" style=\"height: 0rem\"></td>\n                <td [colspan]=\"days.length\" style=\"position: relative\" style=\"height: 0rem\">\n                    <div class=\"tasks-wrapper\">\n                        <div *ngFor=\"let hour of hours\" class=\"row-border\"></div>\n                    </div>\n                </td>\n            </tr>\n            <tr fd-table-row style=\"height: 100%\">\n                <td fd-table-cell class=\"td-time\">\n                    <div class=\"calc-time\">\n                        <div *ngFor=\"let hour of hours\">{{ hour }}</div>\n                    </div>\n                </td>\n                <td *ngFor=\"let day of days\" fd-table-cell (click)=\"onColumnClick($event, day)\">\n                    <div style=\"position: relative; width: 100%; height: 100%\">\n                        <ng-container *ngFor=\"let task of day.tasks; let index = index\">\n                            <bc-event-button\n                                (click)=\"onEventButton($event)\"\n                                *ngIf=\"task.inDay\"\n                                [style.background]=\"task.event[calendarFields.Color]\"\n                                [style.top.px]=\"task.top\"\n                                [style.right]=\"rtl ? 'calc(' + index * (100 / day.tasks.length) + '%)' : null\"\n                                [style.left]=\"rtl ? null : 'calc(' + index * (100 / day.tasks.length) + '%)'\"\n                                [style.width]=\"'calc(100% - ' + index * (100 / day.tasks.length) + '%)'\"\n                                [style.height.px]=\"task.height\"\n                                [style.maxHeight.px]=\"task.height\"\n                                [style.opacity]=\"task.opacity\"\n                                [style.zIndex]=\"index\"\n                                [buttonTemplate]=\"eventButtonTemplate\"\n                                class=\"task-day\"\n                                [task]=\"task\"\n                                [calendarFields]=\"calendarFields\"\n                                [deviceSize]=\"deviceSize\"\n                                [canDelete]=\"canDelete\"\n                                [canEdit]=\"canEdit\"\n                                (deleteEvent)=\"deleteEvent.emit($event)\"\n                                (editEvent)=\"editEvent.emit($event)\"\n                                (openPopoverChange)=\"onOpenPopoverChange($event)\"\n                            ></bc-event-button>\n                        </ng-container>\n                    </div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n<ng-template #eventButtonTemplate let-task let-popover=\"popover\" let-calendarFields=\"calendarFields\">\n    <button\n        [style.background]=\"task.event[calendarFields.Color]\"\n        class=\"task-title\"\n        [style.border]=\"'1px solid white'\"\n        fd-button\n        [compact]=\"true\"\n        [fdType]=\"'emphasized'\"\n        [fdPopoverTrigger]=\"popover\"\n        [label]=\"task.height > 49 ? '' : task.event[calendarFields.Title] + ' ' + (task | fromToTime)\"\n    >\n        <ng-container *ngIf=\"task.height > 49\">\n            <span class=\"ellipsis\">{{ task.event[calendarFields.Title] }}</span>\n            <span class=\"ellipsis\">{{ task | fromToTime }}</span>\n        </ng-container>\n    </button>\n</ng-template>\n", styles: [":host{display:flex;height:95%;width:100%;flex-direction:column;align-items:stretch;justify-content:stretch}table.table-top{border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.table-top{table-layout:fixed}.table-top td{padding-right:1px!important;padding-left:1px!important}.tr-time{height:1px;max-height:1px!important;width:100%}.tr-time td{height:1px!important;max-height:1px!important;padding:0!important}.task-row td{height:1.425rem!important;padding:0!important}.table-content{width:100%;border-spacing:0;position:relative}.table-content .tasks-wrapper{position:absolute;opacity:.3;height:100%;width:calc(100% - 50px)}.table-content .td-time{padding:0!important}.table-content .td-time .calc-time{display:flex;flex-direction:column;height:100%;justify-content:start;align-items:center}.table-content .td-time .calc-time div{height:50px;border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);width:100%;display:flex;justify-content:center}.table-content .td-time tbody{border-spacing:0}.td-time{width:50px!important;max-width:50px!important}.row-border{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:50px}.task-day{position:absolute!important;display:flex;flex-direction:column;align-items:start}.weekday-header td,.week-days td,.week-numbers td{text-align:right}table[dayscount=\"1\"] .week-days td[rtl=true],table[dayscount=\"1\"] .week-numbers td[rtl=true]{text-align:right!important}table[dayscount=\"1\"] .week-days td[rtl=false],table[dayscount=\"1\"] .week-numbers td[rtl=false]{text-align:left!important}table[dayscount=\"1\"] .week-days td,table[dayscount=\"1\"] .week-numbers td{padding-left:1rem!important;padding-right:1rem!important}table[dayscount=\"1\"] .week-days td.weekday-header,table[dayscount=\"1\"] .week-numbers td.weekday-header{padding-left:2rem!important;padding-right:2rem!important}.week-days td{border:none;text-align:center;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}.week-numbers td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}.td-button{border:none!important;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)!important;padding:1px!important}.task-title{display:flex;flex-direction:column;align-items:start!important;font-weight:400;width:100%;max-width:100%;min-width:100%;height:100%;max-height:100%;min-height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i4.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "directive", type: i5$1.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i6$1.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i6$1.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i6$1.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i6$1.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i6$1.DeprecatedTableCompactDirective, selector: "table[fd-table][compact]" }, { kind: "component", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: FromToTimePipe, name: "fromToTime" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CalendarWeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CalendarWeekComponent, selector: "bc-calendar-week", inputs: { weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", calendarFields: "calendarFields", rtl: "rtl", inDialog: "inDialog", deviceSize: "deviceSize", moDataList: "moDataList", days: "days", canDelete: "canDelete", canAdd: "canAdd", canEdit: "canEdit" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", showEvent: "showEvent", daySelect: "daySelect", dayClick: "dayClick" }, viewQueries: [{ propertyName: "tableTopEl", first: true, predicate: ["tableTop"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"table-container\"\r\n    [style.overflow-y]=\"inDialog ? 'scroll' : 'hidden'\"\r\n    style=\"overflow-y: hidden; flex-shrink: 0\"\r\n    #tableTop\r\n>\r\n    <table fd-table class=\"table-top\" [compact]=\"true\" [attr.daysCount]=\"days.length\">\r\n        <tbody fd-table-body>\r\n            <tr fd-table-row class=\"week-days\">\r\n                <td class=\"td-time\"></td>\r\n                <td [attr.rtl]=\"rtl\" class=\"weekday-header\" *ngFor=\"let day of days\" fd-table-cell style=\"width: 100%\">\r\n                    {{ day.dayName }}\r\n                </td>\r\n            </tr>\r\n            <tr fd-table-row class=\"week-numbers\">\r\n                <td class=\"td-time\"></td>\r\n                <td fd-table-cell *ngFor=\"let day of days\" [attr.rtl]=\"rtl\">\r\n                    <bc-day-number-box\r\n                        [day]=\"day\"\r\n                        [isWeekMode]=\"true\"\r\n                        [isSingleDay]=\"days.length === 1\"\r\n                        (dayClick)=\"onDayClick(day)\"\r\n                    ></bc-day-number-box>\r\n                </td>\r\n            </tr>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    renderDayTasks;\r\n                    context: {\r\n                        $implicit: weekTasksArray,\r\n                        maxRowTasks: maxRowTasks,\r\n                        weekIndex: 0\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<ng-template #renderDayTasks let-weekTasks let-maxRowTasks=\"maxRowTasks\" let-weekIndex=\"weekIndex\">\r\n    <ng-container *ngFor=\"let rowTask of weekTasks | keyvalue; let i = index\">\r\n        <tr fd-table-row class=\"task-row\">\r\n            <td fd-table-cell class=\"fd-time\" style=\"border: none\"></td>\r\n            <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n                <td\r\n                    fd-table-cell\r\n                    *ngIf=\"task.colSpan && dayIndex < days.length\"\r\n                    [attr.colspan]=\"task.colSpan > days.length ? days.length : task.colSpan\"\r\n                    class=\"td-button\"\r\n                    [attr.hasevent]=\"!!task.event\"\r\n                >\r\n                    <bc-event-button\r\n                        *ngIf=\"task.event && !task.inDay; else newDaySelect\"\r\n                        [task]=\"task\"\r\n                        [rtl]=\"rtl\"\r\n                        [canDelete]=\"canDelete\"\r\n                        [canEdit]=\"canEdit\"\r\n                        [calendarFields]=\"calendarFields\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        (deleteEvent)=\"deleteEvent.emit($event)\"\r\n                        (editEvent)=\"editEvent.emit($event)\"\r\n                    ></bc-event-button>\r\n                    <ng-template #newDaySelect>\r\n                        <div style=\"width: 100%; height: 100%\" [attr.newDay]=\"true\"></div>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n<div\r\n    class=\"table-container\"\r\n    style=\"overflow-y: hidden; overflow-x: auto; flex-grow: 1\"\r\n    [style.height.px]=\"inDialog ? containerHeight : null\"\r\n    [style.overflow-y]=\"inDialog ? 'scroll' : 'hidden'\"\r\n>\r\n    <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n        <tbody>\r\n            <tr class=\"tr-time\" style=\"height: 0rem\">\r\n                <td class=\"td-time\" style=\"height: 0rem\"></td>\r\n                <td [colspan]=\"days.length\" style=\"position: relative\" style=\"height: 0rem\">\r\n                    <div class=\"tasks-wrapper\">\r\n                        <div *ngFor=\"let hour of hours\" class=\"row-border\"></div>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n            <tr fd-table-row style=\"height: 100%\">\r\n                <td fd-table-cell class=\"td-time\">\r\n                    <div class=\"calc-time\">\r\n                        <div *ngFor=\"let hour of hours\">{{ hour }}</div>\r\n                    </div>\r\n                </td>\r\n                <td *ngFor=\"let day of days\" fd-table-cell (click)=\"onColumnClick($event, day)\">\r\n                    <div style=\"position: relative; width: 100%; height: 100%\">\r\n                        <ng-container *ngFor=\"let task of day.tasks; let index = index\">\r\n                            <bc-event-button\r\n                                (click)=\"onEventButton($event)\"\r\n                                *ngIf=\"task.inDay\"\r\n                                [style.background]=\"task.event[calendarFields.Color]\"\r\n                                [style.top.px]=\"task.top\"\r\n                                [style.right]=\"rtl ? 'calc(' + index * (100 / day.tasks.length) + '%)' : null\"\r\n                                [style.left]=\"rtl ? null : 'calc(' + index * (100 / day.tasks.length) + '%)'\"\r\n                                [style.width]=\"'calc(100% - ' + index * (100 / day.tasks.length) + '%)'\"\r\n                                [style.height.px]=\"task.height\"\r\n                                [style.maxHeight.px]=\"task.height\"\r\n                                [style.opacity]=\"task.opacity\"\r\n                                [style.zIndex]=\"index\"\r\n                                [buttonTemplate]=\"eventButtonTemplate\"\r\n                                class=\"task-day\"\r\n                                [task]=\"task\"\r\n                                [calendarFields]=\"calendarFields\"\r\n                                [deviceSize]=\"deviceSize\"\r\n                                [canDelete]=\"canDelete\"\r\n                                [canEdit]=\"canEdit\"\r\n                                (deleteEvent)=\"deleteEvent.emit($event)\"\r\n                                (editEvent)=\"editEvent.emit($event)\"\r\n                                (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n                            ></bc-event-button>\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<ng-template #eventButtonTemplate let-task let-popover=\"popover\" let-calendarFields=\"calendarFields\">\r\n    <button\r\n        [style.background]=\"task.event[calendarFields.Color]\"\r\n        class=\"task-title\"\r\n        [style.border]=\"'1px solid white'\"\r\n        fd-button\r\n        [compact]=\"true\"\r\n        [fdType]=\"'emphasized'\"\r\n        [fdPopoverTrigger]=\"popover\"\r\n        [label]=\"task.height > 49 ? '' : task.event[calendarFields.Title] + ' ' + (task | fromToTime)\"\r\n    >\r\n        <ng-container *ngIf=\"task.height > 49\">\r\n            <span class=\"ellipsis\">{{ task.event[calendarFields.Title] }}</span>\r\n            <span class=\"ellipsis\">{{ task | fromToTime }}</span>\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;height:95%;width:100%;flex-direction:column;align-items:stretch;justify-content:stretch}table.table-top{border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.table-top{table-layout:fixed}.table-top td{padding-right:1px!important;padding-left:1px!important}.tr-time{height:1px;max-height:1px!important;width:100%}.tr-time td{height:1px!important;max-height:1px!important;padding:0!important}.task-row td{height:1.425rem!important;padding:0!important}.table-content{width:100%;border-spacing:0;position:relative}.table-content .tasks-wrapper{position:absolute;opacity:.3;height:100%;width:calc(100% - 50px)}.table-content .td-time{padding:0!important}.table-content .td-time .calc-time{display:flex;flex-direction:column;height:100%;justify-content:start;align-items:center}.table-content .td-time .calc-time div{height:50px;border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);width:100%;display:flex;justify-content:center}.table-content .td-time tbody{border-spacing:0}.td-time{width:50px!important;max-width:50px!important}.row-border{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:50px}.task-day{position:absolute!important;display:flex;flex-direction:column;align-items:start}.weekday-header td,.week-days td,.week-numbers td{text-align:right}table[dayscount=\"1\"] .week-days td[rtl=true],table[dayscount=\"1\"] .week-numbers td[rtl=true]{text-align:right!important}table[dayscount=\"1\"] .week-days td[rtl=false],table[dayscount=\"1\"] .week-numbers td[rtl=false]{text-align:left!important}table[dayscount=\"1\"] .week-days td,table[dayscount=\"1\"] .week-numbers td{padding-left:1rem!important;padding-right:1rem!important}table[dayscount=\"1\"] .week-days td.weekday-header,table[dayscount=\"1\"] .week-numbers td.weekday-header{padding-left:2rem!important;padding-right:2rem!important}.week-days td{border:none;text-align:center;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}.week-numbers td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}.td-button{border:none!important;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)!important;padding:1px!important}.task-title{display:flex;flex-direction:column;align-items:start!important;font-weight:400;width:100%;max-width:100%;min-width:100%;height:100%;max-height:100%;min-height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i4.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "directive", type: i5$1.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i6$1.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i6$1.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i6$1.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i6$1.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i6$1.DeprecatedTableCompactDirective, selector: "table[fd-table][compact]" }, { kind: "component", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: FromToTimePipe, name: "fromToTime" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CalendarWeekComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bc-calendar-week', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"table-container\"\n    [style.overflow-y]=\"inDialog ? 'scroll' : 'hidden'\"\n    style=\"overflow-y: hidden; flex-shrink: 0\"\n    #tableTop\n>\n    <table fd-table class=\"table-top\" [compact]=\"true\" [attr.daysCount]=\"days.length\">\n        <tbody fd-table-body>\n            <tr fd-table-row class=\"week-days\">\n                <td class=\"td-time\"></td>\n                <td [attr.rtl]=\"rtl\" class=\"weekday-header\" *ngFor=\"let day of days\" fd-table-cell style=\"width: 100%\">\n                    {{ day.dayName }}\n                </td>\n            </tr>\n            <tr fd-table-row class=\"week-numbers\">\n                <td class=\"td-time\"></td>\n                <td fd-table-cell *ngFor=\"let day of days\" [attr.rtl]=\"rtl\">\n                    <bc-day-number-box\n                        [day]=\"day\"\n                        [isWeekMode]=\"true\"\n                        [isSingleDay]=\"days.length === 1\"\n                        (dayClick)=\"onDayClick(day)\"\n                    ></bc-day-number-box>\n                </td>\n            </tr>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    renderDayTasks;\n                    context: {\n                        $implicit: weekTasksArray,\n                        maxRowTasks: maxRowTasks,\n                        weekIndex: 0\n                    }\n                \"\n            ></ng-container>\n        </tbody>\n    </table>\n</div>\n<ng-template #renderDayTasks let-weekTasks let-maxRowTasks=\"maxRowTasks\" let-weekIndex=\"weekIndex\">\n    <ng-container *ngFor=\"let rowTask of weekTasks | keyvalue; let i = index\">\n        <tr fd-table-row class=\"task-row\">\n            <td fd-table-cell class=\"fd-time\" style=\"border: none\"></td>\n            <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n                <td\n                    fd-table-cell\n                    *ngIf=\"task.colSpan && dayIndex < days.length\"\n                    [attr.colspan]=\"task.colSpan > days.length ? days.length : task.colSpan\"\n                    class=\"td-button\"\n                    [attr.hasevent]=\"!!task.event\"\n                >\n                    <bc-event-button\n                        *ngIf=\"task.event && !task.inDay; else newDaySelect\"\n                        [task]=\"task\"\n                        [rtl]=\"rtl\"\n                        [canDelete]=\"canDelete\"\n                        [canEdit]=\"canEdit\"\n                        [calendarFields]=\"calendarFields\"\n                        [deviceSize]=\"deviceSize\"\n                        (deleteEvent)=\"deleteEvent.emit($event)\"\n                        (editEvent)=\"editEvent.emit($event)\"\n                    ></bc-event-button>\n                    <ng-template #newDaySelect>\n                        <div style=\"width: 100%; height: 100%\" [attr.newDay]=\"true\"></div>\n                    </ng-template>\n                </td>\n            </ng-container>\n        </tr>\n    </ng-container>\n</ng-template>\n<div\n    class=\"table-container\"\n    style=\"overflow-y: hidden; overflow-x: auto; flex-grow: 1\"\n    [style.height.px]=\"inDialog ? containerHeight : null\"\n    [style.overflow-y]=\"inDialog ? 'scroll' : 'hidden'\"\n>\n    <table fd-table-body class=\"table-content\" [compact]=\"true\">\n        <tbody>\n            <tr class=\"tr-time\" style=\"height: 0rem\">\n                <td class=\"td-time\" style=\"height: 0rem\"></td>\n                <td [colspan]=\"days.length\" style=\"position: relative\" style=\"height: 0rem\">\n                    <div class=\"tasks-wrapper\">\n                        <div *ngFor=\"let hour of hours\" class=\"row-border\"></div>\n                    </div>\n                </td>\n            </tr>\n            <tr fd-table-row style=\"height: 100%\">\n                <td fd-table-cell class=\"td-time\">\n                    <div class=\"calc-time\">\n                        <div *ngFor=\"let hour of hours\">{{ hour }}</div>\n                    </div>\n                </td>\n                <td *ngFor=\"let day of days\" fd-table-cell (click)=\"onColumnClick($event, day)\">\n                    <div style=\"position: relative; width: 100%; height: 100%\">\n                        <ng-container *ngFor=\"let task of day.tasks; let index = index\">\n                            <bc-event-button\n                                (click)=\"onEventButton($event)\"\n                                *ngIf=\"task.inDay\"\n                                [style.background]=\"task.event[calendarFields.Color]\"\n                                [style.top.px]=\"task.top\"\n                                [style.right]=\"rtl ? 'calc(' + index * (100 / day.tasks.length) + '%)' : null\"\n                                [style.left]=\"rtl ? null : 'calc(' + index * (100 / day.tasks.length) + '%)'\"\n                                [style.width]=\"'calc(100% - ' + index * (100 / day.tasks.length) + '%)'\"\n                                [style.height.px]=\"task.height\"\n                                [style.maxHeight.px]=\"task.height\"\n                                [style.opacity]=\"task.opacity\"\n                                [style.zIndex]=\"index\"\n                                [buttonTemplate]=\"eventButtonTemplate\"\n                                class=\"task-day\"\n                                [task]=\"task\"\n                                [calendarFields]=\"calendarFields\"\n                                [deviceSize]=\"deviceSize\"\n                                [canDelete]=\"canDelete\"\n                                [canEdit]=\"canEdit\"\n                                (deleteEvent)=\"deleteEvent.emit($event)\"\n                                (editEvent)=\"editEvent.emit($event)\"\n                                (openPopoverChange)=\"onOpenPopoverChange($event)\"\n                            ></bc-event-button>\n                        </ng-container>\n                    </div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n<ng-template #eventButtonTemplate let-task let-popover=\"popover\" let-calendarFields=\"calendarFields\">\n    <button\n        [style.background]=\"task.event[calendarFields.Color]\"\n        class=\"task-title\"\n        [style.border]=\"'1px solid white'\"\n        fd-button\n        [compact]=\"true\"\n        [fdType]=\"'emphasized'\"\n        [fdPopoverTrigger]=\"popover\"\n        [label]=\"task.height > 49 ? '' : task.event[calendarFields.Title] + ' ' + (task | fromToTime)\"\n    >\n        <ng-container *ngIf=\"task.height > 49\">\n            <span class=\"ellipsis\">{{ task.event[calendarFields.Title] }}</span>\n            <span class=\"ellipsis\">{{ task | fromToTime }}</span>\n        </ng-container>\n    </button>\n</ng-template>\n", styles: [":host{display:flex;height:95%;width:100%;flex-direction:column;align-items:stretch;justify-content:stretch}table.table-top{border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.table-top{table-layout:fixed}.table-top td{padding-right:1px!important;padding-left:1px!important}.tr-time{height:1px;max-height:1px!important;width:100%}.tr-time td{height:1px!important;max-height:1px!important;padding:0!important}.task-row td{height:1.425rem!important;padding:0!important}.table-content{width:100%;border-spacing:0;position:relative}.table-content .tasks-wrapper{position:absolute;opacity:.3;height:100%;width:calc(100% - 50px)}.table-content .td-time{padding:0!important}.table-content .td-time .calc-time{display:flex;flex-direction:column;height:100%;justify-content:start;align-items:center}.table-content .td-time .calc-time div{height:50px;border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);width:100%;display:flex;justify-content:center}.table-content .td-time tbody{border-spacing:0}.td-time{width:50px!important;max-width:50px!important}.row-border{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:50px}.task-day{position:absolute!important;display:flex;flex-direction:column;align-items:start}.weekday-header td,.week-days td,.week-numbers td{text-align:right}table[dayscount=\"1\"] .week-days td[rtl=true],table[dayscount=\"1\"] .week-numbers td[rtl=true]{text-align:right!important}table[dayscount=\"1\"] .week-days td[rtl=false],table[dayscount=\"1\"] .week-numbers td[rtl=false]{text-align:left!important}table[dayscount=\"1\"] .week-days td,table[dayscount=\"1\"] .week-numbers td{padding-left:1rem!important;padding-right:1rem!important}table[dayscount=\"1\"] .week-days td.weekday-header,table[dayscount=\"1\"] .week-numbers td.weekday-header{padding-left:2rem!important;padding-right:2rem!important}.week-days td{border:none;text-align:center;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}.week-numbers td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}.td-button{border:none!important;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)!important;padding:1px!important}.task-title{display:flex;flex-direction:column;align-items:start!important;font-weight:400;width:100%;max-width:100%;min-width:100%;height:100%;max-height:100%;min-height:100%}\n"] }]
+            args: [{ selector: 'bc-calendar-week', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"table-container\"\r\n    [style.overflow-y]=\"inDialog ? 'scroll' : 'hidden'\"\r\n    style=\"overflow-y: hidden; flex-shrink: 0\"\r\n    #tableTop\r\n>\r\n    <table fd-table class=\"table-top\" [compact]=\"true\" [attr.daysCount]=\"days.length\">\r\n        <tbody fd-table-body>\r\n            <tr fd-table-row class=\"week-days\">\r\n                <td class=\"td-time\"></td>\r\n                <td [attr.rtl]=\"rtl\" class=\"weekday-header\" *ngFor=\"let day of days\" fd-table-cell style=\"width: 100%\">\r\n                    {{ day.dayName }}\r\n                </td>\r\n            </tr>\r\n            <tr fd-table-row class=\"week-numbers\">\r\n                <td class=\"td-time\"></td>\r\n                <td fd-table-cell *ngFor=\"let day of days\" [attr.rtl]=\"rtl\">\r\n                    <bc-day-number-box\r\n                        [day]=\"day\"\r\n                        [isWeekMode]=\"true\"\r\n                        [isSingleDay]=\"days.length === 1\"\r\n                        (dayClick)=\"onDayClick(day)\"\r\n                    ></bc-day-number-box>\r\n                </td>\r\n            </tr>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    renderDayTasks;\r\n                    context: {\r\n                        $implicit: weekTasksArray,\r\n                        maxRowTasks: maxRowTasks,\r\n                        weekIndex: 0\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<ng-template #renderDayTasks let-weekTasks let-maxRowTasks=\"maxRowTasks\" let-weekIndex=\"weekIndex\">\r\n    <ng-container *ngFor=\"let rowTask of weekTasks | keyvalue; let i = index\">\r\n        <tr fd-table-row class=\"task-row\">\r\n            <td fd-table-cell class=\"fd-time\" style=\"border: none\"></td>\r\n            <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n                <td\r\n                    fd-table-cell\r\n                    *ngIf=\"task.colSpan && dayIndex < days.length\"\r\n                    [attr.colspan]=\"task.colSpan > days.length ? days.length : task.colSpan\"\r\n                    class=\"td-button\"\r\n                    [attr.hasevent]=\"!!task.event\"\r\n                >\r\n                    <bc-event-button\r\n                        *ngIf=\"task.event && !task.inDay; else newDaySelect\"\r\n                        [task]=\"task\"\r\n                        [rtl]=\"rtl\"\r\n                        [canDelete]=\"canDelete\"\r\n                        [canEdit]=\"canEdit\"\r\n                        [calendarFields]=\"calendarFields\"\r\n                        [deviceSize]=\"deviceSize\"\r\n                        (deleteEvent)=\"deleteEvent.emit($event)\"\r\n                        (editEvent)=\"editEvent.emit($event)\"\r\n                    ></bc-event-button>\r\n                    <ng-template #newDaySelect>\r\n                        <div style=\"width: 100%; height: 100%\" [attr.newDay]=\"true\"></div>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n<div\r\n    class=\"table-container\"\r\n    style=\"overflow-y: hidden; overflow-x: auto; flex-grow: 1\"\r\n    [style.height.px]=\"inDialog ? containerHeight : null\"\r\n    [style.overflow-y]=\"inDialog ? 'scroll' : 'hidden'\"\r\n>\r\n    <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n        <tbody>\r\n            <tr class=\"tr-time\" style=\"height: 0rem\">\r\n                <td class=\"td-time\" style=\"height: 0rem\"></td>\r\n                <td [colspan]=\"days.length\" style=\"position: relative\" style=\"height: 0rem\">\r\n                    <div class=\"tasks-wrapper\">\r\n                        <div *ngFor=\"let hour of hours\" class=\"row-border\"></div>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n            <tr fd-table-row style=\"height: 100%\">\r\n                <td fd-table-cell class=\"td-time\">\r\n                    <div class=\"calc-time\">\r\n                        <div *ngFor=\"let hour of hours\">{{ hour }}</div>\r\n                    </div>\r\n                </td>\r\n                <td *ngFor=\"let day of days\" fd-table-cell (click)=\"onColumnClick($event, day)\">\r\n                    <div style=\"position: relative; width: 100%; height: 100%\">\r\n                        <ng-container *ngFor=\"let task of day.tasks; let index = index\">\r\n                            <bc-event-button\r\n                                (click)=\"onEventButton($event)\"\r\n                                *ngIf=\"task.inDay\"\r\n                                [style.background]=\"task.event[calendarFields.Color]\"\r\n                                [style.top.px]=\"task.top\"\r\n                                [style.right]=\"rtl ? 'calc(' + index * (100 / day.tasks.length) + '%)' : null\"\r\n                                [style.left]=\"rtl ? null : 'calc(' + index * (100 / day.tasks.length) + '%)'\"\r\n                                [style.width]=\"'calc(100% - ' + index * (100 / day.tasks.length) + '%)'\"\r\n                                [style.height.px]=\"task.height\"\r\n                                [style.maxHeight.px]=\"task.height\"\r\n                                [style.opacity]=\"task.opacity\"\r\n                                [style.zIndex]=\"index\"\r\n                                [buttonTemplate]=\"eventButtonTemplate\"\r\n                                class=\"task-day\"\r\n                                [task]=\"task\"\r\n                                [calendarFields]=\"calendarFields\"\r\n                                [deviceSize]=\"deviceSize\"\r\n                                [canDelete]=\"canDelete\"\r\n                                [canEdit]=\"canEdit\"\r\n                                (deleteEvent)=\"deleteEvent.emit($event)\"\r\n                                (editEvent)=\"editEvent.emit($event)\"\r\n                                (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n                            ></bc-event-button>\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<ng-template #eventButtonTemplate let-task let-popover=\"popover\" let-calendarFields=\"calendarFields\">\r\n    <button\r\n        [style.background]=\"task.event[calendarFields.Color]\"\r\n        class=\"task-title\"\r\n        [style.border]=\"'1px solid white'\"\r\n        fd-button\r\n        [compact]=\"true\"\r\n        [fdType]=\"'emphasized'\"\r\n        [fdPopoverTrigger]=\"popover\"\r\n        [label]=\"task.height > 49 ? '' : task.event[calendarFields.Title] + ' ' + (task | fromToTime)\"\r\n    >\r\n        <ng-container *ngIf=\"task.height > 49\">\r\n            <span class=\"ellipsis\">{{ task.event[calendarFields.Title] }}</span>\r\n            <span class=\"ellipsis\">{{ task | fromToTime }}</span>\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;height:95%;width:100%;flex-direction:column;align-items:stretch;justify-content:stretch}table.table-top{border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.table-top{table-layout:fixed}.table-top td{padding-right:1px!important;padding-left:1px!important}.tr-time{height:1px;max-height:1px!important;width:100%}.tr-time td{height:1px!important;max-height:1px!important;padding:0!important}.task-row td{height:1.425rem!important;padding:0!important}.table-content{width:100%;border-spacing:0;position:relative}.table-content .tasks-wrapper{position:absolute;opacity:.3;height:100%;width:calc(100% - 50px)}.table-content .td-time{padding:0!important}.table-content .td-time .calc-time{display:flex;flex-direction:column;height:100%;justify-content:start;align-items:center}.table-content .td-time .calc-time div{height:50px;border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);width:100%;display:flex;justify-content:center}.table-content .td-time tbody{border-spacing:0}.td-time{width:50px!important;max-width:50px!important}.row-border{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);border-top:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:50px}.task-day{position:absolute!important;display:flex;flex-direction:column;align-items:start}.weekday-header td,.week-days td,.week-numbers td{text-align:right}table[dayscount=\"1\"] .week-days td[rtl=true],table[dayscount=\"1\"] .week-numbers td[rtl=true]{text-align:right!important}table[dayscount=\"1\"] .week-days td[rtl=false],table[dayscount=\"1\"] .week-numbers td[rtl=false]{text-align:left!important}table[dayscount=\"1\"] .week-days td,table[dayscount=\"1\"] .week-numbers td{padding-left:1rem!important;padding-right:1rem!important}table[dayscount=\"1\"] .week-days td.weekday-header,table[dayscount=\"1\"] .week-numbers td.weekday-header{padding-left:2rem!important;padding-right:2rem!important}.week-days td{border:none;text-align:center;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}.week-numbers td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)}.td-button{border:none!important;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5)!important;padding:1px!important}.task-title{display:flex;flex-direction:column;align-items:start!important;font-weight:400;width:100%;max-width:100%;min-width:100%;height:100%;max-height:100%;min-height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CalendarService }]; }, propDecorators: { tableTopEl: [{
                 type: ViewChild,
                 args: ['tableTop']
@@ -2329,7 +2329,7 @@ class CalendarContainerComponent extends ReportViewBaseComponent {
                     lastDayInfo = daysTemp[daysTemp.length - 1];
                     monthName = firstDayInfo.monthName;
                     if (firstDayInfo.month !== lastDayInfo.month) {
-                        monthName = `${firstDayInfo.monthName} -
+                        monthName = `${firstDayInfo.monthName} -
               ${lastDayInfo.monthName}`;
                     }
                 }
@@ -2349,7 +2349,7 @@ CalendarContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             useFactory: getDateService,
             deps: [LogService]
         }
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<bc-calendar-header\n    [monthInfo]=\"(selectedMonth$ | async)!!\"\n    [weekModeDays]=\"(weekModeDays$ | async)!!\"\n    [rtl]=\"rtl\"\n    [mode]=\"(mode$ | async)!!\"\n    [modeTitle]=\"(modeTitle$ | async)!!\"\n    [title]=\"(title$ | async)!!\"\n    (modeChange)=\"onModeChange($event)\"\n    (prevTap)=\"onPrevTap()\"\n    (nextTap)=\"onNextTap()\"\n    (today)=\"onToday()\"\n    (rangeChange)=\"onRangeChange($event)\"\n>\n</bc-calendar-header>\n\n<ng-container [ngSwitch]=\"mode$ | async\">\n    <ng-container *ngSwitchCase=\"'week'\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                weekCalendar;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    weekModeDays: weekModeDays$ | async,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'day'\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                weekCalendar;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    weekModeDays: weekModeDays$ | async,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\"></ng-container>\n    <ng-container *ngSwitchDefault>\n        <ng-container\n            *ngTemplateOutlet=\"\n                monthCalendar;\n                context: {\n                    $implicit: days$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    monthWeeksCount: monthWeeksCount$ | async,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template\n    #monthCalendar\n    let-days\n    let-moDataList=\"moDataList\"\n    let-width=\"width\"\n    let-height=\"height\"\n    let-calendarFields=\"calendarFields\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-monthWeeksCount=\"monthWeeksCount\"\n    let-access=\"access\"\n>\n    <bc-calendar-month\n        [style.width]=\"width\"\n        [containerHeight]=\"parentHeight !== 0 ? parentHeight : height\"\n        [containerWidth]=\"width\"\n        [calendarFields]=\"calendarFields\"\n        [moDataList]=\"moDataList\"\n        [monthWeeksCount]=\"monthWeeksCount\"\n        [rtl]=\"rtl\"\n        [weekDays]=\"weekDays\"\n        [weekDaysMin]=\"weekDaysMin\"\n        [today]=\"today\"\n        [showEvents]=\"showEvents\"\n        [days]=\"days\"\n        [canAdd]=\"access.Add\"\n        [canEdit]=\"access.Edit\"\n        [canDelete]=\"access.Delete\"\n        [deviceSize]=\"deviceSize\"\n        (dayClick)=\"onDayClick($event)\"\n        (showEvent)=\"onShowTask()\"\n        (deleteEvent)=\"deleteTask.emit($event)\"\n        (editEvent)=\"editTask.emit($event)\"\n        (daySelect)=\"daySelect.emit($event)\"\n    ></bc-calendar-month>\n</ng-template>\n\n<ng-template #listCalendar>\n    <bc-calendar-list-container\n        [showEvents]=\"showEvents\"\n        [selectedDay]=\"selectedDay\"\n        [calendarFields]=\"calendarFields\"\n        (showEventsTap)=\"showEvents = !showEvents\"\n    ></bc-calendar-list-container>\n</ng-template>\n\n<ng-template\n    #weekCalendar\n    let-selectedMonth\n    let-moDataList=\"moDataList\"\n    let-width=\"width\"\n    let-height=\"height\"\n    let-calendarFields=\"calendarFields\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-weekModeDays=\"weekModeDays\"\n    let-access=\"access\"\n>\n    <bc-calendar-week\n        [style.width]=\"width\"\n        [containerHeight]=\"parentHeight !== 0 ? parentHeight : height\"\n        [containerWidth]=\"width\"\n        [inDialog]=\"inDialog\"\n        [calendarFields]=\"calendarFields\"\n        [moDataList]=\"moDataList\"\n        [rtl]=\"rtl\"\n        [canAdd]=\"access.Add\"\n        [canEdit]=\"access.Edit\"\n        [canDelete]=\"access.Delete\"\n        [weekDays]=\"weekDays\"\n        [weekDaysMin]=\"weekDaysMin\"\n        [today]=\"today\"\n        [showEvents]=\"showEvents\"\n        [days]=\"weekModeDays\"\n        [deviceSize]=\"deviceSize\"\n        (dayClick)=\"onDayClick($event)\"\n        (showEvent)=\"onShowTask()\"\n        (deleteEvent)=\"deleteTask.emit($event)\"\n        (editEvent)=\"editTask.emit($event)\"\n        (daySelect)=\"daySelect.emit($event)\"\n    ></bc-calendar-week>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CalendarListContainerComponent, selector: "bc-calendar-list-container", inputs: ["view", "reportItemComponentName", "showEvents", "selectedDay", "calendarFields"], outputs: ["showEventsTap"] }, { kind: "component", type: CalendarWeekComponent, selector: "bc-calendar-week", inputs: ["weekDays", "weekDaysMin", "today", "containerHeight", "calendarFields", "rtl", "inDialog", "deviceSize", "moDataList", "days", "canDelete", "canAdd", "canEdit"], outputs: ["editEvent", "deleteEvent", "showEvent", "daySelect", "dayClick"] }, { kind: "component", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: ["monthWeeksCount", "weekDays", "weekDaysMin", "today", "containerHeight", "days", "calendarFields", "rtl", "deviceSize", "moDataList", "datePicker", "rangePicker", "canDelete", "canAdd", "canEdit", "selectedDate", "startSelectedDayIndex", "endSelectedDayIndex"], outputs: ["editEvent", "deleteEvent", "daySelect", "dayClick", "dayMouseMove", "dayMouseUp", "dayMouseDown", "showEvent"] }, { kind: "component", type: CalendarHeaderComponent, selector: "bc-calendar-header", inputs: ["monthInfo", "weekModeDays", "hideMode", "modeTitle", "title", "rtl", "mode"], outputs: ["prevTap", "nextTap", "modeChange", "rangeChange", "today"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "333<bc-calendar-header\n    [monthInfo]=\"(selectedMonth$ | async)!!\"\n    [weekModeDays]=\"(weekModeDays$ | async)!!\"\n    [rtl]=\"rtl\"\n    [mode]=\"(mode$ | async)!!\"\n    [modeTitle]=\"(modeTitle$ | async)!!\"\n    [title]=\"(title$ | async)!!\"\n    (modeChange)=\"onModeChange($event)\"\n    (prevTap)=\"onPrevTap()\"\n    (nextTap)=\"onNextTap()\"\n    (today)=\"onToday()\"\n    (rangeChange)=\"onRangeChange($event)\"\n>\n</bc-calendar-header>\n\n<ng-container [ngSwitch]=\"mode$ | async\">\n    <ng-container *ngSwitchCase=\"'week'\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                weekCalendar;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    weekModeDays: weekModeDays$ | async,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'day'\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                weekCalendar;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    weekModeDays: weekModeDays$ | async,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\"></ng-container>\n    <ng-container *ngSwitchDefault>\n        <ng-container\n            *ngTemplateOutlet=\"\n                monthCalendar;\n                context: {\n                    $implicit: days$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    monthWeeksCount: monthWeeksCount$ | async,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template\n    #monthCalendar\n    let-days\n    let-moDataList=\"moDataList\"\n    let-width=\"width\"\n    let-height=\"height\"\n    let-calendarFields=\"calendarFields\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-monthWeeksCount=\"monthWeeksCount\"\n    let-access=\"access\"\n>\n    <bc-calendar-month\n        [style.width]=\"width\"\n        [containerHeight]=\"parentHeight !== 0 ? parentHeight : height\"\n        [containerWidth]=\"width\"\n        [calendarFields]=\"calendarFields\"\n        [moDataList]=\"moDataList\"\n        [monthWeeksCount]=\"monthWeeksCount\"\n        [rtl]=\"rtl\"\n        [weekDays]=\"weekDays\"\n        [weekDaysMin]=\"weekDaysMin\"\n        [today]=\"today\"\n        [showEvents]=\"showEvents\"\n        [days]=\"days\"\n        [canAdd]=\"access.Add\"\n        [canEdit]=\"access.Edit\"\n        [canDelete]=\"access.Delete\"\n        [deviceSize]=\"deviceSize\"\n        (dayClick)=\"onDayClick($event)\"\n        (showEvent)=\"onShowTask()\"\n        (deleteEvent)=\"deleteTask.emit($event)\"\n        (editEvent)=\"editTask.emit($event)\"\n        (daySelect)=\"daySelect.emit($event)\"\n    ></bc-calendar-month>\n</ng-template>\n\n<ng-template #listCalendar>\n    <bc-calendar-list-container\n        [showEvents]=\"showEvents\"\n        [selectedDay]=\"selectedDay\"\n        [calendarFields]=\"calendarFields\"\n        (showEventsTap)=\"showEvents = !showEvents\"\n    ></bc-calendar-list-container>\n</ng-template>\n\n<ng-template\n    #weekCalendar\n    let-selectedMonth\n    let-moDataList=\"moDataList\"\n    let-width=\"width\"\n    let-height=\"height\"\n    let-calendarFields=\"calendarFields\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-weekModeDays=\"weekModeDays\"\n    let-access=\"access\"\n>\n    <bc-calendar-week\n        [style.width]=\"width\"\n        [containerHeight]=\"parentHeight !== 0 ? parentHeight : height\"\n        [containerWidth]=\"width\"\n        [inDialog]=\"inDialog\"\n        [calendarFields]=\"calendarFields\"\n        [moDataList]=\"moDataList\"\n        [rtl]=\"rtl\"\n        [canAdd]=\"access.Add\"\n        [canEdit]=\"access.Edit\"\n        [canDelete]=\"access.Delete\"\n        [weekDays]=\"weekDays\"\n        [weekDaysMin]=\"weekDaysMin\"\n        [today]=\"today\"\n        [showEvents]=\"showEvents\"\n        [days]=\"weekModeDays\"\n        [deviceSize]=\"deviceSize\"\n        (dayClick)=\"onDayClick($event)\"\n        (showEvent)=\"onShowTask()\"\n        (deleteEvent)=\"deleteTask.emit($event)\"\n        (editEvent)=\"editTask.emit($event)\"\n        (daySelect)=\"daySelect.emit($event)\"\n    ></bc-calendar-week>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CalendarListContainerComponent, selector: "bc-calendar-list-container", inputs: ["view", "reportItemComponentName", "showEvents", "selectedDay", "calendarFields"], outputs: ["showEventsTap"] }, { kind: "component", type: CalendarWeekComponent, selector: "bc-calendar-week", inputs: ["weekDays", "weekDaysMin", "today", "containerHeight", "calendarFields", "rtl", "inDialog", "deviceSize", "moDataList", "days", "canDelete", "canAdd", "canEdit"], outputs: ["editEvent", "deleteEvent", "showEvent", "daySelect", "dayClick"] }, { kind: "component", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: ["monthWeeksCount", "weekDays", "weekDaysMin", "today", "containerHeight", "days", "calendarFields", "rtl", "deviceSize", "moDataList", "datePicker", "rangePicker", "canDelete", "canAdd", "canEdit", "selectedDate", "startSelectedDayIndex", "endSelectedDayIndex"], outputs: ["editEvent", "deleteEvent", "daySelect", "dayClick", "dayMouseMove", "dayMouseUp", "dayMouseDown", "showEvent"] }, { kind: "component", type: CalendarHeaderComponent, selector: "bc-calendar-header", inputs: ["monthInfo", "weekModeDays", "hideMode", "modeTitle", "title", "rtl", "mode"], outputs: ["prevTap", "nextTap", "modeChange", "rangeChange", "today"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CalendarContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bc-calendar-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -2358,7 +2358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                             useFactory: getDateService,
                             deps: [LogService]
                         }
-                    ], template: "<bc-calendar-header\n    [monthInfo]=\"(selectedMonth$ | async)!!\"\n    [weekModeDays]=\"(weekModeDays$ | async)!!\"\n    [rtl]=\"rtl\"\n    [mode]=\"(mode$ | async)!!\"\n    [modeTitle]=\"(modeTitle$ | async)!!\"\n    [title]=\"(title$ | async)!!\"\n    (modeChange)=\"onModeChange($event)\"\n    (prevTap)=\"onPrevTap()\"\n    (nextTap)=\"onNextTap()\"\n    (today)=\"onToday()\"\n    (rangeChange)=\"onRangeChange($event)\"\n>\n</bc-calendar-header>\n\n<ng-container [ngSwitch]=\"mode$ | async\">\n    <ng-container *ngSwitchCase=\"'week'\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                weekCalendar;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    weekModeDays: weekModeDays$ | async,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'day'\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                weekCalendar;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    weekModeDays: weekModeDays$ | async,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\"></ng-container>\n    <ng-container *ngSwitchDefault>\n        <ng-container\n            *ngTemplateOutlet=\"\n                monthCalendar;\n                context: {\n                    $implicit: days$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    monthWeeksCount: monthWeeksCount$ | async,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template\n    #monthCalendar\n    let-days\n    let-moDataList=\"moDataList\"\n    let-width=\"width\"\n    let-height=\"height\"\n    let-calendarFields=\"calendarFields\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-monthWeeksCount=\"monthWeeksCount\"\n    let-access=\"access\"\n>\n    <bc-calendar-month\n        [style.width]=\"width\"\n        [containerHeight]=\"parentHeight !== 0 ? parentHeight : height\"\n        [containerWidth]=\"width\"\n        [calendarFields]=\"calendarFields\"\n        [moDataList]=\"moDataList\"\n        [monthWeeksCount]=\"monthWeeksCount\"\n        [rtl]=\"rtl\"\n        [weekDays]=\"weekDays\"\n        [weekDaysMin]=\"weekDaysMin\"\n        [today]=\"today\"\n        [showEvents]=\"showEvents\"\n        [days]=\"days\"\n        [canAdd]=\"access.Add\"\n        [canEdit]=\"access.Edit\"\n        [canDelete]=\"access.Delete\"\n        [deviceSize]=\"deviceSize\"\n        (dayClick)=\"onDayClick($event)\"\n        (showEvent)=\"onShowTask()\"\n        (deleteEvent)=\"deleteTask.emit($event)\"\n        (editEvent)=\"editTask.emit($event)\"\n        (daySelect)=\"daySelect.emit($event)\"\n    ></bc-calendar-month>\n</ng-template>\n\n<ng-template #listCalendar>\n    <bc-calendar-list-container\n        [showEvents]=\"showEvents\"\n        [selectedDay]=\"selectedDay\"\n        [calendarFields]=\"calendarFields\"\n        (showEventsTap)=\"showEvents = !showEvents\"\n    ></bc-calendar-list-container>\n</ng-template>\n\n<ng-template\n    #weekCalendar\n    let-selectedMonth\n    let-moDataList=\"moDataList\"\n    let-width=\"width\"\n    let-height=\"height\"\n    let-calendarFields=\"calendarFields\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-weekModeDays=\"weekModeDays\"\n    let-access=\"access\"\n>\n    <bc-calendar-week\n        [style.width]=\"width\"\n        [containerHeight]=\"parentHeight !== 0 ? parentHeight : height\"\n        [containerWidth]=\"width\"\n        [inDialog]=\"inDialog\"\n        [calendarFields]=\"calendarFields\"\n        [moDataList]=\"moDataList\"\n        [rtl]=\"rtl\"\n        [canAdd]=\"access.Add\"\n        [canEdit]=\"access.Edit\"\n        [canDelete]=\"access.Delete\"\n        [weekDays]=\"weekDays\"\n        [weekDaysMin]=\"weekDaysMin\"\n        [today]=\"today\"\n        [showEvents]=\"showEvents\"\n        [days]=\"weekModeDays\"\n        [deviceSize]=\"deviceSize\"\n        (dayClick)=\"onDayClick($event)\"\n        (showEvent)=\"onShowTask()\"\n        (deleteEvent)=\"deleteTask.emit($event)\"\n        (editEvent)=\"editTask.emit($event)\"\n        (daySelect)=\"daySelect.emit($event)\"\n    ></bc-calendar-week>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+                    ], template: "333<bc-calendar-header\n    [monthInfo]=\"(selectedMonth$ | async)!!\"\n    [weekModeDays]=\"(weekModeDays$ | async)!!\"\n    [rtl]=\"rtl\"\n    [mode]=\"(mode$ | async)!!\"\n    [modeTitle]=\"(modeTitle$ | async)!!\"\n    [title]=\"(title$ | async)!!\"\n    (modeChange)=\"onModeChange($event)\"\n    (prevTap)=\"onPrevTap()\"\n    (nextTap)=\"onNextTap()\"\n    (today)=\"onToday()\"\n    (rangeChange)=\"onRangeChange($event)\"\n>\n</bc-calendar-header>\n\n<ng-container [ngSwitch]=\"mode$ | async\">\n    <ng-container *ngSwitchCase=\"'week'\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                weekCalendar;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    weekModeDays: weekModeDays$ | async,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'day'\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                weekCalendar;\n                context: {\n                    $implicit: selectedMonth$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    weekModeDays: weekModeDays$ | async,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\"></ng-container>\n    <ng-container *ngSwitchDefault>\n        <ng-container\n            *ngTemplateOutlet=\"\n                monthCalendar;\n                context: {\n                    $implicit: days$ | async,\n                    moDataList: eventMoDataList$ | async,\n                    width: width,\n                    height: height,\n                    rtl: rtl,\n                    showEvents: showEvents,\n                    today: today,\n                    deviceSize: deviceSize,\n                    calendarFields: calendarFields,\n                    monthWeeksCount: monthWeeksCount$ | async,\n                    access: access\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template\n    #monthCalendar\n    let-days\n    let-moDataList=\"moDataList\"\n    let-width=\"width\"\n    let-height=\"height\"\n    let-calendarFields=\"calendarFields\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-monthWeeksCount=\"monthWeeksCount\"\n    let-access=\"access\"\n>\n    <bc-calendar-month\n        [style.width]=\"width\"\n        [containerHeight]=\"parentHeight !== 0 ? parentHeight : height\"\n        [containerWidth]=\"width\"\n        [calendarFields]=\"calendarFields\"\n        [moDataList]=\"moDataList\"\n        [monthWeeksCount]=\"monthWeeksCount\"\n        [rtl]=\"rtl\"\n        [weekDays]=\"weekDays\"\n        [weekDaysMin]=\"weekDaysMin\"\n        [today]=\"today\"\n        [showEvents]=\"showEvents\"\n        [days]=\"days\"\n        [canAdd]=\"access.Add\"\n        [canEdit]=\"access.Edit\"\n        [canDelete]=\"access.Delete\"\n        [deviceSize]=\"deviceSize\"\n        (dayClick)=\"onDayClick($event)\"\n        (showEvent)=\"onShowTask()\"\n        (deleteEvent)=\"deleteTask.emit($event)\"\n        (editEvent)=\"editTask.emit($event)\"\n        (daySelect)=\"daySelect.emit($event)\"\n    ></bc-calendar-month>\n</ng-template>\n\n<ng-template #listCalendar>\n    <bc-calendar-list-container\n        [showEvents]=\"showEvents\"\n        [selectedDay]=\"selectedDay\"\n        [calendarFields]=\"calendarFields\"\n        (showEventsTap)=\"showEvents = !showEvents\"\n    ></bc-calendar-list-container>\n</ng-template>\n\n<ng-template\n    #weekCalendar\n    let-selectedMonth\n    let-moDataList=\"moDataList\"\n    let-width=\"width\"\n    let-height=\"height\"\n    let-calendarFields=\"calendarFields\"\n    let-rtl=\"rtl\"\n    let-today=\"today\"\n    let-showEvents=\"showEvents\"\n    let-deviceSize=\"deviceSize\"\n    let-weekModeDays=\"weekModeDays\"\n    let-access=\"access\"\n>\n    <bc-calendar-week\n        [style.width]=\"width\"\n        [containerHeight]=\"parentHeight !== 0 ? parentHeight : height\"\n        [containerWidth]=\"width\"\n        [inDialog]=\"inDialog\"\n        [calendarFields]=\"calendarFields\"\n        [moDataList]=\"moDataList\"\n        [rtl]=\"rtl\"\n        [canAdd]=\"access.Add\"\n        [canEdit]=\"access.Edit\"\n        [canDelete]=\"access.Delete\"\n        [weekDays]=\"weekDays\"\n        [weekDaysMin]=\"weekDaysMin\"\n        [today]=\"today\"\n        [showEvents]=\"showEvents\"\n        [days]=\"weekModeDays\"\n        [deviceSize]=\"deviceSize\"\n        (dayClick)=\"onDayClick($event)\"\n        (showEvent)=\"onShowTask()\"\n        (deleteEvent)=\"deleteTask.emit($event)\"\n        (editEvent)=\"editTask.emit($event)\"\n        (daySelect)=\"daySelect.emit($event)\"\n    ></bc-calendar-week>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i3.TitleCasePipe }, { type: i2.BbbTranslatePipe }, { type: CalendarService }, { type: i2.DateService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i2.FindColumnByDbNamePipe }, { type: i2.UlvMainService }, { type: i2.PortalService }]; }, propDecorators: { calendarFields: [{
                 type: Input
             }], deleteTask: [{