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

package/esm2022/tilelayout/tilelayout-item.component.mjs

@@ -12,7 +12,6 @@ import { RESIZE_DIRECTIONS, RTL_RESIZE_DIRECTIONS } from './constants';
 import { TileLayoutItemHeaderComponent } from './tilelayout-item-header.component';
 import { getId } from './util';
 import { TileLayoutResizeHandleDirective } from './tilelayout-resize-handle.directive';
-import { NgIf, NgFor } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./dragging-service";
@@ -221,43 +220,49 @@ export class TileLayoutItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.TileLayoutDraggingService }, { token: i3.TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TileLayoutItemComponent, isStandalone: true, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.aria-dropeffect": "this.hostDropEffect", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-grabbed": "this.hostGrabbed", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
-        <kendo-tilelayout-item-header *ngIf="title">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TileLayoutItemComponent, isStandalone: true, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.aria-dropeffect": "this.hostDropEffect", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-grabbed": "this.hostGrabbed", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
+        @if (title) {
+          <kendo-tilelayout-item-header>
             <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
-        </kendo-tilelayout-item-header>
+          </kendo-tilelayout-item-header>
+        }
         <ng-content></ng-content>
-        <ng-container *ngIf="resizable">
+        @if (resizable) {
+          @for (dir of resizeDirections; track dir) {
             <div
-                *ngFor="let dir of resizeDirections"
-                class="k-resize-handle k-cursor-{{dir}}-resize"
-                kendoTileLayoutResizeHandle
-                [rtl]="rtl"
-                [resizeDirection]="dir">
+              class="k-resize-handle k-cursor-{{dir}}-resize"
+              kendoTileLayoutResizeHandle
+              [rtl]="rtl"
+              [resizeDirection]="dir">
             </div>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
+          }
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout-item',
                     template: `
-        <kendo-tilelayout-item-header *ngIf="title">
+        @if (title) {
+          <kendo-tilelayout-item-header>
             <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
-        </kendo-tilelayout-item-header>
+          </kendo-tilelayout-item-header>
+        }
         <ng-content></ng-content>
-        <ng-container *ngIf="resizable">
+        @if (resizable) {
+          @for (dir of resizeDirections; track dir) {
             <div
-                *ngFor="let dir of resizeDirections"
-                class="k-resize-handle k-cursor-{{dir}}-resize"
-                kendoTileLayoutResizeHandle
-                [rtl]="rtl"
-                [resizeDirection]="dir">
+              class="k-resize-handle k-cursor-{{dir}}-resize"
+              kendoTileLayoutResizeHandle
+              [rtl]="rtl"
+              [resizeDirection]="dir">
             </div>
-        </ng-container>
-    `,
+          }
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, TileLayoutItemHeaderComponent, NgFor, TileLayoutResizeHandleDirective]
+                    imports: [TileLayoutItemHeaderComponent, TileLayoutResizeHandleDirective]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.TileLayoutDraggingService }, { type: i3.TileLayoutKeyboardNavigationService }], propDecorators: { title: [{
                 type: Input

package/esm2022/tilelayout/tilelayout.component.mjs

@@ -13,7 +13,6 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { isPresent } from '../common/util';
 import { TileLayoutKeyboardNavigationService } from './keyboard-navigation.service';
-import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./dragging-service";
@@ -290,7 +289,7 @@ export class TileLayoutComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.TileLayoutDraggingService }, { token: i3.TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TileLayoutComponent, isStandalone: true, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-tilelayout": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TileLayoutComponent, isStandalone: true, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-tilelayout": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             TileLayoutDraggingService,
             TileLayoutKeyboardNavigationService,
@@ -301,16 +300,18 @@ export class TileLayoutComponent {
         ], queries: [{ propertyName: "items", predicate: TileLayoutItemComponent }], viewQueries: [{ propertyName: "hint", first: true, predicate: ["hint"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
         <div #hint class="k-layout-item-hint"
-            [style.display]="'none'"
-            [style.order]="targetOrder"
-            [style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
-            [style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
-            [style.gridColumnStart]="currentColStart"
-            [style.gridRowStart]="currentRowStart"
-            [style.zIndex]="'1'">
+          [style.display]="'none'"
+          [style.order]="targetOrder"
+          [style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
+          [style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
+          [style.gridColumnStart]="currentColStart"
+          [style.gridRowStart]="currentRowStart"
+          [style.zIndex]="'1'">
         </div>
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutComponent, decorators: [{
             type: Component,
@@ -328,18 +329,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     template: `
         <ng-content></ng-content>
         <div #hint class="k-layout-item-hint"
-            [style.display]="'none'"
-            [style.order]="targetOrder"
-            [style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
-            [style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
-            [style.gridColumnStart]="currentColStart"
-            [style.gridRowStart]="currentRowStart"
-            [style.zIndex]="'1'">
+          [style.display]="'none'"
+          [style.order]="targetOrder"
+          [style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
+          [style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
+          [style.gridColumnStart]="currentColStart"
+          [style.gridRowStart]="currentRowStart"
+          [style.zIndex]="'1'">
         </div>
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `,
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, WatermarkOverlayComponent]
+                    imports: [WatermarkOverlayComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.TileLayoutDraggingService }, { type: i3.TileLayoutKeyboardNavigationService }], propDecorators: { columns: [{
                 type: Input

package/esm2022/timeline/timeline-card.component.mjs

@@ -17,7 +17,7 @@ import { CardSubtitleDirective } from '../card/directives/card-subtitle.directiv
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { CardTitleDirective } from '../card/directives/card-title.directive';
 import { CardHeaderComponent } from '../card/card-header.component';
-import { NgStyle, NgClass, NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
+import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
 import { CardComponent } from '../card/card.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./timeline.service";
@@ -139,101 +139,118 @@ export class TimelineCardComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineCardComponent, deps: [{ token: i0.ElementRef }, { token: i1.TimelineService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineCardComponent, isStandalone: true, selector: "kendo-timeline-card", inputs: { event: "event", expanded: "expanded", collapsible: "collapsible", reversed: "reversed", orientation: "orientation", navigable: "navigable", tabIndex: "tabIndex", animationDuration: "animationDuration", index: "index", eventWidth: "eventWidth", eventHeight: "eventHeight", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate", calloutStyle: "calloutStyle" }, host: { listeners: { "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-timeline-card": "this.hostClass", "class.k-collapsed": "this.collapsedClass" } }, providers: [], viewQueries: [{ propertyName: "calloutElementRef", first: true, predicate: ["callout"], descendants: true }], exportAs: ["kendoTimelineCard"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineCardComponent, isStandalone: true, selector: "kendo-timeline-card", inputs: { event: "event", expanded: "expanded", collapsible: "collapsible", reversed: "reversed", orientation: "orientation", navigable: "navigable", tabIndex: "tabIndex", animationDuration: "animationDuration", index: "index", eventWidth: "eventWidth", eventHeight: "eventHeight", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate", calloutStyle: "calloutStyle" }, host: { listeners: { "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-timeline-card": "this.hostClass", "class.k-collapsed": "this.collapsedClass" } }, providers: [], viewQueries: [{ propertyName: "calloutElementRef", first: true, predicate: ["callout"], descendants: true }], exportAs: ["kendoTimelineCard"], usesOnChanges: true, ngImport: i0, template: `
         <kendo-card
-            [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
-            [width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
-            class="k-card-with-callout k-card-vertical"
-            (click)="toggle()"
-            [attr.role]="role"
-            [attr.aria-live]="ariaLive"
-            [attr.aria-expanded]="ariaExpanded"
-            [attr.tabindex]="tabIndex"
-        >
-            <span
-                #callout
-                class="k-timeline-card-callout k-card-callout"
+          [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
+          [width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
+          class="k-card-with-callout k-card-vertical"
+          (click)="toggle()"
+          [attr.role]="role"
+          [attr.aria-live]="ariaLive"
+          [attr.aria-expanded]="ariaExpanded"
+          [attr.tabindex]="tabIndex"
+          >
+          <span
+            #callout
+            class="k-timeline-card-callout k-card-callout"
                 [ngClass]="{
                     'k-callout-n': orientation === 'horizontal',
                     'k-callout-w': orientation === 'vertical' && !this.reversed,
                     'k-callout-e': orientation === 'vertical' && this.reversed
                 }"
             >
-            </span>
-            <div *ngIf="event" class="k-card-inner">
-                <kendo-card-header>
-                    <ng-template
-                        *ngIf="headerTemplate"
-                        [ngTemplateOutlet]="headerTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+          </span>
+          @if (event) {
+            <div class="k-card-inner">
+              <kendo-card-header>
+                @if (headerTemplate) {
+                  <ng-template
+                    [ngTemplateOutlet]="headerTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{ $implicit: event, index: index}">
                     >
-                    </ng-template>
-
-                    <div kendoCardTitle *ngIf="!headerTemplate">
-                        <span class="k-event-title">{{ event.title }}</span>
-                        <button 
-                            kendoButton
-                            *ngIf="collapsible && orientation === 'vertical'"
-                            [icon]="calloutFontIcon"
-                            [svgIcon]="calloutSvgIcon"
-                            class="k-event-collapse"
-                            fillMode="flat"
-                            [attr.aria-hidden]="true"
-                            tabindex="-1"
-                            type="button"
-                        ></button>
-                    </div>
-                    <div kendoCardSubtitle  *ngIf="!headerTemplate">{{ event.subtitle }}</div>
-                </kendo-card-header>
-
+                  </ng-template>
+                }
+                @if (!headerTemplate) {
+                  <div kendoCardTitle>
+                    <span class="k-event-title">{{ event.title }}</span>
+                    @if (collapsible && orientation === 'vertical') {
+                      <button
+                        kendoButton
+                        [icon]="calloutFontIcon"
+                        [svgIcon]="calloutSvgIcon"
+                        class="k-event-collapse"
+                        fillMode="flat"
+                        [attr.aria-hidden]="true"
+                        tabindex="-1"
+                        type="button"
+                      ></button>
+                    }
+                  </div>
+                }
+                @if (!headerTemplate) {
+                  <div kendoCardSubtitle >{{ event.subtitle }}</div>
+                }
+              </kendo-card-header>
+              @if (event.description || event.images) {
                 <kendo-card-body
-                    *ngIf="event.description || event.images"
-                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                    (@toggle.start)="animationStart()"
-                    (@toggle.done)="animationDone($event)"
-                >
+                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                  (@toggle.start)="animationStart()"
+                  (@toggle.done)="animationDone($event)"
+                  >
+                  @if (bodyTemplate) {
                     <ng-template
-                        *ngIf="bodyTemplate"
-                        [ngTemplateOutlet]="bodyTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                    >
+                      [ngTemplateOutlet]="bodyTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                      >
                     </ng-template>
-
-                    <div *ngIf="!bodyTemplate" class="k-card-description">
-                        <p *ngIf="event.description">{{ event.description }}</p>
-                        <ng-container *ngFor="let image of event.images">
-                            <img *ngIf="image.alt" kendoCardMedia [src]="image.src" [alt]="image.alt" />
-                            <img *ngIf="!image.alt" kendoCardMedia [src]="image.src" />
-                        </ng-container>
+                  }
+                  @if (!bodyTemplate) {
+                    <div class="k-card-description">
+                      @if (event.description) {
+                        <p>{{ event.description }}</p>
+                      }
+                      @for (image of event.images; track image) {
+                        @if (image.alt) {
+                          <img kendoCardMedia [src]="image.src" [alt]="image.alt" />
+                        }
+                        @if (!image.alt) {
+                          <img kendoCardMedia [src]="image.src" />
+                        }
+                      }
                     </div>
+                  }
                 </kendo-card-body>
-
+              }
+              @if (event.actions) {
                 <kendo-card-actions
-                    *ngIf="event.actions"
-                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                >
+                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                  >
+                  @if (actionsTemplate) {
                     <ng-template
-                        *ngIf="actionsTemplate"
-                        [ngTemplateOutlet]="actionsTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                    >
+                      [ngTemplateOutlet]="actionsTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                      >
                     </ng-template>
-
-                    <ng-container *ngIf="!actionsTemplate">
-                        <a *ngFor="let action of event.actions"
-                            [href]="action.url"
-                            [target]="action.target === 'blank' ? '_blank' : '_self'"
-                            (click)="onActionClick($event)"
-                            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
-                            role="button"
+                  }
+                  @if (!actionsTemplate) {
+                    @for (action of event.actions; track action) {
+                      <a
+                        [href]="action.url"
+                        [target]="action.target === 'blank' ? '_blank' : '_self'"
+                        (click)="onActionClick($event)"
+                        class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
+                        role="button"
                         >
-                            {{ action.text }}
-                        </a>
-                    </ng-container>
+                        {{ action.text }}
+                      </a>
+                    }
+                  }
                 </kendo-card-actions>
+              }
             </div>
+          }
         </kendo-card>
-    `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { 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"] }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
+        `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { 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"] }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
             trigger('toggle', [
                 state('collapsed', style({
                     height: '0',
@@ -276,101 +293,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-timeline-card',
                     template: `
         <kendo-card
-            [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
-            [width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
-            class="k-card-with-callout k-card-vertical"
-            (click)="toggle()"
-            [attr.role]="role"
-            [attr.aria-live]="ariaLive"
-            [attr.aria-expanded]="ariaExpanded"
-            [attr.tabindex]="tabIndex"
-        >
-            <span
-                #callout
-                class="k-timeline-card-callout k-card-callout"
+          [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
+          [width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
+          class="k-card-with-callout k-card-vertical"
+          (click)="toggle()"
+          [attr.role]="role"
+          [attr.aria-live]="ariaLive"
+          [attr.aria-expanded]="ariaExpanded"
+          [attr.tabindex]="tabIndex"
+          >
+          <span
+            #callout
+            class="k-timeline-card-callout k-card-callout"
                 [ngClass]="{
                     'k-callout-n': orientation === 'horizontal',
                     'k-callout-w': orientation === 'vertical' && !this.reversed,
                     'k-callout-e': orientation === 'vertical' && this.reversed
                 }"
             >
-            </span>
-            <div *ngIf="event" class="k-card-inner">
-                <kendo-card-header>
-                    <ng-template
-                        *ngIf="headerTemplate"
-                        [ngTemplateOutlet]="headerTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+          </span>
+          @if (event) {
+            <div class="k-card-inner">
+              <kendo-card-header>
+                @if (headerTemplate) {
+                  <ng-template
+                    [ngTemplateOutlet]="headerTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{ $implicit: event, index: index}">
                     >
-                    </ng-template>
-
-                    <div kendoCardTitle *ngIf="!headerTemplate">
-                        <span class="k-event-title">{{ event.title }}</span>
-                        <button 
-                            kendoButton
-                            *ngIf="collapsible && orientation === 'vertical'"
-                            [icon]="calloutFontIcon"
-                            [svgIcon]="calloutSvgIcon"
-                            class="k-event-collapse"
-                            fillMode="flat"
-                            [attr.aria-hidden]="true"
-                            tabindex="-1"
-                            type="button"
-                        ></button>
-                    </div>
-                    <div kendoCardSubtitle  *ngIf="!headerTemplate">{{ event.subtitle }}</div>
-                </kendo-card-header>
-
+                  </ng-template>
+                }
+                @if (!headerTemplate) {
+                  <div kendoCardTitle>
+                    <span class="k-event-title">{{ event.title }}</span>
+                    @if (collapsible && orientation === 'vertical') {
+                      <button
+                        kendoButton
+                        [icon]="calloutFontIcon"
+                        [svgIcon]="calloutSvgIcon"
+                        class="k-event-collapse"
+                        fillMode="flat"
+                        [attr.aria-hidden]="true"
+                        tabindex="-1"
+                        type="button"
+                      ></button>
+                    }
+                  </div>
+                }
+                @if (!headerTemplate) {
+                  <div kendoCardSubtitle >{{ event.subtitle }}</div>
+                }
+              </kendo-card-header>
+              @if (event.description || event.images) {
                 <kendo-card-body
-                    *ngIf="event.description || event.images"
-                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                    (@toggle.start)="animationStart()"
-                    (@toggle.done)="animationDone($event)"
-                >
+                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                  (@toggle.start)="animationStart()"
+                  (@toggle.done)="animationDone($event)"
+                  >
+                  @if (bodyTemplate) {
                     <ng-template
-                        *ngIf="bodyTemplate"
-                        [ngTemplateOutlet]="bodyTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                    >
+                      [ngTemplateOutlet]="bodyTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                      >
                     </ng-template>
-
-                    <div *ngIf="!bodyTemplate" class="k-card-description">
-                        <p *ngIf="event.description">{{ event.description }}</p>
-                        <ng-container *ngFor="let image of event.images">
-                            <img *ngIf="image.alt" kendoCardMedia [src]="image.src" [alt]="image.alt" />
-                            <img *ngIf="!image.alt" kendoCardMedia [src]="image.src" />
-                        </ng-container>
+                  }
+                  @if (!bodyTemplate) {
+                    <div class="k-card-description">
+                      @if (event.description) {
+                        <p>{{ event.description }}</p>
+                      }
+                      @for (image of event.images; track image) {
+                        @if (image.alt) {
+                          <img kendoCardMedia [src]="image.src" [alt]="image.alt" />
+                        }
+                        @if (!image.alt) {
+                          <img kendoCardMedia [src]="image.src" />
+                        }
+                      }
                     </div>
+                  }
                 </kendo-card-body>
-
+              }
+              @if (event.actions) {
                 <kendo-card-actions
-                    *ngIf="event.actions"
-                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                >
+                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                  >
+                  @if (actionsTemplate) {
                     <ng-template
-                        *ngIf="actionsTemplate"
-                        [ngTemplateOutlet]="actionsTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                    >
+                      [ngTemplateOutlet]="actionsTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                      >
                     </ng-template>
-
-                    <ng-container *ngIf="!actionsTemplate">
-                        <a *ngFor="let action of event.actions"
-                            [href]="action.url"
-                            [target]="action.target === 'blank' ? '_blank' : '_self'"
-                            (click)="onActionClick($event)"
-                            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
-                            role="button"
+                  }
+                  @if (!actionsTemplate) {
+                    @for (action of event.actions; track action) {
+                      <a
+                        [href]="action.url"
+                        [target]="action.target === 'blank' ? '_blank' : '_self'"
+                        (click)="onActionClick($event)"
+                        class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
+                        role="button"
                         >
-                            {{ action.text }}
-                        </a>
-                    </ng-container>
+                        {{ action.text }}
+                      </a>
+                    }
+                  }
                 </kendo-card-actions>
+              }
             </div>
+          }
         </kendo-card>
-    `,
+        `,
                     standalone: true,
-                    imports: [CardComponent, NgStyle, NgClass, NgIf, CardHeaderComponent, NgTemplateOutlet, CardTitleDirective, ButtonComponent, CardSubtitleDirective, CardBodyComponent, NgFor, CardMediaDirective, CardActionsComponent]
+                    imports: [CardComponent, NgStyle, NgClass, CardHeaderComponent, NgTemplateOutlet, CardTitleDirective, ButtonComponent, CardSubtitleDirective, CardBodyComponent, CardMediaDirective, CardActionsComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.TimelineService }, { type: i0.Renderer2 }], propDecorators: { event: [{
                 type: Input