@stemy/ngx-utils 19.5.7 → 19.5.9

package/fesm2022/stemy-ngx-utils.mjs

@@ -1,7 +1,7 @@
 import 'zone.js';
-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, forwardRef, ViewChild, Component, ContentChild, ViewEncapsulation, ContentChildren, APP_INITIALIZER, makeEnvironmentProviders, NgModule } from '@angular/core';
 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 * 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';
@@ -380,7 +380,6 @@ class ReflectUtils {
     }
 }
 
-const OPTIONS_TOKEN = new InjectionToken("custom-options-token");
 class CanvasColor {
     constructor(r, g, b, a = 255) {
         this.r = r;
@@ -389,21 +388,12 @@ class CanvasColor {
         this.a = a;
     }
 }
-const ICON_SERVICE = new InjectionToken("icon-service");
-const LANGUAGE_SERVICE = new InjectionToken("language-service");
-const AUTH_SERVICE = new InjectionToken("auth-service");
 // --- Storage Service ---
 var StorageMode;
 (function (StorageMode) {
     StorageMode[StorageMode["Local"] = 0] = "Local";
     StorageMode[StorageMode["Session"] = 1] = "Session";
 })(StorageMode || (StorageMode = {}));
-const TOASTER_SERVICE = new InjectionToken("toaster-service");
-const DIALOG_SERVICE = new InjectionToken("dialog-service");
-// --- Socket service ---
-const SOCKET_IO_PATH = new InjectionToken("socket-io-path");
-const PROMISE_SERVICE = new InjectionToken("promise-service");
-const WASI_IMPLEMENTATION = new InjectionToken("wasi-implementation");
 // --- Reflect utils ---
 function FactoryDependencies(...dependencies) {
     return function (target, method) {
@@ -482,17 +472,30 @@ class HttpPromise extends Promise {
         return this.then(null, onRejected);
     }
 }
-const EXPRESS_REQUEST = new InjectionToken("express-request");
-const API_SERVICE = new InjectionToken("api-service");
 // --- Resource if ---
 class ResourceIfContext {
 }
+class IConfiguration {
+}
+// --- Valued promise ---
+class ValuedPromise extends Promise {
+}
+
+const BUTTON_TYPE = new InjectionToken("button-component-type");
+const OPTIONS_TOKEN = new InjectionToken("custom-options-token");
+const ICON_SERVICE = new InjectionToken("icon-service");
+const LANGUAGE_SERVICE = new InjectionToken("language-service");
+const AUTH_SERVICE = new InjectionToken("auth-service");
+const TOASTER_SERVICE = new InjectionToken("toaster-service");
+const DIALOG_SERVICE = new InjectionToken("dialog-service");
+const SOCKET_IO_PATH = new InjectionToken("socket-io-path");
+const PROMISE_SERVICE = new InjectionToken("promise-service");
+const WASI_IMPLEMENTATION = new InjectionToken("wasi-implementation");
+const EXPRESS_REQUEST = new InjectionToken("express-request");
+const API_SERVICE = new InjectionToken("api-service");
 const DYNAMIC_ENTRY_COMPONENTS = new InjectionToken("dynamic-entry-components");
 const DYNAMIC_MODULE_INFO = new InjectionToken("dynamic-module-info");
-// --- ConfigService ---
 const APP_BASE_URL = new InjectionToken("app-base-url");
-class IConfiguration {
-}
 const CONFIG_SERVICE = new InjectionToken("config-service");
 const BASE_CONFIG = new InjectionToken("base-config");
 const SCRIPT_PARAMS = new InjectionToken("script-params");
@@ -500,9 +503,6 @@ const ROOT_ELEMENT = new InjectionToken("app-root-element");
 const RESIZE_DELAY = new InjectionToken("resize-event-delay");
 const RESIZE_STRATEGY = new InjectionToken("resize-event-strategy");
 const ERROR_HANDLER = new InjectionToken("error-handler-callback");
-// --- Valued promise ---
-class ValuedPromise extends Promise {
-}
 
 class AjaxRequestHandler {
     static { this.isOverridden = false; }
@@ -6408,6 +6408,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class BtnComponent {
+    constructor() {
+        this.label = input("");
+        this.tooltip = input("");
+        this.icon = input("");
+        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 {
+                label: this.label(),
+                tooltip: this.tooltip(),
+                icon: this.icon(),
+                disabled: this.disabled(),
+                style: this.style(),
+                size: this.size(),
+                state: this.state()
+            };
+        });
+    }
+    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 }); }
+}
+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"] }]
+        }] });
+
+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 }); }
+}
+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"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }] } });
+
 class ChipsComponent {
     constructor(cdr) {
         this.cdr = cdr;
@@ -6438,9 +6491,16 @@ class ChipsComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    writeValue(val) {
-        const values = Array.isArray(val) ? val : [val];
-        this.valueOptions = this.createValueOptions(values);
+    ngOnChanges(changes) {
+        if (changes.value) {
+            const value = changes.value.currentValue;
+            this.valueOptions = this.createValueOptions(Array.isArray(value) ? value : [value]);
+            this.value = this.updateValue();
+        }
+        this.filterOptions();
+    }
+    writeValue(value) {
+        this.valueOptions = this.createValueOptions(Array.isArray(value) ? value : [value]);
         this.value = this.updateValue();
         this.filterOptions();
         this.cdr.markForCheck();
@@ -6470,14 +6530,15 @@ class ChipsComponent {
         const container = this.chipContainer.nativeElement;
         const buttons = this.chipButtons.nativeElement;
         const style = getComputedStyle(buttons);
-        const vertical = parseFloat(style.top) * 2;
-        const horizontal = parseFloat(style.left) * 2;
+        const vertical = parseFloat(style.top);
+        const horizontal = parseFloat(style.gap);
         this.inputStyles = buttons.offsetWidth > container.offsetWidth * .7
             ? {
                 paddingTop: `${buttons.offsetHeight + vertical}px`,
+                paddingLeft: `0px`
             } : {
             paddingLeft: `${buttons.offsetWidth + horizontal}px`,
-            lineHeight: `${buttons.offsetHeight - vertical}px`
+            lineHeight: `${buttons.offsetHeight - vertical * 2}px`
         };
     }
     onInput(ev) {
@@ -6490,23 +6551,21 @@ class ChipsComponent {
                 if (ObjectUtils.isFunction(fn)) {
                     fn();
                 }
-                return;
+                return false;
             }
-            return;
+            return false;
         }
         if (ev.key == "Enter") {
-            this.enterOption(input.value);
-            return;
+            return this.enterOption(input.value);
         }
-        if (ev.key == "Backspace") {
-            if (!input.value && !changed && this.valueOptions.length > 0) {
-                this.makeUndo();
-                this.updateValues(this.valueOptions.slice(0, this.valueOptions.length - 1));
-                this.onTouched(this.value);
-                return;
-            }
+        if (ev.key == "Backspace" && !input.value && !changed && this.valueOptions.length > 0) {
+            this.makeUndo();
+            this.updateValues(this.valueOptions.slice(0, this.valueOptions.length - 1));
+            this.onTouched(this.value);
+            return false;
         }
         this.filterOptions();
+        return true;
     }
     onBlur(ev) {
         const input = ev.target;
@@ -6519,7 +6578,7 @@ class ChipsComponent {
             option = this.filteredOptions.find(o => o.label?.match(regex));
         }
         if (!option || (this.unique && this.valueOptions.findIndex(o => o.value === option.value) >= 0)) {
-            return;
+            return true;
         }
         this.makeUndo();
         this.updateValues(this.multiple ? this.valueOptions.concat(option) : [option]);
@@ -6529,6 +6588,7 @@ class ChipsComponent {
             input.value = "";
             setTimeout(input.focus.bind(input), 500);
         }
+        return false;
     }
     trackBy(index, option) {
         return `${option.value}-${option.label}`;
@@ -6549,9 +6609,8 @@ class ChipsComponent {
             label,
         };
     }
-    createValueOptions(value) {
-        const array = Array.isArray(value) ? value : [value];
-        const values = array.map(v => {
+    createValueOptions(values) {
+        values = values.filter(ObjectUtils.isDefined).map(v => {
             if (this.type == "number") {
                 v = String(v || "0").replace(/([^-\d|.,])/gi, "").replace(/\./gi, ",");
                 const value = Math.round((parseFloat(v.replace(/,/gi, ".")) || 0) / this.step) * this.step;
@@ -6566,9 +6625,10 @@ class ChipsComponent {
     }
     updateValue() {
         this.statuses = this.valueOptions.map(o => {
-            if (this.type == "number")
-                return "primary";
-            return String(o.value).length < this.minLength ? "danger" : "primary";
+            if (this.type == "number") {
+                return Number(o.value) < this.min ? "invalid" : "valid";
+            }
+            return String(o.value).length < this.minLength ? "invalid" : "valid";
         });
         return this.multiple
             ? this.valueOptions.map(o => o.value)
@@ -6589,19 +6649,15 @@ class ChipsComponent {
         this.filteredOptions = this.filteredOptions.filter(o => !values.includes(o.value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ChipsComponent, isStandalone: false, selector: "chips", inputs: { value: "value", multiple: "multiple", disabled: "disabled", type: "type", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", step: "step", placeholder: "placeholder", unique: "unique", options: "options" }, outputs: { valueChange: "valueChange" }, providers: [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ChipsComponent),
-                multi: true,
-            }], viewQueries: [{ propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true }, { propertyName: "chipButtons", first: true, predicate: ["chipButtons"], descendants: true }, { propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], ngImport: i0, template: "<div class=\"chips\" #chipContainer>\n    <div class=\"chip-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\"  (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chip-button btn btn-sm\" [ngClass]=\"'btn' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                <span *ngIf=\"item.props?.picture\" class=\"chip-picture\">\n                    <img [src]=\"item.props.picture | safe:'url'\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n                </span>\n                <span class=\"chip-label\">{{ item.label }} </span>\n                <span class=\"chip-remove\" (click)=\"removeItem($event, ix)\">x</span>\n            </a>\n        </ng-container>\n    </div>\n    <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'number'\">\n            <input type=\"number\"\n                   class=\"form-control\"\n                   [min]=\"min\"\n                   [max]=\"max\"\n                   [step]=\"step\"\n                   [disabled]=\"disabled\"\n                   [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n                   [ngStyle]=\"inputStyles\"\n                   (blur)=\"onBlur($event)\"\n                   (keyup)=\"onInput($event)\"\n                   [typeahead]=\"filteredOptions\"\n                   typeaheadOptionField=\"label\"\n                   #chipInput/>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <input type=\"text\"\n                   class=\"form-control\"\n                   [minLength]=\"minLength\"\n                   [maxLength]=\"maxLength\"\n                   [disabled]=\"disabled\"\n                   [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n                   [ngStyle]=\"inputStyles\"\n                   (blur)=\"onBlur($event)\"\n                   (keyup)=\"onInput($event)\"\n                   [typeahead]=\"filteredOptions\"\n                   typeaheadOptionField=\"label\"\n                   #chipInput/>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [".chips{position:relative}.chips .chip-buttons{position:absolute;top:4px;left:5px;max-width:calc(100% - 10px);display:flex;overflow:auto;border-radius:5px}.chips .chip-buttons .chip-button{margin-right:5px;margin-bottom:5px;text-transform:none}.chips .chip-buttons .chip-button .chip-picture{width:28px;height:28px;overflow:hidden;margin-right:5px}.chips .chip-buttons .chip-button .chip-picture img{max-height:100%}.chips .chip-buttons .chip-button .chip-label{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis}.chips .chip-buttons .chip-button .chip-remove{display:inline-block;background:#00000080;font-size:11px;padding:0 9px;margin-left:4px;border-radius:5px;margin-right:-4px}.select-option{display:flex;gap:8px;align-items:center;justify-content:center}.select-option .select-option-picture{width:32px;height:32px;overflow:hidden}.select-option .select-option-picture img{max-height:100%}.select-option .select-option-label{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ChipsComponent, isStandalone: false, selector: "chips", inputs: { value: "value", multiple: "multiple", disabled: "disabled", type: "type", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", step: "step", placeholder: "placeholder", unique: "unique", options: "options" }, outputs: { valueChange: "valueChange" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
+        ], viewQueries: [{ propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true }, { propertyName: "chipButtons", first: true, predicate: ["chipButtons"], descendants: true }, { propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chips\" [ngClass]=\"{disabled: disabled}\" #chipContainer>\n    <input class=\"chips-input\"\n           [type]=\"type == 'number' ? 'number': 'text'\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n           [ngStyle]=\"inputStyles\"\n           (blur)=\"onBlur($event)\"\n           (keyup)=\"onInput($event)\"\n           #chipInput/>\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                <span *ngIf=\"item.picture\" class=\"chip-picture\">\n                    <img [src]=\"item.picture | safe:'url'\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n                </span>\n                <span class=\"chips-label\">{{ item.label }} </span>\n                <span class=\"chips-remove\" (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></span>\n            </a>\n        </ng-container>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";.chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips.disabled{opacity:.75}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips .chips-picture{width:28px;height:28px;overflow:hidden;margin-right:5px}.chips .chips-picture img{max-height:100%}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips .chips-remove{position:relative;background:#0003;margin-right:calc(var(--chips-btn-gap) * -1);width:1.2rem;height:1.2rem;font-size:12px;cursor:pointer;border-radius:5px}.chips .chips-remove:after{content:\"\\2716\";position:absolute;top:50%;left:50%;translate:-50% -50%}.select-option{display:flex;gap:8px;align-items:center;justify-content:center}.select-option .select-option-picture{width:32px;height:32px;overflow:hidden}.select-option .select-option-picture img{max-height:100%}.select-option .select-option-label{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "chips", providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ChipsComponent),
-                            multi: true,
-                        }], template: "<div class=\"chips\" #chipContainer>\n    <div class=\"chip-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\"  (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chip-button btn btn-sm\" [ngClass]=\"'btn' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                <span *ngIf=\"item.props?.picture\" class=\"chip-picture\">\n                    <img [src]=\"item.props.picture | safe:'url'\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n                </span>\n                <span class=\"chip-label\">{{ item.label }} </span>\n                <span class=\"chip-remove\" (click)=\"removeItem($event, ix)\">x</span>\n            </a>\n        </ng-container>\n    </div>\n    <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'number'\">\n            <input type=\"number\"\n                   class=\"form-control\"\n                   [min]=\"min\"\n                   [max]=\"max\"\n                   [step]=\"step\"\n                   [disabled]=\"disabled\"\n                   [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n                   [ngStyle]=\"inputStyles\"\n                   (blur)=\"onBlur($event)\"\n                   (keyup)=\"onInput($event)\"\n                   [typeahead]=\"filteredOptions\"\n                   typeaheadOptionField=\"label\"\n                   #chipInput/>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n            <input type=\"text\"\n                   class=\"form-control\"\n                   [minLength]=\"minLength\"\n                   [maxLength]=\"maxLength\"\n                   [disabled]=\"disabled\"\n                   [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n                   [ngStyle]=\"inputStyles\"\n                   (blur)=\"onBlur($event)\"\n                   (keyup)=\"onInput($event)\"\n                   [typeahead]=\"filteredOptions\"\n                   typeaheadOptionField=\"label\"\n                   #chipInput/>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [".chips{position:relative}.chips .chip-buttons{position:absolute;top:4px;left:5px;max-width:calc(100% - 10px);display:flex;overflow:auto;border-radius:5px}.chips .chip-buttons .chip-button{margin-right:5px;margin-bottom:5px;text-transform:none}.chips .chip-buttons .chip-button .chip-picture{width:28px;height:28px;overflow:hidden;margin-right:5px}.chips .chip-buttons .chip-button .chip-picture img{max-height:100%}.chips .chip-buttons .chip-button .chip-label{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis}.chips .chip-buttons .chip-button .chip-remove{display:inline-block;background:#00000080;font-size:11px;padding:0 9px;margin-left:4px;border-radius:5px;margin-right:-4px}.select-option{display:flex;gap:8px;align-items:center;justify-content:center}.select-option .select-option-picture{width:32px;height:32px;overflow:hidden}.select-option .select-option-picture img{max-height:100%}.select-option .select-option-label{flex:1}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "chips", providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
+                    ], template: "<div class=\"chips\" [ngClass]=\"{disabled: disabled}\" #chipContainer>\n    <input class=\"chips-input\"\n           [type]=\"type == 'number' ? 'number': 'text'\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n           [ngStyle]=\"inputStyles\"\n           (blur)=\"onBlur($event)\"\n           (keyup)=\"onInput($event)\"\n           #chipInput/>\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                <span *ngIf=\"item.picture\" class=\"chip-picture\">\n                    <img [src]=\"item.picture | safe:'url'\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n                </span>\n                <span class=\"chips-label\">{{ item.label }} </span>\n                <span class=\"chips-remove\" (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></span>\n            </a>\n        </ng-container>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";.chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips.disabled{opacity:.75}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips .chips-picture{width:28px;height:28px;overflow:hidden;margin-right:5px}.chips .chips-picture img{max-height:100%}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips .chips-remove{position:relative;background:#0003;margin-right:calc(var(--chips-btn-gap) * -1);width:1.2rem;height:1.2rem;font-size:12px;cursor:pointer;border-radius:5px}.chips .chips-remove:after{content:\"\\2716\";position:absolute;top:50%;left:50%;translate:-50% -50%}.select-option{display:flex;gap:8px;align-items:center;justify-content:center}.select-option .select-option-picture{width:32px;height:32px;overflow:hidden}.select-option .select-option-picture img{max-height:100%}.select-option .select-option-label{flex:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], multiple: [{
@@ -6791,11 +6847,11 @@ class DropdownBoxComponent {
         this.makeAutoPlacementOpts();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropdownBoxComponent, isStandalone: false, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachTo: "attachTo", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachTo]=\"attachTo\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropdownBoxComponent, isStandalone: false, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachTo: "attachTo", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachTo]=\"attachTo\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownBoxComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dropdown-box", template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachTo]=\"attachTo\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dropdown-box", template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachTo]=\"attachTo\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { closeInside: [{
                 type: Input
             }], attachTo: [{
@@ -7684,6 +7740,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class TabsComponent {
+    constructor() {
+        this.value = model();
+        this.options = input([]);
+        this.style = input("primary");
+        this.size = input("normal");
+    }
+    select(option) {
+        this.value.set(option.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 }); }
+}
+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"] }]
+        }] });
+
 class UnorderedListComponent {
     constructor(cdr) {
         this.cdr = cdr;
@@ -8038,12 +8112,15 @@ const directives = [
 ];
 // --- Components ---
 const components = [
+    BtnComponent,
+    BtnDefaultComponent,
     ChipsComponent,
     DropListComponent,
     DropdownBoxComponent,
     DynamicTableComponent,
     FakeModuleComponent,
     PaginationMenuComponent,
+    TabsComponent,
     InteractiveCanvasComponent,
     InteractiveItemComponent,
     InteractiveCircleComponent,
@@ -8349,6 +8426,10 @@ class NgxUtilsModule {
                 provide: WASI_IMPLEMENTATION,
                 useExisting: (!config ? null : config.wasiImplementation) || Wasi
             },
+            {
+                provide: BUTTON_TYPE,
+                useValue: (!config ? null : config.buttonType) || BtnDefaultComponent
+            },
             {
                 provide: APP_BASE_URL,
                 useFactory: (!config ? null : config.baseUrl) || loadBaseUrl,
@@ -8421,8 +8502,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, ChipsComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, 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, ChipsComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, 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, 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.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxUtilsModule, providers: pipes, imports: [CommonModule,
             FormsModule, FormsModule] }); }
 }
@@ -8452,5 +8533,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, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, 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, 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_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 };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map