@stemy/ngx-utils 19.6.12 → 19.7.1

package/fesm2022/stemy-ngx-utils.mjs

@@ -1,10 +1,10 @@
 import 'zone.js';
 import 'reflect-metadata';
 import * as i0 from '@angular/core';
-import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, untracked, computed, signal, inject, DestroyRef, isDevMode, ErrorHandler, EventEmitter, createComponent, NgZone, Pipe, input, output, ChangeDetectorRef, ElementRef, effect, HostListener, Directive, Input, HostBinding, Output, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, ContentChildren, model, contentChildren, APP_INITIALIZER, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, untracked, computed, signal, inject, DestroyRef, isDevMode, ErrorHandler, EventEmitter, createComponent, NgZone, Pipe, input, output, ChangeDetectorRef, ElementRef, effect, HostListener, Directive, Input, HostBinding, Output, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, ContentChildren, model, contentChildren, provideAppInitializer, makeEnvironmentProviders, NgModule } from '@angular/core';
 import * as i2 from '@angular/router';
 import { ActivatedRouteSnapshot, Scroll, NavigationEnd, Router, DefaultUrlSerializer, UrlTree, UrlSegmentGroup, UrlSegment, UrlSerializer, ROUTES } from '@angular/router';
-import { BehaviorSubject, Observable, firstValueFrom, Subject, Subscription, from, delay, timer, TimeoutError, combineLatest, lastValueFrom } from 'rxjs';
+import { BehaviorSubject, Observable, firstValueFrom, Subject, Subscription, from, delay, timer, TimeoutError, combineLatest, of, lastValueFrom } from 'rxjs';
 import { skipWhile, debounceTime, distinctUntilChanged, map, filter, mergeMap, timeout } from 'rxjs/operators';
 import * as i1$3 from '@angular/common';
 import { isPlatformBrowser, isPlatformServer, DOCUMENT, APP_BASE_HREF, CommonModule } from '@angular/common';
@@ -471,7 +471,6 @@ const TOASTER_SERVICE = new InjectionToken("toaster-service");
 const DIALOG_SERVICE = new InjectionToken("dialog-service");
 const SOCKET_IO_PATH = new InjectionToken("socket-io-path");
 const PROMISE_SERVICE = new InjectionToken("promise-service");
-const WASI_IMPLEMENTATION = new InjectionToken("wasi-implementation");
 const EXPRESS_REQUEST = new InjectionToken("express-request");
 const API_SERVICE = new InjectionToken("api-service");
 const DYNAMIC_ENTRY_COMPONENTS = new InjectionToken("dynamic-entry-components");
@@ -1137,6 +1136,16 @@ const shg_table = [
     24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
     24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24
 ];
+function drawRect(ctx, w, h) {
+    ctx.beginPath();
+    ctx.rect(-w / 2, -h / 2, w, h);
+    ctx.closePath();
+}
+function drawOval(ctx, w, h) {
+    ctx.beginPath();
+    ctx.ellipse(0, 0, w / 2, h / 2, 0, 0, Math.PI * 2);
+    ctx.closePath();
+}
 class CanvasUtils {
     static manipulatePixels(canvas, ctx, colorTransformer) {
         const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -1720,102 +1729,228 @@ class FileSystemEntry {
     }
 }
 
-class Rect {
-    get center() {
-        return new Point(this.x, this.y);
-    }
-    get left() {
-        return this.x - this.width * .5;
-    }
-    get right() {
-        return this.x + this.width * .5;
-    }
-    get bottom() {
-        return this.y - this.height * .5;
-    }
-    get top() {
-        return this.y + this.height * .5;
-    }
-    constructor(x, y, width, height, rotation = 0) {
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.height = height;
-        this.rotation = rotation;
-    }
-    distance(p) {
-        p = new Point(p.x, p.y).rotateAround(this.center, -this.rotation);
-        const x = Math.max(this.left - p.x, 0, p.x - this.right);
-        const y = Math.max(this.bottom - p.y, 0, p.y - this.top);
-        return Math.sqrt(x * x + y * y);
-    }
+function dotProduct(a, b) {
+    return a.x * b.x + a.y * b.y;
+}
+function isPoint(v) {
+    return typeof v === "object" && !isNaN(v.x) && !isNaN(v.y);
+}
+function perpendicular(p) {
+    return { x: -p.y, y: +p.x };
+}
+function ptAdd(a, b) {
+    return { x: a.x + b.x, y: a.y + b.y };
+}
+function ptDistance(a, b) {
+    const x = b.x - a.x;
+    const y = b.y - a.y;
+    return Math.sqrt(x * x + y * y);
+}
+function ptLength(p) {
+    return Math.hypot(p.x, p.y);
+}
+function ptMultiply(a, b) {
+    const s = isPoint(b) ? b : { x: b, y: b };
+    return { x: a.x * s.x, y: a.y * s.y };
+}
+function ptSubtract(a, b) {
+    return { x: a.x - b.x, y: a.y - b.y };
+}
+function rotateDeg(p, ang) {
+    return rotateRad(p, toRadians(ang));
+}
+function rotateRad(p, ang) {
+    const c = Math.cos(ang), s = Math.sin(ang);
+    return { x: p.x * c - p.y * s, y: p.x * s + p.y * c };
+}
+function toDegrees(rad) {
+    return rad * 180 / Math.PI;
+}
+function toRadians(deg) {
+    return deg * Math.PI / 180;
+}
+
+function combineA(simplex, bary) {
+    let out = { x: 0, y: 0 };
+    for (let i = 0; i < simplex.length; i++)
+        out = ptAdd(out, ptMultiply(simplex[i].a, bary[i] || 0));
+    return out;
+}
+function combineB(simplex, bary) {
+    let out = { x: 0, y: 0 };
+    for (let i = 0; i < simplex.length; i++)
+        out = ptAdd(out, ptMultiply(simplex[i].b, bary[i] || 0));
+    return out;
+}
+function closestPointToOrigin(simplex) {
+    // returns { simplex: prunedSimplex, closest: vec, bary: weights[] }
+    if (simplex.length === 1) {
+        return { simplex, closest: simplex[0].p, bary: [1] };
+    }
+    if (simplex.length === 2) {
+        const A = simplex[0], B = simplex[1];
+        const ab = ptSubtract(B.p, A.p);
+        const ab2 = dotProduct(ab, ab);
+        if (ab2 <= 1e-18) {
+            return { simplex: [B], closest: B.p, bary: [1] };
+        }
+        const t = Math.max(0, Math.min(1, -dotProduct(A.p, ab) / ab2));
+        const closest = ptAdd(A.p, ptMultiply(ab, t));
+        if (t <= 1e-9) {
+            return { simplex: [A], closest: A.p, bary: [1] };
+        }
+        if (t >= 1 - 1e-9) {
+            return { simplex: [B], closest: B.p, bary: [1] };
+        }
+        return { simplex: [A, B], closest, bary: [1 - t, t] };
+    }
+    // Triangle case (A,B,C) – use Ericson's closest-point to triangle (p=origin)
+    const A = simplex[0], B = simplex[1], C = simplex[2];
+    const a = A.p, b = B.p, c = C.p;
+    const ab = ptSubtract(b, a), ac = ptSubtract(c, a), ap = { x: -a.x, y: -a.y };
+    const d1 = dotProduct(ab, ap), d2 = dotProduct(ac, ap);
+    if (d1 <= 0 && d2 <= 0)
+        return { simplex: [A], closest: a, bary: [1] };
+    const bp = { x: -b.x, y: -b.y };
+    const d3 = dotProduct(ab, bp), d4 = dotProduct(ac, bp);
+    if (d3 >= 0 && d4 <= d3)
+        return { simplex: [B], closest: b, bary: [1] };
+    const vc = d1 * d4 - d3 * d2;
+    if (vc <= 0 && d1 >= 0 && d3 <= 0) {
+        const v = d1 / (d1 - d3);
+        const closest = ptAdd(a, ptMultiply(ab, v));
+        return { simplex: [A, B], closest, bary: [1 - v, v] };
+    }
+    const cp = { x: -c.x, y: -c.y };
+    const bc = ptSubtract(c, b);
+    const d5 = dotProduct(bc, cp), d6 = dotProduct(ac, cp);
+    if (d6 >= 0 && d5 <= d6)
+        return { simplex: [C], closest: c, bary: [1] };
+    const vb = d5 * d2 - d1 * d6;
+    if (vb <= 0 && d2 >= 0 && d6 <= 0) {
+        const w = d2 / (d2 - d6);
+        const closest = ptAdd(a, ptMultiply(ac, w));
+        return { simplex: [A, C], closest, bary: [1 - w, 0, w] };
+    }
+    const va = d3 * d6 - d5 * d4;
+    if (va <= 0) {
+        const denom = (d4 - d3) + (d5 - d6);
+        const w = denom !== 0 ? (d4 - d3) / denom : 0.5;
+        const closest = ptAdd(b, ptMultiply(bc, w));
+        return { simplex: [B, C], closest, bary: [0, 1 - w, w] };
+    }
+    // Origin inside triangle – distance is zero
+    return { simplex: [A, B, C], closest: { x: 0, y: 0 }, bary: [0, 0, 0] };
 }
-class Circle {
+/**
+ * ====== GJK distance (2D) ======
+ * We keep, for each simplex vertex, the Minkowski point p = a - b and the witnesses a,b.
+ * @param A
+ * @param B
+ */
+function gjkDistance(A, B) {
+    const MAX = 64, EPS = 1e-9;
+    const centerA = { x: A.x, y: A.y }, centerB = { x: B.x, y: B.y };
+    let d = ptSubtract(centerB, centerA);
+    if (Math.abs(d.x) < EPS && Math.abs(d.y) < EPS)
+        d = { x: 1, y: 0 };
+    const sup = (dir) => {
+        const a = A.support(dir);
+        const b = B.support({ x: -dir.x, y: -dir.y });
+        return { p: ptSubtract(a, b), a, b };
+    };
+    let simplex = [sup(d)];
+    let closest = simplex[0].p; // vector to origin
+    let dir = { x: -closest.x, y: -closest.y };
+    let best2 = dotProduct(closest, closest);
+    for (let iter = 0; iter < MAX; iter++) {
+        if (ptLength(dir) <= EPS) { // origin reached
+            const a = simplex[simplex.length - 1].a, b = simplex[simplex.length - 1].b;
+            return { distance: 0, pa: a, pb: b };
+        }
+        const vtx = sup(dir);
+        // termination: support didn't pass beyond previous closest along dir
+        if (dotProduct(vtx.p, dir) - Math.sqrt(best2) <= EPS) {
+            break;
+        }
+        simplex.push(vtx);
+        const reduced = closestPointToOrigin(simplex);
+        simplex = reduced.simplex;
+        closest = reduced.closest;
+        best2 = dotProduct(closest, closest);
+        dir = { x: -closest.x, y: -closest.y };
+        if (best2 <= EPS * EPS) {
+            const pa = combineA(simplex, reduced.bary);
+            const pb = combineB(simplex, reduced.bary);
+            return { distance: 0, pa, pb };
+        }
+    }
+    const res = closestPointToOrigin(simplex);
+    const pa = combineA(simplex, res.bary);
+    const pb = combineB(simplex, res.bary);
+    return { distance: Math.sqrt(dotProduct(res.closest, res.closest)), pa, pb };
+}
+
+class Shape {
     get center() {
-        return new Point(this.x, this.y);
+        return this.pt;
     }
-    get left() {
-        return new Point(this.x - this.radius, this.y);
-    }
-    get right() {
-        return new Point(this.x + this.radius, this.y);
-    }
-    get top() {
-        return new Point(this.x, this.y + this.radius);
-    }
-    get bottom() {
-        return new Point(this.x, this.y - this.radius);
+    get x() {
+        return this.center.x;
     }
-    get rect() {
-        return new Rect(this.x, this.y, this.radius * 2, this.radius * 2);
+    get y() {
+        return this.center.y;
     }
-    constructor(x, y, radius) {
-        this.x = x;
-        this.y = y;
-        this.radius = radius;
+    constructor(x, y) {
+        this.pt = { x, y };
     }
     distance(p) {
-        return this.center.distance(p) - this.radius;
+        return ptDistance(this.center, p);
+    }
+    minDistance(shape) {
+        return gjkDistance(this, shape).distance;
     }
 }
-class Point {
+class Point extends Shape {
     static { this.Zero = new Point(0, 0); }
     get length() {
-        return this.distance(Point.Zero);
+        return ptLength(this);
     }
     get perpendicular() {
-        return new Point(this.y, -this.x);
+        return new Point(perpendicular(this));
     }
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
+    constructor(xOrP, y = 0) {
+        super(0, y);
+        const x = Number(xOrP);
+        this.pt = isPoint(xOrP) ? xOrP : { x: isNaN(x) ? 0 : xOrP, y };
+    }
+    support() {
+        return this.pt;
     }
     add(p) {
-        return new Point(this.x + p.x, this.y + p.y);
+        return new Point(ptAdd(this, p));
     }
-    subtract(p) {
-        return new Point(this.x - p.x, this.y - p.y);
+    sub(p) {
+        return new Point(ptSubtract(this, p));
     }
-    multiply(p) {
-        if (p instanceof Point) {
-            return new Point(this.x * p.x, this.y * p.y);
-        }
-        return new Point(this.x * p, this.y * p);
+    mul(p) {
+        return new Point(ptMultiply(this, p));
     }
-    distance(b) {
-        const x = b.x - this.x;
-        const y = b.y - this.y;
-        return Math.sqrt(x * x + y * y);
+    dot(p) {
+        return new Point(dotProduct(this, p));
+    }
+    distance(p) {
+        return ptDistance(this, p);
     }
     lerp(p, ratio) {
-        const diff = p.subtract(this);
-        return this.add(diff.multiply(ratio));
+        const diff = p.sub(this);
+        return this.add(diff.mul(ratio));
     }
     perpendicularTo(p, length) {
-        const diff = p.perpendicular.subtract(this.perpendicular);
+        const diff = p.perpendicular.sub(this.perpendicular);
         const ratio = length / diff.length;
         const center = this.lerp(p, .5);
-        return center.add(diff.multiply(ratio));
+        return center.add(diff.mul(ratio));
     }
     circleWith(a, b) {
         const yDelta_a = b.y - a.y;
@@ -1830,8 +1965,8 @@ class Point {
         return new Circle(center.x, center.y, center.distance(this));
     }
     tangents(c) {
-        const pd = c.center.subtract(this);
-        const a = Math.asin(c.radius / pd.length);
+        const pd = ptSubtract(c.center, this);
+        const a = Math.asin(c.radius / ptLength(pd));
         const b = Math.atan2(pd.y, pd.x);
         // Tangent points
         let t = b - a;
@@ -1841,7 +1976,7 @@ class Point {
         return [t1, t2];
     }
     angle(p) {
-        const diff = p.subtract(this);
+        const diff = p.sub(this);
         return Math.atan2(diff.y, diff.x) * 180 / Math.PI;
     }
     rotateAround(p, angle) {
@@ -1851,6 +1986,48 @@ class Point {
         return p.add(rotated);
     }
 }
+class Rect extends Shape {
+    constructor(x, y, width, height, rotation = 0) {
+        super(x, y);
+        this.width = width;
+        this.height = height;
+        this.rotation = rotation;
+    }
+    support(dir) {
+        const ang = this.rotation ?? 0;
+        const dLocal = rotateDeg(dir, -ang);
+        const hw = Math.max(0, this.width / 2), hh = Math.max(0, this.height / 2);
+        const lx = dLocal.x >= 0 ? hw : -hw;
+        const ly = dLocal.y >= 0 ? hh : -hh;
+        return ptAdd(rotateDeg({ x: lx, y: ly }, ang), { x: this.x, y: this.y });
+    }
+}
+class Oval extends Shape {
+    constructor(x, y, width, height, rotation = 0) {
+        super(x, y);
+        this.width = width;
+        this.height = height;
+        this.rotation = rotation;
+    }
+    support(dir) {
+        const ang = this.rotation ?? 0;
+        const d = rotateDeg(dir, -ang);
+        const a = Math.max(0, this.width / 2);
+        const b = Math.max(0, this.height / 2);
+        if (Math.abs(d.x) < 1e-12 && Math.abs(d.y) < 1e-12)
+            return { x: this.x, y: this.y };
+        const q = Math.hypot(a * d.x, b * d.y) || 1; // sqrt((a*dx)^2 + (b*dy)^2)
+        const lx = (a * a * d.x) / q;
+        const ly = (b * b * d.y) / q;
+        return ptAdd(rotateDeg({ x: lx, y: ly }, ang), { x: this.x, y: this.y });
+    }
+}
+class Circle extends Oval {
+    constructor(x, y, radius, rotation = 0) {
+        super(x, y, radius * 2, radius * 2, rotation);
+        this.radius = radius;
+    }
+}
 
 class Initializer {
     get isInitialized() {
@@ -1981,10 +2158,10 @@ class LoaderUtils {
     }
 }
 
+const EPSILON = 1e-9;
 class MathUtils {
-    static { this.EPSILON = 1e-9; }
     static equal(a, b, epsilon = null) {
-        epsilon = ObjectUtils.isNumber(epsilon) ? epsilon : MathUtils.EPSILON;
+        epsilon = ObjectUtils.isNumber(epsilon) ? epsilon : EPSILON;
         return Math.abs(a - b) < epsilon;
     }
     static clamp(value, min, max) {
@@ -2158,6 +2335,27 @@ function provideEntryComponents(components, moduleId) {
         multi: true
     };
 }
+function provideWithOptions(type, options) {
+    return {
+        useFactory: function (parent) {
+            const providers = [
+                {
+                    provide: OPTIONS_TOKEN,
+                    useValue: options
+                },
+                {
+                    provide: type,
+                    useClass: type
+                }
+            ];
+            return Injector.create({
+                providers,
+                parent
+            }).get(type, null, { optional: true });
+        },
+        deps: [Injector]
+    };
+}
 
 class TimerUtils {
     static createTimeout(func, time) {
@@ -2575,202 +2773,112 @@ class UniqueUtils {
     }
 }
 
-class Vector {
-    get negative() {
-        return new Vector(-this.x, -this.y, -this.z);
-    }
-    get length() {
-        return Math.sqrt(this.dot(this));
-    }
-    get unit() {
-        return this.divide(this.length);
+class EventsService {
+    get isSticky() {
+        return this.sticky;
     }
-    get min() {
-        return Math.min(Math.min(this.x, this.y), this.z);
+    get isAuthenticated() {
+        return !!this.user;
     }
-    get max() {
-        return Math.max(Math.max(this.x, this.y), this.z);
+    constructor() {
+        this.eventForwarded = new Subject();
+        this.stickyUpdated = new Subject();
+        this.languageChanged = new Subject();
+        this.translationsEnabled = new Subject();
+        this.userChanged = new Subject();
+        this.sticky = false;
+        this.user = null;
+        this.userChanged.subscribe(user => {
+            this.user = user;
+        });
     }
-    get angles() {
-        return {
-            theta: Math.atan2(this.z, this.x),
-            phi: Math.asin(this.y / this.length)
-        };
+    event(e) {
+        this.eventForwarded.next(e);
     }
-    constructor(x, y, z) {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-    }
-    add(v) {
-        if (v instanceof Vector)
-            return new Vector(this.x + v.x, this.y + v.y, this.z + v.z);
-        else
-            return new Vector(this.x + v, this.y + v, this.z + v);
-    }
-    subtract(v) {
-        if (v instanceof Vector)
-            return new Vector(this.x - v.x, this.y - v.y, this.z - v.z);
-        else
-            return new Vector(this.x - v, this.y - v, this.z - v);
-    }
-    multiply(v) {
-        if (v instanceof Vector)
-            return new Vector(this.x * v.x, this.y * v.y, this.z * v.z);
-        else
-            return new Vector(this.x * v, this.y * v, this.z * v);
-    }
-    divide(v) {
-        if (v instanceof Vector)
-            return new Vector(this.x / v.x, this.y / v.y, this.z / v.z);
-        else
-            return new Vector(this.x / v, this.y / v, this.z / v);
-    }
-    equals(v) {
-        return this.x == v.x && this.y == v.y && this.z == v.z;
-    }
-    dot(v) {
-        return this.x * v.x + this.y * v.y + this.z * v.z;
-    }
-    cross(v) {
-        return new Vector(this.y * v.z - this.z * v.y, this.z * v.x - this.x * v.z, this.x * v.y - this.y * v.x);
-    }
-    angleTo(v) {
-        return Math.acos(this.dot(v) / (this.length * v.length));
-    }
-    toArray(n) {
-        return [this.x, this.y, this.z].slice(0, n || 3);
-    }
-    clone() {
-        return new Vector(this.x, this.y, this.z);
-    }
-    init(x, y, z) {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-        return this;
+    updateSticky(sticky) {
+        this.sticky = sticky;
+        this.stickyUpdated.next(sticky);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EventsService }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EventsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 
-function provideWithOptions(type, options) {
-    return {
-        useFactory: function (injector) {
-            const subInjector = Injector.create({
-                providers: [
-                    {
-                        provide: OPTIONS_TOKEN,
-                        useValue: options
-                    },
-                    {
-                        provide: type,
-                        useClass: type
-                    }
-                ],
-                parent: injector
-            });
-            return subInjector.get(type);
-        },
-        deps: [Injector]
-    };
-}
-
-function workerFunction(JSONfn, logTimes) {
-    let wasmResolve = null;
-    const wasmInstance = new Promise(resolve => {
-        wasmResolve = resolve;
-    });
-    self.onmessage = function (e) {
-        const data = e.data;
-        const { type, payload } = data;
-        switch (type) {
-            case "wasm":
-                const { url, wasi } = payload;
-                fetch(url).then(response => response.arrayBuffer()).then(bytes => {
-                    const wasiImpl = JSONfn.parse(wasi);
-                    return new wasiImpl().instantiate(bytes);
-                }).then(instance => {
-                    wasmResolve(instance);
-                    const methods = Object.getOwnPropertyNames(instance).filter(key => typeof instance[key] === "function");
-                    self.postMessage({ type: "methods", payload: methods });
-                });
-                break;
-            case "call":
-                wasmInstance.then(instance => {
-                    const { name, id, args } = payload;
-                    if (logTimes) {
-                        console.time(id);
-                        console.timeLog(id, `Calling ${name} ...`);
+const emptyGuards = [];
+class AclService {
+    constructor(injector, state, events) {
+        this.injector = injector;
+        this.state = state;
+        this.events = events;
+        this.components = [];
+        this.events.userChanged.subscribe(() => {
+            this.components.forEach(t => t.dirty = true);
+            const info = this.getStateInfo();
+            const check = info && info.guard instanceof AuthGuard ? info.guard.checkRoute(info.route) : Promise.resolve(true);
+            check.then(result => {
+                if (result) {
+                    if (!info || !info.dirty)
+                        return;
+                    info.dirty = false;
+                    const component = info.component;
+                    if (!info.component)
+                        return;
+                    if (info.first) {
+                        if (ObjectUtils.isFunction(component.onUserInitialized)) {
+                            component.onUserInitialized();
+                        }
+                        info.first = false;
+                        return;
                     }
-                    const func = instance[name];
-                    const result = func(...args);
-                    if (logTimes) {
-                        console.timeLog(id, `Called ${name}`);
-                        console.timeEnd(id);
+                    if (ObjectUtils.isFunction(component.onUserChanged)) {
+                        component.onUserChanged();
                     }
-                    self.postMessage({ type: "result", payload: { id, result } });
+                    return;
+                }
+                info.guard.getReturnState(info.route).then(returnState => {
+                    if (!returnState)
+                        return;
+                    this.state.navigate(returnState);
                 });
-                break;
-        }
-    };
-}
-class WasmWorkerProxy {
-    constructor(wasmPath, wasi, logTimes = false) {
-        this.methods = new Promise(resolve => {
-            this.onMethods = resolve;
-        });
-        const lt = logTimes ? "true" : "false";
-        const blob = new Blob([`${JSONfn.toString()} (${workerFunction.toString()})(JSONfn, ${lt})`], { type: 'application/javascript' });
-        this.worker = new Worker(URL.createObjectURL(blob));
-        this.worker.postMessage({
-            type: "wasm",
-            payload: { url: wasmPath, wasi: JSONfn.stringify(wasi), logTimes }
+            });
         });
-        this.worker.onmessage = this.onMessage.bind(this);
-        this.promises = new Map();
-        return new Proxy(this, {
-            get: (target, prop, receiver) => {
-                const res = Reflect.get(target, prop, receiver);
-                if (res) {
-                    return res;
-                }
-                return (...args) => {
-                    return this.call(prop.toString(), args);
-                };
+        this.state.subscribe(() => {
+            const info = this.getStateInfo();
+            if (!info?.component)
+                return;
+            const component = info.component;
+            if (ObjectUtils.isFunction(component.onUserInitialized)) {
+                component.onUserInitialized();
             }
+            info.first = false;
         });
     }
-    onMessage(e) {
-        const data = e.data;
-        const { type, payload } = data;
-        switch (type) {
-            case "methods":
-                this.onMethods(payload);
-                break;
-            case "result":
-                const { id, result } = payload;
-                const promise = this.promises.get(id);
-                if (promise) {
-                    promise.resolve(result);
-                    this.promises.delete(id);
-                }
-                break;
-        }
-    }
-    async call(method, args) {
-        const methods = await this.methods;
-        if (!methods.includes(method)) {
-            throw new Error(`Method ${method} not found`);
+    getStateInfo() {
+        const route = this.state.route;
+        if (!route)
+            return null;
+        let info = this.components.find(t => t.route == this.state.route);
+        if (!info) {
+            const guardType = (route.canActivate || emptyGuards)[0];
+            info = {
+                route: this.state.route,
+                guard: guardType ? this.injector.get(guardType) : null,
+                dirty: true,
+                first: true
+            };
+            this.components.push(info);
         }
-        return new Promise((resolve, reject) => {
-            const id = Math.random().toString(36).substring(2, 9);
-            this.worker.postMessage({
-                type: "call",
-                payload: { name: method, id, args }
-            });
-            this.promises.set(id, { resolve, reject });
-        });
+        info.component = this.state.component;
+        return info;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AclService, deps: [{ token: i0.Injector }, { token: StateService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AclService }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AclService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: StateService }, { type: EventsService }] });
 
 class BaseHttpClient extends HttpClient {
     constructor(handler) {
@@ -2858,39 +2966,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: UniversalService }] });
 
-class EventsService {
-    get isSticky() {
-        return this.sticky;
-    }
-    get isAuthenticated() {
-        return !!this.user;
-    }
-    constructor() {
-        this.eventForwarded = new Subject();
-        this.stickyUpdated = new Subject();
-        this.languageChanged = new Subject();
-        this.translationsEnabled = new Subject();
-        this.userChanged = new Subject();
-        this.sticky = false;
-        this.user = null;
-        this.userChanged.subscribe(user => {
-            this.user = user;
-        });
-    }
-    event(e) {
-        this.eventForwarded.next(e);
-    }
-    updateSticky(sticky) {
-        this.sticky = sticky;
-        this.stickyUpdated.next(sticky);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EventsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EventsService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 class CacheService {
     get userChanged() {
         return this.events.userChanged;
@@ -3257,167 +3332,7 @@ class HttpPromise extends Promise {
     catch(onRejected) {
         return this.then(null, onRejected);
     }
-}
-
-class LocalHttpService extends BaseHttpService {
-    get name() {
-        return "local-http";
-    }
-    get config() {
-        return this.configs.config;
-    }
-    get withCredentials() {
-        return false;
-    }
-    initService() {
-        super.initService();
-        this.images = {};
-    }
-    url(url) {
-        if (!url)
-            return url;
-        const config = this.config;
-        const baseUrl = config.cdnUrl || config.baseUrl || "";
-        return url.startsWith("data:") || url.startsWith("http") || url.startsWith("//")
-            ? url
-            : `${baseUrl}${url}`;
-    }
-    get(url, options, body) {
-        options = this.makeOptions(options, "GET", body, this.caches.permanent);
-        return this.toPromise(url, options);
-    }
-    getImage(url) {
-        if (this.universal.isServer)
-            return Promise.resolve(null);
-        if (!url)
-            return Promise.resolve(new Image());
-        this.images[url] = this.images[url] || new Promise((resolve, reject) => {
-            const image = new Image();
-            image.crossOrigin = "Anonymous";
-            image.src = this.url(url);
-            image.onload = () => resolve(image);
-            image.onerror = reject;
-        });
-        return this.images[url];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Use this service to load WebAssembly modules
- */
-class WasmService {
-    constructor(universal, http, wasi) {
-        this.universal = universal;
-        this.http = http;
-        this.wasi = wasi.constructor;
-    }
-    async getModule(name) {
-        if (!this.universal.isBrowser || !name)
-            return null;
-        this.modules = this.modules || {};
-        this.modules[name] = this.modules[name] || this.http.get(`wasm/${name}.wasm`, {
-            responseType: "arraybuffer"
-        }).then(async (bytes) => {
-            const wasi = new this.wasi();
-            return await wasi.instantiate(bytes);
-        });
-        return this.modules[name];
-    }
-    getWorkerModule(name) {
-        if (!this.universal.isBrowser || !name)
-            return null;
-        this.workerModules = this.workerModules || {};
-        this.workerModules[name] = new WasmWorkerProxy(this.http.url(`wasm/${name}.wasm`), this.wasi);
-        return this.workerModules[name];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WasmService, deps: [{ token: UniversalService }, { token: LocalHttpService }, { token: WASI_IMPLEMENTATION }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WasmService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WasmService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: UniversalService }, { type: LocalHttpService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WASI_IMPLEMENTATION]
-                }] }] });
-
-const emptyGuards = [];
-class AclService {
-    constructor(injector, state, events) {
-        this.injector = injector;
-        this.state = state;
-        this.events = events;
-        this.components = [];
-        this.events.userChanged.subscribe(() => {
-            this.components.forEach(t => t.dirty = true);
-            const info = this.getStateInfo();
-            const check = info && info.guard instanceof AuthGuard ? info.guard.checkRoute(info.route) : Promise.resolve(true);
-            check.then(result => {
-                if (result) {
-                    if (!info || !info.dirty)
-                        return;
-                    info.dirty = false;
-                    const component = info.component;
-                    if (!info.component)
-                        return;
-                    if (info.first) {
-                        if (ObjectUtils.isFunction(component.onUserInitialized)) {
-                            component.onUserInitialized();
-                        }
-                        info.first = false;
-                        return;
-                    }
-                    if (ObjectUtils.isFunction(component.onUserChanged)) {
-                        component.onUserChanged();
-                    }
-                    return;
-                }
-                info.guard.getReturnState(info.route).then(returnState => {
-                    if (!returnState)
-                        return;
-                    this.state.navigate(returnState);
-                });
-            });
-        });
-        this.state.subscribe(() => {
-            const info = this.getStateInfo();
-            if (!info?.component)
-                return;
-            const component = info.component;
-            if (ObjectUtils.isFunction(component.onUserInitialized)) {
-                component.onUserInitialized();
-            }
-            info.first = false;
-        });
-    }
-    getStateInfo() {
-        const route = this.state.route;
-        if (!route)
-            return null;
-        let info = this.components.find(t => t.route == this.state.route);
-        if (!info) {
-            const guardType = (route.canActivate || emptyGuards)[0];
-            info = {
-                route: this.state.route,
-                guard: guardType ? this.injector.get(guardType) : null,
-                dirty: true,
-                first: true
-            };
-            this.components.push(info);
-        }
-        info.component = this.state.component;
-        return info;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AclService, deps: [{ token: i0.Injector }, { token: StateService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AclService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AclService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: StateService }, { type: EventsService }] });
+}
 
 class ApiService extends BaseHttpService {
     get name() {
@@ -4078,6 +3993,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Injectable
         }] });
 
+class LocalHttpService extends BaseHttpService {
+    get name() {
+        return "local-http";
+    }
+    get config() {
+        return this.configs.config;
+    }
+    get withCredentials() {
+        return false;
+    }
+    initService() {
+        super.initService();
+        this.images = {};
+    }
+    url(url) {
+        if (!url)
+            return url;
+        const config = this.config;
+        const baseUrl = config.cdnUrl || config.baseUrl || "";
+        return url.startsWith("data:") || url.startsWith("http") || url.startsWith("//")
+            ? url
+            : `${baseUrl}${url}`;
+    }
+    get(url, options, body) {
+        options = this.makeOptions(options, "GET", body, this.caches.permanent);
+        return this.toPromise(url, options);
+    }
+    getImage(url) {
+        if (this.universal.isServer)
+            return Promise.resolve(null);
+        if (!url)
+            return Promise.resolve(new Image());
+        this.images[url] = this.images[url] || new Promise((resolve, reject) => {
+            const image = new Image();
+            image.crossOrigin = "Anonymous";
+            image.src = this.url(url);
+            image.onload = () => resolve(image);
+            image.onerror = reject;
+        });
+        return this.images[url];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService, decorators: [{
+            type: Injectable
+        }] });
+
 class OpenApiService {
     constructor(api, staticSchemas) {
         this.api = api;
@@ -7318,6 +7281,9 @@ class DynamicTableComponent {
         this.testId = "table";
         this.titlePrefix = "label";
         this.realColumns = {};
+        this.cols = [];
+        this.sortable = false;
+        this.localData = [];
     }
     setProperty(name, value) {
         const elem = this.element.nativeElement;
@@ -7342,6 +7308,9 @@ class DynamicTableComponent {
     ngAfterViewInit() {
         this.rowTemplate = this.rowTemplate || this.defaultRowTemplate;
     }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
     ngOnChanges(changes) {
         const orderBy = this.orderBy;
         if (changes.columns) {
@@ -7361,6 +7330,7 @@ class DynamicTableComponent {
             this.cols = Object.keys(this.realColumns);
             const sortable = this.cols.filter(c => this.realColumns[c].sort);
             const query = this.query || {};
+            this.sortable = sortable.length > 0;
             this.orderBy = sortable.includes(this.orderBy) ? this.orderBy : sortable[0] || null;
             this.query = this.cols.reduce((res, col) => {
                 const value = query[col];
@@ -7374,11 +7344,17 @@ class DynamicTableComponent {
         this.hasQuery = this.cols.some(col => this.realColumns[col].filter);
         if (changes.orderBy && this.realColumns && this.cols) {
             const sortable = this.cols.filter(c => this.realColumns[c].sort);
+            this.sortable = sortable.length > 0;
             this.orderBy = sortable.includes(this.orderBy) ? this.orderBy : sortable[0] || null;
         }
         if (!changes.data && !changes.parallelData && !changes.dataLoader && !changes.itemsPerPage && !changes.orderDescending && orderBy === this.orderBy)
             return;
-        this.refresh();
+        const source = this.data instanceof Observable ? this.data : of(this.data || []);
+        this.subscription?.unsubscribe();
+        this.subscription = source.subscribe(data => {
+            this.localData = data;
+            this.refresh();
+        });
     }
     onDragStart(ev, elem, item) {
         if (!elem || !item || !ObjectUtils.isFunction(this.dragStartFn) || !this.dragStartFn({ ev, elem, item })) {
@@ -7480,21 +7456,21 @@ class DynamicTableComponent {
         this.itemsPerPage = count;
         this.refresh();
     }
-    loadLocalData(page, rowsPerPage, orderBy, orderDescending, filter) {
-        if (!this.data) {
-            return Promise.resolve({
+    async loadLocalData(page, rowsPerPage, orderBy, orderDescending, filter) {
+        if (!this.localData) {
+            return {
                 total: 0,
                 items: []
-            });
+            };
         }
         const compare = orderDescending
             ? (a, b) => DynamicTableComponent.compare(orderBy, b, a)
             : (a, b) => DynamicTableComponent.compare(orderBy, a, b);
         const from = (page - 1) * rowsPerPage;
-        const dataLength = this.data.length;
+        const dataLength = this.localData.length;
         const length = Math.min(rowsPerPage, dataLength - from);
         const parallelData = this.parallelData || [];
-        let data = this.data.map((item, ix) => {
+        let data = this.localData.map((item, ix) => {
             return new PaginationItemContext(item, parallelData[ix] || {}, dataLength, ix, ix);
         });
         if (ObjectUtils.isString(filter) && filter.length > 0) {
@@ -7503,19 +7479,20 @@ class DynamicTableComponent {
         }
         const items = orderBy ? data.sort(compare).splice(from, length) : data.splice(from, length);
         items.forEach((context, ix) => {
-            context.index = from + ix;
+            context.index = ix;
+            context.dataIndex = from + ix;
         });
-        return Promise.resolve({
+        return {
             total: dataLength,
             items: items
-        });
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr #elem\n        [draggable]=\"!!dragStartFn\"\n        [ngClass]=\"{active: selected === context.item}\"\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\n        (dragleave)=\"onDragLeave($event, elem)\"\n        (drop)=\"onDrop($event, elem, context.item)\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <ng-template #emptyCol>\n        <span>-</span>\n    </ng-template>\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n           (click)=\"setSorting(column, toggle)\">\n            <span>{{ realColumns[column].title | translate }}</span>\n        </a>\n    </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        <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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr #elem\n        [draggable]=\"!!dragStartFn\"\n        [ngClass]=\"{active: selected === context.item}\"\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\n        (dragleave)=\"onDragLeave($event, elem)\"\n        (drop)=\"onDrop($event, elem, context.item)\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <ng-template #emptyCol>\n        <span>-</span>\n    </ng-template>\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n           (click)=\"setSorting(column, toggle)\">\n            <span>{{ realColumns[column].title | translate }}</span>\n        </a>\n    </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        @if (showFilter) {\n            <div class=\"table-input-wrap table-search-filter\">\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n                    {{ filterLabel | translate }}\n                </label>\n                <input type=\"text\"\n                       class=\"search-input\"\n                       [attr.id]=\"tableId\"\n                       [attr.data-testid]=\"testId + '-filter-input'\"\n                       [placeholder]=\"placeholder | translate\"\n                       [ngModel]=\"filter\"\n                       (ngModelChange)=\"setFilter($event)\"/>\n            </div>\n        }\n        @if (sortable) {\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n                <ng-container toggle-content\n                              [ngTemplateOutlet]=\"headerTemplate\"\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n                <ul>\n                    <ng-container *ngFor=\"let column of cols\">\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </li>\n                    </ng-container>\n                </ul>\n            </dropdown-box>\n        }\n        @if (showItems) {\n            <div class=\"table-input-wrap table-items-count\">\n                <label>\n                    {{ 'label.items.before' | translate }}\n                </label>\n                <dropdown-box>\n                    <ng-container toggle-content>\n                        {{ itemsPerPage }}\n                    </ng-container>\n                    <ul>\n                        <ng-container *ngFor=\"let count of showItems\">\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n                                {{ count }}\n                            </li>\n                        </ng-container>\n                    </ul>\n                </dropdown-box>\n                <label>\n                    {{ 'label.items.after' | translate }}\n                </label>\n            </div>\n        }\n        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\n    <div class=\"table-content-row\"\n         #pagination=\"pagination\"\n         [pagination]=\"loadData\"\n         [page]=\"page\"\n         [itemsPerPage]=\"itemsPerPage\"\n         [updateTime]=\"updateTime\">\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n        <div class=\"table-responsive\">\n            <ng-template #defaultWrapperTemplate>\n                <table class=\"table table-striped\">\n                    <thead>\n                    <tr>\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </th>\n                    </tr>\n                    <tr *ngIf=\"hasQuery\">\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n                            <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n                                <ng-container *ngSwitchCase=\"'enum'\">\n                                    <ng-template #optionItem let-option=\"option\">\n                                        {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n                                    </ng-template>\n                                    <dropdown-box componentClass=\"filter-box\"\n                                                  [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n                                        <ng-container toggle-content>\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n                                            {{ realColumns[column].title | translate }}\n                                        </span>\n                                            <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n                                                  *ngFor=\"let option of query[column] | values; let ix = index\">\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                        </span>\n                                        </ng-container>\n                                        <ul>\n                                            <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n                                                (click)=\"setQueryValue(column, option)\"\n                                                *ngFor=\"let option of realColumns[column].enum\">\n                                                <a [ngClass]=\"'toggle-link-' + column\">\n                                                    <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n                                                    <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                                  [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                                </a>\n                                            </li>\n                                        </ul>\n                                    </dropdown-box>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'checkbox'\">\n                                    <input type=\"checkbox\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <input class=\"search-input\"\n                                           type=\"text\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                            </ng-container>\n                        </th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <ng-container *paginationItem=\"let context\"\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\n                                  [context]=\"context\"\n                                  [additionalContext]=\"this\"></ng-container>\n                    </tbody>\n                </table>\n            </ng-template>\n\n            <div class=\"table-wrapper\">\n                <ng-content select=\"[table-top]\"></ng-content>\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                              [context]=\"this\"></ng-container>\n                <ng-content select=\"[table-bottom]\"></ng-content>\n            </div>\n        </div>\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "attachTo", "placement", "crossAxis", "alignment", "autoAlignment", "allowedPlacements", "componentClass"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr #elem\n        [draggable]=\"!!dragStartFn\"\n        [ngClass]=\"{active: selected === context.item}\"\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\n        (dragleave)=\"onDragLeave($event, elem)\"\n        (drop)=\"onDrop($event, elem, context.item)\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <ng-template #emptyCol>\n        <span>-</span>\n    </ng-template>\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n           (click)=\"setSorting(column, toggle)\">\n            <span>{{ realColumns[column].title | translate }}</span>\n        </a>\n    </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        <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"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr #elem\n        [draggable]=\"!!dragStartFn\"\n        [ngClass]=\"{active: selected === context.item}\"\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\n        (dragleave)=\"onDragLeave($event, elem)\"\n        (drop)=\"onDrop($event, elem, context.item)\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <ng-template #emptyCol>\n        <span>-</span>\n    </ng-template>\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n           (click)=\"setSorting(column, toggle)\">\n            <span>{{ realColumns[column].title | translate }}</span>\n        </a>\n    </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        @if (showFilter) {\n            <div class=\"table-input-wrap table-search-filter\">\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n                    {{ filterLabel | translate }}\n                </label>\n                <input type=\"text\"\n                       class=\"search-input\"\n                       [attr.id]=\"tableId\"\n                       [attr.data-testid]=\"testId + '-filter-input'\"\n                       [placeholder]=\"placeholder | translate\"\n                       [ngModel]=\"filter\"\n                       (ngModelChange)=\"setFilter($event)\"/>\n            </div>\n        }\n        @if (sortable) {\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n                <ng-container toggle-content\n                              [ngTemplateOutlet]=\"headerTemplate\"\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n                <ul>\n                    <ng-container *ngFor=\"let column of cols\">\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </li>\n                    </ng-container>\n                </ul>\n            </dropdown-box>\n        }\n        @if (showItems) {\n            <div class=\"table-input-wrap table-items-count\">\n                <label>\n                    {{ 'label.items.before' | translate }}\n                </label>\n                <dropdown-box>\n                    <ng-container toggle-content>\n                        {{ itemsPerPage }}\n                    </ng-container>\n                    <ul>\n                        <ng-container *ngFor=\"let count of showItems\">\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n                                {{ count }}\n                            </li>\n                        </ng-container>\n                    </ul>\n                </dropdown-box>\n                <label>\n                    {{ 'label.items.after' | translate }}\n                </label>\n            </div>\n        }\n        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\n    <div class=\"table-content-row\"\n         #pagination=\"pagination\"\n         [pagination]=\"loadData\"\n         [page]=\"page\"\n         [itemsPerPage]=\"itemsPerPage\"\n         [updateTime]=\"updateTime\">\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n        <div class=\"table-responsive\">\n            <ng-template #defaultWrapperTemplate>\n                <table class=\"table table-striped\">\n                    <thead>\n                    <tr>\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </th>\n                    </tr>\n                    <tr *ngIf=\"hasQuery\">\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n                            <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n                                <ng-container *ngSwitchCase=\"'enum'\">\n                                    <ng-template #optionItem let-option=\"option\">\n                                        {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n                                    </ng-template>\n                                    <dropdown-box componentClass=\"filter-box\"\n                                                  [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n                                        <ng-container toggle-content>\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n                                            {{ realColumns[column].title | translate }}\n                                        </span>\n                                            <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n                                                  *ngFor=\"let option of query[column] | values; let ix = index\">\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                        </span>\n                                        </ng-container>\n                                        <ul>\n                                            <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n                                                (click)=\"setQueryValue(column, option)\"\n                                                *ngFor=\"let option of realColumns[column].enum\">\n                                                <a [ngClass]=\"'toggle-link-' + column\">\n                                                    <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n                                                    <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                                  [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                                </a>\n                                            </li>\n                                        </ul>\n                                    </dropdown-box>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'checkbox'\">\n                                    <input type=\"checkbox\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <input class=\"search-input\"\n                                           type=\"text\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                            </ng-container>\n                        </th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <ng-container *paginationItem=\"let context\"\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\n                                  [context]=\"context\"\n                                  [additionalContext]=\"this\"></ng-container>\n                    </tbody>\n                </table>\n            </ng-template>\n\n            <div class=\"table-wrapper\">\n                <ng-content select=\"[table-top]\"></ng-content>\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                              [context]=\"this\"></ng-container>\n                <ng-content select=\"[table-bottom]\"></ng-content>\n            </div>\n        </div>\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
                 type: Input
             }], data: [{
@@ -7616,106 +7593,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class InteractiveItemComponent {
+    get shapes() {
+        return this.mShapes;
+    }
+    get hovered() {
+        return this.canvas?.hoveredItem === this;
+    }
+    set hovered(value) {
+        if (!this.canvas)
+            return;
+        this.canvas.hoveredItem = value ? this : null;
+    }
+    get x() {
+        return this.pos.x;
+    }
     set x(value) {
-        if (isNaN(value))
+        if (isNaN(value) || value === this.pos.x)
             return;
         this.pos = new Point(value, this.pos.y);
+        this.validPosition = this.pos;
+    }
+    get y() {
+        return this.pos.y;
     }
     set y(value) {
-        if (isNaN(value))
+        if (isNaN(value) || value === this.pos.y)
             return;
         this.pos = new Point(this.pos.x, value);
+        this.validPosition = this.pos;
+    }
+    get position() {
+        return this.pos;
     }
     set position(value) {
         if (typeof value !== "object" || isNaN(value.x) || isNaN(value.y) || value === this.pos)
             return;
         this.pos = new Point(value.x, value.y);
+        this.validPosition = this.pos;
     }
-    get shapes() {
-        return this.mShapes;
-    }
-    get canvas() {
-        return null;
-    }
-    get position() {
-        return this.pos;
-    }
-    get x() {
-        return this.pos.x;
+    get isValid() {
+        return this.valid;
     }
-    get y() {
-        return this.pos.y;
+    get validPosition() {
+        return this.validPos;
     }
-    get shape() {
-        return null;
+    set validPosition(value) {
+        if (typeof value !== "object" || isNaN(value.x) || isNaN(value.y) || value === this.validPos)
+            return;
+        this.validPos = new Point(value.x, value.y);
+        this.valid = true;
     }
     constructor() {
-        this.onClick = new EventEmitter();
-        this.onPan = new EventEmitter();
-        this.onPanStart = new EventEmitter();
-        this.onPanEnd = new EventEmitter();
         this.active = false;
         this.index = -1;
-        this.cycles = [0];
+        this.valid = true;
         this.pos = Point.Zero;
-        this.rotation = 0;
         this.direction = "none";
         this.mShapes = [];
-        this.subscription = ObservableUtils.multiSubscription(this.onPan.subscribe(ev => {
-            switch (this.direction) {
-                case "free":
-                    this.x += ev.deltaX;
-                    this.y += ev.deltaY;
-                    break;
-                case "horizontal":
-                    this.x += ev.deltaX;
-                    break;
-                case "vertical":
-                    this.y += ev.deltaY;
-                    break;
-            }
-            if (this.direction !== "none") {
-                this.calcShapes();
-            }
-        }));
     }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
+    draw(ctx) {
+        drawOval(ctx, 4, 4);
+        ctx.fill();
+        ctx.stroke();
     }
     ngOnChanges() {
+        if (!this.canvas)
+            return;
         this.calcShapes();
     }
-    calcShapes(cycles) {
-        const canvas = this.canvas;
-        const ratio = canvas.ratio;
+    calcShapes() {
+        const ratio = this.canvas.ratio ?? 1;
         const x = this.pos.x * ratio;
-        this.cycles = cycles ?? this.cycles;
-        this.mShapes = this.cycles.map(pan => {
-            const y = this.pos.y * ratio + pan;
-            return this.calcShape(x, y);
-        });
+        const y = this.pos.y * ratio;
+        this.mShapes = this.canvas.cycles.map(pan => this.calcShape(x, y + pan));
     }
     hit(point) {
         for (const shape of this.shapes) {
-            if (shape.distance(point) <= 0)
+            if (shape.minDistance(point) <= 0)
                 return true;
         }
         return false;
     }
-    calcShape(x, y) {
-        return null;
+    moveBy(dx, dy) {
+        if (this.direction === "none")
+            return;
+        switch (this.direction) {
+            case "horizontal":
+                this.pos = new Point(this.pos.x + dx, this.pos.y);
+                break;
+            case "vertical":
+                this.pos = new Point(this.pos.x, this.pos.y + dy);
+                break;
+            default:
+                this.pos = new Point(this.pos.x + dx, this.pos.y + dy);
+                break;
+        }
+        this.calcShapes();
+        this.valid = this.isValidByParams() && this.canvas.items.every(other => this === other || this.isValidByDistance(other));
+        this.validPos = this.valid ? this.pos : this.validPos;
+    }
+    moveEnd() {
+        if (this.valid)
+            return;
+        this.pos = this.validPos;
+        this.valid = true;
+        this.calcShapes();
+    }
+    isValidByParams() {
+        return true;
     }
-    draw(ctx, scale = 1) {
-        this.shapes.forEach(shape => {
-            ctx.beginPath();
-            ctx.arc(shape.x, shape.y, 3 * scale, 0, Math.PI * 2);
-            ctx.closePath();
-            ctx.fill();
-            ctx.stroke();
+    isValidByDistance(other) {
+        const minPixels = this.distToPixels(this.getMinDistance(other));
+        return !this.shapes.some(shape => {
+            return other.shapes.some(os => {
+                return os.minDistance(shape) <= minPixels;
+            });
         });
     }
+    distToPixels(value) {
+        return !this.canvas ? 1 : Math.max(1, (isNaN(value) || value < 0 ? 0 : value) * (this.canvas.ratio ?? 1));
+    }
+    getMinDistance(other) {
+        return !other ? 0 : null;
+    }
+    calcShape(x, y) {
+        return new Point(x, y);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveItemComponent, isStandalone: false, selector: "__interactive-item__", inputs: { x: "x", y: "y", position: "position", rotation: "rotation", direction: "direction", disabled: "disabled" }, outputs: { onClick: "onClick", onPan: "onPan", onPanStart: "onPanStart", onPanEnd: "onPanEnd" }, usesOnChanges: true, ngImport: i0, template: "", isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveItemComponent, isStandalone: false, selector: "__interactive-item__", inputs: { x: "x", y: "y", position: "position", direction: "direction", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "", isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveItemComponent, decorators: [{
             type: Component,
@@ -7730,50 +7735,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], position: [{
                 type: Input
-            }], rotation: [{
-                type: Input
             }], direction: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], onClick: [{
-                type: Output
-            }], onPan: [{
-                type: Output
-            }], onPanStart: [{
-                type: Output
-            }], onPanEnd: [{
-                type: Output
             }] } });
 
 class InteractiveCanvasComponent {
+    get items() {
+        return this.$items.value;
+    }
+    get canvas() {
+        return this.canvasElem?.nativeElement;
+    }
+    get lockedItem() {
+        return this.items[this.lockedIndex];
+    }
     get selectedItem() {
         return this.items[this.selectedIndex];
     }
     get hoveredItem() {
         return this.items[this.hoveredIndex];
     }
-    get lockedItem() {
-        return this.items[this.lockedIndex];
+    set hoveredItem(item) {
+        this.hoveredIndex = !item ? -1 : this.items.indexOf(item);
     }
-    constructor(renderer) {
+    constructor(renderer, universal, element, rootElement) {
         this.renderer = renderer;
+        this.universal = universal;
+        this.element = element;
+        this.rootElement = rootElement;
+        this.debug = false;
         this.horizontal = false;
         this.selectedIndex = 0;
         this.resizeMode = "fit";
-        this.onDraw = () => { };
-        this.selectedIndexChange = new EventEmitter();
-        this.shouldDraw = true;
+        this.realWidth = 100;
+        this.realHeight = 100;
         this.panOffset = 0;
-        this.pan = 0;
+        this.params = {};
+        this.beforeItems = [];
+        this.afterItems = [];
+        this.selectedIndexChange = new EventEmitter();
+        this.onRotate = new EventEmitter();
+        this.onItemPan = new EventEmitter();
+        this.onItemPanned = new EventEmitter();
+        this.onPan = new EventEmitter();
+        this.onPanned = new EventEmitter();
+        this.$items = new BehaviorSubject([]);
+        this.tempCanvas = this.universal.isServer ? null : document.createElement("canvas");
+        this.shouldDraw = !this.universal.isServer;
         this.rotation = 0;
         this.canvasWidth = 0;
         this.canvasHeight = 0;
         this.hoveredIndex = null;
-        this.items = [];
         this.touched = false;
         this.deltaX = 0;
         this.deltaY = 0;
+        this.ctrInit();
+    }
+    ctrInit() {
     }
     ngOnInit() {
         this.redraw();
@@ -7783,12 +7803,29 @@ class InteractiveCanvasComponent {
         this.subscription?.unsubscribe();
     }
     ngOnChanges() {
+        this.params = this.params || {};
+        this.renderCtx = this.renderCtx || {};
+        this.beforeItems = this.beforeItems || [];
+        this.afterItems = this.afterItems || [];
         this.resize();
     }
     ngAfterViewInit() {
         this.subscription = this.itemList.changes.subscribe(() => this.fixItems());
         this.fixItems();
     }
+    async tempPaint(cb) {
+        const renderCanvas = this.canvas;
+        const canvas = this.tempCanvas;
+        canvas.width = renderCanvas.width;
+        canvas.height = renderCanvas.height;
+        const ctx = canvas.getContext("2d");
+        ctx.globalCompositeOperation = "source-over";
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const bgCtx = renderCanvas.getContext("2d");
+        bgCtx.globalCompositeOperation = await cb(ctx) || "source-over";
+        bgCtx.drawImage(canvas, 0, 0);
+        bgCtx.globalCompositeOperation = "source-over";
+    }
     resize() {
         if (!this.canvasElem || !this.containerElem || !this.realWidth || !this.realWidth)
             return;
@@ -7805,20 +7842,24 @@ class InteractiveCanvasComponent {
             canvas[axisX] = this.realWidth * this.ratio;
             canvas[axisY] = this.realHeight * this.ratio;
         }
+        this.styles = getComputedStyle(canvas);
+        this.ctx = canvas.getContext("2d");
         this.canvasWidth = canvas[axisX];
         this.canvasHeight = canvas[axisY];
         this.fullHeight = this.realHeight * this.ratio;
-        this.panOffset = -this.fullHeight;
-        this.fixPan();
+        this.viewRatio = Math.round(this.canvasHeight / this.fullHeight * 100) / 100;
+        this.fixRotation();
     }
     onTouchStart($event) {
         this.hoveredIndex = this.getIndexUnderPointer($event.touches.item(0));
+        this.lockedIndex = this.hoveredIndex;
         this.touched = true;
     }
     onTouchEnd($event) {
         this.selectItem($event.touches.item(0));
     }
-    onMouseDown() {
+    onMouseDown($event) {
+        this.lockedIndex = this.getIndexUnderPointer($event);
         this.touched = true;
     }
     onMouseUp($event) {
@@ -7834,67 +7875,76 @@ class InteractiveCanvasComponent {
         this.hoveredIndex = null;
         this.updateCursor();
     }
-    onPanStart($event) {
-        this.lockedIndex = this.getIndexUnderPointer($event?.pointers[0]);
-        this.lockedItem?.onPanStart.emit({
-            pointers: [],
-            deltaX: 0,
-            deltaY: 0,
-            item: this.lockedItem
-        });
+    onPanStart() {
         this.deltaX = 0;
         this.deltaY = 0;
     }
-    onPan($event) {
+    onPanMove($event) {
         const item = this.lockedItem;
         const deltaX = ($event.deltaX - this.deltaX) / this.ratio;
         const deltaY = ($event.deltaY - this.deltaY) / this.ratio;
+        const data = {
+            canvas: this,
+            pointers: $event.pointers,
+            item,
+            deltaX,
+            deltaY
+        };
+        if (this.horizontal) {
+            data.deltaX = -deltaY;
+            data.deltaY = +deltaX;
+        }
         if (item) {
-            const data = this.horizontal
-                ? { pointers: $event.pointers, deltaX: -deltaY, deltaY: +deltaX }
-                : { pointers: $event.pointers, deltaX, deltaY };
-            data.item = item;
-            item.onPan.emit(data);
+            item.moveBy(data.deltaX, data.deltaY);
+            this.onItemPan.emit(data);
         }
         else if (this.resizeMode == "fill") {
-            this.pan += this.horizontal ? deltaX : deltaY;
-            this.fixPan();
+            this.rotation += (this.horizontal ? deltaX : deltaY) / this.realHeight * 360;
+            this.fixRotation();
+            this.onPan.emit(data);
         }
         this.deltaX = $event.deltaX;
         this.deltaY = $event.deltaY;
     }
     onPanEnd() {
         const item = this.lockedItem;
-        item?.onPanEnd.emit({
+        const data = {
+            canvas: this,
             pointers: [],
             deltaX: 0,
             deltaY: 0,
             item
-        });
+        };
+        if (item) {
+            item.moveEnd();
+            this.onItemPanned.emit(data);
+        }
+        else {
+            this.onPanned.emit(data);
+        }
         this.lockedIndex = -1;
     }
-    fixPan() {
+    fixRotation() {
         if (this.fullHeight <= 0)
             return;
-        while (this.pan > 0) {
-            this.pan -= this.fullHeight;
-        }
-        while (this.pan < -this.fullHeight) {
-            this.pan += this.fullHeight;
-        }
-        this.rotation = Math.round(this.pan / this.fullHeight * 360);
-        const basePan = (this.rotation / 360 - 1) * this.fullHeight;
-        const cycles = this.resizeMode == "fit" ? [0] : [basePan - this.fullHeight, basePan, basePan + this.fullHeight];
+        this.rotation = ((this.rotation + 180) % 360 + 360) % 360 - 180;
+        this.rotation = Math.round(this.rotation * 100) / 100;
+        this.basePan = (this.rotation / 360 - 1) * this.fullHeight + this.canvasHeight * this.panOffset;
+        this.cycles = this.resizeMode == "fit"
+            ? [0] : [this.basePan - this.fullHeight, this.basePan, this.basePan + this.fullHeight];
         this.items.forEach(item => {
-            item.calcShapes(cycles);
+            item.calcShapes();
         });
+        this.onRotate.emit(this.rotation);
     }
     fixItems() {
-        this.items = this.itemList.toArray();
-        this.items.forEach((item, ix) => {
+        const items = this.itemList.toArray();
+        this.$items.next(items);
+        items.forEach((item, ix) => {
+            item.canvas = this;
             item.index = ix;
         });
-        this.fixPan();
+        this.fixRotation();
     }
     selectItem(pointer) {
         const selected = this.getIndexUnderPointer(pointer);
@@ -7926,7 +7976,6 @@ class InteractiveCanvasComponent {
     }
     updateCursor() {
         const cursor = this.getCursor();
-        this.renderer.setStyle(this.canvasElem.nativeElement, "cursor", cursor);
         this.renderer.setStyle(this.containerElem.nativeElement, "cursor", cursor);
     }
     getCursor() {
@@ -7946,7 +7995,6 @@ class InteractiveCanvasComponent {
     redraw() {
         if (!this.shouldDraw)
             return;
-        this.ctx = this.canvasElem.nativeElement?.getContext("2d");
         if (!this.ctx) {
             requestAnimationFrame(() => this.redraw());
             return;
@@ -7955,29 +8003,78 @@ class InteractiveCanvasComponent {
             requestAnimationFrame(() => this.redraw());
         });
     }
+    async drawItems() {
+        const ctx = this.ctx;
+        for (const item of this.items) {
+            for (const shape of item.shapes) {
+                ctx.save();
+                ctx.translate(shape.x, shape.y);
+                ctx.lineWidth = 1;
+                ctx.strokeStyle = "black";
+                ctx.fillStyle = "white";
+                await item.draw(ctx);
+                ctx.restore();
+            }
+        }
+        if (!this.debug)
+            return;
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = "rgba(114,232,45,0.55)";
+        for (const item of this.items) {
+            for (const shape of item.shapes) {
+                ctx.save();
+                ctx.translate(shape.x, shape.y);
+                if (shape instanceof Rect || shape instanceof Oval) {
+                    ctx.rotate(toRadians(shape.rotation));
+                    if (shape instanceof Oval) {
+                        drawOval(ctx, shape.width, shape.height);
+                    }
+                    else {
+                        drawRect(ctx, shape.width, shape.height);
+                    }
+                    ctx.stroke();
+                }
+                ctx.restore();
+            }
+        }
+    }
     async draw() {
         const ctx = this.ctx;
         const canvas = ctx.canvas;
+        if (canvas.width < 1 || canvas.height < 1)
+            return;
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.save();
-        const width = this.realWidth * this.ratio;
-        const height = this.realHeight * this.ratio;
-        const x = canvas.width / 2 - width / 2;
-        const y = canvas.height / 2 - height / 2;
         if (this.horizontal) {
             ctx.rotate(-Math.PI / 2);
             ctx.translate(-this.canvasWidth, 0);
         }
-        await this.onDraw(this, this.items);
+        try {
+            for (const renderer of this.beforeItems) {
+                await renderer(this, this.renderCtx);
+            }
+            await this.drawItems();
+            for (const renderer of this.afterItems) {
+                await renderer(this, this.renderCtx);
+            }
+        }
+        catch (e) {
+            console.warn(`There was an error rendering the canvas: ${e}`);
+        }
         ctx.restore();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { horizontal: "horizontal", selectedIndex: "selectedIndex", resizeMode: "resizeMode", realWidth: "realWidth", realHeight: "realHeight", onDraw: "onDraw" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "window:touchend": "onTouchEnd($event)", "window:mouseup": "onMouseUp($event)" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-wrapper', horizontal ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown()\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPan($event)\"\n     (panstart)=\"onPanStart($event)\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-wrapper{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-wrapper .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, deps: [{ token: i0.Renderer2 }, { token: UniversalService }, { token: i0.ElementRef }, { token: ROOT_ELEMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { debug: "debug", horizontal: "horizontal", selectedIndex: "selectedIndex", resizeMode: "resizeMode", realWidth: "realWidth", realHeight: "realHeight", panOffset: "panOffset", params: "params", renderCtx: "renderCtx", beforeItems: "beforeItems", afterItems: "afterItems" }, outputs: { selectedIndexChange: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd($event)", "window:mouseup": "onMouseUp($event)" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "interactive-canvas", template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-wrapper', horizontal ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown()\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPan($event)\"\n     (panstart)=\"onPanStart($event)\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-wrapper{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-wrapper .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { horizontal: [{
+            args: [{ standalone: false, selector: "interactive-canvas", template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: UniversalService }, { type: i0.ElementRef }, { type: HTMLElement, decorators: [{
+                    type: Inject,
+                    args: [ROOT_ELEMENT]
+                }] }], propDecorators: { debug: [{
+                type: Input
+            }], horizontal: [{
                 type: Input
             }], selectedIndex: [{
                 type: Input
@@ -7987,10 +8084,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], realHeight: [{
                 type: Input
-            }], onDraw: [{
+            }], panOffset: [{
+                type: Input
+            }], params: [{
+                type: Input
+            }], renderCtx: [{
+                type: Input
+            }], beforeItems: [{
+                type: Input
+            }], afterItems: [{
                 type: Input
             }], selectedIndexChange: [{
                 type: Output
+            }], onRotate: [{
+                type: Output
+            }], onItemPan: [{
+                type: Output
+            }], onItemPanned: [{
+                type: Output
+            }], onPan: [{
+                type: Output
+            }], onPanned: [{
+                type: Output
             }], containerElem: [{
                 type: ViewChild,
                 args: ["containerElem", { static: true }]
@@ -8009,31 +8124,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class InteractiveCircleComponent extends InteractiveItemComponent {
-    get canvas() {
-        return this.iCanvas;
-    }
-    get shape() {
-        return "circle";
-    }
-    constructor(iCanvas) {
+    constructor() {
         super();
-        this.iCanvas = iCanvas;
+        this.radius = 10;
+    }
+    draw(ctx) {
+        const diameter = this.radius * 2 * this.canvas.ratio;
+        drawOval(ctx, diameter, diameter);
+        ctx.fill();
+        ctx.stroke();
     }
     calcShape(x, y) {
         const ratio = this.canvas.ratio;
         return new Circle(x, y, this.radius * ratio);
     }
-    draw(ctx, scale = 1) {
-        const radius = this.radius * this.canvas.ratio * scale;
-        this.shapes.forEach(shape => {
-            ctx.beginPath();
-            ctx.arc(shape.x, shape.y, radius, 0, Math.PI * 2);
-            ctx.closePath();
-            ctx.fill();
-            ctx.stroke();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCircleComponent, deps: [{ token: InteractiveCanvasComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveCircleComponent, isStandalone: false, selector: "interactive-circle", inputs: { radius: "radius" }, providers: [
             { provide: InteractiveItemComponent, useExisting: InteractiveCircleComponent },
         ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
@@ -8048,39 +8153,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         { provide: InteractiveItemComponent, useExisting: InteractiveCircleComponent },
                     ]
                 }]
-        }], ctorParameters: () => [{ type: InteractiveCanvasComponent }], propDecorators: { radius: [{
+        }], ctorParameters: () => [], propDecorators: { radius: [{
                 type: Input
             }] } });
 
 class InteractiveRectComponent extends InteractiveItemComponent {
-    get canvas() {
-        return this.iCanvas;
-    }
-    get shape() {
-        return "rect";
-    }
-    constructor(iCanvas) {
+    constructor() {
         super();
-        this.iCanvas = iCanvas;
+        this.width = 10;
+        this.height = 10;
+        this.rotation = 0;
+    }
+    draw(ctx) {
+        const ratio = this.canvas.ratio;
+        ctx.rotate(toRadians(this.rotation));
+        drawRect(ctx, this.width * ratio, this.height * ratio);
+        ctx.fill();
+        ctx.stroke();
     }
     calcShape(x, y) {
         const ratio = this.canvas.ratio;
         return new Rect(x, y, this.width * ratio, this.height * ratio, this.rotation);
     }
-    draw(ctx, scale = 1) {
-        scale *= this.canvas.ratio;
-        const width = this.width * scale;
-        const height = this.height * scale;
-        this.shapes.forEach(shape => {
-            ctx.beginPath();
-            ctx.rect(shape.x - width / 2, shape.y - height / 2, width, height);
-            ctx.closePath();
-            ctx.fill();
-            ctx.stroke();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveRectComponent, deps: [{ token: InteractiveCanvasComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveRectComponent, isStandalone: false, selector: "interactive-rect", inputs: { width: "width", height: "height" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveRectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveRectComponent, isStandalone: false, selector: "interactive-rect", inputs: { width: "width", height: "height", rotation: "rotation" }, providers: [
             { provide: InteractiveItemComponent, useExisting: InteractiveRectComponent },
         ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
 }
@@ -8094,10 +8190,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         { provide: InteractiveItemComponent, useExisting: InteractiveRectComponent },
                     ]
                 }]
-        }], ctorParameters: () => [{ type: InteractiveCanvasComponent }], propDecorators: { width: [{
+        }], ctorParameters: () => [], propDecorators: { width: [{
                 type: Input
             }], height: [{
                 type: Input
+            }], rotation: [{
+                type: Input
             }] } });
 
 class TabsComponent {
@@ -8586,7 +8684,6 @@ const providers = [
     ComponentLoaderService,
     TranslatedUrlSerializer,
     UniversalService,
-    WasmService,
     DeviceDetectorService,
     GlobalTemplateService,
     {
@@ -8617,163 +8714,6 @@ function loadConfig(config) {
     return config.load;
 }
 
-class Wasi {
-    constructor() {
-        this.env = {};
-        this.instantiated = false;
-        this.wasi = [
-            "emscripten_notify_memory_growth",
-            "proc_exit",
-            "environ_get",
-            "environ_sizes_get",
-            "fd_close",
-            "fd_write",
-            "fd_read",
-            "fd_seek",
-        ].reduce((res, key) => {
-            if (typeof this[key] === "function") {
-                res[key] = this[key].bind(this);
-            }
-            return res;
-        }, {});
-    }
-    instantiate(bytes) {
-        if (this.instantiated) {
-            throw new Error("WASI already instantiated");
-        }
-        this.instantiated = true;
-        return WebAssembly.instantiate(bytes, {
-            wasi_snapshot_preview1: this.wasi,
-            env: this.wasi
-        }).then(module => {
-            const exports = module.instance.exports;
-            this.wasm = {
-                ...exports,
-                writeArrayToMemory: (array) => {
-                    const bytes = array.length * array.BYTES_PER_ELEMENT;
-                    const pointer = exports.malloc(bytes);
-                    const ctr = array.constructor;
-                    const heapArray = new ctr(this.wasm.memory.buffer, pointer, array.length);
-                    heapArray.set(array);
-                    return pointer;
-                },
-                readArrayFromMemory: (pointer, array) => {
-                    const ctr = array.constructor;
-                    const heapArray = new ctr(this.wasm.memory.buffer, pointer, array.length);
-                    array.set(heapArray);
-                    return array;
-                }
-            };
-            this.updateMemoryViews();
-            return this.wasm;
-        });
-    }
-    updateMemoryViews() {
-        const buffer = this.wasm.memory.buffer;
-        this.wasm.HEAP8 = new Int8Array(buffer);
-        this.wasm.HEAP16 = new Int16Array(buffer);
-        this.wasm.HEAP32 = new Int32Array(buffer);
-        this.wasm.HEAPU8 = new Uint8Array(buffer);
-        this.wasm.HEAPU16 = new Uint16Array(buffer);
-        this.wasm.HEAPU32 = new Uint32Array(buffer);
-        this.wasm.HEAPF32 = new Float32Array(buffer);
-        this.wasm.HEAPF64 = new Float64Array(buffer);
-    }
-    getEnvStrings() {
-        if (!this.envStrings) {
-            let x;
-            const env = {};
-            for (x in this.env) {
-                if (this.env[x] === undefined)
-                    delete env[x];
-                else
-                    env[x] = this.env[x];
-            }
-            const strings = [];
-            for (x in env) {
-                strings.push(x + "=" + env[x]);
-            }
-            this.envStrings = strings;
-        }
-        return this.envStrings;
-    }
-    stringToAscii(str, buffer) {
-        const HEAP8 = this.wasm.HEAP8;
-        for (let i = 0; i < str.length; ++i) {
-            HEAP8[buffer++ >> 0] = str.charCodeAt(i);
-        }
-        HEAP8[buffer >> 0] = 0;
-    }
-    emscripten_notify_memory_growth(memoryIndex) {
-        this.updateMemoryViews();
-    }
-    proc_exit(rval) {
-        console.log("proc_exit", rval);
-    }
-    environ_get(environ, environ_buf) {
-        if (!this.wasm.HEAP8.byteLength) {
-            this.emscripten_notify_memory_growth(0);
-        }
-        const HEAPU32 = this.wasm.HEAPU32;
-        let bufSize = 0;
-        this.getEnvStrings().forEach((str, i) => {
-            const ptr = environ_buf + bufSize;
-            HEAPU32[environ + i * 4 >> 2] = ptr;
-            this.stringToAscii(str, ptr);
-            bufSize += str.length + 1;
-        });
-        return 0;
-    }
-    environ_sizes_get(penviron_count, penviron_buf_size) {
-        if (!this.wasm.HEAP8.byteLength) {
-            this.emscripten_notify_memory_growth(0);
-        }
-        const HEAPU32 = this.wasm.HEAPU32;
-        const strings = this.getEnvStrings();
-        HEAPU32[penviron_count >> 2] = strings.length;
-        let bufSize = 0;
-        strings.forEach(function (string) {
-            bufSize += string.length + 1;
-        });
-        HEAPU32[penviron_buf_size >> 2] = bufSize;
-        // WASI_ESUCCESS
-        return 0;
-    }
-    fd_close(fd) {
-        // WASI_ESUCCESS
-        return 0;
-    }
-    fd_write(fd, iovs, iovs_len, nwritten) {
-        if (fd !== 1) {
-            // WASI_EBADF
-            return 8;
-        }
-        if (iovs_len !== 1) {
-            // WASI_ENOSYS
-            return 52;
-        }
-        this.wasm.HEAPU32[nwritten >> 2] = this.wasm.HEAPU32[iovs + 4 >> 2];
-        // WASI_ESUCCESS
-        return 0;
-    }
-    fd_read(fd, iovs, iovs_len, nread) {
-        // WASI_EINVAL
-        return 28;
-    }
-    fd_seek(fd, offset, whence, newOffset) {
-        // WASI_EINVAL
-        return 28;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Wasi, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Wasi, providedIn: "root" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Wasi, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root"
-                }]
-        }], ctorParameters: () => [] });
-
 function loadBaseUrl() {
     if (typeof (document) === "undefined" || typeof (location) === "undefined")
         return "/";
@@ -8853,10 +8793,6 @@ class NgxUtilsModule {
                 provide: DIALOG_SERVICE,
                 useExisting: (!config ? null : config.dialogService) || BaseDialogService
             },
-            {
-                provide: WASI_IMPLEMENTATION,
-                useExisting: (!config ? null : config.wasiImplementation) || Wasi
-            },
             {
                 provide: ICON_TYPE,
                 useValue: (!config ? null : config.iconType) || IconDefaultComponent,
@@ -8894,17 +8830,18 @@ class NgxUtilsModule {
                 provide: STATIC_SCHEMAS,
                 useValue: (!config ? null : config.staticSchemas) ?? {},
             },
-            {
-                provide: APP_INITIALIZER,
-                useFactory: (!config ? null : config.initializeApp) || loadConfig,
-                multi: true,
-                deps: [(!config ? null : config.initializeApp) ? Injector : CONFIG_SERVICE]
-            },
             {
                 provide: APP_BASE_HREF,
                 useFactory: loadBaseHref,
                 deps: [APP_BASE_URL]
-            }
+            },
+            provideAppInitializer(() => {
+                if (config && config.initializeApp) {
+                    const initializer = config.initializeApp(inject(Injector));
+                    return initializer();
+                }
+                return loadConfig(inject(CONFIG_SERVICE));
+            }),
         ];
     }
     static forRoot(config) {
@@ -8976,5 +8913,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, computedPrevious, createTypedProvider, cssStyles, cssVariables, getComponentDef, getCssVariables, getRoot, hashCode, impatientPromise, isBrowser, parseSelector, provideEntryComponents, provideWithOptions, selectorMatchesList, switchClass };
+export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, cachedFactory, cancelablePromise, checkTransitions, computedPrevious, createTypedProvider, cssStyles, cssVariables, dotProduct, drawOval, drawRect, getComponentDef, getCssVariables, getRoot, hashCode, impatientPromise, isBrowser, isPoint, parseSelector, perpendicular, provideEntryComponents, provideWithOptions, ptAdd, ptDistance, ptLength, ptMultiply, ptSubtract, rotateDeg, rotateRad, selectorMatchesList, switchClass, toDegrees, toRadians };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map