slick-components 17.0.80 → 17.0.82

package/fesm2022/slick-components.mjs

@@ -23,7 +23,7 @@ class SlickInitParams {
     }
 }
 class SlickInitService {
-    static { this.version = "17.0.80"; }
+    static { this.version = "17.0.82"; }
     constructor() { }
     static init(initParams) {
         console.info(`Slick Components Version ${SlickInitService.version}`);
@@ -2851,29 +2851,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
         }] });
 
 class SlickDragDropDirective {
-    constructor() {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
         this.itemDropped = new EventEmitter();
         this.dragEntered = new EventEmitter();
         this.dragLeft = new EventEmitter();
+        this.dragCounter = 0;
     }
     onDragOver(event) {
-        event.preventDefault(); // Needed to allow drop
+        event.preventDefault();
     }
     onDragEnter(event) {
         event.preventDefault();
-        this.dragEntered.emit();
+        this.dragCounter++;
+        if (this.dragCounter === 1) {
+            this.renderer.setStyle(this.el.nativeElement, 'background-color', 'rgba(var(--bs-primary-rgb), 0.05)');
+            this.dragEntered.emit();
+        }
     }
     onDragLeave(event) {
-        this.dragLeft.emit();
+        this.dragCounter--;
+        if (this.dragCounter === 0) {
+            this.renderer.removeStyle(this.el.nativeElement, 'background-color');
+            this.dragLeft.emit();
+        }
     }
     onDrop(event) {
         event.preventDefault();
+        this.dragCounter = 0;
+        this.renderer.removeStyle(this.el.nativeElement, 'background-color');
         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
+            return;
         try {
             const item = JSON.parse(slickData);
             this.itemDropped.emit(item);
@@ -2882,7 +2894,7 @@ class SlickDragDropDirective {
             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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickDragDropDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @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: [{
@@ -2890,7 +2902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             args: [{
                     selector: '[slick-drag-drop]'
                 }]
-        }], propDecorators: { itemDropped: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { itemDropped: [{
                 type: Output
             }], dragEntered: [{
                 type: Output
@@ -2911,8 +2923,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             }] } });
 
 class SlickDraggableDirective {
-    constructor(el) {
+    constructor(el, renderer) {
         this.el = el;
+        this.renderer = renderer;
         this.dragStarted = new EventEmitter();
         this.dragEnded = new EventEmitter();
         this.el.nativeElement.draggable = true;
@@ -2920,23 +2933,28 @@ class SlickDraggableDirective {
     onDragStart(event) {
         if (!event.dataTransfer)
             return;
-        // Check if the click started on a drop-list grab handle
-        const target = event.target;
-        if (target.closest('[slick-drop-list-grab]')) {
-            // Ignore dragging if the grab handle was clicked
-            event.preventDefault();
-            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);
+        // Highlight all drop zones (works on any tag)
+        const dropZones = document.querySelectorAll('[slick-drag-drop]');
+        dropZones.forEach(zone => {
+            zone.classList.add('slick-drop-highlight');
+            // Use box-shadow instead of border so it overrides inline styles
+            this.renderer.setStyle(zone, 'box-shadow', '0 0 0 2px rgba(var(--bs-primary-rgb)) inset, 0 0 8px rgba(var(--bs-primary-rgb), 1)');
+        });
     }
     onDragEnd(event) {
         this.el.nativeElement.style.opacity = '1';
         this.dragEnded.emit(this.data);
+        // Remove highlight from all drop zones
+        const dropZones = document.querySelectorAll('[slick-drag-drop]');
+        dropZones.forEach(zone => {
+            zone.classList.remove('slick-drop-highlight');
+            this.renderer.removeStyle(zone, 'box-shadow');
+        });
     }
-    /** @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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickDraggableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], 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: [{
@@ -2944,7 +2962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             args: [{
                     selector: '[slick-draggable]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
             }], dragStarted: [{
                 type: Output