@libs-ui/components-list 0.2.55 → 0.2.57

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

@@ -1,4 +1,4 @@
-import { AsyncPipe, NgTemplateOutlet, NgClass } from '@angular/common';
+import { AsyncPipe, NgComponentOutlet, NgTemplateOutlet, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, inject, ElementRef, Directive, Pipe, signal, output, effect, untracked, Component, ChangeDetectionStrategy, model, viewChild } from '@angular/core';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
@@ -7,20 +7,23 @@ import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
 import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
 import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
 import { deleteUnicode, isEmpty, convertObjectToSignal, cloneDeep, isNil, escapeHtml, ERROR_MESSAGE_EMPTY_VALID } from '@libs-ui/utils';
-import * as i1 from '@ngx-translate/core';
+import * as i2 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { lastValueFrom, Subject, interval, timer, takeUntil as takeUntil$1 } from 'rxjs';
-import * as i1$1 from '@iharbeck/ngx-virtual-scroller';
-import { VirtualScrollerComponent, VirtualScrollerModule } from '@iharbeck/ngx-virtual-scroller';
-import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
-import { LibsUiComponentsButtonsSortArrowComponent } from '@libs-ui/components-buttons-sort';
+import * as i1 from '@iharbeck/ngx-virtual-scroller';
+import { VirtualScrollerModule, VirtualScrollerComponent } from '@iharbeck/ngx-virtual-scroller';
+import { LibsUiComponentsCheckboxSingleComponent } from '@libs-ui/components-checkbox-single';
 import { LibsUiComponentsScrollOverlayDirective } from '@libs-ui/components-scroll-overlay';
 import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
-import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
-import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
+import { LibsUiIconsGetIconComponentPipe } from '@libs-ui/icons';
 import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
+import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
+import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
 import { LibsUiHttpRequestService } from '@libs-ui/services-http-request';
 import { takeUntil, skipWhile, take } from 'rxjs/operators';
+import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-single';
+import { LibsUiComponentsButtonsSortArrowComponent } from '@libs-ui/components-buttons-sort';
+import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
 
 class LibsUiComponentsListHighlightKeySearchDirective {
     isHighlight = input(undefined);
@@ -162,7 +165,7 @@ class LibsUiComponentsListRowsComponent {
         this.outChangStageFlagMousePopover.emit(flag);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListRowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 [class]=\"(item() | LibsUiPipesCallFunctionInTemplatePipe:row().getClassImage:item()) | async\"\n            src=\"{{ imgUrl }}\"\n            (error)=\"handlerErrorImage($event,row().getImageError)\" />\n        }\n        @if (item()['fieldRowAvatarConfig'+indexRow]; as avatarConfig) {\n          <libs_ui-components-avatar [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]; as labelRow) {\n          <libs_ui-components-popover type=\"text\"\n            [config]=\"row().getPopoverConfig ? (('popover' | LibsUiPipesCallFunctionInTemplatePipe:row().getPopoverConfig:item()) | async) : { zIndex: zIndex()}\"\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        @if (row().cols?.()?.length) {\n          <div [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 [class]=\"(item() | LibsUiPipesCallFunctionInTemplatePipe:col().getClassImage:item()) | async\"\n                  src=\"{{ imgUrl }}\"\n                  (error)=\"handlerErrorImage($event,col().getImageError)\" />\n              }\n              @if (item()['fieldColAvatarConfig'+indexRow+colIndex]; as avatarConfig) {\n                <libs_ui-components-avatar [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 type=\"text\"\n                  [style]=\"(' ' | LibsUiPipesCallFunctionInTemplatePipe:item()['fieldColStylesDynamic'+indexRow+colIndex]:item()) | async\"\n                  [classInclude]=\"(keySelected() === item()[fieldKey()]) ? (row().classItemSelected || col().classCol || '') :(col().classCol || '')\"\n                  [innerHtml]=\"('fieldLabelCol' | LibsUiPipesCallFunctionInTemplatePipe:labelColFunc:item()) | async\"\n                  [config]=\"{ zIndex: zIndex() }\"\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 [type]=\"popover.type ?? 'other'\"\n                  [config]=\"popover?.config\"\n                  [classInclude]=\"col().classCol\"\n                  [style]=\"(' ' | LibsUiPipesCallFunctionInTemplatePipe:item()['fieldColStylesDynamic'+indexRow+colIndex]:item()) | async\"\n                  (outChangStageFlagMouse)='handlerChangStageFlagMouse($event)'\n                  (outEvent)=\"handlerSelectItem($event,item(),col().action)\">\n                  <span [class]=\"popover.classInclude || ''\"\n                    [innerHtml]=\"(popover.dataView ?? popoverIcon) | translate\">\n                  </span>\n                </libs_ui-components-popover>\n              }\n              @if (item()['fieldColToggle'+indexRow+colIndex]; as toggle) {\n                <libs_ui-components-label [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 [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]=\"col().classCol ?? ' '\"\n                  [ignoreStopPropagationEvent]=\"false\"\n                  (outClick)=\"handlerSelectItem('click',item(),col().action)\" />\n              }\n              @if (item()['fieldBadge'+indexRow+colIndex]; as badge) {\n                <libs_ui-components-badge [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", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "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"], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 [class]=\"(item() | LibsUiPipesCallFunctionInTemplatePipe:row().getClassImage:item()) | async\"\n            src=\"{{ imgUrl }}\"\n            (error)=\"handlerErrorImage($event,row().getImageError)\" />\n        }\n        @if (item()['fieldRowAvatarConfig'+indexRow]; as avatarConfig) {\n          <libs_ui-components-avatar [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]; as labelRow) {\n          <libs_ui-components-popover type=\"text\"\n            [config]=\"row().getPopoverConfig ? (('popover' | LibsUiPipesCallFunctionInTemplatePipe:row().getPopoverConfig:item()) | async) : { zIndex: zIndex()}\"\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        @if (row().cols?.()?.length) {\n          <div [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 [class]=\"(item() | LibsUiPipesCallFunctionInTemplatePipe:col().getClassImage:item()) | async\"\n                  src=\"{{ imgUrl }}\"\n                  (error)=\"handlerErrorImage($event,col().getImageError)\" />\n              }\n              @if (item()['fieldColAvatarConfig'+indexRow+colIndex]; as avatarConfig) {\n                <libs_ui-components-avatar [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 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() }\"\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 [type]=\"popover.type ?? 'other'\"\n                  [config]=\"popover?.config\"\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                  <span [class]=\"popover.classInclude || ''\"\n                    [innerHtml]=\"(popover.dataView ?? popoverIcon) | translate\">\n                  </span>\n                </libs_ui-components-popover>\n              }\n              @if (item()['fieldColToggle'+indexRow+colIndex]; as toggle) {\n                <libs_ui-components-label [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 [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 [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", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "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"], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListRowsComponent, decorators: [{
             type: Component,
@@ -174,7 +177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LibsUiComponentsLabelComponent,
                         LibsUiComponentsBadgeComponent,
                         LibsUiPipesCallFunctionInTemplatePipe
-                    ], 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 [class]=\"(item() | LibsUiPipesCallFunctionInTemplatePipe:row().getClassImage:item()) | async\"\n            src=\"{{ imgUrl }}\"\n            (error)=\"handlerErrorImage($event,row().getImageError)\" />\n        }\n        @if (item()['fieldRowAvatarConfig'+indexRow]; as avatarConfig) {\n          <libs_ui-components-avatar [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]; as labelRow) {\n          <libs_ui-components-popover type=\"text\"\n            [config]=\"row().getPopoverConfig ? (('popover' | LibsUiPipesCallFunctionInTemplatePipe:row().getPopoverConfig:item()) | async) : { zIndex: zIndex()}\"\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        @if (row().cols?.()?.length) {\n          <div [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 [class]=\"(item() | LibsUiPipesCallFunctionInTemplatePipe:col().getClassImage:item()) | async\"\n                  src=\"{{ imgUrl }}\"\n                  (error)=\"handlerErrorImage($event,col().getImageError)\" />\n              }\n              @if (item()['fieldColAvatarConfig'+indexRow+colIndex]; as avatarConfig) {\n                <libs_ui-components-avatar [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 type=\"text\"\n                  [style]=\"(' ' | LibsUiPipesCallFunctionInTemplatePipe:item()['fieldColStylesDynamic'+indexRow+colIndex]:item()) | async\"\n                  [classInclude]=\"(keySelected() === item()[fieldKey()]) ? (row().classItemSelected || col().classCol || '') :(col().classCol || '')\"\n                  [innerHtml]=\"('fieldLabelCol' | LibsUiPipesCallFunctionInTemplatePipe:labelColFunc:item()) | async\"\n                  [config]=\"{ zIndex: zIndex() }\"\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 [type]=\"popover.type ?? 'other'\"\n                  [config]=\"popover?.config\"\n                  [classInclude]=\"col().classCol\"\n                  [style]=\"(' ' | LibsUiPipesCallFunctionInTemplatePipe:item()['fieldColStylesDynamic'+indexRow+colIndex]:item()) | async\"\n                  (outChangStageFlagMouse)='handlerChangStageFlagMouse($event)'\n                  (outEvent)=\"handlerSelectItem($event,item(),col().action)\">\n                  <span [class]=\"popover.classInclude || ''\"\n                    [innerHtml]=\"(popover.dataView ?? popoverIcon) | translate\">\n                  </span>\n                </libs_ui-components-popover>\n              }\n              @if (item()['fieldColToggle'+indexRow+colIndex]; as toggle) {\n                <libs_ui-components-label [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 [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]=\"col().classCol ?? ' '\"\n                  [ignoreStopPropagationEvent]=\"false\"\n                  (outClick)=\"handlerSelectItem('click',item(),col().action)\" />\n              }\n              @if (item()['fieldBadge'+indexRow+colIndex]; as badge) {\n                <libs_ui-components-badge [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 $index; let indexRow = $index;) {\n      <div [class]=\"row().classRow\">\n        @if (row().getImage && ((item() | LibsUiPipesCallFunctionInTemplatePipe:row().getImage:item()) | async); as imgUrl) {\n          <img [class]=\"(item() | LibsUiPipesCallFunctionInTemplatePipe:row().getClassImage:item()) | async\"\n            src=\"{{ imgUrl }}\"\n            (error)=\"handlerErrorImage($event,row().getImageError)\" />\n        }\n        @if (item()['fieldRowAvatarConfig'+indexRow]; as avatarConfig) {\n          <libs_ui-components-avatar [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]; as labelRow) {\n          <libs_ui-components-popover type=\"text\"\n            [config]=\"row().getPopoverConfig ? (('popover' | LibsUiPipesCallFunctionInTemplatePipe:row().getPopoverConfig:item()) | async) : { zIndex: zIndex()}\"\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        @if (row().cols?.()?.length) {\n          <div [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 [class]=\"(item() | LibsUiPipesCallFunctionInTemplatePipe:col().getClassImage:item()) | async\"\n                  src=\"{{ imgUrl }}\"\n                  (error)=\"handlerErrorImage($event,col().getImageError)\" />\n              }\n              @if (item()['fieldColAvatarConfig'+indexRow+colIndex]; as avatarConfig) {\n                <libs_ui-components-avatar [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 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() }\"\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 [type]=\"popover.type ?? 'other'\"\n                  [config]=\"popover?.config\"\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                  <span [class]=\"popover.classInclude || ''\"\n                    [innerHtml]=\"(popover.dataView ?? popoverIcon) | translate\">\n                  </span>\n                </libs_ui-components-popover>\n              }\n              @if (item()['fieldColToggle'+indexRow+colIndex]; as toggle) {\n                <libs_ui-components-label [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 [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 [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 */
@@ -198,7 +201,6 @@ class LibsUiComponentsListTemplatesComponentAbstract {
     intervalSetHeightViewPortSubscription;
     intervalCheckScrollSubscription;
     /* INPUT */
-    functionCustomAddDataToStore = input();
     functionGetItemsAutoAddList = input();
     paddingLeftItem = input(undefined);
     maxItemShow = input(0);
@@ -214,6 +216,7 @@ class LibsUiComponentsListTemplatesComponentAbstract {
     onSetDataStore = input();
     onUpdateMultiKeySelectedGroup = input();
     onItemChangeUnSelect = input();
+    onUpdateData = input();
     clickExactly = input();
     keySelected = model(); // sử dụng cho type radio,text.
     multiKeySelected = model(); // sử dụng cho type cho phép chọn nhiều.
@@ -262,29 +265,26 @@ class LibsUiComponentsListTemplatesComponentAbstract {
             }
             this.processKeyChangeUnSelect(item);
         });
-        // this.onSetDataStore()?.pipe(takeUntil(this.onDestroy)).subscribe((data) => {
-        //   this.setDataStore(data)
-        // });
         this.onSetHiddenItemByKey()?.pipe(takeUntil(this.onDestroy)).subscribe(this.setHiddenItemByKey.bind(this));
         this.outFieldKey.emit(getFieldKeyByType(this.config(), this.fieldKeyDefault()));
         this.onRemoveItems()?.pipe(takeUntil(this.onDestroy)).subscribe(this.removeItems.bind(this));
+        this.onUpdateData()?.pipe(takeUntil(this.onDestroy)).subscribe(this.updateData.bind(this));
     }
     /* FUNCTIONS */
-    // protected setDataStore(data: Array<any>) {
-    //   if (!data || !data.length) {
-    //     return;
-    //   }
-    //   if (this.config()?.type === 'checkbox') {
-    //     data.forEach(item => (item.isAddNew = true));
-    //   }
-    //   this.functionCustomAddDataToStore()?.(data, this.store());
-    //   if (!this.functionCustomAddDataToStore()) {
-    //     this.store.update(items => {
-    //       return [...convertObjectToSignal(data), ...items];
-    //     });
-    //   }
-    //   this.processData();
-    // }
+    updateData(data) {
+        if (!data) {
+            return;
+        }
+        const { newData, functionCustomAddDataToStore } = data;
+        if (!newData || !newData.length) {
+            return;
+        }
+        if (this.config()?.type === 'checkbox') {
+            newData.forEach(item => (item.isAddNew = true));
+        }
+        functionCustomAddDataToStore(newData, this.store);
+        this.processData();
+    }
     getFieldKey() {
         let fieldKey;
         switch (this.config()?.type) {
@@ -473,6 +473,7 @@ class LibsUiComponentsListTemplatesComponentAbstract {
                 row.cols.forEach(async (col, indexCol) => {
                     const fieldNameCol = `fieldLabelCol${indexRow}${indexCol}`;
                     newItem[fieldNameCol] = col.getValue;
+                    newItem[`fieldColClass${indexRow}${indexCol}`] = col.getClassCol && col.getClassCol(ref, indexCol);
                     newItem[`fieldColPopover${indexRow}${indexCol}`] = col.getPopover && col.getPopover(ref, indexCol);
                     newItem[`fieldBadge${indexRow}${indexCol}`] = col.getConfigBadge && col.getConfigBadge(ref, indexCol);
                     newItem[`fieldColStylesDynamic${indexRow}${indexCol}`] = col.getStylesDynamicCol;
@@ -499,12 +500,595 @@ class LibsUiComponentsListTemplatesComponentAbstract {
         this.onDestroy.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListTemplatesComponentAbstract, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: LibsUiComponentsListTemplatesComponentAbstract, inputs: { functionCustomAddDataToStore: { classPropertyName: "functionCustomAddDataToStore", publicName: "functionCustomAddDataToStore", isSignal: true, isRequired: false, transformFunction: null }, functionGetItemsAutoAddList: { classPropertyName: "functionGetItemsAutoAddList", publicName: "functionGetItemsAutoAddList", isSignal: true, isRequired: false, transformFunction: null }, paddingLeftItem: { classPropertyName: "paddingLeftItem", publicName: "paddingLeftItem", isSignal: true, isRequired: false, transformFunction: null }, maxItemShow: { classPropertyName: "maxItemShow", publicName: "maxItemShow", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, dropdownTabKeyActive: { classPropertyName: "dropdownTabKeyActive", publicName: "dropdownTabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, onSearch: { classPropertyName: "onSearch", publicName: "onSearch", isSignal: true, isRequired: false, transformFunction: null }, onRefresh: { classPropertyName: "onRefresh", publicName: "onRefresh", isSignal: true, isRequired: false, transformFunction: null }, onSetHiddenItemByKey: { classPropertyName: "onSetHiddenItemByKey", publicName: "onSetHiddenItemByKey", isSignal: true, isRequired: false, transformFunction: null }, onRemoveItems: { classPropertyName: "onRemoveItems", publicName: "onRemoveItems", isSignal: true, isRequired: false, transformFunction: null }, onSetDataStore: { classPropertyName: "onSetDataStore", publicName: "onSetDataStore", isSignal: true, isRequired: false, transformFunction: null }, onUpdateMultiKeySelectedGroup: { classPropertyName: "onUpdateMultiKeySelectedGroup", publicName: "onUpdateMultiKeySelectedGroup", isSignal: true, isRequired: false, transformFunction: null }, onItemChangeUnSelect: { classPropertyName: "onItemChangeUnSelect", publicName: "onItemChangeUnSelect", isSignal: true, isRequired: false, transformFunction: null }, clickExactly: { classPropertyName: "clickExactly", publicName: "clickExactly", 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 }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", 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 }, resetKeyWhenSelectAllKeyDropdown: { classPropertyName: "resetKeyWhenSelectAllKeyDropdown", publicName: "resetKeyWhenSelectAllKeyDropdown", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, templateRefSearchNoData: { classPropertyName: "templateRefSearchNoData", publicName: "templateRefSearchNoData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySearch: "keySearchChange", keySelected: "keySelectedChange", multiKeySelected: "multiKeySelectedChange", keysHiddenItem: "keysHiddenItemChange", outSortSingleSelect: "outSortSingleSelect", outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outUnSelectMultiKey: "outUnSelectMultiKey", outFieldKey: "outFieldKey", outChangeView: "outChangeView", outLoading: "outLoading", outChangStageFlagMousePopover: "outChangStageFlagMousePopover", outLoadItemsComplete: "outLoadItemsComplete" }, viewQueries: [{ propertyName: "itemRef", first: true, predicate: ["itemRef"], descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: LibsUiComponentsListTemplatesComponentAbstract, inputs: { functionGetItemsAutoAddList: { classPropertyName: "functionGetItemsAutoAddList", publicName: "functionGetItemsAutoAddList", isSignal: true, isRequired: false, transformFunction: null }, paddingLeftItem: { classPropertyName: "paddingLeftItem", publicName: "paddingLeftItem", isSignal: true, isRequired: false, transformFunction: null }, maxItemShow: { classPropertyName: "maxItemShow", publicName: "maxItemShow", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, dropdownTabKeyActive: { classPropertyName: "dropdownTabKeyActive", publicName: "dropdownTabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, onSearch: { classPropertyName: "onSearch", publicName: "onSearch", isSignal: true, isRequired: false, transformFunction: null }, onRefresh: { classPropertyName: "onRefresh", publicName: "onRefresh", isSignal: true, isRequired: false, transformFunction: null }, onSetHiddenItemByKey: { classPropertyName: "onSetHiddenItemByKey", publicName: "onSetHiddenItemByKey", isSignal: true, isRequired: false, transformFunction: null }, onRemoveItems: { classPropertyName: "onRemoveItems", publicName: "onRemoveItems", isSignal: true, isRequired: false, transformFunction: null }, onSetDataStore: { classPropertyName: "onSetDataStore", publicName: "onSetDataStore", isSignal: true, isRequired: false, transformFunction: null }, onUpdateMultiKeySelectedGroup: { classPropertyName: "onUpdateMultiKeySelectedGroup", publicName: "onUpdateMultiKeySelectedGroup", isSignal: true, isRequired: false, transformFunction: null }, onItemChangeUnSelect: { classPropertyName: "onItemChangeUnSelect", publicName: "onItemChangeUnSelect", isSignal: true, isRequired: false, transformFunction: null }, onUpdateData: { classPropertyName: "onUpdateData", publicName: "onUpdateData", isSignal: true, isRequired: false, transformFunction: null }, clickExactly: { classPropertyName: "clickExactly", publicName: "clickExactly", 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 }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", 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 }, resetKeyWhenSelectAllKeyDropdown: { classPropertyName: "resetKeyWhenSelectAllKeyDropdown", publicName: "resetKeyWhenSelectAllKeyDropdown", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, templateRefSearchNoData: { classPropertyName: "templateRefSearchNoData", publicName: "templateRefSearchNoData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySearch: "keySearchChange", keySelected: "keySelectedChange", multiKeySelected: "multiKeySelectedChange", keysHiddenItem: "keysHiddenItemChange", outSortSingleSelect: "outSortSingleSelect", outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outUnSelectMultiKey: "outUnSelectMultiKey", outFieldKey: "outFieldKey", outChangeView: "outChangeView", outLoading: "outLoading", outChangStageFlagMousePopover: "outChangStageFlagMousePopover", outLoadItemsComplete: "outLoadItemsComplete" }, viewQueries: [{ propertyName: "itemRef", first: true, predicate: ["itemRef"], descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListTemplatesComponentAbstract, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplatesComponentAbstract {
+    /* PROPERTY */
+    configTemplateCheckbox = signal(undefined);
+    ngOnInit() {
+        if (isEmpty(this.config()?.configTemplateCheckbox)) {
+            return;
+        }
+        this.configTemplateCheckbox.set(this.config()?.configTemplateCheckbox);
+        this.fieldKey.set(this.configTemplateCheckbox()?.fieldKey ?? this.fieldKeyDefault());
+        this.callApiByService();
+    }
+    /* FUNCTIONS */
+    async handlerSelect(isSelectAll) {
+        if (isSelectAll && this.resetKeyWhenSelectAllKeyDropdown()) {
+            this.multiKeySelected.set([]);
+        }
+        if (!this.multiKeySelected()) {
+            this.multiKeySelected.set([]);
+        }
+        if (this.loading()) {
+            return;
+        }
+        const result = await this.getIdsByService();
+        this.processHandlerSelectData(isSelectAll, result.data);
+    }
+    processHandlerSelectData(isSelectAll, ids) {
+        const keysDisable = this.keysDisableItem() || [];
+        const keys = new Set(this.multiKeySelected());
+        this.multiKeySelected.set([]);
+        this.loading.set(false);
+        this.outLoading.emit(this.loading());
+        if (isSelectAll) {
+            if (ids.length) {
+                ids.forEach(id => !keysDisable.some(key => key === id) && keys.add(id));
+            }
+            if (!ids.length) {
+                this.items().forEach(item => {
+                    const key = item()[this.fieldKey()];
+                    if (!keysDisable.some(keyDisable => keyDisable === key)) {
+                        keys.add(key);
+                    }
+                });
+            }
+            this.multiKeySelected.update(items => [...(items || []), ...keys]);
+            this.emitSelectMultiKey(this.multiKeySelected() || []);
+            return;
+        }
+        const keyUnSelected = new Set();
+        ids.forEach(id => {
+            if (!keysDisable.some(key => key === id)) {
+                keys.delete(id);
+                keyUnSelected.add(id);
+            }
+        });
+        if (!ids.length) {
+            this.items().forEach(item => {
+                const key = item()[this.fieldKey()];
+                if (!keysDisable.some(key => key === key)) {
+                    keys.delete(key);
+                    keyUnSelected.add(key);
+                }
+            });
+        }
+        this.multiKeySelected.update(items => [...(items || []), ...keys]);
+        this.outUnSelectMultiKey.emit(Array.from(keyUnSelected));
+        this.outSelectMultiKey.emit({ keys: this.multiKeySelected() || [], mapKeys: [], isClickManual: true });
+    }
+    async getIdsByService() {
+        if (!this.searchConfig() || !this.isSearchOnline()) {
+            return { code: 200, data: this.items().map(item => item()[this.fieldKey()]) };
+        }
+        try {
+            if (!this.configTemplateCheckbox()?.httpRequestAllIdSelectOrUnSelect) {
+                return { data: [] };
+            }
+            this.loading.set(true);
+            this.outLoading.emit(this.loading());
+            const httpRequestAllIdSelectOrUnSelect = this.configTemplateCheckbox()?.httpRequestAllIdSelectOrUnSelect;
+            if (!httpRequestAllIdSelectOrUnSelect) {
+                return { data: [] };
+            }
+            const { argumentsValue, guideAutoUpdateArgumentsValue } = httpRequestAllIdSelectOrUnSelect;
+            this.httpRequestService.updateArguments(argumentsValue, this.httpRequestService.fakeResponsePagingApi(), {}, this.keySearch(), this.isSearchOnline(), false, guideAutoUpdateArgumentsValue);
+            const result = await this.httpRequestService.callApi(httpRequestAllIdSelectOrUnSelect);
+            if (!result || !result.data || !result.data.length) {
+                return { data: [] };
+            }
+            return result;
+        }
+        catch (error) {
+            console.log(error);
+            return { data: [] };
+        }
+    }
+    handlerScrollBottom() {
+        if (this.loadedLastItem()) {
+            this.loading.set(false);
+            this.outLoading.emit(this.loading());
+            return;
+        }
+        if (this.loading() || this.loadedLastItem()) {
+            return;
+        }
+        this.loading.set(true);
+        this.outLoading.emit(this.loading());
+        this.callApiByService(false);
+    }
+    processSearch() {
+        if (!this.isSearchOnline()) {
+            return this.processData(true);
+        }
+        this.callApiByService(true);
+    }
+    processKeyChangeUnSelect(item) {
+        if (isNil(item[this.fieldKey()]) || item[this.fieldKey()] === '') {
+            return;
+        }
+        this.checkAndEmitMultiKeySelected(item);
+    }
+    handlerChange(event, item, ignoreDisable = false, isClickManual = true) {
+        if (this.configTemplateCheckbox()?.ignoreClickItemUnChecked) {
+            const key = item[this.fieldKey()];
+            if (this.multiKeySelected()?.includes(key)) {
+                return;
+            }
+        }
+        if (!this.multiKeySelected()) {
+            this.multiKeySelected.set([]);
+        }
+        if (!ignoreDisable && (this.disable() || this.keysDisableItem()?.some(key => key === item[this.fieldKey()]))) {
+            return;
+        }
+        if (event instanceof Event) {
+            if (this.clickExactly()) {
+                return;
+            }
+            this.checkAndEmitMultiKeySelected(item, isClickManual);
+            return;
+        }
+        this.checkAndEmitMultiKeySelected(item, isClickManual);
+    }
+    checkAndEmitMultiKeySelected(item, isClickManual = true) {
+        const key = item[this.fieldKey()];
+        const indexOfKey = this.multiKeySelected()?.indexOf(key) ?? -1;
+        if (indexOfKey < 0) {
+            this.multiKeySelected.update(items => [...(items || []), key]);
+            this.emitSelectMultiKey(this.multiKeySelected() || [], isClickManual);
+            return;
+        }
+        this.multiKeySelected()?.splice(indexOfKey, 1);
+        this.outUnSelectMultiKey.emit([key]);
+        this.emitSelectMultiKey(this.multiKeySelected() || [], isClickManual);
+    }
+    async emitSelectMultiKey(multiKeySelected, isClickManual = true) {
+        const mapKeys = new Array();
+        if (!multiKeySelected || !multiKeySelected.length) {
+            return this.outSelectMultiKey.emit({ keys: [], mapKeys, isClickManual });
+        }
+        multiKeySelected.forEach((key) => {
+            const item = this.store().find(item => item()[this.fieldKey()] === key);
+            mapKeys.push({ key, item, isClickManual });
+        });
+        this.outSelectMultiKey.emit({ keys: this.multiKeySelected() || [], mapKeys, isClickManual });
+    }
+    processData(replace) {
+        const itemByKeySearch = [];
+        const keysHidden = this.keysHiddenItem() || [];
+        const itemsAddNew = [];
+        if (replace) {
+            this.items.set([]);
+        }
+        this.store().forEach((item) => {
+            const itemTypeAddNew = item().isAddNew;
+            item.update(current => {
+                delete current.isAddNew;
+                return current;
+            });
+            const dataStore = cloneDeep(item);
+            dataStore.update(currentStore => {
+                return { ...currentStore, ref: item() };
+            });
+            if (this.configTemplateCheckbox()?.getPopover) {
+                dataStore.update(currentStore => {
+                    return { ...currentStore, dataTooltip: this.configTemplateCheckbox()?.getPopover?.(dataStore()) };
+                });
+            }
+            const key = keysHidden.find(key => dataStore()[this.fieldKey()] === key);
+            if (key === undefined) {
+                const text = deleteUnicode(this.buildValueByConfig(dataStore, this.configTemplateCheckbox())).toLocaleLowerCase();
+                const textEscape = escapeHtml(text);
+                const keySearch = deleteUnicode(escapeHtml(this.keySearch().toLocaleLowerCase()));
+                if (((this.isSearchOnline() && this.config()?.httpRequestData?.serviceName && !this.config()?.httpRequestData?.serviceOther) ||
+                    (text && (text.includes(keySearch) || textEscape.includes(keySearch)))) && (replace || (!replace && !this.items().find(dataItem => dataItem()[this.fieldKey()] === dataStore()[this.fieldKey()]))) && !itemByKeySearch.find(dataItem => dataItem()[this.fieldKey()] === dataStore()[this.fieldKey()])) {
+                    dataStore.update(currentStore => {
+                        return {
+                            ...currentStore,
+                            classLabelInclude: this.configTemplateCheckbox()?.getClassItem?.(dataStore()),
+                            avatarConfig: this.configTemplateCheckbox()?.getAvatarConfig?.(dataStore())
+                        };
+                    });
+                    if (itemTypeAddNew) {
+                        itemsAddNew.unshift(dataStore);
+                        return;
+                    }
+                    itemByKeySearch.push(dataStore);
+                }
+                return;
+            }
+            const indexItemRemove = this.items().findIndex(item => item()[this.fieldKey()] === key);
+            if (indexItemRemove > -1) {
+                this.items.update(items => {
+                    items.splice(indexItemRemove, 1);
+                    return items;
+                });
+            }
+        });
+        const checkLoadItem = (preStateHasScroll, currentHasScroll) => {
+            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && (this.isSearchOnline())) {
+                this.callApiByService(false);
+            }
+        };
+        if (replace) {
+            this.items.set(itemByKeySearch);
+            this.config()?.sort?.(this.items());
+            this.autoSelectFirstItem(this.items());
+            this.setHeightViewPort();
+            this.checkViewPortScroll(checkLoadItem);
+            this.loading.set(false);
+            this.outLoading.emit(this.loading());
+            this.outLoadItemsComplete.emit({ items: this.items() });
+            return;
+        }
+        this.items.update(items => [...itemsAddNew, ...(items || []), ...itemByKeySearch]);
+        this.config()?.sort?.(this.items());
+        this.setHeightViewPort();
+        this.checkViewPortScroll(checkLoadItem);
+        this.loading.set(false);
+        this.outLoading.emit(this.loading());
+        this.outLoadItemsComplete.emit({ items: this.items() });
+    }
+    autoSelectFirstItem(items) {
+        if (this.multiKeySelected()?.length || !this.config()?.autoSelectFirstItem || !items || !items.length) {
+            return;
+        }
+        this.handlerChange('checkbox', items[0], true, false);
+    }
+    getLengthItem() {
+        return this.items().length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListCheckboxComponent, isStandalone: true, selector: "libs_ui-components-list-templates_checkbox", usesInheritance: true, ngImport: i0, template: "@if (configTemplateCheckbox(); as configTemplateCheckbox) {\n  <div class=\"flex flex-col w-full h-full\">\n    @if (items().length && configTemplateCheckbox.configButtonSelectAndUndSelectItem; as configButtonSelectItem) {\n      <div [class]=\"'flex items-center bg-[#ffffff] '+(configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n        <libs_ui-components-buttons-button [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]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(true)\" />\n        <div class=\"text-[#e6e7ea]\">|</div>\n        <libs_ui-components-buttons-button [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-h6r'\"\n          [disable]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(false)\" />\n      </div>\n    }\n    @if (items().length && configTemplateCheckbox.configCheckboxCheckAll; as configCheckBox) {\n      <div [class]=\"'flex libs-ui-border-bottom-general bg-[#ffffff] pl-[12px] '+(configTemplateCheckbox.classIncludeHasConfigCheckBoxAll ?? 'py-[6px] libs-ui-border-bottom-general')\">\n        <libs_ui-components-checkbox-single [label]=\"configCheckBox.label ?? 'i18n_all'\"\n          [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n          [checked]=\"(multiKeySelected()?.length && (multiKeySelected()?.length ||0) >= (store().length || -1)) || false\"\n          [disable]=\"loading() || disable() || false\"\n          (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n          (outChange)=\"handlerSelect($event.checked)\" />\n      </div>\n    }\n    <div #elementScroll\n      [class]=\"'relative h-full w-full ' +((!items() || !items().length) ? 'bg-[#ffffff]': configTemplateCheckbox.classListInclude || '')\">\n      @if (items() && items().length) {\n        <div LibsUiComponentsScrollOverlayDirective\n          class=\"w-full\"\n          [style.height]=\"heightViewPort() && !config()?.ignoreShowDataWhenNotSearch ? heightViewPort()+'px':'100%'\"\n          (outScrollBottom)=\"handlerScrollBottom()\">\n          <virtual-scroller #scroll\n            [parentScroll]=\"elementScroll\"\n            [items]=\"items()\"\n            class=\"h-full\">\n            @for (item of scroll.viewPortItems; track item()[fieldKey()]; let last = $last) {\n              <div [class]=\"last ? (configTemplateCheckbox.classIncludeLastViewItem || '') : ''\">\n                <div #itemRef\n                  LibsUiComponentsListHighlightKeySearchDirective\n                  [isHighlight]=\"config()?.highlightTextSearchInResult\"\n                  [keySearch]=\"keySearch()\"\n                  [attr.clickExactly]=\"clickExactly\"\n                  [class]=\"'libs-ui-list-template-checkbox-item flex ' + (configTemplateCheckbox.classItemInclude || '')\"\n                  [class.w-full]=\"!configTemplateCheckbox.ignoreItemWidth100\"\n                  [class.libs-ui-bg-list-hover]=\"!clickExactly()\"\n                  [class.libs-ui-bg-list-hover-active]=\"!clickExactly()\"\n                  [class.pl-[12px]]=\"paddingLeftItem()\"\n                  [class.py-[6px]]=\"clickExactly()\"\n                  [class.pr-[4px]]=\"hasScroll() && configTemplateCheckbox.rows\"\n                  [class.pr-[12px]]=\"!hasScroll() && configTemplateCheckbox.rows\"\n                  (click)=\"handlerChange($event,item())\">\n                  <div class=\"flex flex-col w-full\">\n                    @if (item().fieldLabel) {\n                      <libs_ui-components-checkbox-single [label]=\"item().fieldLabel\"\n                        [avatarConfig]=\"item().avatarConfig\"\n                        [linkImage]=\"configTemplateCheckbox.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:configTemplateCheckbox.getImage:item()) | async) : item()[configTemplateCheckbox.fieldGetImage || '']\"\n                        [linkImageError]=\"configTemplateCheckbox.getImageError ? (('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe:configTemplateCheckbox.getImageError:item()) | async) : item()[configTemplateCheckbox.fieldGetLinkImageError || '']\"\n                        [classLabelInclude]=\"item().classLabelInclude || configTemplateCheckbox.classLabelInclude || ''\"\n                        [zIndexLabel]=\"configTemplateCheckbox.zIndexPopover ?? 1200\"\n                        [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length\"\n                        [key]=\"item()[fieldKey()]\"\n                        [imgTypeIcon]=\"configTemplateCheckbox.hasAvatarGroupSocial\"\n                        [linkImageError]=\"configTemplateCheckbox.fieldGetLinkImageError  || ''\"\n                        [classInclude]=\"configTemplateCheckbox.classInclude || ''\"\n                        [classImageInclude]=\"configTemplateCheckbox.classIncludeImage || ''\"\n                        [bullet]=\"item().bullet\"\n                        [disable]=\"loading() || disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n                        [popover]=\"item().dataPopover\"\n                        [clickExactly]=\"clickExactly()\"\n                        (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                        (outChange)=\"handlerChange('checkbox',item())\" />\n                    }\n                    @if (configTemplateCheckbox?.rows) {\n                      <libs_ui-components-list-templates_rows class=\"{{ !configTemplateCheckbox.ignoreItemWidth100 ? 'w-full' : '' }} {{ configTemplateCheckbox.classRowsWrapper || configTemplateCheckbox.classRows ?? '' }}\"\n                        [item]=\"item()\"\n                        [zIndex]=\"zIndex()\"\n                        [fieldKey]=\"fieldKey()\"\n                        [keySelected]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length) ? item()[fieldKey()] : undefined\"\n                        [configTemplate]=\"configTemplateCheckbox\"\n                        (outEvent)=\"handlerChange('checkbox',$event.item)\" />\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n          </virtual-scroller>\n        </div>\n      }\n      @if ((!items() || !items().length) && (!config()?.ignoreShowDataWhenNotSearch || keySearch())) {\n        <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[4px] px-[12px]')\">\n          @if (config()?.hasIconNoData && !loading()) {\n            <div class=\"mb-[16px]\">\n              <div *ngComponentOutlet=\"(keySearch()  ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\"></div>\n            </div>\n          }\n          @if (!keySearch() && !loading()) {\n            <span>{{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}</span>\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            <span>{{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}</span>\n          }\n          @if (loading()) {\n            <span>&nbsp;</span>\n          }\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-template-checkbox-item{padding:6px 0 6px 16px;margin-right:8px;font-size:12px;line-height:18px;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i1.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: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["classContainer", "options"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-list-templates_checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        VirtualScrollerModule, NgComponentOutlet, AsyncPipe, TranslateModule, NgTemplateOutlet,
+                        LibsUiComponentsButtonsButtonComponent,
+                        LibsUiComponentsCheckboxSingleComponent,
+                        LibsUiComponentsSpinnerComponent,
+                        LibsUiComponentsScrollOverlayDirective,
+                        LibsUiCheckSelectedByKeyPipe,
+                        LibsUiIconsGetIconComponentPipe,
+                        LibsUiComponentsListHighlightKeySearchDirective,
+                        LibsUiComponentsListRowsComponent,
+                        LibsUiPipesCallFunctionInTemplatePipe
+                    ], template: "@if (configTemplateCheckbox(); as configTemplateCheckbox) {\n  <div class=\"flex flex-col w-full h-full\">\n    @if (items().length && configTemplateCheckbox.configButtonSelectAndUndSelectItem; as configButtonSelectItem) {\n      <div [class]=\"'flex items-center bg-[#ffffff] '+(configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n        <libs_ui-components-buttons-button [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]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(true)\" />\n        <div class=\"text-[#e6e7ea]\">|</div>\n        <libs_ui-components-buttons-button [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-h6r'\"\n          [disable]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(false)\" />\n      </div>\n    }\n    @if (items().length && configTemplateCheckbox.configCheckboxCheckAll; as configCheckBox) {\n      <div [class]=\"'flex libs-ui-border-bottom-general bg-[#ffffff] pl-[12px] '+(configTemplateCheckbox.classIncludeHasConfigCheckBoxAll ?? 'py-[6px] libs-ui-border-bottom-general')\">\n        <libs_ui-components-checkbox-single [label]=\"configCheckBox.label ?? 'i18n_all'\"\n          [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n          [checked]=\"(multiKeySelected()?.length && (multiKeySelected()?.length ||0) >= (store().length || -1)) || false\"\n          [disable]=\"loading() || disable() || false\"\n          (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n          (outChange)=\"handlerSelect($event.checked)\" />\n      </div>\n    }\n    <div #elementScroll\n      [class]=\"'relative h-full w-full ' +((!items() || !items().length) ? 'bg-[#ffffff]': configTemplateCheckbox.classListInclude || '')\">\n      @if (items() && items().length) {\n        <div LibsUiComponentsScrollOverlayDirective\n          class=\"w-full\"\n          [style.height]=\"heightViewPort() && !config()?.ignoreShowDataWhenNotSearch ? heightViewPort()+'px':'100%'\"\n          (outScrollBottom)=\"handlerScrollBottom()\">\n          <virtual-scroller #scroll\n            [parentScroll]=\"elementScroll\"\n            [items]=\"items()\"\n            class=\"h-full\">\n            @for (item of scroll.viewPortItems; track item()[fieldKey()]; let last = $last) {\n              <div [class]=\"last ? (configTemplateCheckbox.classIncludeLastViewItem || '') : ''\">\n                <div #itemRef\n                  LibsUiComponentsListHighlightKeySearchDirective\n                  [isHighlight]=\"config()?.highlightTextSearchInResult\"\n                  [keySearch]=\"keySearch()\"\n                  [attr.clickExactly]=\"clickExactly\"\n                  [class]=\"'libs-ui-list-template-checkbox-item flex ' + (configTemplateCheckbox.classItemInclude || '')\"\n                  [class.w-full]=\"!configTemplateCheckbox.ignoreItemWidth100\"\n                  [class.libs-ui-bg-list-hover]=\"!clickExactly()\"\n                  [class.libs-ui-bg-list-hover-active]=\"!clickExactly()\"\n                  [class.pl-[12px]]=\"paddingLeftItem()\"\n                  [class.py-[6px]]=\"clickExactly()\"\n                  [class.pr-[4px]]=\"hasScroll() && configTemplateCheckbox.rows\"\n                  [class.pr-[12px]]=\"!hasScroll() && configTemplateCheckbox.rows\"\n                  (click)=\"handlerChange($event,item())\">\n                  <div class=\"flex flex-col w-full\">\n                    @if (item().fieldLabel) {\n                      <libs_ui-components-checkbox-single [label]=\"item().fieldLabel\"\n                        [avatarConfig]=\"item().avatarConfig\"\n                        [linkImage]=\"configTemplateCheckbox.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:configTemplateCheckbox.getImage:item()) | async) : item()[configTemplateCheckbox.fieldGetImage || '']\"\n                        [linkImageError]=\"configTemplateCheckbox.getImageError ? (('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe:configTemplateCheckbox.getImageError:item()) | async) : item()[configTemplateCheckbox.fieldGetLinkImageError || '']\"\n                        [classLabelInclude]=\"item().classLabelInclude || configTemplateCheckbox.classLabelInclude || ''\"\n                        [zIndexLabel]=\"configTemplateCheckbox.zIndexPopover ?? 1200\"\n                        [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length\"\n                        [key]=\"item()[fieldKey()]\"\n                        [imgTypeIcon]=\"configTemplateCheckbox.hasAvatarGroupSocial\"\n                        [linkImageError]=\"configTemplateCheckbox.fieldGetLinkImageError  || ''\"\n                        [classInclude]=\"configTemplateCheckbox.classInclude || ''\"\n                        [classImageInclude]=\"configTemplateCheckbox.classIncludeImage || ''\"\n                        [bullet]=\"item().bullet\"\n                        [disable]=\"loading() || disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n                        [popover]=\"item().dataPopover\"\n                        [clickExactly]=\"clickExactly()\"\n                        (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                        (outChange)=\"handlerChange('checkbox',item())\" />\n                    }\n                    @if (configTemplateCheckbox?.rows) {\n                      <libs_ui-components-list-templates_rows class=\"{{ !configTemplateCheckbox.ignoreItemWidth100 ? 'w-full' : '' }} {{ configTemplateCheckbox.classRowsWrapper || configTemplateCheckbox.classRows ?? '' }}\"\n                        [item]=\"item()\"\n                        [zIndex]=\"zIndex()\"\n                        [fieldKey]=\"fieldKey()\"\n                        [keySelected]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length) ? item()[fieldKey()] : undefined\"\n                        [configTemplate]=\"configTemplateCheckbox\"\n                        (outEvent)=\"handlerChange('checkbox',$event.item)\" />\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n          </virtual-scroller>\n        </div>\n      }\n      @if ((!items() || !items().length) && (!config()?.ignoreShowDataWhenNotSearch || keySearch())) {\n        <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[4px] px-[12px]')\">\n          @if (config()?.hasIconNoData && !loading()) {\n            <div class=\"mb-[16px]\">\n              <div *ngComponentOutlet=\"(keySearch()  ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\"></div>\n            </div>\n          }\n          @if (!keySearch() && !loading()) {\n            <span>{{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}</span>\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            <span>{{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}</span>\n          }\n          @if (loading()) {\n            <span>&nbsp;</span>\n          }\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-template-checkbox-item{padding:6px 0 6px 16px;margin-right:8px;font-size:12px;line-height:18px;position:relative}\n"] }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesComponentAbstract {
+    /* PROPERTY */
+    configTemplateRadio = signal(undefined);
+    /* VIEW CHILD */
+    virtualScrollerComponent = viewChild(VirtualScrollerComponent);
+    ngOnInit() {
+        if (isEmpty(this.config()?.configTemplateRadio)) {
+            return;
+        }
+        super.ngOnInit();
+        this.configTemplateRadio.set(this.config()?.configTemplateRadio);
+        this.fieldKey.set(this.configTemplateRadio()?.fieldKey ?? this.fieldKeyDefault());
+        this.callApiByService();
+    }
+    /* FUNCTIONS */
+    handlerScrollBottom() {
+        if (this.loadedLastItem()) {
+            this.loading.set(false);
+            this.outLoading.emit(this.loading());
+            return;
+        }
+        if (this.loading() || this.loadedLastItem()) {
+            return;
+        }
+        this.loading.set(true);
+        this.outLoading.emit(this.loading());
+        this.callApiByService(false);
+    }
+    processSearch() {
+        if (!this.isSearchOnline()) {
+            return this.processData(true);
+        }
+        this.callApiByService(true);
+    }
+    processKeyChangeUnSelect(item) {
+        if (isNil(item[this.fieldKey()]) || item[this.fieldKey()] === '' || this.keySelected() !== item[this.fieldKey()]) {
+            return;
+        }
+        this.keySelected.set('');
+        this.outSelectKey.emit(undefined);
+    }
+    handlerChange(event, item, ignoreDisable, isClickManual = true) {
+        if (!item) {
+            return;
+        }
+        if (this.disable() && !ignoreDisable) {
+            return;
+        }
+        if (event instanceof Event) {
+            if (this.clickExactly()) {
+                return;
+            }
+            event.stopPropagation();
+            this.keySelected.set(item[this.fieldKey()]);
+            this.outSelectKey.emit({ key: this.keySelected(), item, isClickManual });
+            return;
+        }
+        this.keySelected.set(item[this.fieldKey()]);
+        this.outSelectKey.emit({ key: this.keySelected(), item, isClickManual });
+    }
+    processData(replace) {
+        const itemByKeySearch = [];
+        const keysHidden = this.keysHiddenItem() || [];
+        if (replace) {
+            this.items.set([]);
+        }
+        this.store().forEach((item) => {
+            const dataStore = cloneDeep(item);
+            dataStore.update(store => { return { ...store, ref: item() }; });
+            const key = keysHidden.find(key => dataStore()[this.fieldKey()] === key);
+            if (key === undefined) {
+                const text = deleteUnicode(this.buildValueByConfig(dataStore, this.configTemplateRadio())).toLocaleLowerCase();
+                const textEscape = escapeHtml(text);
+                const keySearch = deleteUnicode(escapeHtml(this.keySearch().toLocaleLowerCase()));
+                if (((this.isSearchOnline() && this.config()?.httpRequestData?.serviceName && !this.config()?.httpRequestData?.serviceOther) ||
+                    (text && (text.includes(keySearch) || textEscape.includes(keySearch)))) && (replace || (!replace && !this.items().find(dataItem => dataItem()[this.fieldKey()] === dataStore()[this.fieldKey()]))) && !itemByKeySearch.find(dataItem => dataItem()[this.fieldKey()] === dataStore()[this.fieldKey()])) {
+                    if (this.configTemplateRadio()?.getPopover) {
+                        dataStore.update(currentStore => {
+                            return { ...currentStore, dataTooltip: this.configTemplateRadio()?.getPopover?.(dataStore) };
+                        });
+                    }
+                    dataStore.update(currentStore => {
+                        return {
+                            ...currentStore,
+                            classLabelInclude: this.configTemplateRadio()?.getClassItem?.(dataStore()),
+                            avatarConfig: this.configTemplateRadio()?.getAvatarConfig?.(dataStore())
+                        };
+                    });
+                    itemByKeySearch.push(dataStore);
+                }
+                return;
+            }
+            const indexItemRemove = this.items().findIndex(item => item()[this.fieldKey()] === key);
+            if (indexItemRemove > -1) {
+                this.items.update(items => {
+                    items.splice(indexItemRemove, 1);
+                    return items;
+                });
+            }
+        });
+        const checkLoadItem = (preStateHasScroll, currentHasScroll) => {
+            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && (this.isSearchOnline())) {
+                this.callApiByService(false);
+            }
+        };
+        if (replace) {
+            this.items.set(itemByKeySearch);
+            this.config()?.sort?.(this.items());
+            this.emitKeySelectedDefaultIfExistItem(this.items());
+            this.autoSelectFirstItem(this.items());
+            this.setHeightViewPort();
+            this.loading.set(false);
+            this.outLoading.emit(this.loading());
+            this.outLoadItemsComplete.emit({ items: this.items(), paging: this.pagingStore() });
+            this.checkViewPortScroll(checkLoadItem);
+            this.scrollToItemSelected();
+            return;
+        }
+        this.items.update(items => [...(items || []), ...itemByKeySearch]);
+        this.config()?.sort?.(this.items());
+        this.setHeightViewPort();
+        this.loading.set(false);
+        this.outLoading.emit(this.loading());
+        this.outLoadItemsComplete.emit({ items: this.items(), paging: this.pagingStore() });
+        this.checkViewPortScroll(checkLoadItem);
+        this.scrollToItemSelected();
+    }
+    scrollToItemSelected() {
+        if (!this.configTemplateRadio()?.autoScrollToItemSelected) {
+            return;
+        }
+        clearTimeout(this.timeAutoScrollItemSelected());
+        this.timeAutoScrollItemSelected.set(setTimeout(() => {
+            if (!this.keySelected) {
+                return;
+            }
+            const index = this.items().findIndex(item => item()[this.fieldKey()] === this.keySelected());
+            if (index !== -1) {
+                this.virtualScrollerComponent()?.scrollToIndex(index);
+            }
+        }));
+    }
+    autoSelectFirstItem(items) {
+        if (this.keySelected() || !this.config()?.autoSelectFirstItem || !items || !items.length) {
+            return;
+        }
+        this.handlerChange('radio', items[0], true, false);
+    }
+    emitKeySelectedDefaultIfExistItem(items) {
+        const item = items.find(store => store()[this.fieldKey()] === this.keySelected());
+        if (item) {
+            this.handlerChange('radio', item, true, false);
+        }
+    }
+    getLengthItem() {
+        return this.items().length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListRadioComponent, isStandalone: true, selector: "libs_ui-components-list-templates_radio", viewQueries: [{ propertyName: "virtualScrollerComponent", first: true, predicate: VirtualScrollerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (configTemplateRadio(); as configTemplateRadio) {\n  <div class=\"relative h-full w-full\">\n    @if (items().length) {\n      <div #elementScroll\n        LibsUiComponentsScrollOverlayDirective\n        class=\"w-full\"\n        [style.height]=\"heightViewPort() ? heightViewPort()+'px':'100%'\"\n        (moScrollBottom)=\"handlerScrollBottom()\">\n        <virtual-scroller #scroll\n          [parentScroll]=\"elementScroll\"\n          [items]=\"items()\"\n          class=\"h-full\">\n          @for (item of scroll.viewPortItems; track item()[fieldKey()]) {\n            <div #itemRef\n              [class]=\"'libs-ui-list-template-radio-item flex ' + (configTemplateRadio.classItemInclude || '')\"\n              [class.libs-ui-bg-list-hover]=\"!clickExactly()\"\n              [class.libs-ui-bg-list-hover-active]=\"!clickExactly()\"\n              [class.pl-[12px]]=\"paddingLeftItem()\"\n              [class.bg-[#ffffff]]=\"clickExactly()\"\n              [class.py-[2px]]=\"clickExactly()\"\n              (click)=\"handlerChange($event,item())\">\n              <div class=\"flex flex-col w-full\">\n                @if (item().fieldLabel) {\n                  <libs_ui-components-radio-single [label]=\"item().fieldLabel\"\n                    [avatarConfig]=\"item().avatarConfig\"\n                    [active]=\"keySelected() === item()[fieldKey()]\"\n                    [key]=\"item()[fieldKey()]\"\n                    [imgTypeIcon]=\"configTemplateRadio.hasAvatarGroupSocial\"\n                    [linkImage]=\"configTemplateRadio.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateRadio.getImageError ? configTemplateRadio.getImageError : configTemplateRadio.getImage):item()) | async) : item()[configTemplateRadio.fieldGetImage || '']\"\n                    [classImageInclude]=\"configTemplateRadio.classIncludeImage || ''\"\n                    [bullet]=\"item().bullet\"\n                    [disable]=\"loading() || disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n                    [classLabelInclude]=\"item().classLabelInclude || ''\"\n                    [popover]=\"item().dataPopover\"\n                    [clickExactly]=\"clickExactly()\"\n                    [disableLabel]=\"disableLabel()\"\n                    [zIndexLabel]=\"configTemplateRadio.zIndexPopover ?? 1200\"\n                    (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                    (outChange)=\"handlerChange('radio',item())\" />\n                }\n                @if (configTemplateRadio?.rows) {\n                  <libs_ui-components-list-templates_rows class=\"w-full {{ configTemplateRadio.classRows ?? '' }}\"\n                    [item]=\"item()\"\n                    [fieldKey]=\"fieldKey()\"\n                    [keySelected]=\"keySelected()\"\n                    [configTemplate]=\"configTemplateRadio\"\n                    (outEvent)=\"handlerChange('radio',$event.item)\" />\n                }\n              </div>\n            </div>\n          }\n        </virtual-scroller>\n      </div>\n    }\n    @if (items().length) {\n      <div [class]=\"'libs-ui-font-h4r text-[#c1c1c1] '+ (config()?.textNoDataClassInclude ?? 'py-[4px] px-[12px]')\">\n        @if (!keySearch() && !loading()) {\n          <span>{{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}</span>\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          <span>{{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}</span>\n        }\n        @if (loading()) {\n          <span>&nbsp;</span>\n        }\n      </div>\n    }\n\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"'medium'\" />\n    }\n  </div>\n}\n", styles: [".libs-ui-list-template-radio-item{padding:4px 22px 4px 1px;font-size:12px;line-height:18px;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i1.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["classContainer", "options"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabe", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsListRowsComponent, selector: "libs_ui-components-list-templates_rows", inputs: ["configTemplate", "item", "keySelected", "fieldKey", "zIndex"], outputs: ["outChangStageFlagMousePopover", "outEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-list-templates_radio', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        VirtualScrollerModule, AsyncPipe, TranslateModule, NgTemplateOutlet,
+                        LibsUiComponentsSpinnerComponent,
+                        LibsUiComponentsScrollOverlayDirective,
+                        LibsUiComponentsRadioSingleComponent,
+                        LibsUiPipesCallFunctionInTemplatePipe,
+                        LibsUiCheckSelectedByKeyPipe,
+                        LibsUiComponentsListRowsComponent
+                    ], template: "@if (configTemplateRadio(); as configTemplateRadio) {\n  <div class=\"relative h-full w-full\">\n    @if (items().length) {\n      <div #elementScroll\n        LibsUiComponentsScrollOverlayDirective\n        class=\"w-full\"\n        [style.height]=\"heightViewPort() ? heightViewPort()+'px':'100%'\"\n        (moScrollBottom)=\"handlerScrollBottom()\">\n        <virtual-scroller #scroll\n          [parentScroll]=\"elementScroll\"\n          [items]=\"items()\"\n          class=\"h-full\">\n          @for (item of scroll.viewPortItems; track item()[fieldKey()]) {\n            <div #itemRef\n              [class]=\"'libs-ui-list-template-radio-item flex ' + (configTemplateRadio.classItemInclude || '')\"\n              [class.libs-ui-bg-list-hover]=\"!clickExactly()\"\n              [class.libs-ui-bg-list-hover-active]=\"!clickExactly()\"\n              [class.pl-[12px]]=\"paddingLeftItem()\"\n              [class.bg-[#ffffff]]=\"clickExactly()\"\n              [class.py-[2px]]=\"clickExactly()\"\n              (click)=\"handlerChange($event,item())\">\n              <div class=\"flex flex-col w-full\">\n                @if (item().fieldLabel) {\n                  <libs_ui-components-radio-single [label]=\"item().fieldLabel\"\n                    [avatarConfig]=\"item().avatarConfig\"\n                    [active]=\"keySelected() === item()[fieldKey()]\"\n                    [key]=\"item()[fieldKey()]\"\n                    [imgTypeIcon]=\"configTemplateRadio.hasAvatarGroupSocial\"\n                    [linkImage]=\"configTemplateRadio.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateRadio.getImageError ? configTemplateRadio.getImageError : configTemplateRadio.getImage):item()) | async) : item()[configTemplateRadio.fieldGetImage || '']\"\n                    [classImageInclude]=\"configTemplateRadio.classIncludeImage || ''\"\n                    [bullet]=\"item().bullet\"\n                    [disable]=\"loading() || disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n                    [classLabelInclude]=\"item().classLabelInclude || ''\"\n                    [popover]=\"item().dataPopover\"\n                    [clickExactly]=\"clickExactly()\"\n                    [disableLabel]=\"disableLabel()\"\n                    [zIndexLabel]=\"configTemplateRadio.zIndexPopover ?? 1200\"\n                    (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                    (outChange)=\"handlerChange('radio',item())\" />\n                }\n                @if (configTemplateRadio?.rows) {\n                  <libs_ui-components-list-templates_rows class=\"w-full {{ configTemplateRadio.classRows ?? '' }}\"\n                    [item]=\"item()\"\n                    [fieldKey]=\"fieldKey()\"\n                    [keySelected]=\"keySelected()\"\n                    [configTemplate]=\"configTemplateRadio\"\n                    (outEvent)=\"handlerChange('radio',$event.item)\" />\n                }\n              </div>\n            </div>\n          }\n        </virtual-scroller>\n      </div>\n    }\n    @if (items().length) {\n      <div [class]=\"'libs-ui-font-h4r text-[#c1c1c1] '+ (config()?.textNoDataClassInclude ?? 'py-[4px] px-[12px]')\">\n        @if (!keySearch() && !loading()) {\n          <span>{{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}</span>\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          <span>{{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}</span>\n        }\n        @if (loading()) {\n          <span>&nbsp;</span>\n        }\n      </div>\n    }\n\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"'medium'\" />\n    }\n  </div>\n}\n", styles: [".libs-ui-list-template-radio-item{padding:4px 22px 4px 1px;font-size:12px;line-height:18px;position:relative}\n"] }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsListTagComponent extends LibsUiComponentsListTemplatesComponentAbstract {
+    /* PROPERTY */
+    configTemplateTag = signal(undefined);
+    ngOnInit() {
+        if (!this.config()?.configTemplateTag) {
+            return;
+        }
+        super.ngOnInit();
+        this.configTemplateTag.set(this.config()?.configTemplateTag);
+        this.fieldKey.set(this.configTemplateTag()?.fieldKey ?? this.fieldKeyDefault());
+        this.callApiByService();
+    }
+    /* FUNCTIONS */
+    handlerSelectItem(e, item) {
+        if (e instanceof Event) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        if (!item || (this.keysDisableItem() && this.keysDisableItem()?.some(key => key === item[this.fieldKey()]))) {
+            return;
+        }
+        const key = item[this.fieldKey()];
+        const indexOfKey = this.multiKeySelected()?.indexOf(key) ?? -1;
+        if (indexOfKey < 0) {
+            this.multiKeySelected.update(items => [...(items || []), key]);
+            this.emitMoSelectMultiKey(this.multiKeySelected() || []);
+            return;
+        }
+        this.multiKeySelected.update(items => {
+            items?.splice(indexOfKey, 1);
+            return items;
+        });
+        this.outUnSelectMultiKey.emit([key]);
+        this.emitMoSelectMultiKey(this.multiKeySelected() || []);
+    }
+    async emitMoSelectMultiKey(multiKeySelected, isClickManual = true) {
+        const mapKeys = new Array();
+        if (!multiKeySelected || !multiKeySelected.length) {
+            return this.outSelectMultiKey.emit({ keys: [], mapKeys, isClickManual });
+        }
+        multiKeySelected.forEach((key) => {
+            const item = this.store().find(item => item()[this.fieldKey()] === key);
+            mapKeys.push({ key, item, isClickManual });
+        });
+        this.outSelectMultiKey.emit({ keys: this.multiKeySelected() || [], mapKeys, isClickManual });
+    }
+    handlerScrollBottom() {
+        if (this.loadedLastItem()) {
+            this.loading.set(false);
+            this.outLoading.emit(this.loading());
+            return;
+        }
+        if (this.loading() || this.loadedLastItem()) {
+            return;
+        }
+        this.loading.set(true);
+        this.outLoading.emit(this.loading());
+        this.callApiByService(false);
+    }
+    processSearch() {
+        this.callApiByService(true);
+    }
+    processData(replace) {
+        const itemByKeySearch = [];
+        const keysHidden = this.keysHiddenItem() || [];
+        if (replace) {
+            this.items.set([]);
+        }
+        this.store().forEach((item) => {
+            const dataStore = cloneDeep(item);
+            dataStore.update(currentStore => {
+                return { ...currentStore, ref: item() };
+            });
+            const key = keysHidden.find(key => dataStore()[this.fieldKey()] === key);
+            if (key === undefined) {
+                const text = this.buildValueByConfig(dataStore, this.configTemplateTag());
+                if (text && deleteUnicode(text.toLocaleLowerCase()).includes(deleteUnicode(this.keySearch().toLocaleLowerCase())) && !this.items().find(dataItem => dataItem()[this.fieldKey()] === dataStore()[this.fieldKey()])) {
+                    itemByKeySearch.push(dataStore);
+                    dataStore.update(currentStore => {
+                        return {
+                            ...currentStore,
+                            classItem: item().classItem || this.configTemplateTag()?.getClassItem?.(dataStore())
+                        };
+                    });
+                }
+                return;
+            }
+            const indexItemRemove = this.items().findIndex(item => item()[this.fieldKey()] === key);
+            if (indexItemRemove > -1) {
+                this.items.update(items => {
+                    items.splice(indexItemRemove, 1);
+                    return items;
+                });
+            }
+        });
+        const checkLoadItem = (preStateHasScroll, currentHasScroll) => {
+            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && (this.isSearchOnline())) {
+                this.callApiByService(false);
+            }
+        };
+        if (replace) {
+            this.items.set(itemByKeySearch);
+            this.config()?.sort?.(this.items());
+            this.setHeightViewPort();
+            this.checkViewPortScroll(checkLoadItem);
+            this.loading.set(false);
+            this.outLoading.emit(this.loading());
+            return;
+        }
+        this.items.update(items => [...(items || []), ...itemByKeySearch]);
+        this.config()?.sort?.(this.items());
+        this.setHeightViewPort();
+        this.checkViewPortScroll(checkLoadItem);
+        this.loading.set(false);
+        this.outLoading.emit(this.loading());
+    }
+    getLengthItem() {
+        return this.items().length;
+    }
+    processKeyChangeUnSelect(item) {
+        if (isNil(item[this.fieldKey()]) || item[this.fieldKey()] === '' || this.keySelected() !== item[this.fieldKey()]) {
+            return;
+        }
+        this.keySelected.set('');
+        this.outSelectKey.emit(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListTagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListTagComponent, isStandalone: true, selector: "libs_ui-components-list-templates_tag", usesInheritance: true, ngImport: i0, template: "@if (configTemplateTag(); as configTemplateTag) {\n  <div class=\"w-full h-full relative\"\n    LibsUiComponentsScrollOverlayDirective\n    (moScrollBottom)=\"handlerScrollBottom()\">\n    <div 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-[104px]]=\"loading() && items()\">\n      @for (item of items(); track item()[fieldKey()]) {\n        <div [class.libs-ui-disable]=\"loading() || disable()\"\n          [class.pointer-events-none]=\"loading() || disable()\"\n          [class]=\"item().classContainerItem\">\n          @if (!item().bullet) {\n            <div (click)=\"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-[#e9f1fe]]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length\"\n              [class.libs-ui-color-global]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length\">\n              @if (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length) {\n                <div class=\"mr-[8px] text-[12px] libs-ui-icon-check libs-ui-color-global\"></div>\n              }\n              <span class=\"mo-lib-font-h6r\"\n                [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          }\n          @if (item().bullet) {\n            <div [class]=\"item().classItem || 'rounded-[10px] px-[8px] py-[1px] mb-[8px] mr-[8px]'\"\n              [class.w-max]=\"configTemplateTag?.ignoreItemFlexWrap\"\n              [style.background-color]=\"item().bullet?.backgroundColor\"\n              [style.color]=\"item().bullet?.color\"\n              (click)=\"handlerSelectItem($event,item())\">\n              <span [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          }\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div [class]=\"'libs-ui-font-h4r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[4px]')\">\n          @if (!keySearch() && !loading()) {\n            <ng-container>{{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}</ng-container>\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container>{{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}</ng-container>\n          }\n          @if (loading()) {\n            <ng-container>&nbsp;</ng-container>\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: i2.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: ["classContainer", "options"], 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.13", 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 class=\"w-full h-full relative\"\n    LibsUiComponentsScrollOverlayDirective\n    (moScrollBottom)=\"handlerScrollBottom()\">\n    <div 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-[104px]]=\"loading() && items()\">\n      @for (item of items(); track item()[fieldKey()]) {\n        <div [class.libs-ui-disable]=\"loading() || disable()\"\n          [class.pointer-events-none]=\"loading() || disable()\"\n          [class]=\"item().classContainerItem\">\n          @if (!item().bullet) {\n            <div (click)=\"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-[#e9f1fe]]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length\"\n              [class.libs-ui-color-global]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length\">\n              @if (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length) {\n                <div class=\"mr-[8px] text-[12px] libs-ui-icon-check libs-ui-color-global\"></div>\n              }\n              <span class=\"mo-lib-font-h6r\"\n                [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          }\n          @if (item().bullet) {\n            <div [class]=\"item().classItem || 'rounded-[10px] px-[8px] py-[1px] mb-[8px] mr-[8px]'\"\n              [class.w-max]=\"configTemplateTag?.ignoreItemFlexWrap\"\n              [style.background-color]=\"item().bullet?.backgroundColor\"\n              [style.color]=\"item().bullet?.color\"\n              (click)=\"handlerSelectItem($event,item())\">\n              <span [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          }\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div [class]=\"'libs-ui-font-h4r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[4px]')\">\n          @if (!keySearch() && !loading()) {\n            <ng-container>{{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}</ng-container>\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container>{{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}</ng-container>\n          }\n          @if (loading()) {\n            <ng-container>&nbsp;</ng-container>\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 */
 class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesComponentAbstract {
     /* PROPERTY */
@@ -554,7 +1138,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         this.keySelected.set('');
         this.outSelectKey.emit(undefined);
     }
-    handlerSelectItem(e, item, action, ignoreDisable = false) {
+    handlerSelectItem(e, item, action, ignoreDisable = false, isClickManual = true) {
         if (e instanceof Event) {
             e.stopPropagation();
             e.preventDefault();
@@ -596,7 +1180,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
             this.outSortSingleSelect.emit(this.configTemplateText()?.itemSort || newSort);
         }
         this.keySelected.set(item[this.fieldKey()]);
-        this.outSelectKey.emit({ key: this.keySelected(), item, isClickManual: true });
+        this.outSelectKey.emit({ key: this.keySelected(), item, isClickManual });
     }
     handlerSort(itemSort) {
         itemSort.reset = () => 0;
@@ -620,7 +1204,6 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
             dataStore.update(store => { return { ...store, ref: item() }; });
             if (key === undefined) {
                 const text = deleteUnicode(this.buildValueByConfig(dataStore, this.configTemplateText())).toLocaleLowerCase();
-                // console.log(text, dataStore());
                 const textEscape = escapeHtml(text);
                 const keySearch = deleteUnicode(escapeHtml(this.keySearch().toLocaleLowerCase()));
                 if (((this.isSearchOnline() && this.config()?.httpRequestData?.serviceName && !this.config()?.httpRequestData?.serviceOther) ||
@@ -688,7 +1271,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
             if (!this.keySelected()) {
                 return;
             }
-            const index = this.items().findIndex(item => item()[this.fieldKey()] === this.keySelected);
+            const index = this.items().findIndex(item => item()[this.fieldKey()] === this.keySelected());
             if (index !== -1) {
                 this.virtualScrollerComponent()?.scrollToIndex(index);
             }
@@ -698,12 +1281,12 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         if (this.keySelected() || !this.config()?.autoSelectFirstItem || !items || !items.length) {
             return;
         }
-        this.handlerSelectItem('click', items[0](), undefined, true);
+        this.handlerSelectItem('click', items[0](), undefined, true, false);
     }
     emitKeySelectedDefaultIfExistItem(items) {
         const item = items.find(store => store()[this.fieldKey()] === this.keySelected());
         if (item) {
-            this.handlerSelectItem('click', item(), undefined, true);
+            this.handlerSelectItem('click', item(), undefined, true, false);
         }
     }
     getLengthItem() {
@@ -714,7 +1297,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         item.specific_loadImgError = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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      <div #elementScroll\n        [style.height]=\"!configTemplateText.notUseVirtualScroll && heightViewPort() && (!config()?.ignoreShowDataWhenNotSearch || (config()?.ignoreShowDataWhenNotSearch && config()?.ignoreFixHeightShowDataWhenNotSearch))  ? heightViewPort()+'px':'100%'\"\n        class=\"w-full\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller #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) && (!config()?.ignoreShowDataWhenNotSearch || keySearch())) {\n      <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[6px] px-[16px]')\">\n        @if (!keySearch() && !loading()) {\n          {{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\"></ng-container>\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          {{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}\n        }\n        @if (loading()) {\n          &nbsp;\n        }\n      </div>\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template #listRef\n    let-itemsView='itemsView'>\n    @for (item of itemsView; track item()[fieldKey()]) {\n      <div #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item 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-selected]=\"!clickExactly() && keySelected() === item()[fieldKey()]\"\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]]=\"keySelected() === item()[fieldKey()] && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort)&& !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{'pointer-events-none libs-ui-disable':loading() || disable() || ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem())}\"\n          (click)=\"handlerClickRelative($event,item())\">\n          @if (item().bullet) {\n            <span class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.background-color]=\"item().bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event,item())\">\n            </span>\n          }\n\n          @if (item().avatarConfig; as avatarConfig) {\n            <libs_ui-components-avatar [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              [textAvatar]=\"avatarConfig.textAvatar\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\" />\n          }\n          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"configTemplateText.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage):item()) | async) : item()[configTemplateText.fieldGetImage || '']\"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n              [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n              (error)=\"handlerImageError($event, item())\"\n              (click)=\"handlerSelectItem($event,item())\" />\n          }\n          @if (item().buttonLeftConfig; as buttonLeft) {\n            @if (item().hrefButton) {\n              <a [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n                [href]=\"item().hrefButton\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\"></ng-container>\n              </a>\n            }\n            @if (!item().hrefButton) {\n              <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\"></ng-container>\n              </div>\n            }\n            <ng-template #buttonLeftTemplate>\n              <libs_ui-components-buttons-button class=\"w-full\"\n                [type]=\"buttonLeft.type || 'button-link-primary'\"\n                [label]=\"buttonLeft.label || ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable\"\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\"\n                [styleButton]=\"buttonLeft.styleButton\"\n                (moClick)=\"handlerSelectItem($event,item())\" />\n            </ng-template>\n          }\n          @if (item().switchConfig) {\n            <libs_ui-components-switch [active]=\"item().switchConfig.active\"\n              (moSwitch)=\"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            <libs_ui-components-popover [type]=\"item().popoverLabel?.type || 'text'\"\n              [elementRefCustom]=\"item().popoverLabel?.type === 'text'? undefined:itemRef\"\n              [ignoreShowPopover]=\"item().popoverLabel?.ignoreShowPopover\"\n              [config]=\"item().popoverLabel?.config || (configTemplateText.configLabelPopover || {})\"\n              [innerHtml]=\"item().fieldLabel\"\n              [classInclude]=\"item().classInclude\"\n              (moEvent)=\"handlerSelectItem($event,item())\" />\n          }\n          @if (item().fieldPopover; as popover) {\n            <libs_ui-components-popover class=\"{{ popover.classInclude || '' }}\"\n              [config]=\"popover?.config\">\n              @if (!popover.dataView) {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"keySelected()\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event,$event.item,$event.action)\" />\n          }\n          @if ((keySelected === item()[fieldKey()] || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length) ? item()[fieldKey()] : undefined) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check '+(configTemplateText.classIncludeIconSelected || 'right-[12px]')\">\n            </i>\n          }\n          @if (keySelected() === item()[fieldKey()] && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText.itemSort?.mode || ''\"\n                [fieldSort]=\"item()[fieldKey()]\"\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 6px 1px;font-size:12px;line-height:18px;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: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["classContainer", "options"], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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      <div #elementScroll\n        [style.height]=\"!configTemplateText.notUseVirtualScroll && heightViewPort() && (!config()?.ignoreShowDataWhenNotSearch || (config()?.ignoreShowDataWhenNotSearch && config()?.ignoreFixHeightShowDataWhenNotSearch))  ? heightViewPort()+'px':'100%'\"\n        class=\"w-full\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller #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) && (!config()?.ignoreShowDataWhenNotSearch || keySearch())) {\n      <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[6px] px-[16px]')\">\n        @if (!keySearch() && !loading()) {\n          {{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          {{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}\n        }\n        @if (loading()) {\n          &nbsp;\n        }\n      </div>\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template #listRef\n    let-itemsView='itemsView'>\n    @for (item of itemsView; track item()[fieldKey()]) {\n      <div #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item 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() && keySelected() === item()[fieldKey()]\"\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]]=\"keySelected() === item()[fieldKey()] && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort)&& !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{'pointer-events-none libs-ui-disable':loading() || disable() || ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem())}\"\n          (click)=\"handlerClickRelative($event,item())\">\n          @if (item().bullet) {\n            <span class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.background-color]=\"item().bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event,item())\">\n            </span>\n          }\n\n          @if (item().avatarConfig; as avatarConfig) {\n            <libs_ui-components-avatar [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              [textAvatar]=\"avatarConfig.textAvatar\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\" />\n          }\n          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"configTemplateText.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage):item()) | async) : item()[configTemplateText.fieldGetImage || '']\"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n              [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n              (error)=\"handlerImageError($event, item())\"\n              (click)=\"handlerSelectItem($event,item())\" />\n          }\n          @if (item().buttonLeftConfig; as buttonLeft) {\n            @if (item().hrefButton) {\n              <a [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 class=\"w-full\"\n                [type]=\"buttonLeft.type || 'button-link-primary'\"\n                [label]=\"buttonLeft.label || ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable\"\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\"\n                [styleButton]=\"buttonLeft.styleButton\"\n                (moClick)=\"handlerSelectItem($event,item())\" />\n            </ng-template>\n          }\n          @if (item().switchConfig) {\n            <libs_ui-components-switch [active]=\"item().switchConfig.active\"\n              (moSwitch)=\"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            <libs_ui-components-popover [type]=\"item().popoverLabel?.type || 'text'\"\n              [elementRefCustom]=\"item().popoverLabel?.type === 'text'? undefined:itemRef\"\n              [ignoreShowPopover]=\"item().popoverLabel?.ignoreShowPopover\"\n              [config]=\"item().popoverLabel?.config || (configTemplateText.configLabelPopover || {})\"\n              [innerHtml]=\"item().fieldLabel\"\n              [classInclude]=\"item().classInclude\"\n              (moEvent)=\"handlerSelectItem($event,item())\" />\n          }\n          @if (item().fieldPopover; as popover) {\n            <libs_ui-components-popover class=\"{{ popover.classInclude || '' }}\"\n              [config]=\"popover?.config\">\n              @if (!popover.dataView) {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"keySelected()\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event,$event.item,$event.action)\" />\n          }\n          @if ((keySelected() === item()[fieldKey()] || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length) ? item()[fieldKey()] : undefined) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check '+(configTemplateText.classIncludeIconSelected || 'right-[12px]')\">\n            </i>\n          }\n          @if (keySelected() === item()[fieldKey()] && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText.itemSort?.mode || ''\"\n                [fieldSort]=\"item()[fieldKey()]\"\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 6px 1px;font-size:12px;line-height:18px;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.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: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["classContainer", "options"], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListTextComponent, decorators: [{
             type: Component,
@@ -731,26 +1314,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LibsUiComponentsListHighlightKeySearchDirective,
                         LibsUiComponentsListRowsComponent,
                         LibsUiPipesCallFunctionInTemplatePipe
-                    ], template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <div #elementScroll\n        [style.height]=\"!configTemplateText.notUseVirtualScroll && heightViewPort() && (!config()?.ignoreShowDataWhenNotSearch || (config()?.ignoreShowDataWhenNotSearch && config()?.ignoreFixHeightShowDataWhenNotSearch))  ? heightViewPort()+'px':'100%'\"\n        class=\"w-full\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller #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) && (!config()?.ignoreShowDataWhenNotSearch || keySearch())) {\n      <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[6px] px-[16px]')\">\n        @if (!keySearch() && !loading()) {\n          {{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\"></ng-container>\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          {{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}\n        }\n        @if (loading()) {\n          &nbsp;\n        }\n      </div>\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template #listRef\n    let-itemsView='itemsView'>\n    @for (item of itemsView; track item()[fieldKey()]) {\n      <div #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item 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-selected]=\"!clickExactly() && keySelected() === item()[fieldKey()]\"\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]]=\"keySelected() === item()[fieldKey()] && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort)&& !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{'pointer-events-none libs-ui-disable':loading() || disable() || ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem())}\"\n          (click)=\"handlerClickRelative($event,item())\">\n          @if (item().bullet) {\n            <span class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.background-color]=\"item().bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event,item())\">\n            </span>\n          }\n\n          @if (item().avatarConfig; as avatarConfig) {\n            <libs_ui-components-avatar [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              [textAvatar]=\"avatarConfig.textAvatar\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\" />\n          }\n          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"configTemplateText.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage):item()) | async) : item()[configTemplateText.fieldGetImage || '']\"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n              [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n              (error)=\"handlerImageError($event, item())\"\n              (click)=\"handlerSelectItem($event,item())\" />\n          }\n          @if (item().buttonLeftConfig; as buttonLeft) {\n            @if (item().hrefButton) {\n              <a [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n                [href]=\"item().hrefButton\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\"></ng-container>\n              </a>\n            }\n            @if (!item().hrefButton) {\n              <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\"></ng-container>\n              </div>\n            }\n            <ng-template #buttonLeftTemplate>\n              <libs_ui-components-buttons-button class=\"w-full\"\n                [type]=\"buttonLeft.type || 'button-link-primary'\"\n                [label]=\"buttonLeft.label || ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable\"\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\"\n                [styleButton]=\"buttonLeft.styleButton\"\n                (moClick)=\"handlerSelectItem($event,item())\" />\n            </ng-template>\n          }\n          @if (item().switchConfig) {\n            <libs_ui-components-switch [active]=\"item().switchConfig.active\"\n              (moSwitch)=\"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            <libs_ui-components-popover [type]=\"item().popoverLabel?.type || 'text'\"\n              [elementRefCustom]=\"item().popoverLabel?.type === 'text'? undefined:itemRef\"\n              [ignoreShowPopover]=\"item().popoverLabel?.ignoreShowPopover\"\n              [config]=\"item().popoverLabel?.config || (configTemplateText.configLabelPopover || {})\"\n              [innerHtml]=\"item().fieldLabel\"\n              [classInclude]=\"item().classInclude\"\n              (moEvent)=\"handlerSelectItem($event,item())\" />\n          }\n          @if (item().fieldPopover; as popover) {\n            <libs_ui-components-popover class=\"{{ popover.classInclude || '' }}\"\n              [config]=\"popover?.config\">\n              @if (!popover.dataView) {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"keySelected()\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event,$event.item,$event.action)\" />\n          }\n          @if ((keySelected === item()[fieldKey()] || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length) ? item()[fieldKey()] : undefined) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check '+(configTemplateText.classIncludeIconSelected || 'right-[12px]')\">\n            </i>\n          }\n          @if (keySelected() === item()[fieldKey()] && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText.itemSort?.mode || ''\"\n                [fieldSort]=\"item()[fieldKey()]\"\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 6px 1px;font-size:12px;line-height:18px;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      <div #elementScroll\n        [style.height]=\"!configTemplateText.notUseVirtualScroll && heightViewPort() && (!config()?.ignoreShowDataWhenNotSearch || (config()?.ignoreShowDataWhenNotSearch && config()?.ignoreFixHeightShowDataWhenNotSearch))  ? heightViewPort()+'px':'100%'\"\n        class=\"w-full\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller #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) && (!config()?.ignoreShowDataWhenNotSearch || keySearch())) {\n      <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[6px] px-[16px]')\">\n        @if (!keySearch() && !loading()) {\n          {{ (config()?.textNoData ?? 'i18n_have_no_selection') | translate }}\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null;context:{keySearch:keySearch()}\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          {{ (config()?.textSearchNoData ?? 'i18n_no_result') | translate }}\n        }\n        @if (loading()) {\n          &nbsp;\n        }\n      </div>\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template #listRef\n    let-itemsView='itemsView'>\n    @for (item of itemsView; track item()[fieldKey()]) {\n      <div #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item 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() && keySelected() === item()[fieldKey()]\"\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]]=\"keySelected() === item()[fieldKey()] && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort)&& !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{'pointer-events-none libs-ui-disable':loading() || disable() || ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem())}\"\n          (click)=\"handlerClickRelative($event,item())\">\n          @if (item().bullet) {\n            <span class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.background-color]=\"item().bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event,item())\">\n            </span>\n          }\n\n          @if (item().avatarConfig; as avatarConfig) {\n            <libs_ui-components-avatar [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              [textAvatar]=\"avatarConfig.textAvatar\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\" />\n          }\n          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"configTemplateText.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage):item()) | async) : item()[configTemplateText.fieldGetImage || '']\"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n              [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n              (error)=\"handlerImageError($event, item())\"\n              (click)=\"handlerSelectItem($event,item())\" />\n          }\n          @if (item().buttonLeftConfig; as buttonLeft) {\n            @if (item().hrefButton) {\n              <a [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 class=\"w-full\"\n                [type]=\"buttonLeft.type || 'button-link-primary'\"\n                [label]=\"buttonLeft.label || ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable\"\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\"\n                [styleButton]=\"buttonLeft.styleButton\"\n                (moClick)=\"handlerSelectItem($event,item())\" />\n            </ng-template>\n          }\n          @if (item().switchConfig) {\n            <libs_ui-components-switch [active]=\"item().switchConfig.active\"\n              (moSwitch)=\"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            <libs_ui-components-popover [type]=\"item().popoverLabel?.type || 'text'\"\n              [elementRefCustom]=\"item().popoverLabel?.type === 'text'? undefined:itemRef\"\n              [ignoreShowPopover]=\"item().popoverLabel?.ignoreShowPopover\"\n              [config]=\"item().popoverLabel?.config || (configTemplateText.configLabelPopover || {})\"\n              [innerHtml]=\"item().fieldLabel\"\n              [classInclude]=\"item().classInclude\"\n              (moEvent)=\"handlerSelectItem($event,item())\" />\n          }\n          @if (item().fieldPopover; as popover) {\n            <libs_ui-components-popover class=\"{{ popover.classInclude || '' }}\"\n              [config]=\"popover?.config\">\n              @if (!popover.dataView) {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"keySelected()\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event,$event.item,$event.action)\" />\n          }\n          @if ((keySelected() === item()[fieldKey()] || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length) ? item()[fieldKey()] : undefined) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check '+(configTemplateText.classIncludeIconSelected || 'right-[12px]')\">\n            </i>\n          }\n          @if (keySelected() === item()[fieldKey()] && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText.itemSort?.mode || ''\"\n                [fieldSort]=\"item()[fieldKey()]\"\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 6px 1px;font-size:12px;line-height:18px;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"] }]
         }] });
 
 const getComponentByType = (typeTemplate) => {
     switch (typeTemplate) {
         case 'checkbox':
-            return LibsUiComponentsListTextComponent;
+            return LibsUiComponentsListCheckboxComponent;
         case 'group':
             return LibsUiComponentsListTextComponent;
         case 'radio':
-            return LibsUiComponentsListTextComponent;
+            return LibsUiComponentsListRadioComponent;
         case 'text':
             return LibsUiComponentsListTextComponent;
         case 'tag':
-            return LibsUiComponentsListTextComponent;
+            return LibsUiComponentsListTagComponent;
     }
 };
 const getFieldKeyByType = (config, fieldKeyDefault) => {
     if (!config) {
-        return;
+        return fieldKeyDefault;
     }
     switch (config.type) {
         case 'checkbox':
@@ -812,10 +1395,10 @@ class LibsUiComponentsListComponent {
     onSearch = new Subject();
     onRefresh = new Subject();
     onSetHiddenItemByKey = new Subject();
-    onSetDataStore = new Subject();
     onItemChangeUnSelect = new Subject();
     onUpdateMultiKeySelectedGroup = new Subject();
     onRemoveItems = new Subject();
+    onUpdateData = new Subject();
     componentRef;
     configData = signal({
         type: 'text',
@@ -854,7 +1437,6 @@ class LibsUiComponentsListComponent {
     keysHiddenItem = input(undefined); // không dùng giá trị này kết hợp với template checkbox có config chứa configCheckboxCheckAll
     focusInputSearch = input();
     skipFocusInputWhenKeySearchStoreUndefined = input();
-    functionCustomAddDataToStore = input();
     functionGetItemsAutoAddList = input(undefined);
     validRequired = input(undefined);
     showValidateBottom = input();
@@ -880,37 +1462,9 @@ class LibsUiComponentsListComponent {
     /* INJECT */
     dynamicComponentService = inject(LibsUiDynamicComponentService);
     constructor() {
+        effect(() => untracked(this.changeSignal.bind(this)));
         effect(() => {
-            this.keySearchStore.set(this.keySearch());
-            this.onSearch.next(this.keySearch());
-        }, { allowSignalWrites: true });
-        effect(() => this.onItemChangeUnSelect.next(this.itemChangeUnSelect()));
-        effect(() => {
-            if (!this.componentRef) {
-                return;
-            }
-            if (!isEmpty(this.keysDisableItem())) {
-                this.componentRef.setInput('keysDisableItem', this.keysDisableItem());
-            }
-            if (!isEmpty(this.keysHiddenItem())) {
-                this.onSetHiddenItemByKey.next(this.keysHiddenItem() || []);
-            }
-            if (!isEmpty(this.disable())) {
-                this.componentRef.setInput('disable', this.disable());
-            }
-            if (!isEmpty(this.keySelected())) {
-                this.componentRef.setInput('keySelected', this.keySelected());
-            }
-            if (this.configData()?.type !== 'group' && !isEmpty(this.multiKeySelected())) {
-                this.componentRef.setInput('multiKeySelected', this.multiKeySelected());
-            }
-            if (this.configData()?.type === 'group' && !isEmpty(this.multiKeySelected())) {
-                this.componentRef.setInput('multiKeySelected', this.multiKeySelected());
-                this.onUpdateMultiKeySelectedGroup.next();
-            }
-        }, { allowSignalWrites: true });
-        effect(() => {
-            this.refresh();
+            untracked(() => this.refresh());
         });
     }
     ngOnInit() {
@@ -919,7 +1473,8 @@ class LibsUiComponentsListComponent {
             refresh: this.refresh.bind(this),
             resetKeySelected: this.handlerRemoveKeySelected.bind(this),
             getRectListView: async () => this.listViewElementRef()?.nativeElement.getBoundingClientRect(),
-            removeItems: async (keys) => this.onRemoveItems.next(keys)
+            removeItems: async (keys) => this.onRemoveItems.next(keys),
+            updateData: async (data) => this.onUpdateData.next(data)
         });
         const config = this.config();
         if (config) {
@@ -931,7 +1486,6 @@ class LibsUiComponentsListComponent {
         timer(0).pipe(takeUntil$1(this.onDestroy)).subscribe(() => {
             this.dynamicComponentService.addToElement(this.componentRef, this.contentElementRef()?.nativeElement);
         });
-        // this.componentRef.setInput('onSetDataStore', this.onSetDataStore);
         this.componentRef.setInput('onSetHiddenItemByKey', this.onSetHiddenItemByKey);
         this.componentRef.setInput('config', this.configData());
         if (this.searchConfig()) {
@@ -939,6 +1493,7 @@ class LibsUiComponentsListComponent {
         }
         this.componentRef.setInput('onSearch', this.onSearch);
         this.componentRef.setInput('onRefresh', this.onRefresh);
+        this.componentRef.setInput('onUpdateData', this.onUpdateData);
         this.componentRef.setInput('keySearch', this.keySearchStore() ?? '');
         this.componentRef.setInput('dropdownTabKeyActive', this.dropdownTabKeyActive());
         this.componentRef.setInput('clickExactly', this.clickExactly() || false);
@@ -946,7 +1501,6 @@ class LibsUiComponentsListComponent {
         this.componentRef.setInput('paddingLeftItem', this.paddingLeftItem());
         this.componentRef.setInput('resetKeyWhenSelectAllKeyDropdown', this.resetKeyWhenSelectAllKeyDropdown());
         this.componentRef.setInput('ignoreClassDisableDefaultWhenUseKeysDisableItem', this.ignoreClassDisableDefaultWhenUseKeysDisableItem());
-        this.componentRef.setInput('functionCustomAddDataToStore', this.functionCustomAddDataToStore());
         this.componentRef.setInput('functionGetItemsAutoAddList', this.functionGetItemsAutoAddList());
         if (this.maxItemShow()) {
             this.componentRef.setInput('maxItemShow', this.maxItemShow());
@@ -1021,6 +1575,33 @@ class LibsUiComponentsListComponent {
         });
     }
     /* FUNCTIONS */
+    changeSignal() {
+        this.keySearchStore.set(this.keySearch());
+        this.onSearch.next(this.keySearch());
+        this.onItemChangeUnSelect.next(this.itemChangeUnSelect());
+        if (!this.componentRef) {
+            return;
+        }
+        if (!isEmpty(this.keysDisableItem())) {
+            this.componentRef.setInput('keysDisableItem', this.keysDisableItem());
+        }
+        if (!isEmpty(this.keysHiddenItem())) {
+            this.onSetHiddenItemByKey.next(this.keysHiddenItem() || []);
+        }
+        if (!isEmpty(this.disable())) {
+            this.componentRef.setInput('disable', this.disable());
+        }
+        if (!isEmpty(this.keySelected())) {
+            this.componentRef.setInput('keySelected', this.keySelected());
+        }
+        if (this.configData()?.type !== 'group' && !isEmpty(this.multiKeySelected())) {
+            this.componentRef.setInput('multiKeySelected', this.multiKeySelected());
+        }
+        if (this.configData()?.type === 'group' && !isEmpty(this.multiKeySelected())) {
+            this.componentRef.setInput('multiKeySelected', this.multiKeySelected());
+            this.onUpdateMultiKeySelectedGroup.next();
+        }
+    }
     handlerSearch(keySearch) {
         this.keySearchStore.set(keySearch);
         this.onSearch.next(keySearch);
@@ -1064,7 +1645,7 @@ class LibsUiComponentsListComponent {
             return;
         }
         this.dropdownTabKeyActive();
-        Object.assign(this.configData, this.cloneConfig(config));
+        this.configData.set(this.cloneConfig(config));
         this.onRefresh.next();
     }
     cloneConfig(configInput) {
@@ -1093,7 +1674,7 @@ class LibsUiComponentsListComponent {
         this.onDestroy.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }, itemChangeUnSelect: { classPropertyName: "itemChangeUnSelect", publicName: "itemChangeUnSelect", 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: true, 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 }, functionCustomAddDataToStore: { classPropertyName: "functionCustomAddDataToStore", publicName: "functionCustomAddDataToStore", 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 }, 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", 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 #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow\"\n  [class.h-full]=\"!maxItemShow\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label [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\"></ng-container>\n  }\n  @if (!hiddenInputSearch()) {\n    <libs_ui-components-inputs-search [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 class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude():'' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\">\n    </div>\n  }\n  <div class=\"flex flex-col {{ (config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch) ? 'h-[353px]' : 'h-full' }}\">\n    <div #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\">\n    </div>\n\n    @for (buttonOther of buttonsOther(); track $index) {\n      <div class=\"bg-[#ffffff]\">\n        <libs_ui-components-buttons-button [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '')+' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full libs-ui-border-top-general 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]\">\n        <libs_ui-components-buttons-button label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-100 libs-ui-border-top-general text-left rounded-0\"\n          classLabel=\"mo-lib-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\"></ng-container>\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      <span class=\"text-[#ee2d41] mo-lib-font-h7\"\n        [innerHtml]=\"(validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\">\n      </span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-view-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: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "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"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }, itemChangeUnSelect: { classPropertyName: "itemChangeUnSelect", publicName: "itemChangeUnSelect", 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: true, 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 }, 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", 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 #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow\"\n  [class.h-full]=\"!maxItemShow\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label [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 [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 class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude():'' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\">\n    </div>\n  }\n  <div class=\"flex flex-col {{ (config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch) ? 'h-[353px]' : 'h-full' }}\">\n    <div #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\">\n    </div>\n\n    @for (buttonOther of buttonsOther(); track $index) {\n      <div class=\"bg-[#ffffff]\">\n        <libs_ui-components-buttons-button [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '')+' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full libs-ui-border-top-general 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]\">\n        <libs_ui-components-buttons-button label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-100 libs-ui-border-top-general text-left rounded-0\"\n          classLabel=\"mo-lib-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 [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      <span class=\"text-[#ee2d41] mo-lib-font-h7\"\n        [innerHtml]=\"(validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\">\n      </span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-view-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: i2.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: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "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"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListComponent, decorators: [{
             type: Component,
@@ -1103,7 +1684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LibsUiComponentsInputsSearchComponent,
                         LibsUiComponentsPopoverComponent,
                         LibsUiComponentsButtonsButtonComponent
-                    ], template: "<div #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow\"\n  [class.h-full]=\"!maxItemShow\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label [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\"></ng-container>\n  }\n  @if (!hiddenInputSearch()) {\n    <libs_ui-components-inputs-search [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 class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude():'' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\">\n    </div>\n  }\n  <div class=\"flex flex-col {{ (config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch) ? 'h-[353px]' : 'h-full' }}\">\n    <div #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\">\n    </div>\n\n    @for (buttonOther of buttonsOther(); track $index) {\n      <div class=\"bg-[#ffffff]\">\n        <libs_ui-components-buttons-button [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '')+' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full libs-ui-border-top-general 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]\">\n        <libs_ui-components-buttons-button label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-100 libs-ui-border-top-general text-left rounded-0\"\n          classLabel=\"mo-lib-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\"></ng-container>\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      <span class=\"text-[#ee2d41] mo-lib-font-h7\"\n        [innerHtml]=\"(validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\">\n      </span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-view-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"] }]
+                    ], template: "<div #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow\"\n  [class.h-full]=\"!maxItemShow\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label [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 [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 class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude():'' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\">\n    </div>\n  }\n  <div class=\"flex flex-col {{ (config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch) ? 'h-[353px]' : 'h-full' }}\">\n    <div #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\">\n    </div>\n\n    @for (buttonOther of buttonsOther(); track $index) {\n      <div class=\"bg-[#ffffff]\">\n        <libs_ui-components-buttons-button [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '')+' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full libs-ui-border-top-general 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]\">\n        <libs_ui-components-buttons-button label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-100 libs-ui-border-top-general text-left rounded-0\"\n          classLabel=\"mo-lib-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 [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      <span class=\"text-[#ee2d41] mo-lib-font-h7\"\n        [innerHtml]=\"(validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\">\n      </span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-view-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: () => [] });
 
 ;