@libs-ui/components-list 0.2.357-1 → 0.2.357-11

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

@@ -992,7 +992,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  @let constHtmlParent = parentItem();\n  @let constHtmlShowSelectionControl = !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem);\n  @if ((configTemplateGroup.isViewTree && !!items().length) || (constHtmlParent.maxLevelGroup > 2 && constHtmlParent.level > 1)) {\n    <div\n      class=\"libs-ui-list-group-item-line-vertical\"\n      [style.left.px]=\"\n        constHtmlParent.level\n          | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe\n            : constHtmlParent.maxLevelGroup\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : constHtmlShowSelectionControl\n      \"></div>\n  }\n  @if (items() && items().length) {\n    @for (item of items(); track item()) {\n      @let constHtmlItem = item();\n      @let constHtmlItemKey = constHtmlItem[fieldKey()];\n      @let constHtmlChildItems = constHtmlItem[configTemplateGroup.fieldGetItems]?.();\n      @let constHtmlHasChildItems = !!constHtmlChildItems?.length;\n      @let constHtmlCanExpandLevel = constHtmlItem.level < constHtmlItem.maxLevelGroup;\n      @let constHtmlIsLockedSelect = configTemplateGroup.singleSelectItem && constHtmlCanExpandLevel && !constHtmlItem.isAcceptSelectItem;\n      @let constHtmlItemDisable = constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length;\n      @let constHtmlItemChecked = constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length;\n      @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '') + ' w-full';\n      <div>\n        <div\n          [style.marginLeft.px]=\"\n            constHtmlItem.level\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : constHtmlItem.maxLevelGroup\n                : configTemplateGroup.isViewTree\n                : configTemplateGroup.isViewTreeJson\n                : constHtmlShowSelectionControl\n          \"\n          [style.paddingLeft.px]=\"\n            constHtmlItem.level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlItem.maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : constHtmlHasChildItems\n          \"\n          [style.paddingRight.px]=\"\n            constHtmlItem.level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlItem.maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : constHtmlHasChildItems : 'right'\n          \"\n          [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + constHtmlItem?.classInclude\"\n          [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n          [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && constHtmlItemDisable\"\n          [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && constHtmlItemDisable\"\n          [class.cursor-pointer]=\"!disable() && !constHtmlIsLockedSelect && !constHtmlItemDisable\"\n          [class.libs-ui-bg-list-active]=\"constHtmlItemChecked && configTemplateGroup.hasBackgroundColorWhenItemSelected && constHtmlItem.isCheckManual\"\n          (click)=\"handlerChangeChecked(constHtmlItem, constHtmlItemKey, disable() || constHtmlIsLockedSelect)\"\n          (keydown.enter)=\"handlerChangeChecked(constHtmlItem, constHtmlItemKey, disable() || constHtmlIsLockedSelect)\">\n          @if (constHtmlCanExpandLevel && configTemplateGroup.isViewTree) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"constHtmlItem.expand\"\n              (click)=\"handlerToggleExpand($event, item)\"\n              (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n          }\n          @if (constHtmlCanExpandLevel && configTemplateGroup.isViewTreeJson && constHtmlHasChildItems) {\n            <div [class]=\"'p-[5px]'\">\n              <div\n                [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n                [attr.disabled]=\"disable() || constHtmlItemDisable || 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              @if (!configTemplateGroup.isViewRadio) {\n                <libs_ui-components-checkbox-single\n                  [avatarConfig]=\"constHtmlItem.avatarConfig\"\n                  [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && constHtmlHasChildItems)\"\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 && constHtmlItemChecked && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || constHtmlItem.isCheckedByDefaultKey))) &&\n                    !configTemplateGroup.ignoreIconExpandMarginRight\n                  \"\n                  [clickExactly]=\"false\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [disable]=\"disable() || (constHtmlIsLockedSelect && !configTemplateGroup.isViewTreeJson) || constHtmlItemDisable || false\"\n                  [disableLabel]=\"constHtmlItemDisable\"\n                  [label]=\"constHtmlItem.fieldLabel\"\n                  [checked]=\"constHtmlItemChecked\"\n                  [stillOtherOptions]=\"constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                  [classLabelInclude]=\"constHtmlItemChecked && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual ? 'libs-ui-color-default libs-ui-font-h5r' : 'libs-ui-font-h5r'\"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : constHtmlItem : fieldKey() : { valueIsEmpty: { item: constHtmlItem } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : constHtmlItem : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"constHtmlItem.dataPopover\"\n                  [linkImage]=\"configTemplateGroup.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getImage : constHtmlItem | async) : (constHtmlItem[configTemplateGroup.fieldGetAvatarItem || ''] | async)\"\n                  [linkImageError]=\"configTemplateGroup.getLinkImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getLinkImageError : constHtmlItem | async) : ''\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [iconImageClass]=\"constHtmlItem.iconImageClass ? constHtmlItem.iconImageClass : undefined\"\n                  [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outEventPopover)=\"handlerEventPopover($event, constHtmlItem)\"\n                  (outChange)=\"handlerChangeChecked(constHtmlItem)\" />\n              }\n              @if (configTemplateGroup.isViewRadio) {\n                <libs_ui-components-radio-single\n                  [avatarConfig]=\"constHtmlItem.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 && constHtmlHasChildItems) ||\n                    (configTemplateGroup.singleSelectItem && constHtmlCanExpandLevel) ||\n                    constHtmlItemDisable ||\n                    false\n                  \"\n                  [label]=\"constHtmlItem.fieldLabel\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [active]=\"constHtmlItemChecked\"\n                  [classLabelInclude]=\"constHtmlItemChecked && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual ? 'text-[#009cdb] libs-ui-font-h5r ' : ' libs-ui-font-h5r '\"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : constHtmlItem : fieldKey() : { valueIsEmpty: { item: constHtmlItem } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : constHtmlItem : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"constHtmlItem.dataPopover\"\n                  [linkImage]=\"\n                    configTemplateGroup.getImage\n                      ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (constHtmlItem.specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : constHtmlItem | async)\n                      : constHtmlItem[configTemplateGroup.fieldGetAvatarItem || '']\n                  \"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outChange)=\"handlerChangeChecked(constHtmlItem)\" />\n              }\n            </div>\n          </div>\n          @if (constHtmlItemChecked && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || constHtmlItem.isCheckedByDefaultKey)) {\n            <i\n              class=\"libs-ui-icon-check before:!text-[16px]\"\n              [class.!ml-[8px]]=\"constHtmlItem.dataPopover\"\n              [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual\"></i>\n          }\n          @if (constHtmlHasChildItems && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"constHtmlItem.expand\"\n              [class.!ml-[8px]]=\"constHtmlItem.dataPopover\"\n              (click)=\"handlerToggleExpand($event, item)\"\n              (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n          }\n        </div>\n        @if (constHtmlItem.expand || configTemplateGroup.isViewTreeJson) {\n          @if (constHtmlCanExpandLevel && !constHtmlHasChildItems && configTemplateGroup.isViewTree) {\n            <div\n              class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n              [style.marginLeft.px]=\"\n                constHtmlItem.level + 1\n                  | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                    : constHtmlItem.maxLevelGroup + 1\n                    : configTemplateGroup.isViewTree\n                    : configTemplateGroup.isViewTreeJson\n                    : constHtmlShowSelectionControl\n                    : true\n              \"\n              [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n              [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n              <div [class]=\"constHtmlItem.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 (constHtmlHasChildItems) {\n            <libs_ui-components-list-templates_group-item\n              [keySearch]=\"keySearch()\"\n              [items]=\"constHtmlChildItems\"\n              [parentItem]=\"constHtmlItem\"\n              [fieldKey]=\"fieldKey()\"\n              [keysChecked]=\"keysChecked()\"\n              [disable]=\"(disable() || constHtmlItemDisable) && !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) && constHtmlParent.level < constHtmlParent.maxLevelGroup) {\n    <div\n      class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n      [style.marginLeft.px]=\"\n        constHtmlParent.level + 1\n          | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n            : constHtmlParent.maxLevelGroup + 1\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : constHtmlShowSelectionControl\n            : true\n      \"\n      [style.paddingLeft.px]=\"constHtmlParent.level + 1 | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlParent.maxLevelGroup + 1 : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : false\"\n      [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n      [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n      <div [class]=\"constHtmlParent.classIncludeItemNoData || ''\">\n        @if (constHtmlParent.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 = constHtmlParent.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  @let constHtmlParent = parentItem();\n  @let constHtmlShowSelectionControl = !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem);\n  @if ((configTemplateGroup.isViewTree && !!items().length) || (constHtmlParent.maxLevelGroup > 2 && constHtmlParent.level > 1)) {\n    <div\n      class=\"libs-ui-list-group-item-line-vertical\"\n      [style.left.px]=\"\n        constHtmlParent.level\n          | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe\n            : constHtmlParent.maxLevelGroup\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : constHtmlShowSelectionControl\n      \"></div>\n  }\n  @if (items() && items().length) {\n    @for (item of items(); track item()) {\n      @let constHtmlItem = item();\n      @let constHtmlItemKey = constHtmlItem[fieldKey()];\n      @let constHtmlChildItems = constHtmlItem[configTemplateGroup.fieldGetItems]?.();\n      @let constHtmlHasChildItems = !!constHtmlChildItems?.length;\n      @let constHtmlCanExpandLevel = constHtmlItem.level < constHtmlItem.maxLevelGroup;\n      @let constHtmlIsLockedSelect = configTemplateGroup.singleSelectItem && constHtmlCanExpandLevel && !constHtmlItem.isAcceptSelectItem;\n      @let constHtmlItemDisable = constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length;\n      @let constHtmlItemChecked = constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length;\n      @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '') + ' w-full';\n      <div>\n        <div\n          data-list-row\n          [style.marginLeft.px]=\"\n            constHtmlItem.level\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : constHtmlItem.maxLevelGroup\n                : configTemplateGroup.isViewTree\n                : configTemplateGroup.isViewTreeJson\n                : constHtmlShowSelectionControl\n          \"\n          [style.paddingLeft.px]=\"\n            constHtmlItem.level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlItem.maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : constHtmlHasChildItems\n          \"\n          [style.paddingRight.px]=\"\n            constHtmlItem.level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlItem.maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : constHtmlHasChildItems : 'right'\n          \"\n          [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + constHtmlItem?.classInclude\"\n          [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n          [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && constHtmlItemDisable\"\n          [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && constHtmlItemDisable\"\n          [class.cursor-pointer]=\"!disable() && !constHtmlIsLockedSelect && !constHtmlItemDisable\"\n          [class.libs-ui-bg-list-active]=\"constHtmlItemChecked && configTemplateGroup.hasBackgroundColorWhenItemSelected && constHtmlItem.isCheckManual\"\n          (click)=\"handlerChangeChecked(constHtmlItem, constHtmlItemKey, disable() || constHtmlIsLockedSelect)\"\n          (keydown.enter)=\"handlerChangeChecked(constHtmlItem, constHtmlItemKey, disable() || constHtmlIsLockedSelect)\">\n          @if (constHtmlCanExpandLevel && configTemplateGroup.isViewTree) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"constHtmlItem.expand\"\n              (click)=\"handlerToggleExpand($event, item)\"\n              (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n          }\n          @if (constHtmlCanExpandLevel && configTemplateGroup.isViewTreeJson && constHtmlHasChildItems) {\n            <div [class]=\"'p-[5px]'\">\n              <div\n                [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n                [attr.disabled]=\"disable() || constHtmlItemDisable || 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              @if (!configTemplateGroup.isViewRadio) {\n                <libs_ui-components-checkbox-single\n                  [avatarConfig]=\"constHtmlItem.avatarConfig\"\n                  [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && constHtmlHasChildItems)\"\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 && constHtmlItemChecked && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || constHtmlItem.isCheckedByDefaultKey))) &&\n                    !configTemplateGroup.ignoreIconExpandMarginRight\n                  \"\n                  [clickExactly]=\"false\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [disable]=\"disable() || (constHtmlIsLockedSelect && !configTemplateGroup.isViewTreeJson) || constHtmlItemDisable || false\"\n                  [disableLabel]=\"constHtmlItemDisable\"\n                  [label]=\"constHtmlItem.fieldLabel\"\n                  [checked]=\"constHtmlItemChecked\"\n                  [stillOtherOptions]=\"constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                  [classLabelInclude]=\"constHtmlItemChecked && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual ? 'libs-ui-color-default libs-ui-font-h5r' : 'libs-ui-font-h5r'\"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : constHtmlItem : fieldKey() : { valueIsEmpty: { item: constHtmlItem } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : constHtmlItem : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"constHtmlItem.dataPopover\"\n                  [linkImage]=\"configTemplateGroup.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getImage : constHtmlItem | async) : (constHtmlItem[configTemplateGroup.fieldGetAvatarItem || ''] | async)\"\n                  [linkImageError]=\"configTemplateGroup.getLinkImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getLinkImageError : constHtmlItem | async) : ''\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [iconImageClass]=\"constHtmlItem.iconImageClass ? constHtmlItem.iconImageClass : undefined\"\n                  [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outEventPopover)=\"handlerEventPopover($event, constHtmlItem)\"\n                  (outChange)=\"handlerChangeChecked(constHtmlItem)\" />\n              }\n              @if (configTemplateGroup.isViewRadio) {\n                <libs_ui-components-radio-single\n                  [avatarConfig]=\"constHtmlItem.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 && constHtmlHasChildItems) ||\n                    (configTemplateGroup.singleSelectItem && constHtmlCanExpandLevel) ||\n                    constHtmlItemDisable ||\n                    false\n                  \"\n                  [label]=\"constHtmlItem.fieldLabel\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [active]=\"constHtmlItemChecked\"\n                  [classLabelInclude]=\"constHtmlItemChecked && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual ? 'text-[#009cdb] libs-ui-font-h5r ' : ' libs-ui-font-h5r '\"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : constHtmlItem : fieldKey() : { valueIsEmpty: { item: constHtmlItem } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : constHtmlItem : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"constHtmlItem.dataPopover\"\n                  [linkImage]=\"\n                    configTemplateGroup.getImage\n                      ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (constHtmlItem.specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : constHtmlItem | async)\n                      : constHtmlItem[configTemplateGroup.fieldGetAvatarItem || '']\n                  \"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outChange)=\"handlerChangeChecked(constHtmlItem)\" />\n              }\n            </div>\n          </div>\n          @if (constHtmlItemChecked && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || constHtmlItem.isCheckedByDefaultKey)) {\n            <i\n              class=\"libs-ui-icon-check before:!text-[16px]\"\n              [class.!ml-[8px]]=\"constHtmlItem.dataPopover\"\n              [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual\"></i>\n          }\n          @if (constHtmlHasChildItems && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"constHtmlItem.expand\"\n              [class.!ml-[8px]]=\"constHtmlItem.dataPopover\"\n              (click)=\"handlerToggleExpand($event, item)\"\n              (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n          }\n        </div>\n        @if (constHtmlItem.expand || configTemplateGroup.isViewTreeJson) {\n          @if (constHtmlCanExpandLevel && !constHtmlHasChildItems && configTemplateGroup.isViewTree) {\n            <div\n              data-list-row\n              class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n              [style.marginLeft.px]=\"\n                constHtmlItem.level + 1\n                  | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                    : constHtmlItem.maxLevelGroup + 1\n                    : configTemplateGroup.isViewTree\n                    : configTemplateGroup.isViewTreeJson\n                    : constHtmlShowSelectionControl\n                    : true\n              \"\n              [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n              [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n              <div [class]=\"constHtmlItem.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 (constHtmlHasChildItems) {\n            <libs_ui-components-list-templates_group-item\n              [keySearch]=\"keySearch()\"\n              [items]=\"constHtmlChildItems\"\n              [parentItem]=\"constHtmlItem\"\n              [fieldKey]=\"fieldKey()\"\n              [keysChecked]=\"keysChecked()\"\n              [disable]=\"(disable() || constHtmlItemDisable) && !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) && constHtmlParent.level < constHtmlParent.maxLevelGroup) {\n    <div\n      data-list-row\n      class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n      [style.marginLeft.px]=\"\n        constHtmlParent.level + 1\n          | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n            : constHtmlParent.maxLevelGroup + 1\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : constHtmlShowSelectionControl\n            : true\n      \"\n      [style.paddingLeft.px]=\"constHtmlParent.level + 1 | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlParent.maxLevelGroup + 1 : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : false\"\n      [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n      [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n      <div [class]=\"constHtmlParent.classIncludeItemNoData || ''\">\n        @if (constHtmlParent.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 = constHtmlParent.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,
@@ -1008,7 +1008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiComponentsCheckboxSingleComponent,
                         LibsUiPipesCallFunctionInTemplatePipe,
                         LibsUiComponentsRadioSingleComponent,
-                    ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlParent = parentItem();\n  @let constHtmlShowSelectionControl = !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem);\n  @if ((configTemplateGroup.isViewTree && !!items().length) || (constHtmlParent.maxLevelGroup > 2 && constHtmlParent.level > 1)) {\n    <div\n      class=\"libs-ui-list-group-item-line-vertical\"\n      [style.left.px]=\"\n        constHtmlParent.level\n          | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe\n            : constHtmlParent.maxLevelGroup\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : constHtmlShowSelectionControl\n      \"></div>\n  }\n  @if (items() && items().length) {\n    @for (item of items(); track item()) {\n      @let constHtmlItem = item();\n      @let constHtmlItemKey = constHtmlItem[fieldKey()];\n      @let constHtmlChildItems = constHtmlItem[configTemplateGroup.fieldGetItems]?.();\n      @let constHtmlHasChildItems = !!constHtmlChildItems?.length;\n      @let constHtmlCanExpandLevel = constHtmlItem.level < constHtmlItem.maxLevelGroup;\n      @let constHtmlIsLockedSelect = configTemplateGroup.singleSelectItem && constHtmlCanExpandLevel && !constHtmlItem.isAcceptSelectItem;\n      @let constHtmlItemDisable = constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length;\n      @let constHtmlItemChecked = constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length;\n      @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '') + ' w-full';\n      <div>\n        <div\n          [style.marginLeft.px]=\"\n            constHtmlItem.level\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : constHtmlItem.maxLevelGroup\n                : configTemplateGroup.isViewTree\n                : configTemplateGroup.isViewTreeJson\n                : constHtmlShowSelectionControl\n          \"\n          [style.paddingLeft.px]=\"\n            constHtmlItem.level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlItem.maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : constHtmlHasChildItems\n          \"\n          [style.paddingRight.px]=\"\n            constHtmlItem.level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlItem.maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : constHtmlHasChildItems : 'right'\n          \"\n          [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + constHtmlItem?.classInclude\"\n          [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n          [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && constHtmlItemDisable\"\n          [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && constHtmlItemDisable\"\n          [class.cursor-pointer]=\"!disable() && !constHtmlIsLockedSelect && !constHtmlItemDisable\"\n          [class.libs-ui-bg-list-active]=\"constHtmlItemChecked && configTemplateGroup.hasBackgroundColorWhenItemSelected && constHtmlItem.isCheckManual\"\n          (click)=\"handlerChangeChecked(constHtmlItem, constHtmlItemKey, disable() || constHtmlIsLockedSelect)\"\n          (keydown.enter)=\"handlerChangeChecked(constHtmlItem, constHtmlItemKey, disable() || constHtmlIsLockedSelect)\">\n          @if (constHtmlCanExpandLevel && configTemplateGroup.isViewTree) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"constHtmlItem.expand\"\n              (click)=\"handlerToggleExpand($event, item)\"\n              (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n          }\n          @if (constHtmlCanExpandLevel && configTemplateGroup.isViewTreeJson && constHtmlHasChildItems) {\n            <div [class]=\"'p-[5px]'\">\n              <div\n                [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n                [attr.disabled]=\"disable() || constHtmlItemDisable || 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              @if (!configTemplateGroup.isViewRadio) {\n                <libs_ui-components-checkbox-single\n                  [avatarConfig]=\"constHtmlItem.avatarConfig\"\n                  [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && constHtmlHasChildItems)\"\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 && constHtmlItemChecked && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || constHtmlItem.isCheckedByDefaultKey))) &&\n                    !configTemplateGroup.ignoreIconExpandMarginRight\n                  \"\n                  [clickExactly]=\"false\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [disable]=\"disable() || (constHtmlIsLockedSelect && !configTemplateGroup.isViewTreeJson) || constHtmlItemDisable || false\"\n                  [disableLabel]=\"constHtmlItemDisable\"\n                  [label]=\"constHtmlItem.fieldLabel\"\n                  [checked]=\"constHtmlItemChecked\"\n                  [stillOtherOptions]=\"constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                  [classLabelInclude]=\"constHtmlItemChecked && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual ? 'libs-ui-color-default libs-ui-font-h5r' : 'libs-ui-font-h5r'\"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : constHtmlItem : fieldKey() : { valueIsEmpty: { item: constHtmlItem } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : constHtmlItem : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"constHtmlItem.dataPopover\"\n                  [linkImage]=\"configTemplateGroup.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getImage : constHtmlItem | async) : (constHtmlItem[configTemplateGroup.fieldGetAvatarItem || ''] | async)\"\n                  [linkImageError]=\"configTemplateGroup.getLinkImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getLinkImageError : constHtmlItem | async) : ''\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [iconImageClass]=\"constHtmlItem.iconImageClass ? constHtmlItem.iconImageClass : undefined\"\n                  [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outEventPopover)=\"handlerEventPopover($event, constHtmlItem)\"\n                  (outChange)=\"handlerChangeChecked(constHtmlItem)\" />\n              }\n              @if (configTemplateGroup.isViewRadio) {\n                <libs_ui-components-radio-single\n                  [avatarConfig]=\"constHtmlItem.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 && constHtmlHasChildItems) ||\n                    (configTemplateGroup.singleSelectItem && constHtmlCanExpandLevel) ||\n                    constHtmlItemDisable ||\n                    false\n                  \"\n                  [label]=\"constHtmlItem.fieldLabel\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [active]=\"constHtmlItemChecked\"\n                  [classLabelInclude]=\"constHtmlItemChecked && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual ? 'text-[#009cdb] libs-ui-font-h5r ' : ' libs-ui-font-h5r '\"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : constHtmlItem : fieldKey() : { valueIsEmpty: { item: constHtmlItem } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : constHtmlItem : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"constHtmlItem.dataPopover\"\n                  [linkImage]=\"\n                    configTemplateGroup.getImage\n                      ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (constHtmlItem.specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : constHtmlItem | async)\n                      : constHtmlItem[configTemplateGroup.fieldGetAvatarItem || '']\n                  \"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outChange)=\"handlerChangeChecked(constHtmlItem)\" />\n              }\n            </div>\n          </div>\n          @if (constHtmlItemChecked && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || constHtmlItem.isCheckedByDefaultKey)) {\n            <i\n              class=\"libs-ui-icon-check before:!text-[16px]\"\n              [class.!ml-[8px]]=\"constHtmlItem.dataPopover\"\n              [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual\"></i>\n          }\n          @if (constHtmlHasChildItems && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"constHtmlItem.expand\"\n              [class.!ml-[8px]]=\"constHtmlItem.dataPopover\"\n              (click)=\"handlerToggleExpand($event, item)\"\n              (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n          }\n        </div>\n        @if (constHtmlItem.expand || configTemplateGroup.isViewTreeJson) {\n          @if (constHtmlCanExpandLevel && !constHtmlHasChildItems && configTemplateGroup.isViewTree) {\n            <div\n              class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n              [style.marginLeft.px]=\"\n                constHtmlItem.level + 1\n                  | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                    : constHtmlItem.maxLevelGroup + 1\n                    : configTemplateGroup.isViewTree\n                    : configTemplateGroup.isViewTreeJson\n                    : constHtmlShowSelectionControl\n                    : true\n              \"\n              [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n              [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n              <div [class]=\"constHtmlItem.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 (constHtmlHasChildItems) {\n            <libs_ui-components-list-templates_group-item\n              [keySearch]=\"keySearch()\"\n              [items]=\"constHtmlChildItems\"\n              [parentItem]=\"constHtmlItem\"\n              [fieldKey]=\"fieldKey()\"\n              [keysChecked]=\"keysChecked()\"\n              [disable]=\"(disable() || constHtmlItemDisable) && !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) && constHtmlParent.level < constHtmlParent.maxLevelGroup) {\n    <div\n      class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n      [style.marginLeft.px]=\"\n        constHtmlParent.level + 1\n          | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n            : constHtmlParent.maxLevelGroup + 1\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : constHtmlShowSelectionControl\n            : true\n      \"\n      [style.paddingLeft.px]=\"constHtmlParent.level + 1 | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlParent.maxLevelGroup + 1 : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : false\"\n      [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n      [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n      <div [class]=\"constHtmlParent.classIncludeItemNoData || ''\">\n        @if (constHtmlParent.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 = constHtmlParent.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  @let constHtmlParent = parentItem();\n  @let constHtmlShowSelectionControl = !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem);\n  @if ((configTemplateGroup.isViewTree && !!items().length) || (constHtmlParent.maxLevelGroup > 2 && constHtmlParent.level > 1)) {\n    <div\n      class=\"libs-ui-list-group-item-line-vertical\"\n      [style.left.px]=\"\n        constHtmlParent.level\n          | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe\n            : constHtmlParent.maxLevelGroup\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : constHtmlShowSelectionControl\n      \"></div>\n  }\n  @if (items() && items().length) {\n    @for (item of items(); track item()) {\n      @let constHtmlItem = item();\n      @let constHtmlItemKey = constHtmlItem[fieldKey()];\n      @let constHtmlChildItems = constHtmlItem[configTemplateGroup.fieldGetItems]?.();\n      @let constHtmlHasChildItems = !!constHtmlChildItems?.length;\n      @let constHtmlCanExpandLevel = constHtmlItem.level < constHtmlItem.maxLevelGroup;\n      @let constHtmlIsLockedSelect = configTemplateGroup.singleSelectItem && constHtmlCanExpandLevel && !constHtmlItem.isAcceptSelectItem;\n      @let constHtmlItemDisable = constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length;\n      @let constHtmlItemChecked = constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length;\n      @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '') + ' w-full';\n      <div>\n        <div\n          data-list-row\n          [style.marginLeft.px]=\"\n            constHtmlItem.level\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : constHtmlItem.maxLevelGroup\n                : configTemplateGroup.isViewTree\n                : configTemplateGroup.isViewTreeJson\n                : constHtmlShowSelectionControl\n          \"\n          [style.paddingLeft.px]=\"\n            constHtmlItem.level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlItem.maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : constHtmlHasChildItems\n          \"\n          [style.paddingRight.px]=\"\n            constHtmlItem.level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlItem.maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : constHtmlHasChildItems : 'right'\n          \"\n          [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + constHtmlItem?.classInclude\"\n          [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n          [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && constHtmlItemDisable\"\n          [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && constHtmlItemDisable\"\n          [class.cursor-pointer]=\"!disable() && !constHtmlIsLockedSelect && !constHtmlItemDisable\"\n          [class.libs-ui-bg-list-active]=\"constHtmlItemChecked && configTemplateGroup.hasBackgroundColorWhenItemSelected && constHtmlItem.isCheckManual\"\n          (click)=\"handlerChangeChecked(constHtmlItem, constHtmlItemKey, disable() || constHtmlIsLockedSelect)\"\n          (keydown.enter)=\"handlerChangeChecked(constHtmlItem, constHtmlItemKey, disable() || constHtmlIsLockedSelect)\">\n          @if (constHtmlCanExpandLevel && configTemplateGroup.isViewTree) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"constHtmlItem.expand\"\n              (click)=\"handlerToggleExpand($event, item)\"\n              (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n          }\n          @if (constHtmlCanExpandLevel && configTemplateGroup.isViewTreeJson && constHtmlHasChildItems) {\n            <div [class]=\"'p-[5px]'\">\n              <div\n                [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n                [attr.disabled]=\"disable() || constHtmlItemDisable || 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              @if (!configTemplateGroup.isViewRadio) {\n                <libs_ui-components-checkbox-single\n                  [avatarConfig]=\"constHtmlItem.avatarConfig\"\n                  [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && constHtmlHasChildItems)\"\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 && constHtmlItemChecked && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || constHtmlItem.isCheckedByDefaultKey))) &&\n                    !configTemplateGroup.ignoreIconExpandMarginRight\n                  \"\n                  [clickExactly]=\"false\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [disable]=\"disable() || (constHtmlIsLockedSelect && !configTemplateGroup.isViewTreeJson) || constHtmlItemDisable || false\"\n                  [disableLabel]=\"constHtmlItemDisable\"\n                  [label]=\"constHtmlItem.fieldLabel\"\n                  [checked]=\"constHtmlItemChecked\"\n                  [stillOtherOptions]=\"constHtmlItemKey | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                  [classLabelInclude]=\"constHtmlItemChecked && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual ? 'libs-ui-color-default libs-ui-font-h5r' : 'libs-ui-font-h5r'\"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : constHtmlItem : fieldKey() : { valueIsEmpty: { item: constHtmlItem } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : constHtmlItem : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"constHtmlItem.dataPopover\"\n                  [linkImage]=\"configTemplateGroup.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getImage : constHtmlItem | async) : (constHtmlItem[configTemplateGroup.fieldGetAvatarItem || ''] | async)\"\n                  [linkImageError]=\"configTemplateGroup.getLinkImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getLinkImageError : constHtmlItem | async) : ''\"\n                  [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                  [iconImageClass]=\"constHtmlItem.iconImageClass ? constHtmlItem.iconImageClass : undefined\"\n                  [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outEventPopover)=\"handlerEventPopover($event, constHtmlItem)\"\n                  (outChange)=\"handlerChangeChecked(constHtmlItem)\" />\n              }\n              @if (configTemplateGroup.isViewRadio) {\n                <libs_ui-components-radio-single\n                  [avatarConfig]=\"constHtmlItem.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 && constHtmlHasChildItems) ||\n                    (configTemplateGroup.singleSelectItem && constHtmlCanExpandLevel) ||\n                    constHtmlItemDisable ||\n                    false\n                  \"\n                  [label]=\"constHtmlItem.fieldLabel\"\n                  [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n                  [active]=\"constHtmlItemChecked\"\n                  [classLabelInclude]=\"constHtmlItemChecked && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual ? 'text-[#009cdb] libs-ui-font-h5r ' : ' libs-ui-font-h5r '\"\n                  [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : constHtmlItem : fieldKey() : { valueIsEmpty: { item: constHtmlItem } } | async\"\n                  [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : constHtmlItem : fieldKey() : { valueIs0: 0 } | async\"\n                  [popover]=\"constHtmlItem.dataPopover\"\n                  [linkImage]=\"\n                    configTemplateGroup.getImage\n                      ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (constHtmlItem.specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : constHtmlItem | async)\n                      : constHtmlItem[configTemplateGroup.fieldGetAvatarItem || '']\n                  \"\n                  (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                  (outChange)=\"handlerChangeChecked(constHtmlItem)\" />\n              }\n            </div>\n          </div>\n          @if (constHtmlItemChecked && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || constHtmlItem.isCheckedByDefaultKey)) {\n            <i\n              class=\"libs-ui-icon-check before:!text-[16px]\"\n              [class.!ml-[8px]]=\"constHtmlItem.dataPopover\"\n              [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && constHtmlItem.isCheckManual\"></i>\n          }\n          @if (constHtmlHasChildItems && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n            <i\n              class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n              [class.rotate-90]=\"constHtmlItem.expand\"\n              [class.!ml-[8px]]=\"constHtmlItem.dataPopover\"\n              (click)=\"handlerToggleExpand($event, item)\"\n              (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n          }\n        </div>\n        @if (constHtmlItem.expand || configTemplateGroup.isViewTreeJson) {\n          @if (constHtmlCanExpandLevel && !constHtmlHasChildItems && configTemplateGroup.isViewTree) {\n            <div\n              data-list-row\n              class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n              [style.marginLeft.px]=\"\n                constHtmlItem.level + 1\n                  | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                    : constHtmlItem.maxLevelGroup + 1\n                    : configTemplateGroup.isViewTree\n                    : configTemplateGroup.isViewTreeJson\n                    : constHtmlShowSelectionControl\n                    : true\n              \"\n              [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n              [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n              <div [class]=\"constHtmlItem.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 (constHtmlHasChildItems) {\n            <libs_ui-components-list-templates_group-item\n              [keySearch]=\"keySearch()\"\n              [items]=\"constHtmlChildItems\"\n              [parentItem]=\"constHtmlItem\"\n              [fieldKey]=\"fieldKey()\"\n              [keysChecked]=\"keysChecked()\"\n              [disable]=\"(disable() || constHtmlItemDisable) && !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) && constHtmlParent.level < constHtmlParent.maxLevelGroup) {\n    <div\n      data-list-row\n      class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n      [style.marginLeft.px]=\"\n        constHtmlParent.level + 1\n          | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n            : constHtmlParent.maxLevelGroup + 1\n            : configTemplateGroup.isViewTree\n            : configTemplateGroup.isViewTreeJson\n            : constHtmlShowSelectionControl\n            : true\n      \"\n      [style.paddingLeft.px]=\"constHtmlParent.level + 1 | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: constHtmlParent.maxLevelGroup + 1 : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : false\"\n      [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n      [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n      <div [class]=\"constHtmlParent.classIncludeItemNoData || ''\">\n        @if (constHtmlParent.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 = constHtmlParent.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 */
@@ -1023,9 +1023,26 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
     calculatorHeighItemSuccess = signal(false);
     keyFetch = signal('');
     PATTERN_FAKE_ID = 'fake-id-';
+    elementScrollContent = viewChild('elementScrollContent');
+    resizeObserverCorrectHeight;
     mappingItemsChecked = signal(new Map());
     selectFirstItem = signal(false);
     firstItemSelected = signal(undefined);
+    constructor() {
+        super();
+        // Theo dõi content bằng ResizeObserver: mỗi lần content đổi kích thước (expand/collapse/load data)
+        // sẽ đo lại chiều cao thực → set đúng viewport. Event-driven, thay cho polling interval.
+        effect(() => {
+            const content = this.elementScrollContent()?.nativeElement;
+            this.resizeObserverCorrectHeight?.disconnect();
+            if (!content) {
+                return;
+            }
+            this.resizeObserverCorrectHeight = new ResizeObserver(() => this.correctHeightViewPortByRealRows());
+            this.resizeObserverCorrectHeight.observe(content);
+        });
+        this.destroyRef.onDestroy(() => this.resizeObserverCorrectHeight?.disconnect());
+    }
     ngOnInit() {
         if (!this.config()?.configTemplateGroup?.()) {
             return;
@@ -1558,6 +1575,40 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         this.setHeightViewPort(callBackCalculatorHeightSuccess);
         this.checkViewPortScroll(checkLoadItem);
     }
+    // Công thức count × heightItem trong abstract giả định mọi dòng cao bằng nhau (đo từ 1 dòng lá),
+    // nhưng dòng header group / dòng "không có kết quả" cao khác dòng lá → viewport bị thiếu, cắt dòng cuối.
+    // Đo lại chiều cao THỰC của số dòng cần hiển thị (theo maxItemShow) để set đúng viewport.
+    // Được gọi bởi ResizeObserver mỗi khi content đổi kích thước (expand/collapse/load) — event-driven, không polling.
+    correctHeightViewPortByRealRows() {
+        const maxRows = this.maxItemShow();
+        if (!maxRows || maxRows === -1) {
+            return;
+        }
+        const scroll = this.elementScroll()?.nativeElement;
+        if (!scroll) {
+            return;
+        }
+        const rows = scroll.querySelectorAll('[data-list-row]');
+        if (!rows.length) {
+            return;
+        }
+        let contentHeight;
+        if (rows.length <= maxRows) {
+            contentHeight = scroll.scrollHeight;
+        }
+        else {
+            const contentTop = scroll.getBoundingClientRect().top;
+            const lastRow = rows[maxRows - 1];
+            contentHeight = lastRow.getBoundingClientRect().bottom - contentTop;
+        }
+        const configTemplateGroup = this.configTemplateGroup();
+        const heightByCheckboxAll = configTemplateGroup?.configCheckboxCheckAll ? 27 : 0;
+        const heightConfigButtonSelectAndUndSelectItem = configTemplateGroup?.configButtonSelectAndUndSelectItem ? 27 : 0;
+        const height = Math.ceil(contentHeight) + heightByCheckboxAll + heightConfigButtonSelectAndUndSelectItem;
+        if (height && height !== this.heightViewPort()) {
+            this.heightViewPort.set(height);
+        }
+    }
     expandAllItemsInGroup(item) {
         const configTemplateGroup = this.configTemplateGroup();
         if (!configTemplateGroup || !item) {
@@ -1763,8 +1814,8 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
         });
         return labelSearch ?? item().fieldLabel;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListGroupComponent, isStandalone: true, selector: "libs_ui-components-list-templates_group", usesInheritance: true, ngImport: i0, template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort() + 'px' : '100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div\n    class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n        <div [class]=\"'flex items-center bg-[#ffffff] ' + (configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6r'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n          <div class=\"text-[#999999]\">|</div>\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6s'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n        </div>\n      }\n      @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n        <div [class]=\"'flex libs-ui-border-bottom-general ' + (configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n          <libs_ui-components-checkbox-single\n            [label]=\"configCheckBox.label ?? 'i18n_all'\"\n            [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n            [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n            [disable]=\"constHtmlDisable\"\n            (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n            (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n        </div>\n      }\n      @if (items() && items().length) {\n        <div class=\"w-full h-full relative flex\">\n          <div\n            LibsUiComponentsScrollOverlayDirective\n            class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n            @for (item of items(); track item(); let first = $first; let last = $last) {\n              <div\n                #itemRef\n                [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n                class=\"flex flex-col relative\">\n                @let constHtmlPadding = level() * (configTemplateGroup.isViewTree ? 8 : 16);\n                <div\n                  class=\"flex items-center py-[6px]\"\n                  [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                  [style.paddingLeft.px]=\"constHtmlPadding\"\n                  [style.paddingRight.px]=\"constHtmlPadding\"\n                  (click)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\"\n                  (keydown.enter)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\">\n                  @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n                    <i\n                      class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                      [class.rotate-90]=\"item().expand\"\n                      (click)=\"handlerToggleExpand($event, item)\"\n                      (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                  }\n                  <div\n                    class=\"flex\"\n                    [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                    [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n                    @if (!configTemplateGroup.isViewRadio) {\n                      <libs_ui-components-checkbox-single\n                        [avatarConfig]=\"item().avatarConfig\"\n                        [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                        [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                        [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                        [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                        [class.w-full]=\"\n                          !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                          !(\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          )\n                        \"\n                        [class.max-w-[calc(100%-24px)]]=\"\n                          (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                          (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                        \"\n                        [label]=\"item().fieldLabel\"\n                        [popover]=\"item().dataPopover\"\n                        [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                        [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                        [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                        [linkImage]=\"\n                          configTemplateGroup.getImage\n                            ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                            : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                        \"\n                        [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                        [classLabelInclude]=\"\n                          (configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ' : ' libs-ui-font-h6s ') +\n                          (configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree ? '' : ' uppercase ')\n                        \"\n                        [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                        [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                        [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                        (outChange)=\"handlerChangeChecked($event.checked, item, true)\"\n                        (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                        (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n                    }\n\n                    @if (configTemplateGroup.isViewRadio) {\n                      <libs_ui-components-radio-single\n                        [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                        [avatarConfig]=\"item().avatarConfig\"\n                        [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                        [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                        [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                        [class.w-full]=\"\n                          !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                          !(\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          )\n                        \"\n                        [class.max-w-[calc(100%-24px)]]=\"\n                          (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                          (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                        \"\n                        [label]=\"item().fieldLabel\"\n                        [popover]=\"item().dataPopover\"\n                        [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                        [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                        [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                        [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                        [linkImage]=\"\n                          configTemplateGroup.getImage\n                            ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                            : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                        \"\n                        [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '' : ' uppercase')\"\n                        [disable]=\"\n                          disable() ||\n                          (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                          configTemplateGroup.ignoreCheckboxGroup ||\n                          configTemplateGroup.singleSelectItem ||\n                          (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n                        \"\n                        [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                        (outChange)=\"handlerChangeChecked($event.active, item, true)\"\n                        (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                        (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n                    }\n\n                    @if (item().buttonInGroup; as buttonInGroup) {\n                      <libs_ui-components-buttons-button\n                        [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                        [label]=\"buttonInGroup.label || ' '\"\n                        [classIconLeft]=\"(buttonInGroup.classIconLeft || '') + ' flex mr-[8px] !text-[8px]'\"\n                        [classInclude]=\"buttonInGroup.classInclude\"\n                        [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5r'\"\n                        [disable]=\"buttonInGroup.disable || disable() || false\"\n                        (outClick)=\"handlerClickButtonGroup(buttonInGroup, item())\" />\n                    }\n                  </div>\n\n                  @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n                    <i\n                      class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                      [class.!ml-[8px]]=\"item().dataPopover\"\n                      [class.rotate-90]=\"item().expand\"\n                      (click)=\"handlerToggleExpand($event, item)\"\n                      (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                  }\n                </div>\n                @if (item().expand && calculatorHeighItemSuccess()) {\n                  <libs_ui-components-list-templates_group-item\n                    [keySearch]=\"keySearch()\"\n                    [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n                    [parentItem]=\"item()\"\n                    [fieldKey]=\"fieldKey()\"\n                    [keysChecked]=\"keysChecked()\"\n                    [disable]=\"disable()\"\n                    [keysDisableItem]=\"keysDisableItem() || []\"\n                    [configTemplateGroup]=\"configTemplateGroup\"\n                    [config]=\"config()\"\n                    [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n                    (outChangeView)=\"handlerChangeView()\"\n                    (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                    (outChange)=\"handlerChangeItemChecked($event.item)\" />\n                }\n                @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n                  <div\n                    class=\"libs-ui-list-group-line\"\n                    [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"></div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div\n          class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata ? configTemplateGroup.classIncludeNodata : '' }}\"\n          [style.marginLeft.px]=\"\n            0\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : 2\n                : configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                : true\n          \"\n          [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n          [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_no_data_yet';\n            <div>{{ constHtmlTextNoData | translate }}</div>\n          }\n          @if (keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <div>{{ constHtmlTextSearchNoData | translate }}</div>\n          }\n        </div>\n      }\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorMarginLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorMarginLeftItemPipe" }, { kind: "component", type: LibsUiComponentsListGroupItemComponent, selector: "libs_ui-components-list-templates_group-item", inputs: ["items", "configTemplateGroup", "keySearch", "fieldKey", "keysChecked", "keysDisableItem", "parentItem", "disable", "disableLabel", "config", "keysStillOtherOptions"], outputs: ["outChangeView", "outChange", "outChangStageFlagMousePopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListGroupComponent, isStandalone: true, selector: "libs_ui-components-list-templates_group", viewQueries: [{ propertyName: "elementScrollContent", first: true, predicate: ["elementScrollContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort() + 'px' : '100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div\n    class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n        <div [class]=\"'flex items-center bg-[#ffffff] ' + (configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6r'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n          <div class=\"text-[#999999]\">|</div>\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6s'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n        </div>\n      }\n      @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n        <div [class]=\"'flex libs-ui-border-bottom-general ' + (configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n          <libs_ui-components-checkbox-single\n            [label]=\"configCheckBox.label ?? 'i18n_all'\"\n            [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n            [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n            [disable]=\"constHtmlDisable\"\n            (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n            (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n        </div>\n      }\n      @if (items() && items().length) {\n        <div class=\"w-full h-full relative flex\">\n          <div\n            #elementScroll\n            LibsUiComponentsScrollOverlayDirective\n            class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n            <div\n              #elementScrollContent\n              class=\"w-full flex flex-col\">\n              @for (item of items(); track item(); let first = $first; let last = $last) {\n                <div\n                  #itemRef\n                  [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n                  class=\"flex flex-col relative\">\n                  @let constHtmlPadding = level() * (configTemplateGroup.isViewTree ? 8 : 16);\n                  <div\n                    data-list-row\n                    class=\"flex items-center py-[6px]\"\n                    [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                    [style.paddingLeft.px]=\"constHtmlPadding\"\n                    [style.paddingRight.px]=\"constHtmlPadding\"\n                    (click)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\"\n                    (keydown.enter)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\">\n                    @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n                      <i\n                        class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                    <div\n                      class=\"flex\"\n                      [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                      [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n                      @if (!configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-checkbox-single\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [classLabelInclude]=\"\n                            (configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ' : ' libs-ui-font-h6s ') +\n                            (configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree ? '' : ' uppercase ')\n                          \"\n                          [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                          [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                          (outChange)=\"handlerChangeChecked($event.checked, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-radio-single\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '' : ' uppercase')\"\n                          [disable]=\"\n                            disable() ||\n                            (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                            configTemplateGroup.ignoreCheckboxGroup ||\n                            configTemplateGroup.singleSelectItem ||\n                            (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n                          \"\n                          [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          (outChange)=\"handlerChangeChecked($event.active, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (item().buttonInGroup; as buttonInGroup) {\n                        <libs_ui-components-buttons-button\n                          [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                          [label]=\"buttonInGroup.label || ' '\"\n                          [classIconLeft]=\"(buttonInGroup.classIconLeft || '') + ' flex mr-[8px] !text-[8px]'\"\n                          [classInclude]=\"buttonInGroup.classInclude\"\n                          [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5r'\"\n                          [disable]=\"buttonInGroup.disable || disable() || false\"\n                          (outClick)=\"handlerClickButtonGroup(buttonInGroup, item())\" />\n                      }\n                    </div>\n\n                    @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n                      <i\n                        class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.!ml-[8px]]=\"item().dataPopover\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                  </div>\n                  @if (item().expand && calculatorHeighItemSuccess()) {\n                    <libs_ui-components-list-templates_group-item\n                      [keySearch]=\"keySearch()\"\n                      [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n                      [parentItem]=\"item()\"\n                      [fieldKey]=\"fieldKey()\"\n                      [keysChecked]=\"keysChecked()\"\n                      [disable]=\"disable()\"\n                      [keysDisableItem]=\"keysDisableItem() || []\"\n                      [configTemplateGroup]=\"configTemplateGroup\"\n                      [config]=\"config()\"\n                      [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n                      (outChangeView)=\"handlerChangeView()\"\n                      (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                      (outChange)=\"handlerChangeItemChecked($event.item)\" />\n                  }\n                  @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n                    <div\n                      class=\"libs-ui-list-group-line\"\n                      [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"></div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div\n          class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata ? configTemplateGroup.classIncludeNodata : '' }}\"\n          [style.marginLeft.px]=\"\n            0\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : 2\n                : configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                : true\n          \"\n          [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n          [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_no_data_yet';\n            <div>{{ constHtmlTextNoData | translate }}</div>\n          }\n          @if (keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <div>{{ constHtmlTextSearchNoData | translate }}</div>\n          }\n        </div>\n      }\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"], dependencies: [{ kind: "ngmodule", type: VirtualScrollerModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorMarginLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorMarginLeftItemPipe" }, { kind: "component", type: LibsUiComponentsListGroupItemComponent, selector: "libs_ui-components-list-templates_group-item", inputs: ["items", "configTemplateGroup", "keySearch", "fieldKey", "keysChecked", "keysDisableItem", "parentItem", "disable", "disableLabel", "config", "keysStillOtherOptions"], outputs: ["outChangeView", "outChange", "outChangStageFlagMousePopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListGroupComponent, decorators: [{
             type: Component,
@@ -1781,8 +1832,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiPipesCallFunctionInTemplatePipe,
                         LibsUiComponentsListGroupCalculatorMarginLeftItemPipe,
                         LibsUiComponentsListGroupItemComponent,
-                    ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort() + 'px' : '100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div\n    class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n        <div [class]=\"'flex items-center bg-[#ffffff] ' + (configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6r'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n          <div class=\"text-[#999999]\">|</div>\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6s'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n        </div>\n      }\n      @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n        <div [class]=\"'flex libs-ui-border-bottom-general ' + (configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n          <libs_ui-components-checkbox-single\n            [label]=\"configCheckBox.label ?? 'i18n_all'\"\n            [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n            [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n            [disable]=\"constHtmlDisable\"\n            (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n            (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n        </div>\n      }\n      @if (items() && items().length) {\n        <div class=\"w-full h-full relative flex\">\n          <div\n            LibsUiComponentsScrollOverlayDirective\n            class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n            @for (item of items(); track item(); let first = $first; let last = $last) {\n              <div\n                #itemRef\n                [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n                class=\"flex flex-col relative\">\n                @let constHtmlPadding = level() * (configTemplateGroup.isViewTree ? 8 : 16);\n                <div\n                  class=\"flex items-center py-[6px]\"\n                  [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                  [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                  [style.paddingLeft.px]=\"constHtmlPadding\"\n                  [style.paddingRight.px]=\"constHtmlPadding\"\n                  (click)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\"\n                  (keydown.enter)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\">\n                  @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n                    <i\n                      class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                      [class.rotate-90]=\"item().expand\"\n                      (click)=\"handlerToggleExpand($event, item)\"\n                      (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                  }\n                  <div\n                    class=\"flex\"\n                    [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                    [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n                    @if (!configTemplateGroup.isViewRadio) {\n                      <libs_ui-components-checkbox-single\n                        [avatarConfig]=\"item().avatarConfig\"\n                        [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                        [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                        [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                        [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                        [class.w-full]=\"\n                          !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                          !(\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          )\n                        \"\n                        [class.max-w-[calc(100%-24px)]]=\"\n                          (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                          (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                        \"\n                        [label]=\"item().fieldLabel\"\n                        [popover]=\"item().dataPopover\"\n                        [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                        [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                        [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                        [linkImage]=\"\n                          configTemplateGroup.getImage\n                            ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                            : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                        \"\n                        [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                        [classLabelInclude]=\"\n                          (configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ' : ' libs-ui-font-h6s ') +\n                          (configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree ? '' : ' uppercase ')\n                        \"\n                        [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                        [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                        [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                        (outChange)=\"handlerChangeChecked($event.checked, item, true)\"\n                        (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                        (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n                    }\n\n                    @if (configTemplateGroup.isViewRadio) {\n                      <libs_ui-components-radio-single\n                        [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                        [avatarConfig]=\"item().avatarConfig\"\n                        [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                        [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                        [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                        [class.w-full]=\"\n                          !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                          !(\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          )\n                        \"\n                        [class.max-w-[calc(100%-24px)]]=\"\n                          (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                          (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                        \"\n                        [label]=\"item().fieldLabel\"\n                        [popover]=\"item().dataPopover\"\n                        [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                        [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                        [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                        [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                        [linkImage]=\"\n                          configTemplateGroup.getImage\n                            ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                            : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                        \"\n                        [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '' : ' uppercase')\"\n                        [disable]=\"\n                          disable() ||\n                          (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                          configTemplateGroup.ignoreCheckboxGroup ||\n                          configTemplateGroup.singleSelectItem ||\n                          (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n                        \"\n                        [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                        (outChange)=\"handlerChangeChecked($event.active, item, true)\"\n                        (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                        (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n                    }\n\n                    @if (item().buttonInGroup; as buttonInGroup) {\n                      <libs_ui-components-buttons-button\n                        [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                        [label]=\"buttonInGroup.label || ' '\"\n                        [classIconLeft]=\"(buttonInGroup.classIconLeft || '') + ' flex mr-[8px] !text-[8px]'\"\n                        [classInclude]=\"buttonInGroup.classInclude\"\n                        [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5r'\"\n                        [disable]=\"buttonInGroup.disable || disable() || false\"\n                        (outClick)=\"handlerClickButtonGroup(buttonInGroup, item())\" />\n                    }\n                  </div>\n\n                  @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n                    <i\n                      class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                      [class.!ml-[8px]]=\"item().dataPopover\"\n                      [class.rotate-90]=\"item().expand\"\n                      (click)=\"handlerToggleExpand($event, item)\"\n                      (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                  }\n                </div>\n                @if (item().expand && calculatorHeighItemSuccess()) {\n                  <libs_ui-components-list-templates_group-item\n                    [keySearch]=\"keySearch()\"\n                    [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n                    [parentItem]=\"item()\"\n                    [fieldKey]=\"fieldKey()\"\n                    [keysChecked]=\"keysChecked()\"\n                    [disable]=\"disable()\"\n                    [keysDisableItem]=\"keysDisableItem() || []\"\n                    [configTemplateGroup]=\"configTemplateGroup\"\n                    [config]=\"config()\"\n                    [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n                    (outChangeView)=\"handlerChangeView()\"\n                    (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                    (outChange)=\"handlerChangeItemChecked($event.item)\" />\n                }\n                @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n                  <div\n                    class=\"libs-ui-list-group-line\"\n                    [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"></div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div\n          class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata ? configTemplateGroup.classIncludeNodata : '' }}\"\n          [style.marginLeft.px]=\"\n            0\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : 2\n                : configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                : true\n          \"\n          [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n          [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_no_data_yet';\n            <div>{{ constHtmlTextNoData | translate }}</div>\n          }\n          @if (keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <div>{{ constHtmlTextSearchNoData | translate }}</div>\n          }\n        </div>\n      }\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"] }]
-        }] });
+                    ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n  @let constHtmlHeightViewPort = heightViewPort() ? heightViewPort() + 'px' : '100%';\n  @let constHtmlDisable = loading() || disable() || false;\n  <div\n    class=\"libs-ui-list-group overflow-[hidden]\"\n    [style.height]=\"constHtmlHeightViewPort\">\n    <div class=\"flex flex-col w-full h-full relative min-h-[28px]\">\n      @if (items().length && configTemplateGroup.configButtonSelectAndUndSelectItem?.(); as configButtonSelectItem) {\n        <div [class]=\"'flex items-center bg-[#ffffff] ' + (configButtonSelectItem.classInclude ?? 'libs-ui-border-bottom-general')\">\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonCheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonCheckAll?.label ?? 'i18n_select_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonCheckAll?.classInclude || 'pr-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonCheckAll?.classLabel || 'libs-ui-font-h6r'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(true)\" />\n          <div class=\"text-[#999999]\">|</div>\n          <libs_ui-components-buttons-button\n            [type]=\"configButtonSelectItem.buttonUncheckAll?.type ?? 'button-link-primary'\"\n            [label]=\"configButtonSelectItem.buttonUncheckAll?.label ?? 'i18n_unselect_all_searched_results'\"\n            [classInclude]=\"configButtonSelectItem.buttonUncheckAll?.classInclude || 'pl-[8px]'\"\n            [classLabel]=\"configButtonSelectItem.buttonUncheckAll?.classLabel || 'libs-ui-font-h6s'\"\n            [disable]=\"constHtmlDisable\"\n            (outClick)=\"handlerCheckedOrUnCheckedAll(false)\" />\n        </div>\n      }\n      @if (items().length && configTemplateGroup.configCheckboxCheckAll?.(); as configCheckBox) {\n        <div [class]=\"'flex libs-ui-border-bottom-general ' + (configTemplateGroup.classIncludeHasConfigCheckBoxAll ?? ' bg-[#ffffff]')\">\n          <libs_ui-components-checkbox-single\n            [label]=\"configCheckBox.label ?? 'i18n_all'\"\n            [classLabelInclude]=\"configCheckBox.classLabelInclude || ''\"\n            [checked]=\"totalItemChecked() >= totalItem() && totalItem() > 0\"\n            [disable]=\"constHtmlDisable\"\n            (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n            (outChange)=\"handlerCheckedOrUnCheckedAll($event.checked)\" />\n        </div>\n      }\n      @if (items() && items().length) {\n        <div class=\"w-full h-full relative flex\">\n          <div\n            #elementScroll\n            LibsUiComponentsScrollOverlayDirective\n            class=\"w-full h-full absolute top-0 left-0 {{ configTemplateGroup.classIncludeGroup ? configTemplateGroup.classIncludeGroup : '' }}\">\n            <div\n              #elementScrollContent\n              class=\"w-full flex flex-col\">\n              @for (item of items(); track item(); let first = $first; let last = $last) {\n                <div\n                  #itemRef\n                  [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"\n                  class=\"flex flex-col relative\">\n                  @let constHtmlPadding = level() * (configTemplateGroup.isViewTree ? 8 : 16);\n                  <div\n                    data-list-row\n                    class=\"flex items-center py-[6px]\"\n                    [class.libs-ui-bg-list-hover]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.libs-ui-bg-list-hover-active]=\"!configTemplateGroup.ignoreClickLabelGroup\"\n                    [class.!cursor-pointer]=\"!configTemplateGroup.ignoreClickLabelGroup && (configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\"\n                    [style.paddingLeft.px]=\"constHtmlPadding\"\n                    [style.paddingRight.px]=\"constHtmlPadding\"\n                    (click)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\"\n                    (keydown.enter)=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem ? handlerToggleExpand($event, item) : undefined\">\n                    @if (configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree) {\n                      <i\n                        class=\"cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                    <div\n                      class=\"flex\"\n                      [class.w-full]=\"configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n                      [class.w-[calc(100%-16px)]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\">\n                      @if (!configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-checkbox-single\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [classLabelInclude]=\"\n                            (configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : configTemplateGroup.isViewTree ? ' libs-ui-font-h6r ' : ' libs-ui-font-h6s ') +\n                            (configTemplateGroup.ignoreTextUppercaseLabelGroup || configTemplateGroup.isViewTree ? '' : ' uppercase ')\n                          \"\n                          [disable]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n                          [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n                          (outChange)=\"handlerChangeChecked($event.checked, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreCheckboxGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (configTemplateGroup.isViewRadio) {\n                        <libs_ui-components-radio-single\n                          [class.ml-[8px]]=\"configTemplateGroup.iconExpand === 'left' || configTemplateGroup.isViewTree\"\n                          [avatarConfig]=\"item().avatarConfig\"\n                          [ignoreRadio]=\"configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem\"\n                          [class]=\"configTemplateGroup.classIncludeItem || ''\"\n                          [class.w-auto]=\"configTemplateGroup.isViewTree\"\n                          [class.w-full]=\"\n                            !item()[configTemplateGroup.fieldGetItems]?.()?.length &&\n                            !(\n                              (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                              (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                            )\n                          \"\n                          [class.max-w-[calc(100%-24px)]]=\"\n                            (configTemplateGroup.isViewTree || configTemplateGroup.widthLabelSub24WhenNotTreeView) &&\n                            (configTemplateGroup.iconExpand === 'left' || (configTemplateGroup.iconExpand === 'right' && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)))\n                          \"\n                          [label]=\"item().fieldLabel\"\n                          [popover]=\"item().dataPopover\"\n                          [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletGroup : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n                          [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletGroup : item() : fieldKey() : { valueIs0: 0 } | async\"\n                          [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? zIndex()\"\n                          [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n                          [linkImage]=\"\n                            configTemplateGroup.getImage\n                              ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n                              : item()[configTemplateGroup.fieldGetAvatarItem || '']\n                          \"\n                          [classLabelInclude]=\"(configTemplateGroup.classLabelItem ? configTemplateGroup.classLabelItem : 'libs-ui-font-h6s ') + (configTemplateGroup.ignoreTextUppercaseLabelGroup ? '' : ' uppercase')\"\n                          [disable]=\"\n                            disable() ||\n                            (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n                            configTemplateGroup.ignoreCheckboxGroup ||\n                            configTemplateGroup.singleSelectItem ||\n                            (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n                          \"\n                          [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n                          (outChange)=\"handlerChangeChecked($event.active, item, true)\"\n                          (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                          (outClickLabel)=\"handlerToggleExpand('clickLabel', item, configTemplateGroup.ignoreRadioGroup || configTemplateGroup.singleSelectItem)\" />\n                      }\n\n                      @if (item().buttonInGroup; as buttonInGroup) {\n                        <libs_ui-components-buttons-button\n                          [type]=\"buttonInGroup.type || 'button-link-primary'\"\n                          [label]=\"buttonInGroup.label || ' '\"\n                          [classIconLeft]=\"(buttonInGroup.classIconLeft || '') + ' flex mr-[8px] !text-[8px]'\"\n                          [classInclude]=\"buttonInGroup.classInclude\"\n                          [classLabel]=\"buttonInGroup.classLabel || 'libs-ui-font-h5r'\"\n                          [disable]=\"buttonInGroup.disable || disable() || false\"\n                          (outClick)=\"handlerClickButtonGroup(buttonInGroup, item())\" />\n                      }\n                    </div>\n\n                    @if (configTemplateGroup.iconExpand === 'right' && !configTemplateGroup.isViewTree && (!configTemplateGroup.searchAllLevel || !!item()[configTemplateGroup.fieldGetItems]?.()?.length)) {\n                      <i\n                        class=\"flex items-center cursor-pointer libs-ui-icon-chevron-right before:!text-[16px]\"\n                        [class.!ml-[8px]]=\"item().dataPopover\"\n                        [class.rotate-90]=\"item().expand\"\n                        (click)=\"handlerToggleExpand($event, item)\"\n                        (keydown.enter)=\"handlerToggleExpand($event, item)\"></i>\n                    }\n                  </div>\n                  @if (item().expand && calculatorHeighItemSuccess()) {\n                    <libs_ui-components-list-templates_group-item\n                      [keySearch]=\"keySearch()\"\n                      [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n                      [parentItem]=\"item()\"\n                      [fieldKey]=\"fieldKey()\"\n                      [keysChecked]=\"keysChecked()\"\n                      [disable]=\"disable()\"\n                      [keysDisableItem]=\"keysDisableItem() || []\"\n                      [configTemplateGroup]=\"configTemplateGroup\"\n                      [config]=\"config()\"\n                      [keysStillOtherOptions]=\"keysStillOtherOptions()\"\n                      (outChangeView)=\"handlerChangeView()\"\n                      (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n                      (outChange)=\"handlerChangeItemChecked($event.item)\" />\n                  }\n                  @if (!last && !configTemplateGroup.ignoreGroupLine && calculatorHeighItemSuccess()) {\n                    <div\n                      class=\"libs-ui-list-group-line\"\n                      [style.marginTop.px]=\"!configTemplateGroup.ignoreGroupLine ? configTemplateGroup.marginTopHasLine || 4 : 0\"></div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n      @if (!items() || !items().length) {\n        <div\n          class=\"libs-ui-font-h5r text-[#c1c1c1] relative {{ configTemplateGroup.classIncludeNodata ? configTemplateGroup.classIncludeNodata : '' }}\"\n          [style.marginLeft.px]=\"\n            0\n              | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n                : 2\n                : configTemplateGroup.isViewTree || configTemplateGroup.iconExpand === 'left'\n                : configTemplateGroup.isViewTreeJson\n                : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n                : true\n          \"\n          [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n          [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n          @if (!keySearch() && !loading()) {\n            @let constHtmlTextNoData = config()?.textNoData || 'i18n_no_data_yet';\n            <div>{{ constHtmlTextNoData | translate }}</div>\n          }\n          @if (keySearch() && !loading()) {\n            @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n            <div>{{ constHtmlTextSearchNoData | translate }}</div>\n          }\n        </div>\n      }\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".libs-ui-list-group{display:flex;flex-direction:column;width:100%}.libs-ui-list-group .libs-ui-list-group-line{width:100%;height:1px;background-color:#e6e7ea}.libs-ui-list-group [class*=libs-ui-icon-chevron]:before{color:#6a7383}\n"] }]
+        }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class LibsUiComponentsListRadioComponent extends LibsUiComponentsListTemplatesComponentAbstract {