primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 5.19 kB
JavaScript
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Input, ContentChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PrimeTemplate } from 'primeng/api';
class Timeline {
constructor(el) {
this.el = el;
this.align = 'left';
this.layout = 'vertical';
}
getBlockableElement() {
return this.el.nativeElement.children[0];
}
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'content':
this.contentTemplate = item.template;
break;
case 'opposite':
this.oppositeTemplate = item.template;
break;
case 'marker':
this.markerTemplate = item.template;
break;
}
});
}
}
Timeline.decorators = [
{ type: Component, args: [{
selector: 'p-timeline',
template: `
<div [class]="styleClass" [ngStyle]="style" [ngClass]="{'p-timeline p-component': true,
'p-timeline-left': align === 'left',
'p-timeline-right': align === 'right',
'p-timeline-top': align === 'top',
'p-timeline-bottom': align === 'bottom',
'p-timeline-alternate': align === 'alternate',
'p-timeline-vertical': layout === 'vertical',
'p-timeline-horizontal': layout === 'horizontal'}">
<div *ngFor="let event of value; let last=last" class="p-timeline-event">
<div class="p-timeline-event-opposite">
<ng-container *ngTemplateOutlet="oppositeTemplate; context: {$implicit: event}"></ng-container>
</div>
<div class="p-timeline-event-separator">
<ng-container *ngIf="markerTemplate; else marker">
<ng-container *ngTemplateOutlet="markerTemplate; context: {$implicit: event}"></ng-container>
</ng-container>
<ng-template #marker>
<div class="p-timeline-event-marker"></div>
</ng-template>
<div *ngIf="!last" class="p-timeline-event-connector"></div>
</div>
<div class="p-timeline-event-content">
<ng-container *ngTemplateOutlet="contentTemplate; context: {$implicit: event}"></ng-container>
</div>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".p-timeline{display:flex;flex-direction:column;flex-grow:1}.p-timeline-left .p-timeline-event-opposite{text-align:right}.p-timeline-left .p-timeline-event-content{text-align:left}.p-timeline-right .p-timeline-event{flex-direction:row-reverse}.p-timeline-right .p-timeline-event-opposite{text-align:left}.p-timeline-right .p-timeline-event-content{text-align:right}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n){flex-direction:row-reverse}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite{text-align:right}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-opposite,.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content{text-align:left}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:right}.p-timeline-event{display:flex;min-height:70px;position:relative}.p-timeline-event:last-child{min-height:0}.p-timeline-event-content,.p-timeline-event-opposite{flex:1;padding:0 1rem}.p-timeline-event-separator{align-items:center;display:flex;flex:0;flex-direction:column}.p-timeline-event-marker{align-self:baseline;display:flex}.p-timeline-event-connector{flex-grow:1}.p-timeline-horizontal{flex-direction:row}.p-timeline-horizontal .p-timeline-event{flex:1;flex-direction:column}.p-timeline-horizontal .p-timeline-event:last-child{flex:0}.p-timeline-horizontal .p-timeline-event-separator{flex-direction:row}.p-timeline-horizontal .p-timeline-event-connector{width:100%}.p-timeline-bottom .p-timeline-event,.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(2n){flex-direction:column-reverse}"]
},] }
];
Timeline.ctorParameters = () => [
{ type: ElementRef }
];
Timeline.propDecorators = {
value: [{ type: Input }],
style: [{ type: Input }],
styleClass: [{ type: Input }],
align: [{ type: Input }],
layout: [{ type: Input }],
templates: [{ type: ContentChildren, args: [PrimeTemplate,] }]
};
class TimelineModule {
}
TimelineModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [Timeline],
declarations: [Timeline]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { Timeline, TimelineModule };
//# sourceMappingURL=primeng-timeline.js.map