@stemy/ngx-utils 19.0.8 → 19.0.10

package/fesm2022/stemy-ngx-utils.mjs

@@ -3760,6 +3760,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     args: [NgZone]
                 }] }] });
 
+class DragDropHandler {
+    static get(el) {
+        if (DragDropHandler.handlers?.has(el)) {
+            return DragDropHandler.handlers.get(el);
+        }
+        return new DragDropHandler(el);
+    }
+    static add(el, inst) {
+        DragDropHandler.handlers = DragDropHandler.handlers || new Map();
+        DragDropHandler.handlers.set(el, inst);
+    }
+    constructor(el) {
+        this.el = el;
+        this.first = false;
+        this.second = false;
+        this.listeners = [];
+        this.onDragStart = ev => {
+            this.fireEvent("dragstart", ev);
+            this.effectAllowed = ev.dataTransfer.effectAllowed;
+            this.dropEffect = ev.dataTransfer.dropEffect;
+        };
+        this.onDragEnter = ev => {
+            ev.preventDefault();
+            if (this.first) {
+                this.second = true;
+            }
+            else {
+                this.first = true;
+                this.fireEvent("dragenter", ev);
+                this.effectAllowed = ev.dataTransfer.effectAllowed;
+                this.dropEffect = ev.dataTransfer.dropEffect;
+            }
+        };
+        this.onDragOver = ev => {
+            ev.preventDefault();
+            ev.dataTransfer.effectAllowed = this.effectAllowed;
+            ev.dataTransfer.dropEffect = this.dropEffect;
+        };
+        this.onDragLeave = ev => {
+            if (this.second) {
+                this.second = false;
+            }
+            else if (this.first) {
+                this.first = false;
+            }
+            if (!this.first && !this.second) {
+                this.fireEvent("dragleave", ev);
+            }
+        };
+        this.onDrop = ev => {
+            ev.preventDefault();
+            this.first = false;
+            this.second = false;
+            this.fireEvent("drop", ev);
+        };
+        this.el.addEventListener("dragstart", this.onDragStart);
+        this.el.addEventListener("dragenter", this.onDragEnter);
+        this.el.addEventListener("dragover", this.onDragOver);
+        this.el.addEventListener("dragleave", this.onDragLeave);
+        this.el.addEventListener("drop", this.onDrop);
+        DragDropHandler.add(this.el, this);
+    }
+    addListener(key, value) {
+        this.listeners = [
+            ...this.listeners,
+            { key, value }
+        ];
+    }
+    removeListener(type, listener) {
+        this.listeners = this.listeners.filter(entry => entry.key !== type || entry.value !== listener);
+        if (this.listeners.length > 0)
+            return;
+        this.destroy();
+    }
+    fireEvent(type, ev) {
+        this.listeners.forEach(entry => {
+            if (entry.key !== type)
+                return;
+            entry.value(ev);
+        });
+    }
+    destroy() {
+        this.el.removeEventListener("dragstart", this.onDragStart);
+        this.el.removeEventListener("dragenter", this.onDragEnter);
+        this.el.removeEventListener("dragover", this.onDragOver);
+        this.el.removeEventListener("dragleave", this.onDragLeave);
+        this.el.removeEventListener("drop", this.onDrop);
+        DragDropHandler.handlers?.delete(this.el);
+    }
+}
+
+function emptyRemove$2() {
+}
+class DragDropEventPlugin extends _DomEventsPlugin {
+    static { this.EVENT_NAMES = ["dragstart", "dragenter", "dragleave", "drop"]; }
+    constructor(doc, universal) {
+        super(doc);
+        this.universal = universal;
+    }
+    supports(eventName) {
+        return DragDropEventPlugin.EVENT_NAMES.includes(eventName);
+    }
+    addEventListener(element, eventName, handler) {
+        const zone = this.manager.getZone();
+        return zone.runOutsideAngular(() => {
+            if (this.universal.isServer)
+                return emptyRemove$2;
+            const callback = (e) => {
+                zone.run(() => handler(e));
+            };
+            const dd = DragDropHandler.get(element);
+            dd.addListener(eventName, callback);
+            return () => dd.removeListener(eventName, callback);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DragDropEventPlugin, deps: [{ token: DOCUMENT }, { token: UniversalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DragDropEventPlugin }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DragDropEventPlugin, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: UniversalService }] });
+
 function emptyRemove$1() {
 }
 function isWindow(el) {
@@ -5448,6 +5573,50 @@ class DynamicTableComponent {
             return;
         this.refresh();
     }
+    onDragStart(ev, elem, item) {
+        if (!elem || !item || !ObjectUtils.isFunction(this.dragStartFn) || !this.dragStartFn({ ev, elem, item })) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            return;
+        }
+        ev.dataTransfer.setData("itemData", JSON.stringify(item));
+        ev.dataTransfer.setData(item.type, "type");
+        ev.dataTransfer.setData(item.id, "id");
+    }
+    onDragEnter(ev, elem, item) {
+        if (!elem || !item || !ObjectUtils.isFunction(this.dragEnterFn) || !this.dragEnterFn({ ev, elem, item })) {
+            ev.dataTransfer.effectAllowed = "none";
+            ev.dataTransfer.dropEffect = "none";
+            return;
+        }
+        ev.dataTransfer.effectAllowed = "move";
+        ev.dataTransfer.dropEffect = "move";
+        elem.classList.add("drop-allowed");
+    }
+    onDragLeave(ev, elem) {
+        if (!ev)
+            return;
+        elem.classList.remove("drop-allowed");
+    }
+    onDrop(ev, elem, item) {
+        if (!ev)
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (!elem || !item || !ObjectUtils.isFunction(this.dropFn)) {
+            return false;
+        }
+        elem.classList.remove("drop-allowed");
+        const source = JSON.parse(ev.dataTransfer.getData("itemData"));
+        if (!this.dropFn({ ev, elem, item, source })) {
+            return;
+        }
+        elem.classList.add("dropped");
+        elem.onanimationend = () => {
+            elem.classList.remove("dropped");
+        };
+        setTimeout(elem.onanimationend, 10000);
+    }
     refresh(time) {
         if (!this.pagination)
             return;
@@ -5508,11 +5677,11 @@ class DynamicTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { label: "label", placeholder: "placeholder", dataLoader: "dataLoader", data: "data", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "defaultFilterTemplate", first: true, predicate: ["defaultFilterTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n    <ng-template #defaultFilterTemplate let-table>\r\n        <div class=\"table-search\" *ngIf=\"table.showFilter\">\r\n            <label *ngIf=\"label\" [attr.for]=\"tableId\">{{ label | translate }}</label>\r\n            <input type=\"text\"\r\n                   class=\"form-control\"\r\n                   [attr.id]=\"tableId\"\r\n                   [attr.data-testid]=\"testId + '-filter-input'\"\r\n                   [placeholder]=\"placeholder | translate\"\r\n                   [ngModel]=\"table.filter\"\r\n                   (ngModelChange)=\"table.setFilter($event)\"/>\r\n        </div>\r\n    </ng-template>\r\n    <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    <div class=\"table-responsive\">\r\n        <ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n            <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n                <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n            </ng-template>\r\n            <ng-template #pureTemplate>\r\n                <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n            </ng-template>\r\n            <td [ngClass]=\"'column-' + column\"\r\n                [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n                <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n            </td>\r\n        </ng-template>\r\n\r\n        <ng-template #columnsTemplate let-context>\r\n            <ng-container *ngFor=\"let column of cols\"\r\n                          [ngxTemplateOutlet]=\"columnTemplate\"\r\n                          [context]=\"context\"\r\n                          [additionalContext]=\"{\r\n                            template: templates[column],\r\n                            column: column\r\n                          }\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultRowTemplate let-context>\r\n            <tr>\r\n                <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultWrapperTemplate>\r\n            <table class=\"table table-striped\">\r\n                <thead>\r\n                    <tr>\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'column-' + column\">\r\n                            <ng-template #defaultCol>\r\n                                <span>{{ realColumns[column].title | translate }}</span>\r\n                            </ng-template>\r\n                            <a *ngIf=\"realColumns[column].sort; else defaultCol\" (click)=\"setOrder(column)\">\r\n                                <span>{{ realColumns[column].title | translate }}</span>\r\n                                <i *ngIf=\"orderBy == column\"\r\n                                   [icon]=\"orderDescending ? 'sort-desc' : 'sort-asc'\"\r\n                                   [ngClass]=\"orderBy == column ? (orderDescending ? 'sort-desc': 'sort-asc') : ''\"></i>\r\n                            </a>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n                            <ng-container *ngIf=\"realColumns[column].filter\">\r\n                                <input class=\"form-control\"\r\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                       [type]=\"realColumns[column].filterType || 'text'\"\r\n                                       [placeholder]=\"realColumns[column].title | translate\"\r\n                                       [ngModel]=\"query[column]\"\r\n                                       (ngModelChange)=\"updateQuery(column, $event)\"/>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <ng-container *paginationItem=\"let context\"\r\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                  [context]=\"context\"\r\n                                  [additionalContext]=\"this\"></ng-container>\r\n                </tbody>\r\n            </table>\r\n        </ng-template>\r\n\r\n        <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                      [context]=\"this\"></ng-container>\r\n    </div>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[icon]", inputs: ["icon", "activeIcon", "active"], outputs: ["activeChange"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { label: "label", placeholder: "placeholder", dataLoader: "dataLoader", data: "data", page: "page", urlParam: "urlParam", parallelData: "parallelData", columns: "columns", showFilter: "showFilter", itemsPerPage: "itemsPerPage", updateTime: "updateTime", filterTime: "filterTime", maxPages: "maxPages", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks", orderBy: "orderBy", orderDescending: "orderDescending", testId: "testId", titlePrefix: "titlePrefix", dragStartFn: "dragStartFn", dragEnterFn: "dragEnterFn", dropFn: "dropFn" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }, { propertyName: "filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, static: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "defaultFilterTemplate", first: true, predicate: ["defaultFilterTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n    <ng-template #defaultFilterTemplate let-table>\r\n        <div class=\"table-search\" *ngIf=\"table.showFilter\">\r\n            <label *ngIf=\"label\" [attr.for]=\"tableId\">{{ label | translate }}</label>\r\n            <input type=\"text\"\r\n                   class=\"form-control\"\r\n                   [attr.id]=\"tableId\"\r\n                   [attr.data-testid]=\"testId + '-filter-input'\"\r\n                   [placeholder]=\"placeholder | translate\"\r\n                   [ngModel]=\"table.filter\"\r\n                   (ngModelChange)=\"table.setFilter($event)\"/>\r\n        </div>\r\n    </ng-template>\r\n    <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    <div class=\"table-responsive\">\r\n        <ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n            <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n                <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n            </ng-template>\r\n            <ng-template #pureTemplate>\r\n                <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n            </ng-template>\r\n            <td [ngClass]=\"'column-' + column\"\r\n                [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n                <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n            </td>\r\n        </ng-template>\r\n\r\n        <ng-template #columnsTemplate let-context>\r\n            <ng-container *ngFor=\"let column of cols\"\r\n                          [ngxTemplateOutlet]=\"columnTemplate\"\r\n                          [context]=\"context\"\r\n                          [additionalContext]=\"{\r\n                            template: templates[column],\r\n                            column: column\r\n                          }\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultRowTemplate let-context>\r\n            <tr draggable=\"true\"\r\n                #elem\r\n                (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n                (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n                (dragleave)=\"onDragLeave($event, elem)\"\r\n                (drop)=\"onDrop($event, elem, context.item)\">\r\n                <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultWrapperTemplate>\r\n            <table class=\"table table-striped\">\r\n                <thead>\r\n                    <tr>\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'column-' + column\">\r\n                            <ng-template #defaultCol>\r\n                                <span>{{ realColumns[column].title | translate }}</span>\r\n                            </ng-template>\r\n                            <a *ngIf=\"realColumns[column].sort; else defaultCol\" (click)=\"setOrder(column)\">\r\n                                <span>{{ realColumns[column].title | translate }}</span>\r\n                                <i *ngIf=\"orderBy == column\"\r\n                                   [icon]=\"orderDescending ? 'sort-desc' : 'sort-asc'\"\r\n                                   [ngClass]=\"orderBy == column ? (orderDescending ? 'sort-desc': 'sort-asc') : ''\"></i>\r\n                            </a>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n                            <ng-container *ngIf=\"realColumns[column].filter\">\r\n                                <input class=\"form-control\"\r\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                       [type]=\"realColumns[column].filterType || 'text'\"\r\n                                       [placeholder]=\"realColumns[column].title | translate\"\r\n                                       [ngModel]=\"query[column]\"\r\n                                       (ngModelChange)=\"updateQuery(column, $event)\"/>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <ng-container *paginationItem=\"let context\"\r\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                  [context]=\"context\"\r\n                                  [additionalContext]=\"this\"></ng-container>\r\n                </tbody>\r\n            </table>\r\n        </ng-template>\r\n\r\n        <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                      [context]=\"this\"></ng-container>\r\n    </div>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[icon]", inputs: ["icon", "activeIcon", "active"], outputs: ["activeChange"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-table", template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n    <ng-template #defaultFilterTemplate let-table>\r\n        <div class=\"table-search\" *ngIf=\"table.showFilter\">\r\n            <label *ngIf=\"label\" [attr.for]=\"tableId\">{{ label | translate }}</label>\r\n            <input type=\"text\"\r\n                   class=\"form-control\"\r\n                   [attr.id]=\"tableId\"\r\n                   [attr.data-testid]=\"testId + '-filter-input'\"\r\n                   [placeholder]=\"placeholder | translate\"\r\n                   [ngModel]=\"table.filter\"\r\n                   (ngModelChange)=\"table.setFilter($event)\"/>\r\n        </div>\r\n    </ng-template>\r\n    <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    <div class=\"table-responsive\">\r\n        <ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n            <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n                <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n            </ng-template>\r\n            <ng-template #pureTemplate>\r\n                <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n            </ng-template>\r\n            <td [ngClass]=\"'column-' + column\"\r\n                [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n                <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n            </td>\r\n        </ng-template>\r\n\r\n        <ng-template #columnsTemplate let-context>\r\n            <ng-container *ngFor=\"let column of cols\"\r\n                          [ngxTemplateOutlet]=\"columnTemplate\"\r\n                          [context]=\"context\"\r\n                          [additionalContext]=\"{\r\n                            template: templates[column],\r\n                            column: column\r\n                          }\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultRowTemplate let-context>\r\n            <tr>\r\n                <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultWrapperTemplate>\r\n            <table class=\"table table-striped\">\r\n                <thead>\r\n                    <tr>\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'column-' + column\">\r\n                            <ng-template #defaultCol>\r\n                                <span>{{ realColumns[column].title | translate }}</span>\r\n                            </ng-template>\r\n                            <a *ngIf=\"realColumns[column].sort; else defaultCol\" (click)=\"setOrder(column)\">\r\n                                <span>{{ realColumns[column].title | translate }}</span>\r\n                                <i *ngIf=\"orderBy == column\"\r\n                                   [icon]=\"orderDescending ? 'sort-desc' : 'sort-asc'\"\r\n                                   [ngClass]=\"orderBy == column ? (orderDescending ? 'sort-desc': 'sort-asc') : ''\"></i>\r\n                            </a>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n                            <ng-container *ngIf=\"realColumns[column].filter\">\r\n                                <input class=\"form-control\"\r\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                       [type]=\"realColumns[column].filterType || 'text'\"\r\n                                       [placeholder]=\"realColumns[column].title | translate\"\r\n                                       [ngModel]=\"query[column]\"\r\n                                       (ngModelChange)=\"updateQuery(column, $event)\"/>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <ng-container *paginationItem=\"let context\"\r\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                  [context]=\"context\"\r\n                                  [additionalContext]=\"this\"></ng-container>\r\n                </tbody>\r\n            </table>\r\n        </ng-template>\r\n\r\n        <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                      [context]=\"this\"></ng-container>\r\n    </div>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n" }]
+            args: [{ standalone: false, selector: "dynamic-table", template: "<div class=\"dynamic-table\" #pagination=\"pagination\" [pagination]=\"loadData\" [page]=\"page\" [itemsPerPage]=\"itemsPerPage\" [updateTime]=\"updateTime\">\r\n    <ng-template #defaultFilterTemplate let-table>\r\n        <div class=\"table-search\" *ngIf=\"table.showFilter\">\r\n            <label *ngIf=\"label\" [attr.for]=\"tableId\">{{ label | translate }}</label>\r\n            <input type=\"text\"\r\n                   class=\"form-control\"\r\n                   [attr.id]=\"tableId\"\r\n                   [attr.data-testid]=\"testId + '-filter-input'\"\r\n                   [placeholder]=\"placeholder | translate\"\r\n                   [ngModel]=\"table.filter\"\r\n                   (ngModelChange)=\"table.setFilter($event)\"/>\r\n        </div>\r\n    </ng-template>\r\n    <ng-container [ngxTemplateOutlet]=\"filterTemplate || defaultFilterTemplate\" [context]=\"this\"></ng-container>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n    <div class=\"table-responsive\">\r\n        <ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n            <ng-template #defaultTemplate let-column=\"column\" let-item=\"item\">\r\n                <span>{{ item[column] == undefined || item[column] == null ? '-' : item[column] }}</span>\r\n            </ng-template>\r\n            <ng-template #pureTemplate>\r\n                <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n            </ng-template>\r\n            <td [ngClass]=\"'column-' + column\"\r\n                [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\" *ngIf=\"!template || !template.pure; else pureTemplate\">\r\n                <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\" [context]=\"context\"></ng-container>\r\n            </td>\r\n        </ng-template>\r\n\r\n        <ng-template #columnsTemplate let-context>\r\n            <ng-container *ngFor=\"let column of cols\"\r\n                          [ngxTemplateOutlet]=\"columnTemplate\"\r\n                          [context]=\"context\"\r\n                          [additionalContext]=\"{\r\n                            template: templates[column],\r\n                            column: column\r\n                          }\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultRowTemplate let-context>\r\n            <tr draggable=\"true\"\r\n                #elem\r\n                (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n                (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n                (dragleave)=\"onDragLeave($event, elem)\"\r\n                (drop)=\"onDrop($event, elem, context.item)\">\r\n                <ng-container [ngxTemplateOutlet]=\"columnsTemplate\" [context]=\"context\"></ng-container>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <ng-template #defaultWrapperTemplate>\r\n            <table class=\"table table-striped\">\r\n                <thead>\r\n                    <tr>\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"'column-' + column\">\r\n                            <ng-template #defaultCol>\r\n                                <span>{{ realColumns[column].title | translate }}</span>\r\n                            </ng-template>\r\n                            <a *ngIf=\"realColumns[column].sort; else defaultCol\" (click)=\"setOrder(column)\">\r\n                                <span>{{ realColumns[column].title | translate }}</span>\r\n                                <i *ngIf=\"orderBy == column\"\r\n                                   [icon]=\"orderDescending ? 'sort-desc' : 'sort-asc'\"\r\n                                   [ngClass]=\"orderBy == column ? (orderDescending ? 'sort-desc': 'sort-asc') : ''\"></i>\r\n                            </a>\r\n                        </th>\r\n                    </tr>\r\n                    <tr *ngIf=\"hasQuery\">\r\n                        <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n                            <ng-container *ngIf=\"realColumns[column].filter\">\r\n                                <input class=\"form-control\"\r\n                                       [attr.data-testid]=\"testId + '-filter-' + column\"\r\n                                       [type]=\"realColumns[column].filterType || 'text'\"\r\n                                       [placeholder]=\"realColumns[column].title | translate\"\r\n                                       [ngModel]=\"query[column]\"\r\n                                       (ngModelChange)=\"updateQuery(column, $event)\"/>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <ng-container *paginationItem=\"let context\"\r\n                                  [ngxTemplateOutlet]=\"rowTemplate\"\r\n                                  [context]=\"context\"\r\n                                  [additionalContext]=\"this\"></ng-container>\r\n                </tbody>\r\n            </table>\r\n        </ng-template>\r\n\r\n        <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n                      [context]=\"this\"></ng-container>\r\n    </div>\r\n    <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\" [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -5551,6 +5720,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 type: Input
             }], titlePrefix: [{
                 type: Input
+            }], dragStartFn: [{
+                type: Input
+            }], dragEnterFn: [{
+                type: Input
+            }], dropFn: [{
+                type: Input
             }], rowTemplate: [{
                 type: ContentChild,
                 args: ["rowTemplate", { static: true }]
@@ -5662,6 +5837,11 @@ const providers = [
     WasmService,
     DeviceDetectorService,
     GlobalTemplateService,
+    {
+        provide: EVENT_MANAGER_PLUGINS,
+        useClass: DragDropEventPlugin,
+        multi: true
+    },
     {
         provide: EVENT_MANAGER_PLUGINS,
         useClass: ResizeEventPlugin,
@@ -5995,5 +6175,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChunkPipe, Circle, ConfigService, DIALOG_SERVICE, DateUtils, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FileSystemEntry, FileUtils, FilterPipe, FindPipe, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HttpPromise, ICON_SERVICE, IConfiguration, IconDirective, IconService, Initializer, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, impatientPromise, provideWithOptions };
+export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AuthGuard, BASE_CONFIG, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, CONFIG_SERVICE, CanvasColor, CanvasUtils, ChunkPipe, Circle, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FileSystemEntry, FileUtils, FilterPipe, FindPipe, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HttpPromise, ICON_SERVICE, IConfiguration, IconDirective, IconService, Initializer, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, impatientPromise, provideWithOptions };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map