ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
2 lines • 15 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("rxjs"),require("rxjs/operators"),require("ng-zorro-antd/core"),require("@angular/common"),require("@angular/core"),require("@angular/forms"),require("ng-zorro-antd/button"),require("ng-zorro-antd/checkbox"),require("ng-zorro-antd/empty"),require("ng-zorro-antd/i18n"),require("ng-zorro-antd/icon"),require("ng-zorro-antd/input")):"function"==typeof define&&define.amd?define("ng-zorro-antd/transfer",["exports","rxjs","rxjs/operators","ng-zorro-antd/core","@angular/common","@angular/core","@angular/forms","ng-zorro-antd/button","ng-zorro-antd/checkbox","ng-zorro-antd/empty","ng-zorro-antd/i18n","ng-zorro-antd/icon","ng-zorro-antd/input"],e):e((t["ng-zorro-antd"]=t["ng-zorro-antd"]||{},t["ng-zorro-antd"].transfer={}),t.rxjs,t.rxjs.operators,t["ng-zorro-antd"].core,t.ng.common,t.ng.core,t.ng.forms,t["ng-zorro-antd"].button,t["ng-zorro-antd"].checkbox,t["ng-zorro-antd"].empty,t["ng-zorro-antd"].i18n,t["ng-zorro-antd"].icon,t["ng-zorro-antd"].input)}(this,function(t,i,e,n,r,o,a,l,s,c,h,u,d){"use strict";var p=(f.prototype.setClassMap=function(){var t,e=((t={})[this.prefixCls]=!0,t[this.prefixCls+"-with-footer"]=!!this.footer,t);this.updateHostClassService.updateHostClass(this.el.nativeElement,e)},f.prototype.onHandleSelectAll=function(e){this.dataSource.forEach(function(t){t.disabled||t._hiden||(t.checked=e)}),this.updateCheckStatus(),this.handleSelectAll.emit(e)},f.prototype.updateCheckStatus=function(){var t=this.dataSource.filter(function(t){return!t.disabled}).length;this.stat.checkCount=this.dataSource.filter(function(t){return t.checked&&!t.disabled}).length,this.stat.shownCount=this.dataSource.filter(function(t){return!t._hiden}).length,this.stat.checkAll=0<t&&t===this.stat.checkCount,this.stat.checkHalf=0<this.stat.checkCount&&!this.stat.checkAll},f.prototype.handleFilter=function(e){var n=this;this.filter=e,this.dataSource.forEach(function(t){t._hiden=0<e.length&&!n.matchFilter(e,t)}),this.stat.shownCount=this.dataSource.filter(function(t){return!t._hiden}).length,this.filterChange.emit({direction:this.direction,value:e})},f.prototype.handleClear=function(){this.handleFilter("")},f.prototype.matchFilter=function(t,e){return this.filterOption?this.filterOption(t,e):e.title.includes(t)},f.prototype.ngOnChanges=function(t){"footer"in t&&this.setClassMap()},f.prototype.ngOnInit=function(){this.setClassMap()},f.prototype.markForCheck=function(){this.updateCheckStatus(),this.cdr.markForCheck()},f.prototype._handleSelect=function(t){this.disabled||t.disabled||(t.checked=!t.checked,this.updateCheckStatus(),this.handleSelect.emit(t))},f.decorators=[{type:o.Component,args:[{selector:"nz-transfer-list",exportAs:"nzTransferList",preserveWhitespaces:!1,providers:[n.NzUpdateHostClassService],template:'<div class="ant-transfer-list-header">\n <label nz-checkbox [nzChecked]="stat.checkAll" (nzCheckedChange)="onHandleSelectAll($event)"\n [nzIndeterminate]="stat.checkHalf" [nzDisabled]="stat.shownCount == 0 || disabled">\n </label>\n <span class="ant-transfer-list-header-selected">\n <span>{{ (stat.checkCount > 0 ? stat.checkCount + \'/\' : \'\') + stat.shownCount }} {{ dataSource.length > 1 ? itemsUnit : itemUnit }}</span>\n <span *ngIf="titleText" class="ant-transfer-list-header-title">{{ titleText }}</span>\n </span>\n</div>\n<div class="{{showSearch ? \'ant-transfer-list-body ant-transfer-list-body-with-search\' : \'ant-transfer-list-body\'}}"\n [ngClass]="{\'ant-transfer__nodata\': stat.shownCount === 0}">\n <div *ngIf="showSearch" class="ant-transfer-list-body-search-wrapper">\n <div nz-transfer-search\n (valueChanged)="handleFilter($event)"\n (valueClear)="handleClear()"\n [placeholder]="searchPlaceholder"\n [disabled]="disabled"\n [value]="filter"></div>\n </div>\n <ul *ngIf="stat.shownCount > 0" class="ant-transfer-list-content">\n <div class="LazyLoad" *ngFor="let item of dataSource">\n <li *ngIf="!item._hiden" (click)="_handleSelect(item)"\n class="ant-transfer-list-content-item" [ngClass]="{\'ant-transfer-list-content-item-disabled\': disabled || item.disabled}">\n <label nz-checkbox [nzChecked]="item.checked" (nzCheckedChange)="_handleSelect(item)"\n (click)="$event.stopPropagation()" [nzDisabled]="disabled || item.disabled">\n <ng-container *ngIf="!render; else renderContainer">{{ item.title }}</ng-container>\n <ng-template #renderContainer [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>\n </label>\n </li>\n </div>\n </ul>\n <div *ngIf="stat.shownCount === 0" class="ant-transfer-list-body-not-found">\n <nz-embed-empty [nzComponentName]="\'transfer\'" [specificContent]="notFoundContent"></nz-embed-empty>\n </div>\n</div>\n<div *ngIf="footer" class="ant-transfer-list-footer">\n <ng-template [ngTemplateOutlet]="footer" [ngTemplateOutletContext]="{ $implicit: direction }"></ng-template>\n</div>',encapsulation:o.ViewEncapsulation.None,changeDetection:o.ChangeDetectionStrategy.OnPush}]}],f.ctorParameters=function(){return[{type:o.ElementRef},{type:n.NzUpdateHostClassService},{type:o.ChangeDetectorRef}]},f.propDecorators={direction:[{type:o.Input}],titleText:[{type:o.Input}],dataSource:[{type:o.Input}],itemUnit:[{type:o.Input}],itemsUnit:[{type:o.Input}],filter:[{type:o.Input}],disabled:[{type:o.Input}],showSearch:[{type:o.Input}],searchPlaceholder:[{type:o.Input}],notFoundContent:[{type:o.Input}],filterOption:[{type:o.Input}],render:[{type:o.Input}],footer:[{type:o.Input}],handleSelectAll:[{type:o.Output}],handleSelect:[{type:o.Output}],filterChange:[{type:o.Output}]},f);function f(t,e,n){this.el=t,this.updateHostClassService=e,this.cdr=n,this.direction="",this.titleText="",this.dataSource=[],this.itemUnit="",this.itemsUnit="",this.filter="",this.handleSelectAll=new o.EventEmitter,this.handleSelect=new o.EventEmitter,this.filterChange=new o.EventEmitter,this.prefixCls="ant-transfer-list",this.stat={checkAll:!1,checkHalf:!1,checkCount:0,shownCount:0}}var g=(z.prototype._handle=function(){this.valueChanged.emit(this.value)},z.prototype._clear=function(){this.disabled||(this.value="",this.valueClear.emit())},z.prototype.ngOnChanges=function(){this.cdr.detectChanges()},z.decorators=[{type:o.Component,args:[{selector:"[nz-transfer-search]",exportAs:"nzTransferSearch",preserveWhitespaces:!1,template:'<input [(ngModel)]="value" (ngModelChange)="_handle()" [disabled]="disabled" [placeholder]="placeholder"\n class="ant-input ant-transfer-list-search" [ngClass]="{\'ant-input-disabled\': disabled}">\n<a *ngIf="value && value.length > 0; else def" class="ant-transfer-list-search-action" (click)="_clear()">\n <i nz-icon type="close-circle"></i>\n</a>\n<ng-template #def>\n <span class="ant-transfer-list-search-action"><i nz-icon type="search"></i></span>\n</ng-template>',encapsulation:o.ViewEncapsulation.None,changeDetection:o.ChangeDetectionStrategy.OnPush}]}],z.ctorParameters=function(){return[{type:o.ChangeDetectorRef}]},z.propDecorators={placeholder:[{type:o.Input}],value:[{type:o.Input}],disabled:[{type:o.Input}],valueChanged:[{type:o.Output}],valueClear:[{type:o.Output}]},z);function z(t){this.cdr=t,this.valueChanged=new o.EventEmitter,this.valueClear=new o.EventEmitter}function y(t,e,n,r){var a,i=arguments.length,o=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,n,r);else for(var l=t.length-1;0<=l;l--)(a=t[l])&&(o=(i<3?a(o):3<i?a(e,n,o):a(e,n))||o);return 3<i&&o&&Object.defineProperty(e,n,o),o}function m(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}function S(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,a,i=n.call(t),o=[];try{for(;(void 0===e||0<e--)&&!(r=i.next()).done;)o.push(r.value)}catch(l){a={error:l}}finally{try{r&&!r.done&&(n=i["return"])&&n.call(i)}finally{if(a)throw a.error}}return o}var C=(v.prototype.splitDataSource=function(){var e=this;this.leftDataSource=[],this.rightDataSource=[],this.nzDataSource.forEach(function(t){"right"===t.direction?e.rightDataSource.push(t):e.leftDataSource.push(t)})},v.prototype.getCheckedData=function(t){return this["left"===t?"leftDataSource":"rightDataSource"].filter(function(t){return t.checked})},v.prototype.handleSelect=function(t,e,n){var r=this.getCheckedData(t);this.updateOperationStatus(t,r.length),this.nzSelectChange.emit({direction:t,checked:e,list:r,item:n})},v.prototype.handleFilterChange=function(t){this.nzSearchChange.emit(t)},v.prototype.updateOperationStatus=function(t,e){this["right"===t?"leftActive":"rightActive"]=0<(void 0===e?this.getCheckedData(t).filter(function(t){return!t.disabled}).length:e)},v.prototype.moveTo=function(e){var n=this,t="left"===e?"right":"left";this.updateOperationStatus(t,0);var r=("left"===e?this.rightDataSource:this.leftDataSource).filter(function(t){return!0===t.checked&&!t.disabled});this.nzCanMove({direction:e,list:r}).subscribe(function(t){return n.truthMoveTo(e,t.filter(function(t){return!!t}))},function(){return r.forEach(function(t){return t.checked=!1})})},v.prototype.truthMoveTo=function(t,e){var n,r,a="left"===t?"right":"left",i="left"===t?this.rightDataSource:this.leftDataSource,o="left"===t?this.leftDataSource:this.rightDataSource;try{for(var l=function h(t){var e="function"==typeof Symbol&&t[Symbol.iterator],n=0;return e?e.call(t):{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}}}(e),s=l.next();!s.done;s=l.next()){var c=s.value;c.checked=!1,c._hiden=!1,i.splice(i.indexOf(c),1)}}catch(u){n={error:u}}finally{try{s&&!s.done&&(r=l["return"])&&r.call(l)}finally{if(n)throw n.error}}o.splice.apply(o,function d(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(S(arguments[e]));return t}([0,0],e)),this.updateOperationStatus(a),this.nzChange.emit({from:a,to:t,list:e}),this.markForCheckAllList()},v.prototype.markForCheckAllList=function(){this.lists&&this.lists.forEach(function(t){return t.markForCheck()})},v.prototype.ngOnInit=function(){var t=this;this.i18n.localeChange.pipe(e.takeUntil(this.unsubscribe$)).subscribe(function(){t.locale=t.i18n.getLocaleData("Transfer"),t.markForCheckAllList()})},v.prototype.ngOnChanges=function(t){"nzDataSource"in t&&(this.splitDataSource(),this.updateOperationStatus("left"),this.updateOperationStatus("right"),this.cdr.detectChanges(),this.markForCheckAllList())},v.prototype.ngOnDestroy=function(){this.unsubscribe$.next(),this.unsubscribe$.complete()},v.decorators=[{type:o.Component,args:[{selector:"nz-transfer",exportAs:"nzTransfer",preserveWhitespaces:!1,template:'<nz-transfer-list class="ant-transfer-list" [ngStyle]="nzListStyle" data-direction="left"\n [titleText]="nzTitles[0]"\n [dataSource]="leftDataSource"\n [filter]="leftFilter"\n [filterOption]="nzFilterOption"\n (filterChange)="handleFilterChange($event)"\n [render]="nzRender"\n [disabled]="nzDisabled"\n [showSearch]="nzShowSearch"\n [searchPlaceholder]="nzSearchPlaceholder || locale.searchPlaceholder"\n [notFoundContent]="nzNotFoundContent"\n [itemUnit]="nzItemUnit || locale.itemUnit"\n [itemsUnit]="nzItemsUnit || locale.itemsUnit"\n [footer]="nzFooter"\n (handleSelect)="handleLeftSelect($event)"\n (handleSelectAll)="handleLeftSelectAll($event)">\n</nz-transfer-list>\n<div class="ant-transfer-operation">\n <button nz-button (click)="moveToLeft()" [disabled]="nzDisabled || !leftActive" [nzType]="\'primary\'" [nzSize]="\'small\'">\n <i nz-icon type="left"></i><span *ngIf="nzOperations[1]">{{ nzOperations[1] }}</span>\n </button>\n <button nz-button (click)="moveToRight()" [disabled]="nzDisabled || !rightActive" [nzType]="\'primary\'" [nzSize]="\'small\'">\n <i nz-icon type="right"></i><span *ngIf="nzOperations[0]">{{ nzOperations[0] }}</span>\n </button>\n</div>\n<nz-transfer-list class="ant-transfer-list" [ngStyle]="nzListStyle" data-direction="right"\n [titleText]="nzTitles[1]"\n [dataSource]="rightDataSource"\n [filter]="rightFilter"\n [filterOption]="nzFilterOption"\n (filterChange)="handleFilterChange($event)"\n [render]="nzRender"\n [disabled]="nzDisabled"\n [showSearch]="nzShowSearch"\n [searchPlaceholder]="nzSearchPlaceholder || locale.searchPlaceholder"\n [notFoundContent]="nzNotFoundContent"\n [itemUnit]="nzItemUnit || locale.itemUnit"\n [itemsUnit]="nzItemsUnit || locale.itemsUnit"\n [footer]="nzFooter"\n (handleSelect)="handleRightSelect($event)"\n (handleSelectAll)="handleRightSelectAll($event)">\n</nz-transfer-list>',host:{"[class.ant-transfer-disabled]":"nzDisabled"},encapsulation:o.ViewEncapsulation.None,changeDetection:o.ChangeDetectionStrategy.OnPush}]}],v.ctorParameters=function(){return[{type:o.ChangeDetectorRef},{type:h.NzI18nService},{type:o.Renderer2},{type:o.ElementRef}]},v.propDecorators={lists:[{type:o.ViewChildren,args:[p]}],nzDisabled:[{type:o.Input}],nzDataSource:[{type:o.Input}],nzTitles:[{type:o.Input}],nzOperations:[{type:o.Input}],nzListStyle:[{type:o.Input}],nzItemUnit:[{type:o.Input}],nzItemsUnit:[{type:o.Input}],nzCanMove:[{type:o.Input}],nzRender:[{type:o.Input}],nzFooter:[{type:o.Input}],nzShowSearch:[{type:o.Input}],nzFilterOption:[{type:o.Input}],nzSearchPlaceholder:[{type:o.Input}],nzNotFoundContent:[{type:o.Input}],nzChange:[{type:o.Output}],nzSearchChange:[{type:o.Output}],nzSelectChange:[{type:o.Output}]},y([n.InputBoolean(),m("design:type",Object)],v.prototype,"nzDisabled",void 0),y([n.InputBoolean(),m("design:type",Object)],v.prototype,"nzShowSearch",void 0),v);function v(t,e,n,r){var a=this;this.cdr=t,this.i18n=e,this.unsubscribe$=new i.Subject,this.locale={},this.leftFilter="",this.rightFilter="",this.nzDisabled=!1,this.nzDataSource=[],this.nzTitles=["",""],this.nzOperations=[],this.nzCanMove=function(t){return i.of(t.list)},this.nzShowSearch=!1,this.nzChange=new o.EventEmitter,this.nzSearchChange=new o.EventEmitter,this.nzSelectChange=new o.EventEmitter,this.leftDataSource=[],this.rightDataSource=[],this.handleLeftSelectAll=function(t){return a.handleSelect("left",t)},this.handleRightSelectAll=function(t){return a.handleSelect("right",t)},this.handleLeftSelect=function(t){return a.handleSelect("left",!!t.checked,t)},this.handleRightSelect=function(t){return a.handleSelect("right",!!t.checked,t)},this.leftActive=!1,this.rightActive=!1,this.moveToLeft=function(){return a.moveTo("left")},this.moveToRight=function(){return a.moveTo("right")},n.addClass(r.nativeElement,"ant-transfer")}var b=(k.decorators=[{type:o.NgModule,args:[{imports:[r.CommonModule,a.FormsModule,s.NzCheckboxModule,l.NzButtonModule,d.NzInputModule,h.NzI18nModule,u.NzIconModule,c.NzEmptyModule],declarations:[C,p,g],exports:[C]}]}],k);function k(){}t.NzTransferListComponent=p,t.NzTransferSearchComponent=g,t.NzTransferComponent=C,t.NzTransferModule=b,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ng-zorro-antd-transfer.umd.min.js.map