tnx-shared 5.3.302 → 5.3.304

package/fesm2015/tnx-shared.js

@@ -1142,6 +1142,8 @@ class EntityPickerControlSchema extends FormControlBaseWithService {
         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 (const key in init) {
             this[key] = init[key];
         }
@@ -8970,11 +8972,14 @@ class ComponentBase {
                 return;
         }
     }
+    stringifyData(obj) {
+        return JSON.stringify(obj, function (k, v) { return v === undefined ? null : v; });
+    }
     exportExcelV5(data, templateCode, fileName) {
         const sheet = new ExportItem({
             type: ExportItemType.ExcelSheet,
             templateCode,
-            data: JSON.stringify(data),
+            data: this.stringifyData(data),
             name: 'Sheet1'
         });
         const file = new ExportItem({
@@ -38163,9 +38168,10 @@ class SearchDataModel {
 }
 
 class EntityPickerDataComponent extends DataListBase {
-    constructor(_injector, _deviceDetectorService) {
+    constructor(_injector, _deviceDetectorService, dom) {
         super(_injector);
         this._deviceDetectorService = _deviceDetectorService;
+        this.dom = dom;
         this.datasourceFieldFilter = [];
         this.isSingleSelection = false;
         this.onContentInit = new EventEmitter();
@@ -38347,14 +38353,15 @@ class EntityPickerDataComponent extends DataListBase {
 EntityPickerDataComponent.decorators = [
     { type: 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 = () => [
     { type: Injector },
-    { type: DeviceDetectorService }
+    { type: DeviceDetectorService },
+    { type: DomSanitizer }
 ];
 EntityPickerDataComponent.propDecorators = {
     parentSetting: [{ type: Input }],
@@ -38373,8 +38380,9 @@ EntityPickerDataComponent.propDecorators = {
 };
 
 class EntityPickerSelectedComponent extends DataListBase {
-    constructor(_injector) {
+    constructor(_injector, dom) {
         super(_injector);
+        this.dom = dom;
         this.onContentInit = new EventEmitter();
         this.onUnPick = new EventEmitter();
         this.onUnPickAll = new EventEmitter();
@@ -38561,13 +38569,14 @@ EntityPickerSelectedComponent.decorators = [
     { type: 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 = () => [
-    { type: Injector }
+    { type: Injector },
+    { type: DomSanitizer }
 ];
 EntityPickerSelectedComponent.propDecorators = {
     parentSetting: [{ type: Input }],
@@ -40825,9 +40834,10 @@ EntityPickerSearchFormComponent.propDecorators = {
 };
 
 class EntityPickerTreeDataComponent extends TreeListBase {
-    constructor(_injector, _deviceDetectorService) {
+    constructor(_injector, _deviceDetectorService, dom) {
         super(_injector);
         this._deviceDetectorService = _deviceDetectorService;
+        this.dom = dom;
         this.isSingleSelection = false;
         this.onContentInit = new EventEmitter();
         this.onRowSelect = new EventEmitter();
@@ -40948,14 +40958,15 @@ class EntityPickerTreeDataComponent extends TreeListBase {
 EntityPickerTreeDataComponent.decorators = [
     { type: 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 = () => [
     { type: Injector },
-    { type: DeviceDetectorService }
+    { type: DeviceDetectorService },
+    { type: DomSanitizer }
 ];
 EntityPickerTreeDataComponent.propDecorators = {
     parentSetting: [{ type: Input }],
@@ -40974,8 +40985,9 @@ EntityPickerTreeDataComponent.propDecorators = {
 };
 
 class EntityPickerTreeSelectedComponent extends TreeListBase {
-    constructor(_injector) {
+    constructor(_injector, dom) {
         super(_injector);
+        this.dom = dom;
         this.onContentInit = new EventEmitter();
         this.onUnPick = new EventEmitter();
         this.onUnPickAll = new EventEmitter();
@@ -41119,13 +41131,14 @@ EntityPickerTreeSelectedComponent.decorators = [
     { type: 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 = () => [
-    { type: Injector }
+    { type: Injector },
+    { type: DomSanitizer }
 ];
 EntityPickerTreeSelectedComponent.propDecorators = {
     parentSetting: [{ type: Input }],
@@ -41505,7 +41518,7 @@ class EntityPickerComponent extends DataListBase {
 EntityPickerComponent.decorators = [
     { type: 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: NG_VALUE_ACCESSOR,