@libs-ui/components-buttons-tab 0.2.89 → 0.2.91
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/esm2022/interfaces/tab.interface.mjs +1 -1
- package/esm2022/tab.component.mjs +33 -6
- package/fesm2022/libs-ui-components-buttons-tab.mjs +32 -5
- package/fesm2022/libs-ui-components-buttons-tab.mjs.map +1 -1
- package/interfaces/tab.interface.d.ts +5 -0
- package/package.json +1 -1
- package/tab.component.d.ts +6 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3RhYi9zcmMvaW50ZXJmYWNlcy90YWIuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUWVBFX0JBREdFX01PREUgfSBmcm9tIFwiQGxpYnMtdWkvY29tcG9uZW50cy1iYWRnZVwiO1xuXG5leHBvcnQgaW50ZXJmYWNlIElCdXR0b25UYWIge1xuICBrZXk6IHN0cmluZztcbiAgbGFiZWw6IHN0cmluZztcbiAgdHlwZTogVFlQRV9CVVRUT05fVEFCO1xuICBjb3VudD86IG51bWJlcjtcbiAgbW9kZUNvdW50PzogVFlQRV9CQURHRV9NT0RFO1xuICBtYXhDb3VudD86IG51bWJlcjtcbiAgY2xhc3M/OiBzdHJpbmc7XG4gIGNsYXNzTGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGU/
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3RhYi9zcmMvaW50ZXJmYWNlcy90YWIuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUWVBFX0JBREdFX01PREUgfSBmcm9tIFwiQGxpYnMtdWkvY29tcG9uZW50cy1iYWRnZVwiO1xuXG5leHBvcnQgaW50ZXJmYWNlIElCdXR0b25UYWIge1xuICBrZXk6IHN0cmluZztcbiAgbGFiZWw6IHN0cmluZztcbiAgdHlwZTogVFlQRV9CVVRUT05fVEFCO1xuICBjb3VudD86IG51bWJlcjtcbiAgbW9kZUNvdW50PzogVFlQRV9CQURHRV9NT0RFO1xuICBtYXhDb3VudD86IG51bWJlcjtcbiAgY2xhc3M/OiBzdHJpbmc7XG4gIGNsYXNzTGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGU/OiBib29sZWFuO1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBkYXRhPzogYW55O1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElPdGhlckNvbmZpZyB7XG4gIGNvbG9yOiBzdHJpbmc7XG4gIGJhY2tncm91bmQ/OiBzdHJpbmc7XG4gIGJhY2tncm91bmRfYmFkZ2U/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCB0eXBlIFRZUEVfQlVUVE9OX1RBQiA9ICdibHVlJyB8ICdncmVlbicgfCAncmVkJyB8ICdvcmFuZ2UnIHwgJ3llbGxvdycgfCAnY3lhbicgfCAncHVycGxlJyB8ICdicm93bicgfCAnb3RoZXInIHwgc3RyaW5nOyJdfQ==
|
|
@@ -1,17 +1,44 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, effect, input, model, output, viewChild } from '@angular/core';
|
|
2
2
|
import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
|
|
3
3
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
4
|
-
import { escapeHtml } from '@libs-ui/utils';
|
|
4
|
+
import { colorStepContrastFromOrigin, escapeHtml } from '@libs-ui/utils';
|
|
5
5
|
import { TranslateModule } from '@ngx-translate/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
import * as i1 from "@ngx-translate/core";
|
|
8
8
|
export class LibsUiComponentsButtonsTabComponent {
|
|
9
|
+
otherStyleClassButtonTabEl = document.createElement('style');
|
|
9
10
|
/* INPUT */
|
|
10
11
|
items = input.required({ transform: data => data.map(item => ({ ...item, label: escapeHtml(item.label) })) });
|
|
11
12
|
disable = input(false);
|
|
12
13
|
keySelected = model('');
|
|
14
|
+
otherConfig = input(); // required and only apply when type is other
|
|
13
15
|
/* OUTPUT */
|
|
14
16
|
outKeySelected = output();
|
|
17
|
+
/* VIEW CHILD */
|
|
18
|
+
buttonEl = viewChild('buttonEl');
|
|
19
|
+
constructor() {
|
|
20
|
+
effect(() => {
|
|
21
|
+
const config = this.otherConfig();
|
|
22
|
+
if (config) {
|
|
23
|
+
const background = config.background || colorStepContrastFromOrigin(config.color, 95)?.light;
|
|
24
|
+
const backgroundBadge = config.background_badge || colorStepContrastFromOrigin(config.color, 90)?.light;
|
|
25
|
+
const styles = `.libs-ui-button-tab-other[active="true"] {
|
|
26
|
+
background-color: ${background} !important;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.libs-ui-button-tab-other[active="true"] > .label {
|
|
30
|
+
color: ${config.color} !important;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.libs-ui-button-tab-other[active="true"] > .badge > .circle-tab {
|
|
34
|
+
color: ${config.color} !important;
|
|
35
|
+
background-color: ${backgroundBadge} !important;
|
|
36
|
+
}`;
|
|
37
|
+
this.otherStyleClassButtonTabEl.innerHTML = styles;
|
|
38
|
+
this.buttonEl()?.nativeElement.append(this.otherStyleClassButtonTabEl);
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}
|
|
15
42
|
/* FUNCTIONS */
|
|
16
43
|
async handlerSelectItem(event, item) {
|
|
17
44
|
event.stopPropagation();
|
|
@@ -22,7 +49,7 @@ export class LibsUiComponentsButtonsTabComponent {
|
|
|
22
49
|
this.outKeySelected.emit(this.keySelected());
|
|
23
50
|
}
|
|
24
51
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsButtonsTabComponent, isStandalone: true, selector: "libs_ui-components-buttons-tab", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", outKeySelected: "outKeySelected" }, ngImport: i0, template: "<div class=\"flex\">\n @for (item of items(); track item) {\n <div class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-'+item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ (disable() || item.disable) ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span LibsUiComponentsPopoverDirective\n class=\"w-full label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge class=\"badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'circle-tab libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#e6e7ea}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "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 });
|
|
52
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsButtonsTabComponent, isStandalone: true, selector: "libs_ui-components-buttons-tab", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, otherConfig: { classPropertyName: "otherConfig", publicName: "otherConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", outKeySelected: "outKeySelected" }, viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["buttonEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #buttonEl\n class=\"flex\">\n @for (item of items(); track item) {\n <div class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-'+item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ (disable() || item.disable) ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span LibsUiComponentsPopoverDirective\n class=\"w-full label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge class=\"badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'circle-tab libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#e6e7ea}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "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 });
|
|
26
53
|
}
|
|
27
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, decorators: [{
|
|
28
55
|
type: Component,
|
|
@@ -30,6 +57,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
30
57
|
TranslateModule,
|
|
31
58
|
LibsUiComponentsPopoverComponent,
|
|
32
59
|
LibsUiComponentsBadgeComponent
|
|
33
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\n @for (item of items(); track item) {\n <div class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-'+item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ (disable() || item.disable) ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span LibsUiComponentsPopoverDirective\n class=\"w-full label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge class=\"badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'circle-tab libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#e6e7ea}\n"] }]
|
|
34
|
-
}] });
|
|
35
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
60
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #buttonEl\n class=\"flex\">\n @for (item of items(); track item) {\n <div class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-'+item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ (disable() || item.disable) ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span LibsUiComponentsPopoverDirective\n class=\"w-full label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge class=\"badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'circle-tab libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#e6e7ea}\n"] }]
|
|
61
|
+
}], ctorParameters: () => [] });
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3RhYi9zcmMvdGFiLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3RhYi9zcmMvdGFiLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFjLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4SCxPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMzRSxPQUFPLEVBQUUsZ0NBQWdDLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRSxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7QUFnQnRELE1BQU0sT0FBTyxtQ0FBbUM7SUFFN0IsMEJBQTBCLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUU5RSxXQUFXO0lBQ0YsS0FBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQXVDLEVBQUUsU0FBUyxFQUFFLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxHQUFHLElBQUksRUFBRSxLQUFLLEVBQUUsVUFBVSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDcEosT0FBTyxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUNoQyxXQUFXLEdBQUcsS0FBSyxDQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQ2hDLFdBQVcsR0FBRyxLQUFLLEVBQWdCLENBQUMsQ0FBQyw2Q0FBNkM7SUFFM0YsWUFBWTtJQUNILGNBQWMsR0FBRyxNQUFNLEVBQVUsQ0FBQztJQUUzQyxnQkFBZ0I7SUFDQyxRQUFRLEdBQUcsU0FBUyxDQUFhLFVBQVUsQ0FBQyxDQUFDO0lBRTlEO1FBQ0UsTUFBTSxDQUFDLEdBQUcsRUFBRTtZQUNWLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUVsQyxJQUFJLE1BQU0sRUFBRSxDQUFDO2dCQUNYLE1BQU0sVUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVLElBQUksMkJBQTJCLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsRUFBRSxLQUFLLENBQUM7Z0JBQzdGLE1BQU0sZUFBZSxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsSUFBSSwyQkFBMkIsQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxFQUFFLEtBQUssQ0FBQztnQkFDeEcsTUFBTSxNQUFNLEdBQUc7a0NBQ1csVUFBVTs7Ozt1QkFJckIsTUFBTSxDQUFDLEtBQUs7Ozs7dUJBSVosTUFBTSxDQUFDLEtBQUs7a0NBQ0QsZUFBZTtjQUNuQyxDQUFDO2dCQUNQLElBQUksQ0FBQywwQkFBMEIsQ0FBQyxTQUFTLEdBQUcsTUFBTSxDQUFDO2dCQUNuRCxJQUFJLENBQUMsUUFBUSxFQUFFLEVBQUUsYUFBYSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsMEJBQTBCLENBQUMsQ0FBQztZQUN6RSxDQUFDO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsZUFBZTtJQUNMLEtBQUssQ0FBQyxpQkFBaUIsQ0FBQyxLQUFpQixFQUFFLElBQWdCO1FBQ25FLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDbkMsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDL0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDL0MsQ0FBQzt3R0FqRFUsbUNBQW1DOzRGQUFuQyxtQ0FBbUMsc3pCQ3BCaEQsMGtDQXVCQSx3aEJEVEksZUFBZSw0RkFDZixnQ0FBZ0MscWVBQ2hDLDhCQUE4Qjs7NEZBSXJCLG1DQUFtQztrQkFiL0MsU0FBUzsrQkFFRSxnQ0FBZ0MsY0FHOUIsSUFBSSxXQUNQO3dCQUNQLGVBQWU7d0JBQ2YsZ0NBQWdDO3dCQUNoQyw4QkFBOEI7cUJBQy9CLG1CQUNnQix1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgZWZmZWN0LCBFbGVtZW50UmVmLCBpbnB1dCwgbW9kZWwsIG91dHB1dCwgdmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzQmFkZ2VDb21wb25lbnQgfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLWJhZGdlJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1wb3BvdmVyJztcbmltcG9ydCB7IGNvbG9yU3RlcENvbnRyYXN0RnJvbU9yaWdpbiwgZXNjYXBlSHRtbCB9IGZyb20gJ0BsaWJzLXVpL3V0aWxzJztcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHsgSUJ1dHRvblRhYiwgSU90aGVyQ29uZmlnIH0gZnJvbSAnLi9pbnRlcmZhY2VzL3RhYi5pbnRlcmZhY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy10YWInLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFiLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3RhYi5jb21wb25lbnQuc2NzcycsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBUcmFuc2xhdGVNb2R1bGUsXG4gICAgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnQsXG4gICAgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50XG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNCdXR0b25zVGFiQ29tcG9uZW50IHtcblxuICBwcml2YXRlIHJlYWRvbmx5IG90aGVyU3R5bGVDbGFzc0J1dHRvblRhYkVsID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3R5bGUnKTtcblxuICAvKiBJTlBVVCAqL1xuICByZWFkb25seSBpdGVtcyA9IGlucHV0LnJlcXVpcmVkPEFycmF5PElCdXR0b25UYWI+LCBBcnJheTxJQnV0dG9uVGFiPj4oeyB0cmFuc2Zvcm06IGRhdGEgPT4gZGF0YS5tYXAoaXRlbSA9PiAoeyAuLi5pdGVtLCBsYWJlbDogZXNjYXBlSHRtbChpdGVtLmxhYmVsKSB9KSkgfSk7XG4gIHJlYWRvbmx5IGRpc2FibGUgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IGtleVNlbGVjdGVkID0gbW9kZWw8c3RyaW5nPignJyk7XG4gIHJlYWRvbmx5IG90aGVyQ29uZmlnID0gaW5wdXQ8SU90aGVyQ29uZmlnPigpOyAvLyByZXF1aXJlZCBhbmQgb25seSBhcHBseSB3aGVuIHR5cGUgaXMgb3RoZXJcblxuICAvKiBPVVRQVVQgKi9cbiAgcmVhZG9ubHkgb3V0S2V5U2VsZWN0ZWQgPSBvdXRwdXQ8c3RyaW5nPigpO1xuXG4gIC8qIFZJRVcgQ0hJTEQgKi9cbiAgcHJpdmF0ZSByZWFkb25seSBidXR0b25FbCA9IHZpZXdDaGlsZDxFbGVtZW50UmVmPignYnV0dG9uRWwnKTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgY29uc3QgY29uZmlnID0gdGhpcy5vdGhlckNvbmZpZygpO1xuXG4gICAgICBpZiAoY29uZmlnKSB7XG4gICAgICAgIGNvbnN0IGJhY2tncm91bmQgPSBjb25maWcuYmFja2dyb3VuZCB8fCBjb2xvclN0ZXBDb250cmFzdEZyb21PcmlnaW4oY29uZmlnLmNvbG9yLCA5NSk/LmxpZ2h0O1xuICAgICAgICBjb25zdCBiYWNrZ3JvdW5kQmFkZ2UgPSBjb25maWcuYmFja2dyb3VuZF9iYWRnZSB8fCBjb2xvclN0ZXBDb250cmFzdEZyb21PcmlnaW4oY29uZmlnLmNvbG9yLCA5MCk/LmxpZ2h0O1xuICAgICAgICBjb25zdCBzdHlsZXMgPSBgLmxpYnMtdWktYnV0dG9uLXRhYi1vdGhlclthY3RpdmU9XCJ0cnVlXCJdIHtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtiYWNrZ3JvdW5kfSAhaW1wb3J0YW50O1xuICAgICAgICAgICAgfVxuICAgICAgICAgIFxuICAgICAgICAgICAgLmxpYnMtdWktYnV0dG9uLXRhYi1vdGhlclthY3RpdmU9XCJ0cnVlXCJdID4gLmxhYmVsIHtcbiAgICAgICAgICAgICAgY29sb3I6ICR7Y29uZmlnLmNvbG9yfSAhaW1wb3J0YW50O1xuICAgICAgICAgICAgfVxuICAgICAgICAgIFxuICAgICAgICAgICAgLmxpYnMtdWktYnV0dG9uLXRhYi1vdGhlclthY3RpdmU9XCJ0cnVlXCJdID4gLmJhZGdlID4gLmNpcmNsZS10YWIge1xuICAgICAgICAgICAgICBjb2xvcjogJHtjb25maWcuY29sb3J9ICFpbXBvcnRhbnQ7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7YmFja2dyb3VuZEJhZGdlfSAhaW1wb3J0YW50O1xuICAgICAgICAgICAgfWA7XG4gICAgICAgIHRoaXMub3RoZXJTdHlsZUNsYXNzQnV0dG9uVGFiRWwuaW5uZXJIVE1MID0gc3R5bGVzO1xuICAgICAgICB0aGlzLmJ1dHRvbkVsKCk/Lm5hdGl2ZUVsZW1lbnQuYXBwZW5kKHRoaXMub3RoZXJTdHlsZUNsYXNzQnV0dG9uVGFiRWwpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgLyogRlVOQ1RJT05TICovXG4gIHByb3RlY3RlZCBhc3luYyBoYW5kbGVyU2VsZWN0SXRlbShldmVudDogTW91c2VFdmVudCwgaXRlbTogSUJ1dHRvblRhYikge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIGlmICh0aGlzLmRpc2FibGUoKSB8fCBpdGVtLmRpc2FibGUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5rZXlTZWxlY3RlZC5zZXQoaXRlbS5rZXkpO1xuICAgIHRoaXMub3V0S2V5U2VsZWN0ZWQuZW1pdCh0aGlzLmtleVNlbGVjdGVkKCkpO1xuICB9XG5cbn1cbiIsIjxkaXYgI2J1dHRvbkVsXG4gIGNsYXNzPVwiZmxleFwiPlxuICBAZm9yIChpdGVtIG9mIGl0ZW1zKCk7IHRyYWNrIGl0ZW0pIHtcbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgbGlicy11aS1idXR0b24tdGFiIHt7ICdsaWJzLXVpLWJ1dHRvbi10YWItJytpdGVtLnR5cGUgfX0ge3sgaXRlbS5jbGFzcyB8fCAncHgtWzhweF0gbXgtWzhweF0gcHktWzRweF0nIH19IHt7IChkaXNhYmxlKCkgfHwgaXRlbS5kaXNhYmxlKSA/ICdwb2ludGVyLWV2ZW50cy1ub25lIGN1cnNvci1kZWZhdWx0JyA6ICdjdXJzb3ItcG9pbnRlcicgfX1cIlxuICAgICAgW2F0dHIuYWN0aXZlXT1cIml0ZW0ua2V5ID09PSBrZXlTZWxlY3RlZCgpXCJcbiAgICAgIChjbGljayk9XCJoYW5kbGVyU2VsZWN0SXRlbSgkZXZlbnQsIGl0ZW0pXCI+XG4gICAgICA8c3BhbiBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckRpcmVjdGl2ZVxuICAgICAgICBjbGFzcz1cInctZnVsbCBsYWJlbCB7eyBpdGVtLmNsYXNzTGFiZWwgfHwgJ2xpYnMtdWktZm9udC1oNnInIH19XCJcbiAgICAgICAgW2NsYXNzLmxpYnMtdWktZGlzYWJsZV09XCJkaXNhYmxlKCkgfHwgaXRlbS5kaXNhYmxlXCJcbiAgICAgICAgW3R5cGVdPVwiJ3RleHQnXCJcbiAgICAgICAgW2F0dHIuYWN0aXZlXT1cIml0ZW0ua2V5ID09PSBrZXlTZWxlY3RlZCgpXCJcbiAgICAgICAgW2lnbm9yZVN0b3BQcm9wYWdhdGlvbkV2ZW50XT1cInRydWVcIlxuICAgICAgICBbaW5uZXJIdG1sXT1cIml0ZW0ubGFiZWwgfCB0cmFuc2xhdGVcIj48L3NwYW4+XG4gICAgICBAaWYgKGl0ZW0uY291bnQgIT09IHVuZGVmaW5lZCkge1xuICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJhZGdlIGNsYXNzPVwiYmFkZ2VcIlxuICAgICAgICAgIFttb2RlXT1cIml0ZW0ubW9kZUNvdW50IHx8ICd4KydcIlxuICAgICAgICAgIFtjb3VudF09XCJpdGVtLmNvdW50XCJcbiAgICAgICAgICBbbWF4Q291bnRdPVwiaXRlbS5tYXhDb3VudCB8fCA5OVwiXG4gICAgICAgICAgW2NsYXNzQ2lyY2xlXT1cIidjaXJjbGUtdGFiIGxpYnMtdWktZm9udC1oNnInXCIgLz5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgfVxuPC9kaXY+XG4iXX0=
|
|
@@ -1,18 +1,45 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, output, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
+
import { input, model, output, viewChild, effect, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
|
|
4
4
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
5
|
-
import { escapeHtml } from '@libs-ui/utils';
|
|
5
|
+
import { escapeHtml, colorStepContrastFromOrigin } from '@libs-ui/utils';
|
|
6
6
|
import * as i1 from '@ngx-translate/core';
|
|
7
7
|
import { TranslateModule } from '@ngx-translate/core';
|
|
8
8
|
|
|
9
9
|
class LibsUiComponentsButtonsTabComponent {
|
|
10
|
+
otherStyleClassButtonTabEl = document.createElement('style');
|
|
10
11
|
/* INPUT */
|
|
11
12
|
items = input.required({ transform: data => data.map(item => ({ ...item, label: escapeHtml(item.label) })) });
|
|
12
13
|
disable = input(false);
|
|
13
14
|
keySelected = model('');
|
|
15
|
+
otherConfig = input(); // required and only apply when type is other
|
|
14
16
|
/* OUTPUT */
|
|
15
17
|
outKeySelected = output();
|
|
18
|
+
/* VIEW CHILD */
|
|
19
|
+
buttonEl = viewChild('buttonEl');
|
|
20
|
+
constructor() {
|
|
21
|
+
effect(() => {
|
|
22
|
+
const config = this.otherConfig();
|
|
23
|
+
if (config) {
|
|
24
|
+
const background = config.background || colorStepContrastFromOrigin(config.color, 95)?.light;
|
|
25
|
+
const backgroundBadge = config.background_badge || colorStepContrastFromOrigin(config.color, 90)?.light;
|
|
26
|
+
const styles = `.libs-ui-button-tab-other[active="true"] {
|
|
27
|
+
background-color: ${background} !important;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.libs-ui-button-tab-other[active="true"] > .label {
|
|
31
|
+
color: ${config.color} !important;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.libs-ui-button-tab-other[active="true"] > .badge > .circle-tab {
|
|
35
|
+
color: ${config.color} !important;
|
|
36
|
+
background-color: ${backgroundBadge} !important;
|
|
37
|
+
}`;
|
|
38
|
+
this.otherStyleClassButtonTabEl.innerHTML = styles;
|
|
39
|
+
this.buttonEl()?.nativeElement.append(this.otherStyleClassButtonTabEl);
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
}
|
|
16
43
|
/* FUNCTIONS */
|
|
17
44
|
async handlerSelectItem(event, item) {
|
|
18
45
|
event.stopPropagation();
|
|
@@ -23,7 +50,7 @@ class LibsUiComponentsButtonsTabComponent {
|
|
|
23
50
|
this.outKeySelected.emit(this.keySelected());
|
|
24
51
|
}
|
|
25
52
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsButtonsTabComponent, isStandalone: true, selector: "libs_ui-components-buttons-tab", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", outKeySelected: "outKeySelected" }, ngImport: i0, template: "<div class=\"flex\">\n @for (item of items(); track item) {\n <div class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-'+item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ (disable() || item.disable) ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span LibsUiComponentsPopoverDirective\n class=\"w-full label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge class=\"badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'circle-tab libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#e6e7ea}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "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 });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsButtonsTabComponent, isStandalone: true, selector: "libs_ui-components-buttons-tab", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, otherConfig: { classPropertyName: "otherConfig", publicName: "otherConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", outKeySelected: "outKeySelected" }, viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["buttonEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #buttonEl\n class=\"flex\">\n @for (item of items(); track item) {\n <div class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-'+item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ (disable() || item.disable) ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span LibsUiComponentsPopoverDirective\n class=\"w-full label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge class=\"badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'circle-tab libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#e6e7ea}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "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 });
|
|
27
54
|
}
|
|
28
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, decorators: [{
|
|
29
56
|
type: Component,
|
|
@@ -31,8 +58,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
31
58
|
TranslateModule,
|
|
32
59
|
LibsUiComponentsPopoverComponent,
|
|
33
60
|
LibsUiComponentsBadgeComponent
|
|
34
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\n @for (item of items(); track item) {\n <div class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-'+item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ (disable() || item.disable) ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span LibsUiComponentsPopoverDirective\n class=\"w-full label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge class=\"badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'circle-tab libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#e6e7ea}\n"] }]
|
|
35
|
-
}] });
|
|
61
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #buttonEl\n class=\"flex\">\n @for (item of items(); track item) {\n <div class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-'+item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ (disable() || item.disable) ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span LibsUiComponentsPopoverDirective\n class=\"w-full label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge class=\"badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'circle-tab libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=badge]>[class*=circle-tab]{color:#6a7383;background-color:#e6e7ea}\n"] }]
|
|
62
|
+
}], ctorParameters: () => [] });
|
|
36
63
|
|
|
37
64
|
/**
|
|
38
65
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-buttons-tab.mjs","sources":["../../../../../../libs-ui/components/buttons/tab/src/tab.component.ts","../../../../../../libs-ui/components/buttons/tab/src/tab.component.html","../../../../../../libs-ui/components/buttons/tab/src/libs-ui-components-buttons-tab.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { escapeHtml } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IButtonTab } from './interfaces/tab.interface';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-tab',\n templateUrl: './tab.component.html',\n styleUrl: './tab.component.scss',\n standalone: true,\n imports: [\n TranslateModule,\n LibsUiComponentsPopoverComponent,\n LibsUiComponentsBadgeComponent\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LibsUiComponentsButtonsTabComponent {\n\n /* INPUT */\n readonly items = input.required<Array<IButtonTab>, Array<IButtonTab>>({ transform: data => data.map(item => ({ ...item, label: escapeHtml(item.label) })) });\n readonly disable = input<boolean>(false);\n readonly keySelected = model<string>('');\n\n /* OUTPUT */\n readonly outKeySelected = output<string>();\n\n /* FUNCTIONS */\n protected async handlerSelectItem(event: MouseEvent, item: IButtonTab) {\n event.stopPropagation();\n if (this.disable() || item.disable) {\n return;\n }\n this.keySelected.set(item.key);\n this.outKeySelected.emit(this.keySelected());\n }\n\n}\n","<div class=\"flex\">\n @for (item of items(); track item) {\n <div class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-'+item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ (disable() || item.disable) ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span LibsUiComponentsPopoverDirective\n class=\"w-full label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge class=\"badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'circle-tab libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;MAoBa,mCAAmC,CAAA;;
|
|
1
|
+
{"version":3,"file":"libs-ui-components-buttons-tab.mjs","sources":["../../../../../../libs-ui/components/buttons/tab/src/tab.component.ts","../../../../../../libs-ui/components/buttons/tab/src/tab.component.html","../../../../../../libs-ui/components/buttons/tab/src/libs-ui-components-buttons-tab.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, effect, ElementRef, input, model, output, viewChild } from '@angular/core';\nimport { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { colorStepContrastFromOrigin, escapeHtml } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IButtonTab, IOtherConfig } from './interfaces/tab.interface';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-tab',\n templateUrl: './tab.component.html',\n styleUrl: './tab.component.scss',\n standalone: true,\n imports: [\n TranslateModule,\n LibsUiComponentsPopoverComponent,\n LibsUiComponentsBadgeComponent\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LibsUiComponentsButtonsTabComponent {\n\n private readonly otherStyleClassButtonTabEl = document.createElement('style');\n\n /* INPUT */\n readonly items = input.required<Array<IButtonTab>, Array<IButtonTab>>({ transform: data => data.map(item => ({ ...item, label: escapeHtml(item.label) })) });\n readonly disable = input<boolean>(false);\n readonly keySelected = model<string>('');\n readonly otherConfig = input<IOtherConfig>(); // required and only apply when type is other\n\n /* OUTPUT */\n readonly outKeySelected = output<string>();\n\n /* VIEW CHILD */\n private readonly buttonEl = viewChild<ElementRef>('buttonEl');\n\n constructor() {\n effect(() => {\n const config = this.otherConfig();\n\n if (config) {\n const background = config.background || colorStepContrastFromOrigin(config.color, 95)?.light;\n const backgroundBadge = config.background_badge || colorStepContrastFromOrigin(config.color, 90)?.light;\n const styles = `.libs-ui-button-tab-other[active=\"true\"] {\n background-color: ${background} !important;\n }\n \n .libs-ui-button-tab-other[active=\"true\"] > .label {\n color: ${config.color} !important;\n }\n \n .libs-ui-button-tab-other[active=\"true\"] > .badge > .circle-tab {\n color: ${config.color} !important;\n background-color: ${backgroundBadge} !important;\n }`;\n this.otherStyleClassButtonTabEl.innerHTML = styles;\n this.buttonEl()?.nativeElement.append(this.otherStyleClassButtonTabEl);\n }\n });\n }\n\n /* FUNCTIONS */\n protected async handlerSelectItem(event: MouseEvent, item: IButtonTab) {\n event.stopPropagation();\n if (this.disable() || item.disable) {\n return;\n }\n this.keySelected.set(item.key);\n this.outKeySelected.emit(this.keySelected());\n }\n\n}\n","<div #buttonEl\n class=\"flex\">\n @for (item of items(); track item) {\n <div class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-'+item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ (disable() || item.disable) ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span LibsUiComponentsPopoverDirective\n class=\"w-full label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge class=\"badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'circle-tab libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;MAoBa,mCAAmC,CAAA;AAE7B,IAAA,0BAA0B,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;;AAGpE,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAuC,EAAE,SAAS,EAAE,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AACnJ,IAAA,OAAO,GAAG,KAAK,CAAU,KAAK,CAAC;AAC/B,IAAA,WAAW,GAAG,KAAK,CAAS,EAAE,CAAC;AAC/B,IAAA,WAAW,GAAG,KAAK,EAAgB,CAAC;;IAGpC,cAAc,GAAG,MAAM,EAAU;;AAGzB,IAAA,QAAQ,GAAG,SAAS,CAAa,UAAU,CAAC;AAE7D,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE;YAEjC,IAAI,MAAM,EAAE;AACV,gBAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,2BAA2B,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,KAAK;AAC5F,gBAAA,MAAM,eAAe,GAAG,MAAM,CAAC,gBAAgB,IAAI,2BAA2B,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,KAAK;AACvG,gBAAA,MAAM,MAAM,GAAG,CAAA;kCACW,UAAU,CAAA;;;;AAIrB,qBAAA,EAAA,MAAM,CAAC,KAAK,CAAA;;;;AAIZ,qBAAA,EAAA,MAAM,CAAC,KAAK,CAAA;kCACD,eAAe,CAAA;cACnC;AACN,gBAAA,IAAI,CAAC,0BAA0B,CAAC,SAAS,GAAG,MAAM;AAClD,gBAAA,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,0BAA0B,CAAC;;AAE1E,SAAC,CAAC;;;AAIM,IAAA,MAAM,iBAAiB,CAAC,KAAiB,EAAE,IAAgB,EAAA;QACnE,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE;YAClC;;QAEF,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;;wGAhDnC,mCAAmC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mCAAmC,szBCpBhD,0kCAuBA,EAAA,MAAA,EAAA,CAAA,ieAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDTI,eAAe,EACf,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,gCAAgC,qeAChC,8BAA8B,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,aAAA,EAAA,4BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAIrB,mCAAmC,EAAA,UAAA,EAAA,CAAA;kBAb/C,SAAS;+BAEE,gCAAgC,EAAA,UAAA,EAG9B,IAAI,EACP,OAAA,EAAA;wBACP,eAAe;wBACf,gCAAgC;wBAChC;qBACD,EACgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,0kCAAA,EAAA,MAAA,EAAA,CAAA,ieAAA,CAAA,EAAA;;;AElBjD;;AAEG;;;;"}
|
|
@@ -11,4 +11,9 @@ export interface IButtonTab {
|
|
|
11
11
|
disable?: boolean;
|
|
12
12
|
data?: any;
|
|
13
13
|
}
|
|
14
|
+
export interface IOtherConfig {
|
|
15
|
+
color: string;
|
|
16
|
+
background?: string;
|
|
17
|
+
background_badge?: string;
|
|
18
|
+
}
|
|
14
19
|
export type TYPE_BUTTON_TAB = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other' | string;
|
package/package.json
CHANGED
package/tab.component.d.ts
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import { IButtonTab } from './interfaces/tab.interface';
|
|
1
|
+
import { IButtonTab, IOtherConfig } from './interfaces/tab.interface';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export declare class LibsUiComponentsButtonsTabComponent {
|
|
4
|
+
private readonly otherStyleClassButtonTabEl;
|
|
4
5
|
readonly items: import("@angular/core").InputSignalWithTransform<IButtonTab[], IButtonTab[]>;
|
|
5
6
|
readonly disable: import("@angular/core").InputSignal<boolean>;
|
|
6
7
|
readonly keySelected: import("@angular/core").ModelSignal<string>;
|
|
8
|
+
readonly otherConfig: import("@angular/core").InputSignal<IOtherConfig | undefined>;
|
|
7
9
|
readonly outKeySelected: import("@angular/core").OutputEmitterRef<string>;
|
|
10
|
+
private readonly buttonEl;
|
|
11
|
+
constructor();
|
|
8
12
|
protected handlerSelectItem(event: MouseEvent, item: IButtonTab): Promise<void>;
|
|
9
13
|
static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsButtonsTabComponent, never>;
|
|
10
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsButtonsTabComponent, "libs_ui-components-buttons-tab", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "disable": { "alias": "disable"; "required": false; "isSignal": true; }; "keySelected": { "alias": "keySelected"; "required": false; "isSignal": true; }; }, { "keySelected": "keySelectedChange"; "outKeySelected": "outKeySelected"; }, never, never, true, never>;
|
|
14
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsButtonsTabComponent, "libs_ui-components-buttons-tab", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "disable": { "alias": "disable"; "required": false; "isSignal": true; }; "keySelected": { "alias": "keySelected"; "required": false; "isSignal": true; }; "otherConfig": { "alias": "otherConfig"; "required": false; "isSignal": true; }; }, { "keySelected": "keySelectedChange"; "outKeySelected": "outKeySelected"; }, never, never, true, never>;
|
|
11
15
|
}
|