@progress/kendo-angular-layout 16.0.0-develop.2 → 16.0.0-develop.5

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

@@ -0,0 +1,175 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 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 { 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 * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./timeline-card.component";
+import * as i3 from "@progress/kendo-angular-intl";
+/**
+ * @hidden
+ */
+export class TimelineVerticalComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.events = [];
+        this.subscriptions = new Subscription();
+    }
+    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);
+    }
+}
+TimelineVerticalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineVerticalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+TimelineVerticalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineVerticalComponent, 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: `
+        <ul *ngIf="events && events.length > 0">
+            <ng-container *ngFor="let event of events; let i = index">
+                <li class="k-timeline-flag-wrap" *ngIf="event.flag">
+                    <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>
+                        <span *ngIf="showDateLabels" 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>
+            </ng-container>
+        </ul>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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: i3.DatePipe, name: "kendoDate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineVerticalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [],
+                    exportAs: 'kendoTimelineVertical',
+                    selector: 'kendo-timeline-vertical',
+                    template: `
+        <ul *ngIf="events && events.length > 0">
+            <ng-container *ngFor="let event of events; let i = index">
+                <li class="k-timeline-flag-wrap" *ngIf="event.flag">
+                    <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>
+                        <span *ngIf="showDateLabels" 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>
+            </ng-container>
+        </ul>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ 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/esm2020/timeline/timeline.component.mjs

@@ -0,0 +1,418 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 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 * as i0 from "@angular/core";
+import * as i1 from "./timeline.service";
+import * as i2 from "@angular/common";
+import * as i3 from "./timeline-vertical.component";
+import * as i4 from "./timeline-horizontal.component";
+import * as i5 from "./localization/localized-messages.directive";
+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 %}).
+ */
+export class TimelineComponent {
+    constructor(timelineService) {
+        this.timelineService = timelineService;
+        /**
+         * Specifies the orientation of the axis.
+         *
+         * @default 'vertical'
+         */
+        this.orientation = 'vertical';
+        /**
+         * Specifies whether to render events alternatingly on both sides of the axis.
+         * Applicable when `orientation` is set to `vertical`.
+         *
+         * @default true
+         */
+        this.alterMode = true;
+        /**
+         * Specifies whether the event cards can be collapsed.
+         *
+         * @default true
+         */
+        this.collapsibleEvents = true;
+        /**
+         * Specifies whether the user can use dedicated shortcuts to interact with the Timeline.
+         *
+         * @default true
+         */
+        this.navigable = true;
+        /**
+         * Specifies whether an event's date label will be visible.
+         *
+         * @default true
+         */
+        this.showDateLabels = true;
+        this.hostClass = true;
+        /**
+         * Fires when a card is toggled.
+         * > This event is emitted in vertical mode only.
+         */
+        this.onToggle = new EventEmitter();
+        /**
+         * Fires when a card's action is clicked.
+         */
+        this.onActionClick = new EventEmitter();
+        /**
+         * Fires when the left or right arrow is clicked.
+         * > This event is emitted in horizontal mode only.
+         */
+        this.onNavigate = new EventEmitter();
+        this._events = [];
+        this._modelFields = defaultModelFields;
+        this._eventWidth = DEFAULT_EVENT_WIDTH;
+        this._eventHeight = DEFAULT_EVENT_HEIGHT;
+        this._dateFormat = DEFAULT_DATE_FORMAT;
+        this.originalData = [];
+        this.subscriptions = new Subscription();
+        this.timelineService.timeline = this;
+    }
+    /**
+     * 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._events.sort((a, b) => {
+            return a.date.getTime() - b.date.getTime();
+        });
+        if (this._events.length > 0) {
+            let flag = this._events[0].date.getFullYear() - 1;
+            this._events.forEach((event) => {
+                if (event.date.getFullYear() !== flag) {
+                    flag = event.date.getFullYear();
+                    event.flag = flag;
+                }
+            });
+        }
+    }
+    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;
+    }
+    /**
+     * 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) {
+            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;
+    }
+    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';
+    }
+    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);
+    }
+    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;
+        }));
+    }
+}
+TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineComponent, deps: [{ token: i1.TimelineService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineComponent, selector: "kendo-timeline", inputs: { events: "events", modelFields: "modelFields", orientation: "orientation", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animation: "animation", 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>
+        <kendo-timeline-vertical
+            *ngIf="orientation === '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>
+        <kendo-timeline-horizontal
+            *ngIf="orientation === '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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TimelineVerticalComponent, selector: "kendo-timeline-vertical", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventWidth", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineVertical"] }, { kind: "component", type: i4.TimelineHorizontalComponent, selector: "kendo-timeline-horizontal", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventHeight", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineHorizontal"] }, { kind: "directive", type: i5.LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", 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>
+        <kendo-timeline-vertical
+            *ngIf="orientation === '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>
+        <kendo-timeline-horizontal
+            *ngIf="orientation === 'horizontal'"
+            [events]="events"
+            [collapsibleEvents]="false"
+            [navigable]="navigable"
+            [showDateLabels]="showDateLabels"
+            [animationDuration]="animationDuration"
+            [eventHeight]="eventHeight"
+            [dateFormat]="dateFormat"
+            [headerTemplate]="headerTemplate"
+            [bodyTemplate]="bodyTemplate"
+            [actionsTemplate]="actionsTemplate"
+        >
+        </kendo-timeline-horizontal>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ 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
+            }], 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
+            }] } });

package/esm2020/timeline/timeline.service.mjs

@@ -0,0 +1,31 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class TimelineService {
+    onToggle(event) {
+        if (this.timeline) {
+            this.timeline['onToggle']?.emit(event);
+        }
+    }
+    onActionClick(event) {
+        if (this.timeline) {
+            this.timeline['onActionClick']?.emit(event);
+        }
+    }
+    onNavigate(event) {
+        if (this.timeline) {
+            this.timeline['onNavigate']?.emit(event);
+        }
+    }
+}
+TimelineService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineService, decorators: [{
+            type: Injectable
+        }] });

package/esm2020/timeline/util.mjs

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export const processItems = (items, fields) => {
+    return items.map((item) => parseItem(item, fields));
+};
+/**
+ * @hidden
+ */
+export const parseItem = (item, fields) => ({
+    title: item[fields.title] || item.title,
+    date: item[fields.date] || item.date,
+    subtitle: item[fields.subtitle] || item.subtitle,
+    description: item[fields.description] || item.description,
+    expanded: item[fields.expanded] || item.expanded,
+    images: item[fields.images] || item.images,
+    actions: item[fields.actions] || item.actions,
+});
+/**
+ * @hidden
+ */
+export const MAX_VISIBLE_EVENTS = 3;