@progress/kendo-angular-layout/esm2022/timeline/timeline-vertical.component.mjs

Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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']
            }] } });