tnx-shared 5.2.17 → 5.2.18

package/esm2020/components/crud/crud-list/crud-list.component.mjs

@@ -41,29 +41,29 @@ import * as i4 from "@angular/platform-browser";
 import * as i5 from "@angular/common";
 import * as i6 from "../../../services/environment.service";
 import * as i7 from "../../../services/permission.service";
-import * as i8 from "../../paging-next-back-only/paging-next-back-only.component";
-import * as i9 from "../advance-search/advance-search.component";
-import * as i10 from "../../tn-custom-scrollbar/tn-custom-scrollbar.component";
-import * as i11 from "../../after-view-checked/after-view-checked.component";
-import * as i12 from "../../settings/settings.component";
-import * as i13 from "../../settings/settings-row/settings-row.component";
-import * as i14 from "../../workflow/workflow-setting-dialog/workflow-setting-dialog.component";
-import * as i15 from "tn-custom-primeng/table";
-import * as i16 from "tn-custom-primeng/checkbox";
-import * as i17 from "tn-custom-primeng/tristatecheckbox";
-import * as i18 from "../../dropdown/dropdown.component";
-import * as i19 from "../../number-picker-range/number-picker-range.component";
-import * as i20 from "../../datetime-picker-range/datetime-picker-range.component";
-import * as i21 from "tn-custom-primeng/selectbutton";
-import * as i22 from "tn-custom-primeng/button";
-import * as i23 from "tn-custom-primeng/tooltip";
-import * as i24 from "tn-custom-primeng/api";
-import * as i25 from "@angular/forms";
+import * as i8 from "tn-custom-primeng/api";
+import * as i9 from "tn-custom-primeng/button";
+import * as i10 from "tn-custom-primeng/tooltip";
+import * as i11 from "tn-custom-primeng/table";
+import * as i12 from "@angular/forms";
+import * as i13 from "tn-custom-primeng/checkbox";
+import * as i14 from "tn-custom-primeng/tristatecheckbox";
+import * as i15 from "tn-custom-primeng/inputtext";
+import * as i16 from "tn-custom-primeng/selectbutton";
+import * as i17 from "../../after-view-checked/after-view-checked.component";
+import * as i18 from "../advance-search/advance-search.component";
+import * as i19 from "../../datetime-picker-range/datetime-picker-range.component";
+import * as i20 from "../../dropdown/dropdown.component";
+import * as i21 from "../../number-picker-range/number-picker-range.component";
+import * as i22 from "../../paging-next-back-only/paging-next-back-only.component";
+import * as i23 from "../../settings/settings.component";
+import * as i24 from "../../settings/settings-row/settings-row.component";
+import * as i25 from "../../tn-custom-scrollbar/tn-custom-scrollbar.component";
 import * as i26 from "../../../directives/primeng/tn-table.directive";
-import * as i27 from "tn-custom-primeng/inputtext";
-import * as i28 from "../../../pipes/user-format.pipe";
-import * as i29 from "../../../pipes/users-format.pipe";
-import * as i30 from "../../../pipes/safe-html.pipe";
+import * as i27 from "../../workflow/workflow-setting-dialog/workflow-setting-dialog.component";
+import * as i28 from "../../../pipes/safe-html.pipe";
+import * as i29 from "../../../pipes/user-format.pipe";
+import * as i30 from "../../../pipes/users-format.pipe";
 export class CrudListComponent extends ComponentBase {
     constructor(_injector, _translateService, _commonService, _crudService, _santilizer, _datePipe, _environmentService, _permissionService) {
         super(_injector);
@@ -2603,9 +2603,9 @@ export class CrudListComponent extends ComponentBase {
         }
     }
 }
-CrudListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CrudListComponent, deps: [{ token: i0.Injector }, { token: i1.TranslateService }, { token: i2.CommonService }, { token: i3.CrudService }, { token: i4.DomSanitizer }, { token: i5.DatePipe }, { token: i6.EnvironmentService }, { token: i7.PermissionService }], target: i0.ɵɵFactoryTarget.Component });
-CrudListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: CrudListComponent, selector: "crud-list", inputs: { model: "model", setting: "setting", fileName: "fileName", lazy: "lazy", widthCheckbox: "widthCheckbox", widthOrderColumn: "widthOrderColumn", widthFunctionColumn: "widthFunctionColumn", classRowGroup: "classRowGroup", showScrollBar: "showScrollBar", pTableScrollable: "pTableScrollable", pTableScrollHeight: "pTableScrollHeight", responsive: "responsive", configScrollBar: "configScrollBar", showScrollHorizontal: "showScrollHorizontal", showRadio: "showRadio", hiddenAdd: "hiddenAdd", hiddenDelete: "hiddenDelete", hiddenEdit: "hiddenEdit", hiddenCopyLink: "hiddenCopyLink", hiddenView: "hiddenView", disableKeypressControl: "disableKeypressControl", cancelBubble: "cancelBubble", escape: "escape", selectionMode: "selectionMode", config: "config", enableReorderRow: "enableReorderRow", templates: "templates", templatesFromParent: "templatesFromParent", childrenFromParent: "childrenFromParent", menuButtons: "menuButtons", fieldOrder: "fieldOrder", style: "style", tableClass: "tableClass", dataSource: "dataSource", filter_default: "filter_default" }, outputs: { onRowSelect: "onRowSelect", onReordered: "onReordered", onCheckAll: "onCheckAll", onReload: "onReload", onReloaded: "onReloaded", onReady: "onReady", onContentInit: "onContentInit", onAdd: "onAdd", onEdit: "onEdit", onCopyLink: "onCopyLink", onCopyLinkMultiple: "onCopyLinkMultiple", onView: "onView", onDelete: "onDelete", onDeleteMultiple: "onDeleteMultiple", onInvalidWorkflow: "onInvalidWorkflow", onAfterTrinhKy: "onAfterTrinhKy", onStartedWorkflow: "onStartedWorkflow", onProcessedWorkflow: "onProcessedWorkflow", onRollbackedWorkflow: "onRollbackedWorkflow", onChangedStatusWorkflow: "onChangedStatusWorkflow" }, providers: [DecimalPipe, DatePipe], queries: [{ propertyName: "searchCustom", first: true, predicate: ["searchCustom"], descendants: true, static: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true, static: true }, { propertyName: "headerFilter", first: true, predicate: ["headerFilter"], descendants: true, static: true }, { propertyName: "rowExpansion", first: true, predicate: ["rowExpansion"], descendants: true, static: true }, { propertyName: "summary", first: true, predicate: ["summary"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "colgroup", first: true, predicate: ["colgroup"], descendants: true, static: true }, { propertyName: "rowGroup", first: true, predicate: ["rowGroup"], descendants: true, static: true }, { propertyName: "contentRowGroup", first: true, predicate: ["contentRowGroup"], descendants: true, static: true }, { propertyName: "children", predicate: TemplateRef }], viewQueries: [{ propertyName: "_table", first: true, predicate: Table, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "iconToggleRowGroup", first: true, predicate: ["iconToggleRowGroup"], descendants: true, static: true }, { propertyName: "iconToggleRowData", first: true, predicate: ["iconToggleRowData"], descendants: true, static: true }, { propertyName: "templateTrangThaiV5", first: true, predicate: ["trangThaiV5"], descendants: true, static: true }, { propertyName: "templateColViewHistory", first: true, predicate: ["viewHistory"], descendants: true, static: true }, { propertyName: "templateWorkflowCoreStatus", first: true, predicate: ["workflowCoreStatus"], descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true, static: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\r\n    [ngStyle]=\"_style\">\r\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\r\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\r\n            <div class=\"p-col-12 main-container-search\">\r\n                <div class=\"p-grid main-container-search-inner\">\r\n                    <ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\r\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\r\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\r\n                </h1>\r\n\r\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\r\n                    [ngTemplateOutletContext]=\"{crudList: this}\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"fit-content crud-list-body-area\">\r\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\r\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\r\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\r\n                    <ng-container>\r\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar custom-toolbar\">\r\n                            <ng-container\r\n                                [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                                [ngTemplateOutlet]=\"getTemplate('toolbar')\"></ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar\">\r\n                            <button *ngIf=\"!hiddenAdd\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\r\n                                class=\"p-button-text\" [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"setting.showExportSelectedItems && model.selectedItems.length > 0\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\r\n                                class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon()\"></button>\r\n                            <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n                                type=\"button\" pButton pRipple\r\n                                [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\r\n                                label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\r\n                                [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\r\n                                class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                (click)=\"createShareLinkMultiple()\"></button>\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch\" class=\"p-col-12 advance-search-container\"\r\n                        [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\r\n                        <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\r\n                            [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\r\n                            (onInit)=\"handleInitAdvanceSearch($event)\">\r\n                        </advance-search>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\r\n                </div>\r\n                <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\r\n                    <div class=\"container-table-inner\">\r\n                        <ng-container *ngIf=\"!_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"table-border-line --top\"></div>\r\n                        <div class=\"table-border-line --right\"></div>\r\n                        <div class=\"table-border-line --bottom\"></div>\r\n                        <div class=\"table-border-line --left\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\r\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\r\n    (onCancel)=\"_showSettings = false\">\r\n</settings>\r\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\r\n    (onCancel)=\"_showSettingsRowColor = false\">\r\n</settings-row>\r\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\r\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\r\n<!--<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"-->\r\n<!--    [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">-->\r\n<!--    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"-->\r\n<!--        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>-->\r\n<!--</tn-dialog>-->\r\n<!--<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"-->\r\n<!--    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"-->\r\n<!--    (onCancel)=\"_showSettingsPermission = false\">-->\r\n<!--</entity-permission>-->\r\n<!--<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">-->\r\n<!--</p-contextMenu>-->\r\n<!--<tn-dialog *ngIf=\"processWorkflowModel.showEditForm\" #dialog [header]=\"processWorkflowModel.header | translate\"-->\r\n<!--    [popupSize]=\"processWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"processWorkflowModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%; padding: 1rem\">-->\r\n<!--        <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"-->\r\n<!--            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"-->\r\n<!--            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">-->\r\n<!--        </process-workflow-form>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"-->\r\n<!--    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"choYKienModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"-->\r\n<!--            [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"-->\r\n<!--            (onCancel)=\"choYKienModel.showEditForm = false\">-->\r\n<!--        </cho-y-kien-form>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"-->\r\n<!--    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"workflowHistoryModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"-->\r\n<!--            [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"-->\r\n<!--            [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"-->\r\n<!--            (onCancel)=\"workflowHistoryModel.showEditForm = false\">-->\r\n<!--        </workflow-history-new>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"detailTaskModel.showEditForm\" #dialog [header]=\"detailTaskModel.header | translate\"-->\r\n<!--    [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"detailTaskModel.showEditForm = false\">-->\r\n<!--    <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"-->\r\n<!--        (onCancel)=\"detailTaskModel.showEditForm = false\">-->\r\n<!--    </base-congviec-form>-->\r\n<!--</tn-dialog>-->\r\n\r\n<!--&lt;!&ndash; <tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"-->\r\n<!--    [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">-->\r\n<!--    <base-congviec-form #formBase [parentModel]=\"model\" [parentSetting]=\"setting\" [parentContext]=\"context\"-->\r\n<!--        [model]=\"formModel\" [crudList]=\"crudList\" (onSaved)=\"showDetailForm = false;crudList.reload()\"-->\r\n<!--        (onCancel)=\"_handleCancel($event)\" (onAfterSaved)=\"onAfterSaved($event)\">-->\r\n<!--    </base-congviec-form>-->\r\n<!--</tn-dialog> &ndash;&gt;-->\r\n\r\n<!--<tn-dialog *ngIf=\"permissionSharingModel.showEditForm\" #dialog [header]=\"permissionSharingModel.header | translate\"-->\r\n<!--    [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"permissionSharingModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"-->\r\n<!--            (onCancel)=\"permissionSharingModel.showEditForm = false\">-->\r\n<!--        </permission-sharing>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"permissionListModel.showEditForm\" #dialog [header]=\"permissionListModel.header | translate\"-->\r\n<!--    [popupSize]=\"permissionListModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"-->\r\n<!--    (onHide)=\"permissionListModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"-->\r\n<!--            (onCancel)=\"permissionListModel.showEditForm = false\">-->\r\n<!--        </workflow-permission>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"-->\r\n<!--    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">-->\r\n<!--</workflow-history-dialog>-->\r\n<!--<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"-->\r\n<!--    [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"startWorkflowModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"-->\r\n<!--            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"-->\r\n<!--            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">-->\r\n<!--        </start-workflow>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"-->\r\n<!--    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"-->\r\n<!--    (onHide)=\"congViecModel.showEditForm = false\">-->\r\n<!--    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"-->\r\n<!--        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"-->\r\n<!--        (onCancel)=\"congViecModel.showEditForm = false\">-->\r\n<!--    </base-congviec-form>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"shareLinkModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"-->\r\n<!--    [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"-->\r\n<!--    (onHide)=\"shareLinkModel.showEditForm = false\">-->\r\n<!--    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"-->\r\n<!--        (onCancel)=\"congViecModel.showEditForm = false\">-->\r\n<!--    </share-link-by-permission>-->\r\n<!--</tn-dialog>-->\r\n<ng-template #tableGetGroupFieldFalse>\r\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\r\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\r\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\r\n            <!--            <ng-container *ngIf=\"model.loading\">-->\r\n            <!--                <div *ngFor=\"let col of setting.cols\">-->\r\n            <!--                    <tr>-->\r\n            <!--                        <td>....loading</td>-->\r\n            <!--                    </tr>-->\r\n            <!--                </div>-->\r\n            <!--            </ng-container>-->\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rowExpansion; context: {rowData: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n</ng-template>\r\n<ng-template #tableGetGroupFieldTrue>\r\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\r\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\r\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\r\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\r\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\r\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\r\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\r\n                    </p-checkbox>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </td>\r\n                <ng-container *ngIf=\"!rowGroup\">\r\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\r\n                        <div class=\"container-row-group\">\r\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\r\n                                [class.sticky]=\"setting.stickyColumn\">\r\n                                <i style=\"margin-right:5px\"\r\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n                                <span class=\"content-row-group\">\r\n                                    <ng-container *ngIf=\"!contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </span>\r\n                            </a>\r\n                        </div>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"rowGroup\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\r\n                        [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"title-row\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <th [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\r\n                    class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\" tooltipPosition=\"top\"\r\n                    [disabled]=\"model.loading\" (click)=\"reload()\"></button>\r\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" class=\"stt nopad center\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            {{ 'TT' |translate}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\r\n                [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\r\n                [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\"\r\n                [tnSortableColumnDisabled]=\"!col.sort\">\r\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\r\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\r\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\r\n                </ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\r\n    </tr>\r\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n            [class.tricheckbox-custom-false]=\"checkedAll === false\" [style.width]=\"widthCheckbox\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\r\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\r\n                tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\r\n                <ng-container *ngIf=\"col.allowFilter\">\r\n                    <ng-container *ngIf=\"col.templateFilter\">\r\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\r\n                            [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\r\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\r\n                                [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'datetime'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <ng-container [ngSwitch]=\"col.dataType\">\r\n                                <ng-container *ngSwitchCase=\"'int'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'decimal'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'date'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'datetime'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\r\n                (click)=\"showSettings()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\r\n                [disabled]=\"checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (click)=\"showSettingsPermission()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\r\n                [disabled]=\"checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\r\n                (click)=\"showSettingsWorkflowNew()\"></button>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #colFunctionHeader>\r\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n        <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\"\r\n            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\">\r\n            <div class=\"cell-header-function\">\r\n                <span>{{'GRID.FUNCTION'| translate}}</span>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTh let-col>\r\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\r\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\r\n        {{col.label}}\r\n    </ng-container>\r\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n</ng-template>\r\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\r\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\r\n    <tr [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\"\r\n        [ngClass]=\"mergeClassObj(rowData, { 'ui-state-highlight': rowData._checked })\" [pTooltip]=\"rowData.tooltip\"\r\n        tooltipPosition=\"top\" [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\"\r\n        (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <td [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\r\n                    <ng-container *ngIf=\"!hasTemplate('checkbox')\">\r\n                        <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\r\n                        </p-checkbox>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"hasTemplate('checkbox')\">\r\n                        <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\r\n                            [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\"\r\n            [style.width]=\"widthOrderColumn\" class=\"stt\" style=\"text-align: center;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"getBookmarkColor(rowData, columns)\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion\" class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\r\n        </ng-container>\r\n        <td *ngIf=\"enableReorderRow\" class=\"no-padding center\">\r\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\">\r\n                <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\r\n                        [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\r\n                    <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\r\n                        class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                        tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple [disabled]=\"disableEdit(rowData)\"\r\n                        [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\r\n                        (click)=\"edit(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\r\n                        (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-info p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\r\n    <ng-container *ngFor=\"let col of columns; let i = index\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <span *ngIf=\"col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            {{rowData['pipe__' + col.field]}}\r\n        </span>\r\n        <span *ngIf=\"!col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\r\n                class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                </ng-container>\r\n            </span>\r\n        </span>\r\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container *ngIf=\"col.template\">\r\n        <ng-container [ngTemplateOutlet]=\"col.template\"\r\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                    [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\r\n                {{_crudService.renderDate(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\r\n                tooltipPosition=\"top\">\r\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'boolean'\">\r\n                <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\r\n                    [disabled]=\"col.disableCheckBox\">\r\n                </p-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'html'\">\r\n                <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'metadataStatus'\">\r\n                <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\r\n                    tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\r\n                <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\r\n                    duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\r\n            </span>\r\n            <!-- <ng-container *ngSwitchCase=\"'fileUpload'\">\r\n                <ng-container\r\n                        *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <ng-container\r\n                        *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container> -->\r\n            <ng-container *ngSwitchCase=\"'string'\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"null\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentCellString let-rowData let-field=\"field\">\r\n    <span>\r\n        <!-- __sv: Short Value -->\r\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\r\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\r\n                {{rowData[field + '__sv']}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\r\n                    tooltipPosition=\"top\">[...]</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\r\n                {{rowData[field]}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\r\n            {{rowData[field]}}\r\n        </ng-container>\r\n    </span>\r\n</ng-template>\r\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\r\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n    </a>\r\n</ng-template>\r\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\r\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\r\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\r\n</ng-template>\r\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\r\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\r\n    </ng-container>\r\n    <span> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode\" pButton class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\"\r\n            style=\"border: 1px solid #7ca9cd;\" pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n            [disabled]=\"rowData.__startingWorkflow\" (click)=\"showFormStartWorkflow(rowData)\"></button>\r\n        <ng-container *ngIf=\"rowData.__workflowCode\">\r\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\r\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\r\n                [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #viewHistory let-rowData=\"rowData\">\r\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\r\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #sortIcon let-field=\"field\">\r\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\r\n        [ngClass]=\"{'pi-sort-amount-up-alt': field == _sortField && _sortDir === 1, 'pi-sort-amount-down': field == _sortField && _sortDir === -1, 'pi-sort-alt': field != _sortField || _sortDir === 0}\"></i>\r\n</ng-template>\r\n<ng-template #filterDropdown let-col=\"col\">\r\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\r\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\r\n            [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\r\n            (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\r\n            (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterText let-col=\"col\">\r\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\r\n                [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\r\n                (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\r\n        </div>\r\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\r\n            tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterNumber let-col=\"col\">\r\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\r\n                [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\r\n            </tn-number-picker-range>\r\n        </div>\r\n        <span\r\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\r\n            tabindex=\"-1\">\r\n            <i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterDate let-col=\"col\">\r\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\r\n                (onChanged)=\"onChangeDateTime($event, col.field)\">\r\n            </tn-datetime-picker-range>\r\n        </div>\r\n        <span\r\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\r\n            (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\r\n                class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterBoolean let-col=\"col\">\r\n    <div class=\"filter-boolean-box\">\r\n        <p-selectButton\r\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\r\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\r\n            <ng-template let-item>\r\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\r\n            </ng-template>\r\n        </p-selectButton>\r\n    </div>\r\n</ng-template>\r\n<!-- <ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\r\n    <file-upload *ngIf=\"fileSetting.mode == FileUploadMode.usingFileInstanceId\"\r\n                 [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\r\n                 [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\">\r\n    </file-upload>\r\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\r\n                         [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\"\r\n                         [entity]=\"fileSetting.control.entity\"\r\n                         [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\r\n                         [(ngModel)]=\"rowData.field\">\r\n    </service-file-upload>\r\n</ng-template> -->\r\n<!-- <ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\r\n    <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\r\n                  [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\r\n                  [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\r\n                  [maxFileSize]=\"fileSetting.control.maxFileSize\" [inTaiLieu]=\"fileSetting.control.inTaiLieu\"\r\n                  [(value)]=\"rowData[field]\">\r\n    </file-manager>\r\n</ng-template> -->\r\n", styles: [".container-table{display:flex;overflow:hidden;flex-direction:column}.container-table .container-table-inner{display:flex;position:relative;height:auto;max-height:100%;min-height:60px}.container-table-inner>tn-custom-scrollbar{width:100%}.cell-checkbox{text-align:center}.pick-color-row{top:0;left:0;right:0;bottom:0;margin:auto;position:absolute;display:flex;flex-wrap:wrap;width:1.4em;height:1.4em;border:1px solid #d1d1d1;border-radius:2px;cursor:pointer}.pick-color-row>div{flex:0 0 50%;background:#84d140;border:1px solid #fff}.pick-color-row>div:nth-child(2){background:#fc6868}.pick-color-row>div:nth-child(3){background:#fbc02d}.pick-color-row>div:nth-child(4){background:#7dc5ff}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}.group-icon{font-weight:400;color:#256aa2}.group-icon i{font-size:.8em;margin-right:5px}.center{text-align:center!important}.row-card{position:absolute;left:0;top:0;width:5px;height:100%}.column-function{min-width:100px;padding:0}.custom-search-area{margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em;background-color:#f2f2f2}.main-container-search-inner{margin-bottom:-.5em}.main-title>h1{font-size:1.2em}.filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.container-text-workflow{display:flex;align-items:center;justify-content:center}.container-text-workflow .link-or-action{color:#2196f3;cursor:pointer}.container-text-workflow .content{flex:1 1}.btnReload{height:2rem;width:2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% - 1px))}.toggle-showfull{color:#00f;cursor:pointer;font-size:.8rem;white-space:nowrap;font-weight:700}.col-share-permission>div:not(:last-child){margin-bottom:5px}.advance-search-container{display:flex;justify-content:flex-end}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter .fixed-filter{z-index:10;position:fixed;min-width:200px}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th .container-icon-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep crud-list .check-all-custom{position:absolute;width:0;height:0}::ng-deep crud-list .cell-header-filter{position:relative}::ng-deep crud-list .cell-header-filter .tn-dropdown{height:32px}::ng-deep crud-list .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep crud-list .cell-header-filter .filter-box{display:flex;min-width:0px;background-color:#fff;border-radius:3px}::ng-deep crud-list .cell-header-filter .filter-box>div{flex:1;border:1px solid #ced4da;border-right:none;border-radius:3px 0 0 3px;outline:none;overflow:hidden}::ng-deep crud-list .cell-header-filter .filter-box>span{cursor:pointer;min-width:unset;flex-basis:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:#f5f6f8;color:#6c757d;border:1px solid #ced4da;outline:none}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep crud-list .cell-header-filter .filter-box input{padding-left:5px;padding-right:5px;border:none;box-shadow:none!important}::ng-deep crud-list .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep crud-list .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep crud-list .cell-header-filter:focus-within,::ng-deep crud-list .cell-header-filter.focus-within{z-index:10!important}::ng-deep crud-list .cell-header-filter:focus-within .filter-boolean-box .p-button,::ng-deep crud-list .cell-header-filter.focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep crud-list .cell-header-filter:focus-within .filter-box>div,::ng-deep crud-list .cell-header-filter.focus-within .filter-box>div{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box{position:absolute;top:calc(50% - 16px);min-width:250px;z-index:2;box-shadow:5px 0 15px 1px #00000045}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>div,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>div{flex:1;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>span.action-clear,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter>div,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box,::ng-deep crud-list .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translate(-50%)}::ng-deep crud-list .cell-header-filter:last-child .filter-box{right:3px}::ng-deep crud-list .table-border-line{position:absolute;z-index:5;background-color:#eee}::ng-deep crud-list .table-border-line.--left,::ng-deep crud-list .table-border-line.--right{top:0;bottom:0;width:1px}::ng-deep crud-list .table-border-line.--top,::ng-deep crud-list .table-border-line.--bottom{left:0;right:0;height:1px}::ng-deep crud-list .table-border-line.--left{left:0}::ng-deep crud-list .table-border-line.--right{right:0}::ng-deep crud-list .table-border-line.--top{top:0}::ng-deep crud-list .table-border-line.--bottom{bottom:0}::ng-deep crud-list .filter-boolean-box{text-align:center}::ng-deep crud-list .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep crud-list .custom-search-area crud-form{width:100%}::ng-deep crud-list>p-contextmenu{display:none}@media (max-width: 640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}\n"], components: [{ type: i8.PagingNextBackOnlyComponent, selector: "paging-next-back-only", inputs: ["model", "setting", "ngClass"], outputs: ["onNext", "onPrev", "onLatest", "onRefresh", "onOldest", "onChangeLimitPage", "onChanged"] }, { type: i9.AdvanceSearchComponent, selector: "advance-search", inputs: ["parentSetting", "searchInfo", "allowLoadDataWhenParentNull", "loading"], outputs: ["onSearch", "onFormEvent", "onInit"] }, { type: i10.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { type: i11.AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { type: i12.SettingsComponent, selector: "settings", inputs: ["parentModel", "parentSetting", "entityMetadataService"], outputs: ["onCancel", "onSave"] }, { type: i13.SettingsRowComponent, selector: "settings-row", inputs: ["parentModel", "parentSetting", "entityMetadataService"], outputs: ["onSave", "onCancel"] }, { type: i14.WorkflowSettingDialogComponent, selector: "workflow-setting-dialog", inputs: ["parentModel", "parentSetting"], outputs: ["onSaved", "onCancel"] }, { type: i15.Table, selector: "p-table", inputs: ["pageLinks", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "contextMenuSelectionMode", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "filterDelay", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "virtualScrollDelay", "virtualRowHeight", "columnResizeMode", "loadingIcon", "showLoader", "stateStorage", "editMode", "totalRecords", "value", "columns", "first", "rows", "sortField", "sortOrder", "multiSortMeta", "selection", "contextMenuSelection", "frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "rowsPerPageOptions", "paginatorDropdownAppendTo", "showCurrentPageReport", "showJumpToPageDropdown", "selectionMode", "dataKey", "metaKeySelection", "globalFilterFields", "filterLocale", "scrollable", "scrollHeight", "virtualScroll", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "reorderableColumns", "loading", "rowHover", "customSort", "autoLayout", "exportFunction", "stateKey", "minBufferPx", "maxBufferPx"], outputs: ["selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { type: i16.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { type: i17.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly"], outputs: ["onChange"] }, { type: i18.DropdownComponent, selector: "dropdown", inputs: ["showClear", "disableDisplayFieldServerSearch", "filter", "control", "defaultLabel", "appendTo", "dataSource", "value", "itemSelectedStyleClass"], outputs: ["onChanged", "onCollapse", "onExpand", "onDropdownClick", "onShow", "onShowSmartEvent", "onHide", "onHideSmartEvent", "onFocus", "onBlur", "onReady", "onDataSourceLoaded", "valueChange", "adjustValue"] }, { type: i19.NumberPickerRangeComponent, selector: "tn-number-picker-range", inputs: ["readonly", "maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces"], outputs: ["focus", "enterSmart", "enter", "blur", "change"] }, { type: i20.DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: ["control", "disabled"], outputs: ["onClose", "onChanged"] }, { type: i21.SelectButton, selector: "p-selectButton", inputs: ["tabindex", "disabled", "options", "optionLabel", "optionValue", "optionDisabled", "multiple", "style", "styleClass", "ariaLabelledBy", "dataKey"], outputs: ["onOptionClick", "onChange"] }], directives: [{ type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i22.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { type: i23.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { type: i24.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i25.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i25.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i15.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i26.TnSortableColumnDirective, selector: "[tnSortableColumn]", inputs: ["tnSortableColumn", "tnSortableColumnDisabled"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i26.TnReorderableRowDirective, selector: "[tnReorderableRow]", inputs: ["tnReorderableRow", "tnReorderableRowDisabled"] }, { type: i15.ReorderableRowHandle, selector: "[pReorderableRowHandle]", inputs: ["pReorderableRowHandle"] }, { type: i25.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i27.InputText, selector: "[pInputText]" }], pipes: { "translate": i1.TranslatePipe, "date": i5.DatePipe, "async": i5.AsyncPipe, "userFormat": i28.UserFormatPipe, "usersFormat": i29.UsersFormatPipe, "safeHtml": i30.SafeHtmlPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CrudListComponent, decorators: [{
+CrudListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CrudListComponent, deps: [{ token: i0.Injector }, { token: i1.TranslateService }, { token: i2.CommonService }, { token: i3.CrudService }, { token: i4.DomSanitizer }, { token: i5.DatePipe }, { token: i6.EnvironmentService }, { token: i7.PermissionService }], target: i0.ɵɵFactoryTarget.Component });
+CrudListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: CrudListComponent, selector: "crud-list", inputs: { model: "model", setting: "setting", fileName: "fileName", lazy: "lazy", widthCheckbox: "widthCheckbox", widthOrderColumn: "widthOrderColumn", widthFunctionColumn: "widthFunctionColumn", classRowGroup: "classRowGroup", showScrollBar: "showScrollBar", pTableScrollable: "pTableScrollable", pTableScrollHeight: "pTableScrollHeight", responsive: "responsive", configScrollBar: "configScrollBar", showScrollHorizontal: "showScrollHorizontal", showRadio: "showRadio", hiddenAdd: "hiddenAdd", hiddenDelete: "hiddenDelete", hiddenEdit: "hiddenEdit", hiddenCopyLink: "hiddenCopyLink", hiddenView: "hiddenView", disableKeypressControl: "disableKeypressControl", cancelBubble: "cancelBubble", escape: "escape", selectionMode: "selectionMode", config: "config", enableReorderRow: "enableReorderRow", templates: "templates", templatesFromParent: "templatesFromParent", childrenFromParent: "childrenFromParent", menuButtons: "menuButtons", fieldOrder: "fieldOrder", style: "style", tableClass: "tableClass", dataSource: "dataSource", filter_default: "filter_default" }, outputs: { onRowSelect: "onRowSelect", onReordered: "onReordered", onCheckAll: "onCheckAll", onReload: "onReload", onReloaded: "onReloaded", onReady: "onReady", onContentInit: "onContentInit", onAdd: "onAdd", onEdit: "onEdit", onCopyLink: "onCopyLink", onCopyLinkMultiple: "onCopyLinkMultiple", onView: "onView", onDelete: "onDelete", onDeleteMultiple: "onDeleteMultiple", onInvalidWorkflow: "onInvalidWorkflow", onAfterTrinhKy: "onAfterTrinhKy", onStartedWorkflow: "onStartedWorkflow", onProcessedWorkflow: "onProcessedWorkflow", onRollbackedWorkflow: "onRollbackedWorkflow", onChangedStatusWorkflow: "onChangedStatusWorkflow" }, providers: [DecimalPipe, DatePipe], queries: [{ propertyName: "searchCustom", first: true, predicate: ["searchCustom"], descendants: true, static: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true, static: true }, { propertyName: "headerFilter", first: true, predicate: ["headerFilter"], descendants: true, static: true }, { propertyName: "rowExpansion", first: true, predicate: ["rowExpansion"], descendants: true, static: true }, { propertyName: "summary", first: true, predicate: ["summary"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "colgroup", first: true, predicate: ["colgroup"], descendants: true, static: true }, { propertyName: "rowGroup", first: true, predicate: ["rowGroup"], descendants: true, static: true }, { propertyName: "contentRowGroup", first: true, predicate: ["contentRowGroup"], descendants: true, static: true }, { propertyName: "children", predicate: TemplateRef }], viewQueries: [{ propertyName: "_table", first: true, predicate: Table, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "iconToggleRowGroup", first: true, predicate: ["iconToggleRowGroup"], descendants: true, static: true }, { propertyName: "iconToggleRowData", first: true, predicate: ["iconToggleRowData"], descendants: true, static: true }, { propertyName: "templateTrangThaiV5", first: true, predicate: ["trangThaiV5"], descendants: true, static: true }, { propertyName: "templateColViewHistory", first: true, predicate: ["viewHistory"], descendants: true, static: true }, { propertyName: "templateWorkflowCoreStatus", first: true, predicate: ["workflowCoreStatus"], descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true, static: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\r\n    [ngStyle]=\"_style\">\r\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\r\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\r\n            <div class=\"p-col-12 main-container-search\">\r\n                <div class=\"p-grid main-container-search-inner\">\r\n                    <ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\r\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\r\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\r\n                </h1>\r\n\r\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\r\n                    [ngTemplateOutletContext]=\"{crudList: this}\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"fit-content crud-list-body-area\">\r\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\r\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\r\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\r\n                    <ng-container>\r\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar custom-toolbar\">\r\n                            <ng-container\r\n                                [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                                [ngTemplateOutlet]=\"getTemplate('toolbar')\"></ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar\">\r\n                            <button *ngIf=\"!hiddenAdd\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\r\n                                class=\"p-button-text\" [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"setting.showExportSelectedItems && model.selectedItems.length > 0\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\r\n                                class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon()\"></button>\r\n                            <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n                                type=\"button\" pButton pRipple\r\n                                [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\r\n                                label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\r\n                                [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\r\n                                class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                (click)=\"createShareLinkMultiple()\"></button>\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch\" class=\"p-col-12 advance-search-container\"\r\n                        [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\r\n                        <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\r\n                            [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\r\n                            (onInit)=\"handleInitAdvanceSearch($event)\">\r\n                        </advance-search>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\r\n                </div>\r\n                <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\r\n                    <div class=\"container-table-inner\">\r\n                        <ng-container *ngIf=\"!_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"table-border-line --top\"></div>\r\n                        <div class=\"table-border-line --right\"></div>\r\n                        <div class=\"table-border-line --bottom\"></div>\r\n                        <div class=\"table-border-line --left\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\r\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\r\n    (onCancel)=\"_showSettings = false\">\r\n</settings>\r\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\r\n    (onCancel)=\"_showSettingsRowColor = false\">\r\n</settings-row>\r\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\r\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\r\n<!--<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"-->\r\n<!--    [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">-->\r\n<!--    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"-->\r\n<!--        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>-->\r\n<!--</tn-dialog>-->\r\n<!--<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"-->\r\n<!--    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"-->\r\n<!--    (onCancel)=\"_showSettingsPermission = false\">-->\r\n<!--</entity-permission>-->\r\n<!--<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">-->\r\n<!--</p-contextMenu>-->\r\n<!--<tn-dialog *ngIf=\"processWorkflowModel.showEditForm\" #dialog [header]=\"processWorkflowModel.header | translate\"-->\r\n<!--    [popupSize]=\"processWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"processWorkflowModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%; padding: 1rem\">-->\r\n<!--        <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"-->\r\n<!--            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"-->\r\n<!--            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">-->\r\n<!--        </process-workflow-form>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"-->\r\n<!--    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"choYKienModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"-->\r\n<!--            [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"-->\r\n<!--            (onCancel)=\"choYKienModel.showEditForm = false\">-->\r\n<!--        </cho-y-kien-form>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"-->\r\n<!--    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"workflowHistoryModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"-->\r\n<!--            [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"-->\r\n<!--            [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"-->\r\n<!--            (onCancel)=\"workflowHistoryModel.showEditForm = false\">-->\r\n<!--        </workflow-history-new>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"detailTaskModel.showEditForm\" #dialog [header]=\"detailTaskModel.header | translate\"-->\r\n<!--    [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"detailTaskModel.showEditForm = false\">-->\r\n<!--    <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"-->\r\n<!--        (onCancel)=\"detailTaskModel.showEditForm = false\">-->\r\n<!--    </base-congviec-form>-->\r\n<!--</tn-dialog>-->\r\n\r\n<!--&lt;!&ndash; <tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"-->\r\n<!--    [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">-->\r\n<!--    <base-congviec-form #formBase [parentModel]=\"model\" [parentSetting]=\"setting\" [parentContext]=\"context\"-->\r\n<!--        [model]=\"formModel\" [crudList]=\"crudList\" (onSaved)=\"showDetailForm = false;crudList.reload()\"-->\r\n<!--        (onCancel)=\"_handleCancel($event)\" (onAfterSaved)=\"onAfterSaved($event)\">-->\r\n<!--    </base-congviec-form>-->\r\n<!--</tn-dialog> &ndash;&gt;-->\r\n\r\n<!--<tn-dialog *ngIf=\"permissionSharingModel.showEditForm\" #dialog [header]=\"permissionSharingModel.header | translate\"-->\r\n<!--    [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"permissionSharingModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"-->\r\n<!--            (onCancel)=\"permissionSharingModel.showEditForm = false\">-->\r\n<!--        </permission-sharing>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"permissionListModel.showEditForm\" #dialog [header]=\"permissionListModel.header | translate\"-->\r\n<!--    [popupSize]=\"permissionListModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"-->\r\n<!--    (onHide)=\"permissionListModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"-->\r\n<!--            (onCancel)=\"permissionListModel.showEditForm = false\">-->\r\n<!--        </workflow-permission>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"-->\r\n<!--    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">-->\r\n<!--</workflow-history-dialog>-->\r\n<!--<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"-->\r\n<!--    [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"startWorkflowModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"-->\r\n<!--            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"-->\r\n<!--            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">-->\r\n<!--        </start-workflow>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"-->\r\n<!--    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"-->\r\n<!--    (onHide)=\"congViecModel.showEditForm = false\">-->\r\n<!--    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"-->\r\n<!--        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"-->\r\n<!--        (onCancel)=\"congViecModel.showEditForm = false\">-->\r\n<!--    </base-congviec-form>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"shareLinkModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"-->\r\n<!--    [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"-->\r\n<!--    (onHide)=\"shareLinkModel.showEditForm = false\">-->\r\n<!--    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"-->\r\n<!--        (onCancel)=\"congViecModel.showEditForm = false\">-->\r\n<!--    </share-link-by-permission>-->\r\n<!--</tn-dialog>-->\r\n<ng-template #tableGetGroupFieldFalse>\r\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\r\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\r\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\r\n            <!--            <ng-container *ngIf=\"model.loading\">-->\r\n            <!--                <div *ngFor=\"let col of setting.cols\">-->\r\n            <!--                    <tr>-->\r\n            <!--                        <td>....loading</td>-->\r\n            <!--                    </tr>-->\r\n            <!--                </div>-->\r\n            <!--            </ng-container>-->\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rowExpansion; context: {rowData: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n</ng-template>\r\n<ng-template #tableGetGroupFieldTrue>\r\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\r\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\r\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\r\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\r\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\r\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\r\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\r\n                    </p-checkbox>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </td>\r\n                <ng-container *ngIf=\"!rowGroup\">\r\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\r\n                        <div class=\"container-row-group\">\r\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\r\n                                [class.sticky]=\"setting.stickyColumn\">\r\n                                <i style=\"margin-right:5px\"\r\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n                                <span class=\"content-row-group\">\r\n                                    <ng-container *ngIf=\"!contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </span>\r\n                            </a>\r\n                        </div>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"rowGroup\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\r\n                        [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"title-row\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <th [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\r\n                    class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\" tooltipPosition=\"top\"\r\n                    [disabled]=\"model.loading\" (click)=\"reload()\"></button>\r\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" class=\"stt nopad center\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            {{ 'TT' |translate}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\r\n                [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\r\n                [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\"\r\n                [tnSortableColumnDisabled]=\"!col.sort\">\r\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\r\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\r\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\r\n                </ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\r\n    </tr>\r\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n            [class.tricheckbox-custom-false]=\"checkedAll === false\" [style.width]=\"widthCheckbox\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\r\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\r\n                tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\r\n                <ng-container *ngIf=\"col.allowFilter\">\r\n                    <ng-container *ngIf=\"col.templateFilter\">\r\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\r\n                            [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\r\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\r\n                                [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'datetime'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <ng-container [ngSwitch]=\"col.dataType\">\r\n                                <ng-container *ngSwitchCase=\"'int'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'decimal'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'date'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'datetime'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\r\n                (click)=\"showSettings()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\r\n                [disabled]=\"checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (click)=\"showSettingsPermission()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\r\n                [disabled]=\"checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\r\n                (click)=\"showSettingsWorkflowNew()\"></button>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #colFunctionHeader>\r\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n        <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\"\r\n            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\">\r\n            <div class=\"cell-header-function\">\r\n                <span>{{'GRID.FUNCTION'| translate}}</span>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTh let-col>\r\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\r\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\r\n        {{col.label}}\r\n    </ng-container>\r\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n</ng-template>\r\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\r\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\r\n    <tr [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\"\r\n        [ngClass]=\"mergeClassObj(rowData, { 'ui-state-highlight': rowData._checked })\" [pTooltip]=\"rowData.tooltip\"\r\n        tooltipPosition=\"top\" [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\"\r\n        (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <td [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\r\n                    <ng-container *ngIf=\"!hasTemplate('checkbox')\">\r\n                        <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\r\n                        </p-checkbox>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"hasTemplate('checkbox')\">\r\n                        <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\r\n                            [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\"\r\n            [style.width]=\"widthOrderColumn\" class=\"stt\" style=\"text-align: center;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"getBookmarkColor(rowData, columns)\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion\" class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\r\n        </ng-container>\r\n        <td *ngIf=\"enableReorderRow\" class=\"no-padding center\">\r\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\">\r\n                <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\r\n                        [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\r\n                    <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\r\n                        class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                        tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple [disabled]=\"disableEdit(rowData)\"\r\n                        [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\r\n                        (click)=\"edit(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\r\n                        (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-info p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\r\n    <ng-container *ngFor=\"let col of columns; let i = index\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <span *ngIf=\"col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            {{rowData['pipe__' + col.field]}}\r\n        </span>\r\n        <span *ngIf=\"!col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\r\n                class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                </ng-container>\r\n            </span>\r\n        </span>\r\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container *ngIf=\"col.template\">\r\n        <ng-container [ngTemplateOutlet]=\"col.template\"\r\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                    [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\r\n                {{_crudService.renderDate(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\r\n                tooltipPosition=\"top\">\r\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'boolean'\">\r\n                <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\r\n                    [disabled]=\"col.disableCheckBox\">\r\n                </p-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'html'\">\r\n                <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'metadataStatus'\">\r\n                <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\r\n                    tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\r\n                <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\r\n                    duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\r\n            </span>\r\n            <!-- <ng-container *ngSwitchCase=\"'fileUpload'\">\r\n                <ng-container\r\n                        *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <ng-container\r\n                        *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container> -->\r\n            <ng-container *ngSwitchCase=\"'string'\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"null\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentCellString let-rowData let-field=\"field\">\r\n    <span>\r\n        <!-- __sv: Short Value -->\r\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\r\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\r\n                {{rowData[field + '__sv']}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\r\n                    tooltipPosition=\"top\">[...]</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\r\n                {{rowData[field]}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\r\n            {{rowData[field]}}\r\n        </ng-container>\r\n    </span>\r\n</ng-template>\r\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\r\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n    </a>\r\n</ng-template>\r\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\r\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\r\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\r\n</ng-template>\r\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\r\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\r\n    </ng-container>\r\n    <span> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode\" pButton class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\"\r\n            style=\"border: 1px solid #7ca9cd;\" pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n            [disabled]=\"rowData.__startingWorkflow\" (click)=\"showFormStartWorkflow(rowData)\"></button>\r\n        <ng-container *ngIf=\"rowData.__workflowCode\">\r\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\r\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\r\n                [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #viewHistory let-rowData=\"rowData\">\r\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\r\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #sortIcon let-field=\"field\">\r\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\r\n        [ngClass]=\"{'pi-sort-amount-up-alt': field == _sortField && _sortDir === 1, 'pi-sort-amount-down': field == _sortField && _sortDir === -1, 'pi-sort-alt': field != _sortField || _sortDir === 0}\"></i>\r\n</ng-template>\r\n<ng-template #filterDropdown let-col=\"col\">\r\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\r\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\r\n            [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\r\n            (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\r\n            (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterText let-col=\"col\">\r\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\r\n                [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\r\n                (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\r\n        </div>\r\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\r\n            tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterNumber let-col=\"col\">\r\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\r\n                [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\r\n            </tn-number-picker-range>\r\n        </div>\r\n        <span\r\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\r\n            tabindex=\"-1\">\r\n            <i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterDate let-col=\"col\">\r\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\r\n                (onChanged)=\"onChangeDateTime($event, col.field)\">\r\n            </tn-datetime-picker-range>\r\n        </div>\r\n        <span\r\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\r\n            (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\r\n                class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterBoolean let-col=\"col\">\r\n    <div class=\"filter-boolean-box\">\r\n        <p-selectButton\r\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\r\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\r\n            <ng-template let-item>\r\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\r\n            </ng-template>\r\n        </p-selectButton>\r\n    </div>\r\n</ng-template>\r\n<!-- <ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\r\n    <file-upload *ngIf=\"fileSetting.mode == FileUploadMode.usingFileInstanceId\"\r\n                 [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\r\n                 [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\">\r\n    </file-upload>\r\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\r\n                         [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\"\r\n                         [entity]=\"fileSetting.control.entity\"\r\n                         [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\r\n                         [(ngModel)]=\"rowData.field\">\r\n    </service-file-upload>\r\n</ng-template> -->\r\n<!-- <ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\r\n    <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\r\n                  [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\r\n                  [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\r\n                  [maxFileSize]=\"fileSetting.control.maxFileSize\" [inTaiLieu]=\"fileSetting.control.inTaiLieu\"\r\n                  [(value)]=\"rowData[field]\">\r\n    </file-manager>\r\n</ng-template> -->\r\n", styles: [".container-table{display:flex;overflow:hidden;flex-direction:column}.container-table .container-table-inner{display:flex;position:relative;height:auto;max-height:100%;min-height:60px}.container-table-inner>tn-custom-scrollbar{width:100%}.cell-checkbox{text-align:center}.pick-color-row{top:0;left:0;right:0;bottom:0;margin:auto;position:absolute;display:flex;flex-wrap:wrap;width:1.4em;height:1.4em;border:1px solid #d1d1d1;border-radius:2px;cursor:pointer}.pick-color-row>div{flex:0 0 50%;background:#84d140;border:1px solid #fff}.pick-color-row>div:nth-child(2){background:#fc6868}.pick-color-row>div:nth-child(3){background:#fbc02d}.pick-color-row>div:nth-child(4){background:#7dc5ff}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}.group-icon{font-weight:400;color:#256aa2}.group-icon i{font-size:.8em;margin-right:5px}.center{text-align:center!important}.row-card{position:absolute;left:0;top:0;width:5px;height:100%}.column-function{min-width:100px;padding:0}.custom-search-area{margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em;background-color:#f2f2f2}.main-container-search-inner{margin-bottom:-.5em}.main-title>h1{font-size:1.2em}.filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.container-text-workflow{display:flex;align-items:center;justify-content:center}.container-text-workflow .link-or-action{color:#2196f3;cursor:pointer}.container-text-workflow .content{flex:1 1}.btnReload{height:2rem;width:2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% - 1px))}.toggle-showfull{color:#00f;cursor:pointer;font-size:.8rem;white-space:nowrap;font-weight:700}.col-share-permission>div:not(:last-child){margin-bottom:5px}.advance-search-container{display:flex;justify-content:flex-end}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter .fixed-filter{z-index:10;position:fixed;min-width:200px}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th .container-icon-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep crud-list .check-all-custom{position:absolute;width:0;height:0}::ng-deep crud-list .cell-header-filter{position:relative}::ng-deep crud-list .cell-header-filter .tn-dropdown{height:32px}::ng-deep crud-list .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep crud-list .cell-header-filter .filter-box{display:flex;min-width:0px;background-color:#fff;border-radius:3px}::ng-deep crud-list .cell-header-filter .filter-box>div{flex:1;border:1px solid #ced4da;border-right:none;border-radius:3px 0 0 3px;outline:none;overflow:hidden}::ng-deep crud-list .cell-header-filter .filter-box>span{cursor:pointer;min-width:unset;flex-basis:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:#f5f6f8;color:#6c757d;border:1px solid #ced4da;outline:none}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep crud-list .cell-header-filter .filter-box input{padding-left:5px;padding-right:5px;border:none;box-shadow:none!important}::ng-deep crud-list .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep crud-list .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep crud-list .cell-header-filter:focus-within,::ng-deep crud-list .cell-header-filter.focus-within{z-index:10!important}::ng-deep crud-list .cell-header-filter:focus-within .filter-boolean-box .p-button,::ng-deep crud-list .cell-header-filter.focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep crud-list .cell-header-filter:focus-within .filter-box>div,::ng-deep crud-list .cell-header-filter.focus-within .filter-box>div{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box{position:absolute;top:calc(50% - 16px);min-width:250px;z-index:2;box-shadow:5px 0 15px 1px #00000045}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>div,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>div{flex:1;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>span.action-clear,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter>div,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box,::ng-deep crud-list .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translate(-50%)}::ng-deep crud-list .cell-header-filter:last-child .filter-box{right:3px}::ng-deep crud-list .table-border-line{position:absolute;z-index:5;background-color:#eee}::ng-deep crud-list .table-border-line.--left,::ng-deep crud-list .table-border-line.--right{top:0;bottom:0;width:1px}::ng-deep crud-list .table-border-line.--top,::ng-deep crud-list .table-border-line.--bottom{left:0;right:0;height:1px}::ng-deep crud-list .table-border-line.--left{left:0}::ng-deep crud-list .table-border-line.--right{right:0}::ng-deep crud-list .table-border-line.--top{top:0}::ng-deep crud-list .table-border-line.--bottom{bottom:0}::ng-deep crud-list .filter-boolean-box{text-align:center}::ng-deep crud-list .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep crud-list .custom-search-area crud-form{width:100%}::ng-deep crud-list>p-contextmenu{display:none}@media (max-width: 640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}\n"], dependencies: [{ kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i9.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i11.Table, selector: "p-table", inputs: ["pageLinks", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "contextMenuSelectionMode", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "filterDelay", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "virtualScrollDelay", "virtualRowHeight", "columnResizeMode", "loadingIcon", "showLoader", "stateStorage", "editMode", "totalRecords", "value", "columns", "first", "rows", "sortField", "sortOrder", "multiSortMeta", "selection", "contextMenuSelection", "frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "rowsPerPageOptions", "paginatorDropdownAppendTo", "showCurrentPageReport", "showJumpToPageDropdown", "selectionMode", "dataKey", "metaKeySelection", "globalFilterFields", "filterLocale", "scrollable", "scrollHeight", "virtualScroll", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "reorderableColumns", "loading", "rowHover", "customSort", "autoLayout", "exportFunction", "stateKey", "minBufferPx", "maxBufferPx"], outputs: ["selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i11.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i11.ReorderableRowHandle, selector: "[pReorderableRowHandle]", inputs: ["pReorderableRowHandle"] }, { kind: "directive", type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i13.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { kind: "component", type: i14.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly"], outputs: ["onChange"] }, { kind: "directive", type: i15.InputText, selector: "[pInputText]" }, { kind: "component", type: i16.SelectButton, selector: "p-selectButton", inputs: ["tabindex", "disabled", "options", "optionLabel", "optionValue", "optionDisabled", "multiple", "style", "styleClass", "ariaLabelledBy", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i17.AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { kind: "component", type: i18.AdvanceSearchComponent, selector: "advance-search", inputs: ["parentSetting", "searchInfo", "allowLoadDataWhenParentNull", "loading"], outputs: ["onSearch", "onFormEvent", "onInit"] }, { kind: "component", type: i19.DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: ["control", "disabled"], outputs: ["onClose", "onChanged"] }, { kind: "component", type: i20.DropdownComponent, selector: "dropdown", inputs: ["showClear", "disableDisplayFieldServerSearch", "filter", "control", "defaultLabel", "appendTo", "dataSource", "value", "itemSelectedStyleClass"], outputs: ["onChanged", "onCollapse", "onExpand", "onDropdownClick", "onShow", "onShowSmartEvent", "onHide", "onHideSmartEvent", "onFocus", "onBlur", "onReady", "onDataSourceLoaded", "valueChange", "adjustValue"] }, { kind: "component", type: i21.NumberPickerRangeComponent, selector: "tn-number-picker-range", inputs: ["readonly", "maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces"], outputs: ["focus", "enterSmart", "enter", "blur", "change"] }, { kind: "component", type: i22.PagingNextBackOnlyComponent, selector: "paging-next-back-only", inputs: ["model", "setting", "ngClass"], outputs: ["onNext", "onPrev", "onLatest", "onRefresh", "onOldest", "onChangeLimitPage", "onChanged"] }, { kind: "component", type: i23.SettingsComponent, selector: "settings", inputs: ["parentModel", "parentSetting", "entityMetadataService"], outputs: ["onCancel", "onSave"] }, { kind: "component", type: i24.SettingsRowComponent, selector: "settings-row", inputs: ["parentModel", "parentSetting", "entityMetadataService"], outputs: ["onSave", "onCancel"] }, { kind: "component", type: i25.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "directive", type: i26.TnReorderableRowDirective, selector: "[tnReorderableRow]", inputs: ["tnReorderableRow", "tnReorderableRowDisabled"] }, { kind: "directive", type: i26.TnSortableColumnDirective, selector: "[tnSortableColumn]", inputs: ["tnSortableColumn", "tnSortableColumnDisabled"] }, { kind: "component", type: i27.WorkflowSettingDialogComponent, selector: "workflow-setting-dialog", inputs: ["parentModel", "parentSetting"], outputs: ["onSaved", "onCancel"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i28.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i29.UserFormatPipe, name: "userFormat" }, { kind: "pipe", type: i30.UsersFormatPipe, name: "usersFormat" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CrudListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'crud-list', providers: [DecimalPipe, DatePipe], template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\r\n    [ngStyle]=\"_style\">\r\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\r\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\r\n            <div class=\"p-col-12 main-container-search\">\r\n                <div class=\"p-grid main-container-search-inner\">\r\n                    <ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\r\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\r\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\r\n                </h1>\r\n\r\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\r\n                    [ngTemplateOutletContext]=\"{crudList: this}\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"fit-content crud-list-body-area\">\r\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\r\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\r\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\r\n                    <ng-container>\r\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar custom-toolbar\">\r\n                            <ng-container\r\n                                [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                                [ngTemplateOutlet]=\"getTemplate('toolbar')\"></ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar\">\r\n                            <button *ngIf=\"!hiddenAdd\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\r\n                                class=\"p-button-text\" [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"setting.showExportSelectedItems && model.selectedItems.length > 0\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\r\n                                class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon()\"></button>\r\n                            <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n                                type=\"button\" pButton pRipple\r\n                                [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\r\n                                label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\r\n                                [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\r\n                                class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                (click)=\"createShareLinkMultiple()\"></button>\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch\" class=\"p-col-12 advance-search-container\"\r\n                        [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\r\n                        <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\r\n                            [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\r\n                            (onInit)=\"handleInitAdvanceSearch($event)\">\r\n                        </advance-search>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\r\n                </div>\r\n                <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\r\n                    <div class=\"container-table-inner\">\r\n                        <ng-container *ngIf=\"!_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"table-border-line --top\"></div>\r\n                        <div class=\"table-border-line --right\"></div>\r\n                        <div class=\"table-border-line --bottom\"></div>\r\n                        <div class=\"table-border-line --left\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\r\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\r\n    (onCancel)=\"_showSettings = false\">\r\n</settings>\r\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\r\n    (onCancel)=\"_showSettingsRowColor = false\">\r\n</settings-row>\r\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\r\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\r\n<!--<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"-->\r\n<!--    [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">-->\r\n<!--    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"-->\r\n<!--        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>-->\r\n<!--</tn-dialog>-->\r\n<!--<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"-->\r\n<!--    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"-->\r\n<!--    (onCancel)=\"_showSettingsPermission = false\">-->\r\n<!--</entity-permission>-->\r\n<!--<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">-->\r\n<!--</p-contextMenu>-->\r\n<!--<tn-dialog *ngIf=\"processWorkflowModel.showEditForm\" #dialog [header]=\"processWorkflowModel.header | translate\"-->\r\n<!--    [popupSize]=\"processWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"processWorkflowModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%; padding: 1rem\">-->\r\n<!--        <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"-->\r\n<!--            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"-->\r\n<!--            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">-->\r\n<!--        </process-workflow-form>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"-->\r\n<!--    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"choYKienModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"-->\r\n<!--            [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"-->\r\n<!--            (onCancel)=\"choYKienModel.showEditForm = false\">-->\r\n<!--        </cho-y-kien-form>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"-->\r\n<!--    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"workflowHistoryModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"-->\r\n<!--            [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"-->\r\n<!--            [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"-->\r\n<!--            (onCancel)=\"workflowHistoryModel.showEditForm = false\">-->\r\n<!--        </workflow-history-new>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"detailTaskModel.showEditForm\" #dialog [header]=\"detailTaskModel.header | translate\"-->\r\n<!--    [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"detailTaskModel.showEditForm = false\">-->\r\n<!--    <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"-->\r\n<!--        (onCancel)=\"detailTaskModel.showEditForm = false\">-->\r\n<!--    </base-congviec-form>-->\r\n<!--</tn-dialog>-->\r\n\r\n<!--&lt;!&ndash; <tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"-->\r\n<!--    [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">-->\r\n<!--    <base-congviec-form #formBase [parentModel]=\"model\" [parentSetting]=\"setting\" [parentContext]=\"context\"-->\r\n<!--        [model]=\"formModel\" [crudList]=\"crudList\" (onSaved)=\"showDetailForm = false;crudList.reload()\"-->\r\n<!--        (onCancel)=\"_handleCancel($event)\" (onAfterSaved)=\"onAfterSaved($event)\">-->\r\n<!--    </base-congviec-form>-->\r\n<!--</tn-dialog> &ndash;&gt;-->\r\n\r\n<!--<tn-dialog *ngIf=\"permissionSharingModel.showEditForm\" #dialog [header]=\"permissionSharingModel.header | translate\"-->\r\n<!--    [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"permissionSharingModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"-->\r\n<!--            (onCancel)=\"permissionSharingModel.showEditForm = false\">-->\r\n<!--        </permission-sharing>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"permissionListModel.showEditForm\" #dialog [header]=\"permissionListModel.header | translate\"-->\r\n<!--    [popupSize]=\"permissionListModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"-->\r\n<!--    (onHide)=\"permissionListModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"-->\r\n<!--            (onCancel)=\"permissionListModel.showEditForm = false\">-->\r\n<!--        </workflow-permission>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"-->\r\n<!--    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">-->\r\n<!--</workflow-history-dialog>-->\r\n<!--<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"-->\r\n<!--    [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"-->\r\n<!--    (onHide)=\"startWorkflowModel.showEditForm = false\">-->\r\n<!--    <div style=\"height: 100%\">-->\r\n<!--        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"-->\r\n<!--            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"-->\r\n<!--            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">-->\r\n<!--        </start-workflow>-->\r\n<!--    </div>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"-->\r\n<!--    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"-->\r\n<!--    (onHide)=\"congViecModel.showEditForm = false\">-->\r\n<!--    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"-->\r\n<!--        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"-->\r\n<!--        (onCancel)=\"congViecModel.showEditForm = false\">-->\r\n<!--    </base-congviec-form>-->\r\n<!--</tn-dialog>-->\r\n<!--<tn-dialog *ngIf=\"shareLinkModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"-->\r\n<!--    [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"-->\r\n<!--    (onHide)=\"shareLinkModel.showEditForm = false\">-->\r\n<!--    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"-->\r\n<!--        (onCancel)=\"congViecModel.showEditForm = false\">-->\r\n<!--    </share-link-by-permission>-->\r\n<!--</tn-dialog>-->\r\n<ng-template #tableGetGroupFieldFalse>\r\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\r\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\r\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\r\n            <!--            <ng-container *ngIf=\"model.loading\">-->\r\n            <!--                <div *ngFor=\"let col of setting.cols\">-->\r\n            <!--                    <tr>-->\r\n            <!--                        <td>....loading</td>-->\r\n            <!--                    </tr>-->\r\n            <!--                </div>-->\r\n            <!--            </ng-container>-->\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rowExpansion; context: {rowData: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n</ng-template>\r\n<ng-template #tableGetGroupFieldTrue>\r\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\r\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\r\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\r\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\r\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\r\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\r\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\r\n                    </p-checkbox>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </td>\r\n                <ng-container *ngIf=\"!rowGroup\">\r\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\r\n                        <div class=\"container-row-group\">\r\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\r\n                                [class.sticky]=\"setting.stickyColumn\">\r\n                                <i style=\"margin-right:5px\"\r\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n                                <span class=\"content-row-group\">\r\n                                    <ng-container *ngIf=\"!contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </span>\r\n                            </a>\r\n                        </div>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"rowGroup\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\r\n                        [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"title-row\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <th [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\r\n                    class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\" tooltipPosition=\"top\"\r\n                    [disabled]=\"model.loading\" (click)=\"reload()\"></button>\r\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" class=\"stt nopad center\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            {{ 'TT' |translate}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\r\n                [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\r\n                [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\"\r\n                [tnSortableColumnDisabled]=\"!col.sort\">\r\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\r\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\r\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\r\n                </ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\r\n    </tr>\r\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n            [class.tricheckbox-custom-false]=\"checkedAll === false\" [style.width]=\"widthCheckbox\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\r\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\r\n                tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\r\n                <ng-container *ngIf=\"col.allowFilter\">\r\n                    <ng-container *ngIf=\"col.templateFilter\">\r\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\r\n                            [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\r\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\r\n                                [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'datetime'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <ng-container [ngSwitch]=\"col.dataType\">\r\n                                <ng-container *ngSwitchCase=\"'int'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'decimal'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'date'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'datetime'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\r\n                (click)=\"showSettings()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\r\n                [disabled]=\"checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (click)=\"showSettingsPermission()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\r\n                [disabled]=\"checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\r\n                (click)=\"showSettingsWorkflowNew()\"></button>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #colFunctionHeader>\r\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n        <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\"\r\n            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\">\r\n            <div class=\"cell-header-function\">\r\n                <span>{{'GRID.FUNCTION'| translate}}</span>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTh let-col>\r\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\r\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\r\n        {{col.label}}\r\n    </ng-container>\r\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n</ng-template>\r\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\r\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\r\n    <tr [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\"\r\n        [ngClass]=\"mergeClassObj(rowData, { 'ui-state-highlight': rowData._checked })\" [pTooltip]=\"rowData.tooltip\"\r\n        tooltipPosition=\"top\" [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\"\r\n        (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <td [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\r\n                    <ng-container *ngIf=\"!hasTemplate('checkbox')\">\r\n                        <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\r\n                        </p-checkbox>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"hasTemplate('checkbox')\">\r\n                        <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\r\n                            [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\"\r\n            [style.width]=\"widthOrderColumn\" class=\"stt\" style=\"text-align: center;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"getBookmarkColor(rowData, columns)\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion\" class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\r\n        </ng-container>\r\n        <td *ngIf=\"enableReorderRow\" class=\"no-padding center\">\r\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\">\r\n                <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\r\n                        [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\r\n                    <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\r\n                        class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                        tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple [disabled]=\"disableEdit(rowData)\"\r\n                        [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\r\n                        (click)=\"edit(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\r\n                        (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-info p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\r\n    <ng-container *ngFor=\"let col of columns; let i = index\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <span *ngIf=\"col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            {{rowData['pipe__' + col.field]}}\r\n        </span>\r\n        <span *ngIf=\"!col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\r\n                class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                </ng-container>\r\n            </span>\r\n        </span>\r\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container *ngIf=\"col.template\">\r\n        <ng-container [ngTemplateOutlet]=\"col.template\"\r\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                    [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\r\n                {{_crudService.renderDate(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\r\n                tooltipPosition=\"top\">\r\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'boolean'\">\r\n                <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\r\n                    [disabled]=\"col.disableCheckBox\">\r\n                </p-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'html'\">\r\n                <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'metadataStatus'\">\r\n                <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\r\n                    tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\r\n                <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\r\n                    duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\r\n            </span>\r\n            <!-- <ng-container *ngSwitchCase=\"'fileUpload'\">\r\n                <ng-container\r\n                        *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <ng-container\r\n                        *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container> -->\r\n            <ng-container *ngSwitchCase=\"'string'\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"null\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentCellString let-rowData let-field=\"field\">\r\n    <span>\r\n        <!-- __sv: Short Value -->\r\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\r\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\r\n                {{rowData[field + '__sv']}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\r\n                    tooltipPosition=\"top\">[...]</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\r\n                {{rowData[field]}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\r\n            {{rowData[field]}}\r\n        </ng-container>\r\n    </span>\r\n</ng-template>\r\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\r\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n    </a>\r\n</ng-template>\r\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\r\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\r\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\r\n</ng-template>\r\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\r\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\r\n    </ng-container>\r\n    <span> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode\" pButton class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\"\r\n            style=\"border: 1px solid #7ca9cd;\" pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n            [disabled]=\"rowData.__startingWorkflow\" (click)=\"showFormStartWorkflow(rowData)\"></button>\r\n        <ng-container *ngIf=\"rowData.__workflowCode\">\r\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\r\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\r\n                [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #viewHistory let-rowData=\"rowData\">\r\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\r\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #sortIcon let-field=\"field\">\r\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\r\n        [ngClass]=\"{'pi-sort-amount-up-alt': field == _sortField && _sortDir === 1, 'pi-sort-amount-down': field == _sortField && _sortDir === -1, 'pi-sort-alt': field != _sortField || _sortDir === 0}\"></i>\r\n</ng-template>\r\n<ng-template #filterDropdown let-col=\"col\">\r\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\r\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\r\n            [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\r\n            (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\r\n            (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterText let-col=\"col\">\r\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\r\n                [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\r\n                (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\r\n        </div>\r\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\r\n            tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterNumber let-col=\"col\">\r\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\r\n                [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\r\n            </tn-number-picker-range>\r\n        </div>\r\n        <span\r\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\r\n            tabindex=\"-1\">\r\n            <i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterDate let-col=\"col\">\r\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\r\n                (onChanged)=\"onChangeDateTime($event, col.field)\">\r\n            </tn-datetime-picker-range>\r\n        </div>\r\n        <span\r\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\r\n            (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\r\n                class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterBoolean let-col=\"col\">\r\n    <div class=\"filter-boolean-box\">\r\n        <p-selectButton\r\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\r\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\r\n            <ng-template let-item>\r\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\r\n            </ng-template>\r\n        </p-selectButton>\r\n    </div>\r\n</ng-template>\r\n<!-- <ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\r\n    <file-upload *ngIf=\"fileSetting.mode == FileUploadMode.usingFileInstanceId\"\r\n                 [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\r\n                 [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\">\r\n    </file-upload>\r\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\r\n                         [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\"\r\n                         [entity]=\"fileSetting.control.entity\"\r\n                         [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\r\n                         [(ngModel)]=\"rowData.field\">\r\n    </service-file-upload>\r\n</ng-template> -->\r\n<!-- <ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\r\n    <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\r\n                  [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\r\n                  [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\r\n                  [maxFileSize]=\"fileSetting.control.maxFileSize\" [inTaiLieu]=\"fileSetting.control.inTaiLieu\"\r\n                  [(value)]=\"rowData[field]\">\r\n    </file-manager>\r\n</ng-template> -->\r\n", styles: [".container-table{display:flex;overflow:hidden;flex-direction:column}.container-table .container-table-inner{display:flex;position:relative;height:auto;max-height:100%;min-height:60px}.container-table-inner>tn-custom-scrollbar{width:100%}.cell-checkbox{text-align:center}.pick-color-row{top:0;left:0;right:0;bottom:0;margin:auto;position:absolute;display:flex;flex-wrap:wrap;width:1.4em;height:1.4em;border:1px solid #d1d1d1;border-radius:2px;cursor:pointer}.pick-color-row>div{flex:0 0 50%;background:#84d140;border:1px solid #fff}.pick-color-row>div:nth-child(2){background:#fc6868}.pick-color-row>div:nth-child(3){background:#fbc02d}.pick-color-row>div:nth-child(4){background:#7dc5ff}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}.group-icon{font-weight:400;color:#256aa2}.group-icon i{font-size:.8em;margin-right:5px}.center{text-align:center!important}.row-card{position:absolute;left:0;top:0;width:5px;height:100%}.column-function{min-width:100px;padding:0}.custom-search-area{margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em;background-color:#f2f2f2}.main-container-search-inner{margin-bottom:-.5em}.main-title>h1{font-size:1.2em}.filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.container-text-workflow{display:flex;align-items:center;justify-content:center}.container-text-workflow .link-or-action{color:#2196f3;cursor:pointer}.container-text-workflow .content{flex:1 1}.btnReload{height:2rem;width:2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% - 1px))}.toggle-showfull{color:#00f;cursor:pointer;font-size:.8rem;white-space:nowrap;font-weight:700}.col-share-permission>div:not(:last-child){margin-bottom:5px}.advance-search-container{display:flex;justify-content:flex-end}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter .fixed-filter{z-index:10;position:fixed;min-width:200px}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th .container-icon-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep crud-list .check-all-custom{position:absolute;width:0;height:0}::ng-deep crud-list .cell-header-filter{position:relative}::ng-deep crud-list .cell-header-filter .tn-dropdown{height:32px}::ng-deep crud-list .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep crud-list .cell-header-filter .filter-box{display:flex;min-width:0px;background-color:#fff;border-radius:3px}::ng-deep crud-list .cell-header-filter .filter-box>div{flex:1;border:1px solid #ced4da;border-right:none;border-radius:3px 0 0 3px;outline:none;overflow:hidden}::ng-deep crud-list .cell-header-filter .filter-box>span{cursor:pointer;min-width:unset;flex-basis:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:#f5f6f8;color:#6c757d;border:1px solid #ced4da;outline:none}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep crud-list .cell-header-filter .filter-box input{padding-left:5px;padding-right:5px;border:none;box-shadow:none!important}::ng-deep crud-list .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep crud-list .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep crud-list .cell-header-filter:focus-within,::ng-deep crud-list .cell-header-filter.focus-within{z-index:10!important}::ng-deep crud-list .cell-header-filter:focus-within .filter-boolean-box .p-button,::ng-deep crud-list .cell-header-filter.focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep crud-list .cell-header-filter:focus-within .filter-box>div,::ng-deep crud-list .cell-header-filter.focus-within .filter-box>div{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box{position:absolute;top:calc(50% - 16px);min-width:250px;z-index:2;box-shadow:5px 0 15px 1px #00000045}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>div,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>div{flex:1;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>span.action-clear,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter>div,::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box,::ng-deep crud-list .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translate(-50%)}::ng-deep crud-list .cell-header-filter:last-child .filter-box{right:3px}::ng-deep crud-list .table-border-line{position:absolute;z-index:5;background-color:#eee}::ng-deep crud-list .table-border-line.--left,::ng-deep crud-list .table-border-line.--right{top:0;bottom:0;width:1px}::ng-deep crud-list .table-border-line.--top,::ng-deep crud-list .table-border-line.--bottom{left:0;right:0;height:1px}::ng-deep crud-list .table-border-line.--left{left:0}::ng-deep crud-list .table-border-line.--right{right:0}::ng-deep crud-list .table-border-line.--top{top:0}::ng-deep crud-list .table-border-line.--bottom{bottom:0}::ng-deep crud-list .filter-boolean-box{text-align:center}::ng-deep crud-list .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep crud-list .custom-search-area crud-form{width:100%}::ng-deep crud-list>p-contextmenu{display:none}@media (max-width: 640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.TranslateService }, { type: i2.CommonService }, { type: i3.CrudService }, { type: i4.DomSanitizer }, { type: i5.DatePipe }, { type: i6.EnvironmentService }, { type: i7.PermissionService }]; }, propDecorators: { _table: [{