systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
50 lines • 8.7 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "systelab-translate";
import * as i2 from "@angular/common";
export class TimelineEvent {
constructor(title, publishingDate, text) {
this.title = title;
this.publishingDate = publishingDate;
this.text = text;
this.inverted = false;
}
getIcon() {
if (this.icon) {
return this.icon;
}
else {
return 'icon-download';
}
}
getColor() {
if (this.color) {
return this.color;
}
return 'warning';
}
}
export class TimelineComponent {
constructor(i18nService) {
this.i18nService = i18nService;
this.events = [];
this.timelineClick = new EventEmitter();
}
getPrintableDate(event) {
return this.i18nService.formatDateTime(event.publishingDate, true);
}
doClick(timelineEvent) {
this.timelineClick.emit(timelineEvent);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: TimelineComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: TimelineComponent, selector: "systelab-timeline", inputs: { events: "events" }, outputs: { timelineClick: "timelineClick" }, ngImport: i0, template: "<ul class=\"slab-timeline p-3 mt-3\">\n @for (event of events; track event) {\n <li [class.slab-timeline-inverted]=\"event.inverted\">\n <div class=\"slab-timeline-badge {{event.getColor()}}\"><i class=\"{{event.getIcon()}}\"></i></div>\n <div class=\"slab-timeline-panel\" (click)=\"doClick(event)\">\n <div class=\"slab-timeline-heading\">\n <h4 class=\"slab-timeline-title\">{{event.title}}</h4>\n <p>\n <small class=\"text-muted\"><i class=\"icon-clock\"></i> {{getPrintableDate(event)}}</small>\n </p>\n </div>\n <div class=\"slab-timeline-body\">\n <p>{{event.text}}</p>\n <p *ngIf=\"event.extraText\">{{event.extraText}}</p>\n <p *ngIf=\"event.richExtraText\" [innerHTML]=\"event.richExtraText\"></p>\n </div>\n </div>\n </li>\n }\n</ul>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: TimelineComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-timeline', template: "<ul class=\"slab-timeline p-3 mt-3\">\n @for (event of events; track event) {\n <li [class.slab-timeline-inverted]=\"event.inverted\">\n <div class=\"slab-timeline-badge {{event.getColor()}}\"><i class=\"{{event.getIcon()}}\"></i></div>\n <div class=\"slab-timeline-panel\" (click)=\"doClick(event)\">\n <div class=\"slab-timeline-heading\">\n <h4 class=\"slab-timeline-title\">{{event.title}}</h4>\n <p>\n <small class=\"text-muted\"><i class=\"icon-clock\"></i> {{getPrintableDate(event)}}</small>\n </p>\n </div>\n <div class=\"slab-timeline-body\">\n <p>{{event.text}}</p>\n <p *ngIf=\"event.extraText\">{{event.extraText}}</p>\n <p *ngIf=\"event.richExtraText\" [innerHTML]=\"event.richExtraText\"></p>\n </div>\n </div>\n </li>\n }\n</ul>\n" }]
}], ctorParameters: () => [{ type: i1.I18nService }], propDecorators: { events: [{
type: Input
}], timelineClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc3lzdGVsYWItY29tcG9uZW50cy9zcmMvbGliL3RpbWVsaW5lL3RpbWVsaW5lLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi90aW1lbGluZS90aW1lbGluZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBR3ZFLE1BQU0sT0FBTyxhQUFhO0lBU3pCLFlBQW1CLEtBQWEsRUFBUyxjQUFvQixFQUFTLElBQVk7UUFBL0QsVUFBSyxHQUFMLEtBQUssQ0FBUTtRQUFTLG1CQUFjLEdBQWQsY0FBYyxDQUFNO1FBQVMsU0FBSSxHQUFKLElBQUksQ0FBUTtRQVAzRSxhQUFRLEdBQUcsS0FBSyxDQUFDO0lBU3hCLENBQUM7SUFFTSxPQUFPO1FBQ2IsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ2QsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDO1NBQ2pCO2FBQU07WUFDTixPQUFPLGVBQWUsQ0FBQztTQUN2QjtJQUNGLENBQUM7SUFFTSxRQUFRO1FBQ2QsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2YsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO1NBQ2xCO1FBQ0QsT0FBTyxTQUFTLENBQUM7SUFDbEIsQ0FBQztDQUNEO0FBTUQsTUFBTSxPQUFPLGlCQUFpQjtJQUs3QixZQUFzQixXQUF3QjtRQUF4QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUg5QixXQUFNLEdBQW9CLEVBQUUsQ0FBQztRQUM1QixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFpQixDQUFDO0lBSW5FLENBQUM7SUFFTSxnQkFBZ0IsQ0FBQyxLQUFvQjtRQUMzQyxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxjQUFjLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDcEUsQ0FBQztJQUVNLE9BQU8sQ0FBQyxhQUE0QjtRQUMxQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUN4QyxDQUFDOzhHQWZXLGlCQUFpQjtrR0FBakIsaUJBQWlCLG9JQ3BDOUIscytCQW9CQTs7MkZEZ0JhLGlCQUFpQjtrQkFKN0IsU0FBUzsrQkFDSSxtQkFBbUI7Z0ZBS2hCLE1BQU07c0JBQXJCLEtBQUs7Z0JBQ1csYUFBYTtzQkFBN0IsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJMThuU2VydmljZSB9IGZyb20gJ3N5c3RlbGFiLXRyYW5zbGF0ZSc7XG5cbmV4cG9ydCBjbGFzcyBUaW1lbGluZUV2ZW50IHtcblxuXHRwdWJsaWMgaW52ZXJ0ZWQgPSBmYWxzZTtcblx0cHVibGljIGljb246IHN0cmluZztcblx0cHVibGljIGV4dHJhVGV4dDogc3RyaW5nO1xuXHRwdWJsaWMgcmljaEV4dHJhVGV4dDogc3RyaW5nO1xuXHRwdWJsaWMgZGF0YTogT2JqZWN0O1xuXHRwdWJsaWMgY29sb3I6IHN0cmluZztcblxuXHRjb25zdHJ1Y3RvcihwdWJsaWMgdGl0bGU6IHN0cmluZywgcHVibGljIHB1Ymxpc2hpbmdEYXRlOiBEYXRlLCBwdWJsaWMgdGV4dDogc3RyaW5nKSB7XG5cblx0fVxuXG5cdHB1YmxpYyBnZXRJY29uKCkge1xuXHRcdGlmICh0aGlzLmljb24pIHtcblx0XHRcdHJldHVybiB0aGlzLmljb247XG5cdFx0fSBlbHNlIHtcblx0XHRcdHJldHVybiAnaWNvbi1kb3dubG9hZCc7XG5cdFx0fVxuXHR9XG5cblx0cHVibGljIGdldENvbG9yKCkge1xuXHRcdGlmICh0aGlzLmNvbG9yKSB7XG5cdFx0XHRyZXR1cm4gdGhpcy5jb2xvcjtcblx0XHR9XG5cdFx0cmV0dXJuICd3YXJuaW5nJztcblx0fVxufVxuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6ICAgICdzeXN0ZWxhYi10aW1lbGluZScsXG5cdHRlbXBsYXRlVXJsOiAndGltZWxpbmUuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFRpbWVsaW5lQ29tcG9uZW50IHtcblxuXHRASW5wdXQoKSBwdWJsaWMgZXZlbnRzOiBUaW1lbGluZUV2ZW50W10gPSBbXTtcblx0QE91dHB1dCgpIHB1YmxpYyB0aW1lbGluZUNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxUaW1lbGluZUV2ZW50PigpO1xuXG5cdGNvbnN0cnVjdG9yKHByb3RlY3RlZCBpMThuU2VydmljZTogSTE4blNlcnZpY2UpIHtcblxuXHR9XG5cblx0cHVibGljIGdldFByaW50YWJsZURhdGUoZXZlbnQ6IFRpbWVsaW5lRXZlbnQpIHtcblx0XHRyZXR1cm4gdGhpcy5pMThuU2VydmljZS5mb3JtYXREYXRlVGltZShldmVudC5wdWJsaXNoaW5nRGF0ZSwgdHJ1ZSk7XG5cdH1cblxuXHRwdWJsaWMgZG9DbGljayh0aW1lbGluZUV2ZW50OiBUaW1lbGluZUV2ZW50KSB7XG5cdFx0dGhpcy50aW1lbGluZUNsaWNrLmVtaXQodGltZWxpbmVFdmVudCk7XG5cdH1cbn1cbiIsIjx1bCBjbGFzcz1cInNsYWItdGltZWxpbmUgcC0zIG10LTNcIj5cbiAgICBAZm9yIChldmVudCBvZiBldmVudHM7IHRyYWNrIGV2ZW50KSB7XG4gICAgICAgIDxsaSBbY2xhc3Muc2xhYi10aW1lbGluZS1pbnZlcnRlZF09XCJldmVudC5pbnZlcnRlZFwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNsYWItdGltZWxpbmUtYmFkZ2Uge3tldmVudC5nZXRDb2xvcigpfX1cIj48aSBjbGFzcz1cInt7ZXZlbnQuZ2V0SWNvbigpfX1cIj48L2k+PC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2xhYi10aW1lbGluZS1wYW5lbFwiIChjbGljayk9XCJkb0NsaWNrKGV2ZW50KVwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzbGFiLXRpbWVsaW5lLWhlYWRpbmdcIj5cbiAgICAgICAgICAgICAgICAgICAgPGg0IGNsYXNzPVwic2xhYi10aW1lbGluZS10aXRsZVwiPnt7ZXZlbnQudGl0bGV9fTwvaDQ+XG4gICAgICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHNtYWxsIGNsYXNzPVwidGV4dC1tdXRlZFwiPjxpIGNsYXNzPVwiaWNvbi1jbG9ja1wiPjwvaT4ge3tnZXRQcmludGFibGVEYXRlKGV2ZW50KX19PC9zbWFsbD5cbiAgICAgICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzbGFiLXRpbWVsaW5lLWJvZHlcIj5cbiAgICAgICAgICAgICAgICAgICAgPHA+e3tldmVudC50ZXh0fX08L3A+XG4gICAgICAgICAgICAgICAgICAgIDxwICpuZ0lmPVwiZXZlbnQuZXh0cmFUZXh0XCI+e3tldmVudC5leHRyYVRleHR9fTwvcD5cbiAgICAgICAgICAgICAgICAgICAgPHAgKm5nSWY9XCJldmVudC5yaWNoRXh0cmFUZXh0XCIgW2lubmVySFRNTF09XCJldmVudC5yaWNoRXh0cmFUZXh0XCI+PC9wPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbGk+XG4gICAgfVxuPC91bD5cbiJdfQ==