@libs-ui/components-tabs 0.2.321-0 → 0.2.323-0

package/esm2022/item/item.component.mjs

@@ -103,10 +103,10 @@ export class LibsUiComponentsTabsItemComponent {
         this.onDestroy.next();
         this.onDestroy.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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", outAction: "outAction" }, ngImport: i0, template: "@if (item(); as item) {\n  <div\n    #itemEl\n    class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }} {{ item[fieldKey()] === keySelected() && tabs().classIncludeActiveItem ? tabs().classIncludeActiveItem : '' }}\"\n    [attr.key]=\"item[fieldKey()]\"\n    [attr.invalid]=\"item.invalid && !tabs().ignoreShowLineBottomInTab\"\n    [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n    [attr.disable]=\"disable()\"\n    [class.!cursor-pointer]=\"!disable()\"\n    [class.!cursor-default]=\"disable()\"\n    [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n    [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\">\n    @if (tabs().hasImage) {\n      <img\n        class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverImage\"\n        [config]=\"item.popoverImage\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [src]=\"item.linkImage\"\n        [attr.key]=\"item[fieldKey()]\"\n        (error)=\"handlerImgError($event)\" />\n    }\n    @if (item.iconLeft) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon libs-ui-mr-8px {{ item.iconLeft }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconLeft\"\n        [config]=\"item.popoverIconLeft\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.is_pin) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (tabs().hasStep) {\n      @if (tabs().stepHasBackGround) {\n        <div\n          class=\"libs-ui-tab-header-center-item-step !border-none libs-ui-font-h6m\"\n          [class.!text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [class.bg-[#f8f9fa]]=\"step() > (tabs().stepCompleted || 0) && (tabs().ignoreSelectedBackgroundStep || disable()) && !item.invalid\"\n          [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-light-2)]]=\"((item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep) || (step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep)) && !item.invalid\"\n          [class.!bg-[#fdeaec]]=\"item.invalid\">\n          @if (step() <= (tabs().stepCompleted || -1)) {\n            <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n          } @else {\n            <span [class.text-[#cdd0d6]]=\"disable()\">{{ step() }}</span>\n          }\n        </div>\n      } @else {\n        <div\n          class=\"libs-ui-tab-header-center-item-step\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.libs-ui-disable]=\"disable()\">\n          <span>{{ step() }}</span>\n        </div>\n      }\n    }\n    @if (item.configButtonLeft) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonLeft.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n        [classIconRight]=\"item.configButtonLeft.classIconRight || ''\"\n        [label]=\"item.configButtonLeft.label || ''\"\n        [popover]=\"item.configButtonLeft.popover || {}\"\n        (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n    }\n    @if (item[fieldLabel()]) {\n      <div\n        class=\"relative flex\"\n        [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n        <span\n          LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{ position: { mode: step() === 1 ? 'start' : 'center', distance: 0 }, zIndex: zIndex() }\"\n          [attr.size]=\"size()\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [classInclude]=\"'w-full libs-ui-tab-header-center-item-label ' + (item.classLabel || 'libs-ui-font-h6m') + (disableLabel() && disable() ? ' libs-ui-disable' : '') + (tabs().stepHasBackGround && disable() ? ' text-[#cdd0d6]' : '')\"\n          [innerHTML]=\"labelComputed()\"></span>\n        @if (item.hasRedDot) {\n          <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] rounded-[6px]\"></div>\n        }\n      </div>\n    }\n    @if (item.popover) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon ml-[8px] libs-ui-icon-tooltip-outline\"\n        LibsUiComponentsPopoverDirective\n        [config]=\"item.popover\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"></i>\n    }\n    @if (item.iconRight) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconRight\"\n        [config]=\"item.popoverIconRight\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.count !== undefined) {\n      <libs_ui-components-badge\n        [mode]=\"item.modeCount || 'x+'\"\n        [count]=\"item.count\"\n        [maxCount]=\"item.maxCount || 99\"\n        [classCircle]=\"(item.classCircle || 'libs-ui-font-h5r') + (item.invalid ? ' !text-[#f15767] !bg-[#fdeaec]' : '')\"\n        [active]=\"item[fieldKey()] === keySelected()\"\n        [class.libs-ui-disable]=\"disable()\" />\n    }\n    @if (item.configButtonRight) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonRight.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonRight.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonRight.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonRight.classLabel || ''\"\n        [classIconRight]=\"item.configButtonRight.classIconRight || ''\"\n        [popover]=\"item.configButtonRight.popover || {}\"\n        [label]=\"item.configButtonRight.label || ''\"\n        (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n    }\n    @if (tabs().actionRightConfig?.(); as right) {\n      <libs_ui-components-popover\n        [class]=\"right.classInclude || 'ml-[8px]'\"\n        [class.libs-ui-tab-header-center-item-action]=\"right.onlyShowWhenHoverItemActive\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [mode]=\"'click-toggle'\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n        [elementRefCustom]=\"right.onlyShowWhenHoverItemActive ? undefined : itemEl\"\n        [config]=\"{\n          zIndex: right.config?.()?.zIndex || 1000,\n          maxHeight: right.config?.()?.maxHeight || 287,\n          maxWidth: right.config?.()?.maxWidth || 2048,\n          width: right.config?.()?.width || 220,\n          direction: right.config?.()?.direction || 'bottom',\n          template: right.config?.()?.template || actionEl,\n          classInclude: (right.config?.()?.classInclude || '') + ' !rounded-[4px] overflow-hidden',\n          whiteTheme: true,\n          ignoreArrow: true,\n          position: right.config?.()?.position || { mode: 'start', distance: 0 },\n        }\"\n        (outEvent)=\"handlerPopoverEvent($event)\"\n        (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n        @if (right.customView) {\n          <div [innerHtml]=\"item[fieldKey()] | LibsUiPipesCallFunctionInTemplatePipe: right.customView : item\"></div>\n        } @else {\n          <i\n            [attr.active]=\"item[fieldKey()] === keySelected()\"\n            [attr.invalid]=\"item.invalid\"\n            [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n            [class]=\"right.onlyShowWhenHoverItemActive ? 'libs-ui-icon-more-vertical rotate-90 libs-ui-tab-header-center-item-icon' : 'libs-ui-icon-chevron-right rotate-90 libs-ui-tab-header-center-item-icon'\"></i>\n        }\n      </libs_ui-components-popover>\n      <ng-template #actionEl>\n        @if (0 | LibsUiPipesCallFunctionInTemplatePipe: right.getListViewConfig : item : item[fieldKey()] : { valueIs0: 0 } | async; as config) {\n          <libs_ui-components-list\n            [config]=\"config()\"\n            [maxItemShow]=\"5\"\n            [hiddenInputSearch]=\"true\"\n            [paddingLeftItem]=\"true\"\n            (outSelectKey)=\"handlerSelectedKey($event)\" />\n        }\n      </ng-template>\n    }\n    @if (tabs().allowRemove && tabs().items().length > 1) {\n      <libs_ui-components-buttons-button\n        [type]=\"tabs().configButtonRemove?.type || 'button-link-custom'\"\n        [iconOnlyType]=\"tabs().configButtonRemove?.iconOnlyType || true\"\n        [classInclude]=\"tabs().configButtonRemove?.classInclude || 'ml-[8px] !p-0'\"\n        [classIconLeft]=\"tabs().configButtonRemove?.classIconLeft || 'libs-ui-icon-close'\"\n        [classLabel]=\"tabs().configButtonRemove?.classLabel || ''\"\n        [classIconRight]=\"tabs().configButtonRemove?.classIconRight || ''\"\n        [popover]=\"tabs().configButtonRemove?.popover || { config: { content: 'i18n_delete' } }\"\n        [label]=\"tabs().configButtonRemove?.label || ''\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#6a7383',\n            text_hover: '#f15767',\n            text_active: '#f15767',\n            text_disable: '#cdd0d6',\n          },\n          rootColor: '#f15767',\n        }\"\n        (outClick)=\"handlerClickButton($event, 'remove')\" />\n    }\n  </div>\n}\n", styles: [".libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item[invalid=true]:after{background-color:#f15767}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-action{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #9ca2ad;color:#9ca2ad;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6a7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][invalid=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][invalid=true]:before{color:#f15767}.libs-ui-tab-header-center-item-hover:hover[active=false][disable=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-hover:hover .libs-ui-tab-header-center-item-action[active=true],.libs-ui-tab-header-center-item-action-show .libs-ui-tab-header-center-item-action{display:flex}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTabsItemComponent, isStandalone: true, selector: "libs_ui-components-tabs-item", inputs: { ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: true, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: true, transformFunction: null }, cssDefault: { classPropertyName: "cssDefault", publicName: "cssDefault", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, changeViewTab: { classPropertyName: "changeViewTab", publicName: "changeViewTab", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { item: "itemChange", outAction: "outAction" }, ngImport: i0, template: "@if (item(); as item) {\n  <div\n    #itemEl\n    class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }} {{ item[fieldKey()] === keySelected() && tabs().classIncludeActiveItem ? tabs().classIncludeActiveItem : '' }}\"\n    [attr.key]=\"item[fieldKey()]\"\n    [attr.invalid]=\"item.invalid && !tabs().ignoreShowLineBottomInTab\"\n    [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n    [attr.disable]=\"disable()\"\n    [class.!cursor-pointer]=\"!disable()\"\n    [class.!cursor-default]=\"disable()\"\n    [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n    [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\">\n    @if (tabs().hasImage) {\n      <img\n        class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverImage\"\n        [config]=\"item.popoverImage\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [src]=\"item.linkImage\"\n        [attr.key]=\"item[fieldKey()]\"\n        (error)=\"handlerImgError($event)\" />\n    }\n    @if (item.iconLeft) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon libs-ui-mr-8px {{ item.iconLeft }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconLeft\"\n        [config]=\"item.popoverIconLeft\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.is_pin) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (tabs().hasStep) {\n      @if (tabs().stepHasBackGround) {\n        <div\n          class=\"libs-ui-tab-header-center-item-step !border-none libs-ui-font-h6m\"\n          [class.!text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [class.bg-[#f8f9fa]]=\"step() > (tabs().stepCompleted || 0) && (tabs().ignoreSelectedBackgroundStep || disable()) && !item.invalid\"\n          [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-light-2)]]=\"((item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep) || (step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep)) && !item.invalid\"\n          [class.!bg-[#fdeaec]]=\"item.invalid\">\n          @if (step() <= (tabs().stepCompleted || -1)) {\n            <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n          } @else {\n            <span [class.text-[#cdd0d6]]=\"disable()\">{{ step() }}</span>\n          }\n        </div>\n      } @else {\n        <div\n          class=\"libs-ui-tab-header-center-item-step\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.libs-ui-disable]=\"disable()\">\n          <span>{{ step() }}</span>\n        </div>\n      }\n    }\n    @if (item.configButtonLeft) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonLeft.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n        [classIconRight]=\"item.configButtonLeft.classIconRight || ''\"\n        [label]=\"item.configButtonLeft.label || ''\"\n        [popover]=\"item.configButtonLeft.popover || {}\"\n        (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n    }\n    @if (item[fieldLabel()]) {\n      <div\n        class=\"relative flex\"\n        [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n        <span\n          LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{ position: { mode: step() === 1 ? 'start' : 'center', distance: 0 }, zIndex: zIndex() }\"\n          [attr.size]=\"size()\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [classInclude]=\"'w-full libs-ui-tab-header-center-item-label ' + (item.classLabel || 'libs-ui-font-h6m') + (disableLabel() && disable() ? ' libs-ui-disable' : '') + (tabs().stepHasBackGround && disable() ? ' text-[#cdd0d6]' : '')\"\n          [innerHTML]=\"labelComputed()\"></span>\n        @if (item.hasRedDot) {\n          <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] rounded-[6px]\"></div>\n        }\n      </div>\n    }\n    @if (item.popover) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon ml-[8px] libs-ui-icon-tooltip-outline\"\n        LibsUiComponentsPopoverDirective\n        [config]=\"item.popover\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"></i>\n    }\n    @if (item.iconRight) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconRight\"\n        [config]=\"item.popoverIconRight\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.count !== undefined) {\n      <libs_ui-components-badge\n        [mode]=\"item.modeCount || 'x+'\"\n        [count]=\"item.count\"\n        [maxCount]=\"item.maxCount || 99\"\n        [classCircle]=\"(item.classCircle || 'libs-ui-font-h5r') + (item.invalid ? ' !text-[#f15767] !bg-[#fdeaec]' : '')\"\n        [active]=\"item[fieldKey()] === keySelected()\"\n        [class.libs-ui-disable]=\"disable()\" />\n    }\n    @if (item.configButtonRight) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonRight.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonRight.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonRight.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonRight.classLabel || ''\"\n        [classIconRight]=\"item.configButtonRight.classIconRight || ''\"\n        [popover]=\"item.configButtonRight.popover || {}\"\n        [label]=\"item.configButtonRight.label || ''\"\n        (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n    }\n    @if (tabs().actionRightConfig?.(); as right) {\n      <libs_ui-components-popover\n        [class]=\"right.classInclude || 'ml-[8px]'\"\n        [class.libs-ui-tab-header-center-item-action]=\"right.onlyShowWhenHoverItemActive\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [mode]=\"'click-toggle'\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n        [elementRefCustom]=\"right.onlyShowWhenHoverItemActive ? undefined : itemEl\"\n        [config]=\"{\n          zIndex: right.config?.()?.zIndex || 1000,\n          maxHeight: right.config?.()?.maxHeight || 287,\n          maxWidth: right.config?.()?.maxWidth || 2048,\n          width: right.config?.()?.width || 220,\n          direction: right.config?.()?.direction || 'bottom',\n          template: right.config?.()?.template || actionEl,\n          classInclude: (right.config?.()?.classInclude || '') + ' !rounded-[4px] overflow-hidden',\n          whiteTheme: true,\n          ignoreArrow: true,\n          position: right.config?.()?.position || { mode: 'start', distance: 0 },\n        }\"\n        (outEvent)=\"handlerPopoverEvent($event)\"\n        (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n        @if (right.customView) {\n          <div [innerHtml]=\"item[fieldKey()] | LibsUiPipesCallFunctionInTemplatePipe: right.customView : item\"></div>\n        } @else {\n          <i\n            [attr.active]=\"item[fieldKey()] === keySelected()\"\n            [attr.invalid]=\"item.invalid\"\n            [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n            [class]=\"right.onlyShowWhenHoverItemActive ? 'libs-ui-icon-more-vertical rotate-90 libs-ui-tab-header-center-item-icon' : 'libs-ui-icon-chevron-right rotate-90 libs-ui-tab-header-center-item-icon'\"></i>\n        }\n      </libs_ui-components-popover>\n      <ng-template #actionEl>\n        @if (0 | LibsUiPipesCallFunctionInTemplatePipe: right.getListViewConfig : item : item[fieldKey()] : { valueIs0: 0 } | async; as config) {\n          <libs_ui-components-list\n            [config]=\"config()\"\n            [maxItemShow]=\"5\"\n            [hiddenInputSearch]=\"true\"\n            [paddingLeftItem]=\"true\"\n            (outSelectKey)=\"handlerSelectedKey($event)\" />\n        }\n      </ng-template>\n    }\n    @if (tabs().allowRemove && tabs().items().length > 1) {\n      <libs_ui-components-buttons-button\n        [type]=\"tabs().configButtonRemove?.type || 'button-link-custom'\"\n        [iconOnlyType]=\"tabs().configButtonRemove?.iconOnlyType || true\"\n        [classInclude]=\"tabs().configButtonRemove?.classInclude || 'ml-[8px] !p-0'\"\n        [classIconLeft]=\"tabs().configButtonRemove?.classIconLeft || 'libs-ui-icon-close'\"\n        [classLabel]=\"tabs().configButtonRemove?.classLabel || ''\"\n        [classIconRight]=\"tabs().configButtonRemove?.classIconRight || ''\"\n        [popover]=\"tabs().configButtonRemove?.popover || { config: { content: 'i18n_delete' } }\"\n        [label]=\"tabs().configButtonRemove?.label || ''\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#6a7383',\n            text_hover: '#f15767',\n            text_active: '#f15767',\n            text_disable: '#cdd0d6',\n          },\n          rootColor: '#f15767',\n        }\"\n        (outClick)=\"handlerClickButton($event, 'remove')\" />\n    }\n  </div>\n}\n", styles: [".libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item[invalid=true]:after{background-color:#f15767}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-action{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #9ca2ad;color:#9ca2ad;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6a7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][invalid=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][invalid=true]:before{color:#f15767}.libs-ui-tab-header-center-item-hover:hover[active=false][disable=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-hover:hover .libs-ui-tab-header-center-item-action[active=true],.libs-ui-tab-header-center-item-action-show .libs-ui-tab-header-center-item-action{display:flex}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-tabs-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsBadgeComponent, LibsUiComponentsListComponent, LibsUiPipesCallFunctionInTemplatePipe], template: "@if (item(); as item) {\n  <div\n    #itemEl\n    class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }} {{ item[fieldKey()] === keySelected() && tabs().classIncludeActiveItem ? tabs().classIncludeActiveItem : '' }}\"\n    [attr.key]=\"item[fieldKey()]\"\n    [attr.invalid]=\"item.invalid && !tabs().ignoreShowLineBottomInTab\"\n    [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n    [attr.disable]=\"disable()\"\n    [class.!cursor-pointer]=\"!disable()\"\n    [class.!cursor-default]=\"disable()\"\n    [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n    [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\">\n    @if (tabs().hasImage) {\n      <img\n        class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverImage\"\n        [config]=\"item.popoverImage\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [src]=\"item.linkImage\"\n        [attr.key]=\"item[fieldKey()]\"\n        (error)=\"handlerImgError($event)\" />\n    }\n    @if (item.iconLeft) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon libs-ui-mr-8px {{ item.iconLeft }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconLeft\"\n        [config]=\"item.popoverIconLeft\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.is_pin) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (tabs().hasStep) {\n      @if (tabs().stepHasBackGround) {\n        <div\n          class=\"libs-ui-tab-header-center-item-step !border-none libs-ui-font-h6m\"\n          [class.!text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [class.bg-[#f8f9fa]]=\"step() > (tabs().stepCompleted || 0) && (tabs().ignoreSelectedBackgroundStep || disable()) && !item.invalid\"\n          [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-light-2)]]=\"((item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep) || (step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep)) && !item.invalid\"\n          [class.!bg-[#fdeaec]]=\"item.invalid\">\n          @if (step() <= (tabs().stepCompleted || -1)) {\n            <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n          } @else {\n            <span [class.text-[#cdd0d6]]=\"disable()\">{{ step() }}</span>\n          }\n        </div>\n      } @else {\n        <div\n          class=\"libs-ui-tab-header-center-item-step\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.libs-ui-disable]=\"disable()\">\n          <span>{{ step() }}</span>\n        </div>\n      }\n    }\n    @if (item.configButtonLeft) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonLeft.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n        [classIconRight]=\"item.configButtonLeft.classIconRight || ''\"\n        [label]=\"item.configButtonLeft.label || ''\"\n        [popover]=\"item.configButtonLeft.popover || {}\"\n        (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n    }\n    @if (item[fieldLabel()]) {\n      <div\n        class=\"relative flex\"\n        [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n        <span\n          LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{ position: { mode: step() === 1 ? 'start' : 'center', distance: 0 }, zIndex: zIndex() }\"\n          [attr.size]=\"size()\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [classInclude]=\"'w-full libs-ui-tab-header-center-item-label ' + (item.classLabel || 'libs-ui-font-h6m') + (disableLabel() && disable() ? ' libs-ui-disable' : '') + (tabs().stepHasBackGround && disable() ? ' text-[#cdd0d6]' : '')\"\n          [innerHTML]=\"labelComputed()\"></span>\n        @if (item.hasRedDot) {\n          <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] rounded-[6px]\"></div>\n        }\n      </div>\n    }\n    @if (item.popover) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon ml-[8px] libs-ui-icon-tooltip-outline\"\n        LibsUiComponentsPopoverDirective\n        [config]=\"item.popover\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"></i>\n    }\n    @if (item.iconRight) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconRight\"\n        [config]=\"item.popoverIconRight\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.count !== undefined) {\n      <libs_ui-components-badge\n        [mode]=\"item.modeCount || 'x+'\"\n        [count]=\"item.count\"\n        [maxCount]=\"item.maxCount || 99\"\n        [classCircle]=\"(item.classCircle || 'libs-ui-font-h5r') + (item.invalid ? ' !text-[#f15767] !bg-[#fdeaec]' : '')\"\n        [active]=\"item[fieldKey()] === keySelected()\"\n        [class.libs-ui-disable]=\"disable()\" />\n    }\n    @if (item.configButtonRight) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonRight.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonRight.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonRight.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonRight.classLabel || ''\"\n        [classIconRight]=\"item.configButtonRight.classIconRight || ''\"\n        [popover]=\"item.configButtonRight.popover || {}\"\n        [label]=\"item.configButtonRight.label || ''\"\n        (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n    }\n    @if (tabs().actionRightConfig?.(); as right) {\n      <libs_ui-components-popover\n        [class]=\"right.classInclude || 'ml-[8px]'\"\n        [class.libs-ui-tab-header-center-item-action]=\"right.onlyShowWhenHoverItemActive\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [mode]=\"'click-toggle'\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n        [elementRefCustom]=\"right.onlyShowWhenHoverItemActive ? undefined : itemEl\"\n        [config]=\"{\n          zIndex: right.config?.()?.zIndex || 1000,\n          maxHeight: right.config?.()?.maxHeight || 287,\n          maxWidth: right.config?.()?.maxWidth || 2048,\n          width: right.config?.()?.width || 220,\n          direction: right.config?.()?.direction || 'bottom',\n          template: right.config?.()?.template || actionEl,\n          classInclude: (right.config?.()?.classInclude || '') + ' !rounded-[4px] overflow-hidden',\n          whiteTheme: true,\n          ignoreArrow: true,\n          position: right.config?.()?.position || { mode: 'start', distance: 0 },\n        }\"\n        (outEvent)=\"handlerPopoverEvent($event)\"\n        (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n        @if (right.customView) {\n          <div [innerHtml]=\"item[fieldKey()] | LibsUiPipesCallFunctionInTemplatePipe: right.customView : item\"></div>\n        } @else {\n          <i\n            [attr.active]=\"item[fieldKey()] === keySelected()\"\n            [attr.invalid]=\"item.invalid\"\n            [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n            [class]=\"right.onlyShowWhenHoverItemActive ? 'libs-ui-icon-more-vertical rotate-90 libs-ui-tab-header-center-item-icon' : 'libs-ui-icon-chevron-right rotate-90 libs-ui-tab-header-center-item-icon'\"></i>\n        }\n      </libs_ui-components-popover>\n      <ng-template #actionEl>\n        @if (0 | LibsUiPipesCallFunctionInTemplatePipe: right.getListViewConfig : item : item[fieldKey()] : { valueIs0: 0 } | async; as config) {\n          <libs_ui-components-list\n            [config]=\"config()\"\n            [maxItemShow]=\"5\"\n            [hiddenInputSearch]=\"true\"\n            [paddingLeftItem]=\"true\"\n            (outSelectKey)=\"handlerSelectedKey($event)\" />\n        }\n      </ng-template>\n    }\n    @if (tabs().allowRemove && tabs().items().length > 1) {\n      <libs_ui-components-buttons-button\n        [type]=\"tabs().configButtonRemove?.type || 'button-link-custom'\"\n        [iconOnlyType]=\"tabs().configButtonRemove?.iconOnlyType || true\"\n        [classInclude]=\"tabs().configButtonRemove?.classInclude || 'ml-[8px] !p-0'\"\n        [classIconLeft]=\"tabs().configButtonRemove?.classIconLeft || 'libs-ui-icon-close'\"\n        [classLabel]=\"tabs().configButtonRemove?.classLabel || ''\"\n        [classIconRight]=\"tabs().configButtonRemove?.classIconRight || ''\"\n        [popover]=\"tabs().configButtonRemove?.popover || { config: { content: 'i18n_delete' } }\"\n        [label]=\"tabs().configButtonRemove?.label || ''\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#6a7383',\n            text_hover: '#f15767',\n            text_active: '#f15767',\n            text_disable: '#cdd0d6',\n          },\n          rootColor: '#f15767',\n        }\"\n        (outClick)=\"handlerClickButton($event, 'remove')\" />\n    }\n  </div>\n}\n", styles: [".libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item[invalid=true]:after{background-color:#f15767}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-action{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #9ca2ad;color:#9ca2ad;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6a7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][invalid=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][invalid=true]:before{color:#f15767}.libs-ui-tab-header-center-item-hover:hover[active=false][disable=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-hover:hover .libs-ui-tab-header-center-item-action[active=true],.libs-ui-tab-header-center-item-action-show .libs-ui-tab-header-center-item-action{display:flex}\n"] }]
         }], ctorParameters: () => [] });

package/esm2022/tabs.component.mjs

@@ -258,10 +258,10 @@ export class LibsUiComponentsTabsComponent {
         this.onDestroy.next();
         this.onDestroy.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTabsComponent, isStandalone: true, selector: "libs_ui-components-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, heightTabItem: { classPropertyName: "heightTabItem", publicName: "heightTabItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowDragDropPosition: { classPropertyName: "allowDragDropPosition", publicName: "allowDragDropPosition", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, configCss: { classPropertyName: "configCss", publicName: "configCss", isSignal: true, isRequired: false, transformFunction: null }, popoverShowMoreTabItem: { classPropertyName: "popoverShowMoreTabItem", publicName: "popoverShowMoreTabItem", isSignal: true, isRequired: false, transformFunction: null }, checkCanChangeTabSelected: { classPropertyName: "checkCanChangeTabSelected", publicName: "checkCanChangeTabSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", configCss: "configCssChange", outKeySelected: "outKeySelected", outFunctionsControl: "outFunctionsControl", outDragTabChange: "outDragTabChange", outDisplayMoreItem: "outDisplayMoreItem", outAction: "outAction" }, viewQueries: [{ propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }, { propertyName: "headerLeftEl", first: true, predicate: ["headerLeftEl"], descendants: true, isSignal: true }, { propertyName: "headerRightEl", first: true, predicate: ["headerRightEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-tab\">\n  <div\n    #headerEl\n    class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n    [style.minHeight.px]=\"heightTabItem()\">\n    <div\n      #headerLeftEl\n      class=\"libs-ui-tab-header-left\">\n      <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n    </div>\n    <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n      <div\n        class=\"!flex w-full\"\n        #elementContainerEl\n        LibsUiComponentsDragContainerDirective\n        [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n        [groupName]=\"groupName()\"\n        [(items)]=\"itemsDisplay\"\n        [directionDrag]=\"'horizontal'\"\n        [disableDragContainer]=\"!allowDragDropPosition()\"\n        [acceptDragSameGroup]=\"allowDragDropPosition()\"\n        (outDroppedContainer)=\"handlerDropContainer($event)\">\n        @for (item of itemsDisplay(); track item) {\n          <div\n            LibsUiDragItemDirective\n            [disable]=\"disable() || !allowDragDropPosition()\"\n            [elementContainer]=\"elementContainerEl\"\n            [dragBoundary]=\"true\"\n            [dragBoundaryAcceptMouseLeaveContainer]=\"true\"\n            class=\"relative libs-ui-tab-item-container\"\n            [style.width.px]=\"mode() === 'space-between' ? elementContainerEl.clientWidth / (itemsDisplay().length || 1) : undefined\"\n            [class.flex]=\"mode() === 'center-has-line'\"\n            [class.items-center]=\"mode() === 'center-has-line'\">\n            @if (allowDragDropPosition() && !disable()) {\n              <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[14px] left-[4px]\"></span>\n            }\n            <libs_ui-components-tabs-item\n              class=\"h-full w-full  {{ tabs().classIncludeItem || '' }}\"\n              [tabs]=\"tabs()\"\n              [size]=\"size()\"\n              [(item)]=\"item\"\n              [step]=\"$index + 1\"\n              [class.!pointer-events-none]=\"item().disable || disable()\"\n              [disable]=\"item().disable || disable()\"\n              [disableLabel]=\"disableLabel()\"\n              [keySelected]=\"keySelected()\"\n              [fieldLabel]=\"fieldLabel()\"\n              [fieldKey]=\"fieldKey()\"\n              [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n              [zIndex]=\"zIndex()\"\n              [mode]=\"mode()\"\n              [ignoreCalculatorTab]=\"true\"\n              [changeViewTab]=\"changeViewTab\"\n              (click)=\"handlerClickItem(item)\"\n              (outAction)=\"handlerAction($event)\" />\n            @if (mode() === 'center-has-line' && !$last) {\n              <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n    <div\n      class=\"flex items-center\"\n      [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n      @if (displayMoreItem()) {\n        <libs_ui-components-popover\n          class=\"w-full h-full flex items-center\"\n          [mode]=\"'click-toggle'\"\n          [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n          [config]=\"{\n            zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n            maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n            maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n            width: popoverShowMoreTabItem()?.config?.width || 277,\n            direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n            template: popoverShowMoreTabItem()?.config?.template || menuEl,\n            whiteTheme: true,\n            ignoreArrow: true,\n            position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 },\n          }\"\n          (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n          <libs_ui-components-buttons-button\n            [type]=\"'button-link-third'\"\n            [classInclude]=\"'!p-[8px]'\"\n            [iconOnlyType]=\"true\"\n            [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n            [popover]=\"{ config: { content: popoverShowMoreTabItem()?.config?.content || 'i18n_view_more' } }\"\n            [ignoreStopPropagationEvent]=\"true\" />\n        </libs_ui-components-popover>\n      }\n    </div>\n    <div\n      #headerRightEl\n      class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n      <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n    </div>\n  </div>\n  <div class=\"absolute top-0 z-0 w-full\">\n    <div\n      class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n      [style.minHeight.px]=\"heightTabItem()\">\n      <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n        @for (item of tabs().items(); track item) {\n          <libs_ui-components-tabs-item\n            class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n            [tabs]=\"tabs()\"\n            [size]=\"size()\"\n            [(item)]=\"item\"\n            [step]=\"$index + 1\"\n            [disable]=\"disable()\"\n            [disableLabel]=\"disableLabel()\"\n            [keySelected]=\"keySelected()\"\n            [fieldLabel]=\"fieldLabel()\"\n            [fieldKey]=\"fieldKey()\"\n            [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n            [zIndex]=\"zIndex()\"\n            [mode]=\"mode()\"\n            [changeViewTab]=\"changeViewTab\"\n            [ignoreCalculatorTab]=\"ignoreCalculatorTab()\" />\n        }\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #menuEl>\n  <libs_ui-components-list\n    [config]=\"tabMoreListConfig()\"\n    [maxItemShow]=\"5\"\n    [hiddenInputSearch]=\"true\"\n    [paddingLeftItem]=\"true\"\n    (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;width:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: LibsUiComponentsDragContainerDirective, selector: "[LibsUiComponentsDragContainerDirective]", inputs: ["disableDragContainer", "mode", "directionDrag", "viewEncapsulation", "acceptDragSameGroup", "placeholder", "groupName", "dropToGroupName", "items", "stylesOverride"], outputs: ["itemsChange", "outDragStartContainer", "outDragOverContainer", "outDragLeaveContainer", "outDragEndContainer", "outDroppedContainer", "outDroppedContainerEmpty", "outFunctionControl"] }, { kind: "directive", type: LibsUiDragItemDirective, selector: "[LibsUiDragItemDirective]", inputs: ["fieldId", "item", "itemInContainerVirtualScroll", "throttleTimeHandlerDraggingEvent", "ignoreStopEvent", "onlyMouseDownStopEvent", "dragRootElement", "dragBoundary", "dragBoundaryAcceptMouseLeaveContainer", "elementContainer", "zIndex", "disable"], outputs: ["outDragStart", "outDragOver", "outDragLeave", "outDragEnd", "outDropped"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsTabsItemComponent, selector: "libs_ui-components-tabs-item", inputs: ["ignoreCalculatorTab", "step", "mode", "tabs", "item", "keySelected", "fieldLabel", "fieldKey", "cssDefault", "size", "disable", "disableLabel", "zIndex", "changeViewTab"], outputs: ["itemChange", "outAction"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTabsComponent, isStandalone: true, selector: "libs_ui-components-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, heightTabItem: { classPropertyName: "heightTabItem", publicName: "heightTabItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowDragDropPosition: { classPropertyName: "allowDragDropPosition", publicName: "allowDragDropPosition", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, configCss: { classPropertyName: "configCss", publicName: "configCss", isSignal: true, isRequired: false, transformFunction: null }, popoverShowMoreTabItem: { classPropertyName: "popoverShowMoreTabItem", publicName: "popoverShowMoreTabItem", isSignal: true, isRequired: false, transformFunction: null }, checkCanChangeTabSelected: { classPropertyName: "checkCanChangeTabSelected", publicName: "checkCanChangeTabSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", configCss: "configCssChange", outKeySelected: "outKeySelected", outFunctionsControl: "outFunctionsControl", outDragTabChange: "outDragTabChange", outDisplayMoreItem: "outDisplayMoreItem", outAction: "outAction" }, viewQueries: [{ propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }, { propertyName: "headerLeftEl", first: true, predicate: ["headerLeftEl"], descendants: true, isSignal: true }, { propertyName: "headerRightEl", first: true, predicate: ["headerRightEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-tab\">\n  <div\n    #headerEl\n    class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n    [style.minHeight.px]=\"heightTabItem()\">\n    <div\n      #headerLeftEl\n      class=\"libs-ui-tab-header-left\">\n      <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n    </div>\n    <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n      <div\n        class=\"!flex w-full\"\n        #elementContainerEl\n        LibsUiComponentsDragContainerDirective\n        [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n        [groupName]=\"groupName()\"\n        [(items)]=\"itemsDisplay\"\n        [directionDrag]=\"'horizontal'\"\n        [disableDragContainer]=\"!allowDragDropPosition()\"\n        [acceptDragSameGroup]=\"allowDragDropPosition()\"\n        (outDroppedContainer)=\"handlerDropContainer($event)\">\n        @for (item of itemsDisplay(); track item) {\n          <div\n            LibsUiDragItemDirective\n            [disable]=\"disable() || !allowDragDropPosition()\"\n            [elementContainer]=\"elementContainerEl\"\n            [dragBoundary]=\"true\"\n            [dragBoundaryAcceptMouseLeaveContainer]=\"true\"\n            class=\"relative libs-ui-tab-item-container\"\n            [style.width.px]=\"mode() === 'space-between' ? elementContainerEl.clientWidth / (itemsDisplay().length || 1) : undefined\"\n            [class.flex]=\"mode() === 'center-has-line'\"\n            [class.items-center]=\"mode() === 'center-has-line'\">\n            @if (allowDragDropPosition() && !disable()) {\n              <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[14px] left-[4px]\"></span>\n            }\n            <libs_ui-components-tabs-item\n              class=\"h-full w-full  {{ tabs().classIncludeItem || '' }}\"\n              [tabs]=\"tabs()\"\n              [size]=\"size()\"\n              [(item)]=\"item\"\n              [step]=\"$index + 1\"\n              [class.!pointer-events-none]=\"item().disable || disable()\"\n              [disable]=\"item().disable || disable()\"\n              [disableLabel]=\"disableLabel()\"\n              [keySelected]=\"keySelected()\"\n              [fieldLabel]=\"fieldLabel()\"\n              [fieldKey]=\"fieldKey()\"\n              [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n              [zIndex]=\"zIndex()\"\n              [mode]=\"mode()\"\n              [ignoreCalculatorTab]=\"true\"\n              [changeViewTab]=\"changeViewTab\"\n              (click)=\"handlerClickItem(item)\"\n              (outAction)=\"handlerAction($event)\" />\n            @if (mode() === 'center-has-line' && !$last) {\n              <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n    <div\n      class=\"flex items-center\"\n      [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n      @if (displayMoreItem()) {\n        <libs_ui-components-popover\n          class=\"w-full h-full flex items-center\"\n          [mode]=\"'click-toggle'\"\n          [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n          [config]=\"{\n            zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n            maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n            maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n            width: popoverShowMoreTabItem()?.config?.width || 277,\n            direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n            template: popoverShowMoreTabItem()?.config?.template || menuEl,\n            whiteTheme: true,\n            ignoreArrow: true,\n            position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 },\n          }\"\n          (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n          <libs_ui-components-buttons-button\n            [type]=\"'button-link-third'\"\n            [classInclude]=\"'!p-[8px]'\"\n            [iconOnlyType]=\"true\"\n            [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n            [popover]=\"{ config: { content: popoverShowMoreTabItem()?.config?.content || 'i18n_view_more' } }\"\n            [ignoreStopPropagationEvent]=\"true\" />\n        </libs_ui-components-popover>\n      }\n    </div>\n    <div\n      #headerRightEl\n      class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n      <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n    </div>\n  </div>\n  <div class=\"absolute top-0 z-0 w-full\">\n    <div\n      class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n      [style.minHeight.px]=\"heightTabItem()\">\n      <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n        @for (item of tabs().items(); track item) {\n          <libs_ui-components-tabs-item\n            class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n            [tabs]=\"tabs()\"\n            [size]=\"size()\"\n            [(item)]=\"item\"\n            [step]=\"$index + 1\"\n            [disable]=\"disable()\"\n            [disableLabel]=\"disableLabel()\"\n            [keySelected]=\"keySelected()\"\n            [fieldLabel]=\"fieldLabel()\"\n            [fieldKey]=\"fieldKey()\"\n            [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n            [zIndex]=\"zIndex()\"\n            [mode]=\"mode()\"\n            [changeViewTab]=\"changeViewTab\"\n            [ignoreCalculatorTab]=\"ignoreCalculatorTab()\" />\n        }\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #menuEl>\n  <libs_ui-components-list\n    [config]=\"tabMoreListConfig()\"\n    [maxItemShow]=\"5\"\n    [hiddenInputSearch]=\"true\"\n    [paddingLeftItem]=\"true\"\n    (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;width:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: LibsUiComponentsDragContainerDirective, selector: "[LibsUiComponentsDragContainerDirective]", inputs: ["disableDragContainer", "mode", "directionDrag", "viewEncapsulation", "acceptDragSameGroup", "placeholder", "groupName", "dropToGroupName", "items", "stylesOverride"], outputs: ["itemsChange", "outDragStartContainer", "outDragOverContainer", "outDragLeaveContainer", "outDragEndContainer", "outDroppedContainer", "outDroppedContainerEmpty", "outFunctionControl"] }, { kind: "directive", type: LibsUiDragItemDirective, selector: "[LibsUiDragItemDirective]", inputs: ["fieldId", "item", "itemInContainerVirtualScroll", "throttleTimeHandlerDraggingEvent", "ignoreStopEvent", "onlyMouseDownStopEvent", "dragRootElement", "dragBoundary", "dragBoundaryAcceptMouseLeaveContainer", "elementContainer", "zIndex", "disable"], outputs: ["outDragStart", "outDragOver", "outDragLeave", "outDragEnd", "outDropped"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsTabsItemComponent, selector: "libs_ui-components-tabs-item", inputs: ["ignoreCalculatorTab", "step", "mode", "tabs", "item", "keySelected", "fieldLabel", "fieldKey", "cssDefault", "size", "disable", "disableLabel", "zIndex", "changeViewTab"], outputs: ["itemChange", "outAction"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsDragContainerDirective, LibsUiDragItemDirective, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsTabsItemComponent, LibsUiComponentsListComponent], template: "<div class=\"libs-ui-tab\">\n  <div\n    #headerEl\n    class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n    [style.minHeight.px]=\"heightTabItem()\">\n    <div\n      #headerLeftEl\n      class=\"libs-ui-tab-header-left\">\n      <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n    </div>\n    <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n      <div\n        class=\"!flex w-full\"\n        #elementContainerEl\n        LibsUiComponentsDragContainerDirective\n        [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n        [groupName]=\"groupName()\"\n        [(items)]=\"itemsDisplay\"\n        [directionDrag]=\"'horizontal'\"\n        [disableDragContainer]=\"!allowDragDropPosition()\"\n        [acceptDragSameGroup]=\"allowDragDropPosition()\"\n        (outDroppedContainer)=\"handlerDropContainer($event)\">\n        @for (item of itemsDisplay(); track item) {\n          <div\n            LibsUiDragItemDirective\n            [disable]=\"disable() || !allowDragDropPosition()\"\n            [elementContainer]=\"elementContainerEl\"\n            [dragBoundary]=\"true\"\n            [dragBoundaryAcceptMouseLeaveContainer]=\"true\"\n            class=\"relative libs-ui-tab-item-container\"\n            [style.width.px]=\"mode() === 'space-between' ? elementContainerEl.clientWidth / (itemsDisplay().length || 1) : undefined\"\n            [class.flex]=\"mode() === 'center-has-line'\"\n            [class.items-center]=\"mode() === 'center-has-line'\">\n            @if (allowDragDropPosition() && !disable()) {\n              <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[14px] left-[4px]\"></span>\n            }\n            <libs_ui-components-tabs-item\n              class=\"h-full w-full  {{ tabs().classIncludeItem || '' }}\"\n              [tabs]=\"tabs()\"\n              [size]=\"size()\"\n              [(item)]=\"item\"\n              [step]=\"$index + 1\"\n              [class.!pointer-events-none]=\"item().disable || disable()\"\n              [disable]=\"item().disable || disable()\"\n              [disableLabel]=\"disableLabel()\"\n              [keySelected]=\"keySelected()\"\n              [fieldLabel]=\"fieldLabel()\"\n              [fieldKey]=\"fieldKey()\"\n              [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n              [zIndex]=\"zIndex()\"\n              [mode]=\"mode()\"\n              [ignoreCalculatorTab]=\"true\"\n              [changeViewTab]=\"changeViewTab\"\n              (click)=\"handlerClickItem(item)\"\n              (outAction)=\"handlerAction($event)\" />\n            @if (mode() === 'center-has-line' && !$last) {\n              <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n    <div\n      class=\"flex items-center\"\n      [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n      @if (displayMoreItem()) {\n        <libs_ui-components-popover\n          class=\"w-full h-full flex items-center\"\n          [mode]=\"'click-toggle'\"\n          [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n          [config]=\"{\n            zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n            maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n            maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n            width: popoverShowMoreTabItem()?.config?.width || 277,\n            direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n            template: popoverShowMoreTabItem()?.config?.template || menuEl,\n            whiteTheme: true,\n            ignoreArrow: true,\n            position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 },\n          }\"\n          (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n          <libs_ui-components-buttons-button\n            [type]=\"'button-link-third'\"\n            [classInclude]=\"'!p-[8px]'\"\n            [iconOnlyType]=\"true\"\n            [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n            [popover]=\"{ config: { content: popoverShowMoreTabItem()?.config?.content || 'i18n_view_more' } }\"\n            [ignoreStopPropagationEvent]=\"true\" />\n        </libs_ui-components-popover>\n      }\n    </div>\n    <div\n      #headerRightEl\n      class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n      <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n    </div>\n  </div>\n  <div class=\"absolute top-0 z-0 w-full\">\n    <div\n      class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n      [style.minHeight.px]=\"heightTabItem()\">\n      <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n        @for (item of tabs().items(); track item) {\n          <libs_ui-components-tabs-item\n            class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n            [tabs]=\"tabs()\"\n            [size]=\"size()\"\n            [(item)]=\"item\"\n            [step]=\"$index + 1\"\n            [disable]=\"disable()\"\n            [disableLabel]=\"disableLabel()\"\n            [keySelected]=\"keySelected()\"\n            [fieldLabel]=\"fieldLabel()\"\n            [fieldKey]=\"fieldKey()\"\n            [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n            [zIndex]=\"zIndex()\"\n            [mode]=\"mode()\"\n            [changeViewTab]=\"changeViewTab\"\n            [ignoreCalculatorTab]=\"ignoreCalculatorTab()\" />\n        }\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #menuEl>\n  <libs_ui-components-list\n    [config]=\"tabMoreListConfig()\"\n    [maxItemShow]=\"5\"\n    [hiddenInputSearch]=\"true\"\n    [paddingLeftItem]=\"true\"\n    (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;width:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"] }]
         }] });

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

@@ -107,10 +107,10 @@ class LibsUiComponentsTabsItemComponent {
         this.onDestroy.next();
         this.onDestroy.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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", outAction: "outAction" }, ngImport: i0, template: "@if (item(); as item) {\n  <div\n    #itemEl\n    class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }} {{ item[fieldKey()] === keySelected() && tabs().classIncludeActiveItem ? tabs().classIncludeActiveItem : '' }}\"\n    [attr.key]=\"item[fieldKey()]\"\n    [attr.invalid]=\"item.invalid && !tabs().ignoreShowLineBottomInTab\"\n    [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n    [attr.disable]=\"disable()\"\n    [class.!cursor-pointer]=\"!disable()\"\n    [class.!cursor-default]=\"disable()\"\n    [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n    [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\">\n    @if (tabs().hasImage) {\n      <img\n        class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverImage\"\n        [config]=\"item.popoverImage\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [src]=\"item.linkImage\"\n        [attr.key]=\"item[fieldKey()]\"\n        (error)=\"handlerImgError($event)\" />\n    }\n    @if (item.iconLeft) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon libs-ui-mr-8px {{ item.iconLeft }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconLeft\"\n        [config]=\"item.popoverIconLeft\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.is_pin) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (tabs().hasStep) {\n      @if (tabs().stepHasBackGround) {\n        <div\n          class=\"libs-ui-tab-header-center-item-step !border-none libs-ui-font-h6m\"\n          [class.!text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [class.bg-[#f8f9fa]]=\"step() > (tabs().stepCompleted || 0) && (tabs().ignoreSelectedBackgroundStep || disable()) && !item.invalid\"\n          [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-light-2)]]=\"((item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep) || (step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep)) && !item.invalid\"\n          [class.!bg-[#fdeaec]]=\"item.invalid\">\n          @if (step() <= (tabs().stepCompleted || -1)) {\n            <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n          } @else {\n            <span [class.text-[#cdd0d6]]=\"disable()\">{{ step() }}</span>\n          }\n        </div>\n      } @else {\n        <div\n          class=\"libs-ui-tab-header-center-item-step\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.libs-ui-disable]=\"disable()\">\n          <span>{{ step() }}</span>\n        </div>\n      }\n    }\n    @if (item.configButtonLeft) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonLeft.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n        [classIconRight]=\"item.configButtonLeft.classIconRight || ''\"\n        [label]=\"item.configButtonLeft.label || ''\"\n        [popover]=\"item.configButtonLeft.popover || {}\"\n        (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n    }\n    @if (item[fieldLabel()]) {\n      <div\n        class=\"relative flex\"\n        [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n        <span\n          LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{ position: { mode: step() === 1 ? 'start' : 'center', distance: 0 }, zIndex: zIndex() }\"\n          [attr.size]=\"size()\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [classInclude]=\"'w-full libs-ui-tab-header-center-item-label ' + (item.classLabel || 'libs-ui-font-h6m') + (disableLabel() && disable() ? ' libs-ui-disable' : '') + (tabs().stepHasBackGround && disable() ? ' text-[#cdd0d6]' : '')\"\n          [innerHTML]=\"labelComputed()\"></span>\n        @if (item.hasRedDot) {\n          <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] rounded-[6px]\"></div>\n        }\n      </div>\n    }\n    @if (item.popover) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon ml-[8px] libs-ui-icon-tooltip-outline\"\n        LibsUiComponentsPopoverDirective\n        [config]=\"item.popover\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"></i>\n    }\n    @if (item.iconRight) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconRight\"\n        [config]=\"item.popoverIconRight\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.count !== undefined) {\n      <libs_ui-components-badge\n        [mode]=\"item.modeCount || 'x+'\"\n        [count]=\"item.count\"\n        [maxCount]=\"item.maxCount || 99\"\n        [classCircle]=\"(item.classCircle || 'libs-ui-font-h5r') + (item.invalid ? ' !text-[#f15767] !bg-[#fdeaec]' : '')\"\n        [active]=\"item[fieldKey()] === keySelected()\"\n        [class.libs-ui-disable]=\"disable()\" />\n    }\n    @if (item.configButtonRight) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonRight.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonRight.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonRight.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonRight.classLabel || ''\"\n        [classIconRight]=\"item.configButtonRight.classIconRight || ''\"\n        [popover]=\"item.configButtonRight.popover || {}\"\n        [label]=\"item.configButtonRight.label || ''\"\n        (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n    }\n    @if (tabs().actionRightConfig?.(); as right) {\n      <libs_ui-components-popover\n        [class]=\"right.classInclude || 'ml-[8px]'\"\n        [class.libs-ui-tab-header-center-item-action]=\"right.onlyShowWhenHoverItemActive\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [mode]=\"'click-toggle'\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n        [elementRefCustom]=\"right.onlyShowWhenHoverItemActive ? undefined : itemEl\"\n        [config]=\"{\n          zIndex: right.config?.()?.zIndex || 1000,\n          maxHeight: right.config?.()?.maxHeight || 287,\n          maxWidth: right.config?.()?.maxWidth || 2048,\n          width: right.config?.()?.width || 220,\n          direction: right.config?.()?.direction || 'bottom',\n          template: right.config?.()?.template || actionEl,\n          classInclude: (right.config?.()?.classInclude || '') + ' !rounded-[4px] overflow-hidden',\n          whiteTheme: true,\n          ignoreArrow: true,\n          position: right.config?.()?.position || { mode: 'start', distance: 0 },\n        }\"\n        (outEvent)=\"handlerPopoverEvent($event)\"\n        (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n        @if (right.customView) {\n          <div [innerHtml]=\"item[fieldKey()] | LibsUiPipesCallFunctionInTemplatePipe: right.customView : item\"></div>\n        } @else {\n          <i\n            [attr.active]=\"item[fieldKey()] === keySelected()\"\n            [attr.invalid]=\"item.invalid\"\n            [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n            [class]=\"right.onlyShowWhenHoverItemActive ? 'libs-ui-icon-more-vertical rotate-90 libs-ui-tab-header-center-item-icon' : 'libs-ui-icon-chevron-right rotate-90 libs-ui-tab-header-center-item-icon'\"></i>\n        }\n      </libs_ui-components-popover>\n      <ng-template #actionEl>\n        @if (0 | LibsUiPipesCallFunctionInTemplatePipe: right.getListViewConfig : item : item[fieldKey()] : { valueIs0: 0 } | async; as config) {\n          <libs_ui-components-list\n            [config]=\"config()\"\n            [maxItemShow]=\"5\"\n            [hiddenInputSearch]=\"true\"\n            [paddingLeftItem]=\"true\"\n            (outSelectKey)=\"handlerSelectedKey($event)\" />\n        }\n      </ng-template>\n    }\n    @if (tabs().allowRemove && tabs().items().length > 1) {\n      <libs_ui-components-buttons-button\n        [type]=\"tabs().configButtonRemove?.type || 'button-link-custom'\"\n        [iconOnlyType]=\"tabs().configButtonRemove?.iconOnlyType || true\"\n        [classInclude]=\"tabs().configButtonRemove?.classInclude || 'ml-[8px] !p-0'\"\n        [classIconLeft]=\"tabs().configButtonRemove?.classIconLeft || 'libs-ui-icon-close'\"\n        [classLabel]=\"tabs().configButtonRemove?.classLabel || ''\"\n        [classIconRight]=\"tabs().configButtonRemove?.classIconRight || ''\"\n        [popover]=\"tabs().configButtonRemove?.popover || { config: { content: 'i18n_delete' } }\"\n        [label]=\"tabs().configButtonRemove?.label || ''\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#6a7383',\n            text_hover: '#f15767',\n            text_active: '#f15767',\n            text_disable: '#cdd0d6',\n          },\n          rootColor: '#f15767',\n        }\"\n        (outClick)=\"handlerClickButton($event, 'remove')\" />\n    }\n  </div>\n}\n", styles: [".libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item[invalid=true]:after{background-color:#f15767}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-action{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #9ca2ad;color:#9ca2ad;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6a7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][invalid=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][invalid=true]:before{color:#f15767}.libs-ui-tab-header-center-item-hover:hover[active=false][disable=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-hover:hover .libs-ui-tab-header-center-item-action[active=true],.libs-ui-tab-header-center-item-action-show .libs-ui-tab-header-center-item-action{display:flex}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTabsItemComponent, isStandalone: true, selector: "libs_ui-components-tabs-item", inputs: { ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: true, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: true, transformFunction: null }, cssDefault: { classPropertyName: "cssDefault", publicName: "cssDefault", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, changeViewTab: { classPropertyName: "changeViewTab", publicName: "changeViewTab", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { item: "itemChange", outAction: "outAction" }, ngImport: i0, template: "@if (item(); as item) {\n  <div\n    #itemEl\n    class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }} {{ item[fieldKey()] === keySelected() && tabs().classIncludeActiveItem ? tabs().classIncludeActiveItem : '' }}\"\n    [attr.key]=\"item[fieldKey()]\"\n    [attr.invalid]=\"item.invalid && !tabs().ignoreShowLineBottomInTab\"\n    [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n    [attr.disable]=\"disable()\"\n    [class.!cursor-pointer]=\"!disable()\"\n    [class.!cursor-default]=\"disable()\"\n    [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n    [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\">\n    @if (tabs().hasImage) {\n      <img\n        class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverImage\"\n        [config]=\"item.popoverImage\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [src]=\"item.linkImage\"\n        [attr.key]=\"item[fieldKey()]\"\n        (error)=\"handlerImgError($event)\" />\n    }\n    @if (item.iconLeft) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon libs-ui-mr-8px {{ item.iconLeft }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconLeft\"\n        [config]=\"item.popoverIconLeft\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.is_pin) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (tabs().hasStep) {\n      @if (tabs().stepHasBackGround) {\n        <div\n          class=\"libs-ui-tab-header-center-item-step !border-none libs-ui-font-h6m\"\n          [class.!text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [class.bg-[#f8f9fa]]=\"step() > (tabs().stepCompleted || 0) && (tabs().ignoreSelectedBackgroundStep || disable()) && !item.invalid\"\n          [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-light-2)]]=\"((item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep) || (step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep)) && !item.invalid\"\n          [class.!bg-[#fdeaec]]=\"item.invalid\">\n          @if (step() <= (tabs().stepCompleted || -1)) {\n            <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n          } @else {\n            <span [class.text-[#cdd0d6]]=\"disable()\">{{ step() }}</span>\n          }\n        </div>\n      } @else {\n        <div\n          class=\"libs-ui-tab-header-center-item-step\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.libs-ui-disable]=\"disable()\">\n          <span>{{ step() }}</span>\n        </div>\n      }\n    }\n    @if (item.configButtonLeft) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonLeft.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n        [classIconRight]=\"item.configButtonLeft.classIconRight || ''\"\n        [label]=\"item.configButtonLeft.label || ''\"\n        [popover]=\"item.configButtonLeft.popover || {}\"\n        (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n    }\n    @if (item[fieldLabel()]) {\n      <div\n        class=\"relative flex\"\n        [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n        <span\n          LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{ position: { mode: step() === 1 ? 'start' : 'center', distance: 0 }, zIndex: zIndex() }\"\n          [attr.size]=\"size()\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [classInclude]=\"'w-full libs-ui-tab-header-center-item-label ' + (item.classLabel || 'libs-ui-font-h6m') + (disableLabel() && disable() ? ' libs-ui-disable' : '') + (tabs().stepHasBackGround && disable() ? ' text-[#cdd0d6]' : '')\"\n          [innerHTML]=\"labelComputed()\"></span>\n        @if (item.hasRedDot) {\n          <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] rounded-[6px]\"></div>\n        }\n      </div>\n    }\n    @if (item.popover) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon ml-[8px] libs-ui-icon-tooltip-outline\"\n        LibsUiComponentsPopoverDirective\n        [config]=\"item.popover\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"></i>\n    }\n    @if (item.iconRight) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconRight\"\n        [config]=\"item.popoverIconRight\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.count !== undefined) {\n      <libs_ui-components-badge\n        [mode]=\"item.modeCount || 'x+'\"\n        [count]=\"item.count\"\n        [maxCount]=\"item.maxCount || 99\"\n        [classCircle]=\"(item.classCircle || 'libs-ui-font-h5r') + (item.invalid ? ' !text-[#f15767] !bg-[#fdeaec]' : '')\"\n        [active]=\"item[fieldKey()] === keySelected()\"\n        [class.libs-ui-disable]=\"disable()\" />\n    }\n    @if (item.configButtonRight) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonRight.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonRight.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonRight.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonRight.classLabel || ''\"\n        [classIconRight]=\"item.configButtonRight.classIconRight || ''\"\n        [popover]=\"item.configButtonRight.popover || {}\"\n        [label]=\"item.configButtonRight.label || ''\"\n        (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n    }\n    @if (tabs().actionRightConfig?.(); as right) {\n      <libs_ui-components-popover\n        [class]=\"right.classInclude || 'ml-[8px]'\"\n        [class.libs-ui-tab-header-center-item-action]=\"right.onlyShowWhenHoverItemActive\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [mode]=\"'click-toggle'\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n        [elementRefCustom]=\"right.onlyShowWhenHoverItemActive ? undefined : itemEl\"\n        [config]=\"{\n          zIndex: right.config?.()?.zIndex || 1000,\n          maxHeight: right.config?.()?.maxHeight || 287,\n          maxWidth: right.config?.()?.maxWidth || 2048,\n          width: right.config?.()?.width || 220,\n          direction: right.config?.()?.direction || 'bottom',\n          template: right.config?.()?.template || actionEl,\n          classInclude: (right.config?.()?.classInclude || '') + ' !rounded-[4px] overflow-hidden',\n          whiteTheme: true,\n          ignoreArrow: true,\n          position: right.config?.()?.position || { mode: 'start', distance: 0 },\n        }\"\n        (outEvent)=\"handlerPopoverEvent($event)\"\n        (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n        @if (right.customView) {\n          <div [innerHtml]=\"item[fieldKey()] | LibsUiPipesCallFunctionInTemplatePipe: right.customView : item\"></div>\n        } @else {\n          <i\n            [attr.active]=\"item[fieldKey()] === keySelected()\"\n            [attr.invalid]=\"item.invalid\"\n            [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n            [class]=\"right.onlyShowWhenHoverItemActive ? 'libs-ui-icon-more-vertical rotate-90 libs-ui-tab-header-center-item-icon' : 'libs-ui-icon-chevron-right rotate-90 libs-ui-tab-header-center-item-icon'\"></i>\n        }\n      </libs_ui-components-popover>\n      <ng-template #actionEl>\n        @if (0 | LibsUiPipesCallFunctionInTemplatePipe: right.getListViewConfig : item : item[fieldKey()] : { valueIs0: 0 } | async; as config) {\n          <libs_ui-components-list\n            [config]=\"config()\"\n            [maxItemShow]=\"5\"\n            [hiddenInputSearch]=\"true\"\n            [paddingLeftItem]=\"true\"\n            (outSelectKey)=\"handlerSelectedKey($event)\" />\n        }\n      </ng-template>\n    }\n    @if (tabs().allowRemove && tabs().items().length > 1) {\n      <libs_ui-components-buttons-button\n        [type]=\"tabs().configButtonRemove?.type || 'button-link-custom'\"\n        [iconOnlyType]=\"tabs().configButtonRemove?.iconOnlyType || true\"\n        [classInclude]=\"tabs().configButtonRemove?.classInclude || 'ml-[8px] !p-0'\"\n        [classIconLeft]=\"tabs().configButtonRemove?.classIconLeft || 'libs-ui-icon-close'\"\n        [classLabel]=\"tabs().configButtonRemove?.classLabel || ''\"\n        [classIconRight]=\"tabs().configButtonRemove?.classIconRight || ''\"\n        [popover]=\"tabs().configButtonRemove?.popover || { config: { content: 'i18n_delete' } }\"\n        [label]=\"tabs().configButtonRemove?.label || ''\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#6a7383',\n            text_hover: '#f15767',\n            text_active: '#f15767',\n            text_disable: '#cdd0d6',\n          },\n          rootColor: '#f15767',\n        }\"\n        (outClick)=\"handlerClickButton($event, 'remove')\" />\n    }\n  </div>\n}\n", styles: [".libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item[invalid=true]:after{background-color:#f15767}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-action{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #9ca2ad;color:#9ca2ad;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6a7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][invalid=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][invalid=true]:before{color:#f15767}.libs-ui-tab-header-center-item-hover:hover[active=false][disable=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-hover:hover .libs-ui-tab-header-center-item-action[active=true],.libs-ui-tab-header-center-item-action-show .libs-ui-tab-header-center-item-action{display:flex}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiPipesCallFunctionInTemplatePipe, name: "LibsUiPipesCallFunctionInTemplatePipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-tabs-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsBadgeComponent, LibsUiComponentsListComponent, LibsUiPipesCallFunctionInTemplatePipe], template: "@if (item(); as item) {\n  <div\n    #itemEl\n    class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }} {{ item[fieldKey()] === keySelected() && tabs().classIncludeActiveItem ? tabs().classIncludeActiveItem : '' }}\"\n    [attr.key]=\"item[fieldKey()]\"\n    [attr.invalid]=\"item.invalid && !tabs().ignoreShowLineBottomInTab\"\n    [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n    [attr.disable]=\"disable()\"\n    [class.!cursor-pointer]=\"!disable()\"\n    [class.!cursor-default]=\"disable()\"\n    [class.libs-ui-tab-header-center-item-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n    [class.libs-ui-tab-header-center-item-action-show]=\"actionShowing()\">\n    @if (tabs().hasImage) {\n      <img\n        class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverImage\"\n        [config]=\"item.popoverImage\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [src]=\"item.linkImage\"\n        [attr.key]=\"item[fieldKey()]\"\n        (error)=\"handlerImgError($event)\" />\n    }\n    @if (item.iconLeft) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon libs-ui-mr-8px {{ item.iconLeft }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconLeft\"\n        [config]=\"item.popoverIconLeft\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.is_pin) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (tabs().hasStep) {\n      @if (tabs().stepHasBackGround) {\n        <div\n          class=\"libs-ui-tab-header-center-item-step !border-none libs-ui-font-h6m\"\n          [class.!text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [class.bg-[#f8f9fa]]=\"step() > (tabs().stepCompleted || 0) && (tabs().ignoreSelectedBackgroundStep || disable()) && !item.invalid\"\n          [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep && !item.invalid\"\n          [class.bg-[var(--libs-ui-color-light-2)]]=\"((item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep) || (step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep)) && !item.invalid\"\n          [class.!bg-[#fdeaec]]=\"item.invalid\">\n          @if (step() <= (tabs().stepCompleted || -1)) {\n            <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n          } @else {\n            <span [class.text-[#cdd0d6]]=\"disable()\">{{ step() }}</span>\n          }\n        </div>\n      } @else {\n        <div\n          class=\"libs-ui-tab-header-center-item-step\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.libs-ui-disable]=\"disable()\">\n          <span>{{ step() }}</span>\n        </div>\n      }\n    }\n    @if (item.configButtonLeft) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonLeft.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n        [classIconRight]=\"item.configButtonLeft.classIconRight || ''\"\n        [label]=\"item.configButtonLeft.label || ''\"\n        [popover]=\"item.configButtonLeft.popover || {}\"\n        (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n    }\n    @if (item[fieldLabel()]) {\n      <div\n        class=\"relative flex\"\n        [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n        <span\n          LibsUiComponentsPopoverDirective\n          [type]=\"'text'\"\n          [config]=\"{ position: { mode: step() === 1 ? 'start' : 'center', distance: 0 }, zIndex: zIndex() }\"\n          [attr.size]=\"size()\"\n          [attr.active]=\"item[fieldKey()] === keySelected()\"\n          [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n          [class.!text-[#f15767]]=\"item.invalid\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [classInclude]=\"'w-full libs-ui-tab-header-center-item-label ' + (item.classLabel || 'libs-ui-font-h6m') + (disableLabel() && disable() ? ' libs-ui-disable' : '') + (tabs().stepHasBackGround && disable() ? ' text-[#cdd0d6]' : '')\"\n          [innerHTML]=\"labelComputed()\"></span>\n        @if (item.hasRedDot) {\n          <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] rounded-[6px]\"></div>\n        }\n      </div>\n    }\n    @if (item.popover) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon ml-[8px] libs-ui-icon-tooltip-outline\"\n        LibsUiComponentsPopoverDirective\n        [config]=\"item.popover\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [class.libs-ui-disable]=\"disable()\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"></i>\n    }\n    @if (item.iconRight) {\n      <i\n        class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n        LibsUiComponentsPopoverDirective\n        [ignoreShowPopover]=\"!item.popoverIconRight\"\n        [config]=\"item.popoverIconRight\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [class.libs-ui-disable]=\"disable()\"></i>\n    }\n    @if (item.count !== undefined) {\n      <libs_ui-components-badge\n        [mode]=\"item.modeCount || 'x+'\"\n        [count]=\"item.count\"\n        [maxCount]=\"item.maxCount || 99\"\n        [classCircle]=\"(item.classCircle || 'libs-ui-font-h5r') + (item.invalid ? ' !text-[#f15767] !bg-[#fdeaec]' : '')\"\n        [active]=\"item[fieldKey()] === keySelected()\"\n        [class.libs-ui-disable]=\"disable()\" />\n    }\n    @if (item.configButtonRight) {\n      <libs_ui-components-buttons-button\n        [type]=\"item.configButtonRight.type || 'button-link-third'\"\n        [classInclude]=\"item.configButtonRight.classInclude || ''\"\n        [classIconLeft]=\"item.configButtonRight.classIconLeft || ''\"\n        [classLabel]=\"item.configButtonRight.classLabel || ''\"\n        [classIconRight]=\"item.configButtonRight.classIconRight || ''\"\n        [popover]=\"item.configButtonRight.popover || {}\"\n        [label]=\"item.configButtonRight.label || ''\"\n        (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n    }\n    @if (tabs().actionRightConfig?.(); as right) {\n      <libs_ui-components-popover\n        [class]=\"right.classInclude || 'ml-[8px]'\"\n        [class.libs-ui-tab-header-center-item-action]=\"right.onlyShowWhenHoverItemActive\"\n        [attr.active]=\"item[fieldKey()] === keySelected()\"\n        [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n        [mode]=\"'click-toggle'\"\n        [ignoreStopPropagationEvent]=\"true\"\n        [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n        [elementRefCustom]=\"right.onlyShowWhenHoverItemActive ? undefined : itemEl\"\n        [config]=\"{\n          zIndex: right.config?.()?.zIndex || 1000,\n          maxHeight: right.config?.()?.maxHeight || 287,\n          maxWidth: right.config?.()?.maxWidth || 2048,\n          width: right.config?.()?.width || 220,\n          direction: right.config?.()?.direction || 'bottom',\n          template: right.config?.()?.template || actionEl,\n          classInclude: (right.config?.()?.classInclude || '') + ' !rounded-[4px] overflow-hidden',\n          whiteTheme: true,\n          ignoreArrow: true,\n          position: right.config?.()?.position || { mode: 'start', distance: 0 },\n        }\"\n        (outEvent)=\"handlerPopoverEvent($event)\"\n        (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n        @if (right.customView) {\n          <div [innerHtml]=\"item[fieldKey()] | LibsUiPipesCallFunctionInTemplatePipe: right.customView : item\"></div>\n        } @else {\n          <i\n            [attr.active]=\"item[fieldKey()] === keySelected()\"\n            [attr.invalid]=\"item.invalid\"\n            [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n            [class]=\"right.onlyShowWhenHoverItemActive ? 'libs-ui-icon-more-vertical rotate-90 libs-ui-tab-header-center-item-icon' : 'libs-ui-icon-chevron-right rotate-90 libs-ui-tab-header-center-item-icon'\"></i>\n        }\n      </libs_ui-components-popover>\n      <ng-template #actionEl>\n        @if (0 | LibsUiPipesCallFunctionInTemplatePipe: right.getListViewConfig : item : item[fieldKey()] : { valueIs0: 0 } | async; as config) {\n          <libs_ui-components-list\n            [config]=\"config()\"\n            [maxItemShow]=\"5\"\n            [hiddenInputSearch]=\"true\"\n            [paddingLeftItem]=\"true\"\n            (outSelectKey)=\"handlerSelectedKey($event)\" />\n        }\n      </ng-template>\n    }\n    @if (tabs().allowRemove && tabs().items().length > 1) {\n      <libs_ui-components-buttons-button\n        [type]=\"tabs().configButtonRemove?.type || 'button-link-custom'\"\n        [iconOnlyType]=\"tabs().configButtonRemove?.iconOnlyType || true\"\n        [classInclude]=\"tabs().configButtonRemove?.classInclude || 'ml-[8px] !p-0'\"\n        [classIconLeft]=\"tabs().configButtonRemove?.classIconLeft || 'libs-ui-icon-close'\"\n        [classLabel]=\"tabs().configButtonRemove?.classLabel || ''\"\n        [classIconRight]=\"tabs().configButtonRemove?.classIconRight || ''\"\n        [popover]=\"tabs().configButtonRemove?.popover || { config: { content: 'i18n_delete' } }\"\n        [label]=\"tabs().configButtonRemove?.label || ''\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#6a7383',\n            text_hover: '#f15767',\n            text_active: '#f15767',\n            text_disable: '#cdd0d6',\n          },\n          rootColor: '#f15767',\n        }\"\n        (outClick)=\"handlerClickButton($event, 'remove')\" />\n    }\n  </div>\n}\n", styles: [".libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item[invalid=true]:after{background-color:#f15767}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-action{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #9ca2ad;color:#9ca2ad;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6a7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][invalid=true]:before,.libs-ui-tab-header-center-item i[class*=icon-font-3rd][invalid=true]:before{color:#f15767}.libs-ui-tab-header-center-item-hover:hover[active=false][disable=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-hover:hover .libs-ui-tab-header-center-item-action[active=true],.libs-ui-tab-header-center-item-action-show .libs-ui-tab-header-center-item-action{display:flex}\n"] }]
         }], ctorParameters: () => [] });
@@ -439,10 +439,10 @@ class LibsUiComponentsTabsComponent {
         this.onDestroy.next();
         this.onDestroy.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTabsComponent, isStandalone: true, selector: "libs_ui-components-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, heightTabItem: { classPropertyName: "heightTabItem", publicName: "heightTabItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowDragDropPosition: { classPropertyName: "allowDragDropPosition", publicName: "allowDragDropPosition", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, configCss: { classPropertyName: "configCss", publicName: "configCss", isSignal: true, isRequired: false, transformFunction: null }, popoverShowMoreTabItem: { classPropertyName: "popoverShowMoreTabItem", publicName: "popoverShowMoreTabItem", isSignal: true, isRequired: false, transformFunction: null }, checkCanChangeTabSelected: { classPropertyName: "checkCanChangeTabSelected", publicName: "checkCanChangeTabSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", configCss: "configCssChange", outKeySelected: "outKeySelected", outFunctionsControl: "outFunctionsControl", outDragTabChange: "outDragTabChange", outDisplayMoreItem: "outDisplayMoreItem", outAction: "outAction" }, viewQueries: [{ propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }, { propertyName: "headerLeftEl", first: true, predicate: ["headerLeftEl"], descendants: true, isSignal: true }, { propertyName: "headerRightEl", first: true, predicate: ["headerRightEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-tab\">\n  <div\n    #headerEl\n    class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n    [style.minHeight.px]=\"heightTabItem()\">\n    <div\n      #headerLeftEl\n      class=\"libs-ui-tab-header-left\">\n      <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n    </div>\n    <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n      <div\n        class=\"!flex w-full\"\n        #elementContainerEl\n        LibsUiComponentsDragContainerDirective\n        [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n        [groupName]=\"groupName()\"\n        [(items)]=\"itemsDisplay\"\n        [directionDrag]=\"'horizontal'\"\n        [disableDragContainer]=\"!allowDragDropPosition()\"\n        [acceptDragSameGroup]=\"allowDragDropPosition()\"\n        (outDroppedContainer)=\"handlerDropContainer($event)\">\n        @for (item of itemsDisplay(); track item) {\n          <div\n            LibsUiDragItemDirective\n            [disable]=\"disable() || !allowDragDropPosition()\"\n            [elementContainer]=\"elementContainerEl\"\n            [dragBoundary]=\"true\"\n            [dragBoundaryAcceptMouseLeaveContainer]=\"true\"\n            class=\"relative libs-ui-tab-item-container\"\n            [style.width.px]=\"mode() === 'space-between' ? elementContainerEl.clientWidth / (itemsDisplay().length || 1) : undefined\"\n            [class.flex]=\"mode() === 'center-has-line'\"\n            [class.items-center]=\"mode() === 'center-has-line'\">\n            @if (allowDragDropPosition() && !disable()) {\n              <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[14px] left-[4px]\"></span>\n            }\n            <libs_ui-components-tabs-item\n              class=\"h-full w-full  {{ tabs().classIncludeItem || '' }}\"\n              [tabs]=\"tabs()\"\n              [size]=\"size()\"\n              [(item)]=\"item\"\n              [step]=\"$index + 1\"\n              [class.!pointer-events-none]=\"item().disable || disable()\"\n              [disable]=\"item().disable || disable()\"\n              [disableLabel]=\"disableLabel()\"\n              [keySelected]=\"keySelected()\"\n              [fieldLabel]=\"fieldLabel()\"\n              [fieldKey]=\"fieldKey()\"\n              [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n              [zIndex]=\"zIndex()\"\n              [mode]=\"mode()\"\n              [ignoreCalculatorTab]=\"true\"\n              [changeViewTab]=\"changeViewTab\"\n              (click)=\"handlerClickItem(item)\"\n              (outAction)=\"handlerAction($event)\" />\n            @if (mode() === 'center-has-line' && !$last) {\n              <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n    <div\n      class=\"flex items-center\"\n      [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n      @if (displayMoreItem()) {\n        <libs_ui-components-popover\n          class=\"w-full h-full flex items-center\"\n          [mode]=\"'click-toggle'\"\n          [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n          [config]=\"{\n            zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n            maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n            maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n            width: popoverShowMoreTabItem()?.config?.width || 277,\n            direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n            template: popoverShowMoreTabItem()?.config?.template || menuEl,\n            whiteTheme: true,\n            ignoreArrow: true,\n            position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 },\n          }\"\n          (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n          <libs_ui-components-buttons-button\n            [type]=\"'button-link-third'\"\n            [classInclude]=\"'!p-[8px]'\"\n            [iconOnlyType]=\"true\"\n            [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n            [popover]=\"{ config: { content: popoverShowMoreTabItem()?.config?.content || 'i18n_view_more' } }\"\n            [ignoreStopPropagationEvent]=\"true\" />\n        </libs_ui-components-popover>\n      }\n    </div>\n    <div\n      #headerRightEl\n      class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n      <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n    </div>\n  </div>\n  <div class=\"absolute top-0 z-0 w-full\">\n    <div\n      class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n      [style.minHeight.px]=\"heightTabItem()\">\n      <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n        @for (item of tabs().items(); track item) {\n          <libs_ui-components-tabs-item\n            class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n            [tabs]=\"tabs()\"\n            [size]=\"size()\"\n            [(item)]=\"item\"\n            [step]=\"$index + 1\"\n            [disable]=\"disable()\"\n            [disableLabel]=\"disableLabel()\"\n            [keySelected]=\"keySelected()\"\n            [fieldLabel]=\"fieldLabel()\"\n            [fieldKey]=\"fieldKey()\"\n            [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n            [zIndex]=\"zIndex()\"\n            [mode]=\"mode()\"\n            [changeViewTab]=\"changeViewTab\"\n            [ignoreCalculatorTab]=\"ignoreCalculatorTab()\" />\n        }\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #menuEl>\n  <libs_ui-components-list\n    [config]=\"tabMoreListConfig()\"\n    [maxItemShow]=\"5\"\n    [hiddenInputSearch]=\"true\"\n    [paddingLeftItem]=\"true\"\n    (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;width:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: LibsUiComponentsDragContainerDirective, selector: "[LibsUiComponentsDragContainerDirective]", inputs: ["disableDragContainer", "mode", "directionDrag", "viewEncapsulation", "acceptDragSameGroup", "placeholder", "groupName", "dropToGroupName", "items", "stylesOverride"], outputs: ["itemsChange", "outDragStartContainer", "outDragOverContainer", "outDragLeaveContainer", "outDragEndContainer", "outDroppedContainer", "outDroppedContainerEmpty", "outFunctionControl"] }, { kind: "directive", type: LibsUiDragItemDirective, selector: "[LibsUiDragItemDirective]", inputs: ["fieldId", "item", "itemInContainerVirtualScroll", "throttleTimeHandlerDraggingEvent", "ignoreStopEvent", "onlyMouseDownStopEvent", "dragRootElement", "dragBoundary", "dragBoundaryAcceptMouseLeaveContainer", "elementContainer", "zIndex", "disable"], outputs: ["outDragStart", "outDragOver", "outDragLeave", "outDragEnd", "outDropped"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsTabsItemComponent, selector: "libs_ui-components-tabs-item", inputs: ["ignoreCalculatorTab", "step", "mode", "tabs", "item", "keySelected", "fieldLabel", "fieldKey", "cssDefault", "size", "disable", "disableLabel", "zIndex", "changeViewTab"], outputs: ["itemChange", "outAction"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTabsComponent, isStandalone: true, selector: "libs_ui-components-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, heightTabItem: { classPropertyName: "heightTabItem", publicName: "heightTabItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowDragDropPosition: { classPropertyName: "allowDragDropPosition", publicName: "allowDragDropPosition", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, configCss: { classPropertyName: "configCss", publicName: "configCss", isSignal: true, isRequired: false, transformFunction: null }, popoverShowMoreTabItem: { classPropertyName: "popoverShowMoreTabItem", publicName: "popoverShowMoreTabItem", isSignal: true, isRequired: false, transformFunction: null }, checkCanChangeTabSelected: { classPropertyName: "checkCanChangeTabSelected", publicName: "checkCanChangeTabSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", configCss: "configCssChange", outKeySelected: "outKeySelected", outFunctionsControl: "outFunctionsControl", outDragTabChange: "outDragTabChange", outDisplayMoreItem: "outDisplayMoreItem", outAction: "outAction" }, viewQueries: [{ propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }, { propertyName: "headerLeftEl", first: true, predicate: ["headerLeftEl"], descendants: true, isSignal: true }, { propertyName: "headerRightEl", first: true, predicate: ["headerRightEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-tab\">\n  <div\n    #headerEl\n    class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n    [style.minHeight.px]=\"heightTabItem()\">\n    <div\n      #headerLeftEl\n      class=\"libs-ui-tab-header-left\">\n      <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n    </div>\n    <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n      <div\n        class=\"!flex w-full\"\n        #elementContainerEl\n        LibsUiComponentsDragContainerDirective\n        [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n        [groupName]=\"groupName()\"\n        [(items)]=\"itemsDisplay\"\n        [directionDrag]=\"'horizontal'\"\n        [disableDragContainer]=\"!allowDragDropPosition()\"\n        [acceptDragSameGroup]=\"allowDragDropPosition()\"\n        (outDroppedContainer)=\"handlerDropContainer($event)\">\n        @for (item of itemsDisplay(); track item) {\n          <div\n            LibsUiDragItemDirective\n            [disable]=\"disable() || !allowDragDropPosition()\"\n            [elementContainer]=\"elementContainerEl\"\n            [dragBoundary]=\"true\"\n            [dragBoundaryAcceptMouseLeaveContainer]=\"true\"\n            class=\"relative libs-ui-tab-item-container\"\n            [style.width.px]=\"mode() === 'space-between' ? elementContainerEl.clientWidth / (itemsDisplay().length || 1) : undefined\"\n            [class.flex]=\"mode() === 'center-has-line'\"\n            [class.items-center]=\"mode() === 'center-has-line'\">\n            @if (allowDragDropPosition() && !disable()) {\n              <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[14px] left-[4px]\"></span>\n            }\n            <libs_ui-components-tabs-item\n              class=\"h-full w-full  {{ tabs().classIncludeItem || '' }}\"\n              [tabs]=\"tabs()\"\n              [size]=\"size()\"\n              [(item)]=\"item\"\n              [step]=\"$index + 1\"\n              [class.!pointer-events-none]=\"item().disable || disable()\"\n              [disable]=\"item().disable || disable()\"\n              [disableLabel]=\"disableLabel()\"\n              [keySelected]=\"keySelected()\"\n              [fieldLabel]=\"fieldLabel()\"\n              [fieldKey]=\"fieldKey()\"\n              [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n              [zIndex]=\"zIndex()\"\n              [mode]=\"mode()\"\n              [ignoreCalculatorTab]=\"true\"\n              [changeViewTab]=\"changeViewTab\"\n              (click)=\"handlerClickItem(item)\"\n              (outAction)=\"handlerAction($event)\" />\n            @if (mode() === 'center-has-line' && !$last) {\n              <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n    <div\n      class=\"flex items-center\"\n      [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n      @if (displayMoreItem()) {\n        <libs_ui-components-popover\n          class=\"w-full h-full flex items-center\"\n          [mode]=\"'click-toggle'\"\n          [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n          [config]=\"{\n            zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n            maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n            maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n            width: popoverShowMoreTabItem()?.config?.width || 277,\n            direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n            template: popoverShowMoreTabItem()?.config?.template || menuEl,\n            whiteTheme: true,\n            ignoreArrow: true,\n            position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 },\n          }\"\n          (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n          <libs_ui-components-buttons-button\n            [type]=\"'button-link-third'\"\n            [classInclude]=\"'!p-[8px]'\"\n            [iconOnlyType]=\"true\"\n            [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n            [popover]=\"{ config: { content: popoverShowMoreTabItem()?.config?.content || 'i18n_view_more' } }\"\n            [ignoreStopPropagationEvent]=\"true\" />\n        </libs_ui-components-popover>\n      }\n    </div>\n    <div\n      #headerRightEl\n      class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n      <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n    </div>\n  </div>\n  <div class=\"absolute top-0 z-0 w-full\">\n    <div\n      class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n      [style.minHeight.px]=\"heightTabItem()\">\n      <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n        @for (item of tabs().items(); track item) {\n          <libs_ui-components-tabs-item\n            class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n            [tabs]=\"tabs()\"\n            [size]=\"size()\"\n            [(item)]=\"item\"\n            [step]=\"$index + 1\"\n            [disable]=\"disable()\"\n            [disableLabel]=\"disableLabel()\"\n            [keySelected]=\"keySelected()\"\n            [fieldLabel]=\"fieldLabel()\"\n            [fieldKey]=\"fieldKey()\"\n            [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n            [zIndex]=\"zIndex()\"\n            [mode]=\"mode()\"\n            [changeViewTab]=\"changeViewTab\"\n            [ignoreCalculatorTab]=\"ignoreCalculatorTab()\" />\n        }\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #menuEl>\n  <libs_ui-components-list\n    [config]=\"tabMoreListConfig()\"\n    [maxItemShow]=\"5\"\n    [hiddenInputSearch]=\"true\"\n    [paddingLeftItem]=\"true\"\n    (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;width:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: LibsUiComponentsDragContainerDirective, selector: "[LibsUiComponentsDragContainerDirective]", inputs: ["disableDragContainer", "mode", "directionDrag", "viewEncapsulation", "acceptDragSameGroup", "placeholder", "groupName", "dropToGroupName", "items", "stylesOverride"], outputs: ["itemsChange", "outDragStartContainer", "outDragOverContainer", "outDragLeaveContainer", "outDragEndContainer", "outDroppedContainer", "outDroppedContainerEmpty", "outFunctionControl"] }, { kind: "directive", type: LibsUiDragItemDirective, selector: "[LibsUiDragItemDirective]", inputs: ["fieldId", "item", "itemInContainerVirtualScroll", "throttleTimeHandlerDraggingEvent", "ignoreStopEvent", "onlyMouseDownStopEvent", "dragRootElement", "dragBoundary", "dragBoundaryAcceptMouseLeaveContainer", "elementContainer", "zIndex", "disable"], outputs: ["outDragStart", "outDragOver", "outDragLeave", "outDragEnd", "outDropped"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsTabsItemComponent, selector: "libs_ui-components-tabs-item", inputs: ["ignoreCalculatorTab", "step", "mode", "tabs", "item", "keySelected", "fieldLabel", "fieldKey", "cssDefault", "size", "disable", "disableLabel", "zIndex", "changeViewTab"], outputs: ["itemChange", "outAction"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsDragContainerDirective, LibsUiDragItemDirective, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsTabsItemComponent, LibsUiComponentsListComponent], template: "<div class=\"libs-ui-tab\">\n  <div\n    #headerEl\n    class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n    [style.minHeight.px]=\"heightTabItem()\">\n    <div\n      #headerLeftEl\n      class=\"libs-ui-tab-header-left\">\n      <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n    </div>\n    <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n      <div\n        class=\"!flex w-full\"\n        #elementContainerEl\n        LibsUiComponentsDragContainerDirective\n        [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n        [groupName]=\"groupName()\"\n        [(items)]=\"itemsDisplay\"\n        [directionDrag]=\"'horizontal'\"\n        [disableDragContainer]=\"!allowDragDropPosition()\"\n        [acceptDragSameGroup]=\"allowDragDropPosition()\"\n        (outDroppedContainer)=\"handlerDropContainer($event)\">\n        @for (item of itemsDisplay(); track item) {\n          <div\n            LibsUiDragItemDirective\n            [disable]=\"disable() || !allowDragDropPosition()\"\n            [elementContainer]=\"elementContainerEl\"\n            [dragBoundary]=\"true\"\n            [dragBoundaryAcceptMouseLeaveContainer]=\"true\"\n            class=\"relative libs-ui-tab-item-container\"\n            [style.width.px]=\"mode() === 'space-between' ? elementContainerEl.clientWidth / (itemsDisplay().length || 1) : undefined\"\n            [class.flex]=\"mode() === 'center-has-line'\"\n            [class.items-center]=\"mode() === 'center-has-line'\">\n            @if (allowDragDropPosition() && !disable()) {\n              <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[14px] left-[4px]\"></span>\n            }\n            <libs_ui-components-tabs-item\n              class=\"h-full w-full  {{ tabs().classIncludeItem || '' }}\"\n              [tabs]=\"tabs()\"\n              [size]=\"size()\"\n              [(item)]=\"item\"\n              [step]=\"$index + 1\"\n              [class.!pointer-events-none]=\"item().disable || disable()\"\n              [disable]=\"item().disable || disable()\"\n              [disableLabel]=\"disableLabel()\"\n              [keySelected]=\"keySelected()\"\n              [fieldLabel]=\"fieldLabel()\"\n              [fieldKey]=\"fieldKey()\"\n              [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n              [zIndex]=\"zIndex()\"\n              [mode]=\"mode()\"\n              [ignoreCalculatorTab]=\"true\"\n              [changeViewTab]=\"changeViewTab\"\n              (click)=\"handlerClickItem(item)\"\n              (outAction)=\"handlerAction($event)\" />\n            @if (mode() === 'center-has-line' && !$last) {\n              <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n    <div\n      class=\"flex items-center\"\n      [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n      @if (displayMoreItem()) {\n        <libs_ui-components-popover\n          class=\"w-full h-full flex items-center\"\n          [mode]=\"'click-toggle'\"\n          [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n          [config]=\"{\n            zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n            maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n            maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n            width: popoverShowMoreTabItem()?.config?.width || 277,\n            direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n            template: popoverShowMoreTabItem()?.config?.template || menuEl,\n            whiteTheme: true,\n            ignoreArrow: true,\n            position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 },\n          }\"\n          (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n          <libs_ui-components-buttons-button\n            [type]=\"'button-link-third'\"\n            [classInclude]=\"'!p-[8px]'\"\n            [iconOnlyType]=\"true\"\n            [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n            [popover]=\"{ config: { content: popoverShowMoreTabItem()?.config?.content || 'i18n_view_more' } }\"\n            [ignoreStopPropagationEvent]=\"true\" />\n        </libs_ui-components-popover>\n      }\n    </div>\n    <div\n      #headerRightEl\n      class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n      <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n    </div>\n  </div>\n  <div class=\"absolute top-0 z-0 w-full\">\n    <div\n      class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n      [style.minHeight.px]=\"heightTabItem()\">\n      <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n        @for (item of tabs().items(); track item) {\n          <libs_ui-components-tabs-item\n            class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n            [tabs]=\"tabs()\"\n            [size]=\"size()\"\n            [(item)]=\"item\"\n            [step]=\"$index + 1\"\n            [disable]=\"disable()\"\n            [disableLabel]=\"disableLabel()\"\n            [keySelected]=\"keySelected()\"\n            [fieldLabel]=\"fieldLabel()\"\n            [fieldKey]=\"fieldKey()\"\n            [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n            [zIndex]=\"zIndex()\"\n            [mode]=\"mode()\"\n            [changeViewTab]=\"changeViewTab\"\n            [ignoreCalculatorTab]=\"ignoreCalculatorTab()\" />\n        }\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #menuEl>\n  <libs_ui-components-list\n    [config]=\"tabMoreListConfig()\"\n    [maxItemShow]=\"5\"\n    [hiddenInputSearch]=\"true\"\n    [paddingLeftItem]=\"true\"\n    (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;width:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"] }]
         }] });

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@libs-ui/components-tabs",
-  "version": "0.2.321-0",
+  "version": "0.2.323-0",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-badge": "0.2.321-0",
-    "@libs-ui/components-buttons-button": "0.2.321-0",
-    "@libs-ui/components-list": "0.2.321-0",
-    "@libs-ui/components-popover": "0.2.321-0",
+    "@libs-ui/components-badge": "0.2.323-0",
+    "@libs-ui/components-buttons-button": "0.2.323-0",
+    "@libs-ui/components-list": "0.2.323-0",
+    "@libs-ui/components-popover": "0.2.323-0",
     "rxjs": "~7.8.0",
-    "@libs-ui/interfaces-types": "0.2.321-0",
-    "@libs-ui/utils": "0.2.321-0",
+    "@libs-ui/interfaces-types": "0.2.323-0",
+    "@libs-ui/utils": "0.2.323-0",
     "@ngx-translate/core": "^15.0.0",
-    "@libs-ui/pipes-call-function-in-template": "0.2.321-0",
-    "@libs-ui/components-drag-drop": "0.2.321-0",
-    "@libs-ui/services-http-request": "0.2.321-0"
+    "@libs-ui/pipes-call-function-in-template": "0.2.323-0",
+    "@libs-ui/components-drag-drop": "0.2.323-0",
+    "@libs-ui/services-http-request": "0.2.323-0"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-tabs.mjs",