tnx-shared 5.3.356 → 5.3.358

package/bundles/tnx-shared.umd.js

@@ -1697,6 +1697,7 @@
             _this.showEditLink = true;
             _this.titleUnPicked = 'Danh sách các mục chưa chọn';
             _this.titlePicked = 'Danh sách các mục đã chọn';
+            _this.fieldsPicked = null;
             for (var key in init) {
                 _this[key] = init[key];
             }
@@ -46908,14 +46909,14 @@
             this.onPick.emit(data);
         };
         EntityPickerDataComponent.prototype.pickAll = function () {
-            var _a;
+            var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
                 var lstData;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.setting.baseService.getDataCustomRoute(this.plusUrl, this.currentGridInfo.filters, this.control.valueField, this.currentGridInfo.sorts, -1)];
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, this.setting.baseService.getDataCustomRoute(this.plusUrl, this.currentGridInfo.filters, (_a = this.control.fieldsPicked) !== null && _a !== void 0 ? _a : this.control.valueField, this.currentGridInfo.sorts, -1)];
                         case 1:
-                            lstData = (_a = (_b.sent()).data) !== null && _a !== void 0 ? _a : [];
+                            lstData = (_b = (_c.sent()).data) !== null && _b !== void 0 ? _b : [];
                             if (lstData.length) {
                                 this.onPickAll.emit(lstData);
                             }
@@ -46930,8 +46931,8 @@
         EntityPickerDataComponent.prototype.modifyGridInfo = function (gridInfo) {
             return __awaiter(this, void 0, void 0, function () {
                 var allow;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             gridInfo.fields = this.advanceData.fields;
                             if (this.control.multiple) {
@@ -46946,20 +46947,20 @@
                             }
                             return [4 /*yield*/, appendDefaultFilter(gridInfo.filters, this.control.defaultFilters)];
                         case 1:
-                            _b.sent();
+                            _c.sent();
                             if (!this.control.modifyFilter) return [3 /*break*/, 3];
                             return [4 /*yield*/, this.control.modifyFilter(gridInfo.filters, this, this.currentNode)];
                         case 2:
-                            allow = _b.sent();
+                            allow = _c.sent();
                             if (allow === false)
                                 return [2 /*return*/, false];
-                            _b.label = 3;
+                            _c.label = 3;
                         case 3:
                             if (!this.control.filterWhileProcess) return [3 /*break*/, 5];
                             return [4 /*yield*/, appendDefaultFilter(gridInfo.filters, this.control.filterWhileProcess)];
                         case 4:
-                            _b.sent();
-                            _b.label = 5;
+                            _c.sent();
+                            _c.label = 5;
                         case 5:
                             // if (this.setting.columnSetting.sortField) {
                             //     gridInfo.sorts.push(<Sort>{
@@ -46978,11 +46979,19 @@
         EntityPickerDataComponent.prototype.beforeRenderDataSource = function (data) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_b) {
-                    data.forEach(function (item) {
-                        item._dropdownvalue = _this.control.valueField;
-                    });
-                    return [2 /*return*/];
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            data.forEach(function (item) {
+                                item._dropdownvalue = _this.control.valueField;
+                            });
+                            if (!this.control.beforeRenderDataSourceUnPicked) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.control.beforeRenderDataSourceUnPicked(data, this)];
+                        case 1:
+                            _c.sent();
+                            _c.label = 2;
+                        case 2: return [2 /*return*/, data];
+                    }
                 });
             });
         };
@@ -46990,14 +46999,14 @@
             return __awaiter(this, void 0, void 0, function () {
                 var filterCheckExist, lstDataCheckExist_1;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (!this.control.afterGetDataUnPicked) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.control.afterGetDataUnPicked(this.model.dataSource, this)];
                         case 1:
-                            _b.sent();
-                            _b.label = 2;
+                            _c.sent();
+                            _c.label = 2;
                         case 2:
                             if (!(this.searchData && this.showFormAdvancedSearch
                                 && this.model.dataSource.length != this.searchData.lstData.length
@@ -47005,12 +47014,12 @@
                             filterCheckExist = [this.newFilter(this.searchData.fieldFilter, exports.Operator.in, this.searchData.lstData)];
                             return [4 /*yield*/, this.setting.baseService.getAllWithIgnore(filterCheckExist, this.searchData.fieldFilter)];
                         case 3:
-                            lstDataCheckExist_1 = (_b.sent()).data;
+                            lstDataCheckExist_1 = (_c.sent()).data;
                             this.lstDataNotExist = this.searchData.lstData.filter(function (p) { return !lstDataCheckExist_1.some(function (c) { return c[_this.searchData.fieldFilter] == p; }); });
                             return [3 /*break*/, 5];
                         case 4:
                             this.showFormAdvancedSearch = false;
-                            _b.label = 5;
+                            _c.label = 5;
                         case 5: return [2 /*return*/];
                     }
                 });
@@ -47038,7 +47047,7 @@
     EntityPickerDataComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-entity-picker-data',
-                    template: "<crud-list #crudList [menuButtons]=\"getMenuButtons\" [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\"\n    [showScrollHorizontal]=\"true\" (onContentInit)=\"onContentInit.emit($event)\" (onReload)=\"_triggerProcessData($event)\"\n    (onAdd)=\"_add($event)\" (onRowSelect)=\"handleRowSelect($event)\" (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\"\n    (onDelete)=\"_delete($event)\" (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\n    <ng-template #customTitle>\n        <h1 [innerHTML]=\"dom.bypassSecurityTrustHtml(control.titleUnPicked)\"></h1>\n    </ng-template>\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"!model.dataSource.length && setting.hiddenAdvanceSearch\" pButton\n            style=\"visibility: hidden\"></button>\n        <button *ngIf=\"!isSingleSelection && model.total > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y t\u1EA5t c\u1EA3 ({{model.total}})\" icon=\"pi pi-angle-double-right\" class=\"p-button-text p-button-success\"\n            [disabled]=\"model.loading\" (click)=\"pickAll()\"></button>\n        <button *ngIf=\"!isSingleSelection && selectedItems.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{selectedItems.length}})\" icon=\"pi pi-angle-right\"\n            class=\"p-button-text p-button-success\" [disabled]=\"model.loading\"\n            (click)=\"pickSelected(selectedItems)\"></button>\n        <button *ngIf=\"datasourceFieldFilter.length\" type=\"button\" pButton pRipple label=\"T\u00ECm ki\u1EBFm nhi\u1EC1u ng\u01B0\u1EDDi d\u00F9ng\"\n            icon=\"pi pi-search\" class=\"p-button-text p-button-primary\" [disabled]=\"model.loading\"\n            (click)=\"handleAdvansearch()\"></button>\n        <button *ngIf=\"datasourceFieldFilter.length && searchData\" type=\"button\" pButton pRipple\n            label=\"X\u00F3a danh s\u00E1ch t\u00ECm ki\u1EBFm\" pTooltip=\"X\u00F3a t\u1EA5t c\u1EA3 ng\u01B0\u1EDDi d\u00F9ng \u1EDF Danh s\u00E1ch t\u00ECm ki\u1EBFm\" icon=\"pi pi-times\"\n            class=\"p-button-text p-button-primary\" [disabled]=\"model.loading\" (click)=\"handleSearch(null)\"></button>\n    </ng-template>\n    <ng-template let-crudList=\"crudList\" #function let-rowData=\"rowData\">\n        <button pButton type=\"button\" class=\"link-or-action p-button-success p-button-text p-button-rounded\"\n            icon=\"pi pi-check\" pTooltip=\"Ch\u1ECDn m\u1EE5c n\u00E0y\" tooltipPosition=\"top\" [disabled]=\"rowData.disabled\"\n            (click)=\"pickEntity(rowData)\"></button>\n    </ng-template>\n</crud-list>\n\n\n<tn-dialog *ngIf=\"showFormAdvancedSearch\" #dialog [styleClass]=\"'address-form'\" [header]=\"'T\u00ECm ki\u1EBFm nhi\u1EC1u ng\u01B0\u1EDDi d\u00F9ng'\"\n    [popupSize]=\"popupSizeSearchForm\" [maskClass]=\"setting.maskClass\" (onHide)=\"showFormAdvancedSearch = false\">\n    <entity-picker-search-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [parentSetting]=\"setting\"\n        [datasourceFieldFilter]=\"datasourceFieldFilter\" [lstDataNotExist]=\"lstDataNotExist\" [model]=\"formModel\"\n        (onSearch)=\"handleSearch($event)\" (onCancel)=\"showFormAdvancedSearch = false;\">\n    </entity-picker-search-form>\n</tn-dialog>",
+                    template: "<crud-list #crudList [templates]=\"templates\" [menuButtons]=\"getMenuButtons\" [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\"\n    [showScrollHorizontal]=\"true\" (onContentInit)=\"onContentInit.emit($event)\" (onReload)=\"_triggerProcessData($event)\"\n    (onAdd)=\"_add($event)\" (onRowSelect)=\"handleRowSelect($event)\" (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\"\n    (onDelete)=\"_delete($event)\" (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\n    <ng-template #customTitle>\n        <h1 [innerHTML]=\"dom.bypassSecurityTrustHtml(control.titleUnPicked)\"></h1>\n    </ng-template>\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"(isSingleSelection || model.total <= 0) && !model.dataSource.length && setting.hiddenAdvanceSearch\" pButton\n            style=\"visibility: hidden\"></button>\n        <button *ngIf=\"!isSingleSelection && model.total > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y t\u1EA5t c\u1EA3 ({{model.total}})\" icon=\"pi pi-angle-double-right\" class=\"p-button-text p-button-success\"\n            [disabled]=\"model.loading\" (click)=\"pickAll()\"></button>\n        <button *ngIf=\"!isSingleSelection && selectedItems.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{selectedItems.length}})\" icon=\"pi pi-angle-right\"\n            class=\"p-button-text p-button-success\" [disabled]=\"model.loading\"\n            (click)=\"pickSelected(selectedItems)\"></button>\n        <button *ngIf=\"datasourceFieldFilter.length\" type=\"button\" pButton pRipple label=\"T\u00ECm ki\u1EBFm nhi\u1EC1u ng\u01B0\u1EDDi d\u00F9ng\"\n            icon=\"pi pi-search\" class=\"p-button-text p-button-primary\" [disabled]=\"model.loading\"\n            (click)=\"handleAdvansearch()\"></button>\n        <button *ngIf=\"datasourceFieldFilter.length && searchData\" type=\"button\" pButton pRipple\n            label=\"X\u00F3a danh s\u00E1ch t\u00ECm ki\u1EBFm\" pTooltip=\"X\u00F3a t\u1EA5t c\u1EA3 ng\u01B0\u1EDDi d\u00F9ng \u1EDF Danh s\u00E1ch t\u00ECm ki\u1EBFm\" icon=\"pi pi-times\"\n            class=\"p-button-text p-button-primary\" [disabled]=\"model.loading\" (click)=\"handleSearch(null)\"></button>\n    </ng-template>\n    <ng-template let-crudList=\"crudList\" #function let-rowData=\"rowData\">\n        <button pButton type=\"button\" class=\"link-or-action p-button-success p-button-text p-button-rounded\"\n            icon=\"pi pi-check\" pTooltip=\"Ch\u1ECDn m\u1EE5c n\u00E0y\" tooltipPosition=\"top\" [disabled]=\"rowData.disabled\"\n            (click)=\"pickEntity(rowData)\"></button>\n    </ng-template>\n</crud-list>\n\n\n<tn-dialog *ngIf=\"showFormAdvancedSearch\" #dialog [styleClass]=\"'address-form'\" [header]=\"'T\u00ECm ki\u1EBFm nhi\u1EC1u ng\u01B0\u1EDDi d\u00F9ng'\"\n    [popupSize]=\"popupSizeSearchForm\" [maskClass]=\"setting.maskClass\" (onHide)=\"showFormAdvancedSearch = false\">\n    <entity-picker-search-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [parentSetting]=\"setting\"\n        [datasourceFieldFilter]=\"datasourceFieldFilter\" [lstDataNotExist]=\"lstDataNotExist\" [model]=\"formModel\"\n        (onSearch)=\"handleSearch($event)\" (onCancel)=\"showFormAdvancedSearch = false;\">\n    </entity-picker-search-form>\n</tn-dialog>",
                     providers: [ComponentContextService],
                     styles: ["::ng-deep app-entity-picker-data .custom-card{padding:.5em!important}"]
                 },] }
@@ -47049,6 +47058,7 @@
         { type: platformBrowser.DomSanitizer }
     ]; };
     EntityPickerDataComponent.propDecorators = {
+        templates: [{ type: i0.Input }],
         parentSetting: [{ type: i0.Input }],
         advanceData: [{ type: i0.Input }],
         control: [{ type: i0.Input }],
@@ -47240,15 +47250,23 @@
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
                 return __generator(this, function (_b) {
-                    this.itemCanDeletes = [];
-                    data.forEach(function (item) {
-                        _this.funcCheckReadOnlyItem(item);
-                        item._dropdownvalue = _this.control.valueField;
-                        if (!item.hiddenCheckBox) {
-                            _this.itemCanDeletes.push(item);
-                        }
-                    });
-                    return [2 /*return*/];
+                    switch (_b.label) {
+                        case 0:
+                            this.itemCanDeletes = [];
+                            data.forEach(function (item) {
+                                _this.funcCheckReadOnlyItem(item);
+                                item._dropdownvalue = _this.control.valueField;
+                                if (!item.hiddenCheckBox) {
+                                    _this.itemCanDeletes.push(item);
+                                }
+                            });
+                            if (!this.control.beforeRenderDataSourcePicked) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.control.beforeRenderDataSourcePicked(data, this)];
+                        case 1:
+                            _b.sent();
+                            _b.label = 2;
+                        case 2: return [2 /*return*/, data];
+                    }
                 });
             });
         };
@@ -47292,7 +47310,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'app-entity-picker-selected',
-                    template: "<crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\" [showScrollHorizontal]=\"true\"\n    (onContentInit)=\"onContentInit.emit($event)\" (onReload)=\"_triggerProcessData($event)\" (onAdd)=\"_add($event)\"\n    (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\"\n    (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\n    <ng-template #customTitle>\n        <h1 [innerHTML]=\"dom.bypassSecurityTrustHtml(control.titlePicked)\"></h1>\n    </ng-template>\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"!model.dataSource.length && setting.hiddenAdvanceSearch\" pButton\n            style=\"visibility: hidden\"></button>\n        <button *ngIf=\"itemCanDeletes.length\" type=\"button\" pButton pRipple\n            label=\"B\u1ECF t\u1EA5t c\u1EA3 ({{_selectedValue.length}})\" icon=\"pi pi-angle-double-left\"\n            class=\"p-button-text p-button-danger\" [disabled]=\"model.loading\" (click)=\"unPickAll()\"></button>\n        <button *ngIf=\"selectedItems.length > 0\" type=\"button\" pButton pRipple\n            label=\"B\u1ECF m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{selectedItems.length}})\" icon=\"pi pi-angle-left\"\n            class=\"p-button-text p-button-danger\" [disabled]=\"model.loading\"\n            (click)=\"unPickSelected(selectedItems)\"></button>\n    </ng-template>\n\n    <ng-template let-crudList=\"crudList\" #function let-rowData=\"rowData\">\n        <button *ngIf=\"!rowData.hiddenDelete\" pButton type=\"button\"\n            class=\"link-or-action p-button-danger p-button-text p-button-rounded\" icon=\"pi pi-times\"\n            pTooltip=\"B\u1ECF ch\u1ECDn m\u1EE5c n\u00E0y\" tooltipPosition=\"top\" (click)=\"unPickEntity(rowData)\"></button>\n    </ng-template>\n\n</crud-list>",
+                    template: "<crud-list #crudList [templates]=\"templates\" [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\" [showScrollHorizontal]=\"true\"\n    (onContentInit)=\"onContentInit.emit($event)\" (onReload)=\"_triggerProcessData($event)\" (onAdd)=\"_add($event)\"\n    (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\"\n    (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\n    <ng-template #customTitle>\n        <h1 [innerHTML]=\"dom.bypassSecurityTrustHtml(control.titlePicked)\"></h1>\n    </ng-template>\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"!itemCanDeletes.length && !model.dataSource.length && setting.hiddenAdvanceSearch\" pButton\n            style=\"visibility: hidden\"></button>\n        <button *ngIf=\"itemCanDeletes.length\" type=\"button\" pButton pRipple\n            label=\"B\u1ECF t\u1EA5t c\u1EA3 ({{_selectedValue.length}})\" icon=\"pi pi-angle-double-left\"\n            class=\"p-button-text p-button-danger\" [disabled]=\"model.loading\" (click)=\"unPickAll()\"></button>\n        <button *ngIf=\"selectedItems.length > 0\" type=\"button\" pButton pRipple\n            label=\"B\u1ECF m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{selectedItems.length}})\" icon=\"pi pi-angle-left\"\n            class=\"p-button-text p-button-danger\" [disabled]=\"model.loading\"\n            (click)=\"unPickSelected(selectedItems)\"></button>\n    </ng-template>\n\n    <ng-template let-crudList=\"crudList\" #function let-rowData=\"rowData\">\n        <button *ngIf=\"!rowData.hiddenDelete\" pButton type=\"button\"\n            class=\"link-or-action p-button-danger p-button-text p-button-rounded\" icon=\"pi pi-times\"\n            pTooltip=\"B\u1ECF ch\u1ECDn m\u1EE5c n\u00E0y\" tooltipPosition=\"top\" (click)=\"unPickEntity(rowData)\"></button>\n    </ng-template>\n\n</crud-list>",
                     providers: [ComponentContextService],
                     styles: ["::ng-deep app-entity-picker-selected .custom-card{padding:.5em .5em 0!important}"]
                 },] }
@@ -47302,6 +47320,7 @@
         { type: platformBrowser.DomSanitizer }
     ]; };
     EntityPickerSelectedComponent.propDecorators = {
+        templates: [{ type: i0.Input }],
         parentSetting: [{ type: i0.Input }],
         advanceData: [{ type: i0.Input }],
         control: [{ type: i0.Input }],
@@ -47436,7 +47455,7 @@
     EntityPickerBoxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'entity-picker-box',
-                    template: "<div #el class=\"entityPicker tn-l-entity-picker-box\">\n    <div #scrollContainer class=\"p-grid tn-l-entity-picker-box-inner\"\n        (scroll)=\"handleScrollContainer($event, el, scrollContainer)\">\n        <div class=\"p-col-12\" [ngClass]=\"control.multiple ? 'p-md-6 picker-left' : ''\">\n            <app-entity-picker-data *ngIf=\"!control.isTree\" [currentNode]=\"currentNode\" [control]=\"control\"  [datasourceFieldFilter]=\"datasourceFieldFilter\"\n                [parentSetting]=\"parentSetting\" [advanceData]=\"advanceData\" [selectedValue]=\"selectedValue\"\n                [isSingleSelection]=\"!control.multiple\" (onContentInit)=\"onContentLeftInit.emit($event)\"\n                (onPick)=\"handlePick($event)\" (onPickSelected)=\"selectEntity($event)\" (onPickAll)=\"selectEntity($event)\"\n                (onRowSelect)=\"handleRowSelect($event)\">\n            </app-entity-picker-data>\n\n            <app-entity-picker-tree-data *ngIf=\"control.isTree\" [currentNode]=\"currentNode\" [control]=\"control\"\n                [parentSetting]=\"parentSetting\" [advanceData]=\"advanceData\" [selectedValue]=\"selectedValue\"\n                [isSingleSelection]=\"!control.multiple\" (onContentInit)=\"onContentLeftInit.emit($event)\"\n                (onPick)=\"handlePick($event)\" (onPickSelected)=\"selectEntity($event)\" (onPickAll)=\"selectEntity($event)\"\n                (onRowSelect)=\"handleRowSelect($event)\">\n            </app-entity-picker-tree-data>\n        </div>\n        <div *ngIf=\"control.multiple\" class=\"p-col-12 p-md-6\">\n            <app-entity-picker-selected *ngIf=\"!control.isTree\" [control]=\"control\" [parentSetting]=\"parentSetting\"\n                [advanceData]=\"advanceData\" [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\"\n                (onContentInit)=\"onContentRightInit.emit($event)\" (onUnPick)=\"handleUnPick($event)\"\n                (onUnPickSelected)=\"unSelectEntity($event)\" (onUnPickAll)=\"unSelectEntity($event)\">\n            </app-entity-picker-selected>\n\n            <app-entity-picker-tree-selected *ngIf=\"control.isTree\" [control]=\"control\" [parentSetting]=\"parentSetting\"\n                [advanceData]=\"advanceData\" [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\"\n                (onContentInit)=\"onContentRightInit.emit($event)\" (onUnPick)=\"handleUnPick($event)\"\n                (onUnPickSelected)=\"unSelectEntity($event)\" (onUnPickAll)=\"unSelectEntity($event)\">\n            </app-entity-picker-tree-selected>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"isOnMobile && control.multiple\">\n        <div class=\"tn-animated-left-arrow-icon\"></div>\n        <div class=\"tn-animated-right-arrow-icon\"></div>\n\n        <after-view-checked (loaded)=\"toggleArrowIcon(el, scrollContainer)\"></after-view-checked>\n    </ng-container>\n</div>",
+                    template: "<div #el class=\"entityPicker tn-l-entity-picker-box\">\n    <div #scrollContainer class=\"p-grid tn-l-entity-picker-box-inner\"\n        (scroll)=\"handleScrollContainer($event, el, scrollContainer)\">\n        <div class=\"p-col-12\" [ngClass]=\"control.multiple ? 'p-md-6 picker-left' : ''\">\n            <app-entity-picker-data *ngIf=\"!control.isTree\" [currentNode]=\"currentNode\" [control]=\"control\"  [datasourceFieldFilter]=\"datasourceFieldFilter\"\n                [parentSetting]=\"parentSetting\" [advanceData]=\"advanceData\" [selectedValue]=\"selectedValue\" [templates]=\"templates\"\n                [isSingleSelection]=\"!control.multiple\" (onContentInit)=\"onContentLeftInit.emit($event)\"\n                (onPick)=\"handlePick($event)\" (onPickSelected)=\"selectEntity($event)\" (onPickAll)=\"selectEntity($event)\"\n                (onRowSelect)=\"handleRowSelect($event)\">\n            </app-entity-picker-data>\n\n            <app-entity-picker-tree-data *ngIf=\"control.isTree\" [currentNode]=\"currentNode\" [control]=\"control\"\n                [parentSetting]=\"parentSetting\" [advanceData]=\"advanceData\" [selectedValue]=\"selectedValue\"\n                [isSingleSelection]=\"!control.multiple\" (onContentInit)=\"onContentLeftInit.emit($event)\"\n                (onPick)=\"handlePick($event)\" (onPickSelected)=\"selectEntity($event)\" (onPickAll)=\"selectEntity($event)\"\n                (onRowSelect)=\"handleRowSelect($event)\">\n            </app-entity-picker-tree-data>\n        </div>\n        <div *ngIf=\"control.multiple\" class=\"p-col-12 p-md-6\">\n            <app-entity-picker-selected *ngIf=\"!control.isTree\" [control]=\"control\" [parentSetting]=\"parentSetting\"\n                [advanceData]=\"advanceData\" [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\" [templates]=\"templates\"\n                (onContentInit)=\"onContentRightInit.emit($event)\" (onUnPick)=\"handleUnPick($event)\"\n                (onUnPickSelected)=\"unSelectEntity($event)\" (onUnPickAll)=\"unSelectEntity($event)\">\n            </app-entity-picker-selected>\n\n            <app-entity-picker-tree-selected *ngIf=\"control.isTree\" [control]=\"control\" [parentSetting]=\"parentSetting\"\n                [advanceData]=\"advanceData\" [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\"\n                (onContentInit)=\"onContentRightInit.emit($event)\" (onUnPick)=\"handleUnPick($event)\"\n                (onUnPickSelected)=\"unSelectEntity($event)\" (onUnPickAll)=\"unSelectEntity($event)\">\n            </app-entity-picker-tree-selected>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"isOnMobile && control.multiple\">\n        <div class=\"tn-animated-left-arrow-icon\"></div>\n        <div class=\"tn-animated-right-arrow-icon\"></div>\n\n        <after-view-checked (loaded)=\"toggleArrowIcon(el, scrollContainer)\"></after-view-checked>\n    </ng-container>\n</div>",
                     providers: [ComponentContextService],
                     styles: ["::ng-deep entity-picker-box .picker-left{border-right:1px solid #dee2e6}::ng-deep entity-picker-box .tn-l-entity-picker-box{position:relative}::ng-deep entity-picker-box .tn-animated-left-arrow-icon,::ng-deep entity-picker-box .tn-animated-right-arrow-icon{position:absolute;z-index:10;pointer-events:none;top:50%;margin-top:-16px;opacity:0;transition:opacity .24s ease-in-out}::ng-deep entity-picker-box .tn-animated-left-arrow-icon{left:8px}::ng-deep entity-picker-box .tn-animated-right-arrow-icon{right:8px}::ng-deep entity-picker-box .tn-l-entity-picker-box.--show-left-arrow .tn-animated-left-arrow-icon,::ng-deep entity-picker-box .tn-l-entity-picker-box.--show-right-arrow .tn-animated-right-arrow-icon{opacity:1}::ng-deep entity-picker-box .tn-l-entity-picker-box-inner{display:flex;height:100%;margin:0}::ng-deep entity-picker-box app-entity-picker-data .custom-card,::ng-deep entity-picker-box app-entity-picker-selected .custom-card{box-shadow:none}::ng-deep entity-picker-box app-entity-picker-selected .custom-card{padding:.5em!important}@media (max-width:640px){::ng-deep entity-picker-box .picker-left{border-right:unset}::ng-deep entity-picker-box .tn-l-entity-picker-box-inner{flex-wrap:nowrap;overflow:auto}::ng-deep entity-picker-box .p-datatable .p-datatable-tbody tr td.column-function{padding:.5rem}}::ng-deep .entity-picker-box-dialog .p-dialog-content{overflow:hidden;padding:0}@media (max-width:640px){::ng-deep .entity-picker-box-dialog .p-dialog-content{overflow:auto}::ng-deep .entity-picker-box-dialog .tn-dialog-scrollbar>div{min-height:100%!important}}"]
                 },] }
@@ -47452,6 +47471,7 @@
         el: [{ type: i0.ViewChild, args: ['el',] }],
         dataComponent: [{ type: i0.ViewChild, args: [EntityPickerDataComponent, { static: false },] }],
         selectedComponent: [{ type: i0.ViewChild, args: [EntityPickerSelectedComponent, { static: false },] }],
+        templates: [{ type: i0.Input }],
         parentSetting: [{ type: i0.Input }],
         advanceData: [{ type: i0.Input }],
         control: [{ type: i0.Input }],
@@ -48233,6 +48253,21 @@
                 });
             });
         };
+        EntityPickerComponent.prototype.beforeRenderDataSource = function (data) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.control.beforeRenderDataSource) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.control.beforeRenderDataSource(data, this)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/, data];
+                    }
+                });
+            });
+        };
         EntityPickerComponent.prototype.afterGetData = function () {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -48404,7 +48439,7 @@
     EntityPickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'entity-picker',
-                    template: "<crud-list #crudList [templates]=\"children\" [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\"\n    [hiddenDelete]=\"readOnly\" (onReload)=\"_triggerProcessData($event)\" (onAdd)=\"_add($event)\" (onEdit)=\"_edit($event)\"\n    (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\" (onDeleteMultiple)=\"_deleteMultiple($event)\"\n    [showScrollHorizontal]=\"true\" (onReloaded)=\"_unmarkLoading()\" class=\"--no-wrapper-padding\">\n    <ng-template #toolbar let-crudList=\"crudList\">\n        <button *ngIf=\"!readOnly\" type=\"button\" pButton icon=\"pi pi-external-link\" class=\"p-button-text\"\n            [label]=\"control.title\" [disabled]=\"control.disabled\" (click)=\"selectEntity()\"></button>\n        <ng-container *ngIf=\"required\">\n            <span class=\"star-required\">*</span>\n        </ng-container>\n        <ng-container *ngIf=\"control.multiple && !readOnly && !setting.hiddenCheckbox\">\n            <button type=\"button\" pButton class=\"p-button-warning p-button-text p-button-rounded link-or-action\"\n                icon=\"pi pi-trash\" label=\"B\u1ECF m\u1EE5c \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\"\n                [disabled]=\"model.selectedItems.length == 0\" (click)=\"handleUnMultiPickEntity()\"></button>\n        </ng-container>\n    </ng-template>\n    <ng-template #function let-crudList=\"crudList\" let-rowData=\"rowData\" let-index=\"index\">\n        <div *ngIf=\"!control.rowButtonTemplate && !readOnly\" class=\"p-toolbar-group-center button-group\">\n            <ng-container *ngIf=\"control.rowButtonBeforeTemplate\" class=\"p-toolbar-group-center button-group\">\n                <ng-container\n                    *ngTemplateOutlet=\"control.rowButtonBeforeTemplate; context: {rowData: rowData, rowIndex: index, control: control}\">\n                </ng-container>\n            </ng-container>\n            <button type=\"button\" pButton class=\"p-button-warning p-button-text p-button-rounded link-or-action\"\n                icon=\"pi pi-trash\" pTooltip=\"B\u1ECF ch\u1ECDn m\u1EE5c n\u00E0y\" tooltipPosition=\"top\"\n                (click)=\"handleUnPickEntity(rowData)\"></button>\n        </div>\n        <div *ngIf=\"control.rowButtonTemplate\" class=\"p-toolbar-group-center button-group\">\n            <ng-container\n                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: rowData, rowIndex: index, control: control}\">\n            </ng-container>\n        </div>\n    </ng-template>\n</crud-list>\n<tn-dialog #dialog *ngIf=\"showDetailForm\" styleClass=\"entity-picker-box-dialog no-padding\" [useDefaultScrollBar]=\"true\"\n    [header]=\"control.title | translate\" [popupSize]=\"popupSize\" (onHide)=\"handleHide($event)\">\n    <entity-picker-box #entityPickerBox [control]=\"control\" [parentSetting]=\"setting\" [advanceData]=\"advanceData\"\n        (onRowSelect)=\"handleEntityPickerBoxRowSelect($event)\" [selectedValue]=\"selectedValue\"\n        (onChanged)=\"handleChangeEntity($event)\" (onSelect)=\"handleSelectEntity($event)\"\n        (onUnSelect)=\"handleUnSelectEntity($event)\" (onDone)=\"handleHide($event)\">\n    </entity-picker-box>\n    <ng-template #footer>\n        <button type=\"button\" pButton class=\"p-button-text\" (click)=\"onClickSubmitButton($event, entityPickerBox)\"\n            [label]=\"'Ho\u00E0n th\u00E0nh' | translate\" icon=\"pi pi-check\"></button>\n    </ng-template>\n</tn-dialog>",
+                    template: "<crud-list #crudList [templates]=\"children\" [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\"\n    [hiddenDelete]=\"readOnly\" (onReload)=\"_triggerProcessData($event)\" (onAdd)=\"_add($event)\" (onEdit)=\"_edit($event)\"\n    (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\" (onDeleteMultiple)=\"_deleteMultiple($event)\"\n    [showScrollHorizontal]=\"true\" (onReloaded)=\"_unmarkLoading()\" class=\"--no-wrapper-padding\">\n    <ng-template #toolbar let-crudList=\"crudList\">\n        <button *ngIf=\"!readOnly\" type=\"button\" pButton icon=\"pi pi-external-link\" class=\"p-button-text\"\n            [label]=\"control.title\" [disabled]=\"control.disabled\" (click)=\"selectEntity()\"></button>\n        <ng-container *ngIf=\"required\">\n            <span class=\"star-required\">*</span>\n        </ng-container>\n        <ng-container *ngIf=\"control.multiple && !readOnly && !setting.hiddenCheckbox\">\n            <button type=\"button\" pButton class=\"p-button-warning p-button-text p-button-rounded link-or-action\"\n                icon=\"pi pi-trash\" label=\"B\u1ECF m\u1EE5c \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\"\n                [disabled]=\"model.selectedItems.length == 0\" (click)=\"handleUnMultiPickEntity()\"></button>\n        </ng-container>\n    </ng-template>\n    <ng-template #function let-crudList=\"crudList\" let-rowData=\"rowData\" let-index=\"index\">\n        <div *ngIf=\"!control.rowButtonTemplate && !readOnly\" class=\"p-toolbar-group-center button-group\">\n            <ng-container *ngIf=\"control.rowButtonBeforeTemplate\" class=\"p-toolbar-group-center button-group\">\n                <ng-container\n                    *ngTemplateOutlet=\"control.rowButtonBeforeTemplate; context: {rowData: rowData, rowIndex: index, control: control}\">\n                </ng-container>\n            </ng-container>\n            <button type=\"button\" pButton class=\"p-button-warning p-button-text p-button-rounded link-or-action\"\n                icon=\"pi pi-trash\" pTooltip=\"B\u1ECF ch\u1ECDn m\u1EE5c n\u00E0y\" tooltipPosition=\"top\"\n                (click)=\"handleUnPickEntity(rowData)\"></button>\n        </div>\n        <div *ngIf=\"control.rowButtonTemplate\" class=\"p-toolbar-group-center button-group\">\n            <ng-container\n                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: rowData, rowIndex: index, control: control}\">\n            </ng-container>\n        </div>\n    </ng-template>\n</crud-list>\n<tn-dialog #dialog *ngIf=\"showDetailForm\" styleClass=\"entity-picker-box-dialog no-padding\" [useDefaultScrollBar]=\"true\"\n    [header]=\"control.title | translate\" [popupSize]=\"popupSize\" (onHide)=\"handleHide($event)\">\n    <entity-picker-box #entityPickerBox [control]=\"control\" [parentSetting]=\"setting\" [advanceData]=\"advanceData\" [templates]=\"children\"\n        (onRowSelect)=\"handleEntityPickerBoxRowSelect($event)\" [selectedValue]=\"selectedValue\"\n        (onChanged)=\"handleChangeEntity($event)\" (onSelect)=\"handleSelectEntity($event)\"\n        (onUnSelect)=\"handleUnSelectEntity($event)\" (onDone)=\"handleHide($event)\">\n    </entity-picker-box>\n    <ng-template #footer>\n        <button type=\"button\" pButton class=\"p-button-text\" (click)=\"onClickSubmitButton($event, entityPickerBox)\"\n            [label]=\"'Ho\u00E0n th\u00E0nh' | translate\" icon=\"pi pi-check\"></button>\n    </ng-template>\n</tn-dialog>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,