@libs-ui/components-list 0.2.306-4 → 0.2.306-6

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

@@ -47,7 +47,7 @@ class LibsUiComponentsListHighlightKeySearchDirective {
         if (!children.length) {
             return;
         }
-        children.forEach(item => {
+        children.forEach((item) => {
             if (item.nodeType === Node.TEXT_NODE) {
                 this.checkAndReplace(item);
                 return;
@@ -86,7 +86,7 @@ class LibsUiComponentsListHighlightKeySearchDirective {
                 textNode = document.createTextNode(start);
                 parentNode.insertBefore(textNode, node);
             }
-            const span = document.createElement("span");
+            const span = document.createElement('span');
             if (!span.classList.contains(this.classHighlight())) {
                 span.classList.add(this.classHighlight());
             }
@@ -103,7 +103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[LibsUiComponentsListHighlightKeySearchDirective]',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 
@@ -113,7 +113,7 @@ class LibsUiCheckSelectedByKeyPipe {
         if (!multiKeys || !(multiKeys instanceof Array) || !multiKeys.length || !length) {
             return false;
         }
-        return multiKeys.some(key => key === value);
+        return multiKeys.some((key) => key === value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiCheckSelectedByKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibsUiCheckSelectedByKeyPipe, isStandalone: true, name: "LibsUiCheckSelectedByKeyPipe" });
@@ -122,7 +122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Pipe,
             args: [{
                     name: 'LibsUiCheckSelectedByKeyPipe',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 
@@ -136,7 +136,7 @@ class LibsUiComponentsListRowsComponent {
     item = input();
     keySelected = input();
     fieldKey = input('id');
-    zIndex = input(1200, { transform: (value) => !isEmpty(value) ? (value + 1) : 1200 });
+    zIndex = input(1200, { transform: (value) => (!isEmpty(value) ? value + 1 : 1200) });
     outChangStageFlagMousePopover = output();
     outEvent = output();
     constructor() {
@@ -162,25 +162,27 @@ class LibsUiComponentsListRowsComponent {
         if (!event.target || !functionGetImageError) {
             return;
         }
-        (event.target.src = await lastValueFrom(functionGetImageError(this.item())));
+        event.target.src = await lastValueFrom(functionGetImageError(this.item()));
     }
     handlerChangStageFlagMouse(flag) {
         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] | async; 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\n        @if (fieldKey() && row().getComponentOutlet) {\n          <ng-container\n            *ngComponentOutlet=\"('row:'+indexRow | LibsUiPipesCallFunctionInTemplatePipe:row().getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:row().getDataComponentOutlet:item():'row:'+indexRow:{valueIsEmpty:{item:item()}}) | async\" />\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 (fieldKey() && col().getComponentOutlet) {\n                <ng-container\n                  *ngComponentOutlet=\"('row:'+indexRow+'-col:'+colIndex | LibsUiPipesCallFunctionInTemplatePipe:col().getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:col().getDataComponentOutlet:item():'row:'+indexRow+'-col:'+colIndex:{valueIsEmpty:{item:item()}}) | async\" />\n              }\n              @if (item()['fieldColToggle'+indexRow+colIndex]; as toggle) {\n                <libs_ui-components-label\n                  [style]=\"(' ' | LibsUiPipesCallFunctionInTemplatePipe:item()['fieldColStylesDynamic'+indexRow+colIndex]:item()) | async\"\n                  [hasToggle]=\"toggle.hasToggle\"\n                  [toggleActive]=\"toggle.toggleActive\"\n                  [toggleDisable]=\"toggle.toggleDisable\"\n                  [popover]=\"toggle.popover\"\n                  [classInclude]=\"toggle.classInclude\"\n                  [labelLeft]=\"toggle.labelLeft\"\n                  [labelRight]=\"toggle.labelRight\"\n                  (outSwitchEvent)=\"handlerSelectItem('click',item(),col().action)\" />\n              }\n              @if (item()['fieldColButton'+indexRow+colIndex]; as button) {\n                <libs_ui-components-buttons-button [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: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }], 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\n            [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\n            [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n            [classInclude]=\"avatarConfig.classInclude\"\n            [size]=\"avatarConfig.size || 32\"\n            [linkAvatar]=\"avatarConfig.linkAvatar\"\n            [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n            [idGenColor]=\"avatarConfig.idGenColor\"\n            [textAvatar]=\"avatarConfig.textAvatar\" />\n        }\n        @if (fieldKey() && item()['fieldLabelRow' + indexRow] | async; as labelRow) {\n          <libs_ui-components-popover\n            type=\"text\"\n            [config]=\"row().getPopoverConfig ? ('popover' | LibsUiPipesCallFunctionInTemplatePipe: row().getPopoverConfig : item() | async) : { zIndex: zIndex() }\"\n            [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || row().classGetValue || '' : row().classGetValue || ''\"\n            [innerHtml]=\"labelRow\"\n            (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n            (outEvent)=\"handlerSelectItem($event, item(), row().action)\" />\n        }\n\n        @if (fieldKey() && row().getComponentOutlet) {\n          <ng-container\n            *ngComponentOutlet=\"\n              'row:' + indexRow | LibsUiPipesCallFunctionInTemplatePipe: row().getComponentOutlet : item() | async;\n              inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: row().getDataComponentOutlet : item() : 'row:' + indexRow : { valueIsEmpty: { item: item() } } | async\n            \" />\n        }\n        @if (row().cols?.()?.length) {\n          <div\n            [class]=\"row().classCols || 'flex'\"\n            [style]=\"item()[item()['fieldRowStylesDynamicCols' + indexRow]]\">\n            @for (col of row().cols?.(); track $index; let colIndex = $index) {\n              @if (col().getImage && (item() | LibsUiPipesCallFunctionInTemplatePipe: col().getImage : item() | async); as imgUrl) {\n                <img\n                  [class]=\"item() | LibsUiPipesCallFunctionInTemplatePipe: col().getClassImage : item() | async\"\n                  src=\"{{ imgUrl }}\"\n                  (error)=\"handlerErrorImage($event, col().getImageError)\" />\n              }\n              @if (item()['fieldColAvatarConfig' + indexRow + colIndex]; as avatarConfig) {\n                <libs_ui-components-avatar\n                  [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n                  [classInclude]=\"avatarConfig.classInclude\"\n                  [size]=\"avatarConfig.size || 32\"\n                  [linkAvatar]=\"avatarConfig.linkAvatar\"\n                  [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n                  [idGenColor]=\"avatarConfig.idGenColor\"\n                  [textAvatar]=\"avatarConfig.textAvatar\" />\n              }\n              @if (item()['fieldLabelCol' + indexRow + colIndex]; as labelColFunc) {\n                <libs_ui-components-popover\n                  type=\"text\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || item()['fieldColClass' + indexRow + colIndex] || '' : item()['fieldColClass' + indexRow + colIndex] || ''\"\n                  [innerHtml]=\"'fieldLabelCol' | LibsUiPipesCallFunctionInTemplatePipe: labelColFunc : item() | async\"\n                  [config]=\"{ zIndex: zIndex() }\"\n                  (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n                  (outEvent)=\"handlerSelectItem($event, item(), col().action)\" />\n              }\n              @if (item()['fieldColPopover' + indexRow + colIndex]; as popover) {\n                <libs_ui-components-popover\n                  [type]=\"popover.type ?? 'other'\"\n                  [config]=\"popover?.config\"\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\n                    [class]=\"popover.classInclude || ''\"\n                    [innerHtml]=\"popover.dataView ?? popoverIcon | translate\"></span>\n                </libs_ui-components-popover>\n              }\n              @if (fieldKey() && col().getComponentOutlet) {\n                <ng-container\n                  *ngComponentOutlet=\"\n                    'row:' + indexRow + '-col:' + colIndex | LibsUiPipesCallFunctionInTemplatePipe: col().getComponentOutlet : item() | async;\n                    inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: col().getDataComponentOutlet : item() : 'row:' + indexRow + '-col:' + colIndex : { valueIsEmpty: { item: item() } } | async\n                  \" />\n              }\n              @if (item()['fieldColToggle' + indexRow + colIndex]; as toggle) {\n                <libs_ui-components-label\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [hasToggle]=\"toggle.hasToggle\"\n                  [toggleActive]=\"toggle.toggleActive\"\n                  [toggleDisable]=\"toggle.toggleDisable\"\n                  [popover]=\"toggle.popover\"\n                  [classInclude]=\"toggle.classInclude\"\n                  [labelLeft]=\"toggle.labelLeft\"\n                  [labelRight]=\"toggle.labelRight\"\n                  (outSwitchEvent)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldColButton' + indexRow + colIndex]; as button) {\n                <libs_ui-components-buttons-button\n                  [type]=\"button.type\"\n                  [classIconLeft]=\"button.classIconLeft\"\n                  [classIconRight]=\"button.classIconRight\"\n                  [classLabel]=\"button.classLabel\"\n                  [iconOnlyType]=\"button.iconOnlyType\"\n                  [popover]=\"button.popover\"\n                  [disable]=\"button.disable\"\n                  [ignorePointerEvent]=\"button.ignorePointerEvent\"\n                  [classInclude]=\"item()['fieldColClass' + indexRow + colIndex] ?? ' '\"\n                  [ignoreStopPropagationEvent]=\"false\"\n                  (outClick)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldBadge' + indexRow + colIndex]; as badge) {\n                <libs_ui-components-badge\n                  [mode]=\"badge.mode || 'x+'\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [count]=\"badge.count\"\n                  [maxCount]=\"badge.maxCount || 99\"\n                  [classCircle]=\"badge.classCircle || 'libs-ui-font-h4r'\" />\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListRowsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "libs_ui-components-list-templates_rows", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe, TranslateModule, NgComponentOutlet,
+            args: [{ selector: 'libs_ui-components-list-templates_rows', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AsyncPipe,
+                        TranslateModule,
+                        NgComponentOutlet,
                         LibsUiComponentsAvatarComponent,
                         LibsUiComponentsPopoverComponent,
                         LibsUiComponentsButtonsButtonComponent,
                         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] | async; 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\n        @if (fieldKey() && row().getComponentOutlet) {\n          <ng-container\n            *ngComponentOutlet=\"('row:'+indexRow | LibsUiPipesCallFunctionInTemplatePipe:row().getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:row().getDataComponentOutlet:item():'row:'+indexRow:{valueIsEmpty:{item:item()}}) | async\" />\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 (fieldKey() && col().getComponentOutlet) {\n                <ng-container\n                  *ngComponentOutlet=\"('row:'+indexRow+'-col:'+colIndex | LibsUiPipesCallFunctionInTemplatePipe:col().getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:col().getDataComponentOutlet:item():'row:'+indexRow+'-col:'+colIndex:{valueIsEmpty:{item:item()}}) | async\" />\n              }\n              @if (item()['fieldColToggle'+indexRow+colIndex]; as toggle) {\n                <libs_ui-components-label\n                  [style]=\"(' ' | LibsUiPipesCallFunctionInTemplatePipe:item()['fieldColStylesDynamic'+indexRow+colIndex]:item()) | async\"\n                  [hasToggle]=\"toggle.hasToggle\"\n                  [toggleActive]=\"toggle.toggleActive\"\n                  [toggleDisable]=\"toggle.toggleDisable\"\n                  [popover]=\"toggle.popover\"\n                  [classInclude]=\"toggle.classInclude\"\n                  [labelLeft]=\"toggle.labelLeft\"\n                  [labelRight]=\"toggle.labelRight\"\n                  (outSwitchEvent)=\"handlerSelectItem('click',item(),col().action)\" />\n              }\n              @if (item()['fieldColButton'+indexRow+colIndex]; as button) {\n                <libs_ui-components-buttons-button [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" }]
+                        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\n            [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\n            [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n            [classInclude]=\"avatarConfig.classInclude\"\n            [size]=\"avatarConfig.size || 32\"\n            [linkAvatar]=\"avatarConfig.linkAvatar\"\n            [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n            [idGenColor]=\"avatarConfig.idGenColor\"\n            [textAvatar]=\"avatarConfig.textAvatar\" />\n        }\n        @if (fieldKey() && item()['fieldLabelRow' + indexRow] | async; as labelRow) {\n          <libs_ui-components-popover\n            type=\"text\"\n            [config]=\"row().getPopoverConfig ? ('popover' | LibsUiPipesCallFunctionInTemplatePipe: row().getPopoverConfig : item() | async) : { zIndex: zIndex() }\"\n            [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || row().classGetValue || '' : row().classGetValue || ''\"\n            [innerHtml]=\"labelRow\"\n            (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n            (outEvent)=\"handlerSelectItem($event, item(), row().action)\" />\n        }\n\n        @if (fieldKey() && row().getComponentOutlet) {\n          <ng-container\n            *ngComponentOutlet=\"\n              'row:' + indexRow | LibsUiPipesCallFunctionInTemplatePipe: row().getComponentOutlet : item() | async;\n              inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: row().getDataComponentOutlet : item() : 'row:' + indexRow : { valueIsEmpty: { item: item() } } | async\n            \" />\n        }\n        @if (row().cols?.()?.length) {\n          <div\n            [class]=\"row().classCols || 'flex'\"\n            [style]=\"item()[item()['fieldRowStylesDynamicCols' + indexRow]]\">\n            @for (col of row().cols?.(); track $index; let colIndex = $index) {\n              @if (col().getImage && (item() | LibsUiPipesCallFunctionInTemplatePipe: col().getImage : item() | async); as imgUrl) {\n                <img\n                  [class]=\"item() | LibsUiPipesCallFunctionInTemplatePipe: col().getClassImage : item() | async\"\n                  src=\"{{ imgUrl }}\"\n                  (error)=\"handlerErrorImage($event, col().getImageError)\" />\n              }\n              @if (item()['fieldColAvatarConfig' + indexRow + colIndex]; as avatarConfig) {\n                <libs_ui-components-avatar\n                  [typeShape]=\"avatarConfig.typeShape || 'circle'\"\n                  [classInclude]=\"avatarConfig.classInclude\"\n                  [size]=\"avatarConfig.size || 32\"\n                  [linkAvatar]=\"avatarConfig.linkAvatar\"\n                  [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n                  [idGenColor]=\"avatarConfig.idGenColor\"\n                  [textAvatar]=\"avatarConfig.textAvatar\" />\n              }\n              @if (item()['fieldLabelCol' + indexRow + colIndex]; as labelColFunc) {\n                <libs_ui-components-popover\n                  type=\"text\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [classInclude]=\"keySelected() === item()[fieldKey()] ? row().classItemSelected || item()['fieldColClass' + indexRow + colIndex] || '' : item()['fieldColClass' + indexRow + colIndex] || ''\"\n                  [innerHtml]=\"'fieldLabelCol' | LibsUiPipesCallFunctionInTemplatePipe: labelColFunc : item() | async\"\n                  [config]=\"{ zIndex: zIndex() }\"\n                  (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n                  (outEvent)=\"handlerSelectItem($event, item(), col().action)\" />\n              }\n              @if (item()['fieldColPopover' + indexRow + colIndex]; as popover) {\n                <libs_ui-components-popover\n                  [type]=\"popover.type ?? 'other'\"\n                  [config]=\"popover?.config\"\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\n                    [class]=\"popover.classInclude || ''\"\n                    [innerHtml]=\"popover.dataView ?? popoverIcon | translate\"></span>\n                </libs_ui-components-popover>\n              }\n              @if (fieldKey() && col().getComponentOutlet) {\n                <ng-container\n                  *ngComponentOutlet=\"\n                    'row:' + indexRow + '-col:' + colIndex | LibsUiPipesCallFunctionInTemplatePipe: col().getComponentOutlet : item() | async;\n                    inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: col().getDataComponentOutlet : item() : 'row:' + indexRow + '-col:' + colIndex : { valueIsEmpty: { item: item() } } | async\n                  \" />\n              }\n              @if (item()['fieldColToggle' + indexRow + colIndex]; as toggle) {\n                <libs_ui-components-label\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [hasToggle]=\"toggle.hasToggle\"\n                  [toggleActive]=\"toggle.toggleActive\"\n                  [toggleDisable]=\"toggle.toggleDisable\"\n                  [popover]=\"toggle.popover\"\n                  [classInclude]=\"toggle.classInclude\"\n                  [labelLeft]=\"toggle.labelLeft\"\n                  [labelRight]=\"toggle.labelRight\"\n                  (outSwitchEvent)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldColButton' + indexRow + colIndex]; as button) {\n                <libs_ui-components-buttons-button\n                  [type]=\"button.type\"\n                  [classIconLeft]=\"button.classIconLeft\"\n                  [classIconRight]=\"button.classIconRight\"\n                  [classLabel]=\"button.classLabel\"\n                  [iconOnlyType]=\"button.iconOnlyType\"\n                  [popover]=\"button.popover\"\n                  [disable]=\"button.disable\"\n                  [ignorePointerEvent]=\"button.ignorePointerEvent\"\n                  [classInclude]=\"item()['fieldColClass' + indexRow + colIndex] ?? ' '\"\n                  [ignoreStopPropagationEvent]=\"false\"\n                  (outClick)=\"handlerSelectItem('click', item(), col().action)\" />\n              }\n              @if (item()['fieldBadge' + indexRow + colIndex]; as badge) {\n                <libs_ui-components-badge\n                  [mode]=\"badge.mode || 'x+'\"\n                  [style]=\"' ' | LibsUiPipesCallFunctionInTemplatePipe: item()['fieldColStylesDynamic' + indexRow + colIndex] : item() | async\"\n                  [count]=\"badge.count\"\n                  [maxCount]=\"badge.maxCount || 99\"\n                  [classCircle]=\"badge.classCircle || 'libs-ui-font-h4r'\" />\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -253,11 +255,15 @@ class LibsUiComponentsListTemplatesComponentAbstract {
         this.outLoading.emit(this.loading());
     }
     ngOnInit() {
-        this.onSearch()?.pipe(takeUntil(this.onDestroy)).subscribe((keySearch) => {
+        this.onSearch()
+            ?.pipe(takeUntil(this.onDestroy))
+            .subscribe((keySearch) => {
             this.keySearch.set(keySearch ?? '');
             this.processSearch();
         });
-        this.onRefresh()?.pipe(skipWhile(() => this.loading()), takeUntil(this.onDestroy)).subscribe(() => {
+        this.onRefresh()
+            ?.pipe(skipWhile(() => this.loading()), takeUntil(this.onDestroy))
+            .subscribe(() => {
             if (this.dropdownTabKeyActive()) {
                 this.items.set([]);
                 this.store.set([]);
@@ -279,7 +285,7 @@ class LibsUiComponentsListTemplatesComponentAbstract {
             return;
         }
         if (this.config()?.type === 'checkbox') {
-            newData().forEach(item => item.update(value => ({ ...value, isAddNew: true })));
+            newData().forEach((item) => item.update((value) => ({ ...value, isAddNew: true })));
         }
         functionCustomAddDataToStore(newData, this.store);
         this.processData();
@@ -311,9 +317,9 @@ class LibsUiComponentsListTemplatesComponentAbstract {
     }
     removeItems(keys) {
         const fieldKey = this.getFieldKey();
-        [this.store(), this.items()].forEach(element => {
+        [this.store(), this.items()].forEach((element) => {
             if (this.config()?.type === 'group') {
-                element.forEach(item => {
+                element.forEach((item) => {
                     this.removeItem(item()[this.config()?.configTemplateGroup?.()?.fieldGetItems || 'items'](), keys, fieldKey);
                 });
                 return;
@@ -326,8 +332,8 @@ class LibsUiComponentsListTemplatesComponentAbstract {
         if (!data || !data.length) {
             return;
         }
-        keys.forEach(key => {
-            const index = data.findIndex(item => item()[fieldKey] === key);
+        keys.forEach((key) => {
+            const index = data.findIndex((item) => item()[fieldKey] === key);
             if (index > -1) {
                 data.splice(index, 1);
             }
@@ -335,7 +341,7 @@ class LibsUiComponentsListTemplatesComponentAbstract {
     }
     setHeightViewPort(callBackCalculatorHeightSuccess) {
         const lengthItems = this.getLengthItem();
-        this.heightItem.update(val => this.config()?.heightItem || val);
+        this.heightItem.update((val) => this.config()?.heightItem || val);
         if (!lengthItems) {
             this.outChangeView.emit([...this.items()]);
             if (this.heightItem()) {
@@ -360,7 +366,9 @@ class LibsUiComponentsListTemplatesComponentAbstract {
             return;
         }
         this.intervalSetHeightViewPortSubscription?.unsubscribe();
-        this.intervalSetHeightViewPortSubscription = interval(this.timeIntervalIntervalSetHeightViewPort()).pipe(takeUntil(this.onDestroy)).subscribe(() => {
+        this.intervalSetHeightViewPortSubscription = interval(this.timeIntervalIntervalSetHeightViewPort())
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe(() => {
             if (!this.itemRef() || !this.itemRef()?.nativeElement) {
                 return;
             }
@@ -381,7 +389,9 @@ class LibsUiComponentsListTemplatesComponentAbstract {
     checkViewPortScroll(callBack) {
         const pre = this.hasScroll();
         this.intervalCheckScrollSubscription?.unsubscribe();
-        this.intervalCheckScrollSubscription = interval(this.timeIntervalCheckScroll()).pipe(take(5)).subscribe(() => {
+        this.intervalCheckScrollSubscription = interval(this.timeIntervalCheckScroll())
+            .pipe(take(5))
+            .subscribe(() => {
             this.hasScroll.set(false);
             if (this.items() && !this.items().length && pre && !this.hasScroll()) {
                 callBack?.(pre, this.hasScroll());
@@ -427,12 +437,12 @@ class LibsUiComponentsListTemplatesComponentAbstract {
                 this.store.set(convertObjectToSignal(result.data || [])());
                 if (this.functionGetItemsAutoAddList()) {
                     const newItems = convertObjectToSignal(this.functionGetItemsAutoAddList()?.() || []);
-                    this.store.update(items => [...newItems(), ...items]);
+                    this.store.update((items) => [...newItems(), ...items]);
                 }
                 this.processData(true);
                 return;
             }
-            this.store.update(items => [...items, ...convertObjectToSignal(result.data || [])()]);
+            this.store.update((items) => [...items, ...convertObjectToSignal(result.data || [])()]);
             this.processData(false);
         }
         catch (error) {
@@ -449,25 +459,26 @@ class LibsUiComponentsListTemplatesComponentAbstract {
     buildValueByConfig(item, configTemplate) {
         const ref = item().ref || {};
         const label = ref.label ?? ref.title ?? ref.value ?? ref.name;
+        const valueSearchByFunction = configTemplate?.getLabelSearch?.(ref);
         if (!isNil(label) && typeof label !== 'object') {
-            item.update(currentItem => {
+            item.update((currentItem) => {
                 return { ...currentItem, fieldLabel: typeof label === 'string' ? this.translateService.instant(label) : `${label}` };
             });
         }
         if (configTemplate?.getValue) {
             const value = configTemplate.getValue(ref, item);
-            const label = typeof value === 'number' ? `${value}` : (value ? this.translateService.instant(`${value}`) : '');
-            item.update(currentItem => {
+            const label = typeof value === 'number' ? `${value}` : value ? this.translateService.instant(`${value}`) : '';
+            item.update((currentItem) => {
                 return { ...currentItem, fieldLabel: label };
             });
         }
         if (configTemplate?.getPopover) {
-            item.update(currentItem => {
+            item.update((currentItem) => {
                 return { ...currentItem, popoverLabel: configTemplate?.getPopover?.(item()) };
             });
         }
         if (!configTemplate?.rows?.()) {
-            return item().fieldLabel || ' ';
+            return valueSearchByFunction ?? (item().fieldLabel || ' ');
         }
         let textSearch = item().fieldLabel || ' ';
         const rows = convertSignalToObject(configTemplate.rows());
@@ -475,7 +486,7 @@ class LibsUiComponentsListTemplatesComponentAbstract {
             const fieldNameRow = `fieldLabelRow${indexRow}`;
             const currentItem = cloneDeep(item());
             const newItem = { ...currentItem };
-            newItem[fieldNameRow] = row.getValue && row.getValue(ref, item, indexRow) || of('');
+            newItem[fieldNameRow] = (row.getValue && row.getValue(ref, item, indexRow)) || of('');
             newItem[`fieldRowStylesDynamicCols${indexRow}`] = row.getRowStylesDynamicCols && row.getRowStylesDynamicCols(ref);
             newItem[`fieldRowAvatarConfig${indexRow}`] = row.getAvatarConfig && row.getAvatarConfig(ref);
             if (row.cols && row.cols.length) {
@@ -489,14 +500,14 @@ class LibsUiComponentsListTemplatesComponentAbstract {
                     newItem[`fieldColButton${indexRow}${indexCol}`] = col.getButton && col.getButton(ref, indexCol);
                     newItem[`fieldColSwitch${indexRow}${indexCol}`] = col.getLabelSwitch && col.getLabelSwitch(ref, indexCol);
                     newItem[`fieldColAvatarConfig${indexRow}${indexCol}`] = col.getAvatarConfig && col.getAvatarConfig(ref);
-                    const text = col.getValue && col.getValue(ref, item, indexRow, indexCol) || of('');
-                    textSearch = ` ${textSearch} ${await lastValueFrom(text) || ''} `;
+                    const text = (col.getValue && col.getValue(ref, item, indexRow, indexCol)) || of('');
+                    textSearch = ` ${textSearch} ${(await lastValueFrom(text)) || ''} `;
                 });
             }
             item.update(() => newItem);
-            textSearch = ` ${textSearch} ${await lastValueFrom(item()[fieldNameRow]) || ''} `;
+            textSearch = ` ${textSearch} ${(await lastValueFrom(item()[fieldNameRow])) || ''} `;
         });
-        return textSearch || ' ';
+        return valueSearchByFunction ?? (textSearch || ' ');
     }
     handlerChangStageFlagMouse(flag) {
         this.outChangStageFlagMousePopover.emit(flag);
@@ -552,43 +563,43 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
         this.outLoading.emit(this.loading());
         if (isSelectAll) {
             if (ids.length) {
-                ids.forEach(id => !keysDisable.some(keyDisable => keyDisable === id) && keys.add(id));
+                ids.forEach((id) => !keysDisable.some((keyDisable) => keyDisable === id) && keys.add(id));
             }
             if (!ids.length) {
-                this.items().forEach(item => {
+                this.items().forEach((item) => {
                     const key = item()[this.fieldKey()];
-                    if (!keysDisable.some(keyDisable => keyDisable === key)) {
+                    if (!keysDisable.some((keyDisable) => keyDisable === key)) {
                         keys.add(key);
                     }
                 });
             }
-            this.multiKeySelected.update(items => [...(items || []), ...keys]);
+            this.multiKeySelected.update((items) => [...(items || []), ...keys]);
             this.emitSelectMultiKey(this.multiKeySelected() || []);
             return;
         }
         const keyUnSelected = new Set();
-        ids.forEach(id => {
-            if (!keysDisable.some(keyDisable => keyDisable === id)) {
+        ids.forEach((id) => {
+            if (!keysDisable.some((keyDisable) => keyDisable === id)) {
                 keys.delete(id);
                 keyUnSelected.add(id);
             }
         });
         if (!ids.length) {
-            this.items().forEach(item => {
+            this.items().forEach((item) => {
                 const key = item()[this.fieldKey()];
-                if (!keysDisable.some(keyDisable => keyDisable === key)) {
+                if (!keysDisable.some((keyDisable) => keyDisable === key)) {
                     keys.delete(key);
                     keyUnSelected.add(key);
                 }
             });
         }
-        this.multiKeySelected.update(items => [...(items || []), ...keys]);
+        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()]) };
+            return { code: 200, data: this.items().map((item) => item()[this.fieldKey()]) };
         }
         try {
             if (!this.configTemplateCheckbox()?.httpRequestAllIdSelectOrUnSelect?.()) {
@@ -642,7 +653,7 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
         if (!this.multiKeySelected()) {
             this.multiKeySelected.set([]);
         }
-        if (!ignoreDisable && (this.disable() || this.keysDisableItem()?.some(keyDisable => keyDisable === item[this.fieldKey()]))) {
+        if (!ignoreDisable && (this.disable() || this.keysDisableItem()?.some((keyDisable) => keyDisable === item[this.fieldKey()]))) {
             return;
         }
         if (event instanceof Event) {
@@ -658,11 +669,11 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
         const key = get(item, this.fieldKey());
         const indexOfKey = this.multiKeySelected()?.indexOf(key) ?? -1;
         if (indexOfKey < 0) {
-            this.multiKeySelected.update(items => [...(items || []), key]);
+            this.multiKeySelected.update((items) => [...(items || []), key]);
             this.emitSelectMultiKey(this.multiKeySelected() || [], isClickManual);
             return;
         }
-        this.multiKeySelected.update(items => items?.filter(item => item !== key));
+        this.multiKeySelected.update((items) => items?.filter((item) => item !== key));
         this.outUnSelectMultiKey.emit([key]);
         this.emitSelectMultiKey(this.multiKeySelected() || [], isClickManual);
     }
@@ -672,7 +683,7 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
             return this.outSelectMultiKey.emit({ keys: [], mapKeys, isClickManual });
         }
         multiKeySelected.forEach((key) => {
-            const item = this.store().find(item => item()[this.fieldKey()] === key);
+            const item = this.store().find((item) => item()[this.fieldKey()] === key);
             mapKeys.push({ key, item: convertSignalToObject(item), isClickManual });
         });
         this.outSelectMultiKey.emit({ keys: this.multiKeySelected() || [], mapKeys, isClickManual });
@@ -686,31 +697,32 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
         }
         this.store().forEach((item) => {
             const itemTypeAddNew = item().isAddNew;
-            item.update(current => {
+            item.update((current) => {
                 delete current.isAddNew;
                 return current;
             });
             const dataStore = cloneDeep(item);
-            dataStore.update(currentStore => {
+            dataStore.update((currentStore) => {
                 return { ...currentStore, ref: item() };
             });
             if (this.configTemplateCheckbox()?.getPopover) {
-                dataStore.update(currentStore => {
+                dataStore.update((currentStore) => {
                     return { ...currentStore, dataTooltip: this.configTemplateCheckbox()?.getPopover?.(dataStore()) };
                 });
             }
-            const key = keysHidden.find(key => dataStore()[this.fieldKey()] === key);
+            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 => {
+                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())
+                            avatarConfig: this.configTemplateCheckbox()?.getAvatarConfig?.(dataStore()),
                         };
                     });
                     if (itemTypeAddNew) {
@@ -721,11 +733,11 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
                 }
                 return;
             }
-            this.items.update(items => items.filter(item => item()[this.fieldKey()] !== key));
+            this.items.update((items) => items.filter((item) => item()[this.fieldKey()] !== key));
         });
         const callbackCheckScroll = (preStateHasScroll, currentHasScroll) => {
             this.scrollToItemSelected();
-            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && (this.isSearchOnline())) {
+            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && this.isSearchOnline()) {
                 this.callApiByService(false);
             }
         };
@@ -740,7 +752,7 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
             this.outLoadItemsComplete.emit({ items: this.items() });
             return;
         }
-        this.items.update(items => [...itemsAddNew, ...(items || []), ...itemByKeySearch]);
+        this.items.update((items) => [...itemsAddNew, ...(items || []), ...itemByKeySearch]);
         this.config()?.sort?.(this.items());
         this.setHeightViewPort();
         this.checkViewPortScroll(callbackCheckScroll);
@@ -757,7 +769,7 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
             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) {
                 const offsetContainer = this.elementScroll()?.nativeElement?.offsetHeight;
                 const additionalOffset = ((offsetContainer ? offsetContainer - this.heightItem() : 0) / 2) * -1;
@@ -775,12 +787,16 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
         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", viewQueries: [{ propertyName: "virtualScrollerComponent", first: true, predicate: VirtualScrollerComponent, descendants: true, isSignal: true }], 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\n        [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-h6ri'\"\n          [disable]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(true)\" />\n        <div class=\"text-[#e6e7ea]\">|</div>\n        <libs_ui-components-buttons-button\n          [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n          [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n          [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n          [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6ri'\"\n          [disable]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(false)\" />\n      </div>\n    }\n    @if (items().length && configTemplateCheckbox.configCheckboxCheckAll?.(); as configCheckBox) {\n      @let constHtmlLengthMultiKeySelected = multiKeySelected()?.length || 0;\n      @let constHtmlLengthStore = store().length || -1;\n      <div\n        [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]=\"(constHtmlLengthMultiKeySelected && constHtmlLengthMultiKeySelected >= constHtmlLengthStore) || false\"\n          [stillOtherOptions]=\"!!constHtmlLengthMultiKeySelected && constHtmlLengthMultiKeySelected < constHtmlLengthStore\"\n          [disable]=\"loading() || disable() || false\"\n          (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n          (outChange)=\"handlerSelect($event.checked, true)\" />\n      </div>\n    }\n    <div\n      [class]=\"'relative h-full w-full ' +((!items() || !items().length) ? 'bg-[#ffffff]': configTemplateCheckbox.classListInclude || '')\">\n      @if (items() && items().length) {\n        <div #elementScroll\n          LibsUiComponentsScrollOverlayDirective\n          class=\"w-full\"\n          [class.h-full]=\"!(heightViewPort() && !config()?.ignoreShowDataWhenNotSearch)\"\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 libs-ui-font-h5r 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                  [class.!flex-row]=\"configTemplateCheckbox.rowSameLineCheckbox\">\n                    @if (item().fieldLabel) {\n                      <libs_ui-components-checkbox-single [label]=\"item().fieldLabel\"\n                        [avatarConfig]=\"(item().avatarConfig|LibsUiPipesConvertObjectToSignalPipe)?.()\"\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 || 'libs-ui-font-h5r'\"\n                        [zIndexLabel]=\"configTemplateCheckbox.zIndexPopover ?? 1200\"\n                        [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length\"\n                        [key]=\"item()[fieldKey()]\"\n                        [imgTypeIcon]=\"configTemplateCheckbox.hasAvatarGroupSocial\"\n                        [classInclude]=\"configTemplateCheckbox.classInclude || ''\"\n                        [classImageInclude]=\"configTemplateCheckbox.classIncludeImage || ''\"\n                        [bullet]=\"(item().bullet|LibsUiPipesConvertObjectToSignalPipe)?.()\"\n                        [disable]=\"loading() || disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n                        [popover]=\"(item().popoverLabel|LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe\"\n                        [clickExactly]=\"clickExactly()\"\n                        [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateCheckbox.getDataComponentOutlet:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                        [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateCheckbox.getComponentOutlet:item():fieldKey():{valueIs0:0}) | async\"\n                        (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                        (outChange)=\"handlerChange('checkbox',item())\" />\n                    }\n                    @if (configTemplateCheckbox?.rows) {\n                      <libs_ui-components-list-templates_rows\n                        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\n                *ngComponentOutlet=\"(keySearch()  ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\">\n              </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 16px;position:relative}\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: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.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", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "pipe", type: 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" }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "pipe", type: LibsUiPipesConvertSignalToObjectPipe, name: "LibsUiPipesConvertSignalToObjectPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListCheckboxComponent, isStandalone: true, selector: "libs_ui-components-list-templates_checkbox", viewQueries: [{ propertyName: "virtualScrollerComponent", first: true, predicate: VirtualScrollerComponent, descendants: true, isSignal: true }], 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\n          [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n          [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n          [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n          [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6ri'\"\n          [disable]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(true)\" />\n        <div class=\"text-[#e6e7ea]\">|</div>\n        <libs_ui-components-buttons-button\n          [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n          [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n          [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n          [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6ri'\"\n          [disable]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(false)\" />\n      </div>\n    }\n    @if (items().length && configTemplateCheckbox.configCheckboxCheckAll?.(); as configCheckBox) {\n      @let constHtmlLengthMultiKeySelected = multiKeySelected()?.length || 0;\n      @let constHtmlLengthStore = store().length || -1;\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\n          [label]=\"configCheckBox.label ?? 'i18n_all'\"\n          [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n          [checked]=\"(constHtmlLengthMultiKeySelected && constHtmlLengthMultiKeySelected >= constHtmlLengthStore) || false\"\n          [stillOtherOptions]=\"!!constHtmlLengthMultiKeySelected && constHtmlLengthMultiKeySelected < constHtmlLengthStore\"\n          [disable]=\"loading() || disable() || false\"\n          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n          (outChange)=\"handlerSelect($event.checked, true)\" />\n      </div>\n    }\n    <div [class]=\"'relative h-full w-full ' + (!items() || !items().length ? 'bg-[#ffffff]' : configTemplateCheckbox.classListInclude || '')\">\n      @if (items() && items().length) {\n        <div\n          #elementScroll\n          LibsUiComponentsScrollOverlayDirective\n          class=\"w-full\"\n          [class.h-full]=\"!(heightViewPort() && !config()?.ignoreShowDataWhenNotSearch)\"\n          [style.height]=\"heightViewPort() && !config()?.ignoreShowDataWhenNotSearch ? heightViewPort() + 'px' : '100%'\"\n          (outScrollBottom)=\"handlerScrollBottom()\">\n          <virtual-scroller\n            #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\n                  #itemRef\n                  LibsUiComponentsListHighlightKeySearchDirective\n                  [isHighlight]=\"config()?.highlightTextSearchInResult\"\n                  [keySearch]=\"keySearch()\"\n                  [attr.clickExactly]=\"clickExactly()\"\n                  [class]=\"'libs-ui-list-template-checkbox-item libs-ui-font-h5r 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\n                    class=\"flex flex-col w-full\"\n                    [class.!flex-row]=\"configTemplateCheckbox.rowSameLineCheckbox\">\n                    @if (item().fieldLabel) {\n                      <libs_ui-components-checkbox-single\n                        [label]=\"item().fieldLabel\"\n                        [avatarConfig]=\"(item().avatarConfig | LibsUiPipesConvertObjectToSignalPipe)?.()\"\n                        [linkImage]=\"configTemplateCheckbox.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateCheckbox.getImage : item() | async) : item()[configTemplateCheckbox.fieldGetImage || '']\"\n                        [linkImageError]=\"\n                          configTemplateCheckbox.getImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateCheckbox.getImageError : item() | async) : item()[configTemplateCheckbox.fieldGetLinkImageError || '']\n                        \"\n                        [classLabelInclude]=\"item().classLabelInclude || configTemplateCheckbox.classLabelInclude || 'libs-ui-font-h5r'\"\n                        [zIndexLabel]=\"configTemplateCheckbox.zIndexPopover ?? 1200\"\n                        [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected()?.length\"\n                        [key]=\"item()[fieldKey()]\"\n                        [imgTypeIcon]=\"configTemplateCheckbox.hasAvatarGroupSocial\"\n                        [classInclude]=\"configTemplateCheckbox.classInclude || ''\"\n                        [classImageInclude]=\"configTemplateCheckbox.classIncludeImage || ''\"\n                        [bullet]=\"(item().bullet | LibsUiPipesConvertObjectToSignalPipe)?.()\"\n                        [disable]=\"loading() || disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                        [popover]=\"(item().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe\"\n                        [clickExactly]=\"clickExactly()\"\n                        [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateCheckbox.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                        [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateCheckbox.getComponentOutlet : item() : fieldKey() : { valueIs0: 0 } | async\"\n                        (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                        (outChange)=\"handlerChange('checkbox', item())\" />\n                    }\n                    @if (configTemplateCheckbox?.rows) {\n                      <libs_ui-components-list-templates_rows\n                        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        </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 16px;position:relative}\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: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.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", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "pipe", type: 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" }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "pipe", type: LibsUiPipesConvertSignalToObjectPipe, name: "LibsUiPipesConvertSignalToObjectPipe" }], 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,
+                        VirtualScrollerModule,
+                        NgComponentOutlet,
+                        AsyncPipe,
+                        TranslateModule,
+                        NgTemplateOutlet,
                         LibsUiComponentsButtonsButtonComponent,
                         LibsUiComponentsCheckboxSingleComponent,
                         LibsUiComponentsSpinnerComponent,
@@ -791,8 +807,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LibsUiComponentsListRowsComponent,
                         LibsUiPipesCallFunctionInTemplatePipe,
                         LibsUiPipesConvertObjectToSignalPipe,
-                        LibsUiPipesConvertSignalToObjectPipe
-                    ], 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\n        [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-h6ri'\"\n          [disable]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(true)\" />\n        <div class=\"text-[#e6e7ea]\">|</div>\n        <libs_ui-components-buttons-button\n          [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n          [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n          [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n          [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6ri'\"\n          [disable]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(false)\" />\n      </div>\n    }\n    @if (items().length && configTemplateCheckbox.configCheckboxCheckAll?.(); as configCheckBox) {\n      @let constHtmlLengthMultiKeySelected = multiKeySelected()?.length || 0;\n      @let constHtmlLengthStore = store().length || -1;\n      <div\n        [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]=\"(constHtmlLengthMultiKeySelected && constHtmlLengthMultiKeySelected >= constHtmlLengthStore) || false\"\n          [stillOtherOptions]=\"!!constHtmlLengthMultiKeySelected && constHtmlLengthMultiKeySelected < constHtmlLengthStore\"\n          [disable]=\"loading() || disable() || false\"\n          (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n          (outChange)=\"handlerSelect($event.checked, true)\" />\n      </div>\n    }\n    <div\n      [class]=\"'relative h-full w-full ' +((!items() || !items().length) ? 'bg-[#ffffff]': configTemplateCheckbox.classListInclude || '')\">\n      @if (items() && items().length) {\n        <div #elementScroll\n          LibsUiComponentsScrollOverlayDirective\n          class=\"w-full\"\n          [class.h-full]=\"!(heightViewPort() && !config()?.ignoreShowDataWhenNotSearch)\"\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 libs-ui-font-h5r 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                  [class.!flex-row]=\"configTemplateCheckbox.rowSameLineCheckbox\">\n                    @if (item().fieldLabel) {\n                      <libs_ui-components-checkbox-single [label]=\"item().fieldLabel\"\n                        [avatarConfig]=\"(item().avatarConfig|LibsUiPipesConvertObjectToSignalPipe)?.()\"\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 || 'libs-ui-font-h5r'\"\n                        [zIndexLabel]=\"configTemplateCheckbox.zIndexPopover ?? 1200\"\n                        [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length\"\n                        [key]=\"item()[fieldKey()]\"\n                        [imgTypeIcon]=\"configTemplateCheckbox.hasAvatarGroupSocial\"\n                        [classInclude]=\"configTemplateCheckbox.classInclude || ''\"\n                        [classImageInclude]=\"configTemplateCheckbox.classIncludeImage || ''\"\n                        [bullet]=\"(item().bullet|LibsUiPipesConvertObjectToSignalPipe)?.()\"\n                        [disable]=\"loading() || disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n                        [popover]=\"(item().popoverLabel|LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe\"\n                        [clickExactly]=\"clickExactly()\"\n                        [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateCheckbox.getDataComponentOutlet:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                        [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateCheckbox.getComponentOutlet:item():fieldKey():{valueIs0:0}) | async\"\n                        (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                        (outChange)=\"handlerChange('checkbox',item())\" />\n                    }\n                    @if (configTemplateCheckbox?.rows) {\n                      <libs_ui-components-list-templates_rows\n                        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\n                *ngComponentOutlet=\"(keySearch()  ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\">\n              </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 16px;position:relative}\n"] }]
+                        LibsUiPipesConvertSignalToObjectPipe,
+                    ], 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\n          [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n          [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n          [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n          [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6ri'\"\n          [disable]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(true)\" />\n        <div class=\"text-[#e6e7ea]\">|</div>\n        <libs_ui-components-buttons-button\n          [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n          [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n          [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n          [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6ri'\"\n          [disable]=\"loading() || disable() || false\"\n          (outClick)=\"handlerSelect(false)\" />\n      </div>\n    }\n    @if (items().length && configTemplateCheckbox.configCheckboxCheckAll?.(); as configCheckBox) {\n      @let constHtmlLengthMultiKeySelected = multiKeySelected()?.length || 0;\n      @let constHtmlLengthStore = store().length || -1;\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\n          [label]=\"configCheckBox.label ?? 'i18n_all'\"\n          [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n          [checked]=\"(constHtmlLengthMultiKeySelected && constHtmlLengthMultiKeySelected >= constHtmlLengthStore) || false\"\n          [stillOtherOptions]=\"!!constHtmlLengthMultiKeySelected && constHtmlLengthMultiKeySelected < constHtmlLengthStore\"\n          [disable]=\"loading() || disable() || false\"\n          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n          (outChange)=\"handlerSelect($event.checked, true)\" />\n      </div>\n    }\n    <div [class]=\"'relative h-full w-full ' + (!items() || !items().length ? 'bg-[#ffffff]' : configTemplateCheckbox.classListInclude || '')\">\n      @if (items() && items().length) {\n        <div\n          #elementScroll\n          LibsUiComponentsScrollOverlayDirective\n          class=\"w-full\"\n          [class.h-full]=\"!(heightViewPort() && !config()?.ignoreShowDataWhenNotSearch)\"\n          [style.height]=\"heightViewPort() && !config()?.ignoreShowDataWhenNotSearch ? heightViewPort() + 'px' : '100%'\"\n          (outScrollBottom)=\"handlerScrollBottom()\">\n          <virtual-scroller\n            #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\n                  #itemRef\n                  LibsUiComponentsListHighlightKeySearchDirective\n                  [isHighlight]=\"config()?.highlightTextSearchInResult\"\n                  [keySearch]=\"keySearch()\"\n                  [attr.clickExactly]=\"clickExactly()\"\n                  [class]=\"'libs-ui-list-template-checkbox-item libs-ui-font-h5r 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\n                    class=\"flex flex-col w-full\"\n                    [class.!flex-row]=\"configTemplateCheckbox.rowSameLineCheckbox\">\n                    @if (item().fieldLabel) {\n                      <libs_ui-components-checkbox-single\n                        [label]=\"item().fieldLabel\"\n                        [avatarConfig]=\"(item().avatarConfig | LibsUiPipesConvertObjectToSignalPipe)?.()\"\n                        [linkImage]=\"configTemplateCheckbox.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateCheckbox.getImage : item() | async) : item()[configTemplateCheckbox.fieldGetImage || '']\"\n                        [linkImageError]=\"\n                          configTemplateCheckbox.getImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateCheckbox.getImageError : item() | async) : item()[configTemplateCheckbox.fieldGetLinkImageError || '']\n                        \"\n                        [classLabelInclude]=\"item().classLabelInclude || configTemplateCheckbox.classLabelInclude || 'libs-ui-font-h5r'\"\n                        [zIndexLabel]=\"configTemplateCheckbox.zIndexPopover ?? 1200\"\n                        [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected()?.length\"\n                        [key]=\"item()[fieldKey()]\"\n                        [imgTypeIcon]=\"configTemplateCheckbox.hasAvatarGroupSocial\"\n                        [classInclude]=\"configTemplateCheckbox.classInclude || ''\"\n                        [classImageInclude]=\"configTemplateCheckbox.classIncludeImage || ''\"\n                        [bullet]=\"(item().bullet | LibsUiPipesConvertObjectToSignalPipe)?.()\"\n                        [disable]=\"loading() || disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                        [popover]=\"(item().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe\"\n                        [clickExactly]=\"clickExactly()\"\n                        [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateCheckbox.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                        [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateCheckbox.getComponentOutlet : item() : fieldKey() : { valueIs0: 0 } | async\"\n                        (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                        (outChange)=\"handlerChange('checkbox', item())\" />\n                    }\n                    @if (configTemplateCheckbox?.rows) {\n                      <libs_ui-components-list-templates_rows\n                        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        </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 16px;position:relative}\n"] }]
         }] });
 
 class LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe {
@@ -801,7 +817,7 @@ class LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe {
             if (level < 2) {
                 return 16;
             }
-            return ((level - 2) * 24) + 16;
+            return (level - 2) * 24 + 16;
         }
         if (isTreeView) {
             let leftLine = level * 16;
@@ -827,7 +843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Pipe,
             args: [{
                     name: 'LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 
@@ -840,7 +856,7 @@ class LibsUiComponentsListGroupCalculatorMarginLeftItemPipe {
             if (level === 1) {
                 return 0;
             }
-            return ((level - 2) * 24);
+            return (level - 2) * 24;
         }
         if (!isTreeView) {
             if (maxLevel > 2 && level > 2) {
@@ -865,7 +881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Pipe,
             args: [{
                     name: 'LibsUiComponentsListGroupCalculatorMarginLeftItemPipe',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 
@@ -889,7 +905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Pipe,
             args: [{
                     name: 'LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 
@@ -915,7 +931,7 @@ class LibsUiComponentsListGroupItemComponent {
     /* FUNCTIONS */
     handlerToggleExpand(e, item) {
         e.stopPropagation();
-        item.update(current => {
+        item.update((current) => {
             current.expand = !current.expand;
             return current;
         });
@@ -925,7 +941,7 @@ class LibsUiComponentsListGroupItemComponent {
         this.outChangeView.emit(expand);
     }
     handlerChangeChecked(item, field_key, disable) {
-        if (disable || field_key && this.keysDisableItem() && this.keysDisableItem()?.length && this.keysDisableItem()?.some(key => key === field_key)) {
+        if (disable || (field_key && this.keysDisableItem() && this.keysDisableItem()?.length && this.keysDisableItem()?.some((key) => key === field_key))) {
             return;
         }
         if (item.level !== item.maxLevelGroup && this.configTemplateGroup()?.ignoreCheckboxItem) {
@@ -943,12 +959,14 @@ class LibsUiComponentsListGroupItemComponent {
         this.outChangStageFlagMousePopover.emit(flag);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListGroupItemComponent, isStandalone: true, selector: "libs_ui-components-list-templates_group-item", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configTemplateGroup: { classPropertyName: "configTemplateGroup", publicName: "configTemplateGroup", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, keysChecked: { classPropertyName: "keysChecked", publicName: "keysChecked", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, parentItem: { classPropertyName: "parentItem", publicName: "parentItem", 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 }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, keysStillOtherOptions: { classPropertyName: "keysStillOtherOptions", publicName: "keysStillOtherOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outChangeView: "outChangeView", outChange: "outChange", outChangStageFlagMousePopover: "outChangStageFlagMousePopover" }, ngImport: i0, template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @if ((configTemplateGroup.isViewTree && !!items().length) || (parentItem().maxLevelGroup > 2 && parentItem().level > 1)) {\n    <div class='libs-ui-list-group-item-line-vertical'\n      [style.left.px]=\"parentItem().level | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe:parentItem().maxLevelGroup:configTemplateGroup.isViewTree :configTemplateGroup.isViewTreeJson:!(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\">\n    </div>\n  }\n  @if (items() && items().length) {\n    @for (item of items(); track item()[fieldKey()]) {\n      <div>\n        <div\n          [style.marginLeft.px]=\"item().level | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe:item().maxLevelGroup:configTemplateGroup.isViewTree: configTemplateGroup.isViewTreeJson:!(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\"\n          [style.paddingLeft.px]=\"item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe:item().maxLevelGroup:configTemplateGroup.isViewTree:configTemplateGroup.isViewTreeJson:!!item()[configTemplateGroup.fieldGetItems]?.()?.length\"\n          [style.paddingRight.px]=\"item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe:item().maxLevelGroup:configTemplateGroup.isViewTree:configTemplateGroup.isViewTreeJson:!!item()[configTemplateGroup.fieldGetItems]?.()?.length\"\n          [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + item()?.classInclude\"\n          [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length\"\n          [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n          [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n          [class.cursor-pointer]=\"!disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n          [class.libs-ui-bg-list-active]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length) && configTemplateGroup.hasBackgroundColorWhenItemSelected && item().isCheckManual\"\n          (click)=\"handlerChangeChecked(item(), item()[fieldKey()], disable() || (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup))\">\n          @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTree) {\n            <i class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"item().expand\"\n              (click)=\"handlerToggleExpand($event,item)\">\n            </i>\n          }\n          @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]()?.length) {\n            <div [class]=\"'p-[5px]'\">\n              <div [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n                [attr.disabled]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) || false\">\n              </div>\n            </div>\n          }\n          <div class=\"flex w-full relative\">\n            <div #labelRef\n              class=\"invisible\">.</div>\n            <div class=\"flex items-center w-full \"\n              [class.absolute]=\"!configTemplateGroup.ignoreFixHeightItem\"\n              [style.height.px]=\"!configTemplateGroup.ignoreFixHeightItem ? labelRef.clientHeight : 'auto'\">\n              @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '')+' w-full';\n              @if (!configTemplateGroup.isViewRadio) {\n                <libs_ui-components-checkbox-single [avatarConfig]=\"item().avatarConfig\"\n                  [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                  [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.singleSelectItem\"\n                  [class]=\"constHtmlClassIncludeItem\"\n                  [class.-w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n                  [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [class.max-w-[calc(100%-24px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || (configTemplateGroup.widthLabelSub24WhenNotTreeView && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length) && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey))) && !configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [clickExactly]=\"false\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [disable]=\"disable() || (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !configTemplateGroup.isViewTreeJson) || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) || false\"\n                  [label]=\"item().fieldLabel\"\n                  [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length\"\n                  [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysStillOtherOptions():keysStillOtherOptions().length\"\n                  [classLabelInclude]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual ? 'libs-ui-color-default libs-ui-font-h5r' : 'libs-ui-font-h5r'\"\n                  [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getDataComponentOutletItem:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                  [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getComponentOutletItem:item():fieldKey():{valueIs0:0}) | async\"\n                  [popover]=\"item().dataPopover\"\n                  [linkImage]=\"configTemplateGroup.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getImage:item()) | async) : item()[configTemplateGroup.fieldGetAvatarItem || ''] | async\"\n                  [linkImageError]=\"configTemplateGroup.getLinkImageError ? (('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getLinkImageError:item()) | async) : ''\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [iconImageClass]=\"item().iconImageClass ? item().iconImageClass : undefined\"\n                  [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outEventPopover)=\"handlerEventPopover($event, item())\"\n                  (outChange)=\"handlerChangeChecked(item())\" />\n              }\n              @if (configTemplateGroup.isViewRadio) {\n                <libs_ui-components-radio-single [avatarConfig]=\"item().avatarConfig\"\n                  [class.!ml-[8px]]=\"configTemplateGroup.isViewTree\"\n                  [ignoreRadio]=\"configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem\"\n                  [class]=\"constHtmlClassIncludeItem\"\n                  [class.w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n                  [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [class.max-w-[calc(100%-24px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && !configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [clickExactly]=\"false\"\n                  [disable]=\"disable() || (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length)||(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) || false\"\n                  [label]=\"item().fieldLabel\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length\"\n                  [classLabelInclude]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual ? 'text-[#009cdb] libs-ui-font-h5r ': ' libs-ui-font-h5r '\"\n                  [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getDataComponentOutletItem:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                  [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getComponentOutletItem:item():fieldKey():{valueIs0:0}) | async\"\n                  [popover]=\"item().dataPopover\"\n                  [linkImage]=\"configTemplateGroup.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage):item()) | async) : item()[configTemplateGroup.fieldGetAvatarItem || '']\"\n                  (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                  (outChange)=\"handlerChangeChecked(item())\" />\n              }\n            </div>\n          </div>\n          @if ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length) && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey)) {\n            <i class=\"libs-ui-icon-check before:!text-[16px]\"\n              [class.!ml-[8px]]=\"item().dataPopover\"\n              [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\">\n            </i>\n          }\n          @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n            <i class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"item().expand\"\n              [class.!ml-[8px]]=\"item().dataPopover\"\n              (click)=\"handlerToggleExpand($event,item)\">\n            </i>\n          }\n        </div>\n        @if (item().expand || configTemplateGroup.isViewTreeJson) {\n          @if (item().level < item().maxLevelGroup && !item()[configTemplateGroup.fieldGetItems]?.()?.length && configTemplateGroup.isViewTree) {\n            <div class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n              [style.marginLeft.px]=\"(item().level + 1) | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe:(item().maxLevelGroup+1):configTemplateGroup.isViewTree: configTemplateGroup.isViewTreeJson:!(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem):true\"\n              [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n              [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n              <div [class]=\"item().classIncludeItemNoData || ''\">\n                @if (!keySearch()) {\n                  <span>{{ 'i18n_no_data_yet' | translate }}</span>\n                }\n                @if (keySearch()) {\n                  <span>{{ 'i18n_no_result' | translate }}</span>\n                }\n              </div>\n            </div>\n          }\n          @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length) {\n            <libs_ui-components-list-templates_group-item [keySearch]=\"keySearch()\"\n              [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n              [parentItem]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keysChecked]=\"keysChecked()\"\n              [disable]=\"(disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)) && !configTemplateGroup.isViewTreeJson\"\n              [keysDisableItem]=\"keysDisableItem()\"\n              [configTemplateGroup]=\"configTemplateGroup\"\n              (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n              (outChangeView)=\"handlerChangeView($event)\"\n              (outChange)=\"handlerChangeChecked($event.item)\" />\n          }\n        }\n      </div>\n    }\n  }\n\n  @if ((!items() || !items().length) && (parentItem().level < parentItem().maxLevelGroup)) {\n    <div class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n      [style.marginLeft.px]=\"(parentItem().level + 1) | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe:(parentItem().maxLevelGroup+1):configTemplateGroup.isViewTree:configTemplateGroup.isViewTreeJson:!(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem):true\"\n      [style.paddingLeft.px]=\"(parentItem().level + 1) | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe:(parentItem().maxLevelGroup+1):configTemplateGroup.isViewTree: configTemplateGroup.isViewTreeJson:false\"\n      [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n      [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n      <div [class]=\"parentItem().classIncludeItemNoData || ''\">\n        @if (parentItem().iconEmptyDataInGroup) {\n          <div class=\"pb-[16px]\">\n            <ng-container\n              *ngComponentOutlet=\"(keySearch()  ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\" />\n          </div>\n        }\n        @if (!keySearch()) {\n          <span>{{ ( parentItem().textDescriptionGroupWhenNoData ?? config()?.textNoData ?? 'i18n_no_result') | translate }}</span>\n        }\n        @if (keySearch()) {\n          <span>{{ 'i18n_no_result' | translate }}</span>\n        }\n      </div>\n    </div>\n  }\n}\n", styles: [":host{position:relative}:host .libs-ui-list-group-item-line-vertical{position:absolute;width:1px;height:100%;background-color:#e6e7ea}.libs-ui-icon-check{--color: var(--libs-ui-color-default, #226ff5)}.libs-ui-icon-check:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}[class*=libs-ui-icon-chevron]:before{color:#6a7383}.libs-ui-list-group-json_icon-item-parent{min-width:6px;min-height:6px;height:6px;width:6px;border-radius:50%;background-color:#226ff5}.libs-ui-list-group-json_icon-item-parent[disabled=true]{background-color:#6a7383!important}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsListGroupItemComponent, selector: "libs_ui-components-list-templates_group-item", inputs: ["items", "configTemplateGroup", "keySearch", "fieldKey", "keysChecked", "keysDisableItem", "parentItem", "disable", "disableLabel", "config", "keysStillOtherOptions"], outputs: ["outChangeView", "outChange", "outChangStageFlagMousePopover"] }, { 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: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorMarginLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorMarginLeftItemPipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe, name: "LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe" }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListGroupItemComponent, isStandalone: true, selector: "libs_ui-components-list-templates_group-item", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configTemplateGroup: { classPropertyName: "configTemplateGroup", publicName: "configTemplateGroup", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, keysChecked: { classPropertyName: "keysChecked", publicName: "keysChecked", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, parentItem: { classPropertyName: "parentItem", publicName: "parentItem", 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 }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, keysStillOtherOptions: { classPropertyName: "keysStillOtherOptions", publicName: "keysStillOtherOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outChangeView: "outChangeView", outChange: "outChange", outChangStageFlagMousePopover: "outChangStageFlagMousePopover" }, ngImport: i0, template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @if ((configTemplateGroup.isViewTree && !!items().length) || (parentItem().maxLevelGroup > 2 && parentItem().level > 1)) {\n    <div\n      class=\"libs-ui-list-group-item-line-vertical\"\n      [style.left.px]=\"\n        parentItem().level\n          | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe\n            : parentItem().maxLevelGroup\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n      \"></div>\n  }\n  @if (items() && items().length) {\n    @for (item of items(); track item()[fieldKey()]) {\n      <div>\n        <div\n          [style.marginLeft.px]=\"\n            item().level\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : item().maxLevelGroup\n                : configTemplateGroup.isViewTree\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n          \"\n          [style.paddingLeft.px]=\"\n            item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length\n          \"\n          [style.paddingRight.px]=\"\n            item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length\n          \"\n          [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + item()?.classInclude\"\n          [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n          [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n          [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n          [class.cursor-pointer]=\"!disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n          [class.libs-ui-bg-list-active]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.hasBackgroundColorWhenItemSelected && item().isCheckManual\"\n          (click)=\"handlerChangeChecked(item(), item()[fieldKey()], disable() || (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup))\">\n          @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTree) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"item().expand\"\n              (click)=\"handlerToggleExpand($event, item)\"></i>\n          }\n          @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]()?.length) {\n            <div [class]=\"'p-[5px]'\">\n              <div\n                [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n                [attr.disabled]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) || false\"></div>\n            </div>\n          }\n          <div class=\"flex w-full relative\">\n            <div\n              #labelRef\n              class=\"invisible\"\n              [class.hidden]=\"configTemplateGroup.ignoreFixHeightItem\">\n              .\n            </div>\n            <div\n              class=\"flex items-center w-full\"\n              [class.absolute]=\"!configTemplateGroup.ignoreFixHeightItem\"\n              [style.height.px]=\"!configTemplateGroup.ignoreFixHeightItem ? labelRef.clientHeight : 'auto'\">\n              @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '') + ' w-full';\n              @if (!configTemplateGroup.isViewRadio) {\n                <libs_ui-components-checkbox-single\n                  [avatarConfig]=\"item().avatarConfig\"\n                  [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                  [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.singleSelectItem\"\n                  [class]=\"constHtmlClassIncludeItem\"\n                  [class.-w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n                  [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [class.max-w-[calc(100%-24px)]]=\"\n                    ((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) ||\n                      (configTemplateGroup.widthLabelSub24WhenNotTreeView &&\n                        (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) &&\n                        configTemplateGroup.singleSelectItem &&\n                        (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey))) &&\n                    !configTemplateGroup.ignoreIconExpandMarginRight\n                  \"\n                  [clickExactly]=\"false\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [disable]=\"\n                    disable() ||\n                    (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !configTemplateGroup.isViewTreeJson) ||\n                    (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n                    false\n                  \"\n                  [label]=\"item().fieldLabel\"\n                  [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                  [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                  [classLabelInclude]=\"\n                    (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n                      ? 'libs-ui-color-default libs-ui-font-h5r'\n                      : 'libs-ui-font-h5r'\n                  \"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"item().dataPopover\"\n                  [linkImage]=\"configTemplateGroup.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getImage : item() | async) : (item()[configTemplateGroup.fieldGetAvatarItem || ''] | async)\"\n                  [linkImageError]=\"configTemplateGroup.getLinkImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getLinkImageError : item() | async) : ''\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [iconImageClass]=\"item().iconImageClass ? item().iconImageClass : undefined\"\n                  [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outEventPopover)=\"handlerEventPopover($event, item())\"\n                  (outChange)=\"handlerChangeChecked(item())\" />\n              }\n              @if (configTemplateGroup.isViewRadio) {\n                <libs_ui-components-radio-single\n                  [avatarConfig]=\"item().avatarConfig\"\n                  [class.!ml-[8px]]=\"configTemplateGroup.isViewTree\"\n                  [ignoreRadio]=\"configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem\"\n                  [class]=\"constHtmlClassIncludeItem\"\n                  [class.w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n                  [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [class.max-w-[calc(100%-24px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && !configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [clickExactly]=\"false\"\n                  [disable]=\"\n                    disable() ||\n                    (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                    (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) ||\n                    (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n                    false\n                  \"\n                  [label]=\"item().fieldLabel\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                  [classLabelInclude]=\"\n                    (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n                      ? 'text-[#009cdb] libs-ui-font-h5r '\n                      : ' libs-ui-font-h5r '\n                  \"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"item().dataPopover\"\n                  [linkImage]=\"\n                    configTemplateGroup.getImage\n                      ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                      : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                  \"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outChange)=\"handlerChangeChecked(item())\" />\n              }\n            </div>\n          </div>\n          @if ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey)) {\n            <i\n              class=\"libs-ui-icon-check before:!text-[16px]\"\n              [class.!ml-[8px]]=\"item().dataPopover\"\n              [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\"></i>\n          }\n          @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"item().expand\"\n              [class.!ml-[8px]]=\"item().dataPopover\"\n              (click)=\"handlerToggleExpand($event, item)\"></i>\n          }\n        </div>\n        @if (item().expand || configTemplateGroup.isViewTreeJson) {\n          @if (item().level < item().maxLevelGroup && !item()[configTemplateGroup.fieldGetItems]?.()?.length && configTemplateGroup.isViewTree) {\n            <div\n              class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n              [style.marginLeft.px]=\"\n                item().level + 1\n                  | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                    : item().maxLevelGroup + 1\n                    : configTemplateGroup.isViewTree\n                    : configTemplateGroup.isViewTreeJson\n                    : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                    : true\n              \"\n              [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n              [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n              <div [class]=\"item().classIncludeItemNoData || ''\">\n                @if (!keySearch()) {\n                  <span>{{ 'i18n_no_data_yet' | translate }}</span>\n                }\n                @if (keySearch()) {\n                  <span>{{ 'i18n_no_result' | translate }}</span>\n                }\n              </div>\n            </div>\n          }\n          @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length) {\n            <libs_ui-components-list-templates_group-item\n              [keySearch]=\"keySearch()\"\n              [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n              [parentItem]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keysChecked]=\"keysChecked()\"\n              [disable]=\"(disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)) && !configTemplateGroup.isViewTreeJson\"\n              [keysDisableItem]=\"keysDisableItem()\"\n              [configTemplateGroup]=\"configTemplateGroup\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outChangeView)=\"handlerChangeView($event)\"\n              (outChange)=\"handlerChangeChecked($event.item)\" />\n          }\n        }\n      </div>\n    }\n  }\n\n  @if ((!items() || !items().length) && parentItem().level < parentItem().maxLevelGroup) {\n    <div\n      class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n      [style.marginLeft.px]=\"\n        parentItem().level + 1\n          | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n            : parentItem().maxLevelGroup + 1\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n            : true\n      \"\n      [style.paddingLeft.px]=\"parentItem().level + 1 | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: parentItem().maxLevelGroup + 1 : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : false\"\n      [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n      [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n      <div [class]=\"parentItem().classIncludeItemNoData || ''\">\n        @if (parentItem().iconEmptyDataInGroup) {\n          <div class=\"pb-[16px]\">\n            <ng-container *ngComponentOutlet=\"(keySearch() ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\" />\n          </div>\n        }\n        @if (!keySearch()) {\n          <span>{{ parentItem().textDescriptionGroupWhenNoData ?? config()?.textNoData ?? 'i18n_no_result' | translate }}</span>\n        }\n        @if (keySearch()) {\n          <span>{{ 'i18n_no_result' | translate }}</span>\n        }\n      </div>\n    </div>\n  }\n}\n", styles: [":host{position:relative}:host .libs-ui-list-group-item-line-vertical{position:absolute;width:1px;height:100%;background-color:#e6e7ea}.libs-ui-icon-check{--color: var(--libs-ui-color-default, #226ff5)}.libs-ui-icon-check:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}[class*=libs-ui-icon-chevron]:before{color:#6a7383}.libs-ui-list-group-json_icon-item-parent{min-width:6px;min-height:6px;height:6px;width:6px;border-radius:50%;background-color:#226ff5}.libs-ui-list-group-json_icon-item-parent[disabled=true]{background-color:#6a7383!important}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsListGroupItemComponent, selector: "libs_ui-components-list-templates_group-item", inputs: ["items", "configTemplateGroup", "keySearch", "fieldKey", "keysChecked", "keysDisableItem", "parentItem", "disable", "disableLabel", "config", "keysStillOtherOptions"], outputs: ["outChangeView", "outChange", "outChangStageFlagMousePopover"] }, { 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: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorMarginLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorMarginLeftItemPipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe, name: "LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe" }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListGroupItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-list-templates_group-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgComponentOutlet, AsyncPipe, TranslateModule,
+                        NgComponentOutlet,
+                        AsyncPipe,
+                        TranslateModule,
                         LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe,
                         LibsUiComponentsListGroupCalculatorMarginLeftItemPipe,
                         LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe,
@@ -956,8 +974,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LibsUiCheckSelectedByKeyPipe,
                         LibsUiComponentsCheckboxSingleComponent,
                         LibsUiPipesCallFunctionInTemplatePipe,
-                        LibsUiComponentsRadioSingleComponent
-                    ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @if ((configTemplateGroup.isViewTree && !!items().length) || (parentItem().maxLevelGroup > 2 && parentItem().level > 1)) {\n    <div class='libs-ui-list-group-item-line-vertical'\n      [style.left.px]=\"parentItem().level | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe:parentItem().maxLevelGroup:configTemplateGroup.isViewTree :configTemplateGroup.isViewTreeJson:!(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\">\n    </div>\n  }\n  @if (items() && items().length) {\n    @for (item of items(); track item()[fieldKey()]) {\n      <div>\n        <div\n          [style.marginLeft.px]=\"item().level | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe:item().maxLevelGroup:configTemplateGroup.isViewTree: configTemplateGroup.isViewTreeJson:!(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\"\n          [style.paddingLeft.px]=\"item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe:item().maxLevelGroup:configTemplateGroup.isViewTree:configTemplateGroup.isViewTreeJson:!!item()[configTemplateGroup.fieldGetItems]?.()?.length\"\n          [style.paddingRight.px]=\"item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe:item().maxLevelGroup:configTemplateGroup.isViewTree:configTemplateGroup.isViewTreeJson:!!item()[configTemplateGroup.fieldGetItems]?.()?.length\"\n          [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + item()?.classInclude\"\n          [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length\"\n          [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n          [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n          [class.cursor-pointer]=\"!disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n          [class.libs-ui-bg-list-active]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length) && configTemplateGroup.hasBackgroundColorWhenItemSelected && item().isCheckManual\"\n          (click)=\"handlerChangeChecked(item(), item()[fieldKey()], disable() || (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup))\">\n          @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTree) {\n            <i class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"item().expand\"\n              (click)=\"handlerToggleExpand($event,item)\">\n            </i>\n          }\n          @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]()?.length) {\n            <div [class]=\"'p-[5px]'\">\n              <div [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n                [attr.disabled]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) || false\">\n              </div>\n            </div>\n          }\n          <div class=\"flex w-full relative\">\n            <div #labelRef\n              class=\"invisible\">.</div>\n            <div class=\"flex items-center w-full \"\n              [class.absolute]=\"!configTemplateGroup.ignoreFixHeightItem\"\n              [style.height.px]=\"!configTemplateGroup.ignoreFixHeightItem ? labelRef.clientHeight : 'auto'\">\n              @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '')+' w-full';\n              @if (!configTemplateGroup.isViewRadio) {\n                <libs_ui-components-checkbox-single [avatarConfig]=\"item().avatarConfig\"\n                  [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                  [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.singleSelectItem\"\n                  [class]=\"constHtmlClassIncludeItem\"\n                  [class.-w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n                  [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [class.max-w-[calc(100%-24px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || (configTemplateGroup.widthLabelSub24WhenNotTreeView && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length) && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey))) && !configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [clickExactly]=\"false\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [disable]=\"disable() || (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !configTemplateGroup.isViewTreeJson) || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) || false\"\n                  [label]=\"item().fieldLabel\"\n                  [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length\"\n                  [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysStillOtherOptions():keysStillOtherOptions().length\"\n                  [classLabelInclude]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual ? 'libs-ui-color-default libs-ui-font-h5r' : 'libs-ui-font-h5r'\"\n                  [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getDataComponentOutletItem:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                  [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getComponentOutletItem:item():fieldKey():{valueIs0:0}) | async\"\n                  [popover]=\"item().dataPopover\"\n                  [linkImage]=\"configTemplateGroup.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getImage:item()) | async) : item()[configTemplateGroup.fieldGetAvatarItem || ''] | async\"\n                  [linkImageError]=\"configTemplateGroup.getLinkImageError ? (('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getLinkImageError:item()) | async) : ''\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [iconImageClass]=\"item().iconImageClass ? item().iconImageClass : undefined\"\n                  [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outEventPopover)=\"handlerEventPopover($event, item())\"\n                  (outChange)=\"handlerChangeChecked(item())\" />\n              }\n              @if (configTemplateGroup.isViewRadio) {\n                <libs_ui-components-radio-single [avatarConfig]=\"item().avatarConfig\"\n                  [class.!ml-[8px]]=\"configTemplateGroup.isViewTree\"\n                  [ignoreRadio]=\"configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem\"\n                  [class]=\"constHtmlClassIncludeItem\"\n                  [class.w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n                  [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [class.max-w-[calc(100%-24px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && !configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [clickExactly]=\"false\"\n                  [disable]=\"disable() || (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length)||(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length) || false\"\n                  [label]=\"item().fieldLabel\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length\"\n                  [classLabelInclude]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual ? 'text-[#009cdb] libs-ui-font-h5r ': ' libs-ui-font-h5r '\"\n                  [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getDataComponentOutletItem:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                  [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getComponentOutletItem:item():fieldKey():{valueIs0:0}) | async\"\n                  [popover]=\"item().dataPopover\"\n                  [linkImage]=\"configTemplateGroup.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage):item()) | async) : item()[configTemplateGroup.fieldGetAvatarItem || '']\"\n                  (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                  (outChange)=\"handlerChangeChecked(item())\" />\n              }\n            </div>\n          </div>\n          @if ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length) && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey)) {\n            <i class=\"libs-ui-icon-check before:!text-[16px]\"\n              [class.!ml-[8px]]=\"item().dataPopover\"\n              [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\">\n            </i>\n          }\n          @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n            <i class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"item().expand\"\n              [class.!ml-[8px]]=\"item().dataPopover\"\n              (click)=\"handlerToggleExpand($event,item)\">\n            </i>\n          }\n        </div>\n        @if (item().expand || configTemplateGroup.isViewTreeJson) {\n          @if (item().level < item().maxLevelGroup && !item()[configTemplateGroup.fieldGetItems]?.()?.length && configTemplateGroup.isViewTree) {\n            <div class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n              [style.marginLeft.px]=\"(item().level + 1) | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe:(item().maxLevelGroup+1):configTemplateGroup.isViewTree: configTemplateGroup.isViewTreeJson:!(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem):true\"\n              [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n              [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n              <div [class]=\"item().classIncludeItemNoData || ''\">\n                @if (!keySearch()) {\n                  <span>{{ 'i18n_no_data_yet' | translate }}</span>\n                }\n                @if (keySearch()) {\n                  <span>{{ 'i18n_no_result' | translate }}</span>\n                }\n              </div>\n            </div>\n          }\n          @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length) {\n            <libs_ui-components-list-templates_group-item [keySearch]=\"keySearch()\"\n              [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n              [parentItem]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keysChecked]=\"keysChecked()\"\n              [disable]=\"(disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)) && !configTemplateGroup.isViewTreeJson\"\n              [keysDisableItem]=\"keysDisableItem()\"\n              [configTemplateGroup]=\"configTemplateGroup\"\n              (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n              (outChangeView)=\"handlerChangeView($event)\"\n              (outChange)=\"handlerChangeChecked($event.item)\" />\n          }\n        }\n      </div>\n    }\n  }\n\n  @if ((!items() || !items().length) && (parentItem().level < parentItem().maxLevelGroup)) {\n    <div class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n      [style.marginLeft.px]=\"(parentItem().level + 1) | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe:(parentItem().maxLevelGroup+1):configTemplateGroup.isViewTree:configTemplateGroup.isViewTreeJson:!(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem):true\"\n      [style.paddingLeft.px]=\"(parentItem().level + 1) | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe:(parentItem().maxLevelGroup+1):configTemplateGroup.isViewTree: configTemplateGroup.isViewTreeJson:false\"\n      [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n      [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n      <div [class]=\"parentItem().classIncludeItemNoData || ''\">\n        @if (parentItem().iconEmptyDataInGroup) {\n          <div class=\"pb-[16px]\">\n            <ng-container\n              *ngComponentOutlet=\"(keySearch()  ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\" />\n          </div>\n        }\n        @if (!keySearch()) {\n          <span>{{ ( parentItem().textDescriptionGroupWhenNoData ?? config()?.textNoData ?? 'i18n_no_result') | translate }}</span>\n        }\n        @if (keySearch()) {\n          <span>{{ 'i18n_no_result' | translate }}</span>\n        }\n      </div>\n    </div>\n  }\n}\n", styles: [":host{position:relative}:host .libs-ui-list-group-item-line-vertical{position:absolute;width:1px;height:100%;background-color:#e6e7ea}.libs-ui-icon-check{--color: var(--libs-ui-color-default, #226ff5)}.libs-ui-icon-check:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}[class*=libs-ui-icon-chevron]:before{color:#6a7383}.libs-ui-list-group-json_icon-item-parent{min-width:6px;min-height:6px;height:6px;width:6px;border-radius:50%;background-color:#226ff5}.libs-ui-list-group-json_icon-item-parent[disabled=true]{background-color:#6a7383!important}\n"] }]
+                        LibsUiComponentsRadioSingleComponent,
+                    ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @if ((configTemplateGroup.isViewTree && !!items().length) || (parentItem().maxLevelGroup > 2 && parentItem().level > 1)) {\n    <div\n      class=\"libs-ui-list-group-item-line-vertical\"\n      [style.left.px]=\"\n        parentItem().level\n          | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe\n            : parentItem().maxLevelGroup\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n      \"></div>\n  }\n  @if (items() && items().length) {\n    @for (item of items(); track item()[fieldKey()]) {\n      <div>\n        <div\n          [style.marginLeft.px]=\"\n            item().level\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : item().maxLevelGroup\n                : configTemplateGroup.isViewTree\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n          \"\n          [style.paddingLeft.px]=\"\n            item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length\n          \"\n          [style.paddingRight.px]=\"\n            item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length\n          \"\n          [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + item()?.classInclude\"\n          [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n          [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n          [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n          [class.cursor-pointer]=\"!disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n          [class.libs-ui-bg-list-active]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.hasBackgroundColorWhenItemSelected && item().isCheckManual\"\n          (click)=\"handlerChangeChecked(item(), item()[fieldKey()], disable() || (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup))\">\n          @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTree) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"item().expand\"\n              (click)=\"handlerToggleExpand($event, item)\"></i>\n          }\n          @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]()?.length) {\n            <div [class]=\"'p-[5px]'\">\n              <div\n                [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n                [attr.disabled]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) || false\"></div>\n            </div>\n          }\n          <div class=\"flex w-full relative\">\n            <div\n              #labelRef\n              class=\"invisible\"\n              [class.hidden]=\"configTemplateGroup.ignoreFixHeightItem\">\n              .\n            </div>\n            <div\n              class=\"flex items-center w-full\"\n              [class.absolute]=\"!configTemplateGroup.ignoreFixHeightItem\"\n              [style.height.px]=\"!configTemplateGroup.ignoreFixHeightItem ? labelRef.clientHeight : 'auto'\">\n              @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '') + ' w-full';\n              @if (!configTemplateGroup.isViewRadio) {\n                <libs_ui-components-checkbox-single\n                  [avatarConfig]=\"item().avatarConfig\"\n                  [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                  [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.singleSelectItem\"\n                  [class]=\"constHtmlClassIncludeItem\"\n                  [class.-w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n                  [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [class.max-w-[calc(100%-24px)]]=\"\n                    ((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) ||\n                      (configTemplateGroup.widthLabelSub24WhenNotTreeView &&\n                        (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) &&\n                        configTemplateGroup.singleSelectItem &&\n                        (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey))) &&\n                    !configTemplateGroup.ignoreIconExpandMarginRight\n                  \"\n                  [clickExactly]=\"false\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [disable]=\"\n                    disable() ||\n                    (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !configTemplateGroup.isViewTreeJson) ||\n                    (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n                    false\n                  \"\n                  [label]=\"item().fieldLabel\"\n                  [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                  [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                  [classLabelInclude]=\"\n                    (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n                      ? 'libs-ui-color-default libs-ui-font-h5r'\n                      : 'libs-ui-font-h5r'\n                  \"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"item().dataPopover\"\n                  [linkImage]=\"configTemplateGroup.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getImage : item() | async) : (item()[configTemplateGroup.fieldGetAvatarItem || ''] | async)\"\n                  [linkImageError]=\"configTemplateGroup.getLinkImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getLinkImageError : item() | async) : ''\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [iconImageClass]=\"item().iconImageClass ? item().iconImageClass : undefined\"\n                  [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outEventPopover)=\"handlerEventPopover($event, item())\"\n                  (outChange)=\"handlerChangeChecked(item())\" />\n              }\n              @if (configTemplateGroup.isViewRadio) {\n                <libs_ui-components-radio-single\n                  [avatarConfig]=\"item().avatarConfig\"\n                  [class.!ml-[8px]]=\"configTemplateGroup.isViewTree\"\n                  [ignoreRadio]=\"configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem\"\n                  [class]=\"constHtmlClassIncludeItem\"\n                  [class.w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n                  [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [class.max-w-[calc(100%-24px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && !configTemplateGroup.ignoreIconExpandMarginRight\"\n                  [clickExactly]=\"false\"\n                  [disable]=\"\n                    disable() ||\n                    (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                    (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) ||\n                    (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n                    false\n                  \"\n                  [label]=\"item().fieldLabel\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                  [classLabelInclude]=\"\n                    (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n                      ? 'text-[#009cdb] libs-ui-font-h5r '\n                      : ' libs-ui-font-h5r '\n                  \"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"item().dataPopover\"\n                  [linkImage]=\"\n                    configTemplateGroup.getImage\n                      ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                      : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                  \"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outChange)=\"handlerChangeChecked(item())\" />\n              }\n            </div>\n          </div>\n          @if ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey)) {\n            <i\n              class=\"libs-ui-icon-check before:!text-[16px]\"\n              [class.!ml-[8px]]=\"item().dataPopover\"\n              [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\"></i>\n          }\n          @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"item().expand\"\n              [class.!ml-[8px]]=\"item().dataPopover\"\n              (click)=\"handlerToggleExpand($event, item)\"></i>\n          }\n        </div>\n        @if (item().expand || configTemplateGroup.isViewTreeJson) {\n          @if (item().level < item().maxLevelGroup && !item()[configTemplateGroup.fieldGetItems]?.()?.length && configTemplateGroup.isViewTree) {\n            <div\n              class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n              [style.marginLeft.px]=\"\n                item().level + 1\n                  | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                    : item().maxLevelGroup + 1\n                    : configTemplateGroup.isViewTree\n                    : configTemplateGroup.isViewTreeJson\n                    : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                    : true\n              \"\n              [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n              [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n              <div [class]=\"item().classIncludeItemNoData || ''\">\n                @if (!keySearch()) {\n                  <span>{{ 'i18n_no_data_yet' | translate }}</span>\n                }\n                @if (keySearch()) {\n                  <span>{{ 'i18n_no_result' | translate }}</span>\n                }\n              </div>\n            </div>\n          }\n          @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length) {\n            <libs_ui-components-list-templates_group-item\n              [keySearch]=\"keySearch()\"\n              [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n              [parentItem]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keysChecked]=\"keysChecked()\"\n              [disable]=\"(disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)) && !configTemplateGroup.isViewTreeJson\"\n              [keysDisableItem]=\"keysDisableItem()\"\n              [configTemplateGroup]=\"configTemplateGroup\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outChangeView)=\"handlerChangeView($event)\"\n              (outChange)=\"handlerChangeChecked($event.item)\" />\n          }\n        }\n      </div>\n    }\n  }\n\n  @if ((!items() || !items().length) && parentItem().level < parentItem().maxLevelGroup) {\n    <div\n      class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n      [style.marginLeft.px]=\"\n        parentItem().level + 1\n          | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n            : parentItem().maxLevelGroup + 1\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n            : true\n      \"\n      [style.paddingLeft.px]=\"parentItem().level + 1 | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: parentItem().maxLevelGroup + 1 : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : false\"\n      [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n      [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n      <div [class]=\"parentItem().classIncludeItemNoData || ''\">\n        @if (parentItem().iconEmptyDataInGroup) {\n          <div class=\"pb-[16px]\">\n            <ng-container *ngComponentOutlet=\"(keySearch() ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\" />\n          </div>\n        }\n        @if (!keySearch()) {\n          <span>{{ parentItem().textDescriptionGroupWhenNoData ?? config()?.textNoData ?? 'i18n_no_result' | translate }}</span>\n        }\n        @if (keySearch()) {\n          <span>{{ 'i18n_no_result' | translate }}</span>\n        }\n      </div>\n    </div>\n  }\n}\n", styles: [":host{position:relative}:host .libs-ui-list-group-item-line-vertical{position:absolute;width:1px;height:100%;background-color:#e6e7ea}.libs-ui-icon-check{--color: var(--libs-ui-color-default, #226ff5)}.libs-ui-icon-check:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}[class*=libs-ui-icon-chevron]:before{color:#6a7383}.libs-ui-list-group-json_icon-item-parent{min-width:6px;min-height:6px;height:6px;width:6px;border-radius:50%;background-color:#226ff5}.libs-ui-list-group-json_icon-item-parent[disabled=true]{background-color:#6a7383!important}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -988,7 +1006,9 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             this.selectFirstItem.set(true);
         }
         this.callApiByService();
-        this.onUpdateMultiKeySelectedGroup()?.pipe(takeUntil(this.onDestroy)).subscribe(() => {
+        this.onUpdateMultiKeySelectedGroup()
+            ?.pipe(takeUntil(this.onDestroy))
+            .subscribe(() => {
             if (!this.store() || !this.store().length) {
                 return;
             }
@@ -998,23 +1018,23 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             if (!configTemplateGroup) {
                 return;
             }
-            this.store().forEach(item => {
+            this.store().forEach((item) => {
                 if (isEmpty(item()[this.fieldKey()])) {
-                    item.update(current => {
+                    item.update((current) => {
                         current[this.fieldKey()] = `${this.PATTERN_FAKE_ID}${uuid()}`;
                         return current;
                     });
                 }
                 const itemGroup = item()[configTemplateGroup.fieldGetItems];
                 const itemMap = cloneDeep(item);
-                itemMap.update(current => {
+                itemMap.update((current) => {
                     current.ref = item;
                     return current;
                 });
                 if (itemGroup) {
                     this.checkedGroupItems(itemGroup(), item);
                 }
-                if (this.multiKeySelected() && this.multiKeySelected()?.length && this.multiKeySelected()?.find(key => key === item()[this.fieldKey()])) {
+                if (this.multiKeySelected() && this.multiKeySelected()?.length && this.multiKeySelected()?.find((key) => key === item()[this.fieldKey()])) {
                     this.handlerChangeChecked(true, itemMap, false, !configTemplateGroup.singleSelectItem);
                     return;
                 }
@@ -1029,7 +1049,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             return;
         }
         if (!checked) {
-            this.items().forEach(item => {
+            this.items().forEach((item) => {
                 this.mappingItemsChecked().delete(item()[this.fieldKey()]);
                 const itemsOfGroup = item()[configTemplateGroup.fieldGetItems];
                 if (itemsOfGroup && itemsOfGroup() && itemsOfGroup().length) {
@@ -1039,7 +1059,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             this.setKeysCheckedByMappingChecked(false);
             return;
         }
-        this.items().forEach(item => {
+        this.items().forEach((item) => {
             this.mappingItemsChecked().set(item()[this.fieldKey()], item());
             const itemsOfGroup = item()[configTemplateGroup.fieldGetItems];
             if (itemsOfGroup && itemsOfGroup() && itemsOfGroup().length) {
@@ -1053,16 +1073,16 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         if (!configTemplateGroup || !items || !items.length) {
             return;
         }
-        items.forEach(item => {
+        items.forEach((item) => {
             if (isNil(item()[this.fieldKey()]) || item()[this.fieldKey()] === '') {
-                item.update(current => {
+                item.update((current) => {
                     current[this.fieldKey()] = `${this.PATTERN_FAKE_ID}${uuid()}`;
                     return;
                 });
             }
             const itemGroup = item()[configTemplateGroup.fieldGetItems];
             const itemMap = cloneDeep(item);
-            itemMap.update(current => {
+            itemMap.update((current) => {
                 current.ref = item;
                 current.parentItem = parent;
                 return current;
@@ -1070,7 +1090,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             if (itemGroup) {
                 this.checkedGroupItems(itemGroup(), item);
             }
-            if (this.multiKeySelected() && this.multiKeySelected()?.length && this.multiKeySelected()?.find(key => key === item()[this.fieldKey()])) {
+            if (this.multiKeySelected() && this.multiKeySelected()?.length && this.multiKeySelected()?.find((key) => key === item()[this.fieldKey()])) {
                 this.handlerChangeChecked(true, itemMap, false, !configTemplateGroup.singleSelectItem);
                 return;
             }
@@ -1089,7 +1109,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         if (e instanceof Event) {
             e.stopPropagation();
         }
-        item.update(current => {
+        item.update((current) => {
             current.expand = !current.expand;
             return current;
         });
@@ -1099,7 +1119,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         this.refreshView();
     }
     handlerChangeItemChecked(item) {
-        const checked = !this.keysChecked().some(key => item[this.fieldKey()] === key);
+        const checked = !this.keysChecked().some((key) => item[this.fieldKey()] === key);
         if (!checked && this.configTemplateGroup()?.isViewRadio) {
             return;
         }
@@ -1128,11 +1148,11 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
                 }
             }
             if (!isCheckedByDefaultKey) {
-                item.update(current => {
+                item.update((current) => {
                     current.isCheckManual = true;
                     return current;
                 });
-                refItem.update(current => {
+                refItem.update((current) => {
                     current.isCheckManual = true;
                     return current;
                 });
@@ -1141,9 +1161,9 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         const itemsOfGroup = item()[configTemplateGroup.fieldGetItems];
         // bỏ chọn tất cả các item để thực hiện check lại
         if (configTemplateGroup.isViewTreeJson || (configTemplateGroup.singleSelectItemByTree && !isCheckedByDefaultKey && !configTemplateGroup.notChangeStateItemCheckOther)) {
-            Array.from(this.mappingItemsChecked().values()).forEach(item => {
+            Array.from(this.mappingItemsChecked().values()).forEach((item) => {
                 delete item.isCheckManual;
-                refItem.update(current => {
+                refItem.update((current) => {
                     delete current.isCheckManual;
                     return current;
                 });
@@ -1156,21 +1176,22 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             this.expandAllItemsInGroup(item);
             this.mappingItemsChecked().set(item()[this.fieldKey()], item());
             if (isCheckedByDefaultKey) {
-                refItem.update(current => {
+                refItem.update((current) => {
                     current.isCheckedByDefaultKey = isCheckedByDefaultKey;
                     return current;
                 });
             }
-            item.update(current => {
+            item.update((current) => {
                 current.isCheckedByDefaultKey = refItem().isCheckedByDefaultKey;
                 return current;
             });
-            if (configTemplateGroup.chooseChildThenAutoChooseParent) { // chỉ chọn các cha trên cùng tree, ko quan tâm node cha có các con đã đc tích hết chưa
-                item.update(current => {
+            if (configTemplateGroup.chooseChildThenAutoChooseParent) {
+                // chỉ chọn các cha trên cùng tree, ko quan tâm node cha có các con đã đc tích hết chưa
+                item.update((current) => {
                     current.isCheckManual = true;
                     return current;
                 });
-                refItem.update(current => {
+                refItem.update((current) => {
                     current.isCheckManual = true;
                     return current;
                 });
@@ -1181,13 +1202,13 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
                 this.setKeysCheckedByMappingChecked(isClickManual, item);
                 return;
             }
-            if (configTemplateGroup.ignoreChooseParentThenAutoChooseChildren) { // lựa chọn node cha sẽ bỏ qua việc chọn tất cả node con
+            if (configTemplateGroup.ignoreChooseParentThenAutoChooseChildren) {
+                // lựa chọn node cha sẽ bỏ qua việc chọn tất cả node con
                 this.setKeysCheckedByMappingChecked(isClickManual, item);
                 return;
             }
             if (itemsOfGroup && itemsOfGroup() && itemsOfGroup().length && !isCheckedByDefaultKey && !configTemplateGroup.isViewTreeJson) {
-                const itemsChange = configTemplateGroup.ignoreChangeChildrenDisableWhenChangeParent ?
-                    itemsOfGroup().filter((item) => !this.keysDisableItem()?.find(key => key === item()[this.fieldKey()])) : itemsOfGroup();
+                const itemsChange = configTemplateGroup.ignoreChangeChildrenDisableWhenChangeParent ? itemsOfGroup().filter((item) => !this.keysDisableItem()?.find((key) => key === item()[this.fieldKey()])) : itemsOfGroup();
                 this.setCheckCheckedItemsChild(itemsChange);
             }
             if (!configTemplateGroup.notChangeStateItemCheckOther && !configTemplateGroup.isViewTreeJson) {
@@ -1196,14 +1217,14 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             this.setKeysCheckedByMappingChecked(isClickManual, item);
             return;
         }
-        item.update(current => {
+        item.update((current) => {
             current.isCheckManual = false;
             if (isCheckedByDefaultKey) {
                 current.isCheckedByDefaultKey = false;
             }
             return current;
         });
-        refItem.update(current => {
+        refItem.update((current) => {
             current.isCheckManual = false;
             if (isCheckedByDefaultKey) {
                 current.isCheckedByDefaultKey = false;
@@ -1223,8 +1244,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         }
         // nếu ko phải trường hơp của bank và danh mục sản phẩm thì bỏ cha sẽ bỏ con
         if (itemsOfGroup && itemsOfGroup() && itemsOfGroup().length) {
-            const itemsChange = configTemplateGroup.ignoreChangeChildrenDisableWhenChangeParent ?
-                itemsOfGroup().filter((item) => !this.keysDisableItem()?.find(key => key === item()[this.fieldKey()])) : itemsOfGroup();
+            const itemsChange = configTemplateGroup.ignoreChangeChildrenDisableWhenChangeParent ? itemsOfGroup().filter((item) => !this.keysDisableItem()?.find((key) => key === item()[this.fieldKey()])) : itemsOfGroup();
             this.removeCheckedItemsChild(itemsChange);
         }
         if (item().parentItem && !configTemplateGroup.ignoreUnselectChildrenRemoveSelectParent) {
@@ -1253,9 +1273,9 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         }
         const keysChecked = Array.from(this.mappingItemsChecked().keys());
         const itemParent = item().parentItem;
-        const indexItem = this.keysStillOtherOptions().findIndex(key => key === item()[this.fieldKey()]);
+        const indexItem = this.keysStillOtherOptions().findIndex((key) => key === item()[this.fieldKey()]);
         if (indexItem >= 0) {
-            this.keysStillOtherOptions.update(current => {
+            this.keysStillOtherOptions.update((current) => {
                 current.splice(indexItem, 1);
                 return current;
             });
@@ -1267,20 +1287,20 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         if (!itemsOfGroupParent || !itemsOfGroupParent() || !itemsOfGroupParent().length) {
             return;
         }
-        const indexParent = this.keysStillOtherOptions().findIndex(key => key === itemParent()[this.fieldKey()]);
+        const indexParent = this.keysStillOtherOptions().findIndex((key) => key === itemParent()[this.fieldKey()]);
         if (itemsOfGroupParent().every((element) => keysChecked.includes(element()[this.fieldKey()])) && indexParent >= 0) {
-            this.keysStillOtherOptions.update(current => {
+            this.keysStillOtherOptions.update((current) => {
                 current.splice(indexItem, 1);
                 return current;
             });
             return;
         }
-        if (itemsOfGroupParent().some(element => keysChecked.includes(element()[this.fieldKey()])) && indexParent < 0) {
-            this.keysStillOtherOptions.update(current => [...current, itemParent()[this.fieldKey()]]);
+        if (itemsOfGroupParent().some((element) => keysChecked.includes(element()[this.fieldKey()])) && indexParent < 0) {
+            this.keysStillOtherOptions.update((current) => [...current, itemParent()[this.fieldKey()]]);
             return;
         }
         if (indexParent >= 0) {
-            this.keysStillOtherOptions.update(current => {
+            this.keysStillOtherOptions.update((current) => {
                 current.splice(indexItem, 1);
                 return current;
             });
@@ -1300,16 +1320,18 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         if ((configTemplateGroup.emitAllItemChecked || configTemplateGroup.chooseChildThenAutoChooseParent) && !configTemplateGroup.ignoreEmitAllItemCheckedWhenChooseChildThenAutoChooseParent) {
             for (const [key, item] of this.mappingItemsChecked()) {
                 dataMultiKeyChecked.keys.push(key);
-                dataMultiKeyChecked.mapKeys.push({ key, item: (item.ref?.() || item), isClickManual });
+                dataMultiKeyChecked.mapKeys.push({ key, item: item.ref?.() || item, isClickManual });
             }
             this.outSelectMultiKey.emit(dataMultiKeyChecked);
             this.totalItemChecked.set(dataMultiKeyChecked.keys.length);
             return;
         }
         for (const [key, item] of this.mappingItemsChecked()) {
-            if (item[this.fieldKey()] && !String(item[this.fieldKey()]).includes(this.PATTERN_FAKE_ID) && (isEmpty(item[configTemplateGroup.fieldGetItems]) || !item[configTemplateGroup.fieldGetItems]().some((itemGroup) => this.mappingItemsChecked().get(itemGroup()[this.fieldKey()])))) {
+            if (item[this.fieldKey()] &&
+                !String(item[this.fieldKey()]).includes(this.PATTERN_FAKE_ID) &&
+                (isEmpty(item[configTemplateGroup.fieldGetItems]) || !item[configTemplateGroup.fieldGetItems]().some((itemGroup) => this.mappingItemsChecked().get(itemGroup()[this.fieldKey()])))) {
                 dataMultiKeyChecked.keys.push(key);
-                dataMultiKeyChecked.mapKeys.push({ key, item: (item.ref?.() || item), isClickManual });
+                dataMultiKeyChecked.mapKeys.push({ key, item: item.ref?.() || item, isClickManual });
             }
         }
         this.outSelectMultiKey.emit(dataMultiKeyChecked);
@@ -1346,7 +1368,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         if (!configTemplateGroup || !items || !items.length) {
             return;
         }
-        items.forEach(item => {
+        items.forEach((item) => {
             this.mappingItemsChecked().set(item()[this.fieldKey()], item());
             const itemsOfGroup = item()[configTemplateGroup.fieldGetItems];
             if (itemsOfGroup && itemsOfGroup() && itemsOfGroup().length) {
@@ -1359,8 +1381,8 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         if (!configTemplateGroup || !items || !items.length) {
             return;
         }
-        items.forEach(item => {
-            item.update(current => {
+        items.forEach((item) => {
+            item.update((current) => {
                 current.isCheckManual = false;
                 return current;
             });
@@ -1383,13 +1405,13 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         }
         let items = this.store().map((item) => {
             if (isNil(item()[this.fieldKey()]) || item()[this.fieldKey()] === '') {
-                item.update(current => {
+                item.update((current) => {
                     current[this.fieldKey()] = `${this.PATTERN_FAKE_ID}${uuid()}`;
                     return;
                 });
             }
             const itemMap = cloneDeep(item);
-            itemMap.update(current => {
+            itemMap.update((current) => {
                 current.ref = item;
                 current.isRoot = true;
                 current.expand = this.keySearch() ? true : false;
@@ -1400,22 +1422,22 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
                 return current;
             });
             if ((itemMap().level === itemMap().maxLevelGroup || !this.configTemplateGroup()?.ignoreCheckboxGroup) && !String(item()[this.fieldKey()])?.includes(this.PATTERN_FAKE_ID)) {
-                this.totalItem.update(current => current++);
+                this.totalItem.update((current) => current++);
             }
             if (!this.keySearch() && this.configTemplateGroup()?.getExpandGroup) {
-                itemMap.update(current => {
+                itemMap.update((current) => {
                     current.expand = this.configTemplateGroup()?.getExpandGroup?.(item);
                     return current;
                 });
             }
             if (this.configTemplateGroup()?.getPopoverGroup) {
-                itemMap.update(current => {
+                itemMap.update((current) => {
                     current.dataPopover = this.configTemplateGroup()?.getPopoverGroup?.(item);
                     return current;
                 });
             }
             if (this.configTemplateGroup()?.getButtonGroup) {
-                itemMap.update(current => {
+                itemMap.update((current) => {
                     current.buttonInGroup = this.configTemplateGroup()?.getButtonGroup?.(item);
                     return current;
                 });
@@ -1423,19 +1445,19 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             const text = deleteUnicode(this.buildValueByConfig(itemMap)).toLocaleLowerCase();
             const textEscape = escapeHtml(text);
             const keySearch = deleteUnicode(escapeHtml((this.keySearch() || '').trim().toLocaleLowerCase()));
-            itemMap.update(current => {
+            itemMap.update((current) => {
                 current.displayAllChild = false;
                 return current;
             });
             if (!keySearch || (this.configTemplateGroup()?.searchAllLevel && (text.includes(keySearch) || textEscape.includes(keySearch)))) {
-                itemMap.update(current => {
+                itemMap.update((current) => {
                     current.displayAllChild = true;
                     current.hasDisplay = true;
                     return current;
                 });
             }
             const itemGroup = item()[configTemplateGroup.fieldGetItems];
-            itemMap.update(current => {
+            itemMap.update((current) => {
                 const children = current[configTemplateGroup.fieldGetItems];
                 const data = this.filterItemsDisplay(this.convertDataByGroupInItem(itemGroup?.() || [], itemMap));
                 children?.set(data);
@@ -1462,14 +1484,14 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
                 current.avatarConfig = configTemplateGroup.getAvatarConfig && configTemplateGroup.getAvatarConfig(current);
                 return current;
             });
-            if (this.multiKeySelected() && this.multiKeySelected()?.length && this.multiKeySelected()?.some(key => key === itemMap()[this.fieldKey()])) {
+            if (this.multiKeySelected() && this.multiKeySelected()?.length && this.multiKeySelected()?.some((key) => key === itemMap()[this.fieldKey()])) {
                 this.handlerChangeChecked(true, itemMap, false, true);
             }
             this.buildValueByConfig(itemMap);
             return itemMap;
         });
         if (this.configTemplateGroup()?.searchAllLevel && this.keySearch()) {
-            items = items.filter(item => {
+            items = items.filter((item) => {
                 return item().hasDisplay;
             });
         }
@@ -1488,7 +1510,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             }
         };
         const checkLoadItem = (preStateHasScroll, currentHasScroll) => {
-            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && (this.isSearchOnline())) {
+            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && this.isSearchOnline()) {
                 this.callApiByService(false);
             }
         };
@@ -1514,19 +1536,19 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         if (isEmpty(items)) {
             return;
         }
-        items.forEach(itemGroup => this.expandAllItemsInGroup(itemGroup));
+        items.forEach((itemGroup) => this.expandAllItemsInGroup(itemGroup));
     }
     convertDataByGroupInItem(items, parentItem) {
         const configTemplateGroup = this.configTemplateGroup();
         if (!configTemplateGroup || !items || !items.length) {
             return [];
         }
-        const itemsMap = items.map(item => {
+        const itemsMap = items.map((item) => {
             if (isNil(item()[this.fieldKey()]) || item()[this.fieldKey()] === '') {
                 item()[this.fieldKey()] = `${this.PATTERN_FAKE_ID}${uuid()}`;
             }
             const itemMap = cloneDeep(item);
-            itemMap.update(current => {
+            itemMap.update((current) => {
                 current.ref = item;
                 current.parentItem = parentItem;
                 current[this.fieldKey()] = item()[this.fieldKey()];
@@ -1534,7 +1556,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
                 current.level = parentItem().level + 1;
                 current.arrayLevel = range(2, current.level + 1);
                 if ((current.level === current.maxLevelGroup || !configTemplateGroup.ignoreCheckboxItem) && !String(item()[this.fieldKey()])?.includes(this.PATTERN_FAKE_ID)) {
-                    this.totalItem.update(current => current++);
+                    this.totalItem.update((current) => current++);
                 }
                 current.expand = this.keySearch() ? true : false;
                 if (!this.keySearch() && configTemplateGroup.getExpandItem) {
@@ -1550,7 +1572,8 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
                 const text = deleteUnicode(this.buildValueByConfig(isSignal(current) ? current : signal(current)).toLocaleLowerCase());
                 const keySearch = deleteUnicode(escapeHtml((this.keySearch() || '').trim().toLocaleLowerCase()));
                 const textEscape = escapeHtml(text);
-                if ((!this.keysHiddenItem()?.some(key => key === current[this.fieldKey()])) && ((parentItem().displayAllChild || !keySearch) || ((configTemplateGroup.searchAllLevel || !current[this.fieldKey()].includes(this.PATTERN_FAKE_ID)) && (text.includes(keySearch) || textEscape.includes(keySearch))))) {
+                if (!this.keysHiddenItem()?.some((key) => key === current[this.fieldKey()]) &&
+                    (parentItem().displayAllChild || !keySearch || ((configTemplateGroup.searchAllLevel || !current[this.fieldKey()].includes(this.PATTERN_FAKE_ID)) && (text.includes(keySearch) || textEscape.includes(keySearch))))) {
                     current.displayAllChild = true;
                     this.setDisplayItem(current);
                 }
@@ -1586,7 +1609,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
                     current.classInclude = configTemplateGroup.getClassIncludeItemContent(item);
                 }
                 current.avatarConfig = configTemplateGroup.getAvatarConfig && configTemplateGroup.getAvatarConfig(current);
-                if (this.multiKeySelected() && this.multiKeySelected()?.length && this.multiKeySelected()?.some(key => key === current[this.fieldKey()])) {
+                if (this.multiKeySelected() && this.multiKeySelected()?.length && this.multiKeySelected()?.some((key) => key === current[this.fieldKey()])) {
                     this.handlerChangeChecked(true, signal(current), false, true);
                 }
                 if (this.selectFirstItem() && current.level === current.maxLevelGroup) {
@@ -1614,8 +1637,8 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         if (!configTemplateGroup || !items || !items.length) {
             return [];
         }
-        const itemsDisplay = items.filter(item => item().hasDisplay);
-        itemsDisplay.forEach(item => {
+        const itemsDisplay = items.filter((item) => item().hasDisplay);
+        itemsDisplay.forEach((item) => {
             const itemGroup = item()[configTemplateGroup.fieldGetItems];
             item()[configTemplateGroup.fieldGetItems]?.set(this.filterItemsDisplay(itemGroup?.() || []));
         });
@@ -1642,7 +1665,7 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
             if (!group) {
                 continue;
             }
-            data.length += (group?.()?.length || 0);
+            data.length += group?.()?.length || 0;
             if ((!group?.() || !group?.().length) && item().level === 1 && (!configTemplateGroup.searchAllLevel || configTemplateGroup.autoCountWhenGroupEmptyItemLevel1)) {
                 data.length += 1;
             }
@@ -1684,32 +1707,34 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
                 item().fieldLabel = this.translateService.instant(this.configTemplateGroup()?.getLabelGroup(item()) || ' ');
                 return labelSearch ?? item().fieldLabel;
             }
-            item.update(current => {
+            item.update((current) => {
                 current.fieldLabel = this.translateService.instant(current.label || current.name || ' ');
                 return current;
             });
             return item().fieldLabel;
         }
         if (this.configTemplateGroup()?.getLabelItem) {
-            item.update(current => {
+            item.update((current) => {
                 current.fieldLabel = this.translateService.instant(this.configTemplateGroup()?.getLabelItem(current) || ' ');
                 return current;
             });
             return labelSearch ?? item().fieldLabel;
         }
-        item.update(current => {
+        item.update((current) => {
             current.fieldLabel = this.translateService.instant(current.label || current.name || ' ');
             return current;
         });
         return labelSearch ?? item().fieldLabel;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListGroupComponent, isStandalone: true, selector: "libs_ui-components-list-templates_group", usesInheritance: true, ngImport: i0, template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort()+'px':'100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n    <div\n      [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]=\"constHtmlDisable\"\n        (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n      <div class=\"text-[#999999]\">|</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-h6s'\"\n        [disable]=\"constHtmlDisable\"\n        (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n    </div>\n  }\n  @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n    <div\n      [class]=\"'flex libs-ui-border-bottom-general '+(configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n      <libs_ui-components-checkbox-single [label]=\"configCheckBox.label ?? 'i18n_all'\"\n        [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n        [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n        [disable]=\"constHtmlDisable\"\n        (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n        (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n    </div>\n  }\n  @if (items() && items().length) {\n    <div class=\"w-full h-full relative flex\">\n      <div LibsUiComponentsScrollOverlayDirective\n        class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n        @for (item of items(); track item()[fieldKey()]; let first = $first; let last = $last) {\n          <div #itemRef\n            [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n            class=\"flex flex-col relative \">\n            @let constHtmlPadding = level()*(configTemplateGroup.isViewTree ? 8 : 16);\n                <div class=\"flex items-center py-[6px] \"\n                  [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup  && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                  [style.paddingLeft.px]=\"constHtmlPadding\"\n                  [style.paddingRight.px]=\"constHtmlPadding\"\n                  (click)=\"(configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem) ? handlerToggleExpand($event,item) : undefined\">\n                  @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n              <i class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                [class.rotate-90]=\"item().expand\"\n                (click)=\"handlerToggleExpand($event,item)\">\n              </i>\n            }\n            <div class=\"flex\"\n              [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n              [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n              @if (!configTemplateGroup.isViewRadio) {\n                <libs_ui-components-checkbox-single [avatarConfig]=\"item().avatarConfig\"\n                  [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                  [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                  [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                  [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                  [class.w-full]=\"!item()[configTemplateGroup.fieldGetItems]?.()?.length && !((configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) && (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\"\n                  [class.max-w-[calc(100%-24px)]]=\"(configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) && (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length))\"\n                  [label]=\"item().fieldLabel\"\n                  [popover]=\"item().dataPopover\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                  [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getDataComponentOutletGroup:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                  [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getComponentOutletGroup:item():fieldKey():{valueIs0:0}) | async\"\n                  [linkImage]=\"configTemplateGroup.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage):item()) | async) : item()[configTemplateGroup.fieldGetAvatarItem || '']\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : (configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ':' libs-ui-font-h6s ')) + ((configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree) ? '':' text-uppercase ')\"\n                  [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n                  [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length\"\n                  [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysStillOtherOptions():keysStillOtherOptions().length\"\n                  (outChange)=\"handlerChangeChecked($event.checked,item, true)\"\n                  (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                  (outClickLabel)=\"handlerToggleExpand('clickLabel',item,configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n              }\n\n              @if (configTemplateGroup.isViewRadio) {\n                <libs_ui-components-radio-single\n                  [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                  [avatarConfig]=\"item().avatarConfig\"\n                  [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                  [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                  [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                  [class.w-full]=\"!item()[configTemplateGroup.fieldGetItems]?.()?.length && !((configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) && (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\"\n                  [class.max-w-[calc(100%-24px)]]=\"(configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) && (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length))\"\n                  [label]=\"item().fieldLabel\"\n                  [popover]=\"item().dataPopover\"\n                  [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getDataComponentOutletGroup:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                  [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getComponentOutletGroup:item():fieldKey():{valueIs0:0}) | async\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [linkImage]=\"configTemplateGroup.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage):item()) | async) : item()[configTemplateGroup.fieldGetAvatarItem || '']\"\n                  [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '':' uppercase')\"\n                  [disable]=\"disable() || (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) || configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n                  [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length\"\n                  (outChange)=\"handlerChangeChecked($event.active,item, true)\"\n                  (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                  (outClickLabel)=\"handlerToggleExpand('clickLabel',item,configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n              }\n\n              @if (item().buttonInGroup; as buttonInGroup) {\n                <libs_ui-components-buttons-button [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                  [label]=\"buttonInGroup.label || ' '\"\n                  [classIconLeft]=\"(buttonInGroup.classIconLeft || '')+' flex mr-[8px] !text-[8px]'\"\n                  [classInclude]=\"buttonInGroup.classInclude\"\n                  [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5r'\"\n                  [disable]=\"buttonInGroup.disable || disable() || false\"\n                  (outClick)=\"handlerClickButtonGroup(buttonInGroup,item())\" />\n              }\n            </div>\n\n            @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n              <i class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                [class.!ml-[8px]]=\"item().dataPopover\"\n                [class.rotate-90]=\"item().expand\"\n                (click)=\"handlerToggleExpand($event,item)\">\n              </i>\n            }\n          </div>\n          @if (item().expand && calculatorHeighItemSuccess()) {\n            <libs_ui-components-list-templates_group-item [keySearch]=\"keySearch()\"\n              [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n              [parentItem]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keysChecked]=\"keysChecked()\"\n              [disable]=\"disable()\"\n              [keysDisableItem]=\"keysDisableItem() || []\"\n              [configTemplateGroup]=\"configTemplateGroup\"\n              [config]=\"config()\"\n              [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n              (outChangeView)=\"handlerChangeView()\"\n              (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n              (outChange)=\"handlerChangeItemChecked($event.item)\" />\n          }\n          @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n            <div class=\"libs-ui-list-group-line\"\n              [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\">\n            </div>\n          }\n      </div>\n    }\n    </div>\n    </div>\n  }\n  @if (!items() || !items().length) {\n    <div\n      class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata?configTemplateGroup.classIncludeNodata:'' }}\"\n      [style.marginLeft.px]=\"0 | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe:2:(configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'):configTemplateGroup.isViewTreeJson:!(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem):true\"\n      [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n      [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n      @if (!keySearch() && !loading()) {\n        <div>{{ (config()?.textNoData ?? 'i18n_no_data_yet') | translate }}</div>\n      }\n      @if (keySearch() && !loading()) {\n        <div>{{ (config()?.textSearchNoData ??'i18n_no_result') | translate }}</div>\n      }\n    </div>\n  }\n  @if (loading()) {\n    <libs_ui-components-spinner [size]=\"'medium'\" />\n  }\n  </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorMarginLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorMarginLeftItemPipe" }, { kind: "component", type: LibsUiComponentsListGroupItemComponent, selector: "libs_ui-components-list-templates_group-item", inputs: ["items", "configTemplateGroup", "keySearch", "fieldKey", "keysChecked", "keysDisableItem", "parentItem", "disable", "disableLabel", "config", "keysStillOtherOptions"], outputs: ["outChangeView", "outChange", "outChangStageFlagMousePopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListGroupComponent, isStandalone: true, selector: "libs_ui-components-list-templates_group", usesInheritance: true, ngImport: i0, template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort() + 'px' : '100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div\n    class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n        <div [class]=\"'flex items-center bg-[#ffffff] ' + (configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6r'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n          <div class=\"text-[#999999]\">|</div>\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6s'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n        </div>\n      }\n      @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n        <div [class]=\"'flex libs-ui-border-bottom-general ' + (configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n          <libs_ui-components-checkbox-single\n            [label]=\"configCheckBox.label ?? 'i18n_all'\"\n            [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n            [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n            [disable]=\"constHtmlDisable\"\n            (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n            (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n        </div>\n      }\n      @if (items() && items().length) {\n        <div class=\"w-full h-full relative flex\">\n          <div\n            LibsUiComponentsScrollOverlayDirective\n            class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n            @for (item of items(); track item()[fieldKey()]; let first = $first; let last = $last) {\n              <div\n                #itemRef\n                [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n                class=\"flex flex-col relative\">\n                @let constHtmlPadding = level() * (configTemplateGroup.isViewTree ? 8 : 16);\n                <div\n                  class=\"flex items-center py-[6px]\"\n                  [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                  [style.paddingLeft.px]=\"constHtmlPadding\"\n                  [style.paddingRight.px]=\"constHtmlPadding\"\n                  (click)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\">\n                  @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n                    <i\n                      class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                      [class.rotate-90]=\"item().expand\"\n                      (click)=\"handlerToggleExpand($event, item)\"></i>\n                  }\n                  <div\n                    class=\"flex\"\n                    [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                    [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n                    @if (!configTemplateGroup.isViewRadio) {\n                      <libs_ui-components-checkbox-single\n                        [avatarConfig]=\"item().avatarConfig\"\n                        [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                        [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                        [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                        [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                        [class.w-full]=\"\n                          !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                          !(\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          )\n                        \"\n                        [class.max-w-[calc(100%-24px)]]=\"\n                          (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                          (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                        \"\n                        [label]=\"item().fieldLabel\"\n                        [popover]=\"item().dataPopover\"\n                        [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                        [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                        [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                        [linkImage]=\"\n                          configTemplateGroup.getImage\n                            ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                            : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                        \"\n                        [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                        [classLabelInclude]=\"\n                          (configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ' : ' libs-ui-font-h6s ') +\n                          (configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree ? '' : ' text-uppercase ')\n                        \"\n                        [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                        [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                        [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                        (outChange)=\"handlerChangeChecked($event.checked, item, true)\"\n                        (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                        (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n                    }\n\n                    @if (configTemplateGroup.isViewRadio) {\n                      <libs_ui-components-radio-single\n                        [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                        [avatarConfig]=\"item().avatarConfig\"\n                        [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                        [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                        [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                        [class.w-full]=\"\n                          !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                          !(\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          )\n                        \"\n                        [class.max-w-[calc(100%-24px)]]=\"\n                          (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                          (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                        \"\n                        [label]=\"item().fieldLabel\"\n                        [popover]=\"item().dataPopover\"\n                        [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                        [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                        [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                        [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                        [linkImage]=\"\n                          configTemplateGroup.getImage\n                            ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                            : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                        \"\n                        [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '' : ' uppercase')\"\n                        [disable]=\"\n                          disable() ||\n                          (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                          configTemplateGroup.ignoreCheckboxGroup ||\n                          configTemplateGroup.singleSelectItem ||\n                          (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n                        \"\n                        [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                        (outChange)=\"handlerChangeChecked($event.active, item, true)\"\n                        (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                        (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n                    }\n\n                    @if (item().buttonInGroup; as buttonInGroup) {\n                      <libs_ui-components-buttons-button\n                        [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                        [label]=\"buttonInGroup.label || ' '\"\n                        [classIconLeft]=\"(buttonInGroup.classIconLeft || '') + ' flex mr-[8px] !text-[8px]'\"\n                        [classInclude]=\"buttonInGroup.classInclude\"\n                        [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5r'\"\n                        [disable]=\"buttonInGroup.disable || disable() || false\"\n                        (outClick)=\"handlerClickButtonGroup(buttonInGroup, item())\" />\n                    }\n                  </div>\n\n                  @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n                    <i\n                      class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                      [class.!ml-[8px]]=\"item().dataPopover\"\n                      [class.rotate-90]=\"item().expand\"\n                      (click)=\"handlerToggleExpand($event, item)\"></i>\n                  }\n                </div>\n                @if (item().expand && calculatorHeighItemSuccess()) {\n                  <libs_ui-components-list-templates_group-item\n                    [keySearch]=\"keySearch()\"\n                    [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n                    [parentItem]=\"item()\"\n                    [fieldKey]=\"fieldKey()\"\n                    [keysChecked]=\"keysChecked()\"\n                    [disable]=\"disable()\"\n                    [keysDisableItem]=\"keysDisableItem() || []\"\n                    [configTemplateGroup]=\"configTemplateGroup\"\n                    [config]=\"config()\"\n                    [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n                    (outChangeView)=\"handlerChangeView()\"\n                    (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                    (outChange)=\"handlerChangeItemChecked($event.item)\" />\n                }\n                @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n                  <div\n                    class=\"libs-ui-list-group-line\"\n                    [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"></div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div\n          class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata ? configTemplateGroup.classIncludeNodata : '' }}\"\n          [style.marginLeft.px]=\"\n            0\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : 2\n                : configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                : true\n          \"\n          [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n          [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n          @if (!keySearch() && !loading()) {\n            <div>{{ config()?.textNoData ?? 'i18n_no_data_yet' | translate }}</div>\n          }\n          @if (keySearch() && !loading()) {\n            <div>{{ config()?.textSearchNoData ?? 'i18n_no_result' | translate }}</div>\n          }\n        </div>\n      }\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorMarginLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorMarginLeftItemPipe" }, { kind: "component", type: LibsUiComponentsListGroupItemComponent, selector: "libs_ui-components-list-templates_group-item", inputs: ["items", "configTemplateGroup", "keySearch", "fieldKey", "keysChecked", "keysDisableItem", "parentItem", "disable", "disableLabel", "config", "keysStillOtherOptions"], outputs: ["outChangeView", "outChange", "outChangStageFlagMousePopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-list-templates_group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        VirtualScrollerModule, AsyncPipe, TranslateModule,
+                        VirtualScrollerModule,
+                        AsyncPipe,
+                        TranslateModule,
                         LibsUiComponentsButtonsButtonComponent,
                         LibsUiComponentsCheckboxSingleComponent,
                         LibsUiComponentsRadioSingleComponent,
@@ -1718,8 +1743,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LibsUiCheckSelectedByKeyPipe,
                         LibsUiPipesCallFunctionInTemplatePipe,
                         LibsUiComponentsListGroupCalculatorMarginLeftItemPipe,
-                        LibsUiComponentsListGroupItemComponent
-                    ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort()+'px':'100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n    <div\n      [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]=\"constHtmlDisable\"\n        (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n      <div class=\"text-[#999999]\">|</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-h6s'\"\n        [disable]=\"constHtmlDisable\"\n        (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n    </div>\n  }\n  @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n    <div\n      [class]=\"'flex libs-ui-border-bottom-general '+(configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n      <libs_ui-components-checkbox-single [label]=\"configCheckBox.label ?? 'i18n_all'\"\n        [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n        [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n        [disable]=\"constHtmlDisable\"\n        (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n        (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n    </div>\n  }\n  @if (items() && items().length) {\n    <div class=\"w-full h-full relative flex\">\n      <div LibsUiComponentsScrollOverlayDirective\n        class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n        @for (item of items(); track item()[fieldKey()]; let first = $first; let last = $last) {\n          <div #itemRef\n            [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n            class=\"flex flex-col relative \">\n            @let constHtmlPadding = level()*(configTemplateGroup.isViewTree ? 8 : 16);\n                <div class=\"flex items-center py-[6px] \"\n                  [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup  && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                  [style.paddingLeft.px]=\"constHtmlPadding\"\n                  [style.paddingRight.px]=\"constHtmlPadding\"\n                  (click)=\"(configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem) ? handlerToggleExpand($event,item) : undefined\">\n                  @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n              <i class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                [class.rotate-90]=\"item().expand\"\n                (click)=\"handlerToggleExpand($event,item)\">\n              </i>\n            }\n            <div class=\"flex\"\n              [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n              [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n              @if (!configTemplateGroup.isViewRadio) {\n                <libs_ui-components-checkbox-single [avatarConfig]=\"item().avatarConfig\"\n                  [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                  [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                  [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                  [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                  [class.w-full]=\"!item()[configTemplateGroup.fieldGetItems]?.()?.length && !((configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) && (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\"\n                  [class.max-w-[calc(100%-24px)]]=\"(configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) && (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length))\"\n                  [label]=\"item().fieldLabel\"\n                  [popover]=\"item().dataPopover\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                  [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getDataComponentOutletGroup:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                  [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getComponentOutletGroup:item():fieldKey():{valueIs0:0}) | async\"\n                  [linkImage]=\"configTemplateGroup.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage):item()) | async) : item()[configTemplateGroup.fieldGetAvatarItem || '']\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : (configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ':' libs-ui-font-h6s ')) + ((configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree) ? '':' text-uppercase ')\"\n                  [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n                  [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length\"\n                  [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysStillOtherOptions():keysStillOtherOptions().length\"\n                  (outChange)=\"handlerChangeChecked($event.checked,item, true)\"\n                  (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                  (outClickLabel)=\"handlerToggleExpand('clickLabel',item,configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n              }\n\n              @if (configTemplateGroup.isViewRadio) {\n                <libs_ui-components-radio-single\n                  [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                  [avatarConfig]=\"item().avatarConfig\"\n                  [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                  [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                  [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                  [class.w-full]=\"!item()[configTemplateGroup.fieldGetItems]?.()?.length && !((configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) && (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\"\n                  [class.max-w-[calc(100%-24px)]]=\"(configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) && (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length))\"\n                  [label]=\"item().fieldLabel\"\n                  [popover]=\"item().dataPopover\"\n                  [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getDataComponentOutletGroup:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                  [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateGroup.getComponentOutletGroup:item():fieldKey():{valueIs0:0}) | async\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [linkImage]=\"configTemplateGroup.getImage ? (('avatar' | LibsUiPipesCallFunctionInTemplatePipe:(item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage):item()) | async) : item()[configTemplateGroup.fieldGetAvatarItem || '']\"\n                  [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '':' uppercase')\"\n                  [disable]=\"disable() || (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) || configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysDisableItem():keysDisableItem()?.length)\"\n                  [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:keysChecked():keysChecked().length\"\n                  (outChange)=\"handlerChangeChecked($event.active,item, true)\"\n                  (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                  (outClickLabel)=\"handlerToggleExpand('clickLabel',item,configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n              }\n\n              @if (item().buttonInGroup; as buttonInGroup) {\n                <libs_ui-components-buttons-button [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                  [label]=\"buttonInGroup.label || ' '\"\n                  [classIconLeft]=\"(buttonInGroup.classIconLeft || '')+' flex mr-[8px] !text-[8px]'\"\n                  [classInclude]=\"buttonInGroup.classInclude\"\n                  [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5r'\"\n                  [disable]=\"buttonInGroup.disable || disable() || false\"\n                  (outClick)=\"handlerClickButtonGroup(buttonInGroup,item())\" />\n              }\n            </div>\n\n            @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n              <i class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                [class.!ml-[8px]]=\"item().dataPopover\"\n                [class.rotate-90]=\"item().expand\"\n                (click)=\"handlerToggleExpand($event,item)\">\n              </i>\n            }\n          </div>\n          @if (item().expand && calculatorHeighItemSuccess()) {\n            <libs_ui-components-list-templates_group-item [keySearch]=\"keySearch()\"\n              [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n              [parentItem]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keysChecked]=\"keysChecked()\"\n              [disable]=\"disable()\"\n              [keysDisableItem]=\"keysDisableItem() || []\"\n              [configTemplateGroup]=\"configTemplateGroup\"\n              [config]=\"config()\"\n              [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n              (outChangeView)=\"handlerChangeView()\"\n              (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n              (outChange)=\"handlerChangeItemChecked($event.item)\" />\n          }\n          @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n            <div class=\"libs-ui-list-group-line\"\n              [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\">\n            </div>\n          }\n      </div>\n    }\n    </div>\n    </div>\n  }\n  @if (!items() || !items().length) {\n    <div\n      class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata?configTemplateGroup.classIncludeNodata:'' }}\"\n      [style.marginLeft.px]=\"0 | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe:2:(configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'):configTemplateGroup.isViewTreeJson:!(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem):true\"\n      [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n      [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n      @if (!keySearch() && !loading()) {\n        <div>{{ (config()?.textNoData ?? 'i18n_no_data_yet') | translate }}</div>\n      }\n      @if (keySearch() && !loading()) {\n        <div>{{ (config()?.textSearchNoData ??'i18n_no_result') | translate }}</div>\n      }\n    </div>\n  }\n  @if (loading()) {\n    <libs_ui-components-spinner [size]=\"'medium'\" />\n  }\n  </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"] }]
+                        LibsUiComponentsListGroupItemComponent,
+                    ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort() + 'px' : '100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div\n    class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n        <div [class]=\"'flex items-center bg-[#ffffff] ' + (configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6r'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n          <div class=\"text-[#999999]\">|</div>\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6s'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n        </div>\n      }\n      @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n        <div [class]=\"'flex libs-ui-border-bottom-general ' + (configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n          <libs_ui-components-checkbox-single\n            [label]=\"configCheckBox.label ?? 'i18n_all'\"\n            [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n            [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n            [disable]=\"constHtmlDisable\"\n            (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n            (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n        </div>\n      }\n      @if (items() && items().length) {\n        <div class=\"w-full h-full relative flex\">\n          <div\n            LibsUiComponentsScrollOverlayDirective\n            class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n            @for (item of items(); track item()[fieldKey()]; let first = $first; let last = $last) {\n              <div\n                #itemRef\n                [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n                class=\"flex flex-col relative\">\n                @let constHtmlPadding = level() * (configTemplateGroup.isViewTree ? 8 : 16);\n                <div\n                  class=\"flex items-center py-[6px]\"\n                  [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                  [style.paddingLeft.px]=\"constHtmlPadding\"\n                  [style.paddingRight.px]=\"constHtmlPadding\"\n                  (click)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\">\n                  @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n                    <i\n                      class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                      [class.rotate-90]=\"item().expand\"\n                      (click)=\"handlerToggleExpand($event, item)\"></i>\n                  }\n                  <div\n                    class=\"flex\"\n                    [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                    [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n                    @if (!configTemplateGroup.isViewRadio) {\n                      <libs_ui-components-checkbox-single\n                        [avatarConfig]=\"item().avatarConfig\"\n                        [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                        [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                        [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                        [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                        [class.w-full]=\"\n                          !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                          !(\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          )\n                        \"\n                        [class.max-w-[calc(100%-24px)]]=\"\n                          (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                          (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                        \"\n                        [label]=\"item().fieldLabel\"\n                        [popover]=\"item().dataPopover\"\n                        [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                        [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                        [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                        [linkImage]=\"\n                          configTemplateGroup.getImage\n                            ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                            : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                        \"\n                        [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                        [classLabelInclude]=\"\n                          (configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ' : ' libs-ui-font-h6s ') +\n                          (configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree ? '' : ' text-uppercase ')\n                        \"\n                        [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                        [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                        [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                        (outChange)=\"handlerChangeChecked($event.checked, item, true)\"\n                        (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                        (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n                    }\n\n                    @if (configTemplateGroup.isViewRadio) {\n                      <libs_ui-components-radio-single\n                        [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                        [avatarConfig]=\"item().avatarConfig\"\n                        [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                        [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                        [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                        [class.w-full]=\"\n                          !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                          !(\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          )\n                        \"\n                        [class.max-w-[calc(100%-24px)]]=\"\n                          (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                          (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                        \"\n                        [label]=\"item().fieldLabel\"\n                        [popover]=\"item().dataPopover\"\n                        [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                        [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                        [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                        [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                        [linkImage]=\"\n                          configTemplateGroup.getImage\n                            ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                            : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                        \"\n                        [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '' : ' uppercase')\"\n                        [disable]=\"\n                          disable() ||\n                          (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                          configTemplateGroup.ignoreCheckboxGroup ||\n                          configTemplateGroup.singleSelectItem ||\n                          (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n                        \"\n                        [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                        (outChange)=\"handlerChangeChecked($event.active, item, true)\"\n                        (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                        (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n                    }\n\n                    @if (item().buttonInGroup; as buttonInGroup) {\n                      <libs_ui-components-buttons-button\n                        [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                        [label]=\"buttonInGroup.label || ' '\"\n                        [classIconLeft]=\"(buttonInGroup.classIconLeft || '') + ' flex mr-[8px] !text-[8px]'\"\n                        [classInclude]=\"buttonInGroup.classInclude\"\n                        [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5r'\"\n                        [disable]=\"buttonInGroup.disable || disable() || false\"\n                        (outClick)=\"handlerClickButtonGroup(buttonInGroup, item())\" />\n                    }\n                  </div>\n\n                  @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n                    <i\n                      class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                      [class.!ml-[8px]]=\"item().dataPopover\"\n                      [class.rotate-90]=\"item().expand\"\n                      (click)=\"handlerToggleExpand($event, item)\"></i>\n                  }\n                </div>\n                @if (item().expand && calculatorHeighItemSuccess()) {\n                  <libs_ui-components-list-templates_group-item\n                    [keySearch]=\"keySearch()\"\n                    [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n                    [parentItem]=\"item()\"\n                    [fieldKey]=\"fieldKey()\"\n                    [keysChecked]=\"keysChecked()\"\n                    [disable]=\"disable()\"\n                    [keysDisableItem]=\"keysDisableItem() || []\"\n                    [configTemplateGroup]=\"configTemplateGroup\"\n                    [config]=\"config()\"\n                    [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n                    (outChangeView)=\"handlerChangeView()\"\n                    (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                    (outChange)=\"handlerChangeItemChecked($event.item)\" />\n                }\n                @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n                  <div\n                    class=\"libs-ui-list-group-line\"\n                    [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"></div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div\n          class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata ? configTemplateGroup.classIncludeNodata : '' }}\"\n          [style.marginLeft.px]=\"\n            0\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : 2\n                : configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                : true\n          \"\n          [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n          [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n          @if (!keySearch() && !loading()) {\n            <div>{{ config()?.textNoData ?? 'i18n_no_data_yet' | translate }}</div>\n          }\n          @if (keySearch() && !loading()) {\n            <div>{{ config()?.textSearchNoData ?? 'i18n_no_result' | translate }}</div>\n          }\n        </div>\n      }\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -1784,33 +1809,36 @@ class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesCo
         }
         this.store().forEach((item) => {
             const dataStore = cloneDeep(item);
-            dataStore.update(store => { return { ...store, ref: item() }; });
-            const key = keysHidden.find(key => dataStore()[this.fieldKey()] === key);
+            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.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 => {
+                        dataStore.update((currentStore) => {
                             return { ...currentStore, dataTooltip: this.configTemplateRadio()?.getPopover?.(dataStore) };
                         });
                     }
-                    dataStore.update(currentStore => {
+                    dataStore.update((currentStore) => {
                         return {
                             ...currentStore,
                             classLabelInclude: this.configTemplateRadio()?.getClassItem?.(dataStore()),
-                            avatarConfig: this.configTemplateRadio()?.getAvatarConfig?.(dataStore())
+                            avatarConfig: this.configTemplateRadio()?.getAvatarConfig?.(dataStore()),
                         };
                     });
                     itemByKeySearch.push(dataStore);
                 }
                 return;
             }
-            const indexItemRemove = this.items().findIndex(item => item()[this.fieldKey()] === key);
+            const indexItemRemove = this.items().findIndex((item) => item()[this.fieldKey()] === key);
             if (indexItemRemove > -1) {
-                this.items.update(items => {
+                this.items.update((items) => {
                     items.splice(indexItemRemove, 1);
                     return items;
                 });
@@ -1818,7 +1846,7 @@ class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesCo
         });
         const callbackCheckScroll = (preStateHasScroll, currentHasScroll) => {
             this.scrollToItemSelected();
-            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && (this.isSearchOnline())) {
+            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && this.isSearchOnline()) {
                 this.callApiByService(false);
             }
         };
@@ -1834,7 +1862,7 @@ class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesCo
             this.checkViewPortScroll(callbackCheckScroll);
             return;
         }
-        this.items.update(items => [...(items || []), ...itemByKeySearch]);
+        this.items.update((items) => [...(items || []), ...itemByKeySearch]);
         this.config()?.sort?.(this.items());
         this.setHeightViewPort();
         this.loading.set(false);
@@ -1851,7 +1879,7 @@ class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesCo
             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) {
                 const offsetContainer = this.elementScroll()?.nativeElement?.offsetHeight;
                 const additionalOffset = ((offsetContainer ? offsetContainer - this.heightItem() : 0) / 2) * -1;
@@ -1866,7 +1894,7 @@ class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesCo
         this.handlerChange('radio', items[0]?.(), true, false);
     }
     emitKeySelectedDefaultIfExistItem(items) {
-        const item = items.find(store => store()[this.fieldKey()] === this.keySelected());
+        const item = items.find((store) => store()[this.fieldKey()] === this.keySelected());
         if (item) {
             this.handlerChange('radio', item(), true, false);
         }
@@ -1875,13 +1903,15 @@ class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesCo
         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        [class.h-full]=\"!heightViewPort()\"\n        [style.height]=\"heightViewPort() ? 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()]) {\n            <div #itemRef\n              [class]=\"'libs-ui-list-template-radio-item libs-ui-font-h5r 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              [class.!flex-row]=\"configTemplateRadio.rowSameLineRadio\">\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().popoverLabel|LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe\"\n                    [clickExactly]=\"clickExactly()\"\n                    [disableLabel]=\"disableLabel()\"\n                    [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateRadio.getDataComponentOutlet:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                    [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateRadio.getComponentOutlet:item():fieldKey():{valueIs0:0}) | async\"\n                    [zIndexLabel]=\"configTemplateRadio.zIndexPopover ?? 1200\"\n                    (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                    (outChange)=\"handlerChange('radio',item())\"\n                    (outClickLabel)=\"handlerChange('radio',item())\" />\n                }\n                @if (configTemplateRadio?.rows?.()) {\n                  <libs_ui-components-list-templates_rows class=\"w-full {{ (configTemplateRadio.classRowsWrapper || 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:6px 16px;position:relative}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }, { kind: "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"] }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "pipe", type: LibsUiPipesConvertSignalToObjectPipe, name: "LibsUiPipesConvertSignalToObjectPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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\n        #elementScroll\n        LibsUiComponentsScrollOverlayDirective\n        class=\"w-full\"\n        [class.h-full]=\"!heightViewPort()\"\n        [style.height]=\"heightViewPort() ? heightViewPort() + 'px' : '100%'\"\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        <virtual-scroller\n          #scroll\n          [parentScroll]=\"elementScroll\"\n          [items]=\"items()\"\n          class=\"h-full\">\n          @for (item of scroll.viewPortItems; track item()[fieldKey()]) {\n            <div\n              #itemRef\n              [class]=\"'libs-ui-list-template-radio-item libs-ui-font-h5r 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\n                class=\"flex flex-col w-full\"\n                [class.!flex-row]=\"configTemplateRadio.rowSameLineRadio\">\n                @if (item().fieldLabel) {\n                  <libs_ui-components-radio-single\n                    [label]=\"item().fieldLabel\"\n                    [avatarConfig]=\"item().avatarConfig\"\n                    [active]=\"keySelected() === item()[fieldKey()]\"\n                    [key]=\"item()[fieldKey()]\"\n                    [imgTypeIcon]=\"configTemplateRadio.hasAvatarGroupSocial\"\n                    [linkImage]=\"\n                      configTemplateRadio.getImage\n                        ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateRadio.getImageError ? configTemplateRadio.getImageError : configTemplateRadio.getImage) : item() | async)\n                        : item()[configTemplateRadio.fieldGetImage || '']\n                    \"\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().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe\"\n                    [clickExactly]=\"clickExactly()\"\n                    [disableLabel]=\"disableLabel()\"\n                    [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateRadio.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                    [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateRadio.getComponentOutlet : item() : fieldKey() : { valueIs0: 0 } | async\"\n                    [zIndexLabel]=\"configTemplateRadio.zIndexPopover ?? 1200\"\n                    (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                    (outChange)=\"handlerChange('radio', item())\"\n                    (outClickLabel)=\"handlerChange('radio', item())\" />\n                }\n                @if (configTemplateRadio?.rows?.()) {\n                  <libs_ui-components-list-templates_rows\n                    class=\"w-full {{ (configTemplateRadio.classRowsWrapper || 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:6px 16px;position:relative}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }, { kind: "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"] }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "pipe", type: LibsUiPipesConvertSignalToObjectPipe, name: "LibsUiPipesConvertSignalToObjectPipe" }], 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: [
                         NgTemplateOutlet,
-                        VirtualScrollerModule, AsyncPipe, TranslateModule,
+                        VirtualScrollerModule,
+                        AsyncPipe,
+                        TranslateModule,
                         LibsUiComponentsSpinnerComponent,
                         LibsUiComponentsScrollOverlayDirective,
                         LibsUiComponentsRadioSingleComponent,
@@ -1889,8 +1919,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LibsUiCheckSelectedByKeyPipe,
                         LibsUiComponentsListRowsComponent,
                         LibsUiPipesConvertObjectToSignalPipe,
-                        LibsUiPipesConvertSignalToObjectPipe
-                    ], 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        [class.h-full]=\"!heightViewPort()\"\n        [style.height]=\"heightViewPort() ? 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()]) {\n            <div #itemRef\n              [class]=\"'libs-ui-list-template-radio-item libs-ui-font-h5r 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              [class.!flex-row]=\"configTemplateRadio.rowSameLineRadio\">\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().popoverLabel|LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe\"\n                    [clickExactly]=\"clickExactly()\"\n                    [disableLabel]=\"disableLabel()\"\n                    [dataComponentOutlet]=\"(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateRadio.getDataComponentOutlet:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\"\n                    [componentOutlet]=\"(0 | LibsUiPipesCallFunctionInTemplatePipe:configTemplateRadio.getComponentOutlet:item():fieldKey():{valueIs0:0}) | async\"\n                    [zIndexLabel]=\"configTemplateRadio.zIndexPopover ?? 1200\"\n                    (outChangStageFlagMousePopover)='handlerChangStageFlagMouse($event)'\n                    (outChange)=\"handlerChange('radio',item())\"\n                    (outClickLabel)=\"handlerChange('radio',item())\" />\n                }\n                @if (configTemplateRadio?.rows?.()) {\n                  <libs_ui-components-list-templates_rows class=\"w-full {{ (configTemplateRadio.classRowsWrapper || 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:6px 16px;position:relative}\n"] }]
+                        LibsUiPipesConvertSignalToObjectPipe,
+                    ], template: "@if (configTemplateRadio(); as configTemplateRadio) {\n  <div class=\"relative h-full w-full\">\n    @if (items().length) {\n      <div\n        #elementScroll\n        LibsUiComponentsScrollOverlayDirective\n        class=\"w-full\"\n        [class.h-full]=\"!heightViewPort()\"\n        [style.height]=\"heightViewPort() ? heightViewPort() + 'px' : '100%'\"\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        <virtual-scroller\n          #scroll\n          [parentScroll]=\"elementScroll\"\n          [items]=\"items()\"\n          class=\"h-full\">\n          @for (item of scroll.viewPortItems; track item()[fieldKey()]) {\n            <div\n              #itemRef\n              [class]=\"'libs-ui-list-template-radio-item libs-ui-font-h5r 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\n                class=\"flex flex-col w-full\"\n                [class.!flex-row]=\"configTemplateRadio.rowSameLineRadio\">\n                @if (item().fieldLabel) {\n                  <libs_ui-components-radio-single\n                    [label]=\"item().fieldLabel\"\n                    [avatarConfig]=\"item().avatarConfig\"\n                    [active]=\"keySelected() === item()[fieldKey()]\"\n                    [key]=\"item()[fieldKey()]\"\n                    [imgTypeIcon]=\"configTemplateRadio.hasAvatarGroupSocial\"\n                    [linkImage]=\"\n                      configTemplateRadio.getImage\n                        ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateRadio.getImageError ? configTemplateRadio.getImageError : configTemplateRadio.getImage) : item() | async)\n                        : item()[configTemplateRadio.fieldGetImage || '']\n                    \"\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().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe\"\n                    [clickExactly]=\"clickExactly()\"\n                    [disableLabel]=\"disableLabel()\"\n                    [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateRadio.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                    [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateRadio.getComponentOutlet : item() : fieldKey() : { valueIs0: 0 } | async\"\n                    [zIndexLabel]=\"configTemplateRadio.zIndexPopover ?? 1200\"\n                    (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                    (outChange)=\"handlerChange('radio', item())\"\n                    (outClickLabel)=\"handlerChange('radio', item())\" />\n                }\n                @if (configTemplateRadio?.rows?.()) {\n                  <libs_ui-components-list-templates_rows\n                    class=\"w-full {{ (configTemplateRadio.classRowsWrapper || 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:6px 16px;position:relative}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -1912,17 +1942,17 @@ class LibsUiComponentsListTagComponent extends LibsUiComponentsListTemplatesComp
             e.stopPropagation();
             e.preventDefault();
         }
-        if (!item || (this.keysDisableItem() && this.keysDisableItem()?.some(key => key === item[this.fieldKey()]))) {
+        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.multiKeySelected.update((items) => [...(items || []), key]);
             this.emitMoSelectMultiKey(this.multiKeySelected() || []);
             return;
         }
-        this.multiKeySelected.update(items => {
+        this.multiKeySelected.update((items) => {
             items?.splice(indexOfKey, 1);
             return items;
         });
@@ -1935,7 +1965,7 @@ class LibsUiComponentsListTagComponent extends LibsUiComponentsListTemplatesComp
             return this.outSelectMultiKey.emit({ keys: [], mapKeys, isClickManual });
         }
         multiKeySelected.forEach((key) => {
-            const item = this.store().find(item => item()[this.fieldKey()] === key);
+            const item = this.store().find((item) => item()[this.fieldKey()] === key);
             mapKeys.push({ key, item, isClickManual });
         });
         this.outSelectMultiKey.emit({ keys: this.multiKeySelected() || [], mapKeys, isClickManual });
@@ -1964,33 +1994,33 @@ class LibsUiComponentsListTagComponent extends LibsUiComponentsListTemplatesComp
         }
         this.store().forEach((item) => {
             const dataStore = cloneDeep(item);
-            dataStore.update(currentStore => {
+            dataStore.update((currentStore) => {
                 return { ...currentStore, ref: item() };
             });
-            const key = keysHidden.find(key => dataStore()[this.fieldKey()] === key);
+            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()])) {
+                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 => {
+                    dataStore.update((currentStore) => {
                         return {
                             ...currentStore,
-                            classItem: item().classItem || this.configTemplateTag()?.getClassItem?.(dataStore())
+                            classItem: item().classItem || this.configTemplateTag()?.getClassItem?.(dataStore()),
                         };
                     });
                 }
                 return;
             }
-            const indexItemRemove = this.items().findIndex(item => item()[this.fieldKey()] === key);
+            const indexItemRemove = this.items().findIndex((item) => item()[this.fieldKey()] === key);
             if (indexItemRemove > -1) {
-                this.items.update(items => {
+                this.items.update((items) => {
                     items.splice(indexItemRemove, 1);
                     return items;
                 });
             }
         });
         const checkLoadItem = (preStateHasScroll, currentHasScroll) => {
-            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && (this.isSearchOnline())) {
+            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && this.isSearchOnline()) {
                 this.callApiByService(false);
             }
         };
@@ -2003,7 +2033,7 @@ class LibsUiComponentsListTagComponent extends LibsUiComponentsListTemplatesComp
             this.outLoading.emit(this.loading());
             return;
         }
-        this.items.update(items => [...(items || []), ...itemByKeySearch]);
+        this.items.update((items) => [...(items || []), ...itemByKeySearch]);
         this.config()?.sort?.(this.items());
         this.setHeightViewPort();
         this.checkViewPortScroll(checkLoadItem);
@@ -2014,16 +2044,11 @@ class LibsUiComponentsListTagComponent extends LibsUiComponentsListTemplatesComp
         return this.items().length;
     }
     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    (outScrollBottom)=\"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-[94px]]=\"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; as 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]=\"bullet().backgroundColor\"\n              [style.color]=\"bullet().color\"\n              (click)=\"handlerSelectItem($event,item())\">\n              <span [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          } @else {\n            @let constHtmlIsSelected = item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length;\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-[var(--libs-ui-color-light-2)]]=\"constHtmlIsSelected\"\n              [class.text-[var(--libs-ui-color-default)]]=\"constHtmlIsSelected\"\n              [class.bg-white]=\"!constHtmlIsSelected\"\n              [class.text-[#6a7383]]=\"!constHtmlIsSelected\"\n              [class.libs-ui-border-general]=\"!constHtmlIsSelected\">\n              @if (constHtmlIsSelected) {\n              <div class=\"mr-[8px] text-[12px] libs-ui-icon-check before:text-[var(--libs-ui-color-default)]\"></div>\n            }\n            <span class=\"libs-ui-font-h6r break-word\"\n              [innerHTML]=\"item().fieldLabel\"></span>\n        </div>\n      }\n    </div>\n  }\n  @if (!items() || !items().length) {\n    <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[4px] flex items-center justify-center w-full')\">\n      @if (!keySearch() && !loading()) {\n        <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: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsListTagComponent, isStandalone: true, selector: "libs_ui-components-list-templates_tag", usesInheritance: true, ngImport: i0, template: "@if (configTemplateTag(); as configTemplateTag) {\n  <div\n    class=\"w-full h-full relative\"\n    LibsUiComponentsScrollOverlayDirective\n    (outScrollBottom)=\"handlerScrollBottom()\">\n    <div\n      class=\"relative max-h-[150px] h-full {{ configTemplateTag.classIncludeContainer }}\"\n      [ngClass]=\"{ 'flex flex-wrap': !configTemplateTag.ignoreItemFlexWrap }\"\n      [class.min-h-[45px]]=\"!loading() && (!items() || !items().length)\"\n      [class.min-h-[94px]]=\"loading() && items()\">\n      @for (item of items(); track item()[fieldKey()]) {\n        <div\n          [class.libs-ui-disable]=\"loading() || disable()\"\n          [class.pointer-events-none]=\"loading() || disable()\"\n          [class]=\"item().classContainerItem\">\n          @if (item().bullet; as bullet) {\n            <div\n              [class]=\"item().classItem || 'rounded-[10px] px-[8px] py-[1px] mb-[8px] mr-[8px]'\"\n              [class.w-max]=\"configTemplateTag?.ignoreItemFlexWrap\"\n              [style.background-color]=\"bullet().backgroundColor\"\n              [style.color]=\"bullet().color\"\n              (click)=\"handlerSelectItem($event, item())\">\n              <span [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          } @else {\n            @let constHtmlIsSelected = item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected()?.length;\n            <div\n              (click)=\"handlerSelectItem($event, item())\"\n              [class]=\"item().classItem || 'rounded-[20px] mb-[8px] mr-[8px] py-[4px] px-[8px] flex items-center cursor-pointer'\"\n              [class.bg-[var(--libs-ui-color-light-2)]]=\"constHtmlIsSelected\"\n              [class.text-[var(--libs-ui-color-default)]]=\"constHtmlIsSelected\"\n              [class.bg-white]=\"!constHtmlIsSelected\"\n              [class.text-[#6a7383]]=\"!constHtmlIsSelected\"\n              [class.libs-ui-border-general]=\"!constHtmlIsSelected\">\n              @if (constHtmlIsSelected) {\n                <div class=\"mr-[8px] text-[12px] libs-ui-icon-check before:text-[var(--libs-ui-color-default)]\"></div>\n              }\n              <span\n                class=\"libs-ui-font-h6r break-word\"\n                [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          }\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] ' + (config()?.textNoDataClassInclude ?? 'py-[4px] flex items-center justify-center w-full')\">\n          @if (!keySearch() && !loading()) {\n            <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: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.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    (outScrollBottom)=\"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-[94px]]=\"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; as 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]=\"bullet().backgroundColor\"\n              [style.color]=\"bullet().color\"\n              (click)=\"handlerSelectItem($event,item())\">\n              <span [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          } @else {\n            @let constHtmlIsSelected = item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length;\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-[var(--libs-ui-color-light-2)]]=\"constHtmlIsSelected\"\n              [class.text-[var(--libs-ui-color-default)]]=\"constHtmlIsSelected\"\n              [class.bg-white]=\"!constHtmlIsSelected\"\n              [class.text-[#6a7383]]=\"!constHtmlIsSelected\"\n              [class.libs-ui-border-general]=\"!constHtmlIsSelected\">\n              @if (constHtmlIsSelected) {\n              <div class=\"mr-[8px] text-[12px] libs-ui-icon-check before:text-[var(--libs-ui-color-default)]\"></div>\n            }\n            <span class=\"libs-ui-font-h6r break-word\"\n              [innerHTML]=\"item().fieldLabel\"></span>\n        </div>\n      }\n    </div>\n  }\n  @if (!items() || !items().length) {\n    <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] '+ (config()?.textNoDataClassInclude ?? 'py-[4px] flex items-center justify-center w-full')\">\n      @if (!keySearch() && !loading()) {\n        <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" }]
+            args: [{ selector: 'libs_ui-components-list-templates_tag', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [VirtualScrollerModule, NgTemplateOutlet, TranslateModule, NgClass, LibsUiComponentsSpinnerComponent, LibsUiComponentsScrollOverlayDirective, LibsUiCheckSelectedByKeyPipe], template: "@if (configTemplateTag(); as configTemplateTag) {\n  <div\n    class=\"w-full h-full relative\"\n    LibsUiComponentsScrollOverlayDirective\n    (outScrollBottom)=\"handlerScrollBottom()\">\n    <div\n      class=\"relative max-h-[150px] h-full {{ configTemplateTag.classIncludeContainer }}\"\n      [ngClass]=\"{ 'flex flex-wrap': !configTemplateTag.ignoreItemFlexWrap }\"\n      [class.min-h-[45px]]=\"!loading() && (!items() || !items().length)\"\n      [class.min-h-[94px]]=\"loading() && items()\">\n      @for (item of items(); track item()[fieldKey()]) {\n        <div\n          [class.libs-ui-disable]=\"loading() || disable()\"\n          [class.pointer-events-none]=\"loading() || disable()\"\n          [class]=\"item().classContainerItem\">\n          @if (item().bullet; as bullet) {\n            <div\n              [class]=\"item().classItem || 'rounded-[10px] px-[8px] py-[1px] mb-[8px] mr-[8px]'\"\n              [class.w-max]=\"configTemplateTag?.ignoreItemFlexWrap\"\n              [style.background-color]=\"bullet().backgroundColor\"\n              [style.color]=\"bullet().color\"\n              (click)=\"handlerSelectItem($event, item())\">\n              <span [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          } @else {\n            @let constHtmlIsSelected = item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected()?.length;\n            <div\n              (click)=\"handlerSelectItem($event, item())\"\n              [class]=\"item().classItem || 'rounded-[20px] mb-[8px] mr-[8px] py-[4px] px-[8px] flex items-center cursor-pointer'\"\n              [class.bg-[var(--libs-ui-color-light-2)]]=\"constHtmlIsSelected\"\n              [class.text-[var(--libs-ui-color-default)]]=\"constHtmlIsSelected\"\n              [class.bg-white]=\"!constHtmlIsSelected\"\n              [class.text-[#6a7383]]=\"!constHtmlIsSelected\"\n              [class.libs-ui-border-general]=\"!constHtmlIsSelected\">\n              @if (constHtmlIsSelected) {\n                <div class=\"mr-[8px] text-[12px] libs-ui-icon-check before:text-[var(--libs-ui-color-default)]\"></div>\n              }\n              <span\n                class=\"libs-ui-font-h6r break-word\"\n                [innerHTML]=\"item().fieldLabel\"></span>\n            </div>\n          }\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] ' + (config()?.textNoDataClassInclude ?? 'py-[4px] flex items-center justify-center w-full')\">\n          @if (!keySearch() && !loading()) {\n            <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 */
@@ -2083,12 +2108,12 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         if (typeof e === 'string' && e !== 'click') {
             return;
         }
-        if (!item || (this.keysDisableItem() && this.keysDisableItem()?.some(key => key === item[this.fieldKey()]))) {
+        if (!item || (this.keysDisableItem() && this.keysDisableItem()?.some((key) => key === item[this.fieldKey()]))) {
             return;
         }
         if (action) {
             action(item.ref);
-            this.items().forEach(item => {
+            this.items().forEach((item) => {
                 this.buildValueByConfig(item, this.configTemplateText());
             });
             return;
@@ -2100,7 +2125,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
                 fieldSort: item[this.fieldKey()],
                 mode,
                 modeNumber: mode === 'asc' ? 1 : 2,
-                reset: () => 0
+                reset: () => 0,
             };
             this.configTemplateText()?.itemSort?.set(newSort);
             this.outSortSingleSelect.emit(this.configTemplateText()?.itemSort?.() || newSort);
@@ -2121,15 +2146,18 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         }
         this.store().forEach((item) => {
             const dataStore = cloneDeep(item);
-            const key = keysHidden.find(key => dataStore()[this.fieldKey()] === key);
-            dataStore.update(store => { return { ...store, ref: item() }; });
+            const key = keysHidden.find((key) => dataStore()[this.fieldKey()] === key);
+            dataStore.update((store) => {
+                return { ...store, ref: item() };
+            });
             if (key === undefined) {
                 const text = deleteUnicode(this.buildValueByConfig(dataStore, this.configTemplateText())).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(store => {
+                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((store) => {
                         return {
                             ...store,
                             hrefButton: this.configTemplateText()?.getHrefButton?.(store),
@@ -2146,9 +2174,9 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
                 }
                 return;
             }
-            const indexItemRemove = this.items().findIndex(item => item()[this.fieldKey()] === key);
+            const indexItemRemove = this.items().findIndex((item) => item()[this.fieldKey()] === key);
             if (indexItemRemove > -1) {
-                this.items.update(items => {
+                this.items.update((items) => {
                     items.splice(indexItemRemove, 1);
                     return items;
                 });
@@ -2156,7 +2184,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         });
         const callbackCheckScroll = (preStateHasScroll, currentHasScroll) => {
             this.scrollToItemSelected();
-            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && (this.isSearchOnline())) {
+            if (this.keysHiddenItem()?.length && preStateHasScroll && !currentHasScroll && this.isSearchOnline()) {
                 this.callApiByService(false);
             }
         };
@@ -2174,7 +2202,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
             return;
         }
         const itemsBySearch = convertObjectToSignal(itemByKeySearch)();
-        this.items.update(items => [...items, ...itemsBySearch]);
+        this.items.update((items) => [...items, ...itemsBySearch]);
         this.config()?.sort?.(this.items());
         this.setHeightViewPort();
         this.loading.set(false);
@@ -2191,7 +2219,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) {
                 const offsetContainer = this.elementScroll()?.nativeElement?.offsetHeight;
                 const additionalOffset = ((offsetContainer ? offsetContainer - this.heightItem() : 0) / 2) * -1;
@@ -2206,7 +2234,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         this.handlerSelectItem('click', items[0](), undefined, true, false);
     }
     emitKeySelectedDefaultIfExistItem(items) {
-        const item = items.find(store => store()[this.fieldKey()] === this.keySelected());
+        const item = items.find((store) => store()[this.fieldKey()] === this.keySelected());
         if (item) {
             this.handlerSelectItem('click', item(), undefined, true, false);
         }
@@ -2219,13 +2247,17 @@ 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]=\"isShowHeightCalculate() ? heightViewPort()+'px':'100%'\"\n        class=\"w-full\"\n        [class.h-full]=\"!isShowHeightCalculate()\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller #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 libs-ui-font-h5r flex '+(item().classItem || '')\"\n          [class.items-center]=\"!item().itemAlignStart\"\n          [class.items-start]=\"item().itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly()  && !item().hoverDanger\"\n          [class.libs-ui-bg-list-active]=\"!clickExactly() && 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|LibsUiPipesConvertObjectToSignalPipe)?.(); as bullet) {\n            <span class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.backgroundColor]=\"bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event,item())\">\n            </span>\n          }\n          @if ((item().avatarConfig|LibsUiPipesConvertObjectToSignalPipe)?.(); 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              [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\"\n              [textAvatar]=\"avatarConfig.textAvatar\"/>\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 | LibsUiPipesConvertObjectToSignalPipe)?.(); 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 ?? false\"\n                [classIconLeft]=\"(buttonLeft.classIconLeft ? (buttonLeft.classIconLeft+' flex mr-[8px] text-[12px]') : '')\"\n                [classInclude]=\"(buttonLeft.classInclude??'')+' w-full'\"\n                [classLabel]=\"buttonLeft.classLabel ?? 'libs-ui-font-h4r'\"\n                [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n                [styleIconLeft]=\"buttonLeft.styleIconLeft | LibsUiPipesConvertSignalToObjectPipe\"\n                [styleButton]=\"buttonLeft.styleButton | LibsUiPipesConvertSignalToObjectPipe\"\n                (outClick)=\"handlerSelectItem($event,item())\" />\n            </ng-template>\n          }\n          @if ((item().switchConfig|LibsUiPipesConvertObjectToSignalPipe)?.(); as switchConfig) {\n            <libs_ui-components-switch [active]=\"switchConfig.active\"\n              (outSwitch)=\"handlerSelectItem('click',item())\" />\n          }\n          @if (item().classIconLeft) {\n            <i [class]=\"item().classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n          }\n          @if (!item().ignoreShowFieldLabel && !configTemplateText.rows) {\n            @if (((item().popoverLabel|LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe) ?? {type:'text'}; as popoverLabel) {\n              <libs_ui-components-popover [type]=\"popoverLabel.type || 'text'\"\n                [elementRefCustom]=\"popoverLabel.type === 'text'? undefined:itemRef\"\n                [ignoreShowPopover]=\"popoverLabel.ignoreShowPopover\"\n                [config]=\"popoverLabel.config ?? configTemplateText.configLabelPopover?.() ?? {}\"\n                [innerHtml]=\"item().fieldLabel\"\n                [classInclude]=\"item().classInclude\"\n                (outEvent)=\"handlerSelectItem($event,item())\" />\n            }\n          }\n          @if ((item().fieldPopover|LibsUiPipesConvertObjectToSignalPipe)?.(); as popover) {\n            <libs_ui-components-popover class=\"{{ popover.classInclude }}\"\n              [config]=\"popover.config\">\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              } @else {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows\n              class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"keySelected()\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event,$event.item,$event.action)\" />\n          }\n          @if (configTemplateText.getComponentOutlet) {\n            <ng-container\n              *ngComponentOutlet=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldKey():undefined:true | LibsUiPipesCallFunctionInTemplatePipe:configTemplateText.getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateText.getDataComponentOutlet:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\" />\n          }\n\n          @if ((keySelected() === item()[fieldKey()] || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length)) && !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;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226FF5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i1$1.VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "component", type: LibsUiComponentsButtonsSortArrowComponent, selector: "libs_ui-components-buttons-sort-arrow", inputs: ["size", "mode", "fieldSort", "disable", "ignorePopoverContent", "popoverContentAsc", "popoverContentDesc", "defaultMode", "zIndex"], outputs: ["modeChange", "outChange"] }, { kind: "directive", type: LibsUiComponentsListHighlightKeySearchDirective, selector: "[LibsUiComponentsListHighlightKeySearchDirective]", inputs: ["isHighlight", "keySearch", "classHighlight"] }, { kind: "component", type: LibsUiComponentsListRowsComponent, selector: "libs_ui-components-list-templates_rows", inputs: ["configTemplate", "item", "keySelected", "fieldKey", "zIndex"], outputs: ["outChangStageFlagMousePopover", "outEvent"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "pipe", type: LibsUiPipesConvertSignalToObjectPipe, name: "LibsUiPipesConvertSignalToObjectPipe" }], 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\n        #elementScroll\n        [style.height]=\"isShowHeightCalculate() ? heightViewPort() + 'px' : '100%'\"\n        class=\"w-full\"\n        [class.h-full]=\"!isShowHeightCalculate()\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller\n            #scroll\n            [parentScroll]=\"elementScroll\"\n            [items]=\"items()\"\n            class=\"h-full\">\n            <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: scroll.viewPortItems }\" />\n          </virtual-scroller>\n        }\n        @if (configTemplateText.notUseVirtualScroll) {\n          <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: items() }\" />\n        }\n      </div>\n    }\n    @if ((!items() || !items().length) && (!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\n    #listRef\n    let-itemsView=\"itemsView\">\n    @for (item of itemsView; track item()[fieldKey()]) {\n      <div\n        #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div\n          LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item libs-ui-font-h5r flex ' + (item().classItem || '')\"\n          [class.items-center]=\"!item().itemAlignStart\"\n          [class.items-start]=\"item().itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly() && !item().hoverDanger\"\n          [class.libs-ui-bg-list-active]=\"!clickExactly() && 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 | LibsUiPipesConvertObjectToSignalPipe)?.(); as bullet) {\n            <span\n              class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.backgroundColor]=\"bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event, item())\"></span>\n          }\n          @if ((item().avatarConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as avatarConfig) {\n            <libs_ui-components-avatar\n              [typeShape]=\"avatarConfig.typeShape ?? 'circle'\"\n              [classInclude]=\"avatarConfig.classInclude\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\"\n              [size]=\"avatarConfig.size ?? 32\"\n              [linkAvatar]=\"avatarConfig.linkAvatar\"\n              [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n              [idGenColor]=\"avatarConfig.idGenColor\"\n              [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\"\n              [textAvatar]=\"avatarConfig.textAvatar\" />\n          }\n          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"\n                configTemplateText.getImage\n                  ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage) : item() | async)\n                  : item()[configTemplateText.fieldGetImage || '']\n              \"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              [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 | LibsUiPipesConvertObjectToSignalPipe)?.(); as buttonLeft) {\n            @if (item().hrefButton) {\n              <a\n                [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n                [href]=\"item().hrefButton\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </a>\n            }\n            @if (!item().hrefButton) {\n              <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </div>\n            }\n            <ng-template #buttonLeftTemplate>\n              <libs_ui-components-buttons-button\n                class=\"w-full\"\n                [type]=\"buttonLeft.type ?? 'button-link-primary'\"\n                [label]=\"buttonLeft.label ?? ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable ?? false\"\n                [classIconLeft]=\"buttonLeft.classIconLeft ? buttonLeft.classIconLeft + ' flex mr-[8px] text-[12px]' : ''\"\n                [classInclude]=\"(buttonLeft.classInclude ?? '') + ' w-full'\"\n                [classLabel]=\"buttonLeft.classLabel ?? 'libs-ui-font-h4r'\"\n                [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n                [styleIconLeft]=\"buttonLeft.styleIconLeft | LibsUiPipesConvertSignalToObjectPipe\"\n                [styleButton]=\"buttonLeft.styleButton | LibsUiPipesConvertSignalToObjectPipe\"\n                (outClick)=\"handlerSelectItem($event, item())\" />\n            </ng-template>\n          }\n          @if ((item().switchConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as switchConfig) {\n            <libs_ui-components-switch\n              [active]=\"switchConfig.active\"\n              (outSwitch)=\"handlerSelectItem('click', item())\" />\n          }\n          @if (item().classIconLeft) {\n            <i [class]=\"item().classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n          }\n          @if (!item().ignoreShowFieldLabel && !configTemplateText.rows) {\n            @if (((item().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe) ?? { type: 'text' }; as popoverLabel) {\n              <libs_ui-components-popover\n                [type]=\"popoverLabel.type || 'text'\"\n                [elementRefCustom]=\"popoverLabel.type === 'text' ? undefined : itemRef\"\n                [ignoreShowPopover]=\"popoverLabel.ignoreShowPopover\"\n                [config]=\"popoverLabel.config ?? configTemplateText.configLabelPopover?.() ?? {}\"\n                [innerHtml]=\"item().fieldLabel\"\n                [classInclude]=\"item().classInclude\"\n                (outEvent)=\"handlerSelectItem($event, item())\" />\n            }\n          }\n          @if ((item().fieldPopover | LibsUiPipesConvertObjectToSignalPipe)?.(); as popover) {\n            <libs_ui-components-popover\n              class=\"{{ popover.classInclude }}\"\n              [config]=\"popover.config\">\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              } @else {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows\n              class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"keySelected()\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event, $event.item, $event.action)\" />\n          }\n          @if (configTemplateText.getComponentOutlet) {\n            <ng-container\n              *ngComponentOutlet=\"\n                item() | LibsUiPipesGetValueOfObjectPipe: fieldKey() : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getComponentOutlet : item() | async;\n                inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\n              \" />\n          }\n\n          @if ((keySelected() === item()[fieldKey()] || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected()?.length)) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check ' + (configTemplateText.classIncludeIconSelected || 'right-[12px]')\"></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\n                [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;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i1$1.VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "component", type: LibsUiComponentsButtonsSortArrowComponent, selector: "libs_ui-components-buttons-sort-arrow", inputs: ["size", "mode", "fieldSort", "disable", "ignorePopoverContent", "popoverContentAsc", "popoverContentDesc", "defaultMode", "zIndex"], outputs: ["modeChange", "outChange"] }, { kind: "directive", type: LibsUiComponentsListHighlightKeySearchDirective, selector: "[LibsUiComponentsListHighlightKeySearchDirective]", inputs: ["isHighlight", "keySearch", "classHighlight"] }, { kind: "component", type: LibsUiComponentsListRowsComponent, selector: "libs_ui-components-list-templates_rows", inputs: ["configTemplate", "item", "keySelected", "fieldKey", "zIndex"], outputs: ["outChangStageFlagMousePopover", "outEvent"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "pipe", type: LibsUiPipesConvertSignalToObjectPipe, name: "LibsUiPipesConvertSignalToObjectPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-list-templates_text', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        VirtualScrollerModule, NgTemplateOutlet, TranslateModule,
-                        NgClass, AsyncPipe, NgComponentOutlet,
+                        VirtualScrollerModule,
+                        NgTemplateOutlet,
+                        TranslateModule,
+                        NgClass,
+                        AsyncPipe,
+                        NgComponentOutlet,
                         LibsUiComponentsSpinnerComponent,
                         LibsUiComponentsAvatarComponent,
                         LibsUiComponentsButtonsButtonComponent,
@@ -2239,8 +2271,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LibsUiPipesCallFunctionInTemplatePipe,
                         LibsUiPipesGetValueOfObjectPipe,
                         LibsUiPipesConvertObjectToSignalPipe,
-                        LibsUiPipesConvertSignalToObjectPipe
-                    ], template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <div #elementScroll\n        [style.height]=\"isShowHeightCalculate() ? heightViewPort()+'px':'100%'\"\n        class=\"w-full\"\n        [class.h-full]=\"!isShowHeightCalculate()\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller #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 libs-ui-font-h5r flex '+(item().classItem || '')\"\n          [class.items-center]=\"!item().itemAlignStart\"\n          [class.items-start]=\"item().itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly()  && !item().hoverDanger\"\n          [class.libs-ui-bg-list-active]=\"!clickExactly() && 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|LibsUiPipesConvertObjectToSignalPipe)?.(); as bullet) {\n            <span class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.backgroundColor]=\"bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event,item())\">\n            </span>\n          }\n          @if ((item().avatarConfig|LibsUiPipesConvertObjectToSignalPipe)?.(); 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              [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\"\n              [textAvatar]=\"avatarConfig.textAvatar\"/>\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 | LibsUiPipesConvertObjectToSignalPipe)?.(); 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 ?? false\"\n                [classIconLeft]=\"(buttonLeft.classIconLeft ? (buttonLeft.classIconLeft+' flex mr-[8px] text-[12px]') : '')\"\n                [classInclude]=\"(buttonLeft.classInclude??'')+' w-full'\"\n                [classLabel]=\"buttonLeft.classLabel ?? 'libs-ui-font-h4r'\"\n                [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n                [styleIconLeft]=\"buttonLeft.styleIconLeft | LibsUiPipesConvertSignalToObjectPipe\"\n                [styleButton]=\"buttonLeft.styleButton | LibsUiPipesConvertSignalToObjectPipe\"\n                (outClick)=\"handlerSelectItem($event,item())\" />\n            </ng-template>\n          }\n          @if ((item().switchConfig|LibsUiPipesConvertObjectToSignalPipe)?.(); as switchConfig) {\n            <libs_ui-components-switch [active]=\"switchConfig.active\"\n              (outSwitch)=\"handlerSelectItem('click',item())\" />\n          }\n          @if (item().classIconLeft) {\n            <i [class]=\"item().classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n          }\n          @if (!item().ignoreShowFieldLabel && !configTemplateText.rows) {\n            @if (((item().popoverLabel|LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe) ?? {type:'text'}; as popoverLabel) {\n              <libs_ui-components-popover [type]=\"popoverLabel.type || 'text'\"\n                [elementRefCustom]=\"popoverLabel.type === 'text'? undefined:itemRef\"\n                [ignoreShowPopover]=\"popoverLabel.ignoreShowPopover\"\n                [config]=\"popoverLabel.config ?? configTemplateText.configLabelPopover?.() ?? {}\"\n                [innerHtml]=\"item().fieldLabel\"\n                [classInclude]=\"item().classInclude\"\n                (outEvent)=\"handlerSelectItem($event,item())\" />\n            }\n          }\n          @if ((item().fieldPopover|LibsUiPipesConvertObjectToSignalPipe)?.(); as popover) {\n            <libs_ui-components-popover class=\"{{ popover.classInclude }}\"\n              [config]=\"popover.config\">\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              } @else {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows\n              class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"keySelected()\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event,$event.item,$event.action)\" />\n          }\n          @if (configTemplateText.getComponentOutlet) {\n            <ng-container\n              *ngComponentOutlet=\"(item()|LibsUiPipesGetValueOfObjectPipe:fieldKey():undefined:true | LibsUiPipesCallFunctionInTemplatePipe:configTemplateText.getComponentOutlet:item()) | async; inputs:(undefined | LibsUiPipesCallFunctionInTemplatePipe:configTemplateText.getDataComponentOutlet:item():fieldKey():{valueIsEmpty:{item:item()}}) | async\" />\n          }\n\n          @if ((keySelected() === item()[fieldKey()] || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe:multiKeySelected():multiKeySelected()?.length)) && !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;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"] }]
+                        LibsUiPipesConvertSignalToObjectPipe,
+                    ], template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <div\n        #elementScroll\n        [style.height]=\"isShowHeightCalculate() ? heightViewPort() + 'px' : '100%'\"\n        class=\"w-full\"\n        [class.h-full]=\"!isShowHeightCalculate()\"\n        LibsUiComponentsScrollOverlayDirective\n        (outScrollBottom)=\"handlerScrollBottom()\">\n        @if (!configTemplateText.notUseVirtualScroll) {\n          <virtual-scroller\n            #scroll\n            [parentScroll]=\"elementScroll\"\n            [items]=\"items()\"\n            class=\"h-full\">\n            <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: scroll.viewPortItems }\" />\n          </virtual-scroller>\n        }\n        @if (configTemplateText.notUseVirtualScroll) {\n          <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: items() }\" />\n        }\n      </div>\n    }\n    @if ((!items() || !items().length) && (!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\n    #listRef\n    let-itemsView=\"itemsView\">\n    @for (item of itemsView; track item()[fieldKey()]) {\n      <div\n        #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div\n          LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item libs-ui-font-h5r flex ' + (item().classItem || '')\"\n          [class.items-center]=\"!item().itemAlignStart\"\n          [class.items-start]=\"item().itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly() && !item().hoverDanger\"\n          [class.libs-ui-bg-list-active]=\"!clickExactly() && 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 | LibsUiPipesConvertObjectToSignalPipe)?.(); as bullet) {\n            <span\n              class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n              [style.backgroundColor]=\"bullet.backgroundColor\"\n              (click)=\"handlerSelectItem($event, item())\"></span>\n          }\n          @if ((item().avatarConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as avatarConfig) {\n            <libs_ui-components-avatar\n              [typeShape]=\"avatarConfig.typeShape ?? 'circle'\"\n              [classInclude]=\"avatarConfig.classInclude\"\n              [classImageInclude]=\"avatarConfig.classImageInclude\"\n              [size]=\"avatarConfig.size ?? 32\"\n              [linkAvatar]=\"avatarConfig.linkAvatar\"\n              [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n              [idGenColor]=\"avatarConfig.idGenColor\"\n              [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\"\n              [textAvatar]=\"avatarConfig.textAvatar\" />\n          }\n          @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n            <img\n              [src]=\"\n                configTemplateText.getImage\n                  ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage) : item() | async)\n                  : item()[configTemplateText.fieldGetImage || '']\n              \"\n              [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n              [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 | LibsUiPipesConvertObjectToSignalPipe)?.(); as buttonLeft) {\n            @if (item().hrefButton) {\n              <a\n                [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n                [href]=\"item().hrefButton\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </a>\n            }\n            @if (!item().hrefButton) {\n              <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n                <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n              </div>\n            }\n            <ng-template #buttonLeftTemplate>\n              <libs_ui-components-buttons-button\n                class=\"w-full\"\n                [type]=\"buttonLeft.type ?? 'button-link-primary'\"\n                [label]=\"buttonLeft.label ?? ' '\"\n                [zIndex]=\"buttonLeft.zIndex\"\n                [disable]=\"buttonLeft.disable ?? false\"\n                [classIconLeft]=\"buttonLeft.classIconLeft ? buttonLeft.classIconLeft + ' flex mr-[8px] text-[12px]' : ''\"\n                [classInclude]=\"(buttonLeft.classInclude ?? '') + ' w-full'\"\n                [classLabel]=\"buttonLeft.classLabel ?? 'libs-ui-font-h4r'\"\n                [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n                [styleIconLeft]=\"buttonLeft.styleIconLeft | LibsUiPipesConvertSignalToObjectPipe\"\n                [styleButton]=\"buttonLeft.styleButton | LibsUiPipesConvertSignalToObjectPipe\"\n                (outClick)=\"handlerSelectItem($event, item())\" />\n            </ng-template>\n          }\n          @if ((item().switchConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as switchConfig) {\n            <libs_ui-components-switch\n              [active]=\"switchConfig.active\"\n              (outSwitch)=\"handlerSelectItem('click', item())\" />\n          }\n          @if (item().classIconLeft) {\n            <i [class]=\"item().classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n          }\n          @if (!item().ignoreShowFieldLabel && !configTemplateText.rows) {\n            @if (((item().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe) ?? { type: 'text' }; as popoverLabel) {\n              <libs_ui-components-popover\n                [type]=\"popoverLabel.type || 'text'\"\n                [elementRefCustom]=\"popoverLabel.type === 'text' ? undefined : itemRef\"\n                [ignoreShowPopover]=\"popoverLabel.ignoreShowPopover\"\n                [config]=\"popoverLabel.config ?? configTemplateText.configLabelPopover?.() ?? {}\"\n                [innerHtml]=\"item().fieldLabel\"\n                [classInclude]=\"item().classInclude\"\n                (outEvent)=\"handlerSelectItem($event, item())\" />\n            }\n          }\n          @if ((item().fieldPopover | LibsUiPipesConvertObjectToSignalPipe)?.(); as popover) {\n            <libs_ui-components-popover\n              class=\"{{ popover.classInclude }}\"\n              [config]=\"popover.config\">\n              @if (popover.dataView) {\n                <div [innerHtml]=\"popover.dataView | translate\"></div>\n              } @else {\n                <i class=\"libs-ui-icon-tooltip-outline\"></i>\n              }\n            </libs_ui-components-popover>\n          }\n          @if (configTemplateText?.rows) {\n            <libs_ui-components-list-templates_rows\n              class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n              [item]=\"item()\"\n              [fieldKey]=\"fieldKey()\"\n              [keySelected]=\"keySelected()\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event, $event.item, $event.action)\" />\n          }\n          @if (configTemplateText.getComponentOutlet) {\n            <ng-container\n              *ngComponentOutlet=\"\n                item() | LibsUiPipesGetValueOfObjectPipe: fieldKey() : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getComponentOutlet : item() | async;\n                inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\n              \" />\n          }\n\n          @if ((keySelected() === item()[fieldKey()] || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected()?.length)) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check ' + (configTemplateText.classIncludeIconSelected || 'right-[12px]')\"></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\n                [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;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) => {
@@ -2285,7 +2317,7 @@ const initConfig = (config) => {
                 return ' ';
             }
             return item.label || item.name || ' ';
-        }
+        },
     };
     switch (config.type) {
         case 'checkbox':
@@ -2331,13 +2363,13 @@ class LibsUiComponentsListComponent {
             fieldKey: 'id',
             getValue: (item) => {
                 return item.label || item.name;
-            }
-        })
+            },
+        }),
     });
     groupMultiKeySelected = signal([]);
     functionControlInputSearch = signal(undefined);
     // #region INPUT
-    hiddenInputSearch = input(false, { transform: value => value ?? false });
+    hiddenInputSearch = input(false, { transform: (value) => value ?? false });
     dropdownTabKeyActive = input();
     keySearch = input();
     paddingLeftItem = input();
@@ -2347,14 +2379,14 @@ class LibsUiComponentsListComponent {
     disable = input();
     disableLabel = input();
     labelConfig = input();
-    searchConfig = input({}, { transform: value => value || {} });
+    searchConfig = input({}, { transform: (value) => value || {} });
     searchPadding = input();
     dividerClassInclude = input();
     hasDivider = input(true);
     buttonsOther = input(undefined);
     hasButtonUnSelectOption = input();
     clickExactly = input();
-    backgroundListCustom = input('bg-[#ffffff]', { transform: value => value ?? 'bg-[#ffffff]' });
+    backgroundListCustom = input('bg-[#ffffff]', { transform: (value) => value ?? 'bg-[#ffffff]' });
     maxItemShow = input();
     keySelected = input();
     multiKeySelected = input(undefined); // lưu ý khi sử dụng listview
@@ -2455,14 +2487,7 @@ class LibsUiComponentsListComponent {
         });
     }
     ngOnInit() {
-        this.outFunctionsControl.emit({
-            checkIsValid: this.checkIsValid.bind(this),
-            refresh: this.refresh.bind(this),
-            resetKeySelected: this.handlerRemoveKeySelected.bind(this),
-            getRectListView: async () => this.listViewElementRef()?.nativeElement.getBoundingClientRect(),
-            removeItems: async (keys) => this.onRemoveItems.next(keys),
-            updateData: async (data) => this.onUpdateData.next(data)
-        });
+        this.outFunctionsControl.emit(this.FunctionsControl);
         if (this.keySearch()) {
             this.keySearchStore.set(this.keySearch());
         }
@@ -2473,7 +2498,9 @@ class LibsUiComponentsListComponent {
         initConfig(this.configData());
         const compClass = getComponentByType(this.configData().type);
         this.componentRef = this.dynamicComponentService.resolveComponentFactory(compClass);
-        timer(0).pipe(takeUntil$1(this.onDestroy)).subscribe(() => {
+        timer(0)
+            .pipe(takeUntil$1(this.onDestroy))
+            .subscribe(() => {
             this.dynamicComponentService.addToElement(this.componentRef, this.contentElementRef()?.nativeElement);
         });
         this.componentRef.setInput('onSetHiddenItemByKey', this.onSetHiddenItemByKey);
@@ -2514,7 +2541,7 @@ class LibsUiComponentsListComponent {
         this.componentRef.setInput('templateRefSearchNoData', this.templateRefSearchNoData());
         let keySearch = '';
         const instance = this.componentRef.instance;
-        instance.outChangeView.subscribe(data => {
+        instance.outChangeView.subscribe((data) => {
             this.outChangeView.emit(data);
             if (this.skipFocusInputWhenKeySearchStoreUndefined() && isNil(this.keySearchStore())) {
                 return;
@@ -2524,7 +2551,7 @@ class LibsUiComponentsListComponent {
                 this.functionControlInputSearch()?.focus();
             }
         });
-        instance.outSelectKey.subscribe(data => {
+        instance.outSelectKey.subscribe((data) => {
             this.disableButtonUnSelectOption.set(false);
             this.outSelectKey.emit(data);
             this.checkIsValid();
@@ -2540,7 +2567,7 @@ class LibsUiComponentsListComponent {
             this.outLoadItemsComplete.emit(event);
         });
         if (this.config() && this.config()?.configTemplateText && this.config()?.configTemplateText?.()?.actionSort) {
-            instance.outSortSingleSelect.subscribe(itemSort => {
+            instance.outSortSingleSelect.subscribe((itemSort) => {
                 const config = this.config();
                 if (config && config.configTemplateText && config.configTemplateText()?.actionSort) {
                     config.configTemplateText()?.itemSort?.set(itemSort);
@@ -2555,7 +2582,7 @@ class LibsUiComponentsListComponent {
         if (type === 'text' || type === 'radio') {
             return;
         }
-        instance.outSelectMultiKey.subscribe(data => {
+        instance.outSelectMultiKey.subscribe((data) => {
             this.disableButtonUnSelectOption.set(false);
             if (type === 'group') {
                 this.groupMultiKeySelected.set(data.keys);
@@ -2565,6 +2592,16 @@ class LibsUiComponentsListComponent {
         });
     }
     /* FUNCTIONS */
+    get FunctionsControl() {
+        return {
+            checkIsValid: this.checkIsValid.bind(this),
+            refresh: this.refresh.bind(this),
+            resetKeySelected: this.handlerRemoveKeySelected.bind(this),
+            getRectListView: async () => this.listViewElementRef()?.nativeElement.getBoundingClientRect(),
+            removeItems: async (keys) => this.onRemoveItems.next(keys),
+            updateData: async (data) => this.onUpdateData.next(data),
+        };
+    }
     handlerSearch(keySearch) {
         this.keySearchStore.set(keySearch);
         this.onSearch.next(keySearch);
@@ -2623,34 +2660,34 @@ class LibsUiComponentsListComponent {
         const serviceOther = configInput.httpRequestData?.()?.serviceOther;
         const serviceOtherRequestAllIdSelectOrUnSelect = configInput.configTemplateCheckbox?.()?.httpRequestAllIdSelectOrUnSelect?.()?.serviceOther;
         if (serviceOther) {
-            configInput.httpRequestData?.update(current => {
+            configInput.httpRequestData?.update((current) => {
                 delete current.serviceOther;
                 return current;
             });
         }
         if (serviceOtherRequestAllIdSelectOrUnSelect) {
-            configInput.configTemplateCheckbox?.()?.httpRequestAllIdSelectOrUnSelect?.update(current => {
+            configInput.configTemplateCheckbox?.()?.httpRequestAllIdSelectOrUnSelect?.update((current) => {
                 delete current.serviceOther;
                 return current;
             });
         }
         const config = cloneDeep(configInput);
         if (serviceOther && config.httpRequestData) {
-            config.httpRequestData.update(current => {
+            config.httpRequestData.update((current) => {
                 current.serviceOther = serviceOther;
                 return current;
             });
-            configInput.httpRequestData?.update(current => {
+            configInput.httpRequestData?.update((current) => {
                 current.serviceOther = serviceOther;
                 return current;
             });
         }
         if (serviceOtherRequestAllIdSelectOrUnSelect && config.configTemplateCheckbox) {
-            config.configTemplateCheckbox?.()?.httpRequestAllIdSelectOrUnSelect?.update(current => {
+            config.configTemplateCheckbox?.()?.httpRequestAllIdSelectOrUnSelect?.update((current) => {
                 current.serviceOther = serviceOther;
                 return current;
             });
-            configInput.configTemplateCheckbox?.()?.httpRequestAllIdSelectOrUnSelect?.update(current => {
+            configInput.configTemplateCheckbox?.()?.httpRequestAllIdSelectOrUnSelect?.update((current) => {
                 current.serviceOther = serviceOther;
                 return current;
             });
@@ -2669,21 +2706,13 @@ 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 }, paddingLeftItem: { classPropertyName: "paddingLeftItem", publicName: "paddingLeftItem", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, autoSelectedFirstItemCallOutsideBefore: { classPropertyName: "autoSelectedFirstItemCallOutsideBefore", publicName: "autoSelectedFirstItemCallOutsideBefore", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null }, searchPadding: { classPropertyName: "searchPadding", publicName: "searchPadding", isSignal: true, isRequired: false, transformFunction: null }, dividerClassInclude: { classPropertyName: "dividerClassInclude", publicName: "dividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, hasDivider: { classPropertyName: "hasDivider", publicName: "hasDivider", isSignal: true, isRequired: false, transformFunction: null }, buttonsOther: { classPropertyName: "buttonsOther", publicName: "buttonsOther", isSignal: true, isRequired: false, transformFunction: null }, hasButtonUnSelectOption: { classPropertyName: "hasButtonUnSelectOption", publicName: "hasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, clickExactly: { classPropertyName: "clickExactly", publicName: "clickExactly", isSignal: true, isRequired: false, transformFunction: null }, backgroundListCustom: { classPropertyName: "backgroundListCustom", publicName: "backgroundListCustom", isSignal: true, isRequired: false, transformFunction: null }, maxItemShow: { classPropertyName: "maxItemShow", publicName: "maxItemShow", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, multiKeySelected: { classPropertyName: "multiKeySelected", publicName: "multiKeySelected", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, keysHiddenItem: { classPropertyName: "keysHiddenItem", publicName: "keysHiddenItem", isSignal: true, isRequired: false, transformFunction: null }, focusInputSearch: { classPropertyName: "focusInputSearch", publicName: "focusInputSearch", isSignal: true, isRequired: false, transformFunction: null }, skipFocusInputWhenKeySearchStoreUndefined: { classPropertyName: "skipFocusInputWhenKeySearchStoreUndefined", publicName: "skipFocusInputWhenKeySearchStoreUndefined", isSignal: true, isRequired: false, transformFunction: null }, functionGetItemsAutoAddList: { classPropertyName: "functionGetItemsAutoAddList", publicName: "functionGetItemsAutoAddList", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, showValidateBottom: { classPropertyName: "showValidateBottom", publicName: "showValidateBottom", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, loadingIconSize: { classPropertyName: "loadingIconSize", publicName: "loadingIconSize", isSignal: true, isRequired: false, transformFunction: null }, templateRefSearchNoData: { classPropertyName: "templateRefSearchNoData", publicName: "templateRefSearchNoData", isSignal: true, isRequired: false, transformFunction: null }, resetKeyWhenSelectAllKeyDropdown: { classPropertyName: "resetKeyWhenSelectAllKeyDropdown", publicName: "resetKeyWhenSelectAllKeyDropdown", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outUnSelectMultiKey: "outUnSelectMultiKey", outClickButtonOther: "outClickButtonOther", outFieldKey: "outFieldKey", outChangeView: "outChangeView", outKeySearch: "outKeySearch", outLoading: "outLoading", outFunctionsControl: "outFunctionsControl", outChangStageFlagMousePopover: "outChangStageFlagMousePopover", outLoadItemsComplete: "outLoadItemsComplete" }, viewQueries: [{ propertyName: "listViewElementRef", first: true, predicate: ["listViewContainer"], descendants: true, isSignal: true }, { propertyName: "contentElementRef", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #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\n    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] libs-ui-border-top-general\"\n        [class.rounded-b-[4px]]=\"$last && !hasButtonUnSelectOption()\">\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 text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude:'' }}\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"buttonOther.disable || disable() || loading() || false\"\n          (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n      </div>\n    }\n    @if (hasButtonUnSelectOption()) {\n      <div class=\"bg-[#ffffff] rounded-b-[4px] libs-ui-border-top-general\">\n        <libs_ui-components-buttons-button label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-full text-left rounded-0\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n          (outClick)=\"handlerRemoveKeySelected()\" />\n      </div>\n    }\n  </div>\n  @if (showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      <span class=\"libs-ui-text-error libs-ui-font-h7r\"\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-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsInputsSearchComponent, selector: "libs_ui-components-inputs-search", inputs: ["disable", "readonly", "searchConfig", "ignoreAutoComplete", "debounceTime", "ignoreStopPropagationEvent", "focusTimeOut", "blurTimeOut"], outputs: ["outSearch", "outValueChange", "outIconLeft", "outIconRight", "outFocusAndBlur", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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 }, paddingLeftItem: { classPropertyName: "paddingLeftItem", publicName: "paddingLeftItem", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, autoSelectedFirstItemCallOutsideBefore: { classPropertyName: "autoSelectedFirstItemCallOutsideBefore", publicName: "autoSelectedFirstItemCallOutsideBefore", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null }, searchPadding: { classPropertyName: "searchPadding", publicName: "searchPadding", isSignal: true, isRequired: false, transformFunction: null }, dividerClassInclude: { classPropertyName: "dividerClassInclude", publicName: "dividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, hasDivider: { classPropertyName: "hasDivider", publicName: "hasDivider", isSignal: true, isRequired: false, transformFunction: null }, buttonsOther: { classPropertyName: "buttonsOther", publicName: "buttonsOther", isSignal: true, isRequired: false, transformFunction: null }, hasButtonUnSelectOption: { classPropertyName: "hasButtonUnSelectOption", publicName: "hasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, clickExactly: { classPropertyName: "clickExactly", publicName: "clickExactly", isSignal: true, isRequired: false, transformFunction: null }, backgroundListCustom: { classPropertyName: "backgroundListCustom", publicName: "backgroundListCustom", isSignal: true, isRequired: false, transformFunction: null }, maxItemShow: { classPropertyName: "maxItemShow", publicName: "maxItemShow", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, multiKeySelected: { classPropertyName: "multiKeySelected", publicName: "multiKeySelected", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, keysHiddenItem: { classPropertyName: "keysHiddenItem", publicName: "keysHiddenItem", isSignal: true, isRequired: false, transformFunction: null }, focusInputSearch: { classPropertyName: "focusInputSearch", publicName: "focusInputSearch", isSignal: true, isRequired: false, transformFunction: null }, skipFocusInputWhenKeySearchStoreUndefined: { classPropertyName: "skipFocusInputWhenKeySearchStoreUndefined", publicName: "skipFocusInputWhenKeySearchStoreUndefined", isSignal: true, isRequired: false, transformFunction: null }, functionGetItemsAutoAddList: { classPropertyName: "functionGetItemsAutoAddList", publicName: "functionGetItemsAutoAddList", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, showValidateBottom: { classPropertyName: "showValidateBottom", publicName: "showValidateBottom", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, loadingIconSize: { classPropertyName: "loadingIconSize", publicName: "loadingIconSize", isSignal: true, isRequired: false, transformFunction: null }, templateRefSearchNoData: { classPropertyName: "templateRefSearchNoData", publicName: "templateRefSearchNoData", isSignal: true, isRequired: false, transformFunction: null }, resetKeyWhenSelectAllKeyDropdown: { classPropertyName: "resetKeyWhenSelectAllKeyDropdown", publicName: "resetKeyWhenSelectAllKeyDropdown", isSignal: true, isRequired: false, transformFunction: null }, ignoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "ignoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outUnSelectMultiKey: "outUnSelectMultiKey", outClickButtonOther: "outClickButtonOther", outFieldKey: "outFieldKey", outChangeView: "outChangeView", outKeySearch: "outKeySearch", outLoading: "outLoading", outFunctionsControl: "outFunctionsControl", outChangStageFlagMousePopover: "outChangStageFlagMousePopover", outLoadItemsComplete: "outLoadItemsComplete" }, viewQueries: [{ propertyName: "listViewElementRef", first: true, predicate: ["listViewContainer"], descendants: true, isSignal: true }, { propertyName: "contentElementRef", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow()\"\n  [class.h-full]=\"!maxItemShow()\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || loading() || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n\n  @if (!showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n  @if (!hiddenInputSearch()) {\n    <libs_ui-components-inputs-search\n      [searchConfig]=\"searchConfig()\"\n      [class.px-[12px]]=\"searchPadding()\"\n      [class]=\"searchConfig().classCoverInputSearch\"\n      [disable]=\"disable() || loading() || false\"\n      (outSearch)=\"handlerSearch($event)\"\n      (outFunctionsControl)=\"handlerFunctionControlInputSearch($event)\" />\n  }\n  @if (config()?.configDescriptionGroup?.(); as description) {\n    <div [class]=\"description?.classInclude\">\n      <libs_ui-components-popover [config]=\"description?.tooltipDescription()\">\n        <div [class]=\"description?.classTextDescriptionInclude\">{{ description.textDescription }}</div>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (!hiddenInputSearch() && hasDivider() && (!config()?.ignoreShowDataWhenNotSearch || keySearchStore())) {\n    <div\n      class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude() : '' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\"></div>\n  }\n  <div class=\"flex flex-col {{ config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch ? 'h-[353px]' : 'h-full' }}\">\n    <div\n      #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\"></div>\n\n    @for (buttonOther of buttonsOther(); track $index) {\n      <div\n        class=\"bg-[#ffffff] libs-ui-border-top-general\"\n        [class.rounded-b-[4px]]=\"$last && !hasButtonUnSelectOption()\">\n        <libs_ui-components-buttons-button\n          [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '') + ' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude : '' }}\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"buttonOther.disable || disable() || loading() || false\"\n          (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n      </div>\n    }\n    @if (hasButtonUnSelectOption()) {\n      <div class=\"bg-[#ffffff] rounded-b-[4px] libs-ui-border-top-general\">\n        <libs_ui-components-buttons-button\n          label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-full text-left rounded-0\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n          (outClick)=\"handlerRemoveKeySelected()\" />\n      </div>\n    }\n  </div>\n  @if (showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div\n      [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      <span\n        class=\"libs-ui-text-error libs-ui-font-h7r\"\n        [innerHtml]=\"validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID | translate: validRequired()?.interpolateParams\"></span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsInputsSearchComponent, selector: "libs_ui-components-inputs-search", inputs: ["disable", "readonly", "searchConfig", "ignoreAutoComplete", "debounceTime", "ignoreStopPropagationEvent", "focusTimeOut", "blurTimeOut"], outputs: ["outSearch", "outValueChange", "outIconLeft", "outIconRight", "outFocusAndBlur", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgTemplateOutlet, TranslateModule,
-                        LibsUiComponentsLabelComponent,
-                        LibsUiComponentsInputsSearchComponent,
-                        LibsUiComponentsPopoverComponent,
-                        LibsUiComponentsButtonsButtonComponent
-                    ], template: "<div #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\n    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] libs-ui-border-top-general\"\n        [class.rounded-b-[4px]]=\"$last && !hasButtonUnSelectOption()\">\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 text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude:'' }}\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"buttonOther.disable || disable() || loading() || false\"\n          (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n      </div>\n    }\n    @if (hasButtonUnSelectOption()) {\n      <div class=\"bg-[#ffffff] rounded-b-[4px] libs-ui-border-top-general\">\n        <libs_ui-components-buttons-button label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-full text-left rounded-0\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n          (outClick)=\"handlerRemoveKeySelected()\" />\n      </div>\n    }\n  </div>\n  @if (showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      <span class=\"libs-ui-text-error libs-ui-font-h7r\"\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-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"] }]
+            args: [{ selector: 'libs_ui-components-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, LibsUiComponentsLabelComponent, LibsUiComponentsInputsSearchComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent], template: "<div\n  #listViewContainer\n  class=\"flex flex-col\"\n  [class.w-full]=\"!maxItemShow()\"\n  [class.h-full]=\"!maxItemShow()\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || loading() || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n\n  @if (!showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n  @if (!hiddenInputSearch()) {\n    <libs_ui-components-inputs-search\n      [searchConfig]=\"searchConfig()\"\n      [class.px-[12px]]=\"searchPadding()\"\n      [class]=\"searchConfig().classCoverInputSearch\"\n      [disable]=\"disable() || loading() || false\"\n      (outSearch)=\"handlerSearch($event)\"\n      (outFunctionsControl)=\"handlerFunctionControlInputSearch($event)\" />\n  }\n  @if (config()?.configDescriptionGroup?.(); as description) {\n    <div [class]=\"description?.classInclude\">\n      <libs_ui-components-popover [config]=\"description?.tooltipDescription()\">\n        <div [class]=\"description?.classTextDescriptionInclude\">{{ description.textDescription }}</div>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (!hiddenInputSearch() && hasDivider() && (!config()?.ignoreShowDataWhenNotSearch || keySearchStore())) {\n    <div\n      class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude() : '' }}\"\n      [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\"></div>\n  }\n  <div class=\"flex flex-col {{ config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch ? 'h-[353px]' : 'h-full' }}\">\n    <div\n      #contentContainer\n      class=\"w-full h-full {{ backgroundListCustom() }}\"\n      [class.libs-ui-disable]=\"disable() && disableLabel()\"\n      [class.pointer-events-none]=\"disable() && disableLabel()\"></div>\n\n    @for (buttonOther of buttonsOther(); track $index) {\n      <div\n        class=\"bg-[#ffffff] libs-ui-border-top-general\"\n        [class.rounded-b-[4px]]=\"$last && !hasButtonUnSelectOption()\">\n        <libs_ui-components-buttons-button\n          [type]=\"buttonOther.type || 'button-link-primary'\"\n          [label]=\"buttonOther.label || ' '\"\n          [classIconLeft]=\"(buttonOther.classIconLeft || '') + ' flex mr-[8px] text-[16px]'\"\n          classInclude=\"w-full text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude : '' }}\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"buttonOther.disable || disable() || loading() || false\"\n          (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n      </div>\n    }\n    @if (hasButtonUnSelectOption()) {\n      <div class=\"bg-[#ffffff] rounded-b-[4px] libs-ui-border-top-general\">\n        <libs_ui-components-buttons-button\n          label=\"i18n_unselect_option\"\n          type=\"button-link-danger-high\"\n          classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n          classInclude=\"w-full text-left rounded-0\"\n          classLabel=\"libs-ui-font-h5r whitespace-normal\"\n          [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n          (outClick)=\"handlerRemoveKeySelected()\" />\n      </div>\n    }\n  </div>\n  @if (showValidateBottom()) {\n    <ng-container *ngTemplateOutlet=\"templateValidate\" />\n  }\n</div>\n\n<ng-template #templateValidate>\n  @if (isErrorRequired()) {\n    <div\n      [class.mb-[8px]]=\"!showValidateBottom()\"\n      [class.mt-[8px]]=\"showValidateBottom()\">\n      <span\n        class=\"libs-ui-text-error libs-ui-font-h7r\"\n        [innerHtml]=\"validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID | translate: validRequired()?.interpolateParams\"></span>\n    </div>\n  }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"] }]
         }], ctorParameters: () => [] });
 
-;
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 /**