@progress/kendo-angular-scheduler 21.1.1-develop.2 → 21.2.0-develop.2

package/esm2022/toolbar/toolbar.component.mjs

@@ -10,7 +10,7 @@ import { ToolbarService } from './toolbar.service';
 import { ResizeSensorComponent } from '@progress/kendo-angular-common';
 import { ToolbarViewSelectorComponent } from './view-selector.component';
 import { ToolbarNavigationComponent } from './navigation.component';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./toolbar.service";
 /**
@@ -82,55 +82,55 @@ export class ToolbarComponent {
         this.toolbarWidthChange.emit(this.toolbarWidth);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ToolbarService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolbarComponent, isStandalone: true, selector: "kendo-scheduler-toolbar", inputs: { selectedView: "selectedView", views: "views", dateRange: "dateRange", selectedDate: "selectedDate", template: "template", min: "min", max: "max" }, outputs: { navigate: "navigate", toolbarWidthChange: "toolbarWidthChange" }, host: { properties: { "class.k-scheduler-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-solid": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses", "attr.role": "this.toolbarRole" } }, usesOnChanges: true, ngImport: i0, template: `
-        <ng-template
-            *ngIf="template; else defaultTemplate"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolbarComponent, isStandalone: true, selector: "kendo-scheduler-toolbar", inputs: { selectedView: "selectedView", views: "views", dateRange: "dateRange", selectedDate: "selectedDate", template: "template", min: "min", max: "max" }, outputs: { navigate: "navigate", toolbarWidthChange: "toolbarWidthChange" }, host: { properties: { "class.k-scheduler-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-solid": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses", "attr.role": "this.toolbarRole" } }, usesOnChanges: true, ngImport: i0, template: `
+        @if (template) {
+          <ng-template
             [ngTemplateOutlet]="template.templateRef"
             [ngTemplateOutletContext]="templateContext"
-        >
-        </ng-template>
-
-        <ng-template #defaultTemplate>
-            <div kendoSchedulerToolbarNavigation
-                [min]="min"
-                [max]="max"
-                [activeView]="activeView"
-                [bottomView]="bottomView">
-            </div>
-            <span class="k-spacer"></span>
-            <div kendoSchedulerToolbarViewSelector [toolbarWidth]="toolbarWidth"></div>
-        </ng-template>
-
+            >
+          </ng-template>
+        } @else {
+          <div kendoSchedulerToolbarNavigation
+            [min]="min"
+            [max]="max"
+            [activeView]="activeView"
+            [bottomView]="bottomView">
+          </div>
+          <span class="k-spacer"></span>
+          <div kendoSchedulerToolbarViewSelector [toolbarWidth]="toolbarWidth"></div>
+        }
+        
+        
         <kendo-resize-sensor (resize)="resizeHandler()" [style]="'display: contents;'"></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: ["min", "max", "activeView", "bottomView"] }, { kind: "component", type: ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", inputs: ["toolbarWidth", "responsiveBreakpoint"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: ["min", "max", "activeView", "bottomView"] }, { kind: "component", type: ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", inputs: ["toolbarWidth", "responsiveBreakpoint"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-scheduler-toolbar',
                     template: `
-        <ng-template
-            *ngIf="template; else defaultTemplate"
+        @if (template) {
+          <ng-template
             [ngTemplateOutlet]="template.templateRef"
             [ngTemplateOutletContext]="templateContext"
-        >
-        </ng-template>
-
-        <ng-template #defaultTemplate>
-            <div kendoSchedulerToolbarNavigation
-                [min]="min"
-                [max]="max"
-                [activeView]="activeView"
-                [bottomView]="bottomView">
-            </div>
-            <span class="k-spacer"></span>
-            <div kendoSchedulerToolbarViewSelector [toolbarWidth]="toolbarWidth"></div>
-        </ng-template>
-
+            >
+          </ng-template>
+        } @else {
+          <div kendoSchedulerToolbarNavigation
+            [min]="min"
+            [max]="max"
+            [activeView]="activeView"
+            [bottomView]="bottomView">
+          </div>
+          <span class="k-spacer"></span>
+          <div kendoSchedulerToolbarViewSelector [toolbarWidth]="toolbarWidth"></div>
+        }
+        
+        
         <kendo-resize-sensor (resize)="resizeHandler()" [style]="'display: contents;'"></kendo-resize-sensor>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, ToolbarNavigationComponent, ToolbarViewSelectorComponent, ResizeSensorComponent]
+                    imports: [NgTemplateOutlet, ToolbarNavigationComponent, ToolbarViewSelectorComponent, ResizeSensorComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.ToolbarService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { hostClasses: [{
                 type: HostBinding,

package/esm2022/toolbar/view-selector.component.mjs

@@ -7,7 +7,6 @@ import { ToolbarService } from './toolbar.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { FocusableDirective } from '../navigation/focusable.directive';
-import { NgIf, NgFor } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./toolbar.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -88,40 +87,45 @@ export class ToolbarViewSelectorComponent {
         return this.ctx.selectedView === view;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarViewSelectorComponent, deps: [{ token: i1.ToolbarService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolbarViewSelectorComponent, isStandalone: true, selector: "[kendoSchedulerToolbarViewSelector]", inputs: { toolbarWidth: "toolbarWidth", responsiveBreakpoint: "responsiveBreakpoint" }, ngImport: i0, template: `
-        <select
-            *ngIf="ctx.views?.length > 1 && toolbarWidth <= responsiveBreakpoint"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolbarViewSelectorComponent, isStandalone: true, selector: "[kendoSchedulerToolbarViewSelector]", inputs: { toolbarWidth: "toolbarWidth", responsiveBreakpoint: "responsiveBreakpoint" }, ngImport: i0, template: `
+        @if (ctx.views?.length > 1 && toolbarWidth <= responsiveBreakpoint) {
+          <select
             (change)="onChange($event)"
             class="k-views-dropdown k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker"
             [attr.aria-label]="selectView"
             [kendoSchedulerFocusIndex]="0"
             containerType="toolbar">
-            <option *ngFor="let view of ctx.views"
+            @for (view of ctx.views; track view) {
+              <option
                 [selected]="isSelected(view) === true"
                 [value]="view.name"
-            >
+                >
                 {{ view.title }}
-            </option>
-        </select>
-        <span
-            *ngIf="toolbarWidth > responsiveBreakpoint"
+              </option>
+            }
+          </select>
+        }
+        @if (toolbarWidth > responsiveBreakpoint) {
+          <span
             class="k-toolbar-button-group k-scheduler-views k-button-group k-button-group-solid"
             role="group"
-        >
-            <button kendoButton
+            >
+            @for (view of ctx.views; track view) {
+              <button kendoButton
                 type="button"
-                *ngFor="let view of ctx.views"
                 [selected]="isSelected(view)"
                 [attr.aria-pressed]="isSelected(view)"
                 (click)="select(view)"
                 [kendoSchedulerFocusIndex]="0"
                 containerType="toolbar">
                 <span class="k-button-text">
-                    {{ view.title }}
+                  {{ view.title }}
                 </span>
-            </button>
-        </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+              </button>
+            }
+          </span>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarViewSelectorComponent, decorators: [{
             type: Component,
@@ -129,41 +133,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoSchedulerToolbarViewSelector]',
                     template: `
-        <select
-            *ngIf="ctx.views?.length > 1 && toolbarWidth <= responsiveBreakpoint"
+        @if (ctx.views?.length > 1 && toolbarWidth <= responsiveBreakpoint) {
+          <select
             (change)="onChange($event)"
             class="k-views-dropdown k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker"
             [attr.aria-label]="selectView"
             [kendoSchedulerFocusIndex]="0"
             containerType="toolbar">
-            <option *ngFor="let view of ctx.views"
+            @for (view of ctx.views; track view) {
+              <option
                 [selected]="isSelected(view) === true"
                 [value]="view.name"
-            >
+                >
                 {{ view.title }}
-            </option>
-        </select>
-        <span
-            *ngIf="toolbarWidth > responsiveBreakpoint"
+              </option>
+            }
+          </select>
+        }
+        @if (toolbarWidth > responsiveBreakpoint) {
+          <span
             class="k-toolbar-button-group k-scheduler-views k-button-group k-button-group-solid"
             role="group"
-        >
-            <button kendoButton
+            >
+            @for (view of ctx.views; track view) {
+              <button kendoButton
                 type="button"
-                *ngFor="let view of ctx.views"
                 [selected]="isSelected(view)"
                 [attr.aria-pressed]="isSelected(view)"
                 (click)="select(view)"
                 [kendoSchedulerFocusIndex]="0"
                 containerType="toolbar">
                 <span class="k-button-text">
-                    {{ view.title }}
+                  {{ view.title }}
                 </span>
-            </button>
-        </span>
-    `,
+              </button>
+            }
+          </span>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, FocusableDirective, NgFor, ButtonComponent]
+                    imports: [FocusableDirective, ButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.ToolbarService }, { type: i2.LocalizationService }], propDecorators: { toolbarWidth: [{
                 type: Input

package/esm2022/views/agenda/agenda-header-item.component.mjs

@@ -5,7 +5,7 @@
 import { Component, Input, HostBinding, ChangeDetectionStrategy, TemplateRef } from '@angular/core';
 import { toLocalDate } from '@progress/kendo-date-math';
 import { DatePipe } from '@progress/kendo-angular-intl';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -26,16 +26,18 @@ export class AgendaHeaderItemComponent {
         return toLocalDate(this.item.dataItem.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AgendaHeaderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AgendaHeaderItemComponent, isStandalone: true, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: { item: ["kendoSchedulerAgendaHeaderItem", "item"], agendaDateTemplate: "agendaDateTemplate", hasFirstClass: "hasFirstClass" }, host: { properties: { "class.k-scheduler-datecolumn": "this.classes", "class.k-scheduler-cell": "this.classes", "class.k-first": "this.firstClass", "attr.role": "this.roleAttribute", "attr.rowspan": "this.rowSpan" } }, ngImport: i0, template: `
-        <ng-container *ngIf="!agendaDateTemplate">
-            <strong class="k-scheduler-agendaday">{{itemDate | kendoDate: 'dd'}}</strong>
-            <em class="k-scheduler-agendaweek">{{itemDate | kendoDate: 'EEEE'}}</em>
-            <span class="k-scheduler-agendadate">{{itemDate | kendoDate: 'y'}}</span>
-        </ng-container>
-        <ng-container *ngIf="agendaDateTemplate" [ngTemplateOutlet]="agendaDateTemplate"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AgendaHeaderItemComponent, isStandalone: true, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: { item: ["kendoSchedulerAgendaHeaderItem", "item"], agendaDateTemplate: "agendaDateTemplate", hasFirstClass: "hasFirstClass" }, host: { properties: { "class.k-scheduler-datecolumn": "this.classes", "class.k-scheduler-cell": "this.classes", "class.k-first": "this.firstClass", "attr.role": "this.roleAttribute", "attr.rowspan": "this.rowSpan" } }, ngImport: i0, template: `
+        @if (!agendaDateTemplate) {
+          <strong class="k-scheduler-agendaday">{{itemDate | kendoDate: 'dd'}}</strong>
+          <em class="k-scheduler-agendaweek">{{itemDate | kendoDate: 'EEEE'}}</em>
+          <span class="k-scheduler-agendadate">{{itemDate | kendoDate: 'y'}}</span>
+        }
+        @if (agendaDateTemplate) {
+          <ng-container [ngTemplateOutlet]="agendaDateTemplate"
             [ngTemplateOutletContext]="{ date: itemDate }">
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+          </ng-container>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AgendaHeaderItemComponent, decorators: [{
             type: Component,
@@ -44,17 +46,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoSchedulerAgendaHeaderItem]',
                     template: `
-        <ng-container *ngIf="!agendaDateTemplate">
-            <strong class="k-scheduler-agendaday">{{itemDate | kendoDate: 'dd'}}</strong>
-            <em class="k-scheduler-agendaweek">{{itemDate | kendoDate: 'EEEE'}}</em>
-            <span class="k-scheduler-agendadate">{{itemDate | kendoDate: 'y'}}</span>
-        </ng-container>
-        <ng-container *ngIf="agendaDateTemplate" [ngTemplateOutlet]="agendaDateTemplate"
+        @if (!agendaDateTemplate) {
+          <strong class="k-scheduler-agendaday">{{itemDate | kendoDate: 'dd'}}</strong>
+          <em class="k-scheduler-agendaweek">{{itemDate | kendoDate: 'EEEE'}}</em>
+          <span class="k-scheduler-agendadate">{{itemDate | kendoDate: 'y'}}</span>
+        }
+        @if (agendaDateTemplate) {
+          <ng-container [ngTemplateOutlet]="agendaDateTemplate"
             [ngTemplateOutletContext]="{ date: itemDate }">
-        </ng-container>
-    `,
+          </ng-container>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, DatePipe]
+                    imports: [NgTemplateOutlet, DatePipe]
                 }]
         }], propDecorators: { classes: [{
                 type: HostBinding,

package/esm2022/views/agenda/agenda-header.component.mjs

@@ -4,7 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, ChangeDetectionStrategy, HostBinding, Input } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { NgFor } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
@@ -27,20 +26,22 @@ export class AgendaHeaderComponent {
         this.localization = localization;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AgendaHeaderComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AgendaHeaderComponent, isStandalone: true, selector: "[kendoSchedulerAgendaHeader]", inputs: { resources: "resources" }, host: { properties: { "class.k-scheduler-header": "this.classes" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AgendaHeaderComponent, isStandalone: true, selector: "[kendoSchedulerAgendaHeader]", inputs: { resources: "resources" }, host: { properties: { "class.k-scheduler-header": "this.classes" } }, ngImport: i0, template: `
         <div class="k-scheduler-header-wrap">
-            <table class="k-scheduler-table" role="none">
-                <tbody role="rowgroup">
-                    <tr role="row">
-                        <th *ngFor="let resource of resources" class="k-scheduler-groupcolumn k-first" role="columnheader"></th>
-                        <th class="k-scheduler-cell k-heading-cell k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
-                        <th class="k-scheduler-cell k-heading-cell k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
-                        <th class="k-scheduler-cell k-heading-cell" role="columnheader">{{ eventMessage }}</th>
-                    </tr>   
-                </tbody>
-            </table>
+          <table class="k-scheduler-table" role="none">
+            <tbody role="rowgroup">
+              <tr role="row">
+                @for (resource of resources; track resource) {
+                  <th class="k-scheduler-groupcolumn k-first" role="columnheader"></th>
+                }
+                <th class="k-scheduler-cell k-heading-cell k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
+                <th class="k-scheduler-cell k-heading-cell k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
+                <th class="k-scheduler-cell k-heading-cell" role="columnheader">{{ eventMessage }}</th>
+              </tr>
+            </tbody>
+          </table>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AgendaHeaderComponent, decorators: [{
             type: Component,
@@ -50,20 +51,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[kendoSchedulerAgendaHeader]',
                     template: `
         <div class="k-scheduler-header-wrap">
-            <table class="k-scheduler-table" role="none">
-                <tbody role="rowgroup">
-                    <tr role="row">
-                        <th *ngFor="let resource of resources" class="k-scheduler-groupcolumn k-first" role="columnheader"></th>
-                        <th class="k-scheduler-cell k-heading-cell k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
-                        <th class="k-scheduler-cell k-heading-cell k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
-                        <th class="k-scheduler-cell k-heading-cell" role="columnheader">{{ eventMessage }}</th>
-                    </tr>   
-                </tbody>
-            </table>
+          <table class="k-scheduler-table" role="none">
+            <tbody role="rowgroup">
+              <tr role="row">
+                @for (resource of resources; track resource) {
+                  <th class="k-scheduler-groupcolumn k-first" role="columnheader"></th>
+                }
+                <th class="k-scheduler-cell k-heading-cell k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
+                <th class="k-scheduler-cell k-heading-cell k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
+                <th class="k-scheduler-cell k-heading-cell" role="columnheader">{{ eventMessage }}</th>
+              </tr>
+            </tbody>
+          </table>
         </div>
-    `,
-                    standalone: true,
-                    imports: [NgFor]
+        `,
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { classes: [{
                 type: HostBinding,

package/esm2022/views/agenda/agenda-task-item.component.mjs

@@ -8,7 +8,7 @@ import { toLocalDate } from '@progress/kendo-date-math';
 import { arrowRotateCwIcon, arrowsNoRepeatIcon, xIcon } from '@progress/kendo-svg-icons';
 import { isRecurrence, isRecurrenceException, formatEventTime } from '../utils';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { IntlService } from '@progress/kendo-angular-intl';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
@@ -53,24 +53,34 @@ export class AgendaTaskItemComponent {
         this.intl = intl;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AgendaTaskItemComponent, deps: [{ token: i1.LocalizationService }, { token: i2.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AgendaTaskItemComponent, isStandalone: true, selector: "[kendoSchedulerAgendaTaskItem]", inputs: { item: ["kendoSchedulerAgendaTaskItem", "item"], color: "color", eventTemplate: "eventTemplate", editable: "editable" }, host: { properties: { "class.k-scheduler-cell": "this.cellClass", "attr.aria-label": "this.eventTitle" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AgendaTaskItemComponent, isStandalone: true, selector: "[kendoSchedulerAgendaTaskItem]", inputs: { item: ["kendoSchedulerAgendaTaskItem", "item"], color: "color", eventTemplate: "eventTemplate", editable: "editable" }, host: { properties: { "class.k-scheduler-cell": "this.cellClass", "attr.aria-label": "this.eventTitle" } }, ngImport: i0, template: `
         <div class="k-task" [title]="item.title">
-            <span class="k-scheduler-mark" *ngIf="eventColor" [style.background-color]="eventColor"></span>
-            <kendo-icon-wrapper *ngIf="isRecurrence" name="arrow-rotate-cw" [svgIcon]="arrowRotateCWIcon"></kendo-icon-wrapper>
-
-            <kendo-icon-wrapper *ngIf="isRecurrenceException" name="arrows-no-repeat" [svgIcon]="arrowsNoRepeatIcon"></kendo-icon-wrapper>
-            <ng-container *ngIf="!eventTemplate">
-                {{item?.title }}
+          @if (eventColor) {
+            <span class="k-scheduler-mark" [style.background-color]="eventColor"></span>
+          }
+          @if (isRecurrence) {
+            <kendo-icon-wrapper name="arrow-rotate-cw" [svgIcon]="arrowRotateCWIcon"></kendo-icon-wrapper>
+          }
+        
+          @if (isRecurrenceException) {
+            <kendo-icon-wrapper name="arrows-no-repeat" [svgIcon]="arrowsNoRepeatIcon"></kendo-icon-wrapper>
+          }
+          @if (!eventTemplate) {
+            {{item?.title }}
+          }
+          @if (eventTemplate) {
+            <ng-container [ngTemplateOutlet]="eventTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: item.resources }">
             </ng-container>
-            <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
-                [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: item.resources }">
-            </ng-container>
-
-            <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
+          }
+        
+          @if (removable) {
+            <span class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
+              <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
+          }
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AgendaTaskItemComponent, decorators: [{
             type: Component,
@@ -80,24 +90,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[kendoSchedulerAgendaTaskItem]',
                     template: `
         <div class="k-task" [title]="item.title">
-            <span class="k-scheduler-mark" *ngIf="eventColor" [style.background-color]="eventColor"></span>
-            <kendo-icon-wrapper *ngIf="isRecurrence" name="arrow-rotate-cw" [svgIcon]="arrowRotateCWIcon"></kendo-icon-wrapper>
-
-            <kendo-icon-wrapper *ngIf="isRecurrenceException" name="arrows-no-repeat" [svgIcon]="arrowsNoRepeatIcon"></kendo-icon-wrapper>
-            <ng-container *ngIf="!eventTemplate">
-                {{item?.title }}
-            </ng-container>
-            <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
-                [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: item.resources }">
+          @if (eventColor) {
+            <span class="k-scheduler-mark" [style.background-color]="eventColor"></span>
+          }
+          @if (isRecurrence) {
+            <kendo-icon-wrapper name="arrow-rotate-cw" [svgIcon]="arrowRotateCWIcon"></kendo-icon-wrapper>
+          }
+        
+          @if (isRecurrenceException) {
+            <kendo-icon-wrapper name="arrows-no-repeat" [svgIcon]="arrowsNoRepeatIcon"></kendo-icon-wrapper>
+          }
+          @if (!eventTemplate) {
+            {{item?.title }}
+          }
+          @if (eventTemplate) {
+            <ng-container [ngTemplateOutlet]="eventTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: item.resources }">
             </ng-container>
-
-            <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
+          }
+        
+          @if (removable) {
+            <span class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
+              <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
+          }
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgTemplateOutlet]
+                    imports: [IconWrapperComponent, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.IntlService }], propDecorators: { item: [{
                 type: Input,