@libs-ui/components-table 0.2.115 → 0.2.116

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

@@ -14,8 +14,7 @@ import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
 import { LibsUiIconsGetIconComponentPipe } from '@libs-ui/icons';
 import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
 import { LibsUiPipesCheckSelectedByKeyPipe } from '@libs-ui/pipes-check-selected-by-key';
-import { LibsUiPipesConvertObjectToSignalPipe } from '@libs-ui/pipes-convert-object-to-signal';
-import { LibsUiHttpRequestService } from '@libs-ui/services-http-request';
+import { returnListObject, LibsUiHttpRequestService } from '@libs-ui/services-http-request';
 import { convertObjectToSignal, viewDataNumberByLanguage, get, deleteUnicode, set } from '@libs-ui/utils';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -107,7 +106,7 @@ class LibsUiComponentsTableTemplatesComponent {
         this.functionControls.set(index, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableTemplatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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=\"mo-lib-table-template {{ templateCssWrapper() || '' }}\">\n      @for (config of configs; track $index) {\n        @if (config.fieldsConfig) {\n          <div [class]=\"config.cssWrapper\">\n            @for (fieldConfig of config.fieldsConfig; track index;let index = $index;) {\n\n              @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n                @switch (fieldConfig.instance) {\n                  @case (\"tooltip\") {\n                    @if ((fieldConfig.tooltip || {}); as tooltip) {\n                      <span LibsUiComponentsPopoverDirective\n                        [type]=\"tooltip.type || 'text'\"\n                        [mode]=\"tooltip.mode || 'hover'\"\n                        [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [classInclude]=\"tooltip.classInclude || ' '\"\n                        [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n                        [config]=\"(fieldConfig.getTooltipConfig ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getTooltipConfig:item() | async) : (tooltip.config | LibsUiPipesCloneObjectPipe)) | translate\"\n                        [innerHTML]=\" (fieldConfig.field ? item()[fieldConfig.field] : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async | translate\"\n                        (outEvent)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                      </span>\n                    }\n                  }\n                  @case (\"image\") {\n                    @if (((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getImageSrc:item():isImageError) | async); as linkImage) {\n                      @if (linkImage !== ' ') {\n                        <img [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                          [ngClass]=\"fieldConfig.ngClass || {}\"\n                          [src]=\"linkImage\"\n                          (error)=\"handlerImageError($event)\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                      }\n                    }\n                  }\n\n                  @case (\"avatar\") {\n                    @if ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getAvatarConfig:item()) | async ; as avatarConfig) {\n                      <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n                        [classInclude]=\"avatarConfig.classInclude\"\n                        [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [size]='avatarConfig.size || 32'\n                        [linkAvatar]=\"avatarConfig.linkAvatar\"\n                        [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n                        [idGenColor]=\"avatarConfig.idGenColor\"\n                        [textAvatar]=\"avatarConfig.textAvatar\"\n                        [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\" />\n                    }\n                  }\n\n                  @case (\"buttons\") {\n                    @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n                      <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n                        @for (button of (fieldConfig.buttons || (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getButtonsByItem:item() | async)); track $index) {\n\n                          <libs_ui-components-buttons-button [type]=\"button().type || 'button-primary'\"\n                            [sizeButton]=\"button().sizeButton || 'smaller'\"\n                            [disable]=\"button().disable ?? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item())\"\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                            (outClick)=\"clickButtonAction(button())\" />\n                        }\n                      </div>\n                    }\n                  }\n\n                  @case (\"button-status\") {\n                    <libs_ui-components-buttons-status\n                      [config]=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async\"\n                      (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                  }\n\n                  @case (\"switch\") {\n                    <libs_ui-components-switch\n                      [active]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getActiveValueSwitch:item() | async\"\n                      [disable]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisableValueSwitch:item() | async\"\n                      (outSwitch)=\"handlerSwitch($event,fieldConfig)\" />\n                  }\n\n\n                  @case ((fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup') ? fieldConfig.instance : '') {\n                    @if ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) !== ' ') {\n                      <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n                        <libs_ui-components-dropdown [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]=\"fieldConfig.dropdownConfig?.getListViewConfig ? ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.dropdownConfig?.getListViewConfig:item()) | async):fieldConfig.dropdownConfig?.listViewConfig\"\n                          [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listViewBackgroundListCustom\"\n                          [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listViewMaxItemShow || 5\"\n                          [listKeysDisable]=\"fieldConfig.dropdownConfig?.listViewKeysDisableItem\"\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\n                              [innerHtml]=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate\">\n                            </div>\n                          }\n                          @if (fieldConfig.instance === 'badge' && (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) > 0) {\n                            <libs_ui-components-badge [active]=\"true\"\n                              [ignoreMarginDefault]=\"true\"\n                              mode=\"+x\"\n                              [count]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n                              [maxCount]=\"99\" />\n                          }\n                          @if (fieldConfig.instance === 'button-action-show-popup') {\n                            <libs_ui-components-buttons-button\n                              [type]=\"fieldConfig?.buttonDropDown()?.type || 'button-primary'\"\n                              [sizeButton]=\"fieldConfig?.buttonDropDown()?.sizeButton || 'smaller'\"\n                              [disable]=\"fieldConfig?.buttonDropDown()?.disable ?? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async)\"\n                              [label]=\"fieldConfig?.buttonDropDown()?.label || ' '\"\n                              [classIconLeft]=\"fieldConfig?.buttonDropDown()?.classIconLeft || ''\"\n                              [classIconRight]=\"fieldConfig?.buttonDropDown()?.classIconRight || ''\"\n                              [popover]=\"fieldConfig?.buttonDropDown()?.popover || {}\"\n                              [classInclude]=\"fieldConfig?.buttonDropDown()?.classInclude || ''\"\n                              [ignoreStopPropagationEvent]=\"true\" />\n                          }\n\n                        </libs_ui-components-dropdown>\n                      </div>\n                    }\n                  }\n\n                  @case (\"line-clamp\") {\n                    <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                      [ngClass]=\"fieldConfig.ngClass || {}\">\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 mo-lib-font-head-5': true }\"\n                          [isInnerText]=\"lineClampConfig.isInnerText || false\"\n                          [ignoreStopPropagationTooltipEvent]=\"true\"\n                          [content]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                      }\n                    </div>\n                  }\n\n                  @case (\"shape-style\") {\n                    <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                      [ngClass]=\"fieldConfig.ngClass || {}\"\n                      [innerHTML]=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate | LibsUiPipesSecurityTrustPipe:'html':true | async\"\n                      (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                    </div>\n                  }\n                  @default {\n                    @if (((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async | translate); as value) {\n                      @if (value !==' ') {\n                        <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                          [ngClass]=\"fieldConfig.ngClass || {}\"\n                          [innerHTML]=\"value | LibsUiPipesSecurityTrustPipe:'html':true|async\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                        </div>\n                      }\n                    }\n                  }\n                }\n              } @else {\n                @if (fieldConfig.rows) {\n                  <div class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                    <div class=\"w-full flex absolute  {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                      <libs_ui-components-table-templates class=\"flex w-full\"\n                        [item]=\"item\"\n                        [configs]=\"fieldConfig.rows\" />\n                    </div>\n                  </div>\n                }\n                @else {\n                  <ng-container\n                    *ngComponentOutlet=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getComponentOutlet) | async; inputs:{item}\" />\n                }\n              }\n\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n}\n", styles: [":host{width:100%;height:100%}:host .mo-lib-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}:host .mo-lib-table-template .mo-lib-table-template-buttons-container{visibility:hidden!important}:host .mo-lib-table-template [is-hover=true].mo-lib-table-template-buttons-container{visibility:visible!important}\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: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { 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", "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"], 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"], 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", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "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.13", 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=\"mo-lib-table-template {{ templateCssWrapper() || '' }}\">\n      @for (config of configs; track $index) {\n        @if (config.fieldsConfig) {\n          <div [class]=\"config.cssWrapper\">\n            @for (fieldConfig of config.fieldsConfig; track index;let index = $index;) {\n\n              @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n                @switch (fieldConfig.instance) {\n                  @case (\"tooltip\") {\n                    @if ((fieldConfig.tooltip || {}); as tooltip) {\n                      <span LibsUiComponentsPopoverDirective\n                        [type]=\"tooltip.type || 'text'\"\n                        [mode]=\"tooltip.mode || 'hover'\"\n                        [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [classInclude]=\"tooltip.classInclude || ' '\"\n                        [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n                        [config]=\"(fieldConfig.getTooltipConfig ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getTooltipConfig:item() | async) : (tooltip.config | LibsUiPipesCloneObjectPipe)) | translate\"\n                        [innerHTML]=\" (fieldConfig.field ? item()[fieldConfig.field] : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async | translate\"\n                        (outEvent)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                      </span>\n                    }\n                  }\n                  @case (\"image\") {\n                    @if (((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getImageSrc:item():isImageError) | async); as linkImage) {\n                      @if (linkImage !== ' ') {\n                        <img [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                          [ngClass]=\"fieldConfig.ngClass || {}\"\n                          [src]=\"linkImage\"\n                          (error)=\"handlerImageError($event)\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                      }\n                    }\n                  }\n\n                  @case (\"avatar\") {\n                    @if ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getAvatarConfig:item()) | async ; as avatarConfig) {\n                      <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n                        [classInclude]=\"avatarConfig.classInclude\"\n                        [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [size]='avatarConfig.size || 32'\n                        [linkAvatar]=\"avatarConfig.linkAvatar\"\n                        [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n                        [idGenColor]=\"avatarConfig.idGenColor\"\n                        [textAvatar]=\"avatarConfig.textAvatar\"\n                        [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\" />\n                    }\n                  }\n\n                  @case (\"buttons\") {\n                    @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n                      <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n                        @for (button of (fieldConfig.buttons || (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getButtonsByItem:item() | async)); track $index) {\n\n                          <libs_ui-components-buttons-button [type]=\"button().type || 'button-primary'\"\n                            [sizeButton]=\"button().sizeButton || 'smaller'\"\n                            [disable]=\"button().disable ?? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item())\"\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                            (outClick)=\"clickButtonAction(button())\" />\n                        }\n                      </div>\n                    }\n                  }\n\n                  @case (\"button-status\") {\n                    <libs_ui-components-buttons-status [config]=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async\"\n                      (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                  }\n\n                  @case (\"switch\") {\n                    <libs_ui-components-switch [active]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getActiveValueSwitch:item() | async\"\n                      [disable]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisableValueSwitch:item() | async\"\n                      (outSwitch)=\"handlerSwitch($event,fieldConfig)\" />\n                  }\n\n\n                  @case ((fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup') ? fieldConfig.instance : '') {\n                    @if ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) !== ' ') {\n                      <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n                        <libs_ui-components-dropdown [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]=\"fieldConfig.dropdownConfig?.getListViewConfig ? ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.dropdownConfig?.getListViewConfig:item()) | async):fieldConfig.dropdownConfig?.listViewConfig\"\n                          [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listViewBackgroundListCustom\"\n                          [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listViewMaxItemShow || 5\"\n                          [listKeysDisable]=\"fieldConfig.dropdownConfig?.listViewKeysDisableItem\"\n                          [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listViewHiddenInputSearch\"\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()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate\">\n                            </div>\n                          }\n                          @if (fieldConfig.instance === 'badge' && (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) > 0) {\n                            <libs_ui-components-badge [active]=\"true\"\n                              [ignoreMarginDefault]=\"true\"\n                              mode=\"+x\"\n                              [count]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n                              [maxCount]=\"99\" />\n                          }\n                          @if (fieldConfig.instance === 'button-action-show-popup') {\n                            <libs_ui-components-buttons-button [type]=\"fieldConfig?.buttonDropDown()?.type || 'button-primary'\"\n                              [sizeButton]=\"fieldConfig?.buttonDropDown()?.sizeButton || 'smaller'\"\n                              [disable]=\"fieldConfig?.buttonDropDown()?.disable ?? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async)\"\n                              [label]=\"fieldConfig?.buttonDropDown()?.label || ' '\"\n                              [classIconLeft]=\"fieldConfig?.buttonDropDown()?.classIconLeft || ''\"\n                              [classIconRight]=\"fieldConfig?.buttonDropDown()?.classIconRight || ''\"\n                              [popover]=\"fieldConfig?.buttonDropDown()?.popover || {}\"\n                              [classInclude]=\"fieldConfig?.buttonDropDown()?.classInclude || ''\"\n                              [ignoreStopPropagationEvent]=\"true\" />\n                          }\n\n                        </libs_ui-components-dropdown>\n                      </div>\n                    }\n                  }\n\n                  @case (\"line-clamp\") {\n                    <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                      [ngClass]=\"fieldConfig.ngClass || {}\">\n                      @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n                        <libs_ui-components-line_clamp [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 mo-lib-font-head-5': true }\"\n                          [isInnerText]=\"lineClampConfig.isInnerText || false\"\n                          [ignoreStopPropagationTooltipEvent]=\"true\"\n                          [content]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                      }\n                    </div>\n                  }\n\n                  @case (\"shape-style\") {\n                    <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                      [ngClass]=\"fieldConfig.ngClass || {}\"\n                      [innerHTML]=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate | LibsUiPipesSecurityTrustPipe:'html':true | async\"\n                      (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                    </div>\n                  }\n                  @default {\n                    @if (((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async | translate); as value) {\n                      @if (value !==' ') {\n                        <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                          [ngClass]=\"fieldConfig.ngClass || {}\"\n                          [innerHTML]=\"value | LibsUiPipesSecurityTrustPipe:'html':true|async\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                        </div>\n                      }\n                    }\n                  }\n                }\n              } @else {\n                @if (fieldConfig.rows) {\n                  <div class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                    <div class=\"w-full flex absolute  {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                      <libs_ui-components-table-templates class=\"flex w-full\"\n                        [item]=\"item\"\n                        [configs]=\"fieldConfig.rows\" />\n                    </div>\n                  </div>\n                }\n                @else {\n                  <ng-container *ngComponentOutlet=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getComponentOutlet) | async; inputs:{item}\" />\n                }\n              }\n\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n}\n", styles: [":host{width:100%;height:100%}:host .mo-lib-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}:host .mo-lib-table-template .mo-lib-table-template-buttons-container{visibility:hidden!important}:host .mo-lib-table-template [is-hover=true].mo-lib-table-template-buttons-container{visibility:visible!important}\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: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { 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", "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"], 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"], 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", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "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.13", ngImport: i0, type: LibsUiComponentsTableTemplatesComponent, decorators: [{
             type: Component,
@@ -119,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LibsUiPipesCloneObjectPipe, LibsUiComponentsButtonsButtonComponent,
                         LibsUiComponentsLineClampComponent, LibsUiComponentsDropdownComponent,
                         LibsUiComponentsBadgeComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (configs(); as configs) {\n  @if (item(); as item) {\n    <div class=\"mo-lib-table-template {{ templateCssWrapper() || '' }}\">\n      @for (config of configs; track $index) {\n        @if (config.fieldsConfig) {\n          <div [class]=\"config.cssWrapper\">\n            @for (fieldConfig of config.fieldsConfig; track index;let index = $index;) {\n\n              @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n                @switch (fieldConfig.instance) {\n                  @case (\"tooltip\") {\n                    @if ((fieldConfig.tooltip || {}); as tooltip) {\n                      <span LibsUiComponentsPopoverDirective\n                        [type]=\"tooltip.type || 'text'\"\n                        [mode]=\"tooltip.mode || 'hover'\"\n                        [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [classInclude]=\"tooltip.classInclude || ' '\"\n                        [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n                        [config]=\"(fieldConfig.getTooltipConfig ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getTooltipConfig:item() | async) : (tooltip.config | LibsUiPipesCloneObjectPipe)) | translate\"\n                        [innerHTML]=\" (fieldConfig.field ? item()[fieldConfig.field] : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async | translate\"\n                        (outEvent)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                      </span>\n                    }\n                  }\n                  @case (\"image\") {\n                    @if (((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getImageSrc:item():isImageError) | async); as linkImage) {\n                      @if (linkImage !== ' ') {\n                        <img [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                          [ngClass]=\"fieldConfig.ngClass || {}\"\n                          [src]=\"linkImage\"\n                          (error)=\"handlerImageError($event)\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                      }\n                    }\n                  }\n\n                  @case (\"avatar\") {\n                    @if ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getAvatarConfig:item()) | async ; as avatarConfig) {\n                      <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n                        [classInclude]=\"avatarConfig.classInclude\"\n                        [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [size]='avatarConfig.size || 32'\n                        [linkAvatar]=\"avatarConfig.linkAvatar\"\n                        [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n                        [idGenColor]=\"avatarConfig.idGenColor\"\n                        [textAvatar]=\"avatarConfig.textAvatar\"\n                        [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\" />\n                    }\n                  }\n\n                  @case (\"buttons\") {\n                    @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n                      <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n                        @for (button of (fieldConfig.buttons || (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getButtonsByItem:item() | async)); track $index) {\n\n                          <libs_ui-components-buttons-button [type]=\"button().type || 'button-primary'\"\n                            [sizeButton]=\"button().sizeButton || 'smaller'\"\n                            [disable]=\"button().disable ?? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item())\"\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                            (outClick)=\"clickButtonAction(button())\" />\n                        }\n                      </div>\n                    }\n                  }\n\n                  @case (\"button-status\") {\n                    <libs_ui-components-buttons-status\n                      [config]=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async\"\n                      (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                  }\n\n                  @case (\"switch\") {\n                    <libs_ui-components-switch\n                      [active]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getActiveValueSwitch:item() | async\"\n                      [disable]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisableValueSwitch:item() | async\"\n                      (outSwitch)=\"handlerSwitch($event,fieldConfig)\" />\n                  }\n\n\n                  @case ((fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup') ? fieldConfig.instance : '') {\n                    @if ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) !== ' ') {\n                      <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n                        <libs_ui-components-dropdown [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]=\"fieldConfig.dropdownConfig?.getListViewConfig ? ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.dropdownConfig?.getListViewConfig:item()) | async):fieldConfig.dropdownConfig?.listViewConfig\"\n                          [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listViewBackgroundListCustom\"\n                          [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listViewMaxItemShow || 5\"\n                          [listKeysDisable]=\"fieldConfig.dropdownConfig?.listViewKeysDisableItem\"\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\n                              [innerHtml]=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate\">\n                            </div>\n                          }\n                          @if (fieldConfig.instance === 'badge' && (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) > 0) {\n                            <libs_ui-components-badge [active]=\"true\"\n                              [ignoreMarginDefault]=\"true\"\n                              mode=\"+x\"\n                              [count]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n                              [maxCount]=\"99\" />\n                          }\n                          @if (fieldConfig.instance === 'button-action-show-popup') {\n                            <libs_ui-components-buttons-button\n                              [type]=\"fieldConfig?.buttonDropDown()?.type || 'button-primary'\"\n                              [sizeButton]=\"fieldConfig?.buttonDropDown()?.sizeButton || 'smaller'\"\n                              [disable]=\"fieldConfig?.buttonDropDown()?.disable ?? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async)\"\n                              [label]=\"fieldConfig?.buttonDropDown()?.label || ' '\"\n                              [classIconLeft]=\"fieldConfig?.buttonDropDown()?.classIconLeft || ''\"\n                              [classIconRight]=\"fieldConfig?.buttonDropDown()?.classIconRight || ''\"\n                              [popover]=\"fieldConfig?.buttonDropDown()?.popover || {}\"\n                              [classInclude]=\"fieldConfig?.buttonDropDown()?.classInclude || ''\"\n                              [ignoreStopPropagationEvent]=\"true\" />\n                          }\n\n                        </libs_ui-components-dropdown>\n                      </div>\n                    }\n                  }\n\n                  @case (\"line-clamp\") {\n                    <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                      [ngClass]=\"fieldConfig.ngClass || {}\">\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 mo-lib-font-head-5': true }\"\n                          [isInnerText]=\"lineClampConfig.isInnerText || false\"\n                          [ignoreStopPropagationTooltipEvent]=\"true\"\n                          [content]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                      }\n                    </div>\n                  }\n\n                  @case (\"shape-style\") {\n                    <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                      [ngClass]=\"fieldConfig.ngClass || {}\"\n                      [innerHTML]=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate | LibsUiPipesSecurityTrustPipe:'html':true | async\"\n                      (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                    </div>\n                  }\n                  @default {\n                    @if (((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async | translate); as value) {\n                      @if (value !==' ') {\n                        <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                          [ngClass]=\"fieldConfig.ngClass || {}\"\n                          [innerHTML]=\"value | LibsUiPipesSecurityTrustPipe:'html':true|async\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                        </div>\n                      }\n                    }\n                  }\n                }\n              } @else {\n                @if (fieldConfig.rows) {\n                  <div class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                    <div class=\"w-full flex absolute  {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                      <libs_ui-components-table-templates class=\"flex w-full\"\n                        [item]=\"item\"\n                        [configs]=\"fieldConfig.rows\" />\n                    </div>\n                  </div>\n                }\n                @else {\n                  <ng-container\n                    *ngComponentOutlet=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getComponentOutlet) | async; inputs:{item}\" />\n                }\n              }\n\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n}\n", styles: [":host{width:100%;height:100%}:host .mo-lib-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}:host .mo-lib-table-template .mo-lib-table-template-buttons-container{visibility:hidden!important}:host .mo-lib-table-template [is-hover=true].mo-lib-table-template-buttons-container{visibility:visible!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (configs(); as configs) {\n  @if (item(); as item) {\n    <div class=\"mo-lib-table-template {{ templateCssWrapper() || '' }}\">\n      @for (config of configs; track $index) {\n        @if (config.fieldsConfig) {\n          <div [class]=\"config.cssWrapper\">\n            @for (fieldConfig of config.fieldsConfig; track index;let index = $index;) {\n\n              @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n                @switch (fieldConfig.instance) {\n                  @case (\"tooltip\") {\n                    @if ((fieldConfig.tooltip || {}); as tooltip) {\n                      <span LibsUiComponentsPopoverDirective\n                        [type]=\"tooltip.type || 'text'\"\n                        [mode]=\"tooltip.mode || 'hover'\"\n                        [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [classInclude]=\"tooltip.classInclude || ' '\"\n                        [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n                        [config]=\"(fieldConfig.getTooltipConfig ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getTooltipConfig:item() | async) : (tooltip.config | LibsUiPipesCloneObjectPipe)) | translate\"\n                        [innerHTML]=\" (fieldConfig.field ? item()[fieldConfig.field] : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async | translate\"\n                        (outEvent)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                      </span>\n                    }\n                  }\n                  @case (\"image\") {\n                    @if (((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getImageSrc:item():isImageError) | async); as linkImage) {\n                      @if (linkImage !== ' ') {\n                        <img [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                          [ngClass]=\"fieldConfig.ngClass || {}\"\n                          [src]=\"linkImage\"\n                          (error)=\"handlerImageError($event)\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                      }\n                    }\n                  }\n\n                  @case (\"avatar\") {\n                    @if ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getAvatarConfig:item()) | async ; as avatarConfig) {\n                      <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n                        [classInclude]=\"avatarConfig.classInclude\"\n                        [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [size]='avatarConfig.size || 32'\n                        [linkAvatar]=\"avatarConfig.linkAvatar\"\n                        [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n                        [idGenColor]=\"avatarConfig.idGenColor\"\n                        [textAvatar]=\"avatarConfig.textAvatar\"\n                        [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\" />\n                    }\n                  }\n\n                  @case (\"buttons\") {\n                    @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n                      <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n                        @for (button of (fieldConfig.buttons || (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getButtonsByItem:item() | async)); track $index) {\n\n                          <libs_ui-components-buttons-button [type]=\"button().type || 'button-primary'\"\n                            [sizeButton]=\"button().sizeButton || 'smaller'\"\n                            [disable]=\"button().disable ?? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item())\"\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                            (outClick)=\"clickButtonAction(button())\" />\n                        }\n                      </div>\n                    }\n                  }\n\n                  @case (\"button-status\") {\n                    <libs_ui-components-buttons-status [config]=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async\"\n                      (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                  }\n\n                  @case (\"switch\") {\n                    <libs_ui-components-switch [active]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getActiveValueSwitch:item() | async\"\n                      [disable]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisableValueSwitch:item() | async\"\n                      (outSwitch)=\"handlerSwitch($event,fieldConfig)\" />\n                  }\n\n\n                  @case ((fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup') ? fieldConfig.instance : '') {\n                    @if ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) !== ' ') {\n                      <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                        [ngClass]=\"fieldConfig.ngClass || {}\"\n                        [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n                        <libs_ui-components-dropdown [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]=\"fieldConfig.dropdownConfig?.getListViewConfig ? ((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.dropdownConfig?.getListViewConfig:item()) | async):fieldConfig.dropdownConfig?.listViewConfig\"\n                          [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listViewBackgroundListCustom\"\n                          [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listViewMaxItemShow || 5\"\n                          [listKeysDisable]=\"fieldConfig.dropdownConfig?.listViewKeysDisableItem\"\n                          [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listViewHiddenInputSearch\"\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()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate\">\n                            </div>\n                          }\n                          @if (fieldConfig.instance === 'badge' && (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) > 0) {\n                            <libs_ui-components-badge [active]=\"true\"\n                              [ignoreMarginDefault]=\"true\"\n                              mode=\"+x\"\n                              [count]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n                              [maxCount]=\"99\" />\n                          }\n                          @if (fieldConfig.instance === 'button-action-show-popup') {\n                            <libs_ui-components-buttons-button [type]=\"fieldConfig?.buttonDropDown()?.type || 'button-primary'\"\n                              [sizeButton]=\"fieldConfig?.buttonDropDown()?.sizeButton || 'smaller'\"\n                              [disable]=\"fieldConfig?.buttonDropDown()?.disable ?? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async)\"\n                              [label]=\"fieldConfig?.buttonDropDown()?.label || ' '\"\n                              [classIconLeft]=\"fieldConfig?.buttonDropDown()?.classIconLeft || ''\"\n                              [classIconRight]=\"fieldConfig?.buttonDropDown()?.classIconRight || ''\"\n                              [popover]=\"fieldConfig?.buttonDropDown()?.popover || {}\"\n                              [classInclude]=\"fieldConfig?.buttonDropDown()?.classInclude || ''\"\n                              [ignoreStopPropagationEvent]=\"true\" />\n                          }\n\n                        </libs_ui-components-dropdown>\n                      </div>\n                    }\n                  }\n\n                  @case (\"line-clamp\") {\n                    <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                      [ngClass]=\"fieldConfig.ngClass || {}\">\n                      @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n                        <libs_ui-components-line_clamp [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 mo-lib-font-head-5': true }\"\n                          [isInnerText]=\"lineClampConfig.isInnerText || false\"\n                          [ignoreStopPropagationTooltipEvent]=\"true\"\n                          [content]=\"item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\" />\n                      }\n                    </div>\n                  }\n\n                  @case (\"shape-style\") {\n                    <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                      [ngClass]=\"fieldConfig.ngClass || {}\"\n                      [innerHTML]=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate | LibsUiPipesSecurityTrustPipe:'html':true | async\"\n                      (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                    </div>\n                  }\n                  @default {\n                    @if (((item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async | translate); as value) {\n                      @if (value !==' ') {\n                        <div [ngStyle]=\"fieldConfig.ngStyle || {}\"\n                          [ngClass]=\"fieldConfig.ngClass || {}\"\n                          [innerHTML]=\"value | LibsUiPipesSecurityTrustPipe:'html':true|async\"\n                          (click)=\"handlerItemClick($event,fieldConfig,item()[fieldConfig.field])\">\n                        </div>\n                      }\n                    }\n                  }\n                }\n              } @else {\n                @if (fieldConfig.rows) {\n                  <div class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                    <div class=\"w-full flex absolute  {{ fieldConfig.rowsTemplateCssWrapper }}\">\n                      <libs_ui-components-table-templates class=\"flex w-full\"\n                        [item]=\"item\"\n                        [configs]=\"fieldConfig.rows\" />\n                    </div>\n                  </div>\n                }\n                @else {\n                  <ng-container *ngComponentOutlet=\"(item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getComponentOutlet) | async; inputs:{item}\" />\n                }\n              }\n\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n}\n", styles: [":host{width:100%;height:100%}:host .mo-lib-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}:host .mo-lib-table-template .mo-lib-table-template-buttons-container{visibility:hidden!important}:host .mo-lib-table-template [is-hover=true].mo-lib-table-template-buttons-container{visibility:visible!important}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -136,6 +135,24 @@ class LibsUiComponentsTableComponent {
     totalItemInBackend = signal(0);
     hasItemHightLight = signal(false);
     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({
+                serviceOther: returnListObject(this.configSelectMoreItem()?.listOption),
+                functionName: 'list',
+                argumentsValue: []
+            })
+        };
+    });
     hasScroll = signal(false);
     instanceSort = signal(undefined);
     hasActionButtonDropdownContent = signal(false);
@@ -163,6 +180,7 @@ class LibsUiComponentsTableComponent {
     classHeaderInclude = input();
     classBodyInclude = input('', { transform: val => val ?? '' });
     classFooterInclude = input('', { transform: val => val ?? '' });
+    classTableContainerInclude = input('', { transform: val => val ?? '' });
     fieldKey = input('id', { transform: val => val || 'id' }); // tên field định danh item của listDatas
     defaultKeysSelected = input();
     labelBarNoSelectItem = input(`i18n_total_quantity`); // sử dụng để hiên thị khi tích chọn item
@@ -256,7 +274,7 @@ class LibsUiComponentsTableComponent {
         });
     }
     getIndexRow = (data) => {
-        return of(this.items().findIndex((item) => item === data.value) + 1);
+        return of(this.items().findIndex((item) => item === data.value) + 1000000);
     };
     getScrollContainer() {
         return this.bodyComponentRef();
@@ -695,7 +713,7 @@ class LibsUiComponentsTableComponent {
         clearTimeout(this.timeoutLeaveItem());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTableComponent, isStandalone: true, selector: "libs_ui-components-table", inputs: { 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 }, 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 }, classHeaderInclude: { classPropertyName: "classHeaderInclude", publicName: "classHeaderInclude", 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 }, 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 }, 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 } }, 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 class=\"flex items-center justify-between relative z-[1] bottom-0 left-0 w-full bg-white mb-[16px] libs-ui-table-shadow-bottom\"\n      [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      @if (!keysSelected().length && labelBarNoSelectItem()) {\n        <div class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n          [innerHtml]='labelBarNoSelectItem() | translate:{value:totalItemDisplay()}'>\n        </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 [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 [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]=\"({\n                  type:'text',\n                  configTemplateText:{\n                    fieldKey:'key',\n                    ignoreIconSelected:true,\n                    getValue:configSelectMoreItem()?.getValue\n                  }\n                } | LibsUiPipesConvertObjectToSignalPipe: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 [type]=\"'button-link-primary'\"\n                [classInclude]=\"'p-0 m-0'\"\n                [classIconLeft]=\"'before:!text-[16px] libs-ui-con-dropdown 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              <libs_ui-components-buttons-button [type]=\"button.type || 'button-link-primary'\"\n                [classIconLeft]=\"button.classIconLeft || ''\"\n                [classInclude]=\"button.classInclude || ''\"\n                [label]=\"(button.label || ' ') | 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 #tableContainerElementRef\n    class=\"libs-ui-table flex flex-col w-full h-full relative\"\n    [class.px-[16px]]='!ignoreBar()'\n    (mouseleave)=\"resetIndexHover($event)\">\n    <div #headerElementRef\n      [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n      [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n      [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\"\n      [class]=\"classHeaderContainer()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      @if (headerLeft().length) {\n        <div class=\"h-full flex sticky top-0 left-0 bg-[#ffffff] z-[1]\">\n          @for (header of headerLeft();track header) {\n            <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHederLeft:true}\" />\n          }\n        </div>\n      }\n      @if (headerRight().length) {\n        @for (header of headerRight();track header) {\n          <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHederLeft:false}\" />\n        }\n      }\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      @if (items().length) {\n        <div #bodyElementRef\n          class=\"flex h-full w-full relative\"\n          LibsUiComponentsScrollOverlayDirective\n          [options]=\"{scrollX: (!headerLeft().length || !headerRight()) ? 'hidden':'scroll'}\"\n          (outScroll)=\"handlerScroll($event)\"\n          (outScrollBottom)=\"handlerScrollBottom($event)\">\n          <virtual-scroller #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              <div #elementHover\n                class=\"flex\"\n                [class.bg-[#f3fcfc]]=\"data().specificHightLight\"\n                [class.libs-ui-border-top-1px-36d3d3]=\"data().specificHightLight && $first && !ignoreBorderItem()\"\n                [class.libs-ui-border-bottom-1px-36d3d3]=\"data().specificHightLight && !ignoreBorderItem()\"\n                [ngClass]=\"(data().specificHightLight || ($last && ignoreBorderItemLast())) ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px' : ignoreBorderItem() ? '' : isDashBorder() ? 'libs-ui-border-bottom-dashed-general' : 'libs-ui-border-bottom-general'\"\n                [style.width.px]=\"headerElementRef.scrollWidth\"\n                [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !data().specificHightLight\"\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 class=\"flex sticky top-0 left-0 z-[1]\"\n                          [class.bg-white]=\"!data().specificHightLight\"\n                          [class.bg-[#f3fcfc]]=\"data().specificHightLight\">\n                          @for (header of headerLeft();track header) {\n                            <div class=\"relative flex px-[12px] py-[8px] {{ header.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n                              [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !data().specificHightLight\"\n                              [ngStyle]=\"header.ngStyle || {}\"\n                              [ngClass]=\"header.ngClass || {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef;context:{header:header,data:data}\" />\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (headerRight().length) {\n                        @for (header of headerRight();track header) {\n                          <div class=\"relative flex px-[12px] py-[8px]\"\n                            [ngStyle]=\"header.ngStyle || {}\"\n                            [ngClass]=\"header.ngClass || {}\">\n                            <ng-container *ngTemplateOutlet=\"templateBodyRef;context:{header:header,data:data}\" />\n                          </div>\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                            <libs_ui-components-table-templates [item]=\"dataExpand\"\n                              [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                              [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\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\n          @if ((!items().length) && !loading() && noDataConfig()) {\n            <div class=\"h-full\"\n              [style.flex]=\"'0 0 '+headerElementRef.scrollWidth+'px'\">\n            </div>\n          }\n        </div>\n      }\n      @if ((!items().length) && !loading()) {\n        <div class=\"relative h-full w-full\">\n          <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n        </div>\n      }\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  </div>\n</div>\n\n<ng-template #templateHeaderRef\n  let-header='headerItem'\n  let-isHederLeft='isHederLeft'>\n  <div [class]=\"'relative flex '+ (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHederLeft && !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]=\"header.ngStyle || {}\"\n    [ngClass]=\"header.ngClass || {}\">\n    @if (!header.rowsConfig) {\n      <ng-container *ngTemplateOutlet=\"templateHeaderContentRef;context:{headerItem:header,isColRender:false}\" />\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}\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateHeaderContentRef\n  let-header='headerItem'\n  let-isColRender='isColRender'>\n  <div 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    [ngStyle]=\"isColRender ? (header.ngStyle || {}) : {}\"\n    [ngClass]=\"isColRender ? (header.ngClass || {}) : {}\">\n    @if (header.hasCheckbox) {\n      @if (header.hasCheckboxAll) {\n        <div class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n          [class.items-center]=\"header.checkboxAlignCenter\">\n          <libs_ui-components-checkbox-single [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 }}\">\n        </div>\n      }\n    }\n\n    @if (header.configShowIndexRow;as config) {\n      <div class=\"flex h-full w-[36px] shrink-0 items-center {{ config.classIncludeConfigShowIndexRow || '' }}\">\n        {{ config.title ?? '#' }}\n      </div>\n    }\n    @if ((header.label | LibsUiPipesCallFunctionInTemplatePipe:header.parseValue:header)| async | translate; as labelHeaderColumn) {\n      <libs_ui-components-popover [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    @if (header.tooltipOther; as tooltip) {\n      <div class=\"ml-[4px]\">\n        <libs_ui-components-popover [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"tooltip.config || {content:(tooltip.dataView || ' ') | translate, position: {\n              mode: 'center',\n              distance: 0,\n              autoUpdatePosition: {\n                endDistance: 12,\n                startDistance: -12\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 [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 [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 #templateBodyRef\n  let-header='header'\n  let-data='data'>\n  <div class=\"flex w-full h-full\">\n    @if (header.hasCheckbox) {\n      <div 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 [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.configShowIndexRow; as config) {\n      <div class=\"flex h-full w-[36px] shrink-0 items-center {{ config.classIncludeConfigShowIndexRow || '' }}\">\n        {{ data | LibsUiPipesCallFunctionInTemplatePipe:getIndexRow }}\n      </div>\n    }\n\n    @if (header.colTemplateConfig) {\n      <libs_ui-components-table-templates [isHover]=\"itemOfIndexHover === data && !data.specificHightLight\"\n        [class]=\"header.templateCssWrapperHost || ''\"\n        [item]=\"data\"\n        [templateCssWrapper]=\"header.templateCssWrapper\"\n        [configs]=\"header.colTemplateConfig\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n  @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n    <div #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)=\"handlerMouseEnter($event)\"\n      (mouseleave)=\"handlerMouseLeave($event)\">\n      @if (footerLeft()) {\n        <div #footerLeftElementRef\n          class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n          @for (footer of footerLeft();track footer) {\n            <div class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n              [ngStyle]=\"footer.ngStyle || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig) {\n                <libs_ui-components-table-templates [item]=\"itemFooter\"\n                  [templateCssWrapper]=\"footer.templateCssWrapper\"\n                  [configs]=\"footer.colTemplateConfig\" />\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (footerRight()) {\n        @for (footer of footerRight();track footer) {\n          <div class=\"flex items-center px-[12px] py-[8px]\"\n            [ngStyle]=\"footer.ngStyle || {}\"\n            [ngClass]=\"footer.ngClass || {}\">\n            @if (footer.colTemplateConfig) {\n              <libs_ui-components-table-templates [item]=\"itemFooter\"\n                [templateCssWrapper]=\"footer.templateCssWrapper\"\n                [configs]=\"footer.colTemplateConfig\" />\n            }\n          </div>\n        }\n      }\n\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateNodataRef>\n  @if (noDataConfig(); as config) {\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        LibsUiComponentsScrollOverlayDirective>\n        @if (!keySearch() && !onlyShowNoResult()) {\n          <ng-container *ngComponentOutlet=\" ('no-data' | LibsUiIconsGetIconComponentPipe | async);inputs:{size:64}\" />\n          <div class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"config.ngStyle || {}\"\n            [ngClass]=\"config.ngClass || {}\"\n            [innerHtml]=\"config.textNoData | translate\">\n          </div>\n        }\n        @if (keySearch() || onlyShowNoResult()) {\n          <ng-container *ngComponentOutlet=\"('no-result' | LibsUiIconsGetIconComponentPipe | async);inputs:{size:64}\" />\n          <div class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"config.ngStyle || {}\"\n            [ngClass]=\"config.ngClass || {}\"\n            [innerHtml]=\"config.textSearchNoData | translate\">\n          </div>\n        }\n      </div>\n    </div>\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"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { 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", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "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: 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"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { 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", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesCheckSelectedByKeyPipe, name: "LibsUiPipesCheckSelectedByKeyPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTableComponent, isStandalone: true, selector: "libs_ui-components-table", inputs: { 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 }, 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 }, classHeaderInclude: { classPropertyName: "classHeaderInclude", publicName: "classHeaderInclude", 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 }, 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 }, 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 } }, 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 class=\"flex items-center justify-between relative z-[1] bottom-0 left-0 w-full bg-white mb-[16px] libs-ui-table-shadow-bottom\"\n      [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      @if (!keysSelected().length && labelBarNoSelectItem()) {\n        <div class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n          [innerHtml]='labelBarNoSelectItem() | translate:{value:totalItemDisplay()}'>\n        </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 [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 [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 [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              <libs_ui-components-buttons-button [type]=\"button.type || 'button-link-primary'\"\n                [classIconLeft]=\"button.classIconLeft || ''\"\n                [classInclude]=\"button.classInclude || ''\"\n                [label]=\"(button.label || ' ') | 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 #tableContainerElementRef\n    class=\"libs-ui-table flex flex-col w-full h-full relative {{ classTableContainerInclude() }}\"\n    [class.px-[16px]]='!ignoreBar()'\n    (mouseleave)=\"resetIndexHover($event)\">\n    <div #headerElementRef\n      [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n      [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n      [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\"\n      [class]=\"classHeaderContainer()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      @if (headerLeft().length) {\n        <div class=\"h-full flex sticky top-0 left-0 z-[1] {{ classHeaderInclude() }}\">\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        @for (header of headerRight();track header) {\n          <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHeaderLeft:false}\" />\n        }\n      }\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      @if (items().length) {\n        <div #bodyElementRef\n          class=\"flex h-full w-full relative\"\n          LibsUiComponentsScrollOverlayDirective\n          [options]=\"{scrollX: (!headerLeft().length || !headerRight()) ? 'hidden':'scroll'}\"\n          (outScroll)=\"handlerScroll($event)\"\n          (outScrollBottom)=\"handlerScrollBottom($event)\">\n          <virtual-scroller #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              <div #elementHover\n                class=\"flex\"\n                [class.bg-[#f3fcfc]]=\"data().specificHightLight\"\n                [class.libs-ui-border-top-1px-36d3d3]=\"data().specificHightLight && $first && !ignoreBorderItem()\"\n                [class.libs-ui-border-bottom-1px-36d3d3]=\"data().specificHightLight && !ignoreBorderItem()\"\n                [ngClass]=\"(data().specificHightLight || ($last && ignoreBorderItemLast())) ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px' : ignoreBorderItem() ? '' : isDashBorder() ? 'libs-ui-border-bottom-dashed-general' : 'libs-ui-border-bottom-general'\"\n                [style.width.px]=\"headerElementRef.scrollWidth\"\n                [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !data().specificHightLight\"\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 class=\"flex sticky top-0 left-0 z-[1]\"\n                          [class.bg-white]=\"!data().specificHightLight\"\n                          [class.bg-[#f3fcfc]]=\"data().specificHightLight\">\n                          @for (header of headerLeft();track header) {\n                            <div class=\"relative flex px-[12px] py-[8px] {{ header.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n                              [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !data().specificHightLight\"\n                              [ngStyle]=\"header.ngStyle || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\"\n                              [ngClass]=\"header.ngClass || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef;context:{header:header,data:data}\" />\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (headerRight().length) {\n                        @for (header of headerRight();track header) {\n                          <div class=\"relative flex px-[12px] py-[8px]\"\n                            [ngStyle]=\"header.ngStyle || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\"\n                            [ngClass]=\"header.ngClass || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\">\n                            <ng-container *ngTemplateOutlet=\"templateBodyRef;context:{header:header,data:data}\" />\n                          </div>\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                            <libs_ui-components-table-templates [item]=\"dataExpand\"\n                              [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                              [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\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\n          @if ((!items().length) && !loading() && noDataConfig()) {\n            <div class=\"h-full\"\n              [style.flex]=\"'0 0 '+headerElementRef.scrollWidth+'px'\">\n            </div>\n          }\n        </div>\n      }\n      @if ((!items().length) && !loading()) {\n        <div class=\"relative h-full w-full\">\n          <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n        </div>\n      }\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  </div>\n</div>\n\n<ng-template #templateHeaderRef\n  let-header='headerItem'\n  let-isHeaderLeft='isHeaderLeft'>\n  <div [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]=\"header.ngStyle || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\"\n    [ngClass]=\"header.ngClass || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\">\n    @if (!header.rowsConfig) {\n      <ng-container *ngTemplateOutlet=\"templateHeaderContentRef;context:{headerItem:header,isColRender:false}\" />\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}\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateHeaderContentRef\n  let-header='headerItem'\n  let-isColRender='isColRender'>\n  <div 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]=\"isColRender ? (header.ngStyle || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})) : {}\"\n    [ngClass]=\"isColRender ? (header.ngClass ||  (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})) : {}\">\n    @if (header.hasCheckbox) {\n      @if (header.hasCheckboxAll) {\n        <div class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n          [class.items-center]=\"header.checkboxAlignCenter\">\n          <libs_ui-components-checkbox-single [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 }}\">\n        </div>\n      }\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 [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    @if (header.tooltipOther; as tooltip) {\n      <div class=\"ml-[4px]\">\n        <libs_ui-components-popover [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"tooltip.config || {content:(tooltip.dataView || ' ') | translate, position: {\n              mode: 'center',\n              distance: 0,\n              autoUpdatePosition: {\n                endDistance: 12,\n                startDistance: -12\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 [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 [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 #templateBodyRef\n  let-header='header'\n  let-data='data'>\n  <div class=\"flex w-full h-full\">\n    @if (header.hasCheckbox) {\n      <div 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 [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 {{ config.classIncludeIndexOnRow || 'libs-ui-font-h4r' }}\">\n        <div LibsUiComponentsPopoverDirective\n            [type]=\"'text'\"\n            [config]=\"{}\"\n            [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe:getIndexRow | async\">\n        </div>\n      </div>\n    }\n\n    @if (header.colTemplateConfig) {\n      <libs_ui-components-table-templates [isHover]=\"itemOfIndexHover === data && !data.specificHightLight\"\n        [class]=\"header.templateCssWrapperHost || ''\"\n        [item]=\"data\"\n        [templateCssWrapper]=\"header.templateCssWrapper\"\n        [configs]=\"header.colTemplateConfig\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n  @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n    <div #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)=\"handlerMouseEnter($event)\"\n      (mouseleave)=\"handlerMouseLeave($event)\">\n      @if (footerLeft()) {\n        <div #footerLeftElementRef\n          class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n          @for (footer of footerLeft();track footer) {\n            <div class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n              [ngStyle]=\"footer.ngStyle || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig) {\n                <libs_ui-components-table-templates [item]=\"itemFooter\"\n                  [templateCssWrapper]=\"footer.templateCssWrapper\"\n                  [configs]=\"footer.colTemplateConfig\" />\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (footerRight()) {\n        @for (footer of footerRight();track footer) {\n          <div class=\"flex items-center px-[12px] py-[8px]\"\n            [ngStyle]=\"footer.ngStyle || {}\"\n            [ngClass]=\"footer.ngClass || {}\">\n            @if (footer.colTemplateConfig) {\n              <libs_ui-components-table-templates [item]=\"itemFooter\"\n                [templateCssWrapper]=\"footer.templateCssWrapper\"\n                [configs]=\"footer.colTemplateConfig\" />\n            }\n          </div>\n        }\n      }\n\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateNodataRef>\n  @if (noDataConfig(); as config) {\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        LibsUiComponentsScrollOverlayDirective>\n        @if (!keySearch() && !onlyShowNoResult()) {\n          <ng-container *ngComponentOutlet=\" ('no-data' | LibsUiIconsGetIconComponentPipe | async);inputs:{size:64}\" />\n          <div class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"config.ngStyle || {}\"\n            [ngClass]=\"config.ngClass || {}\"\n            [innerHtml]=\"config.textNoData | translate\">\n          </div>\n        }\n        @if (keySearch() || onlyShowNoResult()) {\n          <ng-container *ngComponentOutlet=\"('no-result' | LibsUiIconsGetIconComponentPipe | async);inputs:{size:64}\" />\n          <div class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"config.ngStyle || {}\"\n            [ngClass]=\"config.ngClass || {}\"\n            [innerHtml]=\"config.textSearchNoData | translate\">\n          </div>\n        }\n      </div>\n    </div>\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"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { 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", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "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: 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"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { 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", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesCheckSelectedByKeyPipe, name: "LibsUiPipesCheckSelectedByKeyPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableComponent, decorators: [{
             type: Component,
@@ -703,11 +721,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NgClass, NgStyle, AsyncPipe, NgTemplateOutlet, NgComponentOutlet, LibsUiComponentsTableTemplatesComponent,
                         TranslateModule, VirtualScrollerModule, LibsUiComponentsButtonsButtonComponent,
                         LibsUiComponentsDropdownComponent, LibsUiComponentsButtonsSortArrowComponent,
-                        LibsUiComponentsCheckboxSingleComponent, LibsUiPipesConvertObjectToSignalPipe,
+                        LibsUiComponentsCheckboxSingleComponent,
                         LibsUiComponentsSpinnerComponent, LibsUiComponentsPopoverComponent,
                         LibsUiComponentsScrollOverlayDirective, LibsUiIconsGetIconComponentPipe,
                         LibsUiPipesCallFunctionInTemplatePipe, LibsUiPipesCheckSelectedByKeyPipe
-                    ], template: "<div class='flex flex-col w-full h-full'>\n  @if (!ignoreBar()) {\n    <div class=\"flex items-center justify-between relative z-[1] bottom-0 left-0 w-full bg-white mb-[16px] libs-ui-table-shadow-bottom\"\n      [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      @if (!keysSelected().length && labelBarNoSelectItem()) {\n        <div class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n          [innerHtml]='labelBarNoSelectItem() | translate:{value:totalItemDisplay()}'>\n        </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 [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 [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]=\"({\n                  type:'text',\n                  configTemplateText:{\n                    fieldKey:'key',\n                    ignoreIconSelected:true,\n                    getValue:configSelectMoreItem()?.getValue\n                  }\n                } | LibsUiPipesConvertObjectToSignalPipe: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 [type]=\"'button-link-primary'\"\n                [classInclude]=\"'p-0 m-0'\"\n                [classIconLeft]=\"'before:!text-[16px] libs-ui-con-dropdown 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              <libs_ui-components-buttons-button [type]=\"button.type || 'button-link-primary'\"\n                [classIconLeft]=\"button.classIconLeft || ''\"\n                [classInclude]=\"button.classInclude || ''\"\n                [label]=\"(button.label || ' ') | 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 #tableContainerElementRef\n    class=\"libs-ui-table flex flex-col w-full h-full relative\"\n    [class.px-[16px]]='!ignoreBar()'\n    (mouseleave)=\"resetIndexHover($event)\">\n    <div #headerElementRef\n      [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n      [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n      [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\"\n      [class]=\"classHeaderContainer()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      @if (headerLeft().length) {\n        <div class=\"h-full flex sticky top-0 left-0 bg-[#ffffff] z-[1]\">\n          @for (header of headerLeft();track header) {\n            <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHederLeft:true}\" />\n          }\n        </div>\n      }\n      @if (headerRight().length) {\n        @for (header of headerRight();track header) {\n          <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHederLeft:false}\" />\n        }\n      }\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      @if (items().length) {\n        <div #bodyElementRef\n          class=\"flex h-full w-full relative\"\n          LibsUiComponentsScrollOverlayDirective\n          [options]=\"{scrollX: (!headerLeft().length || !headerRight()) ? 'hidden':'scroll'}\"\n          (outScroll)=\"handlerScroll($event)\"\n          (outScrollBottom)=\"handlerScrollBottom($event)\">\n          <virtual-scroller #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              <div #elementHover\n                class=\"flex\"\n                [class.bg-[#f3fcfc]]=\"data().specificHightLight\"\n                [class.libs-ui-border-top-1px-36d3d3]=\"data().specificHightLight && $first && !ignoreBorderItem()\"\n                [class.libs-ui-border-bottom-1px-36d3d3]=\"data().specificHightLight && !ignoreBorderItem()\"\n                [ngClass]=\"(data().specificHightLight || ($last && ignoreBorderItemLast())) ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px' : ignoreBorderItem() ? '' : isDashBorder() ? 'libs-ui-border-bottom-dashed-general' : 'libs-ui-border-bottom-general'\"\n                [style.width.px]=\"headerElementRef.scrollWidth\"\n                [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !data().specificHightLight\"\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 class=\"flex sticky top-0 left-0 z-[1]\"\n                          [class.bg-white]=\"!data().specificHightLight\"\n                          [class.bg-[#f3fcfc]]=\"data().specificHightLight\">\n                          @for (header of headerLeft();track header) {\n                            <div class=\"relative flex px-[12px] py-[8px] {{ header.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n                              [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !data().specificHightLight\"\n                              [ngStyle]=\"header.ngStyle || {}\"\n                              [ngClass]=\"header.ngClass || {}\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef;context:{header:header,data:data}\" />\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (headerRight().length) {\n                        @for (header of headerRight();track header) {\n                          <div class=\"relative flex px-[12px] py-[8px]\"\n                            [ngStyle]=\"header.ngStyle || {}\"\n                            [ngClass]=\"header.ngClass || {}\">\n                            <ng-container *ngTemplateOutlet=\"templateBodyRef;context:{header:header,data:data}\" />\n                          </div>\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                            <libs_ui-components-table-templates [item]=\"dataExpand\"\n                              [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                              [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\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\n          @if ((!items().length) && !loading() && noDataConfig()) {\n            <div class=\"h-full\"\n              [style.flex]=\"'0 0 '+headerElementRef.scrollWidth+'px'\">\n            </div>\n          }\n        </div>\n      }\n      @if ((!items().length) && !loading()) {\n        <div class=\"relative h-full w-full\">\n          <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n        </div>\n      }\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  </div>\n</div>\n\n<ng-template #templateHeaderRef\n  let-header='headerItem'\n  let-isHederLeft='isHederLeft'>\n  <div [class]=\"'relative flex '+ (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHederLeft && !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]=\"header.ngStyle || {}\"\n    [ngClass]=\"header.ngClass || {}\">\n    @if (!header.rowsConfig) {\n      <ng-container *ngTemplateOutlet=\"templateHeaderContentRef;context:{headerItem:header,isColRender:false}\" />\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}\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateHeaderContentRef\n  let-header='headerItem'\n  let-isColRender='isColRender'>\n  <div 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    [ngStyle]=\"isColRender ? (header.ngStyle || {}) : {}\"\n    [ngClass]=\"isColRender ? (header.ngClass || {}) : {}\">\n    @if (header.hasCheckbox) {\n      @if (header.hasCheckboxAll) {\n        <div class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n          [class.items-center]=\"header.checkboxAlignCenter\">\n          <libs_ui-components-checkbox-single [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 }}\">\n        </div>\n      }\n    }\n\n    @if (header.configShowIndexRow;as config) {\n      <div class=\"flex h-full w-[36px] shrink-0 items-center {{ config.classIncludeConfigShowIndexRow || '' }}\">\n        {{ config.title ?? '#' }}\n      </div>\n    }\n    @if ((header.label | LibsUiPipesCallFunctionInTemplatePipe:header.parseValue:header)| async | translate; as labelHeaderColumn) {\n      <libs_ui-components-popover [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    @if (header.tooltipOther; as tooltip) {\n      <div class=\"ml-[4px]\">\n        <libs_ui-components-popover [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"tooltip.config || {content:(tooltip.dataView || ' ') | translate, position: {\n              mode: 'center',\n              distance: 0,\n              autoUpdatePosition: {\n                endDistance: 12,\n                startDistance: -12\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 [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 [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 #templateBodyRef\n  let-header='header'\n  let-data='data'>\n  <div class=\"flex w-full h-full\">\n    @if (header.hasCheckbox) {\n      <div 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 [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.configShowIndexRow; as config) {\n      <div class=\"flex h-full w-[36px] shrink-0 items-center {{ config.classIncludeConfigShowIndexRow || '' }}\">\n        {{ data | LibsUiPipesCallFunctionInTemplatePipe:getIndexRow }}\n      </div>\n    }\n\n    @if (header.colTemplateConfig) {\n      <libs_ui-components-table-templates [isHover]=\"itemOfIndexHover === data && !data.specificHightLight\"\n        [class]=\"header.templateCssWrapperHost || ''\"\n        [item]=\"data\"\n        [templateCssWrapper]=\"header.templateCssWrapper\"\n        [configs]=\"header.colTemplateConfig\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n  @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n    <div #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)=\"handlerMouseEnter($event)\"\n      (mouseleave)=\"handlerMouseLeave($event)\">\n      @if (footerLeft()) {\n        <div #footerLeftElementRef\n          class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n          @for (footer of footerLeft();track footer) {\n            <div class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n              [ngStyle]=\"footer.ngStyle || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig) {\n                <libs_ui-components-table-templates [item]=\"itemFooter\"\n                  [templateCssWrapper]=\"footer.templateCssWrapper\"\n                  [configs]=\"footer.colTemplateConfig\" />\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (footerRight()) {\n        @for (footer of footerRight();track footer) {\n          <div class=\"flex items-center px-[12px] py-[8px]\"\n            [ngStyle]=\"footer.ngStyle || {}\"\n            [ngClass]=\"footer.ngClass || {}\">\n            @if (footer.colTemplateConfig) {\n              <libs_ui-components-table-templates [item]=\"itemFooter\"\n                [templateCssWrapper]=\"footer.templateCssWrapper\"\n                [configs]=\"footer.colTemplateConfig\" />\n            }\n          </div>\n        }\n      }\n\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateNodataRef>\n  @if (noDataConfig(); as config) {\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        LibsUiComponentsScrollOverlayDirective>\n        @if (!keySearch() && !onlyShowNoResult()) {\n          <ng-container *ngComponentOutlet=\" ('no-data' | LibsUiIconsGetIconComponentPipe | async);inputs:{size:64}\" />\n          <div class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"config.ngStyle || {}\"\n            [ngClass]=\"config.ngClass || {}\"\n            [innerHtml]=\"config.textNoData | translate\">\n          </div>\n        }\n        @if (keySearch() || onlyShowNoResult()) {\n          <ng-container *ngComponentOutlet=\"('no-result' | LibsUiIconsGetIconComponentPipe | async);inputs:{size:64}\" />\n          <div class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"config.ngStyle || {}\"\n            [ngClass]=\"config.ngClass || {}\"\n            [innerHtml]=\"config.textSearchNoData | translate\">\n          </div>\n        }\n      </div>\n    </div>\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 class=\"flex items-center justify-between relative z-[1] bottom-0 left-0 w-full bg-white mb-[16px] libs-ui-table-shadow-bottom\"\n      [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      @if (!keysSelected().length && labelBarNoSelectItem()) {\n        <div class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n          [innerHtml]='labelBarNoSelectItem() | translate:{value:totalItemDisplay()}'>\n        </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 [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 [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 [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              <libs_ui-components-buttons-button [type]=\"button.type || 'button-link-primary'\"\n                [classIconLeft]=\"button.classIconLeft || ''\"\n                [classInclude]=\"button.classInclude || ''\"\n                [label]=\"(button.label || ' ') | 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 #tableContainerElementRef\n    class=\"libs-ui-table flex flex-col w-full h-full relative {{ classTableContainerInclude() }}\"\n    [class.px-[16px]]='!ignoreBar()'\n    (mouseleave)=\"resetIndexHover($event)\">\n    <div #headerElementRef\n      [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n      [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n      [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\"\n      [class]=\"classHeaderContainer()\"\n      (mouseenter)=\"resetIndexHover($event)\">\n      @if (headerLeft().length) {\n        <div class=\"h-full flex sticky top-0 left-0 z-[1] {{ classHeaderInclude() }}\">\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        @for (header of headerRight();track header) {\n          <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHeaderLeft:false}\" />\n        }\n      }\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      @if (items().length) {\n        <div #bodyElementRef\n          class=\"flex h-full w-full relative\"\n          LibsUiComponentsScrollOverlayDirective\n          [options]=\"{scrollX: (!headerLeft().length || !headerRight()) ? 'hidden':'scroll'}\"\n          (outScroll)=\"handlerScroll($event)\"\n          (outScrollBottom)=\"handlerScrollBottom($event)\">\n          <virtual-scroller #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              <div #elementHover\n                class=\"flex\"\n                [class.bg-[#f3fcfc]]=\"data().specificHightLight\"\n                [class.libs-ui-border-top-1px-36d3d3]=\"data().specificHightLight && $first && !ignoreBorderItem()\"\n                [class.libs-ui-border-bottom-1px-36d3d3]=\"data().specificHightLight && !ignoreBorderItem()\"\n                [ngClass]=\"(data().specificHightLight || ($last && ignoreBorderItemLast())) ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px' : ignoreBorderItem() ? '' : isDashBorder() ? 'libs-ui-border-bottom-dashed-general' : 'libs-ui-border-bottom-general'\"\n                [style.width.px]=\"headerElementRef.scrollWidth\"\n                [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !data().specificHightLight\"\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 class=\"flex sticky top-0 left-0 z-[1]\"\n                          [class.bg-white]=\"!data().specificHightLight\"\n                          [class.bg-[#f3fcfc]]=\"data().specificHightLight\">\n                          @for (header of headerLeft();track header) {\n                            <div class=\"relative flex px-[12px] py-[8px] {{ header.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n                              [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !data().specificHightLight\"\n                              [ngStyle]=\"header.ngStyle || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\"\n                              [ngClass]=\"header.ngClass || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\">\n                              <ng-container *ngTemplateOutlet=\"templateBodyRef;context:{header:header,data:data}\" />\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (headerRight().length) {\n                        @for (header of headerRight();track header) {\n                          <div class=\"relative flex px-[12px] py-[8px]\"\n                            [ngStyle]=\"header.ngStyle || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\"\n                            [ngClass]=\"header.ngClass || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\">\n                            <ng-container *ngTemplateOutlet=\"templateBodyRef;context:{header:header,data:data}\" />\n                          </div>\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                            <libs_ui-components-table-templates [item]=\"dataExpand\"\n                              [templateCssWrapper]=\"configTemplateItemCollapseExpand()?.templateCssWrapper\"\n                              [configs]=\"configTemplateItemCollapseExpand()?.colTemplateConfig\" />\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\n          @if ((!items().length) && !loading() && noDataConfig()) {\n            <div class=\"h-full\"\n              [style.flex]=\"'0 0 '+headerElementRef.scrollWidth+'px'\">\n            </div>\n          }\n        </div>\n      }\n      @if ((!items().length) && !loading()) {\n        <div class=\"relative h-full w-full\">\n          <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n        </div>\n      }\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  </div>\n</div>\n\n<ng-template #templateHeaderRef\n  let-header='headerItem'\n  let-isHeaderLeft='isHeaderLeft'>\n  <div [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]=\"header.ngStyle || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\"\n    [ngClass]=\"header.ngClass || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})\">\n    @if (!header.rowsConfig) {\n      <ng-container *ngTemplateOutlet=\"templateHeaderContentRef;context:{headerItem:header,isColRender:false}\" />\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}\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateHeaderContentRef\n  let-header='headerItem'\n  let-isColRender='isColRender'>\n  <div 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]=\"isColRender ? (header.ngStyle || (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})) : {}\"\n    [ngClass]=\"isColRender ? (header.ngClass ||  (header.isShowIndexOnRow ? {width:'46px',padding:'8px'} : {})) : {}\">\n    @if (header.hasCheckbox) {\n      @if (header.hasCheckboxAll) {\n        <div class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n          [class.items-center]=\"header.checkboxAlignCenter\">\n          <libs_ui-components-checkbox-single [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 }}\">\n        </div>\n      }\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 [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    @if (header.tooltipOther; as tooltip) {\n      <div class=\"ml-[4px]\">\n        <libs_ui-components-popover [type]=\"tooltip?.type || 'other'\"\n          [mode]=\"tooltip?.mode || 'hover'\"\n          [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n          [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n          [config]=\"tooltip.config || {content:(tooltip.dataView || ' ') | translate, position: {\n              mode: 'center',\n              distance: 0,\n              autoUpdatePosition: {\n                endDistance: 12,\n                startDistance: -12\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 [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 [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 #templateBodyRef\n  let-header='header'\n  let-data='data'>\n  <div class=\"flex w-full h-full\">\n    @if (header.hasCheckbox) {\n      <div 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 [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 {{ config.classIncludeIndexOnRow || 'libs-ui-font-h4r' }}\">\n        <div LibsUiComponentsPopoverDirective\n            [type]=\"'text'\"\n            [config]=\"{}\"\n            [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe:getIndexRow | async\">\n        </div>\n      </div>\n    }\n\n    @if (header.colTemplateConfig) {\n      <libs_ui-components-table-templates [isHover]=\"itemOfIndexHover === data && !data.specificHightLight\"\n        [class]=\"header.templateCssWrapperHost || ''\"\n        [item]=\"data\"\n        [templateCssWrapper]=\"header.templateCssWrapper\"\n        [configs]=\"header.colTemplateConfig\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #templateFooterRef>\n  @if (!isHiddenHeaderWhenNodata() || (isHiddenHeaderWhenNodata() && items().length)) {\n    <div #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)=\"handlerMouseEnter($event)\"\n      (mouseleave)=\"handlerMouseLeave($event)\">\n      @if (footerLeft()) {\n        <div #footerLeftElementRef\n          class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n          @for (footer of footerLeft();track footer) {\n            <div class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n              [ngStyle]=\"footer.ngStyle || {}\"\n              [ngClass]=\"footer.ngClass || {}\">\n              @if (footer.colTemplateConfig) {\n                <libs_ui-components-table-templates [item]=\"itemFooter\"\n                  [templateCssWrapper]=\"footer.templateCssWrapper\"\n                  [configs]=\"footer.colTemplateConfig\" />\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (footerRight()) {\n        @for (footer of footerRight();track footer) {\n          <div class=\"flex items-center px-[12px] py-[8px]\"\n            [ngStyle]=\"footer.ngStyle || {}\"\n            [ngClass]=\"footer.ngClass || {}\">\n            @if (footer.colTemplateConfig) {\n              <libs_ui-components-table-templates [item]=\"itemFooter\"\n                [templateCssWrapper]=\"footer.templateCssWrapper\"\n                [configs]=\"footer.colTemplateConfig\" />\n            }\n          </div>\n        }\n      }\n\n    </div>\n  }\n</ng-template>\n\n<ng-template #templateNodataRef>\n  @if (noDataConfig(); as config) {\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        LibsUiComponentsScrollOverlayDirective>\n        @if (!keySearch() && !onlyShowNoResult()) {\n          <ng-container *ngComponentOutlet=\" ('no-data' | LibsUiIconsGetIconComponentPipe | async);inputs:{size:64}\" />\n          <div class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"config.ngStyle || {}\"\n            [ngClass]=\"config.ngClass || {}\"\n            [innerHtml]=\"config.textNoData | translate\">\n          </div>\n        }\n        @if (keySearch() || onlyShowNoResult()) {\n          <ng-container *ngComponentOutlet=\"('no-result' | LibsUiIconsGetIconComponentPipe | async);inputs:{size:64}\" />\n          <div class=\"libs-ui-table-no-data-config-text\"\n            [ngStyle]=\"config.ngStyle || {}\"\n            [ngClass]=\"config.ngClass || {}\"\n            [innerHtml]=\"config.textSearchNoData | translate\">\n          </div>\n        }\n      </div>\n    </div>\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 */