@stemy/ngx-utils 19.3.5 → 19.4.1

package/fesm2022/stemy-ngx-utils.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, PLATFORM_ID, Injectable, Inject, Optional, Injector, EventEmitter, isDevMode, ErrorHandler, createComponent, NgZone, Pipe, Directive, Input, Output, HostBinding, HostListener, forwardRef, Component, ViewEncapsulation, ContentChild, ViewChild, ContentChildren, APP_INITIALIZER, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { InjectionToken, PLATFORM_ID, Injectable, Inject, Optional, Injector, EventEmitter, isDevMode, ErrorHandler, createComponent, NgZone, Pipe, Directive, Input, Output, HostBinding, HostListener, ElementRef, forwardRef, Component, ViewEncapsulation, ContentChild, ViewChild, ContentChildren, APP_INITIALIZER, makeEnvironmentProviders, NgModule } from '@angular/core';
 import 'reflect-metadata';
 import * as i2 from '@angular/router';
 import { ActivatedRouteSnapshot, Scroll, NavigationEnd, Router, DefaultUrlSerializer, UrlTree, UrlSegmentGroup, UrlSegment, UrlSerializer, ROUTES } from '@angular/router';
@@ -17,7 +17,7 @@ import JSON5 from 'json5';
 import * as i1$2 from '@angular/platform-browser';
 import { ɵDomEventsPlugin as _DomEventsPlugin, EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
 import elementResizeDetectorMaker from 'element-resize-detector';
-import { autoPlacement, autoUpdate, computePosition } from '@floating-ui/dom';
+import { shift, limitShift, autoPlacement, arrow, computePosition, autoUpdate } from '@floating-ui/dom';
 import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 
@@ -4673,7 +4673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 class GetTypePipe {
     transform(value) {
-        return typeof value;
+        return ObjectUtils.getType(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GetTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GetTypePipe, isStandalone: false, name: "getType" }); }
@@ -4782,7 +4782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 class IsTypePipe {
     transform(value, type) {
-        return (typeof value) === type;
+        return ObjectUtils.getType(value) === type;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: IsTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: IsTypePipe, isStandalone: false, name: "isType" }); }
@@ -5150,6 +5150,7 @@ class TranslatePipe {
                 this.lastValue = query;
                 return this.lastValue;
             }
+            this.lastValue = this.language.getTranslationSync(query, this.params);
             this.language.getTranslation(query, this.params).then(value => {
                 this.lastValue = value;
                 if (!this.cdr["destroyed"]) {
@@ -5220,15 +5221,15 @@ class AsyncMethodBase {
         ev?.preventDefault();
         if (this.disabled)
             return true;
-        this.callMethod();
+        this.callMethod(ev);
         return true;
     }
-    callMethod() {
+    callMethod(ev) {
         if (this.loading)
             return true;
         this.loading = true;
         const method = this.getMethod();
-        const result = !method ? null : method(this.context);
+        const result = !method ? null : method(this.context, ev);
         if (!(result instanceof Promise)) {
             this.loading = false;
             return false;
@@ -5595,8 +5596,10 @@ class PaginationDirective {
     get items() {
         return this.data ? this.data.items : [];
     }
-    constructor(zone) {
+    constructor(zone, renderer, element) {
         this.zone = zone;
+        this.renderer = renderer;
+        this.element = element;
         this.pageChange = new EventEmitter();
         this.onRefresh = new EventEmitter();
         this.updateTimer = TimerUtils.createTimeout(() => this.loadData(), this.updateTime);
@@ -5624,6 +5627,7 @@ class PaginationDirective {
     loadData() {
         if (!this.loader)
             return;
+        this.renderer.addClass(this.element.nativeElement, "loading");
         this.loader(this.page, this.itemsPerPage).then(data => {
             this.maxPage = !data || data.total <= 0 ? 1 : Math.floor((data.total - 1) / this.itemsPerPage) + 1;
             this.data = data;
@@ -5639,10 +5643,13 @@ class PaginationDirective {
                 this.paginate(this.maxPage);
                 return;
             }
-            this.zone.run(() => this.onRefresh.emit(this));
+            this.zone.run(() => {
+                this.renderer.removeClass(this.element.nativeElement, "loading");
+                this.onRefresh.emit(this);
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PaginationDirective, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PaginationDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: PaginationDirective, isStandalone: false, selector: "[pagination]", inputs: { loader: ["pagination", "loader"], page: "page", itemsPerPage: "itemsPerPage", updateTime: "updateTime", waitFor: "waitFor" }, outputs: { pageChange: "pageChange", onRefresh: "onRefresh" }, exportAs: ["pagination"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PaginationDirective, decorators: [{
@@ -5652,7 +5659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: "[pagination]",
                     exportAs: "pagination"
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { loader: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { loader: [{
                 type: Input,
                 args: ["pagination"]
             }], page: [{
@@ -5847,7 +5854,8 @@ class DropdownDirective {
         this.opened = false;
         this.disabled = false;
         this.closeInside = true;
-        this.attachToRoot = true;
+        this.attachTo = null;
+        this.boundary = "clippingAncestors";
         this.mobileViewUnder = 0;
         this.keyboardHandler = true;
         this.onShown = new EventEmitter();
@@ -5937,7 +5945,7 @@ class DropdownDirective {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownDirective, isStandalone: false, selector: "[dd],[drop-down]", inputs: { closeInside: "closeInside", attachToRoot: "attachToRoot", placement: "placement", autoPlacement: "autoPlacement", mobileViewUnder: "mobileViewUnder", keyboardHandler: "keyboardHandler", isDisabled: "isDisabled" }, outputs: { onShown: "onShown", onHidden: "onHidden", onKeyboard: "onKeyboard" }, host: { listeners: { "keydown.enter": "show($event)", "keydown.space": "show($event)" }, properties: { "class.open": "this.isOpened", "class.disabled": "this.getDisabled" } }, exportAs: ["dropdown"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownDirective, isStandalone: false, selector: "[dd],[drop-down]", inputs: { closeInside: "closeInside", attachTo: "attachTo", boundary: "boundary", placement: "placement", autoPlacement: "autoPlacement", mobileViewUnder: "mobileViewUnder", keyboardHandler: "keyboardHandler", isDisabled: "isDisabled" }, outputs: { onShown: "onShown", onHidden: "onHidden", onKeyboard: "onKeyboard" }, host: { listeners: { "keydown.enter": "show($event)", "keydown.space": "show($event)" }, properties: { "class.open": "this.isOpened", "class.disabled": "this.getDisabled" } }, exportAs: ["dropdown"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownDirective, decorators: [{
             type: Directive,
@@ -5948,7 +5956,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { closeInside: [{
                 type: Input
-            }], attachToRoot: [{
+            }], attachTo: [{
+                type: Input
+            }], boundary: [{
                 type: Input
             }], placement: [{
                 type: Input
@@ -5999,37 +6009,64 @@ class DropdownContentDirective {
         this.subscription = ObservableUtils.multiSubscription(this.dropdown.onShown.subscribe(() => this.createView()), this.dropdown.onHidden.subscribe(() => this.destroyView()));
     }
     ngOnDestroy() {
-        // this.observer?.unobserve(this.element.nativeElement);
         this.subscription?.unsubscribe();
         this.destroyView();
     }
     createView(init = false) {
+        if (this.dropdown.contentElement)
+            return;
         const mobileWidth = this.dropdown.mobileViewUnder || 0;
         const ref = this.dropdown.nativeElement;
-        const content = this.createWrapper();
+        const [content, arrowEl] = this.createWrapper();
         this.dropdown.contentElement = content;
         // Set up floating UI positioning settings
-        const placement = this.dropdown.placement || "bottom";
-        const strategy = this.dropdown.attachToRoot && this.rootElem ? "fixed" : "absolute";
         const middleware = [];
         if (this.dropdown.autoPlacement) {
-            middleware.push(autoPlacement(this.dropdown.autoPlacement));
-        }
+            middleware.push(shift({
+                boundary: this.dropdown.boundary,
+                limiter: limitShift()
+            }), autoPlacement(this.dropdown.autoPlacement));
+        }
+        middleware.push(arrow({ element: arrowEl }));
+        const compute = async () => {
+            const isMobileView = window.innerWidth <= mobileWidth;
+            if (isMobileView) {
+                return {
+                    styles: {
+                        left: "0px", top: "0px", right: "0px", bottom: "0px",
+                        position: "fixed",
+                    },
+                    placement: "top",
+                    isMobileView
+                };
+            }
+            const { x, y, placement, middlewareData } = await computePosition(ref, content, {
+                strategy: "absolute",
+                placement: this.dropdown.placement || "bottom",
+                middleware
+            });
+            return {
+                styles: {
+                    left: `${x}px`, top: `${y}px`, right: null, bottom: null,
+                    position: "absolute",
+                },
+                placement,
+                isMobileView,
+                middlewareData
+            };
+        };
         // Set up floating UI auto update
         this.cleanUp = autoUpdate(ref, content, () => {
-            computePosition(ref, content, {
-                strategy,
-                placement,
-                middleware
-            }).then(({ x, y, placement }) => {
-                const isMobileView = window.innerWidth <= mobileWidth;
-                Object.assign(content.style, {
+            compute().then(({ styles, placement, isMobileView, middlewareData }) => {
+                if (middlewareData?.arrow) {
+                    const { x, y } = middlewareData.arrow;
+                    Object.assign(arrowEl.style, {
+                        left: x != null ? `${x}px` : ``,
+                        top: y != null ? `${y}px` : ``,
+                    });
+                }
+                Object.assign(content.style, styles, {
                     opacity: init ? "0" : "1",
-                    position: isMobileView ? "fixed" : strategy,
-                    left: isMobileView ? `0px` : `${x}px`,
-                    right: isMobileView ? `0px` : undefined,
-                    top: isMobileView ? `0px` : `${y}px`,
-                    bottom: isMobileView ? `0px` : undefined,
                     zIndex: `var(--dd-z-index, 100)`
                 });
                 const refRect = ref.getBoundingClientRect();
@@ -6045,9 +6082,11 @@ class DropdownContentDirective {
                     content.classList.add(newPlacement);
                 }
                 if (isMobileView) {
+                    content.classList.remove(`dropdown-content-desktop`);
                     content.classList.add(`dropdown-content-mobile`);
                 }
                 else {
+                    content.classList.add(`dropdown-content-desktop`);
                     content.classList.remove(`dropdown-content-mobile`);
                 }
                 rectProps.forEach(prop => {
@@ -6059,16 +6098,40 @@ class DropdownContentDirective {
         });
     }
     destroyView() {
+        if (!this.dropdown.contentElement)
+            return;
+        this.dropdown.contentElement.remove();
+        this.dropdown.contentElement = null;
         this.vcr.clear();
-        this.dropdown.contentElement?.remove();
         this.cleanUp?.();
     }
+    whereToAttach() {
+        const target = this.dropdown.attachTo;
+        if (target === "root" && this.rootElem) {
+            return this.rootElem;
+        }
+        if (target instanceof ElementRef) {
+            return target.nativeElement;
+        }
+        if (target instanceof HTMLElement) {
+            return target;
+        }
+        const anchor = this.vcr.element.nativeElement;
+        return anchor?.parentElement || this.rootElem;
+    }
     createWrapper() {
         const wrapper = document.createElement("div");
+        const arrow = document.createElement("div");
+        arrow.classList.add(`dropdown-content-arrow`);
+        arrow.style.position = `absolute`;
+        wrapper.appendChild(arrow);
         const ref = this.vcr.createEmbeddedView(this.templateRef);
         ref.rootNodes.forEach(node => wrapper.appendChild(node));
-        if (this.dropdown.attachToRoot && this.rootElem) {
-            this.rootElem.appendChild(wrapper);
+        ref.detectChanges();
+        this.attachTo = this.whereToAttach();
+        this.attachTo.appendChild(wrapper);
+        this.attachOutside = !this.dropdown.nativeElement?.contains(this.attachTo);
+        if (this.attachOutside) {
             const referenceStyles = getCssVariables(this.dropdown.nativeElement);
             const wrapperStyles = getCssVariables(wrapper);
             Object.keys(referenceStyles).forEach(key => {
@@ -6077,10 +6140,6 @@ class DropdownContentDirective {
                 }
             });
         }
-        else {
-            const anchor = this.vcr.element.nativeElement;
-            anchor?.parentElement?.appendChild(wrapper);
-        }
         const autoPlacement = this.dropdown.autoPlacement;
         if (this.lastPlacement) {
             wrapper.classList.add(this.lastPlacement);
@@ -6097,7 +6156,7 @@ class DropdownContentDirective {
             }
         }
         wrapper.classList.add("dropdown-content-wrap");
-        return wrapper;
+        return [wrapper, arrow];
     }
     initialize() {
         this.createView(true);
@@ -6129,21 +6188,24 @@ class DropdownToggleDirective extends AsyncMethodBase {
         super(toaster, cdr);
         this.element = element;
         this.dropdown = dropdown;
+        this.switch = true;
     }
     getMethod() {
         return this.beforeOpen;
     }
-    callMethod() {
+    callMethod(ev) {
         if (this.dropdown.isOpened) {
+            if (!this.switch)
+                return true;
             this.dropdown.hide();
         }
-        else if (!super.callMethod()) {
+        else if (!super.callMethod(ev)) {
             this.dropdown.show();
         }
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownToggleDirective, deps: [{ token: i0.ElementRef }, { token: DropdownDirective }, { token: TOASTER_SERVICE }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownToggleDirective, isStandalone: false, selector: "[dropdownToggle]", inputs: { beforeOpen: "beforeOpen" }, exportAs: ["dropdown-toggle"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownToggleDirective, isStandalone: false, selector: "[dropdownToggle]", inputs: { beforeOpen: "beforeOpen", switch: "switch" }, exportAs: ["dropdown-toggle"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownToggleDirective, decorators: [{
             type: Directive,
@@ -6157,6 +6219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     args: [TOASTER_SERVICE]
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { beforeOpen: [{
                 type: Input
+            }], switch: [{
+                type: Input
             }] } });
 
 class UnorderedListItemDirective {
@@ -6384,7 +6448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 class DropdownBoxComponent {
     constructor() {
         this.closeInside = true;
-        this.attachToRoot = true;
+        this.attachTo = "root";
         this.placement = "bottom";
         this.crossAxis = false;
         this.autoAlignment = true;
@@ -6407,14 +6471,14 @@ class DropdownBoxComponent {
         this.makeAutoPlacementOpts();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DropdownBoxComponent, isStandalone: false, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachToRoot: "attachToRoot", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachToRoot]=\"attachToRoot\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachToRoot", "placement", "autoPlacement", "mobileViewUnder", "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"], exportAs: ["dropdown-toggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DropdownBoxComponent, isStandalone: false, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachTo: "attachTo", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachTo]=\"attachTo\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownBoxComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dropdown-box", template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachToRoot]=\"attachToRoot\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dropdown-box", template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachTo]=\"attachTo\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { closeInside: [{
                 type: Input
-            }], attachToRoot: [{
+            }], attachTo: [{
                 type: Input
             }], placement: [{
                 type: Input
@@ -6490,11 +6554,11 @@ class PaginationMenuComponent {
         this.pages = pages;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PaginationMenuComponent, deps: [{ token: StateService }, { token: PaginationDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: PaginationMenuComponent, isStandalone: false, selector: "pagination-menu", inputs: { maxSize: "maxSize", urlParam: "urlParam", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pagination\">\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: [".pagination-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--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-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}.pagination-menu *{box-sizing:border-box}.pagination-menu ul{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:5px;overflow:hidden;min-width:fit-content;display:flex}.pagination-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}.pagination-menu li:last-child{border-right:none}.pagination-menu li:hover,.pagination-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pagination-menu a{display:block;min-width:36px;height:auto;line-height:20px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pagination-menu a.boundary-link,.pagination-menu a.direction-link{position:relative}.pagination-menu a.boundary-link:before,.pagination-menu a.boundary-link:after,.pagination-menu a.direction-link:before,.pagination-menu a.direction-link:after{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)}.pagination-menu a.direction-link:before{display:none}.pagination-menu a.direction-link:after{translate:-50% 0}.pagination-menu a.boundary-link:before{translate:-100% 0}.pagination-menu a.boundary-link.previous:before,.pagination-menu a.boundary-link.previous:after,.pagination-menu a.direction-link.previous:before,.pagination-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.1.5", type: PaginationMenuComponent, isStandalone: false, selector: "pagination-menu", inputs: { maxSize: "maxSize", urlParam: "urlParam", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pagination\">\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: [".pagination-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}.pagination-menu *{box-sizing:border-box}.pagination-menu ul{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}.pagination-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}.pagination-menu li:last-child{border-right:none}.pagination-menu li:not(.disabled):hover,.pagination-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pagination-menu li.disabled a{cursor:default}.pagination-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}.pagination-menu a.boundary-link,.pagination-menu a.direction-link{position:relative}.pagination-menu a.boundary-link:before,.pagination-menu a.boundary-link:after,.pagination-menu a.direction-link:before,.pagination-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)}.pagination-menu a.direction-link:before{display:none}.pagination-menu a.direction-link:after{translate:-50% 0}.pagination-menu a.boundary-link:before{translate:-100% 0}.pagination-menu a.boundary-link.previous:before,.pagination-menu a.boundary-link.previous:after,.pagination-menu a.direction-link.previous:before,.pagination-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.1.5", ngImport: i0, type: PaginationMenuComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "pagination-menu", template: "<div class=\"pagination-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pagination\">\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: [".pagination-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--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-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}.pagination-menu *{box-sizing:border-box}.pagination-menu ul{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:5px;overflow:hidden;min-width:fit-content;display:flex}.pagination-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}.pagination-menu li:last-child{border-right:none}.pagination-menu li:hover,.pagination-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pagination-menu a{display:block;min-width:36px;height:auto;line-height:20px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pagination-menu a.boundary-link,.pagination-menu a.direction-link{position:relative}.pagination-menu a.boundary-link:before,.pagination-menu a.boundary-link:after,.pagination-menu a.direction-link:before,.pagination-menu a.direction-link:after{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)}.pagination-menu a.direction-link:before{display:none}.pagination-menu a.direction-link:after{translate:-50% 0}.pagination-menu a.boundary-link:before{translate:-100% 0}.pagination-menu a.boundary-link.previous:before,.pagination-menu a.boundary-link.previous:after,.pagination-menu a.direction-link.previous:before,.pagination-menu a.direction-link.previous:after{rotate:180deg}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "pagination-menu", template: "<div class=\"pagination-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pagination\">\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: [".pagination-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}.pagination-menu *{box-sizing:border-box}.pagination-menu ul{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}.pagination-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}.pagination-menu li:last-child{border-right:none}.pagination-menu li:not(.disabled):hover,.pagination-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pagination-menu li.disabled a{cursor:default}.pagination-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}.pagination-menu a.boundary-link,.pagination-menu a.direction-link{position:relative}.pagination-menu a.boundary-link:before,.pagination-menu a.boundary-link:after,.pagination-menu a.direction-link:before,.pagination-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)}.pagination-menu a.direction-link:before{display:none}.pagination-menu a.direction-link:after{translate:-50% 0}.pagination-menu a.boundary-link:before{translate:-100% 0}.pagination-menu a.boundary-link.previous:before,.pagination-menu a.boundary-link.previous:after,.pagination-menu a.direction-link.previous:before,.pagination-menu a.direction-link.previous:after{rotate:180deg}\n"] }]
         }], ctorParameters: () => [{ type: StateService }, { type: PaginationDirective }], propDecorators: { maxSize: [{
                 type: Input
             }], urlParam: [{
@@ -6722,11 +6786,11 @@ class DynamicTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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 draggable=\"true\"\n        #elem\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    <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-template>\n\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\"\n     [updateTime]=\"updateTime\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\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        <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        <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\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        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\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", 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 .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", "attachToRoot", "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: "14.0.0", version: "19.1.5", 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 draggable=\"true\"\n        #elem\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        <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\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        <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        <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\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        <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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", 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 draggable=\"true\"\n        #elem\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    <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-template>\n\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\"\n     [updateTime]=\"updateTime\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\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        <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        <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\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        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\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", 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 .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\">\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 draggable=\"true\"\n        #elem\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        <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\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        <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        <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\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        <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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
                 type: Input
             }], data: [{
@@ -6879,7 +6943,8 @@ class UploadComponent {
         this.toaster = toaster;
         this.value = null;
         this.disabled = false;
-        this.fileImageCache = [];
+        this.inline = false;
+        this.fileImageCache = new Map();
         this.buttonText = "button.select-files";
         this.onUploaded = new EventEmitter();
         this.onRemove = new EventEmitter();
@@ -6974,7 +7039,7 @@ class UploadComponent {
             return;
         }
         this.processFiles(this.multiple ? files : files.slice(0, 1)).then(results => {
-            const ids = results.map(t => t._id || t.id);
+            const ids = results.map(t => t.file || t._id || t.id);
             this.writeValue(this.multiple ? ids : (ids[0] || null));
             this.onUploaded.emit(results);
         });
@@ -6982,12 +7047,10 @@ class UploadComponent {
     }
     getUrl(image) {
         if (ObjectUtils.isBlob(image)) {
-            let cache = this.fileImageCache.find(t => t.file == image);
-            if (!cache) {
-                cache = { file: image, url: URL.createObjectURL(image) };
-                this.fileImageCache.push(cache);
+            if (!this.fileImageCache.has(image)) {
+                this.fileImageCache.set(image, URL.createObjectURL(image));
             }
-            return cache.url;
+            return this.fileImageCache.get(image);
         }
         const url = !image ? null : image.imageUrl || image;
         if (!ObjectUtils.isString(url))
@@ -7023,6 +7086,7 @@ class UploadComponent {
             };
             process.promise = FileUtils.getFilePreview(file).then(preview => {
                 process.preview = `url('${preview}')`;
+                this.fileImageCache.set(file, preview);
                 this.cdr.detectChanges();
             });
             return process;
@@ -7030,6 +7094,12 @@ class UploadComponent {
         const baseUrl = this.baseUrl || this.api.url("assets");
         const requests = this.processing.map(async (p) => {
             await p.promise;
+            if (this.inline) {
+                return {
+                    filename: p.file?.name,
+                    file: p.file,
+                };
+            }
             const request = this.http.post(baseUrl, makeUpload(p.file), {
                 headers, observe: "events", reportProgress: true
             });
@@ -7057,11 +7127,11 @@ class UploadComponent {
         return results.filter(r => r !== null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: API_SERVICE }, { token: TOASTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", accept: "accept", baseUrl: "baseUrl", message: "message", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded", onRemove: "onRemove" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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: forwardRef(() => UploadComponent),
                 multi: true,
-            }], queries: [{ propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ buttonText | translate }}\n    </a>\n</ng-template>\n<ng-template #defaultDownloadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ 'button.download' | translate }}\n    </a>\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\n    <div class=\"upload-item\" [ngStyle]=\"!isImage ? {} : {backgroundImage: getBgUrl(item)}\">\n        <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\n    </div>\n</ng-template>\n\n<div class=\"upload\">\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\n        <input type=\"file\"\n               #input\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        <div class=\"upload-message\"\n             [ngClass]=\"{'has-value': value?.length}\"\n             [innerHTML]=\"message | translate | safe:'html'\"\n             *ngIf=\"message\">\n        </div>\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: image, index: ix}\"\n                              *ngFor=\"let image of value; let ix = index\">\n                </ng-container>\n            </ng-container>\n\n            <div class=\"upload-item\"\n                 [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\n                 *ngFor=\"let proc of processing\">\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        </div>\n        <div class=\"upload-btn\" (click)=\"input.click()\">\n            <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\n                          [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white));--item-size: 120px;--item-radius: 5px;--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;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance)}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:var(--item-radius);background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.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}.upload .upload-input .upload-message.has-value{display:none}.upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--item-size);height:var(--item-size);border-radius:var(--item-radius);background:#ffffffbf center center no-repeat;background-size:cover;display:flex;overflow:hidden}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;align-self:center;justify-self:center;background:#ffffff80}.upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--background);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--text)}.upload .upload-input.drop-allowed{background-color:#0003;border-color:gray}.upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.upload a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--remove-top-distance);right:var(--remove-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.upload a.remove-item-btn:before,.upload 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}.upload 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: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+            }], queries: [{ propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ buttonText | translate }}\n    </a>\n</ng-template>\n<ng-template #defaultDownloadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ 'button.download' | translate }}\n    </a>\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\n    <div class=\"upload-item\" [ngStyle]=\"isImage || (item | isType: 'file') ? {backgroundImage: getBgUrl(item)} : {}\">\n        <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\n    </div>\n</ng-template>\n\n<div class=\"upload\">\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\n        <input type=\"file\"\n               #input\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        <div class=\"upload-message\"\n             [ngClass]=\"{'has-value': value?.length}\"\n             [innerHTML]=\"message | translate | safe:'html'\"\n             *ngIf=\"message\">\n        </div>\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: image, index: ix}\"\n                              *ngFor=\"let image of value; let ix = index\">\n                </ng-container>\n            </ng-container>\n\n            <div class=\"upload-item\"\n                 [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\n                 *ngFor=\"let proc of processing\">\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        </div>\n        <div class=\"upload-btn\" (click)=\"input.click()\">\n            <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\n                          [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white));--item-size: 120px;--item-radius: 5px;--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;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance)}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:var(--item-radius);background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.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}.upload .upload-input .upload-message.has-value{display:none}.upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--item-size);height:var(--item-size);border-radius:var(--item-radius);background:#ffffffbf center center no-repeat;background-size:cover;display:flex;overflow:hidden}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;align-self:center;justify-self:center;background:#ffffff80}.upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--background);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--text)}.upload .upload-input.drop-allowed{background-color:#0003;border-color:gray}.upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.upload a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--remove-top-distance);right:var(--remove-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.upload a.remove-item-btn:before,.upload 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}.upload 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: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.1.5", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
@@ -7069,7 +7139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => UploadComponent),
                             multi: true,
-                        }], template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ buttonText | translate }}\n    </a>\n</ng-template>\n<ng-template #defaultDownloadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ 'button.download' | translate }}\n    </a>\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\n    <div class=\"upload-item\" [ngStyle]=\"!isImage ? {} : {backgroundImage: getBgUrl(item)}\">\n        <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\n    </div>\n</ng-template>\n\n<div class=\"upload\">\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\n        <input type=\"file\"\n               #input\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        <div class=\"upload-message\"\n             [ngClass]=\"{'has-value': value?.length}\"\n             [innerHTML]=\"message | translate | safe:'html'\"\n             *ngIf=\"message\">\n        </div>\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: image, index: ix}\"\n                              *ngFor=\"let image of value; let ix = index\">\n                </ng-container>\n            </ng-container>\n\n            <div class=\"upload-item\"\n                 [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\n                 *ngFor=\"let proc of processing\">\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        </div>\n        <div class=\"upload-btn\" (click)=\"input.click()\">\n            <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\n                          [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white));--item-size: 120px;--item-radius: 5px;--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;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance)}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:var(--item-radius);background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.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}.upload .upload-input .upload-message.has-value{display:none}.upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--item-size);height:var(--item-size);border-radius:var(--item-radius);background:#ffffffbf center center no-repeat;background-size:cover;display:flex;overflow:hidden}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;align-self:center;justify-self:center;background:#ffffff80}.upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--background);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--text)}.upload .upload-input.drop-allowed{background-color:#0003;border-color:gray}.upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.upload a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--remove-top-distance);right:var(--remove-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.upload a.remove-item-btn:before,.upload 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}.upload a.remove-item-btn:after{--rotation: -45deg}\n"] }]
+                        }], template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ buttonText | translate }}\n    </a>\n</ng-template>\n<ng-template #defaultDownloadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ 'button.download' | translate }}\n    </a>\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\n    <div class=\"upload-item\" [ngStyle]=\"isImage || (item | isType: 'file') ? {backgroundImage: getBgUrl(item)} : {}\">\n        <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\n    </div>\n</ng-template>\n\n<div class=\"upload\">\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\n        <input type=\"file\"\n               #input\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        <div class=\"upload-message\"\n             [ngClass]=\"{'has-value': value?.length}\"\n             [innerHTML]=\"message | translate | safe:'html'\"\n             *ngIf=\"message\">\n        </div>\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: image, index: ix}\"\n                              *ngFor=\"let image of value; let ix = index\">\n                </ng-container>\n            </ng-container>\n\n            <div class=\"upload-item\"\n                 [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\n                 *ngFor=\"let proc of processing\">\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        </div>\n        <div class=\"upload-btn\" (click)=\"input.click()\">\n            <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\n                          [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white));--item-size: 120px;--item-radius: 5px;--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;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance)}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:var(--item-radius);background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.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}.upload .upload-input .upload-message.has-value{display:none}.upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--item-size);height:var(--item-size);border-radius:var(--item-radius);background:#ffffffbf center center no-repeat;background-size:cover;display:flex;overflow:hidden}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;align-self:center;justify-self:center;background:#ffffff80}.upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--background);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--text)}.upload .upload-input.drop-allowed{background-color:#0003;border-color:gray}.upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.upload a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--remove-top-distance);right:var(--remove-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.upload a.remove-item-btn:before,.upload 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}.upload a.remove-item-btn:after{--rotation: -45deg}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [API_SERVICE]
@@ -7080,6 +7150,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], inline: [{
+                type: Input
             }], accept: [{
                 type: Input
             }], baseUrl: [{
@@ -7421,6 +7493,9 @@ function loadBaseHref(baseUrl) {
         return "/";
     }
 }
+function getRootElement() {
+    return typeof document !== "undefined" ? document.body : null;
+}
 class NgxUtilsModule {
     static getProviders(config) {
         return [
@@ -7468,7 +7543,7 @@ class NgxUtilsModule {
             },
             {
                 provide: ROOT_ELEMENT,
-                useValue: null
+                useFactory: getRootElement
             },
             {
                 provide: RESIZE_DELAY,