@libs-ui/components-buttons-tab 0.2.5

package/README.md

@@ -0,0 +1,3 @@
+# buttons-tab
+
+This library was generated with [Nx](https://nx.dev).

package/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export * from './tab.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy90YWIvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsaUJBQWlCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3RhYi5jb21wb25lbnQnO1xuIl19

package/esm2022/interfaces/tab.interface.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3RhYi9zcmMvaW50ZXJmYWNlcy90YWIuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUWVBFX0JBREdFX01PREUgfSBmcm9tIFwiQGxpYnMtdWkvY29tcG9uZW50cy1iYWRnZVwiO1xuXG5leHBvcnQgaW50ZXJmYWNlIElCdXR0b25UYWIge1xuICBrZXk6IHN0cmluZztcbiAgbGFiZWw6IHN0cmluZztcbiAgdHlwZTogVFlQRV9CVVRUT05fVEFCO1xuICBjb3VudD86IG51bWJlcjtcbiAgbW9kZUNvdW50PzogVFlQRV9CQURHRV9NT0RFO1xuICBtYXhDb3VudD86IG51bWJlcjtcbiAgY2xhc3M/OiBzdHJpbmc7XG4gIGNsYXNzTGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGU/OiBib29sZWFuO1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBkYXRhPzogYW55O1xufVxuXG5leHBvcnQgdHlwZSBUWVBFX0JVVFRPTl9UQUIgPSAnYmx1ZScgfCAnZ3JlZW4nIHwgJ3JlZCcgfCAnb3JhbmdlJyB8ICd5ZWxsb3cnIHwgJ2N5YW4nIHwgJ3B1cnBsZScgfCAnYnJvd24nIHwgJ290aGVyJyB8IHN0cmluZzsiXX0=

package/esm2022/libs-ui-components-buttons-tab.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWJ1dHRvbnMtdGFiLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2J1dHRvbnMvdGFiL3NyYy9saWJzLXVpLWNvbXBvbmVudHMtYnV0dG9ucy10YWIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

package/esm2022/tab.component.mjs

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
+import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+import { escapeHtml } from '@libs-ui/utils';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@ngx-translate/core";
+export class LibsUiComponentsButtonsTabComponent {
+    /* INPUT */
+    items = input.required({ transform: data => data.map(item => ({ ...item, label: escapeHtml(item.label) })) });
+    disable = input(false);
+    keySelected = model('');
+    /* OUTPUT */
+    outKeySelected = output();
+    /* FUNCTIONS */
+    async handlerSelectItem(event, item) {
+        event.stopPropagation();
+        if (this.disable() || item.disable) {
+            return;
+        }
+        this.keySelected.set(item.key);
+        this.outKeySelected.emit(this.keySelected());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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: ["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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-buttons-tab', standalone: true, imports: [
+                        TranslateModule,
+                        LibsUiComponentsPopoverComponent,
+                        LibsUiComponentsBadgeComponent
+                    ], 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"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3RhYi9zcmMvdGFiLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3RhYi9zcmMvdGFiLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekYsT0FBTyxFQUFFLDhCQUE4QixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDM0UsT0FBTyxFQUFFLGdDQUFnQyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDL0UsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzVDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBZ0J0RCxNQUFNLE9BQU8sbUNBQW1DO0lBRTlDLFdBQVc7SUFDRixLQUFLLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBdUMsRUFBRSxTQUFTLEVBQUUsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLEdBQUcsSUFBSSxFQUFFLEtBQUssRUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUNwSixPQUFPLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ2hDLFdBQVcsR0FBRyxLQUFLLENBQVMsRUFBRSxDQUFDLENBQUM7SUFFekMsWUFBWTtJQUNILGNBQWMsR0FBRyxNQUFNLEVBQVUsQ0FBQztJQUUzQyxlQUFlO0lBQ0wsS0FBSyxDQUFDLGlCQUFpQixDQUFDLEtBQWlCLEVBQUUsSUFBZ0I7UUFDbkUsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNuQyxPQUFPO1FBQ1QsQ0FBQztRQUNELElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUMvQixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztJQUMvQyxDQUFDO3dHQWxCVSxtQ0FBbUM7NEZBQW5DLG1DQUFtQyxzakJDcEJoRCw2akNBc0JBLHdoQkRSSSxlQUFlLDRGQUNmLGdDQUFnQywwZEFDaEMsOEJBQThCOzs0RkFJckIsbUNBQW1DO2tCQWIvQyxTQUFTOytCQUVFLGdDQUFnQyxjQUc5QixJQUFJLFdBQ1A7d0JBQ1AsZUFBZTt3QkFDZixnQ0FBZ0M7d0JBQ2hDLDhCQUE4QjtxQkFDL0IsbUJBQ2dCLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbnB1dCwgbW9kZWwsIG91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1iYWRnZSc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtcG9wb3Zlcic7XG5pbXBvcnQgeyBlc2NhcGVIdG1sIH0gZnJvbSAnQGxpYnMtdWkvdXRpbHMnO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQgeyBJQnV0dG9uVGFiIH0gZnJvbSAnLi9pbnRlcmZhY2VzL3RhYi5pbnRlcmZhY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy10YWInLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFiLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3RhYi5jb21wb25lbnQuc2NzcycsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBUcmFuc2xhdGVNb2R1bGUsXG4gICAgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnQsXG4gICAgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50XG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNCdXR0b25zVGFiQ29tcG9uZW50IHtcblxuICAvKiBJTlBVVCAqL1xuICByZWFkb25seSBpdGVtcyA9IGlucHV0LnJlcXVpcmVkPEFycmF5PElCdXR0b25UYWI+LCBBcnJheTxJQnV0dG9uVGFiPj4oeyB0cmFuc2Zvcm06IGRhdGEgPT4gZGF0YS5tYXAoaXRlbSA9PiAoeyAuLi5pdGVtLCBsYWJlbDogZXNjYXBlSHRtbChpdGVtLmxhYmVsKSB9KSkgfSk7XG4gIHJlYWRvbmx5IGRpc2FibGUgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IGtleVNlbGVjdGVkID0gbW9kZWw8c3RyaW5nPignJyk7XG5cbiAgLyogT1VUUFVUICovXG4gIHJlYWRvbmx5IG91dEtleVNlbGVjdGVkID0gb3V0cHV0PHN0cmluZz4oKTtcblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJTZWxlY3RJdGVtKGV2ZW50OiBNb3VzZUV2ZW50LCBpdGVtOiBJQnV0dG9uVGFiKSB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgaWYgKHRoaXMuZGlzYWJsZSgpIHx8IGl0ZW0uZGlzYWJsZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLmtleVNlbGVjdGVkLnNldChpdGVtLmtleSk7XG4gICAgdGhpcy5vdXRLZXlTZWxlY3RlZC5lbWl0KHRoaXMua2V5U2VsZWN0ZWQoKSk7XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cImZsZXhcIj5cbiAgQGZvciAoaXRlbSBvZiBpdGVtcygpOyB0cmFjayBpdGVtKSB7XG4gICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGxpYnMtdWktYnV0dG9uLXRhYiB7eyAnbGlicy11aS1idXR0b24tdGFiLScraXRlbS50eXBlIH19IHt7IGl0ZW0uY2xhc3MgfHwgJ3B4LVs4cHhdIG14LVs4cHhdIHB5LVs0cHhdJyB9fSB7eyAoZGlzYWJsZSgpIHx8IGl0ZW0uZGlzYWJsZSkgPyAncG9pbnRlci1ldmVudHMtbm9uZSBjdXJzb3ItZGVmYXVsdCcgOiAnY3Vyc29yLXBvaW50ZXInIH19XCJcbiAgICAgIFthdHRyLmFjdGl2ZV09XCJpdGVtLmtleSA9PT0ga2V5U2VsZWN0ZWQoKVwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlclNlbGVjdEl0ZW0oJGV2ZW50LCBpdGVtKVwiPlxuICAgICAgPHNwYW4gTGlic1VpQ29tcG9uZW50c1BvcG92ZXJEaXJlY3RpdmVcbiAgICAgICAgY2xhc3M9XCJ3LWZ1bGwgbGFiZWwge3sgaXRlbS5jbGFzc0xhYmVsIHx8ICdsaWJzLXVpLWZvbnQtaDZyJyB9fVwiXG4gICAgICAgIFtjbGFzcy5saWJzLXVpLWRpc2FibGVdPVwiZGlzYWJsZSgpIHx8IGl0ZW0uZGlzYWJsZVwiXG4gICAgICAgIFt0eXBlXT1cIid0ZXh0J1wiXG4gICAgICAgIFthdHRyLmFjdGl2ZV09XCJpdGVtLmtleSA9PT0ga2V5U2VsZWN0ZWQoKVwiXG4gICAgICAgIFtpZ25vcmVTdG9wUHJvcGFnYXRpb25FdmVudF09XCJ0cnVlXCJcbiAgICAgICAgW2lubmVySHRtbF09XCJpdGVtLmxhYmVsIHwgdHJhbnNsYXRlXCI+PC9zcGFuPlxuICAgICAgQGlmIChpdGVtLmNvdW50ICE9PSB1bmRlZmluZWQpIHtcbiAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1iYWRnZSBjbGFzcz1cImJhZGdlXCJcbiAgICAgICAgICBbbW9kZV09XCJpdGVtLm1vZGVDb3VudCB8fCAneCsnXCJcbiAgICAgICAgICBbY291bnRdPVwiaXRlbS5jb3VudFwiXG4gICAgICAgICAgW21heENvdW50XT1cIml0ZW0ubWF4Q291bnQgfHwgOTlcIlxuICAgICAgICAgIFtjbGFzc0NpcmNsZV09XCInY2lyY2xlLXRhYiBsaWJzLXVpLWZvbnQtaDZyJ1wiIC8+XG4gICAgICB9XG4gICAgPC9kaXY+XG4gIH1cbjwvZGl2PlxuIl19

package/fesm2022/libs-ui-components-buttons-tab.mjs

@@ -0,0 +1,42 @@
+import * as i0 from '@angular/core';
+import { input, model, output, Component, ChangeDetectionStrategy } from '@angular/core';
+import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+import { escapeHtml } from '@libs-ui/utils';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+class LibsUiComponentsButtonsTabComponent {
+    /* INPUT */
+    items = input.required({ transform: data => data.map(item => ({ ...item, label: escapeHtml(item.label) })) });
+    disable = input(false);
+    keySelected = model('');
+    /* OUTPUT */
+    outKeySelected = output();
+    /* FUNCTIONS */
+    async handlerSelectItem(event, item) {
+        event.stopPropagation();
+        if (this.disable() || item.disable) {
+            return;
+        }
+        this.keySelected.set(item.key);
+        this.outKeySelected.emit(this.keySelected());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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: ["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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-buttons-tab', standalone: true, imports: [
+                        TranslateModule,
+                        LibsUiComponentsPopoverComponent,
+                        LibsUiComponentsBadgeComponent
+                    ], 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"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsButtonsTabComponent };
+//# sourceMappingURL=libs-ui-components-buttons-tab.mjs.map

package/fesm2022/libs-ui-components-buttons-tab.mjs.map

@@ -0,0 +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;;AAGrC,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;;IAG/B,cAAc,GAAG,MAAM,EAAU;;AAGhC,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;;wGAjBnC,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,sjBCpBhD,6jCAsBA,EAAA,MAAA,EAAA,CAAA,ieAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDRI,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,0dAChC,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,6jCAAA,EAAA,MAAA,EAAA,CAAA,ieAAA,CAAA,EAAA;;;AElBjD;;AAEG;;;;"}

package/index.d.ts

@@ -0,0 +1 @@
+export * from './tab.component';

package/interfaces/tab.interface.d.ts

@@ -0,0 +1,14 @@
+import { TYPE_BADGE_MODE } from "@libs-ui/components-badge";
+export interface IButtonTab {
+    key: string;
+    label: string;
+    type: TYPE_BUTTON_TAB;
+    count?: number;
+    modeCount?: TYPE_BADGE_MODE;
+    maxCount?: number;
+    class?: string;
+    classLabel?: string;
+    disable?: boolean;
+    data?: any;
+}
+export type TYPE_BUTTON_TAB = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other' | string;

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@libs-ui/components-buttons-tab",
+  "version": "0.2.5",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/libs-ui-components-buttons-tab.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/libs-ui-components-buttons-tab.mjs",
+      "esm": "./esm2022/libs-ui-components-buttons-tab.mjs",
+      "default": "./fesm2022/libs-ui-components-buttons-tab.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/tab.component.d.ts

@@ -0,0 +1,11 @@
+import { IButtonTab } from './interfaces/tab.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsButtonsTabComponent {
+    readonly items: import("@angular/core").InputSignalWithTransform<IButtonTab[], IButtonTab[]>;
+    readonly disable: import("@angular/core").InputSignal<boolean>;
+    readonly keySelected: import("@angular/core").ModelSignal<string>;
+    readonly outKeySelected: import("@angular/core").OutputEmitterRef<string>;
+    protected handlerSelectItem(event: MouseEvent, item: IButtonTab): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsButtonsTabComponent, never>;
+    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>;
+}