@libs-ui/components-list 0.2.357-13 → 0.2.357-15

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

@@ -191,7 +191,7 @@ class LibsUiComponentsListRowsComponent {
         this.outChangStageFlagMousePopover.emit(flag);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListRowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListRowsComponent, isStandalone: true, selector: "libs_ui-components-list-templates_rows", inputs: { configTemplate: { classPropertyName: "configTemplate", publicName: "configTemplate", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outChangStageFlagMousePopover: "outChangStageFlagMousePopover", outEvent: "outEvent" }, ngImport: i0, template: "@if (configTemplate() && configItemTextRows(); as configItemTextRows) {\n  <div class=\"flex flex-col w-full {{ configTemplate().classRows ?? '' }}\">\n    @for (row of configItemTextRows; track $index; let indexRow = $index) {\n      <div [class]=\"row().classRow\">\n        @if (row().getImage && (item() | LibsUiPipesCallFunctionInTemplatePipe: row().getImage : item() | async); as imgUrl) {\n          <img\n            [class]=\"item() | LibsUiPipesCallFunctionInTemplatePipe: row().getClassImage : item() | async\"\n            src=\"{{ imgUrl }}\"\n            alt=\"\"\n            (error)=\"handlerErrorImage($event, row().getImageError)\" />\n        }\n        @if (item()['fieldRowAvatarConfig' + indexRow]; as avatarConfig) {\n          <libs_ui-components-avatar\n            [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n            [classInclude]=\"avatarConfig.classInclude\"\n            [size]=\"avatarConfig.size || 32\"\n            [linkAvatar]=\"avatarConfig.linkAvatar\"\n            [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n            [idGenColor]=\"avatarConfig.idGenColor\"\n            [textAvatar]=\"avatarConfig.textAvatar\" />\n        }\n        @if (fieldKey() && item()['fieldLabelRow' + indexRow] | async; as labelRow) {\n          <libs_ui-components-popover\n            type=\"text\"\n            [config]=\"row().getPopoverConfig ? ('popover' | LibsUiPipesCallFunctionInTemplatePipe: row().getPopoverConfig : item() | async) : { zIndex: zIndex() + 1 }\"\n            [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || row().classGetValue || '' : row().classGetValue || ''\"\n            [innerHtml]=\"labelRow\"\n            (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n            (outEvent)=\"handlerSelectItem($event, item(), row().action)\" />\n        }\n\n        @if (fieldKey() && row().getComponentOutlet) {\n          <ng-container\n            *ngComponentOutlet=\"\n              'row:' + indexRow | LibsUiPipesCallFunctionInTemplatePipe: row().getComponentOutlet : item() | async;\n              inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: row().getDataComponentOutlet : item() : 'row:' + indexRow : { valueIsEmpty: { item: item() } } | async\n            \" />\n        }\n        @if (row().cols?.()?.length) {\n          <div\n            [class]=\"row().classCols || 'flex'\"\n            [style]=\"item()[item()['fieldRowStylesDynamicCols' + indexRow]]\">\n            @for (col of row().cols?.(); track $index; let colIndex = $index) {\n              @if (col().getImage && (item() | LibsUiPipesCallFunctionInTemplatePipe: col().getImage : item() | async); as imgUrl) {\n                <img\n                  [class]=\"item() | LibsUiPipesCallFunctionInTemplatePipe: col().getClassImage : item() | async\"\n                  src=\"{{ imgUrl }}\"\n                  alt=\"\"\n                  (error)=\"handlerErrorImage($event, col().getImageError)\" />\n              }\n              @if (item()['fieldColAvatarConfig' + indexRow + colIndex]; as avatarConfig) {\n                <libs_ui-components-avatar\n                  [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n                  [classInclude]=\"avatarConfig.classInclude\"\n                  [size]=\"avatarConfig.size || 32\"\n                  [linkAvatar]=\"avatarConfig.linkAvatar\"\n                  [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n                  [idGenColor]=\"avatarConfig.idGenColor\"\n                  [textAvatar]=\"avatarConfig.textAvatar\" />\n              }\n              @if (item()['fieldLabelCol' + indexRow + colIndex]; as labelColFunc) {\n                <libs_ui-components-popover\n                  type=\"text\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || item()['fieldColClass' + indexRow + colIndex] || '' : item()['fieldColClass' + indexRow + colIndex] || ''\"\n                  [innerHtml]=\"'fieldLabelCol' | LibsUiPipesCallFunctionInTemplatePipe: labelColFunc : item() | async\"\n                  [config]=\"{ zIndex: zIndex() + 1 }\"\n                  (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n                  (outEvent)=\"handlerSelectItem($event, item(), col().action)\" />\n              }\n              @if (item()['fieldColPopover' + indexRow + colIndex]; as popover) {\n                <libs_ui-components-popover\n                  [type]=\"popover.type ?? 'other'\"\n                  [config]=\"popover?.config | LibsUiPipesCloneObjectPipe: true : { zIndex: zIndex() + 1 }\"\n                  [classInclude]=\"item()['fieldColClass' + indexRow + colIndex]\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n                  (outEvent)=\"handlerSelectItem($event, item(), col().action)\">\n                  @let constHtmlDataView = popover.dataView || popoverIcon;\n                  <span\n                    [class]=\"popover.classInclude || ''\"\n                    [innerHtml]=\"constHtmlDataView | translate\"></span>\n                </libs_ui-components-popover>\n              }\n              @if (fieldKey() && col().getComponentOutlet) {\n                <ng-container\n                  *ngComponentOutlet=\"\n                    'row:' + indexRow + '-col:' + colIndex | LibsUiPipesCallFunctionInTemplatePipe: col().getComponentOutlet : item() | async;\n                    inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: col().getDataComponentOutlet : item() : 'row:' + indexRow + '-col:' + colIndex : { valueIsEmpty: { item: item() } } | async\n                  \" />\n              }\n              @if (item()['fieldColToggle' + indexRow + colIndex]; as toggle) {\n                <libs_ui-components-label\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [hasToggle]=\"toggle.hasToggle\"\n                  [toggleActive]=\"toggle.toggleActive\"\n                  [toggleDisable]=\"toggle.toggleDisable\"\n                  [popover]=\"toggle.popover\"\n                  [classInclude]=\"toggle.classInclude\"\n                  [labelLeft]=\"toggle.labelLeft\"\n                  [labelRight]=\"toggle.labelRight\"\n                  (outSwitchEvent)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldColButton' + indexRow + colIndex]; as button) {\n                <libs_ui-components-buttons-button\n                  [type]=\"button.type\"\n                  [classIconLeft]=\"button.classIconLeft\"\n                  [classIconRight]=\"button.classIconRight\"\n                  [classLabel]=\"button.classLabel\"\n                  [iconOnlyType]=\"button.iconOnlyType\"\n                  [popover]=\"button.popover\"\n                  [disable]=\"button.disable\"\n                  [ignorePointerEvent]=\"button.ignorePointerEvent\"\n                  [classInclude]=\"item()['fieldColClass' + indexRow + colIndex] ?? ' '\"\n                  [ignoreStopPropagationEvent]=\"false\"\n                  (outClick)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldBadge' + indexRow + colIndex]; as badge) {\n                <libs_ui-components-badge\n                  [mode]=\"badge.mode || 'x+'\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [count]=\"badge.count\"\n                  [maxCount]=\"badge.maxCount || 99\"\n                  [classCircle]=\"badge.classCircle || 'libs-ui-font-h4r'\" />\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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: "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: 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: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesCloneObjectPipe, name: "LibsUiPipesCloneObjectPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListRowsComponent, isStandalone: true, selector: "libs_ui-components-list-templates_rows", inputs: { configTemplate: { classPropertyName: "configTemplate", publicName: "configTemplate", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outChangStageFlagMousePopover: "outChangStageFlagMousePopover", outEvent: "outEvent" }, ngImport: i0, template: "@if (configTemplate() && configItemTextRows(); as configItemTextRows) {\n  <div class=\"flex flex-col w-full {{ configTemplate().classRows ?? '' }}\">\n    @for (row of configItemTextRows; track row(); let indexRow = $index) {\n      <div [class]=\"row().classRow\">\n        @if (row().getImage && (item() | LibsUiPipesCallFunctionInTemplatePipe: row().getImage : item() | async); as imgUrl) {\n          <img\n            [class]=\"item() | LibsUiPipesCallFunctionInTemplatePipe: row().getClassImage : item() | async\"\n            src=\"{{ imgUrl }}\"\n            alt=\"\"\n            (error)=\"handlerErrorImage($event, row().getImageError)\" />\n        }\n        @if (item()['fieldRowAvatarConfig' + indexRow]; as avatarConfig) {\n          <libs_ui-components-avatar\n            [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n            [classInclude]=\"avatarConfig.classInclude\"\n            [size]=\"avatarConfig.size || 32\"\n            [linkAvatar]=\"avatarConfig.linkAvatar\"\n            [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n            [idGenColor]=\"avatarConfig.idGenColor\"\n            [textAvatar]=\"avatarConfig.textAvatar\" />\n        }\n        @if (fieldKey() && item()['fieldLabelRow' + indexRow] | async; as labelRow) {\n          <libs_ui-components-popover\n            type=\"text\"\n            [config]=\"row().getPopoverConfig ? ('popover' | LibsUiPipesCallFunctionInTemplatePipe: row().getPopoverConfig : item() | async) : { zIndex: zIndex() + 1 }\"\n            [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || row().classGetValue || '' : row().classGetValue || ''\"\n            [innerHtml]=\"labelRow\"\n            (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n            (outEvent)=\"handlerSelectItem($event, item(), row().action)\" />\n        }\n\n        @if (fieldKey() && row().getComponentOutlet) {\n          <ng-container\n            *ngComponentOutlet=\"\n              'row:' + indexRow | LibsUiPipesCallFunctionInTemplatePipe: row().getComponentOutlet : item() | async;\n              inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: row().getDataComponentOutlet : item() : 'row:' + indexRow : { valueIsEmpty: { item: item() } } | async\n            \" />\n        }\n        @if (row().cols?.()?.length) {\n          <div\n            [class]=\"row().classCols || 'flex'\"\n            [style]=\"item()[item()['fieldRowStylesDynamicCols' + indexRow]]\">\n            @for (col of row().cols?.(); track col(); let colIndex = $index) {\n              @if (col().getImage && (item() | LibsUiPipesCallFunctionInTemplatePipe: col().getImage : item() | async); as imgUrl) {\n                <img\n                  [class]=\"item() | LibsUiPipesCallFunctionInTemplatePipe: col().getClassImage : item() | async\"\n                  src=\"{{ imgUrl }}\"\n                  alt=\"\"\n                  (error)=\"handlerErrorImage($event, col().getImageError)\" />\n              }\n              @if (item()['fieldColAvatarConfig' + indexRow + colIndex]; as avatarConfig) {\n                <libs_ui-components-avatar\n                  [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n                  [classInclude]=\"avatarConfig.classInclude\"\n                  [size]=\"avatarConfig.size || 32\"\n                  [linkAvatar]=\"avatarConfig.linkAvatar\"\n                  [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n                  [idGenColor]=\"avatarConfig.idGenColor\"\n                  [textAvatar]=\"avatarConfig.textAvatar\" />\n              }\n              @if (item()['fieldLabelCol' + indexRow + colIndex]; as labelColFunc) {\n                <libs_ui-components-popover\n                  type=\"text\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || item()['fieldColClass' + indexRow + colIndex] || '' : item()['fieldColClass' + indexRow + colIndex] || ''\"\n                  [innerHtml]=\"'fieldLabelCol' | LibsUiPipesCallFunctionInTemplatePipe: labelColFunc : item() | async\"\n                  [config]=\"{ zIndex: zIndex() + 1 }\"\n                  (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n                  (outEvent)=\"handlerSelectItem($event, item(), col().action)\" />\n              }\n              @if (item()['fieldColPopover' + indexRow + colIndex]; as popover) {\n                <libs_ui-components-popover\n                  [type]=\"popover.type ?? 'other'\"\n                  [config]=\"popover?.config | LibsUiPipesCloneObjectPipe: true : { zIndex: zIndex() + 1 }\"\n                  [classInclude]=\"item()['fieldColClass' + indexRow + colIndex]\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n                  (outEvent)=\"handlerSelectItem($event, item(), col().action)\">\n                  @let constHtmlDataView = popover.dataView || popoverIcon;\n                  <span\n                    [class]=\"popover.classInclude || ''\"\n                    [innerHtml]=\"constHtmlDataView | translate\"></span>\n                </libs_ui-components-popover>\n              }\n              @if (fieldKey() && col().getComponentOutlet) {\n                <ng-container\n                  *ngComponentOutlet=\"\n                    'row:' + indexRow + '-col:' + colIndex | LibsUiPipesCallFunctionInTemplatePipe: col().getComponentOutlet : item() | async;\n                    inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: col().getDataComponentOutlet : item() : 'row:' + indexRow + '-col:' + colIndex : { valueIsEmpty: { item: item() } } | async\n                  \" />\n              }\n              @if (item()['fieldColToggle' + indexRow + colIndex]; as toggle) {\n                <libs_ui-components-label\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [hasToggle]=\"toggle.hasToggle\"\n                  [toggleActive]=\"toggle.toggleActive\"\n                  [toggleDisable]=\"toggle.toggleDisable\"\n                  [popover]=\"toggle.popover\"\n                  [classInclude]=\"toggle.classInclude\"\n                  [labelLeft]=\"toggle.labelLeft\"\n                  [labelRight]=\"toggle.labelRight\"\n                  (outSwitchEvent)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldColButton' + indexRow + colIndex]; as button) {\n                <libs_ui-components-buttons-button\n                  [type]=\"button.type\"\n                  [classIconLeft]=\"button.classIconLeft\"\n                  [classIconRight]=\"button.classIconRight\"\n                  [classLabel]=\"button.classLabel\"\n                  [iconOnlyType]=\"button.iconOnlyType\"\n                  [popover]=\"button.popover\"\n                  [disable]=\"button.disable\"\n                  [ignorePointerEvent]=\"button.ignorePointerEvent\"\n                  [classInclude]=\"item()['fieldColClass' + indexRow + colIndex] ?? ' '\"\n                  [ignoreStopPropagationEvent]=\"false\"\n                  (outClick)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldBadge' + indexRow + colIndex]; as badge) {\n                <libs_ui-components-badge\n                  [mode]=\"badge.mode || 'x+'\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [count]=\"badge.count\"\n                  [maxCount]=\"badge.maxCount || 99\"\n                  [classCircle]=\"badge.classCircle || 'libs-ui-font-h4r'\" />\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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: "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: 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: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesCloneObjectPipe, name: "LibsUiPipesCloneObjectPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListRowsComponent, decorators: [{
             type: Component,
@@ -206,7 +206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiComponentsBadgeComponent,
                         LibsUiPipesCallFunctionInTemplatePipe,
                         LibsUiPipesCloneObjectPipe
-                    ], template: "@if (configTemplate() && configItemTextRows(); as configItemTextRows) {\n  <div class=\"flex flex-col w-full {{ configTemplate().classRows ?? '' }}\">\n    @for (row of configItemTextRows; track $index; let indexRow = $index) {\n      <div [class]=\"row().classRow\">\n        @if (row().getImage && (item() | LibsUiPipesCallFunctionInTemplatePipe: row().getImage : item() | async); as imgUrl) {\n          <img\n            [class]=\"item() | LibsUiPipesCallFunctionInTemplatePipe: row().getClassImage : item() | async\"\n            src=\"{{ imgUrl }}\"\n            alt=\"\"\n            (error)=\"handlerErrorImage($event, row().getImageError)\" />\n        }\n        @if (item()['fieldRowAvatarConfig' + indexRow]; as avatarConfig) {\n          <libs_ui-components-avatar\n            [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n            [classInclude]=\"avatarConfig.classInclude\"\n            [size]=\"avatarConfig.size || 32\"\n            [linkAvatar]=\"avatarConfig.linkAvatar\"\n            [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n            [idGenColor]=\"avatarConfig.idGenColor\"\n            [textAvatar]=\"avatarConfig.textAvatar\" />\n        }\n        @if (fieldKey() && item()['fieldLabelRow' + indexRow] | async; as labelRow) {\n          <libs_ui-components-popover\n            type=\"text\"\n            [config]=\"row().getPopoverConfig ? ('popover' | LibsUiPipesCallFunctionInTemplatePipe: row().getPopoverConfig : item() | async) : { zIndex: zIndex() + 1 }\"\n            [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || row().classGetValue || '' : row().classGetValue || ''\"\n            [innerHtml]=\"labelRow\"\n            (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n            (outEvent)=\"handlerSelectItem($event, item(), row().action)\" />\n        }\n\n        @if (fieldKey() && row().getComponentOutlet) {\n          <ng-container\n            *ngComponentOutlet=\"\n              'row:' + indexRow | LibsUiPipesCallFunctionInTemplatePipe: row().getComponentOutlet : item() | async;\n              inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: row().getDataComponentOutlet : item() : 'row:' + indexRow : { valueIsEmpty: { item: item() } } | async\n            \" />\n        }\n        @if (row().cols?.()?.length) {\n          <div\n            [class]=\"row().classCols || 'flex'\"\n            [style]=\"item()[item()['fieldRowStylesDynamicCols' + indexRow]]\">\n            @for (col of row().cols?.(); track $index; let colIndex = $index) {\n              @if (col().getImage && (item() | LibsUiPipesCallFunctionInTemplatePipe: col().getImage : item() | async); as imgUrl) {\n                <img\n                  [class]=\"item() | LibsUiPipesCallFunctionInTemplatePipe: col().getClassImage : item() | async\"\n                  src=\"{{ imgUrl }}\"\n                  alt=\"\"\n                  (error)=\"handlerErrorImage($event, col().getImageError)\" />\n              }\n              @if (item()['fieldColAvatarConfig' + indexRow + colIndex]; as avatarConfig) {\n                <libs_ui-components-avatar\n                  [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n                  [classInclude]=\"avatarConfig.classInclude\"\n                  [size]=\"avatarConfig.size || 32\"\n                  [linkAvatar]=\"avatarConfig.linkAvatar\"\n                  [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n                  [idGenColor]=\"avatarConfig.idGenColor\"\n                  [textAvatar]=\"avatarConfig.textAvatar\" />\n              }\n              @if (item()['fieldLabelCol' + indexRow + colIndex]; as labelColFunc) {\n                <libs_ui-components-popover\n                  type=\"text\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || item()['fieldColClass' + indexRow + colIndex] || '' : item()['fieldColClass' + indexRow + colIndex] || ''\"\n                  [innerHtml]=\"'fieldLabelCol' | LibsUiPipesCallFunctionInTemplatePipe: labelColFunc : item() | async\"\n                  [config]=\"{ zIndex: zIndex() + 1 }\"\n                  (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n                  (outEvent)=\"handlerSelectItem($event, item(), col().action)\" />\n              }\n              @if (item()['fieldColPopover' + indexRow + colIndex]; as popover) {\n                <libs_ui-components-popover\n                  [type]=\"popover.type ?? 'other'\"\n                  [config]=\"popover?.config | LibsUiPipesCloneObjectPipe: true : { zIndex: zIndex() + 1 }\"\n                  [classInclude]=\"item()['fieldColClass' + indexRow + colIndex]\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n                  (outEvent)=\"handlerSelectItem($event, item(), col().action)\">\n                  @let constHtmlDataView = popover.dataView || popoverIcon;\n                  <span\n                    [class]=\"popover.classInclude || ''\"\n                    [innerHtml]=\"constHtmlDataView | translate\"></span>\n                </libs_ui-components-popover>\n              }\n              @if (fieldKey() && col().getComponentOutlet) {\n                <ng-container\n                  *ngComponentOutlet=\"\n                    'row:' + indexRow + '-col:' + colIndex | LibsUiPipesCallFunctionInTemplatePipe: col().getComponentOutlet : item() | async;\n                    inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: col().getDataComponentOutlet : item() : 'row:' + indexRow + '-col:' + colIndex : { valueIsEmpty: { item: item() } } | async\n                  \" />\n              }\n              @if (item()['fieldColToggle' + indexRow + colIndex]; as toggle) {\n                <libs_ui-components-label\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [hasToggle]=\"toggle.hasToggle\"\n                  [toggleActive]=\"toggle.toggleActive\"\n                  [toggleDisable]=\"toggle.toggleDisable\"\n                  [popover]=\"toggle.popover\"\n                  [classInclude]=\"toggle.classInclude\"\n                  [labelLeft]=\"toggle.labelLeft\"\n                  [labelRight]=\"toggle.labelRight\"\n                  (outSwitchEvent)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldColButton' + indexRow + colIndex]; as button) {\n                <libs_ui-components-buttons-button\n                  [type]=\"button.type\"\n                  [classIconLeft]=\"button.classIconLeft\"\n                  [classIconRight]=\"button.classIconRight\"\n                  [classLabel]=\"button.classLabel\"\n                  [iconOnlyType]=\"button.iconOnlyType\"\n                  [popover]=\"button.popover\"\n                  [disable]=\"button.disable\"\n                  [ignorePointerEvent]=\"button.ignorePointerEvent\"\n                  [classInclude]=\"item()['fieldColClass' + indexRow + colIndex] ?? ' '\"\n                  [ignoreStopPropagationEvent]=\"false\"\n                  (outClick)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldBadge' + indexRow + colIndex]; as badge) {\n                <libs_ui-components-badge\n                  [mode]=\"badge.mode || 'x+'\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [count]=\"badge.count\"\n                  [maxCount]=\"badge.maxCount || 99\"\n                  [classCircle]=\"badge.classCircle || 'libs-ui-font-h4r'\" />\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
+                    ], template: "@if (configTemplate() && configItemTextRows(); as configItemTextRows) {\n  <div class=\"flex flex-col w-full {{ configTemplate().classRows ?? '' }}\">\n    @for (row of configItemTextRows; track row(); let indexRow = $index) {\n      <div [class]=\"row().classRow\">\n        @if (row().getImage && (item() | LibsUiPipesCallFunctionInTemplatePipe: row().getImage : item() | async); as imgUrl) {\n          <img\n            [class]=\"item() | LibsUiPipesCallFunctionInTemplatePipe: row().getClassImage : item() | async\"\n            src=\"{{ imgUrl }}\"\n            alt=\"\"\n            (error)=\"handlerErrorImage($event, row().getImageError)\" />\n        }\n        @if (item()['fieldRowAvatarConfig' + indexRow]; as avatarConfig) {\n          <libs_ui-components-avatar\n            [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n            [classInclude]=\"avatarConfig.classInclude\"\n            [size]=\"avatarConfig.size || 32\"\n            [linkAvatar]=\"avatarConfig.linkAvatar\"\n            [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n            [idGenColor]=\"avatarConfig.idGenColor\"\n            [textAvatar]=\"avatarConfig.textAvatar\" />\n        }\n        @if (fieldKey() && item()['fieldLabelRow' + indexRow] | async; as labelRow) {\n          <libs_ui-components-popover\n            type=\"text\"\n            [config]=\"row().getPopoverConfig ? ('popover' | LibsUiPipesCallFunctionInTemplatePipe: row().getPopoverConfig : item() | async) : { zIndex: zIndex() + 1 }\"\n            [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || row().classGetValue || '' : row().classGetValue || ''\"\n            [innerHtml]=\"labelRow\"\n            (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n            (outEvent)=\"handlerSelectItem($event, item(), row().action)\" />\n        }\n\n        @if (fieldKey() && row().getComponentOutlet) {\n          <ng-container\n            *ngComponentOutlet=\"\n              'row:' + indexRow | LibsUiPipesCallFunctionInTemplatePipe: row().getComponentOutlet : item() | async;\n              inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: row().getDataComponentOutlet : item() : 'row:' + indexRow : { valueIsEmpty: { item: item() } } | async\n            \" />\n        }\n        @if (row().cols?.()?.length) {\n          <div\n            [class]=\"row().classCols || 'flex'\"\n            [style]=\"item()[item()['fieldRowStylesDynamicCols' + indexRow]]\">\n            @for (col of row().cols?.(); track col(); let colIndex = $index) {\n              @if (col().getImage && (item() | LibsUiPipesCallFunctionInTemplatePipe: col().getImage : item() | async); as imgUrl) {\n                <img\n                  [class]=\"item() | LibsUiPipesCallFunctionInTemplatePipe: col().getClassImage : item() | async\"\n                  src=\"{{ imgUrl }}\"\n                  alt=\"\"\n                  (error)=\"handlerErrorImage($event, col().getImageError)\" />\n              }\n              @if (item()['fieldColAvatarConfig' + indexRow + colIndex]; as avatarConfig) {\n                <libs_ui-components-avatar\n                  [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n                  [classInclude]=\"avatarConfig.classInclude\"\n                  [size]=\"avatarConfig.size || 32\"\n                  [linkAvatar]=\"avatarConfig.linkAvatar\"\n                  [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n                  [idGenColor]=\"avatarConfig.idGenColor\"\n                  [textAvatar]=\"avatarConfig.textAvatar\" />\n              }\n              @if (item()['fieldLabelCol' + indexRow + colIndex]; as labelColFunc) {\n                <libs_ui-components-popover\n                  type=\"text\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || item()['fieldColClass' + indexRow + colIndex] || '' : item()['fieldColClass' + indexRow + colIndex] || ''\"\n                  [innerHtml]=\"'fieldLabelCol' | LibsUiPipesCallFunctionInTemplatePipe: labelColFunc : item() | async\"\n                  [config]=\"{ zIndex: zIndex() + 1 }\"\n                  (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n                  (outEvent)=\"handlerSelectItem($event, item(), col().action)\" />\n              }\n              @if (item()['fieldColPopover' + indexRow + colIndex]; as popover) {\n                <libs_ui-components-popover\n                  [type]=\"popover.type ?? 'other'\"\n                  [config]=\"popover?.config | LibsUiPipesCloneObjectPipe: true : { zIndex: zIndex() + 1 }\"\n                  [classInclude]=\"item()['fieldColClass' + indexRow + colIndex]\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n                  (outEvent)=\"handlerSelectItem($event, item(), col().action)\">\n                  @let constHtmlDataView = popover.dataView || popoverIcon;\n                  <span\n                    [class]=\"popover.classInclude || ''\"\n                    [innerHtml]=\"constHtmlDataView | translate\"></span>\n                </libs_ui-components-popover>\n              }\n              @if (fieldKey() && col().getComponentOutlet) {\n                <ng-container\n                  *ngComponentOutlet=\"\n                    'row:' + indexRow + '-col:' + colIndex | LibsUiPipesCallFunctionInTemplatePipe: col().getComponentOutlet : item() | async;\n                    inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: col().getDataComponentOutlet : item() : 'row:' + indexRow + '-col:' + colIndex : { valueIsEmpty: { item: item() } } | async\n                  \" />\n              }\n              @if (item()['fieldColToggle' + indexRow + colIndex]; as toggle) {\n                <libs_ui-components-label\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [hasToggle]=\"toggle.hasToggle\"\n                  [toggleActive]=\"toggle.toggleActive\"\n                  [toggleDisable]=\"toggle.toggleDisable\"\n                  [popover]=\"toggle.popover\"\n                  [classInclude]=\"toggle.classInclude\"\n                  [labelLeft]=\"toggle.labelLeft\"\n                  [labelRight]=\"toggle.labelRight\"\n                  (outSwitchEvent)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldColButton' + indexRow + colIndex]; as button) {\n                <libs_ui-components-buttons-button\n                  [type]=\"button.type\"\n                  [classIconLeft]=\"button.classIconLeft\"\n                  [classIconRight]=\"button.classIconRight\"\n                  [classLabel]=\"button.classLabel\"\n                  [iconOnlyType]=\"button.iconOnlyType\"\n                  [popover]=\"button.popover\"\n                  [disable]=\"button.disable\"\n                  [ignorePointerEvent]=\"button.ignorePointerEvent\"\n                  [classInclude]=\"item()['fieldColClass' + indexRow + colIndex] ?? ' '\"\n                  [ignoreStopPropagationEvent]=\"false\"\n                  (outClick)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldBadge' + indexRow + colIndex]; as badge) {\n                <libs_ui-components-badge\n                  [mode]=\"badge.mode || 'x+'\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [count]=\"badge.count\"\n                  [maxCount]=\"badge.maxCount || 99\"\n                  [classCircle]=\"badge.classCircle || 'libs-ui-font-h4r'\" />\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -1026,6 +1026,8 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
     calculatorHeighItemSuccess = signal(false);
     keyFetch = signal('');
     PATTERN_FAKE_ID = 'fake-id-';
+    // Guard batch: true khi đang apply default-key hàng loạt trong processData → hoãn emit per-item, emit 1 lần ở cuối.
+    isApplyingDefaultKeys = false;
     elementScrollContent = viewChild('elementScrollContent');
     resizeObserverCorrectHeight;
     // px — chiều cao bar "chọn tất cả" (configCheckboxCheckAll) / bar button select-unselect. Đồng bộ với abstract setHeightViewPort.
@@ -1073,26 +1075,35 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             if (!configTemplateGroup) {
                 return;
             }
-            this.store().forEach((item) => {
-                if (isEmpty(item()[this.fieldKey()])) {
-                    item.update((current) => {
-                        current[this.fieldKey()] = `${this.PATTERN_FAKE_ID}${uuid()}`;
+            // Batch: hoãn emit per-item trong lúc re-apply default-key, emit 1 lần đầy đủ ở cuối (tránh emit thiếu key).
+            // try/finally đảm bảo LUÔN tắt guard kể cả khi có lỗi (tránh kẹt guard làm chết emit về sau).
+            this.isApplyingDefaultKeys = true;
+            try {
+                this.store().forEach((item) => {
+                    if (isEmpty(item()[this.fieldKey()])) {
+                        item.update((current) => {
+                            current[this.fieldKey()] = `${this.PATTERN_FAKE_ID}${uuid()}`;
+                            return current;
+                        });
+                    }
+                    const itemGroup = item()[configTemplateGroup.fieldGetItems];
+                    const itemMap = cloneDeep(item);
+                    itemMap.update((current) => {
+                        current.ref = item;
                         return current;
                     });
-                }
-                const itemGroup = item()[configTemplateGroup.fieldGetItems];
-                const itemMap = cloneDeep(item);
-                itemMap.update((current) => {
-                    current.ref = item;
-                    return current;
+                    if (itemGroup) {
+                        this.checkedGroupItems(itemGroup(), item);
+                    }
+                    if (this.multiKeySelected()?.length && this.multiKeySelected()?.find((key) => key === item()[this.fieldKey()])) {
+                        this.handlerChangeChecked(true, itemMap, false, !configTemplateGroup.singleSelectItem);
+                    }
                 });
-                if (itemGroup) {
-                    this.checkedGroupItems(itemGroup(), item);
-                }
-                if (this.multiKeySelected()?.length && this.multiKeySelected()?.find((key) => key === item()[this.fieldKey()])) {
-                    this.handlerChangeChecked(true, itemMap, false, !configTemplateGroup.singleSelectItem);
-                }
-            });
+            }
+            finally {
+                this.isApplyingDefaultKeys = false;
+            }
+            this.emitMultiKeyChecked(false);
             this.multiKeySelected.set([]);
         });
     }
@@ -1178,6 +1189,11 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         this.handlerChangeChecked(checked, signal(item), true);
     }
     handlerChangeChecked(checked, item, isClickManual, isCheckedByDefaultKey) {
+        // An toàn: thao tác thật (không phải apply default-key) chắc chắn không nằm trong batch → clear guard
+        // phòng khi guard bị kẹt do lỗi trước đó, đảm bảo emit không bao giờ bị chết ở luồng người dùng.
+        if (!isCheckedByDefaultKey) {
+            this.isApplyingDefaultKeys = false;
+        }
         const configTemplateGroup = this.configTemplateGroup();
         if (!configTemplateGroup) {
             return;
@@ -1385,8 +1401,13 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
                 dataMultiKeyChecked.mapKeys.push({ key, item: item.ref?.() || item, isClickManual });
             }
         }
-        this.outSelectMultiKey.emit(dataMultiKeyChecked);
         this.totalItemChecked.set(dataMultiKeyChecked.keys.length);
+        // Trong lúc apply default-key hàng loạt (processData), bỏ emit trung gian per-item
+        // để tránh bắn ra tập key thiếu (VD: [mm] khi mới re-check 1/2 con). Emit 1 lần đầy đủ ở cuối processData.
+        if (this.isApplyingDefaultKeys) {
+            return;
+        }
+        this.outSelectMultiKey.emit(dataMultiKeyChecked);
     }
     recursivelyCheckedParentByTree(item) {
         if (isNil(item)) {
@@ -1454,6 +1475,9 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         if (!configTemplateGroup) {
             return;
         }
+        // Bật guard để việc apply default-key hàng loạt bên dưới không emit per-item (tránh emit thiếu key).
+        const hadDefaultKeys = !!this.multiKeySelected()?.length;
+        this.isApplyingDefaultKeys = true;
         let items = this.store().map((item) => {
             if (isNil(item()[this.fieldKey()]) || item()[this.fieldKey()] === '') {
                 item.update((current) => {
@@ -1552,6 +1576,11 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         }
         this.config()?.sort?.(items);
         this.items.set(items);
+        // Tắt guard và emit MỘT lần với tập key đầy đủ (nếu có apply default-key).
+        this.isApplyingDefaultKeys = false;
+        if (hadDefaultKeys) {
+            this.emitMultiKeyChecked(false);
+        }
         this.multiKeySelected.set([]);
         const callBackCalculatorHeightSuccess = () => {
             this.calculatorHeighItemSuccess.set(true);
@@ -1825,7 +1854,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         return labelSearch ?? item().fieldLabel;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListGroupComponent, isStandalone: true, selector: "libs_ui-components-list-templates_group", viewQueries: [{ propertyName: "elementScrollContent", first: true, predicate: ["elementScrollContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort() + 'px' : '100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div\n    class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n        <div [class]=\"'flex items-center bg-[#ffffff] ' + (configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6r'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n          <div class=\"text-[#999999]\">|</div>\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6s'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n        </div>\n      }\n      @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n        <div [class]=\"'flex libs-ui-border-bottom-general ' + (configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n          <libs_ui-components-checkbox-single\n            [label]=\"configCheckBox.label ?? 'i18n_all'\"\n            [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n            [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n            [disable]=\"constHtmlDisable\"\n            (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n            (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n        </div>\n      }\n      @if (items() && items().length) {\n        <div class=\"w-full h-full relative flex\">\n          <div\n            #elementScroll\n            LibsUiComponentsScrollOverlayDirective\n            class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n            <div\n              #elementScrollContent\n              class=\"w-full flex flex-col\">\n              @for (item of items(); track item(); let first = $first; let last = $last) {\n                <div\n                  #itemRef\n                  [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n                  class=\"flex flex-col relative\">\n                  @let constHtmlPadding = level() * (configTemplateGroup.isViewTree ? 8 : 16);\n                  <div\n                    data-list-row\n                    class=\"flex items-center py-[6px]\"\n                    [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                    [style.paddingLeft.px]=\"constHtmlPadding\"\n                    [style.paddingRight.px]=\"constHtmlPadding\"\n                    (click)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\"\n                    (keydown.enter)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\">\n                    @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n                      <i\n                        class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                    <div\n                      class=\"flex\"\n                      [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                      [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n                      @if (!configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-checkbox-single\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex() + 1\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [classLabelInclude]=\"\n                            (configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ' : ' libs-ui-font-h6s ') +\n                            (configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree ? '' : ' uppercase ')\n                          \"\n                          [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                          [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                          (outChange)=\"handlerChangeChecked($event.checked, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-radio-single\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex() + 1\"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '' : ' uppercase')\"\n                          [disable]=\"\n                            disable() ||\n                            (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                            configTemplateGroup.ignoreCheckboxGroup ||\n                            configTemplateGroup.singleSelectItem ||\n                            (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n                          \"\n                          [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          (outChange)=\"handlerChangeChecked($event.active, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (item().buttonInGroup; as buttonInGroup) {\n                        <libs_ui-components-buttons-button\n                          [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                          [label]=\"buttonInGroup.label || ' '\"\n                          [classIconLeft]=\"(buttonInGroup.classIconLeft || '') + ' flex mr-[8px] !text-[8px]'\"\n                          [classInclude]=\"buttonInGroup.classInclude\"\n                          [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5r'\"\n                          [disable]=\"buttonInGroup.disable || disable() || false\"\n                          (outClick)=\"handlerClickButtonGroup(buttonInGroup, item())\" />\n                      }\n                    </div>\n\n                    @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n                      <i\n                        class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.!ml-[8px]]=\"item().dataPopover\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                  </div>\n                  @if (item().expand && calculatorHeighItemSuccess()) {\n                    <libs_ui-components-list-templates_group-item\n                      [keySearch]=\"keySearch()\"\n                      [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n                      [parentItem]=\"item()\"\n                      [fieldKey]=\"fieldKey()\"\n                      [keysChecked]=\"keysChecked()\"\n                      [disable]=\"disable()\"\n                      [keysDisableItem]=\"keysDisableItem() || []\"\n                      [configTemplateGroup]=\"configTemplateGroup\"\n                      [config]=\"config()\"\n                      [zIndex]=\"zIndex()\"\n                      [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n                      (outChangeView)=\"handlerChangeView()\"\n                      (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                      (outChange)=\"handlerChangeItemChecked($event.item)\" />\n                  }\n                  @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n                    <div\n                      class=\"libs-ui-list-group-line\"\n                      [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"></div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div\n          class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata ? configTemplateGroup.classIncludeNodata : '' }}\"\n          [style.marginLeft.px]=\"\n            0\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : 2\n                : configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                : true\n          \"\n          [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n          [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_no_data_yet';\n            <div>{{ constHtmlTextNoData | translate }}</div>\n          }\n          @if (keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <div>{{ constHtmlTextSearchNoData | translate }}</div>\n          }\n        </div>\n      }\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { 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: 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: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorMarginLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorMarginLeftItemPipe" }, { kind: "component", type: LibsUiComponentsListGroupItemComponent, selector: "libs_ui-components-list-templates_group-item", inputs: ["items", "configTemplateGroup", "keySearch", "fieldKey", "keysChecked", "keysDisableItem", "parentItem", "disable", "disableLabel", "config", "keysStillOtherOptions", "zIndex"], outputs: ["outChangeView", "outChange", "outChangStageFlagMousePopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListGroupComponent, isStandalone: true, selector: "libs_ui-components-list-templates_group", viewQueries: [{ propertyName: "elementScrollContent", first: true, predicate: ["elementScrollContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort() + 'px' : '100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div\n    class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n        <div [class]=\"'flex items-center bg-[#ffffff] ' + (configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6ri'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n          <div class=\"text-[#999999]\">|</div>\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6ri'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n        </div>\n      }\n      @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n        <div [class]=\"'flex libs-ui-border-bottom-general ' + (configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n          <libs_ui-components-checkbox-single\n            [label]=\"configCheckBox.label ?? 'i18n_all'\"\n            [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n            [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n            [disable]=\"constHtmlDisable\"\n            (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n            (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n        </div>\n      }\n      @if (items() && items().length) {\n        <div class=\"w-full h-full relative flex\">\n          <div\n            #elementScroll\n            LibsUiComponentsScrollOverlayDirective\n            class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n            <div\n              #elementScrollContent\n              class=\"w-full flex flex-col\">\n              @for (item of items(); track item(); let first = $first; let last = $last) {\n                <div\n                  #itemRef\n                  [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n                  class=\"flex flex-col relative\">\n                  @let constHtmlPadding = level() * (configTemplateGroup.isViewTree ? 8 : 16);\n                  <div\n                    data-list-row\n                    class=\"flex items-center py-[6px]\"\n                    [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                    [style.paddingLeft.px]=\"constHtmlPadding\"\n                    [style.paddingRight.px]=\"constHtmlPadding\"\n                    (click)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\"\n                    (keydown.enter)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\">\n                    @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n                      <i\n                        class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                    <div\n                      class=\"flex\"\n                      [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                      [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n                      @if (!configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-checkbox-single\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex() + 1\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [classLabelInclude]=\"\n                            (configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ' : ' libs-ui-font-h6s ') +\n                            (configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree ? '' : ' uppercase ')\n                          \"\n                          [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                          [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                          (outChange)=\"handlerChangeChecked($event.checked, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-radio-single\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex() + 1\"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '' : ' uppercase')\"\n                          [disable]=\"\n                            disable() ||\n                            (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                            configTemplateGroup.ignoreCheckboxGroup ||\n                            configTemplateGroup.singleSelectItem ||\n                            (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n                          \"\n                          [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          (outChange)=\"handlerChangeChecked($event.active, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (item().buttonInGroup; as buttonInGroup) {\n                        <libs_ui-components-buttons-button\n                          [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                          [label]=\"buttonInGroup.label || ' '\"\n                          [classIconLeft]=\"(buttonInGroup.classIconLeft || '') + ' flex mr-[8px] !text-[8px]'\"\n                          [classInclude]=\"buttonInGroup.classInclude\"\n                          [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5ri'\"\n                          [disable]=\"buttonInGroup.disable || disable() || false\"\n                          (outClick)=\"handlerClickButtonGroup(buttonInGroup, item())\" />\n                      }\n                    </div>\n\n                    @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n                      <i\n                        class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.!ml-[8px]]=\"item().dataPopover\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                  </div>\n                  @if (item().expand && calculatorHeighItemSuccess()) {\n                    <libs_ui-components-list-templates_group-item\n                      [keySearch]=\"keySearch()\"\n                      [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n                      [parentItem]=\"item()\"\n                      [fieldKey]=\"fieldKey()\"\n                      [keysChecked]=\"keysChecked()\"\n                      [disable]=\"disable()\"\n                      [keysDisableItem]=\"keysDisableItem() || []\"\n                      [configTemplateGroup]=\"configTemplateGroup\"\n                      [config]=\"config()\"\n                      [zIndex]=\"zIndex()\"\n                      [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n                      (outChangeView)=\"handlerChangeView()\"\n                      (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                      (outChange)=\"handlerChangeItemChecked($event.item)\" />\n                  }\n                  @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n                    <div\n                      class=\"libs-ui-list-group-line\"\n                      [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"></div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div\n          class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata ? configTemplateGroup.classIncludeNodata : '' }}\"\n          [style.marginLeft.px]=\"\n            0\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : 2\n                : configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                : true\n          \"\n          [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n          [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_no_data_yet';\n            <div>{{ constHtmlTextNoData | translate }}</div>\n          }\n          @if (keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <div>{{ constHtmlTextSearchNoData | translate }}</div>\n          }\n        </div>\n      }\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { 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: 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: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorMarginLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorMarginLeftItemPipe" }, { kind: "component", type: LibsUiComponentsListGroupItemComponent, selector: "libs_ui-components-list-templates_group-item", inputs: ["items", "configTemplateGroup", "keySearch", "fieldKey", "keysChecked", "keysDisableItem", "parentItem", "disable", "disableLabel", "config", "keysStillOtherOptions", "zIndex"], outputs: ["outChangeView", "outChange", "outChangStageFlagMousePopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListGroupComponent, decorators: [{
             type: Component,
@@ -1842,7 +1871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiPipesCallFunctionInTemplatePipe,
                         LibsUiComponentsListGroupCalculatorMarginLeftItemPipe,
                         LibsUiComponentsListGroupItemComponent,
-                    ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort() + 'px' : '100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div\n    class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n        <div [class]=\"'flex items-center bg-[#ffffff] ' + (configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6r'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n          <div class=\"text-[#999999]\">|</div>\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6s'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n        </div>\n      }\n      @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n        <div [class]=\"'flex libs-ui-border-bottom-general ' + (configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n          <libs_ui-components-checkbox-single\n            [label]=\"configCheckBox.label ?? 'i18n_all'\"\n            [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n            [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n            [disable]=\"constHtmlDisable\"\n            (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n            (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n        </div>\n      }\n      @if (items() && items().length) {\n        <div class=\"w-full h-full relative flex\">\n          <div\n            #elementScroll\n            LibsUiComponentsScrollOverlayDirective\n            class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n            <div\n              #elementScrollContent\n              class=\"w-full flex flex-col\">\n              @for (item of items(); track item(); let first = $first; let last = $last) {\n                <div\n                  #itemRef\n                  [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n                  class=\"flex flex-col relative\">\n                  @let constHtmlPadding = level() * (configTemplateGroup.isViewTree ? 8 : 16);\n                  <div\n                    data-list-row\n                    class=\"flex items-center py-[6px]\"\n                    [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                    [style.paddingLeft.px]=\"constHtmlPadding\"\n                    [style.paddingRight.px]=\"constHtmlPadding\"\n                    (click)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\"\n                    (keydown.enter)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\">\n                    @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n                      <i\n                        class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                    <div\n                      class=\"flex\"\n                      [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                      [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n                      @if (!configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-checkbox-single\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex() + 1\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [classLabelInclude]=\"\n                            (configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ' : ' libs-ui-font-h6s ') +\n                            (configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree ? '' : ' uppercase ')\n                          \"\n                          [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                          [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                          (outChange)=\"handlerChangeChecked($event.checked, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-radio-single\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex() + 1\"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '' : ' uppercase')\"\n                          [disable]=\"\n                            disable() ||\n                            (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                            configTemplateGroup.ignoreCheckboxGroup ||\n                            configTemplateGroup.singleSelectItem ||\n                            (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n                          \"\n                          [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          (outChange)=\"handlerChangeChecked($event.active, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (item().buttonInGroup; as buttonInGroup) {\n                        <libs_ui-components-buttons-button\n                          [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                          [label]=\"buttonInGroup.label || ' '\"\n                          [classIconLeft]=\"(buttonInGroup.classIconLeft || '') + ' flex mr-[8px] !text-[8px]'\"\n                          [classInclude]=\"buttonInGroup.classInclude\"\n                          [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5r'\"\n                          [disable]=\"buttonInGroup.disable || disable() || false\"\n                          (outClick)=\"handlerClickButtonGroup(buttonInGroup, item())\" />\n                      }\n                    </div>\n\n                    @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n                      <i\n                        class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.!ml-[8px]]=\"item().dataPopover\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                  </div>\n                  @if (item().expand && calculatorHeighItemSuccess()) {\n                    <libs_ui-components-list-templates_group-item\n                      [keySearch]=\"keySearch()\"\n                      [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n                      [parentItem]=\"item()\"\n                      [fieldKey]=\"fieldKey()\"\n                      [keysChecked]=\"keysChecked()\"\n                      [disable]=\"disable()\"\n                      [keysDisableItem]=\"keysDisableItem() || []\"\n                      [configTemplateGroup]=\"configTemplateGroup\"\n                      [config]=\"config()\"\n                      [zIndex]=\"zIndex()\"\n                      [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n                      (outChangeView)=\"handlerChangeView()\"\n                      (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                      (outChange)=\"handlerChangeItemChecked($event.item)\" />\n                  }\n                  @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n                    <div\n                      class=\"libs-ui-list-group-line\"\n                      [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"></div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div\n          class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata ? configTemplateGroup.classIncludeNodata : '' }}\"\n          [style.marginLeft.px]=\"\n            0\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : 2\n                : configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                : true\n          \"\n          [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n          [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_no_data_yet';\n            <div>{{ constHtmlTextNoData | translate }}</div>\n          }\n          @if (keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <div>{{ constHtmlTextSearchNoData | translate }}</div>\n          }\n        </div>\n      }\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"] }]
+                    ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort() + 'px' : '100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div\n    class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n        <div [class]=\"'flex items-center bg-[#ffffff] ' + (configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6ri'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n          <div class=\"text-[#999999]\">|</div>\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6ri'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n        </div>\n      }\n      @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n        <div [class]=\"'flex libs-ui-border-bottom-general ' + (configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n          <libs_ui-components-checkbox-single\n            [label]=\"configCheckBox.label ?? 'i18n_all'\"\n            [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n            [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n            [disable]=\"constHtmlDisable\"\n            (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n            (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n        </div>\n      }\n      @if (items() && items().length) {\n        <div class=\"w-full h-full relative flex\">\n          <div\n            #elementScroll\n            LibsUiComponentsScrollOverlayDirective\n            class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n            <div\n              #elementScrollContent\n              class=\"w-full flex flex-col\">\n              @for (item of items(); track item(); let first = $first; let last = $last) {\n                <div\n                  #itemRef\n                  [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n                  class=\"flex flex-col relative\">\n                  @let constHtmlPadding = level() * (configTemplateGroup.isViewTree ? 8 : 16);\n                  <div\n                    data-list-row\n                    class=\"flex items-center py-[6px]\"\n                    [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                    [style.paddingLeft.px]=\"constHtmlPadding\"\n                    [style.paddingRight.px]=\"constHtmlPadding\"\n                    (click)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\"\n                    (keydown.enter)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\">\n                    @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n                      <i\n                        class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                    <div\n                      class=\"flex\"\n                      [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                      [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n                      @if (!configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-checkbox-single\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex() + 1\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [classLabelInclude]=\"\n                            (configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ' : ' libs-ui-font-h6s ') +\n                            (configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree ? '' : ' uppercase ')\n                          \"\n                          [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                          [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                          (outChange)=\"handlerChangeChecked($event.checked, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-radio-single\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex() + 1\"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '' : ' uppercase')\"\n                          [disable]=\"\n                            disable() ||\n                            (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                            configTemplateGroup.ignoreCheckboxGroup ||\n                            configTemplateGroup.singleSelectItem ||\n                            (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n                          \"\n                          [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          (outChange)=\"handlerChangeChecked($event.active, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (item().buttonInGroup; as buttonInGroup) {\n                        <libs_ui-components-buttons-button\n                          [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                          [label]=\"buttonInGroup.label || ' '\"\n                          [classIconLeft]=\"(buttonInGroup.classIconLeft || '') + ' flex mr-[8px] !text-[8px]'\"\n                          [classInclude]=\"buttonInGroup.classInclude\"\n                          [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5ri'\"\n                          [disable]=\"buttonInGroup.disable || disable() || false\"\n                          (outClick)=\"handlerClickButtonGroup(buttonInGroup, item())\" />\n                      }\n                    </div>\n\n                    @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n                      <i\n                        class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.!ml-[8px]]=\"item().dataPopover\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                  </div>\n                  @if (item().expand && calculatorHeighItemSuccess()) {\n                    <libs_ui-components-list-templates_group-item\n                      [keySearch]=\"keySearch()\"\n                      [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n                      [parentItem]=\"item()\"\n                      [fieldKey]=\"fieldKey()\"\n                      [keysChecked]=\"keysChecked()\"\n                      [disable]=\"disable()\"\n                      [keysDisableItem]=\"keysDisableItem() || []\"\n                      [configTemplateGroup]=\"configTemplateGroup\"\n                      [config]=\"config()\"\n                      [zIndex]=\"zIndex()\"\n                      [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n                      (outChangeView)=\"handlerChangeView()\"\n                      (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                      (outChange)=\"handlerChangeItemChecked($event.item)\" />\n                  }\n                  @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n                    <div\n                      class=\"libs-ui-list-group-line\"\n                      [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"></div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div\n          class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata ? configTemplateGroup.classIncludeNodata : '' }}\"\n          [style.marginLeft.px]=\"\n            0\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : 2\n                : configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                : true\n          \"\n          [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n          [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_no_data_yet';\n            <div>{{ constHtmlTextNoData | translate }}</div>\n          }\n          @if (keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <div>{{ constHtmlTextSearchNoData | translate }}</div>\n          }\n        </div>\n      }\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"] }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -2143,11 +2172,11 @@ class LibsUiComponentsListTagComponent extends LibsUiComponentsListTemplatesComp
         return this.items().length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListTagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListTagComponent, isStandalone: true, selector: "libs_ui-components-list-templates_tag", usesInheritance: true, ngImport: i0, template: "@if (configTemplateTag(); as configTemplateTag) {\n  <div\n    class=\"w-full h-full relative\"\n    LibsUiComponentsScrollOverlayDirective\n    (outScrollBottom)=\"handlerScrollBottom()\">\n    <div\n      class=\"relative max-h-[150px] h-full {{ configTemplateTag.classIncludeContainer }}\"\n      [ngClass]=\"{ 'flex flex-wrap': !configTemplateTag.ignoreItemFlexWrap }\"\n      [class.min-h-[45px]]=\"!loading() && (!items() || !items().length)\"\n      [class.min-h-[94px]]=\"loading() && items()\">\n      @for (item of items(); track item()[fieldKey()]) {\n        <div\n          [class.libs-ui-disable]=\"loading() || disable()\"\n          [class.pointer-events-none]=\"loading() || disable()\"\n          [class]=\"item().classContainerItem\">\n          @if (item().bullet; as bullet) {\n            <div\n              [class]=\"item().classItem || 'rounded-[10px] px-[8px] py-[1px] mb-[8px] mr-[8px]'\"\n              [class.w-max]=\"configTemplateTag?.ignoreItemFlexWrap\"\n              [style.background-color]=\"bullet().backgroundColor\"\n              [style.color]=\"bullet().color\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\">\n              <span [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          } @else {\n            @let constHtmlIsSelected = item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length;\n            <div\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\"\n              [class]=\"item().classItem || 'rounded-[20px] mb-[8px] mr-[8px] py-[4px] px-[8px] flex items-center cursor-pointer'\"\n              [class.bg-[var(--libs-ui-color-light-2)]]=\"constHtmlIsSelected\"\n              [class.text-[var(--libs-ui-color-default)]]=\"constHtmlIsSelected\"\n              [class.bg-white]=\"!constHtmlIsSelected\"\n              [class.text-[#6a7383]]=\"!constHtmlIsSelected\"\n              [class.libs-ui-border-general]=\"!constHtmlIsSelected\">\n              @if (constHtmlIsSelected) {\n                <div class=\"mr-[8px] text-[12px] libs-ui-icon-check before:text-[var(--libs-ui-color-default)]\"></div>\n              }\n              <span\n                class=\"libs-ui-font-h6r break-word\"\n                [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          }\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] ' + (config()?.textNoDataClassInclude ?? 'py-[4px] flex items-center justify-center w-full')\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n            {{ constHtmlTextNoData | translate }}\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            {{ constHtmlTextSearchNoData | translate }}\n          }\n          @if (loading()) {\n            &nbsp;\n          }\n        </div>\n      }\n    </div>\n    @if (loading()) {\n      <div class=\"w-full h-full absolute top-0\">\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListTagComponent, isStandalone: true, selector: "libs_ui-components-list-templates_tag", usesInheritance: true, ngImport: i0, template: "@if (configTemplateTag(); as configTemplateTag) {\n  <div\n    class=\"w-full h-full relative\"\n    LibsUiComponentsScrollOverlayDirective\n    (outScrollBottom)=\"handlerScrollBottom()\">\n    <div\n      class=\"relative max-h-[150px] h-full {{ configTemplateTag.classIncludeContainer }}\"\n      [ngClass]=\"{ 'flex flex-wrap': !configTemplateTag.ignoreItemFlexWrap }\"\n      [class.min-h-[45px]]=\"!loading() && (!items() || !items().length)\"\n      [class.min-h-[94px]]=\"loading() && items()\">\n      @for (item of items(); track item()) {\n        <div\n          [class.libs-ui-disable]=\"loading() || disable()\"\n          [class.pointer-events-none]=\"loading() || disable()\"\n          [class]=\"item().classContainerItem\">\n          @if (item().bullet; as bullet) {\n            <div\n              [class]=\"item().classItem || 'rounded-[10px] px-[8px] py-[1px] mb-[8px] mr-[8px]'\"\n              [class.w-max]=\"configTemplateTag?.ignoreItemFlexWrap\"\n              [style.background-color]=\"bullet().backgroundColor\"\n              [style.color]=\"bullet().color\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\">\n              <span [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          } @else {\n            @let constHtmlIsSelected = item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length;\n            <div\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\"\n              [class]=\"item().classItem || 'rounded-[20px] mb-[8px] mr-[8px] py-[4px] px-[8px] flex items-center cursor-pointer'\"\n              [class.bg-[var(--libs-ui-color-light-2)]]=\"constHtmlIsSelected\"\n              [class.text-[var(--libs-ui-color-default)]]=\"constHtmlIsSelected\"\n              [class.bg-white]=\"!constHtmlIsSelected\"\n              [class.text-[#6a7383]]=\"!constHtmlIsSelected\"\n              [class.libs-ui-border-general]=\"!constHtmlIsSelected\">\n              @if (constHtmlIsSelected) {\n                <div class=\"mr-[8px] text-[12px] libs-ui-icon-check before:text-[var(--libs-ui-color-default)]\"></div>\n              }\n              <span\n                class=\"libs-ui-font-h6r break-word\"\n                [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          }\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] ' + (config()?.textNoDataClassInclude ?? 'py-[4px] flex items-center justify-center w-full')\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n            {{ constHtmlTextNoData | translate }}\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            {{ constHtmlTextSearchNoData | translate }}\n          }\n          @if (loading()) {\n            &nbsp;\n          }\n        </div>\n      }\n    </div>\n    @if (loading()) {\n      <div class=\"w-full h-full absolute top-0\">\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-list-templates_tag', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [VirtualScrollerModule, NgTemplateOutlet, TranslateModule, NgClass, LibsUiComponentsSpinnerComponent, LibsUiComponentsScrollOverlayDirective, LibsUiCheckSelectedByKeyPipe], template: "@if (configTemplateTag(); as configTemplateTag) {\n  <div\n    class=\"w-full h-full relative\"\n    LibsUiComponentsScrollOverlayDirective\n    (outScrollBottom)=\"handlerScrollBottom()\">\n    <div\n      class=\"relative max-h-[150px] h-full {{ configTemplateTag.classIncludeContainer }}\"\n      [ngClass]=\"{ 'flex flex-wrap': !configTemplateTag.ignoreItemFlexWrap }\"\n      [class.min-h-[45px]]=\"!loading() && (!items() || !items().length)\"\n      [class.min-h-[94px]]=\"loading() && items()\">\n      @for (item of items(); track item()[fieldKey()]) {\n        <div\n          [class.libs-ui-disable]=\"loading() || disable()\"\n          [class.pointer-events-none]=\"loading() || disable()\"\n          [class]=\"item().classContainerItem\">\n          @if (item().bullet; as bullet) {\n            <div\n              [class]=\"item().classItem || 'rounded-[10px] px-[8px] py-[1px] mb-[8px] mr-[8px]'\"\n              [class.w-max]=\"configTemplateTag?.ignoreItemFlexWrap\"\n              [style.background-color]=\"bullet().backgroundColor\"\n              [style.color]=\"bullet().color\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\">\n              <span [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          } @else {\n            @let constHtmlIsSelected = item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length;\n            <div\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\"\n              [class]=\"item().classItem || 'rounded-[20px] mb-[8px] mr-[8px] py-[4px] px-[8px] flex items-center cursor-pointer'\"\n              [class.bg-[var(--libs-ui-color-light-2)]]=\"constHtmlIsSelected\"\n              [class.text-[var(--libs-ui-color-default)]]=\"constHtmlIsSelected\"\n              [class.bg-white]=\"!constHtmlIsSelected\"\n              [class.text-[#6a7383]]=\"!constHtmlIsSelected\"\n              [class.libs-ui-border-general]=\"!constHtmlIsSelected\">\n              @if (constHtmlIsSelected) {\n                <div class=\"mr-[8px] text-[12px] libs-ui-icon-check before:text-[var(--libs-ui-color-default)]\"></div>\n              }\n              <span\n                class=\"libs-ui-font-h6r break-word\"\n                [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          }\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] ' + (config()?.textNoDataClassInclude ?? 'py-[4px] flex items-center justify-center w-full')\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n            {{ constHtmlTextNoData | translate }}\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            {{ constHtmlTextSearchNoData | translate }}\n          }\n          @if (loading()) {\n            &nbsp;\n          }\n        </div>\n      }\n    </div>\n    @if (loading()) {\n      <div class=\"w-full h-full absolute top-0\">\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      </div>\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'libs_ui-components-list-templates_tag', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [VirtualScrollerModule, NgTemplateOutlet, TranslateModule, NgClass, LibsUiComponentsSpinnerComponent, LibsUiComponentsScrollOverlayDirective, LibsUiCheckSelectedByKeyPipe], template: "@if (configTemplateTag(); as configTemplateTag) {\n  <div\n    class=\"w-full h-full relative\"\n    LibsUiComponentsScrollOverlayDirective\n    (outScrollBottom)=\"handlerScrollBottom()\">\n    <div\n      class=\"relative max-h-[150px] h-full {{ configTemplateTag.classIncludeContainer }}\"\n      [ngClass]=\"{ 'flex flex-wrap': !configTemplateTag.ignoreItemFlexWrap }\"\n      [class.min-h-[45px]]=\"!loading() && (!items() || !items().length)\"\n      [class.min-h-[94px]]=\"loading() && items()\">\n      @for (item of items(); track item()) {\n        <div\n          [class.libs-ui-disable]=\"loading() || disable()\"\n          [class.pointer-events-none]=\"loading() || disable()\"\n          [class]=\"item().classContainerItem\">\n          @if (item().bullet; as bullet) {\n            <div\n              [class]=\"item().classItem || 'rounded-[10px] px-[8px] py-[1px] mb-[8px] mr-[8px]'\"\n              [class.w-max]=\"configTemplateTag?.ignoreItemFlexWrap\"\n              [style.background-color]=\"bullet().backgroundColor\"\n              [style.color]=\"bullet().color\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\">\n              <span [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          } @else {\n            @let constHtmlIsSelected = item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length;\n            <div\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\"\n              [class]=\"item().classItem || 'rounded-[20px] mb-[8px] mr-[8px] py-[4px] px-[8px] flex items-center cursor-pointer'\"\n              [class.bg-[var(--libs-ui-color-light-2)]]=\"constHtmlIsSelected\"\n              [class.text-[var(--libs-ui-color-default)]]=\"constHtmlIsSelected\"\n              [class.bg-white]=\"!constHtmlIsSelected\"\n              [class.text-[#6a7383]]=\"!constHtmlIsSelected\"\n              [class.libs-ui-border-general]=\"!constHtmlIsSelected\">\n              @if (constHtmlIsSelected) {\n                <div class=\"mr-[8px] text-[12px] libs-ui-icon-check before:text-[var(--libs-ui-color-default)]\"></div>\n              }\n              <span\n                class=\"libs-ui-font-h6r break-word\"\n                [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          }\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] ' + (config()?.textNoDataClassInclude ?? 'py-[4px] flex items-center justify-center w-full')\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n            {{ constHtmlTextNoData | translate }}\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            {{ constHtmlTextSearchNoData | translate }}\n          }\n          @if (loading()) {\n            &nbsp;\n          }\n        </div>\n      }\n    </div>\n    @if (loading()) {\n      <div class=\"w-full h-full absolute top-0\">\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      </div>\n    }\n  </div>\n}\n" }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -2348,7 +2377,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         item.specific_loadImgError = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListTextComponent, isStandalone: true, selector: "libs_ui-components-list-templates_text", viewQueries: [{ propertyName: "virtualScrollerComponent", first: true, predicate: VirtualScrollerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <!-- class.h-full required for ScrollOverlay directive to function correctly -->\n      <div\n        #elementScroll\n        [style.height]=\"isShowHeightCalculate() ? heightViewPort() + 'px' : '100%'\"\n        class=\"w-full\"\n        [class.h-full]=\"!isShowHeightCalculate()\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller\n            #scroll\n            [parentScroll]=\"elementScroll\"\n            [items]=\"items()\"\n            class=\"h-full\">\n            <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: scroll.viewPortItems }\" />\n          </virtual-scroller>\n        }\n        @if (configTemplateText.notUseVirtualScroll) {\n          <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: items() }\" />\n        }\n      </div>\n    }\n    @if (!items() || !items().length) {\n      <libs_ui-components-list-templates-no_data\n        [config]=\"config()!\"\n        [keySearch]=\"keySearch()\"\n        [loading]=\"loading()\"\n        [enableNoData]=\"true\"\n        [templateRefNotSearchNoData]=\"templateRefNotSearchNoData()\"\n        [templateRefSearchNoData]=\"templateRefSearchNoData()\" />\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template\n    #listRef\n    let-itemsView=\"itemsView\">\n    @for (item of itemsView; track item()) {\n      @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: fieldKey();\n      @let constHtmlKeySelected = keySelected();\n      <div\n        #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div\n          LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item libs-ui-font-h5r flex ' + (item().classItem || '')\"\n          [class.items-center]=\"!item().itemAlignStart\"\n          [class.items-start]=\"item().itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly() && !item().hoverDanger\"\n          [class.libs-ui-bg-list-active]=\"!clickExactly() && constHtmlKeySelected === constHtmlKeyItem\"\n          [class.!pl-[16px]]=\"paddingLeftItem()\"\n          [class.bg-[#ffffff]]=\"clickExactly()\"\n          [class.libs-ui-bg-list-hover-ffffff]=\"item().disable\"\n          [class.cursor-default]=\"item().disable\"\n          [class.!py-[2px]]=\"clickExactly()\"\n          [class.!pr-[48px]]=\"constHtmlKeySelected === constHtmlKeyItem && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort) && !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{ 'pointer-events-none libs-ui-disable': loading() || disable() || ((constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem()) }\"\n          (click)=\"handlerClickRelative($event, item())\"\n          (keydown.enter)=\"handlerClickRelative($event, item())\">\n          @if ((item().bullet | LibsUiPipesConvertObjectToSignalPipe)?.(); as bullet) {\n            <span\n              class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.backgroundColor]=\"bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\"></span>\n          }\n          @if ((item().avatarConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as avatarConfig) {\n            <libs_ui-components-avatar\n              [typeShape]=\"avatarConfig.typeShape ?? 'circle'\"\n              [classInclude]=\"avatarConfig.classInclude\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\"\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          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"\n                configTemplateText.getImage\n                  ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage) : item() | async)\n                  : item()[configTemplateText.fieldGetImage || '']\n              \"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              alt=\"\"\n              [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n              [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n              (error)=\"handlerImageError($event, item())\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\" />\n          }\n          @if ((item().buttonLeftConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as buttonLeft) {\n            @if (item().hrefButton) {\n              <a\n                [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n                [href]=\"item().hrefButton\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </a>\n            }\n            @if (!item().hrefButton) {\n              <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </div>\n            }\n            <ng-template #buttonLeftTemplate>\n              <libs_ui-components-buttons-button\n                class=\"w-full\"\n                [type]=\"buttonLeft.type ?? 'button-link-primary'\"\n                [label]=\"buttonLeft.label ?? ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable ?? false\"\n                [classIconLeft]=\"buttonLeft.classIconLeft ? buttonLeft.classIconLeft + ' flex mr-[8px] text-[12px]' : ''\"\n                [classInclude]=\"(buttonLeft.classInclude ?? '') + ' w-full'\"\n                [classLabel]=\"buttonLeft.classLabel ?? 'libs-ui-font-h4r'\"\n                [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n                [styleIconLeft]=\"buttonLeft.styleIconLeft | LibsUiPipesConvertSignalToObjectPipe\"\n                [styleButton]=\"buttonLeft.styleButton | LibsUiPipesConvertSignalToObjectPipe\"\n                (outClick)=\"handlerSelectItem($event, item())\" />\n            </ng-template>\n          }\n          @if ((item().switchConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as switchConfig) {\n            <libs_ui-components-switch\n              [active]=\"switchConfig.active\"\n              (outSwitch)=\"handlerSelectItem('click', item())\" />\n          }\n          @if (item().classIconLeft) {\n            <i [class]=\"item().classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n          }\n          @if (!item().ignoreShowFieldLabel && !configTemplateText.rows) {\n            @if (((item().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe) ?? { type: 'text' }; as popoverLabel) {\n              @let constHtmlConfigPopover = popoverLabel.config ?? configTemplateText.configLabelPopover?.();\n\n              <libs_ui-components-popover\n                [type]=\"popoverLabel.type || 'text'\"\n                [elementRefCustom]=\"popoverLabel.type === 'text' ? undefined : itemRef\"\n                [ignoreShowPopover]=\"popoverLabel.ignoreShowPopover\"\n                [config]=\"constHtmlConfigPopover | LibsUiPipesCloneObjectPipe: true : { zIndex: zIndex() + 1 }\"\n                [innerHtml]=\"item().fieldLabel\"\n                [classInclude]=\"item().classInclude\"\n                (outEvent)=\"handlerSelectItem($event, item())\" />\n            }\n          }\n          @if ((item().fieldPopover | LibsUiPipesConvertObjectToSignalPipe)?.(); as popover) {\n            <libs_ui-components-popover\n              class=\"{{ popover.classInclude }}\"\n              [config]=\"popover.config | LibsUiPipesGetValueOfObjectPipe: ''\">\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              } @else {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows\n              class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"constHtmlKeySelected\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event, $event.item, $event.action)\" />\n          }\n          @if (configTemplateText.getComponentOutlet) {\n            <ng-container\n              *ngComponentOutlet=\"\n                item() | LibsUiPipesGetValueOfObjectPipe: fieldKey() : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getComponentOutlet : item() | async;\n                inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\n              \" />\n          }\n\n          @if ((constHtmlKeySelected === constHtmlKeyItem || (constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length)) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check ' + (configTemplateText.classIncludeIconSelected || 'right-[12px]')\"></i>\n          }\n          @if (constHtmlKeySelected === constHtmlKeyItem && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow\n                [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText?.itemSort?.()?.mode || ''\"\n                [fieldSort]=\"constHtmlKeyItem\"\n                (outChange)=\"handlerSort($event)\" />\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n}\n", styles: [".libs-ui-list-template-text-item{padding:6px 16px;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i1$1.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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { 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: "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: 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: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { 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: "directive", type: LibsUiComponentsListHighlightKeySearchDirective, selector: "[LibsUiComponentsListHighlightKeySearchDirective]", inputs: ["isHighlight", "keySearch", "classHighlight"] }, { kind: "component", type: LibsUiComponentsListRowsComponent, selector: "libs_ui-components-list-templates_rows", inputs: ["configTemplate", "item", "keySelected", "fieldKey", "zIndex"], outputs: ["outChangStageFlagMousePopover", "outEvent"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "pipe", type: LibsUiPipesConvertSignalToObjectPipe, name: "LibsUiPipesConvertSignalToObjectPipe" }, { kind: "component", type: LibsUiComponentsListTemplatesNoDataComponent, selector: "libs_ui-components-list-templates-no_data", inputs: ["config", "keySearch", "loading", "enableNoData", "templateRefNotSearchNoData", "templateRefSearchNoData"] }, { kind: "pipe", type: LibsUiPipesCloneObjectPipe, name: "LibsUiPipesCloneObjectPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListTextComponent, isStandalone: true, selector: "libs_ui-components-list-templates_text", viewQueries: [{ propertyName: "virtualScrollerComponent", first: true, predicate: VirtualScrollerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <!-- class.h-full required for ScrollOverlay directive to function correctly -->\n      <div\n        #elementScroll\n        [style.height]=\"isShowHeightCalculate() ? heightViewPort() + 'px' : '100%'\"\n        class=\"w-full\"\n        [class.h-full]=\"!isShowHeightCalculate()\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller\n            #scroll\n            [parentScroll]=\"elementScroll\"\n            [items]=\"items()\"\n            class=\"h-full\">\n            <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: scroll.viewPortItems }\" />\n          </virtual-scroller>\n        }\n        @if (configTemplateText.notUseVirtualScroll) {\n          <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: items() }\" />\n        }\n      </div>\n    }\n    @if (!items() || !items().length) {\n      <libs_ui-components-list-templates-no_data\n        [config]=\"config()!\"\n        [keySearch]=\"keySearch()\"\n        [loading]=\"loading()\"\n        [enableNoData]=\"true\"\n        [templateRefNotSearchNoData]=\"templateRefNotSearchNoData()\"\n        [templateRefSearchNoData]=\"templateRefSearchNoData()\" />\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template\n    #listRef\n    let-itemsView=\"itemsView\">\n    @for (item of itemsView; track item()) {\n      @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: fieldKey();\n      @let constHtmlKeySelected = keySelected();\n      <div\n        #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div\n          LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item libs-ui-font-h5r flex ' + (item().classItem || '')\"\n          [class.items-center]=\"!item().itemAlignStart\"\n          [class.items-start]=\"item().itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly() && !item().hoverDanger\"\n          [class.libs-ui-bg-list-active]=\"!clickExactly() && constHtmlKeySelected === constHtmlKeyItem\"\n          [class.!pl-[16px]]=\"paddingLeftItem()\"\n          [class.bg-[#ffffff]]=\"clickExactly()\"\n          [class.libs-ui-bg-list-hover-ffffff]=\"item().disable\"\n          [class.cursor-default]=\"item().disable\"\n          [class.!py-[2px]]=\"clickExactly()\"\n          [class.!pr-[48px]]=\"constHtmlKeySelected === constHtmlKeyItem && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort) && !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{ 'pointer-events-none libs-ui-disable': loading() || disable() || ((constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem()) }\"\n          (click)=\"handlerClickRelative($event, item())\"\n          (keydown.enter)=\"handlerClickRelative($event, item())\">\n          @if ((item().bullet | LibsUiPipesConvertObjectToSignalPipe)?.(); as bullet) {\n            <span\n              class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.backgroundColor]=\"bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\"></span>\n          }\n          @if ((item().avatarConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as avatarConfig) {\n            <libs_ui-components-avatar\n              [typeShape]=\"avatarConfig.typeShape ?? 'circle'\"\n              [classInclude]=\"avatarConfig.classInclude\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\"\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          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"\n                configTemplateText.getImage\n                  ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage) : item() | async)\n                  : item()[configTemplateText.fieldGetImage || '']\n              \"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              alt=\"\"\n              [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n              [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n              (error)=\"handlerImageError($event, item())\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\" />\n          }\n          @if ((item().buttonLeftConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as buttonLeft) {\n            @if (item().hrefButton) {\n              <a\n                [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n                [href]=\"item().hrefButton\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </a>\n            }\n            @if (!item().hrefButton) {\n              <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </div>\n            }\n            <ng-template #buttonLeftTemplate>\n              <libs_ui-components-buttons-button\n                class=\"w-full\"\n                [type]=\"buttonLeft.type ?? 'button-link-primary'\"\n                [label]=\"buttonLeft.label ?? ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable ?? false\"\n                [classIconLeft]=\"buttonLeft.classIconLeft ? buttonLeft.classIconLeft + ' flex mr-[8px] text-[12px]' : ''\"\n                [classInclude]=\"(buttonLeft.classInclude ?? '') + ' w-full'\"\n                [classLabel]=\"buttonLeft.classLabel ?? 'libs-ui-font-h4ri'\"\n                [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n                [styleIconLeft]=\"buttonLeft.styleIconLeft | LibsUiPipesConvertSignalToObjectPipe\"\n                [styleButton]=\"buttonLeft.styleButton | LibsUiPipesConvertSignalToObjectPipe\"\n                (outClick)=\"handlerSelectItem($event, item())\" />\n            </ng-template>\n          }\n          @if ((item().switchConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as switchConfig) {\n            <libs_ui-components-switch\n              [active]=\"switchConfig.active\"\n              (outSwitch)=\"handlerSelectItem('click', item())\" />\n          }\n          @if (item().classIconLeft) {\n            <i [class]=\"item().classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n          }\n          @if (!item().ignoreShowFieldLabel && !configTemplateText.rows) {\n            @if (((item().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe) ?? { type: 'text' }; as popoverLabel) {\n              @let constHtmlConfigPopover = popoverLabel.config ?? configTemplateText.configLabelPopover?.();\n\n              <libs_ui-components-popover\n                [type]=\"popoverLabel.type || 'text'\"\n                [elementRefCustom]=\"popoverLabel.type === 'text' ? undefined : itemRef\"\n                [ignoreShowPopover]=\"popoverLabel.ignoreShowPopover\"\n                [config]=\"constHtmlConfigPopover | LibsUiPipesCloneObjectPipe: true : { zIndex: zIndex() + 1 }\"\n                [innerHtml]=\"item().fieldLabel\"\n                [classInclude]=\"item().classInclude\"\n                (outEvent)=\"handlerSelectItem($event, item())\" />\n            }\n          }\n          @if ((item().fieldPopover | LibsUiPipesConvertObjectToSignalPipe)?.(); as popover) {\n            <libs_ui-components-popover\n              class=\"{{ popover.classInclude }}\"\n              [config]=\"popover.config | LibsUiPipesGetValueOfObjectPipe: ''\">\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              } @else {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows\n              class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"constHtmlKeySelected\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event, $event.item, $event.action)\" />\n          }\n          @if (configTemplateText.getComponentOutlet) {\n            <ng-container\n              *ngComponentOutlet=\"\n                item() | LibsUiPipesGetValueOfObjectPipe: fieldKey() : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getComponentOutlet : item() | async;\n                inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\n              \" />\n          }\n\n          @if ((constHtmlKeySelected === constHtmlKeyItem || (constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length)) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check ' + (configTemplateText.classIncludeIconSelected || 'right-[12px]')\"></i>\n          }\n          @if (constHtmlKeySelected === constHtmlKeyItem && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow\n                [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText?.itemSort?.()?.mode || ''\"\n                [fieldSort]=\"constHtmlKeyItem\"\n                (outChange)=\"handlerSort($event)\" />\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n}\n", styles: [".libs-ui-list-template-text-item{padding:6px 16px;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i1$1.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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { 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: "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: 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: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { 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: "directive", type: LibsUiComponentsListHighlightKeySearchDirective, selector: "[LibsUiComponentsListHighlightKeySearchDirective]", inputs: ["isHighlight", "keySearch", "classHighlight"] }, { kind: "component", type: LibsUiComponentsListRowsComponent, selector: "libs_ui-components-list-templates_rows", inputs: ["configTemplate", "item", "keySelected", "fieldKey", "zIndex"], outputs: ["outChangStageFlagMousePopover", "outEvent"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "pipe", type: LibsUiPipesConvertSignalToObjectPipe, name: "LibsUiPipesConvertSignalToObjectPipe" }, { kind: "component", type: LibsUiComponentsListTemplatesNoDataComponent, selector: "libs_ui-components-list-templates-no_data", inputs: ["config", "keySearch", "loading", "enableNoData", "templateRefNotSearchNoData", "templateRefSearchNoData"] }, { kind: "pipe", type: LibsUiPipesCloneObjectPipe, name: "LibsUiPipesCloneObjectPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListTextComponent, decorators: [{
             type: Component,
@@ -2375,7 +2404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiPipesConvertSignalToObjectPipe,
                         LibsUiComponentsListTemplatesNoDataComponent,
                         LibsUiPipesCloneObjectPipe
-                    ], template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <!-- class.h-full required for ScrollOverlay directive to function correctly -->\n      <div\n        #elementScroll\n        [style.height]=\"isShowHeightCalculate() ? heightViewPort() + 'px' : '100%'\"\n        class=\"w-full\"\n        [class.h-full]=\"!isShowHeightCalculate()\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller\n            #scroll\n            [parentScroll]=\"elementScroll\"\n            [items]=\"items()\"\n            class=\"h-full\">\n            <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: scroll.viewPortItems }\" />\n          </virtual-scroller>\n        }\n        @if (configTemplateText.notUseVirtualScroll) {\n          <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: items() }\" />\n        }\n      </div>\n    }\n    @if (!items() || !items().length) {\n      <libs_ui-components-list-templates-no_data\n        [config]=\"config()!\"\n        [keySearch]=\"keySearch()\"\n        [loading]=\"loading()\"\n        [enableNoData]=\"true\"\n        [templateRefNotSearchNoData]=\"templateRefNotSearchNoData()\"\n        [templateRefSearchNoData]=\"templateRefSearchNoData()\" />\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template\n    #listRef\n    let-itemsView=\"itemsView\">\n    @for (item of itemsView; track item()) {\n      @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: fieldKey();\n      @let constHtmlKeySelected = keySelected();\n      <div\n        #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div\n          LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item libs-ui-font-h5r flex ' + (item().classItem || '')\"\n          [class.items-center]=\"!item().itemAlignStart\"\n          [class.items-start]=\"item().itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly() && !item().hoverDanger\"\n          [class.libs-ui-bg-list-active]=\"!clickExactly() && constHtmlKeySelected === constHtmlKeyItem\"\n          [class.!pl-[16px]]=\"paddingLeftItem()\"\n          [class.bg-[#ffffff]]=\"clickExactly()\"\n          [class.libs-ui-bg-list-hover-ffffff]=\"item().disable\"\n          [class.cursor-default]=\"item().disable\"\n          [class.!py-[2px]]=\"clickExactly()\"\n          [class.!pr-[48px]]=\"constHtmlKeySelected === constHtmlKeyItem && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort) && !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{ 'pointer-events-none libs-ui-disable': loading() || disable() || ((constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem()) }\"\n          (click)=\"handlerClickRelative($event, item())\"\n          (keydown.enter)=\"handlerClickRelative($event, item())\">\n          @if ((item().bullet | LibsUiPipesConvertObjectToSignalPipe)?.(); as bullet) {\n            <span\n              class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.backgroundColor]=\"bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\"></span>\n          }\n          @if ((item().avatarConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as avatarConfig) {\n            <libs_ui-components-avatar\n              [typeShape]=\"avatarConfig.typeShape ?? 'circle'\"\n              [classInclude]=\"avatarConfig.classInclude\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\"\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          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"\n                configTemplateText.getImage\n                  ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage) : item() | async)\n                  : item()[configTemplateText.fieldGetImage || '']\n              \"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              alt=\"\"\n              [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n              [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n              (error)=\"handlerImageError($event, item())\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\" />\n          }\n          @if ((item().buttonLeftConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as buttonLeft) {\n            @if (item().hrefButton) {\n              <a\n                [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n                [href]=\"item().hrefButton\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </a>\n            }\n            @if (!item().hrefButton) {\n              <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </div>\n            }\n            <ng-template #buttonLeftTemplate>\n              <libs_ui-components-buttons-button\n                class=\"w-full\"\n                [type]=\"buttonLeft.type ?? 'button-link-primary'\"\n                [label]=\"buttonLeft.label ?? ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable ?? false\"\n                [classIconLeft]=\"buttonLeft.classIconLeft ? buttonLeft.classIconLeft + ' flex mr-[8px] text-[12px]' : ''\"\n                [classInclude]=\"(buttonLeft.classInclude ?? '') + ' w-full'\"\n                [classLabel]=\"buttonLeft.classLabel ?? 'libs-ui-font-h4r'\"\n                [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n                [styleIconLeft]=\"buttonLeft.styleIconLeft | LibsUiPipesConvertSignalToObjectPipe\"\n                [styleButton]=\"buttonLeft.styleButton | LibsUiPipesConvertSignalToObjectPipe\"\n                (outClick)=\"handlerSelectItem($event, item())\" />\n            </ng-template>\n          }\n          @if ((item().switchConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as switchConfig) {\n            <libs_ui-components-switch\n              [active]=\"switchConfig.active\"\n              (outSwitch)=\"handlerSelectItem('click', item())\" />\n          }\n          @if (item().classIconLeft) {\n            <i [class]=\"item().classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n          }\n          @if (!item().ignoreShowFieldLabel && !configTemplateText.rows) {\n            @if (((item().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe) ?? { type: 'text' }; as popoverLabel) {\n              @let constHtmlConfigPopover = popoverLabel.config ?? configTemplateText.configLabelPopover?.();\n\n              <libs_ui-components-popover\n                [type]=\"popoverLabel.type || 'text'\"\n                [elementRefCustom]=\"popoverLabel.type === 'text' ? undefined : itemRef\"\n                [ignoreShowPopover]=\"popoverLabel.ignoreShowPopover\"\n                [config]=\"constHtmlConfigPopover | LibsUiPipesCloneObjectPipe: true : { zIndex: zIndex() + 1 }\"\n                [innerHtml]=\"item().fieldLabel\"\n                [classInclude]=\"item().classInclude\"\n                (outEvent)=\"handlerSelectItem($event, item())\" />\n            }\n          }\n          @if ((item().fieldPopover | LibsUiPipesConvertObjectToSignalPipe)?.(); as popover) {\n            <libs_ui-components-popover\n              class=\"{{ popover.classInclude }}\"\n              [config]=\"popover.config | LibsUiPipesGetValueOfObjectPipe: ''\">\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              } @else {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows\n              class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"constHtmlKeySelected\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event, $event.item, $event.action)\" />\n          }\n          @if (configTemplateText.getComponentOutlet) {\n            <ng-container\n              *ngComponentOutlet=\"\n                item() | LibsUiPipesGetValueOfObjectPipe: fieldKey() : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getComponentOutlet : item() | async;\n                inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\n              \" />\n          }\n\n          @if ((constHtmlKeySelected === constHtmlKeyItem || (constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length)) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check ' + (configTemplateText.classIncludeIconSelected || 'right-[12px]')\"></i>\n          }\n          @if (constHtmlKeySelected === constHtmlKeyItem && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow\n                [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText?.itemSort?.()?.mode || ''\"\n                [fieldSort]=\"constHtmlKeyItem\"\n                (outChange)=\"handlerSort($event)\" />\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n}\n", styles: [".libs-ui-list-template-text-item{padding:6px 16px;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"] }]
+                    ], template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <!-- class.h-full required for ScrollOverlay directive to function correctly -->\n      <div\n        #elementScroll\n        [style.height]=\"isShowHeightCalculate() ? heightViewPort() + 'px' : '100%'\"\n        class=\"w-full\"\n        [class.h-full]=\"!isShowHeightCalculate()\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller\n            #scroll\n            [parentScroll]=\"elementScroll\"\n            [items]=\"items()\"\n            class=\"h-full\">\n            <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: scroll.viewPortItems }\" />\n          </virtual-scroller>\n        }\n        @if (configTemplateText.notUseVirtualScroll) {\n          <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: items() }\" />\n        }\n      </div>\n    }\n    @if (!items() || !items().length) {\n      <libs_ui-components-list-templates-no_data\n        [config]=\"config()!\"\n        [keySearch]=\"keySearch()\"\n        [loading]=\"loading()\"\n        [enableNoData]=\"true\"\n        [templateRefNotSearchNoData]=\"templateRefNotSearchNoData()\"\n        [templateRefSearchNoData]=\"templateRefSearchNoData()\" />\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template\n    #listRef\n    let-itemsView=\"itemsView\">\n    @for (item of itemsView; track item()) {\n      @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: fieldKey();\n      @let constHtmlKeySelected = keySelected();\n      <div\n        #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div\n          LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item libs-ui-font-h5r flex ' + (item().classItem || '')\"\n          [class.items-center]=\"!item().itemAlignStart\"\n          [class.items-start]=\"item().itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly() && !item().hoverDanger\"\n          [class.libs-ui-bg-list-active]=\"!clickExactly() && constHtmlKeySelected === constHtmlKeyItem\"\n          [class.!pl-[16px]]=\"paddingLeftItem()\"\n          [class.bg-[#ffffff]]=\"clickExactly()\"\n          [class.libs-ui-bg-list-hover-ffffff]=\"item().disable\"\n          [class.cursor-default]=\"item().disable\"\n          [class.!py-[2px]]=\"clickExactly()\"\n          [class.!pr-[48px]]=\"constHtmlKeySelected === constHtmlKeyItem && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort) && !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{ 'pointer-events-none libs-ui-disable': loading() || disable() || ((constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem()) }\"\n          (click)=\"handlerClickRelative($event, item())\"\n          (keydown.enter)=\"handlerClickRelative($event, item())\">\n          @if ((item().bullet | LibsUiPipesConvertObjectToSignalPipe)?.(); as bullet) {\n            <span\n              class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.backgroundColor]=\"bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\"></span>\n          }\n          @if ((item().avatarConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as avatarConfig) {\n            <libs_ui-components-avatar\n              [typeShape]=\"avatarConfig.typeShape ?? 'circle'\"\n              [classInclude]=\"avatarConfig.classInclude\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\"\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          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"\n                configTemplateText.getImage\n                  ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage) : item() | async)\n                  : item()[configTemplateText.fieldGetImage || '']\n              \"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              alt=\"\"\n              [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n              [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n              (error)=\"handlerImageError($event, item())\"\n              (click)=\"handlerSelectItem($event, item())\"\n              (keydown.enter)=\"handlerSelectItem($event, item())\" />\n          }\n          @if ((item().buttonLeftConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as buttonLeft) {\n            @if (item().hrefButton) {\n              <a\n                [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n                [href]=\"item().hrefButton\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </a>\n            }\n            @if (!item().hrefButton) {\n              <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </div>\n            }\n            <ng-template #buttonLeftTemplate>\n              <libs_ui-components-buttons-button\n                class=\"w-full\"\n                [type]=\"buttonLeft.type ?? 'button-link-primary'\"\n                [label]=\"buttonLeft.label ?? ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable ?? false\"\n                [classIconLeft]=\"buttonLeft.classIconLeft ? buttonLeft.classIconLeft + ' flex mr-[8px] text-[12px]' : ''\"\n                [classInclude]=\"(buttonLeft.classInclude ?? '') + ' w-full'\"\n                [classLabel]=\"buttonLeft.classLabel ?? 'libs-ui-font-h4ri'\"\n                [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n                [styleIconLeft]=\"buttonLeft.styleIconLeft | LibsUiPipesConvertSignalToObjectPipe\"\n                [styleButton]=\"buttonLeft.styleButton | LibsUiPipesConvertSignalToObjectPipe\"\n                (outClick)=\"handlerSelectItem($event, item())\" />\n            </ng-template>\n          }\n          @if ((item().switchConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as switchConfig) {\n            <libs_ui-components-switch\n              [active]=\"switchConfig.active\"\n              (outSwitch)=\"handlerSelectItem('click', item())\" />\n          }\n          @if (item().classIconLeft) {\n            <i [class]=\"item().classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n          }\n          @if (!item().ignoreShowFieldLabel && !configTemplateText.rows) {\n            @if (((item().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe) ?? { type: 'text' }; as popoverLabel) {\n              @let constHtmlConfigPopover = popoverLabel.config ?? configTemplateText.configLabelPopover?.();\n\n              <libs_ui-components-popover\n                [type]=\"popoverLabel.type || 'text'\"\n                [elementRefCustom]=\"popoverLabel.type === 'text' ? undefined : itemRef\"\n                [ignoreShowPopover]=\"popoverLabel.ignoreShowPopover\"\n                [config]=\"constHtmlConfigPopover | LibsUiPipesCloneObjectPipe: true : { zIndex: zIndex() + 1 }\"\n                [innerHtml]=\"item().fieldLabel\"\n                [classInclude]=\"item().classInclude\"\n                (outEvent)=\"handlerSelectItem($event, item())\" />\n            }\n          }\n          @if ((item().fieldPopover | LibsUiPipesConvertObjectToSignalPipe)?.(); as popover) {\n            <libs_ui-components-popover\n              class=\"{{ popover.classInclude }}\"\n              [config]=\"popover.config | LibsUiPipesGetValueOfObjectPipe: ''\">\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              } @else {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows\n              class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"constHtmlKeySelected\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event, $event.item, $event.action)\" />\n          }\n          @if (configTemplateText.getComponentOutlet) {\n            <ng-container\n              *ngComponentOutlet=\"\n                item() | LibsUiPipesGetValueOfObjectPipe: fieldKey() : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getComponentOutlet : item() | async;\n                inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\n              \" />\n          }\n\n          @if ((constHtmlKeySelected === constHtmlKeyItem || (constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length)) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check ' + (configTemplateText.classIncludeIconSelected || 'right-[12px]')\"></i>\n          }\n          @if (constHtmlKeySelected === constHtmlKeyItem && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow\n                [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText?.itemSort?.()?.mode || ''\"\n                [fieldSort]=\"constHtmlKeyItem\"\n                (outChange)=\"handlerSort($event)\" />\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n}\n", styles: [".libs-ui-list-template-text-item{padding:6px 16px;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -3051,11 +3080,11 @@ class LibsUiComponentsListComponent {
         this.isDestroyed.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListComponent, isStandalone: true, selector: "libs_ui-components-list", inputs: { hiddenInputSearch: { classPropertyName: "hiddenInputSearch", publicName: "hiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, dropdownTabKeyActive: { classPropertyName: "dropdownTabKeyActive", publicName: "dropdownTabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, paddingLeftItem: { classPropertyName: "paddingLeftItem", publicName: "paddingLeftItem", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, autoSelectedFirstItemCallOutsideBefore: { classPropertyName: "autoSelectedFirstItemCallOutsideBefore", publicName: "autoSelectedFirstItemCallOutsideBefore", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null }, searchPadding: { classPropertyName: "searchPadding", publicName: "searchPadding", isSignal: true, isRequired: false, transformFunction: null }, dividerClassInclude: { classPropertyName: "dividerClassInclude", publicName: "dividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, hasDivider: { classPropertyName: "hasDivider", publicName: "hasDivider", isSignal: true, isRequired: false, transformFunction: null }, buttonsOther: { classPropertyName: "buttonsOther", publicName: "buttonsOther", isSignal: true, isRequired: false, transformFunction: null }, hasButtonUnSelectOption: { classPropertyName: "hasButtonUnSelectOption", publicName: "hasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, clickExactly: { classPropertyName: "clickExactly", publicName: "clickExactly", isSignal: true, isRequired: false, transformFunction: null }, backgroundListCustom: { classPropertyName: "backgroundListCustom", publicName: "backgroundListCustom", isSignal: true, isRequired: false, transformFunction: null }, maxItemShow: { classPropertyName: "maxItemShow", publicName: "maxItemShow", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, multiKeySelected: { classPropertyName: "multiKeySelected", publicName: "multiKeySelected", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, keysHiddenItem: { classPropertyName: "keysHiddenItem", publicName: "keysHiddenItem", isSignal: true, isRequired: false, transformFunction: null }, focusInputSearch: { classPropertyName: "focusInputSearch", publicName: "focusInputSearch", isSignal: true, isRequired: false, transformFunction: null }, skipFocusInputWhenKeySearchStoreUndefined: { classPropertyName: "skipFocusInputWhenKeySearchStoreUndefined", publicName: "skipFocusInputWhenKeySearchStoreUndefined", isSignal: true, isRequired: false, transformFunction: null }, functionGetItemsAutoAddList: { classPropertyName: "functionGetItemsAutoAddList", publicName: "functionGetItemsAutoAddList", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, showValidateBottom: { classPropertyName: "showValidateBottom", publicName: "showValidateBottom", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, loadingIconSize: { classPropertyName: "loadingIconSize", publicName: "loadingIconSize", isSignal: true, isRequired: false, transformFunction: null }, templateRefSearchNoData: { classPropertyName: "templateRefSearchNoData", publicName: "templateRefSearchNoData", isSignal: true, isRequired: false, transformFunction: null }, templateRefNotSearchNoData: { classPropertyName: "templateRefNotSearchNoData", publicName: "templateRefNotSearchNoData", isSignal: true, isRequired: false, transformFunction: null }, resetKeyWhenSelectAllKeyDropdown: { classPropertyName: "resetKeyWhenSelectAllKeyDropdown", publicName: "resetKeyWhenSelectAllKeyDropdown", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outUnSelectMultiKey: "outUnSelectMultiKey", outClickButtonOther: "outClickButtonOther", outFieldKey: "outFieldKey", outChangeView: "outChangeView", outKeySearch: "outKeySearch", outLoading: "outLoading", outFunctionsControl: "outFunctionsControl", outChangStageFlagMousePopover: "outChangStageFlagMousePopover", outLoadItemsComplete: "outLoadItemsComplete" }, viewQueries: [{ propertyName: "listViewElementRef", first: true, predicate: ["listViewContainer"], descendants: true, isSignal: true }, { propertyName: "contentElementRef", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow()\"\n  [class.h-full]=\"!maxItemShow() || maxItemShow() === -1\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || loading() || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n\n  @if (!showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n  @if (!hiddenInputSearch()) {\n    <libs_ui-components-inputs-search\n      [searchConfig]=\"searchConfig()\"\n      [class.px-[12px]]=\"searchPadding()\"\n      [class]=\"searchConfig().classCoverInputSearch\"\n      [disable]=\"disable() || loading() || false\"\n      (outSearch)=\"handlerSearch($event)\"\n      (outFunctionsControl)=\"handlerFunctionControlInputSearch($event)\" />\n  }\n  @if (config()?.configDescriptionGroup?.(); as description) {\n    <div [class]=\"description?.classInclude\">\n      <libs_ui-components-popover [config]=\"description?.tooltipDescription()\">\n        <div [class]=\"description?.classTextDescriptionInclude\">{{ description.textDescription }}</div>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (!hiddenInputSearch() && hasDivider() && (!config()?.ignoreShowDataWhenNotSearch || keySearchStore())) {\n    <div\n      class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude() : '' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\"></div>\n  }\n  <div class=\"flex flex-col {{ config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch ? 'h-[353px]' : 'h-full' }}\">\n    <div\n      #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\"></div>\n\n    @for (buttonOther of buttonsOther(); track $index) {\n      <div\n        class=\"bg-[#ffffff] libs-ui-border-top-general\"\n        [class.rounded-b-[4px]]=\"$last && !hasButtonUnSelectOption()\">\n        <libs_ui-components-buttons-button\n          [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '') + ' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude : '' }}\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"buttonOther.disable || disable() || loading() || false\"\n          (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n      </div>\n    }\n    @if (hasButtonUnSelectOption()) {\n      <div class=\"bg-[#ffffff] rounded-b-[4px] libs-ui-border-top-general\">\n        <libs_ui-components-buttons-button\n          label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-full text-left rounded-0\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n          (outClick)=\"handlerRemoveKeySelected()\" />\n      </div>\n    }\n  </div>\n  @if (showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div\n      [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      @let constHtmlMessage = validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID;\n      <span\n        class=\"libs-ui-text-error libs-ui-font-h7r\"\n        [innerHtml]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsInputsSearchComponent, selector: "libs_ui-components-inputs-search", inputs: ["disable", "readonly", "searchConfig", "ignoreAutoComplete", "debounceTime", "ignoreStopPropagationEvent", "focusTimeOut", "blurTimeOut"], outputs: ["outSearch", "outValueChange", "outIconLeft", "outIconRight", "outFocusAndBlur", "outFunctionsControl"] }, { 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListComponent, isStandalone: true, selector: "libs_ui-components-list", inputs: { hiddenInputSearch: { classPropertyName: "hiddenInputSearch", publicName: "hiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, dropdownTabKeyActive: { classPropertyName: "dropdownTabKeyActive", publicName: "dropdownTabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, paddingLeftItem: { classPropertyName: "paddingLeftItem", publicName: "paddingLeftItem", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, autoSelectedFirstItemCallOutsideBefore: { classPropertyName: "autoSelectedFirstItemCallOutsideBefore", publicName: "autoSelectedFirstItemCallOutsideBefore", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null }, searchPadding: { classPropertyName: "searchPadding", publicName: "searchPadding", isSignal: true, isRequired: false, transformFunction: null }, dividerClassInclude: { classPropertyName: "dividerClassInclude", publicName: "dividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, hasDivider: { classPropertyName: "hasDivider", publicName: "hasDivider", isSignal: true, isRequired: false, transformFunction: null }, buttonsOther: { classPropertyName: "buttonsOther", publicName: "buttonsOther", isSignal: true, isRequired: false, transformFunction: null }, hasButtonUnSelectOption: { classPropertyName: "hasButtonUnSelectOption", publicName: "hasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, clickExactly: { classPropertyName: "clickExactly", publicName: "clickExactly", isSignal: true, isRequired: false, transformFunction: null }, backgroundListCustom: { classPropertyName: "backgroundListCustom", publicName: "backgroundListCustom", isSignal: true, isRequired: false, transformFunction: null }, maxItemShow: { classPropertyName: "maxItemShow", publicName: "maxItemShow", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, multiKeySelected: { classPropertyName: "multiKeySelected", publicName: "multiKeySelected", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, keysHiddenItem: { classPropertyName: "keysHiddenItem", publicName: "keysHiddenItem", isSignal: true, isRequired: false, transformFunction: null }, focusInputSearch: { classPropertyName: "focusInputSearch", publicName: "focusInputSearch", isSignal: true, isRequired: false, transformFunction: null }, skipFocusInputWhenKeySearchStoreUndefined: { classPropertyName: "skipFocusInputWhenKeySearchStoreUndefined", publicName: "skipFocusInputWhenKeySearchStoreUndefined", isSignal: true, isRequired: false, transformFunction: null }, functionGetItemsAutoAddList: { classPropertyName: "functionGetItemsAutoAddList", publicName: "functionGetItemsAutoAddList", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, showValidateBottom: { classPropertyName: "showValidateBottom", publicName: "showValidateBottom", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, loadingIconSize: { classPropertyName: "loadingIconSize", publicName: "loadingIconSize", isSignal: true, isRequired: false, transformFunction: null }, templateRefSearchNoData: { classPropertyName: "templateRefSearchNoData", publicName: "templateRefSearchNoData", isSignal: true, isRequired: false, transformFunction: null }, templateRefNotSearchNoData: { classPropertyName: "templateRefNotSearchNoData", publicName: "templateRefNotSearchNoData", isSignal: true, isRequired: false, transformFunction: null }, resetKeyWhenSelectAllKeyDropdown: { classPropertyName: "resetKeyWhenSelectAllKeyDropdown", publicName: "resetKeyWhenSelectAllKeyDropdown", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outUnSelectMultiKey: "outUnSelectMultiKey", outClickButtonOther: "outClickButtonOther", outFieldKey: "outFieldKey", outChangeView: "outChangeView", outKeySearch: "outKeySearch", outLoading: "outLoading", outFunctionsControl: "outFunctionsControl", outChangStageFlagMousePopover: "outChangStageFlagMousePopover", outLoadItemsComplete: "outLoadItemsComplete" }, viewQueries: [{ propertyName: "listViewElementRef", first: true, predicate: ["listViewContainer"], descendants: true, isSignal: true }, { propertyName: "contentElementRef", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow()\"\n  [class.h-full]=\"!maxItemShow() || maxItemShow() === -1\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || loading() || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n\n  @if (!showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n  @if (!hiddenInputSearch()) {\n    <libs_ui-components-inputs-search\n      [searchConfig]=\"searchConfig()\"\n      [class.px-[12px]]=\"searchPadding()\"\n      [class]=\"searchConfig().classCoverInputSearch\"\n      [disable]=\"disable() || loading() || false\"\n      (outSearch)=\"handlerSearch($event)\"\n      (outFunctionsControl)=\"handlerFunctionControlInputSearch($event)\" />\n  }\n  @if (config()?.configDescriptionGroup?.(); as description) {\n    <div [class]=\"description?.classInclude\">\n      <libs_ui-components-popover [config]=\"description?.tooltipDescription()\">\n        <div [class]=\"description?.classTextDescriptionInclude\">{{ description.textDescription }}</div>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (!hiddenInputSearch() && hasDivider() && (!config()?.ignoreShowDataWhenNotSearch || keySearchStore())) {\n    <div\n      class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude() : '' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\"></div>\n  }\n  <div class=\"flex flex-col {{ config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch ? 'h-[353px]' : 'h-full' }}\">\n    <div\n      #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\"></div>\n\n    @for (buttonOther of buttonsOther(); track buttonOther) {\n      <div\n        class=\"bg-[#ffffff] libs-ui-border-top-general\"\n        [class.rounded-b-[4px]]=\"$last && !hasButtonUnSelectOption()\">\n        <libs_ui-components-buttons-button\n          [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '') + ' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude : '' }}\"\n          classLabel=\"libs-ui-font-h5ri whitespace-normal\"\n          [disable]=\"buttonOther.disable || disable() || loading() || false\"\n          (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n      </div>\n    }\n    @if (hasButtonUnSelectOption()) {\n      <div class=\"bg-[#ffffff] rounded-b-[4px] libs-ui-border-top-general\">\n        <libs_ui-components-buttons-button\n          label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-full text-left rounded-0\"\n          classLabel=\"libs-ui-font-h5ri whitespace-normal\"\n          [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n          (outClick)=\"handlerRemoveKeySelected()\" />\n      </div>\n    }\n  </div>\n  @if (showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div\n      [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      @let constHtmlMessage = validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID;\n      <span\n        class=\"libs-ui-text-error libs-ui-font-h7r\"\n        [innerHtml]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsInputsSearchComponent, selector: "libs_ui-components-inputs-search", inputs: ["disable", "readonly", "searchConfig", "ignoreAutoComplete", "debounceTime", "ignoreStopPropagationEvent", "focusTimeOut", "blurTimeOut"], outputs: ["outSearch", "outValueChange", "outIconLeft", "outIconRight", "outFocusAndBlur", "outFunctionsControl"] }, { 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, LibsUiComponentsLabelComponent, LibsUiComponentsInputsSearchComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent], template: "<div\n  #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow()\"\n  [class.h-full]=\"!maxItemShow() || maxItemShow() === -1\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || loading() || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n\n  @if (!showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n  @if (!hiddenInputSearch()) {\n    <libs_ui-components-inputs-search\n      [searchConfig]=\"searchConfig()\"\n      [class.px-[12px]]=\"searchPadding()\"\n      [class]=\"searchConfig().classCoverInputSearch\"\n      [disable]=\"disable() || loading() || false\"\n      (outSearch)=\"handlerSearch($event)\"\n      (outFunctionsControl)=\"handlerFunctionControlInputSearch($event)\" />\n  }\n  @if (config()?.configDescriptionGroup?.(); as description) {\n    <div [class]=\"description?.classInclude\">\n      <libs_ui-components-popover [config]=\"description?.tooltipDescription()\">\n        <div [class]=\"description?.classTextDescriptionInclude\">{{ description.textDescription }}</div>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (!hiddenInputSearch() && hasDivider() && (!config()?.ignoreShowDataWhenNotSearch || keySearchStore())) {\n    <div\n      class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude() : '' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\"></div>\n  }\n  <div class=\"flex flex-col {{ config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch ? 'h-[353px]' : 'h-full' }}\">\n    <div\n      #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\"></div>\n\n    @for (buttonOther of buttonsOther(); track $index) {\n      <div\n        class=\"bg-[#ffffff] libs-ui-border-top-general\"\n        [class.rounded-b-[4px]]=\"$last && !hasButtonUnSelectOption()\">\n        <libs_ui-components-buttons-button\n          [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '') + ' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude : '' }}\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"buttonOther.disable || disable() || loading() || false\"\n          (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n      </div>\n    }\n    @if (hasButtonUnSelectOption()) {\n      <div class=\"bg-[#ffffff] rounded-b-[4px] libs-ui-border-top-general\">\n        <libs_ui-components-buttons-button\n          label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-full text-left rounded-0\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n          (outClick)=\"handlerRemoveKeySelected()\" />\n      </div>\n    }\n  </div>\n  @if (showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div\n      [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      @let constHtmlMessage = validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID;\n      <span\n        class=\"libs-ui-text-error libs-ui-font-h7r\"\n        [innerHtml]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"] }]
+            args: [{ selector: 'libs_ui-components-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, LibsUiComponentsLabelComponent, LibsUiComponentsInputsSearchComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent], template: "<div\n  #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow()\"\n  [class.h-full]=\"!maxItemShow() || maxItemShow() === -1\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || loading() || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n\n  @if (!showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n  @if (!hiddenInputSearch()) {\n    <libs_ui-components-inputs-search\n      [searchConfig]=\"searchConfig()\"\n      [class.px-[12px]]=\"searchPadding()\"\n      [class]=\"searchConfig().classCoverInputSearch\"\n      [disable]=\"disable() || loading() || false\"\n      (outSearch)=\"handlerSearch($event)\"\n      (outFunctionsControl)=\"handlerFunctionControlInputSearch($event)\" />\n  }\n  @if (config()?.configDescriptionGroup?.(); as description) {\n    <div [class]=\"description?.classInclude\">\n      <libs_ui-components-popover [config]=\"description?.tooltipDescription()\">\n        <div [class]=\"description?.classTextDescriptionInclude\">{{ description.textDescription }}</div>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (!hiddenInputSearch() && hasDivider() && (!config()?.ignoreShowDataWhenNotSearch || keySearchStore())) {\n    <div\n      class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude() : '' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\"></div>\n  }\n  <div class=\"flex flex-col {{ config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch ? 'h-[353px]' : 'h-full' }}\">\n    <div\n      #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\"></div>\n\n    @for (buttonOther of buttonsOther(); track buttonOther) {\n      <div\n        class=\"bg-[#ffffff] libs-ui-border-top-general\"\n        [class.rounded-b-[4px]]=\"$last && !hasButtonUnSelectOption()\">\n        <libs_ui-components-buttons-button\n          [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '') + ' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude : '' }}\"\n          classLabel=\"libs-ui-font-h5ri whitespace-normal\"\n          [disable]=\"buttonOther.disable || disable() || loading() || false\"\n          (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n      </div>\n    }\n    @if (hasButtonUnSelectOption()) {\n      <div class=\"bg-[#ffffff] rounded-b-[4px] libs-ui-border-top-general\">\n        <libs_ui-components-buttons-button\n          label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-full text-left rounded-0\"\n          classLabel=\"libs-ui-font-h5ri whitespace-normal\"\n          [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n          (outClick)=\"handlerRemoveKeySelected()\" />\n      </div>\n    }\n  </div>\n  @if (showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div\n      [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      @let constHtmlMessage = validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID;\n      <span\n        class=\"libs-ui-text-error libs-ui-font-h7r\"\n        [innerHtml]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"] }]
         }], ctorParameters: () => [] });
 
 const ENUM_OPTIONS_GET_LIST_GROUP_CONFIG = [