@libs-ui/components-list 0.2.346-5 → 0.2.346-7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/defines/list.define.d.ts +66 -1
  2. package/esm2022/defines/list.define.mjs +186 -1
  3. package/esm2022/interfaces/config-item.interface.mjs +15 -2
  4. package/esm2022/interfaces/index.mjs +1 -1
  5. package/esm2022/templates/group/group.component.mjs +4 -4
  6. package/esm2022/templates/group/item/item.component.mjs +3 -3
  7. package/esm2022/templates/group/pipes/calculator-padding-left-item.pipe.mjs +5 -2
  8. package/fesm2022/libs-ui-components-list.mjs +209 -8
  9. package/fesm2022/libs-ui-components-list.mjs.map +1 -1
  10. package/interfaces/config-item.interface.d.ts +5 -0
  11. package/package.json +23 -23
  12. package/templates/group/pipes/calculator-padding-left-item.pipe.d.ts +1 -1
package/fesm2022/libs-ui-components-list.mjs CHANGED
@@ -7,7 +7,7 @@ import { LibsUiComponentsInputsSearchComponent } from '@libs-ui/components-input
7
7
  import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
8
8
  import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
9
9
  import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
10
- import { deleteUnicode, isEmpty, convertObjectToSignal, get, isNil, convertSignalToObject, cloneDeep, escapeHtml, uuid, set, ERROR_MESSAGE_EMPTY_VALID, isEqual } from '@libs-ui/utils';
10
+ import { deleteUnicode, isEmpty, convertObjectToSignal, get, isNil, convertSignalToObject, cloneDeep, escapeHtml, uuid, set, CHARACTER_DATA_EMPTY, ERROR_MESSAGE_EMPTY_VALID, isEqual } from '@libs-ui/utils';
11
11
  import * as i1 from '@ngx-translate/core';
12
12
  import { TranslateModule, TranslateService } from '@ngx-translate/core';
13
13
  import { lastValueFrom, interval, of, range, Subject, timer } from 'rxjs';
@@ -886,7 +886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
886
886
  }] });
887
887
 
888
888
  class LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe {
889
- transform(level, maxLevel, isTreeView, isTreeViewJson, hasChild) {
889
+ transform(level, maxLevel, isTreeView, isTreeViewJson, hasChild, position) {
890
890
  if (isTreeViewJson) {
891
891
  if (level === 1 || !hasChild) {
892
892
  return 16;
@@ -894,6 +894,9 @@ class LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe {
894
894
  return 8;
895
895
  }
896
896
  if (isTreeView || level > 2) {
897
+ if (position === 'right') {
898
+ return 16;
899
+ }
897
900
  return 0;
898
901
  }
899
902
  return (level - 1) * 16;
@@ -959,7 +962,7 @@ class LibsUiComponentsListGroupItemComponent {
959
962
  this.outChangStageFlagMousePopover.emit(flag);
960
963
  }
961
964
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
962
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListGroupItemComponent, isStandalone: true, selector: "libs_ui-components-list-templates_group-item", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configTemplateGroup: { classPropertyName: "configTemplateGroup", publicName: "configTemplateGroup", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, keysChecked: { classPropertyName: "keysChecked", publicName: "keysChecked", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, parentItem: { classPropertyName: "parentItem", publicName: "parentItem", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, keysStillOtherOptions: { classPropertyName: "keysStillOtherOptions", publicName: "keysStillOtherOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outChangeView: "outChangeView", outChange: "outChange", outChangStageFlagMousePopover: "outChangStageFlagMousePopover" }, ngImport: i0, template: "@if (configTemplateGroup(); as configTemplateGroup) {\n @if ((configTemplateGroup.isViewTree && !!items().length) || (parentItem().maxLevelGroup > 2 && parentItem().level > 1)) {\n <div\n class=\"libs-ui-list-group-item-line-vertical\"\n [style.left.px]=\"\n parentItem().level\n | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe\n : parentItem().maxLevelGroup\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n \"></div>\n }\n @if (items() && items().length) {\n @for (item of items(); track item()) {\n <div>\n <div\n [style.marginLeft.px]=\"\n item().level\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : item().maxLevelGroup\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n \"\n [style.paddingLeft.px]=\"\n item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length\n \"\n [style.paddingRight.px]=\"\n item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length\n \"\n [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + item()?.classInclude\"\n [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n [class.cursor-pointer]=\"\n !disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n \"\n [class.libs-ui-bg-list-active]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.hasBackgroundColorWhenItemSelected && item().isCheckManual\"\n (click)=\"handlerChangeChecked(item(), item()[fieldKey()], disable() || (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem))\">\n @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTree) {\n <i\n class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n [class.rotate-90]=\"item().expand\"\n (click)=\"handlerToggleExpand($event, item)\"></i>\n }\n @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]()?.length) {\n <div [class]=\"'p-[5px]'\">\n <div\n [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n [attr.disabled]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) || false\"></div>\n </div>\n }\n <div class=\"flex w-full relative\">\n <div\n #labelRef\n class=\"invisible\"\n [class.hidden]=\"configTemplateGroup.ignoreFixHeightItem\">\n .\n </div>\n <div\n class=\"flex items-center w-full\"\n [class.absolute]=\"!configTemplateGroup.ignoreFixHeightItem\"\n [style.height.px]=\"!configTemplateGroup.ignoreFixHeightItem ? labelRef.clientHeight : 'auto'\">\n @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '') + ' w-full';\n @if (!configTemplateGroup.isViewRadio) {\n <libs_ui-components-checkbox-single\n [avatarConfig]=\"item().avatarConfig\"\n [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.singleSelectItem\"\n [class]=\"constHtmlClassIncludeItem\"\n [class.-w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n [class.max-w-[calc(100%-24px)]]=\"\n ((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) ||\n (configTemplateGroup.widthLabelSub24WhenNotTreeView &&\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) &&\n configTemplateGroup.singleSelectItem &&\n (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey))) &&\n !configTemplateGroup.ignoreIconExpandMarginRight\n \"\n [clickExactly]=\"false\"\n [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n [disable]=\"\n disable() ||\n (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem && !configTemplateGroup.isViewTreeJson) ||\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n false\n \"\n [label]=\"item().fieldLabel\"\n [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n [classLabelInclude]=\"\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n ? 'libs-ui-color-default libs-ui-font-h5r'\n : 'libs-ui-font-h5r'\n \"\n [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n [popover]=\"item().dataPopover\"\n [linkImage]=\"configTemplateGroup.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getImage : item() | async) : (item()[configTemplateGroup.fieldGetAvatarItem || ''] | async)\"\n [linkImageError]=\"configTemplateGroup.getLinkImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getLinkImageError : item() | async) : ''\"\n [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n [iconImageClass]=\"item().iconImageClass ? item().iconImageClass : undefined\"\n [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outEventPopover)=\"handlerEventPopover($event, item())\"\n (outChange)=\"handlerChangeChecked(item())\" />\n }\n @if (configTemplateGroup.isViewRadio) {\n <libs_ui-components-radio-single\n [avatarConfig]=\"item().avatarConfig\"\n [class.!ml-[8px]]=\"configTemplateGroup.isViewTree\"\n [ignoreRadio]=\"configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem\"\n [class]=\"constHtmlClassIncludeItem\"\n [class.w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n [class.max-w-[calc(100%-24px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && !configTemplateGroup.ignoreIconExpandMarginRight\"\n [clickExactly]=\"false\"\n [disable]=\"\n disable() ||\n (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) ||\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n false\n \"\n [label]=\"item().fieldLabel\"\n [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [classLabelInclude]=\"\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n ? 'text-[#009cdb] libs-ui-font-h5r '\n : ' libs-ui-font-h5r '\n \"\n [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n [popover]=\"item().dataPopover\"\n [linkImage]=\"\n configTemplateGroup.getImage\n ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n : item()[configTemplateGroup.fieldGetAvatarItem || '']\n \"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outChange)=\"handlerChangeChecked(item())\" />\n }\n </div>\n </div>\n @if ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey)) {\n <i\n class=\"libs-ui-icon-check before:!text-[16px]\"\n [class.!ml-[8px]]=\"item().dataPopover\"\n [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\"></i>\n }\n @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n <i\n class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n [class.rotate-90]=\"item().expand\"\n [class.!ml-[8px]]=\"item().dataPopover\"\n (click)=\"handlerToggleExpand($event, item)\"></i>\n }\n </div>\n @if (item().expand || configTemplateGroup.isViewTreeJson) {\n @if (item().level < item().maxLevelGroup && !item()[configTemplateGroup.fieldGetItems]?.()?.length && configTemplateGroup.isViewTree) {\n <div\n class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n [style.marginLeft.px]=\"\n item().level + 1\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : item().maxLevelGroup + 1\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n : true\n \"\n [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n <div [class]=\"item().classIncludeItemNoData || ''\">\n @if (!keySearch()) {\n <span>{{ 'i18n_no_data_yet' | translate }}</span>\n }\n @if (keySearch()) {\n <span>{{ 'i18n_no_result' | translate }}</span>\n }\n </div>\n </div>\n }\n @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length) {\n <libs_ui-components-list-templates_group-item\n [keySearch]=\"keySearch()\"\n [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n [parentItem]=\"item()\"\n [fieldKey]=\"fieldKey()\"\n [keysChecked]=\"keysChecked()\"\n [disable]=\"(disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)) && !configTemplateGroup.isViewTreeJson\"\n [keysDisableItem]=\"keysDisableItem()\"\n [configTemplateGroup]=\"configTemplateGroup\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outChangeView)=\"handlerChangeView($event)\"\n (outChange)=\"handlerChangeChecked($event.item)\" />\n }\n }\n </div>\n }\n }\n\n @if ((!items() || !items().length) && parentItem().level < parentItem().maxLevelGroup) {\n <div\n class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n [style.marginLeft.px]=\"\n parentItem().level + 1\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : parentItem().maxLevelGroup + 1\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n : true\n \"\n [style.paddingLeft.px]=\"parentItem().level + 1 | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: parentItem().maxLevelGroup + 1 : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : false\"\n [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n <div [class]=\"parentItem().classIncludeItemNoData || ''\">\n @if (parentItem().iconEmptyDataInGroup) {\n <div class=\"pb-[16px]\">\n <ng-container *ngComponentOutlet=\"(keySearch() ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\" />\n </div>\n }\n @if (!keySearch()) {\n @let constHtmlTextNoData = parentItem().textDescriptionGroupWhenNoData || config()?.textNoData || 'i18n_no_result';\n <span>{{ constHtmlTextNoData | translate }}</span>\n }\n @if (keySearch()) {\n <span>{{ 'i18n_no_result' | translate }}</span>\n }\n </div>\n </div>\n }\n}\n", styles: [":host{position:relative}:host .libs-ui-list-group-item-line-vertical{position:absolute;width:1px;height:100%;background-color:#e6e7ea}.libs-ui-icon-check{--color: var(--libs-ui-color-default, #226ff5)}.libs-ui-icon-check:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}[class*=libs-ui-icon-chevron]:before{color:#6a7383}.libs-ui-list-group-json_icon-item-parent{min-width:6px;min-height:6px;height:6px;width:6px;border-radius:50%;background-color:#226ff5}.libs-ui-list-group-json_icon-item-parent[disabled=true]{background-color:#6a7383!important}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsListGroupItemComponent, selector: "libs_ui-components-list-templates_group-item", inputs: ["items", "configTemplateGroup", "keySearch", "fieldKey", "keysChecked", "keysDisableItem", "parentItem", "disable", "disableLabel", "config", "keysStillOtherOptions"], outputs: ["outChangeView", "outChange", "outChangStageFlagMousePopover"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorMarginLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorMarginLeftItemPipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe, name: "LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe" }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
965
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsListGroupItemComponent, isStandalone: true, selector: "libs_ui-components-list-templates_group-item", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configTemplateGroup: { classPropertyName: "configTemplateGroup", publicName: "configTemplateGroup", isSignal: true, isRequired: false, transformFunction: null }, keySearch: { classPropertyName: "keySearch", publicName: "keySearch", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, keysChecked: { classPropertyName: "keysChecked", publicName: "keysChecked", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, parentItem: { classPropertyName: "parentItem", publicName: "parentItem", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, keysStillOtherOptions: { classPropertyName: "keysStillOtherOptions", publicName: "keysStillOtherOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outChangeView: "outChangeView", outChange: "outChange", outChangStageFlagMousePopover: "outChangStageFlagMousePopover" }, ngImport: i0, template: "@if (configTemplateGroup(); as configTemplateGroup) {\n @if ((configTemplateGroup.isViewTree && !!items().length) || (parentItem().maxLevelGroup > 2 && parentItem().level > 1)) {\n <div\n class=\"libs-ui-list-group-item-line-vertical\"\n [style.left.px]=\"\n parentItem().level\n | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe\n : parentItem().maxLevelGroup\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n \"></div>\n }\n @if (items() && items().length) {\n @for (item of items(); track item()) {\n <div>\n <div\n [style.marginLeft.px]=\"\n item().level\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : item().maxLevelGroup\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n \"\n [style.paddingLeft.px]=\"\n item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length\n \"\n [style.paddingRight.px]=\"\n item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length : 'right'\n \"\n [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + item()?.classInclude\"\n [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n [class.cursor-pointer]=\"\n !disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n \"\n [class.libs-ui-bg-list-active]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.hasBackgroundColorWhenItemSelected && item().isCheckManual\"\n (click)=\"handlerChangeChecked(item(), item()[fieldKey()], disable() || (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem))\">\n @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTree) {\n <i\n class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n [class.rotate-90]=\"item().expand\"\n (click)=\"handlerToggleExpand($event, item)\"></i>\n }\n @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]()?.length) {\n <div [class]=\"'p-[5px]'\">\n <div\n [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n [attr.disabled]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) || false\"></div>\n </div>\n }\n <div class=\"flex w-full relative\">\n <div\n #labelRef\n class=\"invisible\"\n [class.hidden]=\"configTemplateGroup.ignoreFixHeightItem\">\n .\n </div>\n <div\n class=\"flex items-center w-full\"\n [class.absolute]=\"!configTemplateGroup.ignoreFixHeightItem\"\n [style.height.px]=\"!configTemplateGroup.ignoreFixHeightItem ? labelRef.clientHeight : 'auto'\">\n @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '') + ' w-full';\n @if (!configTemplateGroup.isViewRadio) {\n <libs_ui-components-checkbox-single\n [avatarConfig]=\"item().avatarConfig\"\n [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.singleSelectItem\"\n [class]=\"constHtmlClassIncludeItem\"\n [class.-w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n [class.max-w-[calc(100%-24px)]]=\"\n ((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) ||\n (configTemplateGroup.widthLabelSub24WhenNotTreeView &&\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) &&\n configTemplateGroup.singleSelectItem &&\n (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey))) &&\n !configTemplateGroup.ignoreIconExpandMarginRight\n \"\n [clickExactly]=\"false\"\n [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n [disable]=\"\n disable() ||\n (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem && !configTemplateGroup.isViewTreeJson) ||\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n false\n \"\n [label]=\"item().fieldLabel\"\n [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n [classLabelInclude]=\"\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n ? 'libs-ui-color-default libs-ui-font-h5r'\n : 'libs-ui-font-h5r'\n \"\n [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n [popover]=\"item().dataPopover\"\n [linkImage]=\"configTemplateGroup.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getImage : item() | async) : (item()[configTemplateGroup.fieldGetAvatarItem || ''] | async)\"\n [linkImageError]=\"configTemplateGroup.getLinkImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getLinkImageError : item() | async) : ''\"\n [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n [iconImageClass]=\"item().iconImageClass ? item().iconImageClass : undefined\"\n [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outEventPopover)=\"handlerEventPopover($event, item())\"\n (outChange)=\"handlerChangeChecked(item())\" />\n }\n @if (configTemplateGroup.isViewRadio) {\n <libs_ui-components-radio-single\n [avatarConfig]=\"item().avatarConfig\"\n [class.!ml-[8px]]=\"configTemplateGroup.isViewTree\"\n [ignoreRadio]=\"configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem\"\n [class]=\"constHtmlClassIncludeItem\"\n [class.w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n [class.max-w-[calc(100%-24px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && !configTemplateGroup.ignoreIconExpandMarginRight\"\n [clickExactly]=\"false\"\n [disable]=\"\n disable() ||\n (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) ||\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n false\n \"\n [label]=\"item().fieldLabel\"\n [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [classLabelInclude]=\"\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n ? 'text-[#009cdb] libs-ui-font-h5r '\n : ' libs-ui-font-h5r '\n \"\n [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n [popover]=\"item().dataPopover\"\n [linkImage]=\"\n configTemplateGroup.getImage\n ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n : item()[configTemplateGroup.fieldGetAvatarItem || '']\n \"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outChange)=\"handlerChangeChecked(item())\" />\n }\n </div>\n </div>\n @if ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey)) {\n <i\n class=\"libs-ui-icon-check before:!text-[16px]\"\n [class.!ml-[8px]]=\"item().dataPopover\"\n [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\"></i>\n }\n @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n <i\n class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n [class.rotate-90]=\"item().expand\"\n [class.!ml-[8px]]=\"item().dataPopover\"\n (click)=\"handlerToggleExpand($event, item)\"></i>\n }\n </div>\n @if (item().expand || configTemplateGroup.isViewTreeJson) {\n @if (item().level < item().maxLevelGroup && !item()[configTemplateGroup.fieldGetItems]?.()?.length && configTemplateGroup.isViewTree) {\n <div\n class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n [style.marginLeft.px]=\"\n item().level + 1\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : item().maxLevelGroup + 1\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n : true\n \"\n [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n <div [class]=\"item().classIncludeItemNoData || ''\">\n @if (!keySearch()) {\n <span>{{ 'i18n_no_data_yet' | translate }}</span>\n }\n @if (keySearch()) {\n <span>{{ 'i18n_no_result' | translate }}</span>\n }\n </div>\n </div>\n }\n @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length) {\n <libs_ui-components-list-templates_group-item\n [keySearch]=\"keySearch()\"\n [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n [parentItem]=\"item()\"\n [fieldKey]=\"fieldKey()\"\n [keysChecked]=\"keysChecked()\"\n [disable]=\"(disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)) && !configTemplateGroup.isViewTreeJson\"\n [keysDisableItem]=\"keysDisableItem()\"\n [configTemplateGroup]=\"configTemplateGroup\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outChangeView)=\"handlerChangeView($event)\"\n (outChange)=\"handlerChangeChecked($event.item)\" />\n }\n }\n </div>\n }\n }\n\n @if ((!items() || !items().length) && parentItem().level < parentItem().maxLevelGroup) {\n <div\n class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n [style.marginLeft.px]=\"\n parentItem().level + 1\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : parentItem().maxLevelGroup + 1\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n : true\n \"\n [style.paddingLeft.px]=\"parentItem().level + 1 | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: parentItem().maxLevelGroup + 1 : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : false\"\n [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n <div [class]=\"parentItem().classIncludeItemNoData || ''\">\n @if (parentItem().iconEmptyDataInGroup) {\n <div class=\"pb-[16px]\">\n <ng-container *ngComponentOutlet=\"(keySearch() ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\" />\n </div>\n }\n @if (!keySearch()) {\n @let constHtmlTextNoData = parentItem().textDescriptionGroupWhenNoData || config()?.textNoData || 'i18n_no_result';\n <span>{{ constHtmlTextNoData | translate }}</span>\n }\n @if (keySearch()) {\n <span>{{ 'i18n_no_result' | translate }}</span>\n }\n </div>\n </div>\n }\n}\n", styles: [":host{position:relative}:host .libs-ui-list-group-item-line-vertical{position:absolute;width:1px;height:100%;background-color:#e6e7ea}.libs-ui-icon-check{--color: var(--libs-ui-color-default, #226ff5)}.libs-ui-icon-check:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}[class*=libs-ui-icon-chevron]:before{color:#6a7383}.libs-ui-list-group-json_icon-item-parent{min-width:6px;min-height:6px;height:6px;width:6px;border-radius:50%;background-color:#226ff5}.libs-ui-list-group-json_icon-item-parent[disabled=true]{background-color:#6a7383!important}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsListGroupItemComponent, selector: "libs_ui-components-list-templates_group-item", inputs: ["items", "configTemplateGroup", "keySearch", "fieldKey", "keysChecked", "keysDisableItem", "parentItem", "disable", "disableLabel", "config", "keysStillOtherOptions"], outputs: ["outChangeView", "outChange", "outChangStageFlagMousePopover"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorMarginLeftItemPipe, name: "LibsUiComponentsListGroupCalculatorMarginLeftItemPipe" }, { kind: "pipe", type: LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe, name: "LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe" }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }, { kind: "pipe", type: LibsUiCheckSelectedByKeyPipe, name: "LibsUiCheckSelectedByKeyPipe" }, { kind: "component", type: LibsUiComponentsCheckboxSingleComponent, selector: "libs_ui-components-checkbox-single", inputs: ["key", "checked", "label", "classLabelInclude", "ignoreShowPopoverLabel", "typeLabelPopover", "popover", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "classInclude", "clickExactly", "disable", "disableLabel", "ignoreCheckbox", "zIndexLabel", "stillOtherOptions", "error", "showBorderError", "description", "iconImageClass", "classIconInclude", "modeBorder", "dataComponentOutlet", "componentOutlet"], outputs: ["checkedChange", "linkImageChange", "outChange", "outEventPopover", "outClickLabel", "outChangStageFlagMousePopover"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }, { kind: "component", type: LibsUiComponentsRadioSingleComponent, selector: "libs_ui-components-radio-single", inputs: ["key", "active", "classInclude", "label", "labelInterpolateParams", "ignorePopoverLabel", "classLabelInclude", "linkImage", "linkImageError", "avatarConfig", "classImageInclude", "imgTypeIcon", "bullet", "popover", "disable", "disableLabel", "clickExactly", "typeRadio", "ignoreRadio", "zIndexLabel", "classIncludeIcon", "dataComponentOutlet", "componentOutlet"], outputs: ["activeChange", "outClickLabel", "outChange", "outChangStageFlagMousePopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
963
966
  }
964
967
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsListGroupItemComponent, decorators: [{
965
968
  type: Component,
@@ -975,7 +978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
975
978
  LibsUiComponentsCheckboxSingleComponent,
976
979
  LibsUiPipesCallFunctionInTemplatePipe,
977
980
  LibsUiComponentsRadioSingleComponent,
978
- ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n @if ((configTemplateGroup.isViewTree && !!items().length) || (parentItem().maxLevelGroup > 2 && parentItem().level > 1)) {\n <div\n class=\"libs-ui-list-group-item-line-vertical\"\n [style.left.px]=\"\n parentItem().level\n | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe\n : parentItem().maxLevelGroup\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n \"></div>\n }\n @if (items() && items().length) {\n @for (item of items(); track item()) {\n <div>\n <div\n [style.marginLeft.px]=\"\n item().level\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : item().maxLevelGroup\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n \"\n [style.paddingLeft.px]=\"\n item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length\n \"\n [style.paddingRight.px]=\"\n item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length\n \"\n [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + item()?.classInclude\"\n [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n [class.cursor-pointer]=\"\n !disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n \"\n [class.libs-ui-bg-list-active]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.hasBackgroundColorWhenItemSelected && item().isCheckManual\"\n (click)=\"handlerChangeChecked(item(), item()[fieldKey()], disable() || (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem))\">\n @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTree) {\n <i\n class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n [class.rotate-90]=\"item().expand\"\n (click)=\"handlerToggleExpand($event, item)\"></i>\n }\n @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]()?.length) {\n <div [class]=\"'p-[5px]'\">\n <div\n [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n [attr.disabled]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) || false\"></div>\n </div>\n }\n <div class=\"flex w-full relative\">\n <div\n #labelRef\n class=\"invisible\"\n [class.hidden]=\"configTemplateGroup.ignoreFixHeightItem\">\n .\n </div>\n <div\n class=\"flex items-center w-full\"\n [class.absolute]=\"!configTemplateGroup.ignoreFixHeightItem\"\n [style.height.px]=\"!configTemplateGroup.ignoreFixHeightItem ? labelRef.clientHeight : 'auto'\">\n @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '') + ' w-full';\n @if (!configTemplateGroup.isViewRadio) {\n <libs_ui-components-checkbox-single\n [avatarConfig]=\"item().avatarConfig\"\n [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.singleSelectItem\"\n [class]=\"constHtmlClassIncludeItem\"\n [class.-w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n [class.max-w-[calc(100%-24px)]]=\"\n ((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) ||\n (configTemplateGroup.widthLabelSub24WhenNotTreeView &&\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) &&\n configTemplateGroup.singleSelectItem &&\n (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey))) &&\n !configTemplateGroup.ignoreIconExpandMarginRight\n \"\n [clickExactly]=\"false\"\n [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n [disable]=\"\n disable() ||\n (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem && !configTemplateGroup.isViewTreeJson) ||\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n false\n \"\n [label]=\"item().fieldLabel\"\n [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n [classLabelInclude]=\"\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n ? 'libs-ui-color-default libs-ui-font-h5r'\n : 'libs-ui-font-h5r'\n \"\n [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n [popover]=\"item().dataPopover\"\n [linkImage]=\"configTemplateGroup.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getImage : item() | async) : (item()[configTemplateGroup.fieldGetAvatarItem || ''] | async)\"\n [linkImageError]=\"configTemplateGroup.getLinkImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getLinkImageError : item() | async) : ''\"\n [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n [iconImageClass]=\"item().iconImageClass ? item().iconImageClass : undefined\"\n [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outEventPopover)=\"handlerEventPopover($event, item())\"\n (outChange)=\"handlerChangeChecked(item())\" />\n }\n @if (configTemplateGroup.isViewRadio) {\n <libs_ui-components-radio-single\n [avatarConfig]=\"item().avatarConfig\"\n [class.!ml-[8px]]=\"configTemplateGroup.isViewTree\"\n [ignoreRadio]=\"configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem\"\n [class]=\"constHtmlClassIncludeItem\"\n [class.w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n [class.max-w-[calc(100%-24px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && !configTemplateGroup.ignoreIconExpandMarginRight\"\n [clickExactly]=\"false\"\n [disable]=\"\n disable() ||\n (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) ||\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n false\n \"\n [label]=\"item().fieldLabel\"\n [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [classLabelInclude]=\"\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n ? 'text-[#009cdb] libs-ui-font-h5r '\n : ' libs-ui-font-h5r '\n \"\n [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n [popover]=\"item().dataPopover\"\n [linkImage]=\"\n configTemplateGroup.getImage\n ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n : item()[configTemplateGroup.fieldGetAvatarItem || '']\n \"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outChange)=\"handlerChangeChecked(item())\" />\n }\n </div>\n </div>\n @if ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey)) {\n <i\n class=\"libs-ui-icon-check before:!text-[16px]\"\n [class.!ml-[8px]]=\"item().dataPopover\"\n [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\"></i>\n }\n @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n <i\n class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n [class.rotate-90]=\"item().expand\"\n [class.!ml-[8px]]=\"item().dataPopover\"\n (click)=\"handlerToggleExpand($event, item)\"></i>\n }\n </div>\n @if (item().expand || configTemplateGroup.isViewTreeJson) {\n @if (item().level < item().maxLevelGroup && !item()[configTemplateGroup.fieldGetItems]?.()?.length && configTemplateGroup.isViewTree) {\n <div\n class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n [style.marginLeft.px]=\"\n item().level + 1\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : item().maxLevelGroup + 1\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n : true\n \"\n [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n <div [class]=\"item().classIncludeItemNoData || ''\">\n @if (!keySearch()) {\n <span>{{ 'i18n_no_data_yet' | translate }}</span>\n }\n @if (keySearch()) {\n <span>{{ 'i18n_no_result' | translate }}</span>\n }\n </div>\n </div>\n }\n @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length) {\n <libs_ui-components-list-templates_group-item\n [keySearch]=\"keySearch()\"\n [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n [parentItem]=\"item()\"\n [fieldKey]=\"fieldKey()\"\n [keysChecked]=\"keysChecked()\"\n [disable]=\"(disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)) && !configTemplateGroup.isViewTreeJson\"\n [keysDisableItem]=\"keysDisableItem()\"\n [configTemplateGroup]=\"configTemplateGroup\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outChangeView)=\"handlerChangeView($event)\"\n (outChange)=\"handlerChangeChecked($event.item)\" />\n }\n }\n </div>\n }\n }\n\n @if ((!items() || !items().length) && parentItem().level < parentItem().maxLevelGroup) {\n <div\n class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n [style.marginLeft.px]=\"\n parentItem().level + 1\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : parentItem().maxLevelGroup + 1\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n : true\n \"\n [style.paddingLeft.px]=\"parentItem().level + 1 | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: parentItem().maxLevelGroup + 1 : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : false\"\n [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n <div [class]=\"parentItem().classIncludeItemNoData || ''\">\n @if (parentItem().iconEmptyDataInGroup) {\n <div class=\"pb-[16px]\">\n <ng-container *ngComponentOutlet=\"(keySearch() ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\" />\n </div>\n }\n @if (!keySearch()) {\n @let constHtmlTextNoData = parentItem().textDescriptionGroupWhenNoData || config()?.textNoData || 'i18n_no_result';\n <span>{{ constHtmlTextNoData | translate }}</span>\n }\n @if (keySearch()) {\n <span>{{ 'i18n_no_result' | translate }}</span>\n }\n </div>\n </div>\n }\n}\n", styles: [":host{position:relative}:host .libs-ui-list-group-item-line-vertical{position:absolute;width:1px;height:100%;background-color:#e6e7ea}.libs-ui-icon-check{--color: var(--libs-ui-color-default, #226ff5)}.libs-ui-icon-check:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}[class*=libs-ui-icon-chevron]:before{color:#6a7383}.libs-ui-list-group-json_icon-item-parent{min-width:6px;min-height:6px;height:6px;width:6px;border-radius:50%;background-color:#226ff5}.libs-ui-list-group-json_icon-item-parent[disabled=true]{background-color:#6a7383!important}\n"] }]
981
+ ], template: "@if (configTemplateGroup(); as configTemplateGroup) {\n @if ((configTemplateGroup.isViewTree && !!items().length) || (parentItem().maxLevelGroup > 2 && parentItem().level > 1)) {\n <div\n class=\"libs-ui-list-group-item-line-vertical\"\n [style.left.px]=\"\n parentItem().level\n | LibsUiComponentsListGroupCalculatorLeftLineVerticalItemPipe\n : parentItem().maxLevelGroup\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n \"></div>\n }\n @if (items() && items().length) {\n @for (item of items(); track item()) {\n <div>\n <div\n [style.marginLeft.px]=\"\n item().level\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : item().maxLevelGroup\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n \"\n [style.paddingLeft.px]=\"\n item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length\n \"\n [style.paddingRight.px]=\"\n item().level | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: item().maxLevelGroup : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : !!item()[configTemplateGroup.fieldGetItems]?.()?.length : 'right'\n \"\n [class]=\"'libs-ui-bg-list-hover py-[6px] pr-[16px] flex items-center relative libs-ui-bg-list-hover-active ' + item()?.classInclude\"\n [class.libs-ui-bg-list-active]=\"configTemplateGroup.singleSelectItem && item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [class.libs-ui-disable]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n [class.pointer-events-none]=\"configTemplateGroup.allowDisableLabel && (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\"\n [class.cursor-pointer]=\"\n !disable() && !(configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem) && !(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)\n \"\n [class.libs-ui-bg-list-active]=\"(item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.hasBackgroundColorWhenItemSelected && item().isCheckManual\"\n (click)=\"handlerChangeChecked(item(), item()[fieldKey()], disable() || (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem))\">\n @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTree) {\n <i\n class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n [class.rotate-90]=\"item().expand\"\n (click)=\"handlerToggleExpand($event, item)\"></i>\n }\n @if (item().level < item().maxLevelGroup && configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]()?.length) {\n <div [class]=\"'p-[5px]'\">\n <div\n [class]=\"'libs-ui-list-group-json_icon-item-parent'\"\n [attr.disabled]=\"disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) || false\"></div>\n </div>\n }\n <div class=\"flex w-full relative\">\n <div\n #labelRef\n class=\"invisible\"\n [class.hidden]=\"configTemplateGroup.ignoreFixHeightItem\">\n .\n </div>\n <div\n class=\"flex items-center w-full\"\n [class.absolute]=\"!configTemplateGroup.ignoreFixHeightItem\"\n [style.height.px]=\"!configTemplateGroup.ignoreFixHeightItem ? labelRef.clientHeight : 'auto'\">\n @let constHtmlClassIncludeItem = (configTemplateGroup.classIncludeItem || '') + ' w-full';\n @if (!configTemplateGroup.isViewRadio) {\n <libs_ui-components-checkbox-single\n [avatarConfig]=\"item().avatarConfig\"\n [class.ml-[8px]]=\"configTemplateGroup.isViewTree || (configTemplateGroup.isViewTreeJson && !!item()[configTemplateGroup.fieldGetItems]?.()?.length)\"\n [ignoreCheckbox]=\"configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.singleSelectItem\"\n [class]=\"constHtmlClassIncludeItem\"\n [class.-w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n [class.max-w-[calc(100%-24px)]]=\"\n ((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) ||\n (configTemplateGroup.widthLabelSub24WhenNotTreeView &&\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) &&\n configTemplateGroup.singleSelectItem &&\n (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey))) &&\n !configTemplateGroup.ignoreIconExpandMarginRight\n \"\n [clickExactly]=\"false\"\n [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n [disable]=\"\n disable() ||\n (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup && !item().isAcceptSelectItem && !configTemplateGroup.isViewTreeJson) ||\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n false\n \"\n [label]=\"item().fieldLabel\"\n [checked]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [stillOtherOptions]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysStillOtherOptions() : keysStillOtherOptions().length\"\n [classLabelInclude]=\"\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n ? 'libs-ui-color-default libs-ui-font-h5r'\n : 'libs-ui-font-h5r'\n \"\n [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n [popover]=\"item().dataPopover\"\n [linkImage]=\"configTemplateGroup.getImage ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getImage : item() | async) : (item()[configTemplateGroup.fieldGetAvatarItem || ''] | async)\"\n [linkImageError]=\"configTemplateGroup.getLinkImageError ? ('avatar_error' | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getLinkImageError : item() | async) : ''\"\n [imgTypeIcon]=\"configTemplateGroup.imgTypeIcon\"\n [iconImageClass]=\"item().iconImageClass ? item().iconImageClass : undefined\"\n [classImageInclude]=\"configTemplateGroup.classImageInclude || ''\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outEventPopover)=\"handlerEventPopover($event, item())\"\n (outChange)=\"handlerChangeChecked(item())\" />\n }\n @if (configTemplateGroup.isViewRadio) {\n <libs_ui-components-radio-single\n [avatarConfig]=\"item().avatarConfig\"\n [class.!ml-[8px]]=\"configTemplateGroup.isViewTree\"\n [ignoreRadio]=\"configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem\"\n [class]=\"constHtmlClassIncludeItem\"\n [class.w-auto]=\"configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem\"\n [class.max-w-[calc(100%-12px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && configTemplateGroup.ignoreIconExpandMarginRight\"\n [class.max-w-[calc(100%-24px)]]=\"((configTemplateGroup.isViewTree && !configTemplateGroup.hasIconCheckSingleSelectItem) || configTemplateGroup.widthLabelSub24WhenNotTreeView) && !configTemplateGroup.ignoreIconExpandMarginRight\"\n [clickExactly]=\"false\"\n [disable]=\"\n disable() ||\n (configTemplateGroup.disableItemNotLastLevel && !!item()[configTemplateGroup.fieldGetItems]?.()?.length) ||\n (configTemplateGroup.singleSelectItem && item().level < item().maxLevelGroup) ||\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) ||\n false\n \"\n [label]=\"item().fieldLabel\"\n [zIndexLabel]=\"configTemplateGroup.zIndexLabel ?? 1\"\n [active]=\"item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length\"\n [classLabelInclude]=\"\n (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\n ? 'text-[#009cdb] libs-ui-font-h5r '\n : ' libs-ui-font-h5r '\n \"\n [dataComponentOutlet]=\"undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getDataComponentOutletItem : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\"\n [componentOutlet]=\"0 | LibsUiPipesCallFunctionInTemplatePipe: configTemplateGroup.getComponentOutletItem : item() : fieldKey() : { valueIs0: 0 } | async\"\n [popover]=\"item().dataPopover\"\n [linkImage]=\"\n configTemplateGroup.getImage\n ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateGroup.getLinkImageError ? configTemplateGroup.getLinkImageError : configTemplateGroup.getImage) : item() | async)\n : item()[configTemplateGroup.fieldGetAvatarItem || '']\n \"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outChange)=\"handlerChangeChecked(item())\" />\n }\n </div>\n </div>\n @if ((item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysChecked() : keysChecked().length) && configTemplateGroup.singleSelectItem && (configTemplateGroup.hasIconCheckSingleSelectItem || item().isCheckedByDefaultKey)) {\n <i\n class=\"libs-ui-icon-check before:!text-[16px]\"\n [class.!ml-[8px]]=\"item().dataPopover\"\n [class.libs-ui-icon-check]=\"configTemplateGroup.colorBlueWhenItemSelected && item().isCheckManual\"></i>\n }\n @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length && !configTemplateGroup.isViewTree && !configTemplateGroup.isViewTreeJson) {\n <i\n class=\"libs-ui-icon-chevron-right before:!text-[16px]\"\n [class.rotate-90]=\"item().expand\"\n [class.!ml-[8px]]=\"item().dataPopover\"\n (click)=\"handlerToggleExpand($event, item)\"></i>\n }\n </div>\n @if (item().expand || configTemplateGroup.isViewTreeJson) {\n @if (item().level < item().maxLevelGroup && !item()[configTemplateGroup.fieldGetItems]?.()?.length && configTemplateGroup.isViewTree) {\n <div\n class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n [style.marginLeft.px]=\"\n item().level + 1\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : item().maxLevelGroup + 1\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n : true\n \"\n [class.!py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n [class.!py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n <div [class]=\"item().classIncludeItemNoData || ''\">\n @if (!keySearch()) {\n <span>{{ 'i18n_no_data_yet' | translate }}</span>\n }\n @if (keySearch()) {\n <span>{{ 'i18n_no_result' | translate }}</span>\n }\n </div>\n </div>\n }\n @if (!!item()[configTemplateGroup.fieldGetItems]?.()?.length) {\n <libs_ui-components-list-templates_group-item\n [keySearch]=\"keySearch()\"\n [items]=\"item()[configTemplateGroup.fieldGetItems]()\"\n [parentItem]=\"item()\"\n [fieldKey]=\"fieldKey()\"\n [keysChecked]=\"keysChecked()\"\n [disable]=\"(disable() || (item()[fieldKey()] | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length)) && !configTemplateGroup.isViewTreeJson\"\n [keysDisableItem]=\"keysDisableItem()\"\n [configTemplateGroup]=\"configTemplateGroup\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outChangeView)=\"handlerChangeView($event)\"\n (outChange)=\"handlerChangeChecked($event.item)\" />\n }\n }\n </div>\n }\n }\n\n @if ((!items() || !items().length) && parentItem().level < parentItem().maxLevelGroup) {\n <div\n class=\"libs-ui-font-h5r text-[#9ca2ad] relative\"\n [style.marginLeft.px]=\"\n parentItem().level + 1\n | LibsUiComponentsListGroupCalculatorMarginLeftItemPipe\n : parentItem().maxLevelGroup + 1\n : configTemplateGroup.isViewTree\n : configTemplateGroup.isViewTreeJson\n : !(configTemplateGroup.ignoreCheckboxItem || configTemplateGroup.ignoreRadioItem || configTemplateGroup.singleSelectItem)\n : true\n \"\n [style.paddingLeft.px]=\"parentItem().level + 1 | LibsUiComponentsListGroupCalculatorPaddingLeftItemPipe: parentItem().maxLevelGroup + 1 : configTemplateGroup.isViewTree : configTemplateGroup.isViewTreeJson : false\"\n [class.py-[8px]]=\"configTemplateGroup.fieldGetAvatarItem\"\n [class.py-[4px]]=\"!configTemplateGroup.fieldGetAvatarItem\">\n <div [class]=\"parentItem().classIncludeItemNoData || ''\">\n @if (parentItem().iconEmptyDataInGroup) {\n <div class=\"pb-[16px]\">\n <ng-container *ngComponentOutlet=\"(keySearch() ? 'no-result' : 'no-data') | LibsUiIconsGetIconComponentPipe | async\" />\n </div>\n }\n @if (!keySearch()) {\n @let constHtmlTextNoData = parentItem().textDescriptionGroupWhenNoData || config()?.textNoData || 'i18n_no_result';\n <span>{{ constHtmlTextNoData | translate }}</span>\n }\n @if (keySearch()) {\n <span>{{ 'i18n_no_result' | translate }}</span>\n }\n </div>\n </div>\n }\n}\n", styles: [":host{position:relative}:host .libs-ui-list-group-item-line-vertical{position:absolute;width:1px;height:100%;background-color:#e6e7ea}.libs-ui-icon-check{--color: var(--libs-ui-color-default, #226ff5)}.libs-ui-icon-check:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}[class*=libs-ui-icon-chevron]:before{color:#6a7383}.libs-ui-list-group-json_icon-item-parent{min-width:6px;min-height:6px;height:6px;width:6px;border-radius:50%;background-color:#226ff5}.libs-ui-list-group-json_icon-item-parent[disabled=true]{background-color:#6a7383!important}\n"] }]
979
982
  }] });
980
983
 
981
984
  /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -1338,11 +1341,11 @@ class LibsUiComponentsListGroupComponent extends LibsUiComponentsListTemplatesCo
1338
1341
  this.totalItemChecked.set(dataMultiKeyChecked.keys.length);
1339
1342
  }
1340
1343
  recursivelyCheckedParentByTree(item) {
1341
- if (!item) {
1344
+ if (isNil(item)) {
1342
1345
  return;
1343
1346
  }
1344
- this.mappingItemsChecked().set(item[this.fieldKey()], item());
1345
- this.recursivelyCheckedParentByTree(item.parentItem);
1347
+ this.mappingItemsChecked().set(get(item, this.fieldKey()), item());
1348
+ this.recursivelyCheckedParentByTree(get(item, 'parentItem', undefined, true));
1346
1349
  }
1347
1350
  setCheckCheckedItemsParent(item) {
1348
1351
  const configTemplateGroup = this.configTemplateGroup();
@@ -2277,6 +2280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2277
2280
  ], template: "@if (configTemplateText(); as configTemplateText) {\n <div class=\"relative h-full w-full\">\n @if (items() && items().length) {\n <!-- ph\u1EA3i \u0111\u1EC3 [class.h-full]=\"!isShowHeightCalculate()\" th\u00EC LibsUiComponentsScrollOverlayDirective m\u1EDBi ho\u1EA1t \u0111\u1ED9ng \u0111\u01B0\u1EE3c -->\n <div\n #elementScroll\n [style.height]=\"isShowHeightCalculate() ? heightViewPort() + 'px' : '100%'\"\n class=\"w-full\"\n [class.h-full]=\"!isShowHeightCalculate()\"\n LibsUiComponentsScrollOverlayDirective\n (outScrollBottom)=\"handlerScrollBottom()\">\n @if (!configTemplateText.notUseVirtualScroll) {\n <virtual-scroller\n #scroll\n [parentScroll]=\"elementScroll\"\n [items]=\"items()\"\n class=\"h-full\">\n <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: scroll.viewPortItems }\" />\n </virtual-scroller>\n }\n @if (configTemplateText.notUseVirtualScroll) {\n <ng-container *ngTemplateOutlet=\"listRef; context: { itemsView: items() }\" />\n }\n </div>\n }\n @if ((!items() || !items().length) && (!config()?.ignoreShowDataWhenNotSearch || keySearch())) {\n <div [class]=\"'libs-ui-font-h5r text-[#9ca2ad] ' + (config()?.textNoDataClassInclude ?? 'py-[6px] px-[16px]')\">\n @if (!keySearch() && !loading()) {\n @let constHtmlTextNoData = config()?.textNoData || 'i18n_have_no_selection';\n {{ constHtmlTextNoData | translate }}\n }\n @if (templateRefSearchNoData() && keySearch() && !loading()) {\n <ng-container *ngTemplateOutlet=\"templateRefSearchNoData() || null; context: { keySearch: keySearch() }\" />\n }\n @if (!templateRefSearchNoData() && keySearch() && !loading()) {\n @let constHtmlTextSearchNoData = config()?.textSearchNoData || 'i18n_no_result';\n {{ constHtmlTextSearchNoData | translate }}\n }\n @if (loading()) {\n &nbsp;\n }\n </div>\n }\n @if (loading()) {\n <libs_ui-components-spinner [size]=\"loadingIconSize() || 'medium'\" />\n }\n </div>\n <ng-template\n #listRef\n let-itemsView=\"itemsView\">\n @for (item of itemsView; track item()) {\n @let constHtmlKeyItem = item() | LibsUiPipesGetValueOfObjectPipe: fieldKey();\n @let constHtmlKeySelected = keySelected();\n <div\n #itemRef\n [class]=\"item().classItemWrapper || ''\">\n <div\n LibsUiComponentsListHighlightKeySearchDirective\n [isHighlight]=\"config()?.highlightTextSearchInResult\"\n [keySearch]=\"keySearch()\"\n [class]=\"'libs-ui-list-template-text-item libs-ui-font-h5r flex ' + (item().classItem || '')\"\n [class.items-center]=\"!item().itemAlignStart\"\n [class.items-start]=\"item().itemAlignStart\"\n [class.libs-ui-bg-list-hover-danger]=\"!clickExactly() && item().hoverDanger\"\n [class.libs-ui-bg-list-hover]=\"!clickExactly() && !item().hoverDanger\"\n [class.libs-ui-bg-list-active]=\"!clickExactly() && constHtmlKeySelected === constHtmlKeyItem\"\n [class.!pl-[16px]]=\"paddingLeftItem()\"\n [class.bg-[#ffffff]]=\"clickExactly()\"\n [class.libs-ui-bg-list-hover-ffffff]=\"item().disable\"\n [class.cursor-default]=\"item().disable\"\n [class.!py-[2px]]=\"clickExactly()\"\n [class.!pr-[48px]]=\"constHtmlKeySelected === constHtmlKeyItem && (!configTemplateText?.ignoreIconSelected || configTemplateText?.actionSort) && !configTemplateText?.stylePaddingRightItemOther\"\n [ngClass]=\"{ 'pointer-events-none libs-ui-disable': loading() || disable() || ((constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: keysDisableItem() : keysDisableItem()?.length) && !ignoreClassDisableDefaultWhenUseKeysDisableItem()) }\"\n (click)=\"handlerClickRelative($event, item())\">\n @if ((item().bullet | LibsUiPipesConvertObjectToSignalPipe)?.(); as bullet) {\n <span\n class=\"libs-ui-list-template-text-item-bullet flex flex-shrink-0\"\n [style.backgroundColor]=\"bullet.backgroundColor\"\n (click)=\"handlerSelectItem($event, item())\"></span>\n }\n @if ((item().avatarConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as avatarConfig) {\n <libs_ui-components-avatar\n [typeShape]=\"avatarConfig.typeShape ?? 'circle'\"\n [classInclude]=\"avatarConfig.classInclude\"\n [classImageInclude]=\"avatarConfig.classImageInclude\"\n [size]=\"avatarConfig.size ?? 32\"\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [getLastTextAfterSpace]=\"avatarConfig.getLastTextAfterSpace\"\n [textAvatar]=\"avatarConfig.textAvatar\" />\n }\n @if (configTemplateText.getImage || configTemplateText.fieldGetImage) {\n <img\n [src]=\"\n configTemplateText.getImage\n ? ('avatar' | LibsUiPipesCallFunctionInTemplatePipe: (item().specific_loadImgError && configTemplateText.getImageError ? configTemplateText.getImageError : configTemplateText.getImage) : item() | async)\n : item()[configTemplateText.fieldGetImage || '']\n \"\n [class]=\"'libs-ui-list-template-text-item-avatar ' + (configTemplateText.classIncludeImage ?? '')\"\n [class.w-[18px]]=\"configTemplateText.imgTypeIcon\"\n [class.h-[18px]]=\"configTemplateText.imgTypeIcon\"\n (error)=\"handlerImageError($event, item())\"\n (click)=\"handlerSelectItem($event, item())\" />\n }\n @if ((item().buttonLeftConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as buttonLeft) {\n @if (item().hrefButton) {\n <a\n [class.w-full]=\"!buttonLeft.ignoreWidth100\"\n [href]=\"item().hrefButton\">\n <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n </a>\n }\n @if (!item().hrefButton) {\n <div [class.w-full]=\"!buttonLeft.ignoreWidth100\">\n <ng-container *ngTemplateOutlet=\"buttonLeftTemplate\" />\n </div>\n }\n <ng-template #buttonLeftTemplate>\n <libs_ui-components-buttons-button\n class=\"w-full\"\n [type]=\"buttonLeft.type ?? 'button-link-primary'\"\n [label]=\"buttonLeft.label ?? ' '\"\n [zIndex]=\"buttonLeft.zIndex\"\n [disable]=\"buttonLeft.disable ?? false\"\n [classIconLeft]=\"buttonLeft.classIconLeft ? buttonLeft.classIconLeft + ' flex mr-[8px] text-[12px]' : ''\"\n [classInclude]=\"(buttonLeft.classInclude ?? '') + ' w-full'\"\n [classLabel]=\"buttonLeft.classLabel ?? 'libs-ui-font-h4r'\"\n [ignoreStopPropagationEvent]=\"buttonLeft.ignoreStopPropagationEvent\"\n [styleIconLeft]=\"buttonLeft.styleIconLeft | LibsUiPipesConvertSignalToObjectPipe\"\n [styleButton]=\"buttonLeft.styleButton | LibsUiPipesConvertSignalToObjectPipe\"\n (outClick)=\"handlerSelectItem($event, item())\" />\n </ng-template>\n }\n @if ((item().switchConfig | LibsUiPipesConvertObjectToSignalPipe)?.(); as switchConfig) {\n <libs_ui-components-switch\n [active]=\"switchConfig.active\"\n (outSwitch)=\"handlerSelectItem('click', item())\" />\n }\n @if (item().classIconLeft) {\n <i [class]=\"item().classIconLeft + ' mr-[8px] text-[14px]'\"></i>\n }\n @if (!item().ignoreShowFieldLabel && !configTemplateText.rows) {\n @if (((item().popoverLabel | LibsUiPipesConvertObjectToSignalPipe)?.() | LibsUiPipesConvertSignalToObjectPipe) ?? { type: 'text' }; as popoverLabel) {\n <libs_ui-components-popover\n [type]=\"popoverLabel.type || 'text'\"\n [elementRefCustom]=\"popoverLabel.type === 'text' ? undefined : itemRef\"\n [ignoreShowPopover]=\"popoverLabel.ignoreShowPopover\"\n [config]=\"popoverLabel.config ?? configTemplateText.configLabelPopover?.() ?? {}\"\n [innerHtml]=\"item().fieldLabel\"\n [classInclude]=\"item().classInclude\"\n (outEvent)=\"handlerSelectItem($event, item())\" />\n }\n }\n @if ((item().fieldPopover | LibsUiPipesConvertObjectToSignalPipe)?.(); as popover) {\n <libs_ui-components-popover\n class=\"{{ popover.classInclude }}\"\n [config]=\"popover.config\">\n @if (popover.dataView) {\n <div [innerHtml]=\"popover.dataView | translate\"></div>\n } @else {\n <i class=\"libs-ui-icon-tooltip-outline\"></i>\n }\n </libs_ui-components-popover>\n }\n @if (configTemplateText?.rows) {\n <libs_ui-components-list-templates_rows\n class=\"w-full {{ configTemplateText.classRowsWrapper || configTemplateText.classRows || '' }}\"\n [item]=\"item()\"\n [fieldKey]=\"fieldKey()\"\n [keySelected]=\"constHtmlKeySelected\"\n [configTemplate]=\"configTemplateText\"\n [zIndex]=\"zIndex()\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outEvent)=\"handlerSelectItem($event.event, $event.item, $event.action)\" />\n }\n @if (configTemplateText.getComponentOutlet) {\n <ng-container\n *ngComponentOutlet=\"\n item() | LibsUiPipesGetValueOfObjectPipe: fieldKey() : undefined : true | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getComponentOutlet : item() | async;\n inputs: undefined | LibsUiPipesCallFunctionInTemplatePipe: configTemplateText.getDataComponentOutlet : item() : fieldKey() : { valueIsEmpty: { item: item() } } | async\n \" />\n }\n\n @if ((constHtmlKeySelected === constHtmlKeyItem || (constHtmlKeyItem | LibsUiCheckSelectedByKeyPipe: multiKeySelected() : multiKeySelected().length)) && !configTemplateText.ignoreIconSelected && !configTemplateText.actionSort) {\n <i [class]=\"'libs-ui-icon-check ' + (configTemplateText.classIncludeIconSelected || 'right-[12px]')\"></i>\n }\n @if (constHtmlKeySelected === constHtmlKeyItem && configTemplateText.actionSort) {\n <div class=\"libs-ui-list-template-text-sort\">\n <libs_ui-components-buttons-sort-arrow\n [disable]=\"loading() || disable() || false\"\n [mode]=\"configTemplateText?.itemSort?.()?.mode || ''\"\n [fieldSort]=\"constHtmlKeyItem\"\n (outChange)=\"handlerSort($event)\" />\n </div>\n }\n </div>\n </div>\n }\n </ng-template>\n}\n", styles: [".libs-ui-list-template-text-item{padding:6px 16px;position:relative;cursor:pointer}.libs-ui-list-template-text-item>.libs-ui-icon-check,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort{position:absolute;right:16px}.libs-ui-list-template-text-item>.libs-ui-icon-check:before,.libs-ui-list-template-text-item .libs-ui-list-template-text-sort:before{font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-list-template-text-item-bullet{width:10px;height:10px;border-radius:50%;margin-right:8px;cursor:pointer}.libs-ui-list-template-text-item-avatar{width:24px;height:24px;border-radius:50%;margin-right:8px;cursor:pointer}\n"] }]
2278
2281
  }] });
2279
2282
 
2283
+ /* eslint-disable @typescript-eslint/no-explicit-any */
2280
2284
  const getComponentByType = (typeTemplate) => {
2281
2285
  switch (typeTemplate) {
2282
2286
  case 'checkbox':
@@ -2341,6 +2345,188 @@ const initConfig = (config) => {
2341
2345
  break;
2342
2346
  }
2343
2347
  };
2348
+ /**
2349
+ * Quan hệ chọn cha con trong list view checkbox.
2350
+ *
2351
+ * - child_selection_triggers_parent_selection
2352
+ * Chọn cha → không chọn con.\n
2353
+ * Bỏ cha → không bỏ con.\n
2354
+ * Chọn con → không chọn cha.\n
2355
+ * Bỏ con → không bỏ cha.`,
2356
+ * VD: Logic thường dùng cho cây SP merchant Bank
2357
+ *
2358
+ * - parent_selection_triggers_all_children
2359
+ * Chọn cha → chọn cả con.
2360
+ * Bỏ cha → không bỏ con.
2361
+ * Chọn con → không chọn cha.
2362
+ * Bỏ con → không bỏ cha
2363
+ * VD: Logic thường dùng cho cây SP merchant Retail
2364
+ *
2365
+ * @param {CONFIG_LIST_GROUP_RELATIONSHIP_PARENT_CHILD_TYPE} template - Kiểu logic quan hệ cha/con áp dụng.
2366
+ * @returns {Pick<IListConfigItemGroup, 'chooseChildThenAutoChooseParent' | 'ignoreChooseParentThenAutoChooseChildren' | 'ignoreUnselectChildrenRemoveSelectParent' | 'ignoreEmitAllItemCheckedWhenChooseChildThenAutoChooseParent'>} - Signal chứa cấu hình nhóm list view hoàn chỉnh.
2367
+ */
2368
+ function buildGroupRelationShipParentChildConfig(template) {
2369
+ switch (template) {
2370
+ case 'child_selection_triggers_parent_selection':
2371
+ return {
2372
+ chooseChildThenAutoChooseParent: true,
2373
+ ignoreChooseParentThenAutoChooseChildren: true,
2374
+ ignoreUnselectChildrenRemoveSelectParent: true,
2375
+ ignoreEmitAllItemCheckedWhenChooseChildThenAutoChooseParent: true,
2376
+ singleSelectItemByTree: true,
2377
+ };
2378
+ case 'parent_selection_triggers_all_children':
2379
+ return {
2380
+ emitAllItemChecked: true,
2381
+ notChangeStateItemCheckOther: true,
2382
+ ignoreChooseParentThenAutoChooseChildren: false,
2383
+ ignoreUnselectChildrenRemoveSelectParent: true,
2384
+ };
2385
+ }
2386
+ }
2387
+ /**
2388
+ * Tạo cấu hình nhóm cho list view theo các logic chọn cha/con phổ biến.
2389
+ *
2390
+ *
2391
+ * **1. group_tree_checkbox_child_selection_triggers_parent_selection**
2392
+ * - Dạng tree nhiều cấp, checkbox chọn nhiều giá trị.
2393
+ * - Logic:
2394
+ * 1) Chọn cha → không tự động chọn con.
2395
+ * 2) Bỏ cha → bỏ toàn bộ con.
2396
+ * 3) Chọn con → chọn cả cha.
2397
+ * 4) Bỏ con → không bỏ cha.
2398
+ * - Ví dụ: áp dụng cho cây sản phẩm merchant **Bank**.
2399
+ *
2400
+ * **2. group_tree_checkbox_parent_selection_triggers_all_children**
2401
+ * - Dạng tree nhiều cấp, checkbox chọn nhiều giá trị.
2402
+ * - Logic:
2403
+ * 1) Chọn cha → chọn toàn bộ con.
2404
+ * 2) Bỏ cha → không bỏ con.
2405
+ * 3) Chọn con → không chọn cha.
2406
+ * 4) Bỏ con → không bỏ cha.
2407
+ * - Ví dụ: áp dụng cho cây sản phẩm merchant **Retail**.
2408
+ *
2409
+ * **3. group_tree_radio**
2410
+ * - Dạng tree nhiều cấp, các item dạng radio → chỉ chọn một giá trị.
2411
+ *
2412
+ * **4. group_tree_text_child_selection_triggers_parent_selection**
2413
+ * - Dạng tree nhiều cấp, item dạng text với single-select.
2414
+ * - Logic:
2415
+ * 1) Chọn cha → không chọn con.
2416
+ * 2) Bỏ cha → bỏ con.
2417
+ * 3) Chọn con → chọn cả cha.
2418
+ * 4) Bỏ con → không bỏ cha.
2419
+ * - Ví dụ: áp dụng cho cây sản phẩm merchant **Bank**.
2420
+ *
2421
+ * **5. group_tree_text_parent_selection_triggers_all_children**
2422
+ * - Dạng tree nhiều cấp, item dạng text với single-select.
2423
+ * - Logic:
2424
+ * 1) Chọn cha → chọn toàn bộ con.
2425
+ * 2) Bỏ cha → không bỏ con.
2426
+ * 3) Chọn con → không chọn cha.
2427
+ * 4) Bỏ con → không bỏ cha.
2428
+ * - Ví dụ: áp dụng cho cây sản phẩm merchant **Retail**.
2429
+ *
2430
+ * **6. group_label_checkbox**
2431
+ * - Group dạng label, chỉ dùng để phân nhóm.
2432
+ * - Item trong group là checkbox (multi-select).
2433
+ *
2434
+ * **7. group_label_text**
2435
+ * - Group dạng label, chỉ dùng để phân nhóm.
2436
+ * - Item là text (single-select).
2437
+ *
2438
+ * ---
2439
+ *
2440
+ * Các template hỗ trợ:
2441
+
2442
+ * @param {CONFIG_LIST_GROUP_TYPE} template - Kiểu logic quan hệ cha/con áp dụng.
2443
+ * @param {Partial<ALLOWED_GROUP_OVERRIDES_TYPE>} [overrides={}] - Ghi đè cấu hình mặc định nếu cần.
2444
+ * @returns {WritableSignal<IListConfigItemGroup>} - Signal chứa cấu hình nhóm list view hoàn chỉnh.
2445
+ * @example
2446
+ * const config = buildListViewGroupConfig('parent_controls_children_but_children_can_unselect', {
2447
+ * isViewTree: true,
2448
+ * });
2449
+ */
2450
+ function buildListGroupConfig(template, overrides = {}) {
2451
+ const getMaxLevelGroup = (group, level = 1) => {
2452
+ const keySub = get(overrides, 'fieldGetItems') || 'items';
2453
+ const sub = get(group, keySub);
2454
+ if (!sub || !sub.length)
2455
+ return Math.max(level, 2);
2456
+ return Math.max(level, ...sub.map((field) => getMaxLevelGroup(get(field, ''), level + 1)), 2);
2457
+ };
2458
+ const baseConfigTemplateGroup = {
2459
+ fieldKey: 'id',
2460
+ fieldGetItems: 'items',
2461
+ iconExpand: 'left',
2462
+ searchAllLevel: true,
2463
+ getLabelGroup: (item) => item.name || item.label || CHARACTER_DATA_EMPTY,
2464
+ getLabelItem: (item) => item.name || item.label || CHARACTER_DATA_EMPTY,
2465
+ getMaxLevelGroup,
2466
+ };
2467
+ let templates = {};
2468
+ switch (template) {
2469
+ case 'group_tree_checkbox_1':
2470
+ templates = {
2471
+ isViewTree: true,
2472
+ ...buildGroupRelationShipParentChildConfig('child_selection_triggers_parent_selection'),
2473
+ };
2474
+ break;
2475
+ case 'group_tree_checkbox_2':
2476
+ templates = {
2477
+ isViewTree: true,
2478
+ ...buildGroupRelationShipParentChildConfig('parent_selection_triggers_all_children'),
2479
+ };
2480
+ break;
2481
+ case 'group_tree_radio_1':
2482
+ templates = {
2483
+ isViewTree: true,
2484
+ isViewRadio: true,
2485
+ singleSelectItemByTree: true,
2486
+ ...buildGroupRelationShipParentChildConfig('child_selection_triggers_parent_selection'),
2487
+ };
2488
+ break;
2489
+ case 'group_tree_text_1':
2490
+ templates = {
2491
+ isViewTree: true,
2492
+ singleSelectItem: true,
2493
+ hasBackgroundColorWhenItemSelected: false,
2494
+ hasIconCheckSingleSelectItem: true,
2495
+ ...buildGroupRelationShipParentChildConfig('child_selection_triggers_parent_selection'),
2496
+ };
2497
+ break;
2498
+ case 'group_tree_text_2':
2499
+ templates = {
2500
+ isViewTree: true,
2501
+ singleSelectItem: true,
2502
+ hasIconCheckSingleSelectItem: true,
2503
+ hasBackgroundColorWhenItemSelected: false,
2504
+ ...buildGroupRelationShipParentChildConfig('parent_selection_triggers_all_children'),
2505
+ };
2506
+ break;
2507
+ case 'group_label_checkbox_1':
2508
+ templates = {
2509
+ ignoreGroupLine: true,
2510
+ iconExpand: 'right',
2511
+ };
2512
+ break;
2513
+ case 'group_label_text_1':
2514
+ templates = {
2515
+ ignoreGroupLine: true,
2516
+ iconExpand: 'right',
2517
+ singleSelectItem: true,
2518
+ ignoreCheckboxGroup: true,
2519
+ hasIconCheckSingleSelectItem: true,
2520
+ hasBackgroundColorWhenItemSelected: false,
2521
+ };
2522
+ break;
2523
+ }
2524
+ return signal({
2525
+ ...baseConfigTemplateGroup,
2526
+ ...(templates || {}),
2527
+ ...overrides,
2528
+ });
2529
+ }
2344
2530
 
2345
2531
  /* eslint-disable @typescript-eslint/no-explicit-any */
2346
2532
  class LibsUiComponentsListComponent {
@@ -2749,11 +2935,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2749
2935
  args: [{ selector: 'libs_ui-components-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, LibsUiComponentsLabelComponent, LibsUiComponentsInputsSearchComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent], template: "<div\n #listViewContainer\n class=\"flex flex-col\"\n [class.w-full]=\"!maxItemShow()\"\n [class.h-full]=\"!maxItemShow() || maxItemShow() === -1\">\n @if (labelConfig(); as labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"labelConfig.classInclude\"\n [labelLeft]=\"labelConfig.labelLeft\"\n [labelLeftClass]=\"labelConfig.labelLeftClass\"\n [required]=\"labelConfig.required\"\n [description]=\"labelConfig.description\"\n [descriptionClass]=\"labelConfig.descriptionClass\"\n [labelRight]=\"labelConfig.labelRight\"\n [labelRightClass]=\"labelConfig.labelRightClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [buttonsLeft]=\"labelConfig.buttonsLeft\"\n [buttonsRight]=\"labelConfig.buttonsRight\"\n [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n [hasToggle]=\"labelConfig.hasToggle\"\n [toggleActive]=\"labelConfig.toggleActive\"\n [toggleDisable]=\"labelConfig.toggleDisable || loading() || disable()\"\n [popover]=\"labelConfig.popover\"\n [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [limitLength]=\"labelConfig.limitLength\"\n [buttonsDescription]=\"labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"labelConfig.count\" />\n }\n\n @if (!showValidateBottom()) {\n <ng-container *ngTemplateOutlet=\"templateValidate\" />\n }\n @if (!hiddenInputSearch()) {\n <libs_ui-components-inputs-search\n [searchConfig]=\"searchConfig()\"\n [class.px-[12px]]=\"searchPadding()\"\n [class]=\"searchConfig().classCoverInputSearch\"\n [disable]=\"disable() || loading() || false\"\n (outSearch)=\"handlerSearch($event)\"\n (outFunctionsControl)=\"handlerFunctionControlInputSearch($event)\" />\n }\n @if (config()?.configDescriptionGroup?.(); as description) {\n <div [class]=\"description?.classInclude\">\n <libs_ui-components-popover [config]=\"description?.tooltipDescription()\">\n <div [class]=\"description?.classTextDescriptionInclude\">{{ description.textDescription }}</div>\n </libs_ui-components-popover>\n </div>\n }\n @if (!hiddenInputSearch() && hasDivider() && (!config()?.ignoreShowDataWhenNotSearch || keySearchStore())) {\n <div\n class=\"libs-ui-border-top-general {{ dividerClassInclude() ? dividerClassInclude() : '' }}\"\n [class.libs-ui-divider-default]=\"!!searchPadding() && !dividerClassInclude()\"></div>\n }\n <div class=\"flex flex-col {{ config()?.ignoreShowDataWhenNotSearch && keySearchStore() && !config()?.ignoreFixHeightShowDataWhenNotSearch ? 'h-[353px]' : 'h-full' }}\">\n <div\n #contentContainer\n class=\"w-full h-full {{ backgroundListCustom() }}\"\n [class.libs-ui-disable]=\"disable() && disableLabel()\"\n [class.pointer-events-none]=\"disable() && disableLabel()\"></div>\n\n @for (buttonOther of buttonsOther(); track $index) {\n <div\n class=\"bg-[#ffffff] libs-ui-border-top-general\"\n [class.rounded-b-[4px]]=\"$last && !hasButtonUnSelectOption()\">\n <libs_ui-components-buttons-button\n [type]=\"buttonOther.type || 'button-link-primary'\"\n [label]=\"buttonOther.label || ' '\"\n [classIconLeft]=\"(buttonOther.classIconLeft || '') + ' flex mr-[8px] text-[16px]'\"\n classInclude=\"w-full text-left rounded-0 {{ buttonOther.classInclude ? buttonOther.classInclude : '' }}\"\n classLabel=\"libs-ui-font-h5r whitespace-normal\"\n [disable]=\"buttonOther.disable || disable() || loading() || false\"\n (outClick)=\"handlerClickButtonOther(buttonOther)\" />\n </div>\n }\n @if (hasButtonUnSelectOption()) {\n <div class=\"bg-[#ffffff] rounded-b-[4px] libs-ui-border-top-general\">\n <libs_ui-components-buttons-button\n label=\"i18n_unselect_option\"\n type=\"button-link-danger-high\"\n classIconLeft=\"flex mr-[8px] libs-ui-icon-close\"\n classInclude=\"w-full text-left rounded-0\"\n classLabel=\"libs-ui-font-h5r whitespace-normal\"\n [disable]=\"disableButtonUnSelectOption() || disable() || loading() || false\"\n (outClick)=\"handlerRemoveKeySelected()\" />\n </div>\n }\n </div>\n @if (showValidateBottom()) {\n <ng-container *ngTemplateOutlet=\"templateValidate\" />\n }\n</div>\n\n<ng-template #templateValidate>\n @if (isErrorRequired()) {\n <div\n [class.mb-[8px]]=\"!showValidateBottom()\"\n [class.mt-[8px]]=\"showValidateBottom()\">\n @let constHtmlMessage = validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID;\n <span\n class=\"libs-ui-text-error libs-ui-font-h7r\"\n [innerHtml]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></span>\n </div>\n }\n</ng-template>\n", styles: [":host{background-color:#fff}:host ::ng-deep .libs-ui-list-highlight-text-search{background-color:#ffdb80;border-radius:2px;display:inline-block;overflow:unset}.libs-ui-divider-default{width:calc(100% - 24px);margin:12px auto 0}\n"] }]
2750
2936
  }], ctorParameters: () => [] });
2751
2937
 
2938
+ const ENUM_OPTIONS_GET_LIST_GROUP_CONFIG = [
2939
+ 'group_tree_checkbox_1',
2940
+ 'group_tree_checkbox_2',
2941
+ 'group_tree_radio_1',
2942
+ 'group_tree_radio_2',
2943
+ 'group_tree_text_1',
2944
+ 'group_tree_text_2',
2945
+ 'group_label_checkbox_1',
2946
+ 'group_label_text_1',
2947
+ ];
2948
+ const CONFIG_LIST_GROUP_RELATIONSHIP_PARENT_CHILD_TYPES = [
2949
+ 'child_selection_triggers_parent_selection',
2950
+ 'parent_selection_triggers_all_children',
2951
+ ];
2952
+
2752
2953
  /* eslint-disable @typescript-eslint/no-explicit-any */
2753
2954
 
2754
2955
  /**
2755
2956
  * Generated bundle index. Do not edit.
2756
2957
  */
2757
2958
 
2758
- export { LibsUiComponentsListComponent, getComponentByType, getFieldKeyByType, initConfig };
2959
+ export { CONFIG_LIST_GROUP_RELATIONSHIP_PARENT_CHILD_TYPES, ENUM_OPTIONS_GET_LIST_GROUP_CONFIG, LibsUiComponentsListComponent, buildListGroupConfig, getComponentByType, getFieldKeyByType, initConfig };
2759
2960
  //# sourceMappingURL=libs-ui-components-list.mjs.map