@progress/kendo-angular-layout 21.4.1 → 22.0.0

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

@@ -1,203 +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, Input, QueryList, Renderer2, ViewChildren } from '@angular/core';
-import { guid } from '@progress/kendo-angular-common';
-import { TimelineCardComponent } from './timeline-card.component';
-import { Subscription } from 'rxjs';
-import { TimelineCardBodyTemplateDirective } from './templates/timeline-card-body.directive';
-import { TimelineCardHeaderTemplateDirective } from './templates/timeline-card-header.directive';
-import { TimelineCardActionsTemplateDirective } from './templates/timeline-card-actions.directive';
-import { DatePipe } from '@progress/kendo-angular-intl';
-import { NgClass } from '@angular/common';
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export class TimelineVerticalComponent {
-    renderer;
-    events = [];
-    alterMode;
-    collapsibleEvents;
-    navigable;
-    showDateLabels;
-    animationDuration;
-    eventWidth;
-    dateFormat;
-    headerTemplate;
-    bodyTemplate;
-    actionsTemplate;
-    cards;
-    dateElementRefs;
-    innerDateElementRefs;
-    subscriptions = new Subscription();
-    constructor(renderer) {
-        this.renderer = renderer;
-    }
-    ngAfterViewInit() {
-        this.ariaDescribedByAllEvents();
-        this.subscriptions.add(this.innerDateElementRefs.changes.subscribe(() => {
-            if (this.innerDateElementRefs?.length > 0) {
-                this.ariaDescribedByAllEvents();
-            }
-            else {
-                this.removeAriaDescribedBy();
-            }
-        }));
-    }
-    expand(index) {
-        if (index < 0 || index >= this.cards.length) {
-            return;
-        }
-        this.cards.get(index).expand();
-    }
-    collapse(index) {
-        if (index < 0 || index >= this.cards.length) {
-            return;
-        }
-        this.cards.get(index).collapse();
-    }
-    ariaDescribedByAllEvents() {
-        this.cards?.forEach((card, index) => {
-            const innerCard = card.element.nativeElement.querySelector('.k-card');
-            const innerDate = this.dateElementRefs.get(index).nativeElement.querySelector('.k-timeline-date');
-            if (innerDate) {
-                this.assignAriaDescribedBy(innerCard, innerDate);
-            }
-        });
-    }
-    removeAriaDescribedBy() {
-        this.cards?.forEach(card => {
-            const innerCard = card.element.nativeElement.querySelector('.k-card');
-            this.renderer.removeAttribute(innerCard, 'aria-describedby');
-        });
-    }
-    assignAriaDescribedBy(cardElement, dateElement) {
-        const dateLabelId = `k-${guid()}`;
-        this.renderer.setAttribute(dateElement, 'id', dateLabelId);
-        this.renderer.setAttribute(cardElement, 'aria-describedby', dateLabelId);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineVerticalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineVerticalComponent, isStandalone: true, selector: "kendo-timeline-vertical", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventWidth: "eventWidth", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "cards", predicate: ["card"], descendants: true }, { propertyName: "dateElementRefs", predicate: ["dateWrap"], descendants: true }, { propertyName: "innerDateElementRefs", predicate: ["innerDate"], descendants: true }], exportAs: ["kendoTimelineVertical"], ngImport: i0, template: `
-        @if (events && events.length > 0) {
-          <ul>
-            @for (event of events; track event; let i = $index) {
-              @if (event.flag) {
-                <li class="k-timeline-flag-wrap">
-                  <span class="k-timeline-flag">{{ event.flag }}</span>
-                </li>
-              }
-              <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
-                <div class="k-timeline-date-wrap" #dateWrap>
-                  @if (showDateLabels) {
-                    <span class="k-timeline-date" #innerDate>
-                      {{ event.date | kendoDate: dateFormat }}
-                    </span>
-                  }
-                </div>
-                <span class="k-timeline-circle"></span>
-                <kendo-timeline-card
-                  #card
-                  [event]="event"
-                  [expanded]="event.expanded || !collapsibleEvents"
-                  [collapsible]="collapsibleEvents"
-                  [reversed]="alterMode && i % 2 === 0"
-                  [tabIndex]="'0'"
-                  [navigable]="navigable"
-                  [animationDuration]="animationDuration"
-                  [headerTemplate]="headerTemplate"
-                  [bodyTemplate]="bodyTemplate"
-                  [actionsTemplate]="actionsTemplate"
-                  [index]="i"
-                  [eventWidth]="eventWidth"
-                  orientation="vertical"
-                  >
-                </kendo-timeline-card>
-              </li>
-            }
-          </ul>
-        }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineVerticalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [],
-                    exportAs: 'kendoTimelineVertical',
-                    selector: 'kendo-timeline-vertical',
-                    template: `
-        @if (events && events.length > 0) {
-          <ul>
-            @for (event of events; track event; let i = $index) {
-              @if (event.flag) {
-                <li class="k-timeline-flag-wrap">
-                  <span class="k-timeline-flag">{{ event.flag }}</span>
-                </li>
-              }
-              <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
-                <div class="k-timeline-date-wrap" #dateWrap>
-                  @if (showDateLabels) {
-                    <span class="k-timeline-date" #innerDate>
-                      {{ event.date | kendoDate: dateFormat }}
-                    </span>
-                  }
-                </div>
-                <span class="k-timeline-circle"></span>
-                <kendo-timeline-card
-                  #card
-                  [event]="event"
-                  [expanded]="event.expanded || !collapsibleEvents"
-                  [collapsible]="collapsibleEvents"
-                  [reversed]="alterMode && i % 2 === 0"
-                  [tabIndex]="'0'"
-                  [navigable]="navigable"
-                  [animationDuration]="animationDuration"
-                  [headerTemplate]="headerTemplate"
-                  [bodyTemplate]="bodyTemplate"
-                  [actionsTemplate]="actionsTemplate"
-                  [index]="i"
-                  [eventWidth]="eventWidth"
-                  orientation="vertical"
-                  >
-                </kendo-timeline-card>
-              </li>
-            }
-          </ul>
-        }
-        `,
-                    standalone: true,
-                    imports: [NgClass, TimelineCardComponent, DatePipe]
-                }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { events: [{
-                type: Input
-            }], alterMode: [{
-                type: Input
-            }], collapsibleEvents: [{
-                type: Input
-            }], navigable: [{
-                type: Input
-            }], showDateLabels: [{
-                type: Input
-            }], animationDuration: [{
-                type: Input
-            }], eventWidth: [{
-                type: Input
-            }], dateFormat: [{
-                type: Input
-            }], headerTemplate: [{
-                type: Input
-            }], bodyTemplate: [{
-                type: Input
-            }], actionsTemplate: [{
-                type: Input
-            }], cards: [{
-                type: ViewChildren,
-                args: ['card']
-            }], dateElementRefs: [{
-                type: ViewChildren,
-                args: ['dateWrap']
-            }], innerDateElementRefs: [{
-                type: ViewChildren,
-                args: ['innerDate']
-            }] } });

package/esm2022/timeline/timeline.component.mjs

@@ -1,491 +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, ContentChildren, EventEmitter, HostBinding, Input, Output, QueryList, ViewChild } from '@angular/core';
-import { defaultModelFields } from './models/default-model-fields';
-import { processItems } from './util';
-import { TimelineHorizontalComponent } from './timeline-horizontal.component';
-import { TimelineVerticalComponent } from './timeline-vertical.component';
-import { TimelineService } from './timeline.service';
-import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { TimelineCardBodyTemplateDirective } from './templates/timeline-card-body.directive';
-import { TimelineCardHeaderTemplateDirective } from './templates/timeline-card-header.directive';
-import { Subscription } from 'rxjs';
-import { TimelineCardActionsTemplateDirective } from './templates/timeline-card-actions.directive';
-import { isPresent } from '@progress/kendo-angular-common';
-import { LocalizedTimelineMessagesDirective } from './localization/localized-messages.directive';
-import * as i0 from "@angular/core";
-import * as i1 from "./timeline.service";
-const DEFAULT_HORIZONTAL_ANIMATION_DURATION = 400;
-const DEFAULT_VERTICAL_ANIMATION_DURATION = 300;
-const DEFAULT_EVENT_WIDTH = 400;
-const DEFAULT_EVENT_HEIGHT = 600;
-const DEFAULT_DATE_FORMAT = 'MMMM dd, yyyy';
-/**
- * Represents the [Kendo UI Timeline component for Angular]({% slug overview_timeline %}).
- *
- * @remarks
- * Supported children components are: {@link TimelineCustomMessagesComponent}.
- */
-export class TimelineComponent {
-    timelineService;
-    /**
-     * An array of event instances which will be shown by the Timeline.
-     */
-    set events(events) {
-        if (!isPresent(events)) {
-            return;
-        }
-        this.originalData = events;
-        this._events = processItems(this.originalData, this.modelFields);
-        this.updateEvents();
-    }
-    get events() {
-        return this._events;
-    }
-    /**
-     * The names of the model fields from which the Timeline will read its data.
-     */
-    set modelFields(value) {
-        this._modelFields = { ...defaultModelFields, ...value };
-        if (this.originalData) {
-            this.events = this.originalData;
-        }
-    }
-    get modelFields() {
-        return this._modelFields;
-    }
-    /**
-     * Specifies the orientation of the axis.
-     *
-     * @default 'vertical'
-     */
-    orientation = 'vertical';
-    /**
-     * Specifies whether to render events alternatingly on both sides of the axis.
-     * Applicable when `orientation` is set to `vertical`.
-     *
-     * @default false
-     */
-    alterMode = false;
-    /**
-     * Specifies whether the event cards can be collapsed.
-     *
-     * @default true
-     */
-    collapsibleEvents = true;
-    /**
-     * Specifies whether the user can use dedicated shortcuts to interact with the Timeline.
-     *
-     * @default true
-     */
-    navigable = true;
-    /**
-     * Specifies whether an event's date label will be visible.
-     *
-     * @default true
-     */
-    showDateLabels = true;
-    /**
-     * Specifies the time for sliding to the next event in `horizontal` mode and the time for collapsing the event in `vertical` mode.
-     * The default animation duration values are `300ms` for `horizontal` mode and `400ms` for `vertical` mode.
-     *
-     * @default true
-     */
-    animation;
-    /**
-     * Specifies the order of the Timeline events.
-     * `asc` - chronological order
-     * `desc` - reverse-chronological order
-     *
-     * @default 'asc'
-     */
-    set eventsOrder(order) {
-        if (order === this._eventsOrder) {
-            return;
-        }
-        this._eventsOrder = order;
-        this.updateEvents();
-    }
-    get eventsOrder() {
-        return this._eventsOrder;
-    }
-    /**
-     * Sets a specific width for the event.
-     * This setting is supported only in `vertical` mode.
-     *
-     * @default 400
-     */
-    get eventWidth() {
-        return this._eventWidth;
-    }
-    set eventWidth(value) {
-        if (value) {
-            this._eventWidth = value;
-        }
-        else {
-            this._eventWidth = DEFAULT_EVENT_WIDTH;
-        }
-    }
-    /**
-     * Sets a specific height for the event.
-     * This setting is supported only in `horizontal` mode.
-     *
-     * @default 600
-     */
-    get eventHeight() {
-        return this._eventHeight;
-    }
-    set eventHeight(value) {
-        if (value) {
-            this._eventHeight = value;
-        }
-        else {
-            this._eventHeight = DEFAULT_EVENT_HEIGHT;
-        }
-    }
-    /**
-     * @hidden
-     */
-    get animationDuration() {
-        if (typeof this.animation === 'number') {
-            return this.animation;
-        }
-        if ((typeof this.animation === 'boolean' && this.animation) || !isPresent(this.animation)) {
-            return this.orientation === 'horizontal' ? DEFAULT_HORIZONTAL_ANIMATION_DURATION : DEFAULT_VERTICAL_ANIMATION_DURATION;
-        }
-        return 0;
-    }
-    /**
-     * Specifies the date format for displaying the event date.
-     *
-     * @default 'MMMM dd, yyyy'
-     */
-    set dateFormat(value) {
-        if (isPresent(value) && value !== '') {
-            this._dateFormat = value;
-        }
-        else {
-            this._dateFormat = DEFAULT_DATE_FORMAT;
-        }
-    }
-    get dateFormat() {
-        return this._dateFormat;
-    }
-    hostClass = true;
-    get verticalClass() {
-        return this.orientation === 'vertical';
-    }
-    get horizontalClass() {
-        return this.orientation === 'horizontal';
-    }
-    get alternatingClass() {
-        return this.alterMode === true && this.orientation === 'vertical';
-    }
-    get collapsibleClass() {
-        return this.collapsibleEvents === true && this.orientation === 'vertical';
-    }
-    /**
-     * @hidden
-     */
-    timelineHorizontal;
-    /**
-     * @hidden
-     */
-    timelineVertical;
-    /**
-     * @hidden
-     */
-    cardHeaderTemplate;
-    /**
-     * @hidden
-     */
-    cardBodyTemplate;
-    /**
-     * @hidden
-     */
-    cardActionsTemplate;
-    /**
-     * Fires when a card is toggled.
-     * This event is supported only in `vertical` mode.
-     */
-    onToggle = new EventEmitter();
-    /**
-     * Fires when a card's action is clicked.
-     */
-    onActionClick = new EventEmitter();
-    /**
-     * Fires when the left or right arrow is clicked.
-     * This event is supported only in `horizontal` mode.
-     */
-    onNavigate = new EventEmitter();
-    /**
-     * @hidden
-     */
-    headerTemplate;
-    /**
-     * @hidden
-     */
-    bodyTemplate;
-    /**
-     * @hidden
-     */
-    actionsTemplate;
-    _events = [];
-    _modelFields = defaultModelFields;
-    _eventWidth = DEFAULT_EVENT_WIDTH;
-    _eventHeight = DEFAULT_EVENT_HEIGHT;
-    _dateFormat = DEFAULT_DATE_FORMAT;
-    originalData = [];
-    _eventsOrder = 'asc';
-    subscriptions = new Subscription();
-    constructor(timelineService) {
-        this.timelineService = timelineService;
-        this.timelineService.timeline = this;
-    }
-    ngAfterContentInit() {
-        this.initTemplates();
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    /**
-     * Switches to the previous portion of events.
-     * This method is supported only in `horizontal` mode.
-     */
-    previous() {
-        this.timelineHorizontal?.previous();
-    }
-    /**
-     * Switches to the next portion of events.
-     * This method is supported only in `horizontal` mode.
-     */
-    next() {
-        this.timelineHorizontal?.next();
-    }
-    /**
-     * Open event details.
-     * This method is supported only in `horizontal` mode.
-     */
-    open(index) {
-        this.timelineHorizontal?.open(index);
-    }
-    /**
-     * Expands an event.
-     * This method is supported only in `vertical` mode.
-     */
-    expand(index) {
-        this.timelineVertical?.expand(index);
-    }
-    /**
-     * Collapses an event.
-     * This method is supported only in `vertical` mode.
-     */
-    collapse(index) {
-        this.timelineVertical?.collapse(index);
-    }
-    updateEvents() {
-        const sortOrder = this._eventsOrder === 'asc' ? 1 : -1;
-        this._events = [...this._events].sort((a, b) => {
-            return sortOrder * (a.date.getTime() - b.date.getTime());
-        });
-        if (this._events.length > 0) {
-            let flag = this._events[0].date.getFullYear() - sortOrder;
-            this._events.forEach((event) => {
-                if (event.date.getFullYear() === flag) {
-                    event.flag = null;
-                }
-                else {
-                    flag = event.date.getFullYear();
-                    event.flag = flag;
-                }
-            });
-        }
-    }
-    initTemplates() {
-        this.headerTemplate = this.cardHeaderTemplate?.first;
-        this.bodyTemplate = this.cardBodyTemplate?.first;
-        this.actionsTemplate = this.cardActionsTemplate?.first;
-        this.subscriptions.add(this.cardHeaderTemplate?.changes.subscribe(() => {
-            this.headerTemplate = this.cardHeaderTemplate?.first || null;
-        }));
-        this.subscriptions.add(this.cardBodyTemplate?.changes.subscribe(() => {
-            this.bodyTemplate = this.cardBodyTemplate?.first || null;
-        }));
-        this.subscriptions.add(this.cardActionsTemplate?.changes.subscribe(() => {
-            this.actionsTemplate = this.cardActionsTemplate?.first || null;
-        }));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, deps: [{ token: i1.TimelineService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineComponent, isStandalone: true, selector: "kendo-timeline", inputs: { events: "events", modelFields: "modelFields", orientation: "orientation", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animation: "animation", eventsOrder: "eventsOrder", eventWidth: "eventWidth", eventHeight: "eventHeight", dateFormat: "dateFormat" }, outputs: { onToggle: "onToggle", onActionClick: "onActionClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-timeline": "this.hostClass", "class.k-timeline-vertical": "this.verticalClass", "class.k-timeline-horizontal": "this.horizontalClass", "class.k-timeline-alternating": "this.alternatingClass", "class.k-timeline-collapsible": "this.collapsibleClass" } }, providers: [
-            TimelineService,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.timeline'
-            }
-        ], queries: [{ propertyName: "cardHeaderTemplate", predicate: TimelineCardHeaderTemplateDirective }, { propertyName: "cardBodyTemplate", predicate: TimelineCardBodyTemplateDirective }, { propertyName: "cardActionsTemplate", predicate: TimelineCardActionsTemplateDirective }], viewQueries: [{ propertyName: "timelineHorizontal", first: true, predicate: TimelineHorizontalComponent, descendants: true }, { propertyName: "timelineVertical", first: true, predicate: TimelineVerticalComponent, descendants: true }], exportAs: ["kendoTimeline"], ngImport: i0, template: `
-        <ng-container kendoTimelineLocalizedMessages
-          i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
-          previous="previous"
-          >
-        </ng-container>
-        <ng-container kendoTimelineLocalizedMessages
-          i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
-          next="next"
-          >
-        </ng-container>
-        @if (orientation === 'vertical') {
-          <kendo-timeline-vertical
-            [events]="events"
-            [alterMode]="alterMode"
-            [collapsibleEvents]="collapsibleEvents"
-            [navigable]="navigable"
-            [showDateLabels]="showDateLabels"
-            [animationDuration]="animationDuration"
-            [eventWidth]="eventWidth"
-            [dateFormat]="dateFormat"
-            [headerTemplate]="headerTemplate"
-            [bodyTemplate]="bodyTemplate"
-            [actionsTemplate]="actionsTemplate"
-            >
-          </kendo-timeline-vertical>
-        }
-        @if (orientation === 'horizontal') {
-          <kendo-timeline-horizontal
-            [events]="events"
-            [collapsibleEvents]="false"
-            [navigable]="navigable"
-            [showDateLabels]="showDateLabels"
-            [animationDuration]="animationDuration"
-            [eventHeight]="eventHeight"
-            [dateFormat]="dateFormat"
-            [headerTemplate]="headerTemplate"
-            [bodyTemplate]="bodyTemplate"
-            [actionsTemplate]="actionsTemplate"
-            >
-          </kendo-timeline-horizontal>
-        }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]" }, { kind: "component", type: TimelineVerticalComponent, selector: "kendo-timeline-vertical", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventWidth", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineVertical"] }, { kind: "component", type: TimelineHorizontalComponent, selector: "kendo-timeline-horizontal", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventHeight", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineHorizontal"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        TimelineService,
-                        LocalizationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.timeline'
-                        }
-                    ],
-                    exportAs: 'kendoTimeline',
-                    selector: 'kendo-timeline',
-                    template: `
-        <ng-container kendoTimelineLocalizedMessages
-          i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
-          previous="previous"
-          >
-        </ng-container>
-        <ng-container kendoTimelineLocalizedMessages
-          i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
-          next="next"
-          >
-        </ng-container>
-        @if (orientation === 'vertical') {
-          <kendo-timeline-vertical
-            [events]="events"
-            [alterMode]="alterMode"
-            [collapsibleEvents]="collapsibleEvents"
-            [navigable]="navigable"
-            [showDateLabels]="showDateLabels"
-            [animationDuration]="animationDuration"
-            [eventWidth]="eventWidth"
-            [dateFormat]="dateFormat"
-            [headerTemplate]="headerTemplate"
-            [bodyTemplate]="bodyTemplate"
-            [actionsTemplate]="actionsTemplate"
-            >
-          </kendo-timeline-vertical>
-        }
-        @if (orientation === 'horizontal') {
-          <kendo-timeline-horizontal
-            [events]="events"
-            [collapsibleEvents]="false"
-            [navigable]="navigable"
-            [showDateLabels]="showDateLabels"
-            [animationDuration]="animationDuration"
-            [eventHeight]="eventHeight"
-            [dateFormat]="dateFormat"
-            [headerTemplate]="headerTemplate"
-            [bodyTemplate]="bodyTemplate"
-            [actionsTemplate]="actionsTemplate"
-            >
-          </kendo-timeline-horizontal>
-        }
-        `,
-                    standalone: true,
-                    imports: [LocalizedTimelineMessagesDirective, TimelineVerticalComponent, TimelineHorizontalComponent]
-                }]
-        }], ctorParameters: () => [{ type: i1.TimelineService }], propDecorators: { events: [{
-                type: Input
-            }], modelFields: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], alterMode: [{
-                type: Input
-            }], collapsibleEvents: [{
-                type: Input
-            }], navigable: [{
-                type: Input
-            }], showDateLabels: [{
-                type: Input
-            }], animation: [{
-                type: Input
-            }], eventsOrder: [{
-                type: Input
-            }], eventWidth: [{
-                type: Input
-            }], eventHeight: [{
-                type: Input
-            }], dateFormat: [{
-                type: Input
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.k-timeline']
-            }], verticalClass: [{
-                type: HostBinding,
-                args: ['class.k-timeline-vertical']
-            }], horizontalClass: [{
-                type: HostBinding,
-                args: ['class.k-timeline-horizontal']
-            }], alternatingClass: [{
-                type: HostBinding,
-                args: ['class.k-timeline-alternating']
-            }], collapsibleClass: [{
-                type: HostBinding,
-                args: ['class.k-timeline-collapsible']
-            }], timelineHorizontal: [{
-                type: ViewChild,
-                args: [TimelineHorizontalComponent]
-            }], timelineVertical: [{
-                type: ViewChild,
-                args: [TimelineVerticalComponent]
-            }], cardHeaderTemplate: [{
-                type: ContentChildren,
-                args: [TimelineCardHeaderTemplateDirective, { descendants: false }]
-            }], cardBodyTemplate: [{
-                type: ContentChildren,
-                args: [TimelineCardBodyTemplateDirective, { descendants: false }]
-            }], cardActionsTemplate: [{
-                type: ContentChildren,
-                args: [TimelineCardActionsTemplateDirective, { descendants: false }]
-            }], onToggle: [{
-                type: Output
-            }], onActionClick: [{
-                type: Output
-            }], onNavigate: [{
-                type: Output
-            }] } });