UNPKG

ng-zorro-antd

Version:

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

721 lines (712 loc) 26.8 kB
import { __values, __spread, __decorate, __metadata } from 'tslib'; import { of, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { NzUpdateHostClassService, InputBoolean } from 'ng-zorro-antd/core'; import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation, Renderer2, ViewChildren, NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzI18nService, NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzInputModule } from 'ng-zorro-antd/input'; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzTransferListComponent = /** @class */ (function () { // #endregion function NzTransferListComponent(el, updateHostClassService, cdr) { this.el = el; this.updateHostClassService = updateHostClassService; this.cdr = cdr; // #region fields this.direction = ''; this.titleText = ''; this.dataSource = []; this.itemUnit = ''; this.itemsUnit = ''; this.filter = ''; // events this.handleSelectAll = new EventEmitter(); this.handleSelect = new EventEmitter(); this.filterChange = new EventEmitter(); // #endregion // #region styles this.prefixCls = 'ant-transfer-list'; // #endregion // #region select all this.stat = { checkAll: false, checkHalf: false, checkCount: 0, shownCount: 0 }; } /** * @return {?} */ NzTransferListComponent.prototype.setClassMap = /** * @return {?} */ function () { var _a; /** @type {?} */ var classMap = (_a = {}, _a[this.prefixCls] = true, _a[this.prefixCls + "-with-footer"] = !!this.footer, _a); this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap); }; /** * @param {?} status * @return {?} */ NzTransferListComponent.prototype.onHandleSelectAll = /** * @param {?} status * @return {?} */ function (status) { this.dataSource.forEach((/** * @param {?} item * @return {?} */ function (item) { if (!item.disabled && !item._hiden) { item.checked = status; } })); this.updateCheckStatus(); this.handleSelectAll.emit(status); }; /** * @private * @return {?} */ NzTransferListComponent.prototype.updateCheckStatus = /** * @private * @return {?} */ function () { /** @type {?} */ var validCount = this.dataSource.filter((/** * @param {?} w * @return {?} */ function (w) { return !w.disabled; })).length; this.stat.checkCount = this.dataSource.filter((/** * @param {?} w * @return {?} */ function (w) { return w.checked && !w.disabled; })).length; this.stat.shownCount = this.dataSource.filter((/** * @param {?} w * @return {?} */ function (w) { return !w._hiden; })).length; this.stat.checkAll = validCount > 0 && validCount === this.stat.checkCount; this.stat.checkHalf = this.stat.checkCount > 0 && !this.stat.checkAll; }; // #endregion // #region search // #endregion // #region search /** * @param {?} value * @return {?} */ NzTransferListComponent.prototype.handleFilter = // #endregion // #region search /** * @param {?} value * @return {?} */ function (value) { var _this = this; this.filter = value; this.dataSource.forEach((/** * @param {?} item * @return {?} */ function (item) { item._hiden = value.length > 0 && !_this.matchFilter(value, item); })); this.stat.shownCount = this.dataSource.filter((/** * @param {?} w * @return {?} */ function (w) { return !w._hiden; })).length; this.filterChange.emit({ direction: this.direction, value: value }); }; /** * @return {?} */ NzTransferListComponent.prototype.handleClear = /** * @return {?} */ function () { this.handleFilter(''); }; /** * @private * @param {?} text * @param {?} item * @return {?} */ NzTransferListComponent.prototype.matchFilter = /** * @private * @param {?} text * @param {?} item * @return {?} */ function (text, item) { if (this.filterOption) { return this.filterOption(text, item); } return item.title.includes(text); }; /** * @param {?} changes * @return {?} */ NzTransferListComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { if ('footer' in changes) { this.setClassMap(); } }; /** * @return {?} */ NzTransferListComponent.prototype.ngOnInit = /** * @return {?} */ function () { this.setClassMap(); }; /** * @return {?} */ NzTransferListComponent.prototype.markForCheck = /** * @return {?} */ function () { this.updateCheckStatus(); this.cdr.markForCheck(); }; /** * @param {?} item * @return {?} */ NzTransferListComponent.prototype._handleSelect = /** * @param {?} item * @return {?} */ function (item) { if (this.disabled || item.disabled) { return; } item.checked = !item.checked; this.updateCheckStatus(); this.handleSelect.emit(item); }; NzTransferListComponent.decorators = [ { type: Component, args: [{ selector: 'nz-transfer-list', exportAs: 'nzTransferList', preserveWhitespaces: false, providers: [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: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }] } ]; /** @nocollapse */ NzTransferListComponent.ctorParameters = function () { return [ { type: ElementRef }, { type: NzUpdateHostClassService }, { type: ChangeDetectorRef } ]; }; NzTransferListComponent.propDecorators = { direction: [{ type: Input }], titleText: [{ type: Input }], dataSource: [{ type: Input }], itemUnit: [{ type: Input }], itemsUnit: [{ type: Input }], filter: [{ type: Input }], disabled: [{ type: Input }], showSearch: [{ type: Input }], searchPlaceholder: [{ type: Input }], notFoundContent: [{ type: Input }], filterOption: [{ type: Input }], render: [{ type: Input }], footer: [{ type: Input }], handleSelectAll: [{ type: Output }], handleSelect: [{ type: Output }], filterChange: [{ type: Output }] }; return NzTransferListComponent; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzTransferSearchComponent = /** @class */ (function () { // endregion function NzTransferSearchComponent(cdr) { this.cdr = cdr; this.valueChanged = new EventEmitter(); this.valueClear = new EventEmitter(); } /** * @return {?} */ NzTransferSearchComponent.prototype._handle = /** * @return {?} */ function () { this.valueChanged.emit(this.value); }; /** * @return {?} */ NzTransferSearchComponent.prototype._clear = /** * @return {?} */ function () { if (this.disabled) { return; } this.value = ''; this.valueClear.emit(); }; /** * @return {?} */ NzTransferSearchComponent.prototype.ngOnChanges = /** * @return {?} */ function () { this.cdr.detectChanges(); }; NzTransferSearchComponent.decorators = [ { type: Component, args: [{ selector: '[nz-transfer-search]', exportAs: 'nzTransferSearch', preserveWhitespaces: false, 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: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }] } ]; /** @nocollapse */ NzTransferSearchComponent.ctorParameters = function () { return [ { type: ChangeDetectorRef } ]; }; NzTransferSearchComponent.propDecorators = { placeholder: [{ type: Input }], value: [{ type: Input }], disabled: [{ type: Input }], valueChanged: [{ type: Output }], valueClear: [{ type: Output }] }; return NzTransferSearchComponent; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzTransferComponent = /** @class */ (function () { // #endregion function NzTransferComponent(cdr, i18n, renderer, elementRef) { var _this = this; this.cdr = cdr; this.i18n = i18n; this.unsubscribe$ = new Subject(); // tslint:disable-next-line:no-any this.locale = {}; this.leftFilter = ''; this.rightFilter = ''; // #region fields this.nzDisabled = false; this.nzDataSource = []; this.nzTitles = ['', '']; this.nzOperations = []; this.nzCanMove = (/** * @param {?} arg * @return {?} */ function (arg) { return of(arg.list); }); this.nzShowSearch = false; // events this.nzChange = new EventEmitter(); this.nzSearchChange = new EventEmitter(); this.nzSelectChange = new EventEmitter(); // #endregion // #region process data // left this.leftDataSource = []; // right this.rightDataSource = []; this.handleLeftSelectAll = (/** * @param {?} checked * @return {?} */ function (checked) { return _this.handleSelect('left', checked); }); this.handleRightSelectAll = (/** * @param {?} checked * @return {?} */ function (checked) { return _this.handleSelect('right', checked); }); this.handleLeftSelect = (/** * @param {?} item * @return {?} */ function (item) { return _this.handleSelect('left', !!item.checked, item); }); this.handleRightSelect = (/** * @param {?} item * @return {?} */ function (item) { return _this.handleSelect('right', !!item.checked, item); }); // #endregion // #region operation this.leftActive = false; this.rightActive = false; this.moveToLeft = (/** * @return {?} */ function () { return _this.moveTo('left'); }); this.moveToRight = (/** * @return {?} */ function () { return _this.moveTo('right'); }); renderer.addClass(elementRef.nativeElement, 'ant-transfer'); } /** * @private * @return {?} */ NzTransferComponent.prototype.splitDataSource = /** * @private * @return {?} */ function () { var _this = this; this.leftDataSource = []; this.rightDataSource = []; this.nzDataSource.forEach((/** * @param {?} record * @return {?} */ function (record) { if (record.direction === 'right') { _this.rightDataSource.push(record); } else { _this.leftDataSource.push(record); } })); }; /** * @private * @param {?} direction * @return {?} */ NzTransferComponent.prototype.getCheckedData = /** * @private * @param {?} direction * @return {?} */ function (direction) { return this[direction === 'left' ? 'leftDataSource' : 'rightDataSource'].filter((/** * @param {?} w * @return {?} */ function (w) { return w.checked; })); }; /** * @param {?} direction * @param {?} checked * @param {?=} item * @return {?} */ NzTransferComponent.prototype.handleSelect = /** * @param {?} direction * @param {?} checked * @param {?=} item * @return {?} */ function (direction, checked, item) { /** @type {?} */ var list = this.getCheckedData(direction); this.updateOperationStatus(direction, list.length); this.nzSelectChange.emit({ direction: direction, checked: checked, list: list, item: item }); }; /** * @param {?} ret * @return {?} */ NzTransferComponent.prototype.handleFilterChange = /** * @param {?} ret * @return {?} */ function (ret) { this.nzSearchChange.emit(ret); }; /** * @private * @param {?} direction * @param {?=} count * @return {?} */ NzTransferComponent.prototype.updateOperationStatus = /** * @private * @param {?} direction * @param {?=} count * @return {?} */ function (direction, count) { this[direction === 'right' ? 'leftActive' : 'rightActive'] = (typeof count === 'undefined' ? this.getCheckedData(direction).filter((/** * @param {?} w * @return {?} */ function (w) { return !w.disabled; })).length : count) > 0; }; /** * @param {?} direction * @return {?} */ NzTransferComponent.prototype.moveTo = /** * @param {?} direction * @return {?} */ function (direction) { var _this = this; /** @type {?} */ var oppositeDirection = direction === 'left' ? 'right' : 'left'; this.updateOperationStatus(oppositeDirection, 0); /** @type {?} */ var datasource = direction === 'left' ? this.rightDataSource : this.leftDataSource; /** @type {?} */ var moveList = datasource.filter((/** * @param {?} item * @return {?} */ function (item) { return item.checked === true && !item.disabled; })); this.nzCanMove({ direction: direction, list: moveList }).subscribe((/** * @param {?} newMoveList * @return {?} */ function (newMoveList) { return _this.truthMoveTo(direction, newMoveList.filter((/** * @param {?} i * @return {?} */ function (i) { return !!i; }))); }), (/** * @return {?} */ function () { return moveList.forEach((/** * @param {?} i * @return {?} */ function (i) { return (i.checked = false); })); })); }; /** * @private * @param {?} direction * @param {?} list * @return {?} */ NzTransferComponent.prototype.truthMoveTo = /** * @private * @param {?} direction * @param {?} list * @return {?} */ function (direction, list) { var e_1, _a; /** @type {?} */ var oppositeDirection = direction === 'left' ? 'right' : 'left'; /** @type {?} */ var datasource = direction === 'left' ? this.rightDataSource : this.leftDataSource; /** @type {?} */ var targetDatasource = direction === 'left' ? this.leftDataSource : this.rightDataSource; try { for (var list_1 = __values(list), list_1_1 = list_1.next(); !list_1_1.done; list_1_1 = list_1.next()) { var item = list_1_1.value; item.checked = false; item._hiden = false; datasource.splice(datasource.indexOf(item), 1); } } catch (e_1_1) { e_1 = { error: e_1_1 }; } finally { try { if (list_1_1 && !list_1_1.done && (_a = list_1.return)) _a.call(list_1); } finally { if (e_1) throw e_1.error; } } targetDatasource.splice.apply(targetDatasource, __spread([0, 0], list)); this.updateOperationStatus(oppositeDirection); this.nzChange.emit({ from: oppositeDirection, to: direction, list: list }); this.markForCheckAllList(); }; /** * @private * @return {?} */ NzTransferComponent.prototype.markForCheckAllList = /** * @private * @return {?} */ function () { if (!this.lists) { return; } this.lists.forEach((/** * @param {?} i * @return {?} */ function (i) { return i.markForCheck(); })); }; /** * @return {?} */ NzTransferComponent.prototype.ngOnInit = /** * @return {?} */ function () { var _this = this; this.i18n.localeChange.pipe(takeUntil(this.unsubscribe$)).subscribe((/** * @return {?} */ function () { _this.locale = _this.i18n.getLocaleData('Transfer'); _this.markForCheckAllList(); })); }; /** * @param {?} changes * @return {?} */ NzTransferComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { if ('nzDataSource' in changes) { this.splitDataSource(); this.updateOperationStatus('left'); this.updateOperationStatus('right'); this.cdr.detectChanges(); this.markForCheckAllList(); } }; /** * @return {?} */ NzTransferComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this.unsubscribe$.next(); this.unsubscribe$.complete(); }; NzTransferComponent.decorators = [ { type: Component, args: [{ selector: 'nz-transfer', exportAs: 'nzTransfer', preserveWhitespaces: false, 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: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }] } ]; /** @nocollapse */ NzTransferComponent.ctorParameters = function () { return [ { type: ChangeDetectorRef }, { type: NzI18nService }, { type: Renderer2 }, { type: ElementRef } ]; }; NzTransferComponent.propDecorators = { lists: [{ type: ViewChildren, args: [NzTransferListComponent,] }], nzDisabled: [{ type: Input }], nzDataSource: [{ type: Input }], nzTitles: [{ type: Input }], nzOperations: [{ type: Input }], nzListStyle: [{ type: Input }], nzItemUnit: [{ type: Input }], nzItemsUnit: [{ type: Input }], nzCanMove: [{ type: Input }], nzRender: [{ type: Input }], nzFooter: [{ type: Input }], nzShowSearch: [{ type: Input }], nzFilterOption: [{ type: Input }], nzSearchPlaceholder: [{ type: Input }], nzNotFoundContent: [{ type: Input }], nzChange: [{ type: Output }], nzSearchChange: [{ type: Output }], nzSelectChange: [{ type: Output }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTransferComponent.prototype, "nzDisabled", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTransferComponent.prototype, "nzShowSearch", void 0); return NzTransferComponent; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzTransferModule = /** @class */ (function () { function NzTransferModule() { } NzTransferModule.decorators = [ { type: NgModule, args: [{ imports: [ CommonModule, FormsModule, NzCheckboxModule, NzButtonModule, NzInputModule, NzI18nModule, NzIconModule, NzEmptyModule ], declarations: [NzTransferComponent, NzTransferListComponent, NzTransferSearchComponent], exports: [NzTransferComponent] },] } ]; return NzTransferModule; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { NzTransferListComponent, NzTransferSearchComponent, NzTransferComponent, NzTransferModule }; //# sourceMappingURL=ng-zorro-antd-transfer.js.map