@progress/kendo-angular-layout

/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { AfterContentInit, EventEmitter, OnDestroy, QueryList } from '@angular/core'; import { Orientation } from '../common/orientation'; import { TimelineModelFields } from './models/model-fields'; import { TimelineHorizontalComponent } from './timeline-horizontal.component'; import { TimelineVerticalComponent } from './timeline-vertical.component'; import { TimelineService } from './timeline.service'; import { NavigationDirection } from './events/navigation-direction'; 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"; /** * Represents the [Kendo UI Timeline component for Angular]({% slug overview_timeline %}). */ export declare class TimelineComponent implements AfterContentInit, OnDestroy { private timelineService; /** * An array of event instances which will be shown by the Timeline. */ set events(events: any[]); get events(): any[]; /** * The names of the model fields from which the Timeline will read its data. */ set modelFields(value: TimelineModelFields); get modelFields(): TimelineModelFields; /** * Specifies the orientation of the axis. * * @default 'vertical' */ orientation: Orientation; /** * Specifies whether to render events alternatingly on both sides of the axis. * Applicable when `orientation` is set to `vertical`. * * @default false */ alterMode: boolean; /** * Specifies whether the event cards can be collapsed. * * @default true */ collapsibleEvents: boolean; /** * Specifies whether the user can use dedicated shortcuts to interact with the Timeline. * * @default true */ navigable: boolean; /** * Specifies whether an event's date label will be visible. * * @default true */ showDateLabels: boolean; /** * 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: boolean | number; /** * Sets a specific width for the event. * This setting is supported only in `vertical` mode. * * @default 400 */ get eventWidth(): number; set eventWidth(value: number); /** * Sets a specific height for the event. * This setting is supported only in `horizontal` mode. * * @default 600 */ get eventHeight(): number; set eventHeight(value: number); /** * @hidden */ get animationDuration(): number; /** * Specifies the date format for displaying the event date. * * @default 'MMMM dd, yyyy' */ set dateFormat(value: string); get dateFormat(): string; hostClass: boolean; get verticalClass(): boolean; get horizontalClass(): boolean; get alternatingClass(): boolean; get collapsibleClass(): boolean; /** * @hidden */ timelineHorizontal: TimelineHorizontalComponent; /** * @hidden */ timelineVertical: TimelineVerticalComponent; /** * @hidden */ cardHeaderTemplate: QueryList<TimelineCardHeaderTemplateDirective>; /** * @hidden */ cardBodyTemplate: QueryList<TimelineCardBodyTemplateDirective>; /** * @hidden */ cardActionsTemplate: QueryList<TimelineCardActionsTemplateDirective>; /** * Fires when a card is toggled. * This event is supported only in `vertical` mode. */ onToggle: EventEmitter<number>; /** * Fires when a card's action is clicked. */ onActionClick: EventEmitter<number>; /** * Fires when the left or right arrow is clicked. * This event is supported only in `horizontal` mode. */ onNavigate: EventEmitter<NavigationDirection>; /** * @hidden */ headerTemplate: TimelineCardHeaderTemplateDirective; /** * @hidden */ bodyTemplate: TimelineCardBodyTemplateDirective; /** * @hidden */ actionsTemplate: TimelineCardActionsTemplateDirective; private _events; private _modelFields; private _eventWidth; private _eventHeight; private _dateFormat; private originalData; private subscriptions; constructor(timelineService: TimelineService); ngAfterContentInit(): void; ngOnDestroy(): void; /** * Switches to the previous portion of events. * This method is supported only in `horizontal` mode. */ previous(): void; /** * Switches to the next portion of events. * This method is supported only in `horizontal` mode. */ next(): void; /** * Open event details. * This method is supported only in `horizontal` mode. */ open(index: number): void; /** * Expands an event. * This method is supported only in `vertical` mode. */ expand(index: number): void; /** * Collapses an event. * This method is supported only in `vertical` mode. */ collapse(index: number): void; private initTemplates; static ɵfac: i0.ɵɵFactoryDeclaration<TimelineComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<TimelineComponent, "kendo-timeline", ["kendoTimeline"], { "events": { "alias": "events"; "required": false; }; "modelFields": { "alias": "modelFields"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "alterMode": { "alias": "alterMode"; "required": false; }; "collapsibleEvents": { "alias": "collapsibleEvents"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "showDateLabels": { "alias": "showDateLabels"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "eventWidth": { "alias": "eventWidth"; "required": false; }; "eventHeight": { "alias": "eventHeight"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; }, { "onToggle": "onToggle"; "onActionClick": "onActionClick"; "onNavigate": "onNavigate"; }, ["cardHeaderTemplate", "cardBodyTemplate", "cardActionsTemplate"], never, true, never>; }