@libs-ui/components-table 0.2.356-27 → 0.2.356-28

package/fesm2022/libs-ui-components-table.mjs

@@ -1,7 +1,7 @@
 import { NgStyle, NgClass, AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import { HttpParams } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Pipe, input, ChangeDetectionStrategy, Component, computed, signal, output, viewChild, inject, DestroyRef, ChangeDetectorRef, effect, untracked } from '@angular/core';
+import { Pipe, signal, input, ChangeDetectionStrategy, Component, computed, output, viewChild, inject, DestroyRef, ChangeDetectorRef, effect, untracked } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@iharbeck/ngx-virtual-scroller';
 import { VirtualScrollerModule } from '@iharbeck/ngx-virtual-scroller';
@@ -23,6 +23,7 @@ import { get, convertObjectToSignal, viewDataNumberByLanguage, cloneDeep, delete
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { fromEvent, of, timer, lastValueFrom } from 'rxjs';
+import { auditTime } from 'rxjs/operators';
 import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
 import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
 import { LibsUiComponentsButtonsStatusComponent } from '@libs-ui/components-buttons-status';
@@ -131,8 +132,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class LibsUiComponentsTableTemplatesComponent {
     lockClick;
+    lockClickTimeoutId;
     functionControls = new Map();
-    isImageError;
+    isImageError = signal(undefined);
     isHover = input();
     configs = input();
     templateCssWrapper = input();
@@ -182,7 +184,7 @@ class LibsUiComponentsTableTemplatesComponent {
     }
     async handlerImageError(event) {
         event.stopPropagation();
-        this.isImageError = true;
+        this.isImageError.set(true);
     }
     async handlerFunctionControl(event, index) {
         this.functionControls.set(index, event);
@@ -198,16 +200,17 @@ class LibsUiComponentsTableTemplatesComponent {
             console.error(error);
         }
         finally {
-            setTimeout(() => {
+            this.lockClickTimeoutId = setTimeout(() => {
                 this.lockClick = false;
             }, 250);
         }
     }
     ngOnDestroy() {
+        clearTimeout(this.lockClickTimeoutId);
         this.functionControls.clear();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTableTemplatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTableTemplatesComponent, isStandalone: true, selector: "libs_ui-components-table-templates", inputs: { isHover: { classPropertyName: "isHover", publicName: "isHover", isSignal: true, isRequired: false, transformFunction: null }, configs: { classPropertyName: "configs", publicName: "configs", isSignal: true, isRequired: false, transformFunction: null }, templateCssWrapper: { classPropertyName: "templateCssWrapper", publicName: "templateCssWrapper", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (configs(); as configs) {\n  @if (item(); as item) {\n    <div class=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n      @for (config of configs; track config) {\n        @if (config.fieldsConfig) {\n          <div [class]=\"config.cssWrapper\">\n            @for (fieldConfig of config.fieldsConfig; track fieldConfig; let index = $index) {\n              @let constHtmlNgStyle = fieldConfig.getNgStyle ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgStyle : item() | async) : fieldConfig.ngStyle || {};\n              @let constHtmlNgClass = fieldConfig.getNgClass ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgClass : item() | async) : fieldConfig.ngClass || {};\n              @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n                @switch (fieldConfig.instance) {\n                  @case ('tooltip') {\n                    @if (fieldConfig.tooltip || {}; as tooltip) {\n                      <span\n                        LibsUiComponentsPopoverDirective\n                        [type]=\"tooltip.type || 'text'\"\n                        [mode]=\"tooltip.mode || 'hover'\"\n                        [isAddContentToParentDocument]=\"tooltip.isAddContentToParentDocument || false\"\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [classInclude]=\"tooltip.classInclude || ' '\"\n                        [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n                        [config]=\"\n                          (fieldConfig.getTooltipConfig\n                            ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getTooltipConfig : item() | async)\n                            : (tooltip.config | LibsUiPipesCloneObjectPipe)\n                          ) | translate\n                        \"\n                        [innerHTML]=\"\n                          (fieldConfig.field ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\n                        \"\n                        (outEvent)=\"handlerItemClick($event, fieldConfig)\"></span>\n                    }\n                  }\n                  @case ('image') {\n                    @if (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getImageSrc : item() : isImageError | async; as linkImage) {\n                      @if (linkImage !== ' ') {\n                        <img\n                          [ngStyle]=\"constHtmlNgStyle\"\n                          [ngClass]=\"constHtmlNgClass\"\n                          [src]=\"linkImage\"\n                          (error)=\"handlerImageError($event)\"\n                          (click)=\"handlerItemClick($event, fieldConfig)\" />\n                      }\n                    }\n                  }\n\n                  @case ('avatar') {\n                    @let constHtmlAvatarConfig =\n                      item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getAvatarConfig : item() : undefined : { valueIsEmpty: undefined } | async;\n                    @if (constHtmlAvatarConfig) {\n                      <libs_ui-components-avatar\n                        [typeShape]=\"constHtmlAvatarConfig.typeShape || 'circle'\"\n                        [classInclude]=\"constHtmlAvatarConfig.classInclude\"\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [size]=\"constHtmlAvatarConfig.size || 32\"\n                        [linkAvatar]=\"constHtmlAvatarConfig.linkAvatar\"\n                        [linkAvatarError]=\"constHtmlAvatarConfig.linkAvatarError\"\n                        [idGenColor]=\"constHtmlAvatarConfig.idGenColor\"\n                        [getLastTextAfterSpace]=\"constHtmlAvatarConfig.getLastTextAfterSpace\"\n                        [textAvatar]=\"constHtmlAvatarConfig.textAvatar\" />\n                    }\n                  }\n\n                  @case ('buttons') {\n                    @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n                      <div\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n                        @for (button of fieldConfig.buttons || (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getButtonsByItem : item() | async); track button) {\n                          <libs_ui-components-buttons-button\n                            [type]=\"button().type || 'button-primary'\"\n                            [sizeButton]=\"button().sizeButton || 'smaller'\"\n                            [disable]=\"\n                              (button().disable ?? fieldConfig.getDisable) ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async) : false\n                            \"\n                            [label]=\"button().label || ' '\"\n                            [classIconLeft]=\"button().classIconLeft || ''\"\n                            [classIconRight]=\"button().classIconRight || ''\"\n                            [popover]=\"button().popover || {}\"\n                            [classInclude]=\"button().classInclude || ''\"\n                            [ignorePointerEvent]=\"button().ignorePointerEvent\"\n                            [iconOnlyType]=\"button().iconOnlyType\"\n                            (outClick)=\"clickButtonAction(button())\" />\n                        }\n                      </div>\n                    }\n                  }\n\n                  @case ('button-status') {\n                    <libs_ui-components-buttons-status\n                      [config]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n                      (click)=\"handlerItemClick($event, fieldConfig)\" />\n                  }\n\n                  @case ('switch') {\n                    <libs_ui-components-switch\n                      [active]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getActiveValueSwitch : item() | async\"\n                      [disable]=\"fieldConfig.getDisableValueSwitch ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisableValueSwitch : item() | async) : false\"\n                      (outSwitch)=\"handlerSwitch($event, fieldConfig)\" />\n                  }\n\n                  @case (fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup' ? fieldConfig.instance : '') {\n                    @if ((item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async) !== ' ') {\n                      @let constHtmlDisableDropdown =\n                        (fieldConfig.dropdownConfig?.disable ?? fieldConfig.getDisable)\n                          ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async)\n                          : false;\n                      <div\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n                        <libs_ui-components-dropdown\n                          [isNgContent]=\"true\"\n                          [popoverCustomConfig]=\"{\n                            widthByParent: false,\n                            ignoreArrow: fieldConfig.dropdownConfig?.ignoreArrow || false,\n                            maxHeight: fieldConfig.dropdownConfig?.maxHeight || 2048,\n                            paddingLeftItem: fieldConfig.dropdownConfig?.paddingLeftItem ?? true,\n                            classInclude: fieldConfig.dropdownConfig?.classIncludePopup || 'w-[250px]',\n                            position: fieldConfig.dropdownConfig?.position || {\n                              mode: 'center',\n                              distance: 0,\n                            },\n                          }\"\n                          [zIndex]=\"fieldConfig.dropdownConfig?.zIndex\"\n                          [listConfig]=\"\n                            fieldConfig.dropdownConfig?.getListConfig\n                              ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.dropdownConfig?.getListConfig : item() | async)\n                              : fieldConfig.dropdownConfig?.listConfig\n                          \"\n                          [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n                          [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n                          [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n                          [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n                          [disable]=\"constHtmlDisableDropdown\"\n                          (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n                          (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index, $event)\"\n                          (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index, $event)\">\n                          @if (fieldConfig.instance === 'other-action-show-popup') {\n                            <div [innerHtml]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\"></div>\n                          }\n                          @if (fieldConfig.instance === 'badge') {\n                            @let constHtmlDataBadge = item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async;\n                            @if (constHtmlDataBadge > 0) {\n                              <libs_ui-components-badge\n                                [active]=\"true\"\n                                [ignoreMarginDefault]=\"true\"\n                                mode=\"+x\"\n                                [count]=\"constHtmlDataBadge\"\n                                [maxCount]=\"99\" />\n                            }\n                          }\n                          @if (fieldConfig.instance === 'button-action-show-popup') {\n                            <libs_ui-components-buttons-button\n                              [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n                              [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n                              [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? constHtmlDisableDropdown\"\n                              [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n                              [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n                              [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n                              [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n                              [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n                              [ignoreStopPropagationEvent]=\"true\" />\n                          }\n                        </libs_ui-components-dropdown>\n                      </div>\n                    }\n                  }\n\n                  @case ('line-clamp') {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\">\n                      @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n                        <libs_ui-components-line_clamp\n                          [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n                          [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n                          [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n                          [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n                          [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n                          [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n                          [isInnerText]=\"lineClampConfig.isInnerText || false\"\n                          [ignoreStopPropagationTooltipEvent]=\"true\"\n                          [content]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n                          (click)=\"handlerItemClick($event, fieldConfig)\" />\n                      }\n                    </div>\n                  }\n\n                  @case ('shape-style') {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\"\n                      [innerHTML]=\"\n                        item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n                      \"\n                      (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n                  }\n                  @default {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\"\n                      [innerHTML]=\"\n                        item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n                      \"\n                      (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n                  }\n                }\n              } @else {\n                @if (fieldConfig.rows) {\n                  <div\n                    class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n                    [style.height.px]=\"rowRef.clientHeight\">\n                    <div\n                      #rowRef\n                      class=\"w-full flex absolute  {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                      <libs_ui-components-table-templates\n                        class=\"flex w-full\"\n                        [item]=\"item\"\n                        [configs]=\"fieldConfig.rows\" />\n                    </div>\n                  </div>\n                } @else {\n                  <ng-container\n                    *ngComponentOutlet=\"\n                      item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getComponentOutlet : item() | async;\n                      inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDataComponentOutlet : item() : fieldConfig.field : { valueIsEmpty: { item: item() } } | async\n                    \" />\n                }\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsTableTemplatesComponent, selector: "libs_ui-components-table-templates", inputs: ["isHover", "configs", "templateCssWrapper", "item"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containerTextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsStatusComponent, selector: "libs_ui-components-buttons-status", inputs: ["config"] }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "pipe", type: LibsUiPipesCloneObjectPipe, name: "LibsUiPipesCloneObjectPipe" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsLineClampComponent, selector: "libs_ui-components-line_clamp", inputs: ["content", "lengthLimitDisplay", "maxHeight", "ignoreShowButtonCollapseExpand", "ignoreShowButtonCollapse", "showTooltip", "timeHidePopoverOnMouseout", "maxWidthTooltip", "maxHeightTooltip", "zIndexPopover", "isInnerText", "classClassLabelButtonCollapseExpand", "classClassIncludeButtonCollapseExpand", "ignoreStopPropagationTooltipEvent", "ngClassObject", "hasBackgroundGradient", "labelButtonViewMore", "labelButtonCollapse", "directionTooltip", "useXssFilter", "defaultIsCollapse"], outputs: ["outDisplayLineClamp", "outAction", "outClick", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "dropdownTemplateRefNotSearchNoData", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTableTemplatesComponent, isStandalone: true, selector: "libs_ui-components-table-templates", inputs: { isHover: { classPropertyName: "isHover", publicName: "isHover", isSignal: true, isRequired: false, transformFunction: null }, configs: { classPropertyName: "configs", publicName: "configs", isSignal: true, isRequired: false, transformFunction: null }, templateCssWrapper: { classPropertyName: "templateCssWrapper", publicName: "templateCssWrapper", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (configs(); as configs) {\n  @if (item(); as item) {\n    <div class=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n      @for (config of configs; track config) {\n        @if (config.fieldsConfig) {\n          <div [class]=\"config.cssWrapper\">\n            @for (fieldConfig of config.fieldsConfig; track fieldConfig; let index = $index) {\n              @let constHtmlNgStyle = fieldConfig.getNgStyle ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgStyle : item() | async) : fieldConfig.ngStyle || {};\n              @let constHtmlNgClass = fieldConfig.getNgClass ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgClass : item() | async) : fieldConfig.ngClass || {};\n              @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n                @switch (fieldConfig.instance) {\n                  @case ('tooltip') {\n                    @if (fieldConfig.tooltip || {}; as tooltip) {\n                      <span\n                        LibsUiComponentsPopoverDirective\n                        [type]=\"tooltip.type || 'text'\"\n                        [mode]=\"tooltip.mode || 'hover'\"\n                        [isAddContentToParentDocument]=\"tooltip.isAddContentToParentDocument || false\"\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [classInclude]=\"tooltip.classInclude || ' '\"\n                        [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n                        [config]=\"\n                          (fieldConfig.getTooltipConfig\n                            ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getTooltipConfig : item() | async)\n                            : (tooltip.config | LibsUiPipesCloneObjectPipe)\n                          ) | translate\n                        \"\n                        [innerHTML]=\"\n                          (fieldConfig.field ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\n                        \"\n                        (outEvent)=\"handlerItemClick($event, fieldConfig)\"></span>\n                    }\n                  }\n                  @case ('image') {\n                    @if (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getImageSrc : item() : isImageError() | async; as linkImage) {\n                      @if (linkImage !== ' ') {\n                        <img\n                          [ngStyle]=\"constHtmlNgStyle\"\n                          [ngClass]=\"constHtmlNgClass\"\n                          [src]=\"linkImage\"\n                          (error)=\"handlerImageError($event)\"\n                          (click)=\"handlerItemClick($event, fieldConfig)\" />\n                      }\n                    }\n                  }\n\n                  @case ('avatar') {\n                    @let constHtmlAvatarConfig =\n                      item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getAvatarConfig : item() : undefined : { valueIsEmpty: undefined } | async;\n                    @if (constHtmlAvatarConfig) {\n                      <libs_ui-components-avatar\n                        [typeShape]=\"constHtmlAvatarConfig.typeShape || 'circle'\"\n                        [classInclude]=\"constHtmlAvatarConfig.classInclude\"\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [size]=\"constHtmlAvatarConfig.size || 32\"\n                        [linkAvatar]=\"constHtmlAvatarConfig.linkAvatar\"\n                        [linkAvatarError]=\"constHtmlAvatarConfig.linkAvatarError\"\n                        [idGenColor]=\"constHtmlAvatarConfig.idGenColor\"\n                        [getLastTextAfterSpace]=\"constHtmlAvatarConfig.getLastTextAfterSpace\"\n                        [textAvatar]=\"constHtmlAvatarConfig.textAvatar\" />\n                    }\n                  }\n\n                  @case ('buttons') {\n                    @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n                      <div\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n                        @for (button of fieldConfig.buttons || (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getButtonsByItem : item() | async); track button) {\n                          <libs_ui-components-buttons-button\n                            [type]=\"button().type || 'button-primary'\"\n                            [sizeButton]=\"button().sizeButton || 'smaller'\"\n                            [disable]=\"\n                              (button().disable ?? fieldConfig.getDisable) ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async) : false\n                            \"\n                            [label]=\"button().label || ' '\"\n                            [classIconLeft]=\"button().classIconLeft || ''\"\n                            [classIconRight]=\"button().classIconRight || ''\"\n                            [popover]=\"button().popover || {}\"\n                            [classInclude]=\"button().classInclude || ''\"\n                            [ignorePointerEvent]=\"button().ignorePointerEvent\"\n                            [iconOnlyType]=\"button().iconOnlyType\"\n                            (outClick)=\"clickButtonAction(button())\" />\n                        }\n                      </div>\n                    }\n                  }\n\n                  @case ('button-status') {\n                    <libs_ui-components-buttons-status\n                      [config]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n                      (click)=\"handlerItemClick($event, fieldConfig)\" />\n                  }\n\n                  @case ('switch') {\n                    <libs_ui-components-switch\n                      [active]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getActiveValueSwitch : item() | async\"\n                      [disable]=\"fieldConfig.getDisableValueSwitch ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisableValueSwitch : item() | async) : false\"\n                      (outSwitch)=\"handlerSwitch($event, fieldConfig)\" />\n                  }\n\n                  @case (fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup' ? fieldConfig.instance : '') {\n                    @if ((item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async) !== ' ') {\n                      @let constHtmlDisableDropdown =\n                        (fieldConfig.dropdownConfig?.disable ?? fieldConfig.getDisable)\n                          ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async)\n                          : false;\n                      <div\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n                        <libs_ui-components-dropdown\n                          [isNgContent]=\"true\"\n                          [popoverCustomConfig]=\"{\n                            widthByParent: false,\n                            ignoreArrow: fieldConfig.dropdownConfig?.ignoreArrow || false,\n                            maxHeight: fieldConfig.dropdownConfig?.maxHeight || 2048,\n                            paddingLeftItem: fieldConfig.dropdownConfig?.paddingLeftItem ?? true,\n                            classInclude: fieldConfig.dropdownConfig?.classIncludePopup || 'w-[250px]',\n                            position: fieldConfig.dropdownConfig?.position || {\n                              mode: 'center',\n                              distance: 0,\n                            },\n                          }\"\n                          [zIndex]=\"fieldConfig.dropdownConfig?.zIndex\"\n                          [listConfig]=\"\n                            fieldConfig.dropdownConfig?.getListConfig\n                              ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.dropdownConfig?.getListConfig : item() | async)\n                              : fieldConfig.dropdownConfig?.listConfig\n                          \"\n                          [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n                          [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n                          [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n                          [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n                          [disable]=\"constHtmlDisableDropdown\"\n                          (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n                          (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index, $event)\"\n                          (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index, $event)\">\n                          @if (fieldConfig.instance === 'other-action-show-popup') {\n                            <div [innerHtml]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\"></div>\n                          }\n                          @if (fieldConfig.instance === 'badge') {\n                            @let constHtmlDataBadge = item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async;\n                            @if (constHtmlDataBadge > 0) {\n                              <libs_ui-components-badge\n                                [active]=\"true\"\n                                [ignoreMarginDefault]=\"true\"\n                                mode=\"+x\"\n                                [count]=\"constHtmlDataBadge\"\n                                [maxCount]=\"99\" />\n                            }\n                          }\n                          @if (fieldConfig.instance === 'button-action-show-popup') {\n                            <libs_ui-components-buttons-button\n                              [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n                              [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n                              [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? constHtmlDisableDropdown\"\n                              [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n                              [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n                              [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n                              [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n                              [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n                              [ignoreStopPropagationEvent]=\"true\" />\n                          }\n                        </libs_ui-components-dropdown>\n                      </div>\n                    }\n                  }\n\n                  @case ('line-clamp') {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\">\n                      @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n                        <libs_ui-components-line_clamp\n                          [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n                          [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n                          [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n                          [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n                          [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n                          [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n                          [isInnerText]=\"lineClampConfig.isInnerText || false\"\n                          [ignoreStopPropagationTooltipEvent]=\"true\"\n                          [content]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n                          (click)=\"handlerItemClick($event, fieldConfig)\" />\n                      }\n                    </div>\n                  }\n\n                  @case ('shape-style') {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\"\n                      [innerHTML]=\"\n                        item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n                      \"\n                      (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n                  }\n                  @default {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\"\n                      [innerHTML]=\"\n                        item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n                      \"\n                      (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n                  }\n                }\n              } @else {\n                @if (fieldConfig.rows) {\n                  <div\n                    class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n                    [style.height.px]=\"rowRef.clientHeight\">\n                    <div\n                      #rowRef\n                      class=\"w-full flex absolute  {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                      <libs_ui-components-table-templates\n                        class=\"flex w-full\"\n                        [item]=\"item\"\n                        [configs]=\"fieldConfig.rows\" />\n                    </div>\n                  </div>\n                } @else {\n                  <ng-container\n                    *ngComponentOutlet=\"\n                      item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getComponentOutlet : item() | async;\n                      inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDataComponentOutlet : item() : fieldConfig.field : { valueIsEmpty: { item: item() } } | async\n                    \" />\n                }\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsTableTemplatesComponent, selector: "libs_ui-components-table-templates", inputs: ["isHover", "configs", "templateCssWrapper", "item"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containerTextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsStatusComponent, selector: "libs_ui-components-buttons-status", inputs: ["config"] }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "pipe", type: LibsUiPipesCloneObjectPipe, name: "LibsUiPipesCloneObjectPipe" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsLineClampComponent, selector: "libs_ui-components-line_clamp", inputs: ["content", "lengthLimitDisplay", "maxHeight", "ignoreShowButtonCollapseExpand", "ignoreShowButtonCollapse", "showTooltip", "timeHidePopoverOnMouseout", "maxWidthTooltip", "maxHeightTooltip", "zIndexPopover", "isInnerText", "classClassLabelButtonCollapseExpand", "classClassIncludeButtonCollapseExpand", "ignoreStopPropagationTooltipEvent", "ngClassObject", "hasBackgroundGradient", "labelButtonViewMore", "labelButtonCollapse", "directionTooltip", "useXssFilter", "defaultIsCollapse"], outputs: ["outDisplayLineClamp", "outAction", "outClick", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "dropdownTemplateRefNotSearchNoData", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTableTemplatesComponent, decorators: [{
             type: Component,
@@ -229,56 +232,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiComponentsLineClampComponent,
                         LibsUiComponentsDropdownComponent,
                         LibsUiComponentsBadgeComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (configs(); as configs) {\n  @if (item(); as item) {\n    <div class=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n      @for (config of configs; track config) {\n        @if (config.fieldsConfig) {\n          <div [class]=\"config.cssWrapper\">\n            @for (fieldConfig of config.fieldsConfig; track fieldConfig; let index = $index) {\n              @let constHtmlNgStyle = fieldConfig.getNgStyle ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgStyle : item() | async) : fieldConfig.ngStyle || {};\n              @let constHtmlNgClass = fieldConfig.getNgClass ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgClass : item() | async) : fieldConfig.ngClass || {};\n              @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n                @switch (fieldConfig.instance) {\n                  @case ('tooltip') {\n                    @if (fieldConfig.tooltip || {}; as tooltip) {\n                      <span\n                        LibsUiComponentsPopoverDirective\n                        [type]=\"tooltip.type || 'text'\"\n                        [mode]=\"tooltip.mode || 'hover'\"\n                        [isAddContentToParentDocument]=\"tooltip.isAddContentToParentDocument || false\"\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [classInclude]=\"tooltip.classInclude || ' '\"\n                        [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n                        [config]=\"\n                          (fieldConfig.getTooltipConfig\n                            ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getTooltipConfig : item() | async)\n                            : (tooltip.config | LibsUiPipesCloneObjectPipe)\n                          ) | translate\n                        \"\n                        [innerHTML]=\"\n                          (fieldConfig.field ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\n                        \"\n                        (outEvent)=\"handlerItemClick($event, fieldConfig)\"></span>\n                    }\n                  }\n                  @case ('image') {\n                    @if (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getImageSrc : item() : isImageError | async; as linkImage) {\n                      @if (linkImage !== ' ') {\n                        <img\n                          [ngStyle]=\"constHtmlNgStyle\"\n                          [ngClass]=\"constHtmlNgClass\"\n                          [src]=\"linkImage\"\n                          (error)=\"handlerImageError($event)\"\n                          (click)=\"handlerItemClick($event, fieldConfig)\" />\n                      }\n                    }\n                  }\n\n                  @case ('avatar') {\n                    @let constHtmlAvatarConfig =\n                      item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getAvatarConfig : item() : undefined : { valueIsEmpty: undefined } | async;\n                    @if (constHtmlAvatarConfig) {\n                      <libs_ui-components-avatar\n                        [typeShape]=\"constHtmlAvatarConfig.typeShape || 'circle'\"\n                        [classInclude]=\"constHtmlAvatarConfig.classInclude\"\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [size]=\"constHtmlAvatarConfig.size || 32\"\n                        [linkAvatar]=\"constHtmlAvatarConfig.linkAvatar\"\n                        [linkAvatarError]=\"constHtmlAvatarConfig.linkAvatarError\"\n                        [idGenColor]=\"constHtmlAvatarConfig.idGenColor\"\n                        [getLastTextAfterSpace]=\"constHtmlAvatarConfig.getLastTextAfterSpace\"\n                        [textAvatar]=\"constHtmlAvatarConfig.textAvatar\" />\n                    }\n                  }\n\n                  @case ('buttons') {\n                    @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n                      <div\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n                        @for (button of fieldConfig.buttons || (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getButtonsByItem : item() | async); track button) {\n                          <libs_ui-components-buttons-button\n                            [type]=\"button().type || 'button-primary'\"\n                            [sizeButton]=\"button().sizeButton || 'smaller'\"\n                            [disable]=\"\n                              (button().disable ?? fieldConfig.getDisable) ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async) : false\n                            \"\n                            [label]=\"button().label || ' '\"\n                            [classIconLeft]=\"button().classIconLeft || ''\"\n                            [classIconRight]=\"button().classIconRight || ''\"\n                            [popover]=\"button().popover || {}\"\n                            [classInclude]=\"button().classInclude || ''\"\n                            [ignorePointerEvent]=\"button().ignorePointerEvent\"\n                            [iconOnlyType]=\"button().iconOnlyType\"\n                            (outClick)=\"clickButtonAction(button())\" />\n                        }\n                      </div>\n                    }\n                  }\n\n                  @case ('button-status') {\n                    <libs_ui-components-buttons-status\n                      [config]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n                      (click)=\"handlerItemClick($event, fieldConfig)\" />\n                  }\n\n                  @case ('switch') {\n                    <libs_ui-components-switch\n                      [active]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getActiveValueSwitch : item() | async\"\n                      [disable]=\"fieldConfig.getDisableValueSwitch ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisableValueSwitch : item() | async) : false\"\n                      (outSwitch)=\"handlerSwitch($event, fieldConfig)\" />\n                  }\n\n                  @case (fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup' ? fieldConfig.instance : '') {\n                    @if ((item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async) !== ' ') {\n                      @let constHtmlDisableDropdown =\n                        (fieldConfig.dropdownConfig?.disable ?? fieldConfig.getDisable)\n                          ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async)\n                          : false;\n                      <div\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n                        <libs_ui-components-dropdown\n                          [isNgContent]=\"true\"\n                          [popoverCustomConfig]=\"{\n                            widthByParent: false,\n                            ignoreArrow: fieldConfig.dropdownConfig?.ignoreArrow || false,\n                            maxHeight: fieldConfig.dropdownConfig?.maxHeight || 2048,\n                            paddingLeftItem: fieldConfig.dropdownConfig?.paddingLeftItem ?? true,\n                            classInclude: fieldConfig.dropdownConfig?.classIncludePopup || 'w-[250px]',\n                            position: fieldConfig.dropdownConfig?.position || {\n                              mode: 'center',\n                              distance: 0,\n                            },\n                          }\"\n                          [zIndex]=\"fieldConfig.dropdownConfig?.zIndex\"\n                          [listConfig]=\"\n                            fieldConfig.dropdownConfig?.getListConfig\n                              ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.dropdownConfig?.getListConfig : item() | async)\n                              : fieldConfig.dropdownConfig?.listConfig\n                          \"\n                          [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n                          [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n                          [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n                          [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n                          [disable]=\"constHtmlDisableDropdown\"\n                          (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n                          (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index, $event)\"\n                          (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index, $event)\">\n                          @if (fieldConfig.instance === 'other-action-show-popup') {\n                            <div [innerHtml]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\"></div>\n                          }\n                          @if (fieldConfig.instance === 'badge') {\n                            @let constHtmlDataBadge = item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async;\n                            @if (constHtmlDataBadge > 0) {\n                              <libs_ui-components-badge\n                                [active]=\"true\"\n                                [ignoreMarginDefault]=\"true\"\n                                mode=\"+x\"\n                                [count]=\"constHtmlDataBadge\"\n                                [maxCount]=\"99\" />\n                            }\n                          }\n                          @if (fieldConfig.instance === 'button-action-show-popup') {\n                            <libs_ui-components-buttons-button\n                              [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n                              [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n                              [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? constHtmlDisableDropdown\"\n                              [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n                              [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n                              [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n                              [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n                              [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n                              [ignoreStopPropagationEvent]=\"true\" />\n                          }\n                        </libs_ui-components-dropdown>\n                      </div>\n                    }\n                  }\n\n                  @case ('line-clamp') {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\">\n                      @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n                        <libs_ui-components-line_clamp\n                          [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n                          [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n                          [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n                          [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n                          [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n                          [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n                          [isInnerText]=\"lineClampConfig.isInnerText || false\"\n                          [ignoreStopPropagationTooltipEvent]=\"true\"\n                          [content]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n                          (click)=\"handlerItemClick($event, fieldConfig)\" />\n                      }\n                    </div>\n                  }\n\n                  @case ('shape-style') {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\"\n                      [innerHTML]=\"\n                        item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n                      \"\n                      (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n                  }\n                  @default {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\"\n                      [innerHTML]=\"\n                        item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n                      \"\n                      (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n                  }\n                }\n              } @else {\n                @if (fieldConfig.rows) {\n                  <div\n                    class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n                    [style.height.px]=\"rowRef.clientHeight\">\n                    <div\n                      #rowRef\n                      class=\"w-full flex absolute  {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                      <libs_ui-components-table-templates\n                        class=\"flex w-full\"\n                        [item]=\"item\"\n                        [configs]=\"fieldConfig.rows\" />\n                    </div>\n                  </div>\n                } @else {\n                  <ng-container\n                    *ngComponentOutlet=\"\n                      item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getComponentOutlet : item() | async;\n                      inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDataComponentOutlet : item() : fieldConfig.field : { valueIsEmpty: { item: item() } } | async\n                    \" />\n                }\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (configs(); as configs) {\n  @if (item(); as item) {\n    <div class=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n      @for (config of configs; track config) {\n        @if (config.fieldsConfig) {\n          <div [class]=\"config.cssWrapper\">\n            @for (fieldConfig of config.fieldsConfig; track fieldConfig; let index = $index) {\n              @let constHtmlNgStyle = fieldConfig.getNgStyle ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgStyle : item() | async) : fieldConfig.ngStyle || {};\n              @let constHtmlNgClass = fieldConfig.getNgClass ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgClass : item() | async) : fieldConfig.ngClass || {};\n              @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n                @switch (fieldConfig.instance) {\n                  @case ('tooltip') {\n                    @if (fieldConfig.tooltip || {}; as tooltip) {\n                      <span\n                        LibsUiComponentsPopoverDirective\n                        [type]=\"tooltip.type || 'text'\"\n                        [mode]=\"tooltip.mode || 'hover'\"\n                        [isAddContentToParentDocument]=\"tooltip.isAddContentToParentDocument || false\"\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [classInclude]=\"tooltip.classInclude || ' '\"\n                        [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n                        [config]=\"\n                          (fieldConfig.getTooltipConfig\n                            ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getTooltipConfig : item() | async)\n                            : (tooltip.config | LibsUiPipesCloneObjectPipe)\n                          ) | translate\n                        \"\n                        [innerHTML]=\"\n                          (fieldConfig.field ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\n                        \"\n                        (outEvent)=\"handlerItemClick($event, fieldConfig)\"></span>\n                    }\n                  }\n                  @case ('image') {\n                    @if (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getImageSrc : item() : isImageError() | async; as linkImage) {\n                      @if (linkImage !== ' ') {\n                        <img\n                          [ngStyle]=\"constHtmlNgStyle\"\n                          [ngClass]=\"constHtmlNgClass\"\n                          [src]=\"linkImage\"\n                          (error)=\"handlerImageError($event)\"\n                          (click)=\"handlerItemClick($event, fieldConfig)\" />\n                      }\n                    }\n                  }\n\n                  @case ('avatar') {\n                    @let constHtmlAvatarConfig =\n                      item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getAvatarConfig : item() : undefined : { valueIsEmpty: undefined } | async;\n                    @if (constHtmlAvatarConfig) {\n                      <libs_ui-components-avatar\n                        [typeShape]=\"constHtmlAvatarConfig.typeShape || 'circle'\"\n                        [classInclude]=\"constHtmlAvatarConfig.classInclude\"\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [size]=\"constHtmlAvatarConfig.size || 32\"\n                        [linkAvatar]=\"constHtmlAvatarConfig.linkAvatar\"\n                        [linkAvatarError]=\"constHtmlAvatarConfig.linkAvatarError\"\n                        [idGenColor]=\"constHtmlAvatarConfig.idGenColor\"\n                        [getLastTextAfterSpace]=\"constHtmlAvatarConfig.getLastTextAfterSpace\"\n                        [textAvatar]=\"constHtmlAvatarConfig.textAvatar\" />\n                    }\n                  }\n\n                  @case ('buttons') {\n                    @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n                      <div\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n                        @for (button of fieldConfig.buttons || (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getButtonsByItem : item() | async); track button) {\n                          <libs_ui-components-buttons-button\n                            [type]=\"button().type || 'button-primary'\"\n                            [sizeButton]=\"button().sizeButton || 'smaller'\"\n                            [disable]=\"\n                              (button().disable ?? fieldConfig.getDisable) ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async) : false\n                            \"\n                            [label]=\"button().label || ' '\"\n                            [classIconLeft]=\"button().classIconLeft || ''\"\n                            [classIconRight]=\"button().classIconRight || ''\"\n                            [popover]=\"button().popover || {}\"\n                            [classInclude]=\"button().classInclude || ''\"\n                            [ignorePointerEvent]=\"button().ignorePointerEvent\"\n                            [iconOnlyType]=\"button().iconOnlyType\"\n                            (outClick)=\"clickButtonAction(button())\" />\n                        }\n                      </div>\n                    }\n                  }\n\n                  @case ('button-status') {\n                    <libs_ui-components-buttons-status\n                      [config]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n                      (click)=\"handlerItemClick($event, fieldConfig)\" />\n                  }\n\n                  @case ('switch') {\n                    <libs_ui-components-switch\n                      [active]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getActiveValueSwitch : item() | async\"\n                      [disable]=\"fieldConfig.getDisableValueSwitch ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisableValueSwitch : item() | async) : false\"\n                      (outSwitch)=\"handlerSwitch($event, fieldConfig)\" />\n                  }\n\n                  @case (fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup' ? fieldConfig.instance : '') {\n                    @if ((item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async) !== ' ') {\n                      @let constHtmlDisableDropdown =\n                        (fieldConfig.dropdownConfig?.disable ?? fieldConfig.getDisable)\n                          ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async)\n                          : false;\n                      <div\n                        [ngStyle]=\"constHtmlNgStyle\"\n                        [ngClass]=\"constHtmlNgClass\"\n                        [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n                        <libs_ui-components-dropdown\n                          [isNgContent]=\"true\"\n                          [popoverCustomConfig]=\"{\n                            widthByParent: false,\n                            ignoreArrow: fieldConfig.dropdownConfig?.ignoreArrow || false,\n                            maxHeight: fieldConfig.dropdownConfig?.maxHeight || 2048,\n                            paddingLeftItem: fieldConfig.dropdownConfig?.paddingLeftItem ?? true,\n                            classInclude: fieldConfig.dropdownConfig?.classIncludePopup || 'w-[250px]',\n                            position: fieldConfig.dropdownConfig?.position || {\n                              mode: 'center',\n                              distance: 0,\n                            },\n                          }\"\n                          [zIndex]=\"fieldConfig.dropdownConfig?.zIndex\"\n                          [listConfig]=\"\n                            fieldConfig.dropdownConfig?.getListConfig\n                              ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.dropdownConfig?.getListConfig : item() | async)\n                              : fieldConfig.dropdownConfig?.listConfig\n                          \"\n                          [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n                          [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n                          [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n                          [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n                          [disable]=\"constHtmlDisableDropdown\"\n                          (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n                          (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index, $event)\"\n                          (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index, $event)\">\n                          @if (fieldConfig.instance === 'other-action-show-popup') {\n                            <div [innerHtml]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\"></div>\n                          }\n                          @if (fieldConfig.instance === 'badge') {\n                            @let constHtmlDataBadge = item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async;\n                            @if (constHtmlDataBadge > 0) {\n                              <libs_ui-components-badge\n                                [active]=\"true\"\n                                [ignoreMarginDefault]=\"true\"\n                                mode=\"+x\"\n                                [count]=\"constHtmlDataBadge\"\n                                [maxCount]=\"99\" />\n                            }\n                          }\n                          @if (fieldConfig.instance === 'button-action-show-popup') {\n                            <libs_ui-components-buttons-button\n                              [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n                              [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n                              [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? constHtmlDisableDropdown\"\n                              [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n                              [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n                              [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n                              [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n                              [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n                              [ignoreStopPropagationEvent]=\"true\" />\n                          }\n                        </libs_ui-components-dropdown>\n                      </div>\n                    }\n                  }\n\n                  @case ('line-clamp') {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\">\n                      @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n                        <libs_ui-components-line_clamp\n                          [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n                          [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n                          [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n                          [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n                          [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n                          [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n                          [isInnerText]=\"lineClampConfig.isInnerText || false\"\n                          [ignoreStopPropagationTooltipEvent]=\"true\"\n                          [content]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n                          (click)=\"handlerItemClick($event, fieldConfig)\" />\n                      }\n                    </div>\n                  }\n\n                  @case ('shape-style') {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\"\n                      [innerHTML]=\"\n                        item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n                      \"\n                      (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n                  }\n                  @default {\n                    <div\n                      [ngStyle]=\"constHtmlNgStyle\"\n                      [ngClass]=\"constHtmlNgClass\"\n                      [innerHTML]=\"\n                        item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n                      \"\n                      (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n                  }\n                }\n              } @else {\n                @if (fieldConfig.rows) {\n                  <div\n                    class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n                    [style.height.px]=\"rowRef.clientHeight\">\n                    <div\n                      #rowRef\n                      class=\"w-full flex absolute  {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                      <libs_ui-components-table-templates\n                        class=\"flex w-full\"\n                        [item]=\"item\"\n                        [configs]=\"fieldConfig.rows\" />\n                    </div>\n                  </div>\n                } @else {\n                  <ng-container\n                    *ngComponentOutlet=\"\n                      item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getComponentOutlet : item() | async;\n                      inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDataComponentOutlet : item() : fieldConfig.field : { valueIsEmpty: { item: item() } } | async\n                    \" />\n                }\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class LibsUiComponentsTableComponent {
-    /** PROPERTY */
-    classHeaderContainer = computed(() => `libs-ui-table-header-container w-full absolute flex shrink-0 ${this.ignoreClassBgHeader() ? '' : 'bg-white'} overflow-x-hidden z-[1] items-center ${this.classHeaderContainerInclude() || ''}`);
-    classHeaderLeftContainer = computed(() => `h-full flex sticky top-0 left-0 z-[1] ${this.ignoreClassBgHeader() ? '' : 'bg-white'} ${this.classHeaderLeftInclude() || ''}`);
-    keysSelected = signal([]);
-    loading = signal(false);
-    stores = signal([]);
-    items = signal([]);
-    itemFooter = signal(undefined);
+    /** GROUP 1 — private non-signal */
+    functionControlSelectMoreItem;
+    /** GROUP 2 — protected non-signal */
     itemOfIndexHover;
-    keySearch = signal('');
-    totalItemInBackend = signal(0);
-    totalItemDisplay = computed(() => viewDataNumberByLanguage(this.totalItem() ?? this.totalItemInBackend(), false));
-    listConfigMoreItem = computed(() => {
-        return {
-            type: 'text',
-            configTemplateText: signal({
-                fieldKey: 'key',
-                ignoreIconSelected: true,
-                getValue: this.configSelectMoreItem()?.getValue,
-                configLabelPopover: signal({
-                    zIndex: 1200,
-                }),
-            }),
-            httpRequestData: signal({
-                objectInstance: returnListObject(this.configSelectMoreItem()?.listOption),
-                functionName: 'list',
-                argumentsValue: [],
-            }),
-        };
+    /** GROUP 3 — private signal */
+    moreItemPopoverConfig = signal({ zIndex: 1200 });
+    // CONVENTION-EXCEPT: any — IListConfigItemText không được export, WritableSignal<any> tương thích
+    moreItemTextConfig = signal({
+        fieldKey: 'key',
+        ignoreIconSelected: true,
+        getValue: undefined,
+        configLabelPopover: this.moreItemPopoverConfig,
+    });
+    moreItemHttpData = signal({
+        objectInstance: returnListObject(undefined),
+        functionName: 'list',
+        argumentsValue: [],
     });
-    itemsHightLight = signal([]);
-    hasItemHightLight = computed(() => this.itemsHightLight().length > 0);
-    headerRightViewPort = signal([]);
-    paddingLeftHeaderRight = signal(0);
-    footerRightViewPort = signal([]);
     hasScroll = signal(false);
     instanceSort = signal(undefined);
-    hasActionButtonDropdownContent = signal(false);
     pagingStore = signal(undefined);
     loadedLastItem = signal(false);
     storeParamsCallApi = signal({});
     timeoutLeaveItem = signal(undefined);
-    functionControlSelectMoreItem;
     mouseEnterHeader = signal(false);
-    /** INPUT */
+    stores = signal([]);
+    totalItemInBackend = signal(0);
+    /** GROUP 4 — protected signal */
+    keysSelected = signal([]);
+    loading = signal(false);
+    items = signal([]);
+    itemFooter = signal(undefined);
+    keySearch = signal('');
+    itemsHightLight = signal([]);
+    headerRightViewPort = signal([]);
+    paddingLeftHeaderRight = signal(0);
+    footerRightViewPort = signal([]);
+    /** GROUP 5 — input() */
     optimizeTableRenderByOnViewport = input();
     timeHighlighNewItem = input(2000, { transform: (val) => val ?? 2000 });
     headerLeft = input([], { transform: (val) => val ?? [] });
@@ -331,30 +327,61 @@ class LibsUiComponentsTableComponent {
     autoEmitKeysSelectedWithItems = input();
     functionGetWidthItem = input(); // bắt buộc truyền vào khi useScrollMeasureColumn = true
     useScrollMeasureColumn = input();
-    /** OUTPUT */
+    /** GROUP 6 — protected computed */
+    classHeaderContainer = computed(() => `libs-ui-table-header-container w-full absolute flex shrink-0 ${this.ignoreClassBgHeader() ? '' : 'bg-white'} overflow-x-hidden z-[1] items-center ${this.classHeaderContainerInclude() || ''}`);
+    classHeaderLeftContainer = computed(() => `h-full flex sticky top-0 left-0 z-[1] ${this.ignoreClassBgHeader() ? '' : 'bg-white'} ${this.classHeaderLeftInclude() || ''}`);
+    totalItemDisplay = computed(() => viewDataNumberByLanguage(this.totalItem() ?? this.totalItemInBackend(), false));
+    listConfigMoreItem = computed(() => ({
+        type: 'text',
+        configTemplateText: this.moreItemTextConfig,
+        httpRequestData: this.moreItemHttpData,
+    }));
+    hasItemHightLight = computed(() => this.itemsHightLight().length > 0);
+    classLabelBarNoSelectItemCss = computed(() => this.classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]');
+    paginationConfig = computed(() => ({
+        modeDisplayTotalPageAndGotoPage: this.paginationSetting()?.modeDisplayTotalPageAndGotoPage ?? 'bottom',
+        classDisplayTotalPageAndGotoPage: this.paginationSetting()?.classDisplayTotalPageAndGotoPage ?? '',
+        classIncludeItem: this.paginationSetting()?.classIncludeItem ?? '',
+        classIncludeContainer: this.paginationSetting()?.classIncludeContainer ?? '!items-end',
+        disable: (this.paginationSetting()?.disable ?? false) || this.loading() || !this.items().length,
+        numberPageDisplay: this.paginationSetting()?.numberPageDisplay ?? 5,
+        showTotalPage: this.paginationSetting()?.showTotalPage ?? false,
+        showInputGotoPage: this.paginationSetting()?.showInputGotoPage ?? false,
+    }));
+    pagingTotalItems = computed(() => this.pagingStore()?.total_items ?? (this.pagingStore()?.total_pages ?? 0) * (this.pagingStore()?.per_page ?? 0));
+    pagingPerPage = computed(() => this.pagingStore()?.per_page ?? 0);
+    pagingCurrentPage = computed(() => this.pagingStore()?.page ?? 0);
+    noDataText = computed(() => this.noDataConfig().textNoData ?? 'i18n_no_data_yet');
+    noDataSearchText = computed(() => this.noDataConfig().textSearchNoData ?? 'i18n_no_result');
+    /** GROUP 7 — output() */
     outLoadMore = output();
     outScrollIsGone = output();
     outLoading = output();
-    outClickButtonAction = output();
     outSort = output();
     outClickBarButton = output();
-    outHoverButtonAction = output();
     outKeysSelected = output();
     outFunctionsControl = output();
     outLoadDataComplete = output();
     outTotalItem = output();
     outLoadDataError = output();
-    /**VIEW CHILD */
+    /** GROUP 8 — viewChild() (private) */
     headerElementRef = viewChild('headerElementRef');
     footerElementRef = viewChild('footerElementRef');
     footerLeftElementRef = viewChild('footerLeftElementRef');
     bodyElementRef = viewChild('bodyElementRef');
     bodyComponentRef = viewChild('bodyComponentRef');
-    /**INJECT */
+    /** GROUP 9 — inject() (private readonly) */
     httpRequestService = inject(LibsUiHttpRequestService);
     destroyRef = inject(DestroyRef);
     cdr = inject(ChangeDetectorRef);
     constructor() {
+        effect(() => {
+            const config = this.configSelectMoreItem();
+            untracked(() => {
+                this.moreItemTextConfig.update((c) => ({ ...c, getValue: config?.getValue }));
+                this.moreItemHttpData.update((c) => ({ ...c, objectInstance: returnListObject(config?.listOption) }));
+            });
+        });
         effect(() => {
             if (this.defaultKeysSelected()?.length) {
                 untracked(() => {
@@ -395,9 +422,9 @@ class LibsUiComponentsTableComponent {
     ngOnInit() {
         this.outFunctionsControl.emit(this.FunctionsControl);
         fromEvent(window, 'resize')
-            .pipe(takeUntilDestroyed(this.destroyRef))
+            .pipe(auditTime(100), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         });
     }
     get FunctionsControl() {
@@ -423,9 +450,231 @@ class LibsUiComponentsTableComponent {
             hightLightItem: this.hightLightItem.bind(this),
         };
     }
+    handlerChangeAllChecked() {
+        this.keysSelected.set([]);
+        this.emitKeysSelected();
+    }
+    async handlerChangeCheckedAllItems(event) {
+        if (!event.checked) {
+            this.keysSelected.set([]);
+            this.emitKeysSelected();
+            return;
+        }
+        const items = this.items();
+        const cancelFlags = await Promise.all(items.map((item) => this.checkCancelConditionCheckedItem(item)));
+        this.keysSelected.set(items.filter((_, index) => !cancelFlags[index]).map((item) => `${get(item, this.fieldKey())}`));
+        this.emitKeysSelected();
+    }
+    handlerChangeItemChecked(event, item) {
+        const key = get(item, this.fieldKey());
+        const keys = new Set(this.keysSelected());
+        keys.add(key);
+        if (!event.checked) {
+            keys.delete(key);
+        }
+        this.keysSelected.set(Array.from(keys));
+        this.emitKeysSelected();
+    }
+    async handlerChangeSort(sort) {
+        const scrollLeft = this.headerElementRef()?.nativeElement.scrollLeft || 0;
+        if (this.instanceSort && this.instanceSort()?.fieldSort !== sort.fieldSort) {
+            this.instanceSort()?.reset();
+        }
+        this.instanceSort.set(sort);
+        if (this.sortLocal()) {
+            this.handlerSortLocal(sort, scrollLeft);
+            return;
+        }
+        this.storeParamsCallApi.update((data) => ({ ...data, instanceSort: this.instanceSort() }));
+        this.outSort.emit({
+            sort: sort,
+            onSortSuccess: () => this.onSortSuccess(scrollLeft),
+        });
+        try {
+            await this.callApiByService(true);
+            this.onSortSuccess(scrollLeft);
+        }
+        catch (error) {
+            console.log(error);
+        }
+    }
+    handlerFunctionControlMoreSelectItem(functionControl) {
+        this.functionControlSelectMoreItem = functionControl;
+    }
+    handlerSelectedMoreItem(event) {
+        if (!event || !event.key || !this.configSelectMoreItem()) {
+            return;
+        }
+        this.functionControlSelectMoreItem?.reset();
+        const perPage = Number(event.key).valueOf();
+        const currentPerPage = Number(this.setPerPageSelectMoreItem(perPage)).valueOf();
+        const isPagingNumber = this.configSelectMoreItem()?.pagingNumber;
+        if (currentPerPage > perPage || this.items.length >= perPage) {
+            if (!isPagingNumber) {
+                this.setPerPageSelectMoreItem(currentPerPage);
+            }
+            this.keysSelected.set(this.items()
+                .slice(0, perPage)
+                .map((item) => `${get(item, this.fieldKey())}`));
+            this.emitKeysSelected(true);
+            return;
+        }
+        this.callApiByService(true, true);
+        const completeSub = this.outLoadDataComplete.subscribe(() => {
+            completeSub.unsubscribe();
+            errorSub.unsubscribe();
+            if (!isPagingNumber) {
+                this.setPerPageSelectMoreItem(currentPerPage);
+            }
+            this.keysSelected.set(this.items()
+                .slice(0, perPage)
+                .map((item) => `${get(item, this.fieldKey())}`));
+            this.emitKeysSelected(true);
+        });
+        const errorSub = this.outLoadDataError.subscribe(() => {
+            errorSub.unsubscribe();
+            completeSub.unsubscribe();
+            this.setPerPageSelectMoreItem(currentPerPage);
+        });
+    }
+    handlerBarButtonClick(button) {
+        const items = [];
+        this.keysSelected().forEach((key) => {
+            const item = this.items().find((item) => `${get(item, this.fieldKey())}` === `${key}`);
+            if (item) {
+                items.push(item);
+            }
+        });
+        return this.outClickBarButton.emit({
+            button,
+            items,
+            keys: this.keysSelected(),
+            hiddenBarButtons: () => {
+                return;
+            },
+        });
+    }
+    setIndexHover(e, item) {
+        e.stopPropagation();
+        if (!this.items().length) {
+            this.resetIndexHover();
+            return;
+        }
+        this.itemOfIndexHover = item;
+    }
+    resetIndexHoverWhenMouseLeave(e) {
+        e?.stopPropagation();
+        const currentIndexItemHover = this.itemOfIndexHover;
+        clearTimeout(this.timeoutLeaveItem());
+        this.timeoutLeaveItem.set(setTimeout(() => {
+            if (this.itemOfIndexHover && this.itemOfIndexHover !== currentIndexItemHover) {
+                return;
+            }
+            this.resetIndexHover(e);
+        }));
+    }
+    resetIndexHover(e) {
+        e?.stopPropagation();
+        this.itemOfIndexHover = undefined;
+    }
+    handlerMouseLeaveContainer(event) {
+        event.stopPropagation();
+        this.resetIndexHover(event);
+    }
+    handlerMouseEnterHeader(event) {
+        event.stopPropagation();
+        this.mouseEnterHeader.set(true);
+        this.resetIndexHover(event);
+    }
+    handlerMouseLeaveHeader(event) {
+        event.stopPropagation();
+        this.mouseEnterHeader.set(false);
+        this.resetIndexHover(event);
+    }
+    handlerMouseEnterFooter(event) {
+        event.stopPropagation();
+        this.resetIndexHover(event);
+        if (this.classFooterInclude()) {
+            this.footerElementRef()?.nativeElement?.classList.remove('bg-[#f8f9fa]');
+            this.footerLeftElementRef()?.nativeElement?.classList.remove('bg-[#f8f9fa]');
+            this.footerElementRef()?.nativeElement?.classList.add(this.classFooterInclude());
+            this.footerLeftElementRef()?.nativeElement?.classList.add(this.classFooterInclude());
+        }
+    }
+    handlerMouseLeaveFooter(event) {
+        event.stopPropagation();
+        if (this.classFooterInclude()) {
+            this.footerElementRef()?.nativeElement?.classList.remove(this.classFooterInclude());
+            this.footerLeftElementRef()?.nativeElement?.classList.remove(this.classFooterInclude());
+            this.footerElementRef()?.nativeElement?.classList.add('bg-[#f8f9fa]');
+            this.footerLeftElementRef()?.nativeElement?.classList.add('bg-[#f8f9fa]');
+        }
+    }
+    handlerScrollHeader(e) {
+        e.stopPropagation();
+        if (!this.mouseEnterHeader()) {
+            return;
+        }
+        const scrollLeft = e.target.scrollLeft;
+        const bodyEl = this.bodyElementRef()?.nativeElement;
+        if (bodyEl) {
+            bodyEl.scrollLeft = scrollLeft;
+        }
+        const footerEl = this.footerElementRef()?.nativeElement;
+        if (footerEl) {
+            footerEl.scrollLeft = scrollLeft;
+        }
+        this.resetIndexHover(e);
+    }
+    handlerScrollBody(e) {
+        e.stopPropagation();
+        if (this.mouseEnterHeader()) {
+            return;
+        }
+        const scrollLeft = e.target.scrollLeft;
+        const headerEl = this.headerElementRef()?.nativeElement;
+        if (headerEl) {
+            headerEl.scrollLeft = scrollLeft;
+        }
+        const footerEl = this.footerElementRef()?.nativeElement;
+        if (footerEl) {
+            footerEl.scrollLeft = scrollLeft;
+        }
+        this.resetIndexHover(e);
+    }
+    handlerScrollBottom(e) {
+        e.stopPropagation();
+        if (this.loading() || this.activityLoadData() !== 'scroll-infinity') {
+            return;
+        }
+        this.outLoadMore.emit({ loadMoreSuccess: this.loadMoreSuccess.bind(this) });
+        this.callApiByService(false);
+    }
+    handlerChangePage(page) {
+        this.pagingStore.update((data) => ({ ...(data || {}), page }));
+        this.callApiByService(true);
+    }
+    // CONVENTION-EXCEPT: any — Sử dụng any array để map ngược generic properties linh động
+    handlerOutViewPortItemHeaderRight(event) {
+        this.headerRightViewPort.set(event);
+    }
+    handlerOutPaddingLeftHeaderRight(event) {
+        this.paddingLeftHeaderRight.set(event);
+    }
+    // CONVENTION-EXCEPT: any — Map array signal linh hoạt cho generic
+    handlerOutViewPortItemFooterRight(event) {
+        this.footerRightViewPort.set(event);
+    }
     getIndexRow = (data) => {
         return of(this.items().findIndex((item) => item === data.value) + 1);
     };
+    fakeResponseApi() {
+        this.loadedLastItem.set(false);
+        if (this.activityLoadData() === 'scroll-infinity') {
+            this.pagingStore.set({});
+        }
+        return this.httpRequestService.fakeResponsePagingApi();
+    }
     getScrollContainer() {
         return this.bodyComponentRef();
     }
@@ -488,13 +737,6 @@ class LibsUiComponentsTableComponent {
             this.outLoading.emit(this.loading());
         }
     }
-    fakeResponseApi() {
-        this.loadedLastItem.set(false);
-        if (this.activityLoadData() === 'scroll-infinity') {
-            this.pagingStore.set({});
-        }
-        return this.httpRequestService.fakeResponsePagingApi();
-    }
     async callApiByServiceFooter() {
         if (!this.httpRequestDataFooter() || !this.showFooter()) {
             return;
@@ -508,19 +750,25 @@ class LibsUiComponentsTableComponent {
         if (!items() || !items().length) {
             return;
         }
+        const existingKeys = new Set(this.items().map((item) => `${get(item, this.fieldKey())}`));
         const itemsAdd = [];
         items().forEach((item) => {
-            if (!this.checkExistItem(item)) {
+            const key = `${get(item, this.fieldKey())}`;
+            if (!existingKeys.has(key)) {
+                existingKeys.add(key);
                 itemsAdd.push(item);
-                if (addFirst) {
-                    this.items.update((data) => [item, ...data]);
-                    this.stores.update((data) => [item, ...data]);
-                    return;
-                }
-                this.items.update((data) => [...data, item]);
-                this.stores.update((data) => [...data, item]);
             }
         });
+        if (itemsAdd.length) {
+            if (addFirst) {
+                this.items.update((data) => [...itemsAdd, ...data]);
+                this.stores.update((data) => [...itemsAdd, ...data]);
+            }
+            else {
+                this.items.update((data) => [...data, ...itemsAdd]);
+                this.stores.update((data) => [...data, ...itemsAdd]);
+            }
+        }
         if (autoCountNewItem && itemsAdd.length) {
             this.totalItemInBackend.update((value) => value + itemsAdd.length);
         }
@@ -539,9 +787,6 @@ class LibsUiComponentsTableComponent {
             await this.callApiByServiceFooter();
         }
     }
-    checkExistItem(itemNew) {
-        return this.items().find((item) => `${get(item, this.fieldKey())}` === `${get(itemNew, this.fieldKey())}`) ? true : false;
-    }
     async removeItems(keys, ignoreReCallFooter, autoCountNewItem) {
         this.resetIndexHover();
         if (!this.items().length) {
@@ -596,21 +841,6 @@ class LibsUiComponentsTableComponent {
         this.loading.set(false);
         this.outLoading.emit(this.loading());
     }
-    handlerChangeAllChecked() {
-        this.keysSelected.set([]);
-        this.emitKeysSelected();
-    }
-    handlerChangeCheckedAllItems(event) {
-        if (event.checked) {
-            this.keysSelected.set(this.items()
-                .filter(async (item) => !(await this.checkCancelConditionCheckedItem(item)))
-                .map((item) => `${get(item, this.fieldKey())}`));
-            this.emitKeysSelected();
-            return;
-        }
-        this.keysSelected.set([]);
-        this.emitKeysSelected();
-    }
     async checkCancelConditionCheckedItem(item) {
         let isCancelCheck = false;
         if (!isCancelCheck && this.headerLeft().length && this.headerLeft()[0].checkConditionCheckBoxHidden) {
@@ -621,39 +851,6 @@ class LibsUiComponentsTableComponent {
         }
         return isCancelCheck;
     }
-    handlerChangeItemChecked(event, item) {
-        const key = get(item, this.fieldKey());
-        const keys = new Set(this.keysSelected());
-        keys.add(key);
-        if (!event.checked) {
-            keys.delete(key);
-        }
-        this.keysSelected.set(Array.from(keys));
-        this.emitKeysSelected();
-    }
-    async handlerChangeSort(sort) {
-        const scrollLeft = this.headerElementRef()?.nativeElement.scrollLeft || 0;
-        if (this.instanceSort && this.instanceSort()?.fieldSort !== sort.fieldSort) {
-            this.instanceSort()?.reset();
-        }
-        this.instanceSort.set(sort);
-        if (this.sortLocal()) {
-            this.handlerSortLocal(sort, scrollLeft);
-            return;
-        }
-        this.storeParamsCallApi.update((data) => ({ ...data, instanceSort: this.instanceSort() }));
-        this.outSort.emit({
-            sort: sort,
-            onSortSuccess: () => this.onSortSuccess(scrollLeft),
-        });
-        try {
-            await this.callApiByService(true);
-            this.onSortSuccess(scrollLeft);
-        }
-        catch (error) {
-            console.log(error);
-        }
-    }
     handlerSortLocal(sort, scrollLeft) {
         if (this.filterOrSortLocal() && this.stores().length) {
             this.items.set(this.filterOrSortLocal()?.(signal([...this.stores()]), { ...this.storeParamsCallApi(), instanceSort: sort }) || []);
@@ -677,42 +874,6 @@ class LibsUiComponentsTableComponent {
         });
         this.onSortSuccess(scrollLeft);
     }
-    handlerFunctionControlMoreSelectItem(functionControl) {
-        this.functionControlSelectMoreItem = functionControl;
-    }
-    handlerSelectedMoreItem(event) {
-        if (!event || !event.key || !this.configSelectMoreItem()) {
-            return;
-        }
-        this.functionControlSelectMoreItem?.reset();
-        const perPage = Number(event.key).valueOf();
-        const currentPerPage = Number(this.setPerPageSelectMoreItem(perPage)).valueOf();
-        const isPagingNumber = this.configSelectMoreItem()?.pagingNumber;
-        if (currentPerPage > perPage || this.items.length >= perPage) {
-            if (!isPagingNumber) {
-                this.setPerPageSelectMoreItem(currentPerPage);
-            }
-            this.keysSelected.set(this.items()
-                .slice(0, perPage)
-                .map((item) => `${get(item, this.fieldKey())}`));
-            this.emitKeysSelected(true);
-            return;
-        }
-        this.callApiByService(true, true);
-        const sub = this.outLoadDataComplete.subscribe(() => {
-            sub.unsubscribe();
-            if (!isPagingNumber) {
-                this.setPerPageSelectMoreItem(currentPerPage);
-            }
-            this.keysSelected.set(this.items()
-                .slice(0, perPage)
-                .map((item) => `${get(item, this.fieldKey())}`));
-            this.emitKeysSelected(true);
-        });
-        this.outLoadDataError.subscribe(() => {
-            this.setPerPageSelectMoreItem(currentPerPage);
-        });
-    }
     setPerPageSelectMoreItem(perPage) {
         const argumentsValue = this.httpRequestData()?.argumentsValue;
         if (!argumentsValue || !this.configSelectMoreItem()) {
@@ -740,139 +901,19 @@ class LibsUiComponentsTableComponent {
         this.loading.set(false);
         this.outLoading.emit(this.loading());
     }
-    handlerButtonClick(type, buttonDropdownData, button) {
-        // buttonOrigin chỉ sử dụng khi dùng buttonActions có button-dropdown
-        if (type === 'button') {
-            return this.outClickButtonAction.emit({ item: this.itemOfIndexHover, button: button });
-        }
-        this.outClickButtonAction.emit({ item: this.itemOfIndexHover, button, buttonDropdownData });
-    }
-    handlerBarButtonClick(button) {
-        const items = [];
-        this.keysSelected().forEach((key) => {
-            const item = this.items().find((item) => `${get(item, this.fieldKey())}` === `${key}`);
-            if (item) {
-                items.push(item);
-            }
-        });
-        return this.outClickBarButton.emit({
-            button,
-            items,
-            keys: this.keysSelected(),
-            hiddenBarButtons: () => {
-                return;
-            },
-        });
-    }
-    handlerButtonDropdownEvent(eventName) {
-        this.hasActionButtonDropdownContent.set(true);
-        if (eventName === 'remove' || eventName === 'mouseleave-content') {
-            this.hasActionButtonDropdownContent.set(false);
-        }
-    }
-    setIndexHover(e, item) {
-        e.stopPropagation();
-        if (!this.items().length) {
-            this.resetIndexHover();
-            return;
-        }
-        this.itemOfIndexHover = item;
-    }
-    resetIndexHoverWhenMouseLeave(e) {
-        e?.stopPropagation();
-        const currentIndexItemHover = this.itemOfIndexHover;
-        clearTimeout(this.timeoutLeaveItem());
-        this.timeoutLeaveItem.set(setTimeout(() => {
-            if (this.itemOfIndexHover && this.itemOfIndexHover !== currentIndexItemHover) {
-                return;
-            }
-            this.resetIndexHover(e);
-        }));
-    }
-    resetIndexHover(e) {
-        e?.stopPropagation();
-        if (this.hasActionButtonDropdownContent()) {
-            return;
-        }
-        this.itemOfIndexHover = undefined;
-    }
-    handlerMouseLeaveContainer(event) {
-        event.stopPropagation();
-        this.resetIndexHover(event);
-    }
-    handlerMouseEnterHeader(event) {
-        event.stopPropagation();
-        this.mouseEnterHeader.set(true);
-        this.resetIndexHover(event);
-    }
-    handlerMouseLeaveHeader(event) {
-        event.stopPropagation();
-        this.mouseEnterHeader.set(false);
-        this.resetIndexHover(event);
-    }
-    handlerMouseEnterFooter(event) {
-        event.stopPropagation();
-        this.resetIndexHover(event);
-        if (this.classFooterInclude()) {
-            this.footerElementRef()?.nativeElement?.classList.remove('bg-[#f8f9fa]');
-            this.footerLeftElementRef()?.nativeElement?.classList.remove('bg-[#f8f9fa]');
-            this.footerElementRef()?.nativeElement?.classList.add(this.classFooterInclude());
-            this.footerLeftElementRef()?.nativeElement?.classList.add(this.classFooterInclude());
-        }
-    }
-    handlerMouseLeaveFooter(event) {
-        event.stopPropagation();
-        if (this.classFooterInclude()) {
-            this.footerElementRef()?.nativeElement?.classList.remove(this.classFooterInclude());
-            this.footerLeftElementRef()?.nativeElement?.classList.remove(this.classFooterInclude());
-            this.footerElementRef()?.nativeElement?.classList.add('bg-[#f8f9fa]');
-            this.footerLeftElementRef()?.nativeElement?.classList.add('bg-[#f8f9fa]');
-        }
-    }
-    handlerScrollHeader(e) {
-        e.stopPropagation();
-        if (!this.mouseEnterHeader()) {
-            return;
-        }
-        this.bodyElementRef().nativeElement.scrollLeft = e.target.scrollLeft;
-        if (this.footerElementRef()) {
-            this.footerElementRef().nativeElement.scrollLeft = e.target.scrollLeft;
-        }
-        this.resetIndexHover(e);
-    }
-    handlerScrollBody(e) {
-        e.stopPropagation();
-        if (this.mouseEnterHeader()) {
-            return;
-        }
-        this.headerElementRef().nativeElement.scrollLeft = e.target.scrollLeft;
-        if (this.footerElementRef()) {
-            this.footerElementRef().nativeElement.scrollLeft = e.target.scrollLeft;
-        }
-        this.resetIndexHover(e);
-    }
-    handlerScrollBottom(e) {
-        e.stopPropagation();
-        if (this.loading() || this.activityLoadData() !== 'scroll-infinity') {
-            return;
-        }
-        this.outLoadMore.emit({ loadMoreSuccess: this.loadMoreSuccess.bind(this) });
-        this.callApiByService(false);
-    }
-    handlerChangePage(page) {
-        this.pagingStore.update((data) => ({ ...(data || {}), page }));
-        this.callApiByService(true);
-    }
     resetScroll(scrollPositionLeft, scrollPositionTop) {
-        if (this.headerElementRef()) {
-            this.headerElementRef().nativeElement.scrollLeft = scrollPositionLeft || 0;
+        const headerEl = this.headerElementRef()?.nativeElement;
+        if (headerEl) {
+            headerEl.scrollLeft = scrollPositionLeft || 0;
         }
-        if (this.BodyElement) {
-            this.BodyElement.scrollTop = scrollPositionTop || 0;
-            this.BodyElement.scrollLeft = scrollPositionLeft || 0;
+        const bodyEl = this.bodyElement;
+        if (bodyEl) {
+            bodyEl.scrollTop = scrollPositionTop || 0;
+            bodyEl.scrollLeft = scrollPositionLeft || 0;
         }
-        if (this.footerElementRef()) {
-            this.footerElementRef().nativeElement.scrollLeft = scrollPositionLeft || 0;
+        const footerEl = this.footerElementRef()?.nativeElement;
+        if (footerEl) {
+            footerEl.scrollLeft = scrollPositionLeft || 0;
         }
     }
     reset(clearSort) {
@@ -894,8 +935,8 @@ class LibsUiComponentsTableComponent {
             timer(500)
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => {
-                if (this.BodyElement) {
-                    this.hasScroll.set(this.BodyElement.scrollHeight > this.BodyElement.offsetHeight);
+                if (this.bodyElement) {
+                    this.hasScroll.set(this.bodyElement.scrollHeight > this.bodyElement.offsetHeight);
                 }
                 if (hasScroll && !this.hasScroll()) {
                     this.outScrollIsGone.emit({});
@@ -907,7 +948,7 @@ class LibsUiComponentsTableComponent {
             });
         });
     }
-    get BodyElement() {
+    get bodyElement() {
         return this.bodyElementRef()?.nativeElement;
     }
     async hightLightItem(items) {
@@ -933,22 +974,11 @@ class LibsUiComponentsTableComponent {
         }
         this.outKeysSelected.emit({ keys: this.keysSelected() });
     }
-    // CONVENTION-EXCEPT: any — Sử dụng any array để map ngược generic properties linh động
-    handlerOutViewPortItemHeaderRight(event) {
-        this.headerRightViewPort.set(event);
-    }
-    handlerOutPaddingLeftHeaderRight(event) {
-        this.paddingLeftHeaderRight.set(event);
-    }
-    // CONVENTION-EXCEPT: any — Map array signal linh hoạt cho generic
-    handlerOutViewPortItemFooterRight(event) {
-        this.footerRightViewPort.set(event);
-    }
     ngOnDestroy() {
         clearTimeout(this.timeoutLeaveItem());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTableComponent, isStandalone: true, selector: "libs_ui-components-table", inputs: { optimizeTableRenderByOnViewport: { classPropertyName: "optimizeTableRenderByOnViewport", publicName: "optimizeTableRenderByOnViewport", isSignal: true, isRequired: false, transformFunction: null }, timeHighlighNewItem: { classPropertyName: "timeHighlighNewItem", publicName: "timeHighlighNewItem", isSignal: true, isRequired: false, transformFunction: null }, headerLeft: { classPropertyName: "headerLeft", publicName: "headerLeft", isSignal: true, isRequired: false, transformFunction: null }, headerRight: { classPropertyName: "headerRight", publicName: "headerRight", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorWidthHeader: { classPropertyName: "ignoreCalculatorWidthHeader", publicName: "ignoreCalculatorWidthHeader", isSignal: true, isRequired: false, transformFunction: null }, configTemplateItemCollapseExpand: { classPropertyName: "configTemplateItemCollapseExpand", publicName: "configTemplateItemCollapseExpand", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderFooter: { classPropertyName: "ignoreBorderFooter", publicName: "ignoreBorderFooter", isSignal: true, isRequired: false, transformFunction: null }, customPositionFooter: { classPropertyName: "customPositionFooter", publicName: "customPositionFooter", isSignal: true, isRequired: false, transformFunction: null }, footerLeft: { classPropertyName: "footerLeft", publicName: "footerLeft", isSignal: true, isRequired: false, transformFunction: null }, footerRight: { classPropertyName: "footerRight", publicName: "footerRight", isSignal: true, isRequired: false, transformFunction: null }, disableCheckbox: { classPropertyName: "disableCheckbox", publicName: "disableCheckbox", isSignal: true, isRequired: false, transformFunction: null }, enableUnequalChildrenSizes: { classPropertyName: "enableUnequalChildrenSizes", publicName: "enableUnequalChildrenSizes", isSignal: true, isRequired: false, transformFunction: null }, bufferAmount: { classPropertyName: "bufferAmount", publicName: "bufferAmount", isSignal: true, isRequired: false, transformFunction: null }, totalItem: { classPropertyName: "totalItem", publicName: "totalItem", isSignal: true, isRequired: false, transformFunction: null }, isDashBorder: { classPropertyName: "isDashBorder", publicName: "isDashBorder", isSignal: true, isRequired: false, transformFunction: null }, classHeaderContainerInclude: { classPropertyName: "classHeaderContainerInclude", publicName: "classHeaderContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classHeaderLeftInclude: { classPropertyName: "classHeaderLeftInclude", publicName: "classHeaderLeftInclude", isSignal: true, isRequired: false, transformFunction: null }, classBodyInclude: { classPropertyName: "classBodyInclude", publicName: "classBodyInclude", isSignal: true, isRequired: false, transformFunction: null }, classFooterInclude: { classPropertyName: "classFooterInclude", publicName: "classFooterInclude", isSignal: true, isRequired: false, transformFunction: null }, classTableContainerInclude: { classPropertyName: "classTableContainerInclude", publicName: "classTableContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classBarInclude: { classPropertyName: "classBarInclude", publicName: "classBarInclude", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, defaultKeysSelected: { classPropertyName: "defaultKeysSelected", publicName: "defaultKeysSelected", isSignal: true, isRequired: false, transformFunction: null }, labelBarNoSelectItem: { classPropertyName: "labelBarNoSelectItem", publicName: "labelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, labelBarButtons: { classPropertyName: "labelBarButtons", publicName: "labelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarButtons: { classPropertyName: "classLabelBarButtons", publicName: "classLabelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, barButtons: { classPropertyName: "barButtons", publicName: "barButtons", isSignal: true, isRequired: false, transformFunction: null }, sortLocal: { classPropertyName: "sortLocal", publicName: "sortLocal", isSignal: true, isRequired: false, transformFunction: null }, filterOrSortLocal: { classPropertyName: "filterOrSortLocal", publicName: "filterOrSortLocal", isSignal: true, isRequired: false, transformFunction: null }, httpRequestData: { classPropertyName: "httpRequestData", publicName: "httpRequestData", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDataFooter: { classPropertyName: "httpRequestDataFooter", publicName: "httpRequestDataFooter", isSignal: true, isRequired: false, transformFunction: null }, newData: { classPropertyName: "newData", publicName: "newData", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, ignoreBar: { classPropertyName: "ignoreBar", publicName: "ignoreBar", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarNoSelectItem: { classPropertyName: "classLabelBarNoSelectItem", publicName: "classLabelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassBgHeader: { classPropertyName: "ignoreClassBgHeader", publicName: "ignoreClassBgHeader", isSignal: true, isRequired: false, transformFunction: null }, noDataConfig: { classPropertyName: "noDataConfig", publicName: "noDataConfig", isSignal: true, isRequired: false, transformFunction: null }, showScrollTablePinnedIfNoData: { classPropertyName: "showScrollTablePinnedIfNoData", publicName: "showScrollTablePinnedIfNoData", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItemLast: { classPropertyName: "ignoreBorderItemLast", publicName: "ignoreBorderItemLast", isSignal: true, isRequired: false, transformFunction: null }, isHiddenHeaderWhenNodata: { classPropertyName: "isHiddenHeaderWhenNodata", publicName: "isHiddenHeaderWhenNodata", isSignal: true, isRequired: false, transformFunction: null }, maxItemSelected: { classPropertyName: "maxItemSelected", publicName: "maxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, configSelectMoreItem: { classPropertyName: "configSelectMoreItem", publicName: "configSelectMoreItem", isSignal: true, isRequired: false, transformFunction: null }, onlyShowNoResult: { classPropertyName: "onlyShowNoResult", publicName: "onlyShowNoResult", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItem: { classPropertyName: "ignoreBorderItem", publicName: "ignoreBorderItem", isSignal: true, isRequired: false, transformFunction: null }, activityLoadData: { classPropertyName: "activityLoadData", publicName: "activityLoadData", isSignal: true, isRequired: false, transformFunction: null }, paginationSetting: { classPropertyName: "paginationSetting", publicName: "paginationSetting", isSignal: true, isRequired: false, transformFunction: null }, templateNoData: { classPropertyName: "templateNoData", publicName: "templateNoData", isSignal: true, isRequired: false, transformFunction: null }, templateNoResult: { classPropertyName: "templateNoResult", publicName: "templateNoResult", isSignal: true, isRequired: false, transformFunction: null }, autoEmitKeysSelectedWithItems: { classPropertyName: "autoEmitKeysSelectedWithItems", publicName: "autoEmitKeysSelectedWithItems", isSignal: true, isRequired: false, transformFunction: null }, functionGetWidthItem: { classPropertyName: "functionGetWidthItem", publicName: "functionGetWidthItem", isSignal: true, isRequired: false, transformFunction: null }, useScrollMeasureColumn: { classPropertyName: "useScrollMeasureColumn", publicName: "useScrollMeasureColumn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outLoadMore: "outLoadMore", outScrollIsGone: "outScrollIsGone", outLoading: "outLoading", outClickButtonAction: "outClickButtonAction", outSort: "outSort", outClickBarButton: "outClickBarButton", outHoverButtonAction: "outHoverButtonAction", outKeysSelected: "outKeysSelected", outFunctionsControl: "outFunctionsControl", outLoadDataComplete: "outLoadDataComplete", outTotalItem: "outTotalItem", outLoadDataError: "outLoadDataError" }, viewQueries: [{ propertyName: "headerElementRef", first: true, predicate: ["headerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerElementRef", first: true, predicate: ["footerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerLeftElementRef", first: true, predicate: ["footerLeftElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyElementRef", first: true, predicate: ["bodyElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyComponentRef", first: true, predicate: ["bodyComponentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n  @if (!ignoreBar()) {\n    <div\n      class=\"flex items-center relative z-[1] bottom-0 left-0 w-full bg-white libs-ui-table-shadow-bottom {{ classBarInclude() }}\"\n      [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      <ng-content select=\"div.libs-ui-table-bar-left\"></ng-content>\n      @if (!keysSelected().length && labelBarNoSelectItem()) {\n        <div\n          class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n          [innerHtml]=\"labelBarNoSelectItem() | translate: { value: totalItemDisplay() }\"></div>\n      }\n      @if (keysSelected().length) {\n        <div class=\"flex items-center pl-[12px]\">\n          <div class=\"flex items-center h-full mt-[-2px]\">\n            <libs_ui-components-checkbox-single\n              [checked]=\"true\"\n              [disable]=\"loading() || disableCheckbox()\"\n              (outChange)=\"handlerChangeAllChecked()\" />\n          </div>\n          <div class=\"libs-ui-font-h5m text-[#071631] mr-[8px] {{ classLabelBarButtons() }}\">\n            {{ labelBarButtons() | translate: { value: keysSelected().length } }}\n          </div>\n          @if (configSelectMoreItem()) {\n            <libs_ui-components-dropdown\n              [isNgContent]=\"true\"\n              [popoverCustomConfig]=\"{\n                widthByParent: false,\n                ignoreArrow: true,\n                maxHeight: 2048,\n                classInclude: '!w-[121px]',\n                position: {\n                  mode: 'start',\n                  distance: 0,\n                },\n              }\"\n              [listConfig]=\"listConfigMoreItem()\"\n              [listHiddenInputSearch]=\"true\"\n              [listMaxItemShow]=\"5\"\n              class=\"!w-[16px] h-[16px] mr-[8px]\"\n              (outSelectKey)=\"handlerSelectedMoreItem($event)\"\n              (outFunctionsControl)=\"handlerFunctionControlMoreSelectItem($event)\">\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-primary'\"\n                [classInclude]=\"'!p-0 m-0'\"\n                [classIconLeft]=\"'before:!text-[16px] libs-ui-icon-move-right rotate-90 mr-[6px]'\"\n                [popover]=\"{ config: { content: 'i18n_more_select' } }\"\n                [ignoreStopPropagationEvent]=\"true\" />\n            </libs_ui-components-dropdown>\n          }\n          <div class=\"h-[16px] libs-ui-border-left-general ml-[16px]\"></div>\n          @if (barButtons()?.length) {\n            @for (button of barButtons(); track button) {\n              @let constHtmlLabel = button.label || ' ';\n              <libs_ui-components-buttons-button\n                [type]=\"button.type || 'button-link-primary'\"\n                [classIconLeft]=\"button.classIconLeft || ''\"\n                [classInclude]=\"button.classInclude || ''\"\n                [label]=\"constHtmlLabel | translate\"\n                (outClick)=\"handlerBarButtonClick(button)\" />\n            }\n          }\n        </div>\n      }\n      <ng-content select=\"div.libs-ui-table-bar-right\"></ng-content>\n    </div>\n  }\n\n  <div\n    #tableContainerElementRef\n    class=\"libs-ui-table flex flex-col w-full h-full relative {{ classTableContainerInclude() }}\"\n    [class.px-[16px]]=\"!ignoreBar()\"\n    (mouseleave)=\"handlerMouseLeaveContainer($event)\">\n    <div\n      class=\"relative w-full shrink-0\"\n      [style.height.px]=\"headerElementRef.offsetHeight\"\n      [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\">\n      <div\n        #headerElementRef\n        LibsUiComponentsScrollOverlayDirective\n        [options]=\"{ scrollbarWidth: 0 }\"\n        [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n        [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n        [class]=\"classHeaderContainer()\"\n        (outScroll)=\"handlerScrollHeader($event)\"\n        (mouseenter)=\"handlerMouseEnterHeader($event)\"\n        (mouseleave)=\"handlerMouseLeaveHeader($event)\">\n        @if (headerLeft().length) {\n          <div [class]=\"classHeaderLeftContainer()\">\n            @for (header of headerLeft(); track header) {\n              <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: true }\" />\n            }\n          </div>\n        }\n        @if (headerRight().length) {\n          @let constHtmlFunctionGetWidthItem = functionGetWidthItem();\n          @if (useScrollMeasureColumn() && constHtmlFunctionGetWidthItem) {\n            <div\n              class=\"flex w-full h-full relative\"\n              LibsUiScrollMeasureItemDirectionHorizontalDirective\n              [elementScroll]=\"headerElementRef\"\n              [items]=\"headerRight()\"\n              [functionGetWidthItem]=\"constHtmlFunctionGetWidthItem\"\n              (outViewPortItem)=\"handlerOutViewPortItemHeaderRight($event)\"\n              (outPaddingLeft)=\"handlerOutPaddingLeftHeaderRight($event)\">\n              @for (header of headerRightViewPort(); track header) {\n                <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: false }\" />\n              }\n            </div>\n          } @else {\n            @for (header of headerRight(); track header) {\n              <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: false }\" />\n            }\n          }\n        }\n      </div>\n    </div>\n    @if (showFooter() && itemFooter() && customPositionFooter() === 'top') {\n      <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n    }\n    <div class=\"relative flex flex-col w-full h-full overflow-x-hidden bg-white {{ classBodyInclude() || '' }}\">\n      <div\n        #bodyElementRef\n        class=\"flex h-full w-full relative\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScroll)=\"handlerScrollBody($event)\"\n        (outScrollBottom)=\"handlerScrollBottom($event)\">\n        @if (items().length) {\n          <virtual-scroller\n            #bodyComponentRef\n            [items]=\"items()\"\n            [enableUnequalChildrenSizes]=\"enableUnequalChildrenSizes()\"\n            class=\"h-full\"\n            [style.width.px]=\"headerElementRef.scrollWidth > (bodyElementRef ? bodyElementRef.scrollWidth : 0) ? headerElementRef.scrollWidth : undefined\"\n            [parentScroll]=\"bodyElementRef\"\n            [bufferAmount]=\"bufferAmount()\">\n            @for (data of bodyComponentRef.viewPortItems; track data()) {\n              @let constHtmlIsHightLightItem = data | LibsUiTableCheckItemHightLightPipe: itemsHightLight();\n              <div\n                #elementHover\n                class=\"flex\"\n                [class.bg-[#f3fcfc]]=\"constHtmlIsHightLightItem\"\n                [class.libs-ui-border-top-1px-36d3d3]=\"constHtmlIsHightLightItem && $first && !ignoreBorderItem()\"\n                [class.libs-ui-border-bottom-1px-36d3d3]=\"constHtmlIsHightLightItem && !ignoreBorderItem()\"\n                [ngClass]=\"\n                  constHtmlIsHightLightItem || ($last && ignoreBorderItemLast())\n                    ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px'\n                    : ignoreBorderItem()\n                      ? ''\n                      : isDashBorder()\n                        ? 'libs-ui-border-bottom-dashed-general'\n                        : 'libs-ui-border-bottom-general'\n                \"\n                [style.width.px]=\"headerElementRef.scrollWidth\"\n                [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !constHtmlIsHightLightItem\"\n                (mouseenter)=\"setIndexHover($event, data)\"\n                (mouseleave)=\"resetIndexHoverWhenMouseLeave($event)\">\n                @if (headerLeft().length || headerRight().length) {\n                  <div class=\"flex flex-col w-full\">\n                    <div class=\"flex w-full\">\n                      @if (headerLeft().length) {\n                        <div\n                          class=\"flex sticky top-0 left-0 z-[1]\"\n                          [class.bg-white]=\"!constHtmlIsHightLightItem\"\n                          [class.bg-[#f3fcfc]]=\"constHtmlIsHightLightItem\">\n                          @for (header of headerLeft(); track header) {\n                            <div\n                              class=\"relative flex px-[12px] py-[8px] {{ header.ignoreBorderRight ? '' : 'libs-ui-border-right-general' }}\"\n                              [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !constHtmlIsHightLightItem\"\n                              [ngStyle]=\"\n                                (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n                              \"\n                              [ngClass]=\"header.ngClass || {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (headerRight().length) {\n                        @if (useScrollMeasureColumn()) {\n                          <div\n                            class=\"flex w-full min-w-0\"\n                            [style.padding-left.px]=\"paddingLeftHeaderRight()\">\n                            @for (header of headerRightViewPort(); track header) {\n                              <div\n                                class=\"relative flex px-[12px] py-[8px]\"\n                                [ngStyle]=\"\n                                  (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                  (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n                                \"\n                                [ngClass]=\"header.ngClass || {}\">\n                                <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                              </div>\n                            }\n                          </div>\n                        } @else {\n                          @for (header of headerRight(); track header) {\n                            <div\n                              class=\"relative flex px-[12px] py-[8px]\"\n                              [ngStyle]=\"\n                                (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n                              \"\n                              [ngClass]=\"header.ngClass || {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                            </div>\n                          }\n                        }\n                      }\n                    </div>\n                    @if (configTemplateItemCollapseExpand() && data().specificExpand && data()[configTemplateItemCollapseExpand()?.fieldGetDataExpand || 'specificDataExpand']) {\n                      <div [class]=\"configTemplateItemCollapseExpand()?.cssWrapper || 'flex w-full'\">\n                        @for (dataExpand of data()[configTemplateItemCollapseExpand()?.fieldGetDataExpand || 'specificDataExpand'](); track $index) {\n                          @if (configTemplateItemCollapseExpand()?.colTemplateConfig) {\n                            @if (optimizeTableRenderByOnViewport()) {\n                              @defer (on viewport) {\n                                <libs_ui-components-table-templates\n                                  [item]=\"dataExpand\"\n                                  [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n                                  [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                                  [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n                              } @placeholder {\n                                <div [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || 'w-full h-full'\"></div>\n                              }\n                            } @else {\n                              <libs_ui-components-table-templates\n                                [item]=\"dataExpand\"\n                                [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n                                [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                                [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n                            }\n                          }\n                        } @empty {\n                          <div class=\"relative h-[100px]\">\n                            <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </virtual-scroller>\n        } @else if (!loading()) {\n          <div class=\"sticky left-0 top-0 z-[1] h-[calc(100%-10px)] w-full\">\n            <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n          </div>\n          @if (showScrollTablePinnedIfNoData()) {\n            <div\n              class=\"absolute h-[1px] bg-transparent top-0 left-0 z-[1]\"\n              [style.width.px]=\"headerElementRef.scrollWidth\"></div>\n          }\n        }\n      </div>\n\n      @if (showFooter() && itemFooter() && customPositionFooter() === 'bottom') {\n        <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n      }\n\n      @if (loading()) {\n        <div class=\"absolute w-full h-full z-[2] flex items-center content-center\">\n          <libs_ui-components-spinner />\n        </div>\n      }\n    </div>\n\n    @if (activityLoadData() === 'click-pagination') {\n      <div class=\"flex w-full mt-[12px]\">\n        <libs_ui-components-pagination\n          [modeDisplayTotalPageAndGotoPage]=\"paginationSetting()?.modeDisplayTotalPageAndGotoPage || 'bottom'\"\n          [classDisplayTotalPageAndGotoPage]=\"paginationSetting()?.classDisplayTotalPageAndGotoPage || ''\"\n          [classIncludeItem]=\"paginationSetting()?.classIncludeItem || ''\"\n          [classIncludeContainer]=\"paginationSetting()?.classIncludeContainer || '!items-end'\"\n          [disable]=\"paginationSetting()?.disable || loading() || !items().length\"\n          [numberPageDisplay]=\"paginationSetting()?.numberPageDisplay || 5\"\n          [showTotalPage]=\"paginationSetting()?.showTotalPage || false\"\n          [showInputGotoPage]=\"paginationSetting()?.showInputGotoPage || false\"\n          [totalItems]=\"pagingStore()?.total_items || (pagingStore()?.total_pages || 0) * (pagingStore()?.per_page || 0)\"\n          [perPage]=\"pagingStore()?.per_page || 0\"\n          [currentPage]=\"pagingStore()?.page || 0\"\n          (outPageSelect)=\"handlerChangePage($event)\" />\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #templateHeaderRef\n  let-header=\"headerItem\"\n  let-isHeaderLeft=\"isHeaderLeft\">\n  <div\n    [class]=\"'relative flex ' + (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHeaderLeft && !header.ignoreBorderRight ? ' libs-ui-border-right-general ' : ' ') + ' libs-ui-table-header-col '\"\n    [class.flex-col]=\"header.rowsConfig\"\n    [class.py-[8px]]=\"!header.ignorePyDefault\"\n    [ngStyle]=\"\n      (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n      (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n    \"\n    [ngClass]=\"header.ngClass || {}\">\n    @if (!header.rowsConfig) {\n      <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: header, isColRender: false, isHeaderLeft: isHeaderLeft }\" />\n    }\n    @if (header.rowsConfig; as rowsConfig) {\n      @for (row of rowsConfig.rows; track row) {\n        <div [class]=\"row.classRow\">\n          @for (col of row.cols; track col) {\n            <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: col, isColRender: true, isHeaderLeft: isHeaderLeft }\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #templateHeaderContentRef\n  let-header=\"headerItem\"\n  let-isColRender=\"isColRender\"\n  let-isHeaderLeft=\"isHeaderLeft\">\n  <div\n    #itemHeaderRef\n    class=\"flex libs-ui-font-h6m min-h-[18px] text-[#6a7383] max-w-full\"\n    [class.items-center]=\"header.contentHeaderAlignCenter ?? true\"\n    [class.justify-end]=\"header.contentHeaderJustifyContentEnd\"\n    [class.w-full]=\"header.isShowIndexOnRow\"\n    [ngStyle]=\"\n      isColRender\n        ? (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n          (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n        : {}\n    \"\n    [ngClass]=\"isColRender ? header.ngClass || {} : {}\">\n    @if (header.hasCheckbox) {\n      @if (header.hasCheckboxAll) {\n        <div\n          class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n          [class.items-center]=\"header.checkboxAlignCenter\">\n          <libs_ui-components-checkbox-single\n            [key]=\"'all'\"\n            [stillOtherOptions]=\"!!keysSelected().length && keysSelected().length !== items().length\"\n            [checked]=\"!!keysSelected().length && keysSelected().length === items().length\"\n            [disable]=\"loading()\"\n            [classInclude]=\"header.checkboxClassInclude\"\n            (outChange)=\"handlerChangeCheckedAllItems($event)\" />\n        </div>\n      } @else {\n        <div class=\"flex h-full ml-[24px] {{ header.checkboxClassInclude }}\"></div>\n      }\n    }\n    @for (tooltip of header.tooltipsLeft; track tooltip) {\n      <div class=\"mr-[4px]\">\n        @let constHtmlTooltip = tooltip.dataView || ' ';\n        <libs_ui-components-popover\n          [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"\n            tooltip.config || {\n              content: constHtmlTooltip | translate,\n              position: {\n                mode: 'center',\n                distance: 0,\n                autoUpdatePosition: {\n                  endDistance: 12,\n                  startDistance: -12,\n                },\n              },\n            }\n          \"\n          [innerHTML]=\"tooltip.dataView\" />\n      </div>\n    }\n\n    @if (header.isShowIndexOnRow) {\n      <div class=\"flex w-full h-full items-center justify-center {{ header.classIncludeIndexOnRow || '' }}\">\n        {{ header.label ?? '#' }}\n      </div>\n    } @else {\n      @if (header.label | LibsUiPipesCallFunctionInTemplatePipe: header.parseValue : header | async | translate; as labelHeaderColumn) {\n        <libs_ui-components-popover\n          [type]=\"header?.labelConfig?.type || 'text'\"\n          [mode]=\"header?.labelConfig?.mode || 'hover'\"\n          [classInclude]=\"header?.labelConfig?.classInclude || ''\"\n          [ignoreShowPopover]=\"header?.labelConfig?.ignoreShowTooltip || false\"\n          [config]=\"header.labelConfig?.config || { content: labelHeaderColumn }\"\n          [innerHTML]=\"labelHeaderColumn\" />\n      }\n    }\n\n    @for (tooltip of header.tooltipsRight; track tooltip) {\n      <div class=\"ml-[4px]\">\n        @let constHtmlTooltip = tooltip.dataView || ' ';\n        <libs_ui-components-popover\n          [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"\n            tooltip.config || {\n              content: constHtmlTooltip | translate,\n              position: {\n                mode: 'center',\n                distance: 0,\n                autoUpdatePosition: {\n                  endDistance: 12,\n                  startDistance: -12,\n                },\n              },\n            }\n          \"\n          [innerHTML]=\"tooltip.dataView\" />\n      </div>\n    }\n\n    @if (header.hasSort && header.orderby) {\n      <div class=\"ml-[4px]\">\n        <libs_ui-components-buttons-sort-arrow\n          [disable]=\"loading() || !items().length\"\n          [fieldSort]=\"header.orderby\"\n          [ignorePopoverContent]=\"header.sortIgnoreTooltipContent ?? true\"\n          [popoverContentAsc]=\"header.sortTooltipContentAsc\"\n          [popoverContentDesc]=\"header.sortTooltipContentDesc\"\n          [defaultMode]=\"header.defaultMode\"\n          [zIndex]=\"header.zIndexTooltipSort\"\n          (outChange)=\"handlerChangeSort($event)\" />\n      </div>\n    }\n  </div>\n  @if (header.labelDescription) {\n    <div class=\"flex\">\n      <libs_ui-components-popover\n        [type]=\"'text'\"\n        [classInclude]=\"header.labelDescription.classInclude || ''\"\n        [config]=\"{ content: header.labelDescription.content | translate }\"\n        [innerHTML]=\"header.labelDescription.content | translate\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #templateBodyRef\n  let-header=\"header\"\n  let-data=\"data\"\n  let-constHtmlIsHightLightItem=\"constHtmlIsHightLightItem\">\n  <div class=\"flex w-full h-full\">\n    @if (header.hasCheckbox) {\n      <div\n        class=\"flex h-full\"\n        [class.invisible]=\"header.checkConditionCheckBoxHidden && (data() | LibsUiPipesCallFunctionInTemplatePipe: header.checkConditionCheckBoxHidden : data() | async)\"\n        [class.items-center]=\"header.checkboxAlignCenter\">\n        <libs_ui-components-checkbox-single\n          [key]=\"data()[fieldKey()]\"\n          [classInclude]=\"header.checkboxClassInclude\"\n          [checked]=\"data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length\"\n          [disable]=\"loading() || disableCheckbox() || !!(maxItemSelected() && !(data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length) && keysSelected().length >= maxItemSelected())\"\n          (outChange)=\"handlerChangeItemChecked($event, data())\" />\n      </div>\n    }\n\n    @if (header.isShowIndexOnRow; as config) {\n      <div class=\"w-full flex items-center justify-center libs-ui-font-h4r{{ config.classIncludeIndexOnRow || '' }}\">\n        <div\n          LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{}\"\n          [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe: getIndexRow | async\"></div>\n      </div>\n    }\n\n    @if (header.colTemplateConfig) {\n      @let constHtmlIsHover = itemOfIndexHover === data && !constHtmlIsHightLightItem;\n      @if (optimizeTableRenderByOnViewport()) {\n        @defer (on viewport) {\n          <libs_ui-components-table-templates\n            [isHover]=\"constHtmlIsHover\"\n            [class]=\"header.templateCssWrapperHost || ''\"\n            [item]=\"data\"\n            [templateCssWrapper]=\"header.templateCssWrapper\"\n            [configs]=\"header.colTemplateConfig\" />\n        } @placeholder {\n          <div [class]=\"header.templateCssWrapperHost || 'w-full h-full'\"></div>\n        }\n      } @else {\n        <libs_ui-components-table-templates\n          [isHover]=\"constHtmlIsHover\"\n          [class]=\"header.templateCssWrapperHost || ''\"\n          [item]=\"data\"\n          [templateCssWrapper]=\"header.templateCssWrapper\"\n          [configs]=\"header.colTemplateConfig\" />\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n  @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n    <div\n      #footerElementRef\n      class=\"flex w-full bg-[#f8f9fa] overflow-x-hidden z-[1] {{ ignoreBorderFooter() ? '' : customPositionFooter() === 'top' ? 'libs-ui-border-bottom-general' : 'libs-ui-table-shadow-top libs-ui-border-top-general' }} min-h-[35px]\"\n      (mouseenter)=\"handlerMouseEnterFooter($event)\"\n      (mouseleave)=\"handlerMouseLeaveFooter($event)\">\n      @if (footerLeft()) {\n        <div\n          #footerLeftElementRef\n          class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n          @for (footer of footerLeft(); track footer) {\n            <div\n              class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '' : 'libs-ui-border-right-general' }}\"\n              [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig && itemFooter()) {\n                @if (optimizeTableRenderByOnViewport()) {\n                  @defer (on viewport) {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  } @placeholder {\n                    <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                  }\n                } @else {\n                  <libs_ui-components-table-templates\n                    [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                    [class]=\"footer.templateCssWrapperHost || ''\"\n                    [templateCssWrapper]=\"footer.templateCssWrapper\"\n                    [configs]=\"footer.colTemplateConfig\" />\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (footerRight(); as footerRightList) {\n        @let constHtmlFunctionGetWidthItemFooter = functionGetWidthItem();\n        @if (useScrollMeasureColumn() && constHtmlFunctionGetWidthItemFooter) {\n          <div\n            class=\"flex h-full w-full relative\"\n            LibsUiScrollMeasureItemDirectionHorizontalDirective\n            [elementScroll]=\"footerElementRef\"\n            [items]=\"footerRightList\"\n            [functionGetWidthItem]=\"constHtmlFunctionGetWidthItemFooter\"\n            (outViewPortItem)=\"handlerOutViewPortItemFooterRight($event)\">\n            @for (footer of footerRightViewPort(); track footer) {\n              <div\n                class=\"flex items-center px-[12px] py-[8px]\"\n                [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRightList) || {}\"\n                [ngClass]=\"footer.ngClass || {}\">\n                @if (footer.colTemplateConfig && itemFooter()) {\n                  @if (optimizeTableRenderByOnViewport()) {\n                    @defer (on viewport) {\n                      <libs_ui-components-table-templates\n                        [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                        [class]=\"footer.templateCssWrapperHost || ''\"\n                        [templateCssWrapper]=\"footer.templateCssWrapper\"\n                        [configs]=\"footer.colTemplateConfig\" />\n                    } @placeholder {\n                      <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                    }\n                  } @else {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  }\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          @for (footer of footerRightList; track footer) {\n            <div\n              class=\"flex items-center px-[12px] py-[8px]\"\n              [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRightList) || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig && itemFooter()) {\n                @if (optimizeTableRenderByOnViewport()) {\n                  @defer (on viewport) {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  } @placeholder {\n                    <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                  }\n                } @else {\n                  <libs_ui-components-table-templates\n                    [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                    [class]=\"footer.templateCssWrapperHost || ''\"\n                    [templateCssWrapper]=\"footer.templateCssWrapper\"\n                    [configs]=\"footer.colTemplateConfig\" />\n                }\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateNodataRef>\n  @if (keySearch() || onlyShowNoResult()) {\n    @if (templateNoResult(); as templateNoResult) {\n      <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n    } @else {\n      <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n        <div class=\"flex flex-col items-center justify-center w-full h-full shrink-0\">\n          <ng-container *ngComponentOutlet=\"'no-result' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n          @let constHtmlTextSearchNoData = noDataConfig().textSearchNoData || 'i18n_no_result';\n          <div\n            class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"noDataConfig().ngStyle || {}\"\n            [ngClass]=\"noDataConfig().ngClass || {}\"\n            [innerHtml]=\"constHtmlTextSearchNoData | translate\"></div>\n        </div>\n      </div>\n    }\n  } @else {\n    @if (templateNoData(); as templateNoData) {\n      <ng-container *ngTemplateOutlet=\"templateNoData\" />\n    } @else {\n      <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n        <div class=\"flex flex-col items-center justify-center w-full h-full shrink-0\">\n          <ng-container *ngComponentOutlet=\"'no-data' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n          @let constHtmlTextNoData = noDataConfig().textNoData || 'i18n_no_data_yet';\n          <div\n            class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"noDataConfig().ngStyle || {}\"\n            [ngClass]=\"noDataConfig().ngClass || {}\"\n            [innerHtml]=\"constHtmlTextNoData | translate\"></div>\n        </div>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".libs-ui-table-header-container{height:33px;flex-shrink:0}.libs-ui-table-header-col{height:100%;width:100%;align-items:center}.libs-ui-table-no-data-config-text{margin-top:16px;font-size:12px;color:#9ca2ad;font-family:var(--libs-ui-font-family-name, \"Arial\");font-weight:400}.libs-ui-table-no-data-config-icon{margin-bottom:12px}.libs-ui-table-no-data-config-icon:before{font-size:84px;color:#c1c1c1}.libs-ui-table-shadow-bottom{box-shadow:0 1px 1px #00143305,0 4px 8px #0014330a}@media only screen and (min-width: 1921px){.libs-ui-border-bottom-general{border-bottom:solid 2px #e6e8ed!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsTableTemplatesComponent, selector: "libs_ui-components-table-templates", inputs: ["isHover", "configs", "templateCssWrapper", "item"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i2.VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "dropdownTemplateRefNotSearchNoData", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsButtonsSortArrowComponent, selector: "libs_ui-components-buttons-sort-arrow", inputs: ["size", "mode", "fieldSort", "disable", "ignorePopoverContent", "popoverContentAsc", "popoverContentDesc", "defaultMode", "zIndex"], outputs: ["modeChange", "outChange"] }, { kind: "component", type: LibsUiComponentsPaginationComponent, selector: "libs_ui-components-pagination", inputs: ["showTotalPage", "showInputGotoPage", "modeDisplayTotalPageAndGotoPage", "classDisplayTotalPageAndGotoPage", "classIncludeContainer", "classIncludeItem", "disable", "numberPageDisplay", "totalItems", "perPage", "currentPage"], outputs: ["currentPageChange", "outPageSelect"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiTableCalculatorColumnPipe, name: "LibsUiTableCalculatorColumnPipe" }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesCheckSelectedByKeyPipe, name: "LibsUiPipesCheckSelectedByKeyPipe" }, { kind: "pipe", type: LibsUiTableCheckItemHightLightPipe, name: "LibsUiTableCheckItemHightLightPipe" }, { kind: "directive", type: LibsUiScrollMeasureItemDirectionHorizontalDirective, selector: "[LibsUiScrollMeasureItemDirectionHorizontalDirective]", inputs: ["elementScroll", "functionGetWidthItem", "items"], outputs: ["outViewPortItem", "outFunctionControl", "outDivVirtual", "outPaddingLeft"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [LibsUiComponentsTableTemplatesComponent], () => [LibsUiComponentsTableTemplatesComponent], () => [LibsUiComponentsTableTemplatesComponent,
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTableComponent, isStandalone: true, selector: "libs_ui-components-table", inputs: { optimizeTableRenderByOnViewport: { classPropertyName: "optimizeTableRenderByOnViewport", publicName: "optimizeTableRenderByOnViewport", isSignal: true, isRequired: false, transformFunction: null }, timeHighlighNewItem: { classPropertyName: "timeHighlighNewItem", publicName: "timeHighlighNewItem", isSignal: true, isRequired: false, transformFunction: null }, headerLeft: { classPropertyName: "headerLeft", publicName: "headerLeft", isSignal: true, isRequired: false, transformFunction: null }, headerRight: { classPropertyName: "headerRight", publicName: "headerRight", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorWidthHeader: { classPropertyName: "ignoreCalculatorWidthHeader", publicName: "ignoreCalculatorWidthHeader", isSignal: true, isRequired: false, transformFunction: null }, configTemplateItemCollapseExpand: { classPropertyName: "configTemplateItemCollapseExpand", publicName: "configTemplateItemCollapseExpand", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderFooter: { classPropertyName: "ignoreBorderFooter", publicName: "ignoreBorderFooter", isSignal: true, isRequired: false, transformFunction: null }, customPositionFooter: { classPropertyName: "customPositionFooter", publicName: "customPositionFooter", isSignal: true, isRequired: false, transformFunction: null }, footerLeft: { classPropertyName: "footerLeft", publicName: "footerLeft", isSignal: true, isRequired: false, transformFunction: null }, footerRight: { classPropertyName: "footerRight", publicName: "footerRight", isSignal: true, isRequired: false, transformFunction: null }, disableCheckbox: { classPropertyName: "disableCheckbox", publicName: "disableCheckbox", isSignal: true, isRequired: false, transformFunction: null }, enableUnequalChildrenSizes: { classPropertyName: "enableUnequalChildrenSizes", publicName: "enableUnequalChildrenSizes", isSignal: true, isRequired: false, transformFunction: null }, bufferAmount: { classPropertyName: "bufferAmount", publicName: "bufferAmount", isSignal: true, isRequired: false, transformFunction: null }, totalItem: { classPropertyName: "totalItem", publicName: "totalItem", isSignal: true, isRequired: false, transformFunction: null }, isDashBorder: { classPropertyName: "isDashBorder", publicName: "isDashBorder", isSignal: true, isRequired: false, transformFunction: null }, classHeaderContainerInclude: { classPropertyName: "classHeaderContainerInclude", publicName: "classHeaderContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classHeaderLeftInclude: { classPropertyName: "classHeaderLeftInclude", publicName: "classHeaderLeftInclude", isSignal: true, isRequired: false, transformFunction: null }, classBodyInclude: { classPropertyName: "classBodyInclude", publicName: "classBodyInclude", isSignal: true, isRequired: false, transformFunction: null }, classFooterInclude: { classPropertyName: "classFooterInclude", publicName: "classFooterInclude", isSignal: true, isRequired: false, transformFunction: null }, classTableContainerInclude: { classPropertyName: "classTableContainerInclude", publicName: "classTableContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classBarInclude: { classPropertyName: "classBarInclude", publicName: "classBarInclude", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, defaultKeysSelected: { classPropertyName: "defaultKeysSelected", publicName: "defaultKeysSelected", isSignal: true, isRequired: false, transformFunction: null }, labelBarNoSelectItem: { classPropertyName: "labelBarNoSelectItem", publicName: "labelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, labelBarButtons: { classPropertyName: "labelBarButtons", publicName: "labelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarButtons: { classPropertyName: "classLabelBarButtons", publicName: "classLabelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, barButtons: { classPropertyName: "barButtons", publicName: "barButtons", isSignal: true, isRequired: false, transformFunction: null }, sortLocal: { classPropertyName: "sortLocal", publicName: "sortLocal", isSignal: true, isRequired: false, transformFunction: null }, filterOrSortLocal: { classPropertyName: "filterOrSortLocal", publicName: "filterOrSortLocal", isSignal: true, isRequired: false, transformFunction: null }, httpRequestData: { classPropertyName: "httpRequestData", publicName: "httpRequestData", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDataFooter: { classPropertyName: "httpRequestDataFooter", publicName: "httpRequestDataFooter", isSignal: true, isRequired: false, transformFunction: null }, newData: { classPropertyName: "newData", publicName: "newData", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, ignoreBar: { classPropertyName: "ignoreBar", publicName: "ignoreBar", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarNoSelectItem: { classPropertyName: "classLabelBarNoSelectItem", publicName: "classLabelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassBgHeader: { classPropertyName: "ignoreClassBgHeader", publicName: "ignoreClassBgHeader", isSignal: true, isRequired: false, transformFunction: null }, noDataConfig: { classPropertyName: "noDataConfig", publicName: "noDataConfig", isSignal: true, isRequired: false, transformFunction: null }, showScrollTablePinnedIfNoData: { classPropertyName: "showScrollTablePinnedIfNoData", publicName: "showScrollTablePinnedIfNoData", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItemLast: { classPropertyName: "ignoreBorderItemLast", publicName: "ignoreBorderItemLast", isSignal: true, isRequired: false, transformFunction: null }, isHiddenHeaderWhenNodata: { classPropertyName: "isHiddenHeaderWhenNodata", publicName: "isHiddenHeaderWhenNodata", isSignal: true, isRequired: false, transformFunction: null }, maxItemSelected: { classPropertyName: "maxItemSelected", publicName: "maxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, configSelectMoreItem: { classPropertyName: "configSelectMoreItem", publicName: "configSelectMoreItem", isSignal: true, isRequired: false, transformFunction: null }, onlyShowNoResult: { classPropertyName: "onlyShowNoResult", publicName: "onlyShowNoResult", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItem: { classPropertyName: "ignoreBorderItem", publicName: "ignoreBorderItem", isSignal: true, isRequired: false, transformFunction: null }, activityLoadData: { classPropertyName: "activityLoadData", publicName: "activityLoadData", isSignal: true, isRequired: false, transformFunction: null }, paginationSetting: { classPropertyName: "paginationSetting", publicName: "paginationSetting", isSignal: true, isRequired: false, transformFunction: null }, templateNoData: { classPropertyName: "templateNoData", publicName: "templateNoData", isSignal: true, isRequired: false, transformFunction: null }, templateNoResult: { classPropertyName: "templateNoResult", publicName: "templateNoResult", isSignal: true, isRequired: false, transformFunction: null }, autoEmitKeysSelectedWithItems: { classPropertyName: "autoEmitKeysSelectedWithItems", publicName: "autoEmitKeysSelectedWithItems", isSignal: true, isRequired: false, transformFunction: null }, functionGetWidthItem: { classPropertyName: "functionGetWidthItem", publicName: "functionGetWidthItem", isSignal: true, isRequired: false, transformFunction: null }, useScrollMeasureColumn: { classPropertyName: "useScrollMeasureColumn", publicName: "useScrollMeasureColumn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outLoadMore: "outLoadMore", outScrollIsGone: "outScrollIsGone", outLoading: "outLoading", outSort: "outSort", outClickBarButton: "outClickBarButton", outKeysSelected: "outKeysSelected", outFunctionsControl: "outFunctionsControl", outLoadDataComplete: "outLoadDataComplete", outTotalItem: "outTotalItem", outLoadDataError: "outLoadDataError" }, viewQueries: [{ propertyName: "headerElementRef", first: true, predicate: ["headerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerElementRef", first: true, predicate: ["footerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerLeftElementRef", first: true, predicate: ["footerLeftElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyElementRef", first: true, predicate: ["bodyElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyComponentRef", first: true, predicate: ["bodyComponentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n  @if (!ignoreBar()) {\n    <div\n      class=\"flex items-center relative z-[1] bottom-0 left-0 w-full bg-white libs-ui-table-shadow-bottom {{ classBarInclude() }}\"\n      [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      <ng-content select=\"div.libs-ui-table-bar-left\"></ng-content>\n      @if (!keysSelected().length && labelBarNoSelectItem()) {\n        <div\n          class=\"{{ classLabelBarNoSelectItemCss() }}\"\n          [innerHtml]=\"labelBarNoSelectItem() | translate: { value: totalItemDisplay() }\"></div>\n      }\n      @if (keysSelected().length) {\n        <div class=\"flex items-center pl-[12px]\">\n          <div class=\"flex items-center h-full mt-[-2px]\">\n            <libs_ui-components-checkbox-single\n              [checked]=\"true\"\n              [disable]=\"loading() || disableCheckbox()\"\n              (outChange)=\"handlerChangeAllChecked()\" />\n          </div>\n          <div class=\"libs-ui-font-h5m text-[#071631] mr-[8px] {{ classLabelBarButtons() }}\">\n            {{ labelBarButtons() | translate: { value: keysSelected().length } }}\n          </div>\n          @if (configSelectMoreItem()) {\n            <libs_ui-components-dropdown\n              [isNgContent]=\"true\"\n              [popoverCustomConfig]=\"{\n                widthByParent: false,\n                ignoreArrow: true,\n                maxHeight: 2048,\n                classInclude: '!w-[121px]',\n                position: {\n                  mode: 'start',\n                  distance: 0,\n                },\n              }\"\n              [listConfig]=\"listConfigMoreItem()\"\n              [listHiddenInputSearch]=\"true\"\n              [listMaxItemShow]=\"5\"\n              class=\"!w-[16px] h-[16px] mr-[8px]\"\n              (outSelectKey)=\"handlerSelectedMoreItem($event)\"\n              (outFunctionsControl)=\"handlerFunctionControlMoreSelectItem($event)\">\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-primary'\"\n                [classInclude]=\"'!p-0 m-0'\"\n                [classIconLeft]=\"'before:!text-[16px] libs-ui-icon-move-right rotate-90 mr-[6px]'\"\n                [popover]=\"{ config: { content: 'i18n_more_select' } }\"\n                [ignoreStopPropagationEvent]=\"true\" />\n            </libs_ui-components-dropdown>\n          }\n          <div class=\"h-[16px] libs-ui-border-left-general ml-[16px]\"></div>\n          @if (barButtons()?.length) {\n            @for (button of barButtons(); track button) {\n              @let constHtmlLabel = button.label || ' ';\n              <libs_ui-components-buttons-button\n                [type]=\"button.type || 'button-link-primary'\"\n                [classIconLeft]=\"button.classIconLeft || ''\"\n                [classInclude]=\"button.classInclude || ''\"\n                [label]=\"constHtmlLabel | translate\"\n                (outClick)=\"handlerBarButtonClick(button)\" />\n            }\n          }\n        </div>\n      }\n      <ng-content select=\"div.libs-ui-table-bar-right\"></ng-content>\n    </div>\n  }\n\n  <div\n    #tableContainerElementRef\n    class=\"libs-ui-table flex flex-col w-full h-full relative {{ classTableContainerInclude() }}\"\n    [class.px-[16px]]=\"!ignoreBar()\"\n    (mouseleave)=\"handlerMouseLeaveContainer($event)\">\n    <div\n      class=\"relative w-full shrink-0\"\n      [style.height.px]=\"headerElementRef.offsetHeight\"\n      [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\">\n      <div\n        #headerElementRef\n        LibsUiComponentsScrollOverlayDirective\n        [options]=\"{ scrollbarWidth: 0 }\"\n        [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n        [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n        [class]=\"classHeaderContainer()\"\n        (outScroll)=\"handlerScrollHeader($event)\"\n        (mouseenter)=\"handlerMouseEnterHeader($event)\"\n        (mouseleave)=\"handlerMouseLeaveHeader($event)\">\n        @if (headerLeft().length) {\n          <div [class]=\"classHeaderLeftContainer()\">\n            @for (header of headerLeft(); track header) {\n              <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: true }\" />\n            }\n          </div>\n        }\n        @if (headerRight().length) {\n          @let constHtmlFunctionGetWidthItem = functionGetWidthItem();\n          @if (useScrollMeasureColumn() && constHtmlFunctionGetWidthItem) {\n            <div\n              class=\"flex w-full h-full relative\"\n              LibsUiScrollMeasureItemDirectionHorizontalDirective\n              [elementScroll]=\"headerElementRef\"\n              [items]=\"headerRight()\"\n              [functionGetWidthItem]=\"constHtmlFunctionGetWidthItem\"\n              (outViewPortItem)=\"handlerOutViewPortItemHeaderRight($event)\"\n              (outPaddingLeft)=\"handlerOutPaddingLeftHeaderRight($event)\">\n              @for (header of headerRightViewPort(); track header) {\n                <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: false }\" />\n              }\n            </div>\n          } @else {\n            @for (header of headerRight(); track header) {\n              <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: false }\" />\n            }\n          }\n        }\n      </div>\n    </div>\n    @if (showFooter() && itemFooter() && customPositionFooter() === 'top') {\n      <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n    }\n    <div class=\"relative flex flex-col w-full h-full overflow-x-hidden bg-white {{ classBodyInclude() || '' }}\">\n      <div\n        #bodyElementRef\n        class=\"flex h-full w-full relative\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScroll)=\"handlerScrollBody($event)\"\n        (outScrollBottom)=\"handlerScrollBottom($event)\">\n        @if (items().length) {\n          <virtual-scroller\n            #bodyComponentRef\n            [items]=\"items()\"\n            [enableUnequalChildrenSizes]=\"enableUnequalChildrenSizes()\"\n            class=\"h-full\"\n            [style.width.px]=\"headerElementRef.scrollWidth > (bodyElementRef ? bodyElementRef.scrollWidth : 0) ? headerElementRef.scrollWidth : undefined\"\n            [parentScroll]=\"bodyElementRef\"\n            [bufferAmount]=\"bufferAmount()\">\n            @for (data of bodyComponentRef.viewPortItems; track data()) {\n              @let constHtmlIsHightLightItem = data | LibsUiTableCheckItemHightLightPipe: itemsHightLight();\n              <div\n                #elementHover\n                class=\"flex\"\n                [class.bg-[#f3fcfc]]=\"constHtmlIsHightLightItem\"\n                [class.libs-ui-border-top-1px-36d3d3]=\"constHtmlIsHightLightItem && $first && !ignoreBorderItem()\"\n                [class.libs-ui-border-bottom-1px-36d3d3]=\"constHtmlIsHightLightItem && !ignoreBorderItem()\"\n                [ngClass]=\"\n                  constHtmlIsHightLightItem || ($last && ignoreBorderItemLast())\n                    ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px'\n                    : ignoreBorderItem()\n                      ? ''\n                      : isDashBorder()\n                        ? 'libs-ui-border-bottom-dashed-general'\n                        : 'libs-ui-border-bottom-general'\n                \"\n                [style.width.px]=\"headerElementRef.scrollWidth\"\n                [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !constHtmlIsHightLightItem\"\n                (mouseenter)=\"setIndexHover($event, data)\"\n                (mouseleave)=\"resetIndexHoverWhenMouseLeave($event)\">\n                @if (headerLeft().length || headerRight().length) {\n                  <div class=\"flex flex-col w-full\">\n                    <div class=\"flex w-full\">\n                      @if (headerLeft().length) {\n                        <div\n                          class=\"flex sticky top-0 left-0 z-[1]\"\n                          [class.bg-white]=\"!constHtmlIsHightLightItem\"\n                          [class.bg-[#f3fcfc]]=\"constHtmlIsHightLightItem\">\n                          @for (header of headerLeft(); track header) {\n                            <div\n                              class=\"relative flex px-[12px] py-[8px] {{ header.ignoreBorderRight ? '' : 'libs-ui-border-right-general' }}\"\n                              [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !constHtmlIsHightLightItem\"\n                              [ngStyle]=\"\n                                (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                (header.isShowIndexOnRow ? { width: '50px', 'flex-shrink': '0', padding: '8px' } : {})\n                              \"\n                              [ngClass]=\"header.ngClass || {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (headerRight().length) {\n                        @if (useScrollMeasureColumn()) {\n                          <div\n                            class=\"flex w-full min-w-0\"\n                            [style.padding-left.px]=\"paddingLeftHeaderRight()\">\n                            @for (header of headerRightViewPort(); track header) {\n                              <div\n                                class=\"relative flex px-[12px] py-[8px]\"\n                                [ngStyle]=\"\n                                  (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                  (header.isShowIndexOnRow ? { width: '50px', 'flex-shrink': '0', padding: '8px' } : {})\n                                \"\n                                [ngClass]=\"header.ngClass || {}\">\n                                <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                              </div>\n                            }\n                          </div>\n                        } @else {\n                          @for (header of headerRight(); track header) {\n                            <div\n                              class=\"relative flex px-[12px] py-[8px]\"\n                              [ngStyle]=\"\n                                (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                (header.isShowIndexOnRow ? { width: '50px', 'flex-shrink': '0', padding: '8px' } : {})\n                              \"\n                              [ngClass]=\"header.ngClass || {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                            </div>\n                          }\n                        }\n                      }\n                    </div>\n                    @if (configTemplateItemCollapseExpand() && data().specificExpand && data()[configTemplateItemCollapseExpand()?.fieldGetDataExpand || 'specificDataExpand']) {\n                      <div [class]=\"configTemplateItemCollapseExpand()?.cssWrapper || 'flex w-full'\">\n                        @for (dataExpand of data()[configTemplateItemCollapseExpand()?.fieldGetDataExpand || 'specificDataExpand'](); track dataExpand) {\n                          @if (configTemplateItemCollapseExpand()?.colTemplateConfig) {\n                            @if (optimizeTableRenderByOnViewport()) {\n                              @defer (on viewport) {\n                                <libs_ui-components-table-templates\n                                  [item]=\"dataExpand\"\n                                  [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n                                  [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                                  [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n                              } @placeholder {\n                                <div [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || 'w-full h-full'\"></div>\n                              }\n                            } @else {\n                              <libs_ui-components-table-templates\n                                [item]=\"dataExpand\"\n                                [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n                                [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                                [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n                            }\n                          }\n                        } @empty {\n                          <div class=\"relative h-[100px]\">\n                            <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </virtual-scroller>\n        } @else if (!loading()) {\n          <div class=\"sticky left-0 top-0 z-[1] h-[calc(100%-10px)] w-full\">\n            <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n          </div>\n          @if (showScrollTablePinnedIfNoData()) {\n            <div\n              class=\"absolute h-[1px] bg-transparent top-0 left-0 z-[1]\"\n              [style.width.px]=\"headerElementRef.scrollWidth\"></div>\n          }\n        }\n      </div>\n\n      @if (showFooter() && itemFooter() && customPositionFooter() === 'bottom') {\n        <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n      }\n\n      @if (loading()) {\n        <div class=\"absolute w-full h-full z-[2] flex items-center content-center\">\n          <libs_ui-components-spinner />\n        </div>\n      }\n    </div>\n\n    @if (activityLoadData() === 'click-pagination') {\n      <div class=\"flex w-full mt-[12px]\">\n        <libs_ui-components-pagination\n          [modeDisplayTotalPageAndGotoPage]=\"paginationConfig().modeDisplayTotalPageAndGotoPage\"\n          [classDisplayTotalPageAndGotoPage]=\"paginationConfig().classDisplayTotalPageAndGotoPage\"\n          [classIncludeItem]=\"paginationConfig().classIncludeItem\"\n          [classIncludeContainer]=\"paginationConfig().classIncludeContainer\"\n          [disable]=\"paginationConfig().disable\"\n          [numberPageDisplay]=\"paginationConfig().numberPageDisplay\"\n          [showTotalPage]=\"paginationConfig().showTotalPage\"\n          [showInputGotoPage]=\"paginationConfig().showInputGotoPage\"\n          [totalItems]=\"pagingTotalItems()\"\n          [perPage]=\"pagingPerPage()\"\n          [currentPage]=\"pagingCurrentPage()\"\n          (outPageSelect)=\"handlerChangePage($event)\" />\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #templateHeaderRef\n  let-header=\"headerItem\"\n  let-isHeaderLeft=\"isHeaderLeft\">\n  <div\n    [class]=\"'relative flex ' + (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHeaderLeft && !header.ignoreBorderRight ? ' libs-ui-border-right-general ' : ' ') + ' libs-ui-table-header-col '\"\n    [class.flex-col]=\"header.rowsConfig\"\n    [class.py-[8px]]=\"!header.ignorePyDefault\"\n    [ngStyle]=\"\n      (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n      (header.isShowIndexOnRow ? { width: '50px', 'flex-shrink': '0', padding: '8px' } : {})\n    \"\n    [ngClass]=\"header.ngClass || {}\">\n    @if (!header.rowsConfig) {\n      <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: header, isColRender: false, isHeaderLeft: isHeaderLeft }\" />\n    }\n    @if (header.rowsConfig; as rowsConfig) {\n      @for (row of rowsConfig.rows; track row) {\n        <div [class]=\"row.classRow\">\n          @for (col of row.cols; track col) {\n            <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: col, isColRender: true, isHeaderLeft: isHeaderLeft }\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #templateHeaderContentRef\n  let-header=\"headerItem\"\n  let-isColRender=\"isColRender\"\n  let-isHeaderLeft=\"isHeaderLeft\">\n  <div\n    #itemHeaderRef\n    class=\"flex libs-ui-font-h6m min-h-[18px] text-[#6a7383] max-w-full\"\n    [class.items-center]=\"header.contentHeaderAlignCenter ?? true\"\n    [class.justify-end]=\"header.contentHeaderJustifyContentEnd\"\n    [class.w-full]=\"header.isShowIndexOnRow\"\n    [ngStyle]=\"\n      isColRender\n        ? (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n          (header.isShowIndexOnRow ? { width: '50px', 'flex-shrink': '0', padding: '8px' } : {})\n        : {}\n    \"\n    [ngClass]=\"isColRender ? header.ngClass || {} : {}\">\n    @if (header.hasCheckbox) {\n      @if (header.hasCheckboxAll) {\n        <div\n          class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n          [class.items-center]=\"header.checkboxAlignCenter\">\n          <libs_ui-components-checkbox-single\n            [key]=\"'all'\"\n            [stillOtherOptions]=\"!!keysSelected().length && keysSelected().length !== items().length\"\n            [checked]=\"!!keysSelected().length && keysSelected().length === items().length\"\n            [disable]=\"loading()\"\n            [classInclude]=\"header.checkboxClassInclude\"\n            (outChange)=\"handlerChangeCheckedAllItems($event)\" />\n        </div>\n      } @else {\n        <div class=\"flex h-full ml-[24px] {{ header.checkboxClassInclude }}\"></div>\n      }\n    }\n    @for (tooltip of header.tooltipsLeft; track tooltip) {\n      <div class=\"mr-[4px]\">\n        @let constHtmlTooltip = tooltip.dataView || ' ';\n        <libs_ui-components-popover\n          [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"\n            tooltip.config || {\n              content: constHtmlTooltip | translate,\n              position: {\n                mode: 'center',\n                distance: 0,\n                autoUpdatePosition: {\n                  endDistance: 12,\n                  startDistance: -12,\n                },\n              },\n            }\n          \"\n          [innerHTML]=\"tooltip.dataView\" />\n      </div>\n    }\n\n    @if (header.isShowIndexOnRow) {\n      <div class=\"flex w-full h-full items-center justify-center {{ header.classIncludeIndexOnRow || '' }}\">\n        {{ header.label ?? '#' }}\n      </div>\n    } @else {\n      @if (header.label | LibsUiPipesCallFunctionInTemplatePipe: header.parseValue : header | async | translate; as labelHeaderColumn) {\n        <libs_ui-components-popover\n          [type]=\"header?.labelConfig?.type || 'text'\"\n          [mode]=\"header?.labelConfig?.mode || 'hover'\"\n          [classInclude]=\"header?.labelConfig?.classInclude || ''\"\n          [ignoreShowPopover]=\"header?.labelConfig?.ignoreShowTooltip || false\"\n          [config]=\"header.labelConfig?.config || { content: labelHeaderColumn }\"\n          [innerHTML]=\"labelHeaderColumn\" />\n      }\n    }\n\n    @for (tooltip of header.tooltipsRight; track tooltip) {\n      <div class=\"ml-[4px]\">\n        @let constHtmlTooltip = tooltip.dataView || ' ';\n        <libs_ui-components-popover\n          [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"\n            tooltip.config || {\n              content: constHtmlTooltip | translate,\n              position: {\n                mode: 'center',\n                distance: 0,\n                autoUpdatePosition: {\n                  endDistance: 12,\n                  startDistance: -12,\n                },\n              },\n            }\n          \"\n          [innerHTML]=\"tooltip.dataView\" />\n      </div>\n    }\n\n    @if (header.hasSort && header.orderby) {\n      <div class=\"ml-[4px]\">\n        <libs_ui-components-buttons-sort-arrow\n          [disable]=\"loading() || !items().length\"\n          [fieldSort]=\"header.orderby\"\n          [ignorePopoverContent]=\"header.sortIgnoreTooltipContent ?? true\"\n          [popoverContentAsc]=\"header.sortTooltipContentAsc\"\n          [popoverContentDesc]=\"header.sortTooltipContentDesc\"\n          [defaultMode]=\"header.defaultMode\"\n          [zIndex]=\"header.zIndexTooltipSort\"\n          (outChange)=\"handlerChangeSort($event)\" />\n      </div>\n    }\n  </div>\n  @if (header.labelDescription) {\n    <div class=\"flex\">\n      <libs_ui-components-popover\n        [type]=\"'text'\"\n        [classInclude]=\"header.labelDescription.classInclude || ''\"\n        [config]=\"{ content: header.labelDescription.content | translate }\"\n        [innerHTML]=\"header.labelDescription.content | translate\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #templateBodyRef\n  let-header=\"header\"\n  let-data=\"data\"\n  let-constHtmlIsHightLightItem=\"constHtmlIsHightLightItem\">\n  <div class=\"flex w-full h-full\">\n    @if (header.hasCheckbox) {\n      <div\n        class=\"flex h-full\"\n        [class.invisible]=\"header.checkConditionCheckBoxHidden && (data() | LibsUiPipesCallFunctionInTemplatePipe: header.checkConditionCheckBoxHidden : data() | async)\"\n        [class.items-center]=\"header.checkboxAlignCenter\">\n        <libs_ui-components-checkbox-single\n          [key]=\"data()[fieldKey()]\"\n          [classInclude]=\"header.checkboxClassInclude\"\n          [checked]=\"data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length\"\n          [disable]=\"loading() || disableCheckbox() || !!(maxItemSelected() && !(data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length) && keysSelected().length >= maxItemSelected())\"\n          (outChange)=\"handlerChangeItemChecked($event, data())\" />\n      </div>\n    }\n\n    @if (header.isShowIndexOnRow; as config) {\n      <div class=\"w-full flex items-center justify-center libs-ui-font-h4r{{ config.classIncludeIndexOnRow || '' }}\">\n        <div\n          LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{}\"\n          [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe: getIndexRow | async\"></div>\n      </div>\n    }\n\n    @if (header.colTemplateConfig) {\n      @let constHtmlIsHover = itemOfIndexHover === data && !constHtmlIsHightLightItem;\n      @if (optimizeTableRenderByOnViewport()) {\n        @defer (on viewport) {\n          <libs_ui-components-table-templates\n            [isHover]=\"constHtmlIsHover\"\n            [class]=\"header.templateCssWrapperHost || ''\"\n            [item]=\"data\"\n            [templateCssWrapper]=\"header.templateCssWrapper\"\n            [configs]=\"header.colTemplateConfig\" />\n        } @placeholder {\n          <div [class]=\"header.templateCssWrapperHost || 'w-full h-full'\"></div>\n        }\n      } @else {\n        <libs_ui-components-table-templates\n          [isHover]=\"constHtmlIsHover\"\n          [class]=\"header.templateCssWrapperHost || ''\"\n          [item]=\"data\"\n          [templateCssWrapper]=\"header.templateCssWrapper\"\n          [configs]=\"header.colTemplateConfig\" />\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n  @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n    <div\n      #footerElementRef\n      class=\"flex w-full bg-[#f8f9fa] overflow-x-hidden z-[1] {{ ignoreBorderFooter() ? '' : customPositionFooter() === 'top' ? 'libs-ui-border-bottom-general' : 'libs-ui-table-shadow-top libs-ui-border-top-general' }} min-h-[35px]\"\n      (mouseenter)=\"handlerMouseEnterFooter($event)\"\n      (mouseleave)=\"handlerMouseLeaveFooter($event)\">\n      @if (footerLeft()) {\n        <div\n          #footerLeftElementRef\n          class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n          @for (footer of footerLeft(); track footer) {\n            <div\n              class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '' : 'libs-ui-border-right-general' }}\"\n              [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig && itemFooter()) {\n                @if (optimizeTableRenderByOnViewport()) {\n                  @defer (on viewport) {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  } @placeholder {\n                    <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                  }\n                } @else {\n                  <libs_ui-components-table-templates\n                    [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                    [class]=\"footer.templateCssWrapperHost || ''\"\n                    [templateCssWrapper]=\"footer.templateCssWrapper\"\n                    [configs]=\"footer.colTemplateConfig\" />\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (footerRight(); as footerRightList) {\n        @let constHtmlFunctionGetWidthItemFooter = functionGetWidthItem();\n        @if (useScrollMeasureColumn() && constHtmlFunctionGetWidthItemFooter) {\n          <div\n            class=\"flex h-full w-full relative\"\n            LibsUiScrollMeasureItemDirectionHorizontalDirective\n            [elementScroll]=\"footerElementRef\"\n            [items]=\"footerRightList\"\n            [functionGetWidthItem]=\"constHtmlFunctionGetWidthItemFooter\"\n            (outViewPortItem)=\"handlerOutViewPortItemFooterRight($event)\">\n            @for (footer of footerRightViewPort(); track footer) {\n              <div\n                class=\"flex items-center px-[12px] py-[8px]\"\n                [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRightList) || {}\"\n                [ngClass]=\"footer.ngClass || {}\">\n                @if (footer.colTemplateConfig && itemFooter()) {\n                  @if (optimizeTableRenderByOnViewport()) {\n                    @defer (on viewport) {\n                      <libs_ui-components-table-templates\n                        [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                        [class]=\"footer.templateCssWrapperHost || ''\"\n                        [templateCssWrapper]=\"footer.templateCssWrapper\"\n                        [configs]=\"footer.colTemplateConfig\" />\n                    } @placeholder {\n                      <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                    }\n                  } @else {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  }\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          @for (footer of footerRightList; track footer) {\n            <div\n              class=\"flex items-center px-[12px] py-[8px]\"\n              [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRightList) || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig && itemFooter()) {\n                @if (optimizeTableRenderByOnViewport()) {\n                  @defer (on viewport) {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  } @placeholder {\n                    <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                  }\n                } @else {\n                  <libs_ui-components-table-templates\n                    [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                    [class]=\"footer.templateCssWrapperHost || ''\"\n                    [templateCssWrapper]=\"footer.templateCssWrapper\"\n                    [configs]=\"footer.colTemplateConfig\" />\n                }\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateNodataRef>\n  @if (keySearch() || onlyShowNoResult()) {\n    @if (templateNoResult(); as templateNoResult) {\n      <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n    } @else {\n      <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n        <div class=\"flex flex-col items-center justify-center w-full h-full shrink-0\">\n          <ng-container *ngComponentOutlet=\"'no-result' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n          <div\n            class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"noDataConfig().ngStyle\"\n            [ngClass]=\"noDataConfig().ngClass\"\n            [innerHtml]=\"noDataSearchText() | translate\"></div>\n        </div>\n      </div>\n    }\n  } @else {\n    @if (templateNoData(); as templateNoData) {\n      <ng-container *ngTemplateOutlet=\"templateNoData\" />\n    } @else {\n      <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n        <div class=\"flex flex-col items-center justify-center w-full h-full shrink-0\">\n          <ng-container *ngComponentOutlet=\"'no-data' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n          <div\n            class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"noDataConfig().ngStyle\"\n            [ngClass]=\"noDataConfig().ngClass\"\n            [innerHtml]=\"noDataText() | translate\"></div>\n        </div>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".libs-ui-table-header-container{height:33px;flex-shrink:0}.libs-ui-table-header-col{height:100%;width:100%;align-items:center}.libs-ui-table-no-data-config-text{margin-top:16px;font-size:12px;color:#9ca2ad;font-family:var(--libs-ui-font-family-name, \"Arial\");font-weight:400}.libs-ui-table-no-data-config-icon{margin-bottom:12px}.libs-ui-table-no-data-config-icon:before{font-size:84px;color:#c1c1c1}.libs-ui-table-shadow-bottom{box-shadow:0 1px 1px #00143305,0 4px 8px #0014330a}@media only screen and (min-width: 1921px){.libs-ui-border-bottom-general{border-bottom:solid 2px #e6e8ed!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsTableTemplatesComponent, selector: "libs_ui-components-table-templates", inputs: ["isHover", "configs", "templateCssWrapper", "item"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i2.VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "dropdownTemplateRefNotSearchNoData", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsButtonsSortArrowComponent, selector: "libs_ui-components-buttons-sort-arrow", inputs: ["size", "mode", "fieldSort", "disable", "ignorePopoverContent", "popoverContentAsc", "popoverContentDesc", "defaultMode", "zIndex"], outputs: ["modeChange", "outChange"] }, { kind: "component", type: LibsUiComponentsPaginationComponent, selector: "libs_ui-components-pagination", inputs: ["showTotalPage", "showInputGotoPage", "modeDisplayTotalPageAndGotoPage", "classDisplayTotalPageAndGotoPage", "classIncludeContainer", "classIncludeItem", "disable", "numberPageDisplay", "totalItems", "perPage", "currentPage"], outputs: ["currentPageChange", "outPageSelect"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiTableCalculatorColumnPipe, name: "LibsUiTableCalculatorColumnPipe" }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesCheckSelectedByKeyPipe, name: "LibsUiPipesCheckSelectedByKeyPipe" }, { kind: "pipe", type: LibsUiTableCheckItemHightLightPipe, name: "LibsUiTableCheckItemHightLightPipe" }, { kind: "directive", type: LibsUiScrollMeasureItemDirectionHorizontalDirective, selector: "[LibsUiScrollMeasureItemDirectionHorizontalDirective]", inputs: ["elementScroll", "functionGetWidthItem", "items"], outputs: ["outViewPortItem", "outFunctionControl", "outDivVirtual", "outPaddingLeft"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [LibsUiComponentsTableTemplatesComponent], () => [LibsUiComponentsTableTemplatesComponent], () => [LibsUiComponentsTableTemplatesComponent,
                 LibsUiPipesConvertObjectToSignalPipe], () => [LibsUiComponentsTableTemplatesComponent,
                 LibsUiPipesConvertObjectToSignalPipe], () => [LibsUiComponentsTableTemplatesComponent,
                 LibsUiPipesConvertObjectToSignalPipe]] });
@@ -979,7 +1009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiPipesCheckSelectedByKeyPipe,
                         LibsUiTableCheckItemHightLightPipe,
                         LibsUiScrollMeasureItemDirectionHorizontalDirective,
-                    ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (!ignoreBar()) {\n    <div\n      class=\"flex items-center relative z-[1] bottom-0 left-0 w-full bg-white libs-ui-table-shadow-bottom {{ classBarInclude() }}\"\n      [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      <ng-content select=\"div.libs-ui-table-bar-left\"></ng-content>\n      @if (!keysSelected().length && labelBarNoSelectItem()) {\n        <div\n          class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n          [innerHtml]=\"labelBarNoSelectItem() | translate: { value: totalItemDisplay() }\"></div>\n      }\n      @if (keysSelected().length) {\n        <div class=\"flex items-center pl-[12px]\">\n          <div class=\"flex items-center h-full mt-[-2px]\">\n            <libs_ui-components-checkbox-single\n              [checked]=\"true\"\n              [disable]=\"loading() || disableCheckbox()\"\n              (outChange)=\"handlerChangeAllChecked()\" />\n          </div>\n          <div class=\"libs-ui-font-h5m text-[#071631] mr-[8px] {{ classLabelBarButtons() }}\">\n            {{ labelBarButtons() | translate: { value: keysSelected().length } }}\n          </div>\n          @if (configSelectMoreItem()) {\n            <libs_ui-components-dropdown\n              [isNgContent]=\"true\"\n              [popoverCustomConfig]=\"{\n                widthByParent: false,\n                ignoreArrow: true,\n                maxHeight: 2048,\n                classInclude: '!w-[121px]',\n                position: {\n                  mode: 'start',\n                  distance: 0,\n                },\n              }\"\n              [listConfig]=\"listConfigMoreItem()\"\n              [listHiddenInputSearch]=\"true\"\n              [listMaxItemShow]=\"5\"\n              class=\"!w-[16px] h-[16px] mr-[8px]\"\n              (outSelectKey)=\"handlerSelectedMoreItem($event)\"\n              (outFunctionsControl)=\"handlerFunctionControlMoreSelectItem($event)\">\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-primary'\"\n                [classInclude]=\"'!p-0 m-0'\"\n                [classIconLeft]=\"'before:!text-[16px] libs-ui-icon-move-right rotate-90 mr-[6px]'\"\n                [popover]=\"{ config: { content: 'i18n_more_select' } }\"\n                [ignoreStopPropagationEvent]=\"true\" />\n            </libs_ui-components-dropdown>\n          }\n          <div class=\"h-[16px] libs-ui-border-left-general ml-[16px]\"></div>\n          @if (barButtons()?.length) {\n            @for (button of barButtons(); track button) {\n              @let constHtmlLabel = button.label || ' ';\n              <libs_ui-components-buttons-button\n                [type]=\"button.type || 'button-link-primary'\"\n                [classIconLeft]=\"button.classIconLeft || ''\"\n                [classInclude]=\"button.classInclude || ''\"\n                [label]=\"constHtmlLabel | translate\"\n                (outClick)=\"handlerBarButtonClick(button)\" />\n            }\n          }\n        </div>\n      }\n      <ng-content select=\"div.libs-ui-table-bar-right\"></ng-content>\n    </div>\n  }\n\n  <div\n    #tableContainerElementRef\n    class=\"libs-ui-table flex flex-col w-full h-full relative {{ classTableContainerInclude() }}\"\n    [class.px-[16px]]=\"!ignoreBar()\"\n    (mouseleave)=\"handlerMouseLeaveContainer($event)\">\n    <div\n      class=\"relative w-full shrink-0\"\n      [style.height.px]=\"headerElementRef.offsetHeight\"\n      [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\">\n      <div\n        #headerElementRef\n        LibsUiComponentsScrollOverlayDirective\n        [options]=\"{ scrollbarWidth: 0 }\"\n        [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n        [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n        [class]=\"classHeaderContainer()\"\n        (outScroll)=\"handlerScrollHeader($event)\"\n        (mouseenter)=\"handlerMouseEnterHeader($event)\"\n        (mouseleave)=\"handlerMouseLeaveHeader($event)\">\n        @if (headerLeft().length) {\n          <div [class]=\"classHeaderLeftContainer()\">\n            @for (header of headerLeft(); track header) {\n              <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: true }\" />\n            }\n          </div>\n        }\n        @if (headerRight().length) {\n          @let constHtmlFunctionGetWidthItem = functionGetWidthItem();\n          @if (useScrollMeasureColumn() && constHtmlFunctionGetWidthItem) {\n            <div\n              class=\"flex w-full h-full relative\"\n              LibsUiScrollMeasureItemDirectionHorizontalDirective\n              [elementScroll]=\"headerElementRef\"\n              [items]=\"headerRight()\"\n              [functionGetWidthItem]=\"constHtmlFunctionGetWidthItem\"\n              (outViewPortItem)=\"handlerOutViewPortItemHeaderRight($event)\"\n              (outPaddingLeft)=\"handlerOutPaddingLeftHeaderRight($event)\">\n              @for (header of headerRightViewPort(); track header) {\n                <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: false }\" />\n              }\n            </div>\n          } @else {\n            @for (header of headerRight(); track header) {\n              <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: false }\" />\n            }\n          }\n        }\n      </div>\n    </div>\n    @if (showFooter() && itemFooter() && customPositionFooter() === 'top') {\n      <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n    }\n    <div class=\"relative flex flex-col w-full h-full overflow-x-hidden bg-white {{ classBodyInclude() || '' }}\">\n      <div\n        #bodyElementRef\n        class=\"flex h-full w-full relative\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScroll)=\"handlerScrollBody($event)\"\n        (outScrollBottom)=\"handlerScrollBottom($event)\">\n        @if (items().length) {\n          <virtual-scroller\n            #bodyComponentRef\n            [items]=\"items()\"\n            [enableUnequalChildrenSizes]=\"enableUnequalChildrenSizes()\"\n            class=\"h-full\"\n            [style.width.px]=\"headerElementRef.scrollWidth > (bodyElementRef ? bodyElementRef.scrollWidth : 0) ? headerElementRef.scrollWidth : undefined\"\n            [parentScroll]=\"bodyElementRef\"\n            [bufferAmount]=\"bufferAmount()\">\n            @for (data of bodyComponentRef.viewPortItems; track data()) {\n              @let constHtmlIsHightLightItem = data | LibsUiTableCheckItemHightLightPipe: itemsHightLight();\n              <div\n                #elementHover\n                class=\"flex\"\n                [class.bg-[#f3fcfc]]=\"constHtmlIsHightLightItem\"\n                [class.libs-ui-border-top-1px-36d3d3]=\"constHtmlIsHightLightItem && $first && !ignoreBorderItem()\"\n                [class.libs-ui-border-bottom-1px-36d3d3]=\"constHtmlIsHightLightItem && !ignoreBorderItem()\"\n                [ngClass]=\"\n                  constHtmlIsHightLightItem || ($last && ignoreBorderItemLast())\n                    ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px'\n                    : ignoreBorderItem()\n                      ? ''\n                      : isDashBorder()\n                        ? 'libs-ui-border-bottom-dashed-general'\n                        : 'libs-ui-border-bottom-general'\n                \"\n                [style.width.px]=\"headerElementRef.scrollWidth\"\n                [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !constHtmlIsHightLightItem\"\n                (mouseenter)=\"setIndexHover($event, data)\"\n                (mouseleave)=\"resetIndexHoverWhenMouseLeave($event)\">\n                @if (headerLeft().length || headerRight().length) {\n                  <div class=\"flex flex-col w-full\">\n                    <div class=\"flex w-full\">\n                      @if (headerLeft().length) {\n                        <div\n                          class=\"flex sticky top-0 left-0 z-[1]\"\n                          [class.bg-white]=\"!constHtmlIsHightLightItem\"\n                          [class.bg-[#f3fcfc]]=\"constHtmlIsHightLightItem\">\n                          @for (header of headerLeft(); track header) {\n                            <div\n                              class=\"relative flex px-[12px] py-[8px] {{ header.ignoreBorderRight ? '' : 'libs-ui-border-right-general' }}\"\n                              [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !constHtmlIsHightLightItem\"\n                              [ngStyle]=\"\n                                (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n                              \"\n                              [ngClass]=\"header.ngClass || {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (headerRight().length) {\n                        @if (useScrollMeasureColumn()) {\n                          <div\n                            class=\"flex w-full min-w-0\"\n                            [style.padding-left.px]=\"paddingLeftHeaderRight()\">\n                            @for (header of headerRightViewPort(); track header) {\n                              <div\n                                class=\"relative flex px-[12px] py-[8px]\"\n                                [ngStyle]=\"\n                                  (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                  (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n                                \"\n                                [ngClass]=\"header.ngClass || {}\">\n                                <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                              </div>\n                            }\n                          </div>\n                        } @else {\n                          @for (header of headerRight(); track header) {\n                            <div\n                              class=\"relative flex px-[12px] py-[8px]\"\n                              [ngStyle]=\"\n                                (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n                              \"\n                              [ngClass]=\"header.ngClass || {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                            </div>\n                          }\n                        }\n                      }\n                    </div>\n                    @if (configTemplateItemCollapseExpand() && data().specificExpand && data()[configTemplateItemCollapseExpand()?.fieldGetDataExpand || 'specificDataExpand']) {\n                      <div [class]=\"configTemplateItemCollapseExpand()?.cssWrapper || 'flex w-full'\">\n                        @for (dataExpand of data()[configTemplateItemCollapseExpand()?.fieldGetDataExpand || 'specificDataExpand'](); track $index) {\n                          @if (configTemplateItemCollapseExpand()?.colTemplateConfig) {\n                            @if (optimizeTableRenderByOnViewport()) {\n                              @defer (on viewport) {\n                                <libs_ui-components-table-templates\n                                  [item]=\"dataExpand\"\n                                  [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n                                  [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                                  [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n                              } @placeholder {\n                                <div [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || 'w-full h-full'\"></div>\n                              }\n                            } @else {\n                              <libs_ui-components-table-templates\n                                [item]=\"dataExpand\"\n                                [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n                                [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                                [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n                            }\n                          }\n                        } @empty {\n                          <div class=\"relative h-[100px]\">\n                            <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </virtual-scroller>\n        } @else if (!loading()) {\n          <div class=\"sticky left-0 top-0 z-[1] h-[calc(100%-10px)] w-full\">\n            <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n          </div>\n          @if (showScrollTablePinnedIfNoData()) {\n            <div\n              class=\"absolute h-[1px] bg-transparent top-0 left-0 z-[1]\"\n              [style.width.px]=\"headerElementRef.scrollWidth\"></div>\n          }\n        }\n      </div>\n\n      @if (showFooter() && itemFooter() && customPositionFooter() === 'bottom') {\n        <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n      }\n\n      @if (loading()) {\n        <div class=\"absolute w-full h-full z-[2] flex items-center content-center\">\n          <libs_ui-components-spinner />\n        </div>\n      }\n    </div>\n\n    @if (activityLoadData() === 'click-pagination') {\n      <div class=\"flex w-full mt-[12px]\">\n        <libs_ui-components-pagination\n          [modeDisplayTotalPageAndGotoPage]=\"paginationSetting()?.modeDisplayTotalPageAndGotoPage || 'bottom'\"\n          [classDisplayTotalPageAndGotoPage]=\"paginationSetting()?.classDisplayTotalPageAndGotoPage || ''\"\n          [classIncludeItem]=\"paginationSetting()?.classIncludeItem || ''\"\n          [classIncludeContainer]=\"paginationSetting()?.classIncludeContainer || '!items-end'\"\n          [disable]=\"paginationSetting()?.disable || loading() || !items().length\"\n          [numberPageDisplay]=\"paginationSetting()?.numberPageDisplay || 5\"\n          [showTotalPage]=\"paginationSetting()?.showTotalPage || false\"\n          [showInputGotoPage]=\"paginationSetting()?.showInputGotoPage || false\"\n          [totalItems]=\"pagingStore()?.total_items || (pagingStore()?.total_pages || 0) * (pagingStore()?.per_page || 0)\"\n          [perPage]=\"pagingStore()?.per_page || 0\"\n          [currentPage]=\"pagingStore()?.page || 0\"\n          (outPageSelect)=\"handlerChangePage($event)\" />\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #templateHeaderRef\n  let-header=\"headerItem\"\n  let-isHeaderLeft=\"isHeaderLeft\">\n  <div\n    [class]=\"'relative flex ' + (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHeaderLeft && !header.ignoreBorderRight ? ' libs-ui-border-right-general ' : ' ') + ' libs-ui-table-header-col '\"\n    [class.flex-col]=\"header.rowsConfig\"\n    [class.py-[8px]]=\"!header.ignorePyDefault\"\n    [ngStyle]=\"\n      (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n      (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n    \"\n    [ngClass]=\"header.ngClass || {}\">\n    @if (!header.rowsConfig) {\n      <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: header, isColRender: false, isHeaderLeft: isHeaderLeft }\" />\n    }\n    @if (header.rowsConfig; as rowsConfig) {\n      @for (row of rowsConfig.rows; track row) {\n        <div [class]=\"row.classRow\">\n          @for (col of row.cols; track col) {\n            <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: col, isColRender: true, isHeaderLeft: isHeaderLeft }\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #templateHeaderContentRef\n  let-header=\"headerItem\"\n  let-isColRender=\"isColRender\"\n  let-isHeaderLeft=\"isHeaderLeft\">\n  <div\n    #itemHeaderRef\n    class=\"flex libs-ui-font-h6m min-h-[18px] text-[#6a7383] max-w-full\"\n    [class.items-center]=\"header.contentHeaderAlignCenter ?? true\"\n    [class.justify-end]=\"header.contentHeaderJustifyContentEnd\"\n    [class.w-full]=\"header.isShowIndexOnRow\"\n    [ngStyle]=\"\n      isColRender\n        ? (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n          (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\n        : {}\n    \"\n    [ngClass]=\"isColRender ? header.ngClass || {} : {}\">\n    @if (header.hasCheckbox) {\n      @if (header.hasCheckboxAll) {\n        <div\n          class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n          [class.items-center]=\"header.checkboxAlignCenter\">\n          <libs_ui-components-checkbox-single\n            [key]=\"'all'\"\n            [stillOtherOptions]=\"!!keysSelected().length && keysSelected().length !== items().length\"\n            [checked]=\"!!keysSelected().length && keysSelected().length === items().length\"\n            [disable]=\"loading()\"\n            [classInclude]=\"header.checkboxClassInclude\"\n            (outChange)=\"handlerChangeCheckedAllItems($event)\" />\n        </div>\n      } @else {\n        <div class=\"flex h-full ml-[24px] {{ header.checkboxClassInclude }}\"></div>\n      }\n    }\n    @for (tooltip of header.tooltipsLeft; track tooltip) {\n      <div class=\"mr-[4px]\">\n        @let constHtmlTooltip = tooltip.dataView || ' ';\n        <libs_ui-components-popover\n          [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"\n            tooltip.config || {\n              content: constHtmlTooltip | translate,\n              position: {\n                mode: 'center',\n                distance: 0,\n                autoUpdatePosition: {\n                  endDistance: 12,\n                  startDistance: -12,\n                },\n              },\n            }\n          \"\n          [innerHTML]=\"tooltip.dataView\" />\n      </div>\n    }\n\n    @if (header.isShowIndexOnRow) {\n      <div class=\"flex w-full h-full items-center justify-center {{ header.classIncludeIndexOnRow || '' }}\">\n        {{ header.label ?? '#' }}\n      </div>\n    } @else {\n      @if (header.label | LibsUiPipesCallFunctionInTemplatePipe: header.parseValue : header | async | translate; as labelHeaderColumn) {\n        <libs_ui-components-popover\n          [type]=\"header?.labelConfig?.type || 'text'\"\n          [mode]=\"header?.labelConfig?.mode || 'hover'\"\n          [classInclude]=\"header?.labelConfig?.classInclude || ''\"\n          [ignoreShowPopover]=\"header?.labelConfig?.ignoreShowTooltip || false\"\n          [config]=\"header.labelConfig?.config || { content: labelHeaderColumn }\"\n          [innerHTML]=\"labelHeaderColumn\" />\n      }\n    }\n\n    @for (tooltip of header.tooltipsRight; track tooltip) {\n      <div class=\"ml-[4px]\">\n        @let constHtmlTooltip = tooltip.dataView || ' ';\n        <libs_ui-components-popover\n          [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"\n            tooltip.config || {\n              content: constHtmlTooltip | translate,\n              position: {\n                mode: 'center',\n                distance: 0,\n                autoUpdatePosition: {\n                  endDistance: 12,\n                  startDistance: -12,\n                },\n              },\n            }\n          \"\n          [innerHTML]=\"tooltip.dataView\" />\n      </div>\n    }\n\n    @if (header.hasSort && header.orderby) {\n      <div class=\"ml-[4px]\">\n        <libs_ui-components-buttons-sort-arrow\n          [disable]=\"loading() || !items().length\"\n          [fieldSort]=\"header.orderby\"\n          [ignorePopoverContent]=\"header.sortIgnoreTooltipContent ?? true\"\n          [popoverContentAsc]=\"header.sortTooltipContentAsc\"\n          [popoverContentDesc]=\"header.sortTooltipContentDesc\"\n          [defaultMode]=\"header.defaultMode\"\n          [zIndex]=\"header.zIndexTooltipSort\"\n          (outChange)=\"handlerChangeSort($event)\" />\n      </div>\n    }\n  </div>\n  @if (header.labelDescription) {\n    <div class=\"flex\">\n      <libs_ui-components-popover\n        [type]=\"'text'\"\n        [classInclude]=\"header.labelDescription.classInclude || ''\"\n        [config]=\"{ content: header.labelDescription.content | translate }\"\n        [innerHTML]=\"header.labelDescription.content | translate\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #templateBodyRef\n  let-header=\"header\"\n  let-data=\"data\"\n  let-constHtmlIsHightLightItem=\"constHtmlIsHightLightItem\">\n  <div class=\"flex w-full h-full\">\n    @if (header.hasCheckbox) {\n      <div\n        class=\"flex h-full\"\n        [class.invisible]=\"header.checkConditionCheckBoxHidden && (data() | LibsUiPipesCallFunctionInTemplatePipe: header.checkConditionCheckBoxHidden : data() | async)\"\n        [class.items-center]=\"header.checkboxAlignCenter\">\n        <libs_ui-components-checkbox-single\n          [key]=\"data()[fieldKey()]\"\n          [classInclude]=\"header.checkboxClassInclude\"\n          [checked]=\"data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length\"\n          [disable]=\"loading() || disableCheckbox() || !!(maxItemSelected() && !(data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length) && keysSelected().length >= maxItemSelected())\"\n          (outChange)=\"handlerChangeItemChecked($event, data())\" />\n      </div>\n    }\n\n    @if (header.isShowIndexOnRow; as config) {\n      <div class=\"w-full flex items-center justify-center libs-ui-font-h4r{{ config.classIncludeIndexOnRow || '' }}\">\n        <div\n          LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{}\"\n          [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe: getIndexRow | async\"></div>\n      </div>\n    }\n\n    @if (header.colTemplateConfig) {\n      @let constHtmlIsHover = itemOfIndexHover === data && !constHtmlIsHightLightItem;\n      @if (optimizeTableRenderByOnViewport()) {\n        @defer (on viewport) {\n          <libs_ui-components-table-templates\n            [isHover]=\"constHtmlIsHover\"\n            [class]=\"header.templateCssWrapperHost || ''\"\n            [item]=\"data\"\n            [templateCssWrapper]=\"header.templateCssWrapper\"\n            [configs]=\"header.colTemplateConfig\" />\n        } @placeholder {\n          <div [class]=\"header.templateCssWrapperHost || 'w-full h-full'\"></div>\n        }\n      } @else {\n        <libs_ui-components-table-templates\n          [isHover]=\"constHtmlIsHover\"\n          [class]=\"header.templateCssWrapperHost || ''\"\n          [item]=\"data\"\n          [templateCssWrapper]=\"header.templateCssWrapper\"\n          [configs]=\"header.colTemplateConfig\" />\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n  @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n    <div\n      #footerElementRef\n      class=\"flex w-full bg-[#f8f9fa] overflow-x-hidden z-[1] {{ ignoreBorderFooter() ? '' : customPositionFooter() === 'top' ? 'libs-ui-border-bottom-general' : 'libs-ui-table-shadow-top libs-ui-border-top-general' }} min-h-[35px]\"\n      (mouseenter)=\"handlerMouseEnterFooter($event)\"\n      (mouseleave)=\"handlerMouseLeaveFooter($event)\">\n      @if (footerLeft()) {\n        <div\n          #footerLeftElementRef\n          class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n          @for (footer of footerLeft(); track footer) {\n            <div\n              class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '' : 'libs-ui-border-right-general' }}\"\n              [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig && itemFooter()) {\n                @if (optimizeTableRenderByOnViewport()) {\n                  @defer (on viewport) {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  } @placeholder {\n                    <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                  }\n                } @else {\n                  <libs_ui-components-table-templates\n                    [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                    [class]=\"footer.templateCssWrapperHost || ''\"\n                    [templateCssWrapper]=\"footer.templateCssWrapper\"\n                    [configs]=\"footer.colTemplateConfig\" />\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (footerRight(); as footerRightList) {\n        @let constHtmlFunctionGetWidthItemFooter = functionGetWidthItem();\n        @if (useScrollMeasureColumn() && constHtmlFunctionGetWidthItemFooter) {\n          <div\n            class=\"flex h-full w-full relative\"\n            LibsUiScrollMeasureItemDirectionHorizontalDirective\n            [elementScroll]=\"footerElementRef\"\n            [items]=\"footerRightList\"\n            [functionGetWidthItem]=\"constHtmlFunctionGetWidthItemFooter\"\n            (outViewPortItem)=\"handlerOutViewPortItemFooterRight($event)\">\n            @for (footer of footerRightViewPort(); track footer) {\n              <div\n                class=\"flex items-center px-[12px] py-[8px]\"\n                [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRightList) || {}\"\n                [ngClass]=\"footer.ngClass || {}\">\n                @if (footer.colTemplateConfig && itemFooter()) {\n                  @if (optimizeTableRenderByOnViewport()) {\n                    @defer (on viewport) {\n                      <libs_ui-components-table-templates\n                        [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                        [class]=\"footer.templateCssWrapperHost || ''\"\n                        [templateCssWrapper]=\"footer.templateCssWrapper\"\n                        [configs]=\"footer.colTemplateConfig\" />\n                    } @placeholder {\n                      <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                    }\n                  } @else {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  }\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          @for (footer of footerRightList; track footer) {\n            <div\n              class=\"flex items-center px-[12px] py-[8px]\"\n              [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRightList) || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig && itemFooter()) {\n                @if (optimizeTableRenderByOnViewport()) {\n                  @defer (on viewport) {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  } @placeholder {\n                    <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                  }\n                } @else {\n                  <libs_ui-components-table-templates\n                    [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                    [class]=\"footer.templateCssWrapperHost || ''\"\n                    [templateCssWrapper]=\"footer.templateCssWrapper\"\n                    [configs]=\"footer.colTemplateConfig\" />\n                }\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateNodataRef>\n  @if (keySearch() || onlyShowNoResult()) {\n    @if (templateNoResult(); as templateNoResult) {\n      <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n    } @else {\n      <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n        <div class=\"flex flex-col items-center justify-center w-full h-full shrink-0\">\n          <ng-container *ngComponentOutlet=\"'no-result' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n          @let constHtmlTextSearchNoData = noDataConfig().textSearchNoData || 'i18n_no_result';\n          <div\n            class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"noDataConfig().ngStyle || {}\"\n            [ngClass]=\"noDataConfig().ngClass || {}\"\n            [innerHtml]=\"constHtmlTextSearchNoData | translate\"></div>\n        </div>\n      </div>\n    }\n  } @else {\n    @if (templateNoData(); as templateNoData) {\n      <ng-container *ngTemplateOutlet=\"templateNoData\" />\n    } @else {\n      <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n        <div class=\"flex flex-col items-center justify-center w-full h-full shrink-0\">\n          <ng-container *ngComponentOutlet=\"'no-data' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n          @let constHtmlTextNoData = noDataConfig().textNoData || 'i18n_no_data_yet';\n          <div\n            class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"noDataConfig().ngStyle || {}\"\n            [ngClass]=\"noDataConfig().ngClass || {}\"\n            [innerHtml]=\"constHtmlTextNoData | translate\"></div>\n        </div>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".libs-ui-table-header-container{height:33px;flex-shrink:0}.libs-ui-table-header-col{height:100%;width:100%;align-items:center}.libs-ui-table-no-data-config-text{margin-top:16px;font-size:12px;color:#9ca2ad;font-family:var(--libs-ui-font-family-name, \"Arial\");font-weight:400}.libs-ui-table-no-data-config-icon{margin-bottom:12px}.libs-ui-table-no-data-config-icon:before{font-size:84px;color:#c1c1c1}.libs-ui-table-shadow-bottom{box-shadow:0 1px 1px #00143305,0 4px 8px #0014330a}@media only screen and (min-width: 1921px){.libs-ui-border-bottom-general{border-bottom:solid 2px #e6e8ed!important}}\n"] }]
+                    ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (!ignoreBar()) {\n    <div\n      class=\"flex items-center relative z-[1] bottom-0 left-0 w-full bg-white libs-ui-table-shadow-bottom {{ classBarInclude() }}\"\n      [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      <ng-content select=\"div.libs-ui-table-bar-left\"></ng-content>\n      @if (!keysSelected().length && labelBarNoSelectItem()) {\n        <div\n          class=\"{{ classLabelBarNoSelectItemCss() }}\"\n          [innerHtml]=\"labelBarNoSelectItem() | translate: { value: totalItemDisplay() }\"></div>\n      }\n      @if (keysSelected().length) {\n        <div class=\"flex items-center pl-[12px]\">\n          <div class=\"flex items-center h-full mt-[-2px]\">\n            <libs_ui-components-checkbox-single\n              [checked]=\"true\"\n              [disable]=\"loading() || disableCheckbox()\"\n              (outChange)=\"handlerChangeAllChecked()\" />\n          </div>\n          <div class=\"libs-ui-font-h5m text-[#071631] mr-[8px] {{ classLabelBarButtons() }}\">\n            {{ labelBarButtons() | translate: { value: keysSelected().length } }}\n          </div>\n          @if (configSelectMoreItem()) {\n            <libs_ui-components-dropdown\n              [isNgContent]=\"true\"\n              [popoverCustomConfig]=\"{\n                widthByParent: false,\n                ignoreArrow: true,\n                maxHeight: 2048,\n                classInclude: '!w-[121px]',\n                position: {\n                  mode: 'start',\n                  distance: 0,\n                },\n              }\"\n              [listConfig]=\"listConfigMoreItem()\"\n              [listHiddenInputSearch]=\"true\"\n              [listMaxItemShow]=\"5\"\n              class=\"!w-[16px] h-[16px] mr-[8px]\"\n              (outSelectKey)=\"handlerSelectedMoreItem($event)\"\n              (outFunctionsControl)=\"handlerFunctionControlMoreSelectItem($event)\">\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-primary'\"\n                [classInclude]=\"'!p-0 m-0'\"\n                [classIconLeft]=\"'before:!text-[16px] libs-ui-icon-move-right rotate-90 mr-[6px]'\"\n                [popover]=\"{ config: { content: 'i18n_more_select' } }\"\n                [ignoreStopPropagationEvent]=\"true\" />\n            </libs_ui-components-dropdown>\n          }\n          <div class=\"h-[16px] libs-ui-border-left-general ml-[16px]\"></div>\n          @if (barButtons()?.length) {\n            @for (button of barButtons(); track button) {\n              @let constHtmlLabel = button.label || ' ';\n              <libs_ui-components-buttons-button\n                [type]=\"button.type || 'button-link-primary'\"\n                [classIconLeft]=\"button.classIconLeft || ''\"\n                [classInclude]=\"button.classInclude || ''\"\n                [label]=\"constHtmlLabel | translate\"\n                (outClick)=\"handlerBarButtonClick(button)\" />\n            }\n          }\n        </div>\n      }\n      <ng-content select=\"div.libs-ui-table-bar-right\"></ng-content>\n    </div>\n  }\n\n  <div\n    #tableContainerElementRef\n    class=\"libs-ui-table flex flex-col w-full h-full relative {{ classTableContainerInclude() }}\"\n    [class.px-[16px]]=\"!ignoreBar()\"\n    (mouseleave)=\"handlerMouseLeaveContainer($event)\">\n    <div\n      class=\"relative w-full shrink-0\"\n      [style.height.px]=\"headerElementRef.offsetHeight\"\n      [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\">\n      <div\n        #headerElementRef\n        LibsUiComponentsScrollOverlayDirective\n        [options]=\"{ scrollbarWidth: 0 }\"\n        [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n        [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n        [class]=\"classHeaderContainer()\"\n        (outScroll)=\"handlerScrollHeader($event)\"\n        (mouseenter)=\"handlerMouseEnterHeader($event)\"\n        (mouseleave)=\"handlerMouseLeaveHeader($event)\">\n        @if (headerLeft().length) {\n          <div [class]=\"classHeaderLeftContainer()\">\n            @for (header of headerLeft(); track header) {\n              <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: true }\" />\n            }\n          </div>\n        }\n        @if (headerRight().length) {\n          @let constHtmlFunctionGetWidthItem = functionGetWidthItem();\n          @if (useScrollMeasureColumn() && constHtmlFunctionGetWidthItem) {\n            <div\n              class=\"flex w-full h-full relative\"\n              LibsUiScrollMeasureItemDirectionHorizontalDirective\n              [elementScroll]=\"headerElementRef\"\n              [items]=\"headerRight()\"\n              [functionGetWidthItem]=\"constHtmlFunctionGetWidthItem\"\n              (outViewPortItem)=\"handlerOutViewPortItemHeaderRight($event)\"\n              (outPaddingLeft)=\"handlerOutPaddingLeftHeaderRight($event)\">\n              @for (header of headerRightViewPort(); track header) {\n                <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: false }\" />\n              }\n            </div>\n          } @else {\n            @for (header of headerRight(); track header) {\n              <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: false }\" />\n            }\n          }\n        }\n      </div>\n    </div>\n    @if (showFooter() && itemFooter() && customPositionFooter() === 'top') {\n      <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n    }\n    <div class=\"relative flex flex-col w-full h-full overflow-x-hidden bg-white {{ classBodyInclude() || '' }}\">\n      <div\n        #bodyElementRef\n        class=\"flex h-full w-full relative\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScroll)=\"handlerScrollBody($event)\"\n        (outScrollBottom)=\"handlerScrollBottom($event)\">\n        @if (items().length) {\n          <virtual-scroller\n            #bodyComponentRef\n            [items]=\"items()\"\n            [enableUnequalChildrenSizes]=\"enableUnequalChildrenSizes()\"\n            class=\"h-full\"\n            [style.width.px]=\"headerElementRef.scrollWidth > (bodyElementRef ? bodyElementRef.scrollWidth : 0) ? headerElementRef.scrollWidth : undefined\"\n            [parentScroll]=\"bodyElementRef\"\n            [bufferAmount]=\"bufferAmount()\">\n            @for (data of bodyComponentRef.viewPortItems; track data()) {\n              @let constHtmlIsHightLightItem = data | LibsUiTableCheckItemHightLightPipe: itemsHightLight();\n              <div\n                #elementHover\n                class=\"flex\"\n                [class.bg-[#f3fcfc]]=\"constHtmlIsHightLightItem\"\n                [class.libs-ui-border-top-1px-36d3d3]=\"constHtmlIsHightLightItem && $first && !ignoreBorderItem()\"\n                [class.libs-ui-border-bottom-1px-36d3d3]=\"constHtmlIsHightLightItem && !ignoreBorderItem()\"\n                [ngClass]=\"\n                  constHtmlIsHightLightItem || ($last && ignoreBorderItemLast())\n                    ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px'\n                    : ignoreBorderItem()\n                      ? ''\n                      : isDashBorder()\n                        ? 'libs-ui-border-bottom-dashed-general'\n                        : 'libs-ui-border-bottom-general'\n                \"\n                [style.width.px]=\"headerElementRef.scrollWidth\"\n                [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !constHtmlIsHightLightItem\"\n                (mouseenter)=\"setIndexHover($event, data)\"\n                (mouseleave)=\"resetIndexHoverWhenMouseLeave($event)\">\n                @if (headerLeft().length || headerRight().length) {\n                  <div class=\"flex flex-col w-full\">\n                    <div class=\"flex w-full\">\n                      @if (headerLeft().length) {\n                        <div\n                          class=\"flex sticky top-0 left-0 z-[1]\"\n                          [class.bg-white]=\"!constHtmlIsHightLightItem\"\n                          [class.bg-[#f3fcfc]]=\"constHtmlIsHightLightItem\">\n                          @for (header of headerLeft(); track header) {\n                            <div\n                              class=\"relative flex px-[12px] py-[8px] {{ header.ignoreBorderRight ? '' : 'libs-ui-border-right-general' }}\"\n                              [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !constHtmlIsHightLightItem\"\n                              [ngStyle]=\"\n                                (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                (header.isShowIndexOnRow ? { width: '50px', 'flex-shrink': '0', padding: '8px' } : {})\n                              \"\n                              [ngClass]=\"header.ngClass || {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (headerRight().length) {\n                        @if (useScrollMeasureColumn()) {\n                          <div\n                            class=\"flex w-full min-w-0\"\n                            [style.padding-left.px]=\"paddingLeftHeaderRight()\">\n                            @for (header of headerRightViewPort(); track header) {\n                              <div\n                                class=\"relative flex px-[12px] py-[8px]\"\n                                [ngStyle]=\"\n                                  (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                  (header.isShowIndexOnRow ? { width: '50px', 'flex-shrink': '0', padding: '8px' } : {})\n                                \"\n                                [ngClass]=\"header.ngClass || {}\">\n                                <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                              </div>\n                            }\n                          </div>\n                        } @else {\n                          @for (header of headerRight(); track header) {\n                            <div\n                              class=\"relative flex px-[12px] py-[8px]\"\n                              [ngStyle]=\"\n                                (header | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n                                (header.isShowIndexOnRow ? { width: '50px', 'flex-shrink': '0', padding: '8px' } : {})\n                              \"\n                              [ngClass]=\"header.ngClass || {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef; context: { header: header, data: data, constHtmlIsHightLightItem: constHtmlIsHightLightItem }\" />\n                            </div>\n                          }\n                        }\n                      }\n                    </div>\n                    @if (configTemplateItemCollapseExpand() && data().specificExpand && data()[configTemplateItemCollapseExpand()?.fieldGetDataExpand || 'specificDataExpand']) {\n                      <div [class]=\"configTemplateItemCollapseExpand()?.cssWrapper || 'flex w-full'\">\n                        @for (dataExpand of data()[configTemplateItemCollapseExpand()?.fieldGetDataExpand || 'specificDataExpand'](); track dataExpand) {\n                          @if (configTemplateItemCollapseExpand()?.colTemplateConfig) {\n                            @if (optimizeTableRenderByOnViewport()) {\n                              @defer (on viewport) {\n                                <libs_ui-components-table-templates\n                                  [item]=\"dataExpand\"\n                                  [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n                                  [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                                  [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n                              } @placeholder {\n                                <div [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || 'w-full h-full'\"></div>\n                              }\n                            } @else {\n                              <libs_ui-components-table-templates\n                                [item]=\"dataExpand\"\n                                [class]=\"configTemplateItemCollapseExpand()?.templateCssWrapperHost || ''\"\n                                [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                                [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\n                            }\n                          }\n                        } @empty {\n                          <div class=\"relative h-[100px]\">\n                            <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </virtual-scroller>\n        } @else if (!loading()) {\n          <div class=\"sticky left-0 top-0 z-[1] h-[calc(100%-10px)] w-full\">\n            <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n          </div>\n          @if (showScrollTablePinnedIfNoData()) {\n            <div\n              class=\"absolute h-[1px] bg-transparent top-0 left-0 z-[1]\"\n              [style.width.px]=\"headerElementRef.scrollWidth\"></div>\n          }\n        }\n      </div>\n\n      @if (showFooter() && itemFooter() && customPositionFooter() === 'bottom') {\n        <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n      }\n\n      @if (loading()) {\n        <div class=\"absolute w-full h-full z-[2] flex items-center content-center\">\n          <libs_ui-components-spinner />\n        </div>\n      }\n    </div>\n\n    @if (activityLoadData() === 'click-pagination') {\n      <div class=\"flex w-full mt-[12px]\">\n        <libs_ui-components-pagination\n          [modeDisplayTotalPageAndGotoPage]=\"paginationConfig().modeDisplayTotalPageAndGotoPage\"\n          [classDisplayTotalPageAndGotoPage]=\"paginationConfig().classDisplayTotalPageAndGotoPage\"\n          [classIncludeItem]=\"paginationConfig().classIncludeItem\"\n          [classIncludeContainer]=\"paginationConfig().classIncludeContainer\"\n          [disable]=\"paginationConfig().disable\"\n          [numberPageDisplay]=\"paginationConfig().numberPageDisplay\"\n          [showTotalPage]=\"paginationConfig().showTotalPage\"\n          [showInputGotoPage]=\"paginationConfig().showInputGotoPage\"\n          [totalItems]=\"pagingTotalItems()\"\n          [perPage]=\"pagingPerPage()\"\n          [currentPage]=\"pagingCurrentPage()\"\n          (outPageSelect)=\"handlerChangePage($event)\" />\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #templateHeaderRef\n  let-header=\"headerItem\"\n  let-isHeaderLeft=\"isHeaderLeft\">\n  <div\n    [class]=\"'relative flex ' + (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHeaderLeft && !header.ignoreBorderRight ? ' libs-ui-border-right-general ' : ' ') + ' libs-ui-table-header-col '\"\n    [class.flex-col]=\"header.rowsConfig\"\n    [class.py-[8px]]=\"!header.ignorePyDefault\"\n    [ngStyle]=\"\n      (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n      (header.isShowIndexOnRow ? { width: '50px', 'flex-shrink': '0', padding: '8px' } : {})\n    \"\n    [ngClass]=\"header.ngClass || {}\">\n    @if (!header.rowsConfig) {\n      <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: header, isColRender: false, isHeaderLeft: isHeaderLeft }\" />\n    }\n    @if (header.rowsConfig; as rowsConfig) {\n      @for (row of rowsConfig.rows; track row) {\n        <div [class]=\"row.classRow\">\n          @for (col of row.cols; track col) {\n            <ng-container *ngTemplateOutlet=\"templateHeaderContentRef; context: { headerItem: col, isColRender: true, isHeaderLeft: isHeaderLeft }\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #templateHeaderContentRef\n  let-header=\"headerItem\"\n  let-isColRender=\"isColRender\"\n  let-isHeaderLeft=\"isHeaderLeft\">\n  <div\n    #itemHeaderRef\n    class=\"flex libs-ui-font-h6m min-h-[18px] text-[#6a7383] max-w-full\"\n    [class.items-center]=\"header.contentHeaderAlignCenter ?? true\"\n    [class.justify-end]=\"header.contentHeaderJustifyContentEnd\"\n    [class.w-full]=\"header.isShowIndexOnRow\"\n    [ngStyle]=\"\n      isColRender\n        ? (header | LibsUiTableCalculatorColumnPipe: (isHeaderLeft ? ignoreCalculatorWidthHeader()?.headerLeft || false : ignoreCalculatorWidthHeader()?.headerRight || false) : headerElementRef.clientWidth : headerLeft() : headerRight()) ||\n          (header.isShowIndexOnRow ? { width: '50px', 'flex-shrink': '0', padding: '8px' } : {})\n        : {}\n    \"\n    [ngClass]=\"isColRender ? header.ngClass || {} : {}\">\n    @if (header.hasCheckbox) {\n      @if (header.hasCheckboxAll) {\n        <div\n          class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n          [class.items-center]=\"header.checkboxAlignCenter\">\n          <libs_ui-components-checkbox-single\n            [key]=\"'all'\"\n            [stillOtherOptions]=\"!!keysSelected().length && keysSelected().length !== items().length\"\n            [checked]=\"!!keysSelected().length && keysSelected().length === items().length\"\n            [disable]=\"loading()\"\n            [classInclude]=\"header.checkboxClassInclude\"\n            (outChange)=\"handlerChangeCheckedAllItems($event)\" />\n        </div>\n      } @else {\n        <div class=\"flex h-full ml-[24px] {{ header.checkboxClassInclude }}\"></div>\n      }\n    }\n    @for (tooltip of header.tooltipsLeft; track tooltip) {\n      <div class=\"mr-[4px]\">\n        @let constHtmlTooltip = tooltip.dataView || ' ';\n        <libs_ui-components-popover\n          [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"\n            tooltip.config || {\n              content: constHtmlTooltip | translate,\n              position: {\n                mode: 'center',\n                distance: 0,\n                autoUpdatePosition: {\n                  endDistance: 12,\n                  startDistance: -12,\n                },\n              },\n            }\n          \"\n          [innerHTML]=\"tooltip.dataView\" />\n      </div>\n    }\n\n    @if (header.isShowIndexOnRow) {\n      <div class=\"flex w-full h-full items-center justify-center {{ header.classIncludeIndexOnRow || '' }}\">\n        {{ header.label ?? '#' }}\n      </div>\n    } @else {\n      @if (header.label | LibsUiPipesCallFunctionInTemplatePipe: header.parseValue : header | async | translate; as labelHeaderColumn) {\n        <libs_ui-components-popover\n          [type]=\"header?.labelConfig?.type || 'text'\"\n          [mode]=\"header?.labelConfig?.mode || 'hover'\"\n          [classInclude]=\"header?.labelConfig?.classInclude || ''\"\n          [ignoreShowPopover]=\"header?.labelConfig?.ignoreShowTooltip || false\"\n          [config]=\"header.labelConfig?.config || { content: labelHeaderColumn }\"\n          [innerHTML]=\"labelHeaderColumn\" />\n      }\n    }\n\n    @for (tooltip of header.tooltipsRight; track tooltip) {\n      <div class=\"ml-[4px]\">\n        @let constHtmlTooltip = tooltip.dataView || ' ';\n        <libs_ui-components-popover\n          [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"\n            tooltip.config || {\n              content: constHtmlTooltip | translate,\n              position: {\n                mode: 'center',\n                distance: 0,\n                autoUpdatePosition: {\n                  endDistance: 12,\n                  startDistance: -12,\n                },\n              },\n            }\n          \"\n          [innerHTML]=\"tooltip.dataView\" />\n      </div>\n    }\n\n    @if (header.hasSort && header.orderby) {\n      <div class=\"ml-[4px]\">\n        <libs_ui-components-buttons-sort-arrow\n          [disable]=\"loading() || !items().length\"\n          [fieldSort]=\"header.orderby\"\n          [ignorePopoverContent]=\"header.sortIgnoreTooltipContent ?? true\"\n          [popoverContentAsc]=\"header.sortTooltipContentAsc\"\n          [popoverContentDesc]=\"header.sortTooltipContentDesc\"\n          [defaultMode]=\"header.defaultMode\"\n          [zIndex]=\"header.zIndexTooltipSort\"\n          (outChange)=\"handlerChangeSort($event)\" />\n      </div>\n    }\n  </div>\n  @if (header.labelDescription) {\n    <div class=\"flex\">\n      <libs_ui-components-popover\n        [type]=\"'text'\"\n        [classInclude]=\"header.labelDescription.classInclude || ''\"\n        [config]=\"{ content: header.labelDescription.content | translate }\"\n        [innerHTML]=\"header.labelDescription.content | translate\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #templateBodyRef\n  let-header=\"header\"\n  let-data=\"data\"\n  let-constHtmlIsHightLightItem=\"constHtmlIsHightLightItem\">\n  <div class=\"flex w-full h-full\">\n    @if (header.hasCheckbox) {\n      <div\n        class=\"flex h-full\"\n        [class.invisible]=\"header.checkConditionCheckBoxHidden && (data() | LibsUiPipesCallFunctionInTemplatePipe: header.checkConditionCheckBoxHidden : data() | async)\"\n        [class.items-center]=\"header.checkboxAlignCenter\">\n        <libs_ui-components-checkbox-single\n          [key]=\"data()[fieldKey()]\"\n          [classInclude]=\"header.checkboxClassInclude\"\n          [checked]=\"data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length\"\n          [disable]=\"loading() || disableCheckbox() || !!(maxItemSelected() && !(data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length) && keysSelected().length >= maxItemSelected())\"\n          (outChange)=\"handlerChangeItemChecked($event, data())\" />\n      </div>\n    }\n\n    @if (header.isShowIndexOnRow; as config) {\n      <div class=\"w-full flex items-center justify-center libs-ui-font-h4r{{ config.classIncludeIndexOnRow || '' }}\">\n        <div\n          LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{}\"\n          [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe: getIndexRow | async\"></div>\n      </div>\n    }\n\n    @if (header.colTemplateConfig) {\n      @let constHtmlIsHover = itemOfIndexHover === data && !constHtmlIsHightLightItem;\n      @if (optimizeTableRenderByOnViewport()) {\n        @defer (on viewport) {\n          <libs_ui-components-table-templates\n            [isHover]=\"constHtmlIsHover\"\n            [class]=\"header.templateCssWrapperHost || ''\"\n            [item]=\"data\"\n            [templateCssWrapper]=\"header.templateCssWrapper\"\n            [configs]=\"header.colTemplateConfig\" />\n        } @placeholder {\n          <div [class]=\"header.templateCssWrapperHost || 'w-full h-full'\"></div>\n        }\n      } @else {\n        <libs_ui-components-table-templates\n          [isHover]=\"constHtmlIsHover\"\n          [class]=\"header.templateCssWrapperHost || ''\"\n          [item]=\"data\"\n          [templateCssWrapper]=\"header.templateCssWrapper\"\n          [configs]=\"header.colTemplateConfig\" />\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n  @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n    <div\n      #footerElementRef\n      class=\"flex w-full bg-[#f8f9fa] overflow-x-hidden z-[1] {{ ignoreBorderFooter() ? '' : customPositionFooter() === 'top' ? 'libs-ui-border-bottom-general' : 'libs-ui-table-shadow-top libs-ui-border-top-general' }} min-h-[35px]\"\n      (mouseenter)=\"handlerMouseEnterFooter($event)\"\n      (mouseleave)=\"handlerMouseLeaveFooter($event)\">\n      @if (footerLeft()) {\n        <div\n          #footerLeftElementRef\n          class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n          @for (footer of footerLeft(); track footer) {\n            <div\n              class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '' : 'libs-ui-border-right-general' }}\"\n              [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerLeft || false : headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig && itemFooter()) {\n                @if (optimizeTableRenderByOnViewport()) {\n                  @defer (on viewport) {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  } @placeholder {\n                    <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                  }\n                } @else {\n                  <libs_ui-components-table-templates\n                    [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                    [class]=\"footer.templateCssWrapperHost || ''\"\n                    [templateCssWrapper]=\"footer.templateCssWrapper\"\n                    [configs]=\"footer.colTemplateConfig\" />\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (footerRight(); as footerRightList) {\n        @let constHtmlFunctionGetWidthItemFooter = functionGetWidthItem();\n        @if (useScrollMeasureColumn() && constHtmlFunctionGetWidthItemFooter) {\n          <div\n            class=\"flex h-full w-full relative\"\n            LibsUiScrollMeasureItemDirectionHorizontalDirective\n            [elementScroll]=\"footerElementRef\"\n            [items]=\"footerRightList\"\n            [functionGetWidthItem]=\"constHtmlFunctionGetWidthItemFooter\"\n            (outViewPortItem)=\"handlerOutViewPortItemFooterRight($event)\">\n            @for (footer of footerRightViewPort(); track footer) {\n              <div\n                class=\"flex items-center px-[12px] py-[8px]\"\n                [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRightList) || {}\"\n                [ngClass]=\"footer.ngClass || {}\">\n                @if (footer.colTemplateConfig && itemFooter()) {\n                  @if (optimizeTableRenderByOnViewport()) {\n                    @defer (on viewport) {\n                      <libs_ui-components-table-templates\n                        [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                        [class]=\"footer.templateCssWrapperHost || ''\"\n                        [templateCssWrapper]=\"footer.templateCssWrapper\"\n                        [configs]=\"footer.colTemplateConfig\" />\n                    } @placeholder {\n                      <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                    }\n                  } @else {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  }\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          @for (footer of footerRightList; track footer) {\n            <div\n              class=\"flex items-center px-[12px] py-[8px]\"\n              [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: ignoreCalculatorWidthHeader()?.headerRight || false : headerElementRef.clientWidth : footerLeft() : footerRightList) || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig && itemFooter()) {\n                @if (optimizeTableRenderByOnViewport()) {\n                  @defer (on viewport) {\n                    <libs_ui-components-table-templates\n                      [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                      [class]=\"footer.templateCssWrapperHost || ''\"\n                      [templateCssWrapper]=\"footer.templateCssWrapper\"\n                      [configs]=\"footer.colTemplateConfig\" />\n                  } @placeholder {\n                    <div [class]=\"footer.templateCssWrapperHost || 'w-full h-full'\"></div>\n                  }\n                } @else {\n                  <libs_ui-components-table-templates\n                    [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n                    [class]=\"footer.templateCssWrapperHost || ''\"\n                    [templateCssWrapper]=\"footer.templateCssWrapper\"\n                    [configs]=\"footer.colTemplateConfig\" />\n                }\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateNodataRef>\n  @if (keySearch() || onlyShowNoResult()) {\n    @if (templateNoResult(); as templateNoResult) {\n      <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n    } @else {\n      <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n        <div class=\"flex flex-col items-center justify-center w-full h-full shrink-0\">\n          <ng-container *ngComponentOutlet=\"'no-result' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n          <div\n            class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"noDataConfig().ngStyle\"\n            [ngClass]=\"noDataConfig().ngClass\"\n            [innerHtml]=\"noDataSearchText() | translate\"></div>\n        </div>\n      </div>\n    }\n  } @else {\n    @if (templateNoData(); as templateNoData) {\n      <ng-container *ngTemplateOutlet=\"templateNoData\" />\n    } @else {\n      <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n        <div class=\"flex flex-col items-center justify-center w-full h-full shrink-0\">\n          <ng-container *ngComponentOutlet=\"'no-data' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n          <div\n            class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"noDataConfig().ngStyle\"\n            [ngClass]=\"noDataConfig().ngClass\"\n            [innerHtml]=\"noDataText() | translate\"></div>\n        </div>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [".libs-ui-table-header-container{height:33px;flex-shrink:0}.libs-ui-table-header-col{height:100%;width:100%;align-items:center}.libs-ui-table-no-data-config-text{margin-top:16px;font-size:12px;color:#9ca2ad;font-family:var(--libs-ui-font-family-name, \"Arial\");font-weight:400}.libs-ui-table-no-data-config-icon{margin-bottom:12px}.libs-ui-table-no-data-config-icon:before{font-size:84px;color:#c1c1c1}.libs-ui-table-shadow-bottom{box-shadow:0 1px 1px #00143305,0 4px 8px #0014330a}@media only screen and (min-width: 1921px){.libs-ui-border-bottom-general{border-bottom:solid 2px #e6e8ed!important}}\n"] }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */