tnx-shared 5.3.303 → 5.3.305

package/bundles/tnx-shared.umd.js

@@ -1668,6 +1668,8 @@
             _this.rowButtonBeforeTemplate = null;
             _this.hiddenPageSetting = false;
             _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';
             for (var key in init) {
                 _this[key] = init[key];
             }
@@ -6282,14 +6284,12 @@
     var MasterDataService = /** @class */ (function () {
         function MasterDataService(_httpClient, _commonService, _injector, _storageUpdatedService, _moduleConfigService) {
             var _this = this;
-            var _a, _b;
             this._httpClient = _httpClient;
             this._commonService = _commonService;
             this._injector = _injector;
             this._storageUpdatedService = _storageUpdatedService;
             this._moduleConfigService = _moduleConfigService;
             this.setupSignalr = false;
-            this.isDisabledGetCache = false;
             this.storage = localStorage;
             this.categoryPrefix = 'cat_';
             this.categoryGroupPrefix = 'cat_group_';
@@ -6298,14 +6298,13 @@
             this.env = this._moduleConfigService.getConfig().environment;
             this.apiEndpoint = this.env.apiDomain.commonMasterDataEndpoint;
             this.apiVersion = this.env.apiVersion;
-            this.isDisabledGetCache = (_b = (_a = this.env.cauHinhNghiepVu) === null || _a === void 0 ? void 0 : _a.isDisabledGetCacheCommonMasterdata) !== null && _b !== void 0 ? _b : false;
             this.groupCategoryEndpoint = this.apiEndpoint + "/" + this.apiVersion + "/Groupcategory";
             this.singleCategoryEndpoint = this.apiEndpoint + "/" + this.apiVersion + "/SingleCategory";
             if (!this.setupSignalr) {
                 this._storageUpdatedService.subscribeChangedLocalStorage('cat_*', function (data) { return __awaiter(_this, void 0, void 0, function () {
                     var dataObj, dataSource_1, content, groupCode, result, groupCode, result;
-                    return __generator(this, function (_c) {
-                        switch (_c.label) {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
                             case 0:
                                 if (typeof data == 'string') {
                                     dataObj = JSON.parse(data);
@@ -6320,19 +6319,19 @@
                                 groupCode = dataObj.message.content.replace(this.categoryGroupPrefix, '');
                                 return [4 /*yield*/, this.getGroupItemByCode(groupCode)];
                             case 1:
-                                result = _c.sent();
+                                result = _a.sent();
                                 this.storage.setItem("" + this.categoryGroupPrefix + groupCode, JSON.stringify(result.data));
                                 return [3 /*break*/, 4];
                             case 2:
                                 groupCode = dataObj.message.content.replace(this.categoryPrefix, '');
                                 return [4 /*yield*/, this.doGetAll(groupCode)];
                             case 3:
-                                result = _c.sent();
+                                result = _a.sent();
                                 result.data.forEach(function (element) {
                                     dataSource_1.push({ id: element.id, code: element.code, name: element.name });
                                 });
                                 this.storage.setItem("" + this.categoryPrefix + groupCode, JSON.stringify(dataSource_1));
-                                _c.label = 4;
+                                _a.label = 4;
                             case 4: return [2 /*return*/];
                         }
                     });
@@ -6343,13 +6342,13 @@
         MasterDataService.prototype.getAllByGroupCode = function (groupCode) {
             return __awaiter(this, void 0, void 0, function () {
                 var dataSource, result;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             dataSource = [];
                             return [4 /*yield*/, this.doGetAllCustom(groupCode)];
                         case 1:
-                            result = _c.sent();
+                            result = _a.sent();
                             result.data.forEach(function (element) {
                                 dataSource.push({ id: element.id, code: element.code, name: element.name });
                             });
@@ -6362,26 +6361,11 @@
             var _this = this;
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                 var dataSource;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            dataSource = [];
-                            if (!(this.isDisabledGetCache === true)) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.getAllByGroupCode(groupCode)];
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.getAllByGroupCode(groupCode)];
                         case 1:
-                            dataSource = _c.sent();
-                            return [3 /*break*/, 5];
-                        case 2:
-                            if (!!this.storage.getItem("" + this.categoryPrefix + groupCode)) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this.getAllByGroupCode(groupCode)];
-                        case 3:
-                            dataSource = _c.sent();
-                            this.storage.setItem("" + this.categoryPrefix + groupCode, JSON.stringify(dataSource));
-                            return [3 /*break*/, 5];
-                        case 4:
-                            dataSource = JSON.parse(this.storage.getItem("" + this.categoryPrefix + groupCode));
-                            _c.label = 5;
-                        case 5:
+                            dataSource = _a.sent();
                             resolve(dataSource);
                             return [2 /*return*/];
                     }
@@ -6392,20 +6376,20 @@
             var _this = this;
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                 var config, result;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             config = '';
                             if (!!this.storage.getItem(code)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.doGetConfigByCode(code)];
                         case 1:
-                            result = _c.sent();
+                            result = _a.sent();
                             this.storage.setItem(code, JSON.stringify(result.data));
                             config = result.data;
                             return [3 /*break*/, 3];
                         case 2:
                             config = JSON.parse(this.storage.getItem(code));
-                            _c.label = 3;
+                            _a.label = 3;
                         case 3:
                             resolve(config);
                             return [2 /*return*/];
@@ -6416,7 +6400,7 @@
         MasterDataService.prototype.getDropdown = function (groupCode) {
             var _this = this;
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_c) {
+                return __generator(this, function (_a) {
                     this.get(groupCode).then(function (source) {
                         var op = source.map(function (x) { return ({ title: x.name, label: x.name, value: x.code }); });
                         resolve(op);
@@ -6434,7 +6418,7 @@
         MasterDataService.prototype.getItems = function (groupCode) {
             var _this = this;
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_c) {
+                return __generator(this, function (_a) {
                     this.get(groupCode).then(function (source) {
                         var op = source.map(function (x) { return ({ label: x.name, value: x.code }); });
                         resolve(op);
@@ -6454,7 +6438,7 @@
             var _this = this;
             if (level === void 0) { level = 1; }
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_c) {
+                return __generator(this, function (_a) {
                     this.getAddress(id, level).then(function (source) {
                         var op = source.map(function (x) { return ({ title: x.name, label: x.name, value: x.code }); });
                         resolve(op);
@@ -6468,20 +6452,20 @@
             if (level === void 0) { level = 1; }
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                 var dataSource, result;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             dataSource = [];
                             if (!!this.storage.getItem(this.administrativeUnit + ".Level" + level + "." + id)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.dogetAddress(id, level)];
                         case 1:
-                            result = _c.sent();
+                            result = _a.sent();
                             this.storage.setItem(this.administrativeUnit + ".Level" + level + "." + id, JSON.stringify(result.data));
                             dataSource = result.data;
                             return [3 /*break*/, 3];
                         case 2:
                             dataSource = JSON.parse(this.storage.getItem(this.administrativeUnit + ".Level" + level + "." + id));
-                            _c.label = 3;
+                            _a.label = 3;
                         case 3:
                             resolve(dataSource);
                             return [2 /*return*/];
@@ -6493,11 +6477,11 @@
             var _this = this;
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                 var streets, parentIds;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0: return [4 /*yield*/, this.getAddress(districtCode, 2)];
                         case 1:
-                            streets = _c.sent();
+                            streets = _a.sent();
                             parentIds = streets.filter(function (x) { return x.name == streetName; }).map(function (x) { return x.parentId; });
                             resolve(parentIds);
                             return [2 /*return*/];
@@ -6518,8 +6502,8 @@
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                 var itemData, serviceUri, result;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             itemData = new MasterDataItem();
                             if (!!this.storage.getItem("" + this.administrativeUnitItem + id)) return [3 /*break*/, 2];
@@ -6528,13 +6512,13 @@
                                     .pipe(operators.catchError(function (err) { return _this._commonService.handleError(err, _this._injector); }))
                                     .toPromise()];
                         case 1:
-                            result = _c.sent();
+                            result = _a.sent();
                             this.storage.setItem("" + this.administrativeUnitItem + id, JSON.stringify(result.data));
                             itemData = result.data;
                             return [3 /*break*/, 3];
                         case 2:
                             itemData = JSON.parse(this.storage.getItem("" + this.administrativeUnitItem + id));
-                            _c.label = 3;
+                            _a.label = 3;
                         case 3:
                             resolve(itemData);
                             return [2 /*return*/];
@@ -6556,14 +6540,14 @@
             return __awaiter(this, void 0, void 0, function () {
                 var group, gridInfo;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0: return [4 /*yield*/, this.getGroupByCode(groupCode)];
                         case 1:
-                            group = _c.sent();
+                            group = _a.sent();
                             if (!group.data) {
                                 return [2 /*return*/, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                                        return __generator(this, function (_c) {
+                                        return __generator(this, function (_a) {
                                             resolve({ success: true, data: [] });
                                             return [2 /*return*/];
                                         });
@@ -6583,11 +6567,11 @@
                 });
             });
         };
-        // thực hiện get list singleCategory theo groupCategoryCode trên redis
+        // thực hiện get list singleCategory theo groupCategoryCode trên redis cache
         MasterDataService.prototype.doGetAllCustom = function (groupCode) {
             return __awaiter(this, void 0, void 0, function () {
                 var uri;
-                return __generator(this, function (_c) {
+                return __generator(this, function (_a) {
                     uri = this.singleCategoryEndpoint + "/GetDataByGroupCode/" + groupCode;
                     return [2 /*return*/, this._httpClient.get(uri).toPromise()];
                 });
@@ -6599,7 +6583,7 @@
         MasterDataService.prototype.getGroupByCode = function (groupCode) {
             return __awaiter(this, void 0, void 0, function () {
                 var uri;
-                return __generator(this, function (_c) {
+                return __generator(this, function (_a) {
                     uri = this.groupCategoryEndpoint + "/getByCode/" + groupCode;
                     return [2 /*return*/, this._httpClient.get(uri).toPromise()];
                 });
@@ -6633,20 +6617,20 @@
             var _this = this;
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                 var dataSource, result;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             dataSource = [];
                             if (!!this.storage.getItem("" + this.categoryPrefix + groupCode)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.doGetAll(groupCode)];
                         case 1:
-                            result = _c.sent();
+                            result = _a.sent();
                             this.storage.setItem("" + this.categoryPrefix + groupCode, JSON.stringify(result.data));
                             dataSource = result.data;
                             return [3 /*break*/, 3];
                         case 2:
                             dataSource = JSON.parse(this.storage.getItem("" + this.categoryPrefix + groupCode));
-                            _c.label = 3;
+                            _a.label = 3;
                         case 3:
                             resolve(dataSource.find(function (x) { return x.code === code; }));
                             return [2 /*return*/];
@@ -6667,8 +6651,8 @@
             var _this = this;
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                 var strResult, x, x, x;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             strResult = '';
                             if (strText && strText != '') {
@@ -6680,29 +6664,29 @@
                             if (!(ward && ward != '')) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.getItemDetailUnit(ward)];
                         case 1:
-                            x = _c.sent();
+                            x = _a.sent();
                             if (x !== null) {
                                 strResult += x.name + ', ';
                             }
-                            _c.label = 2;
+                            _a.label = 2;
                         case 2:
                             if (!(district && district != '')) return [3 /*break*/, 4];
                             return [4 /*yield*/, this.getItemDetailUnit(district)];
                         case 3:
-                            x = _c.sent();
+                            x = _a.sent();
                             if (x !== null) {
                                 strResult += x.name + ', ';
                             }
-                            _c.label = 4;
+                            _a.label = 4;
                         case 4:
                             if (!(city && city != '')) return [3 /*break*/, 6];
                             return [4 /*yield*/, this.getItemDetailUnit(city)];
                         case 5:
-                            x = _c.sent();
+                            x = _a.sent();
                             if (x !== null) {
                                 strResult += x.name;
                             }
-                            _c.label = 6;
+                            _a.label = 6;
                         case 6:
                             resolve(strResult);
                             return [2 /*return*/];
@@ -6738,8 +6722,8 @@
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                 var data, dataStorage, apiUrl;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             dataStorage = this.storage.getItem("" + this.categoryPrefix + groupCode);
                             if (!!dataStorage) return [3 /*break*/, 2];
@@ -6750,7 +6734,7 @@
                                     .post(apiUrl, gridInfo)
                                     .pipe(operators.catchError(function (err) { return _this.handleError(err, _this._injector); })).toPromise()];
                         case 1:
-                            data = _c.sent();
+                            data = _a.sent();
                             this.storage.setItem("" + this.categoryPrefix + groupCode, JSON.stringify(data.data));
                             return [3 /*break*/, 3];
                         case 2:
@@ -6758,7 +6742,7 @@
                                 success: true,
                                 data: JSON.parse(dataStorage)
                             };
-                            _c.label = 3;
+                            _a.label = 3;
                         case 3:
                             resolve(data);
                             return [2 /*return*/];
@@ -46027,9 +46011,10 @@
 
     var EntityPickerDataComponent = /** @class */ (function (_super) {
         __extends(EntityPickerDataComponent, _super);
-        function EntityPickerDataComponent(_injector, _deviceDetectorService) {
+        function EntityPickerDataComponent(_injector, _deviceDetectorService, dom) {
             var _this = _super.call(this, _injector) || this;
             _this._deviceDetectorService = _deviceDetectorService;
+            _this.dom = dom;
             _this.datasourceFieldFilter = [];
             _this.isSingleSelection = false;
             _this.onContentInit = new i0.EventEmitter();
@@ -46251,14 +46236,15 @@
     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 #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.dataSource.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y t\u1EA5t c\u1EA3 ({{model.dataSource.length}})\" icon=\"pi pi-angle-double-right\"\n            class=\"p-button-text p-button-success\" [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\" (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\" (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 [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.dataSource.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y t\u1EA5t c\u1EA3 ({{model.dataSource.length}})\" icon=\"pi pi-angle-double-right\"\n            class=\"p-button-text p-button-success\" [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\" (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\" (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}"]
                 },] }
     ];
     EntityPickerDataComponent.ctorParameters = function () { return [
         { type: i0.Injector },
-        { type: ngxDeviceDetector.DeviceDetectorService }
+        { type: ngxDeviceDetector.DeviceDetectorService },
+        { type: platformBrowser.DomSanitizer }
     ]; };
     EntityPickerDataComponent.propDecorators = {
         parentSetting: [{ type: i0.Input }],
@@ -46278,8 +46264,9 @@
 
     var EntityPickerSelectedComponent = /** @class */ (function (_super) {
         __extends(EntityPickerSelectedComponent, _super);
-        function EntityPickerSelectedComponent(_injector) {
+        function EntityPickerSelectedComponent(_injector, dom) {
             var _this = _super.call(this, _injector) || this;
+            _this.dom = dom;
             _this.onContentInit = new i0.EventEmitter();
             _this.onUnPick = new i0.EventEmitter();
             _this.onUnPickAll = new i0.EventEmitter();
@@ -46500,13 +46487,14 @@
         { 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\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 ({{itemCanDeletes.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\" (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 [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 ({{itemCanDeletes.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\" (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}"]
                 },] }
     ];
     EntityPickerSelectedComponent.ctorParameters = function () { return [
-        { type: i0.Injector }
+        { type: i0.Injector },
+        { type: platformBrowser.DomSanitizer }
     ]; };
     EntityPickerSelectedComponent.propDecorators = {
         parentSetting: [{ type: i0.Input }],
@@ -46792,9 +46780,10 @@
 
     var EntityPickerTreeDataComponent = /** @class */ (function (_super) {
         __extends(EntityPickerTreeDataComponent, _super);
-        function EntityPickerTreeDataComponent(_injector, _deviceDetectorService) {
+        function EntityPickerTreeDataComponent(_injector, _deviceDetectorService, dom) {
             var _this = _super.call(this, _injector) || this;
             _this._deviceDetectorService = _deviceDetectorService;
+            _this.dom = dom;
             _this.isSingleSelection = false;
             _this.onContentInit = new i0.EventEmitter();
             _this.onRowSelect = new i0.EventEmitter();
@@ -46949,14 +46938,15 @@
     EntityPickerTreeDataComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-entity-picker-tree-data',
-                    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    (onRowSelect)=\"handleRowSelect($event)\" (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\"\n    (onDelete)=\"_delete($event)\" (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"!isSingleSelection && model.dataSource.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y t\u1EA5t c\u1EA3 ({{model.dataSource.length}})\" icon=\"pi pi-angle-double-right\"\n            class=\"p-button-text p-button-success\" (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\" (click)=\"pickSelected(selectedItems)\"></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<tn-tree-table [model]=\"model\" [setting]=\"setting\" [allDataSource]=\"model.allDataSource\" [hiddenAdd]=\"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)=\"_handleReloaded($event)\">\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"!isSingleSelection && model.dataSource.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y t\u1EA5t c\u1EA3 ({{model.dataSource.length}})\" icon=\"pi pi-angle-double-right\"\n            class=\"p-button-text p-button-success\" (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\" (click)=\"pickSelected(selectedItems)\"></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</tn-tree-table>",
+                    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    (onRowSelect)=\"handleRowSelect($event)\" (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\"\n    (onDelete)=\"_delete($event)\" (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"!isSingleSelection && model.dataSource.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y t\u1EA5t c\u1EA3 ({{model.dataSource.length}})\" icon=\"pi pi-angle-double-right\"\n            class=\"p-button-text p-button-success\" (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\" (click)=\"pickSelected(selectedItems)\"></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<tn-tree-table [model]=\"model\" [setting]=\"setting\" [allDataSource]=\"model.allDataSource\" [hiddenAdd]=\"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)=\"_handleReloaded($event)\">\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.dataSource.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y t\u1EA5t c\u1EA3 ({{model.dataSource.length}})\" icon=\"pi pi-angle-double-right\"\n            class=\"p-button-text p-button-success\" (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\" (click)=\"pickSelected(selectedItems)\"></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</tn-tree-table>",
                     providers: [ComponentContextService],
                     styles: ["::ng-deep app-entity-picker-data .custom-card{padding:.5em!important}"]
                 },] }
     ];
     EntityPickerTreeDataComponent.ctorParameters = function () { return [
         { type: i0.Injector },
-        { type: ngxDeviceDetector.DeviceDetectorService }
+        { type: ngxDeviceDetector.DeviceDetectorService },
+        { type: platformBrowser.DomSanitizer }
     ]; };
     EntityPickerTreeDataComponent.propDecorators = {
         parentSetting: [{ type: i0.Input }],
@@ -46976,8 +46966,9 @@
 
     var EntityPickerTreeSelectedComponent = /** @class */ (function (_super) {
         __extends(EntityPickerTreeSelectedComponent, _super);
-        function EntityPickerTreeSelectedComponent(_injector) {
+        function EntityPickerTreeSelectedComponent(_injector, dom) {
             var _this = _super.call(this, _injector) || this;
+            _this.dom = dom;
             _this.onContentInit = new i0.EventEmitter();
             _this.onUnPick = new i0.EventEmitter();
             _this.onUnPickAll = new i0.EventEmitter();
@@ -47154,13 +47145,14 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'app-entity-picker-tree-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\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 ({{itemCanDeletes.length}})\" icon=\"pi pi-angle-double-left\"\n            class=\"p-button-text p-button-danger\" (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\" (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 [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 ({{itemCanDeletes.length}})\" icon=\"pi pi-angle-double-left\"\n            class=\"p-button-text p-button-danger\" (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\" (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}"]
                 },] }
     ];
     EntityPickerTreeSelectedComponent.ctorParameters = function () { return [
-        { type: i0.Injector }
+        { type: i0.Injector },
+        { type: platformBrowser.DomSanitizer }
     ]; };
     EntityPickerTreeSelectedComponent.propDecorators = {
         parentSetting: [{ type: i0.Input }],
@@ -47569,7 +47561,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    (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 let-crudList=\"crudList\" #function 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    (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>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,