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
1 lines • 16.6 kB
Source Map (JSON)
{"version":3,"file":"primeng-timeline.mjs","sources":["../../src/timeline/style/timelinestyle.ts","../../src/timeline/timeline.ts","../../src/timeline/primeng-timeline.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n.p-timeline {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n direction: ltr;\n}\n\n.p-timeline-left .p-timeline-event-opposite {\n text-align: right;\n}\n\n.p-timeline-left .p-timeline-event-content {\n text-align: left;\n}\n\n.p-timeline-right .p-timeline-event {\n flex-direction: row-reverse;\n}\n\n.p-timeline-right .p-timeline-event-opposite {\n text-align: left;\n}\n\n.p-timeline-right .p-timeline-event-content {\n text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n flex-direction: row-reverse;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n text-align: right;\n}\n\n.p-timeline-vertical .p-timeline-event-opposite,\n.p-timeline-vertical .p-timeline-event-content {\n padding: ${dt('timeline.vertical.event.content.padding')};\n}\n\n.p-timeline-vertical .p-timeline-event-connector {\n width: ${dt('timeline.event.connector.size')};\n}\n\n.p-timeline-event {\n display: flex;\n position: relative;\n min-height: ${dt('timeline.event.min.height')};\n}\n\n.p-timeline-event:last-child {\n min-height: 0;\n}\n\n.p-timeline-event-opposite {\n flex: 1;\n}\n\n.p-timeline-event-content {\n flex: 1;\n}\n\n.p-timeline-event-separator {\n flex: 0;\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n\n.p-timeline-event-marker {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n align-self: baseline;\n border-width: ${dt('timeline.event.marker.border.width')};\n border-style: solid;\n border-color: ${dt('timeline.event.marker.border.color')};\n border-radius: ${dt('timeline.event.marker.border.radius')};\n width: ${dt('timeline.event.marker.size')};\n height: ${dt('timeline.event.marker.size')};\n background: ${dt('timeline.event.marker.background')};\n}\n\n.p-timeline-event-marker::before {\n content: \" \";\n border-radius: ${dt('timeline.event.marker.content.border.radius')};\n width: ${dt('timeline.event.marker.content.size')};\n height:${dt('timeline.event.marker.content.size')};\n background: ${dt('timeline.event.marker.content.background')};\n}\n\n.p-timeline-event-marker::after {\n content: \" \";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ${dt('timeline.event.marker.border.radius')};\n box-shadow: ${dt('timeline.event.marker.content.inset.shadow')};\n}\n\n.p-timeline-event-connector {\n flex-grow: 1;\n background: ${dt('timeline.event.connector.color')};\n}\n\n.p-timeline-horizontal {\n flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event {\n flex-direction: column;\n flex: 1;\n}\n\n.p-timeline-horizontal .p-timeline-event:last-child {\n flex: 0;\n}\n\n.p-timeline-horizontal .p-timeline-event-separator {\n flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event-connector {\n width: 100%;\n height: ${dt('timeline.event.connector.size')};\n}\n\n.p-timeline-horizontal .p-timeline-event-opposite,\n.p-timeline-horizontal .p-timeline-event-content {\n padding: ${dt('timeline.horizontal.event.content.padding')};\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n flex-direction: column-reverse;\n}\n\n.p-timeline-bottom .p-timeline-event {\n flex-direction: column-reverse;\n}\n`;\n\nconst classes = {\n root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],\n event: 'p-timeline-event',\n eventOpposite: 'p-timeline-event-opposite',\n eventSeparator: 'p-timeline-event-separator',\n eventMarker: 'p-timeline-event-marker',\n eventConnector: 'p-timeline-event-connector',\n eventContent: 'p-timeline-event-content'\n};\n\n@Injectable()\nexport class TimelineStyle extends BaseStyle {\n name = 'timeline';\n\n theme = theme;\n\n classes = classes;\n}\n\n/**\n *\n * Timeline visualizes a series of chained events.\n *\n * [Live Demo](https://primeng.org/timeline)\n *\n * @module timelinestyle\n *\n */\nexport enum TimelineClasses {\n /**\n * Class name of the root element\n */\n root = 'p-timeline',\n /**\n * Class name of the event element\n */\n event = 'p-timeline-event',\n /**\n * Class name of the event opposite element\n */\n eventOpposite = 'p-timeline-event-opposite',\n /**\n * Class name of the event separator element\n */\n eventSeparator = 'p-timeline-event-separator',\n /**\n * Class name of the event marker element\n */\n eventMarker = 'p-timeline-event-marker',\n /**\n * Class name of the event connector element\n */\n eventConnector = 'p-timeline-event-connector',\n /**\n * Class name of the event content element\n */\n eventContent = 'p-timeline-event-content'\n}\n\nexport interface TimelineStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, HostBinding, inject, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { TimelineStyle } from './style/timelinestyle';\n\n/**\n * Timeline visualizes a series of chained events.\n * @group Components\n */\n@Component({\n selector: 'p-timeline',\n standalone: true,\n imports: [CommonModule, SharedModule],\n template: `\n <div *ngFor=\"let event of value; let last = last\" class=\"p-timeline-event\" [attr.data-pc-section]=\"'event'\">\n <div class=\"p-timeline-event-opposite\" [attr.data-pc-section]=\"'opposite'\">\n <ng-container *ngTemplateOutlet=\"oppositeTemplate || _oppositeTemplate; context: { $implicit: event }\"></ng-container>\n </div>\n <div class=\"p-timeline-event-separator\" [attr.data-pc-section]=\"'separator'\">\n <ng-container *ngIf=\"markerTemplate || _markerTemplate; else marker\">\n <ng-container *ngTemplateOutlet=\"markerTemplate || _markerTemplate; context: { $implicit: event }\"></ng-container>\n </ng-container>\n <ng-template #marker>\n <div class=\"p-timeline-event-marker\" [attr.data-pc-section]=\"'marker'\"></div>\n </ng-template>\n <div *ngIf=\"!last\" class=\"p-timeline-event-connector\"></div>\n </div>\n <div class=\"p-timeline-event-content\" [attr.data-pc-section]=\"'content'\">\n <ng-container *ngTemplateOutlet=\"contentTemplate || _contentTemplate; context: { $implicit: event }\"></ng-container>\n </div>\n </div>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [TimelineStyle],\n host: {\n '[class.p-timeline]': 'true',\n '[class.p-component]': 'true',\n '[class.p-timeline-left]': \"align === 'left'\",\n '[class.p-timeline-right]': \"align === 'right'\",\n '[class.p-timeline-top]': \"align === 'top'\",\n '[class.p-timeline-bottom]': \"align === 'bottom'\",\n '[class.p-timeline-alternate]': \"align === 'alternate'\",\n '[class.p-timeline-vertical]': \"layout === 'vertical'\",\n '[class.p-timeline-horizontal]': \"layout === 'horizontal'\",\n '[style]': 'style',\n '[attr.data-pc-section]': \"'root'\",\n '[attr.data-pc-name]': \"'timeline'\"\n }\n})\nexport class Timeline extends BaseComponent implements AfterContentInit, BlockableUI {\n /**\n * An array of events to display.\n * @group Props\n */\n @Input() value: any[] | undefined;\n /**\n * Inline style of the component.\n * @group Props\n */\n @Input() style: { [klass: string]: any } | null | undefined;\n /**\n * Style class of the component.\n * @group Props\n */\n @Input() styleClass: string | undefined;\n /**\n * Position of the timeline bar relative to the content. Valid values are \"left\", \"right\" for vertical layout and \"top\", \"bottom\" for horizontal layout.\n * @group Props\n */\n @Input() align: string = 'left';\n /**\n * Orientation of the timeline.\n * @group Props\n */\n @Input() layout: 'vertical' | 'horizontal' = 'vertical';\n /**\n * Custom content template.\n * @group Templates\n */\n @ContentChild('content', { descendants: false }) contentTemplate: Nullable<TemplateRef<any>>;\n\n /**\n * Custom opposite item template.\n * @group Templates\n */\n @ContentChild('opposite', { descendants: false }) oppositeTemplate: Nullable<TemplateRef<any>>;\n\n /**\n * Custom marker template.\n * @group Templates\n */\n @ContentChild('marker', { descendants: false }) markerTemplate: Nullable<TemplateRef<any>>;\n\n @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<any>>;\n\n _contentTemplate: TemplateRef<any> | undefined;\n\n _oppositeTemplate: TemplateRef<any> | undefined;\n\n _markerTemplate: TemplateRef<any> | undefined;\n\n _componentStyle = inject(TimelineStyle);\n\n @HostBinding('class') get hostClass() {\n return this.styleClass;\n }\n\n getBlockableElement(): HTMLElement {\n return this.el.nativeElement.children[0];\n }\n\n ngAfterContentInit() {\n (this.templates as QueryList<PrimeTemplate>).forEach((item) => {\n switch (item.getType()) {\n case 'content':\n this._contentTemplate = item.template;\n break;\n\n case 'opposite':\n this._oppositeTemplate = item.template;\n break;\n\n case 'marker':\n this._markerTemplate = item.template;\n break;\n }\n });\n }\n}\n\n@NgModule({\n imports: [Timeline, SharedModule],\n exports: [Timeline, SharedModule]\n})\nexport class TimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}