primeng/fesm2022/primeng-timeline.mjs

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

import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, HostBinding, ContentChildren, ContentChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { SharedModule, PrimeTemplate } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { BaseStyle } from 'primeng/base';

const theme = ({ dt }) => `
.p-timeline {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    direction: ltr;
}

.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(even) {
    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(odd) .p-timeline-event-content {
    text-align: left;
}

.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
    text-align: left;
}

.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
    text-align: right;
}

.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline-vertical .p-timeline-event-content {
    padding: ${dt('timeline.vertical.event.content.padding')};
}

.p-timeline-vertical .p-timeline-event-connector {
    width: ${dt('timeline.event.connector.size')};
}

.p-timeline-event {
    display: flex;
    position: relative;
    min-height: ${dt('timeline.event.min.height')};
}

.p-timeline-event:last-child {
    min-height: 0;
}

.p-timeline-event-opposite {
    flex: 1;
}

.p-timeline-event-content {
    flex: 1;
}

.p-timeline-event-separator {
    flex: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.p-timeline-event-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    align-self: baseline;
    border-width: ${dt('timeline.event.marker.border.width')};
    border-style: solid;
    border-color: ${dt('timeline.event.marker.border.color')};
    border-radius: ${dt('timeline.event.marker.border.radius')};
    width: ${dt('timeline.event.marker.size')};
    height: ${dt('timeline.event.marker.size')};
    background: ${dt('timeline.event.marker.background')};
}

.p-timeline-event-marker::before {
    content: " ";
    border-radius: ${dt('timeline.event.marker.content.border.radius')};
    width: ${dt('timeline.event.marker.content.size')};
    height:${dt('timeline.event.marker.content.size')};
    background: ${dt('timeline.event.marker.content.background')};
}

.p-timeline-event-marker::after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: ${dt('timeline.event.marker.border.radius')};
    box-shadow: ${dt('timeline.event.marker.content.inset.shadow')};
}

.p-timeline-event-connector {
    flex-grow: 1;
    background: ${dt('timeline.event.connector.color')};
}

.p-timeline-horizontal {
    flex-direction: row;
}

.p-timeline-horizontal .p-timeline-event {
    flex-direction: column;
    flex: 1;
}

.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%;
    height: ${dt('timeline.event.connector.size')};
}

.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline-horizontal .p-timeline-event-content {
    padding: ${dt('timeline.horizontal.event.content.padding')};
}

.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
    flex-direction: column-reverse;
}

.p-timeline-bottom .p-timeline-event {
    flex-direction: column-reverse;
}
`;
const classes = {
    root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.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 = theme;
    classes = classes;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TimelineStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TimelineStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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;
    /**
     * Inline style of the component.
     * @group Props
     */
    style;
    /**
     * Style class of the component.
     * @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);
    get hostClass() {
        return this.styleClass;
    }
    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: "19.2.5", ngImport: i0, type: Timeline, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: Timeline, isStandalone: true, selector: "p-timeline", inputs: { value: "value", style: "style", styleClass: "styleClass", align: "align", layout: "layout" }, host: { properties: { "class.p-timeline": "true", "class.p-component": "true", "class.p-timeline-left": "align === 'left'", "class.p-timeline-right": "align === 'right'", "class.p-timeline-top": "align === 'top'", "class.p-timeline-bottom": "align === 'bottom'", "class.p-timeline-alternate": "align === 'alternate'", "class.p-timeline-vertical": "layout === 'vertical'", "class.p-timeline-horizontal": "layout === 'horizontal'", "style": "style", "attr.data-pc-section": "'root'", "attr.data-pc-name": "'timeline'", "class": "this.hostClass" } }, 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="p-timeline-event" [attr.data-pc-section]="'event'">
            <div class="p-timeline-event-opposite" [attr.data-pc-section]="'opposite'">
                <ng-container *ngTemplateOutlet="oppositeTemplate || _oppositeTemplate; context: { $implicit: event }"></ng-container>
            </div>
            <div class="p-timeline-event-separator" [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="p-timeline-event-marker" [attr.data-pc-section]="'marker'"></div>
                </ng-template>
                <div *ngIf="!last" class="p-timeline-event-connector"></div>
            </div>
            <div class="p-timeline-event-content" [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: "19.2.5", 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="p-timeline-event" [attr.data-pc-section]="'event'">
            <div class="p-timeline-event-opposite" [attr.data-pc-section]="'opposite'">
                <ng-container *ngTemplateOutlet="oppositeTemplate || _oppositeTemplate; context: { $implicit: event }"></ng-container>
            </div>
            <div class="p-timeline-event-separator" [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="p-timeline-event-marker" [attr.data-pc-section]="'marker'"></div>
                </ng-template>
                <div *ngIf="!last" class="p-timeline-event-connector"></div>
            </div>
            <div class="p-timeline-event-content" [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.p-timeline]': 'true',
                        '[class.p-component]': 'true',
                        '[class.p-timeline-left]': "align === 'left'",
                        '[class.p-timeline-right]': "align === 'right'",
                        '[class.p-timeline-top]': "align === 'top'",
                        '[class.p-timeline-bottom]': "align === 'bottom'",
                        '[class.p-timeline-alternate]': "align === 'alternate'",
                        '[class.p-timeline-vertical]': "layout === 'vertical'",
                        '[class.p-timeline-horizontal]': "layout === 'horizontal'",
                        '[style]': 'style',
                        '[attr.data-pc-section]': "'root'",
                        '[attr.data-pc-name]': "'timeline'"
                    }
                }]
        }], propDecorators: { value: [{
                type: Input
            }], style: [{
                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]
            }], hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });
class TimelineModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: TimelineModule, imports: [Timeline, SharedModule], exports: [Timeline, SharedModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TimelineModule, imports: [Timeline, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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