ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
2 lines • 7.08 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/cdk/bidi"),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/bidi","@angular/cdk/platform","@angular/common","ng-zorro-antd/core/outlet","ng-zorro-antd/icon"],n):n(((e="undefined"!=typeof globalThis?globalThis: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.bidi,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,l){"use strict";var c=function(){function e(){this.check$=new t.ReplaySubject(1)}return e.prototype.markForCheck=function(){this.check$.next()},e}();c.decorators=[{type:n.Injectable}];var d=["red","blue","green","grey","gray"];var m=function(){function e(e,n){this.cdr=e,this.timelineService=n,this.nzColor="blue",this.isLast=!1,this.borderColor=null}return e.prototype.ngOnChanges=function(e){this.timelineService.markForCheck(),e.nzColor&&this.updateCustomColor()},e.prototype.detectChanges=function(){this.cdr.detectChanges()},e.prototype.updateCustomColor=function(){var e;this.borderColor=(e=this.nzColor,-1!==d.findIndex((function(n){return n===e}))?null:this.nzColor)},e}();m.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]="(nzPosition || position) === \'right\'"\n [class.ant-timeline-item-left]="(nzPosition || 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 '}]}],m.ctorParameters=function(){return[{type:n.ChangeDetectorRef},{type:c}]},m.propDecorators={template:[{type:n.ViewChild,args:["template",{static:!1}]}],nzPosition:[{type:n.Input}],nzColor:[{type:n.Input}],nzDot:[{type:n.Input}]};var p=function(){function e(e,n,i){this.cdr=e,this.timelineService=n,this.directionality=i,this.nzMode="left",this.nzReverse=!1,this.isPendingBoolean=!1,this.timelineItems=[],this.dir="ltr",this.destroy$=new t.Subject}return e.prototype.ngOnChanges=function(e){var n=e.nzMode,t=e.nzReverse,i=e.nzPending;(g(n)||g(t))&&this.updateChildren(),i&&(this.isPendingBoolean=!0===i.currentValue)},e.prototype.ngOnInit=function(){var e,n=this;this.timelineService.check$.pipe(i.takeUntil(this.destroy$)).subscribe((function(){n.cdr.markForCheck()})),null===(e=this.directionality.change)||void 0===e||e.pipe(i.takeUntil(this.destroy$)).subscribe((function(e){n.dir=e,n.cdr.detectChanges()})),this.dir=this.directionality.value},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=function(e,n){return"custom"===n?void 0:"left"===n?"left":"right"===n?"right":"alternate"===n&&e%2==0?"left":"right"}(i,e.nzMode),t.detectChanges()})),this.timelineItems=this.nzReverse?this.listOfItems.toArray().reverse():this.listOfItems.toArray()}this.cdr.markForCheck()},e}();function g(e){return!(!e||e.previousValue===e.currentValue&&!e.isFirstChange())}p.decorators=[{type:n.Component,args:[{changeDetection:n.ChangeDetectionStrategy.OnPush,encapsulation:n.ViewEncapsulation.None,preserveWhitespaces:!1,selector:"nz-timeline",providers:[c],exportAs:"nzTimeline",template:'\n <ul\n class="ant-timeline"\n [class.ant-timeline-right]="nzMode === \'right\'"\n [class.ant-timeline-alternate]="nzMode === \'alternate\' || nzMode === \'custom\'"\n [class.ant-timeline-pending]="!!nzPending"\n [class.ant-timeline-reverse]="nzReverse"\n [class.ant-timeline-rtl]="dir === \'rtl\'"\n >\n \x3c!-- pending dot (reversed) --\x3e\n <ng-container *ngIf="nzReverse" [ngTemplateOutlet]="pendingTemplate"></ng-container>\n \x3c!-- timeline items --\x3e\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 }}\n <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 '}]}],p.ctorParameters=function(){return[{type:n.ChangeDetectorRef},{type:c},{type:o.Directionality,decorators:[{type:n.Optional}]}]},p.propDecorators={listOfItems:[{type:n.ContentChildren,args:[m]}],nzMode:[{type:n.Input}],nzPending:[{type:n.Input}],nzPendingDot:[{type:n.Input}],nzReverse:[{type:n.Input}]};var u=function(){};u.decorators=[{type:n.NgModule,args:[{declarations:[m,p],exports:[m,p],imports:[o.BidiModule,a.CommonModule,r.PlatformModule,l.NzIconModule,s.NzOutletModule]}]}],e.NzTimelineComponent=p,e.NzTimelineItemComponent=m,e.NzTimelineModule=u,e.TimelineService=c,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-zorro-antd-timeline.umd.min.js.map