primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
229 lines (224 loc) • 10.7 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, ContentChildren, ContentChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { SharedModule, PrimeTemplate } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { style } from '@primeuix/styles/timeline';
import { BaseStyle } from 'primeng/base';
const classes = {
root: ({ instance }) => ['p-timeline p-component', 'p-timeline-' + instance.align, 'p-timeline-' + instance.layout],
event: 'p-timeline-event',
eventOpposite: 'p-timeline-event-opposite',
eventSeparator: 'p-timeline-event-separator',
eventMarker: 'p-timeline-event-marker',
eventConnector: 'p-timeline-event-connector',
eventContent: 'p-timeline-event-content'
};
class TimelineStyle extends BaseStyle {
name = 'timeline';
theme = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TimelineStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TimelineStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TimelineStyle, decorators: [{
type: Injectable
}] });
/**
*
* Timeline visualizes a series of chained events.
*
* [Live Demo](https://primeng.org/timeline)
*
* @module timelinestyle
*
*/
var TimelineClasses;
(function (TimelineClasses) {
/**
* Class name of the root element
*/
TimelineClasses["root"] = "p-timeline";
/**
* Class name of the event element
*/
TimelineClasses["event"] = "p-timeline-event";
/**
* Class name of the event opposite element
*/
TimelineClasses["eventOpposite"] = "p-timeline-event-opposite";
/**
* Class name of the event separator element
*/
TimelineClasses["eventSeparator"] = "p-timeline-event-separator";
/**
* Class name of the event marker element
*/
TimelineClasses["eventMarker"] = "p-timeline-event-marker";
/**
* Class name of the event connector element
*/
TimelineClasses["eventConnector"] = "p-timeline-event-connector";
/**
* Class name of the event content element
*/
TimelineClasses["eventContent"] = "p-timeline-event-content";
})(TimelineClasses || (TimelineClasses = {}));
/**
* Timeline visualizes a series of chained events.
* @group Components
*/
class Timeline extends BaseComponent {
/**
* An array of events to display.
* @group Props
*/
value;
/**
* Style class of the component.
* @deprecated since v20.0.0, use `class` instead.
* @group Props
*/
styleClass;
/**
* Position of the timeline bar relative to the content. Valid values are "left", "right" for vertical layout and "top", "bottom" for horizontal layout.
* @group Props
*/
align = 'left';
/**
* Orientation of the timeline.
* @group Props
*/
layout = 'vertical';
/**
* Custom content template.
* @group Templates
*/
contentTemplate;
/**
* Custom opposite item template.
* @group Templates
*/
oppositeTemplate;
/**
* Custom marker template.
* @group Templates
*/
markerTemplate;
templates;
_contentTemplate;
_oppositeTemplate;
_markerTemplate;
_componentStyle = inject(TimelineStyle);
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;
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Timeline, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: Timeline, isStandalone: true, selector: "p-timeline", inputs: { value: "value", styleClass: "styleClass", align: "align", layout: "layout" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "attr.data-pc-section": "'root'", "attr.data-pc-name": "'timeline'" } }, providers: [TimelineStyle], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "oppositeTemplate", first: true, predicate: ["opposite"] }, { propertyName: "markerTemplate", first: true, predicate: ["marker"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
<div *ngFor="let event of value; let last = last" [class]="cx('event')" [attr.data-pc-section]="'event'">
<div [class]="cx('eventOpposite')" [attr.data-pc-section]="'opposite'">
<ng-container *ngTemplateOutlet="oppositeTemplate || _oppositeTemplate; context: { $implicit: event }"></ng-container>
</div>
<div [class]="cx('eventSeparator')" [attr.data-pc-section]="'separator'">
<ng-container *ngIf="markerTemplate || _markerTemplate; else marker">
<ng-container *ngTemplateOutlet="markerTemplate || _markerTemplate; context: { $implicit: event }"></ng-container>
</ng-container>
<ng-template #marker>
<div [class]="cx('eventMarker')" [attr.data-pc-section]="'marker'"></div>
</ng-template>
<div *ngIf="!last" [class]="cx('eventConnector')"></div>
</div>
<div [class]="cx('eventContent')" [attr.data-pc-section]="'content'">
<ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: event }"></ng-container>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Timeline, decorators: [{
type: Component,
args: [{
selector: 'p-timeline',
standalone: true,
imports: [CommonModule, SharedModule],
template: `
<div *ngFor="let event of value; let last = last" [class]="cx('event')" [attr.data-pc-section]="'event'">
<div [class]="cx('eventOpposite')" [attr.data-pc-section]="'opposite'">
<ng-container *ngTemplateOutlet="oppositeTemplate || _oppositeTemplate; context: { $implicit: event }"></ng-container>
</div>
<div [class]="cx('eventSeparator')" [attr.data-pc-section]="'separator'">
<ng-container *ngIf="markerTemplate || _markerTemplate; else marker">
<ng-container *ngTemplateOutlet="markerTemplate || _markerTemplate; context: { $implicit: event }"></ng-container>
</ng-container>
<ng-template #marker>
<div [class]="cx('eventMarker')" [attr.data-pc-section]="'marker'"></div>
</ng-template>
<div *ngIf="!last" [class]="cx('eventConnector')"></div>
</div>
<div [class]="cx('eventContent')" [attr.data-pc-section]="'content'">
<ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: event }"></ng-container>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [TimelineStyle],
host: {
'[class]': "cn(cx('root'), styleClass)",
'[attr.data-pc-section]': "'root'",
'[attr.data-pc-name]': "'timeline'"
}
}]
}], propDecorators: { value: [{
type: Input
}], styleClass: [{
type: Input
}], align: [{
type: Input
}], layout: [{
type: Input
}], contentTemplate: [{
type: ContentChild,
args: ['content', { descendants: false }]
}], oppositeTemplate: [{
type: ContentChild,
args: ['opposite', { descendants: false }]
}], markerTemplate: [{
type: ContentChild,
args: ['marker', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class TimelineModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: TimelineModule, imports: [Timeline, SharedModule], exports: [Timeline, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TimelineModule, imports: [Timeline, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TimelineModule, decorators: [{
type: NgModule,
args: [{
imports: [Timeline, SharedModule],
exports: [Timeline, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Timeline, TimelineClasses, TimelineModule, TimelineStyle };
//# sourceMappingURL=primeng-timeline.mjs.map