tnx-shared 5.2.17 → 5.2.18

package/esm2020/components/crud/table-detail-form/table-detail-form.component.mjs

@@ -2,8 +2,8 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ComponentContextService } from '../../../app-context/component-context.service';
 import { DataFormBase } from '../../../classes/base/data-form-base';
 import * as i0 from "@angular/core";
-import * as i1 from "../crud-form/crud-form.component";
-import * as i2 from "tn-custom-primeng/button";
+import * as i1 from "tn-custom-primeng/button";
+import * as i2 from "../crud-form/crud-form.component";
 import * as i3 from "@ngx-translate/core";
 export class TableDetailFormComponent extends DataFormBase {
     constructor(injector) {
@@ -23,11 +23,11 @@ export class TableDetailFormComponent extends DataFormBase {
         this.onSaved.emit(this.model.data);
     }
 }
-TableDetailFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TableDetailFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TableDetailFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: TableDetailFormComponent, selector: "table-detail-form", inputs: { schema: "schema", data: "data" }, outputs: { onSaved: "onSaved" }, providers: [
+TableDetailFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TableDetailFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+TableDetailFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TableDetailFormComponent, selector: "table-detail-form", inputs: { schema: "schema", data: "data" }, outputs: { onSaved: "onSaved" }, providers: [
         ComponentContextService
-    ], usesInheritance: true, ngImport: i0, template: "<crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n    (onFormReady)=\"_handleFormReady($event)\">\r\n</crud-form>\r\n<ng-template #buttonTemplate>\r\n    <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\"\r\n        (click)=\"_handleSave($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>", styles: [".tn-check-box-list.p-grid{margin-bottom:-.5em}.btn-clear{height:30px;cursor:pointer;border:none;background:#337ab7;color:#fff;border-radius:3px;padding:0 10px;margin:1px .5em 0}.p-col-horizontal{padding:.5em}::ng-deep .tn-check-box-list{position:relative}::ng-deep .tn-check-box-list.flex-end{justify-content:flex-end}::ng-deep .tn-check-box-list.flex-center{justify-content:center}::ng-deep .tn-check-box-list label{cursor:pointer}\n"], components: [{ type: i1.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }], directives: [{ type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }], pipes: { "translate": i3.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TableDetailFormComponent, decorators: [{
+    ], usesInheritance: true, ngImport: i0, template: "<crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n    (onFormReady)=\"_handleFormReady($event)\">\r\n</crud-form>\r\n<ng-template #buttonTemplate>\r\n    <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\"\r\n        (click)=\"_handleSave($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>", styles: [".tn-check-box-list.p-grid{margin-bottom:-.5em}.btn-clear{height:30px;cursor:pointer;border:none;background:#337ab7;color:#fff;border-radius:3px;padding:0 10px;margin:1px .5em 0}.p-col-horizontal{padding:.5em}::ng-deep .tn-check-box-list{position:relative}::ng-deep .tn-check-box-list.flex-end{justify-content:flex-end}::ng-deep .tn-check-box-list.flex-center{justify-content:center}::ng-deep .tn-check-box-list label{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i2.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TableDetailFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-detail-form', providers: [
                         ComponentContextService

package/esm2020/components/crud/tn-table.component.mjs

@@ -715,9 +715,9 @@ export class TnTableComponent extends ComponentBase {
         }));
     }
 }
-TnTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-TnTableComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: TnTableComponent, inputs: { templates: "templates", templatesFromParent: "templatesFromParent", childrenFromParent: "childrenFromParent", model: "model", setting: "setting", config: "config", dataSource: "dataSource", hiddenDelete: "hiddenDelete", hiddenEdit: "hiddenEdit", configScrollBar: "configScrollBar", showScrollHorizontal: "showScrollHorizontal" }, outputs: { onReload: "onReload", onAdd: "onAdd", onEdit: "onEdit", onView: "onView", onDelete: "onDelete", onReloaded: "onReloaded" }, queries: [{ propertyName: "children", predicate: TemplateRef }], viewQueries: [{ propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnTableComponent, decorators: [{
+TnTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+TnTableComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: TnTableComponent, inputs: { templates: "templates", templatesFromParent: "templatesFromParent", childrenFromParent: "childrenFromParent", model: "model", setting: "setting", config: "config", dataSource: "dataSource", hiddenDelete: "hiddenDelete", hiddenEdit: "hiddenEdit", configScrollBar: "configScrollBar", showScrollHorizontal: "showScrollHorizontal" }, outputs: { onReload: "onReload", onAdd: "onAdd", onEdit: "onEdit", onView: "onView", onDelete: "onDelete", onReloaded: "onReloaded" }, queries: [{ propertyName: "children", predicate: TemplateRef }], viewQueries: [{ propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnTableComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { scrollbar: [{
                 type: ViewChild,

package/esm2020/components/crud/tree-table/tree-table.component.mjs

@@ -15,26 +15,26 @@ import * as i0 from "@angular/core";
 import * as i1 from "../../../services/crud.service";
 import * as i2 from "@ngx-translate/core";
 import * as i3 from "../../../services/notifier.service";
-import * as i4 from "../../paging-next-back-only/paging-next-back-only.component";
-import * as i5 from "../advance-search/advance-search.component";
-import * as i6 from "../../tn-custom-scrollbar/tn-custom-scrollbar.component";
-import * as i7 from "tn-custom-primeng/treetable";
-import * as i8 from "../../after-view-checked/after-view-checked.component";
-import * as i9 from "../../../directives/primeng/tn-table.directive";
-import * as i10 from "tn-custom-primeng/checkbox";
-import * as i11 from "../../dropdown/dropdown.component";
-import * as i12 from "../../number-picker-range/number-picker-range.component";
-import * as i13 from "../../datetime-picker-range/datetime-picker-range.component";
-import * as i14 from "tn-custom-primeng/selectbutton";
-import * as i15 from "@angular/common";
-import * as i16 from "tn-custom-primeng/button";
-import * as i17 from "tn-custom-primeng/api";
-import * as i18 from "tn-custom-primeng/tooltip";
-import * as i19 from "@angular/forms";
-import * as i20 from "tn-custom-primeng/inputtext";
-import * as i21 from "../../../pipes/user-format.pipe";
-import * as i22 from "../../../pipes/users-format.pipe";
-import * as i23 from "../../../pipes/safe-html.pipe";
+import * as i4 from "tn-custom-primeng/api";
+import * as i5 from "@angular/common";
+import * as i6 from "tn-custom-primeng/button";
+import * as i7 from "tn-custom-primeng/tooltip";
+import * as i8 from "@angular/forms";
+import * as i9 from "tn-custom-primeng/checkbox";
+import * as i10 from "tn-custom-primeng/inputtext";
+import * as i11 from "tn-custom-primeng/treetable";
+import * as i12 from "tn-custom-primeng/selectbutton";
+import * as i13 from "../../after-view-checked/after-view-checked.component";
+import * as i14 from "../advance-search/advance-search.component";
+import * as i15 from "../../datetime-picker-range/datetime-picker-range.component";
+import * as i16 from "../../dropdown/dropdown.component";
+import * as i17 from "../../number-picker-range/number-picker-range.component";
+import * as i18 from "../../paging-next-back-only/paging-next-back-only.component";
+import * as i19 from "../../tn-custom-scrollbar/tn-custom-scrollbar.component";
+import * as i20 from "../../../directives/primeng/tn-table.directive";
+import * as i21 from "../../../pipes/safe-html.pipe";
+import * as i22 from "../../../pipes/user-format.pipe";
+import * as i23 from "../../../pipes/users-format.pipe";
 export class TreeTableComponent extends ComponentBase {
     constructor(injector, _crudService, _translateService, _notifierService) {
         super(injector);
@@ -982,9 +982,9 @@ export class TreeTableComponent extends ComponentBase {
         }));
     }
 }
-TreeTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TreeTableComponent, deps: [{ token: i0.Injector }, { token: i1.CrudService }, { token: i2.TranslateService }, { token: i3.NotifierService }], target: i0.ɵɵFactoryTarget.Component });
-TreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: TreeTableComponent, selector: "tn-tree-table", inputs: { templates: "templates", model: "model", setting: "setting", config: "config", dataSource: "dataSource", hiddenDelete: "hiddenDelete", hiddenEdit: "hiddenEdit" }, outputs: { onReload: "onReload", onAdd: "onAdd", onEdit: "onEdit", onView: "onView", onDelete: "onDelete", onReloaded: "onReloaded" }, queries: [{ propertyName: "searchCustom", first: true, predicate: ["searchCustom"], descendants: true, static: true }, { propertyName: "children", predicate: TemplateRef }], viewQueries: [{ propertyName: "treeTable", first: true, predicate: ["treetable"], descendants: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"custom-card card card-w-title tn-g-page-layout-1\">\r\n    <div class=\"ui-helper-clearfix tn-g-page-layout-1__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 class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div class=\"main-title p-col-8\">\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            <div class=\"p-col-4\">\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=\"p-grid crudListToolbar tn-g-page-layout-1__toolbar-area\">\r\n        <div class=\"p-col-7 button-group function-topbar\">\r\n            <button pButton pRipple type=\"button\" label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n                (click)=\"handleAdd($event)\"></button>\r\n            <button pButton pRipple type=\"button\" label=\"\u0110\u00E1nh l\u1EA1i m\u00E3 ph\u00E2n c\u1EA5p\" icon=\"pi pi-share-alt\"\r\n                class=\"p-button-text\" style=\"display: none;\" (click)=\"handleDanhMaPC($event)\"></button>\r\n        </div>\r\n        <div class=\"p-col-5 p-inputgroup advance-search-container\">\r\n            <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\" [loading]=\"model.loading\"\r\n                (onSearch)=\"handleSearchAdvs($event)\" (onInit)=\"handleInitAdvanceSearch($event)\">\r\n            </advance-search>\r\n            <!-- <input [placeholder]=\"'T\u00ECm ki\u1EBFm'\" [(ngModel)]=\"keyword\" pInputText type=\"text\" (change)=\"getData()\">\r\n            <button pButton type=\"button\" class=\"btn-info btn-search\" label=\"T\u00ECm ki\u1EBFm\" (click)=\"getData()\"></button> -->\r\n        </div>\r\n    </div>\r\n    <div class=\"tn-g-page-layout-1__table-area\">\r\n        <tn-custom-scrollbar [showScrollHorizontal]=\"true\" class=\"--has-border\">\r\n            <p-treeTable #treetable [value]=\"dataSource\" [columns]=\"setting.cols\" styleClass=\"treeOrganization\">\r\n                <ng-template let-columns pTemplate=\"header\">\r\n                    <tr>\r\n                        <th style=\"width: 50px\" class=\"chkbox\">\r\n                            <button 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\"\r\n                                tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"getData()\"></button>\r\n                        </th>\r\n                        <th *ngFor=\"let col of columns\" [ttSortableColumn]=\"col.field\" [style.width]=\"col.width\"\r\n                            [style.textAlign]=\"col.textAlign\" [className]=\"col.class\" [pTooltip]=\"col.fullLabel\"\r\n                            tooltipStyleClass=\"unset-width\" style=\"text-align: center;\">\r\n                            {{col.label}}\r\n                            <p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n                        </th>\r\n                        <th style=\"text-align: center; width: 8em\">\r\n                            Ch\u1EE9c n\u0103ng\r\n                        </th>\r\n                    </tr>\r\n                    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns}\">\r\n                    </ng-container>\r\n                </ng-template>\r\n                <ng-template let-rowNode let-rowData=\"rowData\" let-index=\"index\" let-columns=\"columns\" pTemplate=\"body\">\r\n                    <tr [ttRow]=\"rowNode\" [class.generated-by-base]=\"rowData._GeneratedByBase\">\r\n                        <td class=\"chkbox link-or-action cell-checkbox\">{{rowData._indexInDatabase}}</td>\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, rowNode: rowNode, col: col, index: index, i: i}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <td style=\"text-align: center; width: 8em;\">\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=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple\r\n                                    [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\r\n                                    [disabled]=\"disableEdit(rowData)\"\r\n                                    class=\"p-button-rounded p-button-text p-button-info link-or-action\"\r\n                                    icon=\"pi pi-pencil\" (click)=\"handleEdit(rowData)\"></button>\r\n                                <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                                    [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\"\r\n                                    tooltipPosition=\"top\"\r\n                                    class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                                    icon=\"pi pi-trash\" (click)=\"handleDelete(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\"\r\n                                    pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                    (click)=\"showContextMenu($event, rowData)\"></button> -->\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <after-view-checked *ngIf=\"rowData._index == indexCount - 1\" style=\"display: none;\"\r\n                        [renderKey]=\"dataSource\" (loaded)=\"handleTableRendered()\">\r\n                    </after-view-checked>\r\n                </ng-template>\r\n            </p-treeTable>\r\n            <div class=\"row-bottom-sticky\"></div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #contentTd let-rowData let-rowNode=\"rowNode\" let-col=\"col\" let-index=\"index\" 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        <tn-treeTableToggler *ngIf=\"col.colHasToggleIcon\" [rowNode]=\"rowNode\"></tn-treeTableToggler>\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)=\"handleView(rowData)\" [pTooltip]=\"config.tooltipView\"\r\n                    tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, 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, 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, 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=\"'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, 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 #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 #rowHeaderFilter let-columns=\"columns\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th class=\"chkbox nopad center\" [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=\"!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 #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>", styles: [".filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.advance-search-container{display:flex;justify-content:flex-end}::ng-deep tn-tree-table advance-search{display:block;flex:1;max-width:400px}::ng-deep tn-tree-table .ps__rail-x,::ng-deep tn-tree-table .ps__rail-y{z-index:5}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th.cell-fixed-filter .fixed-filter{z-index:10;position:fixed;min-width:200px}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th .container-icon-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep tn-tree-table tr.generated-by-base td.chkbox{background:#e9ecef}::ng-deep tn-tree-table .cell-header-filter{position:relative}::ng-deep tn-tree-table .cell-header-filter .tn-dropdown{height:32px}::ng-deep tn-tree-table .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep tn-tree-table .cell-header-filter .filter-box{display:flex;min-width:0px;background-color:#fff;border-radius:3px}::ng-deep tn-tree-table .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 tn-tree-table .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 tn-tree-table .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep tn-tree-table .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep tn-tree-table .cell-header-filter .filter-box input{padding-left:5px;padding-right:5px;border:none;box-shadow:none!important}::ng-deep tn-tree-table .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep tn-tree-table .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep tn-tree-table .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep tn-tree-table .cell-header-filter:focus-within,::ng-deep tn-tree-table .cell-header-filter.focus-within{z-index:10!important}::ng-deep tn-tree-table .cell-header-filter:focus-within .filter-boolean-box .p-button,::ng-deep tn-tree-table .cell-header-filter.focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep tn-tree-table .cell-header-filter:focus-within .filter-box>div,::ng-deep tn-tree-table .cell-header-filter.focus-within .filter-box>div{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box,::ng-deep tn-tree-table .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 tn-tree-table .cell-header-filter:focus-within .short-filter-box>div,::ng-deep tn-tree-table .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 tn-tree-table .cell-header-filter:focus-within .short-filter-box>span.action-clear,::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box.boolean-filter,::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box.boolean-filter>div,::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep tn-tree-table .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box,::ng-deep tn-tree-table .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translate(-50%)}::ng-deep tn-tree-table .cell-header-filter:last-child .filter-box{right:3px}::ng-deep tn-tree-table .table-border-line{position:absolute;z-index:5;background-color:#eee}::ng-deep tn-tree-table .table-border-line.--left,::ng-deep tn-tree-table .table-border-line.--right{top:0;bottom:0;width:1px}::ng-deep tn-tree-table .table-border-line.--top,::ng-deep tn-tree-table .table-border-line.--bottom{left:0;right:0;height:1px}::ng-deep tn-tree-table .table-border-line.--left{left:0}::ng-deep tn-tree-table .table-border-line.--right{right:0}::ng-deep tn-tree-table .table-border-line.--top{top:0}::ng-deep tn-tree-table .table-border-line.--bottom{bottom:0}::ng-deep tn-tree-table .filter-boolean-box{text-align:center}::ng-deep tn-tree-table .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep tn-tree-table .custom-search-area crud-form{width:100%}::ng-deep tn-tree-table>p-contextmenu{display:none}\n"], components: [{ type: i4.PagingNextBackOnlyComponent, selector: "paging-next-back-only", inputs: ["model", "setting", "ngClass"], outputs: ["onNext", "onPrev", "onLatest", "onRefresh", "onOldest", "onChangeLimitPage", "onChanged"] }, { type: i5.AdvanceSearchComponent, selector: "advance-search", inputs: ["parentSetting", "searchInfo", "allowLoadDataWhenParentNull", "loading"], outputs: ["onSearch", "onFormEvent", "onInit"] }, { type: i6.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { type: i7.TreeTable, selector: "p-treeTable", inputs: ["lazy", "lazyLoadOnInit", "first", "pageLinks", "alwaysShowPaginator", "paginatorPosition", "currentPageReportTemplate", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "contextMenuSelectionMode", "compareSelectionBy", "loadingIcon", "showLoader", "virtualScrollDelay", "virtualRowHeight", "columnResizeMode", "rowTrackBy", "filters", "filterDelay", "filterMode", "totalRecords", "value", "sortField", "sortOrder", "multiSortMeta", "selection", "rows", "contextMenuSelection", "columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "paginator", "rowsPerPageOptions", "paginatorDropdownAppendTo", "showCurrentPageReport", "showJumpToPageDropdown", "customSort", "selectionMode", "dataKey", "metaKeySelection", "rowHover", "loading", "scrollable", "scrollHeight", "virtualScroll", "minBufferPx", "maxBufferPx", "frozenWidth", "frozenColumns", "resizableColumns", "reorderableColumns", "contextMenu", "globalFilterFields", "filterLocale"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { type: i7.TTSortIcon, selector: "p-treeTableSortIcon", inputs: ["field", "ariaLabelDesc", "ariaLabelAsc"] }, { type: i8.AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { type: i9.TnTreeTableToggler, selector: "tn-treeTableToggler", inputs: ["rowNode"] }, { type: i10.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { type: i11.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: i12.NumberPickerRangeComponent, selector: "tn-number-picker-range", inputs: ["readonly", "maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces"], outputs: ["focus", "enterSmart", "enter", "blur", "change"] }, { type: i13.DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: ["control", "disabled"], outputs: ["onClose", "onChanged"] }, { type: i14.SelectButton, selector: "p-selectButton", inputs: ["tabindex", "disabled", "options", "optionLabel", "optionValue", "optionDisabled", "multiple", "style", "styleClass", "ariaLabelledBy", "dataKey"], outputs: ["onOptionClick", "onChange"] }], directives: [{ type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i16.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { type: i17.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i18.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.TTSortableColumn, selector: "[ttSortableColumn]", inputs: ["ttSortableColumn", "ttSortableColumnDisabled"] }, { type: i7.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { type: i15.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i15.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i15.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i19.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i15.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i19.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: i20.InputText, selector: "[pInputText]" }], pipes: { "translate": i2.TranslatePipe, "date": i15.DatePipe, "async": i15.AsyncPipe, "userFormat": i21.UserFormatPipe, "usersFormat": i22.UsersFormatPipe, "safeHtml": i23.SafeHtmlPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TreeTableComponent, decorators: [{
+TreeTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TreeTableComponent, deps: [{ token: i0.Injector }, { token: i1.CrudService }, { token: i2.TranslateService }, { token: i3.NotifierService }], target: i0.ɵɵFactoryTarget.Component });
+TreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TreeTableComponent, selector: "tn-tree-table", inputs: { templates: "templates", model: "model", setting: "setting", config: "config", dataSource: "dataSource", hiddenDelete: "hiddenDelete", hiddenEdit: "hiddenEdit" }, outputs: { onReload: "onReload", onAdd: "onAdd", onEdit: "onEdit", onView: "onView", onDelete: "onDelete", onReloaded: "onReloaded" }, queries: [{ propertyName: "searchCustom", first: true, predicate: ["searchCustom"], descendants: true, static: true }, { propertyName: "children", predicate: TemplateRef }], viewQueries: [{ propertyName: "treeTable", first: true, predicate: ["treetable"], descendants: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"custom-card card card-w-title tn-g-page-layout-1\">\r\n    <div class=\"ui-helper-clearfix tn-g-page-layout-1__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 class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div class=\"main-title p-col-8\">\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            <div class=\"p-col-4\">\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=\"p-grid crudListToolbar tn-g-page-layout-1__toolbar-area\">\r\n        <div class=\"p-col-7 button-group function-topbar\">\r\n            <button pButton pRipple type=\"button\" label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n                (click)=\"handleAdd($event)\"></button>\r\n            <button pButton pRipple type=\"button\" label=\"\u0110\u00E1nh l\u1EA1i m\u00E3 ph\u00E2n c\u1EA5p\" icon=\"pi pi-share-alt\"\r\n                class=\"p-button-text\" style=\"display: none;\" (click)=\"handleDanhMaPC($event)\"></button>\r\n        </div>\r\n        <div class=\"p-col-5 p-inputgroup advance-search-container\">\r\n            <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\" [loading]=\"model.loading\"\r\n                (onSearch)=\"handleSearchAdvs($event)\" (onInit)=\"handleInitAdvanceSearch($event)\">\r\n            </advance-search>\r\n            <!-- <input [placeholder]=\"'T\u00ECm ki\u1EBFm'\" [(ngModel)]=\"keyword\" pInputText type=\"text\" (change)=\"getData()\">\r\n            <button pButton type=\"button\" class=\"btn-info btn-search\" label=\"T\u00ECm ki\u1EBFm\" (click)=\"getData()\"></button> -->\r\n        </div>\r\n    </div>\r\n    <div class=\"tn-g-page-layout-1__table-area\">\r\n        <tn-custom-scrollbar [showScrollHorizontal]=\"true\" class=\"--has-border\">\r\n            <p-treeTable #treetable [value]=\"dataSource\" [columns]=\"setting.cols\" styleClass=\"treeOrganization\">\r\n                <ng-template let-columns pTemplate=\"header\">\r\n                    <tr>\r\n                        <th style=\"width: 50px\" class=\"chkbox\">\r\n                            <button 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\"\r\n                                tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"getData()\"></button>\r\n                        </th>\r\n                        <th *ngFor=\"let col of columns\" [ttSortableColumn]=\"col.field\" [style.width]=\"col.width\"\r\n                            [style.textAlign]=\"col.textAlign\" [className]=\"col.class\" [pTooltip]=\"col.fullLabel\"\r\n                            tooltipStyleClass=\"unset-width\" style=\"text-align: center;\">\r\n                            {{col.label}}\r\n                            <p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n                        </th>\r\n                        <th style=\"text-align: center; width: 8em\">\r\n                            Ch\u1EE9c n\u0103ng\r\n                        </th>\r\n                    </tr>\r\n                    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns}\">\r\n                    </ng-container>\r\n                </ng-template>\r\n                <ng-template let-rowNode let-rowData=\"rowData\" let-index=\"index\" let-columns=\"columns\" pTemplate=\"body\">\r\n                    <tr [ttRow]=\"rowNode\" [class.generated-by-base]=\"rowData._GeneratedByBase\">\r\n                        <td class=\"chkbox link-or-action cell-checkbox\">{{rowData._indexInDatabase}}</td>\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, rowNode: rowNode, col: col, index: index, i: i}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <td style=\"text-align: center; width: 8em;\">\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=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple\r\n                                    [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\r\n                                    [disabled]=\"disableEdit(rowData)\"\r\n                                    class=\"p-button-rounded p-button-text p-button-info link-or-action\"\r\n                                    icon=\"pi pi-pencil\" (click)=\"handleEdit(rowData)\"></button>\r\n                                <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                                    [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\"\r\n                                    tooltipPosition=\"top\"\r\n                                    class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                                    icon=\"pi pi-trash\" (click)=\"handleDelete(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\"\r\n                                    pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                    (click)=\"showContextMenu($event, rowData)\"></button> -->\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <after-view-checked *ngIf=\"rowData._index == indexCount - 1\" style=\"display: none;\"\r\n                        [renderKey]=\"dataSource\" (loaded)=\"handleTableRendered()\">\r\n                    </after-view-checked>\r\n                </ng-template>\r\n            </p-treeTable>\r\n            <div class=\"row-bottom-sticky\"></div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #contentTd let-rowData let-rowNode=\"rowNode\" let-col=\"col\" let-index=\"index\" 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        <tn-treeTableToggler *ngIf=\"col.colHasToggleIcon\" [rowNode]=\"rowNode\"></tn-treeTableToggler>\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)=\"handleView(rowData)\" [pTooltip]=\"config.tooltipView\"\r\n                    tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, 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, 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, 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=\"'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, 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 #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 #rowHeaderFilter let-columns=\"columns\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th class=\"chkbox nopad center\" [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=\"!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 #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>", styles: [".filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.advance-search-container{display:flex;justify-content:flex-end}::ng-deep tn-tree-table advance-search{display:block;flex:1;max-width:400px}::ng-deep tn-tree-table .ps__rail-x,::ng-deep tn-tree-table .ps__rail-y{z-index:5}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th.cell-fixed-filter .fixed-filter{z-index:10;position:fixed;min-width:200px}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th .container-icon-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep tn-tree-table tr.generated-by-base td.chkbox{background:#e9ecef}::ng-deep tn-tree-table .cell-header-filter{position:relative}::ng-deep tn-tree-table .cell-header-filter .tn-dropdown{height:32px}::ng-deep tn-tree-table .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep tn-tree-table .cell-header-filter .filter-box{display:flex;min-width:0px;background-color:#fff;border-radius:3px}::ng-deep tn-tree-table .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 tn-tree-table .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 tn-tree-table .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep tn-tree-table .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep tn-tree-table .cell-header-filter .filter-box input{padding-left:5px;padding-right:5px;border:none;box-shadow:none!important}::ng-deep tn-tree-table .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep tn-tree-table .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep tn-tree-table .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep tn-tree-table .cell-header-filter:focus-within,::ng-deep tn-tree-table .cell-header-filter.focus-within{z-index:10!important}::ng-deep tn-tree-table .cell-header-filter:focus-within .filter-boolean-box .p-button,::ng-deep tn-tree-table .cell-header-filter.focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep tn-tree-table .cell-header-filter:focus-within .filter-box>div,::ng-deep tn-tree-table .cell-header-filter.focus-within .filter-box>div{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box,::ng-deep tn-tree-table .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 tn-tree-table .cell-header-filter:focus-within .short-filter-box>div,::ng-deep tn-tree-table .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 tn-tree-table .cell-header-filter:focus-within .short-filter-box>span.action-clear,::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box.boolean-filter,::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box.boolean-filter>div,::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep tn-tree-table .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box,::ng-deep tn-tree-table .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translate(-50%)}::ng-deep tn-tree-table .cell-header-filter:last-child .filter-box{right:3px}::ng-deep tn-tree-table .table-border-line{position:absolute;z-index:5;background-color:#eee}::ng-deep tn-tree-table .table-border-line.--left,::ng-deep tn-tree-table .table-border-line.--right{top:0;bottom:0;width:1px}::ng-deep tn-tree-table .table-border-line.--top,::ng-deep tn-tree-table .table-border-line.--bottom{left:0;right:0;height:1px}::ng-deep tn-tree-table .table-border-line.--left{left:0}::ng-deep tn-tree-table .table-border-line.--right{right:0}::ng-deep tn-tree-table .table-border-line.--top{top:0}::ng-deep tn-tree-table .table-border-line.--bottom{bottom:0}::ng-deep tn-tree-table .filter-boolean-box{text-align:center}::ng-deep tn-tree-table .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep tn-tree-table .custom-search-area crud-form{width:100%}::ng-deep tn-tree-table>p-contextmenu{display:none}\n"], dependencies: [{ kind: "directive", type: i4.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: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "component", type: i11.TreeTable, selector: "p-treeTable", inputs: ["lazy", "lazyLoadOnInit", "first", "pageLinks", "alwaysShowPaginator", "paginatorPosition", "currentPageReportTemplate", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "contextMenuSelectionMode", "compareSelectionBy", "loadingIcon", "showLoader", "virtualScrollDelay", "virtualRowHeight", "columnResizeMode", "rowTrackBy", "filters", "filterDelay", "filterMode", "totalRecords", "value", "sortField", "sortOrder", "multiSortMeta", "selection", "rows", "contextMenuSelection", "columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "paginator", "rowsPerPageOptions", "paginatorDropdownAppendTo", "showCurrentPageReport", "showJumpToPageDropdown", "customSort", "selectionMode", "dataKey", "metaKeySelection", "rowHover", "loading", "scrollable", "scrollHeight", "virtualScroll", "minBufferPx", "maxBufferPx", "frozenWidth", "frozenColumns", "resizableColumns", "reorderableColumns", "contextMenu", "globalFilterFields", "filterLocale"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { kind: "directive", type: i11.TTSortableColumn, selector: "[ttSortableColumn]", inputs: ["ttSortableColumn", "ttSortableColumnDisabled"] }, { kind: "component", type: i11.TTSortIcon, selector: "p-treeTableSortIcon", inputs: ["field", "ariaLabelDesc", "ariaLabelAsc"] }, { kind: "directive", type: i11.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i12.SelectButton, selector: "p-selectButton", inputs: ["tabindex", "disabled", "options", "optionLabel", "optionValue", "optionDisabled", "multiple", "style", "styleClass", "ariaLabelledBy", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i13.AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { kind: "component", type: i14.AdvanceSearchComponent, selector: "advance-search", inputs: ["parentSetting", "searchInfo", "allowLoadDataWhenParentNull", "loading"], outputs: ["onSearch", "onFormEvent", "onInit"] }, { kind: "component", type: i15.DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: ["control", "disabled"], outputs: ["onClose", "onChanged"] }, { kind: "component", type: i16.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: i17.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: i18.PagingNextBackOnlyComponent, selector: "paging-next-back-only", inputs: ["model", "setting", "ngClass"], outputs: ["onNext", "onPrev", "onLatest", "onRefresh", "onOldest", "onChangeLimitPage", "onChanged"] }, { kind: "component", type: i19.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "component", type: i20.TnTreeTableToggler, selector: "tn-treeTableToggler", inputs: ["rowNode"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i21.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i22.UserFormatPipe, name: "userFormat" }, { kind: "pipe", type: i23.UsersFormatPipe, name: "usersFormat" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TreeTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-tree-table', template: "<div class=\"custom-card card card-w-title tn-g-page-layout-1\">\r\n    <div class=\"ui-helper-clearfix tn-g-page-layout-1__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 class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div class=\"main-title p-col-8\">\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            <div class=\"p-col-4\">\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=\"p-grid crudListToolbar tn-g-page-layout-1__toolbar-area\">\r\n        <div class=\"p-col-7 button-group function-topbar\">\r\n            <button pButton pRipple type=\"button\" label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n                (click)=\"handleAdd($event)\"></button>\r\n            <button pButton pRipple type=\"button\" label=\"\u0110\u00E1nh l\u1EA1i m\u00E3 ph\u00E2n c\u1EA5p\" icon=\"pi pi-share-alt\"\r\n                class=\"p-button-text\" style=\"display: none;\" (click)=\"handleDanhMaPC($event)\"></button>\r\n        </div>\r\n        <div class=\"p-col-5 p-inputgroup advance-search-container\">\r\n            <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\" [loading]=\"model.loading\"\r\n                (onSearch)=\"handleSearchAdvs($event)\" (onInit)=\"handleInitAdvanceSearch($event)\">\r\n            </advance-search>\r\n            <!-- <input [placeholder]=\"'T\u00ECm ki\u1EBFm'\" [(ngModel)]=\"keyword\" pInputText type=\"text\" (change)=\"getData()\">\r\n            <button pButton type=\"button\" class=\"btn-info btn-search\" label=\"T\u00ECm ki\u1EBFm\" (click)=\"getData()\"></button> -->\r\n        </div>\r\n    </div>\r\n    <div class=\"tn-g-page-layout-1__table-area\">\r\n        <tn-custom-scrollbar [showScrollHorizontal]=\"true\" class=\"--has-border\">\r\n            <p-treeTable #treetable [value]=\"dataSource\" [columns]=\"setting.cols\" styleClass=\"treeOrganization\">\r\n                <ng-template let-columns pTemplate=\"header\">\r\n                    <tr>\r\n                        <th style=\"width: 50px\" class=\"chkbox\">\r\n                            <button 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\"\r\n                                tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"getData()\"></button>\r\n                        </th>\r\n                        <th *ngFor=\"let col of columns\" [ttSortableColumn]=\"col.field\" [style.width]=\"col.width\"\r\n                            [style.textAlign]=\"col.textAlign\" [className]=\"col.class\" [pTooltip]=\"col.fullLabel\"\r\n                            tooltipStyleClass=\"unset-width\" style=\"text-align: center;\">\r\n                            {{col.label}}\r\n                            <p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n                        </th>\r\n                        <th style=\"text-align: center; width: 8em\">\r\n                            Ch\u1EE9c n\u0103ng\r\n                        </th>\r\n                    </tr>\r\n                    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns}\">\r\n                    </ng-container>\r\n                </ng-template>\r\n                <ng-template let-rowNode let-rowData=\"rowData\" let-index=\"index\" let-columns=\"columns\" pTemplate=\"body\">\r\n                    <tr [ttRow]=\"rowNode\" [class.generated-by-base]=\"rowData._GeneratedByBase\">\r\n                        <td class=\"chkbox link-or-action cell-checkbox\">{{rowData._indexInDatabase}}</td>\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, rowNode: rowNode, col: col, index: index, i: i}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <td style=\"text-align: center; width: 8em;\">\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=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple\r\n                                    [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\r\n                                    [disabled]=\"disableEdit(rowData)\"\r\n                                    class=\"p-button-rounded p-button-text p-button-info link-or-action\"\r\n                                    icon=\"pi pi-pencil\" (click)=\"handleEdit(rowData)\"></button>\r\n                                <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                                    [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\"\r\n                                    tooltipPosition=\"top\"\r\n                                    class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                                    icon=\"pi pi-trash\" (click)=\"handleDelete(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\"\r\n                                    pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                    (click)=\"showContextMenu($event, rowData)\"></button> -->\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <after-view-checked *ngIf=\"rowData._index == indexCount - 1\" style=\"display: none;\"\r\n                        [renderKey]=\"dataSource\" (loaded)=\"handleTableRendered()\">\r\n                    </after-view-checked>\r\n                </ng-template>\r\n            </p-treeTable>\r\n            <div class=\"row-bottom-sticky\"></div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #contentTd let-rowData let-rowNode=\"rowNode\" let-col=\"col\" let-index=\"index\" 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        <tn-treeTableToggler *ngIf=\"col.colHasToggleIcon\" [rowNode]=\"rowNode\"></tn-treeTableToggler>\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)=\"handleView(rowData)\" [pTooltip]=\"config.tooltipView\"\r\n                    tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, 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, 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, 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=\"'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, 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 #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 #rowHeaderFilter let-columns=\"columns\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th class=\"chkbox nopad center\" [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=\"!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 #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>", styles: [".filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.advance-search-container{display:flex;justify-content:flex-end}::ng-deep tn-tree-table advance-search{display:block;flex:1;max-width:400px}::ng-deep tn-tree-table .ps__rail-x,::ng-deep tn-tree-table .ps__rail-y{z-index:5}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th.cell-fixed-filter .fixed-filter{z-index:10;position:fixed;min-width:200px}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th .container-icon-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep tn-tree-table tr.generated-by-base td.chkbox{background:#e9ecef}::ng-deep tn-tree-table .cell-header-filter{position:relative}::ng-deep tn-tree-table .cell-header-filter .tn-dropdown{height:32px}::ng-deep tn-tree-table .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep tn-tree-table .cell-header-filter .filter-box{display:flex;min-width:0px;background-color:#fff;border-radius:3px}::ng-deep tn-tree-table .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 tn-tree-table .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 tn-tree-table .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep tn-tree-table .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep tn-tree-table .cell-header-filter .filter-box input{padding-left:5px;padding-right:5px;border:none;box-shadow:none!important}::ng-deep tn-tree-table .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep tn-tree-table .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep tn-tree-table .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep tn-tree-table .cell-header-filter:focus-within,::ng-deep tn-tree-table .cell-header-filter.focus-within{z-index:10!important}::ng-deep tn-tree-table .cell-header-filter:focus-within .filter-boolean-box .p-button,::ng-deep tn-tree-table .cell-header-filter.focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep tn-tree-table .cell-header-filter:focus-within .filter-box>div,::ng-deep tn-tree-table .cell-header-filter.focus-within .filter-box>div{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box,::ng-deep tn-tree-table .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 tn-tree-table .cell-header-filter:focus-within .short-filter-box>div,::ng-deep tn-tree-table .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 tn-tree-table .cell-header-filter:focus-within .short-filter-box>span.action-clear,::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box.boolean-filter,::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box.boolean-filter>div,::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep tn-tree-table .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box,::ng-deep tn-tree-table .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translate(-50%)}::ng-deep tn-tree-table .cell-header-filter:last-child .filter-box{right:3px}::ng-deep tn-tree-table .table-border-line{position:absolute;z-index:5;background-color:#eee}::ng-deep tn-tree-table .table-border-line.--left,::ng-deep tn-tree-table .table-border-line.--right{top:0;bottom:0;width:1px}::ng-deep tn-tree-table .table-border-line.--top,::ng-deep tn-tree-table .table-border-line.--bottom{left:0;right:0;height:1px}::ng-deep tn-tree-table .table-border-line.--left{left:0}::ng-deep tn-tree-table .table-border-line.--right{right:0}::ng-deep tn-tree-table .table-border-line.--top{top:0}::ng-deep tn-tree-table .table-border-line.--bottom{bottom:0}::ng-deep tn-tree-table .filter-boolean-box{text-align:center}::ng-deep tn-tree-table .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep tn-tree-table .custom-search-area crud-form{width:100%}::ng-deep tn-tree-table>p-contextmenu{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.CrudService }, { type: i2.TranslateService }, { type: i3.NotifierService }]; }, propDecorators: { treeTable: [{

package/esm2020/components/datetime-picker/datetime-picker.component.mjs

@@ -6,8 +6,8 @@ import { CONFIG_CALENDAR_VIETNAMESE } from '../../configs/calendar.config';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 import * as i2 from "../../services/common.service";
-import * as i3 from "tn-custom-primeng/calendar";
-import * as i4 from "@angular/forms";
+import * as i3 from "@angular/forms";
+import * as i4 from "tn-custom-primeng/calendar";
 export class DatetimePickerComponent {
     constructor(_translateService, _commonService) {
         this._translateService = _translateService;
@@ -155,15 +155,15 @@ export class DatetimePickerComponent {
         this.onChanged.emit(this._controlModelData);
     }
 }
-DatetimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DatetimePickerComponent, deps: [{ token: i1.TranslateService }, { token: i2.CommonService }], target: i0.ɵɵFactoryTarget.Component });
-DatetimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DatetimePickerComponent, selector: "datetime-picker", inputs: { control: "control", disabled: "disabled" }, outputs: { onSelect: "onSelect", onChanged: "onChanged", onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose" }, providers: [
+DatetimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DatetimePickerComponent, deps: [{ token: i1.TranslateService }, { token: i2.CommonService }], target: i0.ɵɵFactoryTarget.Component });
+DatetimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: DatetimePickerComponent, selector: "datetime-picker", inputs: { control: "control", disabled: "disabled" }, outputs: { onSelect: "onSelect", onChanged: "onChanged", onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DatetimePickerComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }], ngImport: i0, template: "<p-calendar #calendar [disabled]=\"control.disabled || disabled\" [selectOtherMonths]=\"true\"\r\n            [inputStyleClass]=\"'input-calendar'\" [autoZIndex]=\"true\" [minDate]=\"control.minDate\"\r\n            [maxDate]=\"control.maxDate\"\r\n            [dateFormat]=\"'dd/mm/yy'\" [hourFormat]=\"24\" [placeholder]=\"control.placeholder\"\r\n            [showIcon]=\"control.showIcon\"\r\n            [locale]=\"vi\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2050\"\r\n            [showTime]=\"control.showTime\"\r\n            [timeOnly]=\"control.timeOnly\"\r\n            [showOnFocus]=\"control.showOnFocus\" [keepInvalid]=\"true\" [appendTo]=\"control.appendTo\"\r\n            [panelStyleClass]=\"getPanelClass()\" [showTransitionOptions]=\"showTransitionOptions\"\r\n            [hideTransitionOptions]=\"hideTransitionOptions\" [(ngModel)]=\"_controlModelData\"\r\n            (onFocus)=\"onFocusCalendar($event)\"\r\n            (onBlur)=\"onBlurCalendar($event)\" (onSelect)=\"onSelectDateTime($event)\" (onShow)=\"onShowCalendar($event)\"\r\n            (onClose)=\"onCloseCalendar($event)\">\r\n</p-calendar>\r\n", styles: [""], components: [{ type: i3.Calendar, selector: "p-calendar", inputs: ["dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "icon", "shortYearCutoff", "hourFormat", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "dataType", "selectionMode", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "keepInvalid", "hideOnDateTimeSelect", "numberOfMonths", "view", "timeSeparator", "focusTrap", "firstDayOfWeek", "showTransitionOptions", "hideTransitionOptions", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "locale", "disabled", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "selectOtherMonths", "showIcon", "appendTo", "readonlyInput", "monthNavigator", "yearNavigator", "timeOnly", "required", "maxDateCount", "showButtonBar", "panelStyleClass", "panelStyle", "touchUI", "tabindex"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DatetimePickerComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }], ngImport: i0, template: "<p-calendar #calendar [disabled]=\"control.disabled || disabled\" [selectOtherMonths]=\"true\"\r\n            [inputStyleClass]=\"'input-calendar'\" [autoZIndex]=\"true\" [minDate]=\"control.minDate\"\r\n            [maxDate]=\"control.maxDate\"\r\n            [dateFormat]=\"'dd/mm/yy'\" [hourFormat]=\"24\" [placeholder]=\"control.placeholder\"\r\n            [showIcon]=\"control.showIcon\"\r\n            [locale]=\"vi\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2050\"\r\n            [showTime]=\"control.showTime\"\r\n            [timeOnly]=\"control.timeOnly\"\r\n            [showOnFocus]=\"control.showOnFocus\" [keepInvalid]=\"true\" [appendTo]=\"control.appendTo\"\r\n            [panelStyleClass]=\"getPanelClass()\" [showTransitionOptions]=\"showTransitionOptions\"\r\n            [hideTransitionOptions]=\"hideTransitionOptions\" [(ngModel)]=\"_controlModelData\"\r\n            (onFocus)=\"onFocusCalendar($event)\"\r\n            (onBlur)=\"onBlurCalendar($event)\" (onSelect)=\"onSelectDateTime($event)\" (onShow)=\"onShowCalendar($event)\"\r\n            (onClose)=\"onCloseCalendar($event)\">\r\n</p-calendar>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.Calendar, selector: "p-calendar", inputs: ["dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "icon", "shortYearCutoff", "hourFormat", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "dataType", "selectionMode", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "keepInvalid", "hideOnDateTimeSelect", "numberOfMonths", "view", "timeSeparator", "focusTrap", "firstDayOfWeek", "showTransitionOptions", "hideTransitionOptions", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "locale", "disabled", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "selectOtherMonths", "showIcon", "appendTo", "readonlyInput", "monthNavigator", "yearNavigator", "timeOnly", "required", "maxDateCount", "showButtonBar", "panelStyleClass", "panelStyle", "touchUI", "tabindex"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DatetimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'datetime-picker', providers: [
                         {
@@ -171,7 +171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                             useExisting: forwardRef(() => DatetimePickerComponent),
                             multi: true
                         }
-                    ], template: "<p-calendar #calendar [disabled]=\"control.disabled || disabled\" [selectOtherMonths]=\"true\"\r\n            [inputStyleClass]=\"'input-calendar'\" [autoZIndex]=\"true\" [minDate]=\"control.minDate\"\r\n            [maxDate]=\"control.maxDate\"\r\n            [dateFormat]=\"'dd/mm/yy'\" [hourFormat]=\"24\" [placeholder]=\"control.placeholder\"\r\n            [showIcon]=\"control.showIcon\"\r\n            [locale]=\"vi\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2050\"\r\n            [showTime]=\"control.showTime\"\r\n            [timeOnly]=\"control.timeOnly\"\r\n            [showOnFocus]=\"control.showOnFocus\" [keepInvalid]=\"true\" [appendTo]=\"control.appendTo\"\r\n            [panelStyleClass]=\"getPanelClass()\" [showTransitionOptions]=\"showTransitionOptions\"\r\n            [hideTransitionOptions]=\"hideTransitionOptions\" [(ngModel)]=\"_controlModelData\"\r\n            (onFocus)=\"onFocusCalendar($event)\"\r\n            (onBlur)=\"onBlurCalendar($event)\" (onSelect)=\"onSelectDateTime($event)\" (onShow)=\"onShowCalendar($event)\"\r\n            (onClose)=\"onCloseCalendar($event)\">\r\n</p-calendar>\r\n", styles: [""] }]
+                    ], template: "<p-calendar #calendar [disabled]=\"control.disabled || disabled\" [selectOtherMonths]=\"true\"\r\n            [inputStyleClass]=\"'input-calendar'\" [autoZIndex]=\"true\" [minDate]=\"control.minDate\"\r\n            [maxDate]=\"control.maxDate\"\r\n            [dateFormat]=\"'dd/mm/yy'\" [hourFormat]=\"24\" [placeholder]=\"control.placeholder\"\r\n            [showIcon]=\"control.showIcon\"\r\n            [locale]=\"vi\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2050\"\r\n            [showTime]=\"control.showTime\"\r\n            [timeOnly]=\"control.timeOnly\"\r\n            [showOnFocus]=\"control.showOnFocus\" [keepInvalid]=\"true\" [appendTo]=\"control.appendTo\"\r\n            [panelStyleClass]=\"getPanelClass()\" [showTransitionOptions]=\"showTransitionOptions\"\r\n            [hideTransitionOptions]=\"hideTransitionOptions\" [(ngModel)]=\"_controlModelData\"\r\n            (onFocus)=\"onFocusCalendar($event)\"\r\n            (onBlur)=\"onBlurCalendar($event)\" (onSelect)=\"onSelectDateTime($event)\" (onShow)=\"onShowCalendar($event)\"\r\n            (onClose)=\"onCloseCalendar($event)\">\r\n</p-calendar>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.CommonService }]; }, propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: true }]

package/esm2020/components/datetime-picker-range/datetime-picker-range.component.mjs

@@ -2,8 +2,8 @@ import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/cor
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DateTimeRangeControlSchema } from '../../classes/form-schema';
 import * as i0 from "@angular/core";
-import * as i1 from "../datetime-picker/datetime-picker.component";
-import * as i2 from "@angular/forms";
+import * as i1 from "@angular/forms";
+import * as i2 from "../datetime-picker/datetime-picker.component";
 export class DatetimePickerRangeComponent {
     constructor() {
         this.control = new DateTimeRangeControlSchema();
@@ -45,15 +45,15 @@ export class DatetimePickerRangeComponent {
         });
     }
 }
-DatetimePickerRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DatetimePickerRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatetimePickerRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: { control: "control", disabled: "disabled" }, outputs: { onClose: "onClose", onChanged: "onChanged" }, providers: [
+DatetimePickerRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DatetimePickerRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatetimePickerRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: { control: "control", disabled: "disabled" }, outputs: { onClose: "onClose", onChanged: "onChanged" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DatetimePickerRangeComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"tn-datetime-picker-range\">\r\n   <datetime-picker [control]=\"control\" [(ngModel)]=\"_controlModelData[0]\" [disabled]=\"disabled\"\r\n      (onChanged)=\"handleChanged($event)\" (onClose)=\"handleCloseCalendar($event)\">\r\n   </datetime-picker>\r\n   <span>-</span>\r\n   <datetime-picker [control]=\"control\" [(ngModel)]=\"_controlModelData[1]\" [disabled]=\"disabled\"\r\n      (onChanged)=\"handleChanged($event)\" (onClose)=\"handleCloseCalendar($event)\">\r\n   </datetime-picker>\r\n</div>", styles: [".tn-datetime-picker-range{display:flex}.tn-datetime-picker-range>span{flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center}::ng-deep .tn-datetime-picker-range p-calendar{flex:0 0 calc(50% - 8px)}\n"], components: [{ type: i1.DatetimePickerComponent, selector: "datetime-picker", inputs: ["control", "disabled"], outputs: ["onSelect", "onChanged", "onFocus", "onBlur", "onClose"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DatetimePickerRangeComponent, decorators: [{
+    ], ngImport: i0, template: "<div class=\"tn-datetime-picker-range\">\r\n   <datetime-picker [control]=\"control\" [(ngModel)]=\"_controlModelData[0]\" [disabled]=\"disabled\"\r\n      (onChanged)=\"handleChanged($event)\" (onClose)=\"handleCloseCalendar($event)\">\r\n   </datetime-picker>\r\n   <span>-</span>\r\n   <datetime-picker [control]=\"control\" [(ngModel)]=\"_controlModelData[1]\" [disabled]=\"disabled\"\r\n      (onChanged)=\"handleChanged($event)\" (onClose)=\"handleCloseCalendar($event)\">\r\n   </datetime-picker>\r\n</div>", styles: [".tn-datetime-picker-range{display:flex}.tn-datetime-picker-range>span{flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center}::ng-deep .tn-datetime-picker-range p-calendar{flex:0 0 calc(50% - 8px)}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DatetimePickerComponent, selector: "datetime-picker", inputs: ["control", "disabled"], outputs: ["onSelect", "onChanged", "onFocus", "onBlur", "onClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DatetimePickerRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-datetime-picker-range', providers: [
                         {