@progress/kendo-angular-layout 21.4.1 → 22.0.0-develop.1

package/esm2022/timeline/localization/messages.mjs

@@ -1,33 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Input } from '@angular/core';
-import { ComponentMessages } from '@progress/kendo-angular-l10n';
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export class TimelineMessages extends ComponentMessages {
-    /**
-     * The title of the previous button in horizontal orientation.
-     */
-    previous;
-    /**
-     * The title of the next button in horizontal orientation.
-     */
-    next;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TimelineMessages, selector: "kendo-timeline-messages-base", inputs: { previous: "previous", next: "next" }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineMessages, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'kendo-timeline-messages-base'
-                }]
-        }], propDecorators: { previous: [{
-                type: Input
-            }], next: [{
-                type: Input
-            }] } });

package/esm2022/timeline/models/anchor-target.mjs

@@ -1,5 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export {};

package/esm2022/timeline/models/default-model-fields.mjs

@@ -1,16 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- */
-export const defaultModelFields = {
-    title: 'title',
-    subtitle: 'subtitle',
-    description: 'description',
-    date: 'date',
-    expanded: 'expanded',
-    images: 'images',
-    actions: 'actions',
-};

package/esm2022/timeline/models/events-order.mjs

@@ -1,5 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export {};

package/esm2022/timeline/models/model-fields.mjs

@@ -1,5 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export {};

package/esm2022/timeline/models/timeline-event.mjs

@@ -1,5 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export {};

package/esm2022/timeline/templates/timeline-card-actions.directive.mjs

@@ -1,40 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Optional, TemplateRef } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Specifies the actions of each timeline card. To define an actions template, nest an `<ng-template>` tag
- * with the `kendoTimelineCardActionsTemplate` directive inside the `<kendo-timeline>` tag.
- *
- * The following values are available as context variables:
- * - `let-event="event"` (`TimelineEvent`)&mdash;The current card's event. Also available as implicit context variable.
- * - `let-index="index"` (`number`)&mdash;The current event index.
- *
- * @example
- * ```html
- * <kendo-timeline [events]="events">
- *   <ng-template kendoTimelineCardActionsTemplate let-event let-index="index">
- *     Content for the actions of the card with index {{ index }} and event {{ event.title }}.
- *   </ng-template>
- * </kendo-timeline>
- * ```
- */
-export class TimelineCardActionsTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineCardActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TimelineCardActionsTemplateDirective, isStandalone: true, selector: "[kendoTimelineCardActionsTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineCardActionsTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoTimelineCardActionsTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }] });

package/esm2022/timeline/templates/timeline-card-body.directive.mjs

@@ -1,40 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Optional, TemplateRef } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Specifies the body of each timeline card. To define a body template, nest an `<ng-template>` tag
- * with the `kendoTimelineCardBodyTemplate` directive inside the `<kendo-timeline>` tag.
- *
- * The following values are available as context variables:
- * - `let-event="event"` (`TimelineEvent`)&mdash;The current card's event. Also available as implicit context variable.
- * - `let-index="index"` (`number`)&mdash;The current event index.
- *
- * @example
- * ```html
- * <kendo-timeline [events]="events">
- *   <ng-template kendoTimelineCardBodyTemplate let-event let-index="index">
- *     Component for the body of the card with index {{ index }} and event {{ event.title }}.
- *   </ng-template>
- * </kendo-timeline>
- * ```
- */
-export class TimelineCardBodyTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineCardBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TimelineCardBodyTemplateDirective, isStandalone: true, selector: "[kendoTimelineCardBodyTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineCardBodyTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoTimelineCardBodyTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }] });

package/esm2022/timeline/templates/timeline-card-header.directive.mjs

@@ -1,41 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Optional, TemplateRef } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Specifies the header of each timeline card. To define a header template, nest an `<ng-template>` tag
- * with the `kendoTimelineCardHeaderTemplate` directive inside the `<kendo-timeline>` tag.
- *
- * The following values are available as context variables:
- * - `let-event="event"` (`TimelineEvent`)&mdash;The current card's event. Also available as implicit context variable.
- * - `let-index="index"` (`number`)&mdash;The current event index.
- *
- * @example
- * ```html
- * <kendo-timeline [events]="events">
- *   <ng-template kendoTimelineCardHeaderTemplate let-event let-index="index">
- *     <span class="k-event-title">Title: {{ event.title }}</span>
- *     <div kendoCardSubtitle>Event number {{ index }}</div>
- *   </ng-template>
- * </kendo-timeline>
- * ```
- */
-export class TimelineCardHeaderTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineCardHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TimelineCardHeaderTemplateDirective, isStandalone: true, selector: "[kendoTimelineCardHeaderTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineCardHeaderTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoTimelineCardHeaderTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }] });

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

@@ -1,451 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, HostBinding, HostListener, Input, Renderer2, ViewChild } from '@angular/core';
-import { chevronRightIcon } from '@progress/kendo-svg-icons';
-import { Keys, isChanged } from '@progress/kendo-angular-common';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { TimelineService } from './timeline.service';
-import { TimelineCardHeaderTemplateDirective } from './templates/timeline-card-header.directive';
-import { TimelineCardBodyTemplateDirective } from './templates/timeline-card-body.directive';
-import { TimelineCardActionsTemplateDirective } from './templates/timeline-card-actions.directive';
-import { CardActionsComponent } from '../card/card-actions.component';
-import { CardMediaDirective } from '../card/directives/card-media.directive';
-import { CardBodyComponent } from '../card/card-body.component';
-import { CardSubtitleDirective } from '../card/directives/card-subtitle.directive';
-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, NgTemplateOutlet } from '@angular/common';
-import { CardComponent } from '../card/card.component';
-import * as i0 from "@angular/core";
-import * as i1 from "./timeline.service";
-/**
- * @hidden
- */
-export class TimelineCardComponent {
-    element;
-    timelineService;
-    renderer;
-    event;
-    expanded = false;
-    collapsible = true;
-    reversed = false;
-    orientation;
-    navigable;
-    tabIndex;
-    animationDuration;
-    index;
-    eventWidth;
-    eventHeight;
-    headerTemplate;
-    bodyTemplate;
-    actionsTemplate;
-    set calloutStyle(value) {
-        // applies only to horizontal orientation where the callout points upwards
-        if (!this.calloutElementRef || !this.calloutElementRef.nativeElement.classList.contains('k-callout-n')) {
-            return;
-        }
-        this.calloutElementRef.nativeElement.style.left = value?.left;
-    }
-    calloutElementRef;
-    hostClass = true;
-    get collapsedClass() {
-        return !this.expanded && !this.animationInProgress && this.animationState === 'collapsed';
-    }
-    onComponentKeyDown(event) {
-        if (!this.navigable) {
-            return;
-        }
-        if (event.code === Keys.Space || event.code === Keys.Enter || event.code === Keys.NumpadEnter) {
-            event.preventDefault();
-            if (this.collapsible && this.orientation === 'vertical') {
-                this.expanded = !this.expanded;
-            }
-        }
-    }
-    get role() {
-        return this.orientation === 'vertical' ? 'button' : 'tabpanel';
-    }
-    get ariaLive() {
-        return this.orientation === 'vertical' ? 'polite' : null;
-    }
-    get ariaExpanded() {
-        return this.orientation === 'vertical' ? this.expanded : null;
-    }
-    calloutSvgIcon = chevronRightIcon;
-    calloutFontIcon = 'arrow-chevron-right';
-    animationState = this.expanded ? 'expanded' : 'collapsed';
-    animationInProgress = false;
-    constructor(element, timelineService, renderer) {
-        this.element = element;
-        this.timelineService = timelineService;
-        this.renderer = renderer;
-    }
-    ngAfterViewInit() {
-        this.makeOverflowVisible();
-    }
-    ngOnChanges(changes) {
-        if (isChanged('collapsible', changes, false)) {
-            if (!this.collapsible) {
-                this.expanded = true;
-            }
-        }
-    }
-    toggle() {
-        if (this.orientation === 'vertical') {
-            this.expanded = this.collapsible ? !this.expanded : true;
-            this.timelineService.onToggle(this.index);
-        }
-    }
-    expand() {
-        if (!this.expanded) {
-            this.expanded = true;
-            this.timelineService.onToggle(this.index);
-        }
-    }
-    collapse() {
-        if (!this.collapsible || !this.expanded) {
-            return;
-        }
-        this.expanded = false;
-        this.timelineService.onToggle(this.index);
-    }
-    onActionClick(event) {
-        event.stopPropagation();
-        this.timelineService.onActionClick(this.index);
-    }
-    animationStart() {
-        this.animationInProgress = true;
-    }
-    animationDone(event) {
-        this.animationInProgress = false;
-        if (event.toState === 'expanded' && event.fromState !== 'expanded') {
-            this.animationState = 'expanded';
-            this.makeOverflowVisible();
-        }
-        else if (event.toState === 'collapsed' && event.fromState !== 'collapsed') {
-            this.animationState = 'collapsed';
-        }
-    }
-    makeOverflowVisible() {
-        if (this.orientation === 'vertical') {
-            return;
-        }
-        const cardBody = this.element?.nativeElement.querySelector('.k-card-body');
-        if (cardBody) {
-            this.renderer.setStyle(cardBody, 'overflow', 'auto');
-        }
-    }
-    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: "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"
-                [ngClass]="{
-                    'k-callout-n': orientation === 'horizontal',
-                    'k-callout-w': orientation === 'vertical' && !this.reversed,
-                    'k-callout-e': orientation === 'vertical' && this.reversed
-                }"
-            >
-          </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>
-                }
-                @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
-                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                  (@toggle.start)="animationStart()"
-                  (@toggle.done)="animationDone($event)"
-                  >
-                  @if (bodyTemplate) {
-                    <ng-template
-                      [ngTemplateOutlet]="bodyTemplate?.templateRef"
-                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                      >
-                    </ng-template>
-                  }
-                  @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
-                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                  >
-                  @if (actionsTemplate) {
-                    <ng-template
-                      [ngTemplateOutlet]="actionsTemplate?.templateRef"
-                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                      >
-                    </ng-template>
-                  }
-                  @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>
-                    }
-                  }
-                </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: "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',
-                    'overflow-y': 'hidden',
-                    display: 'none'
-                })),
-                state('expanded', style({
-                    height: '*',
-                    'overflow-y': 'hidden',
-                    display: 'block'
-                })),
-                transition('collapsed <=> expanded', [
-                    animate('{{animationDuration}}ms')
-                ], { params: { animationDuration: '400' } }),
-            ])
-        ] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineCardComponent, decorators: [{
-            type: Component,
-            args: [{
-                    animations: [
-                        trigger('toggle', [
-                            state('collapsed', style({
-                                height: '0',
-                                'overflow-y': 'hidden',
-                                display: 'none'
-                            })),
-                            state('expanded', style({
-                                height: '*',
-                                'overflow-y': 'hidden',
-                                display: 'block'
-                            })),
-                            transition('collapsed <=> expanded', [
-                                animate('{{animationDuration}}ms')
-                            ], { params: { animationDuration: '400' } }),
-                        ])
-                    ],
-                    providers: [],
-                    exportAs: 'kendoTimelineCard',
-                    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"
-                [ngClass]="{
-                    'k-callout-n': orientation === 'horizontal',
-                    'k-callout-w': orientation === 'vertical' && !this.reversed,
-                    'k-callout-e': orientation === 'vertical' && this.reversed
-                }"
-            >
-          </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>
-                }
-                @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
-                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                  (@toggle.start)="animationStart()"
-                  (@toggle.done)="animationDone($event)"
-                  >
-                  @if (bodyTemplate) {
-                    <ng-template
-                      [ngTemplateOutlet]="bodyTemplate?.templateRef"
-                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                      >
-                    </ng-template>
-                  }
-                  @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
-                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                  >
-                  @if (actionsTemplate) {
-                    <ng-template
-                      [ngTemplateOutlet]="actionsTemplate?.templateRef"
-                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                      >
-                    </ng-template>
-                  }
-                  @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>
-                    }
-                  }
-                </kendo-card-actions>
-              }
-            </div>
-          }
-        </kendo-card>
-        `,
-                    standalone: true,
-                    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
-            }], expanded: [{
-                type: Input
-            }], collapsible: [{
-                type: Input
-            }], reversed: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], navigable: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], animationDuration: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], eventWidth: [{
-                type: Input
-            }], eventHeight: [{
-                type: Input
-            }], headerTemplate: [{
-                type: Input
-            }], bodyTemplate: [{
-                type: Input
-            }], actionsTemplate: [{
-                type: Input
-            }], calloutStyle: [{
-                type: Input
-            }], calloutElementRef: [{
-                type: ViewChild,
-                args: ['callout']
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.k-timeline-card']
-            }], collapsedClass: [{
-                type: HostBinding,
-                args: ['class.k-collapsed']
-            }], onComponentKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });