@libs-ui/components-list 0.2.346-2 → 0.2.346-4

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

@@ -7,7 +7,7 @@ import { LibsUiComponentsInputsSearchComponent } from '@libs-ui/components-input
 import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
 import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
 import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
-import { deleteUnicode, isEmpty, convertObjectToSignal, isNil, convertSignalToObject, cloneDeep, get, escapeHtml, uuid, set, ERROR_MESSAGE_EMPTY_VALID, isEqual } from '@libs-ui/utils';
+import { deleteUnicode, isEmpty, convertObjectToSignal, get, isNil, convertSignalToObject, cloneDeep, escapeHtml, uuid, set, ERROR_MESSAGE_EMPTY_VALID, isEqual } from '@libs-ui/utils';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { lastValueFrom, interval, of, range, Subject, timer } from 'rxjs';
@@ -23,11 +23,11 @@ import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
 import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
 import { LibsUiHttpRequestService } from '@libs-ui/services-http-request';
 import { skipWhile, take } from 'rxjs/operators';
+import { LibsUiPipesGetValueOfObjectPipe } from '@libs-ui/pipes-get-value-of-object';
 import { LibsUiPipesConvertSignalToObjectPipe } from '@libs-ui/pipes-convert-signal-to-object';
 import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-single';
 import { LibsUiComponentsButtonsSortArrowComponent } from '@libs-ui/components-buttons-sort';
 import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
-import { LibsUiPipesGetValueOfObjectPipe } from '@libs-ui/pipes-get-value-of-object';
 
 class LibsUiComponentsListHighlightKeySearchDirective {
     isHighlight = input(undefined);
@@ -458,8 +458,8 @@ class LibsUiComponentsListTemplatesComponentAbstract {
         return this.httpRequestService.fakeResponsePagingApi();
     }
     buildValueByConfig(item, configTemplate) {
-        const ref = item().ref || {};
-        const label = ref.label ?? ref.title ?? ref.value ?? ref.name;
+        const ref = get(item, 'ref', {});
+        const label = get(ref, 'label') ?? get(ref, 'title ') ?? get(ref, 'value') ?? get(ref, 'name');
         const valueSearchByFunction = configTemplate?.getLabelSearch?.(ref);
         if (!isNil(label) && typeof label !== 'object') {
             item.update((currentItem) => {
@@ -481,7 +481,7 @@ class LibsUiComponentsListTemplatesComponentAbstract {
         if (!configTemplate?.rows?.()) {
             return valueSearchByFunction ?? (item().fieldLabel || ' ');
         }
-        let textSearch = item().fieldLabel || ' ';
+        let textSearch = get(item, 'fieldLabel', ' ');
         const rows = convertSignalToObject(configTemplate.rows());
         rows.forEach(async (row, indexRow) => {
             const fieldNameRow = `fieldLabelRow${indexRow}`;
@@ -562,12 +562,12 @@ 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) => get(keyDisable, '') === get(id, '')) && keys.add(get(id, '')));
             }
             if (!ids.length) {
                 this.items().forEach((item) => {
-                    const key = item()[this.fieldKey()];
-                    if (!keysDisable.some((keyDisable) => keyDisable === key)) {
+                    const key = get(item, this.fieldKey());
+                    if (!keysDisable.some((keyDisable) => get(keyDisable, '') === get(key, ''))) {
                         keys.add(key);
                     }
                 });
@@ -585,8 +585,8 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
         });
         if (!ids.length) {
             this.items().forEach((item) => {
-                const key = item()[this.fieldKey()];
-                if (!keysDisable.some((keyDisable) => keyDisable === key)) {
+                const key = get(item, this.fieldKey());
+                if (!keysDisable.some((keyDisable) => get(keyDisable, '') === get(key, ''))) {
                     keys.delete(key);
                     keyUnSelected.add(key);
                 }
@@ -598,7 +598,7 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
     }
     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) => get(item, this.fieldKey())) };
         }
         try {
             if (!this.configTemplateCheckbox()?.httpRequestAllIdSelectOrUnSelect?.()) {
@@ -644,7 +644,7 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
     }
     handlerChange(event, item, ignoreDisable = false, isClickManual = true) {
         if (this.configTemplateCheckbox()?.ignoreClickItemUnChecked) {
-            const key = item[this.fieldKey()];
+            const key = get(item, this.fieldKey());
             if (this.multiKeySelected()?.includes(key)) {
                 return;
             }
@@ -652,7 +652,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) => get(keyDisable, '') === get(item, this.fieldKey())))) {
             return;
         }
         if (event instanceof Event) {
@@ -682,7 +682,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) => get(item, this.fieldKey()) === get(key, ''));
             mapKeys.push({ key, item: convertSignalToObject(item), isClickManual });
         });
         this.outSelectMultiKey.emit({ keys: this.multiKeySelected() || [], mapKeys, isClickManual });
@@ -709,14 +709,14 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
                     return { ...currentStore, dataTooltip: this.configTemplateCheckbox()?.getPopover?.(dataStore()) };
                 });
             }
-            const key = keysHidden.find((key) => dataStore()[this.fieldKey()] === key);
+            const key = keysHidden.find((key) => get(dataStore, this.fieldKey()) === get(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?.()?.serviceClass && !this.config()?.httpRequestData?.()?.objectInstance) || (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()])) {
+                    (replace || (!replace && !this.items().find((dataItem) => get(dataItem, this.fieldKey()) === get(dataStore, this.fieldKey())))) &&
+                    !itemByKeySearch.find((dataItem) => get(dataItem, this.fieldKey()) === get(dataStore, this.fieldKey()))) {
                     dataStore.update((currentStore) => {
                         return {
                             ...currentStore,
@@ -732,7 +732,7 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
                 }
                 return;
             }
-            this.items.update((items) => items.filter((item) => item()[this.fieldKey()] !== key));
+            this.items.update((items) => items.filter((item) => get(item, this.fieldKey()) !== get(key, '')));
         });
         const callbackCheckScroll = (preStateHasScroll, currentHasScroll) => {
             this.scrollToItemSelected();
@@ -768,7 +768,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) => get(item, this.fieldKey()) === get(this.keySelected, ''));
             if (index !== -1) {
                 const offsetContainer = this.elementScroll()?.nativeElement?.offsetHeight;
                 const additionalOffset = ((offsetContainer ? offsetContainer - this.heightItem() : 0) / 2) * -1;
@@ -786,7 +786,7 @@ class LibsUiComponentsListCheckboxComponent extends LibsUiComponentsListTemplate
         return this.items().length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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            @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n            <span>{{ constHtmlTextNoData | translate }}</span>\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <span>{{ constHtmlTextSearchNoData | 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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(); let last = $last) {\n              @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: fieldKey();\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]=\"constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length\"\n                        [key]=\"constHtmlKeyItem\"\n                        [imgTypeIcon]=\"configTemplateCheckbox.hasAvatarGroupSocial\"\n                        [classInclude]=\"configTemplateCheckbox.classInclude || ''\"\n                        [classImageInclude]=\"configTemplateCheckbox.classIncludeImage || ''\"\n                        [bullet]=\"(item().bullet | LibsUiPipesConvertObjectToSignalPipe)?.()\"\n                        [disable]=\"loading() || disable() || (constHtmlKeyItem | 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]=\"(constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length) ? constHtmlKeyItem : 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            @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n            <span>{{ constHtmlTextNoData | translate }}</span>\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <span>{{ constHtmlTextSearchNoData | 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" }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListCheckboxComponent, decorators: [{
             type: Component,
@@ -807,7 +807,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         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 [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            @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n            <span>{{ constHtmlTextNoData | translate }}</span>\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <span>{{ constHtmlTextSearchNoData | 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"] }]
+                        LibsUiPipesGetValueOfObjectPipe
+                    ], 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(); let last = $last) {\n              @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: fieldKey();\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]=\"constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length\"\n                        [key]=\"constHtmlKeyItem\"\n                        [imgTypeIcon]=\"configTemplateCheckbox.hasAvatarGroupSocial\"\n                        [classInclude]=\"configTemplateCheckbox.classInclude || ''\"\n                        [classImageInclude]=\"configTemplateCheckbox.classIncludeImage || ''\"\n                        [bullet]=\"(item().bullet | LibsUiPipesConvertObjectToSignalPipe)?.()\"\n                        [disable]=\"loading() || disable() || (constHtmlKeyItem | 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]=\"(constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length) ? constHtmlKeyItem : 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            @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n            <span>{{ constHtmlTextNoData | translate }}</span>\n          }\n          @if (templateRefSearchNoData() && keySearch() && !loading()) {\n            <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n          }\n          @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <span>{{ constHtmlTextSearchNoData | 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 {
@@ -958,7 +959,7 @@ class LibsUiComponentsListGroupItemComponent {
         this.outChangStageFlagMousePopover.emit(flag);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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]=\"\n            !disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n          \"\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 && !item().isAcceptSelectItem))\">\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 && !item().isAcceptSelectItem && !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          @let constHtmlTextNoData = parentItem().textDescriptionGroupWhenNoData || config()?.textNoData || 'i18n_no_result';\n          <span>{{ constHtmlTextNoData | 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.14", 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()) {\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]=\"\n            !disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n          \"\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 && !item().isAcceptSelectItem))\">\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 && !item().isAcceptSelectItem && !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          @let constHtmlTextNoData = parentItem().textDescriptionGroupWhenNoData || config()?.textNoData || 'i18n_no_result';\n          <span>{{ constHtmlTextNoData | 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.14", ngImport: i0, type: LibsUiComponentsListGroupItemComponent, decorators: [{
             type: Component,
@@ -974,7 +975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiComponentsCheckboxSingleComponent,
                         LibsUiPipesCallFunctionInTemplatePipe,
                         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]=\"\n            !disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n          \"\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 && !item().isAcceptSelectItem))\">\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 && !item().isAcceptSelectItem && !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          @let constHtmlTextNoData = parentItem().textDescriptionGroupWhenNoData || config()?.textNoData || 'i18n_no_result';\n          <span>{{ constHtmlTextNoData | 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"] }]
+                    ], 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()) {\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]=\"\n            !disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n          \"\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 && !item().isAcceptSelectItem))\">\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 && !item().isAcceptSelectItem && !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          @let constHtmlTextNoData = parentItem().textDescriptionGroupWhenNoData || config()?.textNoData || 'i18n_no_result';\n          <span>{{ constHtmlTextNoData | 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 */
@@ -1812,14 +1813,14 @@ class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesCo
             dataStore.update((store) => {
                 return { ...store, ref: item() };
             });
-            const key = keysHidden.find((key) => dataStore()[this.fieldKey()] === key);
+            const key = keysHidden.find((key) => get(dataStore, this.fieldKey()) === get(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?.()?.serviceClass && !this.config()?.httpRequestData?.()?.objectInstance) || (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()])) {
+                    (replace || (!replace && !this.items().find((dataItem) => get(dataItem, this.fieldKey()) === get(dataStore, this.fieldKey())))) &&
+                    !itemByKeySearch.find((dataItem) => get(dataItem, this.fieldKey()) === get(dataStore, this.fieldKey()))) {
                     if (this.configTemplateRadio()?.getPopover) {
                         dataStore.update((currentStore) => {
                             return { ...currentStore, dataTooltip: this.configTemplateRadio()?.getPopover?.(dataStore) };
@@ -1836,7 +1837,7 @@ class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesCo
                 }
                 return;
             }
-            const indexItemRemove = this.items().findIndex((item) => item()[this.fieldKey()] === key);
+            const indexItemRemove = this.items().findIndex((item) => get(item, this.fieldKey()) === get(key, ''));
             if (indexItemRemove > -1) {
                 this.items.update((items) => {
                     items.splice(indexItemRemove, 1);
@@ -1879,7 +1880,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) => get(item, this.fieldKey()) === get(this.keySelected, ''));
             if (index !== -1) {
                 const offsetContainer = this.elementScroll()?.nativeElement?.offsetHeight;
                 const additionalOffset = ((offsetContainer ? offsetContainer - this.heightItem() : 0) / 2) * -1;
@@ -1894,7 +1895,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) => get(store, this.fieldKey()) === get(this.keySelected, ''));
         if (item) {
             this.handlerChange('radio', item(), true, false);
         }
@@ -1903,7 +1904,7 @@ class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesCo
         return this.items().length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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          @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n          <span>{{ constHtmlTextNoData | translate }}</span>\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n          <span>{{ constHtmlTextSearchNoData | 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.14", 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()) {\n            @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: 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() === constHtmlKeyItem\"\n                    [key]=\"constHtmlKeyItem\"\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() || (constHtmlKeyItem | 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          @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n          <span>{{ constHtmlTextNoData | translate }}</span>\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n          <span>{{ constHtmlTextSearchNoData | 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" }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListRadioComponent, decorators: [{
             type: Component,
@@ -1920,7 +1921,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiComponentsListRowsComponent,
                         LibsUiPipesConvertObjectToSignalPipe,
                         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          @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n          <span>{{ constHtmlTextNoData | translate }}</span>\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n          <span>{{ constHtmlTextSearchNoData | 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"] }]
+                        LibsUiPipesGetValueOfObjectPipe
+                    ], 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()) {\n            @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: 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() === constHtmlKeyItem\"\n                    [key]=\"constHtmlKeyItem\"\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() || (constHtmlKeyItem | 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          @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n          <span>{{ constHtmlTextNoData | translate }}</span>\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n          <span>{{ constHtmlTextSearchNoData | 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 */
@@ -2108,7 +2110,7 @@ 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) => get(key, '') === get(item, this.fieldKey())))) {
             return;
         }
         if (action) {
@@ -2120,7 +2122,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         }
         if (this.configTemplateText()?.actionSort) {
             const currentItemSort = this.configTemplateText()?.itemSort?.();
-            const mode = currentItemSort?.fieldSort !== item[this.fieldKey()] ? 'asc' : currentItemSort?.mode === 'desc' ? 'asc' : 'desc';
+            const mode = get(currentItemSort, 'fieldSort') !== get(item, this.fieldKey()) ? 'asc' : get(currentItemSort, 'mode') === 'desc' ? 'asc' : 'desc';
             const newSort = {
                 fieldSort: item[this.fieldKey()],
                 mode,
@@ -2146,7 +2148,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         }
         this.store().forEach((item) => {
             const dataStore = cloneDeep(item);
-            const key = keysHidden.find((key) => dataStore()[this.fieldKey()] === key);
+            const key = keysHidden.find((key) => get(dataStore, this.fieldKey()) === get(key, ''));
             dataStore.update((store) => {
                 return { ...store, ref: item() };
             });
@@ -2155,8 +2157,8 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
                 const textEscape = escapeHtml(text);
                 const keySearch = deleteUnicode(escapeHtml(this.keySearch().toLocaleLowerCase()));
                 if (((this.isSearchOnline() && this.config()?.httpRequestData?.()?.serviceClass && !this.config()?.httpRequestData?.()?.objectInstance) || (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()])) {
+                    (replace || (!replace && !this.items().find((dataItem) => get(dataItem, this.fieldKey()) === get(dataStore, this.fieldKey())))) &&
+                    !itemByKeySearch.find((dataItem) => get(dataItem, this.fieldKey()) === get(dataStore, this.fieldKey()))) {
                     dataStore.update((store) => {
                         return {
                             ...store,
@@ -2174,7 +2176,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
                 }
                 return;
             }
-            const indexItemRemove = this.items().findIndex((item) => item()[this.fieldKey()] === key);
+            const indexItemRemove = this.items().findIndex((item) => get(item, this.fieldKey()) === get(key, ''));
             if (indexItemRemove > -1) {
                 this.items.update((items) => {
                     items.splice(indexItemRemove, 1);
@@ -2219,7 +2221,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) => get(item, this.fieldKey()) === get(this.keySelected, ''));
             if (index !== -1) {
                 const offsetContainer = this.elementScroll()?.nativeElement?.offsetHeight;
                 const additionalOffset = ((offsetContainer ? offsetContainer - this.heightItem() : 0) / 2) * -1;
@@ -2234,7 +2236,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) => get(store, this.fieldKey()) === get(this.keySelected, ''));
         if (item) {
             this.handlerSelectItem('click', item(), undefined, true, false);
         }
@@ -2247,7 +2249,7 @@ class LibsUiComponentsListTextComponent extends LibsUiComponentsListTemplatesCom
         item.specific_loadImgError = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListTextComponent, isStandalone: true, selector: "libs_ui-components-list-templates_text", viewQueries: [{ propertyName: "virtualScrollerComponent", first: true, predicate: VirtualScrollerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <!-- ph\u1EA3i \u0111\u1EC3 [class.h-full]=\"!isShowHeightCalculate()\" th\u00EC LibsUiComponentsScrollOverlayDirective m\u1EDBi ho\u1EA1t \u0111\u1ED9ng \u0111\u01B0\u1EE3c -->\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          @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n          {{ constHtmlTextNoData | translate }}\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n          {{ constHtmlTextSearchNoData | translate }}\n        }\n        @if (loading()) {\n          &nbsp;\n        }\n      </div>\n    }\n    @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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListTextComponent, isStandalone: true, selector: "libs_ui-components-list-templates_text", viewQueries: [{ propertyName: "virtualScrollerComponent", first: true, predicate: VirtualScrollerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <!-- ph\u1EA3i \u0111\u1EC3 [class.h-full]=\"!isShowHeightCalculate()\" th\u00EC LibsUiComponentsScrollOverlayDirective m\u1EDBi ho\u1EA1t \u0111\u1ED9ng \u0111\u01B0\u1EE3c -->\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          @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n          {{ constHtmlTextNoData | translate }}\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n          {{ constHtmlTextSearchNoData | translate }}\n        }\n        @if (loading()) {\n          &nbsp;\n        }\n      </div>\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template\n    #listRef\n    let-itemsView=\"itemsView\">\n    @for (item of itemsView; track item()) {\n      @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: fieldKey();\n      @let constHtmlKeySelected = keySelected();\n      <div\n        #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div\n          LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item libs-ui-font-h5r flex ' + (item().classItem || '')\"\n          [class.items-center]=\"!item().itemAlignStart\"\n          [class.items-start]=\"item().itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly() && !item().hoverDanger\"\n          [class.libs-ui-bg-list-active]=\"!clickExactly() && constHtmlKeySelected === constHtmlKeyItem\"\n          [class.!pl-[16px]]=\"paddingLeftItem()\"\n          [class.bg-[#ffffff]]=\"clickExactly()\"\n          [class.libs-ui-bg-list-hover-ffffff]=\"item().disable\"\n          [class.cursor-default]=\"item().disable\"\n          [class.!py-[2px]]=\"clickExactly()\"\n          [class.!pr-[48px]]=\"constHtmlKeySelected === constHtmlKeyItem && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort) && !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{ 'pointer-events-none libs-ui-disable': loading() || disable() || ((constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem()) }\"\n          (click)=\"handlerClickRelative($event, item())\">\n          @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]=\"constHtmlKeySelected\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event, $event.item, $event.action)\" />\n          }\n          @if (configTemplateText.getComponentOutlet) {\n            <ng-container\n              *ngComponentOutlet=\"\n                item() | LibsUiPipesGetValueOfObjectPipe: fieldKey() : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getComponentOutlet : item() | async;\n                inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\n              \" />\n          }\n\n          @if ((constHtmlKeySelected === constHtmlKeyItem || (constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length)) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check ' + (configTemplateText.classIncludeIconSelected || 'right-[12px]')\"></i>\n          }\n          @if (constHtmlKeySelected === constHtmlKeyItem && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow\n                [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText?.itemSort?.()?.mode || ''\"\n                [fieldSort]=\"constHtmlKeyItem\"\n                (outChange)=\"handlerSort($event)\" />\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n}\n", styles: [".libs-ui-list-template-text-item{padding:6px 16px;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i1$1.VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsSwitchComponent, selector: "libs_ui-components-switch", inputs: ["size", "disable", "active"], outputs: ["activeChange", "outSwitch"] }, { kind: "component", type: LibsUiComponentsButtonsSortArrowComponent, selector: "libs_ui-components-buttons-sort-arrow", inputs: ["size", "mode", "fieldSort", "disable", "ignorePopoverContent", "popoverContentAsc", "popoverContentDesc", "defaultMode", "zIndex"], outputs: ["modeChange", "outChange"] }, { kind: "directive", type: LibsUiComponentsListHighlightKeySearchDirective, selector: "[LibsUiComponentsListHighlightKeySearchDirective]", inputs: ["isHighlight", "keySearch", "classHighlight"] }, { kind: "component", type: LibsUiComponentsListRowsComponent, selector: "libs_ui-components-list-templates_rows", inputs: ["configTemplate", "item", "keySelected", "fieldKey", "zIndex"], outputs: ["outChangStageFlagMousePopover", "outEvent"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiPipesGetValueOfObjectPipe, name: "LibsUiPipesGetValueOfObjectPipe" }, { kind: "pipe", type: LibsUiPipesConvertObjectToSignalPipe, name: "LibsUiPipesConvertObjectToSignalPipe" }, { kind: "pipe", type: LibsUiPipesConvertSignalToObjectPipe, name: "LibsUiPipesConvertSignalToObjectPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListTextComponent, decorators: [{
             type: Component,
@@ -2272,7 +2274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiPipesGetValueOfObjectPipe,
                         LibsUiPipesConvertObjectToSignalPipe,
                         LibsUiPipesConvertSignalToObjectPipe,
-                    ], template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <!-- ph\u1EA3i \u0111\u1EC3 [class.h-full]=\"!isShowHeightCalculate()\" th\u00EC LibsUiComponentsScrollOverlayDirective m\u1EDBi ho\u1EA1t \u0111\u1ED9ng \u0111\u01B0\u1EE3c -->\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          @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n          {{ constHtmlTextNoData | translate }}\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n          {{ constHtmlTextSearchNoData | translate }}\n        }\n        @if (loading()) {\n          &nbsp;\n        }\n      </div>\n    }\n    @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"] }]
+                    ], template: "@if (configTemplateText(); as configTemplateText) {\n  <div class=\"relative h-full w-full\">\n    @if (items() && items().length) {\n      <!-- ph\u1EA3i \u0111\u1EC3 [class.h-full]=\"!isShowHeightCalculate()\" th\u00EC LibsUiComponentsScrollOverlayDirective m\u1EDBi ho\u1EA1t \u0111\u1ED9ng \u0111\u01B0\u1EE3c -->\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          @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n          {{ constHtmlTextNoData | translate }}\n        }\n        @if (templateRefSearchNoData() && keySearch() && !loading()) {\n          <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n        }\n        @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n          @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n          {{ constHtmlTextSearchNoData | translate }}\n        }\n        @if (loading()) {\n          &nbsp;\n        }\n      </div>\n    }\n    @if (loading()) {\n      <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n    }\n  </div>\n  <ng-template\n    #listRef\n    let-itemsView=\"itemsView\">\n    @for (item of itemsView; track item()) {\n      @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: fieldKey();\n      @let constHtmlKeySelected = keySelected();\n      <div\n        #itemRef\n        [class]=\"item().classItemWrapper || ''\">\n        <div\n          LibsUiComponentsListHighlightKeySearchDirective\n          [isHighlight]=\"config()?.highlightTextSearchInResult\"\n          [keySearch]=\"keySearch()\"\n          [class]=\"'libs-ui-list-template-text-item libs-ui-font-h5r flex ' + (item().classItem || '')\"\n          [class.items-center]=\"!item().itemAlignStart\"\n          [class.items-start]=\"item().itemAlignStart\"\n          [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n          [class.libs-ui-bg-list-hover]=\"!clickExactly() && !item().hoverDanger\"\n          [class.libs-ui-bg-list-active]=\"!clickExactly() && constHtmlKeySelected === constHtmlKeyItem\"\n          [class.!pl-[16px]]=\"paddingLeftItem()\"\n          [class.bg-[#ffffff]]=\"clickExactly()\"\n          [class.libs-ui-bg-list-hover-ffffff]=\"item().disable\"\n          [class.cursor-default]=\"item().disable\"\n          [class.!py-[2px]]=\"clickExactly()\"\n          [class.!pr-[48px]]=\"constHtmlKeySelected === constHtmlKeyItem && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort) && !configTemplateText?.stylePaddingRightItemOther\"\n          [ngClass]=\"{ 'pointer-events-none libs-ui-disable': loading() || disable() || ((constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem()) }\"\n          (click)=\"handlerClickRelative($event, item())\">\n          @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]=\"constHtmlKeySelected\"\n              [configTemplate]=\"configTemplateText\"\n              [zIndex]=\"zIndex()\"\n              (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n              (outEvent)=\"handlerSelectItem($event.event, $event.item, $event.action)\" />\n          }\n          @if (configTemplateText.getComponentOutlet) {\n            <ng-container\n              *ngComponentOutlet=\"\n                item() | LibsUiPipesGetValueOfObjectPipe: fieldKey() : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getComponentOutlet : item() | async;\n                inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\n              \" />\n          }\n\n          @if ((constHtmlKeySelected === constHtmlKeyItem || (constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length)) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n            <i [class]=\"'libs-ui-icon-check ' + (configTemplateText.classIncludeIconSelected || 'right-[12px]')\"></i>\n          }\n          @if (constHtmlKeySelected === constHtmlKeyItem && configTemplateText.actionSort) {\n            <div class=\"libs-ui-list-template-text-sort\">\n              <libs_ui-components-buttons-sort-arrow\n                [disable]=\"loading() || disable() || false\"\n                [mode]=\"configTemplateText?.itemSort?.()?.mode || ''\"\n                [fieldSort]=\"constHtmlKeyItem\"\n                (outChange)=\"handlerSort($event)\" />\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n}\n", styles: [".libs-ui-list-template-text-item{padding:6px 16px;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"] }]
         }] });
 
 const getComponentByType = (typeTemplate) => {