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

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

@@ -0,0 +1,723 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, QueryList, Renderer2, ViewChild, ViewChildren, } from '@angular/core';
+import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
+import { Subscription, fromEvent } from 'rxjs';
+import { TimelineCardComponent } from './timeline-card.component';
+import { Keys, guid, isChanged, isPresent } from '@progress/kendo-angular-common';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { TimelineService } from './timeline.service';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+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 "./timeline.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@angular/common";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "./timeline-card.component";
+import * as i6 from "@progress/kendo-angular-intl";
+const DEFAULT_TAB_WIDTH = 200;
+const SPACE_BETWEEN_TABS = 25;
+const TRANSITION_EVENTS_COUNT = 3;
+/**
+ * @hidden
+ */
+export class TimelineHorizontalComponent {
+    constructor(cdr, _zone, renderer, timelineService, localization) {
+        this.cdr = cdr;
+        this._zone = _zone;
+        this.renderer = renderer;
+        this.timelineService = timelineService;
+        this.localization = localization;
+        this.events = [];
+        this.svgLeftIcon = caretAltLeftIcon;
+        this.svgRightIcon = caretAltRightIcon;
+        this.animationState = 'center';
+        this.translateValue = 0;
+        this.eventsInInterval = [0, 1, 2];
+        this.selectedCardIndex = 0;
+        this.tabWidth = DEFAULT_TAB_WIDTH;
+        this.firstCircleInView = 0;
+        this.visibleEvents = [];
+        this.trackItems = [];
+        this.previousTitle = 'previous';
+        this.nextTitle = 'next';
+        this.subscriptions = new Subscription();
+    }
+    get selectedEvent() {
+        return this._selectedEvent;
+    }
+    set selectedEvent(value) {
+        if (this._selectedEvent === value) {
+            return;
+        }
+        const newSelectedIndex = this.events.findIndex(event => event === value);
+        if (newSelectedIndex === -1 && value !== null) {
+            return;
+        }
+        this._selectedEvent = value;
+        this.selectedEventIndex = newSelectedIndex;
+        this.calloutStyle = this.calloutOffset;
+    }
+    ngOnInit() {
+        this._zone.runOutsideAngular(() => this.subscriptions.add(fromEvent(window, 'resize').subscribe(this.handleWindowResize.bind(this))));
+        this.l10nChange();
+        this.subscriptions.add(this.localization.changes.subscribe(this.l10nChange.bind(this)));
+        if (this.events.length > 0) {
+            this.selectedEvent = this.events[0];
+        }
+        this.events.forEach(event => {
+            if (event.flag) {
+                this.trackItems.push({ isFlag: event.flag });
+            }
+            this.trackItems.push(event);
+        });
+    }
+    ngAfterViewInit() {
+        this.subscriptions.add(this.renderer.listen(this.trackElementRef.nativeElement, 'keydown', this.onKeyDown.bind(this)));
+        this.trackWrapWidth = this.trackElementRef.nativeElement.getBoundingClientRect().width;
+        this.scrollableTrackWidth = this.scrollableTrackElementRef.nativeElement.getBoundingClientRect().width;
+        this._zone.runOutsideAngular(() => {
+            this.onCirclesChange();
+            this.subscriptions.add(this.circleElementRefs.changes.subscribe(this.onCirclesChange.bind(this)));
+            this.subscriptions.add(this.cardElementRefs.changes.subscribe(this.onCardsChange.bind(this)));
+        });
+        if (this.events.length === 0) {
+            return;
+        }
+        this.onCardsChange();
+        if (this.cardComponents.get(this.selectedCardIndex)) {
+            this.cardComponents.get(this.selectedCardIndex).calloutStyle = this.calloutOffset;
+            this.focusTrackItem(0);
+        }
+    }
+    ngOnChanges(changes) {
+        if (isChanged('events', changes)) {
+            if (!this.events || this.events.length === 0) {
+                this.selectedEvent = null;
+                this.trackItems = [];
+                this.visibleEvents = [];
+            }
+            else {
+                this.trackItems = [];
+                this.events.forEach(event => {
+                    if (event.flag) {
+                        this.trackItems.push({ isFlag: event.flag });
+                    }
+                    this.trackItems.push(event);
+                });
+                this.visibleEvents = this.trackItems
+                    .slice(this.firstCircleInView, this.firstCircleInView + this.visibleTabsCount)
+                    .filter(event => !event.isFlag);
+                this.selectedEvent = this.events[0];
+                this.cdr.detectChanges();
+                this.calloutStyle = this.calloutOffset;
+                this.focusTrackItem(0);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    handleWindowResize() {
+        if (this.trackWrapWidth === this.trackElementRef.nativeElement.getBoundingClientRect().width) {
+            return;
+        }
+        this.cardWidth = this.cardComponents.get(this.selectedCardIndex).element.nativeElement.offsetWidth;
+        this.transformCards();
+        this.trackWrapWidth = this.trackElementRef.nativeElement.getBoundingClientRect().width;
+        this.scrollableTrackWidth = this.scrollableTrackElementRef.nativeElement.getBoundingClientRect().width;
+        this.changeTabsCount();
+        this._zone.run(() => {
+            this.cardComponents.get(this.selectedCardIndex).calloutStyle = this.calloutOffset;
+        });
+    }
+    onTransitionEnd() {
+        this.cardElementRefs?.forEach(card => this.renderer.removeStyle(card.nativeElement, 'transition-duration'));
+        this.cardComponents.get(this.selectedCardIndex).event = this.selectedEvent;
+        this.calloutStyle = this.calloutOffset;
+    }
+    onTrackTransitionEnd() {
+        this.calloutStyle = this.calloutOffset;
+    }
+    onSlideDone() {
+        this.calloutStyle = this.calloutOffset;
+    }
+    previous() {
+        if (this.firstCircleInView === 0) {
+            return;
+        }
+        this.updateInterval(false);
+    }
+    previousClick() {
+        this.previous();
+        this.timelineService.onNavigate('previous');
+    }
+    next() {
+        if (!this.visibleTabsCount || this.firstCircleInView + this.visibleTabsCount > this.trackItems.length) {
+            return;
+        }
+        this.updateInterval(true);
+    }
+    nextClick() {
+        this.next();
+        this.timelineService.onNavigate('next');
+    }
+    open(index) {
+        if (index < 0 || index >= this.events.length) {
+            return;
+        }
+        if (this.visibleEvents.findIndex(event => event === this.events[index]) === -1) {
+            // determine the start and end of the interval that the event belongs to, regardless of its position in the interval
+            const trackItemIndex = this.trackItems.findIndex(event => event === this.events[index]);
+            const start = Math.floor(trackItemIndex / this.visibleTabsCount) * this.visibleTabsCount;
+            this.navigateToInterval(start, index);
+        }
+        this.selectedEvent = this.events[index];
+        this.selectedCardIndex = this.getOtherSelectedCardIndex(index > this.selectedEventIndex);
+        this.calloutStyle = this.calloutOffset;
+        this.focusTrackItem(this.selectedEventIndex);
+        this.animateCards();
+    }
+    navigateToEvent(index) {
+        const eventIndex = this.events.findIndex(event => event === this.trackItems[index]);
+        if (this.selectedEventIndex === eventIndex) {
+            return;
+        }
+        this.selectedEvent = this.events[eventIndex];
+        this.selectedCardIndex = this.getOtherSelectedCardIndex(index > eventIndex);
+        this.calloutStyle = this.calloutOffset;
+        this.animateCards();
+    }
+    getOtherSelectedCardIndex(forward) {
+        // change the selected card which changes all cards' transform styles
+        if (forward) {
+            return this.selectedCardIndex === 0 ? TRANSITION_EVENTS_COUNT - 1 : this.selectedCardIndex - 1;
+        }
+        return this.selectedCardIndex === TRANSITION_EVENTS_COUNT - 1 ? 0 : this.selectedCardIndex + 1;
+    }
+    tabStyle() {
+        if (!this.tabFlex) {
+            return {};
+        }
+        return { 'flex': `1 0 ${this.tabFlex}%` };
+    }
+    getTransformation(width, position) {
+        if (position === this.selectedCardIndex - 1 || position === this.selectedCardIndex + 2) {
+            return `translate3d(${-width}px, 0, 0)`;
+        }
+        if (position === this.selectedCardIndex + 1 || position === this.selectedCardIndex - 2) {
+            return `translate3d(${width}px, 0, 0)`;
+        }
+        return `translate3d(0, 0, 0)`;
+    }
+    getState(position) {
+        if (position === this.selectedCardIndex) {
+            return 'center';
+        }
+        if (position === this.selectedCardIndex - 1 || position === this.selectedCardIndex + 2) {
+            return 'left';
+        }
+        return 'right';
+    }
+    get calloutOffset() {
+        if (!this.circleElementRefs?.first || !this.trackElementRef || !isPresent(this.selectedEventIndex)) {
+            return {};
+        }
+        const circleCenter = this.circleElementRefs.get(this.selectedEventIndex).nativeElement.getBoundingClientRect().left +
+            this.circleElementRefs.get(this.selectedEventIndex).nativeElement.offsetWidth / 2;
+        const trackOffset = this.trackElementRef.nativeElement.getBoundingClientRect().left;
+        return { left: `${circleCenter - trackOffset}px` };
+    }
+    get isFirstRange() {
+        return this.firstCircleInView === 0;
+    }
+    get isLastRange() {
+        if (!this.circleElementRefs?.first && !this.flagElementRefs?.first) {
+            return false;
+        }
+        return this.trackItems.length === 0 ||
+            this.firstCircleInView + this.visibleTabsCount >= this.trackItems.length;
+    }
+    onCardsChange() {
+        if (this.cardElementRefs?.get(this.selectedCardIndex)) {
+            this.cardWidth = this.cardElementRefs.get(this.selectedCardIndex).nativeElement.offsetWidth;
+            this.transformCards();
+        }
+    }
+    onCirclesChange() {
+        if (!this.circleElementRefs?.first) {
+            return;
+        }
+        this.circleElementRefs
+            .map(element => element.nativeElement)
+            .forEach((element, index) => {
+            this.subscriptions.add(this.renderer.listen(element, 'click', () => {
+                this.focusTrackItem(index);
+            }));
+        });
+        const width = this.circleElementRefs.first.nativeElement.getBoundingClientRect().width;
+        if (width > DEFAULT_TAB_WIDTH) {
+            this.tabWidth = this.circleElementRefs.first.nativeElement.getBoundingClientRect().width + SPACE_BETWEEN_TABS;
+        }
+        this.changeTabsCount();
+        this.visibleEvents = this.trackItems
+            .slice(this.firstCircleInView, this.firstCircleInView + this.visibleTabsCount)
+            .filter(event => !event.isFlag);
+    }
+    onKeyDown(event) {
+        if (!this.navigable) {
+            return;
+        }
+        event.preventDefault();
+        if (event.keyCode === Keys.Home) {
+            this.onHomeKey();
+        }
+        else if (event.keyCode === Keys.End) {
+            this.onEndKey();
+        }
+        else if (event.keyCode === Keys.ArrowRight) {
+            this.onArrowRightKey();
+        }
+        else if (event.keyCode === Keys.ArrowLeft) {
+            this.onArrowLeftKey();
+        }
+    }
+    focusTrackItem(index) {
+        if (!this.circleElementRefs || index < 0 || index >= this.circleElementRefs.length) {
+            return;
+        }
+        const selectedTrackItem = this.circleElementRefs
+            .find(element => element.nativeElement.hasAttribute('aria-selected'));
+        if (selectedTrackItem) {
+            this.removeTrackItemAttributes(selectedTrackItem);
+            this.removeCardsAttributes();
+        }
+        const newTrackItem = this.circleElementRefs.get(index).nativeElement;
+        this.setTrackItemAttributes(newTrackItem, index);
+    }
+    setTrackItemAttributes(element, index) {
+        const innerCard = this.cardComponents.get(this.selectedCardIndex).element.nativeElement.querySelector('.k-card');
+        const selectedCircle = this.circleElementRefs.get(index).nativeElement;
+        this.renderer.addClass(element, 'k-focus');
+        this.renderer.setAttribute(element, 'aria-selected', 'true');
+        this.assignAriaLabel(innerCard, selectedCircle);
+        this.assignAriaDescribedBy(innerCard, selectedCircle);
+    }
+    removeTrackItemAttributes(element) {
+        this.renderer.removeClass(element.nativeElement, 'k-focus');
+        this.renderer.removeAttribute(element.nativeElement, 'aria-selected');
+        this.renderer.removeAttribute(element.nativeElement, 'id');
+        this.renderer.removeAttribute(element.nativeElement, 'aria-describedby');
+    }
+    removeCardsAttributes() {
+        this.cardElementRefs.forEach(card => {
+            this.renderer.removeAttribute(card.nativeElement.querySelector('.k-card'), 'id');
+            this.renderer.removeAttribute(card.nativeElement.querySelector('.k-card'), 'aria-label');
+        });
+    }
+    assignAriaLabel(cardElement, dateElement) {
+        const dateLabelId = `k-${guid()}`;
+        this.renderer.setAttribute(dateElement, 'id', dateLabelId);
+        this.renderer.setAttribute(cardElement, 'aria-label', dateLabelId);
+    }
+    assignAriaDescribedBy(cardElement, dateElement) {
+        const cardId = `k-${guid()}`;
+        this.renderer.setAttribute(cardElement, 'id', cardId);
+        this.renderer.setAttribute(dateElement, 'aria-describedby', cardId);
+    }
+    updateInterval(forward) {
+        let start = forward ? this.firstCircleInView + this.visibleTabsCount : this.firstCircleInView - this.visibleTabsCount;
+        if (start < 0 || start >= this.trackItems.length) {
+            start = 0;
+        }
+        this.navigateToInterval(start, 0, forward, !forward);
+    }
+    onHomeKey() {
+        this.navigateToFirstInterval();
+    }
+    onEndKey() {
+        this.navigateToLastInterval();
+    }
+    onArrowRightKey() {
+        this.navigateToOtherEvent(true);
+    }
+    onArrowLeftKey() {
+        this.navigateToOtherEvent(false);
+    }
+    navigateToFirstInterval() {
+        this.navigateToInterval(0);
+    }
+    navigateToLastInterval() {
+        const start = Math.floor(this.trackItems.length / this.visibleTabsCount) * this.visibleTabsCount;
+        this.navigateToInterval(start, this.events.length - 1);
+    }
+    navigateToOtherEvent(direction) {
+        const offset = direction ? 1 : -1;
+        const newIndex = this.selectedEventIndex + offset;
+        if (newIndex < 0 || newIndex >= this.events.length) {
+            return;
+        }
+        if (this.visibleEvents.findIndex(event => event === this.events[newIndex]) === -1) {
+            this.updateInterval(direction);
+        }
+        else {
+            this.selectedEvent = this.events[newIndex];
+            this.selectedCardIndex = this.getOtherSelectedCardIndex(direction);
+            this.focusTrackItem(this.selectedEventIndex);
+            this.animateCards();
+            this.cdr.markForCheck();
+        }
+    }
+    navigateToInterval(start, selectedIndex = 0, selectFirst = false, selectLast = false) {
+        const end = start + this.visibleTabsCount < this.trackItems.length ? start + this.visibleTabsCount : undefined;
+        const forward = this.firstCircleInView < start;
+        this.firstCircleInView = start;
+        const interval = Math.floor(start / this.visibleTabsCount);
+        this.translateValue = interval * -100;
+        this.animationState = forward ? 'right' : 'left';
+        this.visibleEvents = this.trackItems.slice(this.firstCircleInView, end).filter(event => !event.isFlag);
+        if (selectFirst) {
+            this.selectedEvent = this.visibleEvents[0];
+        }
+        else if (selectLast) {
+            this.selectedEvent = this.visibleEvents[this.visibleEvents.length - 1];
+        }
+        else {
+            this.selectedEvent = this.events[selectedIndex];
+        }
+        this.selectedCardIndex = this.getOtherSelectedCardIndex(forward);
+        this.cdr.detectChanges();
+        this.focusTrackItem(this.selectedEventIndex);
+        this.animateCards();
+        this.calloutStyle = this.calloutOffset;
+        this.cdr.markForCheck();
+    }
+    animateCards() {
+        if (this.animationDuration) {
+            this.cardComponents.get(this.selectedCardIndex).event = null;
+        }
+        this.cardElementRefs.forEach((card, index) => {
+            this.renderer.setStyle(card.nativeElement, 'transform', this.getTransformation(this.cardWidth, index));
+            this.renderer.setStyle(card.nativeElement, 'transition-duration', `${this.animationDuration || 0}ms`);
+        });
+    }
+    transformCards() {
+        this.cardElementRefs.forEach((card, index) => this.renderer.setStyle(card.nativeElement, 'transform', this.getTransformation(this.cardWidth, index)));
+    }
+    changeTabsCount() {
+        this.visibleTabsCount = Math.round(this.scrollableTrackWidth / this.tabWidth);
+        if (this.tabFlex !== 100 / this.visibleTabsCount) {
+            this.tabFlex = 100 / this.visibleTabsCount;
+            this.circleElementRefs.forEach(item => this.renderer.setStyle(item.nativeElement, 'flex', `1 0 ${this.tabFlex}%`));
+            this.flagElementRefs.forEach(item => this.renderer.setStyle(item.nativeElement, 'flex', `1 0 ${this.tabFlex}%`));
+            this.cdr.detectChanges();
+            this.visibleEvents = this.trackItems
+                .slice(this.firstCircleInView, this.firstCircleInView + this.visibleTabsCount)
+                .filter(event => !event.isFlag);
+            if (!this.visibleEvents.find(event => event === this.selectedEvent)) {
+                const trackItemIndex = this.trackItems.findIndex(event => event === this.selectedEvent);
+                this.navigateToInterval(trackItemIndex, this.selectedEventIndex);
+            }
+        }
+    }
+    l10nChange() {
+        if (this.localization.get('previous')) {
+            this.previousTitle = this.localization.get('previous');
+        }
+        if (this.localization.get('next')) {
+            this.nextTitle = this.localization.get('next');
+        }
+        this.cdr.markForCheck();
+    }
+}
+TimelineHorizontalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineHorizontalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.TimelineService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineHorizontalComponent, selector: "kendo-timeline-horizontal", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventHeight: "eventHeight", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "trackElementRef", first: true, predicate: ["track"], descendants: true }, { propertyName: "scrollableTrackElementRef", first: true, predicate: ["scrollableTrack"], descendants: true }, { propertyName: "cardElementRefs", predicate: ["card"], descendants: true, read: ElementRef }, { propertyName: "circleElementRefs", predicate: ["trackCircle"], descendants: true }, { propertyName: "flagElementRefs", predicate: ["trackFlag"], descendants: true }, { propertyName: "cardComponents", predicate: TimelineCardComponent, descendants: true }], exportAs: ["kendoTimelineHorizontal"], usesOnChanges: true, ngImport: i0, template: `
+        <div class="k-timeline-track-wrap" #track>
+            <button
+                kendoButton
+                [svgIcon]="svgLeftIcon"
+                class="k-timeline-arrow k-timeline-arrow-left"
+                rounded="full"
+                [title]="previousTitle"
+                (click)="previousClick()"
+                [disabled]="isFirstRange"
+                [attr.aria-hidden]="true"
+                tabindex="-1"
+                type="button"
+            ></button>
+            <button
+                kendoButton
+                [svgIcon]="svgRightIcon"
+                class="k-timeline-arrow k-timeline-arrow-right"
+                rounded="full"
+                [title]="nextTitle"
+                (click)="nextClick()"
+                [disabled]="isLastRange"
+                [attr.aria-hidden]="true"
+                tabindex="-1"
+                type="button"
+            ></button>
+            <div class="k-timeline-track">
+                <ul class="k-timeline-scrollable-wrap"
+                    #scrollableTrack
+                    [attr.role]="'tablist'"
+                    [attr.tabindex]="'0'"
+                    [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
+                    (@trackSlide.done)="onSlideDone()"
+                    (transitionend)="onTrackTransitionEnd()"
+                >
+                    <ng-container *ngFor="let event of trackItems; let index = index">
+                        <li
+                            #trackFlag
+                            *ngIf="event.isFlag"
+                            class="k-timeline-flag-wrap k-timeline-track-item"
+                            [attr.role]="'none'"
+                            [attr.aria-hidden]="true"
+                            [ngStyle]="tabStyle()"
+                        >
+                            <span class="k-timeline-flag">{{ event.isFlag }}</span>
+                        </li>
+                        <li
+                            *ngIf="!event.isFlag"
+                            #trackCircle
+                            class="k-timeline-track-item"
+                            [attr.role]="'tab'"
+                            (click)="navigateToEvent(index)"
+                            [ngStyle]="tabStyle()"
+                        >
+                            <div class="k-timeline-date-wrap">
+                                <span *ngIf="showDateLabels" class="k-timeline-date">
+                                    {{ event.date | kendoDate: dateFormat }}
+                                </span>
+                            </div>
+                            <span class="k-timeline-circle"></span>
+                        </li>
+                    </ng-container>
+                </ul>
+            </div>
+        </div>
+        <div class="k-timeline-events-list">
+            <ul
+                *ngIf="selectedEvent"
+                class="k-timeline-scrollable-wrap"
+                [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
+                (@eventsSlide.done)="onSlideDone()"
+                [ngStyle]="{'transform-origin': 'left top'}"
+            >
+                <li *ngFor="let event of eventsInInterval; let index = index"
+                    #card
+                    class="k-timeline-event"
+                    (transitionend)="onTransitionEnd()"
+                >
+                    <kendo-timeline-card
+                        [event]="selectedCardIndex === index ? selectedEvent : null"
+                        [expanded]="true"
+                        [collapsible]="collapsibleEvents"
+                        [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
+                        [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
+                        [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
+                        [navigable]="navigable"
+                        [index]="selectedEventIndex"
+                        [headerTemplate]="headerTemplate"
+                        [bodyTemplate]="bodyTemplate"
+                        [actionsTemplate]="actionsTemplate"
+                        [eventHeight]="eventHeight"
+                        orientation="horizontal"
+                    >
+                    </kendo-timeline-card>
+                </li>
+            </ul>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i5.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: i6.DatePipe, name: "kendoDate" }], animations: [
+        trigger('trackSlide', [
+            state('left', style({
+                transform: `translateX({{transformValue}}%)`,
+            }), { params: { transformValue: '0' } }),
+            state('right', style({
+                transform: `translateX({{transformValue}}%)`,
+            }), { params: { transformValue: '0' } }),
+            state('center', style({
+                transform: `translateX(0)`,
+            }))
+        ]),
+        trigger('eventsSlide', [
+            transition('* => right', [
+                animate('{{animationDuration}}ms', style({ transform: `translateX(-100%)` }))
+            ], { params: { animationDuration: '400' } }),
+            transition('* => left', [
+                animate('{{animationDuration}}ms', style({ transform: `translateX(100%)` }))
+            ], { params: { animationDuration: '400' } })
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineHorizontalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    animations: [
+                        trigger('trackSlide', [
+                            state('left', style({
+                                transform: `translateX({{transformValue}}%)`,
+                            }), { params: { transformValue: '0' } }),
+                            state('right', style({
+                                transform: `translateX({{transformValue}}%)`,
+                            }), { params: { transformValue: '0' } }),
+                            state('center', style({
+                                transform: `translateX(0)`,
+                            }))
+                        ]),
+                        trigger('eventsSlide', [
+                            transition('* => right', [
+                                animate('{{animationDuration}}ms', style({ transform: `translateX(-100%)` }))
+                            ], { params: { animationDuration: '400' } }),
+                            transition('* => left', [
+                                animate('{{animationDuration}}ms', style({ transform: `translateX(100%)` }))
+                            ], { params: { animationDuration: '400' } })
+                        ])
+                    ],
+                    providers: [],
+                    exportAs: 'kendoTimelineHorizontal',
+                    selector: 'kendo-timeline-horizontal',
+                    template: `
+        <div class="k-timeline-track-wrap" #track>
+            <button
+                kendoButton
+                [svgIcon]="svgLeftIcon"
+                class="k-timeline-arrow k-timeline-arrow-left"
+                rounded="full"
+                [title]="previousTitle"
+                (click)="previousClick()"
+                [disabled]="isFirstRange"
+                [attr.aria-hidden]="true"
+                tabindex="-1"
+                type="button"
+            ></button>
+            <button
+                kendoButton
+                [svgIcon]="svgRightIcon"
+                class="k-timeline-arrow k-timeline-arrow-right"
+                rounded="full"
+                [title]="nextTitle"
+                (click)="nextClick()"
+                [disabled]="isLastRange"
+                [attr.aria-hidden]="true"
+                tabindex="-1"
+                type="button"
+            ></button>
+            <div class="k-timeline-track">
+                <ul class="k-timeline-scrollable-wrap"
+                    #scrollableTrack
+                    [attr.role]="'tablist'"
+                    [attr.tabindex]="'0'"
+                    [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
+                    (@trackSlide.done)="onSlideDone()"
+                    (transitionend)="onTrackTransitionEnd()"
+                >
+                    <ng-container *ngFor="let event of trackItems; let index = index">
+                        <li
+                            #trackFlag
+                            *ngIf="event.isFlag"
+                            class="k-timeline-flag-wrap k-timeline-track-item"
+                            [attr.role]="'none'"
+                            [attr.aria-hidden]="true"
+                            [ngStyle]="tabStyle()"
+                        >
+                            <span class="k-timeline-flag">{{ event.isFlag }}</span>
+                        </li>
+                        <li
+                            *ngIf="!event.isFlag"
+                            #trackCircle
+                            class="k-timeline-track-item"
+                            [attr.role]="'tab'"
+                            (click)="navigateToEvent(index)"
+                            [ngStyle]="tabStyle()"
+                        >
+                            <div class="k-timeline-date-wrap">
+                                <span *ngIf="showDateLabels" class="k-timeline-date">
+                                    {{ event.date | kendoDate: dateFormat }}
+                                </span>
+                            </div>
+                            <span class="k-timeline-circle"></span>
+                        </li>
+                    </ng-container>
+                </ul>
+            </div>
+        </div>
+        <div class="k-timeline-events-list">
+            <ul
+                *ngIf="selectedEvent"
+                class="k-timeline-scrollable-wrap"
+                [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
+                (@eventsSlide.done)="onSlideDone()"
+                [ngStyle]="{'transform-origin': 'left top'}"
+            >
+                <li *ngFor="let event of eventsInInterval; let index = index"
+                    #card
+                    class="k-timeline-event"
+                    (transitionend)="onTransitionEnd()"
+                >
+                    <kendo-timeline-card
+                        [event]="selectedCardIndex === index ? selectedEvent : null"
+                        [expanded]="true"
+                        [collapsible]="collapsibleEvents"
+                        [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
+                        [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
+                        [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
+                        [navigable]="navigable"
+                        [index]="selectedEventIndex"
+                        [headerTemplate]="headerTemplate"
+                        [bodyTemplate]="bodyTemplate"
+                        [actionsTemplate]="actionsTemplate"
+                        [eventHeight]="eventHeight"
+                        orientation="horizontal"
+                    >
+                    </kendo-timeline-card>
+                </li>
+            </ul>
+        </div>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.TimelineService }, { type: i2.LocalizationService }]; }, propDecorators: { events: [{
+                type: Input
+            }], alterMode: [{
+                type: Input
+            }], collapsibleEvents: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], showDateLabels: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], eventHeight: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], bodyTemplate: [{
+                type: Input
+            }], actionsTemplate: [{
+                type: Input
+            }], cardElementRefs: [{
+                type: ViewChildren,
+                args: ['card', { read: ElementRef }]
+            }], circleElementRefs: [{
+                type: ViewChildren,
+                args: ['trackCircle']
+            }], flagElementRefs: [{
+                type: ViewChildren,
+                args: ['trackFlag']
+            }], trackElementRef: [{
+                type: ViewChild,
+                args: ['track']
+            }], scrollableTrackElementRef: [{
+                type: ViewChild,
+                args: ['scrollableTrack']
+            }], cardComponents: [{
+                type: ViewChildren,
+                args: [TimelineCardComponent]
+            }] } });