@stemy/ngx-utils 19.9.21 → 19.9.23

package/fesm2022/stemy-ngx-utils.mjs

@@ -7280,12 +7280,13 @@ class TabsItemDirective {
         this.tooltip = input("");
         this.icon = input("");
         this.disabled = input(false);
+        this.path = input(null);
         this.classes = input("");
         this.element = inject(ElementRef, { optional: true });
         this.template = inject(TemplateRef, { optional: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.19", type: TabsItemDirective, isStandalone: false, selector: "[tabsItem]", inputs: { value: { classPropertyName: "value", publicName: "tabsItem", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.19", type: TabsItemDirective, isStandalone: false, selector: "[tabsItem]", inputs: { value: { classPropertyName: "value", publicName: "tabsItem", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsItemDirective, decorators: [{
             type: Directive,
@@ -7417,7 +7418,7 @@ class BtnComponent {
         this.tooltip = input("");
         this.icon = input("");
         this.disabled = input(false);
-        this.path = input("");
+        this.path = input(null);
         this.type = input("primary");
         this.size = input("normal");
         this.buttonType = inject(BUTTON_TYPE);
@@ -7437,13 +7438,22 @@ class BtnComponent {
     contains(target) {
         return !(target instanceof HTMLElement) || this.element.nativeElement?.contains(target);
     }
+    onBtnClick(event) {
+        const isNewTabAction = event.ctrlKey || event.metaKey || event.button === 1;
+        if (!isNewTabAction) {
+            event.preventDefault();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: BtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.19", type: BtnComponent, isStandalone: false, selector: "btn", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container [ngComponentOutlet]=\"buttonType\"\r\n              [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.19", type: BtnComponent, isStandalone: false, selector: "btn", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onBtnClick($event)" } }, ngImport: i0, template: "<ng-container [ngComponentOutlet]=\"buttonType\"\r\n              [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: BtnComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "btn", template: "<ng-container [ngComponentOutlet]=\"buttonType\"\r\n              [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\r\n" }]
-        }] });
+        }], propDecorators: { onBtnClick: [{
+                type: HostListener,
+                args: ["click", ["$event"]]
+            }] } });
 
 class IconComponent {
     constructor() {
@@ -8301,11 +8311,11 @@ class DynamicTableComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: { classPropertyName: "dataLoader", publicName: "dataLoader", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, urlParam: { classPropertyName: "urlParam", publicName: "urlParam", isSignal: false, isRequired: false, transformFunction: null }, parallelData: { classPropertyName: "parallelData", publicName: "parallelData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: false, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, showItems: { classPropertyName: "showItems", publicName: "showItems", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: false, isRequired: false, transformFunction: null }, updateTime: { classPropertyName: "updateTime", publicName: "updateTime", isSignal: false, isRequired: false, transformFunction: null }, filterTime: { classPropertyName: "filterTime", publicName: "filterTime", isSignal: false, isRequired: false, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: false, isRequired: false, transformFunction: null }, directionLinks: { classPropertyName: "directionLinks", publicName: "directionLinks", isSignal: false, isRequired: false, transformFunction: null }, boundaryLinks: { classPropertyName: "boundaryLinks", publicName: "boundaryLinks", isSignal: false, isRequired: false, transformFunction: null }, orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: false, isRequired: false, transformFunction: null }, orderDescending: { classPropertyName: "orderDescending", publicName: "orderDescending", isSignal: false, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: false, isRequired: false, transformFunction: null }, titlePrefix: { classPropertyName: "titlePrefix", publicName: "titlePrefix", isSignal: false, isRequired: false, transformFunction: null }, dragStartFn: { classPropertyName: "dragStartFn", publicName: "dragStartFn", isSignal: false, isRequired: false, transformFunction: null }, dragEnterFn: { classPropertyName: "dragEnterFn", publicName: "dragEnterFn", isSignal: false, isRequired: false, transformFunction: null }, dropFn: { classPropertyName: "dropFn", publicName: "dropFn", isSignal: false, isRequired: false, transformFunction: null }, globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, queries: [{ propertyName: "fallbackTemplate", first: true, predicate: ["fallbackTemplate"], descendants: true, isSignal: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective, isSignal: true }, { propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }], 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: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n    <dynamic-table-cell [item]=\"item\"\r\n                        [column]=\"columnDef\"\r\n                        [id]=\"column\"\r\n                        [globalTemplatePrefix]=\"prefix\"\r\n                        [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n    @if (!template?.pure) {\r\n        <td [ngClass]=\"'column-' + column\"\r\n            [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n            <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n                          [context]=\"context\"></ng-container>\r\n        </td>\r\n    } @else {\r\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n    <ng-container *ngFor=\"let column of cols\"\r\n                  [ngxTemplateOutlet]=\"columnTemplate\"\r\n                  [context]=\"context\"\r\n                  [additionalContext]=\"{\r\n                    template: columnTemplates[column],\r\n                    column: column,\r\n                    columnDef: columnDefs[column]\r\n                  }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n    <tr #elem\r\n        [draggable]=\"!!dragStartFn\"\r\n        [ngClass]=\"{active: selected === context.item}\"\r\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n        (dragleave)=\"onDragLeave($event, elem)\"\r\n        (drop)=\"onDrop($event, elem, context.item)\"\r\n        (click)=\"onClick.emit(context.item)\">\r\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n                      [context]=\"context\"></ng-container>\r\n    </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n    <ng-template #defaultCol>\r\n        <span>{{ columnDefs[column].title | translate }}</span>\r\n    </ng-template>\r\n    <ng-template #emptyCol>\r\n        <span>-</span>\r\n    </ng-template>\r\n    <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n        <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n           (click)=\"setSorting(column, toggle)\">\r\n            <span>{{ columnDefs[column].title | translate }}</span>\r\n        </a>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n    <div class=\"table-features-row\">\r\n        <ng-content select=\"[table-features-before]\"></ng-content>\r\n        @if (showFilter) {\r\n            <div class=\"table-input-wrap table-search-filter\">\r\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n                    {{ filterLabel | translate }}\r\n                </label>\r\n                <input type=\"text\"\r\n                       class=\"search-input\"\r\n                       [attr.id]=\"tableId\"\r\n                       [attr.data-testid]=\"testId + '-filter-input'\"\r\n                       [placeholder]=\"placeholder | translate\"\r\n                       [ngModel]=\"filter\"\r\n                       (ngModelChange)=\"setFilter($event)\"/>\r\n            </div>\r\n        }\r\n        @if (sortable) {\r\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n                <ng-container toggle-content\r\n                              [ngTemplateOutlet]=\"headerTemplate\"\r\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n                <ul>\r\n                    <ng-container *ngFor=\"let column of cols\">\r\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </li>\r\n                    </ng-container>\r\n                </ul>\r\n            </dropdown-box>\r\n        }\r\n        @if (showItems) {\r\n            <div class=\"table-input-wrap table-items-count\">\r\n                <label>\r\n                    {{ 'label.items.before' | translate }}\r\n                </label>\r\n                <dropdown-box>\r\n                    <ng-container toggle-content>\r\n                        {{ itemsPerPage }}\r\n                    </ng-container>\r\n                    <ul>\r\n                        <ng-container *ngFor=\"let count of showItems\">\r\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n                                {{ count }}\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </dropdown-box>\r\n                <label>\r\n                    {{ 'label.items.after' | translate }}\r\n                </label>\r\n            </div>\r\n        }\r\n        <ng-content select=\"[table-features-after]\"></ng-content>\r\n    </div>\r\n    <div class=\"table-content-row\"\r\n         #pagination=\"pagination\"\r\n         [pagination]=\"loadData\"\r\n         [page]=\"page\"\r\n         [itemsPerPage]=\"itemsPerPage\"\r\n         [updateTime]=\"updateTime\">\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n        <div class=\"table-responsive\">\r\n            <ng-template #defaultWrapperTemplate>\r\n                <table class=\"table table-striped\">\r\n                    <thead>\r\n                    <tr>\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        @for (column of cols; track column) {\r\n                            @let columnDef = columnDefs[column];\r\n                            <th [ngClass]=\"['column-' + column, 'filter-column', 'filter-column-' + columnDef.filterType]\">\r\n                                @if (columnDef.filter) {\r\n                                    @switch (columnDef.filterType) {\r\n                                        @case ('enum') {\r\n                                            @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n                                            <ng-template #optionItem let-option=\"option\">\r\n                                                <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n                                                    <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n                                                </span>\r\n                                            </ng-template>\r\n                                            <dropdown-box componentClass=\"filter-box\"\r\n                                                          [ngClass]=\"'filter-box-' + column\"\r\n                                                          [closeInside]=\"false\">\r\n                                                <ng-container toggle-content>\r\n                                                    <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n                                                        {{ columnDefs[column].title | translate }}\r\n                                                    </span>\r\n                                                    <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n                                                          *ngFor=\"let option of query[column] | values; let ix = index\">\r\n                                                        <ng-container *ngIf=\"ix > 0\">&nbsp;|&nbsp;</ng-container>\r\n                                                        <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                                      [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                                    </span>\r\n                                                </ng-container>\r\n                                                <ul>\r\n                                                    @for (option of columnDefs[column].enum; track option) {\r\n                                                        <li (click)=\"setQueryValue(column, option)\">\r\n                                                            <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n                                                                <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n                                                                <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                                              [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                                            </a>\r\n                                                        </li>\r\n                                                    }\r\n                                                </ul>\r\n                                            </dropdown-box>\r\n                                        }\r\n                                        @case ('checkbox') {\r\n                                            <input type=\"checkbox\"\r\n                                                   class=\"table-checkbox\"\r\n                                                   [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                                   [placeholder]=\"columnDefs[column].title | translate\"\r\n                                                   [checked]=\"query[column] === true\"\r\n                                                   [indeterminate]=\"query[column] === undefined\"\r\n                                                   (click)=\"setQueryValue(column)\"/>\r\n                                        }\r\n                                        @default {\r\n                                            <input class=\"search-input\"\r\n                                                   type=\"text\"\r\n                                                   [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                                   [placeholder]=\"columnDefs[column].title | translate\"\r\n                                                   [ngModel]=\"query[column]\"\r\n                                                   (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n                                        }\r\n                                    }\r\n                                }\r\n                            </th>\r\n                        }\r\n                    </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <ng-container *paginationItem=\"let context\"\r\n                                      [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                      [context]=\"context\"\r\n                                      [additionalContext]=\"this\"></ng-container>\r\n                        <tr>\r\n                            <!-- Just an anchor/helper row for the loading state -->\r\n                            <td colspan=\"100%\"></td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-template>\r\n\r\n            <div class=\"table-wrapper\">\r\n                <ng-content select=\"[table-top]\"></ng-content>\r\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                              [context]=\"this\"></ng-container>\r\n                <ng-content select=\"[table-bottom]\"></ng-content>\r\n            </div>\r\n        </div>\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes table-load-spin{to{rotate:360deg}}.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 div.table-enum,.dynamic-table div.table-checkbox{text-align:center}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row,.dynamic-table .table-content-row tbody{position:relative}.dynamic-table .table-content-row tbody tr:last-child td:first-child{padding:0;border-bottom-width:0}.dynamic-table .table-content-row.loading tbody{height:50px}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:before{content:\"\";display:table-row;position:absolute;inset:1px;background-color:#32323240;z-index:1}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:after{content:\"\";display:table-row;position:absolute;width:25px;height:25px;border:3px solid rgba(255,255,255,.75);border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:table-load-spin 575ms infinite linear;vertical-align:middle;margin-right:5px;top:50%;left:50%;translate:-50% -50%;z-index:2}.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-top-width:0}.dynamic-table table.table tbody tr:last-child td,.dynamic-table table.table tbody tr:nth-last-child(2) 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}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4666666667) 50%);color:color-mix(in srgb,var(--enum-color),#000 70%);border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none}input.table-checkbox{appearance:none;cursor:pointer;width:16px;height:16px;border:1px solid black;border-radius:3px;background-color:#fff;position:relative;font-size:11px;line-height:11px;vertical-align:middle}input.table-checkbox:focus{outline:none}input.table-checkbox:focus-visible{outline:2px solid #acacac;outline-offset:0}input.table-checkbox:after{position:absolute;content:\"\\2716\\fe0e\";text-align:center;width:100%;height:100%}input.table-checkbox:checked:after{content:\"\\2714\\fe0e\"}input.table-checkbox:indeterminate:after{content:\"\\2501\"}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: DynamicTableCellComponent, selector: "dynamic-table-cell", inputs: ["item", "column", "id", "globalTemplatePrefix", "fallbackTemplate"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: { classPropertyName: "dataLoader", publicName: "dataLoader", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, urlParam: { classPropertyName: "urlParam", publicName: "urlParam", isSignal: false, isRequired: false, transformFunction: null }, parallelData: { classPropertyName: "parallelData", publicName: "parallelData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: false, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, showItems: { classPropertyName: "showItems", publicName: "showItems", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: false, isRequired: false, transformFunction: null }, updateTime: { classPropertyName: "updateTime", publicName: "updateTime", isSignal: false, isRequired: false, transformFunction: null }, filterTime: { classPropertyName: "filterTime", publicName: "filterTime", isSignal: false, isRequired: false, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: false, isRequired: false, transformFunction: null }, directionLinks: { classPropertyName: "directionLinks", publicName: "directionLinks", isSignal: false, isRequired: false, transformFunction: null }, boundaryLinks: { classPropertyName: "boundaryLinks", publicName: "boundaryLinks", isSignal: false, isRequired: false, transformFunction: null }, orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: false, isRequired: false, transformFunction: null }, orderDescending: { classPropertyName: "orderDescending", publicName: "orderDescending", isSignal: false, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: false, isRequired: false, transformFunction: null }, titlePrefix: { classPropertyName: "titlePrefix", publicName: "titlePrefix", isSignal: false, isRequired: false, transformFunction: null }, dragStartFn: { classPropertyName: "dragStartFn", publicName: "dragStartFn", isSignal: false, isRequired: false, transformFunction: null }, dragEnterFn: { classPropertyName: "dragEnterFn", publicName: "dragEnterFn", isSignal: false, isRequired: false, transformFunction: null }, dropFn: { classPropertyName: "dropFn", publicName: "dropFn", isSignal: false, isRequired: false, transformFunction: null }, globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, queries: [{ propertyName: "fallbackTemplate", first: true, predicate: ["fallbackTemplate"], descendants: true, isSignal: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective, isSignal: true }, { propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }], 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: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n    <dynamic-table-cell [item]=\"item\"\r\n                        [column]=\"columnDef\"\r\n                        [id]=\"column\"\r\n                        [globalTemplatePrefix]=\"prefix\"\r\n                        [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n    @if (!template?.pure) {\r\n        <td [ngClass]=\"'column-' + column\"\r\n            [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n            <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n                          [context]=\"context\"></ng-container>\r\n        </td>\r\n    } @else {\r\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n    <ng-container *ngFor=\"let column of cols\"\r\n                  [ngxTemplateOutlet]=\"columnTemplate\"\r\n                  [context]=\"context\"\r\n                  [additionalContext]=\"{\r\n                    template: columnTemplates[column],\r\n                    column: column,\r\n                    columnDef: columnDefs[column]\r\n                  }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n    <tr #elem\r\n        [draggable]=\"!!dragStartFn\"\r\n        [ngClass]=\"{active: selected === context.item}\"\r\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n        (dragleave)=\"onDragLeave($event, elem)\"\r\n        (drop)=\"onDrop($event, elem, context.item)\"\r\n        (click)=\"onClick.emit(context.item)\">\r\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n                      [context]=\"context\"></ng-container>\r\n    </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n    <ng-template #defaultCol>\r\n        <span>{{ columnDefs[column].title | translate }}</span>\r\n    </ng-template>\r\n    <ng-template #emptyCol>\r\n        <span>-</span>\r\n    </ng-template>\r\n    <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n        <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n           (click)=\"setSorting(column, toggle)\">\r\n            <span>{{ columnDefs[column].title | translate }}</span>\r\n        </a>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n    <div class=\"table-features-row\">\r\n        <ng-content select=\"[table-features-before]\"></ng-content>\r\n        @if (showFilter) {\r\n            <div class=\"table-input-wrap table-search-filter\">\r\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n                    {{ filterLabel | translate }}\r\n                </label>\r\n                <input type=\"text\"\r\n                       class=\"search-input\"\r\n                       [attr.id]=\"tableId\"\r\n                       [attr.data-testid]=\"testId + '-filter-input'\"\r\n                       [placeholder]=\"placeholder | translate\"\r\n                       [ngModel]=\"filter\"\r\n                       (ngModelChange)=\"setFilter($event)\"/>\r\n            </div>\r\n        }\r\n        @if (sortable) {\r\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n                <ng-container toggle-content\r\n                              [ngTemplateOutlet]=\"headerTemplate\"\r\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n                <ul>\r\n                    <ng-container *ngFor=\"let column of cols\">\r\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </li>\r\n                    </ng-container>\r\n                </ul>\r\n            </dropdown-box>\r\n        }\r\n        @if (showItems) {\r\n            <div class=\"table-input-wrap table-items-count\">\r\n                <label>\r\n                    {{ 'label.items.before' | translate }}\r\n                </label>\r\n                <dropdown-box>\r\n                    <ng-container toggle-content>\r\n                        {{ itemsPerPage }}\r\n                    </ng-container>\r\n                    <ul>\r\n                        <ng-container *ngFor=\"let count of showItems\">\r\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n                                {{ count }}\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </dropdown-box>\r\n                <label>\r\n                    {{ 'label.items.after' | translate }}\r\n                </label>\r\n            </div>\r\n        }\r\n        <ng-content select=\"[table-features-after]\"></ng-content>\r\n    </div>\r\n    <div class=\"table-content-row\"\r\n         #pagination=\"pagination\"\r\n         [pagination]=\"loadData\"\r\n         [page]=\"page\"\r\n         [itemsPerPage]=\"itemsPerPage\"\r\n         [updateTime]=\"updateTime\">\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n        <div class=\"table-responsive\">\r\n            <ng-template #defaultWrapperTemplate>\r\n                <table class=\"table table-striped\">\r\n                    <thead>\r\n                    <tr>\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        @for (column of cols; track column) {\r\n                            @let columnDef = columnDefs[column];\r\n                            <th [ngClass]=\"['column-' + column, 'filter-column', 'filter-column-' + columnDef.filterType]\">\r\n                                @if (columnDef.filter) {\r\n                                    @switch (columnDef.filterType) {\r\n                                        @case ('enum') {\r\n                                            @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n                                            <ng-template #optionItem let-option=\"option\">\r\n                                                <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n                                                    <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n                                                </span>\r\n                                            </ng-template>\r\n                                            <dropdown-box componentClass=\"filter-box\"\r\n                                                          [ngClass]=\"'filter-box-' + column\"\r\n                                                          [closeInside]=\"false\">\r\n                                                <ng-container toggle-content>\r\n                                                    <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n                                                        {{ columnDefs[column].title | translate }}\r\n                                                    </span>\r\n                                                    <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n                                                          *ngFor=\"let option of query[column] | values; let ix = index\">\r\n                                                        <ng-container *ngIf=\"ix > 0\">&nbsp;|&nbsp;</ng-container>\r\n                                                        <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                                      [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                                    </span>\r\n                                                </ng-container>\r\n                                                <ul>\r\n                                                    @for (option of columnDefs[column].enum; track option) {\r\n                                                        <li (click)=\"setQueryValue(column, option)\">\r\n                                                            <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n                                                                <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n                                                                <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                                              [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                                            </a>\r\n                                                        </li>\r\n                                                    }\r\n                                                </ul>\r\n                                            </dropdown-box>\r\n                                        }\r\n                                        @case ('checkbox') {\r\n                                            <input type=\"checkbox\"\r\n                                                   class=\"table-checkbox\"\r\n                                                   [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                                   [placeholder]=\"columnDefs[column].title | translate\"\r\n                                                   [checked]=\"query[column] === true\"\r\n                                                   [indeterminate]=\"query[column] === undefined\"\r\n                                                   (click)=\"setQueryValue(column)\"/>\r\n                                        }\r\n                                        @default {\r\n                                            <input class=\"search-input\"\r\n                                                   type=\"text\"\r\n                                                   [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                                   [placeholder]=\"columnDefs[column].title | translate\"\r\n                                                   [ngModel]=\"query[column]\"\r\n                                                   (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n                                        }\r\n                                    }\r\n                                }\r\n                            </th>\r\n                        }\r\n                    </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <ng-container *paginationItem=\"let context\"\r\n                                      [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                      [context]=\"context\"\r\n                                      [additionalContext]=\"this\"></ng-container>\r\n                        <tr>\r\n                            <!-- Just an anchor/helper row for the loading state -->\r\n                            <td colspan=\"100%\"></td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-template>\r\n\r\n            <div class=\"table-wrapper\">\r\n                <ng-content select=\"[table-top]\"></ng-content>\r\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                              [context]=\"this\"></ng-container>\r\n                <ng-content select=\"[table-bottom]\"></ng-content>\r\n            </div>\r\n        </div>\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes table-load-spin{to{rotate:360deg}}.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 div.table-enum,.dynamic-table div.table-checkbox{text-align:center}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);padding:var(--element-padding, 6px 12px);border-radius:5px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row,.dynamic-table .table-content-row tbody{position:relative}.dynamic-table .table-content-row tbody tr:last-child td:first-child{padding:0;border-bottom-width:0}.dynamic-table .table-content-row.loading tbody{height:50px}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:before{content:\"\";display:table-row;position:absolute;inset:1px;background-color:#32323240;z-index:1}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:after{content:\"\";display:table-row;position:absolute;width:25px;height:25px;border:3px solid rgba(255,255,255,.75);border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:table-load-spin 575ms infinite linear;vertical-align:middle;margin-right:5px;top:50%;left:50%;translate:-50% -50%;z-index:2}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;flex:1;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{width:300px;max-width:90%}.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%;padding:5px 10px}.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-top-width:0}.dynamic-table table.table tbody tr:last-child td,.dynamic-table table.table tbody tr:nth-last-child(2) 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}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4666666667) 50%);color:color-mix(in srgb,var(--enum-color),#000 70%);border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none}input.table-checkbox{appearance:none;cursor:pointer;width:16px;height:16px;border:1px solid black;border-radius:3px;background-color:#fff;position:relative;font-size:11px;line-height:11px;vertical-align:middle}input.table-checkbox:focus{outline:none}input.table-checkbox:focus-visible{outline:2px solid #acacac;outline-offset:0}input.table-checkbox:after{position:absolute;content:\"\\2716\\fe0e\";text-align:center;width:100%;height:100%}input.table-checkbox:checked:after{content:\"\\2714\\fe0e\"}input.table-checkbox:indeterminate:after{content:\"\\2501\"}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: DynamicTableCellComponent, selector: "dynamic-table-cell", inputs: ["item", "column", "id", "globalTemplatePrefix", "fallbackTemplate"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n    <dynamic-table-cell [item]=\"item\"\r\n                        [column]=\"columnDef\"\r\n                        [id]=\"column\"\r\n                        [globalTemplatePrefix]=\"prefix\"\r\n                        [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n    @if (!template?.pure) {\r\n        <td [ngClass]=\"'column-' + column\"\r\n            [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n            <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n                          [context]=\"context\"></ng-container>\r\n        </td>\r\n    } @else {\r\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n    <ng-container *ngFor=\"let column of cols\"\r\n                  [ngxTemplateOutlet]=\"columnTemplate\"\r\n                  [context]=\"context\"\r\n                  [additionalContext]=\"{\r\n                    template: columnTemplates[column],\r\n                    column: column,\r\n                    columnDef: columnDefs[column]\r\n                  }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n    <tr #elem\r\n        [draggable]=\"!!dragStartFn\"\r\n        [ngClass]=\"{active: selected === context.item}\"\r\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n        (dragleave)=\"onDragLeave($event, elem)\"\r\n        (drop)=\"onDrop($event, elem, context.item)\"\r\n        (click)=\"onClick.emit(context.item)\">\r\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n                      [context]=\"context\"></ng-container>\r\n    </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n    <ng-template #defaultCol>\r\n        <span>{{ columnDefs[column].title | translate }}</span>\r\n    </ng-template>\r\n    <ng-template #emptyCol>\r\n        <span>-</span>\r\n    </ng-template>\r\n    <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n        <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n           (click)=\"setSorting(column, toggle)\">\r\n            <span>{{ columnDefs[column].title | translate }}</span>\r\n        </a>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n    <div class=\"table-features-row\">\r\n        <ng-content select=\"[table-features-before]\"></ng-content>\r\n        @if (showFilter) {\r\n            <div class=\"table-input-wrap table-search-filter\">\r\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n                    {{ filterLabel | translate }}\r\n                </label>\r\n                <input type=\"text\"\r\n                       class=\"search-input\"\r\n                       [attr.id]=\"tableId\"\r\n                       [attr.data-testid]=\"testId + '-filter-input'\"\r\n                       [placeholder]=\"placeholder | translate\"\r\n                       [ngModel]=\"filter\"\r\n                       (ngModelChange)=\"setFilter($event)\"/>\r\n            </div>\r\n        }\r\n        @if (sortable) {\r\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n                <ng-container toggle-content\r\n                              [ngTemplateOutlet]=\"headerTemplate\"\r\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n                <ul>\r\n                    <ng-container *ngFor=\"let column of cols\">\r\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </li>\r\n                    </ng-container>\r\n                </ul>\r\n            </dropdown-box>\r\n        }\r\n        @if (showItems) {\r\n            <div class=\"table-input-wrap table-items-count\">\r\n                <label>\r\n                    {{ 'label.items.before' | translate }}\r\n                </label>\r\n                <dropdown-box>\r\n                    <ng-container toggle-content>\r\n                        {{ itemsPerPage }}\r\n                    </ng-container>\r\n                    <ul>\r\n                        <ng-container *ngFor=\"let count of showItems\">\r\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n                                {{ count }}\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </dropdown-box>\r\n                <label>\r\n                    {{ 'label.items.after' | translate }}\r\n                </label>\r\n            </div>\r\n        }\r\n        <ng-content select=\"[table-features-after]\"></ng-content>\r\n    </div>\r\n    <div class=\"table-content-row\"\r\n         #pagination=\"pagination\"\r\n         [pagination]=\"loadData\"\r\n         [page]=\"page\"\r\n         [itemsPerPage]=\"itemsPerPage\"\r\n         [updateTime]=\"updateTime\">\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n        <div class=\"table-responsive\">\r\n            <ng-template #defaultWrapperTemplate>\r\n                <table class=\"table table-striped\">\r\n                    <thead>\r\n                    <tr>\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        @for (column of cols; track column) {\r\n                            @let columnDef = columnDefs[column];\r\n                            <th [ngClass]=\"['column-' + column, 'filter-column', 'filter-column-' + columnDef.filterType]\">\r\n                                @if (columnDef.filter) {\r\n                                    @switch (columnDef.filterType) {\r\n                                        @case ('enum') {\r\n                                            @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n                                            <ng-template #optionItem let-option=\"option\">\r\n                                                <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n                                                    <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n                                                </span>\r\n                                            </ng-template>\r\n                                            <dropdown-box componentClass=\"filter-box\"\r\n                                                          [ngClass]=\"'filter-box-' + column\"\r\n                                                          [closeInside]=\"false\">\r\n                                                <ng-container toggle-content>\r\n                                                    <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n                                                        {{ columnDefs[column].title | translate }}\r\n                                                    </span>\r\n                                                    <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n                                                          *ngFor=\"let option of query[column] | values; let ix = index\">\r\n                                                        <ng-container *ngIf=\"ix > 0\">&nbsp;|&nbsp;</ng-container>\r\n                                                        <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                                      [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                                    </span>\r\n                                                </ng-container>\r\n                                                <ul>\r\n                                                    @for (option of columnDefs[column].enum; track option) {\r\n                                                        <li (click)=\"setQueryValue(column, option)\">\r\n                                                            <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n                                                                <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n                                                                <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                                              [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                                            </a>\r\n                                                        </li>\r\n                                                    }\r\n                                                </ul>\r\n                                            </dropdown-box>\r\n                                        }\r\n                                        @case ('checkbox') {\r\n                                            <input type=\"checkbox\"\r\n                                                   class=\"table-checkbox\"\r\n                                                   [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                                   [placeholder]=\"columnDefs[column].title | translate\"\r\n                                                   [checked]=\"query[column] === true\"\r\n                                                   [indeterminate]=\"query[column] === undefined\"\r\n                                                   (click)=\"setQueryValue(column)\"/>\r\n                                        }\r\n                                        @default {\r\n                                            <input class=\"search-input\"\r\n                                                   type=\"text\"\r\n                                                   [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                                   [placeholder]=\"columnDefs[column].title | translate\"\r\n                                                   [ngModel]=\"query[column]\"\r\n                                                   (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n                                        }\r\n                                    }\r\n                                }\r\n                            </th>\r\n                        }\r\n                    </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <ng-container *paginationItem=\"let context\"\r\n                                      [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                      [context]=\"context\"\r\n                                      [additionalContext]=\"this\"></ng-container>\r\n                        <tr>\r\n                            <!-- Just an anchor/helper row for the loading state -->\r\n                            <td colspan=\"100%\"></td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-template>\r\n\r\n            <div class=\"table-wrapper\">\r\n                <ng-content select=\"[table-top]\"></ng-content>\r\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                              [context]=\"this\"></ng-container>\r\n                <ng-content select=\"[table-bottom]\"></ng-content>\r\n            </div>\r\n        </div>\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes table-load-spin{to{rotate:360deg}}.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 div.table-enum,.dynamic-table div.table-checkbox{text-align:center}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row,.dynamic-table .table-content-row tbody{position:relative}.dynamic-table .table-content-row tbody tr:last-child td:first-child{padding:0;border-bottom-width:0}.dynamic-table .table-content-row.loading tbody{height:50px}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:before{content:\"\";display:table-row;position:absolute;inset:1px;background-color:#32323240;z-index:1}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:after{content:\"\";display:table-row;position:absolute;width:25px;height:25px;border:3px solid rgba(255,255,255,.75);border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:table-load-spin 575ms infinite linear;vertical-align:middle;margin-right:5px;top:50%;left:50%;translate:-50% -50%;z-index:2}.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-top-width:0}.dynamic-table table.table tbody tr:last-child td,.dynamic-table table.table tbody tr:nth-last-child(2) 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}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4666666667) 50%);color:color-mix(in srgb,var(--enum-color),#000 70%);border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none}input.table-checkbox{appearance:none;cursor:pointer;width:16px;height:16px;border:1px solid black;border-radius:3px;background-color:#fff;position:relative;font-size:11px;line-height:11px;vertical-align:middle}input.table-checkbox:focus{outline:none}input.table-checkbox:focus-visible{outline:2px solid #acacac;outline-offset:0}input.table-checkbox:after{position:absolute;content:\"\\2716\\fe0e\";text-align:center;width:100%;height:100%}input.table-checkbox:checked:after{content:\"\\2714\\fe0e\"}input.table-checkbox:indeterminate:after{content:\"\\2501\"}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n    <dynamic-table-cell [item]=\"item\"\r\n                        [column]=\"columnDef\"\r\n                        [id]=\"column\"\r\n                        [globalTemplatePrefix]=\"prefix\"\r\n                        [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n    @if (!template?.pure) {\r\n        <td [ngClass]=\"'column-' + column\"\r\n            [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n            <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n                          [context]=\"context\"></ng-container>\r\n        </td>\r\n    } @else {\r\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n    <ng-container *ngFor=\"let column of cols\"\r\n                  [ngxTemplateOutlet]=\"columnTemplate\"\r\n                  [context]=\"context\"\r\n                  [additionalContext]=\"{\r\n                    template: columnTemplates[column],\r\n                    column: column,\r\n                    columnDef: columnDefs[column]\r\n                  }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n    <tr #elem\r\n        [draggable]=\"!!dragStartFn\"\r\n        [ngClass]=\"{active: selected === context.item}\"\r\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n        (dragleave)=\"onDragLeave($event, elem)\"\r\n        (drop)=\"onDrop($event, elem, context.item)\"\r\n        (click)=\"onClick.emit(context.item)\">\r\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n                      [context]=\"context\"></ng-container>\r\n    </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n    <ng-template #defaultCol>\r\n        <span>{{ columnDefs[column].title | translate }}</span>\r\n    </ng-template>\r\n    <ng-template #emptyCol>\r\n        <span>-</span>\r\n    </ng-template>\r\n    <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n        <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n           (click)=\"setSorting(column, toggle)\">\r\n            <span>{{ columnDefs[column].title | translate }}</span>\r\n        </a>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n    <div class=\"table-features-row\">\r\n        <ng-content select=\"[table-features-before]\"></ng-content>\r\n        @if (showFilter) {\r\n            <div class=\"table-input-wrap table-search-filter\">\r\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n                    {{ filterLabel | translate }}\r\n                </label>\r\n                <input type=\"text\"\r\n                       class=\"search-input\"\r\n                       [attr.id]=\"tableId\"\r\n                       [attr.data-testid]=\"testId + '-filter-input'\"\r\n                       [placeholder]=\"placeholder | translate\"\r\n                       [ngModel]=\"filter\"\r\n                       (ngModelChange)=\"setFilter($event)\"/>\r\n            </div>\r\n        }\r\n        @if (sortable) {\r\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n                <ng-container toggle-content\r\n                              [ngTemplateOutlet]=\"headerTemplate\"\r\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n                <ul>\r\n                    <ng-container *ngFor=\"let column of cols\">\r\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </li>\r\n                    </ng-container>\r\n                </ul>\r\n            </dropdown-box>\r\n        }\r\n        @if (showItems) {\r\n            <div class=\"table-input-wrap table-items-count\">\r\n                <label>\r\n                    {{ 'label.items.before' | translate }}\r\n                </label>\r\n                <dropdown-box>\r\n                    <ng-container toggle-content>\r\n                        {{ itemsPerPage }}\r\n                    </ng-container>\r\n                    <ul>\r\n                        <ng-container *ngFor=\"let count of showItems\">\r\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n                                {{ count }}\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </dropdown-box>\r\n                <label>\r\n                    {{ 'label.items.after' | translate }}\r\n                </label>\r\n            </div>\r\n        }\r\n        <ng-content select=\"[table-features-after]\"></ng-content>\r\n    </div>\r\n    <div class=\"table-content-row\"\r\n         #pagination=\"pagination\"\r\n         [pagination]=\"loadData\"\r\n         [page]=\"page\"\r\n         [itemsPerPage]=\"itemsPerPage\"\r\n         [updateTime]=\"updateTime\">\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n        <div class=\"table-responsive\">\r\n            <ng-template #defaultWrapperTemplate>\r\n                <table class=\"table table-striped\">\r\n                    <thead>\r\n                    <tr>\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        @for (column of cols; track column) {\r\n                            @let columnDef = columnDefs[column];\r\n                            <th [ngClass]=\"['column-' + column, 'filter-column', 'filter-column-' + columnDef.filterType]\">\r\n                                @if (columnDef.filter) {\r\n                                    @switch (columnDef.filterType) {\r\n                                        @case ('enum') {\r\n                                            @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n                                            <ng-template #optionItem let-option=\"option\">\r\n                                                <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n                                                    <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n                                                </span>\r\n                                            </ng-template>\r\n                                            <dropdown-box componentClass=\"filter-box\"\r\n                                                          [ngClass]=\"'filter-box-' + column\"\r\n                                                          [closeInside]=\"false\">\r\n                                                <ng-container toggle-content>\r\n                                                    <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n                                                        {{ columnDefs[column].title | translate }}\r\n                                                    </span>\r\n                                                    <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n                                                          *ngFor=\"let option of query[column] | values; let ix = index\">\r\n                                                        <ng-container *ngIf=\"ix > 0\">&nbsp;|&nbsp;</ng-container>\r\n                                                        <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                                      [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                                    </span>\r\n                                                </ng-container>\r\n                                                <ul>\r\n                                                    @for (option of columnDefs[column].enum; track option) {\r\n                                                        <li (click)=\"setQueryValue(column, option)\">\r\n                                                            <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n                                                                <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n                                                                <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n                                                                              [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n                                                            </a>\r\n                                                        </li>\r\n                                                    }\r\n                                                </ul>\r\n                                            </dropdown-box>\r\n                                        }\r\n                                        @case ('checkbox') {\r\n                                            <input type=\"checkbox\"\r\n                                                   class=\"table-checkbox\"\r\n                                                   [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                                   [placeholder]=\"columnDefs[column].title | translate\"\r\n                                                   [checked]=\"query[column] === true\"\r\n                                                   [indeterminate]=\"query[column] === undefined\"\r\n                                                   (click)=\"setQueryValue(column)\"/>\r\n                                        }\r\n                                        @default {\r\n                                            <input class=\"search-input\"\r\n                                                   type=\"text\"\r\n                                                   [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                                   [placeholder]=\"columnDefs[column].title | translate\"\r\n                                                   [ngModel]=\"query[column]\"\r\n                                                   (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n                                        }\r\n                                    }\r\n                                }\r\n                            </th>\r\n                        }\r\n                    </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <ng-container *paginationItem=\"let context\"\r\n                                      [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                      [context]=\"context\"\r\n                                      [additionalContext]=\"this\"></ng-container>\r\n                        <tr>\r\n                            <!-- Just an anchor/helper row for the loading state -->\r\n                            <td colspan=\"100%\"></td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-template>\r\n\r\n            <div class=\"table-wrapper\">\r\n                <ng-content select=\"[table-top]\"></ng-content>\r\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                              [context]=\"this\"></ng-container>\r\n                <ng-content select=\"[table-bottom]\"></ng-content>\r\n            </div>\r\n        </div>\r\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes table-load-spin{to{rotate:360deg}}.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 div.table-enum,.dynamic-table div.table-checkbox{text-align:center}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);padding:var(--element-padding, 6px 12px);border-radius:5px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row,.dynamic-table .table-content-row tbody{position:relative}.dynamic-table .table-content-row tbody tr:last-child td:first-child{padding:0;border-bottom-width:0}.dynamic-table .table-content-row.loading tbody{height:50px}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:before{content:\"\";display:table-row;position:absolute;inset:1px;background-color:#32323240;z-index:1}.dynamic-table .table-content-row.loading tbody tr:last-child td:first-child:after{content:\"\";display:table-row;position:absolute;width:25px;height:25px;border:3px solid rgba(255,255,255,.75);border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:table-load-spin 575ms infinite linear;vertical-align:middle;margin-right:5px;top:50%;left:50%;translate:-50% -50%;z-index:2}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;flex:1;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{width:300px;max-width:90%}.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%;padding:5px 10px}.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-top-width:0}.dynamic-table table.table tbody tr:last-child td,.dynamic-table table.table tbody tr:nth-last-child(2) 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}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4666666667) 50%);color:color-mix(in srgb,var(--enum-color),#000 70%);border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none}input.table-checkbox{appearance:none;cursor:pointer;width:16px;height:16px;border:1px solid black;border-radius:3px;background-color:#fff;position:relative;font-size:11px;line-height:11px;vertical-align:middle}input.table-checkbox:focus{outline:none}input.table-checkbox:focus-visible{outline:2px solid #acacac;outline-offset:0}input.table-checkbox:after{position:absolute;content:\"\\2716\\fe0e\";text-align:center;width:100%;height:100%}input.table-checkbox:checked:after{content:\"\\2714\\fe0e\"}input.table-checkbox:indeterminate:after{content:\"\\2501\"}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
                 type: Input
             }], data: [{
@@ -9102,6 +9112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
 
 class TabsComponent {
     constructor() {
+        this.urlSerializer = inject(UrlSerializer);
+        this.router = inject(Router);
         this.value = model();
         this.options = input([]);
         this.type = input("primary");
@@ -9112,7 +9124,17 @@ class TabsComponent {
         this.selectedChange = output();
         this.template = signal(null);
         this.tabs = computed(() => {
-            const options = Array.from(this.options() || []);
+            const options = (this.options() || [])
+                .filter(option => ObjectUtils.isStringWithValue(option?.label))
+                .map(option => {
+                const path = !option.path
+                    ? null
+                    : (option.path instanceof UrlTree ? this.urlSerializer.serialize(option.path) : option.path);
+                return {
+                    ...option,
+                    path
+                };
+            });
             const current = this.value();
             this.tabItems().forEach(item => {
                 const value = item.value();
@@ -9122,6 +9144,7 @@ class TabsComponent {
                 const label = item.label();
                 if (!label)
                     return;
+                const path = item.path();
                 options.push({
                     value,
                     label,
@@ -9129,6 +9152,9 @@ class TabsComponent {
                     tooltip: item.tooltip(),
                     icon: item.icon(),
                     disabled: item.disabled(),
+                    path: !path
+                        ? null
+                        : (path instanceof UrlTree ? this.urlSerializer.serialize(path) : path),
                     template: item.template
                 });
             });
@@ -9141,6 +9167,15 @@ class TabsComponent {
             });
             return options;
         });
+        this.select = async (option) => {
+            if (option.path) {
+                await this.router.navigateByUrl(option.path);
+                return null;
+            }
+            this.value.set(option.value);
+            this.selectedChange.emit(option);
+            return null;
+        };
         effect(() => {
             const tabOptions = this.tabs();
             const selectedOption = tabOptions.find(o => o.active);
@@ -9153,16 +9188,12 @@ class TabsComponent {
             }
         });
     }
-    select(option) {
-        this.value.set(option.value);
-        this.selectedChange.emit(option);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: TabsComponent, isStandalone: false, selector: "tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, tabsClass: { classPropertyName: "tabsClass", publicName: "tabsClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectedChange: "selectedChange" }, queries: [{ propertyName: "tabItems", predicate: TabsItemDirective, isSignal: true }], ngImport: i0, template: "@let tabList = tabs();\r\n@let tabType = type();\r\n@let tabSize = size();\r\n@let tabTemplate = template();\r\n@let testIdPrefix = testId() || \"tabs\";\r\n@if (tabList.length) {\r\n    <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\r\n        @for (option of tabList; track option.value) {\r\n            <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\r\n                <btn [label]=\"option.label\"\r\n                     [tooltip]=\"option.tooltip\"\r\n                     [icon]=\"option.icon\"\r\n                     [disabled]=\"option.disabled\"\r\n                     [type]=\"option.active ? tabType : 'transparent'\"\r\n                     [size]=\"tabSize\"\r\n                     (click)=\"select(option)\"></btn>\r\n            </li>\r\n        }\r\n    </ul>\r\n}\r\n@if (tabTemplate) {\r\n    <div class=\"ui-tab\">\r\n        <ng-container [ngTemplateOutlet]=\"tabTemplate\"></ng-container>\r\n    </div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: [".ui-tabs{--tabs-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--tabs-border-radius: var(--element-radius, var(--mat-sys-corner-full, 5px));--tabs-bg: var(--tabs-color);--tabs-margin: 5px;--tabs-padding: 5px;display:flex;gap:5px;margin:0 0 var(--tabs-margin) 0;padding:var(--tabs-padding);position:relative;list-style-type:none}.ui-tabs:before{content:\"\";position:absolute;inset:0;background:var(--tabs-bg);border-radius:var(--tabs-border-radius);opacity:.25;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-color: var(--secondary-color, var(--bs-secondary, var(--mat-sys-secondary, #666666)))}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: TabsComponent, isStandalone: false, selector: "tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, tabsClass: { classPropertyName: "tabsClass", publicName: "tabsClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectedChange: "selectedChange" }, queries: [{ propertyName: "tabItems", predicate: TabsItemDirective, isSignal: true }], ngImport: i0, template: "@let tabList = tabs();\r\n@let tabType = type();\r\n@let tabSize = size();\r\n@let tabTemplate = template();\r\n@let testIdPrefix = testId() || \"tabs\";\r\n@if (tabList.length) {\r\n    <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\r\n        @for (option of tabList; track option.value) {\r\n            <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\r\n                <btn [label]=\"option.label\"\r\n                     [tooltip]=\"option.tooltip\"\r\n                     [icon]=\"option.icon\"\r\n                     [disabled]=\"option.disabled\"\r\n                     [path]=\"option.path\"\r\n                     [type]=\"option.active ? tabType : 'transparent'\"\r\n                     [size]=\"tabSize\"\r\n                     [async-method]=\"select\"\r\n                     [context]=\"option\"></btn>\r\n            </li>\r\n        }\r\n    </ul>\r\n}\r\n@if (tabTemplate) {\r\n    <div class=\"ui-tab\">\r\n        <ng-container [ngTemplateOutlet]=\"tabTemplate\"></ng-container>\r\n    </div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: [".ui-tabs{--tabs-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--tabs-border-radius: var(--element-radius, var(--mat-sys-corner-full, 5px));--tabs-bg: var(--tabs-color);--tabs-margin: 5px;--tabs-padding: 5px;display:flex;gap:5px;margin:0 0 var(--tabs-margin) 0;padding:var(--tabs-padding);position:relative;list-style-type:none}.ui-tabs:before{content:\"\";position:absolute;inset:0;background:var(--tabs-bg);border-radius:var(--tabs-border-radius);opacity:.25;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-color: var(--secondary-color, var(--bs-secondary, var(--mat-sys-secondary, #666666)))}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AsyncMethodDirective, selector: "[async-method]", inputs: ["async-method"], exportAs: ["async-method"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "tabs", template: "@let tabList = tabs();\r\n@let tabType = type();\r\n@let tabSize = size();\r\n@let tabTemplate = template();\r\n@let testIdPrefix = testId() || \"tabs\";\r\n@if (tabList.length) {\r\n    <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\r\n        @for (option of tabList; track option.value) {\r\n            <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\r\n                <btn [label]=\"option.label\"\r\n                     [tooltip]=\"option.tooltip\"\r\n                     [icon]=\"option.icon\"\r\n                     [disabled]=\"option.disabled\"\r\n                     [type]=\"option.active ? tabType : 'transparent'\"\r\n                     [size]=\"tabSize\"\r\n                     (click)=\"select(option)\"></btn>\r\n            </li>\r\n        }\r\n    </ul>\r\n}\r\n@if (tabTemplate) {\r\n    <div class=\"ui-tab\">\r\n        <ng-container [ngTemplateOutlet]=\"tabTemplate\"></ng-container>\r\n    </div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: [".ui-tabs{--tabs-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--tabs-border-radius: var(--element-radius, var(--mat-sys-corner-full, 5px));--tabs-bg: var(--tabs-color);--tabs-margin: 5px;--tabs-padding: 5px;display:flex;gap:5px;margin:0 0 var(--tabs-margin) 0;padding:var(--tabs-padding);position:relative;list-style-type:none}.ui-tabs:before{content:\"\";position:absolute;inset:0;background:var(--tabs-bg);border-radius:var(--tabs-border-radius);opacity:.25;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-color: var(--secondary-color, var(--bs-secondary, var(--mat-sys-secondary, #666666)))}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "tabs", template: "@let tabList = tabs();\r\n@let tabType = type();\r\n@let tabSize = size();\r\n@let tabTemplate = template();\r\n@let testIdPrefix = testId() || \"tabs\";\r\n@if (tabList.length) {\r\n    <ul class=\"ui-tabs\" [ngClass]=\"[tabsClass(), 'type-' + tabType]\" [attr.data-testid]=\"testIdPrefix\">\r\n        @for (option of tabList; track option.value) {\r\n            <li [ngClass]=\"option.className\" [attr.data-testid]=\"testIdPrefix + '-' + option.value\">\r\n                <btn [label]=\"option.label\"\r\n                     [tooltip]=\"option.tooltip\"\r\n                     [icon]=\"option.icon\"\r\n                     [disabled]=\"option.disabled\"\r\n                     [path]=\"option.path\"\r\n                     [type]=\"option.active ? tabType : 'transparent'\"\r\n                     [size]=\"tabSize\"\r\n                     [async-method]=\"select\"\r\n                     [context]=\"option\"></btn>\r\n            </li>\r\n        }\r\n    </ul>\r\n}\r\n@if (tabTemplate) {\r\n    <div class=\"ui-tab\">\r\n        <ng-container [ngTemplateOutlet]=\"tabTemplate\"></ng-container>\r\n    </div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: [".ui-tabs{--tabs-color: var(--primary-color, var(--bs-primary, var(--mat-sys-primary, #666666)));--tabs-border-radius: var(--element-radius, var(--mat-sys-corner-full, 5px));--tabs-bg: var(--tabs-color);--tabs-margin: 5px;--tabs-padding: 5px;display:flex;gap:5px;margin:0 0 var(--tabs-margin) 0;padding:var(--tabs-padding);position:relative;list-style-type:none}.ui-tabs:before{content:\"\";position:absolute;inset:0;background:var(--tabs-bg);border-radius:var(--tabs-border-radius);opacity:.25;z-index:0}.ui-tabs li{position:relative;z-index:1}.ui-tabs *{box-sizing:border-box}.ui-tabs.type-secondary{--tabs-color: var(--secondary-color, var(--bs-secondary, var(--mat-sys-secondary, #666666)))}\n"] }]
         }], ctorParameters: () => [] });
 
 class UnorderedListComponent {