@doku-dev/doku-fragment
Version:
A new Angular UI library that moving away from Bootstrap and built from scratch.
79 lines • 10.8 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, HostBinding, Input, ViewEncapsulation, } from '@angular/core';
import { DokuTimelineDateTime } from './timeline-date-time.component';
import { DokuTimelineItem } from './timeline-item.component';
import * as i0 from "@angular/core";
export class DokuTimeline {
constructor() {
/**
* The orientation of the timeline.
* @default `horizontal`
*/
this.orientation = 'horizontal';
}
get classes() {
return ['d-timeline', `d-timeline-${this.orientation}`];
}
get hasDateTime() {
return !!this.dateTimeRef;
}
ngAfterViewInit() {
this._toggleActiveItemColor();
}
ngOnChanges({ activeIndex }) {
if (activeIndex?.currentValue !== activeIndex?.previousValue) {
this._toggleActiveItemColor();
}
}
/**
* Toggle each timeline item color to active from the first to the last active item
* that represented by the active index that represent.
*/
_toggleActiveItemColor() {
if (!this.timelineItems)
return;
this.timelineItems.forEach((itemRef, idx) => {
if (this.activeIndex === undefined || this.activeIndex < -1) {
return;
}
const itemEl = itemRef.nativeElement;
const isActive = idx <= this.activeIndex;
const isLastActive = idx === this.activeIndex;
if (isLastActive && this.orientation === 'horizontal') {
itemEl.classList.remove('is-active');
itemEl.classList.add('is-active-last');
}
else if (isActive) {
itemEl.classList.remove('is-active-last');
itemEl.classList.add('is-active');
}
else {
itemEl.classList.remove('is-active-last');
itemEl.classList.remove('is-active');
}
});
}
}
DokuTimeline.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
DokuTimeline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuTimeline, isStandalone: true, selector: "doku-timeline", inputs: { activeIndex: "activeIndex", orientation: "orientation" }, host: { properties: { "class": "this.classes", "class.has-date-time": "this.hasDateTime" } }, queries: [{ propertyName: "dateTimeRef", first: true, predicate: DokuTimelineDateTime, descendants: true }, { propertyName: "timelineItems", predicate: DokuTimelineItem, read: ElementRef }], exportAs: ["dokuTimeline"], usesOnChanges: true, ngImport: i0, template: "<ol class=\"d-timeline-list\">\n <ng-content></ng-content>\n</ol>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuTimeline, decorators: [{
type: Component,
args: [{ selector: 'doku-timeline', exportAs: 'dokuTimeline', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ol class=\"d-timeline-list\">\n <ng-content></ng-content>\n</ol>\n" }]
}], propDecorators: { dateTimeRef: [{
type: ContentChild,
args: [DokuTimelineDateTime]
}], timelineItems: [{
type: ContentChildren,
args: [DokuTimelineItem, { read: ElementRef }]
}], activeIndex: [{
type: Input
}], orientation: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}], hasDateTime: [{
type: HostBinding,
args: ['class.has-date-time']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZG9rdS1mcmFnbWVudC9zcmMvbGliL3RpbWVsaW5lL3RpbWVsaW5lLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rva3UtZnJhZ21lbnQvc3JjL2xpYi90aW1lbGluZS90aW1lbGluZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFXLE1BQU0saUJBQWlCLENBQUM7QUFDeEQsT0FBTyxFQUVMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLGVBQWUsRUFDZixVQUFVLEVBQ1YsV0FBVyxFQUNYLEtBQUssRUFJTCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7O0FBVzdELE1BQU0sT0FBTyxZQUFZO0lBVHpCO1FBbUJFOzs7V0FHRztRQUVILGdCQUFXLEdBQThCLFlBQVksQ0FBQztLQWtEdkQ7SUFoREMsSUFDYyxPQUFPO1FBQ25CLE9BQU8sQ0FBQyxZQUFZLEVBQUUsY0FBYyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztJQUMxRCxDQUFDO0lBRUQsSUFDYyxXQUFXO1FBQ3ZCLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDNUIsQ0FBQztJQUVELGVBQWU7UUFDYixJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBRUQsV0FBVyxDQUFDLEVBQUUsV0FBVyxFQUFpQjtRQUN4QyxJQUFJLFdBQVcsRUFBRSxZQUFZLEtBQUssV0FBVyxFQUFFLGFBQWEsRUFBRTtZQUM1RCxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQztTQUMvQjtJQUNILENBQUM7SUFFRDs7O09BR0c7SUFDSyxzQkFBc0I7UUFDNUIsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhO1lBQUUsT0FBTztRQUVoQyxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDLE9BQW1CLEVBQUUsR0FBRyxFQUFFLEVBQUU7WUFDdEQsSUFBSSxJQUFJLENBQUMsV0FBVyxLQUFLLFNBQVMsSUFBSSxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQyxFQUFFO2dCQUMzRCxPQUFPO2FBQ1I7WUFFRCxNQUFNLE1BQU0sR0FBRyxPQUFPLENBQUMsYUFBNEIsQ0FBQztZQUNwRCxNQUFNLFFBQVEsR0FBRyxHQUFHLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQztZQUN6QyxNQUFNLFlBQVksR0FBRyxHQUFHLEtBQUssSUFBSSxDQUFDLFdBQVcsQ0FBQztZQUU5QyxJQUFJLFlBQVksSUFBSSxJQUFJLENBQUMsV0FBVyxLQUFLLFlBQVksRUFBRTtnQkFDckQsTUFBTSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7Z0JBQ3JDLE1BQU0sQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLGdCQUFnQixDQUFDLENBQUM7YUFDeEM7aUJBQU0sSUFBSSxRQUFRLEVBQUU7Z0JBQ25CLE1BQU0sQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7Z0JBQzFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFDO2FBQ25DO2lCQUFNO2dCQUNMLE1BQU0sQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7Z0JBQzFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2FBQ3RDO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDOzt5R0FoRVUsWUFBWTs2RkFBWixZQUFZLG9SQUNULG9CQUFvQixtRUFDakIsZ0JBQWdCLFFBQVUsVUFBVSw4RUM3QnZELHNFQUdBLDJDRG1CWSxZQUFZOzJGQUtYLFlBQVk7a0JBVHhCLFNBQVM7K0JBQ0UsZUFBZSxZQUNmLGNBQWMsY0FDWixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsaUJBRVIsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTTs4QkFHWCxXQUFXO3NCQUE5QyxZQUFZO3VCQUFDLG9CQUFvQjtnQkFDdUIsYUFBYTtzQkFBckUsZUFBZTt1QkFBQyxnQkFBZ0IsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7Z0JBTXZELFdBQVc7c0JBRFYsS0FBSztnQkFRTixXQUFXO3NCQURWLEtBQUs7Z0JBSVEsT0FBTztzQkFEcEIsV0FBVzt1QkFBQyxPQUFPO2dCQU1OLFdBQVc7c0JBRHhCLFdBQVc7dUJBQUMscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlLCBOZ0NsYXNzIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgUXVlcnlMaXN0LFxuICBTaW1wbGVDaGFuZ2VzLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEb2t1VGltZWxpbmVEYXRlVGltZSB9IGZyb20gJy4vdGltZWxpbmUtZGF0ZS10aW1lLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEb2t1VGltZWxpbmVJdGVtIH0gZnJvbSAnLi90aW1lbGluZS1pdGVtLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Rva3UtdGltZWxpbmUnLFxuICBleHBvcnRBczogJ2Rva3VUaW1lbGluZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vdGltZWxpbmUuY29tcG9uZW50Lmh0bWwnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgRG9rdVRpbWVsaW5lIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25DaGFuZ2VzIHtcbiAgQENvbnRlbnRDaGlsZChEb2t1VGltZWxpbmVEYXRlVGltZSkgZGF0ZVRpbWVSZWY/OiBFbGVtZW50UmVmPERva3VUaW1lbGluZURhdGVUaW1lPjtcbiAgQENvbnRlbnRDaGlsZHJlbihEb2t1VGltZWxpbmVJdGVtLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSkgdGltZWxpbmVJdGVtcz86IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPjtcblxuICAvKipcbiAgICogVGhlIGluZGV4IG9mIHRoZSBsYXN0IGFjdGl2ZSB0aW1lbGluZSBpdGVtLlxuICAgKi9cbiAgQElucHV0KClcbiAgYWN0aXZlSW5kZXg/OiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIFRoZSBvcmllbnRhdGlvbiBvZiB0aGUgdGltZWxpbmUuXG4gICAqIEBkZWZhdWx0IGBob3Jpem9udGFsYFxuICAgKi9cbiAgQElucHV0KClcbiAgb3JpZW50YXRpb246ICdob3Jpem9udGFsJyB8ICd2ZXJ0aWNhbCcgPSAnaG9yaXpvbnRhbCc7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHByb3RlY3RlZCBnZXQgY2xhc3NlcygpOiBOZ0NsYXNzWyduZ0NsYXNzJ10ge1xuICAgIHJldHVybiBbJ2QtdGltZWxpbmUnLCBgZC10aW1lbGluZS0ke3RoaXMub3JpZW50YXRpb259YF07XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmhhcy1kYXRlLXRpbWUnKVxuICBwcm90ZWN0ZWQgZ2V0IGhhc0RhdGVUaW1lKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiAhIXRoaXMuZGF0ZVRpbWVSZWY7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy5fdG9nZ2xlQWN0aXZlSXRlbUNvbG9yKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyh7IGFjdGl2ZUluZGV4IH06IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBpZiAoYWN0aXZlSW5kZXg/LmN1cnJlbnRWYWx1ZSAhPT0gYWN0aXZlSW5kZXg/LnByZXZpb3VzVmFsdWUpIHtcbiAgICAgIHRoaXMuX3RvZ2dsZUFjdGl2ZUl0ZW1Db2xvcigpO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBUb2dnbGUgZWFjaCB0aW1lbGluZSBpdGVtIGNvbG9yIHRvIGFjdGl2ZSBmcm9tIHRoZSBmaXJzdCB0byB0aGUgbGFzdCBhY3RpdmUgaXRlbVxuICAgKiB0aGF0IHJlcHJlc2VudGVkIGJ5IHRoZSBhY3RpdmUgaW5kZXggdGhhdCByZXByZXNlbnQuXG4gICAqL1xuICBwcml2YXRlIF90b2dnbGVBY3RpdmVJdGVtQ29sb3IoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLnRpbWVsaW5lSXRlbXMpIHJldHVybjtcblxuICAgIHRoaXMudGltZWxpbmVJdGVtcy5mb3JFYWNoKChpdGVtUmVmOiBFbGVtZW50UmVmLCBpZHgpID0+IHtcbiAgICAgIGlmICh0aGlzLmFjdGl2ZUluZGV4ID09PSB1bmRlZmluZWQgfHwgdGhpcy5hY3RpdmVJbmRleCA8IC0xKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgY29uc3QgaXRlbUVsID0gaXRlbVJlZi5uYXRpdmVFbGVtZW50IGFzIEhUTUxFbGVtZW50O1xuICAgICAgY29uc3QgaXNBY3RpdmUgPSBpZHggPD0gdGhpcy5hY3RpdmVJbmRleDtcbiAgICAgIGNvbnN0IGlzTGFzdEFjdGl2ZSA9IGlkeCA9PT0gdGhpcy5hY3RpdmVJbmRleDtcblxuICAgICAgaWYgKGlzTGFzdEFjdGl2ZSAmJiB0aGlzLm9yaWVudGF0aW9uID09PSAnaG9yaXpvbnRhbCcpIHtcbiAgICAgICAgaXRlbUVsLmNsYXNzTGlzdC5yZW1vdmUoJ2lzLWFjdGl2ZScpO1xuICAgICAgICBpdGVtRWwuY2xhc3NMaXN0LmFkZCgnaXMtYWN0aXZlLWxhc3QnKTtcbiAgICAgIH0gZWxzZSBpZiAoaXNBY3RpdmUpIHtcbiAgICAgICAgaXRlbUVsLmNsYXNzTGlzdC5yZW1vdmUoJ2lzLWFjdGl2ZS1sYXN0Jyk7XG4gICAgICAgIGl0ZW1FbC5jbGFzc0xpc3QuYWRkKCdpcy1hY3RpdmUnKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGl0ZW1FbC5jbGFzc0xpc3QucmVtb3ZlKCdpcy1hY3RpdmUtbGFzdCcpO1xuICAgICAgICBpdGVtRWwuY2xhc3NMaXN0LnJlbW92ZSgnaXMtYWN0aXZlJyk7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cbn1cbiIsIjxvbCBjbGFzcz1cImQtdGltZWxpbmUtbGlzdFwiPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L29sPlxuIl19