@libs-ui/components-tabs 0.2.43 → 0.2.44

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 (13) hide show
  1. package/esm2022/interfaces/tab.interface.mjs +1 -1
  2. package/esm2022/item/item.component.mjs +26 -15
  3. package/esm2022/tabs.component.mjs +13 -29
  4. package/esm2022/utils/tabs.mjs +11 -9
  5. package/fesm2022/libs-ui-components-tabs.mjs +46 -63
  6. package/fesm2022/libs-ui-components-tabs.mjs.map +1 -1
  7. package/interfaces/tab.interface.d.ts +9 -0
  8. package/item/item.component.d.ts +9 -6
  9. package/package.json +1 -1
  10. package/tabs.component.d.ts +4 -5
  11. package/utils/tabs.d.ts +1 -2
  12. package/esm2022/services/tab.service.mjs +0 -17
  13. package/services/tab.service.d.ts +0 -10
package/fesm2022/libs-ui-components-tabs.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { computed, signal, input, model, output, inject, ElementRef, effect, untracked, Component, ChangeDetectionStrategy, Injectable, viewChild } from '@angular/core';
2
+ import { computed, signal, input, model, output, inject, ElementRef, effect, untracked, Component, ChangeDetectionStrategy, viewChild } from '@angular/core';
3
3
  import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
4
4
  import { LibsUiComponentsDragContainerDirective, LibsUiDragItemDirective } from '@libs-ui/components-drag-drop';
5
5
  import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
@@ -9,13 +9,16 @@ import { TranslateService } from '@ngx-translate/core';
9
9
  import { Subject, debounceTime, of, fromEvent } from 'rxjs';
10
10
  import { debounceTime as debounceTime$1, takeUntil } from 'rxjs/operators';
11
11
  import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
12
+ import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
13
+ import { returnListObject } from '@libs-ui/services-http-request';
12
14
 
13
15
  class LibsUiComponentsTabsItemComponent {
14
16
  labelComputed = computed(() => escapeHtml(this.translateService.instant(this.item()[this.fieldLabel()])));
17
+ actionShowing = signal(false);
15
18
  mutationObserver = signal(undefined);
16
19
  mutationObserverSubject = new Subject();
17
20
  onDestroy = new Subject();
18
- // private dropdownFunctionControl: IDropdownFunctionControlEvent | undefined;
21
+ popoverFunctionControlEvent = signal(undefined);
19
22
  ignoreCalculatorTab = input.required();
20
23
  step = input.required();
21
24
  mode = input.required();
@@ -30,7 +33,7 @@ class LibsUiComponentsTabsItemComponent {
30
33
  disableLabel = input();
31
34
  zIndex = input();
32
35
  changeViewTab = input.required();
33
- outSelectAction = output();
36
+ outActionSelected = output();
34
37
  element = inject(ElementRef);
35
38
  translateService = inject(TranslateService);
36
39
  constructor() {
@@ -41,7 +44,7 @@ class LibsUiComponentsTabsItemComponent {
41
44
  untracked(() => {
42
45
  this.updateSpecificWidth();
43
46
  this.mutationObserver()?.disconnect();
44
- this.mutationObserverSubject.pipe(debounceTime(250)).subscribe(() => this.updateSpecificWidth());
47
+ this.mutationObserverSubject.pipe(debounceTime(10)).subscribe(() => this.updateSpecificWidth());
45
48
  this.mutationObserver.set(new MutationObserver(() => this.mutationObserverSubject.next()));
46
49
  this.mutationObserver()?.observe(this.element.nativeElement, { attributes: true, childList: true, subtree: true });
47
50
  });
@@ -64,15 +67,21 @@ class LibsUiComponentsTabsItemComponent {
64
67
  event.stopPropagation();
65
68
  event.target.src = this.item().linkImageError;
66
69
  }
67
- handlerSelectAction(event) {
68
- // if (this.tab?.modeSaveView) {
69
- // this.moSelectAction.emit({ item: this.item, action: event.key as string });
70
- // this.dropdownFunctionControl && this.dropdownFunctionControl.resetDropdown();
71
- // }
70
+ handlerSelectedKey(event) {
71
+ if (!event) {
72
+ return;
73
+ }
74
+ this.outActionSelected.emit({ item: this.item(), key: event.key });
75
+ this.popoverFunctionControlEvent()?.removePopoverOverlay();
76
+ }
77
+ handlerPopoverFunctionControlEvent(event) {
78
+ this.popoverFunctionControlEvent.set(event);
79
+ }
80
+ handlerPopoverEvent(event) {
81
+ if (event === 'show' || event === 'remove') {
82
+ this.actionShowing.set(event === 'show');
83
+ }
72
84
  }
73
- // protected handlerDropdownFunctionControl(event: IDropdownFunctionControlEvent) {
74
- // this.dropdownFunctionControl = event;
75
- // }
76
85
  handlerClickButton(event, type) {
77
86
  event.stopPropagation();
78
87
  const action = this.item()[type]?.action;
@@ -86,57 +95,46 @@ class LibsUiComponentsTabsItemComponent {
86
95
  this.onDestroy.complete();
87
96
  }
88
97
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
89
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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", outSelectAction: "outSelectAction" }, ngImport: i0, template: " @if (item(); as item) {\n <div #itemEl\n [attr.key]=\"item[fieldKey()]\"\n [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }}\"\n [class.libs-ui-tab-header-center-item-style-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n [class.cursor-pointer]=\"!item.disable && !disable()\">\n @if (tabs().hasImage) {\n <img LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverImage\"\n [config]=\"item.popoverImage\"\n [ignoreStopPropagationEvent]=\"true\"\n class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [src]=\"item.linkImage\"\n [attr.key]=\"item[fieldKey()]\"\n (error)=\"handlerImgError($event)\" />\n }\n @if (item.iconLeft) {\n <i 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-tab-header-center-item-icon mo-lib-mr-8px {{ item.iconLeft }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.is_pin) {\n <i [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\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 [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (tabs().hasStep) {\n @if (tabs().hasBackGroundTab) {\n <div class=\"libs-ui-tab-header-center-item-step border-none libs-ui-font-h6m\"\n [class.cursor-default]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [class.bg-[#f8f9fa]]=\"item.disable || disable()\"\n [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.text[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#f8ff9a]]=\"step() > (tabs().stepCompleted || 0) && tabs().ignoreSelectedBackgroundStep\">\n @if ((step() <= (tabs().stepCompleted || -1))) {\n <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n } @else {\n <span [class.text-[#cdd0d6]]=\"item.disable || disable()\">{{ step() }}</span>\n }\n </div>\n } @else {\n <div [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n class=\"libs-ui-tab-header-center-item-step\">\n <span>{{ step() }}</span>\n </div>\n }\n }\n @if (item.configButtonLeft) {\n <libs_ui-components-buttons-button [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 class=\"relative flex\"\n [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n <span 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 [ignoreStopPropagationEvent]=\"true\"\n [classInclude]=\"'w-full libs-ui-tab-header-center-item-label '+ (item.classLabel || 'libs-ui-font-h6m') + \n (disableLabel() && (item.disable || disable()) ? ' libs-ui-disable' : '') \n + (tabs().hasBackGroundTab && (item.disable || disable()) ? ' text-[#cdd0d6] cursor-default' : '')\"\n [innerHTML]=\"labelComputed()\"></span>\n @if (item.hasRedDot) {\n <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] mo-lib-border-radius-50em\">\n </div>\n }\n </div>\n }\n @if (item.popover) {\n <i LibsUiComponentsPopoverDirective\n [config]=\"item.popover\"\n class=\"ml-[8px]\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon libs-ui-icon-tooltip-outline\">\n </i>\n }\n @if (item.iconRight) {\n <i 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-tab-header-center-item-icon {{ item.iconRight }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.count) {\n <libs_ui-components-badge [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"item.classCircle || 'libs-ui-font-h5r'\"\n [active]=\"item[fieldKey()] === keySelected()\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\" />\n }\n @if (item.configButtonRight) {\n <libs_ui-components-buttons-button [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 <!-- <mo-libs-shared-components-dropdown *ngIf=\"item.specificDisplay && tab.dropdownRightConfig as config\"\n [class.mo-lib-ml-8px]=\"!config.getView\"\n [class.mo-lib-tab-header-center-item-dropdown]=\"config.hiddenShowDropdown\"\n [attr.active]=\"item[fieldKey] === keySelected\"\n [attr.completed]=\"step <= (tab.stepCompleted || -1)\"\n [class.mo-lib-pointer-events-none]=\"item.disable || disable || item[fieldKey] !== keySelected\"\n [isNgContent]=\"true\"\n [customPopupConfig]=\"{\n widthByParent: false,\n ignoreArrow: true,\n paddingLeftItem:config.paddingLeftItem ?? true,\n classInclude:config.classIncludePopup || 'mo-lib-w-250px',\n position:{\n mode: 'start',\n distance: 0\n }\n }\"\n [tooltipElementRefCustom]=\"config.hiddenShowDropdown !== undefined ? undefined : itemEl\"\n [classWidthDropDown]=\"'d-flex'\"\n [listViewData]=\"config.getData ? (item[fieldKey] | MoLibsSharedPipesCallFunctionInTemplate:config.getData:item:lang) : undefined\"\n [listViewConfig]=\"config.listViewConfig\"\n [listViewBackgroundListCustom]=\"config.listViewBackgroundListCustom\"\n [listViewMaxItemShow]=\"config.listViewMaxItemShow || 5\"\n [ignoreStopPropagationEvent]=\"true\"\n (moSelectKey)=\"handlerSelectAction($event)\"\n (moFunctionsControl)=\"handlerDropdownFunctionControl($event)\">\n <div *ngIf=\"config.getView\"\n [innerHtml]=\"item[fieldKey] | MoLibsSharedPipesCallFunctionInTemplate:config.getView:item:lang \">\n </div>\n <i *ngIf=\"!config.getView\"\n [attr.active]=\"item[fieldKey] === keySelected\"\n [attr.completed]=\"step <= (tab.stepCompleted || -1)\"\n class=\" {{ config.hiddenShowDropdown ? 'mo-svg-font-more-horizontal mo-lib-color-6a7383 mo-lib-color-global-hover' : 'mo-svg-font-chevron-down mo-lib-tab-header-center-item-icon' }} \">\n </i>\n </mo-libs-shared-components-dropdown> -->\n\n </div>\n }\n", styles: [".libs-ui-tab-header-center-item-style-hover:hover:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.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-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-dropdown{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #999;color:#999;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{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-style-hover:hover[active=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-style-hover:hover .libs-ui-tab-header-center-item-dropdown[active=true]{display:flex}\n"], dependencies: [{ 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"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
98
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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", outActionSelected: "outActionSelected" }, ngImport: i0, template: " @if (item(); as item) {\n <div #itemEl\n [attr.key]=\"item[fieldKey()]\"\n [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }}\"\n [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\"\n [class.cursor-pointer]=\"!item.disable && !disable()\">\n @if (tabs().hasImage) {\n <img LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverImage\"\n [config]=\"item.popoverImage\"\n [ignoreStopPropagationEvent]=\"true\"\n class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [src]=\"item.linkImage\"\n [attr.key]=\"item[fieldKey()]\"\n (error)=\"handlerImgError($event)\" />\n }\n @if (item.iconLeft) {\n <i 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-tab-header-center-item-icon mo-lib-mr-8px {{ item.iconLeft }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.is_pin) {\n <i [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\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 [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (tabs().hasStep) {\n @if (tabs().hasBackGroundTab) {\n <div class=\"libs-ui-tab-header-center-item-step border-none libs-ui-font-h6m\"\n [class.cursor-default]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [class.bg-[#f8f9fa]]=\"item.disable || disable()\"\n [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.text[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#f8ff9a]]=\"step() > (tabs().stepCompleted || 0) && tabs().ignoreSelectedBackgroundStep\">\n @if ((step() <= (tabs().stepCompleted || -1))) {\n <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n } @else {\n <span [class.text-[#cdd0d6]]=\"item.disable || disable()\">{{ step() }}</span>\n }\n </div>\n } @else {\n <div [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n class=\"libs-ui-tab-header-center-item-step\">\n <span>{{ step() }}</span>\n </div>\n }\n }\n @if (item.configButtonLeft) {\n <libs_ui-components-buttons-button [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 class=\"relative flex\"\n [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n <span 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 [ignoreStopPropagationEvent]=\"true\"\n [classInclude]=\"'w-full libs-ui-tab-header-center-item-label '+ (item.classLabel || 'libs-ui-font-h6m') + \n (disableLabel() && (item.disable || disable()) ? ' libs-ui-disable' : '') \n + (tabs().hasBackGroundTab && (item.disable || disable()) ? ' text-[#cdd0d6] cursor-default' : '')\"\n [innerHTML]=\"labelComputed()\"></span>\n @if (item.hasRedDot) {\n <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] mo-lib-border-radius-50em\">\n </div>\n }\n </div>\n }\n @if (item.popover) {\n <i LibsUiComponentsPopoverDirective\n [config]=\"item.popover\"\n class=\"ml-[8px]\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon libs-ui-icon-tooltip-outline\">\n </i>\n }\n @if (item.iconRight) {\n <i 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-tab-header-center-item-icon {{ item.iconRight }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.count) {\n <libs_ui-components-badge [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"item.classCircle || 'libs-ui-font-h5r'\"\n [active]=\"item[fieldKey()] === keySelected()\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\" />\n }\n @if (item.configButtonRight) {\n <libs_ui-components-buttons-button [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 (item.specificDisplay && tabs().actionRightConfig?.(); as right) {\n <libs_ui-components-popover [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 [class.pointer-events-none]=\"item.disable || disable() || item[fieldKey()] !== keySelected()\"\n [mode]=\"'click-toggle'\"\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 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 [attr.active]=\"item[fieldKey()] === keySelected()\"\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'\">\n </i>\n }\n </libs_ui-components-popover>\n <ng-template #actionEl>\n <libs_ui-components-list [config]=\"right.listViewConfig()\"\n [maxItemShow]=\"5\"\n [hiddenInputSearch]=\"true\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n </ng-template>\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-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 #999;color:#999;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{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-hover:hover[active=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: "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"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "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", "itemChangeUnSelect", "paddingLeftItem", "config", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionCustomAddDataToStore", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
90
99
  }
91
100
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsItemComponent, decorators: [{
92
101
  type: Component,
93
102
  args: [{ selector: 'libs_ui-components-tabs-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
94
103
  LibsUiComponentsButtonsButtonComponent,
95
104
  LibsUiComponentsPopoverComponent,
96
- LibsUiComponentsBadgeComponent
97
- ], template: " @if (item(); as item) {\n <div #itemEl\n [attr.key]=\"item[fieldKey()]\"\n [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }}\"\n [class.libs-ui-tab-header-center-item-style-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n [class.cursor-pointer]=\"!item.disable && !disable()\">\n @if (tabs().hasImage) {\n <img LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverImage\"\n [config]=\"item.popoverImage\"\n [ignoreStopPropagationEvent]=\"true\"\n class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [src]=\"item.linkImage\"\n [attr.key]=\"item[fieldKey()]\"\n (error)=\"handlerImgError($event)\" />\n }\n @if (item.iconLeft) {\n <i 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-tab-header-center-item-icon mo-lib-mr-8px {{ item.iconLeft }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.is_pin) {\n <i [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\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 [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (tabs().hasStep) {\n @if (tabs().hasBackGroundTab) {\n <div class=\"libs-ui-tab-header-center-item-step border-none libs-ui-font-h6m\"\n [class.cursor-default]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [class.bg-[#f8f9fa]]=\"item.disable || disable()\"\n [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.text[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#f8ff9a]]=\"step() > (tabs().stepCompleted || 0) && tabs().ignoreSelectedBackgroundStep\">\n @if ((step() <= (tabs().stepCompleted || -1))) {\n <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n } @else {\n <span [class.text-[#cdd0d6]]=\"item.disable || disable()\">{{ step() }}</span>\n }\n </div>\n } @else {\n <div [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n class=\"libs-ui-tab-header-center-item-step\">\n <span>{{ step() }}</span>\n </div>\n }\n }\n @if (item.configButtonLeft) {\n <libs_ui-components-buttons-button [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 class=\"relative flex\"\n [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n <span 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 [ignoreStopPropagationEvent]=\"true\"\n [classInclude]=\"'w-full libs-ui-tab-header-center-item-label '+ (item.classLabel || 'libs-ui-font-h6m') + \n (disableLabel() && (item.disable || disable()) ? ' libs-ui-disable' : '') \n + (tabs().hasBackGroundTab && (item.disable || disable()) ? ' text-[#cdd0d6] cursor-default' : '')\"\n [innerHTML]=\"labelComputed()\"></span>\n @if (item.hasRedDot) {\n <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] mo-lib-border-radius-50em\">\n </div>\n }\n </div>\n }\n @if (item.popover) {\n <i LibsUiComponentsPopoverDirective\n [config]=\"item.popover\"\n class=\"ml-[8px]\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon libs-ui-icon-tooltip-outline\">\n </i>\n }\n @if (item.iconRight) {\n <i 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-tab-header-center-item-icon {{ item.iconRight }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.count) {\n <libs_ui-components-badge [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"item.classCircle || 'libs-ui-font-h5r'\"\n [active]=\"item[fieldKey()] === keySelected()\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\" />\n }\n @if (item.configButtonRight) {\n <libs_ui-components-buttons-button [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 <!-- <mo-libs-shared-components-dropdown *ngIf=\"item.specificDisplay && tab.dropdownRightConfig as config\"\n [class.mo-lib-ml-8px]=\"!config.getView\"\n [class.mo-lib-tab-header-center-item-dropdown]=\"config.hiddenShowDropdown\"\n [attr.active]=\"item[fieldKey] === keySelected\"\n [attr.completed]=\"step <= (tab.stepCompleted || -1)\"\n [class.mo-lib-pointer-events-none]=\"item.disable || disable || item[fieldKey] !== keySelected\"\n [isNgContent]=\"true\"\n [customPopupConfig]=\"{\n widthByParent: false,\n ignoreArrow: true,\n paddingLeftItem:config.paddingLeftItem ?? true,\n classInclude:config.classIncludePopup || 'mo-lib-w-250px',\n position:{\n mode: 'start',\n distance: 0\n }\n }\"\n [tooltipElementRefCustom]=\"config.hiddenShowDropdown !== undefined ? undefined : itemEl\"\n [classWidthDropDown]=\"'d-flex'\"\n [listViewData]=\"config.getData ? (item[fieldKey] | MoLibsSharedPipesCallFunctionInTemplate:config.getData:item:lang) : undefined\"\n [listViewConfig]=\"config.listViewConfig\"\n [listViewBackgroundListCustom]=\"config.listViewBackgroundListCustom\"\n [listViewMaxItemShow]=\"config.listViewMaxItemShow || 5\"\n [ignoreStopPropagationEvent]=\"true\"\n (moSelectKey)=\"handlerSelectAction($event)\"\n (moFunctionsControl)=\"handlerDropdownFunctionControl($event)\">\n <div *ngIf=\"config.getView\"\n [innerHtml]=\"item[fieldKey] | MoLibsSharedPipesCallFunctionInTemplate:config.getView:item:lang \">\n </div>\n <i *ngIf=\"!config.getView\"\n [attr.active]=\"item[fieldKey] === keySelected\"\n [attr.completed]=\"step <= (tab.stepCompleted || -1)\"\n class=\" {{ config.hiddenShowDropdown ? 'mo-svg-font-more-horizontal mo-lib-color-6a7383 mo-lib-color-global-hover' : 'mo-svg-font-chevron-down mo-lib-tab-header-center-item-icon' }} \">\n </i>\n </mo-libs-shared-components-dropdown> -->\n\n </div>\n }\n", styles: [".libs-ui-tab-header-center-item-style-hover:hover:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.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-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-dropdown{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #999;color:#999;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{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-style-hover:hover[active=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-style-hover:hover .libs-ui-tab-header-center-item-dropdown[active=true]{display:flex}\n"] }]
105
+ LibsUiComponentsBadgeComponent,
106
+ LibsUiComponentsListComponent,
107
+ LibsUiPipesCallFunctionInTemplatePipe
108
+ ], template: " @if (item(); as item) {\n <div #itemEl\n [attr.key]=\"item[fieldKey()]\"\n [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }}\"\n [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\"\n [class.cursor-pointer]=\"!item.disable && !disable()\">\n @if (tabs().hasImage) {\n <img LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverImage\"\n [config]=\"item.popoverImage\"\n [ignoreStopPropagationEvent]=\"true\"\n class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [src]=\"item.linkImage\"\n [attr.key]=\"item[fieldKey()]\"\n (error)=\"handlerImgError($event)\" />\n }\n @if (item.iconLeft) {\n <i 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-tab-header-center-item-icon mo-lib-mr-8px {{ item.iconLeft }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.is_pin) {\n <i [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\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 [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (tabs().hasStep) {\n @if (tabs().hasBackGroundTab) {\n <div class=\"libs-ui-tab-header-center-item-step border-none libs-ui-font-h6m\"\n [class.cursor-default]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [class.bg-[#f8f9fa]]=\"item.disable || disable()\"\n [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.text[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#f8ff9a]]=\"step() > (tabs().stepCompleted || 0) && tabs().ignoreSelectedBackgroundStep\">\n @if ((step() <= (tabs().stepCompleted || -1))) {\n <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n } @else {\n <span [class.text-[#cdd0d6]]=\"item.disable || disable()\">{{ step() }}</span>\n }\n </div>\n } @else {\n <div [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n class=\"libs-ui-tab-header-center-item-step\">\n <span>{{ step() }}</span>\n </div>\n }\n }\n @if (item.configButtonLeft) {\n <libs_ui-components-buttons-button [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 class=\"relative flex\"\n [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n <span 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 [ignoreStopPropagationEvent]=\"true\"\n [classInclude]=\"'w-full libs-ui-tab-header-center-item-label '+ (item.classLabel || 'libs-ui-font-h6m') + \n (disableLabel() && (item.disable || disable()) ? ' libs-ui-disable' : '') \n + (tabs().hasBackGroundTab && (item.disable || disable()) ? ' text-[#cdd0d6] cursor-default' : '')\"\n [innerHTML]=\"labelComputed()\"></span>\n @if (item.hasRedDot) {\n <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] mo-lib-border-radius-50em\">\n </div>\n }\n </div>\n }\n @if (item.popover) {\n <i LibsUiComponentsPopoverDirective\n [config]=\"item.popover\"\n class=\"ml-[8px]\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon libs-ui-icon-tooltip-outline\">\n </i>\n }\n @if (item.iconRight) {\n <i 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-tab-header-center-item-icon {{ item.iconRight }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.count) {\n <libs_ui-components-badge [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"item.classCircle || 'libs-ui-font-h5r'\"\n [active]=\"item[fieldKey()] === keySelected()\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\" />\n }\n @if (item.configButtonRight) {\n <libs_ui-components-buttons-button [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 (item.specificDisplay && tabs().actionRightConfig?.(); as right) {\n <libs_ui-components-popover [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 [class.pointer-events-none]=\"item.disable || disable() || item[fieldKey()] !== keySelected()\"\n [mode]=\"'click-toggle'\"\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 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 [attr.active]=\"item[fieldKey()] === keySelected()\"\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'\">\n </i>\n }\n </libs_ui-components-popover>\n <ng-template #actionEl>\n <libs_ui-components-list [config]=\"right.listViewConfig()\"\n [maxItemShow]=\"5\"\n [hiddenInputSearch]=\"true\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n </ng-template>\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-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 #999;color:#999;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{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-hover:hover[active=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"] }]
98
109
  }], ctorParameters: () => [] });
99
110
 
100
- class LibsUiTabsService {
101
- listTabItemsMore(items) {
102
- return of({
103
- code: 200,
104
- data: items
105
- });
106
- }
107
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
108
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTabsService });
109
- }
110
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTabsService, decorators: [{
111
- type: Injectable
112
- }] });
113
-
114
- const tabMoreListConfig = (tabsService, translate, fieldKey, fieldLabel, tabs) => {
111
+ const tabMoreListConfig = (translate, fieldKey, fieldLabel, tabs) => {
115
112
  return {
116
113
  type: 'text',
117
114
  httpRequestData: {
118
- serviceOther: tabsService,
119
- functionName: 'listTabItemsMore',
120
- argumentsValue: [tabs.items().filter(item => !item().specificDisplay).map(item => item())]
115
+ serviceOther: returnListObject(tabs.items().filter(item => !item().specificDisplay).map(item => item())),
116
+ functionName: 'listObservable',
117
+ argumentsValue: []
121
118
  },
122
119
  configTemplateText: {
123
120
  fieldKey: fieldKey || 'key',
124
- getClassItem: () => '!pl-[16px] !py-[4px]',
121
+ getClassItem: () => '!pl-[16px] !py-[12px]',
125
122
  classRows: 'w-full',
126
123
  rows: [{
127
- classCols: 'flex items-center py-[8px]',
124
+ classCols: 'flex items-center',
128
125
  cols: [
129
126
  {
130
127
  getPopover: (item) => item.iconLeft ? { classInclude: 'flex', dataView: `<i class="${item.iconLeft} text-[16px] mr-[8px]"></i>` } : undefined
131
128
  },
132
129
  {
133
- getValue: (item) => of(escapeHtml(translate.instant(item[fieldLabel] || ' ')))
130
+ classCol: 'libs-ui-font-h6m text-[#6a7383]',
131
+ getValue: (data) => of(escapeHtml(translate.instant(data.item[fieldLabel] || ' ')))
134
132
  },
135
133
  {
136
134
  getPopover: (item) => item.popover ? { config: item.popover } : undefined
137
135
  },
138
136
  {
139
- getPopover: (item) => item.iconRight ? { dataView: `<i class="${item.iconRight} text-[16px] mr-[8px]"></i>` } : undefined
137
+ getPopover: (item) => item.iconRight ? { classInclude: 'flex', dataView: `<i class="${item.iconRight} text-[16px] ml-[8px]"></i>` } : undefined
140
138
  },
141
139
  {
142
140
  getConfigBadge: (item) => {
@@ -176,7 +174,7 @@ class LibsUiComponentsTabsComponent {
176
174
  ignoreCalculatorTab = input(false);
177
175
  size = input('medium');
178
176
  disableLabel = input();
179
- hasAnimation = input(true);
177
+ allowDragDropPosition = input();
180
178
  zIndex = input();
181
179
  configCss = model();
182
180
  popoverShowMoreTabItem = input();
@@ -185,15 +183,11 @@ class LibsUiComponentsTabsComponent {
185
183
  outFunctionsControl = output();
186
184
  outDragTabChange = output();
187
185
  outDisplayMoreItem = output();
186
+ outActionSelected = output();
188
187
  headerEl = viewChild.required('headerEl');
189
188
  headerLeftEl = viewChild.required('headerLeftEl');
190
189
  headerRightEl = viewChild.required('headerRightEl');
191
- tabsService = inject(LibsUiTabsService);
192
190
  translate = inject(TranslateService);
193
- constructor() {
194
- effect(() => this.tabMoreListConfig.set(tabMoreListConfig(this.tabsService, this.translate, this.fieldKey(), this.fieldLabel(), this.tabs())), { allowSignalWrites: true });
195
- effect(() => this.itemsDisplay.set(this.tabs().items().filter(item => item().specificDisplay)), { allowSignalWrites: true });
196
- }
197
191
  ngOnInit() {
198
192
  this.updateTabsCssConfig();
199
193
  if (this.ignoreCalculatorTab()) {
@@ -214,7 +208,7 @@ class LibsUiComponentsTabsComponent {
214
208
  this.displayMoreItem.set(false);
215
209
  this.calculatorTabsItemDisplay();
216
210
  });
217
- this.changeViewTab.pipe(debounceTime$1(300), takeUntil(this.onDestroy)).subscribe(() => this.calculatorTabsItemDisplay());
211
+ this.changeViewTab.pipe(debounceTime$1(20), takeUntil(this.onDestroy)).subscribe(() => this.calculatorTabsItemDisplay());
218
212
  }
219
213
  updateTabsCssConfig() {
220
214
  if (this.configCss()) {
@@ -254,7 +248,7 @@ class LibsUiComponentsTabsComponent {
254
248
  }
255
249
  }
256
250
  updateStylesDragDropOverride() {
257
- if (this.hasAnimation()) {
251
+ if (this.allowDragDropPosition()) {
258
252
  return [
259
253
  {
260
254
  className: 'libs-ui-drag-drop-item-placeholder',
@@ -340,21 +334,8 @@ class LibsUiComponentsTabsComponent {
340
334
  this.popoverFunctionControlEvent()?.removePopoverOverlay();
341
335
  this.calculatorTabsItemDisplay();
342
336
  }
343
- async handlerSelectAction(event) {
344
- // switch (event.action) {
345
- // case 'pin':
346
- // await this.handlerPin(event.item);
347
- // break;
348
- // case 'unpin':
349
- // await this.handlerUnpin(event.item);
350
- // break;
351
- // case 'edit':
352
- // this.handlerEditTabItem(event.item);
353
- // break;
354
- // case 'delete':
355
- // this.handlerRemoveTabItem(event.item);
356
- // break;
357
- // }
337
+ async handlerActionSelected(event) {
338
+ this.outActionSelected.emit(event);
358
339
  }
359
340
  async addTabItem(item, selected = true, addFirst) {
360
341
  const items = this.tabs().items;
@@ -402,13 +383,15 @@ class LibsUiComponentsTabsComponent {
402
383
  this.tabs().items.update(items => items.sort((prev, next) => (prev().order || 0) - (next().order || 0)));
403
384
  this.displayMoreItem.set(displayMoreItem);
404
385
  this.outDisplayMoreItem.emit(this.displayMoreItem());
386
+ this.itemsDisplay.set(this.tabs().items().filter(item => item().specificDisplay));
387
+ this.tabMoreListConfig.set(tabMoreListConfig(this.translate, this.fieldKey(), this.fieldLabel(), this.tabs()));
405
388
  }
406
389
  ngOnDestroy() {
407
390
  this.onDestroy.next();
408
391
  this.onDestroy.complete();
409
392
  }
410
393
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
411
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTabsComponent, isStandalone: true, selector: "libs_ui-components-tabs", inputs: { 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 }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, 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 }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, hasAnimation: { classPropertyName: "hasAnimation", publicName: "hasAnimation", 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" }, providers: [LibsUiTabsService], 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 #headerEl\n class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div #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 class=\"!flex w-full\"\n #elementContainerEl\n LibsUiComponentsDragContainerDirective\n [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n [groupName]=\"groupName()\"\n [(items)]=\"itemsDisplay\"\n [directionDrag]=\"'horizontal'\"\n [disableDragContainer]=\"!hasAnimation()\"\n [acceptDragSameGroup]=\"hasAnimation()\"\n (outDroppedContainer)=\"handlerDropContainer($event)\">\n @for (item of itemsDisplay(); track item) {\n <div LibsUiDragItemDirective\n [disable]=\"disable() || !hasAnimation()\"\n [groupName]=\"groupName()\"\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 (hasAnimation() && !disable()) {\n <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[12px] left-[4px]\"></span>\n }\n <libs_ui-components-tabs-item 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 [ignoreCalculatorTab]=\"true\"\n [changeViewTab]=\"changeViewTab\"\n (click)=\"handlerClickItem($event, item)\" />\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 class=\"flex items-center\"\n [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n @if (displayMoreItem()) {\n <libs_ui-components-popover 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 [type]=\"'button-link-third'\"\n [classInclude]=\"'p-[8px]'\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n [popover]=\"{config: {content: popoverShowMoreTabItem()?.config?.content}}\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-popover>\n }\n </div>\n <div #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 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 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 (click)=\"handlerClickItem($event, item)\" />\n }\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #menuEl>\n <libs_ui-components-list [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;flex-direction:column;width:100%;height: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", "groupName", "dragBoundary", "dragBoundaryAcceptMouseLeaveContainer", "elementContainer", "zIndex", "disable"], outputs: ["outDragStart", "outDragOver", "outDragLeave", "outDragEnd", "outDropped"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "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"], 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", "outSelectAction"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "itemChangeUnSelect", "paddingLeftItem", "config", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionCustomAddDataToStore", "functionGetItemAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
394
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTabsComponent, isStandalone: true, selector: "libs_ui-components-tabs", inputs: { 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 }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, 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 }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", 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", outActionSelected: "outActionSelected" }, 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 #headerEl\n class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div #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 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 LibsUiDragItemDirective\n [disable]=\"disable() || !allowDragDropPosition()\"\n [groupName]=\"groupName()\"\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 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 [ignoreCalculatorTab]=\"true\"\n [changeViewTab]=\"changeViewTab\"\n (click)=\"handlerClickItem($event, item)\"\n (outActionSelected)=\"handlerActionSelected($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 class=\"flex items-center\"\n [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n @if (displayMoreItem()) {\n <libs_ui-components-popover 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 [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 #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 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 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 (click)=\"handlerClickItem($event, item)\" />\n }\n </div>\n </div>\n </div>\n</div>\n<ng-template #menuEl>\n <libs_ui-components-list [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", "groupName", "dragBoundary", "dragBoundaryAcceptMouseLeaveContainer", "elementContainer", "zIndex", "disable"], outputs: ["outDragStart", "outDragOver", "outDragLeave", "outDragEnd", "outDropped"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "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"], 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", "outActionSelected"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "itemChangeUnSelect", "paddingLeftItem", "config", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionCustomAddDataToStore", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
412
395
  }
413
396
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsComponent, decorators: [{
414
397
  type: Component,
@@ -419,8 +402,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
419
402
  LibsUiComponentsButtonsButtonComponent,
420
403
  LibsUiComponentsTabsItemComponent,
421
404
  LibsUiComponentsListComponent
422
- ], providers: [LibsUiTabsService], template: "<div class=\"libs-ui-tab\">\n <div #headerEl\n class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div #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 class=\"!flex w-full\"\n #elementContainerEl\n LibsUiComponentsDragContainerDirective\n [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n [groupName]=\"groupName()\"\n [(items)]=\"itemsDisplay\"\n [directionDrag]=\"'horizontal'\"\n [disableDragContainer]=\"!hasAnimation()\"\n [acceptDragSameGroup]=\"hasAnimation()\"\n (outDroppedContainer)=\"handlerDropContainer($event)\">\n @for (item of itemsDisplay(); track item) {\n <div LibsUiDragItemDirective\n [disable]=\"disable() || !hasAnimation()\"\n [groupName]=\"groupName()\"\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 (hasAnimation() && !disable()) {\n <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[12px] left-[4px]\"></span>\n }\n <libs_ui-components-tabs-item 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 [ignoreCalculatorTab]=\"true\"\n [changeViewTab]=\"changeViewTab\"\n (click)=\"handlerClickItem($event, item)\" />\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 class=\"flex items-center\"\n [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n @if (displayMoreItem()) {\n <libs_ui-components-popover 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 [type]=\"'button-link-third'\"\n [classInclude]=\"'p-[8px]'\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n [popover]=\"{config: {content: popoverShowMoreTabItem()?.config?.content}}\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-popover>\n }\n </div>\n <div #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 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 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 (click)=\"handlerClickItem($event, item)\" />\n }\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #menuEl>\n <libs_ui-components-list [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;flex-direction:column;width:100%;height: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"] }]
423
- }], ctorParameters: () => [] });
405
+ ], template: "<div class=\"libs-ui-tab\">\n <div #headerEl\n class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div #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 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 LibsUiDragItemDirective\n [disable]=\"disable() || !allowDragDropPosition()\"\n [groupName]=\"groupName()\"\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 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 [ignoreCalculatorTab]=\"true\"\n [changeViewTab]=\"changeViewTab\"\n (click)=\"handlerClickItem($event, item)\"\n (outActionSelected)=\"handlerActionSelected($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 class=\"flex items-center\"\n [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n @if (displayMoreItem()) {\n <libs_ui-components-popover 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 [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 #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 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 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 (click)=\"handlerClickItem($event, item)\" />\n }\n </div>\n </div>\n </div>\n</div>\n<ng-template #menuEl>\n <libs_ui-components-list [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"] }]
406
+ }] });
424
407
 
425
408
  /**
426
409
  * Generated bundle index. Do not edit.