primeng/fesm2022/primeng-timeline.mjs

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

export * from 'primeng/types/timeline';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, contentChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
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';
    style = style;
    classes = classes;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimelineStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimelineStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimelineStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * Timeline visualizes a series of chained events.
 *
 * [Live Demo](https://primeng.dev/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 = {}));

const TIMELINE_INSTANCE = new InjectionToken('TIMELINE_INSTANCE');
/**
 * Timeline visualizes a series of chained events.
 * @group Components
 */
class Timeline extends BaseComponent {
    componentName = 'Timeline';
    bindDirectiveInstance = inject(Bind, { self: true });
    $pcTimeline = inject(TIMELINE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    /**
     * An array of events to display.
     * @group Props
     */
    value = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
    /**
     * 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 = input('left', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
    /**
     * Orientation of the timeline.
     * @group Props
     */
    layout = input('vertical', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
    /**
     * Custom content template.
     * @param {TimelineItemTemplateContext} context - item context.
     * @see {@link TimelineItemTemplateContext}
     * @group Templates
     */
    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Custom opposite item template.
     * @param {TimelineItemTemplateContext} context - item context.
     * @see {@link TimelineItemTemplateContext}
     * @group Templates
     */
    oppositeTemplate = contentChild('opposite', { ...(ngDevMode ? { debugName: "oppositeTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Custom marker template.
     * @param {TimelineItemTemplateContext} context - item context.
     * @see {@link TimelineItemTemplateContext}
     * @group Templates
     */
    markerTemplate = contentChild('marker', { ...(ngDevMode ? { debugName: "markerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    _componentStyle = inject(TimelineStyle);
    dataP = computed(() => this.cn({
        [this.layout()]: this.layout(),
        [this.align()]: this.align()
    }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
    getBlockableElement() {
        return this.el.nativeElement.children[0];
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Timeline, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: Timeline, isStandalone: true, selector: "p-timeline", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cx('root')", "attr.data-p": "dataP()" } }, providers: [TimelineStyle, { provide: TIMELINE_INSTANCE, useExisting: Timeline }, { provide: PARENT_INSTANCE, useExisting: Timeline }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }, { propertyName: "oppositeTemplate", first: true, predicate: ["opposite"], isSignal: true }, { propertyName: "markerTemplate", first: true, predicate: ["marker"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
        @for (event of value(); track $index; let last = $last) {
            <div [pBind]="ptm('event')" [class]="cx('event')" [attr.data-p]="dataP()">
                <div [pBind]="ptm('eventOpposite')" [class]="cx('eventOpposite')" [attr.data-p]="dataP()">
                    <ng-container *ngTemplateOutlet="oppositeTemplate(); context: { $implicit: event }"></ng-container>
                </div>
                <div [pBind]="ptm('eventSeparator')" [class]="cx('eventSeparator')" [attr.data-p]="dataP()">
                    @if (markerTemplate()) {
                        <ng-container *ngTemplateOutlet="markerTemplate()!; context: { $implicit: event }"></ng-container>
                    } @else {
                        <div [pBind]="ptm('eventMarker')" [class]="cx('eventMarker')" [attr.data-p]="dataP()"></div>
                    }
                    @if (!last) {
                        <div [pBind]="ptm('eventConnector')" [class]="cx('eventConnector')" [attr.data-p]="dataP()"></div>
                    }
                </div>
                <div [pBind]="ptm('eventContent')" [class]="cx('eventContent')" [attr.data-p]="dataP()">
                    <ng-container *ngTemplateOutlet="contentTemplate(); context: { $implicit: event }"></ng-container>
                </div>
            </div>
        }
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Timeline, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-timeline',
                    standalone: true,
                    imports: [NgTemplateOutlet, Bind],
                    template: `
        @for (event of value(); track $index; let last = $last) {
            <div [pBind]="ptm('event')" [class]="cx('event')" [attr.data-p]="dataP()">
                <div [pBind]="ptm('eventOpposite')" [class]="cx('eventOpposite')" [attr.data-p]="dataP()">
                    <ng-container *ngTemplateOutlet="oppositeTemplate(); context: { $implicit: event }"></ng-container>
                </div>
                <div [pBind]="ptm('eventSeparator')" [class]="cx('eventSeparator')" [attr.data-p]="dataP()">
                    @if (markerTemplate()) {
                        <ng-container *ngTemplateOutlet="markerTemplate()!; context: { $implicit: event }"></ng-container>
                    } @else {
                        <div [pBind]="ptm('eventMarker')" [class]="cx('eventMarker')" [attr.data-p]="dataP()"></div>
                    }
                    @if (!last) {
                        <div [pBind]="ptm('eventConnector')" [class]="cx('eventConnector')" [attr.data-p]="dataP()"></div>
                    }
                </div>
                <div [pBind]="ptm('eventContent')" [class]="cx('eventContent')" [attr.data-p]="dataP()">
                    <ng-container *ngTemplateOutlet="contentTemplate(); context: { $implicit: event }"></ng-container>
                </div>
            </div>
        }
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [TimelineStyle, { provide: TIMELINE_INSTANCE, useExisting: Timeline }, { provide: PARENT_INSTANCE, useExisting: Timeline }],
                    host: {
                        '[class]': "cx('root')",
                        '[attr.data-p]': 'dataP()'
                    },
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], oppositeTemplate: [{ type: i0.ContentChild, args: ['opposite', { ...{ descendants: false }, isSignal: true }] }], markerTemplate: [{ type: i0.ContentChild, args: ['marker', { ...{ descendants: false }, isSignal: true }] }] } });
class TimelineModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: TimelineModule, imports: [Timeline], exports: [Timeline] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimelineModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimelineModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [Timeline],
                    exports: [Timeline]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { Timeline, TimelineClasses, TimelineModule, TimelineStyle };
//# sourceMappingURL=primeng-timeline.mjs.map