ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
2 lines • 6.03 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/cdk/platform"),require("@angular/common"),require("ng-zorro-antd/core/outlet"),require("ng-zorro-antd/icon")):"function"==typeof define&&define.amd?define("ng-zorro-antd/timeline",["exports","@angular/core","rxjs","rxjs/operators","@angular/cdk/platform","@angular/common","ng-zorro-antd/core/outlet","ng-zorro-antd/icon"],n):n(((e=e||self)["ng-zorro-antd"]=e["ng-zorro-antd"]||{},e["ng-zorro-antd"].timeline={}),e.ng.core,e.rxjs,e.rxjs.operators,e.ng.cdk.platform,e.ng.common,e["ng-zorro-antd"].core.outlet,e["ng-zorro-antd"].icon)}(this,(function(e,n,t,i,o,r,a,s){"use strict";var l=["red","blue","green","grey","gray"];var c=function(){function e(e){this.cdr=e,this.nzColor="blue",this.isLast=!1,this.borderColor=null}return e.prototype.ngOnChanges=function(e){e.nzColor&&this.updateCustomColor()},e.prototype.detectChanges=function(){this.cdr.detectChanges()},e.prototype.updateCustomColor=function(){var e;this.borderColor=(e=this.nzColor,-1!==l.findIndex((function(n){return n===e}))?null:this.nzColor)},e.decorators=[{type:n.Component,args:[{changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None,preserveWhitespaces:!1,selector:"nz-timeline-item, [nz-timeline-item]",exportAs:"nzTimelineItem",template:'\n <ng-template #template>\n <li\n class="ant-timeline-item"\n [class.ant-timeline-item-right]="position === \'right\'"\n [class.ant-timeline-item-left]="position === \'left\'"\n [class.ant-timeline-item-last]="isLast"\n >\n <div class="ant-timeline-item-tail"></div>\n <div\n class="ant-timeline-item-head"\n [class.ant-timeline-item-head-red]="nzColor === \'red\'"\n [class.ant-timeline-item-head-blue]="nzColor === \'blue\'"\n [class.ant-timeline-item-head-green]="nzColor === \'green\'"\n [class.ant-timeline-item-head-gray]="nzColor === \'gray\'"\n [class.ant-timeline-item-head-custom]="!!nzDot"\n [style.border-color]="borderColor"\n >\n <ng-container *nzStringTemplateOutlet="nzDot">{{ nzDot }}</ng-container>\n </div>\n <div class="ant-timeline-item-content">\n <ng-content></ng-content>\n </div>\n </li>\n </ng-template>\n '}]}],e.ctorParameters=function(){return[{type:n.ChangeDetectorRef}]},e.propDecorators={template:[{type:n.ViewChild,args:["template",{static:!1}]}],nzColor:[{type:n.Input}],nzDot:[{type:n.Input}]},e}();var m=function(){function e(e){this.cdr=e,this.nzReverse=!1,this.isPendingBoolean=!1,this.timelineItems=[],this.destroy$=new t.Subject}return e.prototype.ngOnChanges=function(e){var n=e.nzMode,t=e.nzReverse,i=e.nzPending;(d(n)||d(t))&&this.updateChildren(),i&&(this.isPendingBoolean=!0===i.currentValue)},e.prototype.ngAfterContentInit=function(){var e=this;this.updateChildren(),this.listOfItems.changes.pipe(i.takeUntil(this.destroy$)).subscribe((function(){e.updateChildren()}))},e.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},e.prototype.updateChildren=function(){var e=this;if(this.listOfItems&&this.listOfItems.length){var n=this.listOfItems.length;this.listOfItems.forEach((function(t,i){t.isLast=e.nzReverse?0===i:i===n-1,t.position="left"!==e.nzMode&&e.nzMode?"right"===e.nzMode?"right":"alternate"===e.nzMode&&i%2==0?"left":"right":void 0,t.detectChanges()})),this.timelineItems=this.nzReverse?this.listOfItems.toArray().reverse():this.listOfItems.toArray()}this.cdr.markForCheck()},e.decorators=[{type:n.Component,args:[{changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None,preserveWhitespaces:!1,selector:"nz-timeline",exportAs:"nzTimeline",template:'\n <ul\n class="ant-timeline"\n [class.ant-timeline-right]="nzMode === \'right\'"\n [class.ant-timeline-alternate]="nzMode === \'alternate\'"\n [class.ant-timeline-pending]="!!nzPending"\n [class.ant-timeline-reverse]="nzReverse"\n >\n \x3c!-- User inserted timeline dots. --\x3e\n <ng-container *ngIf="nzReverse" [ngTemplateOutlet]="pendingTemplate"></ng-container>\n <ng-container *ngFor="let item of timelineItems">\n <ng-template [ngTemplateOutlet]="item.template"></ng-template>\n </ng-container>\n <ng-container *ngIf="!nzReverse" [ngTemplateOutlet]="pendingTemplate"></ng-container>\n \x3c!-- Pending dot. --\x3e\n </ul>\n <ng-template #pendingTemplate>\n <li *ngIf="nzPending" class="ant-timeline-item ant-timeline-item-pending">\n <div class="ant-timeline-item-tail"></div>\n <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue">\n <ng-container *nzStringTemplateOutlet="nzPendingDot">\n {{ nzPendingDot }}<i *ngIf="!nzPendingDot" nz-icon nzType="loading"></i>\n </ng-container>\n </div>\n <div class="ant-timeline-item-content">\n <ng-container *nzStringTemplateOutlet="nzPending">\n {{ isPendingBoolean ? \'\' : nzPending }}\n </ng-container>\n </div>\n </li>\n </ng-template>\n \x3c!-- Grasp items --\x3e\n <ng-content></ng-content>\n '}]}],e.ctorParameters=function(){return[{type:n.ChangeDetectorRef}]},e.propDecorators={listOfItems:[{type:n.ContentChildren,args:[c]}],nzMode:[{type:n.Input}],nzPending:[{type:n.Input}],nzPendingDot:[{type:n.Input}],nzReverse:[{type:n.Input}]},e}();function d(e){return!(!e||e.previousValue===e.currentValue&&!e.isFirstChange())}var g=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{declarations:[c,m],exports:[c,m],imports:[r.CommonModule,o.PlatformModule,s.NzIconModule,a.NzOutletModule]}]}],e}();e.NzTimelineComponent=m,e.NzTimelineItemComponent=c,e.NzTimelineModule=g,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-zorro-antd-timeline.umd.min.js.map