@stemy/ngx-utils 19.2.10 → 19.2.12

package/fesm2022/stemy-ngx-utils.mjs

@@ -391,6 +391,8 @@ var StorageMode;
 })(StorageMode || (StorageMode = {}));
 const TOASTER_SERVICE = new InjectionToken("toaster-service");
 const DIALOG_SERVICE = new InjectionToken("dialog-service");
+// --- Socket service ---
+const SOCKET_IO_PATH = new InjectionToken("socket-io-path");
 const PROMISE_SERVICE = new InjectionToken("promise-service");
 const WASI_IMPLEMENTATION = new InjectionToken("wasi-implementation");
 // --- Reflect utils ---
@@ -784,23 +786,20 @@ class StateService {
         }), filter(e => e instanceof NavigationEnd))
             .subscribe(() => {
             const routerStateSnapshot = this.router.routerState.snapshot;
-            let snapshot = routerStateSnapshot.root;
             let context = this.contexts?.getContext("primary");
-            let segments = snapshot.url;
+            let segments = [];
             const components = [];
             const snapshots = [];
-            while (snapshot) {
+            while (context) {
+                const snapshot = context.route.snapshot;
                 snapshots.push(snapshot);
                 segments = segments.concat(snapshot.url);
-                if (context) {
-                    if (context.outlet && context.outlet.component)
-                        components.push(context.outlet.component);
-                    context = context.children.getContext("primary");
-                }
-                snapshot = snapshot.firstChild;
+                if (context.outlet && context.outlet.component)
+                    components.push(context.outlet.component);
+                context = context.children.getContext("primary");
             }
             this.stateInfo = {
-                url: routerStateSnapshot.url,
+                url: segments.map(s => s.url).join("/"),
                 segments: segments,
                 components: components
             };
@@ -2197,6 +2196,129 @@ class SetUtils {
     }
 }
 
+function uuid() {
+    if (typeof window !== "undefined" && typeof window.crypto !== "undefined" && typeof window.crypto.getRandomValues !== "undefined") {
+        const buf = new Uint16Array(8);
+        window.crypto.getRandomValues(buf);
+        return Array.from(buf).map(pad4).join("");
+    }
+    return new Array(8).fill(0).map(random4).join("");
+}
+function pad4(num, index) {
+    const prefix = 1 < index && index < 6 ? "-" : "";
+    let ret = num.toString(16);
+    while (ret.length < 4) {
+        ret = "0" + ret;
+    }
+    return prefix + ret;
+}
+function random4(_, index) {
+    const prefix = 1 < index && index < 6 ? "-" : "";
+    return prefix + Math.floor((1 + Math.random()) * 0x10000)
+        .toString(16)
+        .substring(1);
+}
+class SocketClient {
+    get id() {
+        return this.open ? this.sid : null;
+    }
+    constructor(url, ioLoader) {
+        this.url = url;
+        this.ioLoader = ioLoader;
+        this.status = new BehaviorSubject(false);
+        this.channels = new Map([
+            ["connect", new Subject()],
+            ["disconnect", new Subject()],
+            ["error", new Subject()]
+        ]);
+        this.responseHandlers = new Map();
+        this.sid = null;
+        this.open = false;
+    }
+    connect(extraHeaders = {}) {
+        if (this.ws)
+            return;
+        const url = new URL(this.url);
+        this.factory = this.factory || this.ioLoader();
+        this.ws = new Promise((resolve, reject) => {
+            this.factory.then(io => {
+                const protocol = url.protocol.replace("http", "ws");
+                const ws = io(`${protocol}//${url.host}`, {
+                    extraHeaders,
+                    timeout: 5000,
+                    path: url.pathname
+                });
+                console.log(`socket connecting to: ${protocol}//${url.host}`, url.pathname);
+                ws.on(`connect`, () => {
+                    console.log(`socket connected`);
+                    this.open = true;
+                    this.sid = ws.id;
+                    this.status.next(true);
+                });
+                ws.on(`disconnect`, () => {
+                    this.open = false;
+                    this.status.next(false);
+                });
+                Object.keys(this.channels).map(event => {
+                    ws.on(event, (data) => {
+                        this.handleResponse(event, data);
+                        this.channels[event].next(data);
+                    });
+                });
+                resolve(ws);
+            }, reject);
+        });
+    }
+    disconnect() {
+        if (!this.ws)
+            return;
+        this.ws.then(ws => ws.disconnect());
+        this.ws = null;
+    }
+    subscribe(event, cb) {
+        if (!this.channels[event]) {
+            this.channels[event] = new Subject();
+            this.ws?.then(ws => {
+                ws.on(event, (data) => {
+                    this.handleResponse(event, data);
+                    this.channels[event].next(data);
+                });
+            });
+        }
+        return this.channels[event].subscribe(cb);
+    }
+    emit(event, content) {
+        this.ws.then(ws => ws.emit(event, content));
+    }
+    async request(event, content) {
+        const id = uuid();
+        const ws = await this.ws;
+        const promise = new Promise((resolve, reject) => {
+            this.responseHandlers.set(id, { resolve, reject });
+            setTimeout(() => {
+                this.responseHandlers.delete(id);
+                reject(`Timeout for ${event} request ${JSON.stringify(content)}`);
+            }, 5000);
+        });
+        ws.emit(event, { ...content, immediate_response_id: id });
+        return promise;
+    }
+    handleResponse(event, content) {
+        if (typeof content !== "object" || Array.isArray(content) || content instanceof Date)
+            return;
+        const id = content.immediate_response_id;
+        const handler = this.responseHandlers.get(id);
+        if (!handler)
+            return;
+        this.responseHandlers.delete(id);
+        if (event === "error") {
+            handler.reject(content);
+            return;
+        }
+        handler.resolve(content);
+    }
+}
+
 class UniqueUtils {
     static uuid() {
         if (typeof window !== "undefined" && typeof window.crypto !== "undefined" && typeof window.crypto.getRandomValues !== "undefined") {
@@ -3852,6 +3974,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     args: [NgZone]
                 }] }] });
 
+class SocketService {
+    get status() {
+        return this.client.status;
+    }
+    get id() {
+        return this.client.id;
+    }
+    constructor(auth, api, ioPath) {
+        this.auth = auth;
+        this.api = api;
+        this.ioPath = ioPath;
+        const url = this.api.url(this.ioPath);
+        this.client = new SocketClient(url, async () => {
+            let script = null;
+            try {
+                script = await LoaderUtils.loadScript(`${url}/socket.io.js`);
+            }
+            catch (e) {
+                script?.remove();
+                await LoaderUtils.loadScript(`https://cdn.socket.io/4.7.4/socket.io.min.js`);
+            }
+            return window["io"];
+        });
+    }
+    withAuth(extraHeaders = {}) {
+        this.authSub = this.auth.userChanged.subscribe(user => {
+            if (user) {
+                this.connect(extraHeaders);
+                return;
+            }
+            this.disconnect();
+        });
+        if (this.auth.isAuthenticated) {
+            this.connect(extraHeaders);
+        }
+    }
+    ngOnDestroy() {
+        this.authSub?.unsubscribe();
+        this.disconnect();
+    }
+    connect(extraHeaders = {}) {
+        if (this.authSub && this.auth.isAuthenticated) {
+            extraHeaders = {
+                ...(extraHeaders || {}),
+                ...Object.entries(this.api.client.requestHeaders || {}).reduce((res, entry) => {
+                    res[entry[0]] = Array.isArray(entry[1]) ? entry[1].join(", ") : entry[1];
+                    return res;
+                }, {})
+            };
+        }
+        this.client.connect(extraHeaders);
+    }
+    disconnect() {
+        this.client.disconnect();
+    }
+    subscribe(event, cb) {
+        return this.client.subscribe(event, cb);
+    }
+    emit(event, content) {
+        this.client.emit(event, content);
+    }
+    request(event, content) {
+        return this.client.request(event, content);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SocketService, deps: [{ token: AUTH_SERVICE }, { token: API_SERVICE }, { token: SOCKET_IO_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SocketService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SocketService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [AUTH_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [API_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SOCKET_IO_PATH]
+                }] }] });
+
 class DragDropHandler {
     static get(el) {
         if (DragDropHandler.handlers?.has(el)) {
@@ -5132,7 +5334,7 @@ class PaginationDirective {
     refresh(time) {
         time = isNaN(time) || time <= 0 ? this.updateTime : time;
         this.updateTimer.time = isNaN(time) || time <= 0 ? 100 : time;
-        this.waitFor.then(() => {
+        Promise.resolve(this.waitFor).then(() => {
             this.updateTimer.run();
         });
     }
@@ -5345,6 +5547,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 type: Input
             }] } });
 
+class DropdownDirective {
+    static { this.active = null; }
+    get nativeElement() {
+        return this.element.nativeElement;
+    }
+    get isOpened() {
+        return this.opened;
+    }
+    get getDisabled() {
+        return this.disabled;
+    }
+    set isDisabled(value) {
+        this.disabled = value;
+        if (!value)
+            return;
+        this.hide();
+    }
+    constructor(element) {
+        this.element = element;
+        this.opened = false;
+        this.disabled = false;
+        this.closeInside = true;
+        this.keyboardHandler = true;
+        this.onShown = new EventEmitter();
+        this.onHidden = new EventEmitter();
+        this.onKeyboard = new EventEmitter();
+        this.onTap = (event) => {
+            const target = event.target;
+            if (event["button"])
+                return;
+            if (this.nativeElement && this.nativeElement.contains(target) && !this.closeInside) {
+                return;
+            }
+            setTimeout(() => this.hide(), event.type == "touchend" ? 250 : 100);
+        };
+        this.onKeyDown = (event) => {
+            const input = event.target;
+            const notInput = input && input.tagName !== "INPUT" && input.tagName !== "TEXTAREA";
+            if ("Tab" === event.key || !input || notInput) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+            if ("Esc" === event.key || "Escape" === event.key) {
+                this.hide();
+                return;
+            }
+            this.onKeyboard.emit(event);
+        };
+    }
+    ngOnDestroy() {
+        if (DropdownDirective.active === this) {
+            DropdownDirective.active = null;
+            this.onHidden.emit(this);
+        }
+    }
+    showEvent() {
+        this.onShown.emit(this);
+    }
+    hideEvent() {
+        this.onHidden.emit(this);
+    }
+    show($event) {
+        if (this.opened)
+            return;
+        if ($event) {
+            if (!this.keyboardHandler)
+                return;
+            $event.stopPropagation();
+            $event.preventDefault();
+        }
+        if (this.disabled)
+            return;
+        this.opened = true;
+        this.showEvent();
+        DropdownDirective.active = this;
+        // Prevent toggle from selecting an item right after it is shown
+        setTimeout(() => {
+            if (!this.opened)
+                return;
+            document.addEventListener("touchend", this.onTap);
+            document.addEventListener("mouseup", this.onTap);
+            document.addEventListener("keydown", this.onKeyDown);
+        }, 10);
+    }
+    hide() {
+        if (!this.opened)
+            return;
+        this.opened = false;
+        this.hideEvent();
+        document.removeEventListener("touchend", this.onTap);
+        document.removeEventListener("mouseup", this.onTap);
+        document.removeEventListener("keydown", this.onKeyDown);
+        // Prevent toggle from refocus itself after it is hidden because of another toggle
+        setTimeout(() => {
+            if (DropdownDirective.active === this) {
+                DropdownDirective.active = null;
+                this.nativeElement?.focus();
+            }
+        }, 10);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DropdownDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: DropdownDirective, isStandalone: false, selector: "[dd],[drop-down]", inputs: { closeInside: "closeInside", keyboardHandler: "keyboardHandler", isDisabled: "isDisabled" }, outputs: { onShown: "onShown", onHidden: "onHidden", onKeyboard: "onKeyboard" }, host: { listeners: { "keydown.enter": "show($event)", "keydown.space": "show($event)" }, properties: { "class.open": "this.isOpened", "class.disabled": "this.getDisabled" } }, exportAs: ["dropdown"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: "[dd],[drop-down]",
+                    exportAs: "dropdown"
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { closeInside: [{
+                type: Input
+            }], keyboardHandler: [{
+                type: Input
+            }], onShown: [{
+                type: Output
+            }], onHidden: [{
+                type: Output
+            }], onKeyboard: [{
+                type: Output
+            }], isOpened: [{
+                type: HostBinding,
+                args: ["class.open"]
+            }], getDisabled: [{
+                type: HostBinding,
+                args: ["class.disabled"]
+            }], isDisabled: [{
+                type: Input
+            }], show: [{
+                type: HostListener,
+                args: ["keydown.enter", ["$event"]]
+            }, {
+                type: HostListener,
+                args: ["keydown.space", ["$event"]]
+            }] } });
+
+class DropdownToggleDirective extends AsyncMethodBase {
+    constructor(element, dropdown, toaster, cdr) {
+        super(toaster, cdr);
+        this.element = element;
+        this.dropdown = dropdown;
+    }
+    getMethod() {
+        return this.beforeOpen;
+    }
+    callMethod() {
+        if (this.dropdown.isOpened) {
+            this.dropdown.hide();
+        }
+        else if (!super.callMethod()) {
+            this.dropdown.show();
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DropdownToggleDirective, deps: [{ token: i0.ElementRef }, { token: DropdownDirective }, { token: TOASTER_SERVICE }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: DropdownToggleDirective, isStandalone: false, selector: "[dropdownToggle]", inputs: { beforeOpen: "beforeOpen" }, exportAs: ["dropdown-toggle"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DropdownToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: "[dropdownToggle]",
+                    exportAs: "dropdown-toggle",
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DropdownDirective }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOASTER_SERVICE]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { beforeOpen: [{
+                type: Input
+            }] } });
+
 class UnorderedListItemDirective {
     get elem() {
         return this.elementRef.nativeElement;
@@ -5785,8 +6158,8 @@ class DynamicTableComponent {
     }
     setSorting(column, toggle) {
         if (toggle) {
-            this.sortOpen = !this.sortOpen;
-            return;
+            toggle.show();
+            return false;
         }
         this.orderDescending = column == this.orderBy && !this.orderDescending;
         this.orderBy = column;
@@ -5838,11 +6211,11 @@ class DynamicTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { label: "label", placeholder: "placeholder", dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", 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: "filterTemplate", first: true, predicate: ["filterTemplate"], 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: "defaultFilterTemplate", first: true, predicate: ["defaultFilterTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n    <ng-template #defaultFilterTemplate let-table>\r\n        <div class=\"table-filter\">\r\n            <ng-container *ngIf=\"table.showFilter\">\r\n                <label *ngIf=\"label\" [attr.for]=\"tableId\">\r\n                    {{ label | translate }}\r\n                </label>\r\n                <input type=\"text\"\r\n                       class=\"form-control\"\r\n                       [attr.id]=\"tableId\"\r\n                       [attr.data-testid]=\"testId + '-filter-input'\"\r\n                       [placeholder]=\"placeholder | translate\"\r\n                       [ngModel]=\"table.filter\"\r\n                       (ngModelChange)=\"table.setFilter($event)\"/>\r\n            </ng-container>\r\n            <ng-content select=\"[table-filter]\"></ng-content>\r\n        </div>\r\n    </ng-template>\r\n    <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    <div class=\"table-responsive\">\r\n        <ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n            <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n                <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n            </ng-template>\r\n            <ng-template #pureTemplate>\r\n                <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n            </ng-template>\r\n            <td [ngClass]=\"'column-' + column\"\r\n                [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n                <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n            </td>\r\n        </ng-template>\r\n\r\n        <ng-template #columnsTemplate let-context>\r\n            <ng-container *ngFor=\"let column of cols\"\r\n                          [ngxTemplateOutlet]=\"columnTemplate\"\r\n                          [context]=\"context\"\r\n                          [additionalContext]=\"{\r\n                            template: templates[column],\r\n                            column: column\r\n                          }\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultRowTemplate let-context>\r\n            <tr draggable=\"true\"\r\n                #elem\r\n                [ngClass]=\"{active: selected === context.item}\"\r\n                (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n                (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n                (dragleave)=\"onDragLeave($event, elem)\"\r\n                (drop)=\"onDrop($event, elem, context.item)\">\r\n                <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n            <ng-template #defaultCol>\r\n                <span>{{ realColumns[column].title | translate }}</span>\r\n            </ng-template>\r\n            <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n               [ngClass]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"\r\n               (click)=\"setSorting(column, toggle)\">\r\n                <span>{{ realColumns[column].title | translate }}</span>\r\n                <i *ngIf=\"orderBy == column\"\r\n                   [icon]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"></i>\r\n            </a>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultWrapperTemplate>\r\n            <div class=\"sort-toggle\" *ngIf=\"orderBy\">\r\n                <div class=\"sort-toggle-content\">\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{column: orderBy, toggle: true}\"></ng-container>\r\n                </div>\r\n            </div>\r\n            <table class=\"table table-striped\">\r\n                <thead>\r\n                    <tr [ngClass]=\"{'header': true, 'sort-open': sortOpen}\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column, toggle: false}\"></ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n                            <ng-container *ngIf=\"realColumns[column].filter\">\r\n                                <input class=\"form-control\"\r\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                       [type]=\"realColumns[column].filterType || 'text'\"\r\n                                       [placeholder]=\"realColumns[column].title | translate\"\r\n                                       [ngModel]=\"query[column]\"\r\n                                       (ngModelChange)=\"updateQuery(column, $event)\"/>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <ng-container *paginationItem=\"let context\"\r\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                  [context]=\"context\"\r\n                                  [additionalContext]=\"this\"></ng-container>\r\n                </tbody>\r\n            </table>\r\n        </ng-template>\r\n\r\n        <div class=\"table-wrapper\">\r\n            <ng-content select=\"[table-top]\"></ng-content>\r\n            <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                          [context]=\"this\"></ng-container>\r\n            <ng-content select=\"[table-bottom]\"></ng-content>\r\n        </div>\r\n    </div>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35)}.dynamic-table .sort-toggle{display:none}.dynamic-table .table-responsive{overflow:hidden;overflow-x:auto}.dynamic-table .table-filter:not(:empty){display:flex;gap:10px;margin-bottom:20px}.dynamic-table .table-filter:not(:empty)>input{max-width:400px}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table td,.dynamic-table table.table th{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle}.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 a{color:var(--text-color);cursor:pointer}.dynamic-table table.table thead th span{display:inline-block;vertical-align:middle}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}\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: 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.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: IconDirective, selector: "[icon]", inputs: ["icon", "activeIcon", "active"], outputs: ["activeChange"] }, { 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: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { label: "label", placeholder: "placeholder", dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", 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: "filterTemplate", first: true, predicate: ["filterTemplate"], 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: "defaultFilterTemplate", first: true, predicate: ["defaultFilterTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n    </ng-template>\r\n    <ng-template #pureTemplate>\r\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n    </ng-template>\r\n    <td [ngClass]=\"'column-' + column\"\r\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n    <ng-container *ngFor=\"let column of cols\"\r\n                  [ngxTemplateOutlet]=\"columnTemplate\"\r\n                  [context]=\"context\"\r\n                  [additionalContext]=\"{\r\n                            template: templates[column],\r\n                            column: column\r\n                          }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n    <tr draggable=\"true\"\r\n        #elem\r\n        [ngClass]=\"{active: selected === context.item}\"\r\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n        (dragleave)=\"onDragLeave($event, elem)\"\r\n        (drop)=\"onDrop($event, elem, context.item)\">\r\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n    </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n    <ng-template #defaultCol>\r\n        <span>{{ realColumns[column].title | translate }}</span>\r\n    </ng-template>\r\n    <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n       [ngClass]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"\r\n       (click)=\"setSorting(column, toggle)\">\r\n        <span>{{ realColumns[column].title | translate }}</span>\r\n        <i *ngIf=\"orderBy == column\"\r\n           [icon]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"></i>\r\n    </a>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n    <ng-template #defaultFilterTemplate let-table>\r\n        <div class=\"table-filter\">\r\n            <ng-container *ngIf=\"table.showFilter\">\r\n                <label *ngIf=\"label\" [attr.for]=\"tableId\">\r\n                    {{ label | translate }}\r\n                </label>\r\n                <input type=\"text\"\r\n                       class=\"form-control\"\r\n                       [attr.id]=\"tableId\"\r\n                       [attr.data-testid]=\"testId + '-filter-input'\"\r\n                       [placeholder]=\"placeholder | translate\"\r\n                       [ngModel]=\"table.filter\"\r\n                       (ngModelChange)=\"table.setFilter($event)\"/>\r\n            </ng-container>\r\n            <ng-content select=\"[table-filter]\"></ng-content>\r\n        </div>\r\n    </ng-template>\r\n    <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n    <div class=\"sort-toggle\" dd #sortDd=\"dropdown\" *ngIf=\"orderBy\">\r\n        <div class=\"sort-toggle-content\">\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                          [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n        </div>\r\n        <ul>\r\n            <li *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                              [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    <div class=\"table-responsive\">\r\n        <ng-template #defaultWrapperTemplate>\r\n            <table class=\"table table-striped\">\r\n                <thead>\r\n                    <tr class=\"header\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n                            <ng-container *ngIf=\"realColumns[column].filter\">\r\n                                <input class=\"form-control\"\r\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                       [type]=\"realColumns[column].filterType || 'text'\"\r\n                                       [placeholder]=\"realColumns[column].title | translate\"\r\n                                       [ngModel]=\"query[column]\"\r\n                                       (ngModelChange)=\"updateQuery(column, $event)\"/>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <ng-container *paginationItem=\"let context\"\r\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                  [context]=\"context\"\r\n                                  [additionalContext]=\"this\"></ng-container>\r\n                </tbody>\r\n            </table>\r\n        </ng-template>\r\n\r\n        <div class=\"table-wrapper\">\r\n            <ng-content select=\"[table-top]\"></ng-content>\r\n            <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                          [context]=\"this\"></ng-container>\r\n            <ng-content select=\"[table-bottom]\"></ng-content>\r\n        </div>\r\n    </div>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 2px;--bg-color: #FFFFFF;--text-color: #151515;--highlight-color: var(--primary-color, #888888)}.dynamic-table .sort-toggle{display:none;position:relative;margin:10px}.dynamic-table .sort-toggle .svg-icon{pointer-events:none}.dynamic-table .sort-toggle .sort-toggle-content{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--highlight-color);border-radius:5px;cursor:pointer;padding-right:8px}.dynamic-table .sort-toggle a{padding:8px 12px}.dynamic-table .sort-toggle ul{margin:-2px 0 0;padding:0;list-style:none;position:absolute;z-index:1;width:100%;min-height:fit-content;border:var(--border-size) solid var(--highlight-color);border-radius:0 0 5px 5px;overflow:hidden;display:none}.dynamic-table .sort-toggle li{background:var(--bg-color);color:var(--text-color);cursor:pointer;padding-right:8px}.dynamic-table .sort-toggle .sort-toggle-content:hover,.dynamic-table .sort-toggle li:hover,.dynamic-table .sort-toggle li.active{background-color:var(--highlight-color);color:#fff}.dynamic-table .sort-toggle.open ul{display:block}.dynamic-table .table-responsive{overflow:hidden;overflow-x:auto}.dynamic-table .table-filter:not(:empty){display:flex;gap:10px;margin-bottom:20px}.dynamic-table .table-filter:not(:empty)>input{max-width:400px}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table td,.dynamic-table table.table th{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle}.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 a{color:var(--text-color);cursor:pointer}.dynamic-table table.table thead th span{display:inline-block;vertical-align:middle}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-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)}\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: 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.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: IconDirective, selector: "[icon]", inputs: ["icon", "activeIcon", "active"], outputs: ["activeChange"] }, { 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: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n    <ng-template #defaultFilterTemplate let-table>\r\n        <div class=\"table-filter\">\r\n            <ng-container *ngIf=\"table.showFilter\">\r\n                <label *ngIf=\"label\" [attr.for]=\"tableId\">\r\n                    {{ label | translate }}\r\n                </label>\r\n                <input type=\"text\"\r\n                       class=\"form-control\"\r\n                       [attr.id]=\"tableId\"\r\n                       [attr.data-testid]=\"testId + '-filter-input'\"\r\n                       [placeholder]=\"placeholder | translate\"\r\n                       [ngModel]=\"table.filter\"\r\n                       (ngModelChange)=\"table.setFilter($event)\"/>\r\n            </ng-container>\r\n            <ng-content select=\"[table-filter]\"></ng-content>\r\n        </div>\r\n    </ng-template>\r\n    <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    <div class=\"table-responsive\">\r\n        <ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n            <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n                <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n            </ng-template>\r\n            <ng-template #pureTemplate>\r\n                <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n            </ng-template>\r\n            <td [ngClass]=\"'column-' + column\"\r\n                [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n                <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n            </td>\r\n        </ng-template>\r\n\r\n        <ng-template #columnsTemplate let-context>\r\n            <ng-container *ngFor=\"let column of cols\"\r\n                          [ngxTemplateOutlet]=\"columnTemplate\"\r\n                          [context]=\"context\"\r\n                          [additionalContext]=\"{\r\n                            template: templates[column],\r\n                            column: column\r\n                          }\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultRowTemplate let-context>\r\n            <tr draggable=\"true\"\r\n                #elem\r\n                [ngClass]=\"{active: selected === context.item}\"\r\n                (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n                (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n                (dragleave)=\"onDragLeave($event, elem)\"\r\n                (drop)=\"onDrop($event, elem, context.item)\">\r\n                <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n            <ng-template #defaultCol>\r\n                <span>{{ realColumns[column].title | translate }}</span>\r\n            </ng-template>\r\n            <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n               [ngClass]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"\r\n               (click)=\"setSorting(column, toggle)\">\r\n                <span>{{ realColumns[column].title | translate }}</span>\r\n                <i *ngIf=\"orderBy == column\"\r\n                   [icon]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"></i>\r\n            </a>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultWrapperTemplate>\r\n            <div class=\"sort-toggle\" *ngIf=\"orderBy\">\r\n                <div class=\"sort-toggle-content\">\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{column: orderBy, toggle: true}\"></ng-container>\r\n                </div>\r\n            </div>\r\n            <table class=\"table table-striped\">\r\n                <thead>\r\n                    <tr [ngClass]=\"{'header': true, 'sort-open': sortOpen}\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column, toggle: false}\"></ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n                            <ng-container *ngIf=\"realColumns[column].filter\">\r\n                                <input class=\"form-control\"\r\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                       [type]=\"realColumns[column].filterType || 'text'\"\r\n                                       [placeholder]=\"realColumns[column].title | translate\"\r\n                                       [ngModel]=\"query[column]\"\r\n                                       (ngModelChange)=\"updateQuery(column, $event)\"/>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <ng-container *paginationItem=\"let context\"\r\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                  [context]=\"context\"\r\n                                  [additionalContext]=\"this\"></ng-container>\r\n                </tbody>\r\n            </table>\r\n        </ng-template>\r\n\r\n        <div class=\"table-wrapper\">\r\n            <ng-content select=\"[table-top]\"></ng-content>\r\n            <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                          [context]=\"this\"></ng-container>\r\n            <ng-content select=\"[table-bottom]\"></ng-content>\r\n        </div>\r\n    </div>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35)}.dynamic-table .sort-toggle{display:none}.dynamic-table .table-responsive{overflow:hidden;overflow-x:auto}.dynamic-table .table-filter:not(:empty){display:flex;gap:10px;margin-bottom:20px}.dynamic-table .table-filter:not(:empty)>input{max-width:400px}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table td,.dynamic-table table.table th{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle}.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 a{color:var(--text-color);cursor:pointer}.dynamic-table table.table thead th span{display:inline-block;vertical-align:middle}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n    </ng-template>\r\n    <ng-template #pureTemplate>\r\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n    </ng-template>\r\n    <td [ngClass]=\"'column-' + column\"\r\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n    <ng-container *ngFor=\"let column of cols\"\r\n                  [ngxTemplateOutlet]=\"columnTemplate\"\r\n                  [context]=\"context\"\r\n                  [additionalContext]=\"{\r\n                            template: templates[column],\r\n                            column: column\r\n                          }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n    <tr draggable=\"true\"\r\n        #elem\r\n        [ngClass]=\"{active: selected === context.item}\"\r\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n        (dragleave)=\"onDragLeave($event, elem)\"\r\n        (drop)=\"onDrop($event, elem, context.item)\">\r\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n    </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n    <ng-template #defaultCol>\r\n        <span>{{ realColumns[column].title | translate }}</span>\r\n    </ng-template>\r\n    <a *ngIf=\"realColumns[column].sort; else defaultCol\"\r\n       [ngClass]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"\r\n       (click)=\"setSorting(column, toggle)\">\r\n        <span>{{ realColumns[column].title | translate }}</span>\r\n        <i *ngIf=\"orderBy == column\"\r\n           [icon]=\"orderBy !== column ? 'sort' : (orderDescending ? 'sort-desc' : 'sort-asc')\"></i>\r\n    </a>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n    <ng-template #defaultFilterTemplate let-table>\r\n        <div class=\"table-filter\">\r\n            <ng-container *ngIf=\"table.showFilter\">\r\n                <label *ngIf=\"label\" [attr.for]=\"tableId\">\r\n                    {{ label | translate }}\r\n                </label>\r\n                <input type=\"text\"\r\n                       class=\"form-control\"\r\n                       [attr.id]=\"tableId\"\r\n                       [attr.data-testid]=\"testId + '-filter-input'\"\r\n                       [placeholder]=\"placeholder | translate\"\r\n                       [ngModel]=\"table.filter\"\r\n                       (ngModelChange)=\"table.setFilter($event)\"/>\r\n            </ng-container>\r\n            <ng-content select=\"[table-filter]\"></ng-content>\r\n        </div>\r\n    </ng-template>\r\n    <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n    <div class=\"sort-toggle\" dd #sortDd=\"dropdown\" *ngIf=\"orderBy\">\r\n        <div class=\"sort-toggle-content\">\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                          [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n        </div>\r\n        <ul>\r\n            <li *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                              [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    <div class=\"table-responsive\">\r\n        <ng-template #defaultWrapperTemplate>\r\n            <table class=\"table table-striped\">\r\n                <thead>\r\n                    <tr class=\"header\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n                            <ng-container *ngIf=\"realColumns[column].filter\">\r\n                                <input class=\"form-control\"\r\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                       [type]=\"realColumns[column].filterType || 'text'\"\r\n                                       [placeholder]=\"realColumns[column].title | translate\"\r\n                                       [ngModel]=\"query[column]\"\r\n                                       (ngModelChange)=\"updateQuery(column, $event)\"/>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <ng-container *paginationItem=\"let context\"\r\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                  [context]=\"context\"\r\n                                  [additionalContext]=\"this\"></ng-container>\r\n                </tbody>\r\n            </table>\r\n        </ng-template>\r\n\r\n        <div class=\"table-wrapper\">\r\n            <ng-content select=\"[table-top]\"></ng-content>\r\n            <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                          [context]=\"this\"></ng-container>\r\n            <ng-content select=\"[table-bottom]\"></ng-content>\r\n        </div>\r\n    </div>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 2px;--bg-color: #FFFFFF;--text-color: #151515;--highlight-color: var(--primary-color, #888888)}.dynamic-table .sort-toggle{display:none;position:relative;margin:10px}.dynamic-table .sort-toggle .svg-icon{pointer-events:none}.dynamic-table .sort-toggle .sort-toggle-content{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--highlight-color);border-radius:5px;cursor:pointer;padding-right:8px}.dynamic-table .sort-toggle a{padding:8px 12px}.dynamic-table .sort-toggle ul{margin:-2px 0 0;padding:0;list-style:none;position:absolute;z-index:1;width:100%;min-height:fit-content;border:var(--border-size) solid var(--highlight-color);border-radius:0 0 5px 5px;overflow:hidden;display:none}.dynamic-table .sort-toggle li{background:var(--bg-color);color:var(--text-color);cursor:pointer;padding-right:8px}.dynamic-table .sort-toggle .sort-toggle-content:hover,.dynamic-table .sort-toggle li:hover,.dynamic-table .sort-toggle li.active{background-color:var(--highlight-color);color:#fff}.dynamic-table .sort-toggle.open ul{display:block}.dynamic-table .table-responsive{overflow:hidden;overflow-x:auto}.dynamic-table .table-filter:not(:empty){display:flex;gap:10px;margin-bottom:20px}.dynamic-table .table-filter:not(:empty)>input{max-width:400px}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table td,.dynamic-table table.table th{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle}.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 a{color:var(--text-color);cursor:pointer}.dynamic-table table.table thead th span{display:inline-block;vertical-align:middle}.dynamic-table table.table thead th .svg-icon{float:right}.dynamic-table table.table thead th .svg-icon svg{width:20px;height:20px}.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-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)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -6252,6 +6625,8 @@ const directives = [
     ResourceIfDirective,
     StickyDirective,
     StickyClassDirective,
+    DropdownDirective,
+    DropdownToggleDirective,
     UnorderedListItemDirective,
     UnorderedListTemplateDirective
 ];
@@ -6282,6 +6657,7 @@ const providers = [
     LocalHttpService,
     OpenApiService,
     PromiseService,
+    SocketService,
     StateService,
     StaticLanguageService,
     StorageService,
@@ -6573,6 +6949,10 @@ class NgxUtilsModule {
                 provide: RESIZE_STRATEGY,
                 useValue: (!config ? null : config.resizeStrategy) ?? "object",
             },
+            {
+                provide: SOCKET_IO_PATH,
+                useValue: (!config ? null : config.socketPath) ?? "/socket",
+            },
             {
                 provide: APP_INITIALIZER,
                 useFactory: (!config ? null : config.initializeApp) || loadConfig,
@@ -6598,8 +6978,8 @@ class NgxUtilsModule {
     constructor() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxUtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent, UploadComponent], imports: [CommonModule,
-            FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent, UploadComponent, FormsModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownToggleDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent, UploadComponent], imports: [CommonModule,
+            FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownToggleDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropListComponent, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent, UploadComponent, FormsModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxUtilsModule, providers: pipes, imports: [CommonModule,
             FormsModule, FormsModule] }); }
 }
@@ -6629,5 +7009,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChunkPipe, Circle, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FileSystemEntry, FileUtils, FilterPipe, FindPipe, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HttpPromise, ICON_SERVICE, IConfiguration, IconDirective, IconService, Initializer, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, impatientPromise, provideWithOptions };
+export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChunkPipe, Circle, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FileSystemEntry, FileUtils, FilterPipe, FindPipe, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HttpPromise, ICON_SERVICE, IConfiguration, IconDirective, IconService, Initializer, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, impatientPromise, provideWithOptions };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map