@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
192 lines (191 loc) • 9.7 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* 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 { NgIf, NgFor, 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: "16.2.12", ngImport: i0, type: TimelineVerticalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: `
<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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "16.2.12", 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>
`,
standalone: true,
imports: [NgIf, NgFor, NgClass, TimelineCardComponent, DatePipe]
}]
}], 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']
}] } });