@stemy/ngx-utils 19.7.0 → 19.7.1

package/fesm2022/stemy-ngx-utils.mjs

@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, untracked, computed, signal, inject, DestroyRef, isDevMode, ErrorHandler, EventEmitter, createComponent, NgZone, Pipe, input, output, ChangeDetectorRef, ElementRef, effect, HostListener, Directive, Input, HostBinding, Output, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, ContentChildren, model, contentChildren, provideAppInitializer, makeEnvironmentProviders, NgModule } from '@angular/core';
 import * as i2 from '@angular/router';
 import { ActivatedRouteSnapshot, Scroll, NavigationEnd, Router, DefaultUrlSerializer, UrlTree, UrlSegmentGroup, UrlSegment, UrlSerializer, ROUTES } from '@angular/router';
-import { BehaviorSubject, Observable, firstValueFrom, Subject, Subscription, from, delay, timer, TimeoutError, combineLatest, lastValueFrom } from 'rxjs';
+import { BehaviorSubject, Observable, firstValueFrom, Subject, Subscription, from, delay, timer, TimeoutError, combineLatest, of, lastValueFrom } from 'rxjs';
 import { skipWhile, debounceTime, distinctUntilChanged, map, filter, mergeMap, timeout } from 'rxjs/operators';
 import * as i1$3 from '@angular/common';
 import { isPlatformBrowser, isPlatformServer, DOCUMENT, APP_BASE_HREF, CommonModule } from '@angular/common';
@@ -2158,10 +2158,10 @@ class LoaderUtils {
     }
 }
 
+const EPSILON = 1e-9;
 class MathUtils {
-    static { this.EPSILON = 1e-9; }
     static equal(a, b, epsilon = null) {
-        epsilon = ObjectUtils.isNumber(epsilon) ? epsilon : MathUtils.EPSILON;
+        epsilon = ObjectUtils.isNumber(epsilon) ? epsilon : EPSILON;
         return Math.abs(a - b) < epsilon;
     }
     static clamp(value, min, max) {
@@ -7281,6 +7281,9 @@ class DynamicTableComponent {
         this.testId = "table";
         this.titlePrefix = "label";
         this.realColumns = {};
+        this.cols = [];
+        this.sortable = false;
+        this.localData = [];
     }
     setProperty(name, value) {
         const elem = this.element.nativeElement;
@@ -7305,6 +7308,9 @@ class DynamicTableComponent {
     ngAfterViewInit() {
         this.rowTemplate = this.rowTemplate || this.defaultRowTemplate;
     }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
     ngOnChanges(changes) {
         const orderBy = this.orderBy;
         if (changes.columns) {
@@ -7324,6 +7330,7 @@ class DynamicTableComponent {
             this.cols = Object.keys(this.realColumns);
             const sortable = this.cols.filter(c => this.realColumns[c].sort);
             const query = this.query || {};
+            this.sortable = sortable.length > 0;
             this.orderBy = sortable.includes(this.orderBy) ? this.orderBy : sortable[0] || null;
             this.query = this.cols.reduce((res, col) => {
                 const value = query[col];
@@ -7337,11 +7344,17 @@ class DynamicTableComponent {
         this.hasQuery = this.cols.some(col => this.realColumns[col].filter);
         if (changes.orderBy && this.realColumns && this.cols) {
             const sortable = this.cols.filter(c => this.realColumns[c].sort);
+            this.sortable = sortable.length > 0;
             this.orderBy = sortable.includes(this.orderBy) ? this.orderBy : sortable[0] || null;
         }
         if (!changes.data && !changes.parallelData && !changes.dataLoader && !changes.itemsPerPage && !changes.orderDescending && orderBy === this.orderBy)
             return;
-        this.refresh();
+        const source = this.data instanceof Observable ? this.data : of(this.data || []);
+        this.subscription?.unsubscribe();
+        this.subscription = source.subscribe(data => {
+            this.localData = data;
+            this.refresh();
+        });
     }
     onDragStart(ev, elem, item) {
         if (!elem || !item || !ObjectUtils.isFunction(this.dragStartFn) || !this.dragStartFn({ ev, elem, item })) {
@@ -7443,21 +7456,21 @@ class DynamicTableComponent {
         this.itemsPerPage = count;
         this.refresh();
     }
-    loadLocalData(page, rowsPerPage, orderBy, orderDescending, filter) {
-        if (!this.data) {
-            return Promise.resolve({
+    async loadLocalData(page, rowsPerPage, orderBy, orderDescending, filter) {
+        if (!this.localData) {
+            return {
                 total: 0,
                 items: []
-            });
+            };
         }
         const compare = orderDescending
             ? (a, b) => DynamicTableComponent.compare(orderBy, b, a)
             : (a, b) => DynamicTableComponent.compare(orderBy, a, b);
         const from = (page - 1) * rowsPerPage;
-        const dataLength = this.data.length;
+        const dataLength = this.localData.length;
         const length = Math.min(rowsPerPage, dataLength - from);
         const parallelData = this.parallelData || [];
-        let data = this.data.map((item, ix) => {
+        let data = this.localData.map((item, ix) => {
             return new PaginationItemContext(item, parallelData[ix] || {}, dataLength, ix, ix);
         });
         if (ObjectUtils.isString(filter) && filter.length > 0) {
@@ -7466,19 +7479,20 @@ class DynamicTableComponent {
         }
         const items = orderBy ? data.sort(compare).splice(from, length) : data.splice(from, length);
         items.forEach((context, ix) => {
-            context.index = from + ix;
+            context.index = ix;
+            context.dataIndex = from + ix;
         });
-        return Promise.resolve({
+        return {
             total: dataLength,
             items: items
-        });
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr #elem\n        [draggable]=\"!!dragStartFn\"\n        [ngClass]=\"{active: selected === context.item}\"\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\n        (dragleave)=\"onDragLeave($event, elem)\"\n        (drop)=\"onDrop($event, elem, context.item)\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <ng-template #emptyCol>\n        <span>-</span>\n    </ng-template>\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n           (click)=\"setSorting(column, toggle)\">\n            <span>{{ realColumns[column].title | translate }}</span>\n        </a>\n    </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n            <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n                {{ filterLabel | translate }}\n            </label>\n            <input type=\"text\"\n                   class=\"search-input\"\n                   [attr.id]=\"tableId\"\n                   [attr.data-testid]=\"testId + '-filter-input'\"\n                   [placeholder]=\"placeholder | translate\"\n                   [ngModel]=\"filter\"\n                   (ngModelChange)=\"setFilter($event)\"/>\n        </div>\n        <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n            <ng-container toggle-content\n                          [ngTemplateOutlet]=\"headerTemplate\"\n                          [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n            <ul>\n                <ng-container *ngFor=\"let column of cols\">\n                    <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n                        <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                      [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                    </li>\n                </ng-container>\n            </ul>\n        </dropdown-box>\n        <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n            <label>\n                {{ 'label.items.before' | translate }}\n            </label>\n            <dropdown-box>\n                <ng-container toggle-content>\n                    {{ itemsPerPage }}\n                </ng-container>\n                <ul>\n                    <ng-container *ngFor=\"let count of showItems\">\n                        <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n                            {{ count }}\n                        </li>\n                    </ng-container>\n                </ul>\n            </dropdown-box>\n            <label>\n                {{ 'label.items.after' | translate }}\n            </label>\n        </div>\n        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\n    <div class=\"table-content-row\"\n         #pagination=\"pagination\"\n         [pagination]=\"loadData\"\n         [page]=\"page\"\n         [itemsPerPage]=\"itemsPerPage\"\n         [updateTime]=\"updateTime\">\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n        <div class=\"table-responsive\">\n            <ng-template #defaultWrapperTemplate>\n                <table class=\"table table-striped\">\n                    <thead>\n                    <tr>\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </th>\n                    </tr>\n                    <tr *ngIf=\"hasQuery\">\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n                            <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n                                <ng-container *ngSwitchCase=\"'enum'\">\n                                    <ng-template #optionItem let-option=\"option\">\n                                        {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n                                    </ng-template>\n                                    <dropdown-box componentClass=\"filter-box\"\n                                                  [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n                                        <ng-container toggle-content>\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n                                            {{ realColumns[column].title | translate }}\n                                        </span>\n                                            <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n                                                  *ngFor=\"let option of query[column] | values; let ix = index\">\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                        </span>\n                                        </ng-container>\n                                        <ul>\n                                            <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n                                                (click)=\"setQueryValue(column, option)\"\n                                                *ngFor=\"let option of realColumns[column].enum\">\n                                                <a [ngClass]=\"'toggle-link-' + column\">\n                                                    <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n                                                    <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                                  [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                                </a>\n                                            </li>\n                                        </ul>\n                                    </dropdown-box>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'checkbox'\">\n                                    <input type=\"checkbox\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <input class=\"search-input\"\n                                           type=\"text\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                            </ng-container>\n                        </th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <ng-container *paginationItem=\"let context\"\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\n                                  [context]=\"context\"\n                                  [additionalContext]=\"this\"></ng-container>\n                    </tbody>\n                </table>\n            </ng-template>\n\n            <div class=\"table-wrapper\">\n                <ng-content select=\"[table-top]\"></ng-content>\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                              [context]=\"this\"></ng-container>\n                <ng-content select=\"[table-bottom]\"></ng-content>\n            </div>\n        </div>\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "attachTo", "placement", "crossAxis", "alignment", "autoAlignment", "allowedPlacements", "componentClass"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: "dataLoader", data: "data", selected: "selected", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", filterLabel: "filterLabel", placeholder: "placeholder", showItems: "showItems", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr #elem\n        [draggable]=\"!!dragStartFn\"\n        [ngClass]=\"{active: selected === context.item}\"\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\n        (dragleave)=\"onDragLeave($event, elem)\"\n        (drop)=\"onDrop($event, elem, context.item)\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <ng-template #emptyCol>\n        <span>-</span>\n    </ng-template>\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n           (click)=\"setSorting(column, toggle)\">\n            <span>{{ realColumns[column].title | translate }}</span>\n        </a>\n    </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        @if (showFilter) {\n            <div class=\"table-input-wrap table-search-filter\">\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n                    {{ filterLabel | translate }}\n                </label>\n                <input type=\"text\"\n                       class=\"search-input\"\n                       [attr.id]=\"tableId\"\n                       [attr.data-testid]=\"testId + '-filter-input'\"\n                       [placeholder]=\"placeholder | translate\"\n                       [ngModel]=\"filter\"\n                       (ngModelChange)=\"setFilter($event)\"/>\n            </div>\n        }\n        @if (sortable) {\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n                <ng-container toggle-content\n                              [ngTemplateOutlet]=\"headerTemplate\"\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n                <ul>\n                    <ng-container *ngFor=\"let column of cols\">\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </li>\n                    </ng-container>\n                </ul>\n            </dropdown-box>\n        }\n        @if (showItems) {\n            <div class=\"table-input-wrap table-items-count\">\n                <label>\n                    {{ 'label.items.before' | translate }}\n                </label>\n                <dropdown-box>\n                    <ng-container toggle-content>\n                        {{ itemsPerPage }}\n                    </ng-container>\n                    <ul>\n                        <ng-container *ngFor=\"let count of showItems\">\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n                                {{ count }}\n                            </li>\n                        </ng-container>\n                    </ul>\n                </dropdown-box>\n                <label>\n                    {{ 'label.items.after' | translate }}\n                </label>\n            </div>\n        }\n        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\n    <div class=\"table-content-row\"\n         #pagination=\"pagination\"\n         [pagination]=\"loadData\"\n         [page]=\"page\"\n         [itemsPerPage]=\"itemsPerPage\"\n         [updateTime]=\"updateTime\">\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n        <div class=\"table-responsive\">\n            <ng-template #defaultWrapperTemplate>\n                <table class=\"table table-striped\">\n                    <thead>\n                    <tr>\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </th>\n                    </tr>\n                    <tr *ngIf=\"hasQuery\">\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n                            <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n                                <ng-container *ngSwitchCase=\"'enum'\">\n                                    <ng-template #optionItem let-option=\"option\">\n                                        {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n                                    </ng-template>\n                                    <dropdown-box componentClass=\"filter-box\"\n                                                  [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n                                        <ng-container toggle-content>\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n                                            {{ realColumns[column].title | translate }}\n                                        </span>\n                                            <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n                                                  *ngFor=\"let option of query[column] | values; let ix = index\">\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                        </span>\n                                        </ng-container>\n                                        <ul>\n                                            <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n                                                (click)=\"setQueryValue(column, option)\"\n                                                *ngFor=\"let option of realColumns[column].enum\">\n                                                <a [ngClass]=\"'toggle-link-' + column\">\n                                                    <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n                                                    <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                                  [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                                </a>\n                                            </li>\n                                        </ul>\n                                    </dropdown-box>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'checkbox'\">\n                                    <input type=\"checkbox\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <input class=\"search-input\"\n                                           type=\"text\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                            </ng-container>\n                        </th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <ng-container *paginationItem=\"let context\"\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\n                                  [context]=\"context\"\n                                  [additionalContext]=\"this\"></ng-container>\n                    </tbody>\n                </table>\n            </ng-template>\n\n            <div class=\"table-wrapper\">\n                <ng-content select=\"[table-top]\"></ng-content>\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                              [context]=\"this\"></ng-container>\n                <ng-content select=\"[table-bottom]\"></ng-content>\n            </div>\n        </div>\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "attachTo", "placement", "crossAxis", "alignment", "autoAlignment", "allowedPlacements", "componentClass"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr #elem\n        [draggable]=\"!!dragStartFn\"\n        [ngClass]=\"{active: selected === context.item}\"\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\n        (dragleave)=\"onDragLeave($event, elem)\"\n        (drop)=\"onDrop($event, elem, context.item)\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <ng-template #emptyCol>\n        <span>-</span>\n    </ng-template>\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n           (click)=\"setSorting(column, toggle)\">\n            <span>{{ realColumns[column].title | translate }}</span>\n        </a>\n    </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        <div class=\"table-input-wrap table-search-filter\" *ngIf=\"showFilter\">\n            <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n                {{ filterLabel | translate }}\n            </label>\n            <input type=\"text\"\n                   class=\"search-input\"\n                   [attr.id]=\"tableId\"\n                   [attr.data-testid]=\"testId + '-filter-input'\"\n                   [placeholder]=\"placeholder | translate\"\n                   [ngModel]=\"filter\"\n                   (ngModelChange)=\"setFilter($event)\"/>\n        </div>\n        <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n            <ng-container toggle-content\n                          [ngTemplateOutlet]=\"headerTemplate\"\n                          [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n            <ul>\n                <ng-container *ngFor=\"let column of cols\">\n                    <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n                        <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                      [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                    </li>\n                </ng-container>\n            </ul>\n        </dropdown-box>\n        <div class=\"table-input-wrap table-items-count\" *ngIf=\"showItems\">\n            <label>\n                {{ 'label.items.before' | translate }}\n            </label>\n            <dropdown-box>\n                <ng-container toggle-content>\n                    {{ itemsPerPage }}\n                </ng-container>\n                <ul>\n                    <ng-container *ngFor=\"let count of showItems\">\n                        <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n                            {{ count }}\n                        </li>\n                    </ng-container>\n                </ul>\n            </dropdown-box>\n            <label>\n                {{ 'label.items.after' | translate }}\n            </label>\n        </div>\n        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\n    <div class=\"table-content-row\"\n         #pagination=\"pagination\"\n         [pagination]=\"loadData\"\n         [page]=\"page\"\n         [itemsPerPage]=\"itemsPerPage\"\n         [updateTime]=\"updateTime\">\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n        <div class=\"table-responsive\">\n            <ng-template #defaultWrapperTemplate>\n                <table class=\"table table-striped\">\n                    <thead>\n                    <tr>\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </th>\n                    </tr>\n                    <tr *ngIf=\"hasQuery\">\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n                            <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n                                <ng-container *ngSwitchCase=\"'enum'\">\n                                    <ng-template #optionItem let-option=\"option\">\n                                        {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n                                    </ng-template>\n                                    <dropdown-box componentClass=\"filter-box\"\n                                                  [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n                                        <ng-container toggle-content>\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n                                            {{ realColumns[column].title | translate }}\n                                        </span>\n                                            <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n                                                  *ngFor=\"let option of query[column] | values; let ix = index\">\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                        </span>\n                                        </ng-container>\n                                        <ul>\n                                            <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n                                                (click)=\"setQueryValue(column, option)\"\n                                                *ngFor=\"let option of realColumns[column].enum\">\n                                                <a [ngClass]=\"'toggle-link-' + column\">\n                                                    <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n                                                    <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                                  [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                                </a>\n                                            </li>\n                                        </ul>\n                                    </dropdown-box>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'checkbox'\">\n                                    <input type=\"checkbox\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <input class=\"search-input\"\n                                           type=\"text\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                            </ng-container>\n                        </th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <ng-container *paginationItem=\"let context\"\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\n                                  [context]=\"context\"\n                                  [additionalContext]=\"this\"></ng-container>\n                    </tbody>\n                </table>\n            </ng-template>\n\n            <div class=\"table-wrapper\">\n                <ng-content select=\"[table-top]\"></ng-content>\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                              [context]=\"this\"></ng-container>\n                <ng-content select=\"[table-bottom]\"></ng-content>\n            </div>\n        </div>\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\n    <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\n        <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\n    </ng-template>\n    <ng-template #pureTemplate>\n        <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\n    </ng-template>\n    <td [ngClass]=\"'column-' + column\"\n        [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\"\n        *ngIf=\"!template || !template.pure; else pureTemplate\">\n        <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\n                      [context]=\"context\"></ng-container>\n    </td>\n</ng-template>\n\n<ng-template #columnsTemplate let-context>\n    <ng-container *ngFor=\"let column of cols\"\n                  [ngxTemplateOutlet]=\"columnTemplate\"\n                  [context]=\"context\"\n                  [additionalContext]=\"{\n                            template: templates[column],\n                            column: column\n                          }\"></ng-container>\n</ng-template>\n\n<ng-template #defaultRowTemplate let-context>\n    <tr #elem\n        [draggable]=\"!!dragStartFn\"\n        [ngClass]=\"{active: selected === context.item}\"\n        (dragstart)=\"onDragStart($event, elem, context.item)\"\n        (dragenter)=\"onDragEnter($event, elem, context.item)\"\n        (dragleave)=\"onDragLeave($event, elem)\"\n        (drop)=\"onDrop($event, elem, context.item)\">\n        <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\n    </tr>\n</ng-template>\n\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\n    <ng-template #defaultCol>\n        <span>{{ realColumns[column].title | translate }}</span>\n    </ng-template>\n    <ng-template #emptyCol>\n        <span>-</span>\n    </ng-template>\n    <ng-container *ngIf=\"realColumns[column]; else emptyCol\">\n        <a *ngIf=\"realColumns[column].sort; else defaultCol\"\n           [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\n           (click)=\"setSorting(column, toggle)\">\n            <span>{{ realColumns[column].title | translate }}</span>\n        </a>\n    </ng-container>\n</ng-template>\n\n<div class=\"dynamic-table\">\n    <div class=\"table-features-row\">\n        <ng-content select=\"[table-features-before]\"></ng-content>\n        @if (showFilter) {\n            <div class=\"table-input-wrap table-search-filter\">\n                <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\n                    {{ filterLabel | translate }}\n                </label>\n                <input type=\"text\"\n                       class=\"search-input\"\n                       [attr.id]=\"tableId\"\n                       [attr.data-testid]=\"testId + '-filter-input'\"\n                       [placeholder]=\"placeholder | translate\"\n                       [ngModel]=\"filter\"\n                       (ngModelChange)=\"setFilter($event)\"/>\n            </div>\n        }\n        @if (sortable) {\n            <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\n                <ng-container toggle-content\n                              [ngTemplateOutlet]=\"headerTemplate\"\n                              [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\n                <ul>\n                    <ng-container *ngFor=\"let column of cols\">\n                        <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"realColumns[column].sort\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </li>\n                    </ng-container>\n                </ul>\n            </dropdown-box>\n        }\n        @if (showItems) {\n            <div class=\"table-input-wrap table-items-count\">\n                <label>\n                    {{ 'label.items.before' | translate }}\n                </label>\n                <dropdown-box>\n                    <ng-container toggle-content>\n                        {{ itemsPerPage }}\n                    </ng-container>\n                    <ul>\n                        <ng-container *ngFor=\"let count of showItems\">\n                            <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\n                                {{ count }}\n                            </li>\n                        </ng-container>\n                    </ul>\n                </dropdown-box>\n                <label>\n                    {{ 'label.items.after' | translate }}\n                </label>\n            </div>\n        }\n        <ng-content select=\"[table-features-after]\"></ng-content>\n    </div>\n    <div class=\"table-content-row\"\n         #pagination=\"pagination\"\n         [pagination]=\"loadData\"\n         [page]=\"page\"\n         [itemsPerPage]=\"itemsPerPage\"\n         [updateTime]=\"updateTime\">\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n        <div class=\"table-responsive\">\n            <ng-template #defaultWrapperTemplate>\n                <table class=\"table table-striped\">\n                    <thead>\n                    <tr>\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\n                            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n                                          [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\n                        </th>\n                    </tr>\n                    <tr *ngIf=\"hasQuery\">\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\n                            <ng-container *ngIf=\"realColumns[column].filter\" [ngSwitch]=\"realColumns[column].filterType\">\n                                <ng-container *ngSwitchCase=\"'enum'\">\n                                    <ng-template #optionItem let-option=\"option\">\n                                        {{ (realColumns[column].enumPrefix ? realColumns[column].enumPrefix + '.' + option : option) | translate }}\n                                    </ng-template>\n                                    <dropdown-box componentClass=\"filter-box\"\n                                                  [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\n                                        <ng-container toggle-content>\n                                        <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\n                                            {{ realColumns[column].title | translate }}\n                                        </span>\n                                            <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\n                                                  *ngFor=\"let option of query[column] | values; let ix = index\">\n                                            <ng-container *ngIf=\"ix > 0\">, </ng-container>\n                                            <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                          [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                        </span>\n                                        </ng-container>\n                                        <ul>\n                                            <li [ngClass]=\"[column + '-option', 'option-' + option, option]\"\n                                                (click)=\"setQueryValue(column, option)\"\n                                                *ngFor=\"let option of realColumns[column].enum\">\n                                                <a [ngClass]=\"'toggle-link-' + column\">\n                                                    <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\n                                                    <ng-container [ngTemplateOutlet]=\"optionItem\"\n                                                                  [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\n                                                </a>\n                                            </li>\n                                        </ul>\n                                    </dropdown-box>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'checkbox'\">\n                                    <input type=\"checkbox\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <input class=\"search-input\"\n                                           type=\"text\"\n                                           [attr.data-testid]=\"testId + '-filter-' + column\"\n                                           [placeholder]=\"realColumns[column].title | translate\"\n                                           [ngModel]=\"query[column]\"\n                                           (ngModelChange)=\"setQueryValue(column, $event)\"/>\n                                </ng-container>\n                            </ng-container>\n                        </th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <ng-container *paginationItem=\"let context\"\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\n                                  [context]=\"context\"\n                                  [additionalContext]=\"this\"></ng-container>\n                    </tbody>\n                </table>\n            </ng-template>\n\n            <div class=\"table-wrapper\">\n                <ng-content select=\"[table-top]\"></ng-content>\n                <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\n                              [context]=\"this\"></ng-container>\n                <ng-content select=\"[table-bottom]\"></ng-content>\n            </div>\n        </div>\n        <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\n                         [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\n    </div>\n</div>\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
                 type: Input
             }], data: [{
@@ -7582,6 +7596,14 @@ class InteractiveItemComponent {
     get shapes() {
         return this.mShapes;
     }
+    get hovered() {
+        return this.canvas?.hoveredItem === this;
+    }
+    set hovered(value) {
+        if (!this.canvas)
+            return;
+        this.canvas.hoveredItem = value ? this : null;
+    }
     get x() {
         return this.pos.x;
     }
@@ -7625,7 +7647,6 @@ class InteractiveItemComponent {
         this.active = false;
         this.index = -1;
         this.valid = true;
-        this.cycles = [0];
         this.pos = Point.Zero;
         this.direction = "none";
         this.mShapes = [];
@@ -7640,14 +7661,11 @@ class InteractiveItemComponent {
             return;
         this.calcShapes();
     }
-    calcShapes(cycles) {
+    calcShapes() {
         const ratio = this.canvas.ratio ?? 1;
         const x = this.pos.x * ratio;
-        this.cycles = cycles ?? this.cycles;
-        this.mShapes = this.cycles.map(pan => {
-            const y = this.pos.y * ratio + pan;
-            return this.calcShape(x, y);
-        });
+        const y = this.pos.y * ratio;
+        this.mShapes = this.canvas.cycles.map(pan => this.calcShape(x, y + pan));
     }
     hit(point) {
         for (const shape of this.shapes) {
@@ -7656,7 +7674,7 @@ class InteractiveItemComponent {
         }
         return false;
     }
-    move(dx, dy) {
+    moveBy(dx, dy) {
         if (this.direction === "none")
             return;
         switch (this.direction) {
@@ -7670,7 +7688,6 @@ class InteractiveItemComponent {
                 this.pos = new Point(this.pos.x + dx, this.pos.y + dy);
                 break;
         }
-        const params = this.canvas.params || {};
         this.calcShapes();
         this.valid = this.isValidByParams() && this.canvas.items.every(other => this === other || this.isValidByDistance(other));
         this.validPos = this.valid ? this.pos : this.validPos;
@@ -7686,14 +7703,16 @@ class InteractiveItemComponent {
         return true;
     }
     isValidByDistance(other) {
-        const min = this.getMinDistance(other);
-        const minPixels = isNaN(min) || min <= 0 ? 1 : min * this.canvas.ratio;
+        const minPixels = this.distToPixels(this.getMinDistance(other));
         return !this.shapes.some(shape => {
             return other.shapes.some(os => {
                 return os.minDistance(shape) <= minPixels;
             });
         });
     }
+    distToPixels(value) {
+        return !this.canvas ? 1 : Math.max(1, (isNaN(value) || value < 0 ? 0 : value) * (this.canvas.ratio ?? 1));
+    }
     getMinDistance(other) {
         return !other ? 0 : null;
     }
@@ -7724,19 +7743,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class InteractiveCanvasComponent {
     get items() {
-        return this.itemComponents;
+        return this.$items.value;
     }
     get canvas() {
         return this.canvasElem?.nativeElement;
     }
     get lockedItem() {
-        return this.itemComponents[this.lockedIndex];
+        return this.items[this.lockedIndex];
     }
     get selectedItem() {
-        return this.itemComponents[this.selectedIndex];
+        return this.items[this.selectedIndex];
     }
     get hoveredItem() {
-        return this.itemComponents[this.hoveredIndex];
+        return this.items[this.hoveredIndex];
+    }
+    set hoveredItem(item) {
+        this.hoveredIndex = !item ? -1 : this.items.indexOf(item);
     }
     constructor(renderer, universal, element, rootElement) {
         this.renderer = renderer;
@@ -7751,16 +7773,21 @@ class InteractiveCanvasComponent {
         this.realHeight = 100;
         this.panOffset = 0;
         this.params = {};
+        this.beforeItems = [];
+        this.afterItems = [];
         this.selectedIndexChange = new EventEmitter();
-        this.itemPan = new EventEmitter();
-        this.itemPanEnd = new EventEmitter();
+        this.onRotate = new EventEmitter();
+        this.onItemPan = new EventEmitter();
+        this.onItemPanned = new EventEmitter();
+        this.onPan = new EventEmitter();
+        this.onPanned = new EventEmitter();
+        this.$items = new BehaviorSubject([]);
         this.tempCanvas = this.universal.isServer ? null : document.createElement("canvas");
         this.shouldDraw = !this.universal.isServer;
         this.rotation = 0;
         this.canvasWidth = 0;
         this.canvasHeight = 0;
         this.hoveredIndex = null;
-        this.itemComponents = [];
         this.touched = false;
         this.deltaX = 0;
         this.deltaY = 0;
@@ -7777,6 +7804,9 @@ class InteractiveCanvasComponent {
     }
     ngOnChanges() {
         this.params = this.params || {};
+        this.renderCtx = this.renderCtx || {};
+        this.beforeItems = this.beforeItems || [];
+        this.afterItems = this.afterItems || [];
         this.resize();
     }
     ngAfterViewInit() {
@@ -7817,16 +7847,19 @@ class InteractiveCanvasComponent {
         this.canvasWidth = canvas[axisX];
         this.canvasHeight = canvas[axisY];
         this.fullHeight = this.realHeight * this.ratio;
+        this.viewRatio = Math.round(this.canvasHeight / this.fullHeight * 100) / 100;
         this.fixRotation();
     }
     onTouchStart($event) {
         this.hoveredIndex = this.getIndexUnderPointer($event.touches.item(0));
+        this.lockedIndex = this.hoveredIndex;
         this.touched = true;
     }
     onTouchEnd($event) {
         this.selectItem($event.touches.item(0));
     }
-    onMouseDown() {
+    onMouseDown($event) {
+        this.lockedIndex = this.getIndexUnderPointer($event);
         this.touched = true;
     }
     onMouseUp($event) {
@@ -7842,40 +7875,52 @@ class InteractiveCanvasComponent {
         this.hoveredIndex = null;
         this.updateCursor();
     }
-    onPanStart($event) {
-        this.lockedIndex = this.getIndexUnderPointer($event?.pointers[0]);
+    onPanStart() {
         this.deltaX = 0;
         this.deltaY = 0;
     }
-    onPan($event) {
+    onPanMove($event) {
         const item = this.lockedItem;
         const deltaX = ($event.deltaX - this.deltaX) / this.ratio;
         const deltaY = ($event.deltaY - this.deltaY) / this.ratio;
+        const data = {
+            canvas: this,
+            pointers: $event.pointers,
+            item,
+            deltaX,
+            deltaY
+        };
+        if (this.horizontal) {
+            data.deltaX = -deltaY;
+            data.deltaY = +deltaX;
+        }
         if (item) {
-            const data = this.horizontal
-                ? { pointers: $event.pointers, deltaX: -deltaY, deltaY: +deltaX }
-                : { pointers: $event.pointers, deltaX, deltaY };
-            data.item = item;
-            item.move(data.deltaX, data.deltaY);
-            this.itemPan.emit(data);
+            item.moveBy(data.deltaX, data.deltaY);
+            this.onItemPan.emit(data);
         }
         else if (this.resizeMode == "fill") {
             this.rotation += (this.horizontal ? deltaX : deltaY) / this.realHeight * 360;
             this.fixRotation();
+            this.onPan.emit(data);
         }
         this.deltaX = $event.deltaX;
         this.deltaY = $event.deltaY;
     }
     onPanEnd() {
         const item = this.lockedItem;
+        const data = {
+            canvas: this,
+            pointers: [],
+            deltaX: 0,
+            deltaY: 0,
+            item
+        };
         if (item) {
             item.moveEnd();
-            this.itemPanEnd.emit({
-                pointers: [],
-                deltaX: 0,
-                deltaY: 0,
-                item
-            });
+            this.onItemPanned.emit(data);
+        }
+        else {
+            this.onPanned.emit(data);
         }
         this.lockedIndex = -1;
     }
@@ -7883,16 +7928,19 @@ class InteractiveCanvasComponent {
         if (this.fullHeight <= 0)
             return;
         this.rotation = ((this.rotation + 180) % 360 + 360) % 360 - 180;
+        this.rotation = Math.round(this.rotation * 100) / 100;
         this.basePan = (this.rotation / 360 - 1) * this.fullHeight + this.canvasHeight * this.panOffset;
-        const cycles = this.resizeMode == "fit"
+        this.cycles = this.resizeMode == "fit"
             ? [0] : [this.basePan - this.fullHeight, this.basePan, this.basePan + this.fullHeight];
-        this.itemComponents.forEach(item => {
-            item.calcShapes(cycles);
+        this.items.forEach(item => {
+            item.calcShapes();
         });
+        this.onRotate.emit(this.rotation);
     }
     fixItems() {
-        this.itemComponents = this.itemList.toArray();
-        this.itemComponents.forEach((item, ix) => {
+        const items = this.itemList.toArray();
+        this.$items.next(items);
+        items.forEach((item, ix) => {
             item.canvas = this;
             item.index = ix;
         });
@@ -7919,7 +7967,7 @@ class InteractiveCanvasComponent {
             : new Point(pointer.clientX - canvasRect.left, pointer.clientY - canvasRect.top);
         const length = this.items.length;
         for (let ix = 0; ix < length; ix++) {
-            const item = this.itemComponents[ix];
+            const item = this.items[ix];
             if (item?.hit(point)) {
                 return item.disabled ? null : ix;
             }
@@ -7928,7 +7976,6 @@ class InteractiveCanvasComponent {
     }
     updateCursor() {
         const cursor = this.getCursor();
-        this.renderer.setStyle(this.canvasElem.nativeElement, "cursor", cursor);
         this.renderer.setStyle(this.containerElem.nativeElement, "cursor", cursor);
     }
     getCursor() {
@@ -7994,23 +8041,34 @@ class InteractiveCanvasComponent {
     async draw() {
         const ctx = this.ctx;
         const canvas = ctx.canvas;
+        if (canvas.width < 1 || canvas.height < 1)
+            return;
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.save();
         if (this.horizontal) {
             ctx.rotate(-Math.PI / 2);
             ctx.translate(-this.canvasWidth, 0);
         }
-        await this.beforeItems?.call(this, this);
-        await this.drawItems();
-        await this.afterItems?.call(this, this);
+        try {
+            for (const renderer of this.beforeItems) {
+                await renderer(this, this.renderCtx);
+            }
+            await this.drawItems();
+            for (const renderer of this.afterItems) {
+                await renderer(this, this.renderCtx);
+            }
+        }
+        catch (e) {
+            console.warn(`There was an error rendering the canvas: ${e}`);
+        }
         ctx.restore();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, deps: [{ token: i0.Renderer2 }, { token: UniversalService }, { token: i0.ElementRef }, { token: ROOT_ELEMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { debug: "debug", horizontal: "horizontal", selectedIndex: "selectedIndex", resizeMode: "resizeMode", realWidth: "realWidth", realHeight: "realHeight", panOffset: "panOffset", params: "params", beforeItems: "beforeItems", afterItems: "afterItems" }, outputs: { selectedIndexChange: "selectedIndexChange", itemPan: "itemPan", itemPanEnd: "itemPanEnd" }, host: { listeners: { "window:touchend": "onTouchEnd($event)", "window:mouseup": "onMouseUp($event)" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-wrapper', horizontal ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown()\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPan($event)\"\n     (panstart)=\"onPanStart($event)\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-wrapper{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-wrapper .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { debug: "debug", horizontal: "horizontal", selectedIndex: "selectedIndex", resizeMode: "resizeMode", realWidth: "realWidth", realHeight: "realHeight", panOffset: "panOffset", params: "params", renderCtx: "renderCtx", beforeItems: "beforeItems", afterItems: "afterItems" }, outputs: { selectedIndexChange: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd($event)", "window:mouseup": "onMouseUp($event)" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "interactive-canvas", template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-wrapper', horizontal ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown()\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPan($event)\"\n     (panstart)=\"onPanStart($event)\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-wrapper{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-wrapper .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
+            args: [{ standalone: false, selector: "interactive-canvas", template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: UniversalService }, { type: i0.ElementRef }, { type: HTMLElement, decorators: [{
                     type: Inject,
                     args: [ROOT_ELEMENT]
@@ -8030,15 +8088,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], params: [{
                 type: Input
+            }], renderCtx: [{
+                type: Input
             }], beforeItems: [{
                 type: Input
             }], afterItems: [{
                 type: Input
             }], selectedIndexChange: [{
                 type: Output
-            }], itemPan: [{
+            }], onRotate: [{
+                type: Output
+            }], onItemPan: [{
+                type: Output
+            }], onItemPanned: [{
+                type: Output
+            }], onPan: [{
                 type: Output
-            }], itemPanEnd: [{
+            }], onPanned: [{
                 type: Output
             }], containerElem: [{
                 type: ViewChild,