tnx-shared 5.2.24 → 5.2.25

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

@@ -31,7 +31,7 @@ export class TableDetailFormComponent extends DataFormBase {
 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: { onInit: "onInit", 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"], 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", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    ], 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", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i2.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "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: [

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

@@ -74,7 +74,7 @@ export class TreeTableComponent extends ListComponentBase {
     }
 }
 TreeTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TreeTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TreeTableComponent, selector: "tn-tree-table", usesInheritance: true, ngImport: i0, template: "<div #container 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=\"hasTemplate('searchCustom')\" class=\"p-grid ui-fluid custom-p-col custom-search-area\"\r\n            [class.collapsed]=\"!expandedSearch\">\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=\"getTemplate('searchCustom'); context: {$implicit: this}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n            <div class=\"collapse-expand\" (click)=\"expandedSearch = !expandedSearch\">\r\n                <span class=\"pi\" [class.pi-caret-up]=\"expandedSearch\" [class.pi-caret-down]=\"!expandedSearch\"></span>\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]=\"{\r\n                        crudList: this,\r\n                        buttonAdd: buttonAdd, buttonDelete: buttonDelete\r\n                    }\">\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            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\r\n                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n            <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\r\n            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\r\n            </ng-container>\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            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n        </div>\r\n        <div class=\"p-col-5 p-inputgroup advance-search-container\">\r\n            <ng-container *ngTemplateOutlet=\"customTemplate['crudListAdvanceSearch']; context: {\r\n                parentSetting: setting, searchInfo: searchInfo, loading: model.loading, onSearch: handleSearchAdvs,\r\n                onInit: handleInitAdvanceSearch\r\n            }\"></ng-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        </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 pTemplate=\"colgroup\" let-columns>\r\n                    <colgroup>\r\n                        <col *ngIf=\"!setting.hiddenCheckbox\" style=\"width: 50px\" />\r\n                        <col *ngIf=\"!setting.hiddenOrderColumn\" style=\"width: 50px\" />\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\r\n                        </ng-container>\r\n                        <col *ngIf=\"!setting.hiddenFunctionColumn\"\r\n                            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\r\n                    </colgroup>\r\n                </ng-template>\r\n                <ng-template pTemplate=\"header\" let-columns>\r\n                    <tr>\r\n                        <th *ngIf=\"!setting.hiddenCheckbox\" 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 *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\"\r\n                            [class.sticky]=\"setting.stickyColumn\" (dblclick)=\"reload()\">\r\n                            {{ 'TT' |translate}}\r\n                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                        </th>\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <th *ngIf=\"col && col.visible && col.field!='function'\" [ttSortableColumn]=\"col.field\"\r\n                                [className]=\"col.class\" [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\"\r\n                                style=\"text-align: center;\">\r\n                                {{col.label}}\r\n                                <p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n                            </th>\r\n                        </ng-container>\r\n                        <th *ngIf=\"!setting.hiddenFunctionColumn\" style=\"text-align: center;\">\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 pTemplate=\"body\" let-rowNode let-rowData=\"rowData\" let-index=\"rowIndex\"\r\n                    let-columns=\"columns\">\r\n                    <tr [ttRow]=\"rowNode\" [class.generated-by-base]=\"rowData._GeneratedByBase\"\r\n                        [attr.rowIndex]=\"rowData[fieldIndexInDataSource]\">\r\n                        <td class=\"chkbox link-or-action cell-checkbox\">\r\n                            <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\"\r\n                                (onChange)=\"handleCheckRowData(rowData)\">\r\n                            </p-checkbox>\r\n                        </td>\r\n                        <td class=\"chkbox link-or-action cell-checkbox\">{{rowData[fieldOrder]}}</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 *ngIf=\"!setting.hiddenFunctionColumn\" style=\"text-align: center;\">\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)=\"edit(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)=\"delete(rowData)\"></button>\r\n                                <!-- <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                                    class=\"link-or-action p-button-text p-button-info p-button-rounded\"\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 == _rawDataSource.length - 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<ng-template #buttonAdd>\r\n    <span [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.ADD]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.ADD]\">\r\n        <button type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n            [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n    </span>\r\n</ng-template>\r\n<ng-template #buttonDelete>\r\n    <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n        [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.DELETE_MULTIPLE]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE_MULTIPLE]\" type=\"button\" pButton pRipple\r\n        [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n        class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-rowNode=\"rowNode\" let-col=\"col\" let-index=\"index\" let-i=\"i\"\r\n    let-expanded=\"expanded\">\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\" class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\">\r\n                    <ng-container *ngTemplateOutlet=\"customTemplateCell; context: {\r\n                        $implicit: contentCell,\r\n                        rowData: rowData, rowIndex: index, col: col, expanded: expanded\r\n                    }\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplateCell; context: {\r\n                    $implicit: contentCell,\r\n                    rowData: rowData, rowIndex: index, col: col, expanded: expanded\r\n                }\">\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; context: {\r\n            $implicit: getComponentByType(col.dataType),\r\n            rowData: rowData, rowIndex: rowIndex, col: col, expanded: expanded\r\n        }\">\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=\"customTemplateCell; context: {\r\n                    $implicit: getComponentByType(col.dataType),\r\n                    rowData: rowData, rowIndex: rowIndex, col: col, expanded: expanded\r\n                }\">\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 #customTemplateCell let-template let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-col=\"col\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{\r\n        $implicit: rowData, \r\n        crudList: this,\r\n        rowIndex,\r\n        col,\r\n        field: col.field,\r\n        expanded,\r\n        iconToggleRowData: this.iconToggleRowData\r\n    }\">\r\n    </ng-container>\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            [class.tricheckbox-custom-false]=\"checkedAll === false\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"handleCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\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: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { kind: "component", type: i7.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly"], outputs: ["onChange"] }, { kind: "directive", type: i8.InputText, selector: "[pInputText]" }, { kind: "component", type: i9.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: i9.TTSortableColumn, selector: "[ttSortableColumn]", inputs: ["ttSortableColumn", "ttSortableColumnDisabled"] }, { kind: "component", type: i9.TTSortIcon, selector: "p-treeTableSortIcon", inputs: ["field", "ariaLabelDesc", "ariaLabelAsc"] }, { kind: "directive", type: i9.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i10.SelectButton, selector: "p-selectButton", inputs: ["tabindex", "disabled", "options", "optionLabel", "optionValue", "optionDisabled", "multiple", "style", "styleClass", "ariaLabelledBy", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i11.AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { kind: "component", type: i12.DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: ["control", "disabled"], outputs: ["onInit", "onClose", "onChanged"] }, { kind: "component", type: i13.DropdownComponent, selector: "dropdown", inputs: ["showClear", "disableDisplayFieldServerSearch", "filter", "control", "defaultLabel", "appendTo", "dataSource", "value", "itemSelectedStyleClass"], outputs: ["onInit", "onChanged", "onCollapse", "onExpand", "onDropdownClick", "onShow", "onShowSmartEvent", "onHide", "onHideSmartEvent", "onFocus", "onBlur", "onReady", "onDataSourceLoaded", "valueChange", "adjustValue"] }, { kind: "component", type: i14.NumberPickerRangeComponent, selector: "tn-number-picker-range", inputs: ["readonly", "maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces"], outputs: ["onInit", "focus", "enterSmart", "enter", "blur", "change"] }, { kind: "component", type: i15.PagingNextBackOnlyComponent, selector: "paging-next-back-only", inputs: ["model", "setting", "ngClass"], outputs: ["onNext", "onPrev", "onLatest", "onRefresh", "onOldest", "onChangeLimitPage", "onChanged"] }, { kind: "component", type: i16.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "directive", type: i17.AuthorizeDirective, selector: "[appAuthorize]", inputs: ["appAuthorize", "permissionType", "isNavigationPermission", "controller", "permission", "enableAuthorize", "keepHTML"] }, { kind: "component", type: i18.TnTreeTableToggler, selector: "tn-treeTableToggler", inputs: ["rowNode"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i19.TranslatePipe, name: "translate" }, { kind: "pipe", type: i20.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i21.UserFormatPipe, name: "userFormat" }, { kind: "pipe", type: i22.UsersFormatPipe, name: "usersFormat" }] });
+TreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TreeTableComponent, selector: "tn-tree-table", usesInheritance: true, ngImport: i0, template: "<div #container 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=\"hasTemplate('searchCustom')\" class=\"p-grid ui-fluid custom-p-col custom-search-area\"\r\n            [class.collapsed]=\"!expandedSearch\">\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=\"getTemplate('searchCustom'); context: {$implicit: this}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n            <div class=\"collapse-expand\" (click)=\"expandedSearch = !expandedSearch\">\r\n                <span class=\"pi\" [class.pi-caret-up]=\"expandedSearch\" [class.pi-caret-down]=\"!expandedSearch\"></span>\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]=\"{\r\n                        crudList: this,\r\n                        buttonAdd: buttonAdd, buttonDelete: buttonDelete\r\n                    }\">\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            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\r\n                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n            <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\r\n            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\r\n            </ng-container>\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            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n        </div>\r\n        <div class=\"p-col-5 p-inputgroup advance-search-container\">\r\n            <ng-container *ngTemplateOutlet=\"customTemplate['crudListAdvanceSearch']; context: {\r\n                parentSetting: setting, searchInfo: searchInfo, loading: model.loading, onSearch: handleSearchAdvs,\r\n                onInit: handleInitAdvanceSearch\r\n            }\"></ng-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        </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 pTemplate=\"colgroup\" let-columns>\r\n                    <colgroup>\r\n                        <col *ngIf=\"!setting.hiddenCheckbox\" style=\"width: 50px\" />\r\n                        <col *ngIf=\"!setting.hiddenOrderColumn\" style=\"width: 50px\" />\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\r\n                        </ng-container>\r\n                        <col *ngIf=\"!setting.hiddenFunctionColumn\"\r\n                            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\r\n                    </colgroup>\r\n                </ng-template>\r\n                <ng-template pTemplate=\"header\" let-columns>\r\n                    <tr>\r\n                        <th *ngIf=\"!setting.hiddenCheckbox\" 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 *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\"\r\n                            [class.sticky]=\"setting.stickyColumn\" (dblclick)=\"reload()\">\r\n                            {{ 'TT' |translate}}\r\n                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                        </th>\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <th *ngIf=\"col && col.visible && col.field!='function'\" [ttSortableColumn]=\"col.field\"\r\n                                [className]=\"col.class\" [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\"\r\n                                style=\"text-align: center;\">\r\n                                {{col.label}}\r\n                                <p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n                            </th>\r\n                        </ng-container>\r\n                        <th *ngIf=\"!setting.hiddenFunctionColumn\" style=\"text-align: center;\">\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 pTemplate=\"body\" let-rowNode let-rowData=\"rowData\" let-index=\"rowIndex\"\r\n                    let-columns=\"columns\">\r\n                    <tr [ttRow]=\"rowNode\" [class.generated-by-base]=\"rowData._GeneratedByBase\"\r\n                        [attr.rowIndex]=\"rowData[fieldIndexInDataSource]\">\r\n                        <td class=\"chkbox link-or-action cell-checkbox\">\r\n                            <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\"\r\n                                (onChange)=\"handleCheckRowData(rowData)\">\r\n                            </p-checkbox>\r\n                        </td>\r\n                        <td class=\"chkbox link-or-action cell-checkbox\">{{rowData[fieldOrder]}}</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 *ngIf=\"!setting.hiddenFunctionColumn\" style=\"text-align: center;\">\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)=\"edit(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)=\"delete(rowData)\"></button>\r\n                                <!-- <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                                    class=\"link-or-action p-button-text p-button-info p-button-rounded\"\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 == _rawDataSource.length - 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<ng-template #buttonAdd>\r\n    <span [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.ADD]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.ADD]\">\r\n        <button type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n            [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n    </span>\r\n</ng-template>\r\n<ng-template #buttonDelete>\r\n    <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n        [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.DELETE_MULTIPLE]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE_MULTIPLE]\" type=\"button\" pButton pRipple\r\n        [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n        class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-rowNode=\"rowNode\" let-col=\"col\" let-index=\"index\" let-i=\"i\"\r\n    let-expanded=\"expanded\">\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\" class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\">\r\n                    <ng-container *ngTemplateOutlet=\"customTemplateCell; context: {\r\n                        $implicit: contentCell,\r\n                        rowData: rowData, rowIndex: index, col: col, expanded: expanded\r\n                    }\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplateCell; context: {\r\n                    $implicit: contentCell,\r\n                    rowData: rowData, rowIndex: index, col: col, expanded: expanded\r\n                }\">\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; context: {\r\n            $implicit: getComponentByType(col.dataType),\r\n            rowData: rowData, rowIndex: rowIndex, col: col, expanded: expanded\r\n        }\">\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=\"customTemplateCell; context: {\r\n                    $implicit: getComponentByType(col.dataType),\r\n                    rowData: rowData, rowIndex: rowIndex, col: col, expanded: expanded\r\n                }\">\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 #customTemplateCell let-template let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-col=\"col\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{\r\n        $implicit: rowData, \r\n        crudList: this,\r\n        rowIndex,\r\n        col,\r\n        field: col.field,\r\n        expanded,\r\n        iconToggleRowData: this.iconToggleRowData\r\n    }\">\r\n    </ng-container>\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            [class.tricheckbox-custom-false]=\"checkedAll === false\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"handleCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\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: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i7.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { kind: "directive", type: i8.InputText, selector: "[pInputText]" }, { kind: "component", type: i9.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "virtualRowHeight", "value", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { kind: "directive", type: i9.TTSortableColumn, selector: "[ttSortableColumn]", inputs: ["ttSortableColumn", "ttSortableColumnDisabled"] }, { kind: "component", type: i9.TTSortIcon, selector: "p-treeTableSortIcon", inputs: ["field", "ariaLabelDesc", "ariaLabelAsc"] }, { kind: "directive", type: i9.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i10.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i11.AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { kind: "component", type: i12.DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: ["control", "disabled"], outputs: ["onInit", "onClose", "onChanged"] }, { kind: "component", type: i13.DropdownComponent, selector: "dropdown", inputs: ["showClear", "disableDisplayFieldServerSearch", "filter", "control", "defaultLabel", "appendTo", "dataSource", "value", "itemSelectedStyleClass"], outputs: ["onInit", "onChanged", "onCollapse", "onExpand", "onDropdownClick", "onShow", "onShowSmartEvent", "onHide", "onHideSmartEvent", "onFocus", "onBlur", "onReady", "onDataSourceLoaded", "valueChange", "adjustValue"] }, { kind: "component", type: i14.NumberPickerRangeComponent, selector: "tn-number-picker-range", inputs: ["readonly", "maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces"], outputs: ["onInit", "focus", "enterSmart", "enter", "blur", "change"] }, { kind: "component", type: i15.PagingNextBackOnlyComponent, selector: "paging-next-back-only", inputs: ["model", "setting", "ngClass"], outputs: ["onNext", "onPrev", "onLatest", "onRefresh", "onOldest", "onChangeLimitPage", "onChanged"] }, { kind: "component", type: i16.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "directive", type: i17.AuthorizeDirective, selector: "[appAuthorize]", inputs: ["appAuthorize", "permissionType", "isNavigationPermission", "controller", "permission", "enableAuthorize", "keepHTML"] }, { kind: "component", type: i18.TnTreeTableToggler, selector: "tn-treeTableToggler", inputs: ["rowNode"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i19.TranslatePipe, name: "translate" }, { kind: "pipe", type: i20.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i21.UserFormatPipe, name: "userFormat" }, { kind: "pipe", type: i22.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 #container 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=\"hasTemplate('searchCustom')\" class=\"p-grid ui-fluid custom-p-col custom-search-area\"\r\n            [class.collapsed]=\"!expandedSearch\">\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=\"getTemplate('searchCustom'); context: {$implicit: this}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n            <div class=\"collapse-expand\" (click)=\"expandedSearch = !expandedSearch\">\r\n                <span class=\"pi\" [class.pi-caret-up]=\"expandedSearch\" [class.pi-caret-down]=\"!expandedSearch\"></span>\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]=\"{\r\n                        crudList: this,\r\n                        buttonAdd: buttonAdd, buttonDelete: buttonDelete\r\n                    }\">\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            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\r\n                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n            <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\r\n            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\r\n            </ng-container>\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            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n        </div>\r\n        <div class=\"p-col-5 p-inputgroup advance-search-container\">\r\n            <ng-container *ngTemplateOutlet=\"customTemplate['crudListAdvanceSearch']; context: {\r\n                parentSetting: setting, searchInfo: searchInfo, loading: model.loading, onSearch: handleSearchAdvs,\r\n                onInit: handleInitAdvanceSearch\r\n            }\"></ng-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        </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 pTemplate=\"colgroup\" let-columns>\r\n                    <colgroup>\r\n                        <col *ngIf=\"!setting.hiddenCheckbox\" style=\"width: 50px\" />\r\n                        <col *ngIf=\"!setting.hiddenOrderColumn\" style=\"width: 50px\" />\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\r\n                        </ng-container>\r\n                        <col *ngIf=\"!setting.hiddenFunctionColumn\"\r\n                            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\r\n                    </colgroup>\r\n                </ng-template>\r\n                <ng-template pTemplate=\"header\" let-columns>\r\n                    <tr>\r\n                        <th *ngIf=\"!setting.hiddenCheckbox\" 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 *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\"\r\n                            [class.sticky]=\"setting.stickyColumn\" (dblclick)=\"reload()\">\r\n                            {{ 'TT' |translate}}\r\n                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                        </th>\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <th *ngIf=\"col && col.visible && col.field!='function'\" [ttSortableColumn]=\"col.field\"\r\n                                [className]=\"col.class\" [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\"\r\n                                style=\"text-align: center;\">\r\n                                {{col.label}}\r\n                                <p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n                            </th>\r\n                        </ng-container>\r\n                        <th *ngIf=\"!setting.hiddenFunctionColumn\" style=\"text-align: center;\">\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 pTemplate=\"body\" let-rowNode let-rowData=\"rowData\" let-index=\"rowIndex\"\r\n                    let-columns=\"columns\">\r\n                    <tr [ttRow]=\"rowNode\" [class.generated-by-base]=\"rowData._GeneratedByBase\"\r\n                        [attr.rowIndex]=\"rowData[fieldIndexInDataSource]\">\r\n                        <td class=\"chkbox link-or-action cell-checkbox\">\r\n                            <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\"\r\n                                (onChange)=\"handleCheckRowData(rowData)\">\r\n                            </p-checkbox>\r\n                        </td>\r\n                        <td class=\"chkbox link-or-action cell-checkbox\">{{rowData[fieldOrder]}}</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 *ngIf=\"!setting.hiddenFunctionColumn\" style=\"text-align: center;\">\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)=\"edit(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)=\"delete(rowData)\"></button>\r\n                                <!-- <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                                    class=\"link-or-action p-button-text p-button-info p-button-rounded\"\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 == _rawDataSource.length - 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<ng-template #buttonAdd>\r\n    <span [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.ADD]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.ADD]\">\r\n        <button type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n            [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n    </span>\r\n</ng-template>\r\n<ng-template #buttonDelete>\r\n    <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n        [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.DELETE_MULTIPLE]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE_MULTIPLE]\" type=\"button\" pButton pRipple\r\n        [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n        class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-rowNode=\"rowNode\" let-col=\"col\" let-index=\"index\" let-i=\"i\"\r\n    let-expanded=\"expanded\">\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\" class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\">\r\n                    <ng-container *ngTemplateOutlet=\"customTemplateCell; context: {\r\n                        $implicit: contentCell,\r\n                        rowData: rowData, rowIndex: index, col: col, expanded: expanded\r\n                    }\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container *ngTemplateOutlet=\"customTemplateCell; context: {\r\n                    $implicit: contentCell,\r\n                    rowData: rowData, rowIndex: index, col: col, expanded: expanded\r\n                }\">\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; context: {\r\n            $implicit: getComponentByType(col.dataType),\r\n            rowData: rowData, rowIndex: rowIndex, col: col, expanded: expanded\r\n        }\">\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=\"customTemplateCell; context: {\r\n                    $implicit: getComponentByType(col.dataType),\r\n                    rowData: rowData, rowIndex: rowIndex, col: col, expanded: expanded\r\n                }\">\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 #customTemplateCell let-template let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-col=\"col\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{\r\n        $implicit: rowData, \r\n        crudList: this,\r\n        rowIndex,\r\n        col,\r\n        field: col.field,\r\n        expanded,\r\n        iconToggleRowData: this.iconToggleRowData\r\n    }\">\r\n    </ng-container>\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            [class.tricheckbox-custom-false]=\"checkedAll === false\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"handleCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\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"] }]

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

@@ -177,7 +177,7 @@ DatetimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             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\" [maxDate]=\"control.maxDate\"\r\n    [dateFormat]=\"'dd/mm/yy'\" [hourFormat]=\"24\" [placeholder]=\"control.placeholder\" [showIcon]=\"control.showIcon\"\r\n    [locale]=\"vi\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2050\" [showTime]=\"control.showTime\"\r\n    [timeOnly]=\"control.timeOnly\" [showOnFocus]=\"control.showOnFocus\" [keepInvalid]=\"true\" [appendTo]=\"control.appendTo\"\r\n    [panelStyleClass]=\"getPanelClass()\" [showTransitionOptions]=\"showTransitionOptions\"\r\n    [hideTransitionOptions]=\"hideTransitionOptions\" [(ngModel)]=\"_controlModelData\" (onFocus)=\"onFocusCalendar($event)\"\r\n    (onBlur)=\"onBlurCalendar($event)\" (onSelect)=\"onSelectDateTime($event)\" (onShow)=\"onShowCalendar($event)\"\r\n    (onClose)=\"onCloseCalendar($event)\">\r\n</p-calendar>", 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"] }] });
+    ], 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\" [maxDate]=\"control.maxDate\"\r\n    [dateFormat]=\"'dd/mm/yy'\" [hourFormat]=\"24\" [placeholder]=\"control.placeholder\" [showIcon]=\"control.showIcon\"\r\n    [locale]=\"vi\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"1900:2050\" [showTime]=\"control.showTime\"\r\n    [timeOnly]=\"control.timeOnly\" [showOnFocus]=\"control.showOnFocus\" [keepInvalid]=\"true\" [appendTo]=\"control.appendTo\"\r\n    [panelStyleClass]=\"getPanelClass()\" [showTransitionOptions]=\"showTransitionOptions\"\r\n    [hideTransitionOptions]=\"hideTransitionOptions\" [(ngModel)]=\"_controlModelData\" (onFocus)=\"onFocusCalendar($event)\"\r\n    (onBlur)=\"onBlurCalendar($event)\" (onSelect)=\"onSelectDateTime($event)\" (onShow)=\"onShowCalendar($event)\"\r\n    (onClose)=\"onCloseCalendar($event)\">\r\n</p-calendar>", 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: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "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: [

package/esm2020/components/dropdown/dropdown-setting-form/dropdown-setting-form.component.mjs

@@ -50,7 +50,7 @@ export class DropdownSettingFormComponent extends DataFormBase {
     }
 }
 DropdownSettingFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DropdownSettingFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DropdownSettingFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: DropdownSettingFormComponent, selector: "dropdown-setting-form", inputs: { control: "control", baseService: "baseService" }, outputs: { onInit: "onInit" }, 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 *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\"\r\n        [label]=\"'FORM.SAVE' | translate\" (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>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i3.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+DropdownSettingFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: DropdownSettingFormComponent, selector: "dropdown-setting-form", inputs: { control: "control", baseService: "baseService" }, outputs: { onInit: "onInit" }, 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 *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\"\r\n        [label]=\"'FORM.SAVE' | translate\" (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>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i3.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DropdownSettingFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dropdown-setting-form', providers: [ComponentContextService], 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 *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\"\r\n        [label]=\"'FORM.SAVE' | translate\" (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>\r\n" }]

package/esm2020/components/dropdown/dropdown.component.mjs

@@ -18,9 +18,9 @@ import * as i3 from "../../services/component.service";
 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/dropdown";
-import * as i8 from "tn-custom-primeng/multiselect";
-import * as i9 from "tn-custom-primeng/tooltip";
+import * as i7 from "tn-custom-primeng/tooltip";
+import * as i8 from "tn-custom-primeng/dropdown";
+import * as i9 from "tn-custom-primeng/multiselect";
 import * as i10 from "@angular/forms";
 import * as i11 from "../after-view-checked/after-view-checked.component";
 import * as i12 from "../tn-dialog/tn-dialog.component";
@@ -906,7 +906,7 @@ export class DropdownComponent extends ComponentBase {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DropdownComponent, deps: [{ token: i1.DeviceDetectorService }, { token: i0.Injector }, { token: i2.CrudService }, { token: i3.ComponentService }], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: DropdownComponent, selector: "dropdown", inputs: { showClear: "showClear", disableDisplayFieldServerSearch: "disableDisplayFieldServerSearch", filter: "filter", control: "control", defaultLabel: "defaultLabel", appendTo: "appendTo", dataSource: "dataSource", value: "value", itemSelectedStyleClass: "itemSelectedStyleClass" }, outputs: { onInit: "onInit", onChanged: "onChanged", onCollapse: "onCollapse", onExpand: "onExpand", onDropdownClick: "onDropdownClick", onShow: "onShow", onShowSmartEvent: "onShowSmartEvent", onHide: "onHide", onHideSmartEvent: "onHideSmartEvent", onFocus: "onFocus", onBlur: "onBlur", onReady: "onReady", onDataSourceLoaded: "onDataSourceLoaded", valueChange: "valueChange", adjustValue: "adjustValue" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "el", first: true, predicate: ["el"], descendants: true }, { propertyName: "input", first: true, predicate: ["inputMask"], descendants: true }, { propertyName: "buttonSetting", first: true, predicate: ["buttonSetting"], descendants: true }, { propertyName: "dropdown", first: true, predicate: Dropdown, descendants: true }, { propertyName: "multiSelect", first: true, predicate: MultiSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #el class=\"tn-dropdown\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\r\n    [class.server-load]=\"control.isServerLoad\">\r\n    <span class=\"server-load-info\" pTooltip=\"D\u1EEF li\u1EC7u s\u1EBD \u0111\u01B0\u1EE3c l\u00E0m m\u1EDBi ghi t\u00ECm ki\u1EBFm\" tooltipPosition=\"top\"></span>\r\n    <p-dropdown *ngIf=\"!control.multiple\" [options]=\"dataSourceInternal\" [placeholder]=\"control.placeholder\"\r\n        [filter]=\"control.filter\" [panelStyleClass]=\"getPanelClass()\" [appendTo]=\"control.appendTo\"\r\n        [styleClass]=\"'tn-dropdown'\" [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\"\r\n        [disabled]=\"control.disabled ? true : null\" [autoZIndex]=\"true\" [showClear]=\"control.showClear\"\r\n        [showTransitionOptions]=\"showTransitionOptions\" [autoDisplayFirst]=\"control.autoDisplayFirst\"\r\n        [virtualScroll]=\"control.virtualScroll\" itemSize=\"30\" [maxItemDisplay]=\"control.maxItemDisplay\"\r\n        [autofocusSelectedItem]=\"autofocusSelectedItem\" [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        [modifyOptionsWhenFilter]=\"modifyOptionWhenFilter\" [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\"\r\n        (onFocus)=\"handleFocus($event)\" (onBlur)=\"handleBlur($event)\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onShow)=\"onShowHandler($event)\" (onHide)=\"onHideHandler($event)\">\r\n        <ng-template *ngIf=\"control.templateSelectedItem\" let-item pTemplate=\"selectedItem\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"control.templateSelectedItem; context: {$implicit: item, selectedValue: _value}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"control.templateItem\" let-item pTemplate=\"item\">\r\n            <ng-container *ngTemplateOutlet=\"control.templateItem; context: {$implicit: item}\"></ng-container>\r\n        </ng-template>\r\n    </p-dropdown>\r\n    <p-multiSelect *ngIf=\"control.multiple\" [options]=\"dataSourceInternal\" [filter]=\"control.filter\"\r\n        [defaultLabel]=\"control.placeholder\" [placeholder]=\"control.placeholder\" [panelStyleClass]=\"getPanelClass()\"\r\n        [appendTo]=\"control.appendTo\" [styleClass]=\"'tn-dropdown'\"\r\n        [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\" [disabled]=\"control.disabled ? true : null\"\r\n        [autoZIndex]=\"true\" [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\" [virtualScroll]=\"control.virtualScroll\"\r\n        [maxItemDisplay]=\"control.maxItemDisplay\" [selectedItemsLabel]=\"control.selectedItemsLabel\"\r\n        [maxSelectedLabels]=\"control.maxSelectedLabels\" [modifyOptionsWhenFilter]=\"modifyOptionWhenFilterMultiple\"\r\n        [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onPanelShow)=\"onPanelShowHandler($event)\"\r\n        (onPanelHide)=\"onHideHandler($event)\">\r\n        <ng-template pTemplate=\"selectedItems\" let-value>\r\n            <ng-container *ngIf=\"!value || value.length == 0\">{{control.placeholder}}</ng-container>\r\n            <ng-container *ngIf=\"value && value.length > 0\">\r\n                <span *ngFor=\"let selectedItem of value\" [class]=\"_itemSelectedStyleClass\">\r\n                    {{selectedItem[control.displayField]}}<span class=\"remove-item\"\r\n                        (click)=\"removeItem($event, selectedItem)\"><i class=\"fas fa-times\"></i></span>\r\n                </span>\r\n            </ng-container>\r\n        </ng-template>\r\n    </p-multiSelect>\r\n    <input #inputMask class=\"input-mask hide p-inputtext\" type=\"text\" [disabled]=\"loading\"\r\n        [(ngModel)]=\"valueSearchServer\" (keyup)=\"keyUp.next($event)\" />\r\n    <span #buttonSetting class=\"button-setting hide pi pi-cog\" (click)=\"showFormSetting()\"></span>\r\n    <after-view-checked *ngIf=\"!loading\" (loaded)=\"handleLoaded()\"></after-view-checked>\r\n    <button *ngIf=\"control.quickAdd && (control.cols || control.quickAddTemplate)\" type=\"button\" pButton\r\n        icon=\"pi pi-plus\" class=\"p-button-text p-button-rounded button-quick-add\" pTooltip=\"Th\u00EAm nhanh\"\r\n        tooltipPosition=\"top\" (click)=\"showFormQuickAdd()\"></button>\r\n</div>\r\n<tn-dialog *ngIf=\"quickAddDialogModel.showEditForm\" #dialog [header]=\"quickAddDialogModel.header | translate\"\r\n    [popupSize]=\"control.popupSize\" (onHide)=\"quickAddDialogModel.showEditForm = false\">\r\n    <ng-container *ngIf=\"control.cols\" [ngTemplateOutlet]=\"customTemplate['dropdownQuickAddForm']\"\r\n        [ngTemplateOutletContext]=\"{\r\n        $implicit: quickAddDialogModel, parentModel: model, parentContext: context, control: control, \r\n        onSaved: handleSaved, onCancel: handleCancel\r\n    }\"></ng-container>\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"quickAddDialogModel.buttonTemplate\"></ng-container>\r\n    </ng-template>\r\n    <!-- <quick-add-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"formModel\" [control]=\"control\"\r\n        [baseService]=\"control.baseService\" (onSaved)=\"handleSaved()\" (onCancel)=\"handleCancel()\">\r\n    </quick-add-form> -->\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"settingDialogModel.showEditForm\" #dialog [header]=\"settingDialogModel.header | translate\"\r\n    [popupSize]=\"control.popupSize\" (onHide)=\"settingDialogModel.showEditForm = false\">\r\n    <ng-container [ngTemplateOutlet]=\"customTemplate['dropdownQuickAddForm']\" [ngTemplateOutletContext]=\"{\r\n        $implicit: settingDialogModel, onSaved: handleSavedSetting\r\n    }\"></ng-container>\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"settingDialogModel.buttonTemplate\"></ng-container>\r\n    </ng-template>\r\n    <!-- <dropdown-setting-form #formBase [model]=\"settingDialogModel.data.formModel\" (onSaved)=\"handleSavedSetting()\"\r\n        (onCancel)=\"settingDialogModel.showEditForm = false\">\r\n    </dropdown-setting-form> -->\r\n</tn-dialog>\r\n<ng-container *ngTemplateOutlet=\"control.quickAddTemplate; context: {\r\n    handleSaved: handleSaved,\r\n    handleCancel: handleCancel,\r\n    dialogModel: quickAddDialogModel\r\n}\"></ng-container>", styles: [".tn-dropdown{display:flex}.tn-dropdown p-dropdown,.tn-dropdown p-multiSelect{flex:1 1;width:100%}.tn-dropdown>.button-quick-add{flex:0 0 auto}.input-mask{position:absolute;z-index:1;width:100%;padding-left:12px;box-sizing:border-box;border:1px solid transparent;outline:none;background:transparent;border-radius:3px}.input-mask.hide{display:none}.input-mask:focus{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.custom-select-item{display:inline-flex;align-items:center;background:#d2eefb;border-radius:3px;padding:3px 5px;margin:0 0 0 3px;border:1px solid #a9d8ff}.custom-select-item>span{font-size:12px;color:#555;margin-left:3px}.custom-select-item>span i{font-size:10px}.custom-select-item.min{padding:1px 5px;margin-left:2px}.custom-select-item:first-child{margin-left:0}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item{background:#e1e1e1;border-color:#d4d4d4}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item>span{display:none}::ng-deep .ui-multiselect-filter-container .input-mask{padding:.2em;height:22px;width:calc(100% - 2px);box-sizing:border-box;text-indent:1.5em;left:1px;top:1px}::ng-deep .ui-multiselect-filter-container .input-mask:focus{left:1px;width:calc(100% - 2px)}\n"], dependencies: [{ kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i7.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "resetFilterOnHide", "dropdownIcon", "autoDisplayFirst", "emptyFilterMessage", "maxItemDisplay", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "autofocusFilter", "autofocusSelectedItem", "delayFilter", "disabled", "options", "filterValue", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "virtualScroll", "itemSize", "ariaFilterLabel", "ariaLabelledBy", "maxlength", "tooltipStyleClass", "modifyOptionsWhenFilter"], outputs: ["onChange", "onFocus", "onBlur", "onClick", "onShow", "onHide"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["filter", "displaySelectedLabel", "maxSelectedLabels", "maxItemDisplay", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "resetFilterOnHide", "dropdownIcon", "showHeader", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "autofocusFilter", "display", "delayFilter", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue", "disabled", "overlayVisible", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "filterPlaceHolder", "filterLocale", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "selectionLimit", "optionLabel", "optionValue", "optionDisabled", "filterBy", "virtualScroll", "itemSize", "ariaFilterLabel", "tooltipStyleClass", "modifyOptionsWhenFilter"], outputs: ["onChange", "onFocus", "onBlur", "onClick", "onPanelShow", "onPanelHide"] }, { kind: "directive", type: i9.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { kind: "component", type: i12.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: DropdownComponent, selector: "dropdown", inputs: { showClear: "showClear", disableDisplayFieldServerSearch: "disableDisplayFieldServerSearch", filter: "filter", control: "control", defaultLabel: "defaultLabel", appendTo: "appendTo", dataSource: "dataSource", value: "value", itemSelectedStyleClass: "itemSelectedStyleClass" }, outputs: { onInit: "onInit", onChanged: "onChanged", onCollapse: "onCollapse", onExpand: "onExpand", onDropdownClick: "onDropdownClick", onShow: "onShow", onShowSmartEvent: "onShowSmartEvent", onHide: "onHide", onHideSmartEvent: "onHideSmartEvent", onFocus: "onFocus", onBlur: "onBlur", onReady: "onReady", onDataSourceLoaded: "onDataSourceLoaded", valueChange: "valueChange", adjustValue: "adjustValue" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "el", first: true, predicate: ["el"], descendants: true }, { propertyName: "input", first: true, predicate: ["inputMask"], descendants: true }, { propertyName: "buttonSetting", first: true, predicate: ["buttonSetting"], descendants: true }, { propertyName: "dropdown", first: true, predicate: Dropdown, descendants: true }, { propertyName: "multiSelect", first: true, predicate: MultiSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #el class=\"tn-dropdown\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\r\n    [class.server-load]=\"control.isServerLoad\">\r\n    <span class=\"server-load-info\" pTooltip=\"D\u1EEF li\u1EC7u s\u1EBD \u0111\u01B0\u1EE3c l\u00E0m m\u1EDBi ghi t\u00ECm ki\u1EBFm\" tooltipPosition=\"top\"></span>\r\n    <p-dropdown *ngIf=\"!control.multiple\" [options]=\"dataSourceInternal\" [placeholder]=\"control.placeholder\"\r\n        [filter]=\"control.filter\" [panelStyleClass]=\"getPanelClass()\" [appendTo]=\"control.appendTo\"\r\n        [styleClass]=\"'tn-dropdown'\" [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\"\r\n        [disabled]=\"control.disabled ? true : null\" [autoZIndex]=\"true\" [showClear]=\"control.showClear\"\r\n        [showTransitionOptions]=\"showTransitionOptions\" [autoDisplayFirst]=\"control.autoDisplayFirst\"\r\n        [virtualScroll]=\"control.virtualScroll\" itemSize=\"30\" [maxItemDisplay]=\"control.maxItemDisplay\"\r\n        [autofocusSelectedItem]=\"autofocusSelectedItem\" [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        [modifyOptionsWhenFilter]=\"modifyOptionWhenFilter\" [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\"\r\n        (onFocus)=\"handleFocus($event)\" (onBlur)=\"handleBlur($event)\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onShow)=\"onShowHandler($event)\" (onHide)=\"onHideHandler($event)\">\r\n        <ng-template *ngIf=\"control.templateSelectedItem\" let-item pTemplate=\"selectedItem\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"control.templateSelectedItem; context: {$implicit: item, selectedValue: _value}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"control.templateItem\" let-item pTemplate=\"item\">\r\n            <ng-container *ngTemplateOutlet=\"control.templateItem; context: {$implicit: item}\"></ng-container>\r\n        </ng-template>\r\n    </p-dropdown>\r\n    <p-multiSelect *ngIf=\"control.multiple\" [options]=\"dataSourceInternal\" [filter]=\"control.filter\"\r\n        [defaultLabel]=\"control.placeholder\" [placeholder]=\"control.placeholder\" [panelStyleClass]=\"getPanelClass()\"\r\n        [appendTo]=\"control.appendTo\" [styleClass]=\"'tn-dropdown'\"\r\n        [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\" [disabled]=\"control.disabled ? true : null\"\r\n        [autoZIndex]=\"true\" [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\" [virtualScroll]=\"control.virtualScroll\"\r\n        [maxItemDisplay]=\"control.maxItemDisplay\" [selectedItemsLabel]=\"control.selectedItemsLabel\"\r\n        [maxSelectedLabels]=\"control.maxSelectedLabels\" [modifyOptionsWhenFilter]=\"modifyOptionWhenFilterMultiple\"\r\n        [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onPanelShow)=\"onPanelShowHandler($event)\"\r\n        (onPanelHide)=\"onHideHandler($event)\">\r\n        <ng-template pTemplate=\"selectedItems\" let-value>\r\n            <ng-container *ngIf=\"!value || value.length == 0\">{{control.placeholder}}</ng-container>\r\n            <ng-container *ngIf=\"value && value.length > 0\">\r\n                <span *ngFor=\"let selectedItem of value\" [class]=\"_itemSelectedStyleClass\">\r\n                    {{selectedItem[control.displayField]}}<span class=\"remove-item\"\r\n                        (click)=\"removeItem($event, selectedItem)\"><i class=\"fas fa-times\"></i></span>\r\n                </span>\r\n            </ng-container>\r\n        </ng-template>\r\n    </p-multiSelect>\r\n    <input #inputMask class=\"input-mask hide p-inputtext\" type=\"text\" [disabled]=\"loading\"\r\n        [(ngModel)]=\"valueSearchServer\" (keyup)=\"keyUp.next($event)\" />\r\n    <span #buttonSetting class=\"button-setting hide pi pi-cog\" (click)=\"showFormSetting()\"></span>\r\n    <after-view-checked *ngIf=\"!loading\" (loaded)=\"handleLoaded()\"></after-view-checked>\r\n    <button *ngIf=\"control.quickAdd && (control.cols || control.quickAddTemplate)\" type=\"button\" pButton\r\n        icon=\"pi pi-plus\" class=\"p-button-text p-button-rounded button-quick-add\" pTooltip=\"Th\u00EAm nhanh\"\r\n        tooltipPosition=\"top\" (click)=\"showFormQuickAdd()\"></button>\r\n</div>\r\n<tn-dialog *ngIf=\"quickAddDialogModel.showEditForm\" #dialog [header]=\"quickAddDialogModel.header | translate\"\r\n    [popupSize]=\"control.popupSize\" (onHide)=\"quickAddDialogModel.showEditForm = false\">\r\n    <ng-container *ngIf=\"control.cols\" [ngTemplateOutlet]=\"customTemplate['dropdownQuickAddForm']\"\r\n        [ngTemplateOutletContext]=\"{\r\n        $implicit: quickAddDialogModel, parentModel: model, parentContext: context, control: control, \r\n        onSaved: handleSaved, onCancel: handleCancel\r\n    }\"></ng-container>\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"quickAddDialogModel.buttonTemplate\"></ng-container>\r\n    </ng-template>\r\n    <!-- <quick-add-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"formModel\" [control]=\"control\"\r\n        [baseService]=\"control.baseService\" (onSaved)=\"handleSaved()\" (onCancel)=\"handleCancel()\">\r\n    </quick-add-form> -->\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"settingDialogModel.showEditForm\" #dialog [header]=\"settingDialogModel.header | translate\"\r\n    [popupSize]=\"control.popupSize\" (onHide)=\"settingDialogModel.showEditForm = false\">\r\n    <ng-container [ngTemplateOutlet]=\"customTemplate['dropdownQuickAddForm']\" [ngTemplateOutletContext]=\"{\r\n        $implicit: settingDialogModel, onSaved: handleSavedSetting\r\n    }\"></ng-container>\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"settingDialogModel.buttonTemplate\"></ng-container>\r\n    </ng-template>\r\n    <!-- <dropdown-setting-form #formBase [model]=\"settingDialogModel.data.formModel\" (onSaved)=\"handleSavedSetting()\"\r\n        (onCancel)=\"settingDialogModel.showEditForm = false\">\r\n    </dropdown-setting-form> -->\r\n</tn-dialog>\r\n<ng-container *ngTemplateOutlet=\"control.quickAddTemplate; context: {\r\n    handleSaved: handleSaved,\r\n    handleCancel: handleCancel,\r\n    dialogModel: quickAddDialogModel\r\n}\"></ng-container>", styles: [".tn-dropdown{display:flex}.tn-dropdown p-dropdown,.tn-dropdown p-multiSelect{flex:1 1;width:100%}.tn-dropdown>.button-quick-add{flex:0 0 auto}.input-mask{position:absolute;z-index:1;width:100%;padding-left:12px;box-sizing:border-box;border:1px solid transparent;outline:none;background:transparent;border-radius:3px}.input-mask.hide{display:none}.input-mask:focus{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.custom-select-item{display:inline-flex;align-items:center;background:#d2eefb;border-radius:3px;padding:3px 5px;margin:0 0 0 3px;border:1px solid #a9d8ff}.custom-select-item>span{font-size:12px;color:#555;margin-left:3px}.custom-select-item>span i{font-size:10px}.custom-select-item.min{padding:1px 5px;margin-left:2px}.custom-select-item:first-child{margin-left:0}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item{background:#e1e1e1;border-color:#d4d4d4}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item>span{display:none}::ng-deep .ui-multiselect-filter-container .input-mask{padding:.2em;height:22px;width:calc(100% - 2px);box-sizing:border-box;text-indent:1.5em;left:1px;top:1px}::ng-deep .ui-multiselect-filter-container .input-mask:focus{left:1px;width:calc(100% - 2px)}\n"], dependencies: [{ kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i8.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "maxItemDisplay", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "autofocusSelectedItem", "modifyOptionsWhenFilter", "delayFilter", "disabled", "itemSize", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "maxItemDisplay", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "modifyOptionsWhenFilter", "delayFilter", "autocomplete", "showClear", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { kind: "component", type: i12.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dropdown', providers: [ComponentContextService], template: "<div #el class=\"tn-dropdown\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\r\n    [class.server-load]=\"control.isServerLoad\">\r\n    <span class=\"server-load-info\" pTooltip=\"D\u1EEF li\u1EC7u s\u1EBD \u0111\u01B0\u1EE3c l\u00E0m m\u1EDBi ghi t\u00ECm ki\u1EBFm\" tooltipPosition=\"top\"></span>\r\n    <p-dropdown *ngIf=\"!control.multiple\" [options]=\"dataSourceInternal\" [placeholder]=\"control.placeholder\"\r\n        [filter]=\"control.filter\" [panelStyleClass]=\"getPanelClass()\" [appendTo]=\"control.appendTo\"\r\n        [styleClass]=\"'tn-dropdown'\" [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\"\r\n        [disabled]=\"control.disabled ? true : null\" [autoZIndex]=\"true\" [showClear]=\"control.showClear\"\r\n        [showTransitionOptions]=\"showTransitionOptions\" [autoDisplayFirst]=\"control.autoDisplayFirst\"\r\n        [virtualScroll]=\"control.virtualScroll\" itemSize=\"30\" [maxItemDisplay]=\"control.maxItemDisplay\"\r\n        [autofocusSelectedItem]=\"autofocusSelectedItem\" [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        [modifyOptionsWhenFilter]=\"modifyOptionWhenFilter\" [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\"\r\n        (onFocus)=\"handleFocus($event)\" (onBlur)=\"handleBlur($event)\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onShow)=\"onShowHandler($event)\" (onHide)=\"onHideHandler($event)\">\r\n        <ng-template *ngIf=\"control.templateSelectedItem\" let-item pTemplate=\"selectedItem\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"control.templateSelectedItem; context: {$implicit: item, selectedValue: _value}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"control.templateItem\" let-item pTemplate=\"item\">\r\n            <ng-container *ngTemplateOutlet=\"control.templateItem; context: {$implicit: item}\"></ng-container>\r\n        </ng-template>\r\n    </p-dropdown>\r\n    <p-multiSelect *ngIf=\"control.multiple\" [options]=\"dataSourceInternal\" [filter]=\"control.filter\"\r\n        [defaultLabel]=\"control.placeholder\" [placeholder]=\"control.placeholder\" [panelStyleClass]=\"getPanelClass()\"\r\n        [appendTo]=\"control.appendTo\" [styleClass]=\"'tn-dropdown'\"\r\n        [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\" [disabled]=\"control.disabled ? true : null\"\r\n        [autoZIndex]=\"true\" [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\" [virtualScroll]=\"control.virtualScroll\"\r\n        [maxItemDisplay]=\"control.maxItemDisplay\" [selectedItemsLabel]=\"control.selectedItemsLabel\"\r\n        [maxSelectedLabels]=\"control.maxSelectedLabels\" [modifyOptionsWhenFilter]=\"modifyOptionWhenFilterMultiple\"\r\n        [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onPanelShow)=\"onPanelShowHandler($event)\"\r\n        (onPanelHide)=\"onHideHandler($event)\">\r\n        <ng-template pTemplate=\"selectedItems\" let-value>\r\n            <ng-container *ngIf=\"!value || value.length == 0\">{{control.placeholder}}</ng-container>\r\n            <ng-container *ngIf=\"value && value.length > 0\">\r\n                <span *ngFor=\"let selectedItem of value\" [class]=\"_itemSelectedStyleClass\">\r\n                    {{selectedItem[control.displayField]}}<span class=\"remove-item\"\r\n                        (click)=\"removeItem($event, selectedItem)\"><i class=\"fas fa-times\"></i></span>\r\n                </span>\r\n            </ng-container>\r\n        </ng-template>\r\n    </p-multiSelect>\r\n    <input #inputMask class=\"input-mask hide p-inputtext\" type=\"text\" [disabled]=\"loading\"\r\n        [(ngModel)]=\"valueSearchServer\" (keyup)=\"keyUp.next($event)\" />\r\n    <span #buttonSetting class=\"button-setting hide pi pi-cog\" (click)=\"showFormSetting()\"></span>\r\n    <after-view-checked *ngIf=\"!loading\" (loaded)=\"handleLoaded()\"></after-view-checked>\r\n    <button *ngIf=\"control.quickAdd && (control.cols || control.quickAddTemplate)\" type=\"button\" pButton\r\n        icon=\"pi pi-plus\" class=\"p-button-text p-button-rounded button-quick-add\" pTooltip=\"Th\u00EAm nhanh\"\r\n        tooltipPosition=\"top\" (click)=\"showFormQuickAdd()\"></button>\r\n</div>\r\n<tn-dialog *ngIf=\"quickAddDialogModel.showEditForm\" #dialog [header]=\"quickAddDialogModel.header | translate\"\r\n    [popupSize]=\"control.popupSize\" (onHide)=\"quickAddDialogModel.showEditForm = false\">\r\n    <ng-container *ngIf=\"control.cols\" [ngTemplateOutlet]=\"customTemplate['dropdownQuickAddForm']\"\r\n        [ngTemplateOutletContext]=\"{\r\n        $implicit: quickAddDialogModel, parentModel: model, parentContext: context, control: control, \r\n        onSaved: handleSaved, onCancel: handleCancel\r\n    }\"></ng-container>\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"quickAddDialogModel.buttonTemplate\"></ng-container>\r\n    </ng-template>\r\n    <!-- <quick-add-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"formModel\" [control]=\"control\"\r\n        [baseService]=\"control.baseService\" (onSaved)=\"handleSaved()\" (onCancel)=\"handleCancel()\">\r\n    </quick-add-form> -->\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"settingDialogModel.showEditForm\" #dialog [header]=\"settingDialogModel.header | translate\"\r\n    [popupSize]=\"control.popupSize\" (onHide)=\"settingDialogModel.showEditForm = false\">\r\n    <ng-container [ngTemplateOutlet]=\"customTemplate['dropdownQuickAddForm']\" [ngTemplateOutletContext]=\"{\r\n        $implicit: settingDialogModel, onSaved: handleSavedSetting\r\n    }\"></ng-container>\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"settingDialogModel.buttonTemplate\"></ng-container>\r\n    </ng-template>\r\n    <!-- <dropdown-setting-form #formBase [model]=\"settingDialogModel.data.formModel\" (onSaved)=\"handleSavedSetting()\"\r\n        (onCancel)=\"settingDialogModel.showEditForm = false\">\r\n    </dropdown-setting-form> -->\r\n</tn-dialog>\r\n<ng-container *ngTemplateOutlet=\"control.quickAddTemplate; context: {\r\n    handleSaved: handleSaved,\r\n    handleCancel: handleCancel,\r\n    dialogModel: quickAddDialogModel\r\n}\"></ng-container>", styles: [".tn-dropdown{display:flex}.tn-dropdown p-dropdown,.tn-dropdown p-multiSelect{flex:1 1;width:100%}.tn-dropdown>.button-quick-add{flex:0 0 auto}.input-mask{position:absolute;z-index:1;width:100%;padding-left:12px;box-sizing:border-box;border:1px solid transparent;outline:none;background:transparent;border-radius:3px}.input-mask.hide{display:none}.input-mask:focus{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.custom-select-item{display:inline-flex;align-items:center;background:#d2eefb;border-radius:3px;padding:3px 5px;margin:0 0 0 3px;border:1px solid #a9d8ff}.custom-select-item>span{font-size:12px;color:#555;margin-left:3px}.custom-select-item>span i{font-size:10px}.custom-select-item.min{padding:1px 5px;margin-left:2px}.custom-select-item:first-child{margin-left:0}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item{background:#e1e1e1;border-color:#d4d4d4}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item>span{display:none}::ng-deep .ui-multiselect-filter-container .input-mask{padding:.2em;height:22px;width:calc(100% - 2px);box-sizing:border-box;text-indent:1.5em;left:1px;top:1px}::ng-deep .ui-multiselect-filter-container .input-mask:focus{left:1px;width:calc(100% - 2px)}\n"] }]

package/esm2020/components/dropdown/quick-add-form/quick-add-form.component.mjs

@@ -28,7 +28,7 @@ export class QuickAddFormComponent extends DataFormBase {
     }
 }
 QuickAddFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: QuickAddFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-QuickAddFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: QuickAddFormComponent, selector: "quick-add-form", inputs: { control: "control", baseService: "baseService" }, outputs: { onInit: "onInit" }, 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 *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\"\r\n        [label]=\"'FORM.SAVE' | translate\" (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>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i3.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+QuickAddFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: QuickAddFormComponent, selector: "quick-add-form", inputs: { control: "control", baseService: "baseService" }, outputs: { onInit: "onInit" }, 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 *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\"\r\n        [label]=\"'FORM.SAVE' | translate\" (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>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i3.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: QuickAddFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quick-add-form', providers: [ComponentContextService], 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 *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\"\r\n        [label]=\"'FORM.SAVE' | translate\" (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>\r\n" }]