UNPKG

ng-zorro-antd

Version:

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

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