@stemy/ngx-utils 19.8.10 → 19.8.12

package/fesm2022/stemy-ngx-utils.mjs

@@ -2717,6 +2717,22 @@ function injectOptions(defaults) {
     const options = inject(OPTIONS_TOKEN, { optional: true });
     return Object.assign({}, defaults, options || {});
 }
+/**
+ * Compares two arrays of entities and categorizes them into
+ * added, removed, and updated buckets.
+ */
+function diffEntities(current, incoming) {
+    const currentMap = new Map(current.map(item => [item.id, item]));
+    const incomingIds = new Set(incoming.map(item => item.id).filter(Boolean));
+    return {
+        // 1. Removed: Was in current, but ID is missing from incoming
+        removed: current.filter(item => !incomingIds.has(item.id)),
+        // 2. Added: ID is missing entirely (new record)
+        added: incoming.filter(item => !item.id),
+        // 3. Updated: ID exists in both lists
+        updated: incoming.filter(item => item.id && currentMap.has(item.id))
+    };
+}
 
 class TimerUtils {
     static createTimeout(func, time) {
@@ -2929,6 +2945,11 @@ class SetUtils {
             return;
         items.forEach(i => set.add(i));
     }
+    static merge(set, other) {
+        if (!ObjectUtils.isSet(set) || !ObjectUtils.isSet(other))
+            return;
+        other.forEach(i => set.add(i));
+    }
 }
 
 /**
@@ -7298,11 +7319,11 @@ class BtnComponent {
         return !(target instanceof HTMLElement) || this.element.nativeElement?.contains(target);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: BtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.19", 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 }, type: { classPropertyName: "type", publicName: "type", 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]=\"$any(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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.19", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container [ngComponentOutlet]=\"buttonType\"\r\n              [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\r\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.19", ngImport: i0, type: BtnComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "btn", template: "<ng-container [ngComponentOutlet]=\"buttonType\"\n              [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\n" }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "btn", template: "<ng-container [ngComponentOutlet]=\"buttonType\"\r\n              [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\r\n" }]
         }] });
 
 class IconComponent {
@@ -7318,11 +7339,11 @@ class IconComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.19", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.19", 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\"\r\n              [ngComponentOutletInputs]=\"iconProps()\"></ng-container>\r\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.19", 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" }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "icon", template: "<ng-container [ngComponentOutlet]=\"iconType\"\r\n              [ngComponentOutletInputs]=\"iconProps()\"></ng-container>\r\n" }]
         }] });
 
 class BtnDefaultComponent {
@@ -7330,11 +7351,11 @@ class BtnDefaultComponent {
         return this.size === "small" ? "btn-sm" : "btn-md";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: BtnDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: BtnDefaultComponent, isStandalone: false, selector: "btn-default", inputs: { label: "label", tooltip: "tooltip", icon: "icon", disabled: "disabled", type: "type", size: "size" }, ngImport: i0, template: "<button class=\"default-btn btn\"\n        type=\"button\"\n        async-method-target\n        [title]=\"!tooltip ? '' : tooltip | translate\"\n        [ngClass]=\"['btn-' + type, bsSize]\">\n    <icon [name]=\"icon\" *ngIf=\"icon\"></icon>\n    <span *ngIf=\"label\">{{ label | translate }}</span>\n</button>\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: "directive", type: AsyncMethodTargetDirective, selector: "[async-method-target]" }, { kind: "component", type: IconComponent, selector: "icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: BtnDefaultComponent, isStandalone: false, selector: "btn-default", inputs: { label: "label", tooltip: "tooltip", icon: "icon", disabled: "disabled", type: "type", size: "size" }, ngImport: i0, template: "<button class=\"default-btn btn\"\r\n        type=\"button\"\r\n        async-method-target\r\n        [title]=\"!tooltip ? '' : tooltip | translate\"\r\n        [ngClass]=\"['btn-' + type, bsSize]\">\r\n    <icon [name]=\"icon\" *ngIf=\"icon\"></icon>\r\n    <span *ngIf=\"label\">{{ label | translate }}</span>\r\n</button>\r\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: "directive", type: AsyncMethodTargetDirective, selector: "[async-method-target]" }, { 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.19", ngImport: i0, type: BtnDefaultComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "btn-default", template: "<button class=\"default-btn btn\"\n        type=\"button\"\n        async-method-target\n        [title]=\"!tooltip ? '' : tooltip | translate\"\n        [ngClass]=\"['btn-' + type, bsSize]\">\n    <icon [name]=\"icon\" *ngIf=\"icon\"></icon>\n    <span *ngIf=\"label\">{{ label | translate }}</span>\n</button>\n", styles: [".default-btn{display:flex;gap:5px}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "btn-default", template: "<button class=\"default-btn btn\"\r\n        type=\"button\"\r\n        async-method-target\r\n        [title]=\"!tooltip ? '' : tooltip | translate\"\r\n        [ngClass]=\"['btn-' + type, bsSize]\">\r\n    <icon [name]=\"icon\" *ngIf=\"icon\"></icon>\r\n    <span *ngIf=\"label\">{{ label | translate }}</span>\r\n</button>\r\n", styles: [".default-btn{display:flex;gap:5px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
@@ -7562,13 +7583,13 @@ class ChipsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ChipsComponent, isStandalone: false, selector: "chips", inputs: { testId: "testId", value: "value", multiple: "multiple", disabled: "disabled", type: "type", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", step: "step", placeholder: "placeholder", unique: "unique", strict: "strict", options: "options" }, outputs: { valueChange: "valueChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
-        ], viewQueries: [{ propertyName: "chipDropdown", first: true, predicate: ["chipDropdown"], descendants: true }, { propertyName: "chipButtons", first: true, predicate: ["chipButtons"], descendants: true }, { propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd\n     attachTo=\"root\"\n     [closeInside]=\"false\"\n     [autoPlacement]=\"autoPlacement\"\n     [ngClass]=\"{disabled: disabled}\" class=\"chips\" #chipDropdown=\"dropdown\">\n    <input class=\"chips-input\"\n           dropdownToggle\n           [switch]=\"false\"\n           [attr.data-testid]=\"testId + '-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                @if (item.picture) {\n                    <img [src]=\"item.picture | safe:'url'\"\n                         class=\"chip-picture\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n\n                }\n                <span class=\"chips-label\"\n                      [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\n                <close-btn class=\"chips-remove\"\n                           [attr.data-testid]=\"testId + '-delete-' + ix\"\n                           (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\n            </a>\n        </ng-container>\n    </div>\n    @if (options) {\n        <div class=\"chips-dropdown\" *dropdownContent>\n            <button [ngClass]=\"option.classes\"\n                    [disabled]=\"option.disabled\"\n                    (click)=\"enterOption(option.value)\"\n                    *ngFor=\"let option of filteredOptions\">\n                <div class=\"select-option\">\n                    @if (option?.picture) {\n                        <img [src]=\"option.picture | safe:'url'\"\n                             class=\"select-option-picture\"\n                             referrerpolicy=\"no-referrer\" [attr.alt]=\"option.label\">\n                    }\n                    <div class=\"select-option-label\">\n                        {{ option.label }}\n                    </div>\n                </div>\n            </button>\n        </div>\n    }\n</div>\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--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 .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-gap) 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;text-decoration:none}.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 img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\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: 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"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "chipDropdown", first: true, predicate: ["chipDropdown"], descendants: true }, { propertyName: "chipButtons", first: true, predicate: ["chipButtons"], descendants: true }, { propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd\r\n     attachTo=\"root\"\r\n     [closeInside]=\"false\"\r\n     [autoPlacement]=\"autoPlacement\"\r\n     [ngClass]=\"{disabled: disabled}\" class=\"chips\" #chipDropdown=\"dropdown\">\r\n    <input class=\"chips-input\"\r\n           dropdownToggle\r\n           [switch]=\"false\"\r\n           [attr.data-testid]=\"testId + '-input'\"\r\n           [type]=\"type == 'number' ? 'number': 'text'\"\r\n           [min]=\"min\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\r\n           [ngStyle]=\"inputStyles\"\r\n           (blur)=\"onBlur($event)\"\r\n           (keyup)=\"onInput($event)\"\r\n           #chipInput/>\r\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\r\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\r\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\r\n                @if (item.picture) {\r\n                    <img [src]=\"item.picture | safe:'url'\"\r\n                         class=\"chip-picture\"\r\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\r\n\r\n                }\r\n                <span class=\"chips-label\"\r\n                      [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\r\n                <close-btn class=\"chips-remove\"\r\n                           [attr.data-testid]=\"testId + '-delete-' + ix\"\r\n                           (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\r\n            </a>\r\n        </ng-container>\r\n    </div>\r\n    @if (options) {\r\n        <div class=\"chips-dropdown\" *dropdownContent>\r\n            <button [ngClass]=\"option.classes\"\r\n                    [disabled]=\"option.disabled\"\r\n                    (click)=\"enterOption(option.value)\"\r\n                    *ngFor=\"let option of filteredOptions\">\r\n                <div class=\"select-option\">\r\n                    @if (option?.picture) {\r\n                        <img [src]=\"option.picture | safe:'url'\"\r\n                             class=\"select-option-picture\"\r\n                             referrerpolicy=\"no-referrer\" [attr.alt]=\"option.label\">\r\n                    }\r\n                    <div class=\"select-option-label\">\r\n                        {{ option.label }}\r\n                    </div>\r\n                </div>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--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 .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-gap) 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;text-decoration:none}.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 img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\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: 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"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { 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.19", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "chips", providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
-                    ], template: "<div dd\n     attachTo=\"root\"\n     [closeInside]=\"false\"\n     [autoPlacement]=\"autoPlacement\"\n     [ngClass]=\"{disabled: disabled}\" class=\"chips\" #chipDropdown=\"dropdown\">\n    <input class=\"chips-input\"\n           dropdownToggle\n           [switch]=\"false\"\n           [attr.data-testid]=\"testId + '-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                @if (item.picture) {\n                    <img [src]=\"item.picture | safe:'url'\"\n                         class=\"chip-picture\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n\n                }\n                <span class=\"chips-label\"\n                      [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\n                <close-btn class=\"chips-remove\"\n                           [attr.data-testid]=\"testId + '-delete-' + ix\"\n                           (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\n            </a>\n        </ng-container>\n    </div>\n    @if (options) {\n        <div class=\"chips-dropdown\" *dropdownContent>\n            <button [ngClass]=\"option.classes\"\n                    [disabled]=\"option.disabled\"\n                    (click)=\"enterOption(option.value)\"\n                    *ngFor=\"let option of filteredOptions\">\n                <div class=\"select-option\">\n                    @if (option?.picture) {\n                        <img [src]=\"option.picture | safe:'url'\"\n                             class=\"select-option-picture\"\n                             referrerpolicy=\"no-referrer\" [attr.alt]=\"option.label\">\n                    }\n                    <div class=\"select-option-label\">\n                        {{ option.label }}\n                    </div>\n                </div>\n            </button>\n        </div>\n    }\n</div>\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--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 .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-gap) 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;text-decoration:none}.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 img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\n"] }]
+                    ], template: "<div dd\r\n     attachTo=\"root\"\r\n     [closeInside]=\"false\"\r\n     [autoPlacement]=\"autoPlacement\"\r\n     [ngClass]=\"{disabled: disabled}\" class=\"chips\" #chipDropdown=\"dropdown\">\r\n    <input class=\"chips-input\"\r\n           dropdownToggle\r\n           [switch]=\"false\"\r\n           [attr.data-testid]=\"testId + '-input'\"\r\n           [type]=\"type == 'number' ? 'number': 'text'\"\r\n           [min]=\"min\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\r\n           [ngStyle]=\"inputStyles\"\r\n           (blur)=\"onBlur($event)\"\r\n           (keyup)=\"onInput($event)\"\r\n           #chipInput/>\r\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\r\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\r\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\r\n                @if (item.picture) {\r\n                    <img [src]=\"item.picture | safe:'url'\"\r\n                         class=\"chip-picture\"\r\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\r\n\r\n                }\r\n                <span class=\"chips-label\"\r\n                      [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\r\n                <close-btn class=\"chips-remove\"\r\n                           [attr.data-testid]=\"testId + '-delete-' + ix\"\r\n                           (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\r\n            </a>\r\n        </ng-container>\r\n    </div>\r\n    @if (options) {\r\n        <div class=\"chips-dropdown\" *dropdownContent>\r\n            <button [ngClass]=\"option.classes\"\r\n                    [disabled]=\"option.disabled\"\r\n                    (click)=\"enterOption(option.value)\"\r\n                    *ngFor=\"let option of filteredOptions\">\r\n                <div class=\"select-option\">\r\n                    @if (option?.picture) {\r\n                        <img [src]=\"option.picture | safe:'url'\"\r\n                             class=\"select-option-picture\"\r\n                             referrerpolicy=\"no-referrer\" [attr.alt]=\"option.label\">\r\n                    }\r\n                    <div class=\"select-option-label\">\r\n                        {{ option.label }}\r\n                    </div>\r\n                </div>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--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 .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-gap) 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;text-decoration:none}.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 img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { testId: [{
                 type: Input
             }], value: [{
@@ -7702,7 +7723,7 @@ class DropListComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropListComponent),
                 multi: true,
-            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultTemplate let-item=\"item\">\n    <div class=\"drop-list-item-label\">\n        {{ item | getValue:labelField }}\n    </div>\n</ng-template>\n<div class=\"drop-list\"\n     #list\n     (dragenter)=\"onDragEnter($event, list, this)\"\n     (dragleave)=\"onDragLeave($event, list)\"\n     (drop)=\"onDrop($event, list)\">\n    <div class=\"drop-list-message\"\n         [ngClass]=\"{'has-value': value?.length}\"\n         [innerHTML]=\"message | translate | safe:'html'\"\n         *ngIf=\"message\">\n    </div>\n    <ng-container *ngFor=\"let id of value; let ix = index\">\n        <div class=\"drop-list-item\">\n            <ng-template #noItemTemplate>\n                <div class=\"drop-list-item-label just-id\">\n                    {{ id }}\n                </div>\n            </ng-template>\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n            <a class=\"remove-item-btn\" (click)=\"remove(ix)\"></a>\n        </div>\n    </ng-container>\n</div>\n", styles: [".drop-list{--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--btn-distance: 4px;--remove-spacing: 8px;--btn-top-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;position:relative;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list .drop-list-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.drop-list .drop-list-message.has-value{display:none}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}.drop-list.drop-allowed{background-color:#0003;border-color:gray}.drop-list.drop-allowed .drop-list-message{color:var(--message-drop-color)}.drop-list a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.drop-list a.remove-item-btn:before,.drop-list a.remove-item-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--remove-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--remove-color);transition:.2s ease}.drop-list a.remove-item-btn:after{--rotation: -45deg}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultTemplate let-item=\"item\">\r\n    <div class=\"drop-list-item-label\">\r\n        {{ item | getValue:labelField }}\r\n    </div>\r\n</ng-template>\r\n<div class=\"drop-list\"\r\n     #list\r\n     (dragenter)=\"onDragEnter($event, list, this)\"\r\n     (dragleave)=\"onDragLeave($event, list)\"\r\n     (drop)=\"onDrop($event, list)\">\r\n    <div class=\"drop-list-message\"\r\n         [ngClass]=\"{'has-value': value?.length}\"\r\n         [innerHTML]=\"message | translate | safe:'html'\"\r\n         *ngIf=\"message\">\r\n    </div>\r\n    <ng-container *ngFor=\"let id of value; let ix = index\">\r\n        <div class=\"drop-list-item\">\r\n            <ng-template #noItemTemplate>\r\n                <div class=\"drop-list-item-label just-id\">\r\n                    {{ id }}\r\n                </div>\r\n            </ng-template>\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\r\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\r\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\r\n            <a class=\"remove-item-btn\" (click)=\"remove(ix)\"></a>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n", styles: [".drop-list{--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--btn-distance: 4px;--remove-spacing: 8px;--btn-top-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;position:relative;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list .drop-list-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.drop-list .drop-list-message.has-value{display:none}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}.drop-list.drop-allowed{background-color:#0003;border-color:gray}.drop-list.drop-allowed .drop-list-message{color:var(--message-drop-color)}.drop-list a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.drop-list a.remove-item-btn:before,.drop-list a.remove-item-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--remove-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--remove-color);transition:.2s ease}.drop-list a.remove-item-btn:after{--rotation: -45deg}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { 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.19", ngImport: i0, type: DropListComponent, decorators: [{
             type: Component,
@@ -7710,7 +7731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DropListComponent),
                             multi: true,
-                        }], template: "<ng-template #defaultTemplate let-item=\"item\">\n    <div class=\"drop-list-item-label\">\n        {{ item | getValue:labelField }}\n    </div>\n</ng-template>\n<div class=\"drop-list\"\n     #list\n     (dragenter)=\"onDragEnter($event, list, this)\"\n     (dragleave)=\"onDragLeave($event, list)\"\n     (drop)=\"onDrop($event, list)\">\n    <div class=\"drop-list-message\"\n         [ngClass]=\"{'has-value': value?.length}\"\n         [innerHTML]=\"message | translate | safe:'html'\"\n         *ngIf=\"message\">\n    </div>\n    <ng-container *ngFor=\"let id of value; let ix = index\">\n        <div class=\"drop-list-item\">\n            <ng-template #noItemTemplate>\n                <div class=\"drop-list-item-label just-id\">\n                    {{ id }}\n                </div>\n            </ng-template>\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n            <a class=\"remove-item-btn\" (click)=\"remove(ix)\"></a>\n        </div>\n    </ng-container>\n</div>\n", styles: [".drop-list{--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--btn-distance: 4px;--remove-spacing: 8px;--btn-top-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;position:relative;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list .drop-list-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.drop-list .drop-list-message.has-value{display:none}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}.drop-list.drop-allowed{background-color:#0003;border-color:gray}.drop-list.drop-allowed .drop-list-message{color:var(--message-drop-color)}.drop-list a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.drop-list a.remove-item-btn:before,.drop-list a.remove-item-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--remove-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--remove-color);transition:.2s ease}.drop-list a.remove-item-btn:after{--rotation: -45deg}\n"] }]
+                        }], template: "<ng-template #defaultTemplate let-item=\"item\">\r\n    <div class=\"drop-list-item-label\">\r\n        {{ item | getValue:labelField }}\r\n    </div>\r\n</ng-template>\r\n<div class=\"drop-list\"\r\n     #list\r\n     (dragenter)=\"onDragEnter($event, list, this)\"\r\n     (dragleave)=\"onDragLeave($event, list)\"\r\n     (drop)=\"onDrop($event, list)\">\r\n    <div class=\"drop-list-message\"\r\n         [ngClass]=\"{'has-value': value?.length}\"\r\n         [innerHTML]=\"message | translate | safe:'html'\"\r\n         *ngIf=\"message\">\r\n    </div>\r\n    <ng-container *ngFor=\"let id of value; let ix = index\">\r\n        <div class=\"drop-list-item\">\r\n            <ng-template #noItemTemplate>\r\n                <div class=\"drop-list-item-label just-id\">\r\n                    {{ id }}\r\n                </div>\r\n            </ng-template>\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\r\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\r\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\r\n            <a class=\"remove-item-btn\" (click)=\"remove(ix)\"></a>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n", styles: [".drop-list{--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--btn-distance: 4px;--remove-spacing: 8px;--btn-top-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;position:relative;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list .drop-list-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.drop-list .drop-list-message.has-value{display:none}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}.drop-list.drop-allowed{background-color:#0003;border-color:gray}.drop-list.drop-allowed .drop-list-message{color:var(--message-drop-color)}.drop-list a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.drop-list a.remove-item-btn:before,.drop-list a.remove-item-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--remove-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--remove-color);transition:.2s ease}.drop-list a.remove-item-btn:after{--rotation: -45deg}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input
             }], unique: [{
@@ -7845,11 +7866,11 @@ class PaginationMenuComponent {
         this.pages = pages;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: PaginationMenuComponent, deps: [{ token: StateService }, { token: PaginationDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: PaginationMenuComponent, isStandalone: false, selector: "pagination-menu", inputs: { maxSize: "maxSize", urlParam: "urlParam", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pg-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pg-list\">\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link previous\" (click)=\"paginate(1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link previous\" (click)=\"paginate(pagination.page - 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link\" (click)=\"paginate(pagination.page + 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link\" (click)=\"paginate(pagination.maxPage)\"></a>\n        </li>\n    </ul>\n</div>\n", styles: [".pg-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--pg-border-radius: var(--border-radius, 5px);--pg-highlight-color: var(--highlight-color, var(--primary-color, #888888));--pg-highlight-text-color: var(--highlight-text-color, #ffffff);--pg-text-color: var(--text-color, #151515);--pg-arrow-content: \"\";--pg-arrow-size: var(--arrow-size, 6px);--pg-arrow-space: calc(var(--pg-arrow-size) * .5 + 1px);--pg-arrow-color: currentColor;display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:10px}.pg-menu *{box-sizing:border-box}.pg-menu ul.pg-list{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:var(--pg-border-radius);overflow:hidden;min-width:fit-content;display:flex}.pg-menu li{color:var(--pg-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;border-right:var(--pg-border-size) solid var(--pg-border-color);display:flex;align-items:center}.pg-menu li:last-child{border-right:none}.pg-menu li:not(.disabled):hover,.pg-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pg-menu li.disabled a{cursor:default}.pg-menu a{display:block;min-width:36px;min-height:36px;height:auto;line-height:24px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pg-menu a.boundary-link,.pg-menu a.direction-link{position:relative}.pg-menu a.boundary-link:before,.pg-menu a.boundary-link:after,.pg-menu a.direction-link:before,.pg-menu a.direction-link:after{content:var(--pg-arrow-content);position:absolute;left:50%;top:calc(50% - var(--pg-arrow-size));border-top:var(--pg-arrow-size) solid transparent;border-bottom:var(--pg-arrow-size) solid transparent;border-left:var(--pg-arrow-size) solid var(--pg-arrow-color)}.pg-menu a.direction-link:before{display:none}.pg-menu a.direction-link:after{translate:-50% 0}.pg-menu a.boundary-link:before{translate:-100% 0}.pg-menu a.boundary-link.previous:before,.pg-menu a.boundary-link.previous:after,.pg-menu a.direction-link.previous:before,.pg-menu a.direction-link.previous:after{rotate:180deg}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: PaginationMenuComponent, isStandalone: false, selector: "pagination-menu", inputs: { maxSize: "maxSize", urlParam: "urlParam", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pg-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\r\n    <ul class=\"pg-list\">\r\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\r\n            <a class=\"page-link boundary-link previous\" (click)=\"paginate(1)\"></a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\r\n            <a class=\"page-link direction-link previous\" (click)=\"paginate(pagination.page - 1)\"></a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\r\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\r\n            <a class=\"page-link direction-link\" (click)=\"paginate(pagination.page + 1)\"></a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\r\n            <a class=\"page-link boundary-link\" (click)=\"paginate(pagination.maxPage)\"></a>\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".pg-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--pg-border-radius: var(--border-radius, 5px);--pg-highlight-color: var(--highlight-color, var(--primary-color, #888888));--pg-highlight-text-color: var(--highlight-text-color, #ffffff);--pg-text-color: var(--text-color, #151515);--pg-arrow-content: \"\";--pg-arrow-size: var(--arrow-size, 6px);--pg-arrow-space: calc(var(--pg-arrow-size) * .5 + 1px);--pg-arrow-color: currentColor;display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:10px}.pg-menu *{box-sizing:border-box}.pg-menu ul.pg-list{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:var(--pg-border-radius);overflow:hidden;min-width:fit-content;display:flex}.pg-menu li{color:var(--pg-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;border-right:var(--pg-border-size) solid var(--pg-border-color);display:flex;align-items:center}.pg-menu li:last-child{border-right:none}.pg-menu li:not(.disabled):hover,.pg-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pg-menu li.disabled a{cursor:default}.pg-menu a{display:block;min-width:36px;min-height:36px;height:auto;line-height:24px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pg-menu a.boundary-link,.pg-menu a.direction-link{position:relative}.pg-menu a.boundary-link:before,.pg-menu a.boundary-link:after,.pg-menu a.direction-link:before,.pg-menu a.direction-link:after{content:var(--pg-arrow-content);position:absolute;left:50%;top:calc(50% - var(--pg-arrow-size));border-top:var(--pg-arrow-size) solid transparent;border-bottom:var(--pg-arrow-size) solid transparent;border-left:var(--pg-arrow-size) solid var(--pg-arrow-color)}.pg-menu a.direction-link:before{display:none}.pg-menu a.direction-link:after{translate:-50% 0}.pg-menu a.boundary-link:before{translate:-100% 0}.pg-menu a.boundary-link.previous:before,.pg-menu a.boundary-link.previous:after,.pg-menu a.direction-link.previous:before,.pg-menu a.direction-link.previous:after{rotate:180deg}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: PaginationMenuComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "pagination-menu", template: "<div class=\"pg-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pg-list\">\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link previous\" (click)=\"paginate(1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link previous\" (click)=\"paginate(pagination.page - 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link\" (click)=\"paginate(pagination.page + 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link\" (click)=\"paginate(pagination.maxPage)\"></a>\n        </li>\n    </ul>\n</div>\n", styles: [".pg-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--pg-border-radius: var(--border-radius, 5px);--pg-highlight-color: var(--highlight-color, var(--primary-color, #888888));--pg-highlight-text-color: var(--highlight-text-color, #ffffff);--pg-text-color: var(--text-color, #151515);--pg-arrow-content: \"\";--pg-arrow-size: var(--arrow-size, 6px);--pg-arrow-space: calc(var(--pg-arrow-size) * .5 + 1px);--pg-arrow-color: currentColor;display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:10px}.pg-menu *{box-sizing:border-box}.pg-menu ul.pg-list{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:var(--pg-border-radius);overflow:hidden;min-width:fit-content;display:flex}.pg-menu li{color:var(--pg-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;border-right:var(--pg-border-size) solid var(--pg-border-color);display:flex;align-items:center}.pg-menu li:last-child{border-right:none}.pg-menu li:not(.disabled):hover,.pg-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pg-menu li.disabled a{cursor:default}.pg-menu a{display:block;min-width:36px;min-height:36px;height:auto;line-height:24px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pg-menu a.boundary-link,.pg-menu a.direction-link{position:relative}.pg-menu a.boundary-link:before,.pg-menu a.boundary-link:after,.pg-menu a.direction-link:before,.pg-menu a.direction-link:after{content:var(--pg-arrow-content);position:absolute;left:50%;top:calc(50% - var(--pg-arrow-size));border-top:var(--pg-arrow-size) solid transparent;border-bottom:var(--pg-arrow-size) solid transparent;border-left:var(--pg-arrow-size) solid var(--pg-arrow-color)}.pg-menu a.direction-link:before{display:none}.pg-menu a.direction-link:after{translate:-50% 0}.pg-menu a.boundary-link:before{translate:-100% 0}.pg-menu a.boundary-link.previous:before,.pg-menu a.boundary-link.previous:after,.pg-menu a.direction-link.previous:before,.pg-menu a.direction-link.previous:after{rotate:180deg}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "pagination-menu", template: "<div class=\"pg-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\r\n    <ul class=\"pg-list\">\r\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\r\n            <a class=\"page-link boundary-link previous\" (click)=\"paginate(1)\"></a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\r\n            <a class=\"page-link direction-link previous\" (click)=\"paginate(pagination.page - 1)\"></a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\r\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\r\n            <a class=\"page-link direction-link\" (click)=\"paginate(pagination.page + 1)\"></a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\r\n            <a class=\"page-link boundary-link\" (click)=\"paginate(pagination.maxPage)\"></a>\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".pg-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--pg-border-radius: var(--border-radius, 5px);--pg-highlight-color: var(--highlight-color, var(--primary-color, #888888));--pg-highlight-text-color: var(--highlight-text-color, #ffffff);--pg-text-color: var(--text-color, #151515);--pg-arrow-content: \"\";--pg-arrow-size: var(--arrow-size, 6px);--pg-arrow-space: calc(var(--pg-arrow-size) * .5 + 1px);--pg-arrow-color: currentColor;display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:10px}.pg-menu *{box-sizing:border-box}.pg-menu ul.pg-list{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:var(--pg-border-radius);overflow:hidden;min-width:fit-content;display:flex}.pg-menu li{color:var(--pg-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;border-right:var(--pg-border-size) solid var(--pg-border-color);display:flex;align-items:center}.pg-menu li:last-child{border-right:none}.pg-menu li:not(.disabled):hover,.pg-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pg-menu li.disabled a{cursor:default}.pg-menu a{display:block;min-width:36px;min-height:36px;height:auto;line-height:24px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pg-menu a.boundary-link,.pg-menu a.direction-link{position:relative}.pg-menu a.boundary-link:before,.pg-menu a.boundary-link:after,.pg-menu a.direction-link:before,.pg-menu a.direction-link:after{content:var(--pg-arrow-content);position:absolute;left:50%;top:calc(50% - var(--pg-arrow-size));border-top:var(--pg-arrow-size) solid transparent;border-bottom:var(--pg-arrow-size) solid transparent;border-left:var(--pg-arrow-size) solid var(--pg-arrow-color)}.pg-menu a.direction-link:before{display:none}.pg-menu a.direction-link:after{translate:-50% 0}.pg-menu a.boundary-link:before{translate:-100% 0}.pg-menu a.boundary-link.previous:before,.pg-menu a.boundary-link.previous:after,.pg-menu a.direction-link.previous:before,.pg-menu a.direction-link.previous:after{rotate:180deg}\n"] }]
         }], ctorParameters: () => [{ type: StateService }, { type: PaginationDirective }], propDecorators: { maxSize: [{
                 type: Input
             }], urlParam: [{
@@ -8125,11 +8146,11 @@ class DynamicTableComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr #elem\n        [draggable]=\"!!dragStartFn\"\n        [ngClass]=\"{active: selected === context.item}\"\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\n        (dragleave)=\"onDragLeave($event, elem)\"\n        (drop)=\"onDrop($event, elem, context.item)\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <ng-template #emptyCol>\n        <span>-</span>\n    </ng-template>\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n           (click)=\"setSorting(column, toggle)\">\n            <span>{{ realColumns[column].title | translate }}</span>\n        </a>\n    </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        @if (showFilter) {\n            <div class=\"table-input-wrap table-search-filter\">\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n                    {{ filterLabel | translate }}\n                </label>\n                <input type=\"text\"\n                       class=\"search-input\"\n                       [attr.id]=\"tableId\"\n                       [attr.data-testid]=\"testId + '-filter-input'\"\n                       [placeholder]=\"placeholder | translate\"\n                       [ngModel]=\"filter\"\n                       (ngModelChange)=\"setFilter($event)\"/>\n            </div>\n        }\n        @if (sortable) {\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n                <ng-container toggle-content\n                              [ngTemplateOutlet]=\"headerTemplate\"\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n                <ul>\n                    <ng-container *ngFor=\"let column of cols\">\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </li>\n                    </ng-container>\n                </ul>\n            </dropdown-box>\n        }\n        @if (showItems) {\n            <div class=\"table-input-wrap table-items-count\">\n                <label>\n                    {{ 'label.items.before' | translate }}\n                </label>\n                <dropdown-box>\n                    <ng-container toggle-content>\n                        {{ itemsPerPage }}\n                    </ng-container>\n                    <ul>\n                        <ng-container *ngFor=\"let count of showItems\">\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n                                {{ count }}\n                            </li>\n                        </ng-container>\n                    </ul>\n                </dropdown-box>\n                <label>\n                    {{ 'label.items.after' | translate }}\n                </label>\n            </div>\n        }\n        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\n    <div class=\"table-content-row\"\n         #pagination=\"pagination\"\n         [pagination]=\"loadData\"\n         [page]=\"page\"\n         [itemsPerPage]=\"itemsPerPage\"\n         [updateTime]=\"updateTime\">\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n        <div class=\"table-responsive\">\n            <ng-template #defaultWrapperTemplate>\n                <table class=\"table table-striped\">\n                    <thead>\n                    <tr>\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </th>\n                    </tr>\n                    <tr *ngIf=\"hasQuery\">\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n                            <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n                                <ng-container *ngSwitchCase=\"'enum'\">\n                                    <ng-template #optionItem let-option=\"option\">\n                                        {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n                                    </ng-template>\n                                    <dropdown-box componentClass=\"filter-box\"\n                                                  [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n                                        <ng-container toggle-content>\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n                                            {{ realColumns[column].title | translate }}\n                                        </span>\n                                            <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n                                                  *ngFor=\"let option of query[column] | values; let ix = index\">\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                        </span>\n                                        </ng-container>\n                                        <ul>\n                                            <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n                                                (click)=\"setQueryValue(column, option)\"\n                                                *ngFor=\"let option of realColumns[column].enum\">\n                                                <a [ngClass]=\"'toggle-link-' + column\">\n                                                    <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n                                                    <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                                  [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                                </a>\n                                            </li>\n                                        </ul>\n                                    </dropdown-box>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'checkbox'\">\n                                    <input type=\"checkbox\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <input class=\"search-input\"\n                                           type=\"text\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                            </ng-container>\n                        </th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <ng-container *paginationItem=\"let context\"\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\n                                  [context]=\"context\"\n                                  [additionalContext]=\"this\"></ng-container>\n                    </tbody>\n                </table>\n            </ng-template>\n\n            <div class=\"table-wrapper\">\n                <ng-content select=\"[table-top]\"></ng-content>\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                              [context]=\"this\"></ng-container>\n                <ng-content select=\"[table-bottom]\"></ng-content>\n            </div>\n        </div>\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--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}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "attachTo", "placement", "crossAxis", "alignment", "autoAlignment", "allowedPlacements", "componentClass"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n    </ng-template>\r\n    <ng-template #pureTemplate>\r\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n    </ng-template>\r\n    <td [ngClass]=\"'column-' + column\"\r\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\r\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n                      [context]=\"context\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n    <ng-container *ngFor=\"let column of cols\"\r\n                  [ngxTemplateOutlet]=\"columnTemplate\"\r\n                  [context]=\"context\"\r\n                  [additionalContext]=\"{\r\n                            template: templates[column],\r\n                            column: column\r\n                          }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n    <tr #elem\r\n        [draggable]=\"!!dragStartFn\"\r\n        [ngClass]=\"{active: selected === context.item}\"\r\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n        (dragleave)=\"onDragLeave($event, elem)\"\r\n        (drop)=\"onDrop($event, elem, context.item)\">\r\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n    </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n    <ng-template #defaultCol>\r\n        <span>{{ realColumns[column].title | translate }}</span>\r\n    </ng-template>\r\n    <ng-template #emptyCol>\r\n        <span>-</span>\r\n    </ng-template>\r\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\r\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n           (click)=\"setSorting(column, toggle)\">\r\n            <span>{{ realColumns[column].title | translate }}</span>\r\n        </a>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n    <div class=\"table-features-row\">\r\n        <ng-content select=\"[table-features-before]\"></ng-content>\r\n        @if (showFilter) {\r\n            <div class=\"table-input-wrap table-search-filter\">\r\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n                    {{ filterLabel | translate }}\r\n                </label>\r\n                <input type=\"text\"\r\n                       class=\"search-input\"\r\n                       [attr.id]=\"tableId\"\r\n                       [attr.data-testid]=\"testId + '-filter-input'\"\r\n                       [placeholder]=\"placeholder | translate\"\r\n                       [ngModel]=\"filter\"\r\n                       (ngModelChange)=\"setFilter($event)\"/>\r\n            </div>\r\n        }\r\n        @if (sortable) {\r\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n                <ng-container toggle-content\r\n                              [ngTemplateOutlet]=\"headerTemplate\"\r\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n                <ul>\r\n                    <ng-container *ngFor=\"let column of cols\">\r\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </li>\r\n                    </ng-container>\r\n                </ul>\r\n            </dropdown-box>\r\n        }\r\n        @if (showItems) {\r\n            <div class=\"table-input-wrap table-items-count\">\r\n                <label>\r\n                    {{ 'label.items.before' | translate }}\r\n                </label>\r\n                <dropdown-box>\r\n                    <ng-container toggle-content>\r\n                        {{ itemsPerPage }}\r\n                    </ng-container>\r\n                    <ul>\r\n                        <ng-container *ngFor=\"let count of showItems\">\r\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n                                {{ count }}\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </dropdown-box>\r\n                <label>\r\n                    {{ 'label.items.after' | translate }}\r\n                </label>\r\n            </div>\r\n        }\r\n        <ng-content select=\"[table-features-after]\"></ng-content>\r\n    </div>\r\n    <div class=\"table-content-row\"\r\n         #pagination=\"pagination\"\r\n         [pagination]=\"loadData\"\r\n         [page]=\"page\"\r\n         [itemsPerPage]=\"itemsPerPage\"\r\n         [updateTime]=\"updateTime\">\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n        <div class=\"table-responsive\">\r\n            <ng-template #defaultWrapperTemplate>\r\n                <table class=\"table table-striped\">\r\n                    <thead>\r\n                    <tr>\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n                            <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\r\n                                <ng-container *ngSwitchCase=\"'enum'\">\r\n                                    <ng-template #optionItem let-option=\"option\">\r\n                                        {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\r\n                                    </ng-template>\r\n                                    <dropdown-box componentClass=\"filter-box\"\r\n                                                  [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\r\n                                        <ng-container toggle-content>\r\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n                                            {{ realColumns[column].title | translate }}\r\n                                        </span>\r\n                                            <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n                                                  *ngFor=\"let option of query[column] | values; let ix = index\">\r\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\r\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                        </span>\r\n                                        </ng-container>\r\n                                        <ul>\r\n                                            <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\r\n                                                (click)=\"setQueryValue(column, option)\"\r\n                                                *ngFor=\"let option of realColumns[column].enum\">\r\n                                                <a [ngClass]=\"'toggle-link-' + column\">\r\n                                                    <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n                                                    <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                                  [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                                </a>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </dropdown-box>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                                    <input type=\"checkbox\"\r\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                           [placeholder]=\"realColumns[column].title | translate\"\r\n                                           [ngModel]=\"query[column]\"\r\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <input class=\"search-input\"\r\n                                           type=\"text\"\r\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                           [placeholder]=\"realColumns[column].title | translate\"\r\n                                           [ngModel]=\"query[column]\"\r\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                    <ng-container *paginationItem=\"let context\"\r\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                  [context]=\"context\"\r\n                                  [additionalContext]=\"this\"></ng-container>\r\n                    </tbody>\r\n                </table>\r\n            </ng-template>\r\n\r\n            <div class=\"table-wrapper\">\r\n                <ng-content select=\"[table-top]\"></ng-content>\r\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                              [context]=\"this\"></ng-container>\r\n                <ng-content select=\"[table-bottom]\"></ng-content>\r\n            </div>\r\n        </div>\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    </div>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--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}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "attachTo", "placement", "crossAxis", "alignment", "autoAlignment", "allowedPlacements", "componentClass"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr #elem\n        [draggable]=\"!!dragStartFn\"\n        [ngClass]=\"{active: selected === context.item}\"\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\n        (dragleave)=\"onDragLeave($event, elem)\"\n        (drop)=\"onDrop($event, elem, context.item)\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <ng-template #emptyCol>\n        <span>-</span>\n    </ng-template>\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n           (click)=\"setSorting(column, toggle)\">\n            <span>{{ realColumns[column].title | translate }}</span>\n        </a>\n    </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        @if (showFilter) {\n            <div class=\"table-input-wrap table-search-filter\">\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n                    {{ filterLabel | translate }}\n                </label>\n                <input type=\"text\"\n                       class=\"search-input\"\n                       [attr.id]=\"tableId\"\n                       [attr.data-testid]=\"testId + '-filter-input'\"\n                       [placeholder]=\"placeholder | translate\"\n                       [ngModel]=\"filter\"\n                       (ngModelChange)=\"setFilter($event)\"/>\n            </div>\n        }\n        @if (sortable) {\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n                <ng-container toggle-content\n                              [ngTemplateOutlet]=\"headerTemplate\"\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n                <ul>\n                    <ng-container *ngFor=\"let column of cols\">\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </li>\n                    </ng-container>\n                </ul>\n            </dropdown-box>\n        }\n        @if (showItems) {\n            <div class=\"table-input-wrap table-items-count\">\n                <label>\n                    {{ 'label.items.before' | translate }}\n                </label>\n                <dropdown-box>\n                    <ng-container toggle-content>\n                        {{ itemsPerPage }}\n                    </ng-container>\n                    <ul>\n                        <ng-container *ngFor=\"let count of showItems\">\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n                                {{ count }}\n                            </li>\n                        </ng-container>\n                    </ul>\n                </dropdown-box>\n                <label>\n                    {{ 'label.items.after' | translate }}\n                </label>\n            </div>\n        }\n        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\n    <div class=\"table-content-row\"\n         #pagination=\"pagination\"\n         [pagination]=\"loadData\"\n         [page]=\"page\"\n         [itemsPerPage]=\"itemsPerPage\"\n         [updateTime]=\"updateTime\">\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n        <div class=\"table-responsive\">\n            <ng-template #defaultWrapperTemplate>\n                <table class=\"table table-striped\">\n                    <thead>\n                    <tr>\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </th>\n                    </tr>\n                    <tr *ngIf=\"hasQuery\">\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n                            <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n                                <ng-container *ngSwitchCase=\"'enum'\">\n                                    <ng-template #optionItem let-option=\"option\">\n                                        {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n                                    </ng-template>\n                                    <dropdown-box componentClass=\"filter-box\"\n                                                  [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n                                        <ng-container toggle-content>\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n                                            {{ realColumns[column].title | translate }}\n                                        </span>\n                                            <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n                                                  *ngFor=\"let option of query[column] | values; let ix = index\">\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                        </span>\n                                        </ng-container>\n                                        <ul>\n                                            <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n                                                (click)=\"setQueryValue(column, option)\"\n                                                *ngFor=\"let option of realColumns[column].enum\">\n                                                <a [ngClass]=\"'toggle-link-' + column\">\n                                                    <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n                                                    <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                                  [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                                </a>\n                                            </li>\n                                        </ul>\n                                    </dropdown-box>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'checkbox'\">\n                                    <input type=\"checkbox\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <input class=\"search-input\"\n                                           type=\"text\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                            </ng-container>\n                        </th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <ng-container *paginationItem=\"let context\"\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\n                                  [context]=\"context\"\n                                  [additionalContext]=\"this\"></ng-container>\n                    </tbody>\n                </table>\n            </ng-template>\n\n            <div class=\"table-wrapper\">\n                <ng-content select=\"[table-top]\"></ng-content>\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                              [context]=\"this\"></ng-container>\n                <ng-content select=\"[table-bottom]\"></ng-content>\n            </div>\n        </div>\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--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}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n    </ng-template>\r\n    <ng-template #pureTemplate>\r\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n    </ng-template>\r\n    <td [ngClass]=\"'column-' + column\"\r\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\r\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n                      [context]=\"context\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n    <ng-container *ngFor=\"let column of cols\"\r\n                  [ngxTemplateOutlet]=\"columnTemplate\"\r\n                  [context]=\"context\"\r\n                  [additionalContext]=\"{\r\n                            template: templates[column],\r\n                            column: column\r\n                          }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n    <tr #elem\r\n        [draggable]=\"!!dragStartFn\"\r\n        [ngClass]=\"{active: selected === context.item}\"\r\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n        (dragleave)=\"onDragLeave($event, elem)\"\r\n        (drop)=\"onDrop($event, elem, context.item)\">\r\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n    </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n    <ng-template #defaultCol>\r\n        <span>{{ realColumns[column].title | translate }}</span>\r\n    </ng-template>\r\n    <ng-template #emptyCol>\r\n        <span>-</span>\r\n    </ng-template>\r\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\r\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n           (click)=\"setSorting(column, toggle)\">\r\n            <span>{{ realColumns[column].title | translate }}</span>\r\n        </a>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n    <div class=\"table-features-row\">\r\n        <ng-content select=\"[table-features-before]\"></ng-content>\r\n        @if (showFilter) {\r\n            <div class=\"table-input-wrap table-search-filter\">\r\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n                    {{ filterLabel | translate }}\r\n                </label>\r\n                <input type=\"text\"\r\n                       class=\"search-input\"\r\n                       [attr.id]=\"tableId\"\r\n                       [attr.data-testid]=\"testId + '-filter-input'\"\r\n                       [placeholder]=\"placeholder | translate\"\r\n                       [ngModel]=\"filter\"\r\n                       (ngModelChange)=\"setFilter($event)\"/>\r\n            </div>\r\n        }\r\n        @if (sortable) {\r\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n                <ng-container toggle-content\r\n                              [ngTemplateOutlet]=\"headerTemplate\"\r\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n                <ul>\r\n                    <ng-container *ngFor=\"let column of cols\">\r\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </li>\r\n                    </ng-container>\r\n                </ul>\r\n            </dropdown-box>\r\n        }\r\n        @if (showItems) {\r\n            <div class=\"table-input-wrap table-items-count\">\r\n                <label>\r\n                    {{ 'label.items.before' | translate }}\r\n                </label>\r\n                <dropdown-box>\r\n                    <ng-container toggle-content>\r\n                        {{ itemsPerPage }}\r\n                    </ng-container>\r\n                    <ul>\r\n                        <ng-container *ngFor=\"let count of showItems\">\r\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n                                {{ count }}\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </dropdown-box>\r\n                <label>\r\n                    {{ 'label.items.after' | translate }}\r\n                </label>\r\n            </div>\r\n        }\r\n        <ng-content select=\"[table-features-after]\"></ng-content>\r\n    </div>\r\n    <div class=\"table-content-row\"\r\n         #pagination=\"pagination\"\r\n         [pagination]=\"loadData\"\r\n         [page]=\"page\"\r\n         [itemsPerPage]=\"itemsPerPage\"\r\n         [updateTime]=\"updateTime\">\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n        <div class=\"table-responsive\">\r\n            <ng-template #defaultWrapperTemplate>\r\n                <table class=\"table table-striped\">\r\n                    <thead>\r\n                    <tr>\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n                            <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\r\n                                <ng-container *ngSwitchCase=\"'enum'\">\r\n                                    <ng-template #optionItem let-option=\"option\">\r\n                                        {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\r\n                                    </ng-template>\r\n                                    <dropdown-box componentClass=\"filter-box\"\r\n                                                  [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\r\n                                        <ng-container toggle-content>\r\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n                                            {{ realColumns[column].title | translate }}\r\n                                        </span>\r\n                                            <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n                                                  *ngFor=\"let option of query[column] | values; let ix = index\">\r\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\r\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                        </span>\r\n                                        </ng-container>\r\n                                        <ul>\r\n                                            <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\r\n                                                (click)=\"setQueryValue(column, option)\"\r\n                                                *ngFor=\"let option of realColumns[column].enum\">\r\n                                                <a [ngClass]=\"'toggle-link-' + column\">\r\n                                                    <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n                                                    <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                                  [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                                </a>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </dropdown-box>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                                    <input type=\"checkbox\"\r\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                           [placeholder]=\"realColumns[column].title | translate\"\r\n                                           [ngModel]=\"query[column]\"\r\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <input class=\"search-input\"\r\n                                           type=\"text\"\r\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                           [placeholder]=\"realColumns[column].title | translate\"\r\n                                           [ngModel]=\"query[column]\"\r\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                    <ng-container *paginationItem=\"let context\"\r\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                  [context]=\"context\"\r\n                                  [additionalContext]=\"this\"></ng-container>\r\n                    </tbody>\r\n                </table>\r\n            </ng-template>\r\n\r\n            <div class=\"table-wrapper\">\r\n                <ng-content select=\"[table-top]\"></ng-content>\r\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                              [context]=\"this\"></ng-container>\r\n                <ng-content select=\"[table-bottom]\"></ng-content>\r\n            </div>\r\n        </div>\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    </div>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--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}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
                 type: Input
             }], data: [{
@@ -8220,11 +8241,11 @@ class IconDefaultComponent {
         this.name = "trash";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IconDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: IconDefaultComponent, isStandalone: false, selector: "icon-default", inputs: { name: "name" }, ngImport: i0, template: "<i class=\"fa-solid\" [ngClass]=\"'fa-' + name\"></i>\r\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.19", 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"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "icon-default", template: "<i class=\"fa-solid\" [ngClass]=\"'fa-' + name\"></i>\r\n", styles: [".fa-solid{display:inline-block}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }] } });
@@ -8836,11 +8857,11 @@ class InteractiveCanvasComponent {
         ctx.restore();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: InteractiveCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, panOffset: { classPropertyName: "panOffset", publicName: "panOffset", isSignal: true, isRequired: false, transformFunction: null }, renderCtx: { classPropertyName: "renderCtx", publicName: "renderCtx", isSignal: true, isRequired: false, transformFunction: null }, beforeItems: { classPropertyName: "beforeItems", publicName: "beforeItems", isSignal: true, isRequired: false, transformFunction: null }, afterItems: { classPropertyName: "afterItems", publicName: "afterItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd()", "window:mouseup": "onMouseUp()" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent, isSignal: true }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], ngImport: i0, template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, panOffset: { classPropertyName: "panOffset", publicName: "panOffset", isSignal: true, isRequired: false, transformFunction: null }, renderCtx: { classPropertyName: "renderCtx", publicName: "renderCtx", isSignal: true, isRequired: false, transformFunction: null }, beforeItems: { classPropertyName: "beforeItems", publicName: "beforeItems", isSignal: true, isRequired: false, transformFunction: null }, afterItems: { classPropertyName: "afterItems", publicName: "afterItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd()", "window:mouseup": "onMouseUp()" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent, isSignal: true }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], ngImport: i0, template: "<div #containerElem\r\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\r\n     (resize)=\"resize()\"\r\n     (touchstart)=\"onTouchStart($event)\"\r\n     (mousedown)=\"onMouseDown($event)\"\r\n     (mousemove)=\"onMouseMove($event)\"\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (panend)=\"onPanEnd()\"\r\n     (panmove)=\"onPanMove($event)\"\r\n     (panstart)=\"onPanStart()\">\r\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\r\n</div>\r\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: InteractiveCanvasComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "interactive-canvas", template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
+            args: [{ standalone: false, selector: "interactive-canvas", template: "<div #containerElem\r\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\r\n     (resize)=\"resize()\"\r\n     (touchstart)=\"onTouchStart($event)\"\r\n     (mousedown)=\"onMouseDown($event)\"\r\n     (mousemove)=\"onMouseMove($event)\"\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (panend)=\"onPanEnd()\"\r\n     (panmove)=\"onPanMove($event)\"\r\n     (panstart)=\"onPanStart()\">\r\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\r\n</div>\r\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { containerElem: [{
                 type: ViewChild,
                 args: ["containerElem", { static: true }]
@@ -8975,11 +8996,11 @@ class TabsComponent {
         this.selectedChange.emit(option);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, tabsClass: { classPropertyName: "tabsClass", publicName: "tabsClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectedChange: "selectedChange" }, queries: [{ propertyName: "tabItems", predicate: TabsItemDirective, isSignal: true }], ngImport: i0, template: "@let tabList = tabs();\n@let tabType = type();\n@let tabSize = size();\n@let tabTemplate = template();\n@let testIdPrefix = testId() || \"tabs\";\n@if (tabList.length) {\n    <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\n        @for (option of tabList; track option.value) {\n            <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\n                <btn [label]=\"option.label\"\n                     [tooltip]=\"option.tooltip\"\n                     [icon]=\"option.icon\"\n                     [disabled]=\"option.disabled\"\n                     [type]=\"option.active ? tabType : 'transparent'\"\n                     [size]=\"tabSize\"\n                     (click)=\"select(option)\"></btn>\n            </li>\n        }\n    </ul>\n}\n@if (tabTemplate) {\n    <div class=\"ui-tab\">\n        <ng-container [ngTemplateOutlet]=\"tabTemplate\"></ng-container>\n    </div>\n}\n<ng-content></ng-content>\n", styles: [".ui-tabs{--tabs-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--tabs-border-radius: var(--element-radius, var(--mat-sys-corner-full, 5px));--tabs-bg: var(--tabs-color);--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);border-radius:var(--tabs-border-radius);opacity:.25;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-color: var(--secondary-color, var(--bs-secondary, var(--mat-sys-secondary, #666666)))}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, tabsClass: { classPropertyName: "tabsClass", publicName: "tabsClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectedChange: "selectedChange" }, queries: [{ propertyName: "tabItems", predicate: TabsItemDirective, isSignal: true }], ngImport: i0, template: "@let tabList = tabs();\r\n@let tabType = type();\r\n@let tabSize = size();\r\n@let tabTemplate = template();\r\n@let testIdPrefix = testId() || \"tabs\";\r\n@if (tabList.length) {\r\n    <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\r\n        @for (option of tabList; track option.value) {\r\n            <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\r\n                <btn [label]=\"option.label\"\r\n                     [tooltip]=\"option.tooltip\"\r\n                     [icon]=\"option.icon\"\r\n                     [disabled]=\"option.disabled\"\r\n                     [type]=\"option.active ? tabType : 'transparent'\"\r\n                     [size]=\"tabSize\"\r\n                     (click)=\"select(option)\"></btn>\r\n            </li>\r\n        }\r\n    </ul>\r\n}\r\n@if (tabTemplate) {\r\n    <div class=\"ui-tab\">\r\n        <ng-container [ngTemplateOutlet]=\"tabTemplate\"></ng-container>\r\n    </div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: [".ui-tabs{--tabs-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--tabs-border-radius: var(--element-radius, var(--mat-sys-corner-full, 5px));--tabs-bg: var(--tabs-color);--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);border-radius:var(--tabs-border-radius);opacity:.25;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-color: var(--secondary-color, var(--bs-secondary, var(--mat-sys-secondary, #666666)))}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "tabs", template: "@let tabList = tabs();\n@let tabType = type();\n@let tabSize = size();\n@let tabTemplate = template();\n@let testIdPrefix = testId() || \"tabs\";\n@if (tabList.length) {\n    <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\n        @for (option of tabList; track option.value) {\n            <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\n                <btn [label]=\"option.label\"\n                     [tooltip]=\"option.tooltip\"\n                     [icon]=\"option.icon\"\n                     [disabled]=\"option.disabled\"\n                     [type]=\"option.active ? tabType : 'transparent'\"\n                     [size]=\"tabSize\"\n                     (click)=\"select(option)\"></btn>\n            </li>\n        }\n    </ul>\n}\n@if (tabTemplate) {\n    <div class=\"ui-tab\">\n        <ng-container [ngTemplateOutlet]=\"tabTemplate\"></ng-container>\n    </div>\n}\n<ng-content></ng-content>\n", styles: [".ui-tabs{--tabs-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--tabs-border-radius: var(--element-radius, var(--mat-sys-corner-full, 5px));--tabs-bg: var(--tabs-color);--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);border-radius:var(--tabs-border-radius);opacity:.25;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-color: var(--secondary-color, var(--bs-secondary, var(--mat-sys-secondary, #666666)))}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "tabs", template: "@let tabList = tabs();\r\n@let tabType = type();\r\n@let tabSize = size();\r\n@let tabTemplate = template();\r\n@let testIdPrefix = testId() || \"tabs\";\r\n@if (tabList.length) {\r\n    <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\r\n        @for (option of tabList; track option.value) {\r\n            <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\r\n                <btn [label]=\"option.label\"\r\n                     [tooltip]=\"option.tooltip\"\r\n                     [icon]=\"option.icon\"\r\n                     [disabled]=\"option.disabled\"\r\n                     [type]=\"option.active ? tabType : 'transparent'\"\r\n                     [size]=\"tabSize\"\r\n                     (click)=\"select(option)\"></btn>\r\n            </li>\r\n        }\r\n    </ul>\r\n}\r\n@if (tabTemplate) {\r\n    <div class=\"ui-tab\">\r\n        <ng-container [ngTemplateOutlet]=\"tabTemplate\"></ng-container>\r\n    </div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: [".ui-tabs{--tabs-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--tabs-border-radius: var(--element-radius, var(--mat-sys-corner-full, 5px));--tabs-bg: var(--tabs-color);--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);border-radius:var(--tabs-border-radius);opacity:.25;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-color: var(--secondary-color, var(--bs-secondary, var(--mat-sys-secondary, #666666)))}\n"] }]
         }], ctorParameters: () => [] });
 
 class UnorderedListComponent {
@@ -9252,13 +9273,13 @@ class UploadComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: API_SERVICE }, { token: TOASTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", inline: "inline", accept: "accept", baseUrl: "baseUrl", message: "message", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded", onRemove: "onRemove" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: UploadComponent, multi: true }
-        ], viewQueries: [{ propertyName: "uploadBtn", first: true, predicate: ["uploadBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemBgTemplate let-bg=\"bg\">\n    @if (bg) {\n        <div class=\"upload-item-bg\" [ngStyle]=\"{backgroundImage: `url('${bg}')`}\">\n            <div>\n                <img alt=\"item image\" [src]=\"bg | safe: 'url'\" />\n            </div>\n        </div>\n    }\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\n    <div class=\"upload-item\">\n        <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\n                      [ngTemplateOutletContext]=\"{bg: isImage || (item | isType: 'file') ? getUrl(item) : null}\">\n        </ng-container>\n        @if (!disabled) {\n            <close-btn class=\"remove-item-btn\" (click)=\"removeItem(index)\"></close-btn>\n        }\n<!--        <btn size=\"small\" class=\"download-item-btn\" icon=\"download\"></btn>-->\n    </div>\n</ng-template>\n\n<div class=\"file-upload\" [ngClass]=\"{disabled: disabled}\">\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\n        <input type=\"file\"\n               #input\n               [disabled]=\"disabled\"\n               [multiple]=\"multiple\"\n               [accept]=\"acceptAttr\"\n               (dragenter)=\"onDragEnter($event)\"\n               (dragleave)=\"onDrop()\"\n               (drop)=\"onDrop()\"\n               (click)=\"onInputClick($event)\"\n               (blur)=\"onTouched($event)\"\n               (change)=\"onInputChange($event)\"/>\n        @if (message) {\n            <div class=\"upload-message\"\n                 [ngClass]=\"{'has-value': $any(value)?.length}\"\n                 [innerHTML]=\"message | translate | safe:'html'\">\n            </div>\n        }\n        <div class=\"upload-container\">\n\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{item: value, index: 0}\"\n                          *ngIf=\"!multiple && value\">\n            </ng-container>\n            <ng-container *ngIf=\"multiple\">\n                <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                              [ngTemplateOutletContext]=\"{item: item, index: ix}\"\n                              *ngFor=\"let item of $any(value); let ix = index\">\n                </ng-container>\n            </ng-container>\n\n            <div class=\"upload-item\" *ngFor=\"let proc of processing\">\n                <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\n                              [ngTemplateOutletContext]=\"{bg: proc.preview}\">\n                </ng-container>\n                <div class=\"upload-progress\">\n                    <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\n                    <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\n\n                    </div>\n                </div>\n            </div>\n\n        </div>\n        @if (!disabled) {\n            <btn class=\"upload-btn\" #uploadBtn [label]=\"buttonText\" (click)=\"input.click()\"></btn>\n        }\n    </div>\n</div>\n", styles: [".file-upload{--upload-bg-lightness: 85%;--upload-bg-opacity: 1;--upload-padding: 5px;--upload-border-width: 2px;--upload-border-color: rgba(0, 0, 0, .25);--upload-progress-bg: var(--primary-color, var(--mat-sys-primary, black));--upload-progress-text: var(--text-color, var(--mat-sys-on-primary, white));--upload-item-size: 120px;--upload-item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #474747;--btn-distance: 3px;--btn-top-distance: var(--btn-distance);--btn-left-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);margin:5px 0}.file-upload *{box-sizing:border-box}.file-upload.disabled{--upload-bg-lightness: 75%}.file-upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.file-upload input[type=file]::file-selector-button{width:100%;height:100%}.file-upload .upload-input{width:100%;border:var(--upload-border-width) var(--upload-border-color) dashed;border-radius:var(--upload-item-radius);background-color:hsl(0,0%,var(--upload-bg-lightness),var(--upload-bg-opacity));transition:.2s;flex-wrap:wrap;position:relative;padding:var(--upload-padding)}.file-upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.file-upload .upload-input .upload-message.has-value{display:none}.file-upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--upload-item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.file-upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--upload-item-size);height:var(--upload-item-size);border-radius:var(--upload-item-radius);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.file-upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(15px)}.file-upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.file-upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.file-upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--upload-progress-bg);top:0}.file-upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--upload-progress-text)}.file-upload .upload-input.drop-allowed{--upload-bg-lightness: 95%}.file-upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.file-upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.file-upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.file-upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { kind: "pipe", type: IsTypePipe, name: "isType" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "uploadBtn", first: true, predicate: ["uploadBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemBgTemplate let-bg=\"bg\">\r\n    @if (bg) {\r\n        <div class=\"upload-item-bg\" [ngStyle]=\"{backgroundImage: `url('${bg}')`}\">\r\n            <div>\r\n                <img alt=\"item image\" [src]=\"bg | safe: 'url'\" />\r\n            </div>\r\n        </div>\r\n    }\r\n</ng-template>\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\r\n    <div class=\"upload-item\">\r\n        <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\r\n                      [ngTemplateOutletContext]=\"{bg: isImage || (item | isType: 'file') ? getUrl(item) : null}\">\r\n        </ng-container>\r\n        @if (!disabled) {\r\n            <close-btn class=\"remove-item-btn\" (click)=\"removeItem(index)\"></close-btn>\r\n        }\r\n<!--        <btn size=\"small\" class=\"download-item-btn\" icon=\"download\"></btn>-->\r\n    </div>\r\n</ng-template>\r\n\r\n<div class=\"file-upload\" [ngClass]=\"{disabled: disabled}\">\r\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n        <input type=\"file\"\r\n               #input\r\n               [disabled]=\"disabled\"\r\n               [multiple]=\"multiple\"\r\n               [accept]=\"acceptAttr\"\r\n               (dragenter)=\"onDragEnter($event)\"\r\n               (dragleave)=\"onDrop()\"\r\n               (drop)=\"onDrop()\"\r\n               (click)=\"onInputClick($event)\"\r\n               (blur)=\"onTouched($event)\"\r\n               (change)=\"onInputChange($event)\"/>\r\n        @if (message) {\r\n            <div class=\"upload-message\"\r\n                 [ngClass]=\"{'has-value': $any(value)?.length}\"\r\n                 [innerHTML]=\"message | translate | safe:'html'\">\r\n            </div>\r\n        }\r\n        <div class=\"upload-container\">\r\n\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{item: value, index: 0}\"\r\n                          *ngIf=\"!multiple && value\">\r\n            </ng-container>\r\n            <ng-container *ngIf=\"multiple\">\r\n                <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                              [ngTemplateOutletContext]=\"{item: item, index: ix}\"\r\n                              *ngFor=\"let item of $any(value); let ix = index\">\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <div class=\"upload-item\" *ngFor=\"let proc of processing\">\r\n                <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\r\n                              [ngTemplateOutletContext]=\"{bg: proc.preview}\">\r\n                </ng-container>\r\n                <div class=\"upload-progress\">\r\n                    <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\r\n                    <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        @if (!disabled) {\r\n            <btn class=\"upload-btn\" #uploadBtn [label]=\"buttonText\" (click)=\"input.click()\"></btn>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".file-upload{--upload-bg-lightness: 85%;--upload-bg-opacity: 1;--upload-padding: 5px;--upload-border-width: 2px;--upload-border-color: rgba(0, 0, 0, .25);--upload-progress-bg: var(--primary-color, var(--mat-sys-primary, black));--upload-progress-text: var(--text-color, var(--mat-sys-on-primary, white));--upload-item-size: 120px;--upload-item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #474747;--btn-distance: 3px;--btn-top-distance: var(--btn-distance);--btn-left-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);margin:5px 0}.file-upload *{box-sizing:border-box}.file-upload.disabled{--upload-bg-lightness: 75%}.file-upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.file-upload input[type=file]::file-selector-button{width:100%;height:100%}.file-upload .upload-input{width:100%;border:var(--upload-border-width) var(--upload-border-color) dashed;border-radius:var(--upload-item-radius);background-color:hsl(0,0%,var(--upload-bg-lightness),var(--upload-bg-opacity));transition:.2s;flex-wrap:wrap;position:relative;padding:var(--upload-padding)}.file-upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.file-upload .upload-input .upload-message.has-value{display:none}.file-upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--upload-item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.file-upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--upload-item-size);height:var(--upload-item-size);border-radius:var(--upload-item-radius);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.file-upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(15px)}.file-upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.file-upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.file-upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--upload-progress-bg);top:0}.file-upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--upload-progress-text)}.file-upload .upload-input.drop-allowed{--upload-bg-lightness: 95%}.file-upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.file-upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.file-upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.file-upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { kind: "pipe", type: IsTypePipe, name: "isType" }, { 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.19", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "upload", encapsulation: ViewEncapsulation.None, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: UploadComponent, multi: true }
-                    ], template: "<ng-template #itemBgTemplate let-bg=\"bg\">\n    @if (bg) {\n        <div class=\"upload-item-bg\" [ngStyle]=\"{backgroundImage: `url('${bg}')`}\">\n            <div>\n                <img alt=\"item image\" [src]=\"bg | safe: 'url'\" />\n            </div>\n        </div>\n    }\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\n    <div class=\"upload-item\">\n        <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\n                      [ngTemplateOutletContext]=\"{bg: isImage || (item | isType: 'file') ? getUrl(item) : null}\">\n        </ng-container>\n        @if (!disabled) {\n            <close-btn class=\"remove-item-btn\" (click)=\"removeItem(index)\"></close-btn>\n        }\n<!--        <btn size=\"small\" class=\"download-item-btn\" icon=\"download\"></btn>-->\n    </div>\n</ng-template>\n\n<div class=\"file-upload\" [ngClass]=\"{disabled: disabled}\">\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\n        <input type=\"file\"\n               #input\n               [disabled]=\"disabled\"\n               [multiple]=\"multiple\"\n               [accept]=\"acceptAttr\"\n               (dragenter)=\"onDragEnter($event)\"\n               (dragleave)=\"onDrop()\"\n               (drop)=\"onDrop()\"\n               (click)=\"onInputClick($event)\"\n               (blur)=\"onTouched($event)\"\n               (change)=\"onInputChange($event)\"/>\n        @if (message) {\n            <div class=\"upload-message\"\n                 [ngClass]=\"{'has-value': $any(value)?.length}\"\n                 [innerHTML]=\"message | translate | safe:'html'\">\n            </div>\n        }\n        <div class=\"upload-container\">\n\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{item: value, index: 0}\"\n                          *ngIf=\"!multiple && value\">\n            </ng-container>\n            <ng-container *ngIf=\"multiple\">\n                <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                              [ngTemplateOutletContext]=\"{item: item, index: ix}\"\n                              *ngFor=\"let item of $any(value); let ix = index\">\n                </ng-container>\n            </ng-container>\n\n            <div class=\"upload-item\" *ngFor=\"let proc of processing\">\n                <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\n                              [ngTemplateOutletContext]=\"{bg: proc.preview}\">\n                </ng-container>\n                <div class=\"upload-progress\">\n                    <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\n                    <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\n\n                    </div>\n                </div>\n            </div>\n\n        </div>\n        @if (!disabled) {\n            <btn class=\"upload-btn\" #uploadBtn [label]=\"buttonText\" (click)=\"input.click()\"></btn>\n        }\n    </div>\n</div>\n", styles: [".file-upload{--upload-bg-lightness: 85%;--upload-bg-opacity: 1;--upload-padding: 5px;--upload-border-width: 2px;--upload-border-color: rgba(0, 0, 0, .25);--upload-progress-bg: var(--primary-color, var(--mat-sys-primary, black));--upload-progress-text: var(--text-color, var(--mat-sys-on-primary, white));--upload-item-size: 120px;--upload-item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #474747;--btn-distance: 3px;--btn-top-distance: var(--btn-distance);--btn-left-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);margin:5px 0}.file-upload *{box-sizing:border-box}.file-upload.disabled{--upload-bg-lightness: 75%}.file-upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.file-upload input[type=file]::file-selector-button{width:100%;height:100%}.file-upload .upload-input{width:100%;border:var(--upload-border-width) var(--upload-border-color) dashed;border-radius:var(--upload-item-radius);background-color:hsl(0,0%,var(--upload-bg-lightness),var(--upload-bg-opacity));transition:.2s;flex-wrap:wrap;position:relative;padding:var(--upload-padding)}.file-upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.file-upload .upload-input .upload-message.has-value{display:none}.file-upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--upload-item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.file-upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--upload-item-size);height:var(--upload-item-size);border-radius:var(--upload-item-radius);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.file-upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(15px)}.file-upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.file-upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.file-upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--upload-progress-bg);top:0}.file-upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--upload-progress-text)}.file-upload .upload-input.drop-allowed{--upload-bg-lightness: 95%}.file-upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.file-upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.file-upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.file-upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\n"] }]
+                    ], template: "<ng-template #itemBgTemplate let-bg=\"bg\">\r\n    @if (bg) {\r\n        <div class=\"upload-item-bg\" [ngStyle]=\"{backgroundImage: `url('${bg}')`}\">\r\n            <div>\r\n                <img alt=\"item image\" [src]=\"bg | safe: 'url'\" />\r\n            </div>\r\n        </div>\r\n    }\r\n</ng-template>\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\r\n    <div class=\"upload-item\">\r\n        <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\r\n                      [ngTemplateOutletContext]=\"{bg: isImage || (item | isType: 'file') ? getUrl(item) : null}\">\r\n        </ng-container>\r\n        @if (!disabled) {\r\n            <close-btn class=\"remove-item-btn\" (click)=\"removeItem(index)\"></close-btn>\r\n        }\r\n<!--        <btn size=\"small\" class=\"download-item-btn\" icon=\"download\"></btn>-->\r\n    </div>\r\n</ng-template>\r\n\r\n<div class=\"file-upload\" [ngClass]=\"{disabled: disabled}\">\r\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n        <input type=\"file\"\r\n               #input\r\n               [disabled]=\"disabled\"\r\n               [multiple]=\"multiple\"\r\n               [accept]=\"acceptAttr\"\r\n               (dragenter)=\"onDragEnter($event)\"\r\n               (dragleave)=\"onDrop()\"\r\n               (drop)=\"onDrop()\"\r\n               (click)=\"onInputClick($event)\"\r\n               (blur)=\"onTouched($event)\"\r\n               (change)=\"onInputChange($event)\"/>\r\n        @if (message) {\r\n            <div class=\"upload-message\"\r\n                 [ngClass]=\"{'has-value': $any(value)?.length}\"\r\n                 [innerHTML]=\"message | translate | safe:'html'\">\r\n            </div>\r\n        }\r\n        <div class=\"upload-container\">\r\n\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                          [ngTemplateOutletContext]=\"{item: value, index: 0}\"\r\n                          *ngIf=\"!multiple && value\">\r\n            </ng-container>\r\n            <ng-container *ngIf=\"multiple\">\r\n                <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                              [ngTemplateOutletContext]=\"{item: item, index: ix}\"\r\n                              *ngFor=\"let item of $any(value); let ix = index\">\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <div class=\"upload-item\" *ngFor=\"let proc of processing\">\r\n                <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\r\n                              [ngTemplateOutletContext]=\"{bg: proc.preview}\">\r\n                </ng-container>\r\n                <div class=\"upload-progress\">\r\n                    <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\r\n                    <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        @if (!disabled) {\r\n            <btn class=\"upload-btn\" #uploadBtn [label]=\"buttonText\" (click)=\"input.click()\"></btn>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".file-upload{--upload-bg-lightness: 85%;--upload-bg-opacity: 1;--upload-padding: 5px;--upload-border-width: 2px;--upload-border-color: rgba(0, 0, 0, .25);--upload-progress-bg: var(--primary-color, var(--mat-sys-primary, black));--upload-progress-text: var(--text-color, var(--mat-sys-on-primary, white));--upload-item-size: 120px;--upload-item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #474747;--btn-distance: 3px;--btn-top-distance: var(--btn-distance);--btn-left-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);margin:5px 0}.file-upload *{box-sizing:border-box}.file-upload.disabled{--upload-bg-lightness: 75%}.file-upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.file-upload input[type=file]::file-selector-button{width:100%;height:100%}.file-upload .upload-input{width:100%;border:var(--upload-border-width) var(--upload-border-color) dashed;border-radius:var(--upload-item-radius);background-color:hsl(0,0%,var(--upload-bg-lightness),var(--upload-bg-opacity));transition:.2s;flex-wrap:wrap;position:relative;padding:var(--upload-padding)}.file-upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.file-upload .upload-input .upload-message.has-value{display:none}.file-upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--upload-item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.file-upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--upload-item-size);height:var(--upload-item-size);border-radius:var(--upload-item-radius);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.file-upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(15px)}.file-upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.file-upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.file-upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--upload-progress-bg);top:0}.file-upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--upload-progress-text)}.file-upload .upload-input.drop-allowed{--upload-bg-lightness: 95%}.file-upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.file-upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.file-upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.file-upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [API_SERVICE]
@@ -9356,13 +9377,13 @@ class WysiwygComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: WysiwygComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: WysiwygComponent, isStandalone: false, selector: "wysiwyg", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: WysiwygComponent, multi: true }
-        ], viewQueries: [{ propertyName: "editorElem", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wysiwyg form-control\" [ngClass]=\"{disabled: disabled}\">\n    <div #editor></div>\n</div>\n", styles: [".file-upload{--upload-bg-lightness: 85%;--upload-bg-opacity: 1;--upload-padding: 5px;--upload-border-width: 2px;--upload-border-color: rgba(0, 0, 0, .25);--upload-progress-bg: var(--primary-color, var(--mat-sys-primary, black));--upload-progress-text: var(--text-color, var(--mat-sys-on-primary, white));--upload-item-size: 120px;--upload-item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #474747;--btn-distance: 3px;--btn-top-distance: var(--btn-distance);--btn-left-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);margin:5px 0}.file-upload *{box-sizing:border-box}.file-upload.disabled{--upload-bg-lightness: 75%}.file-upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.file-upload input[type=file]::file-selector-button{width:100%;height:100%}.file-upload .upload-input{width:100%;border:var(--upload-border-width) var(--upload-border-color) dashed;border-radius:var(--upload-item-radius);background-color:hsl(0,0%,var(--upload-bg-lightness),var(--upload-bg-opacity));transition:.2s;flex-wrap:wrap;position:relative;padding:var(--upload-padding)}.file-upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.file-upload .upload-input .upload-message.has-value{display:none}.file-upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--upload-item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.file-upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--upload-item-size);height:var(--upload-item-size);border-radius:var(--upload-item-radius);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.file-upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(15px)}.file-upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.file-upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.file-upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--upload-progress-bg);top:0}.file-upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--upload-progress-text)}.file-upload .upload-input.drop-allowed{--upload-bg-lightness: 95%}.file-upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.file-upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.file-upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.file-upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "editorElem", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wysiwyg form-control\" [ngClass]=\"{disabled: disabled}\">\r\n    <div #editor></div>\r\n</div>\r\n", styles: [".file-upload{--upload-bg-lightness: 85%;--upload-bg-opacity: 1;--upload-padding: 5px;--upload-border-width: 2px;--upload-border-color: rgba(0, 0, 0, .25);--upload-progress-bg: var(--primary-color, var(--mat-sys-primary, black));--upload-progress-text: var(--text-color, var(--mat-sys-on-primary, white));--upload-item-size: 120px;--upload-item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #474747;--btn-distance: 3px;--btn-top-distance: var(--btn-distance);--btn-left-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);margin:5px 0}.file-upload *{box-sizing:border-box}.file-upload.disabled{--upload-bg-lightness: 75%}.file-upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.file-upload input[type=file]::file-selector-button{width:100%;height:100%}.file-upload .upload-input{width:100%;border:var(--upload-border-width) var(--upload-border-color) dashed;border-radius:var(--upload-item-radius);background-color:hsl(0,0%,var(--upload-bg-lightness),var(--upload-bg-opacity));transition:.2s;flex-wrap:wrap;position:relative;padding:var(--upload-padding)}.file-upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.file-upload .upload-input .upload-message.has-value{display:none}.file-upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--upload-item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.file-upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--upload-item-size);height:var(--upload-item-size);border-radius:var(--upload-item-radius);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.file-upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(15px)}.file-upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.file-upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.file-upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--upload-progress-bg);top:0}.file-upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--upload-progress-text)}.file-upload .upload-input.drop-allowed{--upload-bg-lightness: 95%}.file-upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.file-upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.file-upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.file-upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\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.19", ngImport: i0, type: WysiwygComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "wysiwyg", encapsulation: ViewEncapsulation.None, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: WysiwygComponent, multi: true }
-                    ], template: "<div class=\"wysiwyg form-control\" [ngClass]=\"{disabled: disabled}\">\n    <div #editor></div>\n</div>\n", styles: [".file-upload{--upload-bg-lightness: 85%;--upload-bg-opacity: 1;--upload-padding: 5px;--upload-border-width: 2px;--upload-border-color: rgba(0, 0, 0, .25);--upload-progress-bg: var(--primary-color, var(--mat-sys-primary, black));--upload-progress-text: var(--text-color, var(--mat-sys-on-primary, white));--upload-item-size: 120px;--upload-item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #474747;--btn-distance: 3px;--btn-top-distance: var(--btn-distance);--btn-left-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);margin:5px 0}.file-upload *{box-sizing:border-box}.file-upload.disabled{--upload-bg-lightness: 75%}.file-upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.file-upload input[type=file]::file-selector-button{width:100%;height:100%}.file-upload .upload-input{width:100%;border:var(--upload-border-width) var(--upload-border-color) dashed;border-radius:var(--upload-item-radius);background-color:hsl(0,0%,var(--upload-bg-lightness),var(--upload-bg-opacity));transition:.2s;flex-wrap:wrap;position:relative;padding:var(--upload-padding)}.file-upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.file-upload .upload-input .upload-message.has-value{display:none}.file-upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--upload-item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.file-upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--upload-item-size);height:var(--upload-item-size);border-radius:var(--upload-item-radius);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.file-upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(15px)}.file-upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.file-upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.file-upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--upload-progress-bg);top:0}.file-upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--upload-progress-text)}.file-upload .upload-input.drop-allowed{--upload-bg-lightness: 95%}.file-upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.file-upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.file-upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.file-upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\n"] }]
+                    ], template: "<div class=\"wysiwyg form-control\" [ngClass]=\"{disabled: disabled}\">\r\n    <div #editor></div>\r\n</div>\r\n", styles: [".file-upload{--upload-bg-lightness: 85%;--upload-bg-opacity: 1;--upload-padding: 5px;--upload-border-width: 2px;--upload-border-color: rgba(0, 0, 0, .25);--upload-progress-bg: var(--primary-color, var(--mat-sys-primary, black));--upload-progress-text: var(--text-color, var(--mat-sys-on-primary, white));--upload-item-size: 120px;--upload-item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #474747;--btn-distance: 3px;--btn-top-distance: var(--btn-distance);--btn-left-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);margin:5px 0}.file-upload *{box-sizing:border-box}.file-upload.disabled{--upload-bg-lightness: 75%}.file-upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.file-upload input[type=file]::file-selector-button{width:100%;height:100%}.file-upload .upload-input{width:100%;border:var(--upload-border-width) var(--upload-border-color) dashed;border-radius:var(--upload-item-radius);background-color:hsl(0,0%,var(--upload-bg-lightness),var(--upload-bg-opacity));transition:.2s;flex-wrap:wrap;position:relative;padding:var(--upload-padding)}.file-upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.file-upload .upload-input .upload-message.has-value{display:none}.file-upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--upload-item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.file-upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--upload-item-size);height:var(--upload-item-size);border-radius:var(--upload-item-radius);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.file-upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(15px)}.file-upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.file-upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.file-upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--upload-progress-bg);top:0}.file-upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--upload-progress-text)}.file-upload .upload-input.drop-allowed{--upload-bg-lightness: 95%}.file-upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.file-upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.file-upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.file-upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -9712,5 +9733,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExclusionsRenderer, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, RequestBag, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, RulerCanvasRenderer, SCHEMA_SELECTOR, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShapeGroup, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, SyncAsyncPipe, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, WysiwygComponent, addPts, cachedFactory, cancelablePromise, checkTransitions, clamp, computedPrevious, createTypedProvider, cssStyles, cssVariables, distance, distanceSq, dividePts, dotProduct, ensurePoint, eqPts, getComponentDef, getCssVariables, getRoot, gjkDistance, gjkIntersection, impatientPromise, injectOptions, isBrowser, isEqual, isPoint, isZero, lengthOfPt, lerpPts, md5, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, provideOptions, provideWithOptions, rotateDeg, rotateRad, selectorMatchesList, stringify, subPts, svgToDataUri, switchClass, toDegrees, toRadians, tripleProduct };
+export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExclusionsRenderer, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, RequestBag, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, RulerCanvasRenderer, SCHEMA_SELECTOR, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShapeGroup, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, SyncAsyncPipe, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, WysiwygComponent, addPts, cachedFactory, cancelablePromise, checkTransitions, clamp, computedPrevious, createTypedProvider, cssStyles, cssVariables, diffEntities, distance, distanceSq, dividePts, dotProduct, ensurePoint, eqPts, getComponentDef, getCssVariables, getRoot, gjkDistance, gjkIntersection, impatientPromise, injectOptions, isBrowser, isEqual, isPoint, isZero, lengthOfPt, lerpPts, md5, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, provideOptions, provideWithOptions, rotateDeg, rotateRad, selectorMatchesList, stringify, subPts, svgToDataUri, switchClass, toDegrees, toRadians, tripleProduct };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map