@libs-ui/components-tabs 0.2.356-4 → 0.2.356-40

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 (10) hide show
  1. package/README.md +2 -1
  2. package/esm2022/interfaces/tab.interface.mjs +1 -1
  3. package/esm2022/item/item.component.mjs +28 -9
  4. package/esm2022/tabs.component.mjs +224 -20
  5. package/fesm2022/libs-ui-components-tabs.mjs +248 -25
  6. package/fesm2022/libs-ui-components-tabs.mjs.map +1 -1
  7. package/interfaces/tab.interface.d.ts +2 -1
  8. package/item/item.component.d.ts +15 -11
  9. package/package.json +11 -10
  10. package/tabs.component.d.ts +39 -6
package/fesm2022/libs-ui-components-tabs.mjs CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
- import { computed, signal, input, model, output, inject, ElementRef, effect, untracked, ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
2
+ import { computed, signal, input, model, output, inject, ElementRef, effect, untracked, ChangeDetectionStrategy, Component, DestroyRef, viewChild } from '@angular/core';
3
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
3
4
  import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
4
5
  import { LibsUiComponentsDragContainerDirective, LibsUiDragItemDirective } from '@libs-ui/components-drag-drop';
5
6
  import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
@@ -8,9 +9,9 @@ import { escapeHtml, uuid, convertObjectToSignal, isNil } from '@libs-ui/utils';
8
9
  import { TranslateService } from '@ngx-translate/core';
9
10
  import { Subject, debounceTime, of, fromEvent } from 'rxjs';
10
11
  import { debounceTime as debounceTime$1, takeUntil } from 'rxjs/operators';
12
+ import { AsyncPipe } from '@angular/common';
11
13
  import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
12
14
  import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
13
- import { AsyncPipe } from '@angular/common';
14
15
  import { returnListObject } from '@libs-ui/services-http-request';
15
16
 
16
17
  class LibsUiComponentsTabsItemComponent {
@@ -19,7 +20,7 @@ class LibsUiComponentsTabsItemComponent {
19
20
  actionShowing = signal(false);
20
21
  mutationObserver = signal(undefined);
21
22
  mutationObserverSubject = new Subject();
22
- onDestroy = new Subject();
23
+ resizeObserverV2;
23
24
  popoverFunctionControlEvent = signal(undefined);
24
25
  // #region INPUT
25
26
  ignoreCalculatorTab = input.required();
@@ -36,6 +37,8 @@ class LibsUiComponentsTabsItemComponent {
36
37
  disableLabel = input();
37
38
  zIndex = input();
38
39
  changeViewTab = input.required();
40
+ /** V2 mode — dùng ResizeObserver thay vì MutationObserver. Mặc định false để giữ behavior cũ. */
41
+ useCalculatorV2 = input(false);
39
42
  // #region OUTPUT
40
43
  outAction = output();
41
44
  /* INJECT*/
@@ -43,6 +46,10 @@ class LibsUiComponentsTabsItemComponent {
43
46
  translateService = inject(TranslateService);
44
47
  constructor() {
45
48
  effect(() => {
49
+ if (this.useCalculatorV2()) {
50
+ // V2 — ResizeObserver được setup ở ngAfterViewInit, effect không cần làm gì.
51
+ return;
52
+ }
46
53
  if (this.mode() !== 'left' || this.ignoreCalculatorTab()) {
47
54
  return;
48
55
  }
@@ -62,7 +69,20 @@ class LibsUiComponentsTabsItemComponent {
62
69
  this.item.update((item) => ({ ...item, key: uuid() }));
63
70
  }
64
71
  }
72
+ ngAfterViewInit() {
73
+ if (!this.useCalculatorV2() || this.ignoreCalculatorTab() || this.mode() !== 'left') {
74
+ return;
75
+ }
76
+ this.setupResizeObserverV2();
77
+ }
65
78
  /* FUNCTIONS */
79
+ setupResizeObserverV2() {
80
+ if (this.resizeObserverV2 || typeof ResizeObserver === 'undefined') {
81
+ return;
82
+ }
83
+ this.resizeObserverV2 = new ResizeObserver(() => this.updateSpecificWidth());
84
+ this.resizeObserverV2.observe(this.element.nativeElement);
85
+ }
66
86
  updateSpecificWidth() {
67
87
  const preSpecificWidth = this.item().specificWidth;
68
88
  const width = this.element.nativeElement.offsetWidth;
@@ -104,15 +124,15 @@ class LibsUiComponentsTabsItemComponent {
104
124
  }
105
125
  ngOnDestroy() {
106
126
  this.mutationObserver()?.disconnect();
107
- this.onDestroy.next();
108
- this.onDestroy.complete();
127
+ this.resizeObserverV2?.disconnect();
128
+ this.resizeObserverV2 = undefined;
109
129
  }
110
130
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
111
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTabsItemComponent, isStandalone: true, selector: "libs_ui-components-tabs-item", inputs: { ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: true, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: true, transformFunction: null }, cssDefault: { classPropertyName: "cssDefault", publicName: "cssDefault", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, changeViewTab: { classPropertyName: "changeViewTab", publicName: "changeViewTab", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { item: "itemChange", outAction: "outAction" }, ngImport: i0, template: "@if (item(); as item) {\n <div\n #itemEl\n class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }} {{ item[fieldKey()] === keySelected() && tabs().classIncludeActiveItem ? tabs().classIncludeActiveItem : '' }}\"\n [attr.key]=\"item[fieldKey()]\"\n [attr.invalid]=\"item.invalid && !tabs().ignoreShowLineBottomInTab\"\n [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n [attr.disable]=\"disable()\"\n [class.!cursor-pointer]=\"!disable()\"\n [class.!cursor-default]=\"disable()\"\n [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\">\n @if (tabs().hasImage) {\n <img\n class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverImage\"\n [config]=\"item.popoverImage\"\n [ignoreStopPropagationEvent]=\"true\"\n [class.libs-ui-disable]=\"disable()\"\n [src]=\"item.linkImage\"\n [attr.key]=\"item[fieldKey()]\"\n (error)=\"handlerImgError($event)\" />\n }\n @if (item.iconLeft) {\n <i\n class=\"libs-ui-tab-header-center-item-icon libs-ui-mr-8px {{ item.iconLeft }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconLeft\"\n [config]=\"item.popoverIconLeft\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (item.is_pin) {\n <i\n class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (tabs().hasStep) {\n @if (tabs().stepHasBackGround) {\n <div\n class=\"libs-ui-tab-header-center-item-step !border-none libs-ui-font-h6m\"\n [class.!text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.!text-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.!text-[#f15767]]=\"item.invalid\"\n [class.bg-[#f8f9fa]]=\"step() > (tabs().stepCompleted || 0) && (tabs().ignoreSelectedBackgroundStep || disable()) && !item.invalid\"\n [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"((item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep) || (step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep)) && !item.invalid\"\n [class.!bg-[#fdeaec]]=\"item.invalid\">\n @if (step() <= (tabs().stepCompleted || -1)) {\n <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n } @else {\n <span [class.text-[#cdd0d6]]=\"disable()\">{{ step() }}</span>\n }\n </div>\n } @else {\n <div\n class=\"libs-ui-tab-header-center-item-step\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\">\n <span>{{ step() }}</span>\n </div>\n }\n }\n @if (item.configButtonLeft) {\n <libs_ui-components-buttons-button\n [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n [classIconLeft]=\"item.configButtonLeft.classIconLeft || ''\"\n [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n [classIconRight]=\"item.configButtonLeft.classIconRight || ''\"\n [label]=\"item.configButtonLeft.label || ''\"\n [popover]=\"item.configButtonLeft.popover || {}\"\n (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n }\n @if (item[fieldLabel()]) {\n <div\n class=\"relative flex\"\n [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n <span\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{ position: { mode: step() === 1 ? 'start' : 'center', distance: 0 }, zIndex: zIndex() }\"\n [attr.size]=\"size()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.!text-[#f15767]]=\"item.invalid\"\n [ignoreStopPropagationEvent]=\"true\"\n [classInclude]=\"'w-full libs-ui-tab-header-center-item-label ' + (item.classLabel || 'libs-ui-font-h6m') + (disableLabel() && disable() ? ' libs-ui-disable' : '') + (tabs().stepHasBackGround && disable() ? ' text-[#cdd0d6]' : '')\"\n [innerHTML]=\"labelComputed()\"></span>\n @if (item.hasRedDot) {\n <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] rounded-[6px]\"></div>\n }\n </div>\n }\n @if (item.popover) {\n <i\n class=\"libs-ui-tab-header-center-item-icon ml-[8px] libs-ui-icon-tooltip-outline\"\n LibsUiComponentsPopoverDirective\n [config]=\"item.popover\"\n [ignoreStopPropagationEvent]=\"true\"\n [class.libs-ui-disable]=\"disable()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"></i>\n }\n @if (item.iconRight) {\n <i\n class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconRight\"\n [config]=\"item.popoverIconRight\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (item.count !== undefined) {\n <libs_ui-components-badge\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"(item.classCircle || 'libs-ui-font-h5r') + (item.invalid ? ' !text-[#f15767] !bg-[#fdeaec]' : '')\"\n [active]=\"item[fieldKey()] === keySelected()\"\n [class.libs-ui-disable]=\"disable()\" />\n }\n @if (item.configButtonRight) {\n <libs_ui-components-buttons-button\n [type]=\"item.configButtonRight.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonRight.classInclude || ''\"\n [classIconLeft]=\"item.configButtonRight.classIconLeft || ''\"\n [classLabel]=\"item.configButtonRight.classLabel || ''\"\n [classIconRight]=\"item.configButtonRight.classIconRight || ''\"\n [popover]=\"item.configButtonRight.popover || {}\"\n [label]=\"item.configButtonRight.label || ''\"\n (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n }\n @if (tabs().actionRightConfig?.(); as right) {\n <libs_ui-components-popover\n [class]=\"right.classInclude || 'ml-[8px]'\"\n [class.libs-ui-tab-header-center-item-action]=\"right.onlyShowWhenHoverItemActive\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [mode]=\"'click-toggle'\"\n [ignoreStopPropagationEvent]=\"true\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [elementRefCustom]=\"right.onlyShowWhenHoverItemActive ? undefined : itemEl\"\n [config]=\"{\n zIndex: right.config?.()?.zIndex || 1000,\n maxHeight: right.config?.()?.maxHeight || 287,\n maxWidth: right.config?.()?.maxWidth || 2048,\n width: right.config?.()?.width || 220,\n direction: right.config?.()?.direction || 'bottom',\n template: right.config?.()?.template || actionEl,\n classInclude: (right.config?.()?.classInclude || '') + ' !rounded-[4px] overflow-hidden',\n whiteTheme: true,\n ignoreArrow: true,\n position: right.config?.()?.position || { mode: 'start', distance: 0 },\n }\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n @if (right.customView) {\n <div [innerHtml]=\"item[fieldKey()] | LibsUiPipesCallFunctionInTemplatePipe: right.customView : item\"></div>\n } @else {\n <i\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.invalid]=\"item.invalid\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class]=\"right.onlyShowWhenHoverItemActive ? 'libs-ui-icon-more-vertical rotate-90 libs-ui-tab-header-center-item-icon' : 'libs-ui-icon-chevron-right rotate-90 libs-ui-tab-header-center-item-icon'\"></i>\n }\n </libs_ui-components-popover>\n <ng-template #actionEl>\n @if (0 | LibsUiPipesCallFunctionInTemplatePipe: right.getListViewConfig : item : item[fieldKey()] : { valueIs0: 0 } | async; as config) {\n <libs_ui-components-list\n [config]=\"config()\"\n [maxItemShow]=\"5\"\n [hiddenInputSearch]=\"true\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n }\n </ng-template>\n }\n @if (tabs().allowRemove && tabs().items().length > 1) {\n <libs_ui-components-buttons-button\n [type]=\"tabs().configButtonRemove?.type || 'button-link-custom'\"\n [iconOnlyType]=\"tabs().configButtonRemove?.iconOnlyType || true\"\n [classInclude]=\"tabs().configButtonRemove?.classInclude || 'ml-[8px] !p-0'\"\n [classIconLeft]=\"tabs().configButtonRemove?.classIconLeft || 'libs-ui-icon-close'\"\n [classLabel]=\"tabs().configButtonRemove?.classLabel || ''\"\n [classIconRight]=\"tabs().configButtonRemove?.classIconRight || ''\"\n [popover]=\"tabs().configButtonRemove?.popover || { config: { content: 'i18n_delete' } }\"\n [label]=\"tabs().configButtonRemove?.label || ''\"\n [buttonCustom]=\"{\n configStepColor: {\n text: '#6a7383',\n text_hover: '#f15767',\n text_active: '#f15767',\n text_disable: '#cdd0d6',\n },\n rootColor: '#f15767',\n }\"\n (outClick)=\"handlerClickButton($event, 'remove')\" />\n }\n </div>\n}\n", styles: [".libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item[invalid=true]:after{background-color:#f15767}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-action{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #9ca2ad;color:#9ca2ad;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6a7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][invalid=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][invalid=true]:before{color:#f15767}.libs-ui-tab-header-center-item-hover:hover[active=false][disable=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-hover:hover .libs-ui-tab-header-center-item-action[active=true],.libs-ui-tab-header-center-item-action-show .libs-ui-tab-header-center-item-action{display:flex}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "templateRefNotSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
131
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTabsItemComponent, isStandalone: true, selector: "libs_ui-components-tabs-item", inputs: { ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: true, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: true, transformFunction: null }, cssDefault: { classPropertyName: "cssDefault", publicName: "cssDefault", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, changeViewTab: { classPropertyName: "changeViewTab", publicName: "changeViewTab", isSignal: true, isRequired: true, transformFunction: null }, useCalculatorV2: { classPropertyName: "useCalculatorV2", publicName: "useCalculatorV2", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outAction: "outAction" }, ngImport: i0, template: "@if (item(); as item) {\n <div\n #itemEl\n class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }} {{ item[fieldKey()] === keySelected() && tabs().classIncludeActiveItem ? tabs().classIncludeActiveItem : '' }}\"\n [attr.key]=\"item[fieldKey()]\"\n [attr.invalid]=\"item.invalid && !tabs().ignoreShowLineBottomInTab\"\n [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n [attr.disable]=\"disable()\"\n [class.!cursor-pointer]=\"!disable()\"\n [class.!cursor-default]=\"disable()\"\n [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\">\n @if (tabs().hasImage) {\n <img\n class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverImage\"\n [config]=\"item.popoverImage\"\n [ignoreStopPropagationEvent]=\"true\"\n [class.libs-ui-disable]=\"disable()\"\n [src]=\"item.linkImage\"\n alt=\"\"\n [attr.key]=\"item[fieldKey()]\"\n (error)=\"handlerImgError($event)\" />\n }\n @if (item.iconLeft) {\n <i\n class=\"libs-ui-tab-header-center-item-icon libs-ui-mr-8px {{ item.iconLeft }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconLeft\"\n [config]=\"item.popoverIconLeft\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (item.is_pin) {\n <i\n class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (tabs().hasStep) {\n @if (tabs().stepHasBackGround) {\n <div\n class=\"libs-ui-tab-header-center-item-step !border-none libs-ui-font-h6m\"\n [class.!text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.!text-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.!text-[#f15767]]=\"item.invalid\"\n [class.bg-[#f8f9fa]]=\"step() > (tabs().stepCompleted || 0) && (tabs().ignoreSelectedBackgroundStep || disable()) && !item.invalid\"\n [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"((item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep) || (step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep)) && !item.invalid\"\n [class.!bg-[#fdeaec]]=\"item.invalid\">\n @if (step() <= (tabs().stepCompleted || -1)) {\n <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n } @else {\n <span [class.text-[#cdd0d6]]=\"disable()\">{{ step() }}</span>\n }\n </div>\n } @else {\n <div\n class=\"libs-ui-tab-header-center-item-step\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\">\n <span>{{ step() }}</span>\n </div>\n }\n }\n @if (item.configButtonLeft) {\n <libs_ui-components-buttons-button\n [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n [classIconLeft]=\"item.configButtonLeft.classIconLeft || ''\"\n [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n [classIconRight]=\"item.configButtonLeft.classIconRight || ''\"\n [label]=\"item.configButtonLeft.label || ''\"\n [popover]=\"item.configButtonLeft.popover || {}\"\n (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n }\n @if (item[fieldLabel()]) {\n <div\n class=\"relative flex\"\n [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n <span\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{ position: { mode: step() === 1 ? 'start' : 'center', distance: 0 }, zIndex: zIndex() }\"\n [attr.size]=\"size()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.!text-[#f15767]]=\"item.invalid\"\n [ignoreStopPropagationEvent]=\"true\"\n [classInclude]=\"'w-full libs-ui-tab-header-center-item-label ' + (item.classLabel || 'libs-ui-font-h6m') + (disableLabel() && disable() ? ' libs-ui-disable' : '') + (tabs().stepHasBackGround && disable() ? ' text-[#cdd0d6]' : '')\"\n [innerHTML]=\"labelComputed()\"></span>\n @if (item.hasRedDot) {\n <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] rounded-[6px]\"></div>\n }\n </div>\n }\n @if (item.popover) {\n <i\n class=\"libs-ui-tab-header-center-item-icon ml-[8px] libs-ui-icon-tooltip-outline\"\n LibsUiComponentsPopoverDirective\n [config]=\"item.popover\"\n [ignoreStopPropagationEvent]=\"true\"\n [class.libs-ui-disable]=\"disable()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"></i>\n }\n @if (item.iconRight && !item.iconRightBehindBadge) {\n <i\n class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconRight\"\n [config]=\"item.popoverIconRight\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (item.count !== undefined) {\n <libs_ui-components-badge\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"(item.classCircle || 'libs-ui-font-h5r') + (item.invalid ? ' !text-[#f15767] !bg-[#fdeaec]' : '')\"\n [active]=\"item[fieldKey()] === keySelected()\"\n [class.libs-ui-disable]=\"disable()\" />\n }\n @if (item.iconRight && item.iconRightBehindBadge) {\n <i\n class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconRight\"\n [config]=\"item.popoverIconRight\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (item.configButtonRight) {\n <libs_ui-components-buttons-button\n [type]=\"item.configButtonRight.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonRight.classInclude || ''\"\n [classIconLeft]=\"item.configButtonRight.classIconLeft || ''\"\n [classLabel]=\"item.configButtonRight.classLabel || ''\"\n [classIconRight]=\"item.configButtonRight.classIconRight || ''\"\n [popover]=\"item.configButtonRight.popover || {}\"\n [label]=\"item.configButtonRight.label || ''\"\n (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n }\n @if (tabs().actionRightConfig?.(); as right) {\n <libs_ui-components-popover\n [class]=\"right.classInclude || 'ml-[8px]'\"\n [class.libs-ui-tab-header-center-item-action]=\"right.onlyShowWhenHoverItemActive\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [mode]=\"'click-toggle'\"\n [ignoreStopPropagationEvent]=\"true\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [elementRefCustom]=\"right.onlyShowWhenHoverItemActive ? undefined : itemEl\"\n [config]=\"{\n zIndex: right.config?.()?.zIndex || 1000,\n maxHeight: right.config?.()?.maxHeight || 287,\n maxWidth: right.config?.()?.maxWidth || 2048,\n width: right.config?.()?.width || 220,\n direction: right.config?.()?.direction || 'bottom',\n template: right.config?.()?.template || actionEl,\n classInclude: (right.config?.()?.classInclude || '') + ' !rounded-[4px] overflow-hidden',\n whiteTheme: true,\n ignoreArrow: true,\n position: right.config?.()?.position || { mode: 'start', distance: 0 },\n }\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n @if (right.customView) {\n <div [innerHtml]=\"item[fieldKey()] | LibsUiPipesCallFunctionInTemplatePipe: right.customView : item\"></div>\n } @else {\n <i\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.invalid]=\"item.invalid\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class]=\"right.onlyShowWhenHoverItemActive ? 'libs-ui-icon-more-vertical rotate-90 libs-ui-tab-header-center-item-icon' : 'libs-ui-icon-chevron-right rotate-90 libs-ui-tab-header-center-item-icon'\"></i>\n }\n </libs_ui-components-popover>\n <ng-template #actionEl>\n @if (0 | LibsUiPipesCallFunctionInTemplatePipe: right.getListViewConfig : item : item[fieldKey()] : { valueIs0: 0 } | async; as config) {\n <libs_ui-components-list\n [config]=\"config()\"\n [maxItemShow]=\"5\"\n [hiddenInputSearch]=\"true\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n }\n </ng-template>\n }\n @if (tabs().allowRemove && tabs().items().length > 1) {\n <libs_ui-components-buttons-button\n [type]=\"tabs().configButtonRemove?.type || 'button-link-custom'\"\n [iconOnlyType]=\"tabs().configButtonRemove?.iconOnlyType || true\"\n [classInclude]=\"tabs().configButtonRemove?.classInclude || 'ml-[8px] !p-0'\"\n [classIconLeft]=\"tabs().configButtonRemove?.classIconLeft || 'libs-ui-icon-close'\"\n [classLabel]=\"tabs().configButtonRemove?.classLabel || ''\"\n [classIconRight]=\"tabs().configButtonRemove?.classIconRight || ''\"\n [popover]=\"tabs().configButtonRemove?.popover || { config: { content: 'i18n_delete' } }\"\n [label]=\"tabs().configButtonRemove?.label || ''\"\n [buttonCustom]=\"{\n configStepColor: {\n text: '#6a7383',\n text_hover: '#f15767',\n text_active: '#f15767',\n text_disable: '#cdd0d6',\n },\n rootColor: '#f15767',\n }\"\n (outClick)=\"handlerClickButton($event, 'remove')\" />\n }\n </div>\n}\n", styles: [".libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item[invalid=true]:after{background-color:#f15767}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-action{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #9ca2ad;color:#9ca2ad;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6a7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][invalid=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][invalid=true]:before{color:#f15767}.libs-ui-tab-header-center-item-hover:hover[active=false][disable=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-hover:hover .libs-ui-tab-header-center-item-action[active=true],.libs-ui-tab-header-center-item-action-show .libs-ui-tab-header-center-item-action{display:flex}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "templateRefNotSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
112
132
  }
113
133
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsItemComponent, decorators: [{
114
134
  type: Component,
115
- args: [{ selector: 'libs_ui-components-tabs-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsBadgeComponent, LibsUiComponentsListComponent, LibsUiPipesCallFunctionInTemplatePipe], template: "@if (item(); as item) {\n <div\n #itemEl\n class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }} {{ item[fieldKey()] === keySelected() && tabs().classIncludeActiveItem ? tabs().classIncludeActiveItem : '' }}\"\n [attr.key]=\"item[fieldKey()]\"\n [attr.invalid]=\"item.invalid && !tabs().ignoreShowLineBottomInTab\"\n [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n [attr.disable]=\"disable()\"\n [class.!cursor-pointer]=\"!disable()\"\n [class.!cursor-default]=\"disable()\"\n [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\">\n @if (tabs().hasImage) {\n <img\n class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverImage\"\n [config]=\"item.popoverImage\"\n [ignoreStopPropagationEvent]=\"true\"\n [class.libs-ui-disable]=\"disable()\"\n [src]=\"item.linkImage\"\n [attr.key]=\"item[fieldKey()]\"\n (error)=\"handlerImgError($event)\" />\n }\n @if (item.iconLeft) {\n <i\n class=\"libs-ui-tab-header-center-item-icon libs-ui-mr-8px {{ item.iconLeft }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconLeft\"\n [config]=\"item.popoverIconLeft\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (item.is_pin) {\n <i\n class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (tabs().hasStep) {\n @if (tabs().stepHasBackGround) {\n <div\n class=\"libs-ui-tab-header-center-item-step !border-none libs-ui-font-h6m\"\n [class.!text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.!text-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.!text-[#f15767]]=\"item.invalid\"\n [class.bg-[#f8f9fa]]=\"step() > (tabs().stepCompleted || 0) && (tabs().ignoreSelectedBackgroundStep || disable()) && !item.invalid\"\n [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"((item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep) || (step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep)) && !item.invalid\"\n [class.!bg-[#fdeaec]]=\"item.invalid\">\n @if (step() <= (tabs().stepCompleted || -1)) {\n <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n } @else {\n <span [class.text-[#cdd0d6]]=\"disable()\">{{ step() }}</span>\n }\n </div>\n } @else {\n <div\n class=\"libs-ui-tab-header-center-item-step\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\">\n <span>{{ step() }}</span>\n </div>\n }\n }\n @if (item.configButtonLeft) {\n <libs_ui-components-buttons-button\n [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n [classIconLeft]=\"item.configButtonLeft.classIconLeft || ''\"\n [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n [classIconRight]=\"item.configButtonLeft.classIconRight || ''\"\n [label]=\"item.configButtonLeft.label || ''\"\n [popover]=\"item.configButtonLeft.popover || {}\"\n (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n }\n @if (item[fieldLabel()]) {\n <div\n class=\"relative flex\"\n [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n <span\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{ position: { mode: step() === 1 ? 'start' : 'center', distance: 0 }, zIndex: zIndex() }\"\n [attr.size]=\"size()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.!text-[#f15767]]=\"item.invalid\"\n [ignoreStopPropagationEvent]=\"true\"\n [classInclude]=\"'w-full libs-ui-tab-header-center-item-label ' + (item.classLabel || 'libs-ui-font-h6m') + (disableLabel() && disable() ? ' libs-ui-disable' : '') + (tabs().stepHasBackGround && disable() ? ' text-[#cdd0d6]' : '')\"\n [innerHTML]=\"labelComputed()\"></span>\n @if (item.hasRedDot) {\n <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] rounded-[6px]\"></div>\n }\n </div>\n }\n @if (item.popover) {\n <i\n class=\"libs-ui-tab-header-center-item-icon ml-[8px] libs-ui-icon-tooltip-outline\"\n LibsUiComponentsPopoverDirective\n [config]=\"item.popover\"\n [ignoreStopPropagationEvent]=\"true\"\n [class.libs-ui-disable]=\"disable()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"></i>\n }\n @if (item.iconRight) {\n <i\n class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconRight\"\n [config]=\"item.popoverIconRight\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (item.count !== undefined) {\n <libs_ui-components-badge\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"(item.classCircle || 'libs-ui-font-h5r') + (item.invalid ? ' !text-[#f15767] !bg-[#fdeaec]' : '')\"\n [active]=\"item[fieldKey()] === keySelected()\"\n [class.libs-ui-disable]=\"disable()\" />\n }\n @if (item.configButtonRight) {\n <libs_ui-components-buttons-button\n [type]=\"item.configButtonRight.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonRight.classInclude || ''\"\n [classIconLeft]=\"item.configButtonRight.classIconLeft || ''\"\n [classLabel]=\"item.configButtonRight.classLabel || ''\"\n [classIconRight]=\"item.configButtonRight.classIconRight || ''\"\n [popover]=\"item.configButtonRight.popover || {}\"\n [label]=\"item.configButtonRight.label || ''\"\n (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n }\n @if (tabs().actionRightConfig?.(); as right) {\n <libs_ui-components-popover\n [class]=\"right.classInclude || 'ml-[8px]'\"\n [class.libs-ui-tab-header-center-item-action]=\"right.onlyShowWhenHoverItemActive\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [mode]=\"'click-toggle'\"\n [ignoreStopPropagationEvent]=\"true\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [elementRefCustom]=\"right.onlyShowWhenHoverItemActive ? undefined : itemEl\"\n [config]=\"{\n zIndex: right.config?.()?.zIndex || 1000,\n maxHeight: right.config?.()?.maxHeight || 287,\n maxWidth: right.config?.()?.maxWidth || 2048,\n width: right.config?.()?.width || 220,\n direction: right.config?.()?.direction || 'bottom',\n template: right.config?.()?.template || actionEl,\n classInclude: (right.config?.()?.classInclude || '') + ' !rounded-[4px] overflow-hidden',\n whiteTheme: true,\n ignoreArrow: true,\n position: right.config?.()?.position || { mode: 'start', distance: 0 },\n }\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n @if (right.customView) {\n <div [innerHtml]=\"item[fieldKey()] | LibsUiPipesCallFunctionInTemplatePipe: right.customView : item\"></div>\n } @else {\n <i\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.invalid]=\"item.invalid\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class]=\"right.onlyShowWhenHoverItemActive ? 'libs-ui-icon-more-vertical rotate-90 libs-ui-tab-header-center-item-icon' : 'libs-ui-icon-chevron-right rotate-90 libs-ui-tab-header-center-item-icon'\"></i>\n }\n </libs_ui-components-popover>\n <ng-template #actionEl>\n @if (0 | LibsUiPipesCallFunctionInTemplatePipe: right.getListViewConfig : item : item[fieldKey()] : { valueIs0: 0 } | async; as config) {\n <libs_ui-components-list\n [config]=\"config()\"\n [maxItemShow]=\"5\"\n [hiddenInputSearch]=\"true\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n }\n </ng-template>\n }\n @if (tabs().allowRemove && tabs().items().length > 1) {\n <libs_ui-components-buttons-button\n [type]=\"tabs().configButtonRemove?.type || 'button-link-custom'\"\n [iconOnlyType]=\"tabs().configButtonRemove?.iconOnlyType || true\"\n [classInclude]=\"tabs().configButtonRemove?.classInclude || 'ml-[8px] !p-0'\"\n [classIconLeft]=\"tabs().configButtonRemove?.classIconLeft || 'libs-ui-icon-close'\"\n [classLabel]=\"tabs().configButtonRemove?.classLabel || ''\"\n [classIconRight]=\"tabs().configButtonRemove?.classIconRight || ''\"\n [popover]=\"tabs().configButtonRemove?.popover || { config: { content: 'i18n_delete' } }\"\n [label]=\"tabs().configButtonRemove?.label || ''\"\n [buttonCustom]=\"{\n configStepColor: {\n text: '#6a7383',\n text_hover: '#f15767',\n text_active: '#f15767',\n text_disable: '#cdd0d6',\n },\n rootColor: '#f15767',\n }\"\n (outClick)=\"handlerClickButton($event, 'remove')\" />\n }\n </div>\n}\n", styles: [".libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item[invalid=true]:after{background-color:#f15767}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-action{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #9ca2ad;color:#9ca2ad;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6a7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][invalid=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][invalid=true]:before{color:#f15767}.libs-ui-tab-header-center-item-hover:hover[active=false][disable=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-hover:hover .libs-ui-tab-header-center-item-action[active=true],.libs-ui-tab-header-center-item-action-show .libs-ui-tab-header-center-item-action{display:flex}\n"] }]
135
+ args: [{ selector: 'libs_ui-components-tabs-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsBadgeComponent, LibsUiComponentsListComponent, LibsUiPipesCallFunctionInTemplatePipe], template: "@if (item(); as item) {\n <div\n #itemEl\n class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }} {{ item[fieldKey()] === keySelected() && tabs().classIncludeActiveItem ? tabs().classIncludeActiveItem : '' }}\"\n [attr.key]=\"item[fieldKey()]\"\n [attr.invalid]=\"item.invalid && !tabs().ignoreShowLineBottomInTab\"\n [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n [attr.disable]=\"disable()\"\n [class.!cursor-pointer]=\"!disable()\"\n [class.!cursor-default]=\"disable()\"\n [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\">\n @if (tabs().hasImage) {\n <img\n class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverImage\"\n [config]=\"item.popoverImage\"\n [ignoreStopPropagationEvent]=\"true\"\n [class.libs-ui-disable]=\"disable()\"\n [src]=\"item.linkImage\"\n alt=\"\"\n [attr.key]=\"item[fieldKey()]\"\n (error)=\"handlerImgError($event)\" />\n }\n @if (item.iconLeft) {\n <i\n class=\"libs-ui-tab-header-center-item-icon libs-ui-mr-8px {{ item.iconLeft }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconLeft\"\n [config]=\"item.popoverIconLeft\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (item.is_pin) {\n <i\n class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (tabs().hasStep) {\n @if (tabs().stepHasBackGround) {\n <div\n class=\"libs-ui-tab-header-center-item-step !border-none libs-ui-font-h6m\"\n [class.!text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.!text-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.!text-[#f15767]]=\"item.invalid\"\n [class.bg-[#f8f9fa]]=\"step() > (tabs().stepCompleted || 0) && (tabs().ignoreSelectedBackgroundStep || disable()) && !item.invalid\"\n [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"((item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep) || (step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep)) && !item.invalid\"\n [class.!bg-[#fdeaec]]=\"item.invalid\">\n @if (step() <= (tabs().stepCompleted || -1)) {\n <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n } @else {\n <span [class.text-[#cdd0d6]]=\"disable()\">{{ step() }}</span>\n }\n </div>\n } @else {\n <div\n class=\"libs-ui-tab-header-center-item-step\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\">\n <span>{{ step() }}</span>\n </div>\n }\n }\n @if (item.configButtonLeft) {\n <libs_ui-components-buttons-button\n [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n [classIconLeft]=\"item.configButtonLeft.classIconLeft || ''\"\n [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n [classIconRight]=\"item.configButtonLeft.classIconRight || ''\"\n [label]=\"item.configButtonLeft.label || ''\"\n [popover]=\"item.configButtonLeft.popover || {}\"\n (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n }\n @if (item[fieldLabel()]) {\n <div\n class=\"relative flex\"\n [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n <span\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{ position: { mode: step() === 1 ? 'start' : 'center', distance: 0 }, zIndex: zIndex() }\"\n [attr.size]=\"size()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.!text-[#f15767]]=\"item.invalid\"\n [ignoreStopPropagationEvent]=\"true\"\n [classInclude]=\"'w-full libs-ui-tab-header-center-item-label ' + (item.classLabel || 'libs-ui-font-h6m') + (disableLabel() && disable() ? ' libs-ui-disable' : '') + (tabs().stepHasBackGround && disable() ? ' text-[#cdd0d6]' : '')\"\n [innerHTML]=\"labelComputed()\"></span>\n @if (item.hasRedDot) {\n <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] rounded-[6px]\"></div>\n }\n </div>\n }\n @if (item.popover) {\n <i\n class=\"libs-ui-tab-header-center-item-icon ml-[8px] libs-ui-icon-tooltip-outline\"\n LibsUiComponentsPopoverDirective\n [config]=\"item.popover\"\n [ignoreStopPropagationEvent]=\"true\"\n [class.libs-ui-disable]=\"disable()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"></i>\n }\n @if (item.iconRight && !item.iconRightBehindBadge) {\n <i\n class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconRight\"\n [config]=\"item.popoverIconRight\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (item.count !== undefined) {\n <libs_ui-components-badge\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"(item.classCircle || 'libs-ui-font-h5r') + (item.invalid ? ' !text-[#f15767] !bg-[#fdeaec]' : '')\"\n [active]=\"item[fieldKey()] === keySelected()\"\n [class.libs-ui-disable]=\"disable()\" />\n }\n @if (item.iconRight && item.iconRightBehindBadge) {\n <i\n class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconRight\"\n [config]=\"item.popoverIconRight\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n @if (item.configButtonRight) {\n <libs_ui-components-buttons-button\n [type]=\"item.configButtonRight.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonRight.classInclude || ''\"\n [classIconLeft]=\"item.configButtonRight.classIconLeft || ''\"\n [classLabel]=\"item.configButtonRight.classLabel || ''\"\n [classIconRight]=\"item.configButtonRight.classIconRight || ''\"\n [popover]=\"item.configButtonRight.popover || {}\"\n [label]=\"item.configButtonRight.label || ''\"\n (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n }\n @if (tabs().actionRightConfig?.(); as right) {\n <libs_ui-components-popover\n [class]=\"right.classInclude || 'ml-[8px]'\"\n [class.libs-ui-tab-header-center-item-action]=\"right.onlyShowWhenHoverItemActive\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [mode]=\"'click-toggle'\"\n [ignoreStopPropagationEvent]=\"true\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [elementRefCustom]=\"right.onlyShowWhenHoverItemActive ? undefined : itemEl\"\n [config]=\"{\n zIndex: right.config?.()?.zIndex || 1000,\n maxHeight: right.config?.()?.maxHeight || 287,\n maxWidth: right.config?.()?.maxWidth || 2048,\n width: right.config?.()?.width || 220,\n direction: right.config?.()?.direction || 'bottom',\n template: right.config?.()?.template || actionEl,\n classInclude: (right.config?.()?.classInclude || '') + ' !rounded-[4px] overflow-hidden',\n whiteTheme: true,\n ignoreArrow: true,\n position: right.config?.()?.position || { mode: 'start', distance: 0 },\n }\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n @if (right.customView) {\n <div [innerHtml]=\"item[fieldKey()] | LibsUiPipesCallFunctionInTemplatePipe: right.customView : item\"></div>\n } @else {\n <i\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.invalid]=\"item.invalid\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class]=\"right.onlyShowWhenHoverItemActive ? 'libs-ui-icon-more-vertical rotate-90 libs-ui-tab-header-center-item-icon' : 'libs-ui-icon-chevron-right rotate-90 libs-ui-tab-header-center-item-icon'\"></i>\n }\n </libs_ui-components-popover>\n <ng-template #actionEl>\n @if (0 | LibsUiPipesCallFunctionInTemplatePipe: right.getListViewConfig : item : item[fieldKey()] : { valueIs0: 0 } | async; as config) {\n <libs_ui-components-list\n [config]=\"config()\"\n [maxItemShow]=\"5\"\n [hiddenInputSearch]=\"true\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n }\n </ng-template>\n }\n @if (tabs().allowRemove && tabs().items().length > 1) {\n <libs_ui-components-buttons-button\n [type]=\"tabs().configButtonRemove?.type || 'button-link-custom'\"\n [iconOnlyType]=\"tabs().configButtonRemove?.iconOnlyType || true\"\n [classInclude]=\"tabs().configButtonRemove?.classInclude || 'ml-[8px] !p-0'\"\n [classIconLeft]=\"tabs().configButtonRemove?.classIconLeft || 'libs-ui-icon-close'\"\n [classLabel]=\"tabs().configButtonRemove?.classLabel || ''\"\n [classIconRight]=\"tabs().configButtonRemove?.classIconRight || ''\"\n [popover]=\"tabs().configButtonRemove?.popover || { config: { content: 'i18n_delete' } }\"\n [label]=\"tabs().configButtonRemove?.label || ''\"\n [buttonCustom]=\"{\n configStepColor: {\n text: '#6a7383',\n text_hover: '#f15767',\n text_active: '#f15767',\n text_disable: '#cdd0d6',\n },\n rootColor: '#f15767',\n }\"\n (outClick)=\"handlerClickButton($event, 'remove')\" />\n }\n </div>\n}\n", styles: [".libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item[invalid=true]:after{background-color:#f15767}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-action{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #9ca2ad;color:#9ca2ad;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6a7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][invalid=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][invalid=true]:before{color:#f15767}.libs-ui-tab-header-center-item-hover:hover[active=false][disable=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-hover:hover .libs-ui-tab-header-center-item-action[active=true],.libs-ui-tab-header-center-item-action-show .libs-ui-tab-header-center-item-action{display:flex}\n"] }]
116
136
  }], ctorParameters: () => [] });
117
137
 
118
138
  const tabMoreListConfig = (translate, fieldKey, fieldLabel, tabs, disable) => {
@@ -199,8 +219,24 @@ class LibsUiComponentsTabsComponent {
199
219
  changeViewTab = new Subject();
200
220
  groupName = signal(uuid());
201
221
  stylesDragDropOverrideComputed = computed(() => this.updateStylesDragDropOverride());
222
+ /**
223
+ * V2 — số item đang hiển thị (specificDisplay !== false). Dùng cho mode `space-between`
224
+ * tính width đều cho các item visible (item hidden ở `position: absolute` không chiếm chỗ).
225
+ */
226
+ displayedCount = computed(() => {
227
+ if (!this.useCalculatorV2())
228
+ return this.itemsDisplay().length || 1;
229
+ const count = this.itemsDisplay().filter((s) => s().specificDisplay !== false).length;
230
+ return count || 1;
231
+ });
232
+ /** V2 — kích thước container do ResizeObserver cập nhật, dùng để compute synchronous. */
233
+ containerWidthV2 = signal(0);
234
+ headerLeftWidthV2 = signal(0);
235
+ headerRightWidthV2 = signal(0);
236
+ resizeObserverV2;
202
237
  popoverFunctionControlEvent = signal(undefined);
203
238
  onDestroy = new Subject();
239
+ destroyRef = inject(DestroyRef);
204
240
  // #region INPUT
205
241
  tabs = input.required();
206
242
  keySelected = model.required();
@@ -217,6 +253,15 @@ class LibsUiComponentsTabsComponent {
217
253
  configCss = model();
218
254
  popoverShowMoreTabItem = input();
219
255
  checkCanChangeTabSelected = input();
256
+ useEffectUpdateItems = input();
257
+ /**
258
+ * V2 mode — khi `true`:
259
+ * - Bỏ container đo song song (không render 2 lần).
260
+ * - Dùng ResizeObserver thay MutationObserver/setTimeout/debounce.
261
+ * - Compute synchronous, không reorder items → không flicker.
262
+ * Mặc định `false` để giữ 100% behavior cũ (backward compatible).
263
+ */
264
+ useCalculatorV2 = input(false);
220
265
  // #region OUTPUT
221
266
  outKeySelected = output();
222
267
  outFunctionsControl = output();
@@ -229,17 +274,35 @@ class LibsUiComponentsTabsComponent {
229
274
  headerRightEl = viewChild.required('headerRightEl');
230
275
  /* INJECT*/
231
276
  translate = inject(TranslateService);
277
+ constructor() {
278
+ effect(() => {
279
+ const items = this.tabs()?.items();
280
+ if (!this.useEffectUpdateItems())
281
+ return;
282
+ untracked(() => {
283
+ this.updateItemsDisplay(items);
284
+ });
285
+ });
286
+ // V2 — effect tự động recompute khi container/headerLeft/headerRight đổi kích thước hoặc selected đổi.
287
+ effect(() => {
288
+ if (!this.useCalculatorV2())
289
+ return;
290
+ const containerWidth = this.containerWidthV2();
291
+ // Đọc cả các signal phụ thuộc để effect tự re-run khi chúng đổi.
292
+ this.headerLeftWidthV2();
293
+ this.headerRightWidthV2();
294
+ this.keySelected();
295
+ const items = this.tabs()?.items();
296
+ if (!containerWidth || !items?.length)
297
+ return;
298
+ untracked(() => this.computeDisplayItemsV2(items));
299
+ });
300
+ }
232
301
  ngOnInit() {
233
302
  this.updateTabsCssConfig();
234
303
  this.outFunctionsControl.emit(this.FunctionsControl);
235
- if (this.mode() !== 'left' || this.ignoreCalculatorTab()) {
236
- this.tabs()
237
- .items()
238
- .map((item) => item.update((data) => ({ ...data, specificDisplay: true })));
239
- this.itemsDisplay.set(this.tabs()
240
- .items()
241
- .filter((item) => item().specificDisplay));
242
- return;
304
+ if (!this.useEffectUpdateItems()) {
305
+ this.updateItemsDisplay(this.tabs()?.items());
243
306
  }
244
307
  fromEvent(window, 'resize')
245
308
  .pipe(debounceTime$1(250), takeUntil(this.onDestroy))
@@ -247,16 +310,95 @@ class LibsUiComponentsTabsComponent {
247
310
  if (!this.tabs().items().length) {
248
311
  return;
249
312
  }
313
+ // V2 không cần xử lý resize ở đây — ResizeObserver tự fire.
314
+ if (this.useCalculatorV2()) {
315
+ return;
316
+ }
250
317
  this.displayMoreItem.set(false);
251
318
  this.calculatorTabsItemDisplay();
252
319
  });
253
- this.changeViewTab.pipe(debounceTime$1(20), takeUntil(this.onDestroy)).subscribe(() => this.calculatorTabsItemDisplay());
320
+ // V1 path: preserve old behavior với debounce(20).
321
+ this.changeViewTab.pipe(debounceTime$1(20), takeUntil(this.onDestroy)).subscribe(() => {
322
+ if (this.useCalculatorV2())
323
+ return;
324
+ this.calculatorTabsItemDisplay();
325
+ });
326
+ // V2 path: chạy sync (không debounce) — ResizeObserver đã batch theo frame.
327
+ this.changeViewTab.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
328
+ if (!this.useCalculatorV2())
329
+ return;
330
+ const items = this.tabs()?.items();
331
+ if (items?.length)
332
+ this.computeDisplayItemsV2(items);
333
+ });
334
+ }
335
+ ngAfterViewInit() {
336
+ if (this.useCalculatorV2()) {
337
+ this.setupResizeObserverV2();
338
+ }
339
+ }
340
+ setupResizeObserverV2() {
341
+ if (this.resizeObserverV2 || typeof ResizeObserver === 'undefined') {
342
+ return;
343
+ }
344
+ const headerEl = this.headerEl()?.nativeElement;
345
+ const headerLeftEl = this.headerLeftEl()?.nativeElement;
346
+ const headerRightEl = this.headerRightEl()?.nativeElement;
347
+ if (!headerEl)
348
+ return;
349
+ this.resizeObserverV2 = new ResizeObserver((entries) => {
350
+ for (const entry of entries) {
351
+ const target = entry.target;
352
+ const width = target.clientWidth || 0;
353
+ switch (target) {
354
+ case headerEl:
355
+ if (this.containerWidthV2() !== width)
356
+ this.containerWidthV2.set(width);
357
+ break;
358
+ case headerLeftEl:
359
+ if (this.headerLeftWidthV2() !== width)
360
+ this.headerLeftWidthV2.set(width);
361
+ break;
362
+ case headerRightEl:
363
+ if (this.headerRightWidthV2() !== width)
364
+ this.headerRightWidthV2.set(width);
365
+ break;
366
+ }
367
+ }
368
+ });
369
+ this.resizeObserverV2.observe(headerEl);
370
+ if (headerLeftEl)
371
+ this.resizeObserverV2.observe(headerLeftEl);
372
+ if (headerRightEl)
373
+ this.resizeObserverV2.observe(headerRightEl);
374
+ }
375
+ updateItemsDisplay(items) {
376
+ if (!items)
377
+ return;
378
+ untracked(() => {
379
+ if (this.mode() !== 'left' || this.ignoreCalculatorTab()) {
380
+ items.forEach((item) => item.update((data) => ({ ...data, specificDisplay: true })));
381
+ this.itemsDisplay.set(items);
382
+ return;
383
+ }
384
+ if (this.useCalculatorV2()) {
385
+ // V2: itemsDisplay chứa toàn bộ items (không filter). ResizeObserver sẽ đo width
386
+ // và compute sẽ set specificDisplay flag — style binding ẩn item overflow.
387
+ items.forEach((item) => item.update((data) => ({ ...data, specificDisplay: true })));
388
+ this.itemsDisplay.set([...items]);
389
+ if (this.containerWidthV2()) {
390
+ this.computeDisplayItemsV2(items);
391
+ }
392
+ return;
393
+ }
394
+ this.calculatorTabsItemDisplay();
395
+ });
254
396
  }
255
397
  /* FUNCTIONS */
256
398
  get FunctionsControl() {
257
399
  return {
258
400
  addTabsItem: this.addTabsItem.bind(this),
259
- calculatorTabsItemsDisplay: this.calculatorTabsItemDisplay.bind(this),
401
+ calculatorTabsItemsDisplay: this.calculatorTabsItemDisplayDispatch.bind(this),
260
402
  selectedTabsItem: this.handlerSelectedTabsItem.bind(this),
261
403
  };
262
404
  }
@@ -380,23 +522,37 @@ class LibsUiComponentsTabsComponent {
380
522
  this.keySelected.set(item()[this.fieldKey()]);
381
523
  this.outKeySelected.emit(this.keySelected());
382
524
  this.popoverFunctionControlEvent()?.removePopoverOverlay();
383
- this.calculatorTabsItemDisplay();
525
+ this.calculatorTabsItemDisplayDispatch();
384
526
  }
385
527
  async handlerAction(event) {
386
528
  this.outAction.emit(event);
387
529
  }
388
- async addTabsItem(item, selected = true, addFirst) {
530
+ async addTabsItem(item, selected = true, addFirst, indexAdd) {
389
531
  const items = this.tabs().items;
390
532
  items.update((items) => {
391
533
  if (addFirst) {
392
534
  return [item, ...items];
393
535
  }
536
+ if (indexAdd) {
537
+ items.splice(indexAdd, 0, item);
538
+ return items;
539
+ }
394
540
  return [...items, item];
395
541
  });
396
542
  if (selected) {
397
543
  this.handlerClickItem(item);
398
544
  }
399
545
  }
546
+ /** Dispatch sang nhánh V1 hoặc V2 dựa theo flag. Public API giữ nguyên signature. */
547
+ async calculatorTabsItemDisplayDispatch() {
548
+ if (this.useCalculatorV2()) {
549
+ const items = this.tabs()?.items();
550
+ if (items?.length)
551
+ this.computeDisplayItemsV2(items);
552
+ return;
553
+ }
554
+ await this.calculatorTabsItemDisplay();
555
+ }
400
556
  async calculatorTabsItemDisplay() {
401
557
  let items = this.tabs().items();
402
558
  const indexItemSelected = items.findIndex((item) => item()[this.fieldKey()] === this.keySelected());
@@ -428,24 +584,91 @@ class LibsUiComponentsTabsComponent {
428
584
  const notDisplay = items.filter((item) => item().specificDisplay === false);
429
585
  items = display.concat(notDisplay);
430
586
  items.forEach((item, index) => item.update((data) => ({ ...data, order: index })));
431
- this.tabs().items.set(items.sort((prev, next) => (prev().order || 0) - (next().order || 0)));
587
+ const sortedItems = [...items].sort((prev, next) => (prev().order || 0) - (next().order || 0));
588
+ // Check if order actually changed before setting to avoid triggering redundant cycles
589
+ const orderChanged = items.some((item, index) => item()[this.fieldKey()] !== sortedItems[index]()[this.fieldKey()]);
590
+ if (orderChanged) {
591
+ this.tabs().items.set(sortedItems);
592
+ }
432
593
  this.displayMoreItem.set(displayMoreItem);
433
594
  this.outDisplayMoreItem.emit(this.displayMoreItem());
434
- this.itemsDisplay.set(this.tabs()
595
+ const newItemsDisplay = this.tabs()
435
596
  .items()
436
- .filter((item) => item().specificDisplay));
597
+ .filter((item) => item().specificDisplay);
598
+ this.itemsDisplay.set(newItemsDisplay);
599
+ }
600
+ /**
601
+ * V2 — Tính displayItems synchronous, không reorder, không setTimeout.
602
+ *
603
+ * Why: tránh flicker do reorder DOM + bỏ thuật toán "cảm tính" debounce.
604
+ * How to apply: gọi mỗi khi container width / headerLeft / headerRight / item widths / selected key đổi.
605
+ */
606
+ computeDisplayItemsV2(items) {
607
+ if (this.mode() !== 'left' || this.ignoreCalculatorTab()) {
608
+ items.forEach((item) => item.update((data) => ({ ...data, specificDisplay: true })));
609
+ this.itemsDisplay.set([...items]);
610
+ this.displayMoreItem.set(false);
611
+ this.outDisplayMoreItem.emit(false);
612
+ return;
613
+ }
614
+ const headerWidth = this.containerWidthV2();
615
+ if (!headerWidth)
616
+ return;
617
+ const indexItemSelected = items.findIndex((item) => item()[this.fieldKey()] === this.keySelected());
618
+ if (indexItemSelected < 0)
619
+ return;
620
+ const itemSelected = items[indexItemSelected];
621
+ const itemSelectedWidth = itemSelected().specificWidth || 0;
622
+ const reservedWidth = this.headerLeftWidthV2() + this.headerRightWidthV2() + 32;
623
+ let totalWidth = reservedWidth;
624
+ let displayMoreItem = false;
625
+ items.forEach((item, index) => {
626
+ const itemWidth = item().specificWidth || 0;
627
+ if (!itemWidth) {
628
+ // Chưa có width — tạm hiển thị để ResizeObserver có element mà đo.
629
+ item.update((data) => ({ ...data, specificDisplay: true }));
630
+ return;
631
+ }
632
+ // Reserve space cho selected nếu item này nằm trước selected.
633
+ const projected = totalWidth + itemWidth + (index < indexItemSelected ? itemSelectedWidth : 0);
634
+ totalWidth += itemWidth;
635
+ if (projected > headerWidth) {
636
+ item.update((data) => ({ ...data, specificDisplay: false }));
637
+ displayMoreItem = true;
638
+ return;
639
+ }
640
+ item.update((data) => ({ ...data, specificDisplay: true }));
641
+ });
642
+ // Selected luôn hiển thị.
643
+ itemSelected.update((data) => ({ ...data, specificDisplay: true }));
644
+ // V2: itemsDisplay chứa TẤT CẢ items — không filter. Item overflow được ẩn qua style binding
645
+ // (visibility: hidden + position: absolute) để giữ DOM stable, tránh mount/unmount gây flicker.
646
+ // ResizeObserver luôn đo được width vì mọi item luôn có DOM.
647
+ const allItems = [...items];
648
+ const currentDisplay = this.itemsDisplay();
649
+ // Chỉ set khi nội dung array thực sự đổi (tránh CD thừa).
650
+ const arrayChanged = allItems.length !== currentDisplay.length || allItems.some((it, i) => it !== currentDisplay[i]);
651
+ if (arrayChanged) {
652
+ this.itemsDisplay.set(allItems);
653
+ }
654
+ if (this.displayMoreItem() !== displayMoreItem) {
655
+ this.displayMoreItem.set(displayMoreItem);
656
+ this.outDisplayMoreItem.emit(displayMoreItem);
657
+ }
437
658
  }
438
659
  ngOnDestroy() {
660
+ this.resizeObserverV2?.disconnect();
661
+ this.resizeObserverV2 = undefined;
439
662
  this.onDestroy.next();
440
663
  this.onDestroy.complete();
441
664
  }
442
665
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
443
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTabsComponent, isStandalone: true, selector: "libs_ui-components-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", 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 }, heightTabItem: { classPropertyName: "heightTabItem", publicName: "heightTabItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowDragDropPosition: { classPropertyName: "allowDragDropPosition", publicName: "allowDragDropPosition", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, configCss: { classPropertyName: "configCss", publicName: "configCss", isSignal: true, isRequired: false, transformFunction: null }, popoverShowMoreTabItem: { classPropertyName: "popoverShowMoreTabItem", publicName: "popoverShowMoreTabItem", isSignal: true, isRequired: false, transformFunction: null }, checkCanChangeTabSelected: { classPropertyName: "checkCanChangeTabSelected", publicName: "checkCanChangeTabSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", configCss: "configCssChange", outKeySelected: "outKeySelected", outFunctionsControl: "outFunctionsControl", outDragTabChange: "outDragTabChange", outDisplayMoreItem: "outDisplayMoreItem", outAction: "outAction" }, viewQueries: [{ propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }, { propertyName: "headerLeftEl", first: true, predicate: ["headerLeftEl"], descendants: true, isSignal: true }, { propertyName: "headerRightEl", first: true, predicate: ["headerRightEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-tab\">\n <div\n #headerEl\n class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div\n #headerLeftEl\n class=\"libs-ui-tab-header-left\">\n <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n </div>\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n <div\n class=\"!flex w-full\"\n #elementContainerEl\n LibsUiComponentsDragContainerDirective\n [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n [groupName]=\"groupName()\"\n [(items)]=\"itemsDisplay\"\n [directionDrag]=\"'horizontal'\"\n [disableDragContainer]=\"!allowDragDropPosition()\"\n [acceptDragSameGroup]=\"allowDragDropPosition()\"\n (outDroppedContainer)=\"handlerDropContainer($event)\">\n @for (item of itemsDisplay(); track item) {\n <div\n LibsUiDragItemDirective\n [disable]=\"disable() || !allowDragDropPosition()\"\n [elementContainer]=\"elementContainerEl\"\n [dragBoundary]=\"true\"\n [dragBoundaryAcceptMouseLeaveContainer]=\"true\"\n class=\"relative libs-ui-tab-item-container\"\n [style.width.px]=\"mode() === 'space-between' ? elementContainerEl.clientWidth / (itemsDisplay().length || 1) : undefined\"\n [class.flex]=\"mode() === 'center-has-line'\"\n [class.items-center]=\"mode() === 'center-has-line'\">\n @if (allowDragDropPosition() && !disable()) {\n <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[14px] left-[4px]\"></span>\n }\n <libs_ui-components-tabs-item\n class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index + 1\"\n [class.!pointer-events-none]=\"item().disable || disable()\"\n [disable]=\"item().disable || disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [ignoreCalculatorTab]=\"true\"\n [changeViewTab]=\"changeViewTab\"\n (click)=\"handlerClickItem(item)\"\n (outAction)=\"handlerAction($event)\" />\n @if (mode() === 'center-has-line' && !$last) {\n <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n }\n </div>\n }\n </div>\n </div>\n <div\n class=\"flex items-center\"\n [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n @if (displayMoreItem()) {\n <libs_ui-components-popover\n class=\"w-full h-full flex items-center\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n width: popoverShowMoreTabItem()?.config?.width || 277,\n direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n template: popoverShowMoreTabItem()?.config?.template || menuEl,\n whiteTheme: true,\n ignoreArrow: true,\n position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 },\n }\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n <libs_ui-components-buttons-button\n [type]=\"'button-link-third'\"\n [classInclude]=\"'!p-[8px]'\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n [popover]=\"{ config: { content: popoverShowMoreTabItem()?.config?.content || 'i18n_view_more' } }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-popover>\n }\n </div>\n <div\n #headerRightEl\n class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n </div>\n </div>\n <div class=\"absolute top-0 z-0 w-full\">\n <div\n class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n @for (item of tabs().items(); track item) {\n <libs_ui-components-tabs-item\n class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index + 1\"\n [disable]=\"disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [changeViewTab]=\"changeViewTab\"\n [ignoreCalculatorTab]=\"ignoreCalculatorTab()\" />\n }\n </div>\n </div>\n </div>\n</div>\n<ng-template #menuEl>\n <libs_ui-components-list\n [config]=\"tabMoreListConfig()\"\n [maxItemShow]=\"5\"\n [hiddenInputSearch]=\"true\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;width:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: LibsUiComponentsDragContainerDirective, selector: "[LibsUiComponentsDragContainerDirective]", inputs: ["disableDragContainer", "mode", "directionDrag", "viewEncapsulation", "acceptDragSameGroup", "placeholder", "groupName", "dropToGroupName", "items", "stylesOverride"], outputs: ["itemsChange", "outDragStartContainer", "outDragOverContainer", "outDragLeaveContainer", "outDragEndContainer", "outDroppedContainer", "outDroppedContainerEmpty", "outFunctionControl"] }, { kind: "directive", type: LibsUiDragItemDirective, selector: "[LibsUiDragItemDirective]", inputs: ["fieldId", "item", "itemInContainerVirtualScroll", "throttleTimeHandlerDraggingEvent", "ignoreStopEvent", "onlyMouseDownStopEvent", "dragRootElement", "dragBoundary", "dragBoundaryAcceptMouseLeaveContainer", "elementContainer", "zIndex", "disable", "ignoreUserSelectNone"], outputs: ["outDragStart", "outDragOver", "outDragLeave", "outDragEnd", "outDropped"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsTabsItemComponent, selector: "libs_ui-components-tabs-item", inputs: ["ignoreCalculatorTab", "step", "mode", "tabs", "item", "keySelected", "fieldLabel", "fieldKey", "cssDefault", "size", "disable", "disableLabel", "zIndex", "changeViewTab"], outputs: ["itemChange", "outAction"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "templateRefNotSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
666
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTabsComponent, isStandalone: true, selector: "libs_ui-components-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", 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 }, heightTabItem: { classPropertyName: "heightTabItem", publicName: "heightTabItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowDragDropPosition: { classPropertyName: "allowDragDropPosition", publicName: "allowDragDropPosition", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, configCss: { classPropertyName: "configCss", publicName: "configCss", isSignal: true, isRequired: false, transformFunction: null }, popoverShowMoreTabItem: { classPropertyName: "popoverShowMoreTabItem", publicName: "popoverShowMoreTabItem", isSignal: true, isRequired: false, transformFunction: null }, checkCanChangeTabSelected: { classPropertyName: "checkCanChangeTabSelected", publicName: "checkCanChangeTabSelected", isSignal: true, isRequired: false, transformFunction: null }, useEffectUpdateItems: { classPropertyName: "useEffectUpdateItems", publicName: "useEffectUpdateItems", isSignal: true, isRequired: false, transformFunction: null }, useCalculatorV2: { classPropertyName: "useCalculatorV2", publicName: "useCalculatorV2", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", configCss: "configCssChange", outKeySelected: "outKeySelected", outFunctionsControl: "outFunctionsControl", outDragTabChange: "outDragTabChange", outDisplayMoreItem: "outDisplayMoreItem", outAction: "outAction" }, viewQueries: [{ propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }, { propertyName: "headerLeftEl", first: true, predicate: ["headerLeftEl"], descendants: true, isSignal: true }, { propertyName: "headerRightEl", first: true, predicate: ["headerRightEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-tab\">\n <div\n #headerEl\n class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div\n #headerLeftEl\n class=\"libs-ui-tab-header-left\">\n <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n </div>\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n <div\n class=\"!flex w-full\"\n #elementContainerEl\n LibsUiComponentsDragContainerDirective\n [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n [groupName]=\"groupName()\"\n [(items)]=\"itemsDisplay\"\n [directionDrag]=\"'horizontal'\"\n [disableDragContainer]=\"!allowDragDropPosition()\"\n [acceptDragSameGroup]=\"allowDragDropPosition()\"\n (outDroppedContainer)=\"handlerDropContainer($event)\">\n @for (item of itemsDisplay(); track item) {\n <div\n LibsUiDragItemDirective\n [disable]=\"disable() || !allowDragDropPosition() || (useCalculatorV2() && item().specificDisplay === false)\"\n [elementContainer]=\"elementContainerEl\"\n [dragBoundary]=\"true\"\n [dragBoundaryAcceptMouseLeaveContainer]=\"true\"\n class=\"relative libs-ui-tab-item-container\"\n [style.width.px]=\"mode() === 'space-between' ? elementContainerEl.clientWidth / displayedCount() : undefined\"\n [class.flex]=\"mode() === 'center-has-line'\"\n [class.items-center]=\"mode() === 'center-has-line'\"\n [style.visibility]=\"useCalculatorV2() && item().specificDisplay === false ? 'hidden' : null\"\n [style.position]=\"useCalculatorV2() && item().specificDisplay === false ? 'absolute' : null\"\n [style.pointer-events]=\"useCalculatorV2() && item().specificDisplay === false ? 'none' : null\"\n [attr.aria-hidden]=\"useCalculatorV2() && item().specificDisplay === false ? 'true' : null\">\n @if (allowDragDropPosition() && !disable()) {\n <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[14px] left-[4px]\"></span>\n }\n <libs_ui-components-tabs-item\n class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index + 1\"\n [class.!pointer-events-none]=\"item().disable || disable()\"\n [disable]=\"item().disable || disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [ignoreCalculatorTab]=\"ignoreCalculatorTab() || !useCalculatorV2()\"\n [useCalculatorV2]=\"useCalculatorV2()\"\n [changeViewTab]=\"changeViewTab\"\n (click)=\"handlerClickItem(item)\"\n (keyup.enter)=\"handlerClickItem(item)\"\n (outAction)=\"handlerAction($event)\" />\n @if (mode() === 'center-has-line' && !$last) {\n <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n }\n </div>\n }\n </div>\n </div>\n <div\n class=\"flex items-center\"\n [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n @if (displayMoreItem()) {\n <libs_ui-components-popover\n class=\"w-full h-full flex items-center\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n width: popoverShowMoreTabItem()?.config?.width || 277,\n direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n template: popoverShowMoreTabItem()?.config?.template || menuEl,\n whiteTheme: true,\n ignoreArrow: true,\n position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 },\n }\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n <libs_ui-components-buttons-button\n [type]=\"'button-link-third'\"\n [classInclude]=\"'!p-[8px]'\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n [popover]=\"{ config: { content: popoverShowMoreTabItem()?.config?.content || 'i18n_view_more' } }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-popover>\n }\n </div>\n <div\n #headerRightEl\n class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n </div>\n </div>\n @if (!useCalculatorV2()) {\n <div class=\"absolute top-0 z-0 w-full\">\n <div\n class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n @for (item of tabs().items(); track item) {\n <libs_ui-components-tabs-item\n class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index + 1\"\n [disable]=\"disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [changeViewTab]=\"changeViewTab\"\n [ignoreCalculatorTab]=\"ignoreCalculatorTab()\" />\n }\n </div>\n </div>\n </div>\n }\n</div>\n<ng-template #menuEl>\n <libs_ui-components-list\n [config]=\"tabMoreListConfig()\"\n [maxItemShow]=\"5\"\n [hiddenInputSearch]=\"true\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;width:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: LibsUiComponentsDragContainerDirective, selector: "[LibsUiComponentsDragContainerDirective]", inputs: ["disableDragContainer", "mode", "directionDrag", "viewEncapsulation", "acceptDragSameGroup", "placeholder", "groupName", "dropToGroupName", "items", "stylesOverride"], outputs: ["itemsChange", "outDragStartContainer", "outDragOverContainer", "outDragLeaveContainer", "outDragEndContainer", "outDroppedContainer", "outDroppedContainerEmpty", "outFunctionControl"] }, { kind: "directive", type: LibsUiDragItemDirective, selector: "[LibsUiDragItemDirective]", inputs: ["fieldId", "item", "itemInContainerVirtualScroll", "throttleTimeHandlerDraggingEvent", "ignoreStopEvent", "onlyMouseDownStopEvent", "dragRootElement", "dragBoundary", "dragBoundaryAcceptMouseLeaveContainer", "elementContainer", "zIndex", "disable", "ignoreUserSelectNone"], outputs: ["outDragStart", "outDragOver", "outDragLeave", "outDragEnd", "outDropped"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsTabsItemComponent, selector: "libs_ui-components-tabs-item", inputs: ["ignoreCalculatorTab", "step", "mode", "tabs", "item", "keySelected", "fieldLabel", "fieldKey", "cssDefault", "size", "disable", "disableLabel", "zIndex", "changeViewTab", "useCalculatorV2"], outputs: ["itemChange", "outAction"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "templateRefNotSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
444
667
  }
445
668
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsComponent, decorators: [{
446
669
  type: Component,
447
- args: [{ selector: 'libs_ui-components-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsDragContainerDirective, LibsUiDragItemDirective, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsTabsItemComponent, LibsUiComponentsListComponent], template: "<div class=\"libs-ui-tab\">\n <div\n #headerEl\n class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div\n #headerLeftEl\n class=\"libs-ui-tab-header-left\">\n <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n </div>\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n <div\n class=\"!flex w-full\"\n #elementContainerEl\n LibsUiComponentsDragContainerDirective\n [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n [groupName]=\"groupName()\"\n [(items)]=\"itemsDisplay\"\n [directionDrag]=\"'horizontal'\"\n [disableDragContainer]=\"!allowDragDropPosition()\"\n [acceptDragSameGroup]=\"allowDragDropPosition()\"\n (outDroppedContainer)=\"handlerDropContainer($event)\">\n @for (item of itemsDisplay(); track item) {\n <div\n LibsUiDragItemDirective\n [disable]=\"disable() || !allowDragDropPosition()\"\n [elementContainer]=\"elementContainerEl\"\n [dragBoundary]=\"true\"\n [dragBoundaryAcceptMouseLeaveContainer]=\"true\"\n class=\"relative libs-ui-tab-item-container\"\n [style.width.px]=\"mode() === 'space-between' ? elementContainerEl.clientWidth / (itemsDisplay().length || 1) : undefined\"\n [class.flex]=\"mode() === 'center-has-line'\"\n [class.items-center]=\"mode() === 'center-has-line'\">\n @if (allowDragDropPosition() && !disable()) {\n <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[14px] left-[4px]\"></span>\n }\n <libs_ui-components-tabs-item\n class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index + 1\"\n [class.!pointer-events-none]=\"item().disable || disable()\"\n [disable]=\"item().disable || disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [ignoreCalculatorTab]=\"true\"\n [changeViewTab]=\"changeViewTab\"\n (click)=\"handlerClickItem(item)\"\n (outAction)=\"handlerAction($event)\" />\n @if (mode() === 'center-has-line' && !$last) {\n <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n }\n </div>\n }\n </div>\n </div>\n <div\n class=\"flex items-center\"\n [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n @if (displayMoreItem()) {\n <libs_ui-components-popover\n class=\"w-full h-full flex items-center\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n width: popoverShowMoreTabItem()?.config?.width || 277,\n direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n template: popoverShowMoreTabItem()?.config?.template || menuEl,\n whiteTheme: true,\n ignoreArrow: true,\n position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 },\n }\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n <libs_ui-components-buttons-button\n [type]=\"'button-link-third'\"\n [classInclude]=\"'!p-[8px]'\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n [popover]=\"{ config: { content: popoverShowMoreTabItem()?.config?.content || 'i18n_view_more' } }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-popover>\n }\n </div>\n <div\n #headerRightEl\n class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n </div>\n </div>\n <div class=\"absolute top-0 z-0 w-full\">\n <div\n class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n @for (item of tabs().items(); track item) {\n <libs_ui-components-tabs-item\n class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index + 1\"\n [disable]=\"disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [changeViewTab]=\"changeViewTab\"\n [ignoreCalculatorTab]=\"ignoreCalculatorTab()\" />\n }\n </div>\n </div>\n </div>\n</div>\n<ng-template #menuEl>\n <libs_ui-components-list\n [config]=\"tabMoreListConfig()\"\n [maxItemShow]=\"5\"\n [hiddenInputSearch]=\"true\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;width:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"] }]
448
- }] });
670
+ args: [{ selector: 'libs_ui-components-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsDragContainerDirective, LibsUiDragItemDirective, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsTabsItemComponent, LibsUiComponentsListComponent], template: "<div class=\"libs-ui-tab\">\n <div\n #headerEl\n class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div\n #headerLeftEl\n class=\"libs-ui-tab-header-left\">\n <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n </div>\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n <div\n class=\"!flex w-full\"\n #elementContainerEl\n LibsUiComponentsDragContainerDirective\n [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n [groupName]=\"groupName()\"\n [(items)]=\"itemsDisplay\"\n [directionDrag]=\"'horizontal'\"\n [disableDragContainer]=\"!allowDragDropPosition()\"\n [acceptDragSameGroup]=\"allowDragDropPosition()\"\n (outDroppedContainer)=\"handlerDropContainer($event)\">\n @for (item of itemsDisplay(); track item) {\n <div\n LibsUiDragItemDirective\n [disable]=\"disable() || !allowDragDropPosition() || (useCalculatorV2() && item().specificDisplay === false)\"\n [elementContainer]=\"elementContainerEl\"\n [dragBoundary]=\"true\"\n [dragBoundaryAcceptMouseLeaveContainer]=\"true\"\n class=\"relative libs-ui-tab-item-container\"\n [style.width.px]=\"mode() === 'space-between' ? elementContainerEl.clientWidth / displayedCount() : undefined\"\n [class.flex]=\"mode() === 'center-has-line'\"\n [class.items-center]=\"mode() === 'center-has-line'\"\n [style.visibility]=\"useCalculatorV2() && item().specificDisplay === false ? 'hidden' : null\"\n [style.position]=\"useCalculatorV2() && item().specificDisplay === false ? 'absolute' : null\"\n [style.pointer-events]=\"useCalculatorV2() && item().specificDisplay === false ? 'none' : null\"\n [attr.aria-hidden]=\"useCalculatorV2() && item().specificDisplay === false ? 'true' : null\">\n @if (allowDragDropPosition() && !disable()) {\n <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[14px] left-[4px]\"></span>\n }\n <libs_ui-components-tabs-item\n class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index + 1\"\n [class.!pointer-events-none]=\"item().disable || disable()\"\n [disable]=\"item().disable || disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [ignoreCalculatorTab]=\"ignoreCalculatorTab() || !useCalculatorV2()\"\n [useCalculatorV2]=\"useCalculatorV2()\"\n [changeViewTab]=\"changeViewTab\"\n (click)=\"handlerClickItem(item)\"\n (keyup.enter)=\"handlerClickItem(item)\"\n (outAction)=\"handlerAction($event)\" />\n @if (mode() === 'center-has-line' && !$last) {\n <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n }\n </div>\n }\n </div>\n </div>\n <div\n class=\"flex items-center\"\n [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n @if (displayMoreItem()) {\n <libs_ui-components-popover\n class=\"w-full h-full flex items-center\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n width: popoverShowMoreTabItem()?.config?.width || 277,\n direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n template: popoverShowMoreTabItem()?.config?.template || menuEl,\n whiteTheme: true,\n ignoreArrow: true,\n position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 },\n }\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n <libs_ui-components-buttons-button\n [type]=\"'button-link-third'\"\n [classInclude]=\"'!p-[8px]'\"\n [iconOnlyType]=\"true\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n [popover]=\"{ config: { content: popoverShowMoreTabItem()?.config?.content || 'i18n_view_more' } }\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-popover>\n }\n </div>\n <div\n #headerRightEl\n class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n </div>\n </div>\n @if (!useCalculatorV2()) {\n <div class=\"absolute top-0 z-0 w-full\">\n <div\n class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n @for (item of tabs().items(); track item) {\n <libs_ui-components-tabs-item\n class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index + 1\"\n [disable]=\"disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [changeViewTab]=\"changeViewTab\"\n [ignoreCalculatorTab]=\"ignoreCalculatorTab()\" />\n }\n </div>\n </div>\n </div>\n }\n</div>\n<ng-template #menuEl>\n <libs_ui-components-list\n [config]=\"tabMoreListConfig()\"\n [maxItemShow]=\"5\"\n [hiddenInputSearch]=\"true\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;width:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"] }]
671
+ }], ctorParameters: () => [] });
449
672
 
450
673
  /**
451
674
  * Generated bundle index. Do not edit.