@stemy/ngx-utils 19.5.9 → 19.5.10

package/fesm2022/stemy-ngx-utils.mjs

@@ -1,7 +1,7 @@
 import 'zone.js';
 import 'reflect-metadata';
 import * as i0 from '@angular/core';
-import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, EventEmitter, isDevMode, ErrorHandler, createComponent, NgZone, Pipe, HostListener, HostBinding, Output, Input, Directive, ElementRef, input, inject, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, ContentChildren, model, APP_INITIALIZER, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, EventEmitter, isDevMode, ErrorHandler, createComponent, NgZone, Pipe, HostListener, HostBinding, Output, Input, Directive, ElementRef, input, inject, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, ContentChildren, model, contentChildren, Renderer2, APP_INITIALIZER, makeEnvironmentProviders, NgModule } from '@angular/core';
 import * as i2 from '@angular/router';
 import { ActivatedRouteSnapshot, Scroll, NavigationEnd, Router, DefaultUrlSerializer, UrlTree, UrlSegmentGroup, UrlSegment, UrlSerializer, ROUTES } from '@angular/router';
 import { BehaviorSubject, Observable, firstValueFrom, Subject, Subscription, from, TimeoutError, combineLatest, lastValueFrom } from 'rxjs';
@@ -481,6 +481,8 @@ class IConfiguration {
 class ValuedPromise extends Promise {
 }
 
+const ICON_TYPE = new InjectionToken("icon-component-type");
+const ICON_MAP = new InjectionToken("icon-map");
 const BUTTON_TYPE = new InjectionToken("button-component-type");
 const OPTIONS_TOKEN = new InjectionToken("custom-options-token");
 const ICON_SERVICE = new InjectionToken("icon-service");
@@ -3682,6 +3684,7 @@ class StaticLanguageService {
         this.replaceLanguages(this.languageList.concat(languages));
     }
     getTranslationSync(key, params = null) {
+        key = `${key ?? ""}`;
         if (!key)
             return "";
         try {
@@ -5550,13 +5553,13 @@ class IconDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ICON_SERVICE }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: IconDirective, isStandalone: false, selector: "[icon]", inputs: { icon: "icon", activeIcon: "activeIcon", active: "active" }, outputs: { activeChange: "activeChange" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this.isActive" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: IconDirective, isStandalone: false, selector: "i[icon],b[icon],p[icon],span[icon],a[icon],h1[icon],h2[icon],h3[icon],h4[icon]", inputs: { icon: "icon", activeIcon: "activeIcon", active: "active" }, outputs: { activeChange: "activeChange" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this.isActive" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: false,
-                    selector: "[icon]"
+                    selector: "i[icon],b[icon],p[icon],span[icon],a[icon],h1[icon],h2[icon],h3[icon],h4[icon]"
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
@@ -6312,6 +6315,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class TabsItemDirective {
+    constructor() {
+        this.value = input(null, { alias: "tabsItem" });
+        this.label = input("");
+        this.tooltip = input("");
+        this.icon = input("");
+        this.disabled = input(false);
+        this.element = inject(ElementRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabsItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: TabsItemDirective, isStandalone: false, selector: "[tabsItem]", inputs: { value: { classPropertyName: "value", publicName: "tabsItem", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabsItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: "[tabsItem]"
+                }]
+        }] });
+
 class UnorderedListItemDirective {
     get elem() {
         return this.elementRef.nativeElement;
@@ -6416,7 +6439,6 @@ class BtnComponent {
         this.disabled = input(false);
         this.style = input("primary");
         this.size = input("normal");
-        this.state = input("inactive");
         this.buttonType = inject(BUTTON_TYPE);
         this.buttonProps = computed(() => {
             return {
@@ -6425,26 +6447,45 @@ class BtnComponent {
                 icon: this.icon(),
                 disabled: this.disabled(),
                 style: this.style(),
-                size: this.size(),
-                state: this.state()
+                size: this.size()
             };
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: BtnComponent, isStandalone: false, selector: "btn", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"button-wrap\">\n    <ng-container [ngComponentOutlet]=\"buttonType\"\n                  [ngComponentOutletInputs]=\"buttonProps()\"></ng-container>\n</div>\n", styles: [".button-wrap{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: BtnComponent, isStandalone: false, selector: "btn", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container [ngComponentOutlet]=\"buttonType\"\n              [ngComponentOutletInputs]=\"buttonProps()\"></ng-container>\n", dependencies: [{ kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BtnComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "btn", template: "<div class=\"button-wrap\">\n    <ng-container [ngComponentOutlet]=\"buttonType\"\n                  [ngComponentOutletInputs]=\"buttonProps()\"></ng-container>\n</div>\n", styles: [".button-wrap{display:inline-block}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "btn", template: "<ng-container [ngComponentOutlet]=\"buttonType\"\n              [ngComponentOutletInputs]=\"buttonProps()\"></ng-container>\n" }]
+        }] });
+
+class IconComponent {
+    constructor() {
+        this.name = input("trash");
+        this.iconType = inject(ICON_TYPE);
+        this.iconMap = inject(ICON_MAP);
+        this.iconProps = computed(() => {
+            const name = this.name();
+            return {
+                name: this.iconMap[name] || name,
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: IconComponent, isStandalone: false, selector: "icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container [ngComponentOutlet]=\"iconType\"\n              [ngComponentOutletInputs]=\"iconProps()\"></ng-container>\n", dependencies: [{ kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "icon", template: "<ng-container [ngComponentOutlet]=\"iconType\"\n              [ngComponentOutletInputs]=\"iconProps()\"></ng-container>\n" }]
         }] });
 
 class BtnDefaultComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BtnDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BtnDefaultComponent, isStandalone: false, selector: "btn-default", inputs: { label: "label", tooltip: "tooltip", icon: "icon", disabled: "disabled", style: "style", size: "size", state: "state" }, ngImport: i0, template: "<div class=\"default-btn btn\"\n     [title]=\"!tooltip ? '' : tooltip | translate\"\n     [ngClass]=\"['btn-' + style, 'btn-' + size, 'btn-' + state]\">\n    <i [icon]=\"icon\" *ngIf=\"icon\"></i>\n    <span *ngIf=\"label\">{{ label | translate }}</span>\n</div>\n", styles: [".default-btn{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[icon]", inputs: ["icon", "activeIcon", "active"], outputs: ["activeChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BtnDefaultComponent, isStandalone: false, selector: "btn-default", inputs: { label: "label", tooltip: "tooltip", icon: "icon", disabled: "disabled", style: "style", size: "size" }, ngImport: i0, template: "<div class=\"default-btn btn\"\n     [title]=\"!tooltip ? '' : tooltip | translate\"\n     [ngClass]=\"['btn-' + style, 'btn-' + size]\">\n    <icon [name]=\"icon\" *ngIf=\"icon\"></icon>\n    <span *ngIf=\"label\">{{ label | translate }}</span>\n</div>\n", styles: [".default-btn{display:flex;gap:5px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BtnDefaultComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "btn-default", template: "<div class=\"default-btn btn\"\n     [title]=\"!tooltip ? '' : tooltip | translate\"\n     [ngClass]=\"['btn-' + style, 'btn-' + size, 'btn-' + state]\">\n    <i [icon]=\"icon\" *ngIf=\"icon\"></i>\n    <span *ngIf=\"label\">{{ label | translate }}</span>\n</div>\n", styles: [".default-btn{display:inline-block}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "btn-default", template: "<div class=\"default-btn btn\"\n     [title]=\"!tooltip ? '' : tooltip | translate\"\n     [ngClass]=\"['btn-' + style, 'btn-' + size]\">\n    <icon [name]=\"icon\" *ngIf=\"icon\"></icon>\n    <span *ngIf=\"label\">{{ label | translate }}</span>\n</div>\n", styles: [".default-btn{display:flex;gap:5px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
@@ -6457,8 +6498,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], size: [{
                 type: Input
-            }], state: [{
-                type: Input
             }] } });
 
 class ChipsComponent {
@@ -7255,6 +7294,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+class IconDefaultComponent {
+    constructor() {
+        this.name = "trash";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: IconDefaultComponent, isStandalone: false, selector: "icon-default", inputs: { name: "name" }, ngImport: i0, template: "<i class=\"fa-solid\" [ngClass]=\"'fa-' + name\"></i>\n", styles: [".fa-solid{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconDefaultComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "icon-default", template: "<i class=\"fa-solid\" [ngClass]=\"'fa-' + name\"></i>\n", styles: [".fa-solid{display:inline-block}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }] } });
+
 class InteractiveItemComponent {
     set x(value) {
         if (isNaN(value))
@@ -7746,16 +7799,44 @@ class TabsComponent {
         this.options = input([]);
         this.style = input("primary");
         this.size = input("normal");
+        this.tabItems = contentChildren(TabsItemDirective);
+        this.renderer = inject(Renderer2);
+        this.tabs = computed(() => {
+            const options = Array.from(this.options() || []);
+            const current = this.value();
+            this.tabItems().forEach(item => {
+                const value = item.value();
+                if (current === value) {
+                    this.renderer.removeClass(item.element.nativeElement, "hidden-tab");
+                }
+                else {
+                    this.renderer.addClass(item.element.nativeElement, "hidden-tab");
+                }
+                if (options.some(o => o.value === value))
+                    return;
+                options.push({
+                    value,
+                    label: item.label(),
+                    tooltip: item.tooltip(),
+                    icon: item.icon(),
+                    disabled: item.disabled(),
+                });
+            });
+            options.forEach(o => {
+                o.active = current === o.value;
+            });
+            return options;
+        });
     }
-    select(option) {
-        this.value.set(option.value);
+    select(value) {
+        this.value.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TabsComponent, isStandalone: false, selector: "tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"ui-tabs\">\n    @for (option of options(); track option.value) {\n        <btn [label]=\"option.label\"\n             [tooltip]=\"option.tooltip\"\n             [icon]=\"option.icon\"\n             [disabled]=\"option.disabled\"\n             [style]=\"style()\"\n             [size]=\"size()\"\n             [state]=\"option.value === value() ? 'active' : 'inactive'\"\n             (click)=\"select(option)\"></btn>\n    }\n</div>\n", styles: [".ui-tabs{display:flex}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[icon]", inputs: ["icon", "activeIcon", "active"], outputs: ["activeChange"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "style", "size", "state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TabsComponent, isStandalone: false, selector: "tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "tabItems", predicate: TabsItemDirective, isSignal: true }], ngImport: i0, template: "<ul class=\"ui-tabs\" [ngClass]=\"'style-' + style()\">\n    @for (option of tabs(); track option.value) {\n        <li [ngClass]=\"option.active ? 'active' : 'inactive'\">\n            <btn [label]=\"option.label\"\n                 [tooltip]=\"option.tooltip\"\n                 [icon]=\"option.icon\"\n                 [disabled]=\"option.disabled\"\n                 [style]=\"option.active ? style() : 'transparent'\"\n                 [size]=\"size()\"\n                 (click)=\"select(option.value)\"></btn>\n        </li>\n    }\n</ul>\n<ng-content></ng-content>\n", styles: [".ui-tabs{--tabs-bg: var(--primary-color, var(--bs-primary, #666666));--tabs-margin: 5px;--tabs-padding: 5px;display:flex;gap:5px;margin:0 0 var(--tabs-margin) 0;padding:var(--tabs-padding);position:relative;list-style-type:none}.ui-tabs:before{content:\"\";position:absolute;inset:0;background:var(--tabs-bg);opacity:.25;border-radius:5px;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.style-secondary{--tabs-bg: var(--secondary-color, var(--bs-secondary, #666666))}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "style", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "tabs", template: "<div class=\"ui-tabs\">\n    @for (option of options(); track option.value) {\n        <btn [label]=\"option.label\"\n             [tooltip]=\"option.tooltip\"\n             [icon]=\"option.icon\"\n             [disabled]=\"option.disabled\"\n             [style]=\"style()\"\n             [size]=\"size()\"\n             [state]=\"option.value === value() ? 'active' : 'inactive'\"\n             (click)=\"select(option)\"></btn>\n    }\n</div>\n", styles: [".ui-tabs{display:flex}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "tabs", template: "<ul class=\"ui-tabs\" [ngClass]=\"'style-' + style()\">\n    @for (option of tabs(); track option.value) {\n        <li [ngClass]=\"option.active ? 'active' : 'inactive'\">\n            <btn [label]=\"option.label\"\n                 [tooltip]=\"option.tooltip\"\n                 [icon]=\"option.icon\"\n                 [disabled]=\"option.disabled\"\n                 [style]=\"option.active ? style() : 'transparent'\"\n                 [size]=\"size()\"\n                 (click)=\"select(option.value)\"></btn>\n        </li>\n    }\n</ul>\n<ng-content></ng-content>\n", styles: [".ui-tabs{--tabs-bg: var(--primary-color, var(--bs-primary, #666666));--tabs-margin: 5px;--tabs-padding: 5px;display:flex;gap:5px;margin:0 0 var(--tabs-margin) 0;padding:var(--tabs-padding);position:relative;list-style-type:none}.ui-tabs:before{content:\"\";position:absolute;inset:0;background:var(--tabs-bg);opacity:.25;border-radius:5px;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.style-secondary{--tabs-bg: var(--secondary-color, var(--bs-secondary, #666666))}\n"] }]
         }] });
 
 class UnorderedListComponent {
@@ -8107,6 +8188,7 @@ const directives = [
     DropdownDirective,
     DropdownContentDirective,
     DropdownToggleDirective,
+    TabsItemDirective,
     UnorderedListItemDirective,
     UnorderedListTemplateDirective
 ];
@@ -8120,11 +8202,13 @@ const components = [
     DynamicTableComponent,
     FakeModuleComponent,
     PaginationMenuComponent,
-    TabsComponent,
+    IconComponent,
+    IconDefaultComponent,
     InteractiveCanvasComponent,
     InteractiveItemComponent,
     InteractiveCircleComponent,
     InteractiveRectComponent,
+    TabsComponent,
     UnorderedListComponent,
     UploadComponent
 ];
@@ -8426,6 +8510,14 @@ class NgxUtilsModule {
                 provide: WASI_IMPLEMENTATION,
                 useExisting: (!config ? null : config.wasiImplementation) || Wasi
             },
+            {
+                provide: ICON_TYPE,
+                useValue: (!config ? null : config.iconType) || IconDefaultComponent,
+            },
+            {
+                provide: ICON_MAP,
+                useValue: (!config ? null : config.iconMap) || {},
+            },
             {
                 provide: BUTTON_TYPE,
                 useValue: (!config ? null : config.buttonType) || BtnDefaultComponent
@@ -8502,8 +8594,8 @@ class NgxUtilsModule {
     constructor() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxUtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, TabsComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, UnorderedListComponent, UploadComponent], imports: [CommonModule,
-            FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, TabsComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, UnorderedListComponent, UploadComponent, FormsModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, TabsItemDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, IconComponent, IconDefaultComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, TabsComponent, UnorderedListComponent, UploadComponent], imports: [CommonModule,
+            FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, TabsItemDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, IconComponent, IconDefaultComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, TabsComponent, UnorderedListComponent, UploadComponent, FormsModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxUtilsModule, providers: pipes, imports: [CommonModule,
             FormsModule, FormsModule] }); }
 }
@@ -8533,5 +8625,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HttpPromise, ICON_SERVICE, IConfiguration, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TabsComponent, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, getComponentDef, hashCode, impatientPromise, parseSelector, provideEntryComponents, provideWithOptions, selectorMatchesList };
+export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HttpPromise, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, getComponentDef, hashCode, impatientPromise, parseSelector, provideEntryComponents, provideWithOptions, selectorMatchesList };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map