@libs-ui/components-table 0.2.306 → 0.2.307-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +26 -28
  2. package/esm2022/index.mjs +1 -1
  3. package/esm2022/interfaces/button-action-event.interface.mjs +1 -1
  4. package/esm2022/interfaces/button-bar-event.interface.mjs +1 -1
  5. package/esm2022/interfaces/function-control-event.interface.mjs +1 -1
  6. package/esm2022/interfaces/hover-button-action-event.interface.mjs +1 -1
  7. package/esm2022/interfaces/load-more-event.interface.mjs +1 -1
  8. package/esm2022/interfaces/no-data-config.interface.mjs +1 -1
  9. package/esm2022/interfaces/sort-event.interface.mjs +1 -1
  10. package/esm2022/interfaces/table-config.interface.mjs +1 -1
  11. package/esm2022/interfaces/table.type.mjs +1 -1
  12. package/esm2022/interfaces/template-config.interface.mjs +1 -1
  13. package/esm2022/pipes/calculator-column.pipe.mjs +4 -4
  14. package/esm2022/table.component.mjs +122 -95
  15. package/esm2022/templates/templates.component.mjs +20 -10
  16. package/fesm2022/libs-ui-components-table.mjs +126 -89
  17. package/fesm2022/libs-ui-components-table.mjs.map +1 -1
  18. package/interfaces/button-action-event.interface.d.ts +1 -1
  19. package/interfaces/button-bar-event.interface.d.ts +1 -1
  20. package/interfaces/load-more-event.interface.d.ts +1 -1
  21. package/interfaces/no-data-config.interface.d.ts +1 -1
  22. package/interfaces/sort-event.interface.d.ts +1 -1
  23. package/interfaces/table-config.interface.d.ts +4 -4
  24. package/interfaces/table.type.d.ts +2 -2
  25. package/interfaces/template-config.interface.d.ts +12 -12
  26. package/package.json +25 -25
  27. package/table.component.d.ts +11 -10
package/fesm2022/libs-ui-components-table.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { NgStyle, NgClass, AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
2
2
  import { HttpParams } from '@angular/common/http';
3
3
  import * as i0 from '@angular/core';
4
- import { Pipe, input, Component, ChangeDetectionStrategy, computed, signal, output, viewChild, inject, DestroyRef, ChangeDetectorRef, effect, untracked } from '@angular/core';
4
+ import { Pipe, input, ChangeDetectionStrategy, Component, computed, signal, output, viewChild, inject, DestroyRef, ChangeDetectorRef, effect, untracked } from '@angular/core';
5
5
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
6
6
  import * as i2 from '@iharbeck/ngx-virtual-scroller';
7
7
  import { VirtualScrollerModule } from '@iharbeck/ngx-virtual-scroller';
@@ -40,7 +40,7 @@ class LibsUiTableCalculatorColumnPipe {
40
40
  let totalPxWidthHeader = mixHeaderConfig.reduce((acc, curr) => acc + this.getWidthPxOfStyle(curr), 0);
41
41
  const totalPercentWidthHeader = mixHeaderConfig.reduce((acc, curr) => acc + this.getWidthPercentOfStyle(curr), 0);
42
42
  const totalWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader = mixHeaderConfig.reduce((acc, curr) => acc + (curr.keepWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader ? this.getWidthPxOfStyle(curr) : 0), 0);
43
- if (mixHeaderConfig.some(header => header.isShowIndexOnRow)) {
43
+ if (mixHeaderConfig.some((header) => header.isShowIndexOnRow)) {
44
44
  offsetWidth -= 50;
45
45
  }
46
46
  if (totalWidthIsPxColumnIfTableWidthGrandTotalColumnsHeader) {
@@ -95,7 +95,7 @@ class LibsUiTableCalculatorColumnPipe {
95
95
  ...ngStyle,
96
96
  flex: `0 0 ${widthCalculator}px`,
97
97
  width: `${widthCalculator}px`,
98
- maxWidth: `${widthCalculator}px`
98
+ maxWidth: `${widthCalculator}px`,
99
99
  };
100
100
  }
101
101
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTableCalculatorColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -105,7 +105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
105
105
  type: Pipe,
106
106
  args: [{
107
107
  name: 'LibsUiTableCalculatorColumnPipe',
108
- standalone: true
108
+ standalone: true,
109
109
  }]
110
110
  }] });
111
111
 
@@ -187,19 +187,29 @@ class LibsUiComponentsTableTemplatesComponent {
187
187
  this.functionControls.clear();
188
188
  }
189
189
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableTemplatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
190
- 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=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n @for (config of configs; track config) {\n @if (config.fieldsConfig) {\n <div [class]=\"config.cssWrapper\">\n @for (fieldConfig of config.fieldsConfig; track fieldConfig;let index = $index;) {\n @let constHtmlNgStyle = fieldConfig.getNgStyle ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getNgStyle:item() | async) : (fieldConfig.ngStyle || {});\n @let constHtmlNgClass = fieldConfig.getNgClass ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getNgClass:item() | async) : (fieldConfig.ngClass || {});\n @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n @switch (fieldConfig.instance) {\n @case (\"tooltip\") {\n @if ((fieldConfig.tooltip || {}); as tooltip) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"tooltip.type || 'text'\"\n [mode]=\"tooltip.mode || 'hover'\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [classInclude]=\"tooltip.classInclude || ' '\"\n [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n [config]=\"(fieldConfig.getTooltipConfig ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getTooltipConfig:item() | async) : (tooltip.config | LibsUiPipesCloneObjectPipe)) | translate\"\n [innerHTML]=\" (fieldConfig.field ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true ) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async | translate\"\n (outEvent)=\"handlerItemClick($event,fieldConfig)\">\n </span>\n }\n }\n @case (\"image\") {\n @if (((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getImageSrc:item():isImageError) | async); as linkImage) {\n @if (linkImage !== ' ') {\n <img [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [src]=\"linkImage\"\n (error)=\"handlerImageError($event)\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n }\n }\n\n @case (\"avatar\") {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getAvatarConfig:item()) | async ; as avatarConfig) {\n <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n [classInclude]=\"avatarConfig.classInclude\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [size]='avatarConfig.size || 32'\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\" \n [textAvatar]=\"avatarConfig.textAvatar\"/>\n }\n }\n\n @case (\"buttons\") {\n @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n @for (button of (fieldConfig.buttons || (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getButtonsByItem:item() | async)); track button) {\n\n <libs_ui-components-buttons-button [type]=\"button().type || 'button-primary'\"\n [sizeButton]=\"button().sizeButton || 'smaller'\"\n [disable]=\"button().disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async): false\"\n [label]=\"button().label || ' '\"\n [classIconLeft]=\"button().classIconLeft || ''\"\n [classIconRight]=\"button().classIconRight || ''\"\n [popover]=\"button().popover || {}\"\n [classInclude]=\"button().classInclude || ''\"\n [ignorePointerEvent]=\"button().ignorePointerEvent\"\n [iconOnlyType]=\"button().iconOnlyType\"\n (outClick)=\"clickButtonAction(button())\" />\n }\n </div>\n }\n }\n\n @case (\"button-status\") {\n <libs_ui-components-buttons-status\n [config]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n\n @case (\"switch\") {\n <libs_ui-components-switch\n [active]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getActiveValueSwitch:item() | async\"\n [disable]=\"fieldConfig.getDisableValueSwitch ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisableValueSwitch:item() | async): false\"\n (outSwitch)=\"handlerSwitch($event,fieldConfig)\" />\n }\n\n\n @case ((fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup') ? fieldConfig.instance : '') {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) !== ' ') {\n @let constHtmlDisableDropdown = fieldConfig.dropdownConfig?.disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async) : false;\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\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?.getListConfig ? ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.dropdownConfig?.getListConfig:item()) | async):fieldConfig.dropdownConfig?.listConfig\"\n [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n [disable]=\"constHtmlDisableDropdown\"\n (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index,$event)\"\n (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index,$event)\">\n @if (fieldConfig.instance === 'other-action-show-popup') {\n <div\n [innerHtml]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate\">\n </div>\n }\n @if (fieldConfig.instance === 'badge') {\n @let constHtmlDataBadge = item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async;\n @if(constHtmlDataBadge > 0){\n <libs_ui-components-badge [active]=\"true\"\n [ignoreMarginDefault]=\"true\"\n mode=\"+x\"\n [count]=\"constHtmlDataBadge\"\n [maxCount]=\"99\" />\n }\n }\n @if (fieldConfig.instance === 'button-action-show-popup') {\n <libs_ui-components-buttons-button\n [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? constHtmlDisableDropdown\"\n [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n\n </libs_ui-components-dropdown>\n </div>\n }\n }\n\n @case (\"line-clamp\") {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\">\n @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n <libs_ui-components-line_clamp\n [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n [isInnerText]=\"lineClampConfig.isInnerText || false\"\n [ignoreStopPropagationTooltipEvent]=\"true\"\n [content]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n </div>\n }\n\n @case (\"shape-style\") {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate | LibsUiPipesSecurityTrustPipe:'html':true | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n @default {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async | translate | LibsUiPipesSecurityTrustPipe:'html':true|async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n }\n } @else {\n @if (fieldConfig.rows) {\n <div class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n [style.height.px]=\"rowRef.clientHeight\">\n <div #rowRef\n 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()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDataComponentOutlet:item():fieldConfig.field:{valueIsEmpty:{item:item()}}) | async\" />\n }\n }\n }\n </div>\n }\n }\n </div>\n }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsTableTemplatesComponent, selector: "libs_ui-components-table-templates", inputs: ["isHover", "configs", "templateCssWrapper", "item"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsStatusComponent, selector: "libs_ui-components-buttons-status", inputs: ["config"] }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "pipe", type: LibsUiPipesCloneObjectPipe, name: "LibsUiPipesCloneObjectPipe" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsLineClampComponent, selector: "libs_ui-components-line_clamp", inputs: ["content", "lengthLimitDisplay", "maxHeight", "ignoreShowButtonCollapseExpand", "ignoreShowButtonCollapse", "showTooltip", "timeHidePopoverOnMouseout", "maxWidthTooltip", "maxHeightTooltip", "zIndexPopover", "isInnerText", "classClassLabelButtonCollapseExpand", "classClassIncludeButtonCollapseExpand", "ignoreStopPropagationTooltipEvent", "ngClassObject", "hasBackgroundGradient", "labelButtonViewMore", "labelButtonCollapse", "directionTooltip", "useXssFilter", "defaultIsCollapse"], outputs: ["outDisplayLineClamp", "outAction", "outClick", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
190
+ 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=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n @for (config of configs; track config) {\n @if (config.fieldsConfig) {\n <div [class]=\"config.cssWrapper\">\n @for (fieldConfig of config.fieldsConfig; track fieldConfig; let index = $index) {\n @let constHtmlNgStyle = fieldConfig.getNgStyle ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgStyle : item() | async) : fieldConfig.ngStyle || {};\n @let constHtmlNgClass = fieldConfig.getNgClass ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgClass : item() | async) : fieldConfig.ngClass || {};\n @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n @switch (fieldConfig.instance) {\n @case ('tooltip') {\n @if (fieldConfig.tooltip || {}; as tooltip) {\n <span\n LibsUiComponentsPopoverDirective\n [type]=\"tooltip.type || 'text'\"\n [mode]=\"tooltip.mode || 'hover'\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [classInclude]=\"tooltip.classInclude || ' '\"\n [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n [config]=\"\n (fieldConfig.getTooltipConfig\n ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getTooltipConfig : item() | async)\n : (tooltip.config | LibsUiPipesCloneObjectPipe)\n ) | translate\n \"\n [innerHTML]=\"\n (fieldConfig.field ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\n \"\n (outEvent)=\"handlerItemClick($event, fieldConfig)\"></span>\n }\n }\n @case ('image') {\n @if (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getImageSrc : item() : isImageError | async; as linkImage) {\n @if (linkImage !== ' ') {\n <img\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [src]=\"linkImage\"\n (error)=\"handlerImageError($event)\"\n (click)=\"handlerItemClick($event, fieldConfig)\" />\n }\n }\n }\n\n @case ('avatar') {\n @if (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getAvatarConfig : item() | async; as avatarConfig) {\n <libs_ui-components-avatar\n [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n [classInclude]=\"avatarConfig.classInclude\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [size]=\"avatarConfig.size || 32\"\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\"\n [textAvatar]=\"avatarConfig.textAvatar\" />\n }\n }\n\n @case ('buttons') {\n @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n <div\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n @for (button of fieldConfig.buttons || (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getButtonsByItem : item() | async); track button) {\n <libs_ui-components-buttons-button\n [type]=\"button().type || 'button-primary'\"\n [sizeButton]=\"button().sizeButton || 'smaller'\"\n [disable]=\"\n (button().disable ?? fieldConfig.getDisable) ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async) : false\n \"\n [label]=\"button().label || ' '\"\n [classIconLeft]=\"button().classIconLeft || ''\"\n [classIconRight]=\"button().classIconRight || ''\"\n [popover]=\"button().popover || {}\"\n [classInclude]=\"button().classInclude || ''\"\n [ignorePointerEvent]=\"button().ignorePointerEvent\"\n [iconOnlyType]=\"button().iconOnlyType\"\n (outClick)=\"clickButtonAction(button())\" />\n }\n </div>\n }\n }\n\n @case ('button-status') {\n <libs_ui-components-buttons-status\n [config]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n (click)=\"handlerItemClick($event, fieldConfig)\" />\n }\n\n @case ('switch') {\n <libs_ui-components-switch\n [active]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getActiveValueSwitch : item() | async\"\n [disable]=\"fieldConfig.getDisableValueSwitch ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisableValueSwitch : item() | async) : false\"\n (outSwitch)=\"handlerSwitch($event, fieldConfig)\" />\n }\n\n @case (fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup' ? fieldConfig.instance : '') {\n @if ((item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async) !== ' ') {\n @let constHtmlDisableDropdown =\n (fieldConfig.dropdownConfig?.disable ?? fieldConfig.getDisable)\n ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async)\n : false;\n <div\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [popoverCustomConfig]=\"{\n widthByParent: false,\n ignoreArrow: fieldConfig.dropdownConfig?.ignoreArrow || false,\n maxHeight: fieldConfig.dropdownConfig?.maxHeight || 2048,\n paddingLeftItem: fieldConfig.dropdownConfig?.paddingLeftItem ?? true,\n classInclude: fieldConfig.dropdownConfig?.classIncludePopup || 'w-[250px]',\n position: fieldConfig.dropdownConfig?.position || {\n mode: 'center',\n distance: 0,\n },\n }\"\n [zIndex]=\"fieldConfig.dropdownConfig?.zIndex\"\n [listConfig]=\"\n fieldConfig.dropdownConfig?.getListConfig\n ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.dropdownConfig?.getListConfig : item() | async)\n : fieldConfig.dropdownConfig?.listConfig\n \"\n [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n [disable]=\"constHtmlDisableDropdown\"\n (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index, $event)\"\n (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index, $event)\">\n @if (fieldConfig.instance === 'other-action-show-popup') {\n <div [innerHtml]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\"></div>\n }\n @if (fieldConfig.instance === 'badge') {\n @let constHtmlDataBadge = item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async;\n @if (constHtmlDataBadge > 0) {\n <libs_ui-components-badge\n [active]=\"true\"\n [ignoreMarginDefault]=\"true\"\n mode=\"+x\"\n [count]=\"constHtmlDataBadge\"\n [maxCount]=\"99\" />\n }\n }\n @if (fieldConfig.instance === 'button-action-show-popup') {\n <libs_ui-components-buttons-button\n [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? constHtmlDisableDropdown\"\n [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n </libs_ui-components-dropdown>\n </div>\n }\n }\n\n @case ('line-clamp') {\n <div\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\">\n @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n <libs_ui-components-line_clamp\n [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n [isInnerText]=\"lineClampConfig.isInnerText || false\"\n [ignoreStopPropagationTooltipEvent]=\"true\"\n [content]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n (click)=\"handlerItemClick($event, fieldConfig)\" />\n }\n </div>\n }\n\n @case ('shape-style') {\n <div\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"\n item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n \"\n (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n }\n @default {\n <div\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"\n item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n \"\n (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n }\n }\n } @else {\n @if (fieldConfig.rows) {\n <div\n class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n [style.height.px]=\"rowRef.clientHeight\">\n <div\n #rowRef\n class=\"w-full flex absolute {{ fieldConfig.rowsTemplateCssWrapper }}\">\n <libs_ui-components-table-templates\n class=\"flex w-full\"\n [item]=\"item\"\n [configs]=\"fieldConfig.rows\" />\n </div>\n </div>\n } @else {\n <ng-container\n *ngComponentOutlet=\"\n item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getComponentOutlet : item() | async;\n inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDataComponentOutlet : item() : fieldConfig.field : { valueIsEmpty: { item: item() } } | async\n \" />\n }\n }\n }\n </div>\n }\n }\n </div>\n }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsTableTemplatesComponent, selector: "libs_ui-components-table-templates", inputs: ["isHover", "configs", "templateCssWrapper", "item"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsStatusComponent, selector: "libs_ui-components-buttons-status", inputs: ["config"] }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "pipe", type: LibsUiPipesCloneObjectPipe, name: "LibsUiPipesCloneObjectPipe" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsLineClampComponent, selector: "libs_ui-components-line_clamp", inputs: ["content", "lengthLimitDisplay", "maxHeight", "ignoreShowButtonCollapseExpand", "ignoreShowButtonCollapse", "showTooltip", "timeHidePopoverOnMouseout", "maxWidthTooltip", "maxHeightTooltip", "zIndexPopover", "isInnerText", "classClassLabelButtonCollapseExpand", "classClassIncludeButtonCollapseExpand", "ignoreStopPropagationTooltipEvent", "ngClassObject", "hasBackgroundGradient", "labelButtonViewMore", "labelButtonCollapse", "directionTooltip", "useXssFilter", "defaultIsCollapse"], outputs: ["outDisplayLineClamp", "outAction", "outClick", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
191
191
  }
192
192
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableTemplatesComponent, decorators: [{
193
193
  type: Component,
194
194
  args: [{ selector: 'libs_ui-components-table-templates', standalone: true, imports: [
195
- NgStyle, NgClass, TranslateModule, AsyncPipe, NgComponentOutlet, LibsUiPipesGetValueOfObjectPipe,
196
- LibsUiComponentsAvatarComponent, LibsUiPipesCallFunctionInTemplatePipe,
197
- LibsUiPipesSecurityTrustPipe, LibsUiComponentsPopoverComponent,
198
- LibsUiComponentsButtonsStatusComponent, LibsUiComponentsSwitchComponent,
199
- LibsUiPipesCloneObjectPipe, LibsUiComponentsButtonsButtonComponent,
200
- LibsUiComponentsLineClampComponent, LibsUiComponentsDropdownComponent,
201
- LibsUiComponentsBadgeComponent
202
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (configs(); as configs) {\n @if (item(); as item) {\n <div class=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n @for (config of configs; track config) {\n @if (config.fieldsConfig) {\n <div [class]=\"config.cssWrapper\">\n @for (fieldConfig of config.fieldsConfig; track fieldConfig;let index = $index;) {\n @let constHtmlNgStyle = fieldConfig.getNgStyle ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getNgStyle:item() | async) : (fieldConfig.ngStyle || {});\n @let constHtmlNgClass = fieldConfig.getNgClass ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getNgClass:item() | async) : (fieldConfig.ngClass || {});\n @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n @switch (fieldConfig.instance) {\n @case (\"tooltip\") {\n @if ((fieldConfig.tooltip || {}); as tooltip) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"tooltip.type || 'text'\"\n [mode]=\"tooltip.mode || 'hover'\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [classInclude]=\"tooltip.classInclude || ' '\"\n [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n [config]=\"(fieldConfig.getTooltipConfig ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getTooltipConfig:item() | async) : (tooltip.config | LibsUiPipesCloneObjectPipe)) | translate\"\n [innerHTML]=\" (fieldConfig.field ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true ) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async | translate\"\n (outEvent)=\"handlerItemClick($event,fieldConfig)\">\n </span>\n }\n }\n @case (\"image\") {\n @if (((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getImageSrc:item():isImageError) | async); as linkImage) {\n @if (linkImage !== ' ') {\n <img [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [src]=\"linkImage\"\n (error)=\"handlerImageError($event)\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n }\n }\n\n @case (\"avatar\") {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getAvatarConfig:item()) | async ; as avatarConfig) {\n <libs_ui-components-avatar [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n [classInclude]=\"avatarConfig.classInclude\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [size]='avatarConfig.size || 32'\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\" \n [textAvatar]=\"avatarConfig.textAvatar\"/>\n }\n }\n\n @case (\"buttons\") {\n @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n @for (button of (fieldConfig.buttons || (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getButtonsByItem:item() | async)); track button) {\n\n <libs_ui-components-buttons-button [type]=\"button().type || 'button-primary'\"\n [sizeButton]=\"button().sizeButton || 'smaller'\"\n [disable]=\"button().disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async): false\"\n [label]=\"button().label || ' '\"\n [classIconLeft]=\"button().classIconLeft || ''\"\n [classIconRight]=\"button().classIconRight || ''\"\n [popover]=\"button().popover || {}\"\n [classInclude]=\"button().classInclude || ''\"\n [ignorePointerEvent]=\"button().ignorePointerEvent\"\n [iconOnlyType]=\"button().iconOnlyType\"\n (outClick)=\"clickButtonAction(button())\" />\n }\n </div>\n }\n }\n\n @case (\"button-status\") {\n <libs_ui-components-buttons-status\n [config]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n\n @case (\"switch\") {\n <libs_ui-components-switch\n [active]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getActiveValueSwitch:item() | async\"\n [disable]=\"fieldConfig.getDisableValueSwitch ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisableValueSwitch:item() | async): false\"\n (outSwitch)=\"handlerSwitch($event,fieldConfig)\" />\n }\n\n\n @case ((fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup') ? fieldConfig.instance : '') {\n @if ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async) !== ' ') {\n @let constHtmlDisableDropdown = fieldConfig.dropdownConfig?.disable ?? fieldConfig.getDisable ? (item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDisable:item() | async) : false;\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\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?.getListConfig ? ((item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.dropdownConfig?.getListConfig:item()) | async):fieldConfig.dropdownConfig?.listConfig\"\n [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n [disable]=\"constHtmlDisableDropdown\"\n (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index,$event)\"\n (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index,$event)\">\n @if (fieldConfig.instance === 'other-action-show-popup') {\n <div\n [innerHtml]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate\">\n </div>\n }\n @if (fieldConfig.instance === 'badge') {\n @let constHtmlDataBadge = item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async;\n @if(constHtmlDataBadge > 0){\n <libs_ui-components-badge [active]=\"true\"\n [ignoreMarginDefault]=\"true\"\n mode=\"+x\"\n [count]=\"constHtmlDataBadge\"\n [maxCount]=\"99\" />\n }\n }\n @if (fieldConfig.instance === 'button-action-show-popup') {\n <libs_ui-components-buttons-button\n [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? constHtmlDisableDropdown\"\n [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n\n </libs_ui-components-dropdown>\n </div>\n }\n }\n\n @case (\"line-clamp\") {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\">\n @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n <libs_ui-components-line_clamp\n [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n [isInnerText]=\"lineClampConfig.isInnerText || false\"\n [ignoreStopPropagationTooltipEvent]=\"true\"\n [content]=\"item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item() | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\" />\n }\n </div>\n }\n\n @case (\"shape-style\") {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item())| async | translate | LibsUiPipesSecurityTrustPipe:'html':true | async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n @default {\n <div [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.parseValue:item()) | async | translate | LibsUiPipesSecurityTrustPipe:'html':true|async\"\n (click)=\"handlerItemClick($event,fieldConfig)\">\n </div>\n }\n }\n } @else {\n @if (fieldConfig.rows) {\n <div class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n [style.height.px]=\"rowRef.clientHeight\">\n <div #rowRef\n 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()|LibsUiPipesGetValueOfObjectPipe:fieldConfig.field:undefined:true | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:fieldConfig.getDataComponentOutlet:item():fieldConfig.field:{valueIsEmpty:{item:item()}}) | async\" />\n }\n }\n }\n </div>\n }\n }\n </div>\n }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"] }]
195
+ NgStyle,
196
+ NgClass,
197
+ TranslateModule,
198
+ AsyncPipe,
199
+ NgComponentOutlet,
200
+ LibsUiPipesGetValueOfObjectPipe,
201
+ LibsUiComponentsAvatarComponent,
202
+ LibsUiPipesCallFunctionInTemplatePipe,
203
+ LibsUiPipesSecurityTrustPipe,
204
+ LibsUiComponentsPopoverComponent,
205
+ LibsUiComponentsButtonsStatusComponent,
206
+ LibsUiComponentsSwitchComponent,
207
+ LibsUiPipesCloneObjectPipe,
208
+ LibsUiComponentsButtonsButtonComponent,
209
+ LibsUiComponentsLineClampComponent,
210
+ LibsUiComponentsDropdownComponent,
211
+ LibsUiComponentsBadgeComponent,
212
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (configs(); as configs) {\n @if (item(); as item) {\n <div class=\"libs-ui-table-template {{ templateCssWrapper() || '' }}\">\n @for (config of configs; track config) {\n @if (config.fieldsConfig) {\n <div [class]=\"config.cssWrapper\">\n @for (fieldConfig of config.fieldsConfig; track fieldConfig; let index = $index) {\n @let constHtmlNgStyle = fieldConfig.getNgStyle ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgStyle : item() | async) : fieldConfig.ngStyle || {};\n @let constHtmlNgClass = fieldConfig.getNgClass ? (item()[fieldConfig.field] | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getNgClass : item() | async) : fieldConfig.ngClass || {};\n @if (!fieldConfig.rows && !fieldConfig.getComponentOutlet) {\n @switch (fieldConfig.instance) {\n @case ('tooltip') {\n @if (fieldConfig.tooltip || {}; as tooltip) {\n <span\n LibsUiComponentsPopoverDirective\n [type]=\"tooltip.type || 'text'\"\n [mode]=\"tooltip.mode || 'hover'\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [classInclude]=\"tooltip.classInclude || ' '\"\n [ignoreShowPopover]=\"tooltip.ignoreShowPopover || false\"\n [config]=\"\n (fieldConfig.getTooltipConfig\n ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getTooltipConfig : item() | async)\n : (tooltip.config | LibsUiPipesCloneObjectPipe)\n ) | translate\n \"\n [innerHTML]=\"\n (fieldConfig.field ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true) : tooltip.dataView) | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\n \"\n (outEvent)=\"handlerItemClick($event, fieldConfig)\"></span>\n }\n }\n @case ('image') {\n @if (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getImageSrc : item() : isImageError | async; as linkImage) {\n @if (linkImage !== ' ') {\n <img\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [src]=\"linkImage\"\n (error)=\"handlerImageError($event)\"\n (click)=\"handlerItemClick($event, fieldConfig)\" />\n }\n }\n }\n\n @case ('avatar') {\n @if (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getAvatarConfig : item() | async; as avatarConfig) {\n <libs_ui-components-avatar\n [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n [classInclude]=\"avatarConfig.classInclude\"\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [size]=\"avatarConfig.size || 32\"\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\"\n [textAvatar]=\"avatarConfig.textAvatar\" />\n }\n }\n\n @case ('buttons') {\n @if ((fieldConfig.buttons && fieldConfig.buttons.length) || fieldConfig.getButtonsByItem) {\n <div\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [class.invisible]=\"!isHover() && fieldConfig.showButtonHoverMode\">\n @for (button of fieldConfig.buttons || (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getButtonsByItem : item() | async); track button) {\n <libs_ui-components-buttons-button\n [type]=\"button().type || 'button-primary'\"\n [sizeButton]=\"button().sizeButton || 'smaller'\"\n [disable]=\"\n (button().disable ?? fieldConfig.getDisable) ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async) : false\n \"\n [label]=\"button().label || ' '\"\n [classIconLeft]=\"button().classIconLeft || ''\"\n [classIconRight]=\"button().classIconRight || ''\"\n [popover]=\"button().popover || {}\"\n [classInclude]=\"button().classInclude || ''\"\n [ignorePointerEvent]=\"button().ignorePointerEvent\"\n [iconOnlyType]=\"button().iconOnlyType\"\n (outClick)=\"clickButtonAction(button())\" />\n }\n </div>\n }\n }\n\n @case ('button-status') {\n <libs_ui-components-buttons-status\n [config]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n (click)=\"handlerItemClick($event, fieldConfig)\" />\n }\n\n @case ('switch') {\n <libs_ui-components-switch\n [active]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getActiveValueSwitch : item() | async\"\n [disable]=\"fieldConfig.getDisableValueSwitch ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisableValueSwitch : item() | async) : false\"\n (outSwitch)=\"handlerSwitch($event, fieldConfig)\" />\n }\n\n @case (fieldConfig.instance === 'other-action-show-popup' || fieldConfig.instance === 'badge' || fieldConfig.instance === 'button-action-show-popup' ? fieldConfig.instance : '') {\n @if ((item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async) !== ' ') {\n @let constHtmlDisableDropdown =\n (fieldConfig.dropdownConfig?.disable ?? fieldConfig.getDisable)\n ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDisable : item() | async)\n : false;\n <div\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [class.ml-[8px]]=\"!fieldConfig.ignoreClassMarginLeft\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [popoverCustomConfig]=\"{\n widthByParent: false,\n ignoreArrow: fieldConfig.dropdownConfig?.ignoreArrow || false,\n maxHeight: fieldConfig.dropdownConfig?.maxHeight || 2048,\n paddingLeftItem: fieldConfig.dropdownConfig?.paddingLeftItem ?? true,\n classInclude: fieldConfig.dropdownConfig?.classIncludePopup || 'w-[250px]',\n position: fieldConfig.dropdownConfig?.position || {\n mode: 'center',\n distance: 0,\n },\n }\"\n [zIndex]=\"fieldConfig.dropdownConfig?.zIndex\"\n [listConfig]=\"\n fieldConfig.dropdownConfig?.getListConfig\n ? (item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.dropdownConfig?.getListConfig : item() | async)\n : fieldConfig.dropdownConfig?.listConfig\n \"\n [listBackgroundCustom]=\"fieldConfig.dropdownConfig?.listBackgroundListCustom\"\n [listMaxItemShow]=\"fieldConfig.dropdownConfig?.listMaxItemShow || 5\"\n [listKeysDisable]=\"fieldConfig.dropdownConfig?.listKeysDisableItem\"\n [listHiddenInputSearch]=\"fieldConfig.dropdownConfig?.listHiddenInputSearch\"\n [disable]=\"constHtmlDisableDropdown\"\n (outFunctionsControl)=\"handlerFunctionControl($event, index)\"\n (outSelectKey)=\"handlerSelectItemDropdown(fieldConfig, index, $event)\"\n (outSelectMultiKey)=\"handlerSelectItemsDropdown(fieldConfig, index, $event)\">\n @if (fieldConfig.instance === 'other-action-show-popup') {\n <div [innerHtml]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate\"></div>\n }\n @if (fieldConfig.instance === 'badge') {\n @let constHtmlDataBadge = item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async;\n @if (constHtmlDataBadge > 0) {\n <libs_ui-components-badge\n [active]=\"true\"\n [ignoreMarginDefault]=\"true\"\n mode=\"+x\"\n [count]=\"constHtmlDataBadge\"\n [maxCount]=\"99\" />\n }\n }\n @if (fieldConfig.instance === 'button-action-show-popup') {\n <libs_ui-components-buttons-button\n [type]=\"fieldConfig?.dropdownConfig?.button()?.type || 'button-primary'\"\n [sizeButton]=\"fieldConfig?.dropdownConfig?.button()?.sizeButton || 'smaller'\"\n [disable]=\"fieldConfig?.dropdownConfig?.button()?.disable ?? constHtmlDisableDropdown\"\n [label]=\"fieldConfig?.dropdownConfig?.button()?.label || ' '\"\n [classIconLeft]=\"fieldConfig?.dropdownConfig?.button()?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n [classIconRight]=\"fieldConfig?.dropdownConfig?.button()?.classIconRight || ''\"\n [popover]=\"fieldConfig?.dropdownConfig?.button()?.popover || {}\"\n [classInclude]=\"fieldConfig?.dropdownConfig?.button()?.classInclude || ''\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n </libs_ui-components-dropdown>\n </div>\n }\n }\n\n @case ('line-clamp') {\n <div\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\">\n @if (fieldConfig.lineClampConfig; as lineClampConfig) {\n <libs_ui-components-line_clamp\n [ignoreShowButtonCollapseExpand]=\"lineClampConfig.ignoreShowButtonCollapseExpand ?? true\"\n [showTooltip]=\"lineClampConfig.showTooltip ?? true\"\n [maxHeight]=\"lineClampConfig.maxHeight || 36\"\n [maxWidthTooltip]=\"lineClampConfig.maxWidthTooltip || 200\"\n [maxHeightTooltip]=\"lineClampConfig.maxHeightTooltip || 100\"\n [ngClassObject]=\"lineClampConfig.ngClassObject ?? { 'libs-ui-line-clamp-content libs-ui-font-h5r': true }\"\n [isInnerText]=\"lineClampConfig.isInnerText || false\"\n [ignoreStopPropagationTooltipEvent]=\"true\"\n [content]=\"item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async\"\n (click)=\"handlerItemClick($event, fieldConfig)\" />\n }\n </div>\n }\n\n @case ('shape-style') {\n <div\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"\n item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n \"\n (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n }\n @default {\n <div\n [ngStyle]=\"constHtmlNgStyle\"\n [ngClass]=\"constHtmlNgClass\"\n [innerHTML]=\"\n item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.parseValue : item() | async | translate | LibsUiPipesSecurityTrustPipe: 'html' : true | async\n \"\n (click)=\"handlerItemClick($event, fieldConfig)\"></div>\n }\n }\n } @else {\n @if (fieldConfig.rows) {\n <div\n class=\"w-full flex relative {{ fieldConfig.rowsTemplateCssWrapper }}\"\n [style.height.px]=\"rowRef.clientHeight\">\n <div\n #rowRef\n class=\"w-full flex absolute {{ fieldConfig.rowsTemplateCssWrapper }}\">\n <libs_ui-components-table-templates\n class=\"flex w-full\"\n [item]=\"item\"\n [configs]=\"fieldConfig.rows\" />\n </div>\n </div>\n } @else {\n <ng-container\n *ngComponentOutlet=\"\n item() | LibsUiPipesGetValueOfObjectPipe: fieldConfig.field : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getComponentOutlet : item() | async;\n inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: fieldConfig.getDataComponentOutlet : item() : fieldConfig.field : { valueIsEmpty: { item: item() } } | async\n \" />\n }\n }\n }\n </div>\n }\n }\n </div>\n }\n}\n", styles: [":host{width:100%;height:100%}:host .libs-ui-table-template{color:#071631;font-size:12px;font-weight:400;width:100%;height:inherit}\n"] }]
203
213
  }] });
204
214
 
205
215
  /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -216,7 +226,7 @@ class LibsUiComponentsTableComponent {
216
226
  keySearch = signal('');
217
227
  totalItemInBackend = signal(0);
218
228
  hasItemHightLight = signal(false);
219
- totalItemDisplay = computed(() => viewDataNumberByLanguage((this.totalItem() ?? this.totalItemInBackend()), false));
229
+ totalItemDisplay = computed(() => viewDataNumberByLanguage(this.totalItem() ?? this.totalItemInBackend(), false));
220
230
  listConfigMoreItem = computed(() => {
221
231
  return {
222
232
  type: 'text',
@@ -225,14 +235,14 @@ class LibsUiComponentsTableComponent {
225
235
  ignoreIconSelected: true,
226
236
  getValue: this.configSelectMoreItem()?.getValue,
227
237
  configLabelPopover: signal({
228
- zIndex: 1200
229
- })
238
+ zIndex: 1200,
239
+ }),
230
240
  }),
231
241
  httpRequestData: signal({
232
242
  serviceOther: returnListObject(this.configSelectMoreItem()?.listOption),
233
243
  functionName: 'list',
234
- argumentsValue: []
235
- })
244
+ argumentsValue: [],
245
+ }),
236
246
  };
237
247
  });
238
248
  hasScroll = signal(false);
@@ -245,38 +255,38 @@ class LibsUiComponentsTableComponent {
245
255
  functionControlSelectMoreItem;
246
256
  mouseEnterHeader = signal(false);
247
257
  /** INPUT */
248
- timeHighlighNewItem = input(2000, { transform: val => val ?? 2000 });
249
- headerLeft = input([], { transform: val => val ?? [] });
250
- headerRight = input([], { transform: val => val ?? [] });
258
+ timeHighlighNewItem = input(2000, { transform: (val) => val ?? 2000 });
259
+ headerLeft = input([], { transform: (val) => val ?? [] });
260
+ headerRight = input([], { transform: (val) => val ?? [] });
251
261
  configTemplateItemCollapseExpand = input();
252
262
  showFooter = input();
253
263
  ignoreBorderFooter = input();
254
- customPositionFooter = input('bottom', { transform: val => val ?? 'bottom' });
264
+ customPositionFooter = input('bottom', { transform: (val) => val ?? 'bottom' });
255
265
  footerLeft = input();
256
266
  footerRight = input();
257
- disableCheckbox = input(false, { transform: val => val ?? false });
258
- enableUnequalChildrenSizes = input(false, { transform: val => val ?? false });
259
- bufferAmount = input(5, { transform: val => val ? (val > 25 ? 25 : val) : 5 });
267
+ disableCheckbox = input(false, { transform: (val) => val ?? false });
268
+ enableUnequalChildrenSizes = input(false, { transform: (val) => val ?? false });
269
+ bufferAmount = input(5, { transform: (val) => (val ? (val > 25 ? 25 : val) : 5) });
260
270
  totalItem = input();
261
271
  isDashBorder = input();
262
272
  classHeaderContainerInclude = input();
263
273
  classHeaderLeftInclude = input();
264
- classBodyInclude = input('', { transform: val => val ?? '' });
265
- classFooterInclude = input('', { transform: val => val ?? '' });
266
- classTableContainerInclude = input('', { transform: val => val ?? '' });
274
+ classBodyInclude = input('', { transform: (val) => val ?? '' });
275
+ classFooterInclude = input('', { transform: (val) => val ?? '' });
276
+ classTableContainerInclude = input('', { transform: (val) => val ?? '' });
267
277
  classBarInclude = input('justify-between mb-[16px]');
268
- fieldKey = input('id', { transform: val => val || 'id' }); // tên field định danh item của listDatas
278
+ fieldKey = input('id', { transform: (val) => val || 'id' }); // tên field định danh item của listDatas
269
279
  defaultKeysSelected = input();
270
280
  labelBarNoSelectItem = input(`i18n_total_quantity`); // sử dụng để hiên thị khi tích chọn item
271
- labelBarButtons = input('i18n_number_item_selected', { transform: val => val || 'i18n_number_item_selected' }); // sử dụng để hiên thị khi tích chọn item
272
- classLabelBarButtons = input('', { transform: val => val ?? '' }); // sử dụng để hiên thị khi tích chọn item
281
+ labelBarButtons = input('i18n_number_item_selected', { transform: (val) => val || 'i18n_number_item_selected' }); // sử dụng để hiên thị khi tích chọn item
282
+ classLabelBarButtons = input('', { transform: (val) => val ?? '' }); // sử dụng để hiên thị khi tích chọn item
273
283
  barButtons = input();
274
284
  sortLocal = input(); // trường hợp nếu sortLocal này không đáp ứng được nghiệp vụ thì mới cân nhắc sử dụng filterLocal
275
285
  filterOrSortLocal = input();
276
286
  httpRequestData = input();
277
287
  httpRequestDataFooter = input();
278
288
  newData = input();
279
- filter = input({ filterData: {} }, { transform: val => val ?? { filterData: {} } });
289
+ filter = input({ filterData: {} }, { transform: (val) => val ?? { filterData: {} } });
280
290
  ignoreBar = input();
281
291
  classLabelBarNoSelectItem = input();
282
292
  ignoreClassBgHeader = input();
@@ -284,11 +294,11 @@ class LibsUiComponentsTableComponent {
284
294
  showScrollTablePinnedIfNoData = input();
285
295
  ignoreBorderItemLast = input();
286
296
  isHiddenHeaderWhenNodata = input();
287
- maxItemSelected = input(100, { transform: val => val ?? 100 });
297
+ maxItemSelected = input(100, { transform: (val) => val ?? 100 });
288
298
  configSelectMoreItem = input();
289
299
  onlyShowNoResult = input();
290
300
  ignoreBorderItem = input();
291
- activityLoadData = input('scroll-infinity', { transform: val => val ?? 'scroll-infinity' });
301
+ activityLoadData = input('scroll-infinity', { transform: (val) => val ?? 'scroll-infinity' });
292
302
  paginationSetting = input();
293
303
  templateNoData = input();
294
304
  templateNoResult = input();
@@ -311,7 +321,6 @@ class LibsUiComponentsTableComponent {
311
321
  footerLeftElementRef = viewChild('footerLeftElementRef');
312
322
  bodyElementRef = viewChild('bodyElementRef');
313
323
  bodyComponentRef = viewChild('bodyComponentRef');
314
- ;
315
324
  /**INJECT */
316
325
  httpRequestService = inject(LibsUiHttpRequestService);
317
326
  destroyRef = inject(DestroyRef);
@@ -319,7 +328,7 @@ class LibsUiComponentsTableComponent {
319
328
  constructor() {
320
329
  effect(() => {
321
330
  if (this.defaultKeysSelected()?.length) {
322
- untracked(() => this.keysSelected.update(keys => ([...keys, ...(this.defaultKeysSelected() || [])])));
331
+ untracked(() => this.keysSelected.update((keys) => [...keys, ...(this.defaultKeysSelected() || [])]));
323
332
  }
324
333
  });
325
334
  effect(() => {
@@ -340,7 +349,7 @@ class LibsUiComponentsTableComponent {
340
349
  this.keySearch.set(get(this.filter().filterData, 'keySearch', ''));
341
350
  this.storeParamsCallApi.set(cloneDeep(this.filter().filterData));
342
351
  if (this.filter()?.filterData && !this.filter().filterData['instanceSort'] && this.instanceSort()) {
343
- this.storeParamsCallApi.update(data => ({ ...data, instanceSort: this.instanceSort() }));
352
+ this.storeParamsCallApi.update((data) => ({ ...data, instanceSort: this.instanceSort() }));
344
353
  }
345
354
  if (this.filterOrSortLocal() && this.stores().length) {
346
355
  this.items.set(this.filterOrSortLocal()?.(signal([...this.stores()]), { ...(this.filter().filterData || {}), instanceSort: this.instanceSort() }) || []);
@@ -352,7 +361,15 @@ class LibsUiComponentsTableComponent {
352
361
  });
353
362
  }
354
363
  ngOnInit() {
355
- this.outFunctionsControl.emit({
364
+ this.outFunctionsControl.emit(this.FunctionsControl);
365
+ fromEvent(window, 'resize')
366
+ .pipe(takeUntilDestroyed(this.destroyRef))
367
+ .subscribe(() => {
368
+ this.cdr.detectChanges();
369
+ });
370
+ }
371
+ get FunctionsControl() {
372
+ return {
356
373
  reset: this.reset.bind(this),
357
374
  callApiByService: this.callApiByService.bind(this),
358
375
  resetScroll: this.resetScroll.bind(this),
@@ -364,11 +381,8 @@ class LibsUiComponentsTableComponent {
364
381
  return;
365
382
  },
366
383
  resetKeySelected: () => this.keysSelected.set([]),
367
- detectChanges: () => this.cdr.detectChanges()
368
- });
369
- fromEvent(window, 'resize').pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
370
- this.cdr.detectChanges();
371
- });
384
+ detectChanges: () => this.cdr.detectChanges(),
385
+ };
372
386
  }
373
387
  getIndexRow = (data) => {
374
388
  return of(this.items().findIndex((item) => item === data.value) + 1);
@@ -392,14 +406,14 @@ class LibsUiComponentsTableComponent {
392
406
  guideAutoUpdateArgumentsValue.sortOrderBy = {
393
407
  fieldGetValue: 'storeParamsCallApi.instanceSort.fieldSort',
394
408
  fieldUpdate: '[0]',
395
- subFieldUpdate: 'order_by'
409
+ subFieldUpdate: 'order_by',
396
410
  };
397
411
  }
398
412
  if (guideAutoUpdateArgumentsValue && !guideAutoUpdateArgumentsValue.sortOrderType && this.instanceSort()) {
399
413
  guideAutoUpdateArgumentsValue.sortOrderType = {
400
414
  fieldGetValue: 'storeParamsCallApi.instanceSort.mode',
401
415
  fieldUpdate: '[0]',
402
- subFieldUpdate: 'order_type'
416
+ subFieldUpdate: 'order_type',
403
417
  };
404
418
  }
405
419
  if (firstCall) {
@@ -456,28 +470,28 @@ class LibsUiComponentsTableComponent {
456
470
  return;
457
471
  }
458
472
  const itemsAdd = [];
459
- items().forEach(item => {
473
+ items().forEach((item) => {
460
474
  if (!this.checkExistItem(item)) {
461
475
  itemsAdd.push(item);
462
476
  if (!ignoreHightLight) {
463
477
  this.hasItemHightLight.set(true);
464
- item.update(data => ({ ...data, specificHightLight: true }));
478
+ item.update((data) => ({ ...data, specificHightLight: true }));
465
479
  }
466
480
  if (addFirst) {
467
- this.items.update(data => [item, ...data]);
468
- this.stores.update(data => [item, ...data]);
481
+ this.items.update((data) => [item, ...data]);
482
+ this.stores.update((data) => [item, ...data]);
469
483
  return;
470
484
  }
471
- this.items.update(data => [...data, item]);
472
- this.stores.update(data => [...data, item]);
485
+ this.items.update((data) => [...data, item]);
486
+ this.stores.update((data) => [...data, item]);
473
487
  }
474
488
  });
475
489
  if (autoCountNewItem && itemsAdd.length) {
476
- this.totalItemInBackend.update(value => value + itemsAdd.length);
490
+ this.totalItemInBackend.update((value) => value + itemsAdd.length);
477
491
  }
478
492
  if (!ignoreHightLight) {
479
493
  setTimeout(() => {
480
- itemsAdd.forEach(item => item.update(data => ({ ...data, specificHightLight: false })));
494
+ itemsAdd.forEach((item) => item.update((data) => ({ ...data, specificHightLight: false })));
481
495
  this.hasItemHightLight.set(false);
482
496
  }, this.timeHighlighNewItem());
483
497
  }
@@ -487,17 +501,17 @@ class LibsUiComponentsTableComponent {
487
501
  }
488
502
  }
489
503
  checkExistItem(itemNew) {
490
- return this.items().find(item => `${item()[this.fieldKey()]}` === `${itemNew()[this.fieldKey()]}`) ? true : false;
504
+ return this.items().find((item) => `${item()[this.fieldKey()]}` === `${itemNew()[this.fieldKey()]}`) ? true : false;
491
505
  }
492
506
  async removeItems(keys, ignoreReCallFooter) {
493
507
  this.resetIndexHover();
494
508
  if (!this.items().length) {
495
509
  return;
496
510
  }
497
- keys.forEach(key => {
498
- this.items.update(items => {
511
+ keys.forEach((key) => {
512
+ this.items.update((items) => {
499
513
  let isUpdate = false;
500
- const newItems = items.filter(item => {
514
+ const newItems = items.filter((item) => {
501
515
  if (`${item()[this.fieldKey()]}` === `${key}`) {
502
516
  isUpdate = true;
503
517
  return false;
@@ -506,9 +520,9 @@ class LibsUiComponentsTableComponent {
506
520
  });
507
521
  return isUpdate ? newItems : items;
508
522
  });
509
- this.stores.update(items => {
523
+ this.stores.update((items) => {
510
524
  let isUpdate = false;
511
- const newItems = items.filter(item => {
525
+ const newItems = items.filter((item) => {
512
526
  if (`${item()[this.fieldKey()]}` === `${key}`) {
513
527
  isUpdate = true;
514
528
  return false;
@@ -520,9 +534,9 @@ class LibsUiComponentsTableComponent {
520
534
  if (!this.keysSelected() || !this.keysSelected().length) {
521
535
  return;
522
536
  }
523
- this.keysSelected.update(keys => keys.filter(keySelected => keySelected !== key));
537
+ this.keysSelected.update((keys) => keys.filter((keySelected) => keySelected !== key));
524
538
  });
525
- this.totalItemInBackend.update(value => value - keys.length);
539
+ this.totalItemInBackend.update((value) => value - keys.length);
526
540
  await this.checkScroll();
527
541
  if (!ignoreReCallFooter) {
528
542
  await this.callApiByServiceFooter();
@@ -546,7 +560,9 @@ class LibsUiComponentsTableComponent {
546
560
  }
547
561
  handlerChangeCheckedAllItems(event) {
548
562
  if (event.checked) {
549
- this.keysSelected.set(this.items().filter(async (item) => !(await this.checkCancelConditionCheckedItem(item))).map(item => `${item()[this.fieldKey()]}`));
563
+ this.keysSelected.set(this.items()
564
+ .filter(async (item) => !(await this.checkCancelConditionCheckedItem(item)))
565
+ .map((item) => `${item()[this.fieldKey()]}`));
550
566
  this.outKeysSelected.emit({ keys: this.keysSelected() });
551
567
  return;
552
568
  }
@@ -556,10 +572,10 @@ class LibsUiComponentsTableComponent {
556
572
  async checkCancelConditionCheckedItem(item) {
557
573
  let isCancelCheck = false;
558
574
  if (!isCancelCheck && this.headerLeft().length && this.headerLeft()[0].checkConditionCheckBoxHidden) {
559
- isCancelCheck = await lastValueFrom(this.headerLeft()[0].checkConditionCheckBoxHidden({ item: item() })) || false;
575
+ isCancelCheck = (await lastValueFrom(this.headerLeft()[0].checkConditionCheckBoxHidden({ item: item() }))) || false;
560
576
  }
561
577
  if (!isCancelCheck && this.headerRight().length && this.headerRight()[0].checkConditionCheckBoxHidden) {
562
- isCancelCheck = await lastValueFrom(this.headerRight()[0].checkConditionCheckBoxHidden({ item: item() })) || false;
578
+ isCancelCheck = (await lastValueFrom(this.headerRight()[0].checkConditionCheckBoxHidden({ item: item() }))) || false;
563
579
  }
564
580
  return isCancelCheck;
565
581
  }
@@ -583,10 +599,10 @@ class LibsUiComponentsTableComponent {
583
599
  this.handlerSortLocal(sort, scrollLeft);
584
600
  return;
585
601
  }
586
- this.storeParamsCallApi.update(data => ({ ...data, instanceSort: this.instanceSort() }));
602
+ this.storeParamsCallApi.update((data) => ({ ...data, instanceSort: this.instanceSort() }));
587
603
  this.outSort.emit({
588
604
  sort: sort,
589
- onSortSuccess: () => this.onSortSuccess(scrollLeft)
605
+ onSortSuccess: () => this.onSortSuccess(scrollLeft),
590
606
  });
591
607
  try {
592
608
  await this.callApiByService(true);
@@ -602,7 +618,7 @@ class LibsUiComponentsTableComponent {
602
618
  return;
603
619
  }
604
620
  const { fieldSort, mode } = sort;
605
- this.items.update(items => {
621
+ this.items.update((items) => {
606
622
  items.sort((itemA, itemB) => {
607
623
  let value1 = mode === 'asc' ? itemA()[fieldSort] : itemB()[fieldSort];
608
624
  let value2 = mode === 'asc' ? itemB()[fieldSort] : itemA()[fieldSort];
@@ -628,25 +644,29 @@ class LibsUiComponentsTableComponent {
628
644
  }
629
645
  this.functionControlSelectMoreItem?.reset();
630
646
  const perPage = Number(event.key).valueOf();
631
- const currentPage = Number(this.setPerPageSelectMoreItem(perPage)).valueOf();
647
+ const currentPerPage = Number(this.setPerPageSelectMoreItem(perPage)).valueOf();
632
648
  const isPagingNumber = this.configSelectMoreItem()?.pagingNumber;
633
- if (currentPage > perPage || this.items.length >= perPage) {
649
+ if (currentPerPage > perPage || this.items.length >= perPage) {
634
650
  if (!isPagingNumber) {
635
- this.setPerPageSelectMoreItem(currentPage);
651
+ this.setPerPageSelectMoreItem(currentPerPage);
636
652
  }
637
- this.keysSelected.set(this.items().slice(0, perPage).map(item => `${item()[this.fieldKey()]}`));
653
+ this.keysSelected.set(this.items()
654
+ .slice(0, perPage)
655
+ .map((item) => `${item()[this.fieldKey()]}`));
638
656
  return;
639
657
  }
640
658
  this.callApiByService(true, true);
641
659
  const sub = this.outLoadDataComplete.subscribe(() => {
642
660
  sub.unsubscribe();
643
661
  if (!isPagingNumber) {
644
- this.setPerPageSelectMoreItem(currentPage);
662
+ this.setPerPageSelectMoreItem(currentPerPage);
645
663
  }
646
- this.keysSelected.set(this.items().slice(0, perPage).map(item => `${item()[this.fieldKey()]}`));
664
+ this.keysSelected.set(this.items()
665
+ .slice(0, perPage)
666
+ .map((item) => `${item()[this.fieldKey()]}`));
647
667
  });
648
668
  this.outLoadDataError.subscribe(() => {
649
- this.setPerPageSelectMoreItem(currentPage);
669
+ this.setPerPageSelectMoreItem(currentPerPage);
650
670
  });
651
671
  }
652
672
  setPerPageSelectMoreItem(perPage) {
@@ -677,6 +697,7 @@ class LibsUiComponentsTableComponent {
677
697
  this.outLoading.emit(this.loading());
678
698
  }
679
699
  handlerButtonClick(type, buttonDropdownData, button) {
700
+ // buttonOrigin chỉ sử dụng khi dùng buttonActions có button-dropdown
680
701
  if (type === 'button') {
681
702
  return this.outClickButtonAction.emit({ item: this.itemOfIndexHover, button: button });
682
703
  }
@@ -684,8 +705,8 @@ class LibsUiComponentsTableComponent {
684
705
  }
685
706
  handlerBarButtonClick(button) {
686
707
  const items = [];
687
- this.keysSelected().forEach(key => {
688
- const item = this.items().find(item => `${item()[this.fieldKey()]}` === `${key}`);
708
+ this.keysSelected().forEach((key) => {
709
+ const item = this.items().find((item) => `${item()[this.fieldKey()]}` === `${key}`);
689
710
  if (item) {
690
711
  items.push(item);
691
712
  }
@@ -696,7 +717,7 @@ class LibsUiComponentsTableComponent {
696
717
  keys: this.keysSelected(),
697
718
  hiddenBarButtons: () => {
698
719
  return;
699
- }
720
+ },
700
721
  });
701
722
  }
702
723
  handlerButtonDropdownEvent(eventName) {
@@ -795,7 +816,7 @@ class LibsUiComponentsTableComponent {
795
816
  this.callApiByService(false);
796
817
  }
797
818
  handlerChangePage(page) {
798
- this.pagingStore.update(data => ({ ...(data || {}), page }));
819
+ this.pagingStore.update((data) => ({ ...(data || {}), page }));
799
820
  this.callApiByService(true);
800
821
  }
801
822
  resetScroll(scrollPositionLeft, scrollPositionTop) {
@@ -825,8 +846,10 @@ class LibsUiComponentsTableComponent {
825
846
  }
826
847
  async checkScroll() {
827
848
  const hasScroll = this.hasScroll();
828
- return new Promise(resolve => {
829
- timer(500).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
849
+ return new Promise((resolve) => {
850
+ timer(500)
851
+ .pipe(takeUntilDestroyed(this.destroyRef))
852
+ .subscribe(() => {
830
853
  if (this.BodyElement) {
831
854
  this.hasScroll.set(this.BodyElement.scrollHeight > this.BodyElement.offsetHeight);
832
855
  }
@@ -847,19 +870,33 @@ class LibsUiComponentsTableComponent {
847
870
  clearTimeout(this.timeoutLeaveItem());
848
871
  }
849
872
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
850
- 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 }, classHeaderContainerInclude: { classPropertyName: "classHeaderContainerInclude", publicName: "classHeaderContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classHeaderLeftInclude: { classPropertyName: "classHeaderLeftInclude", publicName: "classHeaderLeftInclude", isSignal: true, isRequired: false, transformFunction: null }, classBodyInclude: { classPropertyName: "classBodyInclude", publicName: "classBodyInclude", isSignal: true, isRequired: false, transformFunction: null }, classFooterInclude: { classPropertyName: "classFooterInclude", publicName: "classFooterInclude", isSignal: true, isRequired: false, transformFunction: null }, classTableContainerInclude: { classPropertyName: "classTableContainerInclude", publicName: "classTableContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classBarInclude: { classPropertyName: "classBarInclude", publicName: "classBarInclude", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, defaultKeysSelected: { classPropertyName: "defaultKeysSelected", publicName: "defaultKeysSelected", isSignal: true, isRequired: false, transformFunction: null }, labelBarNoSelectItem: { classPropertyName: "labelBarNoSelectItem", publicName: "labelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, labelBarButtons: { classPropertyName: "labelBarButtons", publicName: "labelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarButtons: { classPropertyName: "classLabelBarButtons", publicName: "classLabelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, barButtons: { classPropertyName: "barButtons", publicName: "barButtons", isSignal: true, isRequired: false, transformFunction: null }, sortLocal: { classPropertyName: "sortLocal", publicName: "sortLocal", isSignal: true, isRequired: false, transformFunction: null }, filterOrSortLocal: { classPropertyName: "filterOrSortLocal", publicName: "filterOrSortLocal", isSignal: true, isRequired: false, transformFunction: null }, httpRequestData: { classPropertyName: "httpRequestData", publicName: "httpRequestData", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDataFooter: { classPropertyName: "httpRequestDataFooter", publicName: "httpRequestDataFooter", isSignal: true, isRequired: false, transformFunction: null }, newData: { classPropertyName: "newData", publicName: "newData", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, ignoreBar: { classPropertyName: "ignoreBar", publicName: "ignoreBar", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarNoSelectItem: { classPropertyName: "classLabelBarNoSelectItem", publicName: "classLabelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassBgHeader: { classPropertyName: "ignoreClassBgHeader", publicName: "ignoreClassBgHeader", isSignal: true, isRequired: false, transformFunction: null }, noDataConfig: { classPropertyName: "noDataConfig", publicName: "noDataConfig", isSignal: true, isRequired: false, transformFunction: null }, showScrollTablePinnedIfNoData: { classPropertyName: "showScrollTablePinnedIfNoData", publicName: "showScrollTablePinnedIfNoData", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItemLast: { classPropertyName: "ignoreBorderItemLast", publicName: "ignoreBorderItemLast", isSignal: true, isRequired: false, transformFunction: null }, isHiddenHeaderWhenNodata: { classPropertyName: "isHiddenHeaderWhenNodata", publicName: "isHiddenHeaderWhenNodata", isSignal: true, isRequired: false, transformFunction: null }, maxItemSelected: { classPropertyName: "maxItemSelected", publicName: "maxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, configSelectMoreItem: { classPropertyName: "configSelectMoreItem", publicName: "configSelectMoreItem", isSignal: true, isRequired: false, transformFunction: null }, onlyShowNoResult: { classPropertyName: "onlyShowNoResult", publicName: "onlyShowNoResult", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItem: { classPropertyName: "ignoreBorderItem", publicName: "ignoreBorderItem", isSignal: true, isRequired: false, transformFunction: null }, activityLoadData: { classPropertyName: "activityLoadData", publicName: "activityLoadData", isSignal: true, isRequired: false, transformFunction: null }, paginationSetting: { classPropertyName: "paginationSetting", publicName: "paginationSetting", isSignal: true, isRequired: false, transformFunction: null }, templateNoData: { classPropertyName: "templateNoData", publicName: "templateNoData", isSignal: true, isRequired: false, transformFunction: null }, templateNoResult: { classPropertyName: "templateNoResult", publicName: "templateNoResult", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outLoadMore: "outLoadMore", outScrollIsGone: "outScrollIsGone", outLoading: "outLoading", outClickButtonAction: "outClickButtonAction", outSort: "outSort", outClickBarButton: "outClickBarButton", outHoverButtonAction: "outHoverButtonAction", outKeysSelected: "outKeysSelected", outFunctionsControl: "outFunctionsControl", outLoadDataComplete: "outLoadDataComplete", outTotalItem: "outTotalItem", outLoadDataError: "outLoadDataError" }, viewQueries: [{ propertyName: "headerElementRef", first: true, predicate: ["headerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerElementRef", first: true, predicate: ["footerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerLeftElementRef", first: true, predicate: ["footerLeftElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyElementRef", first: true, predicate: ["bodyElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyComponentRef", first: true, predicate: ["bodyComponentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class='flex flex-col w-full h-full'>\n @if (!ignoreBar()) {\n <div\n class=\"flex items-center relative z-[1] bottom-0 left-0 w-full bg-white libs-ui-table-shadow-bottom {{ classBarInclude() }}\"\n [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n (mouseenter)=\"resetIndexHover($event)\">\n <ng-content select='div.libs-ui-table-bar-left'></ng-content>\n @if (!keysSelected().length && labelBarNoSelectItem()) {\n <div 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)=\"handlerMouseLeaveContainer($event)\">\n <div class=\"relative w-full shrink-0\"\n [style.height.px]=\"headerElementRef.offsetHeight\">\n <div #headerElementRef\n LibsUiComponentsScrollOverlayDirective\n [options]=\"{scrollbarWidth: 0}\"\n [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\"\n [class]=\"classHeaderContainer()\"\n (outScroll)=\"handlerScrollHeader($event)\"\n (mouseenter)=\"handlerMouseEnterHeader($event)\"\n (mouseleave)=\"handlerMouseLeaveHeader($event)\">\n @if (headerLeft().length) {\n <div [class]=\"classHeaderLeftContainer()\">\n @for (header of headerLeft();track header) {\n <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHeaderLeft:true}\" />\n }\n </div>\n }\n @if (headerRight().length) {\n @for (header of headerRight();track header) {\n <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHeaderLeft:false}\" />\n }\n }\n </div>\n </div>\n @if (showFooter() && itemFooter() && customPositionFooter() === 'top') {\n <ng-container *ngTemplateOutlet='templateFooterRef' />\n }\n <div class=\"relative flex flex-col w-full h-full overflow-x-hidden bg-white {{ classBodyInclude() || '' }}\">\n <div #bodyElementRef\n class=\"flex h-full w-full relative\"\n LibsUiComponentsScrollOverlayDirective\n (outScroll)=\"handlerScrollBody($event)\"\n (outScrollBottom)=\"handlerScrollBottom($event)\">\n @if (items().length) {\n <virtual-scroller #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\n 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|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})\"\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|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})\"\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 } @else if (!loading()) {\n <div class=\"sticky left-0 top-0 z-[1] h-full w-full\">\n <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n </div>\n @if (showScrollTablePinnedIfNoData()) {\n <div class=\"absolute h-[1px] bg-transparent top-0 left-0 z-[1]\"\n [style.width.px]=\"headerElementRef.scrollWidth\"></div>\n }\n }\n </div>\n\n @if (showFooter() && itemFooter() && customPositionFooter() === 'bottom') {\n <ng-container *ngTemplateOutlet='templateFooterRef' />\n }\n\n @if (loading()) {\n <div class=\"absolute w-full h-full z-[2] flex items-center content-center\">\n <libs_ui-components-spinner />\n </div>\n }\n </div>\n\n @if (activityLoadData() === 'click-pagination') {\n <div class=\"flex w-full mt-[12px]\">\n <libs_ui-components-pagination\n [modeDisplayTotalPageAndGotoPage]=\"paginationSetting()?.modeDisplayTotalPageAndGotoPage || 'bottom'\"\n [classDisplayTotalPageAndGotoPage]=\"paginationSetting()?.classDisplayTotalPageAndGotoPage || ''\"\n [classIncludeItem]=\"paginationSetting()?.classIncludeItem || ''\"\n [classIncludeContainer]=\"paginationSetting()?.classIncludeContainer || '!items-end'\"\n [disable]=\"paginationSetting()?.disable || loading() || !items().length\"\n [numberPageDispaly]=\"paginationSetting()?.numberPageDispaly || 5\"\n [showTotalPage]=\"paginationSetting()?.showTotalPage || false\"\n [showInputGotoPage]=\"paginationSetting()?.showInputGotoPage || false\"\n [totalItems]=\"pagingStore()?.total_items || (pagingStore()?.total_pages || 0)*(pagingStore()?.per_page || 0)\"\n [perPage]=\"pagingStore()?.per_page || 0\"\n [currentPage]=\"pagingStore()?.page || 0\"\n (outPageSelect)=\"handlerChangePage($event)\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template #templateHeaderRef\n let-header='headerItem'\n let-isHeaderLeft='isHeaderLeft'>\n <div\n [class]=\"'relative flex '+ (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHeaderLeft && !header.ignoreBorderRight ? ' libs-ui-border-right-general ' : ' ')+ ' libs-ui-table-header-col '\"\n [class.flex-col]=\"header.rowsConfig\"\n [class.py-[8px]]='!header.ignorePyDefault'\n [ngStyle]=\"(header|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})\"\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 #itemHeaderRef 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|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})) : {}\"\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 @for (tooltip of header.tooltipsLeft; track tooltip) {\n <div class=\"mr-[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.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 @for (tooltip of header.tooltipsRight; track 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 justify-center libs-ui-font-h4r{{ config.classIncludeIndexOnRow || '' }}\">\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)=\"handlerMouseEnterFooter($event)\"\n (mouseleave)=\"handlerMouseLeaveFooter($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\n class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n [ngStyle]=\"(footer|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:footerLeft():footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n <libs_ui-components-table-templates [item]=\"itemFooter|LibsUiPipesConvertObjectToSignalPipe\"\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|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:footerLeft():footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n <libs_ui-components-table-templates [item]=\"itemFooter|LibsUiPipesConvertObjectToSignalPipe\"\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 (!keySearch() && templateNoData(); as templateNoData) {\n <ng-container *ngTemplateOutlet=\"templateNoData\" />\n } @if (keySearch() && templateNoResult(); as templateNoResult) {\n <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n }\n @if (!templateNoData() && !templateNoResult() && 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", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsButtonsSortArrowComponent, selector: "libs_ui-components-buttons-sort-arrow", inputs: ["size", "mode", "fieldSort", "disable", "ignorePopoverContent", "popoverContentAsc", "popoverContentDesc", "defaultMode", "zIndex"], outputs: ["modeChange", "outChange"] }, { kind: "component", type: LibsUiComponentsPaginationComponent, selector: "libs_ui-components-pagination", inputs: ["showTotalPage", "showInputGotoPage", "modeDisplayTotalPageAndGotoPage", "classDisplayTotalPageAndGotoPage", "classIncludeContainer", "classIncludeItem", "disable", "numberPageDispaly", "totalItems", "perPage", "currentPage"], outputs: ["currentPageChange", "outPageSelect"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiTableCalculatorColumnPipe, name: "LibsUiTableCalculatorColumnPipe" }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesCheckSelectedByKeyPipe, name: "LibsUiPipesCheckSelectedByKeyPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
873
+ 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 }, classHeaderContainerInclude: { classPropertyName: "classHeaderContainerInclude", publicName: "classHeaderContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classHeaderLeftInclude: { classPropertyName: "classHeaderLeftInclude", publicName: "classHeaderLeftInclude", isSignal: true, isRequired: false, transformFunction: null }, classBodyInclude: { classPropertyName: "classBodyInclude", publicName: "classBodyInclude", isSignal: true, isRequired: false, transformFunction: null }, classFooterInclude: { classPropertyName: "classFooterInclude", publicName: "classFooterInclude", isSignal: true, isRequired: false, transformFunction: null }, classTableContainerInclude: { classPropertyName: "classTableContainerInclude", publicName: "classTableContainerInclude", isSignal: true, isRequired: false, transformFunction: null }, classBarInclude: { classPropertyName: "classBarInclude", publicName: "classBarInclude", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, defaultKeysSelected: { classPropertyName: "defaultKeysSelected", publicName: "defaultKeysSelected", isSignal: true, isRequired: false, transformFunction: null }, labelBarNoSelectItem: { classPropertyName: "labelBarNoSelectItem", publicName: "labelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, labelBarButtons: { classPropertyName: "labelBarButtons", publicName: "labelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarButtons: { classPropertyName: "classLabelBarButtons", publicName: "classLabelBarButtons", isSignal: true, isRequired: false, transformFunction: null }, barButtons: { classPropertyName: "barButtons", publicName: "barButtons", isSignal: true, isRequired: false, transformFunction: null }, sortLocal: { classPropertyName: "sortLocal", publicName: "sortLocal", isSignal: true, isRequired: false, transformFunction: null }, filterOrSortLocal: { classPropertyName: "filterOrSortLocal", publicName: "filterOrSortLocal", isSignal: true, isRequired: false, transformFunction: null }, httpRequestData: { classPropertyName: "httpRequestData", publicName: "httpRequestData", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDataFooter: { classPropertyName: "httpRequestDataFooter", publicName: "httpRequestDataFooter", isSignal: true, isRequired: false, transformFunction: null }, newData: { classPropertyName: "newData", publicName: "newData", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, ignoreBar: { classPropertyName: "ignoreBar", publicName: "ignoreBar", isSignal: true, isRequired: false, transformFunction: null }, classLabelBarNoSelectItem: { classPropertyName: "classLabelBarNoSelectItem", publicName: "classLabelBarNoSelectItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassBgHeader: { classPropertyName: "ignoreClassBgHeader", publicName: "ignoreClassBgHeader", isSignal: true, isRequired: false, transformFunction: null }, noDataConfig: { classPropertyName: "noDataConfig", publicName: "noDataConfig", isSignal: true, isRequired: false, transformFunction: null }, showScrollTablePinnedIfNoData: { classPropertyName: "showScrollTablePinnedIfNoData", publicName: "showScrollTablePinnedIfNoData", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItemLast: { classPropertyName: "ignoreBorderItemLast", publicName: "ignoreBorderItemLast", isSignal: true, isRequired: false, transformFunction: null }, isHiddenHeaderWhenNodata: { classPropertyName: "isHiddenHeaderWhenNodata", publicName: "isHiddenHeaderWhenNodata", isSignal: true, isRequired: false, transformFunction: null }, maxItemSelected: { classPropertyName: "maxItemSelected", publicName: "maxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, configSelectMoreItem: { classPropertyName: "configSelectMoreItem", publicName: "configSelectMoreItem", isSignal: true, isRequired: false, transformFunction: null }, onlyShowNoResult: { classPropertyName: "onlyShowNoResult", publicName: "onlyShowNoResult", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderItem: { classPropertyName: "ignoreBorderItem", publicName: "ignoreBorderItem", isSignal: true, isRequired: false, transformFunction: null }, activityLoadData: { classPropertyName: "activityLoadData", publicName: "activityLoadData", isSignal: true, isRequired: false, transformFunction: null }, paginationSetting: { classPropertyName: "paginationSetting", publicName: "paginationSetting", isSignal: true, isRequired: false, transformFunction: null }, templateNoData: { classPropertyName: "templateNoData", publicName: "templateNoData", isSignal: true, isRequired: false, transformFunction: null }, templateNoResult: { classPropertyName: "templateNoResult", publicName: "templateNoResult", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outLoadMore: "outLoadMore", outScrollIsGone: "outScrollIsGone", outLoading: "outLoading", outClickButtonAction: "outClickButtonAction", outSort: "outSort", outClickBarButton: "outClickBarButton", outHoverButtonAction: "outHoverButtonAction", outKeysSelected: "outKeysSelected", outFunctionsControl: "outFunctionsControl", outLoadDataComplete: "outLoadDataComplete", outTotalItem: "outTotalItem", outLoadDataError: "outLoadDataError" }, viewQueries: [{ propertyName: "headerElementRef", first: true, predicate: ["headerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerElementRef", first: true, predicate: ["footerElementRef"], descendants: true, isSignal: true }, { propertyName: "footerLeftElementRef", first: true, predicate: ["footerLeftElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyElementRef", first: true, predicate: ["bodyElementRef"], descendants: true, isSignal: true }, { propertyName: "bodyComponentRef", first: true, predicate: ["bodyComponentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n @if (!ignoreBar()) {\n <div\n class=\"flex items-center relative z-[1] bottom-0 left-0 w-full bg-white libs-ui-table-shadow-bottom {{ classBarInclude() }}\"\n [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n (mouseenter)=\"resetIndexHover($event)\">\n <ng-content select=\"div.libs-ui-table-bar-left\"></ng-content>\n @if (!keysSelected().length && labelBarNoSelectItem()) {\n <div\n class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n [innerHtml]=\"labelBarNoSelectItem() | translate: { value: totalItemDisplay() }\"></div>\n }\n @if (keysSelected().length) {\n <div class=\"flex items-center pl-[12px]\">\n <div class=\"flex items-center h-full mt-[-2px]\">\n <libs_ui-components-checkbox-single\n [checked]=\"true\"\n [disable]=\"loading() || disableCheckbox()\"\n (outChange)=\"handlerChangeAllChecked()\" />\n </div>\n <div class=\"libs-ui-font-h5m text-[#071631] mr-[8px] {{ classLabelBarButtons() }}\">\n {{ labelBarButtons() | translate: { value: keysSelected().length } }}\n </div>\n @if (configSelectMoreItem()) {\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [popoverCustomConfig]=\"{\n widthByParent: false,\n ignoreArrow: true,\n maxHeight: 2048,\n classInclude: '!w-[121px]',\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n [listConfig]=\"listConfigMoreItem()\"\n [listHiddenInputSearch]=\"true\"\n [listMaxItemShow]=\"5\"\n class=\"!w-[16px] h-[16px] mr-[8px]\"\n (outSelectKey)=\"handlerSelectedMoreItem($event)\"\n (outFunctionsControl)=\"handlerFunctionControlMoreSelectItem($event)\">\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n [classInclude]=\"'!p-0 m-0'\"\n [classIconLeft]=\"'before:!text-[16px] libs-ui-icon-move-right rotate-90 mr-[6px]'\"\n [popover]=\"{ config: { content: 'i18n_more_select' } }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-dropdown>\n }\n <div class=\"h-[16px] libs-ui-border-left-general ml-[16px]\"></div>\n @if (barButtons()?.length) {\n @for (button of barButtons(); track button) {\n <libs_ui-components-buttons-button\n [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\n #tableContainerElementRef\n class=\"libs-ui-table flex flex-col w-full h-full relative {{ classTableContainerInclude() }}\"\n [class.px-[16px]]=\"!ignoreBar()\"\n (mouseleave)=\"handlerMouseLeaveContainer($event)\">\n <div\n class=\"relative w-full shrink-0\"\n [style.height.px]=\"headerElementRef.offsetHeight\">\n <div\n #headerElementRef\n LibsUiComponentsScrollOverlayDirective\n [options]=\"{ scrollbarWidth: 0 }\"\n [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\"\n [class]=\"classHeaderContainer()\"\n (outScroll)=\"handlerScrollHeader($event)\"\n (mouseenter)=\"handlerMouseEnterHeader($event)\"\n (mouseleave)=\"handlerMouseLeaveHeader($event)\">\n @if (headerLeft().length) {\n <div [class]=\"classHeaderLeftContainer()\">\n @for (header of headerLeft(); track header) {\n <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: true }\" />\n }\n </div>\n }\n @if (headerRight().length) {\n @for (header of headerRight(); track header) {\n <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: false }\" />\n }\n }\n </div>\n </div>\n @if (showFooter() && itemFooter() && customPositionFooter() === 'top') {\n <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n }\n <div class=\"relative flex flex-col w-full h-full overflow-x-hidden bg-white {{ classBodyInclude() || '' }}\">\n <div\n #bodyElementRef\n class=\"flex h-full w-full relative\"\n LibsUiComponentsScrollOverlayDirective\n (outScroll)=\"handlerScrollBody($event)\"\n (outScrollBottom)=\"handlerScrollBottom($event)\">\n @if (items().length) {\n <virtual-scroller\n #bodyComponentRef\n [items]=\"items()\"\n [enableUnequalChildrenSizes]=\"enableUnequalChildrenSizes()\"\n class=\"h-full\"\n [style.width.px]=\"headerElementRef.scrollWidth > (bodyElementRef ? bodyElementRef.scrollWidth : 0) ? headerElementRef.scrollWidth : undefined\"\n [parentScroll]=\"bodyElementRef\"\n [bufferAmount]=\"bufferAmount()\">\n @for (data of bodyComponentRef.viewPortItems; track data()) {\n <div\n #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]=\"\n data().specificHightLight || ($last && ignoreBorderItemLast())\n ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px'\n : ignoreBorderItem()\n ? ''\n : isDashBorder()\n ? 'libs-ui-border-bottom-dashed-general'\n : 'libs-ui-border-bottom-general'\n \"\n [style.width.px]=\"headerElementRef.scrollWidth\"\n [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !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\n 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\n 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 | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : headerLeft() : headerRight()) || (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\"\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\n class=\"relative flex px-[12px] py-[8px]\"\n [ngStyle]=\"(header | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : headerLeft() : headerRight()) || (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\"\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\n [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 } @else if (!loading()) {\n <div class=\"sticky left-0 top-0 z-[1] h-full w-full\">\n <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n </div>\n @if (showScrollTablePinnedIfNoData()) {\n <div\n class=\"absolute h-[1px] bg-transparent top-0 left-0 z-[1]\"\n [style.width.px]=\"headerElementRef.scrollWidth\"></div>\n }\n }\n </div>\n\n @if (showFooter() && itemFooter() && customPositionFooter() === 'bottom') {\n <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n }\n\n @if (loading()) {\n <div class=\"absolute w-full h-full z-[2] flex items-center content-center\">\n <libs_ui-components-spinner />\n </div>\n }\n </div>\n\n @if (activityLoadData() === 'click-pagination') {\n <div class=\"flex w-full mt-[12px]\">\n <libs_ui-components-pagination\n [modeDisplayTotalPageAndGotoPage]=\"paginationSetting()?.modeDisplayTotalPageAndGotoPage || 'bottom'\"\n [classDisplayTotalPageAndGotoPage]=\"paginationSetting()?.classDisplayTotalPageAndGotoPage || ''\"\n [classIncludeItem]=\"paginationSetting()?.classIncludeItem || ''\"\n [classIncludeContainer]=\"paginationSetting()?.classIncludeContainer || '!items-end'\"\n [disable]=\"paginationSetting()?.disable || loading() || !items().length\"\n [numberPageDispaly]=\"paginationSetting()?.numberPageDispaly || 5\"\n [showTotalPage]=\"paginationSetting()?.showTotalPage || false\"\n [showInputGotoPage]=\"paginationSetting()?.showInputGotoPage || false\"\n [totalItems]=\"pagingStore()?.total_items || (pagingStore()?.total_pages || 0) * (pagingStore()?.per_page || 0)\"\n [perPage]=\"pagingStore()?.per_page || 0\"\n [currentPage]=\"pagingStore()?.page || 0\"\n (outPageSelect)=\"handlerChangePage($event)\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template\n #templateHeaderRef\n let-header=\"headerItem\"\n let-isHeaderLeft=\"isHeaderLeft\">\n <div\n [class]=\"'relative flex ' + (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHeaderLeft && !header.ignoreBorderRight ? ' libs-ui-border-right-general ' : ' ') + ' libs-ui-table-header-col '\"\n [class.flex-col]=\"header.rowsConfig\"\n [class.py-[8px]]=\"!header.ignorePyDefault\"\n [ngStyle]=\"(header | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : headerLeft() : headerRight()) || (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\"\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\n #templateHeaderContentRef\n let-header=\"headerItem\"\n let-isColRender=\"isColRender\">\n <div\n #itemHeaderRef\n class=\"flex libs-ui-font-h6m min-h-[18px] text-[#6a7383] max-w-full\"\n [class.items-center]=\"header.contentHeaderAlignCenter ?? true\"\n [class.justify-end]=\"header.contentHeaderJustifyContentEnd\"\n [class.w-full]=\"header.isShowIndexOnRow\"\n [ngStyle]=\"isColRender ? (header | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : headerLeft() : headerRight()) || (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {}) : {}\"\n [ngClass]=\"isColRender ? header.ngClass || {} : {}\">\n @if (header.hasCheckbox) {\n @if (header.hasCheckboxAll) {\n <div\n class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n [class.items-center]=\"header.checkboxAlignCenter\">\n <libs_ui-components-checkbox-single\n [key]=\"'all'\"\n [stillOtherOptions]=\"!!keysSelected().length && keysSelected().length !== items().length\"\n [checked]=\"!!keysSelected().length && keysSelected().length === items().length\"\n [disable]=\"loading()\"\n [classInclude]=\"header.checkboxClassInclude\"\n (outChange)=\"handlerChangeCheckedAllItems($event)\" />\n </div>\n } @else {\n <div class=\"flex h-full ml-[24px] {{ header.checkboxClassInclude }}\"></div>\n }\n }\n @for (tooltip of header.tooltipsLeft; track tooltip) {\n <div class=\"mr-[4px]\">\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: tooltip.dataView || ' ' | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\n }\n \"\n [innerHTML]=\"tooltip.dataView\" />\n </div>\n }\n\n @if (header.isShowIndexOnRow) {\n <div class=\"flex w-full h-full items-center justify-center {{ header.classIncludeIndexOnRow || '' }}\">\n {{ header.label ?? '#' }}\n </div>\n } @else {\n @if (header.label | LibsUiPipesCallFunctionInTemplatePipe: header.parseValue : header | async | translate; as labelHeaderColumn) {\n <libs_ui-components-popover\n [type]=\"header?.labelConfig?.type || 'text'\"\n [mode]=\"header?.labelConfig?.mode || 'hover'\"\n [classInclude]=\"header?.labelConfig?.classInclude || ''\"\n [ignoreShowPopover]=\"header?.labelConfig?.ignoreShowTooltip || false\"\n [config]=\"header.labelConfig?.config || { content: labelHeaderColumn }\"\n [innerHTML]=\"labelHeaderColumn\" />\n }\n }\n\n @for (tooltip of header.tooltipsRight; track tooltip) {\n <div class=\"ml-[4px]\">\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: tooltip.dataView || ' ' | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\n }\n \"\n [innerHTML]=\"tooltip.dataView\" />\n </div>\n }\n\n @if (header.hasSort && header.orderby) {\n <div class=\"ml-[4px]\">\n <libs_ui-components-buttons-sort-arrow\n [disable]=\"loading() || !items().length\"\n [fieldSort]=\"header.orderby\"\n [ignorePopoverContent]=\"header.sortIgnoreTooltipContent ?? true\"\n [popoverContentAsc]=\"header.sortTooltipContentAsc\"\n [popoverContentDesc]=\"header.sortTooltipContentDesc\"\n [defaultMode]=\"header.defaultMode\"\n [zIndex]=\"header.zIndexTooltipSort\"\n (outChange)=\"handlerChangeSort($event)\" />\n </div>\n }\n </div>\n @if (header.labelDescription) {\n <div class=\"flex\">\n <libs_ui-components-popover\n [type]=\"'text'\"\n [classInclude]=\"header.labelDescription.classInclude || ''\"\n [config]=\"{ content: header.labelDescription.content | translate }\"\n [innerHTML]=\"header.labelDescription.content | translate\" />\n </div>\n }\n</ng-template>\n\n<ng-template\n #templateBodyRef\n let-header=\"header\"\n let-data=\"data\">\n <div class=\"flex w-full h-full\">\n @if (header.hasCheckbox) {\n <div\n class=\"flex h-full\"\n [class.invisible]=\"header.checkConditionCheckBoxHidden && (data() | LibsUiPipesCallFunctionInTemplatePipe: header.checkConditionCheckBoxHidden : data() | async)\"\n [class.items-center]=\"header.checkboxAlignCenter\">\n <libs_ui-components-checkbox-single\n [key]=\"data()[fieldKey()]\"\n [classInclude]=\"header.checkboxClassInclude\"\n [checked]=\"data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length\"\n [disable]=\"loading() || disableCheckbox() || !!(maxItemSelected() && !(data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length) && keysSelected().length >= maxItemSelected())\"\n (outChange)=\"handlerChangeItemChecked($event, data())\" />\n </div>\n }\n\n @if (header.isShowIndexOnRow; as config) {\n <div class=\"w-full flex items-center justify-center libs-ui-font-h4r{{ config.classIncludeIndexOnRow || '' }}\">\n <div\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{}\"\n [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe: getIndexRow | async\"></div>\n </div>\n }\n\n @if (header.colTemplateConfig) {\n <libs_ui-components-table-templates\n [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\n #footerElementRef\n class=\"flex w-full bg-[#f8f9fa] overflow-x-hidden z-[1] {{ ignoreBorderFooter() ? '' : customPositionFooter() === 'top' ? 'libs-ui-border-bottom-general' : 'libs-ui-table-shadow-top libs-ui-border-top-general' }} min-h-[35px]\"\n (mouseenter)=\"handlerMouseEnterFooter($event)\"\n (mouseleave)=\"handlerMouseLeaveFooter($event)\">\n @if (footerLeft()) {\n <div\n #footerLeftElementRef\n class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n @for (footer of footerLeft(); track footer) {\n <div\n class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '' : 'libs-ui-border-right-general' }}\"\n [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\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\n class=\"flex items-center px-[12px] py-[8px]\"\n [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n }\n </div>\n }\n }\n </div>\n }\n</ng-template>\n\n<ng-template #templateNodataRef>\n @if (!keySearch() && templateNoData(); as templateNoData) {\n <ng-container *ngTemplateOutlet=\"templateNoData\" />\n }\n @if (keySearch() && templateNoResult(); as templateNoResult) {\n <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n }\n @if (!templateNoData() && !templateNoResult() && noDataConfig(); as config) {\n <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n <div\n 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\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"config.ngStyle || {}\"\n [ngClass]=\"config.ngClass || {}\"\n [innerHtml]=\"config.textNoData | translate\"></div>\n }\n @if (keySearch() || onlyShowNoResult()) {\n <ng-container *ngComponentOutlet=\"'no-result' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n <div\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"config.ngStyle || {}\"\n [ngClass]=\"config.ngClass || {}\"\n [innerHtml]=\"config.textSearchNoData | translate\"></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", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsButtonsSortArrowComponent, selector: "libs_ui-components-buttons-sort-arrow", inputs: ["size", "mode", "fieldSort", "disable", "ignorePopoverContent", "popoverContentAsc", "popoverContentDesc", "defaultMode", "zIndex"], outputs: ["modeChange", "outChange"] }, { kind: "component", type: LibsUiComponentsPaginationComponent, selector: "libs_ui-components-pagination", inputs: ["showTotalPage", "showInputGotoPage", "modeDisplayTotalPageAndGotoPage", "classDisplayTotalPageAndGotoPage", "classIncludeContainer", "classIncludeItem", "disable", "numberPageDispaly", "totalItems", "perPage", "currentPage"], outputs: ["currentPageChange", "outPageSelect"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiTableCalculatorColumnPipe, name: "LibsUiTableCalculatorColumnPipe" }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesCheckSelectedByKeyPipe, name: "LibsUiPipesCheckSelectedByKeyPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
851
874
  }
852
875
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTableComponent, decorators: [{
853
876
  type: Component,
854
877
  args: [{ selector: 'libs_ui-components-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
855
- NgClass, NgStyle, AsyncPipe, NgTemplateOutlet, NgComponentOutlet, LibsUiComponentsTableTemplatesComponent,
856
- TranslateModule, VirtualScrollerModule, LibsUiComponentsButtonsButtonComponent, LibsUiPipesConvertObjectToSignalPipe,
857
- LibsUiComponentsDropdownComponent, LibsUiComponentsButtonsSortArrowComponent, LibsUiComponentsPaginationComponent,
858
- LibsUiComponentsCheckboxSingleComponent, LibsUiTableCalculatorColumnPipe,
859
- LibsUiComponentsSpinnerComponent, LibsUiComponentsPopoverComponent,
860
- LibsUiComponentsScrollOverlayDirective, LibsUiIconsGetIconComponentPipe,
861
- LibsUiPipesCallFunctionInTemplatePipe, LibsUiPipesCheckSelectedByKeyPipe
862
- ], template: "<div class='flex flex-col w-full h-full'>\n @if (!ignoreBar()) {\n <div\n class=\"flex items-center relative z-[1] bottom-0 left-0 w-full bg-white libs-ui-table-shadow-bottom {{ classBarInclude() }}\"\n [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n (mouseenter)=\"resetIndexHover($event)\">\n <ng-content select='div.libs-ui-table-bar-left'></ng-content>\n @if (!keysSelected().length && labelBarNoSelectItem()) {\n <div 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)=\"handlerMouseLeaveContainer($event)\">\n <div class=\"relative w-full shrink-0\"\n [style.height.px]=\"headerElementRef.offsetHeight\">\n <div #headerElementRef\n LibsUiComponentsScrollOverlayDirective\n [options]=\"{scrollbarWidth: 0}\"\n [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\"\n [class]=\"classHeaderContainer()\"\n (outScroll)=\"handlerScrollHeader($event)\"\n (mouseenter)=\"handlerMouseEnterHeader($event)\"\n (mouseleave)=\"handlerMouseLeaveHeader($event)\">\n @if (headerLeft().length) {\n <div [class]=\"classHeaderLeftContainer()\">\n @for (header of headerLeft();track header) {\n <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHeaderLeft:true}\" />\n }\n </div>\n }\n @if (headerRight().length) {\n @for (header of headerRight();track header) {\n <ng-container *ngTemplateOutlet=\"templateHeaderRef;context:{headerItem:header,isHeaderLeft:false}\" />\n }\n }\n </div>\n </div>\n @if (showFooter() && itemFooter() && customPositionFooter() === 'top') {\n <ng-container *ngTemplateOutlet='templateFooterRef' />\n }\n <div class=\"relative flex flex-col w-full h-full overflow-x-hidden bg-white {{ classBodyInclude() || '' }}\">\n <div #bodyElementRef\n class=\"flex h-full w-full relative\"\n LibsUiComponentsScrollOverlayDirective\n (outScroll)=\"handlerScrollBody($event)\"\n (outScrollBottom)=\"handlerScrollBottom($event)\">\n @if (items().length) {\n <virtual-scroller #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\n 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|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})\"\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|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})\"\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 } @else if (!loading()) {\n <div class=\"sticky left-0 top-0 z-[1] h-full w-full\">\n <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n </div>\n @if (showScrollTablePinnedIfNoData()) {\n <div class=\"absolute h-[1px] bg-transparent top-0 left-0 z-[1]\"\n [style.width.px]=\"headerElementRef.scrollWidth\"></div>\n }\n }\n </div>\n\n @if (showFooter() && itemFooter() && customPositionFooter() === 'bottom') {\n <ng-container *ngTemplateOutlet='templateFooterRef' />\n }\n\n @if (loading()) {\n <div class=\"absolute w-full h-full z-[2] flex items-center content-center\">\n <libs_ui-components-spinner />\n </div>\n }\n </div>\n\n @if (activityLoadData() === 'click-pagination') {\n <div class=\"flex w-full mt-[12px]\">\n <libs_ui-components-pagination\n [modeDisplayTotalPageAndGotoPage]=\"paginationSetting()?.modeDisplayTotalPageAndGotoPage || 'bottom'\"\n [classDisplayTotalPageAndGotoPage]=\"paginationSetting()?.classDisplayTotalPageAndGotoPage || ''\"\n [classIncludeItem]=\"paginationSetting()?.classIncludeItem || ''\"\n [classIncludeContainer]=\"paginationSetting()?.classIncludeContainer || '!items-end'\"\n [disable]=\"paginationSetting()?.disable || loading() || !items().length\"\n [numberPageDispaly]=\"paginationSetting()?.numberPageDispaly || 5\"\n [showTotalPage]=\"paginationSetting()?.showTotalPage || false\"\n [showInputGotoPage]=\"paginationSetting()?.showInputGotoPage || false\"\n [totalItems]=\"pagingStore()?.total_items || (pagingStore()?.total_pages || 0)*(pagingStore()?.per_page || 0)\"\n [perPage]=\"pagingStore()?.per_page || 0\"\n [currentPage]=\"pagingStore()?.page || 0\"\n (outPageSelect)=\"handlerChangePage($event)\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template #templateHeaderRef\n let-header='headerItem'\n let-isHeaderLeft='isHeaderLeft'>\n <div\n [class]=\"'relative flex '+ (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHeaderLeft && !header.ignoreBorderRight ? ' libs-ui-border-right-general ' : ' ')+ ' libs-ui-table-header-col '\"\n [class.flex-col]=\"header.rowsConfig\"\n [class.py-[8px]]='!header.ignorePyDefault'\n [ngStyle]=\"(header|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})\"\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 #itemHeaderRef 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|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:headerLeft():headerRight()) || (header.isShowIndexOnRow ? {width:'50px','flex-shirk':'0',padding:'8px'} : {})) : {}\"\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 @for (tooltip of header.tooltipsLeft; track tooltip) {\n <div class=\"mr-[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.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 @for (tooltip of header.tooltipsRight; track 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 justify-center libs-ui-font-h4r{{ config.classIncludeIndexOnRow || '' }}\">\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)=\"handlerMouseEnterFooter($event)\"\n (mouseleave)=\"handlerMouseLeaveFooter($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\n class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '': 'libs-ui-border-right-general' }}\"\n [ngStyle]=\"(footer|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:footerLeft():footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n <libs_ui-components-table-templates [item]=\"itemFooter|LibsUiPipesConvertObjectToSignalPipe\"\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|LibsUiTableCalculatorColumnPipe:headerElementRef.clientWidth:footerLeft():footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n <libs_ui-components-table-templates [item]=\"itemFooter|LibsUiPipesConvertObjectToSignalPipe\"\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 (!keySearch() && templateNoData(); as templateNoData) {\n <ng-container *ngTemplateOutlet=\"templateNoData\" />\n } @if (keySearch() && templateNoResult(); as templateNoResult) {\n <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n }\n @if (!templateNoData() && !templateNoResult() && 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"] }]
878
+ NgClass,
879
+ NgStyle,
880
+ AsyncPipe,
881
+ NgTemplateOutlet,
882
+ NgComponentOutlet,
883
+ LibsUiComponentsTableTemplatesComponent,
884
+ TranslateModule,
885
+ VirtualScrollerModule,
886
+ LibsUiComponentsButtonsButtonComponent,
887
+ LibsUiPipesConvertObjectToSignalPipe,
888
+ LibsUiComponentsDropdownComponent,
889
+ LibsUiComponentsButtonsSortArrowComponent,
890
+ LibsUiComponentsPaginationComponent,
891
+ LibsUiComponentsCheckboxSingleComponent,
892
+ LibsUiTableCalculatorColumnPipe,
893
+ LibsUiComponentsSpinnerComponent,
894
+ LibsUiComponentsPopoverComponent,
895
+ LibsUiComponentsScrollOverlayDirective,
896
+ LibsUiIconsGetIconComponentPipe,
897
+ LibsUiPipesCallFunctionInTemplatePipe,
898
+ LibsUiPipesCheckSelectedByKeyPipe,
899
+ ], template: "<div class=\"flex flex-col w-full h-full\">\n @if (!ignoreBar()) {\n <div\n class=\"flex items-center relative z-[1] bottom-0 left-0 w-full bg-white libs-ui-table-shadow-bottom {{ classBarInclude() }}\"\n [class.px-[16px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n [class.py-[6px]]=\"keysSelected().length || labelBarNoSelectItem()\"\n (mouseenter)=\"resetIndexHover($event)\">\n <ng-content select=\"div.libs-ui-table-bar-left\"></ng-content>\n @if (!keysSelected().length && labelBarNoSelectItem()) {\n <div\n class=\"{{ classLabelBarNoSelectItem() ?? 'px-[12px] py-[5px]' }}\"\n [innerHtml]=\"labelBarNoSelectItem() | translate: { value: totalItemDisplay() }\"></div>\n }\n @if (keysSelected().length) {\n <div class=\"flex items-center pl-[12px]\">\n <div class=\"flex items-center h-full mt-[-2px]\">\n <libs_ui-components-checkbox-single\n [checked]=\"true\"\n [disable]=\"loading() || disableCheckbox()\"\n (outChange)=\"handlerChangeAllChecked()\" />\n </div>\n <div class=\"libs-ui-font-h5m text-[#071631] mr-[8px] {{ classLabelBarButtons() }}\">\n {{ labelBarButtons() | translate: { value: keysSelected().length } }}\n </div>\n @if (configSelectMoreItem()) {\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [popoverCustomConfig]=\"{\n widthByParent: false,\n ignoreArrow: true,\n maxHeight: 2048,\n classInclude: '!w-[121px]',\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n [listConfig]=\"listConfigMoreItem()\"\n [listHiddenInputSearch]=\"true\"\n [listMaxItemShow]=\"5\"\n class=\"!w-[16px] h-[16px] mr-[8px]\"\n (outSelectKey)=\"handlerSelectedMoreItem($event)\"\n (outFunctionsControl)=\"handlerFunctionControlMoreSelectItem($event)\">\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n [classInclude]=\"'!p-0 m-0'\"\n [classIconLeft]=\"'before:!text-[16px] libs-ui-icon-move-right rotate-90 mr-[6px]'\"\n [popover]=\"{ config: { content: 'i18n_more_select' } }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-dropdown>\n }\n <div class=\"h-[16px] libs-ui-border-left-general ml-[16px]\"></div>\n @if (barButtons()?.length) {\n @for (button of barButtons(); track button) {\n <libs_ui-components-buttons-button\n [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\n #tableContainerElementRef\n class=\"libs-ui-table flex flex-col w-full h-full relative {{ classTableContainerInclude() }}\"\n [class.px-[16px]]=\"!ignoreBar()\"\n (mouseleave)=\"handlerMouseLeaveContainer($event)\">\n <div\n class=\"relative w-full shrink-0\"\n [style.height.px]=\"headerElementRef.offsetHeight\">\n <div\n #headerElementRef\n LibsUiComponentsScrollOverlayDirective\n [options]=\"{ scrollbarWidth: 0 }\"\n [class.libs-ui-border-bottom-dashed-general]=\"!hasItemHightLight() && isDashBorder()\"\n [class.libs-ui-border-bottom-general]=\"!hasItemHightLight() && !isDashBorder()\"\n [class.!hidden]=\"!items().length && isHiddenHeaderWhenNodata()\"\n [class]=\"classHeaderContainer()\"\n (outScroll)=\"handlerScrollHeader($event)\"\n (mouseenter)=\"handlerMouseEnterHeader($event)\"\n (mouseleave)=\"handlerMouseLeaveHeader($event)\">\n @if (headerLeft().length) {\n <div [class]=\"classHeaderLeftContainer()\">\n @for (header of headerLeft(); track header) {\n <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: true }\" />\n }\n </div>\n }\n @if (headerRight().length) {\n @for (header of headerRight(); track header) {\n <ng-container *ngTemplateOutlet=\"templateHeaderRef; context: { headerItem: header, isHeaderLeft: false }\" />\n }\n }\n </div>\n </div>\n @if (showFooter() && itemFooter() && customPositionFooter() === 'top') {\n <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n }\n <div class=\"relative flex flex-col w-full h-full overflow-x-hidden bg-white {{ classBodyInclude() || '' }}\">\n <div\n #bodyElementRef\n class=\"flex h-full w-full relative\"\n LibsUiComponentsScrollOverlayDirective\n (outScroll)=\"handlerScrollBody($event)\"\n (outScrollBottom)=\"handlerScrollBottom($event)\">\n @if (items().length) {\n <virtual-scroller\n #bodyComponentRef\n [items]=\"items()\"\n [enableUnequalChildrenSizes]=\"enableUnequalChildrenSizes()\"\n class=\"h-full\"\n [style.width.px]=\"headerElementRef.scrollWidth > (bodyElementRef ? bodyElementRef.scrollWidth : 0) ? headerElementRef.scrollWidth : undefined\"\n [parentScroll]=\"bodyElementRef\"\n [bufferAmount]=\"bufferAmount()\">\n @for (data of bodyComponentRef.viewPortItems; track data()) {\n <div\n #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]=\"\n data().specificHightLight || ($last && ignoreBorderItemLast())\n ? 'libs-ui-border-radius-bottom-left-4px libs-ui-border-radius-bottom-right-4px'\n : ignoreBorderItem()\n ? ''\n : isDashBorder()\n ? 'libs-ui-border-bottom-dashed-general'\n : 'libs-ui-border-bottom-general'\n \"\n [style.width.px]=\"headerElementRef.scrollWidth\"\n [class.bg-[#f8f9fa]]=\"itemOfIndexHover === data && !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\n 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\n 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 | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : headerLeft() : headerRight()) || (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\"\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\n class=\"relative flex px-[12px] py-[8px]\"\n [ngStyle]=\"(header | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : headerLeft() : headerRight()) || (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\"\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\n [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 } @else if (!loading()) {\n <div class=\"sticky left-0 top-0 z-[1] h-full w-full\">\n <ng-container *ngTemplateOutlet=\"templateNodataRef\" />\n </div>\n @if (showScrollTablePinnedIfNoData()) {\n <div\n class=\"absolute h-[1px] bg-transparent top-0 left-0 z-[1]\"\n [style.width.px]=\"headerElementRef.scrollWidth\"></div>\n }\n }\n </div>\n\n @if (showFooter() && itemFooter() && customPositionFooter() === 'bottom') {\n <ng-container *ngTemplateOutlet=\"templateFooterRef\" />\n }\n\n @if (loading()) {\n <div class=\"absolute w-full h-full z-[2] flex items-center content-center\">\n <libs_ui-components-spinner />\n </div>\n }\n </div>\n\n @if (activityLoadData() === 'click-pagination') {\n <div class=\"flex w-full mt-[12px]\">\n <libs_ui-components-pagination\n [modeDisplayTotalPageAndGotoPage]=\"paginationSetting()?.modeDisplayTotalPageAndGotoPage || 'bottom'\"\n [classDisplayTotalPageAndGotoPage]=\"paginationSetting()?.classDisplayTotalPageAndGotoPage || ''\"\n [classIncludeItem]=\"paginationSetting()?.classIncludeItem || ''\"\n [classIncludeContainer]=\"paginationSetting()?.classIncludeContainer || '!items-end'\"\n [disable]=\"paginationSetting()?.disable || loading() || !items().length\"\n [numberPageDispaly]=\"paginationSetting()?.numberPageDispaly || 5\"\n [showTotalPage]=\"paginationSetting()?.showTotalPage || false\"\n [showInputGotoPage]=\"paginationSetting()?.showInputGotoPage || false\"\n [totalItems]=\"pagingStore()?.total_items || (pagingStore()?.total_pages || 0) * (pagingStore()?.per_page || 0)\"\n [perPage]=\"pagingStore()?.per_page || 0\"\n [currentPage]=\"pagingStore()?.page || 0\"\n (outPageSelect)=\"handlerChangePage($event)\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template\n #templateHeaderRef\n let-header=\"headerItem\"\n let-isHeaderLeft=\"isHeaderLeft\">\n <div\n [class]=\"'relative flex ' + (header.paddingLeftRightHeaderContainer ?? ' px-[12px] ') + (isHeaderLeft && !header.ignoreBorderRight ? ' libs-ui-border-right-general ' : ' ') + ' libs-ui-table-header-col '\"\n [class.flex-col]=\"header.rowsConfig\"\n [class.py-[8px]]=\"!header.ignorePyDefault\"\n [ngStyle]=\"(header | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : headerLeft() : headerRight()) || (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {})\"\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\n #templateHeaderContentRef\n let-header=\"headerItem\"\n let-isColRender=\"isColRender\">\n <div\n #itemHeaderRef\n class=\"flex libs-ui-font-h6m min-h-[18px] text-[#6a7383] max-w-full\"\n [class.items-center]=\"header.contentHeaderAlignCenter ?? true\"\n [class.justify-end]=\"header.contentHeaderJustifyContentEnd\"\n [class.w-full]=\"header.isShowIndexOnRow\"\n [ngStyle]=\"isColRender ? (header | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : headerLeft() : headerRight()) || (header.isShowIndexOnRow ? { width: '50px', 'flex-shirk': '0', padding: '8px' } : {}) : {}\"\n [ngClass]=\"isColRender ? header.ngClass || {} : {}\">\n @if (header.hasCheckbox) {\n @if (header.hasCheckboxAll) {\n <div\n class=\"flex h-full {{ header.checkboxAllClassInclude || 'mr-[16px]' }}\"\n [class.items-center]=\"header.checkboxAlignCenter\">\n <libs_ui-components-checkbox-single\n [key]=\"'all'\"\n [stillOtherOptions]=\"!!keysSelected().length && keysSelected().length !== items().length\"\n [checked]=\"!!keysSelected().length && keysSelected().length === items().length\"\n [disable]=\"loading()\"\n [classInclude]=\"header.checkboxClassInclude\"\n (outChange)=\"handlerChangeCheckedAllItems($event)\" />\n </div>\n } @else {\n <div class=\"flex h-full ml-[24px] {{ header.checkboxClassInclude }}\"></div>\n }\n }\n @for (tooltip of header.tooltipsLeft; track tooltip) {\n <div class=\"mr-[4px]\">\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: tooltip.dataView || ' ' | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\n }\n \"\n [innerHTML]=\"tooltip.dataView\" />\n </div>\n }\n\n @if (header.isShowIndexOnRow) {\n <div class=\"flex w-full h-full items-center justify-center {{ header.classIncludeIndexOnRow || '' }}\">\n {{ header.label ?? '#' }}\n </div>\n } @else {\n @if (header.label | LibsUiPipesCallFunctionInTemplatePipe: header.parseValue : header | async | translate; as labelHeaderColumn) {\n <libs_ui-components-popover\n [type]=\"header?.labelConfig?.type || 'text'\"\n [mode]=\"header?.labelConfig?.mode || 'hover'\"\n [classInclude]=\"header?.labelConfig?.classInclude || ''\"\n [ignoreShowPopover]=\"header?.labelConfig?.ignoreShowTooltip || false\"\n [config]=\"header.labelConfig?.config || { content: labelHeaderColumn }\"\n [innerHTML]=\"labelHeaderColumn\" />\n }\n }\n\n @for (tooltip of header.tooltipsRight; track tooltip) {\n <div class=\"ml-[4px]\">\n <libs_ui-components-popover\n [type]=\"tooltip?.type || 'other'\"\n [mode]=\"tooltip?.mode || 'hover'\"\n [classInclude]=\"tooltip.classInclude || 'text-[#6a7383]'\"\n [ignoreShowPopover]=\"tooltip.ignoreShowTooltip || false\"\n [config]=\"\n tooltip.config || {\n content: tooltip.dataView || ' ' | translate,\n position: {\n mode: 'center',\n distance: 0,\n autoUpdatePosition: {\n endDistance: 12,\n startDistance: -12,\n },\n },\n }\n \"\n [innerHTML]=\"tooltip.dataView\" />\n </div>\n }\n\n @if (header.hasSort && header.orderby) {\n <div class=\"ml-[4px]\">\n <libs_ui-components-buttons-sort-arrow\n [disable]=\"loading() || !items().length\"\n [fieldSort]=\"header.orderby\"\n [ignorePopoverContent]=\"header.sortIgnoreTooltipContent ?? true\"\n [popoverContentAsc]=\"header.sortTooltipContentAsc\"\n [popoverContentDesc]=\"header.sortTooltipContentDesc\"\n [defaultMode]=\"header.defaultMode\"\n [zIndex]=\"header.zIndexTooltipSort\"\n (outChange)=\"handlerChangeSort($event)\" />\n </div>\n }\n </div>\n @if (header.labelDescription) {\n <div class=\"flex\">\n <libs_ui-components-popover\n [type]=\"'text'\"\n [classInclude]=\"header.labelDescription.classInclude || ''\"\n [config]=\"{ content: header.labelDescription.content | translate }\"\n [innerHTML]=\"header.labelDescription.content | translate\" />\n </div>\n }\n</ng-template>\n\n<ng-template\n #templateBodyRef\n let-header=\"header\"\n let-data=\"data\">\n <div class=\"flex w-full h-full\">\n @if (header.hasCheckbox) {\n <div\n class=\"flex h-full\"\n [class.invisible]=\"header.checkConditionCheckBoxHidden && (data() | LibsUiPipesCallFunctionInTemplatePipe: header.checkConditionCheckBoxHidden : data() | async)\"\n [class.items-center]=\"header.checkboxAlignCenter\">\n <libs_ui-components-checkbox-single\n [key]=\"data()[fieldKey()]\"\n [classInclude]=\"header.checkboxClassInclude\"\n [checked]=\"data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length\"\n [disable]=\"loading() || disableCheckbox() || !!(maxItemSelected() && !(data()[fieldKey()] | LibsUiPipesCheckSelectedByKeyPipe: keysSelected() : keysSelected().length) && keysSelected().length >= maxItemSelected())\"\n (outChange)=\"handlerChangeItemChecked($event, data())\" />\n </div>\n }\n\n @if (header.isShowIndexOnRow; as config) {\n <div class=\"w-full flex items-center justify-center libs-ui-font-h4r{{ config.classIncludeIndexOnRow || '' }}\">\n <div\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{}\"\n [innerHTML]=\"data | LibsUiPipesCallFunctionInTemplatePipe: getIndexRow | async\"></div>\n </div>\n }\n\n @if (header.colTemplateConfig) {\n <libs_ui-components-table-templates\n [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\n #footerElementRef\n class=\"flex w-full bg-[#f8f9fa] overflow-x-hidden z-[1] {{ ignoreBorderFooter() ? '' : customPositionFooter() === 'top' ? 'libs-ui-border-bottom-general' : 'libs-ui-table-shadow-top libs-ui-border-top-general' }} min-h-[35px]\"\n (mouseenter)=\"handlerMouseEnterFooter($event)\"\n (mouseleave)=\"handlerMouseLeaveFooter($event)\">\n @if (footerLeft()) {\n <div\n #footerLeftElementRef\n class=\"flex sticky top-0 left-0 z-[1] bg-[#f8f9fa]\">\n @for (footer of footerLeft(); track footer) {\n <div\n class=\"flex items-center px-[12px] py-[8px] {{ footer.ignoreBorderRight ? '' : 'libs-ui-border-right-general' }}\"\n [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\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\n class=\"flex items-center px-[12px] py-[8px]\"\n [ngStyle]=\"(footer | LibsUiTableCalculatorColumnPipe: headerElementRef.clientWidth : footerLeft() : footerRight()) || {}\"\n [ngClass]=\"footer.ngClass || {}\">\n @if (footer.colTemplateConfig && itemFooter()) {\n <libs_ui-components-table-templates\n [item]=\"itemFooter | LibsUiPipesConvertObjectToSignalPipe\"\n [templateCssWrapper]=\"footer.templateCssWrapper\"\n [configs]=\"footer.colTemplateConfig\" />\n }\n </div>\n }\n }\n </div>\n }\n</ng-template>\n\n<ng-template #templateNodataRef>\n @if (!keySearch() && templateNoData(); as templateNoData) {\n <ng-container *ngTemplateOutlet=\"templateNoData\" />\n }\n @if (keySearch() && templateNoResult(); as templateNoResult) {\n <ng-container *ngTemplateOutlet=\"templateNoResult\" />\n }\n @if (!templateNoData() && !templateNoResult() && noDataConfig(); as config) {\n <div class=\"flex items-center justify-center w-full h-full absolute left-0 top-0 z-[1]\">\n <div\n 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\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"config.ngStyle || {}\"\n [ngClass]=\"config.ngClass || {}\"\n [innerHtml]=\"config.textNoData | translate\"></div>\n }\n @if (keySearch() || onlyShowNoResult()) {\n <ng-container *ngComponentOutlet=\"'no-result' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: 64 }\" />\n <div\n class=\"libs-ui-table-no-data-config-text\"\n [ngStyle]=\"config.ngStyle || {}\"\n [ngClass]=\"config.ngClass || {}\"\n [innerHtml]=\"config.textSearchNoData | translate\"></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"] }]
863
900
  }], ctorParameters: () => [] });
864
901
 
865
902
  /* eslint-disable @typescript-eslint/no-explicit-any */