UNPKG

ng-zorro-antd

Version:

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

2 lines 18.8 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/cdk/bidi"),require("ng-zorro-antd/core/util"),require("ng-zorro-antd/i18n"),require("rxjs"),require("rxjs/operators"),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","@angular/cdk/bidi","ng-zorro-antd/core/util","ng-zorro-antd/i18n","rxjs","rxjs/operators","@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="undefined"!=typeof globalThis?globalThis:t||self)["ng-zorro-antd"]=t["ng-zorro-antd"]||{},t["ng-zorro-antd"].transfer={}),t.ng.core,t.ng.cdk.bidi,t["ng-zorro-antd"].core.util,t["ng-zorro-antd"].i18n,t.rxjs,t.rxjs.operators,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,d,u,p){"use strict";var f=function(){function t(t,n){var r=this;this.cdr=t,this.elementRef=n,this.direction="left",this.titleText="",this.showSelectAll=!0,this.dataSource=[],this.itemUnit="",this.itemsUnit="",this.filter="",this.disabled=!1,this.renderList=null,this.render=null,this.footer=null,this.handleSelectAll=new e.EventEmitter,this.handleSelect=new e.EventEmitter,this.filterChange=new e.EventEmitter,this.stat={checkAll:!1,checkHalf:!1,checkCount:0,shownCount:0},this.onItemSelect=function(t){r.disabled||t.disabled||(t.checked=!t.checked,r.updateCheckStatus(),r.handleSelect.emit(t))},this.onItemSelectAll=function(t){r.dataSource.forEach((function(e){e.disabled||e.hide||(e.checked=t)})),r.updateCheckStatus(),r.handleSelectAll.emit(t)},this.elementRef.nativeElement.classList.add("ant-transfer-list")}return Object.defineProperty(t.prototype,"validData",{get:function(){return this.dataSource.filter((function(t){return!t.hide}))},enumerable:!1,configurable:!0}),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.validData.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.validData.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.markForCheck=function(){this.updateCheckStatus(),this.cdr.markForCheck()},t}();f.decorators=[{type:e.Component,args:[{selector:"nz-transfer-list",exportAs:"nzTransferList",preserveWhitespaces:!1,template:'\n <ng-template #defaultRenderList>\n <ul *ngIf="stat.shownCount > 0" class="ant-transfer-list-content">\n <li\n *ngFor="let item of validData"\n (click)="onItemSelect(item)"\n class="ant-transfer-list-content-item"\n [ngClass]="{ \'ant-transfer-list-content-item-disabled\': disabled || item.disabled }"\n >\n <label\n nz-checkbox\n [nzChecked]="item.checked"\n (nzCheckedChange)="onItemSelect(item)"\n (click)="$event.stopPropagation()"\n [nzDisabled]="disabled || item.disabled"\n >\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 </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\n *ngIf="showSelectAll"\n nz-checkbox\n [nzChecked]="stat.checkAll"\n (nzCheckedChange)="onItemSelectAll($event)"\n [nzIndeterminate]="stat.checkHalf"\n [nzDisabled]="stat.shownCount == 0 || disabled"\n ></label>\n <span class="ant-transfer-list-header-selected">\n <span>\n {{ (stat.checkCount > 0 ? stat.checkCount + \'/\' : \'\') + stat.shownCount }} {{ validData.length > 1 ? itemsUnit : itemUnit }}\n </span>\n <span *ngIf="titleText" class="ant-transfer-list-header-title">{{ titleText }}</span>\n </span>\n </div>\n <div\n 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 >\n <div *ngIf="showSearch" class="ant-transfer-list-body-search-wrapper">\n <div\n nz-transfer-search\n (valueChanged)="handleFilter($event)"\n (valueClear)="handleClear()"\n [placeholder]="searchPlaceholder"\n [disabled]="disabled"\n [value]="filter"\n ></div>\n </div>\n <ng-container *ngIf="renderList; else defaultRenderList">\n <div class="ant-transfer-list-body-customize-wrapper">\n <ng-container\n *ngTemplateOutlet="\n renderList;\n context: {\n $implicit: validData,\n direction: direction,\n disabled: disabled,\n onItemSelectAll: onItemSelectAll,\n onItemSelect: onItemSelect,\n stat: stat\n }\n "\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>\n ',encapsulation:e.ViewEncapsulation.None,changeDetection:e.ChangeDetectionStrategy.OnPush,host:{"[class.ant-transfer-list-with-footer]":"!!footer"}}]}],f.ctorParameters=function(){return[{type:e.ChangeDetectorRef},{type:e.ElementRef}]},f.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}]};var g=function(){function t(t){this.cdr=t,this.disabled=!1,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}();g.decorators=[{type:e.Component,args:[{selector:"[nz-transfer-search]",exportAs:"nzTransferSearch",preserveWhitespaces:!1,template:'\n <input\n [(ngModel)]="value"\n (ngModelChange)="_handle()"\n [disabled]="disabled"\n [placeholder]="placeholder"\n class="ant-input ant-transfer-list-search"\n [ngClass]="{ \'ant-input-disabled\': disabled }"\n />\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>\n ',encapsulation:e.ViewEncapsulation.None,changeDetection:e.ChangeDetectionStrategy.OnPush}]}],g.ctorParameters=function(){return[{type:e.ChangeDetectorRef}]},g.propDecorators={placeholder:[{type:e.Input}],value:[{type:e.Input}],disabled:[{type:e.Input}],valueChanged:[{type:e.Output}],valueClear:[{type:e.Output}]};function z(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 y(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}Object.create;function m(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function S(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}Object.create;var v=function(){function t(t,n,r,i){var o=this;this.cdr=t,this.i18n=n,this.elementRef=r,this.directionality=i,this.unsubscribe$=new a.Subject,this.leftFilter="",this.rightFilter="",this.dir="ltr",this.nzDisabled=!1,this.nzDataSource=[],this.nzTitles=["",""],this.nzOperations=[],this.nzListStyle={},this.nzShowSelectAll=!0,this.nzCanMove=function(t){return a.of(t.list)},this.nzRenderList=null,this.nzRender=null,this.nzFooter=null,this.nzShowSearch=!1,this.nzTargetKeys=[],this.nzSelectedKeys=[],this.nzChange=new e.EventEmitter,this.nzSearchChange=new e.EventEmitter,this.nzSelectChange=new e.EventEmitter,this.leftDataSource=[],this.rightDataSource=[],this.handleLeftSelectAll=function(t){return o.handleSelect("left",t)},this.handleRightSelectAll=function(t){return o.handleSelect("right",t)},this.handleLeftSelect=function(t){return o.handleSelect("left",!!t.checked,t)},this.handleRightSelect=function(t){return o.handleSelect("right",!!t.checked,t)},this.leftActive=!1,this.rightActive=!1,this.moveToLeft=function(){return o.moveTo("left")},this.moveToRight=function(){return o.moveTo("right")},this.elementRef.nativeElement.classList.add("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=m(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(S(arguments[e]));return t}([0,0],e)),this.updateOperationStatus(i),this.nzChange.emit({from:i,to:t,list:e}),this.markForCheckAllList()},t.prototype.markForCheckAllList=function(){this.lists&&this.lists.forEach((function(t){return t.markForCheck()}))},t.prototype.handleNzTargetKeys=function(){var t=r.toArray(this.nzTargetKeys);this.leftDataSource.forEach((function(e){(function(t){return t.hasOwnProperty("key")})(e)&&-1!==t.indexOf(e.key)&&!e.disabled&&(e.checked=!0)})),this.moveToRight()},t.prototype.handleNzSelectedKeys=function(){var t=r.toArray(this.nzSelectedKeys);this.nzDataSource.forEach((function(e){-1!==t.indexOf(e.key)&&(e.checked=!0)}));var e=function(t){return!1===t.disabled&&!0===t.checked};this.rightActive=this.leftDataSource.some(e),this.leftActive=this.rightDataSource.some(e)},t.prototype.ngOnInit=function(){var t,e=this;this.i18n.localeChange.pipe(o.takeUntil(this.unsubscribe$)).subscribe((function(){e.locale=e.i18n.getLocaleData("Transfer"),e.markForCheckAllList()})),this.dir=this.directionality.value,null===(t=this.directionality.change)||void 0===t||t.pipe(o.takeUntil(this.unsubscribe$)).subscribe((function(t){e.dir=t,e.cdr.detectChanges()}))},t.prototype.ngOnChanges=function(t){t.nzDataSource&&(this.splitDataSource(),this.updateOperationStatus("left"),this.updateOperationStatus("right"),this.cdr.detectChanges(),this.markForCheckAllList()),t.nzTargetKeys&&this.handleNzTargetKeys(),t.nzSelectedKeys&&this.handleNzSelectedKeys()},t.prototype.ngOnDestroy=function(){this.unsubscribe$.next(),this.unsubscribe$.complete()},t}();v.decorators=[{type:e.Component,args:[{selector:"nz-transfer",exportAs:"nzTransfer",preserveWhitespaces:!1,template:'\n <nz-transfer-list\n class="ant-transfer-list"\n [ngStyle]="nzListStyle"\n data-direction="left"\n 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 && 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 *ngIf="dir !== \'rtl\'" class="ant-transfer-operation">\n <button nz-button (click)="moveToLeft()" [disabled]="nzDisabled || !leftActive" [nzType]="\'primary\'" [nzSize]="\'small\'">\n <i nz-icon nzType="left"></i>\n <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>\n <span *ngIf="nzOperations[0]">{{ nzOperations[0] }}</span>\n </button>\n </div>\n <div *ngIf="dir === \'rtl\'" class="ant-transfer-operation">\n <button nz-button (click)="moveToRight()" [disabled]="nzDisabled || !rightActive" [nzType]="\'primary\'" [nzSize]="\'small\'">\n <i nz-icon nzType="left"></i>\n <span *ngIf="nzOperations[0]">{{ nzOperations[0] }}</span>\n </button>\n <button nz-button (click)="moveToLeft()" [disabled]="nzDisabled || !leftActive" [nzType]="\'primary\'" [nzSize]="\'small\'">\n <i nz-icon nzType="right"></i>\n <span *ngIf="nzOperations[1]">{{ nzOperations[1] }}</span>\n </button>\n </div>\n <nz-transfer-list\n class="ant-transfer-list"\n [ngStyle]="nzListStyle"\n data-direction="right"\n 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 && 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-rtl]":"dir === 'rtl'","[class.ant-transfer-disabled]":"nzDisabled","[class.ant-transfer-customize-list]":"nzRenderList"},encapsulation:e.ViewEncapsulation.None,changeDetection:e.ChangeDetectionStrategy.OnPush}]}],v.ctorParameters=function(){return[{type:e.ChangeDetectorRef},{type:i.NzI18nService},{type:e.ElementRef},{type:n.Directionality,decorators:[{type:e.Optional}]}]},v.propDecorators={lists:[{type:e.ViewChildren,args:[f]}],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}],nzTargetKeys:[{type:e.Input}],nzSelectedKeys:[{type:e.Input}],nzChange:[{type:e.Output}],nzSearchChange:[{type:e.Output}],nzSelectChange:[{type:e.Output}]},z([r.InputBoolean(),y("design:type",Object)],v.prototype,"nzDisabled",void 0),z([r.InputBoolean(),y("design:type",Object)],v.prototype,"nzShowSelectAll",void 0),z([r.InputBoolean(),y("design:type",Object)],v.prototype,"nzShowSearch",void 0);var b=function(){};b.decorators=[{type:e.NgModule,args:[{imports:[n.BidiModule,l.CommonModule,s.FormsModule,h.NzCheckboxModule,c.NzButtonModule,p.NzInputModule,i.NzI18nModule,u.NzIconModule,d.NzEmptyModule],declarations:[v,f,g],exports:[v]}]}],t.NzTransferComponent=v,t.NzTransferListComponent=f,t.NzTransferModule=b,t.NzTransferSearchComponent=g,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=ng-zorro-antd-transfer.umd.min.js.map