UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

2 lines 5.55 kB
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/cdk/platform"),require("rxjs"),require("rxjs/operators"),require("@angular/common"),require("@angular/core"),require("ng-zorro-antd/core"),require("ng-zorro-antd/icon")):"function"==typeof define&&define.amd?define("ng-zorro-antd/timeline",["exports","@angular/cdk/platform","rxjs","rxjs/operators","@angular/common","@angular/core","ng-zorro-antd/core","ng-zorro-antd/icon"],n):n((e["ng-zorro-antd"]=e["ng-zorro-antd"]||{},e["ng-zorro-antd"].timeline={}),e.ng.cdk.platform,e.rxjs,e.rxjs.operators,e.ng.common,e.ng.core,e["ng-zorro-antd"].core,e["ng-zorro-antd"].icon)}(this,function(e,n,t,i,o,r,a,s){"use strict";var l=(d.prototype.ngOnInit=function(){this.tryUpdateCustomColor()},d.prototype.ngOnChanges=function(e){e.nzColor&&this.tryUpdateCustomColor()},d.prototype.detectChanges=function(){this.cdr.detectChanges()},d.prototype.tryUpdateCustomColor=function(){var e=this.liTemplate.nativeElement.querySelector(".ant-timeline-item-head");-1===["blue","red","green"].indexOf(this.nzColor)?this.renderer.setStyle(e,"border-color",this.nzColor):this.renderer.removeStyle(e,"border-color")},d.decorators=[{type:r.Component,args:[{changeDetection:r.ChangeDetectionStrategy.OnPush,encapsulation:r.ViewEncapsulation.None,preserveWhitespaces:!1,selector:"nz-timeline-item, [nz-timeline-item]",exportAs:"nzTimelineItem",template:'<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 #liTemplate>\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-custom]="!!nzDot">\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>'}]}],d.ctorParameters=function(){return[{type:r.Renderer2},{type:r.ChangeDetectorRef}]},d.propDecorators={liTemplate:[{type:r.ViewChild,args:["liTemplate"]}],nzColor:[{type:r.Input}],nzDot:[{type:r.Input}]},d);function d(e,n){this.renderer=e,this.cdr=n,this.nzColor="blue",this.isLast=!1}var c=(m.prototype.ngOnChanges=function(e){var n=e.nzMode,t=e.nzReverse,i=e.nzPending;n&&(n.previousValue!==n.currentValue||n.isFirstChange())&&this.updateChildren(),t&&t.previousValue!==t.currentValue&&!t.isFirstChange()&&this.reverseChildTimelineDots(),i&&(this.isPendingBoolean=!0===i.currentValue)},m.prototype.ngAfterContentInit=function(){var e=this;this.updateChildren(),this.listOfTimeLine&&this.listOfTimeLine.changes.pipe(i.takeUntil(this.destroy$)).subscribe(function(){e.updateChildren()})},m.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},m.prototype.updateChildren=function(){var t=this;if(this.listOfTimeLine&&this.listOfTimeLine.length){var i=this.listOfTimeLine.length;this.listOfTimeLine.toArray().forEach(function(e,n){e.isLast=t.nzReverse?0===n:n===i-1,e.position="left"!==t.nzMode&&t.nzMode?"right"===t.nzMode?"right":"alternate"===t.nzMode&&n%2==0?"left":"right":undefined,e.detectChanges()}),this.cdr.markForCheck()}},m.prototype.reverseChildTimelineDots=function(){this.platform.isBrowser&&(a.reverseChildNodes(this.timeline.nativeElement),this.updateChildren())},m.decorators=[{type:r.Component,args:[{changeDetection:r.ChangeDetectionStrategy.OnPush,encapsulation:r.ViewEncapsulation.None,preserveWhitespaces:!1,selector:"nz-timeline",exportAs:"nzTimeline",template:'<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 #timeline>\n \x3c!-- User inserted timeline dots. --\x3e\n <ng-content></ng-content>\n \x3c!-- Pending dot. --\x3e\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 type="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</ul>\n'}]}],m.ctorParameters=function(){return[{type:r.ChangeDetectorRef},{type:n.Platform}]},m.propDecorators={timeline:[{type:r.ViewChild,args:["timeline"]}],listOfTimeLine:[{type:r.ContentChildren,args:[l]}],_pendingContent:[{type:r.ContentChild,args:["pending"]}],nzMode:[{type:r.Input}],nzPending:[{type:r.Input}],nzPendingDot:[{type:r.Input}],nzReverse:[{type:r.Input}]},m);function m(e,n){this.cdr=e,this.platform=n,this.nzReverse=!1,this.isPendingBoolean=!1,this.destroy$=new t.Subject}var p=(g.decorators=[{type:r.NgModule,args:[{declarations:[l,c],exports:[l,c],imports:[o.CommonModule,s.NzIconModule,a.NzAddOnModule]}]}],g);function g(){}e.NzTimelineItemComponent=l,e.NzTimelineComponent=c,e.NzTimelineModule=p,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=ng-zorro-antd-timeline.umd.min.js.map