@stemy/ngx-utils 17.2.1 → 17.3.1

package/fesm2022/stemy-ngx-utils.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, EventEmitter, isDevMode, ErrorHandler, NgZone, Pipe, HostListener, HostBinding, Output, Input, Directive, ViewChild, ContentChildren, Component, ContentChild, APP_INITIALIZER, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, EventEmitter, isDevMode, ErrorHandler, NgZone, Pipe, HostListener, HostBinding, Output, Input, Directive, ElementRef, ViewChild, ContentChildren, Component, ViewEncapsulation, ContentChild, APP_INITIALIZER, makeEnvironmentProviders, NgModule } from '@angular/core';
 import 'reflect-metadata';
 import * as i2 from '@angular/router';
 import { ActivatedRouteSnapshot, Scroll, NavigationEnd, DefaultUrlSerializer, UrlTree, UrlSegmentGroup, UrlSegment, UrlSerializer } from '@angular/router';
@@ -17,6 +17,7 @@ import JSON5 from 'json5';
 import * as i1$2 from '@angular/platform-browser';
 import { ɵDomEventsPlugin as _DomEventsPlugin, EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
 import elementResizeDetectorMaker from 'element-resize-detector';
+import { arrow, autoPlacement, autoUpdate, computePosition } from '@floating-ui/dom';
 import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
@@ -1946,6 +1947,27 @@ class MathUtils {
     }
 }
 
+function getCssVariables(elem) {
+    if ("computedStyleMap" in elem) {
+        const styles = Array.from(elem.computedStyleMap());
+        return styles.reduce((res, [prop, val]) => {
+            if (prop.startsWith("--")) {
+                res[prop] = val.toString();
+            }
+            return res;
+        }, {});
+    }
+    const res = {};
+    const styles = getComputedStyle(elem);
+    for (let i = 0; i < styles.length; i++) {
+        const propertyName = styles[i];
+        if (propertyName.startsWith("--")) {
+            res[propertyName] = styles.getPropertyValue(propertyName);
+        }
+    }
+    return res;
+}
+
 class TimerUtils {
     static createTimeout(func, time) {
         // @dynamic
@@ -3879,11 +3901,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
-function defaultFilter$1() {
+function defaultFilter$2() {
     return true;
 }
 class FilterPipe {
-    transform(values, filter = defaultFilter$1, params = {}) {
+    transform(values, filter = defaultFilter$2, params = {}) {
         const isObject = ObjectUtils.isObject(values);
         if (!isObject && !ObjectUtils.isArray(values))
             return [];
@@ -3913,11 +3935,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
-function defaultFilter() {
+function defaultFilter$1() {
     return true;
 }
 class FindPipe {
-    transform(values, filter = defaultFilter, params) {
+    transform(values, filter = defaultFilter$1, params) {
         if (!ObjectUtils.isArray(values))
             return [];
         params = params || {};
@@ -4057,6 +4079,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+function defaultFilter() {
+    return true;
+}
+class IncludesPipe {
+    transform(array, ...values) {
+        return ObjectUtils.isArray(array) && values.some(v => array.includes(v));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IncludesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: IncludesPipe, name: "includes" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IncludesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: false,
+                    name: "includes"
+                }]
+        }] });
+
 class IsTypePipe {
     transform(value, type) {
         return (typeof value) === type;
@@ -4477,13 +4517,11 @@ class AsyncMethodBase {
         this.cdr.detectChanges();
     }
     click(ev) {
-        if (ev) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
+        ev?.preventDefault();
         if (this.disabled)
-            return;
+            return true;
         this.callMethod();
+        return true;
     }
     callMethod() {
         if (this.loading)
@@ -4520,6 +4558,7 @@ class AsyncMethodBase {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AsyncMethodBase, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: "[__asmb__]"
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -4606,6 +4645,369 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 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.attachTo = null;
+        this.mobileViewUnder = 0;
+        this.keyboardHandler = true;
+        this.onShown = new EventEmitter();
+        this.onHidden = new EventEmitter();
+        this.onKeyboard = new EventEmitter();
+        this.onClick = (event) => {
+            // We don't care about clicks with right/center mouse buttons
+            if (event.button)
+                return;
+            const target = (event.composedPath()?.shift() || event.target);
+            // If blocked closing inside we only consider inside if the target is not directly the contentElement
+            // We only have a contentElement in case when we are using *dropdownContent directive
+            if (!this.closeInside && (!this.contentElement || target !== this.contentElement)) {
+                // Try to determine if we are inside by collecting the possible parent elements to check
+                const parents = !this.contentElement ? [] : Array.from(this.contentElement.childNodes);
+                if (this.nativeElement) {
+                    parents.push(this.nativeElement);
+                }
+                // If one of the parents contains the target then we clicked inside
+                if (parents.some(child => child.contains(target)))
+                    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 true;
+            $event.preventDefault();
+        }
+        if (this.disabled)
+            return true;
+        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("click", this.onClick);
+            document.addEventListener("keydown", this.onKeyDown);
+        }, 10);
+        return true;
+    }
+    hide() {
+        if (!this.opened)
+            return true;
+        this.opened = false;
+        this.hideEvent();
+        document.removeEventListener("click", this.onClick);
+        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);
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: { closeInside: "closeInside", attachTo: "attachTo", placement: "placement", autoPlacement: "autoPlacement", mobileViewUnder: "mobileViewUnder", keyboardHandler: "keyboardHandler", isDisabled: "isDisabled" }, outputs: { onShown: "onShown", onHidden: "onHidden", onKeyboard: "onKeyboard" }, host: { listeners: { "keydown.enter": "show($event)", "keydown.space": "show($event)" }, properties: { "class.open": "this.isOpened", "class.disabled": "this.getDisabled" } }, exportAs: ["dropdown"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: "[dd],[drop-down]",
+                    exportAs: "dropdown"
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { closeInside: [{
+                type: Input
+            }], attachTo: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], autoPlacement: [{
+                type: Input
+            }], mobileViewUnder: [{
+                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"]]
+            }] } });
+
+const rectProps = ["x", "y", "width", "height"];
+class DropdownContentDirective {
+    constructor(vcr, rootElem, dropdown, templateRef) {
+        this.vcr = vcr;
+        this.rootElem = rootElem;
+        this.dropdown = dropdown;
+        this.templateRef = templateRef;
+        if (!this.dropdown) {
+            throw new Error("DropdownDirective is required! Please use it inside a dd, drop-down directive attribute");
+        }
+        if (!this.templateRef) {
+            throw new Error("TemplateRef is required! Please use with *dropdownContent");
+        }
+        this.lastPlacement = null;
+    }
+    ngOnInit() {
+        this.subscription = ObservableUtils.multiSubscription(this.dropdown.onShown.subscribe(() => this.createView()), this.dropdown.onHidden.subscribe(() => this.destroyView()));
+    }
+    ngOnDestroy() {
+        // this.observer?.unobserve(this.element.nativeElement);
+        this.subscription?.unsubscribe();
+        this.destroyView();
+    }
+    createView(init = false) {
+        const mobileWidth = this.dropdown.mobileViewUnder || 0;
+        const ref = this.dropdown.nativeElement;
+        const [content, arrowEl] = this.createWrapper();
+        this.dropdown.contentElement = content;
+        // Set up floating UI positioning settings
+        const placement = this.dropdown.placement || "bottom";
+        const strategy = this.attachOutside ? "fixed" : "absolute";
+        const middleware = [
+            arrow({ element: arrowEl })
+        ];
+        if (this.dropdown.autoPlacement) {
+            middleware.push(autoPlacement(this.dropdown.autoPlacement));
+        }
+        // Set up floating UI auto update
+        this.cleanUp = autoUpdate(ref, content, () => {
+            computePosition(ref, content, {
+                strategy,
+                placement,
+                middleware
+            }).then(({ x, y, placement, middlewareData }) => {
+                if (middlewareData.arrow) {
+                    const { x, y } = middlewareData.arrow;
+                    Object.assign(arrowEl.style, {
+                        left: x != null ? `${x}px` : ``,
+                        top: y != null ? `${y}px` : ``,
+                    });
+                }
+                const isMobileView = window.innerWidth <= mobileWidth;
+                Object.assign(content.style, {
+                    opacity: init ? "0" : "1",
+                    position: isMobileView ? "fixed" : strategy,
+                    left: isMobileView ? `0px` : `${x}px`,
+                    right: isMobileView ? `0px` : undefined,
+                    top: isMobileView ? `0px` : `${y}px`,
+                    bottom: isMobileView ? `0px` : undefined,
+                    zIndex: `var(--dd-z-index, 100)`
+                });
+                const refRect = ref.getBoundingClientRect();
+                const contentRect = content.getBoundingClientRect();
+                const lastPlacement = this.lastPlacement;
+                const newPlacement = `dropdown-placement-${placement}`;
+                if (lastPlacement) {
+                    ref.classList.replace(lastPlacement, newPlacement);
+                    content.classList.replace(lastPlacement, newPlacement);
+                }
+                else {
+                    ref.classList.add(newPlacement);
+                    content.classList.add(newPlacement);
+                }
+                if (isMobileView) {
+                    content.classList.add(`dropdown-content-mobile`);
+                }
+                else {
+                    content.classList.remove(`dropdown-content-mobile`);
+                }
+                rectProps.forEach(prop => {
+                    content.style.setProperty(`--toggle-${prop}`, `${refRect[prop]}px`);
+                    ref.style.setProperty(`--content-${prop}`, `${contentRect[prop]}px`);
+                });
+                this.lastPlacement = newPlacement;
+            });
+        });
+    }
+    destroyView() {
+        this.vcr.clear();
+        this.dropdown.contentElement?.remove();
+        this.cleanUp?.();
+    }
+    whereToAttach() {
+        const target = this.dropdown.attachTo;
+        if (target === "root" && this.rootElem) {
+            return this.rootElem;
+        }
+        if (target instanceof ElementRef) {
+            return target.nativeElement;
+        }
+        if (target instanceof HTMLElement) {
+            return target;
+        }
+        const anchor = this.vcr.element.nativeElement;
+        return anchor?.parentElement || this.rootElem;
+    }
+    createWrapper() {
+        const wrapper = document.createElement("div");
+        const arrow = document.createElement("div");
+        arrow.classList.add(`dropdown-content-arrow`);
+        const ref = this.vcr.createEmbeddedView(this.templateRef);
+        ref.rootNodes.forEach(node => wrapper.appendChild(node));
+        this.attachTo = this.whereToAttach();
+        this.attachTo.appendChild(wrapper);
+        this.attachOutside = !this.dropdown.nativeElement?.contains(this.attachTo);
+        if (this.attachOutside) {
+            const referenceStyles = getCssVariables(this.dropdown.nativeElement);
+            const wrapperStyles = getCssVariables(wrapper);
+            Object.keys(referenceStyles).forEach(key => {
+                if (!wrapperStyles[key]) {
+                    wrapper.style.setProperty(key, referenceStyles[key]);
+                }
+            });
+        }
+        const autoPlacement = this.dropdown.autoPlacement;
+        if (this.lastPlacement) {
+            wrapper.classList.add(this.lastPlacement);
+        }
+        if (autoPlacement) {
+            const vertical = autoPlacement.allowedPlacements.some(p => p.includes("top") || p.includes("bottom"));
+            const horizontal = autoPlacement.allowedPlacements.some(p => p.includes("left") || p.includes("right"));
+            if (vertical && horizontal) {
+                wrapper.classList.add(`dropdown-content-axis-both`);
+            }
+            else {
+                const axis = vertical ? "vertical" : "horizontal";
+                wrapper.classList.add(`dropdown-content-axis-${axis}`);
+            }
+        }
+        wrapper.classList.add("dropdown-content-wrap");
+        wrapper.appendChild(arrow);
+        return [wrapper, arrow];
+    }
+    initialize() {
+        this.createView(true);
+        setTimeout(() => this.destroyView());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownContentDirective, deps: [{ token: i0.ViewContainerRef }, { token: ROOT_ELEMENT, optional: true }, { token: DropdownDirective, optional: true }, { token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: "[dropdownContent]",
+                    exportAs: "dropdown-content",
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: HTMLElement, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ROOT_ELEMENT]
+                }] }, { type: DropdownDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });
+
+class DropdownToggleDirective extends AsyncMethodBase {
+    constructor(element, dropdown, toaster, cdr) {
+        super(toaster, cdr);
+        this.element = element;
+        this.dropdown = dropdown;
+        this.switch = true;
+    }
+    getMethod() {
+        return this.beforeOpen;
+    }
+    callMethod() {
+        if (this.dropdown.isOpened) {
+            if (!this.switch)
+                return true;
+            this.dropdown.hide();
+        }
+        else if (!super.callMethod()) {
+            this.dropdown.show();
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: { beforeOpen: "beforeOpen", switch: "switch" }, exportAs: ["dropdown-toggle"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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
+            }], switch: [{
+                type: Input
+            }] } });
+
 class DynamicTableTemplateDirective {
     constructor(ref) {
         this.ref = ref;
@@ -5182,6 +5584,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ["defaultItemTemplate"]
             }] } });
 
+class DropdownBoxComponent {
+    constructor() {
+        this.closeInside = true;
+        this.attachTo = "root";
+        this.placement = "bottom";
+        this.crossAxis = false;
+        this.autoAlignment = true;
+        this.allowedPlacements = ["top", "bottom"];
+        this.componentClass = "drop";
+        this.makeAutoPlacementOpts();
+    }
+    makeAutoPlacementOpts() {
+        this.autoPlacement = {
+            crossAxis: this.crossAxis,
+            alignment: this.alignment,
+            autoAlignment: this.autoAlignment,
+            allowedPlacements: this.allowedPlacements,
+        };
+    }
+    ngAfterViewInit() {
+        this.content.initialize();
+    }
+    ngOnChanges() {
+        this.makeAutoPlacementOpts();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DropdownBoxComponent, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachTo: "attachTo", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachTo]=\"attachTo\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "placement", "autoPlacement", "mobileViewUnder", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownBoxComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dropdown-box", template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachTo]=\"attachTo\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { closeInside: [{
+                type: Input
+            }], attachTo: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], crossAxis: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], autoAlignment: [{
+                type: Input
+            }], allowedPlacements: [{
+                type: Input
+            }], componentClass: [{
+                type: Input
+            }], content: [{
+                type: ViewChild,
+                args: [DropdownContentDirective]
+            }] } });
+
 class PaginationMenuComponent {
     get hasPrev() {
         return this.pagination.page > 1;
@@ -5189,24 +5643,15 @@ class PaginationMenuComponent {
     get hasNext() {
         return this.pagination.page < this.pagination.maxPage;
     }
-    constructor(state, pagination, icons) {
+    constructor(state, pagination) {
         this.state = state;
         this.pagination = pagination;
-        this.icons = icons;
         this.maxSize = 5;
         this.directionLinks = true;
         this.boundaryLinks = true;
-        this.firstLabel = `<<`;
-        this.prevLabel = `<`;
-        this.nextLabel = `>`;
-        this.lastLabel = `>>`;
     }
     ngOnInit() {
         this.onRefresh = this.pagination.onRefresh.subscribe(() => this.setPages());
-        this.setIcon("firstLabel", "first-page");
-        this.setIcon("prevLabel", "prev-page");
-        this.setIcon("nextLabel", "next-page");
-        this.setIcon("lastLabel", "last-page");
     }
     ngOnDestroy() {
         if (!this.onRefresh)
@@ -5231,13 +5676,6 @@ class PaginationMenuComponent {
         const path = StateService.toPath(this.state.route, params);
         this.state.navigateByUrl(path);
     }
-    setIcon(labelName, icon) {
-        this.icons.getIcon(icon, icon, false).then(i => {
-            if (i == icon)
-                return;
-            this[labelName] = i;
-        });
-    }
     setPages() {
         if (!this.pagination)
             return;
@@ -5254,16 +5692,13 @@ class PaginationMenuComponent {
         }
         this.pages = pages;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationMenuComponent, deps: [{ token: StateService }, { token: PaginationDirective }, { token: ICON_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginationMenuComponent, selector: "pagination-menu", inputs: { maxSize: "maxSize", urlParam: "urlParam", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pagination\">\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link\" (click)=\"paginate(1)\" [innerHTML]=\"firstLabel | safe\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link\" (click)=\"paginate(pagination.page - 1)\" [innerHTML]=\"prevLabel | safe\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link\" (click)=\"paginate(pagination.page + 1)\" [innerHTML]=\"nextLabel | safe\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link\" (click)=\"paginate(pagination.maxPage)\" [innerHTML]=\"lastLabel | safe\"></a>\n        </li>\n    </ul>\n</div>\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: "pipe", type: SafeHtmlPipe, name: "safe" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationMenuComponent, deps: [{ token: StateService }, { token: PaginationDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginationMenuComponent, selector: "pagination-menu", inputs: { maxSize: "maxSize", urlParam: "urlParam", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pagination\">\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link previous\" (click)=\"paginate(1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link previous\" (click)=\"paginate(pagination.page - 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link\" (click)=\"paginate(pagination.page + 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link\" (click)=\"paginate(pagination.maxPage)\"></a>\n        </li>\n    </ul>\n</div>\n", styles: [".pagination-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--pg-highlight-color: var(--highlight-color, var(--primary-color, #888888));--pg-highlight-text-color: var(--highlight-text-color, #ffffff);--pg-text-color: var(--text-color, #151515);--pg-arrow-size: var(--arrow-size, 6px);--pg-arrow-space: calc(var(--pg-arrow-size) * .5 + 1px);--pg-arrow-color: currentColor;display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:10px}.pagination-menu *{box-sizing:border-box}.pagination-menu ul{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:5px;overflow:hidden;min-width:fit-content;display:flex}.pagination-menu li{color:var(--pg-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;border-right:var(--pg-border-size) solid var(--pg-border-color);display:flex;align-items:center}.pagination-menu li:last-child{border-right:none}.pagination-menu li:hover,.pagination-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pagination-menu a{display:block;min-width:36px;height:auto;line-height:20px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pagination-menu a.boundary-link,.pagination-menu a.direction-link{position:relative}.pagination-menu a.boundary-link:before,.pagination-menu a.boundary-link:after,.pagination-menu a.direction-link:before,.pagination-menu a.direction-link:after{content:\"\";position:absolute;left:50%;top:calc(50% - var(--pg-arrow-size));border-top:var(--pg-arrow-size) solid transparent;border-bottom:var(--pg-arrow-size) solid transparent;border-left:var(--pg-arrow-size) solid var(--pg-arrow-color)}.pagination-menu a.direction-link:before{display:none}.pagination-menu a.direction-link:after{translate:-50% 0}.pagination-menu a.boundary-link:before{translate:-100% 0}.pagination-menu a.boundary-link.previous:before,.pagination-menu a.boundary-link.previous:after,.pagination-menu a.direction-link.previous:before,.pagination-menu a.direction-link.previous:after{rotate:180deg}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pagination-menu", template: "<div class=\"pagination-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pagination\">\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link\" (click)=\"paginate(1)\" [innerHTML]=\"firstLabel | safe\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link\" (click)=\"paginate(pagination.page - 1)\" [innerHTML]=\"prevLabel | safe\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link\" (click)=\"paginate(pagination.page + 1)\" [innerHTML]=\"nextLabel | safe\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link\" (click)=\"paginate(pagination.maxPage)\" [innerHTML]=\"lastLabel | safe\"></a>\n        </li>\n    </ul>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StateService }, { type: PaginationDirective }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ICON_SERVICE]
-                }] }], propDecorators: { maxSize: [{
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "pagination-menu", template: "<div class=\"pagination-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pagination\">\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link previous\" (click)=\"paginate(1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link previous\" (click)=\"paginate(pagination.page - 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link\" (click)=\"paginate(pagination.page + 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link\" (click)=\"paginate(pagination.maxPage)\"></a>\n        </li>\n    </ul>\n</div>\n", styles: [".pagination-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--pg-highlight-color: var(--highlight-color, var(--primary-color, #888888));--pg-highlight-text-color: var(--highlight-text-color, #ffffff);--pg-text-color: var(--text-color, #151515);--pg-arrow-size: var(--arrow-size, 6px);--pg-arrow-space: calc(var(--pg-arrow-size) * .5 + 1px);--pg-arrow-color: currentColor;display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:10px}.pagination-menu *{box-sizing:border-box}.pagination-menu ul{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:5px;overflow:hidden;min-width:fit-content;display:flex}.pagination-menu li{color:var(--pg-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;border-right:var(--pg-border-size) solid var(--pg-border-color);display:flex;align-items:center}.pagination-menu li:last-child{border-right:none}.pagination-menu li:hover,.pagination-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pagination-menu a{display:block;min-width:36px;height:auto;line-height:20px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pagination-menu a.boundary-link,.pagination-menu a.direction-link{position:relative}.pagination-menu a.boundary-link:before,.pagination-menu a.boundary-link:after,.pagination-menu a.direction-link:before,.pagination-menu a.direction-link:after{content:\"\";position:absolute;left:50%;top:calc(50% - var(--pg-arrow-size));border-top:var(--pg-arrow-size) solid transparent;border-bottom:var(--pg-arrow-size) solid transparent;border-left:var(--pg-arrow-size) solid var(--pg-arrow-color)}.pagination-menu a.direction-link:before{display:none}.pagination-menu a.direction-link:after{translate:-50% 0}.pagination-menu a.boundary-link:before{translate:-100% 0}.pagination-menu a.boundary-link.previous:before,.pagination-menu a.boundary-link.previous:after,.pagination-menu a.direction-link.previous:before,.pagination-menu a.direction-link.previous:after{rotate:180deg}\n"] }]
+        }], ctorParameters: () => [{ type: StateService }, { type: PaginationDirective }], propDecorators: { maxSize: [{
                 type: Input
             }], urlParam: [{
                 type: Input
@@ -5282,7 +5717,8 @@ class DynamicTableComponent {
         b = b.item ? b.item[orderBy] : null;
         return ObjectUtils.compare(a, b);
     }
-    constructor() {
+    constructor(element) {
+        this.element = element;
         this.loadData = (page, itemsPerPage) => {
             const orderBy = this.realColumns[this.orderBy]?.sort;
             return this.dataLoader(page, itemsPerPage, orderBy, this.orderDescending, this.filter, this.query);
@@ -5298,6 +5734,12 @@ class DynamicTableComponent {
         this.titlePrefix = "label";
         this.realColumns = {};
     }
+    setProperty(name, value) {
+        const elem = this.element.nativeElement;
+        if (!elem)
+            return;
+        elem.style.setProperty(`--${name}`, value);
+    }
     ngAfterContentInit() {
         this.templates = this.templateDirectives.reduce((result, directive) => {
             if (ObjectUtils.isArray(directive.column)) {
@@ -5314,7 +5756,6 @@ class DynamicTableComponent {
     }
     ngAfterViewInit() {
         this.rowTemplate = this.rowTemplate || this.defaultRowTemplate;
-        this.filterTemplate = this.filterTemplate || this.defaultFilterTemplate;
     }
     ngOnChanges(changes) {
         if (changes.columns) {
@@ -5332,13 +5773,24 @@ class DynamicTableComponent {
                 return result;
             }, {});
             this.cols = Object.keys(this.realColumns);
-            this.orderBy = this.orderBy in this.realColumns ? this.orderBy : this.cols[0];
+            const sortable = this.cols.filter(c => this.realColumns[c].sort);
+            const query = this.query || {};
+            this.orderBy = sortable.includes(this.orderBy) ? this.orderBy : sortable[0] || null;
+            this.query = this.cols.reduce((res, col) => {
+                const value = query[col];
+                if (!value)
+                    return res;
+                res[col] = value;
+                return res;
+            }, {});
+            this.setProperty("cell-width", MathUtils.round(100 / this.cols.length, 4) + "%");
         }
         this.hasQuery = this.cols.some(col => this.realColumns[col].filter);
-        if (changes.orderBy && this.realColumns) {
-            this.orderBy = this.orderBy in this.realColumns ? this.orderBy : this.cols[0];
+        if (changes.orderBy && this.realColumns && this.cols) {
+            const sortable = this.cols.filter(c => this.realColumns[c].sort);
+            this.orderBy = this.orderBy in sortable ? this.orderBy : sortable[0] || null;
         }
-        if (!changes.data && !changes.parallelData && !changes.itemsPerPage && !changes.orderBy && !changes.orderDescending)
+        if (!changes.data && !changes.parallelData && !changes.dataLoader && !changes.itemsPerPage && !changes.orderBy && !changes.orderDescending)
             return;
         this.refresh();
     }
@@ -5351,20 +5803,55 @@ class DynamicTableComponent {
         this.filter = filter;
         this.refresh(this.filterTime ?? 300);
     }
-    setOrder(column) {
+    setSorting(column, toggle) {
+        if (toggle) {
+            return;
+        }
         this.orderDescending = column == this.orderBy && !this.orderDescending;
         this.orderBy = column;
         this.refresh();
     }
-    updateQuery(col, value) {
-        if (!value) {
-            delete this.query[col];
-        }
-        else {
-            this.query[col] = value;
+    setQueryValue(c, value) {
+        const col = this.realColumns[c];
+        if (!col?.filter)
+            return;
+        switch (col.filterType) {
+            case "enum":
+                const set = new Set((this.query[c] || []));
+                const val = `${value}`;
+                if (set.has(val)) {
+                    set.delete(val);
+                    if (set.size === 0) {
+                        delete this.query[c];
+                        break;
+                    }
+                }
+                else {
+                    set.add(val);
+                }
+                this.query[c] = Array.from(set);
+                break;
+            case "checkbox":
+                if (this.query[c]) {
+                    delete this.query[c];
+                    break;
+                }
+                this.query[c] = true;
+                break;
+            default:
+                if (!value) {
+                    delete this.query[c];
+                    break;
+                }
+                this.query[c] = value;
+                break;
         }
         this.refresh(this.filterTime ?? 300);
     }
+    setItemsPerPage(count) {
+        this.itemsPerPage = count;
+        this.refresh();
+    }
     loadLocalData(page, rowsPerPage, orderBy, orderDescending, filter) {
         if (!this.data) {
             return Promise.resolve({
@@ -5395,20 +5882,18 @@ class DynamicTableComponent {
             items: items
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DynamicTableComponent, selector: "dynamic-table", inputs: { label: "label", placeholder: "placeholder", dataLoader: "dataLoader", data: "data", 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" }, 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\">\n    <ng-template #defaultFilterTemplate let-table>\n        <div class=\"table-search\" *ngIf=\"table.showFilter\">\n            <label *ngIf=\"label\" [attr.for]=\"tableId\">{{ label | translate }}</label>\n            <input type=\"text\"\n                   class=\"form-control\"\n                   [attr.id]=\"tableId\"\n                   [attr.data-testid]=\"testId + '-filter-input'\"\n                   [placeholder]=\"placeholder | translate\"\n                   [ngModel]=\"table.filter\"\n                   (ngModelChange)=\"table.setFilter($event)\"/>\n        </div>\n    </ng-template>\n    <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    <div class=\"table-responsive\">\n        <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\" *ngIf=\"!template || !template.pure; else pureTemplate\">\n                <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [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>\n                <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n            </tr>\n        </ng-template>\n\n        <ng-template #defaultWrapperTemplate>\n            <table class=\"table table-striped\">\n                <thead>\n                    <tr>\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'column-' + column\">\n                            <ng-template #defaultCol>\n                                <span>{{ realColumns[column].title | translate }}</span>\n                            </ng-template>\n                            <a *ngIf=\"realColumns[column].sort; else defaultCol\" (click)=\"setOrder(column)\">\n                                <span>{{ realColumns[column].title | translate }}</span>\n                                <i *ngIf=\"orderBy == column\"\n                                   [icon]=\"orderDescending ? 'sort-desc' : 'sort-asc'\"\n                                   [ngClass]=\"orderBy == column ? (orderDescending ? 'sort-desc': 'sort-asc') : ''\"></i>\n                            </a>\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\">\n                                <input type=\"text\"\n                                       class=\"form-control\"\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\n                                       [placeholder]=\"realColumns[column].title | translate\"\n                                       [ngModel]=\"query[column]\"\n                                       (ngModelChange)=\"updateQuery(column, $event)\"/>\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        <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                      [context]=\"this\"></ng-container>\n    </div>\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n</div>\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: 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DynamicTableComponent, 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" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr draggable=\"true\"\n        #elem\n        [ngClass]=\"{active: selected === context.item}\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n       [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n       (click)=\"setSorting(column, toggle)\">\n        <span>{{ realColumns[column].title | translate }}</span>\n    </a>\n</ng-template>\n\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\"\n     [updateTime]=\"updateTime\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n            <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n                {{ filterLabel | translate }}\n            </label>\n            <input type=\"text\"\n                   class=\"search-input\"\n                   [attr.id]=\"tableId\"\n                   [attr.data-testid]=\"testId + '-filter-input'\"\n                   [placeholder]=\"placeholder | translate\"\n                   [ngModel]=\"filter\"\n                   (ngModelChange)=\"setFilter($event)\"/>\n        </div>\n        <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n            <ng-container toggle-content\n                          [ngTemplateOutlet]=\"headerTemplate\"\n                          [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n            <ul>\n                <ng-container *ngFor=\"let column of cols\">\n                    <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n                        <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                      [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                    </li>\n                </ng-container>\n            </ul>\n        </dropdown-box>\n        <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n            <label>\n                {{ 'label.items.before' | translate }}\n            </label>\n            <dropdown-box>\n                <ng-container toggle-content>\n                    {{ itemsPerPage }}\n                </ng-container>\n                <ul>\n                    <ng-container *ngFor=\"let count of showItems\">\n                        <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n                            {{ count }}\n                        </li>\n                    </ng-container>\n                </ul>\n            </dropdown-box>\n            <label>\n                {{ 'label.items.after' | translate }}\n            </label>\n        </div>\n        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                     [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    <div class=\"table-responsive\">\n        <ng-template #defaultWrapperTemplate>\n            <table class=\"table table-striped\">\n                <thead>\n                <tr>\n                    <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n                        <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                      [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                    </th>\n                </tr>\n                <tr *ngIf=\"hasQuery\">\n                    <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n                        <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n                            <ng-container *ngSwitchCase=\"'enum'\">\n                                <ng-template #optionItem let-option=\"option\">\n                                    {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n                                </ng-template>\n                                <dropdown-box componentClass=\"filter-box\"\n                                              [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n                                    <ng-container toggle-content>\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n                                            {{ realColumns[column].title | translate }}\n                                        </span>\n                                        <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n                                              *ngFor=\"let option of query[column] | values; let ix = index\">\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                        </span>\n                                    </ng-container>\n                                    <ul>\n                                        <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n                                            (click)=\"setQueryValue(column, option)\"\n                                            *ngFor=\"let option of realColumns[column].enum\">\n                                            <a [ngClass]=\"'toggle-link-' + column\">\n                                                <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n                                                <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                              [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                            </a>\n                                        </li>\n                                    </ul>\n                                </dropdown-box>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'checkbox'\">\n                                <input type=\"checkbox\"\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\n                                       [placeholder]=\"realColumns[column].title | translate\"\n                                       [ngModel]=\"query[column]\"\n                                       (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <input class=\"search-input\"\n                                       type=\"text\"\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\n                                       [placeholder]=\"realColumns[column].title | translate\"\n                                       [ngModel]=\"query[column]\"\n                                       (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                            </ng-container>\n                        </ng-container>\n                    </th>\n                </tr>\n                </thead>\n                <tbody>\n                <ng-container *paginationItem=\"let context\"\n                              [ngxTemplateOutlet]=\"rowTemplate\"\n                              [context]=\"context\"\n                              [additionalContext]=\"this\"></ng-container>\n                </tbody>\n            </table>\n        </ng-template>\n\n        <div class=\"table-wrapper\">\n            <ng-content select=\"[table-top]\"></ng-content>\n            <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                          [context]=\"this\"></ng-container>\n            <ng-content select=\"[table-bottom]\"></ng-content>\n        </div>\n    </div>\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                     [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "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: "17.3.12", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: "dynamic-table", template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\n    <ng-template #defaultFilterTemplate let-table>\n        <div class=\"table-search\" *ngIf=\"table.showFilter\">\n            <label *ngIf=\"label\" [attr.for]=\"tableId\">{{ label | translate }}</label>\n            <input type=\"text\"\n                   class=\"form-control\"\n                   [attr.id]=\"tableId\"\n                   [attr.data-testid]=\"testId + '-filter-input'\"\n                   [placeholder]=\"placeholder | translate\"\n                   [ngModel]=\"table.filter\"\n                   (ngModelChange)=\"table.setFilter($event)\"/>\n        </div>\n    </ng-template>\n    <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    <div class=\"table-responsive\">\n        <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\" *ngIf=\"!template || !template.pure; else pureTemplate\">\n                <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [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>\n                <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n            </tr>\n        </ng-template>\n\n        <ng-template #defaultWrapperTemplate>\n            <table class=\"table table-striped\">\n                <thead>\n                    <tr>\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'column-' + column\">\n                            <ng-template #defaultCol>\n                                <span>{{ realColumns[column].title | translate }}</span>\n                            </ng-template>\n                            <a *ngIf=\"realColumns[column].sort; else defaultCol\" (click)=\"setOrder(column)\">\n                                <span>{{ realColumns[column].title | translate }}</span>\n                                <i *ngIf=\"orderBy == column\"\n                                   [icon]=\"orderDescending ? 'sort-desc' : 'sort-asc'\"\n                                   [ngClass]=\"orderBy == column ? (orderDescending ? 'sort-desc': 'sort-asc') : ''\"></i>\n                            </a>\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\">\n                                <input type=\"text\"\n                                       class=\"form-control\"\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\n                                       [placeholder]=\"realColumns[column].title | translate\"\n                                       [ngModel]=\"query[column]\"\n                                       (ngModelChange)=\"updateQuery(column, $event)\"/>\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        <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                      [context]=\"this\"></ng-container>\n    </div>\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], dataLoader: [{
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr draggable=\"true\"\n        #elem\n        [ngClass]=\"{active: selected === context.item}\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n       [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n       (click)=\"setSorting(column, toggle)\">\n        <span>{{ realColumns[column].title | translate }}</span>\n    </a>\n</ng-template>\n\n<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\"\n     [updateTime]=\"updateTime\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n            <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n                {{ filterLabel | translate }}\n            </label>\n            <input type=\"text\"\n                   class=\"search-input\"\n                   [attr.id]=\"tableId\"\n                   [attr.data-testid]=\"testId + '-filter-input'\"\n                   [placeholder]=\"placeholder | translate\"\n                   [ngModel]=\"filter\"\n                   (ngModelChange)=\"setFilter($event)\"/>\n        </div>\n        <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n            <ng-container toggle-content\n                          [ngTemplateOutlet]=\"headerTemplate\"\n                          [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n            <ul>\n                <ng-container *ngFor=\"let column of cols\">\n                    <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n                        <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                      [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                    </li>\n                </ng-container>\n            </ul>\n        </dropdown-box>\n        <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n            <label>\n                {{ 'label.items.before' | translate }}\n            </label>\n            <dropdown-box>\n                <ng-container toggle-content>\n                    {{ itemsPerPage }}\n                </ng-container>\n                <ul>\n                    <ng-container *ngFor=\"let count of showItems\">\n                        <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n                            {{ count }}\n                        </li>\n                    </ng-container>\n                </ul>\n            </dropdown-box>\n            <label>\n                {{ 'label.items.after' | translate }}\n            </label>\n        </div>\n        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                     [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    <div class=\"table-responsive\">\n        <ng-template #defaultWrapperTemplate>\n            <table class=\"table table-striped\">\n                <thead>\n                <tr>\n                    <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n                        <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                      [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                    </th>\n                </tr>\n                <tr *ngIf=\"hasQuery\">\n                    <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n                        <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n                            <ng-container *ngSwitchCase=\"'enum'\">\n                                <ng-template #optionItem let-option=\"option\">\n                                    {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n                                </ng-template>\n                                <dropdown-box componentClass=\"filter-box\"\n                                              [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n                                    <ng-container toggle-content>\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n                                            {{ realColumns[column].title | translate }}\n                                        </span>\n                                        <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n                                              *ngFor=\"let option of query[column] | values; let ix = index\">\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                        </span>\n                                    </ng-container>\n                                    <ul>\n                                        <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n                                            (click)=\"setQueryValue(column, option)\"\n                                            *ngFor=\"let option of realColumns[column].enum\">\n                                            <a [ngClass]=\"'toggle-link-' + column\">\n                                                <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n                                                <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                              [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                            </a>\n                                        </li>\n                                    </ul>\n                                </dropdown-box>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'checkbox'\">\n                                <input type=\"checkbox\"\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\n                                       [placeholder]=\"realColumns[column].title | translate\"\n                                       [ngModel]=\"query[column]\"\n                                       (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <input class=\"search-input\"\n                                       type=\"text\"\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\n                                       [placeholder]=\"realColumns[column].title | translate\"\n                                       [ngModel]=\"query[column]\"\n                                       (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                            </ng-container>\n                        </ng-container>\n                    </th>\n                </tr>\n                </thead>\n                <tbody>\n                <ng-container *paginationItem=\"let context\"\n                              [ngxTemplateOutlet]=\"rowTemplate\"\n                              [context]=\"context\"\n                              [additionalContext]=\"this\"></ng-container>\n                </tbody>\n            </table>\n        </ng-template>\n\n        <div class=\"table-wrapper\">\n            <ng-content select=\"[table-top]\"></ng-content>\n            <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                          [context]=\"this\"></ng-container>\n            <ng-content select=\"[table-bottom]\"></ng-content>\n        </div>\n    </div>\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                     [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
                 type: Input
             }], data: [{
                 type: Input
+            }], selected: [{
+                type: Input
             }], page: [{
                 type: Input
             }], urlParam: [{
@@ -5419,6 +5904,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], showFilter: [{
                 type: Input
+            }], filterLabel: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], showItems: [{
+                type: Input
             }], itemsPerPage: [{
                 type: Input
             }], updateTime: [{
@@ -5445,9 +5936,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], wrapperTemplate: [{
                 type: ContentChild,
                 args: ["wrapperTemplate", { static: true }]
-            }], filterTemplate: [{
-                type: ContentChild,
-                args: ["filterTemplate", { static: true }]
             }], columnsTemplate: [{
                 type: ViewChild,
                 args: ["columnsTemplate", { static: true }]
@@ -5457,9 +5945,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], defaultWrapperTemplate: [{
                 type: ViewChild,
                 args: ["defaultWrapperTemplate", { static: true }]
-            }], defaultFilterTemplate: [{
-                type: ViewChild,
-                args: ["defaultFilterTemplate", { static: true }]
             }], pagination: [{
                 type: ViewChild,
                 args: ["pagination"]
@@ -5481,6 +5966,7 @@ const pipes = [
     GetValuePipe,
     GlobalTemplatePipe,
     GroupByPipe,
+    IncludesPipe,
     IsTypePipe,
     JoinPipe,
     KeysPipe,
@@ -5504,6 +5990,9 @@ const directives = [
     AsyncMethodBase,
     AsyncMethodDirective,
     BackgroundDirective,
+    DropdownDirective,
+    DropdownContentDirective,
+    DropdownToggleDirective,
     DynamicTableTemplateDirective,
     GlobalTemplateDirective,
     IconDirective,
@@ -5518,6 +6007,7 @@ const directives = [
 ];
 // --- Components ---
 const components = [
+    DropdownBoxComponent,
     DynamicTableComponent,
     PaginationMenuComponent,
     UnorderedListComponent
@@ -5847,8 +6337,8 @@ class NgxUtilsModule {
     constructor() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxUtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", 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, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent], 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, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent, FormsModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropdownBoxComponent, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent], imports: [CommonModule,
+            FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, BackgroundDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, DropdownBoxComponent, DynamicTableComponent, PaginationMenuComponent, UnorderedListComponent, FormsModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxUtilsModule, providers: pipes, imports: [CommonModule,
             FormsModule, FormsModule] }); }
 }
@@ -5878,5 +6368,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BackgroundDirective, BaseHttpClient, BaseHttpService, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChunkPipe, Circle, ConfigService, ConsoleToasterService, DateUtils, 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, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, impatientPromise, provideWithOptions };
+export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BackgroundDirective, BaseHttpClient, BaseHttpService, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChunkPipe, Circle, ConfigService, ConsoleToasterService, DateUtils, DropdownBoxComponent, DropdownContentDirective, 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, IncludesPipe, 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, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, getCssVariables, impatientPromise, provideWithOptions };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map