@junte/ui
Version:
Quality Angular UI components kit
27 lines • 4.1 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component, ContentChildren, HostBinding, QueryList } from '@angular/core';
import { UI } from '../../core/enums/ui';
import { TimelineItemComponent } from './item/timeline-item.component';
var TimelineComponent = /** @class */ (function () {
function TimelineComponent() {
this.ui = UI;
this.host = 'jnt-timeline-host';
}
__decorate([
HostBinding('attr.host'),
__metadata("design:type", Object)
], TimelineComponent.prototype, "host", void 0);
__decorate([
ContentChildren(TimelineItemComponent),
__metadata("design:type", QueryList)
], TimelineComponent.prototype, "items", void 0);
TimelineComponent = __decorate([
Component({
selector: 'jnt-timeline',
template: "<jnt-stack child-of=\"jnt-timeline-host\" *ngIf=\"!!items?.length\"\n [align]=\"ui.align.stretch\"\n [gutter]=\"ui.gutter.tiny\">\n <jnt-stack child-of=\"jnt-timeline-host\" data-lines *ngFor=\"let item of items; let i = index\"\n [align]=\"ui.align.stretch\"\n [gutter]=\"ui.gutter.small\">\n <jnt-stack child-of=\"jnt-timeline-host\" [orientation]=\"ui.orientation.horizontal\"\n [align]=\"ui.align.center\">\n <div child-of=\"jnt-timeline-host\" data-mark>\n <jnt-icon child-of=\"jnt-timeline-host\" *ngIf=\"!!item?.icon; else defaultTemplate\" [icon]=\"item.icon\" [style.color]=\"item.color\"></jnt-icon>\n <ng-template #defaultTemplate>\n <div child-of=\"jnt-timeline-host\" data-circle [style.background-color]=\"item.color\"\n [style.color]=\"item.color | textBrightness\">{{i + 1}}</div>\n </ng-template>\n </div>\n <div child-of=\"jnt-timeline-host\" data-title>{{item.title}}</div>\n </jnt-stack>\n <jnt-stack child-of=\"jnt-timeline-host\" [orientation]=\"ui.orientation.horizontal\"\n [align]=\"ui.align.stretch\">\n <div child-of=\"jnt-timeline-host\" data-line>\n <div child-of=\"jnt-timeline-host\" ></div>\n </div>\n <div child-of=\"jnt-timeline-host\" data-content>\n <ng-container [ngTemplateOutlet]=\"item.contentTemplate\"></ng-container>\n </div>\n </jnt-stack>\n </jnt-stack>\n </jnt-stack>"
})
], TimelineComponent);
return TimelineComponent;
}());
export { TimelineComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGp1bnRlL3VpLyIsInNvdXJjZXMiOlsibGliL2NvbGxlY3Rpb25zL3RpbWVsaW5lL3RpbWVsaW5lLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuRixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDekMsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFNdkU7SUFBQTtRQUVFLE9BQUUsR0FBRyxFQUFFLENBQUM7UUFFMkIsU0FBSSxHQUFHLG1CQUFtQixDQUFDO0lBS2hFLENBQUM7SUFMMkI7UUFBekIsV0FBVyxDQUFDLFdBQVcsQ0FBQzs7bURBQXFDO0lBRzlEO1FBREMsZUFBZSxDQUFDLHFCQUFxQixDQUFDO2tDQUNoQyxTQUFTO29EQUF3QjtJQVA3QixpQkFBaUI7UUFKN0IsU0FBUyxDQUFDO1lBQ1QsUUFBUSxFQUFFLGNBQWM7WUFDeEIsK2pEQUEyQztTQUM1QyxDQUFDO09BQ1csaUJBQWlCLENBUzdCO0lBQUQsd0JBQUM7Q0FBQSxBQVRELElBU0M7U0FUWSxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZHJlbiwgSG9zdEJpbmRpbmcsIFF1ZXJ5TGlzdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVUkgfSBmcm9tICcuLi8uLi9jb3JlL2VudW1zL3VpJztcbmltcG9ydCB7IFRpbWVsaW5lSXRlbUNvbXBvbmVudCB9IGZyb20gJy4vaXRlbS90aW1lbGluZS1pdGVtLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2pudC10aW1lbGluZScsXG4gIHRlbXBsYXRlVXJsOiAnLi90aW1lbGluZS5lbmNhcHN1bGF0ZWQuaHRtbCcsXG59KVxuZXhwb3J0IGNsYXNzIFRpbWVsaW5lQ29tcG9uZW50IHtcblxuICB1aSA9IFVJO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5ob3N0JykgcmVhZG9ubHkgaG9zdCA9ICdqbnQtdGltZWxpbmUtaG9zdCc7XG5cbiAgQENvbnRlbnRDaGlsZHJlbihUaW1lbGluZUl0ZW1Db21wb25lbnQpXG4gIGl0ZW1zOiBRdWVyeUxpc3Q8VGltZWxpbmVJdGVtQ29tcG9uZW50PjtcblxufVxuIl19