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

package/esm2022/calendar/view-list.component.mjs

@@ -15,7 +15,6 @@ import { HeaderComponent } from './header.component';
 import { FooterComponent } from './footer.component';
 import { ViewComponent } from './view.component';
 import { KForOf } from './for.directive';
-import { NgIf, NgFor } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/bus-view.service";
 import * as i2 from "@progress/kendo-angular-intl";
@@ -225,84 +224,91 @@ export class ViewListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewListComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.IntlService }, { token: i3.CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ViewListComponent, isStandalone: true, selector: "kendo-calendar-viewlist", inputs: { allowReverse: "allowReverse", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", size: "size", weekNumber: "weekNumber" }, outputs: { cellEnter: "cellEnter", cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ViewListComponent, isStandalone: true, selector: "kendo-calendar-viewlist", inputs: { allowReverse: "allowReverse", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", size: "size", weekNumber: "weekNumber" }, outputs: { cellEnter: "cellEnter", cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-calendar-header
-        [currentDate]="activeDate"
-        [size]="size"
-        [min]="min"
-        [max]="max"
-        [id]="id"
-        [activeView]="activeView"
-        [titleTemplateRef]="headerTitleTemplateRef"
-        [headerTemplateRef]="headerTemplateRef"
-        (todayButtonClick)="todayButtonClick.emit($event)"
-    >
+      [currentDate]="activeDate"
+      [size]="size"
+      [min]="min"
+      [max]="max"
+      [id]="id"
+      [activeView]="activeView"
+      [titleTemplateRef]="headerTitleTemplateRef"
+      [headerTemplateRef]="headerTemplateRef"
+      (todayButtonClick)="todayButtonClick.emit($event)"
+      >
     </kendo-calendar-header>
-    <table class="k-calendar-weekdays k-calendar-table" [style.table-layout]="'auto'" *ngIf="isMonthView()">
+    @if (isMonthView()) {
+      <table class="k-calendar-weekdays k-calendar-table" [style.table-layout]="'auto'">
         <thead class="k-calendar-thead">
-            <tr class="k-calendar-tr">
-                <th class="k-calendar-th" *ngFor="let name of weekNames; let i = index;" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
-            </tr>
+          <tr class="k-calendar-tr">
+            @for (name of weekNames; track $index; let i = $index) {
+              <th class="k-calendar-th" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
+            }
+          </tr>
         </thead>
-    </table>
+      </table>
+    }
     <kendo-virtualization
-        [tabindex]="-1"
-        [skip]="skip"
-        [take]="take"
-        [total]="total"
-        [itemHeight]="viewHeight"
-        [topOffset]="viewOffset"
-        [bottomOffset]="bottomOffset"
-        [scrollOffsetSize]="viewOffset"
-        [maxScrollDifference]="viewHeight"
-        (pageChange)="onPageChange($event)"
-        (scrollChange)="scrollChange($event)"
-        (activeIndexChange)="setActiveDate($event)"
-        >
-        <table
-            #list
-            role="grid"
-            class="k-calendar-table"
-            [attr.tabindex]="getTabIndex()"
-            [attr.aria-labelledby]="id"
-            (focus)="focusCalendar.emit()"
-            (blur)="blurCalendar.emit($event)"
+      [tabindex]="-1"
+      [skip]="skip"
+      [take]="take"
+      [total]="total"
+      [itemHeight]="viewHeight"
+      [topOffset]="viewOffset"
+      [bottomOffset]="bottomOffset"
+      [scrollOffsetSize]="viewOffset"
+      [maxScrollDifference]="viewHeight"
+      (pageChange)="onPageChange($event)"
+      (scrollChange)="scrollChange($event)"
+      (activeIndexChange)="setActiveDate($event)"
+      >
+      <table
+        #list
+        role="grid"
+        class="k-calendar-table"
+        [attr.tabindex]="getTabIndex()"
+        [attr.aria-labelledby]="id"
+        (focus)="focusCalendar.emit()"
+        (blur)="blurCalendar.emit($event)"
         >
-            <colgroup><col *ngFor="let _ of cols" /></colgroup>
+        <colgroup>@for (_ of cols; track $index) {
+        <col />
+      }</colgroup>
 
-            <tbody class="k-calendar-tbody"
-                   *kFor="let date of dates"
-                   kendoCalendarView
-                   [allowReverse]="allowReverse"
-                   [activeRangeEnd]="activeRangeEnd"
-                   [selectionRange]="selectionRange"
-                   [showOtherMonthDays]="showOtherMonthDays"
-                   [headerTitle]="headerTitle"
-                   role="rowgroup"
-                   [activeView]="activeView"
-                   [isActive]="isActive"
-                   [min]="min" [max]="max"
-                   [cellUID]="cellUID"
-                   [focusedDate]="focusedDate"
-                   [selectedDates]="selectedDates"
-                   [weekNumber]="weekNumber"
-                   [templateRef]="cellTemplateRef"
-                   [weekNumberTemplateRef]="weekNumberTemplateRef"
-                   [viewDate]="date"
-                   (cellClick)="cellClick.emit($event)"
-                   (weekNumberCellClick)="weekNumberCellClick.emit($event)"
-                   (focusedCellId)="focusedCellChange.emit($event)"
-                   (cellEnter)="cellEnter.emit($event)"
-            ></tbody>
-        </table>
+      <tbody class="k-calendar-tbody"
+        *kFor="let date of dates"
+        kendoCalendarView
+        [allowReverse]="allowReverse"
+        [activeRangeEnd]="activeRangeEnd"
+        [selectionRange]="selectionRange"
+        [showOtherMonthDays]="showOtherMonthDays"
+        [headerTitle]="headerTitle"
+        role="rowgroup"
+        [activeView]="activeView"
+        [isActive]="isActive"
+        [min]="min" [max]="max"
+        [cellUID]="cellUID"
+        [focusedDate]="focusedDate"
+        [selectedDates]="selectedDates"
+        [weekNumber]="weekNumber"
+        [templateRef]="cellTemplateRef"
+        [weekNumberTemplateRef]="weekNumberTemplateRef"
+        [viewDate]="date"
+        (cellClick)="cellClick.emit($event)"
+        (weekNumberCellClick)="weekNumberCellClick.emit($event)"
+        (focusedCellId)="focusedCellChange.emit($event)"
+        (cellEnter)="cellEnter.emit($event)"
+      ></tbody>
+    </table>
     </kendo-virtualization>
-    <kendo-calendar-footer
-        *ngIf="showFooter"
+    @if (showFooter) {
+      <kendo-calendar-footer
         [footerTemplateRef]="footerTemplateRef"
         [activeViewValue]="activeViewValue"
         [currentDate]="activeDate">
-    </kendo-calendar-footer>
-  `, isInline: true, dependencies: [{ kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id", "size"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      </kendo-calendar-footer>
+    }
+    `, isInline: true, dependencies: [{ kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id", "size"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
@@ -311,84 +317,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-calendar-viewlist',
                     template: `
     <kendo-calendar-header
-        [currentDate]="activeDate"
-        [size]="size"
-        [min]="min"
-        [max]="max"
-        [id]="id"
-        [activeView]="activeView"
-        [titleTemplateRef]="headerTitleTemplateRef"
-        [headerTemplateRef]="headerTemplateRef"
-        (todayButtonClick)="todayButtonClick.emit($event)"
-    >
+      [currentDate]="activeDate"
+      [size]="size"
+      [min]="min"
+      [max]="max"
+      [id]="id"
+      [activeView]="activeView"
+      [titleTemplateRef]="headerTitleTemplateRef"
+      [headerTemplateRef]="headerTemplateRef"
+      (todayButtonClick)="todayButtonClick.emit($event)"
+      >
     </kendo-calendar-header>
-    <table class="k-calendar-weekdays k-calendar-table" [style.table-layout]="'auto'" *ngIf="isMonthView()">
+    @if (isMonthView()) {
+      <table class="k-calendar-weekdays k-calendar-table" [style.table-layout]="'auto'">
         <thead class="k-calendar-thead">
-            <tr class="k-calendar-tr">
-                <th class="k-calendar-th" *ngFor="let name of weekNames; let i = index;" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
-            </tr>
+          <tr class="k-calendar-tr">
+            @for (name of weekNames; track $index; let i = $index) {
+              <th class="k-calendar-th" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
+            }
+          </tr>
         </thead>
-    </table>
+      </table>
+    }
     <kendo-virtualization
-        [tabindex]="-1"
-        [skip]="skip"
-        [take]="take"
-        [total]="total"
-        [itemHeight]="viewHeight"
-        [topOffset]="viewOffset"
-        [bottomOffset]="bottomOffset"
-        [scrollOffsetSize]="viewOffset"
-        [maxScrollDifference]="viewHeight"
-        (pageChange)="onPageChange($event)"
-        (scrollChange)="scrollChange($event)"
-        (activeIndexChange)="setActiveDate($event)"
-        >
-        <table
-            #list
-            role="grid"
-            class="k-calendar-table"
-            [attr.tabindex]="getTabIndex()"
-            [attr.aria-labelledby]="id"
-            (focus)="focusCalendar.emit()"
-            (blur)="blurCalendar.emit($event)"
+      [tabindex]="-1"
+      [skip]="skip"
+      [take]="take"
+      [total]="total"
+      [itemHeight]="viewHeight"
+      [topOffset]="viewOffset"
+      [bottomOffset]="bottomOffset"
+      [scrollOffsetSize]="viewOffset"
+      [maxScrollDifference]="viewHeight"
+      (pageChange)="onPageChange($event)"
+      (scrollChange)="scrollChange($event)"
+      (activeIndexChange)="setActiveDate($event)"
+      >
+      <table
+        #list
+        role="grid"
+        class="k-calendar-table"
+        [attr.tabindex]="getTabIndex()"
+        [attr.aria-labelledby]="id"
+        (focus)="focusCalendar.emit()"
+        (blur)="blurCalendar.emit($event)"
         >
-            <colgroup><col *ngFor="let _ of cols" /></colgroup>
+        <colgroup>@for (_ of cols; track $index) {
+        <col />
+      }</colgroup>
 
-            <tbody class="k-calendar-tbody"
-                   *kFor="let date of dates"
-                   kendoCalendarView
-                   [allowReverse]="allowReverse"
-                   [activeRangeEnd]="activeRangeEnd"
-                   [selectionRange]="selectionRange"
-                   [showOtherMonthDays]="showOtherMonthDays"
-                   [headerTitle]="headerTitle"
-                   role="rowgroup"
-                   [activeView]="activeView"
-                   [isActive]="isActive"
-                   [min]="min" [max]="max"
-                   [cellUID]="cellUID"
-                   [focusedDate]="focusedDate"
-                   [selectedDates]="selectedDates"
-                   [weekNumber]="weekNumber"
-                   [templateRef]="cellTemplateRef"
-                   [weekNumberTemplateRef]="weekNumberTemplateRef"
-                   [viewDate]="date"
-                   (cellClick)="cellClick.emit($event)"
-                   (weekNumberCellClick)="weekNumberCellClick.emit($event)"
-                   (focusedCellId)="focusedCellChange.emit($event)"
-                   (cellEnter)="cellEnter.emit($event)"
-            ></tbody>
-        </table>
+      <tbody class="k-calendar-tbody"
+        *kFor="let date of dates"
+        kendoCalendarView
+        [allowReverse]="allowReverse"
+        [activeRangeEnd]="activeRangeEnd"
+        [selectionRange]="selectionRange"
+        [showOtherMonthDays]="showOtherMonthDays"
+        [headerTitle]="headerTitle"
+        role="rowgroup"
+        [activeView]="activeView"
+        [isActive]="isActive"
+        [min]="min" [max]="max"
+        [cellUID]="cellUID"
+        [focusedDate]="focusedDate"
+        [selectedDates]="selectedDates"
+        [weekNumber]="weekNumber"
+        [templateRef]="cellTemplateRef"
+        [weekNumberTemplateRef]="weekNumberTemplateRef"
+        [viewDate]="date"
+        (cellClick)="cellClick.emit($event)"
+        (weekNumberCellClick)="weekNumberCellClick.emit($event)"
+        (focusedCellId)="focusedCellChange.emit($event)"
+        (cellEnter)="cellEnter.emit($event)"
+      ></tbody>
+    </table>
     </kendo-virtualization>
-    <kendo-calendar-footer
-        *ngIf="showFooter"
+    @if (showFooter) {
+      <kendo-calendar-footer
         [footerTemplateRef]="footerTemplateRef"
         [activeViewValue]="activeViewValue"
         [currentDate]="activeDate">
-    </kendo-calendar-footer>
-  `,
+      </kendo-calendar-footer>
+    }
+    `,
                     standalone: true,
-                    imports: [HeaderComponent, NgIf, NgFor, VirtualizationComponent, KForOf, ViewComponent, FooterComponent]
+                    imports: [HeaderComponent, VirtualizationComponent, KForOf, ViewComponent, FooterComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.BusViewService }, { type: i0.ChangeDetectorRef }, { type: i2.IntlService }, { type: i3.CalendarDOMService }, { type: i0.Renderer2 }], propDecorators: { allowReverse: [{
                 type: Input

package/esm2022/calendar/view.component.mjs

@@ -13,7 +13,7 @@ import { getToday, last, setTime, stringifyClassObject } from '../util';
 import { closestInScope } from '../common/dom-queries';
 import { isPresent } from '../common/utils';
 import { KForOf } from './for.directive';
-import { NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
+import { NgTemplateOutlet, NgClass } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/bus-view.service";
 import * as i2 from "@progress/kendo-angular-intl";
@@ -260,54 +260,63 @@ export class ViewComponent {
         return this.data[rowIndex][cellIndex];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewComponent, deps: [{ token: i1.BusViewService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ViewComponent, isStandalone: true, selector: "[kendoCalendarView]", inputs: { allowReverse: "allowReverse", showOtherMonthDays: "showOtherMonthDays", direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitle: "headerTitle" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", focusedCellId: "focusedCellId" }, usesOnChanges: true, ngImport: i0, template: `
-    <ng-template #emptyCell><td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td></ng-template>
-    <tr *ngIf="!isHorizontal()" class="k-calendar-tr" role="row" [attr.aria-hidden]="ariaHidden"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
-    <tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
-        <ng-template [ngIf]="weekNumber">
-            <td
-                class="k-alt k-calendar-td"
-                role="gridcell"
-                *ngIf="firstDate(row); else emptyCell"
-                (click)="handleWeekNumberClick(row)"
-            >
-                <ng-template [ngIf]="!weekNumberTemplateRef">
-                    {{getWeekNumber(firstDate(row))}}
-                </ng-template>
-                <ng-template
-                    [ngIf]="weekNumberTemplateRef"
-                    [ngTemplateOutlet]="weekNumberTemplateRef"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ViewComponent, isStandalone: true, selector: "[kendoCalendarView]", inputs: { allowReverse: "allowReverse", showOtherMonthDays: "showOtherMonthDays", direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitle: "headerTitle" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", focusedCellId: "focusedCellId" }, usesOnChanges: true, ngImport: i0, template: `
+@if (!isHorizontal()) {
+  <tr class="k-calendar-tr" role="row" [attr.aria-hidden]="ariaHidden"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
+}
+<tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
+  @if (weekNumber) {
+    @if (firstDate(row)) {
+      <td
+        class="k-alt k-calendar-td"
+        role="gridcell"
+        (click)="handleWeekNumberClick(row)"
+        >
+        @if (!weekNumberTemplateRef) {
+          {{getWeekNumber(firstDate(row))}}
+        }
+        @if (weekNumberTemplateRef) {
+          <ng-template
+            [ngTemplateOutlet]="weekNumberTemplateRef"
                     [ngTemplateOutletContext]="{
                         $implicit: firstDate(row),
                         cellContext: getWeekNumberContext(row)
                     }"
-                ></ng-template>
-            </td>
-        </ng-template>
-        <ng-container *kFor="let cell of row; let cellIndex = index">
-            <td class="k-calendar-td"
-                *ngIf="shouldRenderCellContent(cell); else emptyCell"
-                role="gridcell"
-                [attr.id]="cell.id"
-                [attr.data-cell-index]="tableCellIndex(rowIndex, cellIndex)"
-                [attr.aria-selected]="cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd"
-                [attr.aria-disabled]="cell.isDisabled"
-                [attr.aria-label]="getMonthLabel(cell.value)"
-                [ngClass]="getStyles(cell)"
-                [title]="cell.title"
-            >
-                <span class="k-link">
-                    <ng-template [ngIf]="!templateRef">{{cell.formattedValue}}</ng-template>
-                    <ng-template
-                        *ngIf="templateRef"
-                        [ngTemplateOutlet]="templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: cell.value, cellContext: cell }"
-                    ></ng-template>
-                </span>
-            </td>
-        </ng-container>
-    </tr>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+          ></ng-template>
+        }
+      </td>
+    } @else {
+      <td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td>
+    }
+  }
+  <ng-container *kFor="let cell of row; let cellIndex = index">
+    @if (shouldRenderCellContent(cell)) {
+      <td class="k-calendar-td"
+        role="gridcell"
+        [attr.id]="cell.id"
+        [attr.data-cell-index]="tableCellIndex(rowIndex, cellIndex)"
+        [attr.aria-selected]="cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd"
+        [attr.aria-disabled]="cell.isDisabled"
+        [attr.aria-label]="getMonthLabel(cell.value)"
+        [ngClass]="getStyles(cell)"
+        [title]="cell.title"
+        >
+        <span class="k-link">
+          @if (!templateRef) {{{cell.formattedValue}}}
+          @if (templateRef) {
+            <ng-template
+              [ngTemplateOutlet]="templateRef"
+              [ngTemplateOutletContext]="{ $implicit: cell.value, cellContext: cell }"
+            ></ng-template>
+          }
+        </span>
+      </td>
+    } @else {
+      <td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td>
+    }
+  </ng-container>
+</tr>
+`, isInline: true, dependencies: [{ kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
@@ -315,55 +324,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     // eslint-disable-next-line
                     selector: '[kendoCalendarView]',
                     template: `
-    <ng-template #emptyCell><td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td></ng-template>
-    <tr *ngIf="!isHorizontal()" class="k-calendar-tr" role="row" [attr.aria-hidden]="ariaHidden"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
-    <tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
-        <ng-template [ngIf]="weekNumber">
-            <td
-                class="k-alt k-calendar-td"
-                role="gridcell"
-                *ngIf="firstDate(row); else emptyCell"
-                (click)="handleWeekNumberClick(row)"
-            >
-                <ng-template [ngIf]="!weekNumberTemplateRef">
-                    {{getWeekNumber(firstDate(row))}}
-                </ng-template>
-                <ng-template
-                    [ngIf]="weekNumberTemplateRef"
-                    [ngTemplateOutlet]="weekNumberTemplateRef"
+@if (!isHorizontal()) {
+  <tr class="k-calendar-tr" role="row" [attr.aria-hidden]="ariaHidden"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
+}
+<tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
+  @if (weekNumber) {
+    @if (firstDate(row)) {
+      <td
+        class="k-alt k-calendar-td"
+        role="gridcell"
+        (click)="handleWeekNumberClick(row)"
+        >
+        @if (!weekNumberTemplateRef) {
+          {{getWeekNumber(firstDate(row))}}
+        }
+        @if (weekNumberTemplateRef) {
+          <ng-template
+            [ngTemplateOutlet]="weekNumberTemplateRef"
                     [ngTemplateOutletContext]="{
                         $implicit: firstDate(row),
                         cellContext: getWeekNumberContext(row)
                     }"
-                ></ng-template>
-            </td>
-        </ng-template>
-        <ng-container *kFor="let cell of row; let cellIndex = index">
-            <td class="k-calendar-td"
-                *ngIf="shouldRenderCellContent(cell); else emptyCell"
-                role="gridcell"
-                [attr.id]="cell.id"
-                [attr.data-cell-index]="tableCellIndex(rowIndex, cellIndex)"
-                [attr.aria-selected]="cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd"
-                [attr.aria-disabled]="cell.isDisabled"
-                [attr.aria-label]="getMonthLabel(cell.value)"
-                [ngClass]="getStyles(cell)"
-                [title]="cell.title"
-            >
-                <span class="k-link">
-                    <ng-template [ngIf]="!templateRef">{{cell.formattedValue}}</ng-template>
-                    <ng-template
-                        *ngIf="templateRef"
-                        [ngTemplateOutlet]="templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: cell.value, cellContext: cell }"
-                    ></ng-template>
-                </span>
-            </td>
-        </ng-container>
-    </tr>
-  `,
+          ></ng-template>
+        }
+      </td>
+    } @else {
+      <td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td>
+    }
+  }
+  <ng-container *kFor="let cell of row; let cellIndex = index">
+    @if (shouldRenderCellContent(cell)) {
+      <td class="k-calendar-td"
+        role="gridcell"
+        [attr.id]="cell.id"
+        [attr.data-cell-index]="tableCellIndex(rowIndex, cellIndex)"
+        [attr.aria-selected]="cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd"
+        [attr.aria-disabled]="cell.isDisabled"
+        [attr.aria-label]="getMonthLabel(cell.value)"
+        [ngClass]="getStyles(cell)"
+        [title]="cell.title"
+        >
+        <span class="k-link">
+          @if (!templateRef) {{{cell.formattedValue}}}
+          @if (templateRef) {
+            <ng-template
+              [ngTemplateOutlet]="templateRef"
+              [ngTemplateOutletContext]="{ $implicit: cell.value, cellContext: cell }"
+            ></ng-template>
+          }
+        </span>
+      </td>
+    } @else {
+      <td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td>
+    }
+  </ng-container>
+</tr>
+`,
                     standalone: true,
-                    imports: [NgIf, KForOf, NgTemplateOutlet, NgClass]
+                    imports: [KForOf, NgTemplateOutlet, NgClass]
                 }]
         }], ctorParameters: () => [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.DisabledDatesService }], propDecorators: { allowReverse: [{
                 type: Input