@progress/kendo-angular-scheduler 16.10.0-develop.1 → 16.10.0-develop.2

package/fesm2015/progress-kendo-angular-scheduler.mjs

@@ -42,8 +42,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1726668446,
-    version: '16.10.0-develop.1',
+    publishDate: 1726673961,
+    version: '16.10.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -919,6 +919,10 @@ class ViewStateService {
          * @hidden
          */
         this.toggleWorkHours = new Subject();
+        /**
+         * @hidden
+         */
+        this.toolbarVisibilityByView = new Map();
         this.dateRangeSource = new BehaviorSubject(emptyDateRange());
         this.nextDateSource = new Subject();
         this.navigateSource = new Subject();
@@ -968,8 +972,8 @@ class ViewStateService {
     /**
      * Notifies the Scheduler that the view options have been changed.
      */
-    notifyOptionsChange() {
-        this.optionsChangeSource.next(null);
+    notifyOptionsChange(changes) {
+        this.optionsChangeSource.next(changes);
     }
     /**
      * Emits a DOM event to the Scheduler.
@@ -1446,6 +1450,7 @@ class FocusService {
         this.items = new Set();
         this.elementMap = new WeakMap();
         this.subs = new Subscription();
+        this.hasContentRendered = false;
         this.subs.add(this.domEvents.focus.subscribe(e => this.onFocusIn(e)));
         this.subs.add(this.domEvents.focusOut.subscribe(() => this.onFocusOut()));
     }
@@ -1466,23 +1471,42 @@ class FocusService {
             item.toggle(true);
         }
         const items = Array.from(this.focusableItems);
-        const newContentIndex = items.map(item => item.containerType).lastIndexOf('content') + 1;
-        if (item.containerType === 'content' && newContentIndex > 0) {
-            items.splice(newContentIndex, 0, item);
-            this.items = new Set(items);
+        if (item.containerType !== 'content') {
+            this.items.add(item);
         }
         else {
-            this.items.add(item);
+            const newContentIndex = items.map(item => item.containerType).lastIndexOf('content') + 1;
+            const hasFooter = items.find(item => item.containerType === 'footer');
+            if (newContentIndex > 0) {
+                // ensure that new events are positioned after the rest of the events for correct navigation sequence
+                items.splice(newContentIndex, 0, item);
+                this.items = new Set(items);
+            }
+            else if (hasFooter) {
+                // ensure that the first event is before the footer
+                items.splice(items.length - 1, 0, item);
+                this.items = new Set(items);
+            }
+            else {
+                this.items.add(item);
+            }
+            // activate the first content element if there is one; otherwise, keep the toolbar or footer active
+            if (!this.hasContentRendered) {
+                this.activeItem.toggle(false);
+                this.activeItem = item;
+                item.toggle(true);
+                this.hasContentRendered = true;
+            }
         }
         this.elementMap.set(item.element.nativeElement, item);
         this.toggleWrapper();
     }
     unregister(item) {
-        this.items.delete(item);
-        this.elementMap.delete(item.element.nativeElement);
         if (item === this.activeItem) {
             this.activateNext();
         }
+        this.items.delete(item);
+        this.elementMap.delete(item.element.nativeElement);
         this.toggleWrapper();
     }
     focus() {
@@ -6536,6 +6560,16 @@ class SchedulerComponent {
          * @default true
          */
         this.highlightOngoingEvents = true;
+        /**
+         * Specifies whether to display the toolbar of the Scheduler.
+         * @default true
+         */
+        this.showToolbar = true;
+        /**
+         * Specifies whether to display the footer of the Scheduler.
+         * @default true
+         */
+        this.showFooter = true;
         /**
          * A callback that executes for each slot of the Scheduler view.
          * If it returns `true`, the `k-selected` CSS class will be added to the cell, making it visibly selected.
@@ -6735,6 +6769,13 @@ class SchedulerComponent {
     get modelFields() {
         return this._modelFields;
     }
+    /**
+     * @hidden
+     */
+    get viewToolbar() {
+        var _a;
+        return (_a = this.viewState) === null || _a === void 0 ? void 0 : _a.toolbarVisibilityByView.get(this.selectedView);
+    }
     ngOnInit() {
         if (!this.selectedDate) {
             this.selectedDate = todayDate();
@@ -6868,7 +6909,8 @@ class SchedulerComponent {
         if (anyChanged([
             'group', 'resources', 'min', 'max', 'showWorkHours', 'startTime', 'scrollTime', 'endTime', 'eventHeight',
             'workDayStart', 'workDayEnd', 'workWeekStart', 'workWeekEnd', 'weekStart', 'slotDuration', 'slotDivisions',
-            'editable', 'timezone', 'slotClass', 'slotFill', 'columnWidth', 'eventClass', 'eventStyles', 'isSlotSelected', 'selectable', 'allDaySlot'
+            'editable', 'timezone', 'slotClass', 'slotFill', 'columnWidth', 'eventClass', 'eventStyles', 'isSlotSelected',
+            'selectable', 'allDaySlot', 'showToolbar', 'showFooter'
         ], changes)) {
             this.notifyOptionsChange(changes);
         }
@@ -7078,6 +7120,12 @@ class SchedulerComponent {
     focus() {
         this.zone.onStable.pipe(take(1)).subscribe(() => this.focusService.focus());
     }
+    /**
+     * @hidden
+     */
+    get toolbarVisibilityState() {
+        return isPresent(this.viewToolbar) ? this.viewToolbar : this.showToolbar;
+    }
     isInRange(date) {
         return (!this.min || this.min <= date) && (!this.max || date <= this.max);
     }
@@ -7118,6 +7166,8 @@ class SchedulerComponent {
             timezone: this.timezone,
             currentTimeMarker: this.currentTimeMarker,
             highlightOngoingEvents: this.highlightOngoingEvents,
+            showToolbar: this.showToolbar,
+            showFooter: this.showFooter,
             slotClass: this.slotClass,
             slotFill: this.slotFill,
             columnWidth: this.columnWidth,
@@ -7249,7 +7299,7 @@ class SchedulerComponent {
     }
 }
 SchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SchedulerComponent, deps: [{ token: i0.ElementRef }, { token: ViewContextService }, { token: ViewStateService }, { token: EditService }, { token: DialogsService }, { token: i1$2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: PDFService }, { token: i1$1.LocalizationService }, { token: DomEventsService }, { token: i0.Renderer2 }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
-SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SchedulerComponent, isStandalone: true, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", allDaySlot: "allDaySlot", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport", schedulerResize: "schedulerResize" }, host: { properties: { "class.k-scheduler": "this.hostClasses", "attr.role": "this.ariaRole", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
+SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SchedulerComponent, isStandalone: true, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", allDaySlot: "allDaySlot", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents", showToolbar: "showToolbar", showFooter: "showFooter", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport", schedulerResize: "schedulerResize" }, host: { properties: { "class.k-scheduler": "this.hostClasses", "attr.role": "this.ariaRole", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
         EditService,
         DialogsService,
         DomEventsService,
@@ -7567,6 +7617,7 @@ SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
         </ng-container>
 
         <kendo-scheduler-toolbar
+            *ngIf="toolbarVisibilityState"
             [dateRange]="dateRangeStream"
             [selectedDate]="selectedDateStream"
             [views]="$any(views)"
@@ -7923,6 +7974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </ng-container>
 
         <kendo-scheduler-toolbar
+            *ngIf="toolbarVisibilityState"
             [dateRange]="dateRangeStream"
             [selectedDate]="selectedDateStream"
             [views]="$any(views)"
@@ -8028,6 +8080,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], highlightOngoingEvents: [{
                 type: Input
+            }], showToolbar: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
             }], slotClass: [{
                 type: Input
             }], eventClass: [{
@@ -8673,6 +8729,16 @@ class ConfigurationViewBase extends SchedulerView {
         });
         this.subs.add(this.viewContext.optionsChange.subscribe(this.optionsChange.bind(this)));
     }
+    /**
+     * Specifies whether to display the toolbar of the Scheduler.
+     */
+    get showToolbar() {
+        return this._showToolbar;
+    }
+    set showToolbar(value) {
+        this._showToolbar = value;
+        this.viewState.toolbarVisibilityByView.set(this, value);
+    }
     /**
      * @hidden
      */
@@ -8703,18 +8769,19 @@ class ConfigurationViewBase extends SchedulerView {
     get viewWeekStart() {
         return this.schedulerOptions.weekStart;
     }
-    ngOnChanges(_changes) {
-        this.viewState.notifyOptionsChange();
+    ngOnChanges(changes) {
+        this.viewState.notifyOptionsChange(changes);
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
+        this.viewState.toolbarVisibilityByView.delete(this);
     }
     optionsChange(options) {
         this.schedulerOptions = options;
     }
 }
 ConfigurationViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfigurationViewBase, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Directive });
-ConfigurationViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ConfigurationViewBase, inputs: { slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", highlightOngoingEvents: "highlightOngoingEvents" }, queries: [{ propertyName: "eventTemplate", first: true, predicate: EventTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: GroupHeaderTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+ConfigurationViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ConfigurationViewBase, inputs: { slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", highlightOngoingEvents: "highlightOngoingEvents", showToolbar: "showToolbar" }, queries: [{ propertyName: "eventTemplate", first: true, predicate: EventTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: GroupHeaderTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfigurationViewBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { slotClass: [{
@@ -8725,6 +8792,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], highlightOngoingEvents: [{
                 type: Input
+            }], showToolbar: [{
+                type: Input
             }], template: [{
                 type: ViewChild,
                 args: ['content', { static: true }]
@@ -10415,6 +10484,7 @@ class BaseView {
         const updateView = this.updateView.bind(this);
         this.resourcesByIndex = this.resourcesByIndex.bind(this);
         this.subs.add(this.viewContext.selectedDate.subscribe(this.onSelectDate.bind(this)));
+        this.subs.add(this.viewState.optionsChange.subscribe(this.onStateOptionsChange.bind(this)));
         this.subs.add(this.viewContext.action.subscribe(this.onAction.bind(this)));
         this.subs.add(this.viewContext.execute.subscribe(this.execute.bind(this)));
         this.subs.add(this.viewContext.resize.subscribe(() => {
@@ -10558,6 +10628,7 @@ class BaseView {
             }
             this.changes.next(null);
         }
+        this.onStateOptionsChange(options);
     }
     toggleElement(visible) {
         if (this.element) {
@@ -11296,9 +11367,14 @@ class BaseView {
             end: this.convertDate(slot.end)
         };
     }
+    onStateOptionsChange(changes) {
+        if ((changes === null || changes === void 0 ? void 0 : changes.showFooter) || (changes === null || changes === void 0 ? void 0 : changes.showToolbar)) {
+            this.zone.onStable.pipe(take(1)).subscribe(() => this.updateView());
+        }
+    }
 }
 BaseView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseView, deps: [{ token: ViewContextService }, { token: ViewStateService }, { token: i1$2.IntlService }, { token: BaseSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Directive });
-BaseView.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseView, inputs: { eventTemplate: "eventTemplate", groupHeaderTemplate: "groupHeaderTemplate", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", eventHeight: "eventHeight", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", weekStart: "weekStart" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentTable", first: true, predicate: ["contentTable"], descendants: true }, { propertyName: "times", first: true, predicate: ["times"], descendants: true }, { propertyName: "timesHeader", first: true, predicate: ["timesHeader"], descendants: true }, { propertyName: "timesTable", first: true, predicate: ["timesTable"], descendants: true }, { propertyName: "headerWrap", first: true, predicate: ["headerWrap"], descendants: true }, { propertyName: "hintContainer", first: true, predicate: ["hintContainer"], descendants: true }], usesOnChanges: true, ngImport: i0 });
+BaseView.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseView, inputs: { eventTemplate: "eventTemplate", groupHeaderTemplate: "groupHeaderTemplate", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", eventHeight: "eventHeight", showToolbar: "showToolbar", showFooter: "showFooter", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", weekStart: "weekStart" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentTable", first: true, predicate: ["contentTable"], descendants: true }, { propertyName: "times", first: true, predicate: ["times"], descendants: true }, { propertyName: "timesHeader", first: true, predicate: ["timesHeader"], descendants: true }, { propertyName: "timesTable", first: true, predicate: ["timesTable"], descendants: true }, { propertyName: "headerWrap", first: true, predicate: ["headerWrap"], descendants: true }, { propertyName: "hintContainer", first: true, predicate: ["hintContainer"], descendants: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseView, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: ViewContextService }, { type: ViewStateService }, { type: i1$2.IntlService }, { type: BaseSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: PDFService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i7.ScrollbarWidthService }]; }, propDecorators: { eventTemplate: [{
@@ -11311,6 +11387,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], eventHeight: [{
                 type: Input
+            }], showToolbar: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
             }], slotClass: [{
                 type: Input
             }], eventClass: [{
@@ -12901,12 +12981,18 @@ class DayTimeViewBase extends ConfigurationViewBase {
     get viewScrollTime() {
         return this.optionValue('scrollTime');
     }
+    /**
+     * @hidden
+     */
+    get viewShowFooter() {
+        return isPresent(this.showFooter) ? this.showFooter : this.schedulerOptions.showFooter;
+    }
     optionValue(name) {
         return isPresent(this[name]) ? this[name] : this.schedulerOptions[name];
     }
 }
 DayTimeViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DayTimeViewBase, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Directive });
-DayTimeViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DayTimeViewBase, inputs: { showWorkHours: "showWorkHours", eventHeight: "eventHeight", startTime: "startTime", scrollTime: "scrollTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents" }, queries: [{ propertyName: "timeSlotTemplate", first: true, predicate: TimeSlotTemplateDirective, descendants: true }, { propertyName: "dateHeaderTemplate", first: true, predicate: DateHeaderTemplateDirective, descendants: true }, { propertyName: "majorTimeHeaderTemplate", first: true, predicate: MajorTimeHeaderTemplateDirective, descendants: true }, { propertyName: "minorTimeHeaderTemplate", first: true, predicate: MinorTimeHeaderTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
+DayTimeViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DayTimeViewBase, inputs: { showWorkHours: "showWorkHours", showFooter: "showFooter", eventHeight: "eventHeight", startTime: "startTime", scrollTime: "scrollTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents" }, queries: [{ propertyName: "timeSlotTemplate", first: true, predicate: TimeSlotTemplateDirective, descendants: true }, { propertyName: "dateHeaderTemplate", first: true, predicate: DateHeaderTemplateDirective, descendants: true }, { propertyName: "majorTimeHeaderTemplate", first: true, predicate: MajorTimeHeaderTemplateDirective, descendants: true }, { propertyName: "minorTimeHeaderTemplate", first: true, predicate: MinorTimeHeaderTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DayTimeViewBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { timeSlotTemplate: [{
@@ -12923,6 +13009,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: [MinorTimeHeaderTemplateDirective, { static: false }]
             }], showWorkHours: [{
                 type: Input
+            }], showFooter: [{
+                type: Input
             }], eventHeight: [{
                 type: Input
             }], startTime: [{
@@ -15318,9 +15406,9 @@ DayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: ["allDaySlot", "name", "slotFill", "allDaySlotTemplate", "allDayEventTemplate"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: ["allDaySlot", "name", "slotFill", "allDaySlotTemplate", "allDayEventTemplate"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DayViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -15363,11 +15451,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [MultiDayViewRendererComponent, ViewFooterComponent, WorkHoursFooterDirective]
+                    imports: [MultiDayViewRendererComponent, ViewFooterComponent, WorkHoursFooterDirective, NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { selectedDateFormat: [{
                 type: Input
@@ -15476,9 +15564,9 @@ MultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: ["allDaySlot", "name", "slotFill", "allDaySlotTemplate", "allDayEventTemplate"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: ["allDaySlot", "name", "slotFill", "allDaySlotTemplate", "allDayEventTemplate"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiDayViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -15523,11 +15611,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [MultiDayViewRendererComponent, ViewFooterComponent, WorkHoursFooterDirective]
+                    imports: [MultiDayViewRendererComponent, ViewFooterComponent, WorkHoursFooterDirective, NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { selectedDateFormat: [{
                 type: Input
@@ -15622,9 +15710,9 @@ WeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: ["allDaySlot", "name", "slotFill", "allDaySlotTemplate", "allDayEventTemplate"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: ["allDaySlot", "name", "slotFill", "allDaySlotTemplate", "allDayEventTemplate"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WeekViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -15670,11 +15758,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [MultiDayViewRendererComponent, ViewFooterComponent, WorkHoursFooterDirective]
+                    imports: [MultiDayViewRendererComponent, ViewFooterComponent, WorkHoursFooterDirective, NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.IntlService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { selectedDateFormat: [{
                 type: Input
@@ -15771,9 +15859,9 @@ WorkWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: ["allDaySlot", "name", "slotFill", "allDaySlotTemplate", "allDayEventTemplate"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: ["allDaySlot", "name", "slotFill", "allDaySlotTemplate", "allDayEventTemplate"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkWeekViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -15820,11 +15908,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [MultiDayViewRendererComponent, ViewFooterComponent, WorkHoursFooterDirective]
+                    imports: [MultiDayViewRendererComponent, ViewFooterComponent, WorkHoursFooterDirective, NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.IntlService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; } });
 
@@ -16535,9 +16623,9 @@ TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </timeline-multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: ["name", "columnWidth", "viewName"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: ["name", "columnWidth", "viewName"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineMonthViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -16581,11 +16669,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </timeline-multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [TimelineMultiDayViewComponent, ViewFooterComponent, WorkHoursFooterDirective]
+                    imports: [TimelineMultiDayViewComponent, ViewFooterComponent, WorkHoursFooterDirective, NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { selectedDateFormat: [{
                 type: Input
@@ -16693,9 +16781,9 @@ TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </timeline-multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: ["name", "columnWidth", "viewName"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: ["name", "columnWidth", "viewName"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -16736,11 +16824,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </timeline-multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [TimelineMultiDayViewComponent, ViewFooterComponent, WorkHoursFooterDirective]
+                    imports: [TimelineMultiDayViewComponent, ViewFooterComponent, WorkHoursFooterDirective, NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { selectedDateFormat: [{
                 type: Input
@@ -16842,9 +16930,9 @@ TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </timeline-multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: ["name", "columnWidth", "viewName"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: ["name", "columnWidth", "viewName"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineWeekViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -16888,11 +16976,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat">
             </timeline-multi-day-view>
-            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [TimelineMultiDayViewComponent, ViewFooterComponent, WorkHoursFooterDirective]
+                    imports: [TimelineMultiDayViewComponent, ViewFooterComponent, WorkHoursFooterDirective, NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.IntlService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { selectedDateFormat: [{
                 type: Input