slick-components 17.0.77 → 17.0.79

package/fesm2022/slick-components.mjs

@@ -23,7 +23,7 @@ class SlickInitParams {
     }
 }
 class SlickInitService {
-    static { this.version = "17.0.77"; }
+    static { this.version = "17.0.79"; }
     constructor() { }
     static init(initParams) {
         console.info(`Slick Components Version ${SlickInitService.version}`);
@@ -2851,26 +2851,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
         }] });
 
 class SlickDragDropDirective {
+    constructor() {
+        this.itemDropped = new EventEmitter();
+        this.dragEntered = new EventEmitter();
+        this.dragLeft = new EventEmitter();
+    }
+    onDragOver(event) {
+        event.preventDefault(); // Needed to allow drop
+    }
+    onDragEnter(event) {
+        event.preventDefault();
+        this.dragEntered.emit();
+    }
+    onDragLeave(event) {
+        this.dragLeft.emit();
+    }
+    onDrop(event) {
+        event.preventDefault();
+        if (!event.dataTransfer)
+            return;
+        // Only accept slick-draggable items
+        const slickData = event.dataTransfer.getData('application/x-slick-draggable');
+        if (!slickData)
+            return; // Not from slick-draggable, ignore
+        try {
+            const item = JSON.parse(slickData);
+            this.itemDropped.emit(item);
+        }
+        catch (e) {
+            console.warn('Dropped data not valid JSON', e);
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: SlickDragDropDirective, selector: "[slick-drag-drop]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: SlickDragDropDirective, selector: "[slick-drag-drop]", outputs: { itemDropped: "itemDropped", dragEntered: "dragEntered", dragLeft: "dragLeft" }, host: { listeners: { "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickDragDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slick-drag-drop]'
                 }]
-        }] });
+        }], propDecorators: { itemDropped: [{
+                type: Output
+            }], dragEntered: [{
+                type: Output
+            }], dragLeft: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragEnter: [{
+                type: HostListener,
+                args: ['dragenter', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
 
 class SlickDraggableDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickDraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: SlickDraggableDirective, selector: "[slick-draggable]", ngImport: i0 }); }
+    constructor(el) {
+        this.el = el;
+        this.dragStarted = new EventEmitter();
+        this.dragEnded = new EventEmitter();
+        this.el.nativeElement.draggable = true;
+    }
+    onDragStart(event) {
+        if (!event.dataTransfer)
+            return;
+        // Use a custom MIME type for slick-draggable items
+        event.dataTransfer.setData('application/x-slick-draggable', JSON.stringify(this.data));
+        this.el.nativeElement.style.opacity = '0.5';
+        this.dragStarted.emit(this.data);
+    }
+    onDragEnd(event) {
+        this.el.nativeElement.style.opacity = '1';
+        this.dragEnded.emit(this.data);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickDraggableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: SlickDraggableDirective, selector: "[slick-draggable]", inputs: { data: "data" }, outputs: { dragStarted: "dragStarted", dragEnded: "dragEnded" }, host: { listeners: { "dragstart": "onDragStart($event)", "dragend": "onDragEnd($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickDraggableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slick-draggable]'
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
+                type: Input
+            }], dragStarted: [{
+                type: Output
+            }], dragEnded: [{
+                type: Output
+            }], onDragStart: [{
+                type: HostListener,
+                args: ['dragstart', ['$event']]
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['dragend', ['$event']]
+            }] } });
 
 class SlickDragDropModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3529,6 +3608,12 @@ class SlickDropListDirective {
         }
     }
     async mouseDown(e, target = null) {
+        const clickedElement = e.target;
+        const formControl = SlickUtilsService.findParent(clickedElement, 'input') ||
+            SlickUtilsService.findParent(clickedElement, 'textarea') ||
+            SlickUtilsService.findParent(clickedElement, 'select');
+        if (formControl)
+            return;
         this.isAdding = false;
         this.isMoving = false;
         if (e.button !== 0 || !e || !e.target)