ngx-mat-timeline
Version:
Timeline component for Angular Material
231 lines (224 loc) • 34.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ContentChild, ViewChild, QueryList, HostBinding, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { Subject, Observable } from 'rxjs';
import { tap, first, throttleTime, takeUntil } from 'rxjs/operators';
class NgxMatTimelineItemIcon {
}
NgxMatTimelineItemIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimelineItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
NgxMatTimelineItemIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.2", type: NgxMatTimelineItemIcon, selector: "ng-template[ngxMatTimelineItemIcon]", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimelineItemIcon, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[ngxMatTimelineItemIcon]',
}]
}] });
class NgxMatTimelineItemLabel {
}
NgxMatTimelineItemLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimelineItemLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
NgxMatTimelineItemLabel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.2", type: NgxMatTimelineItemLabel, selector: "ng-template[ngxMatTimelineItemLabel]", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimelineItemLabel, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[ngxMatTimelineItemLabel]',
}]
}] });
class NgxMatTimelineItem {
constructor() {
}
_updateVerticalCenteredLayout() {
this._fillEl.nativeElement.style.minWidth = this._contentEl.nativeElement.offsetWidth + 'px';
this._fillEl.nativeElement.style.minHeight = 'unset';
}
_updateHorizontalCenteredLayout() {
this._fillEl.nativeElement.style.minHeight = this._contentEl.nativeElement.offsetHeight + 'px';
this._fillEl.nativeElement.style.minWidth = 'unset';
}
}
NgxMatTimelineItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimelineItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxMatTimelineItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NgxMatTimelineItem, selector: "ngx-mat-timeline-item", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconUrl: "iconUrl" }, host: { classAttribute: "ngx-mat-timeline-item" }, queries: [{ propertyName: "customIconTpl", first: true, predicate: NgxMatTimelineItemIcon, descendants: true, read: TemplateRef }, { propertyName: "customLabelTpl", first: true, predicate: NgxMatTimelineItemLabel, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_contentEl", first: true, predicate: ["contentEl"], descendants: true, static: true }, { propertyName: "_fillEl", first: true, predicate: ["fillEl"], descendants: true, static: true }], ngImport: i0, template: "\n<div #fillEl class=\"ngx-mat-timeline-item-fill\"></div>\n\n<div class=\"ngx-mat-timeline-item-timeline\">\n\n <ng-container\n *ngTemplateOutlet=\"customIconTpl ? customIconTpl : iconTpl\"\n ></ng-container>\n\n <ng-template #iconTpl>\n <mat-icon\n *ngIf=\"icon; else svgIconTpl\"\n class=\"ngx-mat-timeline-item-icon\">{{ icon }}</mat-icon>\n </ng-template>\n\n <ng-template #svgIconTpl>\n <mat-icon\n *ngIf=\"svgIcon; else iconUrlTpl\"\n [svgIcon]=\"$any(svgIcon)\"\n class=\"ngx-mat-timeline-item-icon\"></mat-icon>\n </ng-template>\n\n <ng-template #iconUrlTpl>\n <img\n *ngIf=\"iconUrl\"\n [src]=\"iconUrl\"\n class=\"ngx-mat-timeline-item-icon\"/>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"customLabelTpl ? customLabelTpl : labelTpl\"\n ></ng-container>\n\n <ng-template #labelTpl>\n <div *ngIf=\"label\" class=\"mat-caption ngx-mat-timeline-item-label\">{{ label }}</div>\n </ng-template>\n\n <div class=\"ngx-mat-timeline-item-line\"></div>\n\n</div>\n\n<div #contentEl class=\"ngx-mat-timeline-item-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".ngx-mat-timeline-item{display:flex;gap:24px}.ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-line{display:none}.ngx-mat-timeline-item-timeline{display:flex;gap:8px}.ngx-mat-timeline-item-icon{margin:0;padding:0;width:24px;height:24px;object-fit:cover;border-radius:50%}.ngx-mat-timeline-item-line{flex:1;background-color:#0000001f}.ngx-mat-timeline-item-fill,.ngx-mat-timeline-item-content{flex:1}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item{justify-content:flex-start;align-items:stretch}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item:not(:last-child){margin-bottom:8px}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item:not(:last-child) .ngx-mat-timeline-item-fill,.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item:not(:last-child) .ngx-mat-timeline-item-content{margin-bottom:48px}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-timeline{min-width:48px;max-width:48px;flex-direction:column;justify-content:flex-start;align-items:center}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-label{width:100%;text-align:center}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-line{width:1px;height:auto;min-height:8px}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child{margin-bottom:8px}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-line{display:block}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-fill,.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-content{margin-bottom:48px}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child{margin-bottom:0}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child .ngx-mat-timeline-item-line{display:none}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child .ngx-mat-timeline-item-content{margin-bottom:0}.ngx-mat-timeline-vertical.ngx-mat-timeline-start>.ngx-mat-timeline-content .ngx-mat-timeline-item{flex-direction:row}.ngx-mat-timeline-vertical.ngx-mat-timeline-start>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-fill{display:none}.ngx-mat-timeline-vertical.ngx-mat-timeline-start>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-content{text-align:left;display:flex;justify-content:flex-start;align-items:flex-start}.ngx-mat-timeline-vertical.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd){flex-direction:row}.ngx-mat-timeline-vertical.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd) .ngx-mat-timeline-item-content{text-align:left;display:flex;justify-content:flex-start;align-items:flex-start}.ngx-mat-timeline-vertical.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even){flex-direction:row-reverse}.ngx-mat-timeline-vertical.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even) .ngx-mat-timeline-item-content{text-align:right;display:flex;justify-content:flex-end;align-items:flex-start}.ngx-mat-timeline-vertical.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even){flex-direction:row}.ngx-mat-timeline-vertical.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even) .ngx-mat-timeline-item-content{text-align:left;display:flex;justify-content:flex-start;align-items:flex-start}.ngx-mat-timeline-vertical.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd){flex-direction:row-reverse}.ngx-mat-timeline-vertical.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd) .ngx-mat-timeline-item-content{text-align:right;display:flex;justify-content:flex-end;align-items:flex-start}.ngx-mat-timeline-vertical.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item{flex-direction:row-reverse}.ngx-mat-timeline-vertical.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-fill{display:none}.ngx-mat-timeline-vertical.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-content{text-align:right;display:flex;justify-content:flex-end;align-items:flex-start}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item{justify-content:flex-start;align-items:stretch}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item:not(:last-child){margin-right:8px}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item:not(:last-child) .ngx-mat-timeline-item-fill,.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item:not(:last-child) .ngx-mat-timeline-item-content{margin-right:48px}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item .ngx-mat-timeline-item-timeline{min-height:48px;max-height:48px;flex-direction:row;justify-content:flex-start;align-items:center}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item .ngx-mat-timeline-item-label{width:auto;text-align:left}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item .ngx-mat-timeline-item-line{width:auto;min-width:8px;height:1px}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child{margin-right:8px}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-line{display:block}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-fill,.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-content{margin-right:48px}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child{margin-right:0}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child .ngx-mat-timeline-item-line{display:none}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child .ngx-mat-timeline-item-content{margin-right:0}.ngx-mat-timeline-horizontal.ngx-mat-timeline-start>.ngx-mat-timeline-content .ngx-mat-timeline-item{flex-direction:column}.ngx-mat-timeline-horizontal.ngx-mat-timeline-start>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-fill{display:none}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd){flex-direction:column}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd) .ngx-mat-timeline-item-content{display:flex;justify-content:flex-start;align-items:flex-start}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even){flex-direction:column-reverse}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even) .ngx-mat-timeline-item-content{display:flex;justify-content:flex-start;align-items:flex-end}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even){flex-direction:column}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even) .ngx-mat-timeline-item-content{display:flex;justify-content:flex-start;align-items:flex-start}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd){flex-direction:column-reverse}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd) .ngx-mat-timeline-item-content{display:flex;justify-content:flex-start;align-items:flex-end}.ngx-mat-timeline-horizontal.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item{flex-direction:column-reverse}.ngx-mat-timeline-horizontal.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-content{display:flex;justify-content:flex-start;align-items:flex-end}.ngx-mat-timeline-horizontal.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-fill{display:none}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimelineItem, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timeline-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
'class': 'ngx-mat-timeline-item'
}, template: "\n<div #fillEl class=\"ngx-mat-timeline-item-fill\"></div>\n\n<div class=\"ngx-mat-timeline-item-timeline\">\n\n <ng-container\n *ngTemplateOutlet=\"customIconTpl ? customIconTpl : iconTpl\"\n ></ng-container>\n\n <ng-template #iconTpl>\n <mat-icon\n *ngIf=\"icon; else svgIconTpl\"\n class=\"ngx-mat-timeline-item-icon\">{{ icon }}</mat-icon>\n </ng-template>\n\n <ng-template #svgIconTpl>\n <mat-icon\n *ngIf=\"svgIcon; else iconUrlTpl\"\n [svgIcon]=\"$any(svgIcon)\"\n class=\"ngx-mat-timeline-item-icon\"></mat-icon>\n </ng-template>\n\n <ng-template #iconUrlTpl>\n <img\n *ngIf=\"iconUrl\"\n [src]=\"iconUrl\"\n class=\"ngx-mat-timeline-item-icon\"/>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"customLabelTpl ? customLabelTpl : labelTpl\"\n ></ng-container>\n\n <ng-template #labelTpl>\n <div *ngIf=\"label\" class=\"mat-caption ngx-mat-timeline-item-label\">{{ label }}</div>\n </ng-template>\n\n <div class=\"ngx-mat-timeline-item-line\"></div>\n\n</div>\n\n<div #contentEl class=\"ngx-mat-timeline-item-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".ngx-mat-timeline-item{display:flex;gap:24px}.ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-line{display:none}.ngx-mat-timeline-item-timeline{display:flex;gap:8px}.ngx-mat-timeline-item-icon{margin:0;padding:0;width:24px;height:24px;object-fit:cover;border-radius:50%}.ngx-mat-timeline-item-line{flex:1;background-color:#0000001f}.ngx-mat-timeline-item-fill,.ngx-mat-timeline-item-content{flex:1}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item{justify-content:flex-start;align-items:stretch}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item:not(:last-child){margin-bottom:8px}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item:not(:last-child) .ngx-mat-timeline-item-fill,.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item:not(:last-child) .ngx-mat-timeline-item-content{margin-bottom:48px}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-timeline{min-width:48px;max-width:48px;flex-direction:column;justify-content:flex-start;align-items:center}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-label{width:100%;text-align:center}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-line{width:1px;height:auto;min-height:8px}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child{margin-bottom:8px}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-line{display:block}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-fill,.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-content{margin-bottom:48px}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child{margin-bottom:0}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child .ngx-mat-timeline-item-line{display:none}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child .ngx-mat-timeline-item-content{margin-bottom:0}.ngx-mat-timeline-vertical.ngx-mat-timeline-start>.ngx-mat-timeline-content .ngx-mat-timeline-item{flex-direction:row}.ngx-mat-timeline-vertical.ngx-mat-timeline-start>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-fill{display:none}.ngx-mat-timeline-vertical.ngx-mat-timeline-start>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-content{text-align:left;display:flex;justify-content:flex-start;align-items:flex-start}.ngx-mat-timeline-vertical.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd){flex-direction:row}.ngx-mat-timeline-vertical.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd) .ngx-mat-timeline-item-content{text-align:left;display:flex;justify-content:flex-start;align-items:flex-start}.ngx-mat-timeline-vertical.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even){flex-direction:row-reverse}.ngx-mat-timeline-vertical.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even) .ngx-mat-timeline-item-content{text-align:right;display:flex;justify-content:flex-end;align-items:flex-start}.ngx-mat-timeline-vertical.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even){flex-direction:row}.ngx-mat-timeline-vertical.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even) .ngx-mat-timeline-item-content{text-align:left;display:flex;justify-content:flex-start;align-items:flex-start}.ngx-mat-timeline-vertical.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd){flex-direction:row-reverse}.ngx-mat-timeline-vertical.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd) .ngx-mat-timeline-item-content{text-align:right;display:flex;justify-content:flex-end;align-items:flex-start}.ngx-mat-timeline-vertical.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item{flex-direction:row-reverse}.ngx-mat-timeline-vertical.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-fill{display:none}.ngx-mat-timeline-vertical.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-content{text-align:right;display:flex;justify-content:flex-end;align-items:flex-start}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item{justify-content:flex-start;align-items:stretch}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item:not(:last-child){margin-right:8px}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item:not(:last-child) .ngx-mat-timeline-item-fill,.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item:not(:last-child) .ngx-mat-timeline-item-content{margin-right:48px}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item .ngx-mat-timeline-item-timeline{min-height:48px;max-height:48px;flex-direction:row;justify-content:flex-start;align-items:center}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item .ngx-mat-timeline-item-label{width:auto;text-align:left}.ngx-mat-timeline-horizontal .ngx-mat-timeline-content>.ngx-mat-timeline-item .ngx-mat-timeline-item-line{width:auto;min-width:8px;height:1px}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child{margin-right:8px}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-line{display:block}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-fill,.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:last-child .ngx-mat-timeline-item-content{margin-right:48px}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child{margin-right:0}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child .ngx-mat-timeline-item-line{display:none}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content .ngx-mat-timeline-item:first-child .ngx-mat-timeline-item-content{margin-right:0}.ngx-mat-timeline-horizontal.ngx-mat-timeline-start>.ngx-mat-timeline-content .ngx-mat-timeline-item{flex-direction:column}.ngx-mat-timeline-horizontal.ngx-mat-timeline-start>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-fill{display:none}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd){flex-direction:column}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd) .ngx-mat-timeline-item-content{display:flex;justify-content:flex-start;align-items:flex-start}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even){flex-direction:column-reverse}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even) .ngx-mat-timeline-item-content{display:flex;justify-content:flex-start;align-items:flex-end}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even){flex-direction:column}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(even) .ngx-mat-timeline-item-content{display:flex;justify-content:flex-start;align-items:flex-start}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd){flex-direction:column-reverse}.ngx-mat-timeline-horizontal.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content .ngx-mat-timeline-item:nth-child(odd) .ngx-mat-timeline-item-content{display:flex;justify-content:flex-start;align-items:flex-end}.ngx-mat-timeline-horizontal.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item{flex-direction:column-reverse}.ngx-mat-timeline-horizontal.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-content{display:flex;justify-content:flex-start;align-items:flex-end}.ngx-mat-timeline-horizontal.ngx-mat-timeline-end>.ngx-mat-timeline-content .ngx-mat-timeline-item .ngx-mat-timeline-item-fill{display:none}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
type: Input
}], icon: [{
type: Input
}], svgIcon: [{
type: Input
}], iconUrl: [{
type: Input
}], customIconTpl: [{
type: ContentChild,
args: [NgxMatTimelineItemIcon, { read: TemplateRef }]
}], customLabelTpl: [{
type: ContentChild,
args: [NgxMatTimelineItemLabel, { read: TemplateRef }]
}], _contentEl: [{
type: ViewChild,
args: ['contentEl', { static: true }]
}], _fillEl: [{
type: ViewChild,
args: ['fillEl', { static: true }]
}] } });
class NgxMatTimeline {
constructor(_host, _ngZone) {
this._host = _host;
this._ngZone = _ngZone;
this._position = 'start';
this._orientation = 'vertical';
this._reverse = false;
this.items = new QueryList();
this._destroyed = new Subject();
}
set position(position) {
this._position = position;
this.updateLayout();
}
set orientation(orientation) {
this._orientation = orientation;
this.updateLayout();
}
set reverse(reverse) {
this._reverse = reverse;
this.updateLayout();
}
get isStartPosition() {
return this._position == 'start';
}
get isEndPosition() {
return this._position == 'end';
}
get isCenterPosition() {
return this._position == 'center';
}
get isCenterAltPosition() {
return this._position == 'center-alt';
}
get isVerticalOrientation() {
return this._orientation == 'vertical';
}
get isHorizontalOrientation() {
return this._orientation == 'horizontal';
}
get isReverse() {
return this._reverse;
}
ngOnChanges(changes) {
this._ngZone.onStable.pipe(tap(() => this.updateLayout()), first()).subscribe();
}
ngOnInit() {
new Observable(observer => {
const ro = new ResizeObserver(entries => observer.next(entries));
ro.observe(this._host.nativeElement);
// unsubscribe callback
return () => {
ro.unobserve(this._host.nativeElement);
ro.disconnect();
};
}).pipe(throttleTime(10), tap(() => this.updateLayout()), takeUntil(this._destroyed)).subscribe();
}
ngOnDestroy() {
this._destroyed.next();
this._destroyed.complete();
}
updateLayout() {
if (this.isCenterPosition || this.isCenterAltPosition) {
this.items.forEach(item => {
if (this.isVerticalOrientation) {
item._updateVerticalCenteredLayout();
}
else {
item._updateHorizontalCenteredLayout();
}
});
}
}
}
NgxMatTimeline.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimeline, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
NgxMatTimeline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NgxMatTimeline, selector: "ngx-mat-timeline", inputs: { position: "position", orientation: "orientation", reverse: "reverse" }, host: { properties: { "class.ngx-mat-timeline-start": "this.isStartPosition", "class.ngx-mat-timeline-end": "this.isEndPosition", "class.ngx-mat-timeline-center": "this.isCenterPosition", "class.ngx-mat-timeline-center-alt": "this.isCenterAltPosition", "class.ngx-mat-timeline-vertical": "this.isVerticalOrientation", "class.ngx-mat-timeline-horizontal": "this.isHorizontalOrientation", "class.ngx-mat-timeline-reverse": "this.isReverse" }, classAttribute: "ngx-mat-timeline" }, queries: [{ propertyName: "items", predicate: NgxMatTimelineItem }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-mat-timeline-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".ngx-mat-timeline{margin:0;padding:0;width:100%;display:flex;justify-content:stretch;align-items:stretch;overflow:auto}.ngx-mat-timeline-content{margin:0;padding:0;width:100%;display:flex;justify-content:stretch;align-items:stretch;min-width:min-content;min-height:min-content}.ngx-mat-timeline-center>.ngx-mat-timeline-content,.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content{align-items:center}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content{flex-direction:column}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content{flex-direction:column-reverse}.ngx-mat-timeline-horizontal>.ngx-mat-timeline-content{flex-direction:row}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content{flex-direction:row-reverse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimeline, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
'class': 'ngx-mat-timeline'
}, template: "<div class=\"ngx-mat-timeline-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".ngx-mat-timeline{margin:0;padding:0;width:100%;display:flex;justify-content:stretch;align-items:stretch;overflow:auto}.ngx-mat-timeline-content{margin:0;padding:0;width:100%;display:flex;justify-content:stretch;align-items:stretch;min-width:min-content;min-height:min-content}.ngx-mat-timeline-center>.ngx-mat-timeline-content,.ngx-mat-timeline-center-alt>.ngx-mat-timeline-content{align-items:center}.ngx-mat-timeline-vertical>.ngx-mat-timeline-content{flex-direction:column}.ngx-mat-timeline-vertical.ngx-mat-timeline-reverse>.ngx-mat-timeline-content{flex-direction:column-reverse}.ngx-mat-timeline-horizontal>.ngx-mat-timeline-content{flex-direction:row}.ngx-mat-timeline-horizontal.ngx-mat-timeline-reverse>.ngx-mat-timeline-content{flex-direction:row-reverse}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { position: [{
type: Input
}], orientation: [{
type: Input
}], reverse: [{
type: Input
}], isStartPosition: [{
type: HostBinding,
args: ['class.ngx-mat-timeline-start']
}], isEndPosition: [{
type: HostBinding,
args: ['class.ngx-mat-timeline-end']
}], isCenterPosition: [{
type: HostBinding,
args: ['class.ngx-mat-timeline-center']
}], isCenterAltPosition: [{
type: HostBinding,
args: ['class.ngx-mat-timeline-center-alt']
}], isVerticalOrientation: [{
type: HostBinding,
args: ['class.ngx-mat-timeline-vertical']
}], isHorizontalOrientation: [{
type: HostBinding,
args: ['class.ngx-mat-timeline-horizontal']
}], isReverse: [{
type: HostBinding,
args: ['class.ngx-mat-timeline-reverse']
}], items: [{
type: ContentChildren,
args: [NgxMatTimelineItem]
}] } });
class NgxMatTimelineModule {
}
NgxMatTimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxMatTimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimelineModule, declarations: [NgxMatTimeline,
NgxMatTimelineItem,
NgxMatTimelineItemIcon,
NgxMatTimelineItemLabel], imports: [CommonModule,
MatIconModule], exports: [NgxMatTimeline,
NgxMatTimelineItem,
NgxMatTimelineItemIcon,
NgxMatTimelineItemLabel] });
NgxMatTimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimelineModule, imports: [[
CommonModule,
MatIconModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NgxMatTimelineModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxMatTimeline,
NgxMatTimelineItem,
NgxMatTimelineItemIcon,
NgxMatTimelineItemLabel,
],
imports: [
CommonModule,
MatIconModule
],
exports: [
NgxMatTimeline,
NgxMatTimelineItem,
NgxMatTimelineItemIcon,
NgxMatTimelineItemLabel,
]
}]
}] });
/*
* Public API Surface of ngx-mat-timeline
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxMatTimeline, NgxMatTimelineItem, NgxMatTimelineItemIcon, NgxMatTimelineItemLabel, NgxMatTimelineModule };
//# sourceMappingURL=ngx-mat-timeline.mjs.map