@magic-xpa/angular 4.1200.0-dev4120.98 → 4.1200.0-ec.131.0

package/fesm2022/magic-xpa-angular.mjs

@@ -1,6 +1,6 @@
 import { isNullOrUndefined, NString, List, isUndefined, StringBuilder, RefParam } from '@magic-xpa/mscorelib';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, Output, Directive, EventEmitter, ViewChild, InjectionToken, Inject, HostListener, Optional, Pipe, forwardRef, NgModule } from '@angular/core';
+import { Injectable, Component, Input, Output, Directive, EventEmitter, HostListener, ViewChild, InjectionToken, Inject, Optional, Pipe, forwardRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DatePipe, CommonModule, formatDate } from '@angular/common';
 import * as i2 from '@angular/router';
@@ -14,11 +14,13 @@ import { MagicProperties, Logger, StrUtil, StorageAttribute, PICInterface, MsgIn
 import { filter, map, debounceTime } from 'rxjs/operators';
 import { Subject, EMPTY, fromEvent } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
+import * as i2$1 from '@angular/cdk/drag-drop';
+import { DragDropModule, CdkDragHandle, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/common/http';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { maskitoTimeOptionsGenerator } from '@maskito/kit';
-import * as i2$1 from '@angular/cdk/platform';
+import * as i2$2 from '@angular/cdk/platform';
 import { MaskitoModule } from '@maskito/angular';
 import { NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 
@@ -317,6 +319,9 @@ class EngineMagicService {
     UploadFileToServer(fileContent, serverFileName) {
         return this.magicBridge.UploadFileToServer(fileContent, serverFileName);
     }
+    async DownloadFileFromServer(serverFileName) {
+        return await this.magicBridge.DownloadFileFromServer(serverFileName);
+    }
     GetFormattedValue(taskId, controlName, value, rowId) {
         return this.magicBridge.GetFormattedValue(taskId, controlName, value, rowId);
     }
@@ -1023,21 +1028,40 @@ const _c0$3 = ["modalheader"];
 const _c1$1 = ["modalForeground"];
 function MagicOverlayContainer_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵelementStart(0, "button", 16);
     i0.ɵɵlistener("click", function MagicOverlayContainer_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
     i0.ɵɵtext(1, "X");
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_div_5_Template(rf, ctx) { if (rf & 1) {
+function MagicOverlayContainer_span_5_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10, 2);
+    i0.ɵɵelementStart(0, "span", 17, 2);
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_5_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "corner")); });
+    i0.ɵɵelementEnd();
+} }
+function MagicOverlayContainer_span_6_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 18, 3);
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_6_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "right")); });
+    i0.ɵɵelementEnd();
+} }
+function MagicOverlayContainer_span_7_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 19, 4);
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_7_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "bottom")); });
+    i0.ɵɵelementEnd();
+} }
+function MagicOverlayContainer_div_8_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20, 5);
     i0.ɵɵtext(2);
-    i0.ɵɵelementStart(3, "button", 11);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_div_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
+    i0.ɵɵelementStart(3, "button", 21);
+    i0.ɵɵlistener("click", function MagicOverlayContainer_div_8_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
     i0.ɵɵtext(4, "X");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("movable", ctx_r2.IsMovable());
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.getText(), " ");
 } }
@@ -1070,10 +1094,17 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      *
      */
     componentRef = null;
+    resizing = false;
+    resizeDirection = null;
+    originalWidth = 0;
+    originalHeight = 0;
+    originalMouseX = 0;
+    originalMouseY = 0;
+    isCenteredToWindow = true;
+    static minAllowedWidth = 30;
+    static minAllowedHeight = 30;
     /**
      *
-     * @param injector
-     * @param componentFactoryResolver
      */
     constructor() {
         super();
@@ -1084,6 +1115,8 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     ngOnInit() {
         this.componentRef = this.modalbodyViewContainerRef.createComponent(this.ModalComp);
         Object.assign(this.componentRef.instance, this.ModalCompParameters);
+        let comp = this.componentRef.instance;
+        this.isCenteredToWindow = comp.IsCenteredToWindow();
     }
     setViewContainerRef(vcRef) {
         this.modalbodyViewContainerRef = vcRef;
@@ -1110,7 +1143,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             let comp = this.componentRef.instance;
             styles['width'] = comp.Width();
             styles['height'] = comp.Height();
-            if (comp.IsCenteredToWindow()) {
+            if (this.isCenteredToWindow) {
                 styles['margin'] = 'auto';
             }
             else {
@@ -1162,6 +1195,93 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         if (comp.ShouldCloseOnBackgroundClick())
             this.OnClose();
     }
+    /**
+     * Checks if the overlay component allows to be resized.
+     * @returns {boolean} True if the overlay is resizable, false otherwise.
+     */
+    IsResizable() {
+        let comp = this.componentRef.instance;
+        return comp.IsResizable();
+    }
+    /**
+     * Checks if the overlay component allows to be moved (dragged).
+     * @returns {boolean} True if the overlay is movable, false otherwise.
+     */
+    IsMovable() {
+        let comp = this.componentRef.instance;
+        return comp.IsMovable();
+    }
+    /**
+     * Initiates the resize process when a mousedown event occurs on a resize handle.
+     * Stores the initial state (dimensions, mouse position) and sets flags.
+     * @param {MouseEvent} event - The mousedown event triggering the resize.
+     * @param {'right' | 'bottom' | 'corner'} direction - Indicates which resize handle was activated.
+     */
+    onResizeStart(event, direction) {
+        this.resizing = true;
+        this.resizeDirection = direction;
+        const element = this.foregroundElementRef.nativeElement;
+        this.originalWidth = element.offsetWidth;
+        this.originalHeight = element.offsetHeight;
+        this.originalMouseX = event.clientX;
+        this.originalMouseY = event.clientY;
+        // Removes auto margin and set left and top style
+        if (this.isCenteredToWindow) {
+            element.style.left = element.offsetLeft + 'px';
+            element.style.top = element.offsetTop + 'px';
+            element.style.margin = '';
+            this.isCenteredToWindow = false;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Handles the resizing logic as the mouse moves across the window.
+     * This listener is active globally on the window during a resize operation via @HostListener.
+     * Calculates and applies the new dimensions to the element based on mouse movement.
+     * @param {MouseEvent} event - The mousemove event passed by the HostListener.
+     */
+    onResize(event) {
+        if (!this.resizing)
+            return;
+        const element = this.foregroundElementRef.nativeElement;
+        const parentElement = element.parentNode;
+        const parentWidth = parentElement.offsetWidth;
+        const parentHeight = parentElement.offsetHeight;
+        const rect = element.getBoundingClientRect();
+        const left = rect.left;
+        const top = rect.top;
+        // When the user extends the overlay window to its edge, it becomes hard to grab the border for resizing.
+        // To improve this, 2px are subtracted from maxAllowedWidth and maxAllowedHeight, making it easier to grab the overlay's border for resizing.
+        const maxAllowedWidth = parentWidth - left - 2;
+        const maxAllowedHeight = parentHeight - top - 2;
+        let dx = (event.clientX - this.originalMouseX);
+        let dy = (event.clientY - this.originalMouseY);
+        if (this.resizeDirection === 'right' || this.resizeDirection === 'corner') {
+            let newWidth = this.originalWidth + dx;
+            if (newWidth > maxAllowedWidth)
+                newWidth = maxAllowedWidth;
+            else if (newWidth < MagicOverlayContainer.minAllowedWidth)
+                newWidth = MagicOverlayContainer.minAllowedWidth;
+            element.style.width = `${newWidth}px`;
+        }
+        if (this.resizeDirection === 'bottom' || this.resizeDirection === 'corner') {
+            let newHeight = this.originalHeight + dy;
+            if (newHeight > maxAllowedHeight)
+                newHeight = maxAllowedHeight;
+            else if (newHeight < MagicOverlayContainer.minAllowedHeight)
+                newHeight = MagicOverlayContainer.minAllowedHeight;
+            element.style.height = `${newHeight}px`;
+        }
+    }
+    /**
+     * Finalizes the resize operation when the mouse button is released anywhere on the window.
+     * Resets the resizing state flags. Triggered globally via @HostListener.
+     */
+    onResizeEnd() {
+        this.resizing = false;
+        this.resizeDirection = null;
+    }
     /** @nocollapse */ static ɵfac = function MagicOverlayContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicOverlayContainer)(); };
     /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicOverlayContainer, selectors: [["app-magic-overlay-container"]], viewQuery: function MagicOverlayContainer_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$3, 5);
@@ -1170,47 +1290,63 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerElementRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.foregroundElementRef = _t.first);
-        } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 4, consts: [["modalForeground", ""], ["modalbody", ""], ["modalheader", ""], [1, "modal-background", 3, "click"], ["tabindex", "-1", "style", "float:right; border: none; background-color: transparent; outline: none; color: white", 3, "click", 4, "ngIf"], [1, "modal-foreground", 3, "ngStyle"], ["class", "modal-header", 4, "ngIf"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "modal-header"], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
+        } }, hostBindings: function MagicOverlayContainer_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("mousemove", function MagicOverlayContainer_mousemove_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow)("mouseup", function MagicOverlayContainer_mouseup_HostBindingHandler() { return ctx.onResizeEnd(); }, false, i0.ɵɵresolveWindow);
+        } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 8, consts: [["modalForeground", ""], ["modalbody", ""], ["dragHandleCorner", ""], ["dragHandleRight", ""], ["dragHandleBottom", ""], ["modalheader", ""], [1, "boundary-line"], [1, "modal-background", 3, "click"], ["tabindex", "-1", "style", "float:right; border: none; background-color: transparent; outline: none; color: white", 3, "click", 4, "ngIf"], ["cdkDragBoundary", ".boundary-line", "cdkDrag", "", 1, "modal-foreground", 3, "ngStyle", "cdkDragDisabled"], ["class", "dragHandle corner", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle right", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle bottom", 3, "mousedown", 4, "ngIf"], ["class", "modal-header", "cdkDragHandle", "", 3, "movable", 4, "ngIf"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "dragHandle", "corner", 3, "mousedown"], [1, "dragHandle", "right", 3, "mousedown"], [1, "dragHandle", "bottom", 3, "mousedown"], ["cdkDragHandle", "", 1, "modal-header"], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div")(1, "div", 3);
+            i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
             i0.ɵɵlistener("click", function MagicOverlayContainer_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnBackgroundClick()); });
-            i0.ɵɵtemplate(2, MagicOverlayContainer_button_2_Template, 2, 0, "button", 4);
+            i0.ɵɵtemplate(2, MagicOverlayContainer_button_2_Template, 2, 0, "button", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 5, 0);
-            i0.ɵɵtemplate(5, MagicOverlayContainer_div_5_Template, 5, 1, "div", 6);
-            i0.ɵɵelementStart(6, "div", 7);
-            i0.ɵɵelement(7, "div", 8, 1);
+            i0.ɵɵelementStart(3, "div", 9, 0);
+            i0.ɵɵtemplate(5, MagicOverlayContainer_span_5_Template, 2, 0, "span", 10)(6, MagicOverlayContainer_span_6_Template, 2, 0, "span", 11)(7, MagicOverlayContainer_span_7_Template, 2, 0, "span", 12)(8, MagicOverlayContainer_div_8_Template, 5, 3, "div", 13);
+            i0.ɵɵelementStart(9, "div", 14);
+            i0.ɵɵelement(10, "div", 15, 1);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", !ctx.getShowTitleBar());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngStyle", ctx.getStyle());
+            i0.ɵɵproperty("ngStyle", ctx.getStyle())("cdkDragDisabled", !ctx.IsMovable());
             i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.getShowTitleBar());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngStyle", ctx.getClientAreaStyles());
-        } }, dependencies: [i1.NgIf, i1.NgStyle, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}"] });
+        } }, dependencies: [i1.NgIf, i1.NgStyle, i2$1.CdkDragHandle, i2$1.CdkDrag, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}.modal-header.movable[_ngcontent-%COMP%]:active{cursor:move}.container[_ngcontent-%COMP%]{position:relative}.dragHandle[_ngcontent-%COMP%]{position:absolute}.dragHandle.corner[_ngcontent-%COMP%]{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.right[_ngcontent-%COMP%]{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom[_ngcontent-%COMP%]{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line[_ngcontent-%COMP%]{width:100%;height:100%;max-width:100%}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainer, [{
         type: Component,
         args: [{ selector: 'app-magic-overlay-container', template: `
-    <div>
+    <div class="boundary-line">
+
       <div class="modal-background" (click)="OnBackgroundClick()">
         <button (click)="OnClose()" tabindex="-1" style="float:right; border: none; background-color: transparent; outline: none; color: white" *ngIf="!getShowTitleBar()">X</button>
       </div>
-      <div #modalForeground class="modal-foreground" [ngStyle]="getStyle()">
-        <div #modalheader class="modal-header" *ngIf="getShowTitleBar()">
+
+      <div #modalForeground class="modal-foreground" [ngStyle]="getStyle()" cdkDragBoundary=".boundary-line" cdkDrag [cdkDragDisabled]="!IsMovable()">
+
+        <span #dragHandleCorner *ngIf="IsResizable()" class="dragHandle corner" (mousedown)="onResizeStart($event, 'corner')"></span>
+        <span #dragHandleRight *ngIf="IsResizable()" class="dragHandle right" (mousedown)="onResizeStart($event, 'right')"></span>
+        <span #dragHandleBottom *ngIf="IsResizable()" class="dragHandle bottom" (mousedown)="onResizeStart($event, 'bottom')"></span>
+
+        <div #modalheader class="modal-header" *ngIf="getShowTitleBar()" cdkDragHandle [class.movable]="IsMovable()">
           {{getText()}}
           <button (click)="OnClose()" style="float:right" tabindex="-1">X</button>
         </div>
+
         <div [ngStyle]="getClientAreaStyles()">
           <div #modalbody magicViewContainerRef>
           </div>
         </div>
       </div>
     </div>
-  `, standalone: false, styles: [".modal-foreground{position:fixed;inset:0;background-color:#fff}.modal-background{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}\n"] }]
+  `, standalone: false, styles: [".modal-foreground{position:fixed;inset:0;background-color:#fff}.modal-background{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}.modal-header.movable:active{cursor:move}.container{position:relative}.dragHandle{position:absolute}.dragHandle.corner{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.right{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line{width:100%;height:100%;max-width:100%}\n"] }]
     }], () => [], { headerElementRef: [{
             type: ViewChild,
             args: ['modalheader', { static: false }]
@@ -1223,8 +1359,14 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             type: Input
         }], onClose: [{
             type: Output
+        }], onResize: [{
+            type: HostListener,
+            args: ['window:mousemove', ['$event']]
+        }], onResizeEnd: [{
+            type: HostListener,
+            args: ['window:mouseup']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src/ui/magic-modal/magic-overlay-container.ts", lineNumber: 41 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src/ui/magic-modal/magic-overlay-container.ts", lineNumber: 50 }); })();
 
 /**
  * Service managing overlay windows
@@ -2220,6 +2362,9 @@ class TaskMagicService {
     UploadFileToServer(fileContent, serverFileName) {
         return this.magic.UploadFileToServer(fileContent, serverFileName);
     }
+    async DownloadFileFromServer(serverFileName) {
+        return await this.magic.DownloadFileFromServer(serverFileName);
+    }
     /**
      * Validates the control value, using the Magic WebClient
      * @param controlName Id of validated control
@@ -3145,6 +3290,9 @@ class AccessorMagicService {
     UploadFileToServer(fileContent, serverFileName) {
         return this.task.UploadFileToServer(fileContent, serverFileName);
     }
+    async DownloadFileFromServer(serverFileName) {
+        return await this.task.DownloadFileFromServer(serverFileName);
+    }
     /**
      * Checks if the control is read-only
      * @param controlId Id of control
@@ -4328,7 +4476,7 @@ class MagicDirective {
     ngOnDestroy() {
         this.subscribeRefreshDom.unsubscribe();
     }
-    /** @nocollapse */ static ɵfac = function MagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$1.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
+    /** @nocollapse */ static ɵfac = function MagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$2.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MagicDirective, selectors: [["", "magic", ""]], inputs: { magic: "magic", eventsOnly: "eventsOnly", pollTime: "pollTime", rowId: "rowId" }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicDirective, [{
@@ -4337,7 +4485,7 @@ class MagicDirective {
                 selector: "[magic]",
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.Platform }, { type: RowMagicDirective, decorators: [{
+    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$2.Platform }, { type: RowMagicDirective, decorators: [{
                 type: Optional
             }] }], { magic: [{
             type: Input,
@@ -4526,7 +4674,7 @@ class NoControlMagicDirective extends MagicDirective {
                 break;
         }
     }
-    /** @nocollapse */ static ɵfac = function NoControlMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NoControlMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$1.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
+    /** @nocollapse */ static ɵfac = function NoControlMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NoControlMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$2.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: NoControlMagicDirective, selectors: [["", "magicnc", ""]], inputs: { magic: [0, "magicnc", "magic"] }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NoControlMagicDirective, [{
@@ -4535,7 +4683,7 @@ class NoControlMagicDirective extends MagicDirective {
                 selector: '[magicnc]',
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.Platform }, { type: RowMagicDirective, decorators: [{
+    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$2.Platform }, { type: RowMagicDirective, decorators: [{
                 type: Optional
             }] }], { magic: [{
             type: Input,
@@ -6436,7 +6584,8 @@ class MagicModule {
             FormsModule,
             ReactiveFormsModule,
             RouterModule,
-            DynamicModule, MaskitoModule] });
+            DynamicModule,
+            DragDropModule, MaskitoModule] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicModule, [{
         type: NgModule,
@@ -6447,7 +6596,10 @@ class MagicModule {
                     FormsModule,
                     ReactiveFormsModule,
                     RouterModule,
-                    DynamicModule],
+                    DynamicModule,
+                    CdkDragHandle,
+                    CdkDrag,
+                    DragDropModule],
                 providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider, provideHttpClient(withInterceptorsFromDi())]
             }]
     }], null, null); })();
@@ -6483,7 +6635,10 @@ class MagicModule {
         FormsModule,
         ReactiveFormsModule,
         RouterModule,
-        DynamicModule], exports: [MagicDirective,
+        DynamicModule,
+        CdkDragHandle,
+        CdkDrag,
+        DragDropModule], exports: [MagicDirective,
         CheckboxMagicDirective,
         CheckboxNoFormControlMagicDirective,
         InputNoFormControlMagicDirective,