@libs-ui/components-tabs 0.2.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/esm2022/index.mjs +3 -0
- package/esm2022/interfaces/tab.interface.mjs +2 -0
- package/esm2022/item/item.component.mjs +95 -0
- package/esm2022/libs-ui-components-tabs.mjs +5 -0
- package/esm2022/services/tab.service.mjs +14 -0
- package/esm2022/tabs.component.mjs +274 -0
- package/esm2022/utils/tabs.mjs +51 -0
- package/fesm2022/libs-ui-components-tabs.mjs +427 -0
- package/fesm2022/libs-ui-components-tabs.mjs.map +1 -0
- package/index.d.ts +2 -0
- package/interfaces/tab.interface.d.ts +68 -0
- package/item/item.component.d.ts +39 -0
- package/package.json +25 -0
- package/services/tab.service.d.ts +7 -0
- package/tabs.component.d.ts +59 -0
- package/utils/tabs.d.ts +5 -0
|
@@ -0,0 +1,427 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { computed, signal, input, model, output, inject, ElementRef, effect, untracked, Component, ChangeDetectionStrategy, Injectable, viewChild } from '@angular/core';
|
|
3
|
+
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
|
|
4
|
+
import { LibsUiComponentsDragContainerDirective, LibsUiDragItemDirective } from '@libs-ui/components-drag-drop';
|
|
5
|
+
import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
|
|
6
|
+
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
7
|
+
import { escapeHtml, uuid, isNil } from '@libs-ui/utils';
|
|
8
|
+
import { TranslateService } from '@ngx-translate/core';
|
|
9
|
+
import { Subject, debounceTime, of, fromEvent } from 'rxjs';
|
|
10
|
+
import { debounceTime as debounceTime$1, takeUntil } from 'rxjs/operators';
|
|
11
|
+
import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
|
|
12
|
+
|
|
13
|
+
class LibsUiComponentsTabsItemComponent {
|
|
14
|
+
labelComputed = computed(() => escapeHtml(this.translateService.instant(this.item()[this.fieldLabel()])));
|
|
15
|
+
mutationObserver = signal(undefined);
|
|
16
|
+
mutationObserverSubject = new Subject();
|
|
17
|
+
onDestroy = new Subject();
|
|
18
|
+
// private dropdownFunctionControl: IDropdownFunctionControlEvent | undefined;
|
|
19
|
+
ignoreCalculatorTab = input.required();
|
|
20
|
+
step = input.required();
|
|
21
|
+
mode = input.required();
|
|
22
|
+
tabs = input.required();
|
|
23
|
+
item = model.required();
|
|
24
|
+
keySelected = input.required();
|
|
25
|
+
fieldLabel = input.required();
|
|
26
|
+
fieldKey = input.required();
|
|
27
|
+
cssDefault = input.required();
|
|
28
|
+
size = input.required();
|
|
29
|
+
disable = input();
|
|
30
|
+
disableLabel = input();
|
|
31
|
+
zIndex = input();
|
|
32
|
+
changeViewTab = input.required();
|
|
33
|
+
outSelectAction = output();
|
|
34
|
+
element = inject(ElementRef);
|
|
35
|
+
translateService = inject(TranslateService);
|
|
36
|
+
constructor() {
|
|
37
|
+
effect(() => {
|
|
38
|
+
if (this.mode() !== 'left' || this.ignoreCalculatorTab()) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
untracked(() => {
|
|
42
|
+
this.updateSpecificWidth();
|
|
43
|
+
this.mutationObserver()?.disconnect();
|
|
44
|
+
this.mutationObserverSubject.pipe(debounceTime(250)).subscribe(() => this.updateSpecificWidth());
|
|
45
|
+
this.mutationObserver.set(new MutationObserver(() => this.mutationObserverSubject.next()));
|
|
46
|
+
this.mutationObserver()?.observe(this.element.nativeElement, { attributes: true, childList: true, subtree: true });
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
ngOnInit() {
|
|
51
|
+
if (!this.item().key) {
|
|
52
|
+
this.item.update(item => ({ ...item, key: uuid() }));
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
updateSpecificWidth() {
|
|
56
|
+
const preSpecificWidth = this.item().specificWidth;
|
|
57
|
+
const width = this.element.nativeElement.offsetWidth;
|
|
58
|
+
if (width && preSpecificWidth !== width) {
|
|
59
|
+
this.item.update(item => ({ ...item, specificWidth: width }));
|
|
60
|
+
this.changeViewTab().next();
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
handlerImgError(event) {
|
|
64
|
+
event.stopPropagation();
|
|
65
|
+
event.target.src = this.item().linkImageError;
|
|
66
|
+
}
|
|
67
|
+
handlerSelectAction(event) {
|
|
68
|
+
// if (this.tab?.modeSaveView) {
|
|
69
|
+
// this.moSelectAction.emit({ item: this.item, action: event.key as string });
|
|
70
|
+
// this.dropdownFunctionControl && this.dropdownFunctionControl.resetDropdown();
|
|
71
|
+
// }
|
|
72
|
+
}
|
|
73
|
+
// protected handlerDropdownFunctionControl(event: IDropdownFunctionControlEvent) {
|
|
74
|
+
// this.dropdownFunctionControl = event;
|
|
75
|
+
// }
|
|
76
|
+
handlerClickButton(event, type) {
|
|
77
|
+
event.stopPropagation();
|
|
78
|
+
const action = this.item()[type]?.action;
|
|
79
|
+
if (action) {
|
|
80
|
+
action(this.item());
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
ngOnDestroy() {
|
|
84
|
+
this.mutationObserver()?.disconnect();
|
|
85
|
+
this.onDestroy.next();
|
|
86
|
+
this.onDestroy.complete();
|
|
87
|
+
}
|
|
88
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
89
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTabsItemComponent, isStandalone: true, selector: "libs_ui-components-tabs-item", inputs: { ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: true, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: true, transformFunction: null }, cssDefault: { classPropertyName: "cssDefault", publicName: "cssDefault", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, changeViewTab: { classPropertyName: "changeViewTab", publicName: "changeViewTab", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { item: "itemChange", outSelectAction: "outSelectAction" }, ngImport: i0, template: " @if (item(); as item) {\n <div #itemEl\n [attr.key]=\"item[fieldKey()]\"\n [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }}\"\n [class.libs-ui-tab-header-center-item-style-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n [class.cursor-pointer]=\"!item.disable && !disable()\">\n @if (tabs().hasImage) {\n <img LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverImage\"\n [config]=\"item.popoverImage\"\n [ignoreStopPropagationEvent]=\"true\"\n class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [src]=\"item.linkImage\"\n [attr.key]=\"item[fieldKey()]\"\n (error)=\"handlerImgError($event)\" />\n }\n @if (item.iconLeft) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconLeft\"\n [config]=\"item.popoverIconLeft\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon mo-lib-mr-8px {{ item.iconLeft }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.is_pin) {\n <i [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (tabs().hasStep) {\n @if (tabs().hasBackGroundTab) {\n <div class=\"libs-ui-tab-header-center-item-step border-none libs-ui-font-h6m\"\n [class.cursor-default]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [class.bg-[#f8f9fa]]=\"item.disable || disable()\"\n [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.text[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#f8ff9a]]=\"step() > (tabs().stepCompleted || 0) && tabs().ignoreSelectedBackgroundStep\">\n @if ((step() <= (tabs().stepCompleted || -1))) {\n <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n } @else {\n <span [class.text-[#cdd0d6]]=\"item.disable || disable()\">{{ step() }}</span>\n }\n </div>\n } @else {\n <div [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n class=\"libs-ui-tab-header-center-item-step\">\n <span>{{ step() }}</span>\n </div>\n }\n }\n @if (item.configButtonLeft) {\n <libs_ui-components-buttons-button [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n [classIconLeft]=\"item.configButtonLeft.classIconLeft ||''\"\n [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n [classIconRight]=\"item.configButtonLeft.classIconRight ||''\"\n [label]=\"item.configButtonLeft.label ||''\"\n [popover]=\"item.configButtonLeft.popover || {}\"\n (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n }\n @if (item[fieldLabel()]) {\n <div class=\"relative flex\"\n [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n <span LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{position: {mode: step() === 1 ? 'start' : 'center', distance: 0}, zIndex: zIndex()}\"\n [attr.size]=\"size()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [ignoreStopPropagationEvent]=\"true\"\n [classInclude]=\"'w-full libs-ui-tab-header-center-item-label '+ (item.classLabel || 'libs-ui-font-h6m') + \n (disableLabel() && (item.disable || disable()) ? ' libs-ui-disable' : '') \n + (tabs().hasBackGroundTab && (item.disable || disable()) ? ' text-[#cdd0d6] cursor-default' : '')\"\n [innerHTML]=\"labelComputed()\"></span>\n @if (item.hasRedDot) {\n <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] mo-lib-border-radius-50em\">\n </div>\n }\n </div>\n }\n @if (item.popover) {\n <i LibsUiComponentsPopoverDirective\n [config]=\"item.popover\"\n class=\"ml-[8px]\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon libs-ui-icon-tooltip-outline\">\n </i>\n }\n @if (item.iconRight) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconRight\"\n [config]=\"item.popoverIconRight\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.count) {\n <libs_ui-components-badge [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"item.classCircle || 'libs-ui-font-h5r'\"\n [active]=\"item[fieldKey()] === keySelected()\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\" />\n }\n @if (item.configButtonRight) {\n <libs_ui-components-buttons-button [type]=\"item.configButtonRight.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonRight.classInclude || ''\"\n [classIconLeft]=\"item.configButtonRight.classIconLeft ||''\"\n [classLabel]=\"item.configButtonRight.classLabel || ''\"\n [classIconRight]=\"item.configButtonRight.classIconRight ||''\"\n [popover]=\"item.configButtonRight.popover || {}\"\n [label]=\"item.configButtonRight.label ||''\"\n (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n }\n <!-- <mo-libs-shared-components-dropdown *ngIf=\"item.specificDisplay && tab.dropdownRightConfig as config\"\n [class.mo-lib-ml-8px]=\"!config.getView\"\n [class.mo-lib-tab-header-center-item-dropdown]=\"config.hiddenShowDropdown\"\n [attr.active]=\"item[fieldKey] === keySelected\"\n [attr.completed]=\"step <= (tab.stepCompleted || -1)\"\n [class.mo-lib-pointer-events-none]=\"item.disable || disable || item[fieldKey] !== keySelected\"\n [isNgContent]=\"true\"\n [customPopupConfig]=\"{\n widthByParent: false,\n ignoreArrow: true,\n paddingLeftItem:config.paddingLeftItem ?? true,\n classInclude:config.classIncludePopup || 'mo-lib-w-250px',\n position:{\n mode: 'start',\n distance: 0\n }\n }\"\n [tooltipElementRefCustom]=\"config.hiddenShowDropdown !== undefined ? undefined : itemEl\"\n [classWidthDropDown]=\"'d-flex'\"\n [listViewData]=\"config.getData ? (item[fieldKey] | MoLibsSharedPipesCallFunctionInTemplate:config.getData:item:lang) : undefined\"\n [listViewConfig]=\"config.listViewConfig\"\n [listViewBackgroundListCustom]=\"config.listViewBackgroundListCustom\"\n [listViewMaxItemShow]=\"config.listViewMaxItemShow || 5\"\n [ignoreStopPropagationEvent]=\"true\"\n (moSelectKey)=\"handlerSelectAction($event)\"\n (moFunctionsControl)=\"handlerDropdownFunctionControl($event)\">\n <div *ngIf=\"config.getView\"\n [innerHtml]=\"item[fieldKey] | MoLibsSharedPipesCallFunctionInTemplate:config.getView:item:lang \">\n </div>\n <i *ngIf=\"!config.getView\"\n [attr.active]=\"item[fieldKey] === keySelected\"\n [attr.completed]=\"step <= (tab.stepCompleted || -1)\"\n class=\" {{ config.hiddenShowDropdown ? 'mo-svg-font-more-horizontal mo-lib-color-6a7383 mo-lib-color-global-hover' : 'mo-svg-font-chevron-down mo-lib-tab-header-center-item-icon' }} \">\n </i>\n </mo-libs-shared-components-dropdown> -->\n\n </div>\n }\n", styles: [".libs-ui-tab-header-center-item-style-hover:hover:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-dropdown{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #999;color:#999;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6A7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-style-hover:hover[active=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-style-hover:hover .libs-ui-tab-header-center-item-dropdown[active=true]{display:flex}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
90
|
+
}
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsItemComponent, decorators: [{
|
|
92
|
+
type: Component,
|
|
93
|
+
args: [{ selector: 'libs_ui-components-tabs-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
94
|
+
LibsUiComponentsButtonsButtonComponent,
|
|
95
|
+
LibsUiComponentsPopoverComponent,
|
|
96
|
+
LibsUiComponentsBadgeComponent
|
|
97
|
+
], template: " @if (item(); as item) {\n <div #itemEl\n [attr.key]=\"item[fieldKey()]\"\n [attr.active]=\"item[fieldKey()] === keySelected() && !tabs().ignoreShowLineBottomInTab\"\n class=\"libs-ui-tab-header-center-item {{ cssDefault() }} {{ item.classInclude || '' }}\"\n [class.libs-ui-tab-header-center-item-style-hover]=\"!tabs().ignoreShowLineBottomInTab\"\n [class.cursor-pointer]=\"!item.disable && !disable()\">\n @if (tabs().hasImage) {\n <img LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverImage\"\n [config]=\"item.popoverImage\"\n [ignoreStopPropagationEvent]=\"true\"\n class=\"libs-ui-tab-header-center-item-image {{ item.classImageInclude || '' }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [src]=\"item.linkImage\"\n [attr.key]=\"item[fieldKey()]\"\n (error)=\"handlerImgError($event)\" />\n }\n @if (item.iconLeft) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconLeft\"\n [config]=\"item.popoverIconLeft\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon mo-lib-mr-8px {{ item.iconLeft }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.is_pin) {\n <i [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon mr-[8px] {{ item[fieldKey()] === keySelected() ? 'libs-ui-icon-pin-solid' : 'libs-ui-icon-pin-outline' }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (tabs().hasStep) {\n @if (tabs().hasBackGroundTab) {\n <div class=\"libs-ui-tab-header-center-item-step border-none libs-ui-font-h6m\"\n [class.cursor-default]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [class.bg-[#f8f9fa]]=\"item.disable || disable()\"\n [class.bg-[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.text-[#ffffff]]=\"item[fieldKey()] === keySelected() && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.text[var(--libs-ui-color-default)]]=\"item[fieldKey()] === keySelected() && tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#00bc62]]=\"step() <= (tabs().stepCompleted || -1) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"step() > (tabs().stepCompleted || 0) && !tabs().ignoreSelectedBackgroundStep\"\n [class.bg-[#f8ff9a]]=\"step() > (tabs().stepCompleted || 0) && tabs().ignoreSelectedBackgroundStep\">\n @if ((step() <= (tabs().stepCompleted || -1))) {\n <i class=\"libs-ui-icon-check text-[#ffffff]\"></i>\n } @else {\n <span [class.text-[#cdd0d6]]=\"item.disable || disable()\">{{ step() }}</span>\n }\n </div>\n } @else {\n <div [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n class=\"libs-ui-tab-header-center-item-step\">\n <span>{{ step() }}</span>\n </div>\n }\n }\n @if (item.configButtonLeft) {\n <libs_ui-components-buttons-button [type]=\"item.configButtonLeft.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonLeft.classInclude || ''\"\n [classIconLeft]=\"item.configButtonLeft.classIconLeft ||''\"\n [classLabel]=\"item.configButtonLeft.classLabel || ''\"\n [classIconRight]=\"item.configButtonLeft.classIconRight ||''\"\n [label]=\"item.configButtonLeft.label ||''\"\n [popover]=\"item.configButtonLeft.popover || {}\"\n (outClick)=\"handlerClickButton($event, 'configButtonLeft')\" />\n }\n @if (item[fieldLabel()]) {\n <div class=\"relative flex\"\n [style.maxWidth.px]=\"tabs().maxWidthTextLabelItem || 160\">\n <span LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [config]=\"{position: {mode: step() === 1 ? 'start' : 'center', distance: 0}, zIndex: zIndex()}\"\n [attr.size]=\"size()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n [ignoreStopPropagationEvent]=\"true\"\n [classInclude]=\"'w-full libs-ui-tab-header-center-item-label '+ (item.classLabel || 'libs-ui-font-h6m') + \n (disableLabel() && (item.disable || disable()) ? ' libs-ui-disable' : '') \n + (tabs().hasBackGroundTab && (item.disable || disable()) ? ' text-[#cdd0d6] cursor-default' : '')\"\n [innerHTML]=\"labelComputed()\"></span>\n @if (item.hasRedDot) {\n <div class=\"absolute right-[-6px] top-[-2px] w-[6px] h-[6px] bg-[#ee2d41] mo-lib-border-radius-50em\">\n </div>\n }\n </div>\n }\n @if (item.popover) {\n <i LibsUiComponentsPopoverDirective\n [config]=\"item.popover\"\n class=\"ml-[8px]\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon libs-ui-icon-tooltip-outline\">\n </i>\n }\n @if (item.iconRight) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!item.popoverIconRight\"\n [config]=\"item.popoverIconRight\"\n [ignoreStopPropagationEvent]=\"true\"\n [attr.active]=\"item[fieldKey()] === keySelected()\"\n [attr.completed]=\"step() <= (tabs().stepCompleted || -1)\"\n class=\"libs-ui-tab-header-center-item-icon {{ item.iconRight }}\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\">\n </i>\n }\n @if (item.count) {\n <libs_ui-components-badge [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"item.classCircle || 'libs-ui-font-h5r'\"\n [active]=\"item[fieldKey()] === keySelected()\"\n [class.libs-ui-disable]=\"item.disable || disable()\"\n [class.pointer-events-none]=\"item.disable || disable()\" />\n }\n @if (item.configButtonRight) {\n <libs_ui-components-buttons-button [type]=\"item.configButtonRight.type || 'button-link-third'\"\n [classInclude]=\"item.configButtonRight.classInclude || ''\"\n [classIconLeft]=\"item.configButtonRight.classIconLeft ||''\"\n [classLabel]=\"item.configButtonRight.classLabel || ''\"\n [classIconRight]=\"item.configButtonRight.classIconRight ||''\"\n [popover]=\"item.configButtonRight.popover || {}\"\n [label]=\"item.configButtonRight.label ||''\"\n (outClick)=\"handlerClickButton($event, 'configButtonRight')\" />\n }\n <!-- <mo-libs-shared-components-dropdown *ngIf=\"item.specificDisplay && tab.dropdownRightConfig as config\"\n [class.mo-lib-ml-8px]=\"!config.getView\"\n [class.mo-lib-tab-header-center-item-dropdown]=\"config.hiddenShowDropdown\"\n [attr.active]=\"item[fieldKey] === keySelected\"\n [attr.completed]=\"step <= (tab.stepCompleted || -1)\"\n [class.mo-lib-pointer-events-none]=\"item.disable || disable || item[fieldKey] !== keySelected\"\n [isNgContent]=\"true\"\n [customPopupConfig]=\"{\n widthByParent: false,\n ignoreArrow: true,\n paddingLeftItem:config.paddingLeftItem ?? true,\n classInclude:config.classIncludePopup || 'mo-lib-w-250px',\n position:{\n mode: 'start',\n distance: 0\n }\n }\"\n [tooltipElementRefCustom]=\"config.hiddenShowDropdown !== undefined ? undefined : itemEl\"\n [classWidthDropDown]=\"'d-flex'\"\n [listViewData]=\"config.getData ? (item[fieldKey] | MoLibsSharedPipesCallFunctionInTemplate:config.getData:item:lang) : undefined\"\n [listViewConfig]=\"config.listViewConfig\"\n [listViewBackgroundListCustom]=\"config.listViewBackgroundListCustom\"\n [listViewMaxItemShow]=\"config.listViewMaxItemShow || 5\"\n [ignoreStopPropagationEvent]=\"true\"\n (moSelectKey)=\"handlerSelectAction($event)\"\n (moFunctionsControl)=\"handlerDropdownFunctionControl($event)\">\n <div *ngIf=\"config.getView\"\n [innerHtml]=\"item[fieldKey] | MoLibsSharedPipesCallFunctionInTemplate:config.getView:item:lang \">\n </div>\n <i *ngIf=\"!config.getView\"\n [attr.active]=\"item[fieldKey] === keySelected\"\n [attr.completed]=\"step <= (tab.stepCompleted || -1)\"\n class=\" {{ config.hiddenShowDropdown ? 'mo-svg-font-more-horizontal mo-lib-color-6a7383 mo-lib-color-global-hover' : 'mo-svg-font-chevron-down mo-lib-tab-header-center-item-icon' }} \">\n </i>\n </mo-libs-shared-components-dropdown> -->\n\n </div>\n }\n", styles: [".libs-ui-tab-header-center-item-style-hover:hover:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item{position:relative;display:flex;align-items:center;flex-wrap:nowrap;padding:12px 0;height:100%;width:fit-content}.libs-ui-tab-header-center-item[active=true]:after{content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-image{width:20px;height:20px;border-radius:50%;margin-right:8px}.libs-ui-tab-header-center-item-icon{display:flex}.libs-ui-tab-header-center-item-icon:before{font-size:12px}.libs-ui-tab-header-center-item-label{font-family:var(--libs-ui-font-family-name, \"Arial\");color:#6a7383;font-size:11px}.libs-ui-tab-header-center-item-label[size=langer]{font-size:13px}.libs-ui-tab-header-center-item-label[completed=true]{color:#6a7383}.libs-ui-tab-header-center-item-label[active=true]{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-dropdown{display:none}.libs-ui-tab-header-center-item-step{border-radius:50%;border:1px solid #999;color:#999;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;margin-right:8px}.libs-ui-tab-header-center-item-step[completed=true]{color:#6a7383;border:1px solid #6A7383}.libs-ui-tab-header-center-item-step[active=true]{color:var(--libs-ui-color-default, #226ff5);border:1px solid var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][completed=true]:before{color:#6a7383}.libs-ui-tab-header-center-item i[class*=libs-ui-icon-][active=true]:before{color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tab-header-center-item-style-hover:hover[active=false]:after{content:\"\";width:100%;height:2px;background-color:#6a7383;position:absolute;bottom:0;left:0}.libs-ui-tab-header-center-item-style-hover:hover .libs-ui-tab-header-center-item-dropdown[active=true]{display:flex}\n"] }]
|
|
98
|
+
}], ctorParameters: () => [] });
|
|
99
|
+
|
|
100
|
+
class LibsUiTabsService {
|
|
101
|
+
listTabItemsMore(items) {
|
|
102
|
+
return of(items);
|
|
103
|
+
}
|
|
104
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
105
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTabsService });
|
|
106
|
+
}
|
|
107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiTabsService, decorators: [{
|
|
108
|
+
type: Injectable
|
|
109
|
+
}] });
|
|
110
|
+
|
|
111
|
+
const tabMoreListConfig = (tabsService, translate, fieldKey, fieldLabel, tabs) => {
|
|
112
|
+
return {
|
|
113
|
+
type: 'text',
|
|
114
|
+
httpRequestData: {
|
|
115
|
+
serviceOther: tabsService,
|
|
116
|
+
functionName: 'listTabItemsMore',
|
|
117
|
+
argumentsValue: [tabs.items().filter(item => !item().specificDisplay).map(item => item())],
|
|
118
|
+
convertResponseData: (response) => {
|
|
119
|
+
console.log(response);
|
|
120
|
+
return response;
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
configTemplateText: {
|
|
124
|
+
fieldKey: fieldKey || 'key',
|
|
125
|
+
getClassItem: () => 'py-[4px]',
|
|
126
|
+
classRows: 'w-full',
|
|
127
|
+
rows: [{
|
|
128
|
+
classCols: 'flex items-center py-[8px]',
|
|
129
|
+
cols: [
|
|
130
|
+
{
|
|
131
|
+
getPopover: (item) => item.iconLeft ? { classInclude: 'flex', dataView: `<i class="${item.iconLeft} text-[16px] mr-[8px]"></i>` } : undefined
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
getValue: (item) => escapeHtml(translate.instant(item[fieldLabel] || ' '))
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
getPopover: (item) => item.popover ? { config: item.popover } : undefined
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
getPopover: (item) => item.iconRight ? { dataView: `<i class="${item.iconRight} text-[16px] mr-[8px]"></i>` } : undefined
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
getConfigBadge: (item) => {
|
|
144
|
+
if (isNil(item.count)) {
|
|
145
|
+
return undefined;
|
|
146
|
+
}
|
|
147
|
+
return {
|
|
148
|
+
mode: item.modeCount || 'x+',
|
|
149
|
+
count: item.count,
|
|
150
|
+
maxCount: item.maxCount || 99,
|
|
151
|
+
classCircle: item.classCircle || 'libs-ui-font-h5r'
|
|
152
|
+
};
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
]
|
|
156
|
+
}]
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
class LibsUiComponentsTabsComponent {
|
|
162
|
+
itemsDisplayComputed = computed(() => this.tabs().items().filter(item => item().specificDisplay));
|
|
163
|
+
displayMoreItem = signal(false);
|
|
164
|
+
tabMoreListConfig = signal(undefined);
|
|
165
|
+
changeViewTab = new Subject();
|
|
166
|
+
groupName = signal(uuid());
|
|
167
|
+
stylesDragDropOverrideComputed = computed(() => this.updateStylesDragDropOverride());
|
|
168
|
+
popoverFunctionControlEvent = signal(undefined);
|
|
169
|
+
onDestroy = new Subject();
|
|
170
|
+
mode = input('left');
|
|
171
|
+
fieldKey = input('key');
|
|
172
|
+
fieldLabel = input('label');
|
|
173
|
+
keySelected = model.required();
|
|
174
|
+
disable = input();
|
|
175
|
+
tabs = input.required();
|
|
176
|
+
heightTabItem = input(40);
|
|
177
|
+
ignoreCalculatorTab = input(false);
|
|
178
|
+
size = input('medium');
|
|
179
|
+
disableLabel = input();
|
|
180
|
+
hasAnimation = input(true);
|
|
181
|
+
zIndex = input();
|
|
182
|
+
configCss = model();
|
|
183
|
+
popoverShowMoreTabItem = input();
|
|
184
|
+
checkCanChangeTabSelected = input();
|
|
185
|
+
outKeySelected = output();
|
|
186
|
+
outFunctionsControl = output();
|
|
187
|
+
outDragTabChange = output();
|
|
188
|
+
outDisplayMoreItem = output();
|
|
189
|
+
headerEl = viewChild.required('headerEl');
|
|
190
|
+
headerLeftEl = viewChild.required('headerLeftEl');
|
|
191
|
+
headerRightEl = viewChild.required('headerRightEl');
|
|
192
|
+
tabsService = inject(LibsUiTabsService);
|
|
193
|
+
translate = inject(TranslateService);
|
|
194
|
+
ngOnInit() {
|
|
195
|
+
this.updateTabsCssConfig();
|
|
196
|
+
this.tabMoreListConfig.set(tabMoreListConfig(this.tabsService, this.translate, this.fieldKey(), this.fieldLabel(), this.tabs()));
|
|
197
|
+
if (this.ignoreCalculatorTab()) {
|
|
198
|
+
this.tabs().items().map(item => item.update(data => ({ ...data, specificDisplay: true })));
|
|
199
|
+
}
|
|
200
|
+
this.outFunctionsControl.emit({
|
|
201
|
+
addTabItem: this.addTabItem.bind(this),
|
|
202
|
+
calculatorTabItemsDisplay: this.calculatorTabsItemDisplay.bind(this),
|
|
203
|
+
selectedTabItem: this.handlerSelectedTabItem.bind(this)
|
|
204
|
+
});
|
|
205
|
+
if (this.mode() !== 'left' || this.ignoreCalculatorTab()) {
|
|
206
|
+
return;
|
|
207
|
+
}
|
|
208
|
+
fromEvent(window, 'resize').pipe(debounceTime$1(250), takeUntil(this.onDestroy)).subscribe(() => {
|
|
209
|
+
if (!this.tabs().items().length) {
|
|
210
|
+
return;
|
|
211
|
+
}
|
|
212
|
+
this.displayMoreItem.set(false);
|
|
213
|
+
this.calculatorTabsItemDisplay();
|
|
214
|
+
});
|
|
215
|
+
this.changeViewTab.pipe(takeUntil(this.onDestroy)).subscribe(() => this.calculatorTabsItemDisplay());
|
|
216
|
+
}
|
|
217
|
+
updateTabsCssConfig() {
|
|
218
|
+
if (this.configCss()) {
|
|
219
|
+
return;
|
|
220
|
+
}
|
|
221
|
+
switch (this.mode()) {
|
|
222
|
+
case 'left':
|
|
223
|
+
this.configCss.set({
|
|
224
|
+
first: 'ml-[20px] mr-[16px]',
|
|
225
|
+
other: 'ml-[20px] mr-[16px]'
|
|
226
|
+
});
|
|
227
|
+
break;
|
|
228
|
+
case 'center':
|
|
229
|
+
this.configCss.set({
|
|
230
|
+
first: 'px-[12px] ml-[18px] mr-[18px]',
|
|
231
|
+
other: 'px-[12px] mx-[18px]',
|
|
232
|
+
header: 'flex justify-center'
|
|
233
|
+
});
|
|
234
|
+
this.tabs().items().map(item => item.update(data => ({ ...data, specificDisplay: true })));
|
|
235
|
+
break;
|
|
236
|
+
case 'center-has-line':
|
|
237
|
+
this.configCss.set({
|
|
238
|
+
first: 'px-[16px]',
|
|
239
|
+
other: 'px-[16px]',
|
|
240
|
+
headerCenter: 'items-center'
|
|
241
|
+
});
|
|
242
|
+
this.tabs().items().map(item => item.update(data => ({ ...data, specificDisplay: true })));
|
|
243
|
+
break;
|
|
244
|
+
case 'space-between':
|
|
245
|
+
this.configCss.set({
|
|
246
|
+
first: 'mx-auto',
|
|
247
|
+
other: 'mx-auto',
|
|
248
|
+
headerCenter: 'w-full'
|
|
249
|
+
});
|
|
250
|
+
this.tabs().items().map(item => item.update(data => ({ ...data, specificDisplay: true })));
|
|
251
|
+
break;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
updateStylesDragDropOverride() {
|
|
255
|
+
if (this.hasAnimation()) {
|
|
256
|
+
return [
|
|
257
|
+
{
|
|
258
|
+
className: 'libs-ui-drag-drop-item-placeholder',
|
|
259
|
+
styles: ''
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
className: 'libs-ui-drag-drop-item',
|
|
263
|
+
styles: 'cursor: move;'
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
className: 'libs-ui-drag-drop-item-dragging',
|
|
267
|
+
styles: 'cursor: move; background: #dddddd;'
|
|
268
|
+
}
|
|
269
|
+
];
|
|
270
|
+
}
|
|
271
|
+
return [
|
|
272
|
+
{
|
|
273
|
+
className: 'libs-ui-drag-drop-item',
|
|
274
|
+
styles: ''
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
className: 'libs-ui-drag-drop-item-disable',
|
|
278
|
+
styles: ''
|
|
279
|
+
}
|
|
280
|
+
];
|
|
281
|
+
}
|
|
282
|
+
handlerDropContainer(event) {
|
|
283
|
+
const { itemDragInfo } = event;
|
|
284
|
+
if (!itemDragInfo) {
|
|
285
|
+
return;
|
|
286
|
+
}
|
|
287
|
+
const items = this.tabs().items;
|
|
288
|
+
const { indexDrag, indexDrop } = itemDragInfo;
|
|
289
|
+
if (isNil(indexDrag) || isNil(indexDrop) || indexDrop === indexDrag) {
|
|
290
|
+
return;
|
|
291
|
+
}
|
|
292
|
+
const itemDrag = items()[indexDrag];
|
|
293
|
+
items.update(items => {
|
|
294
|
+
items.splice(indexDrag, 1);
|
|
295
|
+
items.splice(indexDrop, 0, itemDrag);
|
|
296
|
+
return [...items];
|
|
297
|
+
});
|
|
298
|
+
this.outDragTabChange.emit();
|
|
299
|
+
}
|
|
300
|
+
handlerPopoverFunctionControlEvent(event) {
|
|
301
|
+
this.popoverFunctionControlEvent.set(event);
|
|
302
|
+
}
|
|
303
|
+
async handlerSelectedTabItem(key, resetDisable = true) {
|
|
304
|
+
const itemSelected = this.tabs().items().find(item => item()[this.fieldKey()] === key);
|
|
305
|
+
if (!itemSelected) {
|
|
306
|
+
return;
|
|
307
|
+
}
|
|
308
|
+
if (resetDisable) {
|
|
309
|
+
itemSelected.update(item => ({ ...item, disable: false }));
|
|
310
|
+
}
|
|
311
|
+
this.handlerClickItem({ stopPropagation: () => { return; } }, itemSelected);
|
|
312
|
+
}
|
|
313
|
+
handlerSelectedKey(event) {
|
|
314
|
+
if (!event) {
|
|
315
|
+
return;
|
|
316
|
+
}
|
|
317
|
+
this.handlerClickItem({ stopPropagation: () => { return; } }, event.item);
|
|
318
|
+
this.outDragTabChange.emit();
|
|
319
|
+
}
|
|
320
|
+
async handlerClickItem(event, item) {
|
|
321
|
+
event.stopPropagation();
|
|
322
|
+
if (item().disable || this.disable()) {
|
|
323
|
+
return;
|
|
324
|
+
}
|
|
325
|
+
const checkCanChangeTabSelected = this.checkCanChangeTabSelected();
|
|
326
|
+
if (checkCanChangeTabSelected) {
|
|
327
|
+
const state = await checkCanChangeTabSelected();
|
|
328
|
+
if (state) {
|
|
329
|
+
this.changeItemSelected(item);
|
|
330
|
+
}
|
|
331
|
+
return;
|
|
332
|
+
}
|
|
333
|
+
this.changeItemSelected(item);
|
|
334
|
+
}
|
|
335
|
+
changeItemSelected(item) {
|
|
336
|
+
this.keySelected.set(item()[this.fieldKey()]);
|
|
337
|
+
this.outKeySelected.emit(this.keySelected());
|
|
338
|
+
this.popoverFunctionControlEvent()?.removePopoverOverlay();
|
|
339
|
+
this.calculatorTabsItemDisplay();
|
|
340
|
+
}
|
|
341
|
+
async handlerSelectAction(event) {
|
|
342
|
+
// switch (event.action) {
|
|
343
|
+
// case 'pin':
|
|
344
|
+
// await this.handlerPin(event.item);
|
|
345
|
+
// break;
|
|
346
|
+
// case 'unpin':
|
|
347
|
+
// await this.handlerUnpin(event.item);
|
|
348
|
+
// break;
|
|
349
|
+
// case 'edit':
|
|
350
|
+
// this.handlerEditTabItem(event.item);
|
|
351
|
+
// break;
|
|
352
|
+
// case 'delete':
|
|
353
|
+
// this.handlerRemoveTabItem(event.item);
|
|
354
|
+
// break;
|
|
355
|
+
// }
|
|
356
|
+
}
|
|
357
|
+
async addTabItem(item, selected = true, addFirst) {
|
|
358
|
+
const items = this.tabs().items;
|
|
359
|
+
items.update(items => {
|
|
360
|
+
if (addFirst) {
|
|
361
|
+
return [item, ...items];
|
|
362
|
+
}
|
|
363
|
+
return [...items, item];
|
|
364
|
+
});
|
|
365
|
+
if (selected) {
|
|
366
|
+
this.handlerClickItem({ stopPropagation: () => { return; } }, item);
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
async calculatorTabsItemDisplay() {
|
|
370
|
+
let items = this.tabs().items();
|
|
371
|
+
const indexItemSelected = items.findIndex(item => item()[this.fieldKey()] === this.keySelected());
|
|
372
|
+
if (indexItemSelected < 0) {
|
|
373
|
+
return;
|
|
374
|
+
}
|
|
375
|
+
this.displayMoreItem.set(false);
|
|
376
|
+
let displayMoreItem = false;
|
|
377
|
+
const headerWidth = this.headerEl().nativeElement.clientWidth || 0;
|
|
378
|
+
const itemSelected = items[indexItemSelected];
|
|
379
|
+
const itemSelectedWidth = itemSelected().specificWidth;
|
|
380
|
+
let totalWidthItemsDisplay = (this.headerLeftEl().nativeElement.clientWidth || 0) + (this.headerRightEl().nativeElement.clientWidth || 0) + 32;
|
|
381
|
+
items.forEach((item, index) => {
|
|
382
|
+
if (!item().specificWidth) {
|
|
383
|
+
return;
|
|
384
|
+
}
|
|
385
|
+
item.update(data => ({ ...data, specificDisplay: false }));
|
|
386
|
+
const itemWidth = item().specificWidth || 0;
|
|
387
|
+
const width = totalWidthItemsDisplay + itemWidth + (index < indexItemSelected ? itemSelectedWidth : 0);
|
|
388
|
+
totalWidthItemsDisplay += itemWidth;
|
|
389
|
+
if (width > headerWidth) {
|
|
390
|
+
displayMoreItem = true;
|
|
391
|
+
return;
|
|
392
|
+
}
|
|
393
|
+
item.update(data => ({ ...data, specificDisplay: true }));
|
|
394
|
+
});
|
|
395
|
+
itemSelected.update(data => ({ ...data, specificDisplay: true }));
|
|
396
|
+
const display = items.filter(item => item().specificDisplay);
|
|
397
|
+
const notDisplay = items.filter(item => !item().specificDisplay);
|
|
398
|
+
items = display.concat(notDisplay);
|
|
399
|
+
items.forEach((item, index) => item.update(data => ({ ...data, order: index })));
|
|
400
|
+
this.displayMoreItem.set(displayMoreItem);
|
|
401
|
+
this.outDisplayMoreItem.emit(this.displayMoreItem());
|
|
402
|
+
}
|
|
403
|
+
ngOnDestroy() {
|
|
404
|
+
this.onDestroy.next();
|
|
405
|
+
this.onDestroy.complete();
|
|
406
|
+
}
|
|
407
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
408
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTabsComponent, isStandalone: true, selector: "libs_ui-components-tabs", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, fieldKey: { classPropertyName: "fieldKey", publicName: "fieldKey", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, heightTabItem: { classPropertyName: "heightTabItem", publicName: "heightTabItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreCalculatorTab: { classPropertyName: "ignoreCalculatorTab", publicName: "ignoreCalculatorTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, hasAnimation: { classPropertyName: "hasAnimation", publicName: "hasAnimation", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, configCss: { classPropertyName: "configCss", publicName: "configCss", isSignal: true, isRequired: false, transformFunction: null }, popoverShowMoreTabItem: { classPropertyName: "popoverShowMoreTabItem", publicName: "popoverShowMoreTabItem", isSignal: true, isRequired: false, transformFunction: null }, checkCanChangeTabSelected: { classPropertyName: "checkCanChangeTabSelected", publicName: "checkCanChangeTabSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", configCss: "configCssChange", outKeySelected: "outKeySelected", outFunctionsControl: "outFunctionsControl", outDragTabChange: "outDragTabChange", outDisplayMoreItem: "outDisplayMoreItem" }, providers: [LibsUiTabsService], viewQueries: [{ propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }, { propertyName: "headerLeftEl", first: true, predicate: ["headerLeftEl"], descendants: true, isSignal: true }, { propertyName: "headerRightEl", first: true, predicate: ["headerRightEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-tab\">\n <div #headerEl\n class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div #headerLeftEl\n class='libs-ui-tab-header-left'>\n <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n </div>\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n <div class=\"!flex w-full\"\n #elementContainerEl\n LibsUiComponentsDragContainerDirective\n [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n [groupName]=\"groupName()\"\n [items]=\"itemsDisplayComputed()\"\n [directionDrag]=\"'horizontal'\"\n [disableDragContainer]=\"!hasAnimation()\"\n [acceptDragSameGroup]=\"hasAnimation()\"\n (outDroppedContainer)=\"handlerDropContainer($event)\">\n @for (item of itemsDisplayComputed(); track item) {\n <div LibsUiDragItemDirective\n [disable]=\"disable() || !hasAnimation()\"\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/(itemsDisplayComputed().length || 1)) : undefined\"\n [class.flex]=\"mode() === 'center-has-line'\"\n [class.items-center]=\"mode() === 'center-has-line'\">\n @if (hasAnimation() && !disable()) {\n <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[12px] left-[4px]\"></span>\n }\n <libs_ui-components-tabs-item class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index+1\"\n [disable]=\"disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [ignoreCalculatorTab]=\"true\"\n [changeViewTab]=\"changeViewTab\"\n (click)=\"handlerClickItem($event, item)\" />\n @if (mode() === 'center-has-line' && !$last) {\n <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n }\n </div>\n }\n </div>\n </div>\n <div class=\"flex items-center\"\n [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n @if (displayMoreItem()) {\n <libs_ui-components-popover class=\"w-full h-full flex items-center\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n width: popoverShowMoreTabItem()?.config?.width || 277, \n direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n template: popoverShowMoreTabItem()?.config?.template || menuEl,\n whiteTheme: true,\n ignoreArrow: true,\n position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 }\n }\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n <libs_ui-components-buttons-button [type]=\"'button-link-third'\"\n [classInclude]=\"'p-[8px]'\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n [popover]=\"{config: {content: popoverShowMoreTabItem()?.config?.content}}\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-popover>\n }\n </div>\n <div #headerRightEl\n class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n </div>\n </div>\n <div class=\"absolute top-0 z-0 w-full\">\n <div class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n @for (item of tabs().items(); track item) {\n <libs_ui-components-tabs-item class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index+1\"\n [disable]=\"disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [changeViewTab]=\"changeViewTab\"\n [ignoreCalculatorTab]=\"ignoreCalculatorTab()\"\n (click)=\"handlerClickItem($event, item)\" />\n }\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #menuEl>\n <libs_ui-components-list [config]=\"tabMoreListConfig()\"\n [maxItemShow]=\"5\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;flex-direction:column;width:100%;height:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: LibsUiComponentsDragContainerDirective, selector: "[LibsUiComponentsDragContainerDirective]", inputs: ["disableDragContainer", "mode", "directionDrag", "viewEncapsulation", "acceptDragSameGroup", "placeholder", "groupName", "dropToGroupName", "items", "stylesOverride"], outputs: ["itemsChange", "outDragStartContainer", "outDragOverContainer", "outDragLeaveContainer", "outDragEndContainer", "outDroppedContainer", "outDroppedContainerEmpty", "outFunctionControl"] }, { kind: "directive", type: LibsUiDragItemDirective, selector: "[LibsUiDragItemDirective]", inputs: ["fieldId", "item", "itemInContainerVirtualScroll", "throttleTimeHandlerDraggingEvent", "ignoreStopEvent", "onlyMouseDownStopEvent", "dragRootElement", "groupName", "dragBoundary", "dragBoundaryAcceptMouseLeaveContainer", "elementContainer", "zIndex", "disable"], outputs: ["outDragStart", "outDragOver", "outDragLeave", "outDragEnd", "outDropped"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsTabsItemComponent, selector: "libs_ui-components-tabs-item", inputs: ["ignoreCalculatorTab", "step", "mode", "tabs", "item", "keySelected", "fieldLabel", "fieldKey", "cssDefault", "size", "disable", "disableLabel", "zIndex", "changeViewTab"], outputs: ["itemChange", "outSelectAction"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "itemChangeUnSelect", "paddingLeftItem", "config", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "data", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionCustomAddDataToStore", "functionGetItemAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
409
|
+
}
|
|
410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTabsComponent, decorators: [{
|
|
411
|
+
type: Component,
|
|
412
|
+
args: [{ selector: 'libs_ui-components-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
413
|
+
LibsUiComponentsDragContainerDirective,
|
|
414
|
+
LibsUiDragItemDirective,
|
|
415
|
+
LibsUiComponentsPopoverComponent,
|
|
416
|
+
LibsUiComponentsButtonsButtonComponent,
|
|
417
|
+
LibsUiComponentsTabsItemComponent,
|
|
418
|
+
LibsUiComponentsListComponent
|
|
419
|
+
], providers: [LibsUiTabsService], template: "<div class=\"libs-ui-tab\">\n <div #headerEl\n class=\"libs-ui-tab-header z-[1] {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div #headerLeftEl\n class='libs-ui-tab-header-left'>\n <ng-content select=\"div.libs-ui-tab-header-left\"></ng-content>\n </div>\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n <div class=\"!flex w-full\"\n #elementContainerEl\n LibsUiComponentsDragContainerDirective\n [stylesOverride]=\"stylesDragDropOverrideComputed()\"\n [groupName]=\"groupName()\"\n [items]=\"itemsDisplayComputed()\"\n [directionDrag]=\"'horizontal'\"\n [disableDragContainer]=\"!hasAnimation()\"\n [acceptDragSameGroup]=\"hasAnimation()\"\n (outDroppedContainer)=\"handlerDropContainer($event)\">\n @for (item of itemsDisplayComputed(); track item) {\n <div LibsUiDragItemDirective\n [disable]=\"disable() || !hasAnimation()\"\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/(itemsDisplayComputed().length || 1)) : undefined\"\n [class.flex]=\"mode() === 'center-has-line'\"\n [class.items-center]=\"mode() === 'center-has-line'\">\n @if (hasAnimation() && !disable()) {\n <span class=\"libs-ui-icon-arrange text-[#9ca2ad] absolute top-[12px] left-[4px]\"></span>\n }\n <libs_ui-components-tabs-item class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index+1\"\n [disable]=\"disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [ignoreCalculatorTab]=\"true\"\n [changeViewTab]=\"changeViewTab\"\n (click)=\"handlerClickItem($event, item)\" />\n @if (mode() === 'center-has-line' && !$last) {\n <div class=\"w-[40px] h-[1px] bg-[#e6e7ea]\"></div>\n }\n </div>\n }\n </div>\n </div>\n <div class=\"flex items-center\"\n [class.ml-auto]=\"displayMoreItem() && !tabs().viewMoreIgnoreMarginLeft\">\n @if (displayMoreItem()) {\n <libs_ui-components-popover class=\"w-full h-full flex items-center\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n zIndex: popoverShowMoreTabItem()?.config?.zIndex || 1000,\n maxHeight: popoverShowMoreTabItem()?.config?.maxHeight || 287,\n maxWidth: popoverShowMoreTabItem()?.config?.maxWidth || 2048,\n width: popoverShowMoreTabItem()?.config?.width || 277, \n direction: popoverShowMoreTabItem()?.config?.direction || 'bottom',\n template: popoverShowMoreTabItem()?.config?.template || menuEl,\n whiteTheme: true,\n ignoreArrow: true,\n position: popoverShowMoreTabItem()?.config?.position || { mode: 'end', distance: 0 }\n }\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\">\n <libs_ui-components-buttons-button [type]=\"'button-link-third'\"\n [classInclude]=\"'p-[8px]'\"\n [classIconLeft]=\"'libs-ui-icon-more-vertical rotate-90 text-[16px] mr-0'\"\n [popover]=\"{config: {content: popoverShowMoreTabItem()?.config?.content}}\"\n [ignoreStopPropagationEvent]=\"true\" />\n </libs_ui-components-popover>\n }\n </div>\n <div #headerRightEl\n class=\"libs-ui-tab-header-right {{ tabs().classIncludeHeaderRight || '' }}\">\n <ng-content select=\"div.libs-ui-tab-header-right\"></ng-content>\n </div>\n </div>\n <div class=\"absolute top-0 z-0 w-full\">\n <div class=\"libs-ui-tab-header {{ configCss()?.header || '' }} {{ tabs().classIncludeHeader || '' }}\"\n [style.minHeight.px]=\"heightTabItem()\">\n <div class=\"libs-ui-tab-header-center {{ configCss()?.headerCenter || '' }} {{ tabs().classIncludeHeaderCenter || '' }}\">\n @for (item of tabs().items(); track item) {\n <libs_ui-components-tabs-item class=\"h-full w-full {{ tabs().classIncludeItem || '' }}\"\n [tabs]=\"tabs()\"\n [size]=\"size()\"\n [(item)]=\"item\"\n [step]=\"$index+1\"\n [disable]=\"disable()\"\n [disableLabel]=\"disableLabel()\"\n [keySelected]=\"keySelected()\"\n [fieldLabel]=\"fieldLabel()\"\n [fieldKey]=\"fieldKey()\"\n [cssDefault]=\"($first ? configCss()?.first : configCss()?.other) || ''\"\n [zIndex]=\"zIndex()\"\n [mode]=\"mode()\"\n [changeViewTab]=\"changeViewTab\"\n [ignoreCalculatorTab]=\"ignoreCalculatorTab()\"\n (click)=\"handlerClickItem($event, item)\" />\n }\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #menuEl>\n <libs_ui-components-list [config]=\"tabMoreListConfig()\"\n [maxItemShow]=\"5\"\n [paddingLeftItem]=\"true\"\n (outSelectKey)=\"handlerSelectedKey($event)\" />\n</ng-template>\n", styles: [".libs-ui-tab{position:relative;display:flex;flex-direction:column;width:100%;height:100%}.libs-ui-tab .libs-ui-tab-header{position:relative;background-color:#fff;display:flex;flex-wrap:nowrap;width:100%;overflow:hidden;flex-shrink:0}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-header-center{display:flex;flex-wrap:nowrap}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container .libs-ui-icon-arrange{display:none}.libs-ui-tab .libs-ui-tab-header .libs-ui-tab-item-container:hover .libs-ui-icon-arrange{display:block}.libs-ui-tab .libs-ui-tab-content-container{width:100%;height:100%}\n"] }]
|
|
420
|
+
}] });
|
|
421
|
+
|
|
422
|
+
/**
|
|
423
|
+
* Generated bundle index. Do not edit.
|
|
424
|
+
*/
|
|
425
|
+
|
|
426
|
+
export { LibsUiComponentsTabsComponent };
|
|
427
|
+
//# sourceMappingURL=libs-ui-components-tabs.mjs.map
|