matcha-components 20.263.0 → 20.265.0

package/fesm2022/matcha-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, HostListener, Output, HostBinding, Input, Optional, Inject, Component, ViewChild, forwardRef, ContentChildren, ViewEncapsulation, inject, Directive, NgModule, ElementRef, Renderer2, ChangeDetectionStrategy, ContentChild, Injectable, Pipe, createComponent, TemplateRef, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, EventEmitter, HostListener, Output, HostBinding, Input, Optional, Inject, Component, ViewChild, forwardRef, ContentChildren, ViewEncapsulation, inject, Directive, NgModule, ElementRef, Renderer2, ChangeDetectionStrategy, ContentChild, Injectable, Pipe, createComponent, TemplateRef, signal, PLATFORM_ID } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -3611,6 +3611,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
         }] });
 
 class MatchaCheckboxComponent {
+    get colorAttr() {
+        return this._color;
+    }
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color = value || 'accent';
+    }
     get indeterminate() {
         return this._indeterminate;
     }
@@ -3623,6 +3632,9 @@ class MatchaCheckboxComponent {
             this.cdr.markForCheck();
         }
     }
+    get disabledAttr() {
+        return this._disabled ? '' : null;
+    }
     get disabled() {
         return this._disabled;
     }
@@ -3661,7 +3673,7 @@ class MatchaCheckboxComponent {
     }
     constructor(cdr) {
         this.cdr = cdr;
-        this.color = 'accent';
+        this._color = 'accent';
         this._indeterminate = false;
         this._disabled = false;
         this._checked = false;
@@ -3689,7 +3701,7 @@ class MatchaCheckboxComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaCheckboxComponent, isStandalone: false, selector: "matcha-checkbox", inputs: { color: "color", indeterminate: "indeterminate", disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange", change: "change" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaCheckboxComponent, isStandalone: false, selector: "matcha-checkbox", inputs: { color: "color", indeterminate: "indeterminate", disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange", change: "change" }, host: { properties: { "attr.color": "this.colorAttr", "attr.disabled": "this.disabledAttr" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaCheckboxComponent),
@@ -3709,10 +3721,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
+            }], colorAttr: [{
+                type: HostBinding,
+                args: ['attr.color']
             }], color: [{
                 type: Input
             }], indeterminate: [{
                 type: Input
+            }], disabledAttr: [{
+                type: HostBinding,
+                args: ['attr.disabled']
             }], disabled: [{
                 type: Input
             }], checked: [{
@@ -8452,11 +8470,11 @@ class MatchaTabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { selectedIndex: "selectedIndex", activeTabIndex: "activeTabIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column gap-outside w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-disabled]=\"tab.disabled || null\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [attr.disabled]=\"tab.disabled || null\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              {{tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer'}} w-100-p min-w-md-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active && !tab.disabled ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" [color]=\"tab.disabled ? 'grey' : 'accent'\" size=\"md\"></matcha-icon>\n      <span class=\"{{tab.disabled ? 'color-grey' : 'color-fg'}} fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], animations: [...createAnimations] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { selectedIndex: "selectedIndex", activeTabIndex: "activeTabIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column gap-outside w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-disabled]=\"tab.disabled || null\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [attr.disabled]=\"tab.disabled || null\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              {{tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer'}} w-100-p min-w-md-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active && !tab.disabled ? 0 : -1}}\">\n      <matcha-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\" [color]=\"tab.disabled ? 'grey' : 'accent'\" size=\"md\"></matcha-icon>\n      <span class=\"{{tab.disabled ? 'color-grey' : 'color-fg'}} fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], animations: [...createAnimations] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-tabs', animations: [...createAnimations], standalone: false, template: "<div class=\"flex-column gap-outside w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-disabled]=\"tab.disabled || null\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [attr.disabled]=\"tab.disabled || null\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              {{tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer'}} w-100-p min-w-md-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active && !tab.disabled ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" [color]=\"tab.disabled ? 'grey' : 'accent'\" size=\"md\"></matcha-icon>\n      <span class=\"{{tab.disabled ? 'color-grey' : 'color-fg'}} fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'matcha-tabs', animations: [...createAnimations], standalone: false, template: "<div class=\"flex-column gap-outside w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-disabled]=\"tab.disabled || null\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [attr.disabled]=\"tab.disabled || null\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              {{tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer'}} w-100-p min-w-md-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active && !tab.disabled ? 0 : -1}}\">\n      <matcha-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\" [color]=\"tab.disabled ? 'grey' : 'accent'\" size=\"md\"></matcha-icon>\n      <span class=\"{{tab.disabled ? 'color-grey' : 'color-fg'}} fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [MatchaTabItemComponent]
@@ -9561,9 +9579,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
         }] });
 
 class MatchaDropListService {
-    constructor() {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        // --- Legacy drop zone registry (MatchaDropListComponent instances keyed by host element) ---
         this.dropZones = new Map();
-    }
+        // --- Named drop zone registry (MatchaDropZoneDirective instances keyed by id) ---
+        this.namedDropZones = new Map();
+        // --- Public drag state signals ---
+        this.currentDragData = signal(null, ...(ngDevMode ? [{ debugName: "currentDragData" }] : []));
+        this.currentDragType = signal('', ...(ngDevMode ? [{ debugName: "currentDragType" }] : []));
+        // --- Internal drag engine state ---
+        this.activeDrag = null;
+        this.ghostElement = null;
+        this.dragOffsetX = 0;
+        this.dragOffsetY = 0;
+        this.lastTargetContainer = null;
+        this.globalListeners = [];
+        this.hoverTimer = null;
+        this.lastHoveredItemIndex = -1;
+        this.hasMoved = false;
+        this.startX = 0;
+        this.startY = 0;
+    }
+    // --- Drop zone registry (used by MatchaDropListComponent) ---
     registerDropZone(element, component) {
         this.dropZones.set(element, component);
     }
@@ -9582,329 +9620,248 @@ class MatchaDropListService {
     getAllDropZones() {
         return Array.from(this.dropZones.values());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class MatchaDragDirective {
-    get dragItemClass() {
-        return true;
-    }
-    get dragDisabledClass() {
-        return this.matchaDragDisabled;
-    }
-    constructor(elementRef, renderer, ngZone, dropListService) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.dropListService = dropListService;
-        this.matchaDragDisabled = false;
-        this.listeners = [];
-        this.isDragging = false;
-        // Touch/Mobile support
-        this.touchStartPosition = { x: 0, y: 0 };
-        this.touchCurrentPosition = { x: 0, y: 0 };
-        this.touchDragThreshold = 10; // pixels
-        this.isTouchDragging = false;
-    }
-    ngOnInit() {
-        this.setupDragEvents();
-    }
-    ngOnDestroy() {
-        this.cleanupListeners();
-        this.cleanupTouchDrag();
-    }
-    setDropList(dropList) {
-        this.dropList = dropList;
-    }
-    setDragHandle(handle) {
-        this.dragHandle = handle;
-        this.setupDragEvents(); // Re-setup when handle is set
-    }
-    setupDragEvents() {
-        if (this.matchaDragDisabled)
-            return;
-        this.cleanupListeners();
-        const element = this.elementRef.nativeElement;
-        const dragSource = this.dragHandle || element;
-        // Configurar draggable para desktop
-        if (this.dragHandle) {
-            this.renderer.setAttribute(element, 'draggable', 'false');
-            this.renderer.setAttribute(this.dragHandle, 'draggable', 'true');
-        }
-        else {
-            this.renderer.setAttribute(element, 'draggable', 'true');
-        }
-        // Configurar touch-action para mobile
-        this.renderer.setStyle(dragSource, 'touch-action', 'none');
-        this.renderer.setStyle(dragSource, 'user-select', 'none');
-        this.renderer.setStyle(dragSource, '-webkit-user-select', 'none');
+    // --- Named drop zone registry (used by MatchaDropZoneDirective) ---
+    registerNamedDropZone(id, directive) {
+        this.namedDropZones.set(id, directive);
+    }
+    unregisterNamedDropZone(id) {
+        this.namedDropZones.delete(id);
+    }
+    // --- Drag engine ---
+    beginDrag(dragDirective, nativeEl, event, groupEl) {
+        if (this.activeDrag)
+            return;
+        const clientX = this.getClientX(event);
+        const clientY = this.getClientY(event);
+        const rect = nativeEl.getBoundingClientRect();
+        const sourceContainer = this.findDropZone(nativeEl);
+        this.activeDrag = { directive: dragDirective, sourceContainer };
+        this.currentDragData.set(dragDirective.matchaDragData);
+        this.dragOffsetX = clientX - rect.left;
+        this.dragOffsetY = clientY - rect.top;
+        this.startX = clientX;
+        this.startY = clientY;
+        this.hasMoved = false;
+        this.currentDragType.set(dragDirective.matchaDragType ?? '');
+        sourceContainer?.onPointerDragStart(dragDirective);
+        this.createGhost(nativeEl, clientX, clientY, rect, groupEl);
+        this.setupGlobalListeners();
+    }
+    createGhost(el, clientX, clientY, rect, groupEl) {
+        const ghost = document.createElement('div');
+        ghost.style.position = 'fixed';
+        ghost.style.left = '0';
+        ghost.style.top = '0';
+        ghost.style.width = `${rect.width}px`;
+        ghost.style.pointerEvents = 'none';
+        ghost.style.opacity = '0.85';
+        ghost.style.zIndex = '9999';
+        ghost.style.boxShadow = '0 8px 24px rgba(0,0,0,0.18)';
+        ghost.style.borderRadius = '4px';
+        ghost.style.transition = 'none';
+        ghost.style.transform = `translate(${clientX - this.dragOffsetX}px,${clientY - this.dragOffsetY}px)`;
+        ghost.classList.add('matcha-drag-ghost');
+        const cardClone = el.cloneNode(true);
+        cardClone.style.transition = 'none';
+        cardClone.style.transform = '';
+        cardClone.style.opacity = '';
+        ghost.appendChild(cardClone);
+        if (groupEl) {
+            const groupClone = groupEl.cloneNode(true);
+            groupClone.style.transition = 'none';
+            ghost.appendChild(groupClone);
+        }
+        document.body.appendChild(ghost);
+        this.ghostElement = ghost;
+    }
+    setupGlobalListeners() {
         this.ngZone.runOutsideAngular(() => {
-            // Desktop drag events
-            this.listeners.push(this.renderer.listen(dragSource, 'dragstart', (event) => {
-                if (this.matchaDragDisabled)
-                    return;
-                this.onDragStart(event);
-            }));
-            this.listeners.push(this.renderer.listen(dragSource, 'dragend', () => {
-                this.onDragEnd();
-            }));
-            this.listeners.push(this.renderer.listen(element, 'dragover', (event) => {
-                event.preventDefault();
-            }));
-            // Mobile/Touch events
-            this.listeners.push(this.renderer.listen(dragSource, 'touchstart', (event) => {
-                if (this.matchaDragDisabled)
-                    return;
-                this.onTouchStart(event);
-            }));
-            this.listeners.push(this.renderer.listen(dragSource, 'touchmove', (event) => {
-                if (this.matchaDragDisabled)
-                    return;
-                this.onTouchMove(event);
-            }));
-            this.listeners.push(this.renderer.listen(dragSource, 'touchend', (event) => {
-                if (this.matchaDragDisabled)
-                    return;
-                this.onTouchEnd(event);
-            }));
-            this.listeners.push(this.renderer.listen(dragSource, 'touchcancel', (event) => {
-                if (this.matchaDragDisabled)
-                    return;
-                this.onTouchCancel(event);
-            }));
+            const onMove = (e) => this.onPointerMove(e);
+            const onUp = (e) => this.onPointerUp(e);
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+            document.addEventListener('touchmove', onMove, { passive: false });
+            document.addEventListener('touchend', onUp);
+            document.addEventListener('touchcancel', onUp);
+            this.globalListeners = [
+                () => document.removeEventListener('mousemove', onMove),
+                () => document.removeEventListener('mouseup', onUp),
+                () => document.removeEventListener('touchmove', onMove),
+                () => document.removeEventListener('touchend', onUp),
+                () => document.removeEventListener('touchcancel', onUp),
+            ];
         });
     }
-    // Desktop drag methods
-    onDragStart(event) {
-        this.isDragging = true;
-        this.renderer.addClass(this.elementRef.nativeElement, 'matcha-drag-dragging');
-        const dataTransfer = event.dataTransfer;
-        if (dataTransfer) {
-            dataTransfer.effectAllowed = 'move';
-            dataTransfer.setData('text/plain', '');
-            this.createDragImage(dataTransfer, this.elementRef.nativeElement, event);
-        }
-        if (this.dropList) {
-            this.ngZone.run(() => {
-                this.dropList.onDragStart(this, event);
-            });
-        }
-    }
-    onDragEnd() {
-        this.isDragging = false;
-        this.renderer.removeClass(this.elementRef.nativeElement, 'matcha-drag-dragging');
-        if (this.dropList) {
-            this.ngZone.run(() => {
-                this.dropList.onDragEnd();
-            });
-        }
-    }
-    // Touch/Mobile drag methods
-    onTouchStart(event) {
-        const touch = event.touches[0];
-        if (!touch)
+    onPointerMove(event) {
+        if (!this.activeDrag || !this.ghostElement)
             return;
-        this.touchIdentifier = touch.identifier;
-        this.touchStartPosition = { x: touch.clientX, y: touch.clientY };
-        this.touchCurrentPosition = { x: touch.clientX, y: touch.clientY };
-        this.isTouchDragging = false;
-        // Prevenir scroll enquanto toca
-        event.preventDefault();
-    }
-    onTouchMove(event) {
-        if (this.touchIdentifier === undefined)
-            return;
-        const touch = this.findTouch(event.touches, this.touchIdentifier);
-        if (!touch)
-            return;
-        this.touchCurrentPosition = { x: touch.clientX, y: touch.clientY };
-        const deltaX = Math.abs(touch.clientX - this.touchStartPosition.x);
-        const deltaY = Math.abs(touch.clientY - this.touchStartPosition.y);
-        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-        if (!this.isTouchDragging && distance > this.touchDragThreshold) {
-            // Iniciar drag
-            this.isTouchDragging = true;
-            this.startTouchDrag(touch);
-        }
-        if (this.isTouchDragging) {
-            this.updateTouchDrag(touch);
+        if (event.type === 'touchmove')
             event.preventDefault();
-        }
-    }
-    onTouchEnd(event) {
-        if (this.touchIdentifier === undefined)
-            return;
-        const touch = this.findTouch(event.changedTouches, this.touchIdentifier);
-        if (!touch)
-            return;
-        if (this.isTouchDragging) {
-            this.endTouchDrag(touch);
-        }
-        this.resetTouchState();
-    }
-    onTouchCancel(event) {
-        if (this.isTouchDragging) {
-            this.cancelTouchDrag();
-        }
-        this.resetTouchState();
+        const clientX = this.getClientX(event);
+        const clientY = this.getClientY(event);
+        // Move ghost clone to follow the pointer
+        this.ghostElement.style.transform = `translate(${clientX - this.dragOffsetX}px,${clientY - this.dragOffsetY}px)`;
+        const dx = clientX - this.startX;
+        const dy = clientY - this.startY;
+        if (!this.hasMoved && dx * dx + dy * dy < 25)
+            return; // 5px threshold
+        this.hasMoved = true;
+        // Temporarily hide ghost to hit-test elements beneath it
+        this.ghostElement.style.visibility = 'hidden';
+        const elements = document.elementsFromPoint(clientX, clientY);
+        this.ghostElement.style.visibility = '';
+        const target = this.findContainerFromElements(elements);
+        if (this.lastTargetContainer && this.lastTargetContainer !== target) {
+            this.ngZone.run(() => this.lastTargetContainer.clearPlaceholder());
+            if (this.hoverTimer) {
+                clearTimeout(this.hoverTimer);
+                this.hoverTimer = null;
+            }
+            this.lastHoveredItemIndex = -1;
+        }
+        if (target) {
+            this.ngZone.run(() => target.updatePlaceholder(clientX, clientY, this.activeDrag.directive, this.activeDrag.sourceContainer));
+            if (target.matchaDropListTreeMode) {
+                this.handleHoverExpand(clientX, clientY, target);
+            }
+        }
+        this.lastTargetContainer = target;
+    }
+    onPointerUp(event) {
+        if (!this.activeDrag)
+            return;
+        if (!this.hasMoved) {
+            this.ngZone.run(() => this.cleanup());
+            return;
+        }
+        const clientX = this.getClientX(event);
+        const clientY = this.getClientY(event);
+        if (this.ghostElement)
+            this.ghostElement.style.visibility = 'hidden';
+        const elements = document.elementsFromPoint(clientX, clientY);
+        const target = this.findContainerFromElements(elements);
+        // Check if drop is in a named drop zone (reparenting)
+        let namedDropTarget = null;
+        if (target?.matchaDropListTreeMode) {
+            namedDropTarget = this.findNamedDropZoneAt(clientX, clientY, elements);
+        }
+        // When the resolved drop list is nested inside the named zone, prefer finalizeDrop:
+        // it uses calculatedDropIndex for correct insertion and handles both reorder and cross-container transfer.
+        const targetIsInsideNamedZone = namedDropTarget && target &&
+            namedDropTarget.elementRef.nativeElement.contains(target.elementRef.nativeElement);
+        this.ngZone.run(() => {
+            if (namedDropTarget && !targetIsInsideNamedZone) {
+                namedDropTarget.handleDrop(this.activeDrag.directive.matchaDragData, clientX, clientY);
+            }
+            else if (target) {
+                target.finalizeDrop(this.activeDrag.directive, this.activeDrag.sourceContainer);
+            }
+            this.cleanup();
+        });
     }
-    startTouchDrag(touch) {
-        this.isDragging = true;
-        this.renderer.addClass(this.elementRef.nativeElement, 'matcha-drag-dragging');
-        // Criar preview visual do drag
-        this.createTouchDragPreview();
-        if (this.dropList) {
-            this.ngZone.run(() => {
-                // Simular DragEvent para compatibilidade
-                const fakeEvent = this.createFakeDragEvent('dragstart', touch);
-                this.dropList.onDragStart(this, fakeEvent);
-            });
+    findContainerFromElements(elements) {
+        for (const el of elements) {
+            const container = this.dropZones.get(el);
+            if (container)
+                return container;
         }
+        return null;
     }
-    updateTouchDrag(touch) {
-        if (this.dragPreview) {
-            // Atualizar posição do preview
-            this.renderer.setStyle(this.dragPreview, 'left', `${touch.clientX - 50}px`);
-            this.renderer.setStyle(this.dragPreview, 'top', `${touch.clientY - 25}px`);
-        }
-        // Verificar drop zones
-        this.checkDropZones(touch);
-    }
-    endTouchDrag(touch) {
-        // Encontrar elemento sob o touch
-        const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
-        const dropZone = this.findDropZone(elementBelow);
-        if (dropZone && this.dropList) {
-            this.ngZone.run(() => {
-                // Simular drop event
-                const fakeEvent = this.createFakeDragEvent('drop', touch);
-                dropZone.handleTouchDrop(fakeEvent, this);
-            });
-        }
-        this.cleanupTouchDrag();
-    }
-    cancelTouchDrag() {
-        this.cleanupTouchDrag();
-    }
-    createTouchDragPreview() {
-        const element = this.elementRef.nativeElement;
-        const rect = element.getBoundingClientRect();
-        // Criar clone do elemento para preview
-        this.dragPreview = element.cloneNode(true);
-        // Estilizar preview
-        this.renderer.setStyle(this.dragPreview, 'position', 'fixed');
-        this.renderer.setStyle(this.dragPreview, 'z-index', '9999');
-        this.renderer.setStyle(this.dragPreview, 'pointer-events', 'none');
-        this.renderer.setStyle(this.dragPreview, 'width', `${rect.width}px`);
-        this.renderer.setStyle(this.dragPreview, 'height', `${rect.height}px`);
-        this.renderer.setStyle(this.dragPreview, 'opacity', '0.8');
-        this.renderer.setStyle(this.dragPreview, 'transform', 'rotate(5deg)');
-        this.renderer.setStyle(this.dragPreview, 'box-shadow', '0 8px 25px rgba(0,0,0,0.3)');
-        // Adicionar ao DOM
-        document.body.appendChild(this.dragPreview);
-    }
-    checkDropZones(touch) {
-        const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
-        const dropZone = this.findDropZone(elementBelow);
-        // Notificar drop zones sobre o drag over
-        if (dropZone && this.dropList) {
-            this.ngZone.run(() => {
-                const fakeEvent = this.createFakeDragEvent('dragover', touch);
-                dropZone.handleTouchDragOver(fakeEvent);
-            });
+    findNamedDropZoneAt(clientX, clientY, elements) {
+        let bestDirective = null;
+        let bestIdx = Infinity;
+        for (const [, directive] of this.namedDropZones) {
+            const el = directive.elementRef.nativeElement;
+            const idx = elements.indexOf(el);
+            if (idx >= 0 && idx < bestIdx) {
+                bestIdx = idx;
+                bestDirective = directive;
+            }
+        }
+        if (!bestDirective) {
+            let smallestArea = Infinity;
+            for (const [, directive] of this.namedDropZones) {
+                const el = directive.elementRef.nativeElement;
+                const rect = el.getBoundingClientRect();
+                if (clientX >= rect.left && clientX <= rect.right &&
+                    clientY >= rect.top && clientY <= rect.bottom) {
+                    const area = rect.width * rect.height;
+                    if (area < smallestArea) {
+                        smallestArea = area;
+                        bestDirective = directive;
+                    }
+                }
+            }
         }
+        return bestDirective;
     }
-    findDropZone(element) {
-        return this.dropListService.findDropZone(element);
-    }
-    findAngularComponent(element) {
-        // Método mantido para compatibilidade, mas agora usa o serviço
-        return this.dropListService.findDropZone(element);
-    }
-    createFakeDragEvent(type, touch) {
-        return {
-            type,
-            clientX: touch.clientX,
-            clientY: touch.clientY,
-            preventDefault: () => { },
-            dataTransfer: {
-                effectAllowed: 'move',
-                dropEffect: 'move',
-                setData: () => { },
-                getData: () => '',
-                setDragImage: () => { }
+    handleHoverExpand(clientX, clientY, container) {
+        const hoveredIndex = container.getItemIndexAt(clientX, clientY);
+        if (hoveredIndex !== this.lastHoveredItemIndex) {
+            this.lastHoveredItemIndex = hoveredIndex;
+            if (this.hoverTimer) {
+                clearTimeout(this.hoverTimer);
+                this.hoverTimer = null;
             }
-        };
-    }
-    findTouch(touches, identifier) {
-        for (let i = 0; i < touches.length; i++) {
-            if (touches[i].identifier === identifier) {
-                return touches[i];
+            if (hoveredIndex >= 0) {
+                const delay = container.matchaDropListHoverExpandDelay ?? 500;
+                this.hoverTimer = setTimeout(() => {
+                    this.ngZone.run(() => container.emitHoverExpand(hoveredIndex));
+                }, delay);
             }
         }
-        return null;
     }
-    resetTouchState() {
-        this.touchIdentifier = undefined;
-        this.isTouchDragging = false;
-        this.isDragging = false;
-        this.renderer.removeClass(this.elementRef.nativeElement, 'matcha-drag-dragging');
-        if (this.dropList) {
-            this.ngZone.run(() => {
-                this.dropList.onDragEnd();
-            });
-        }
-    }
-    cleanupTouchDrag() {
-        if (this.dragPreview) {
-            document.body.removeChild(this.dragPreview);
-            this.dragPreview = undefined;
+    cleanup() {
+        if (this.ghostElement) {
+            document.body.removeChild(this.ghostElement);
+            this.ghostElement = null;
         }
-    }
-    createDragImage(dataTransfer, element, event) {
-        try {
-            const rect = element.getBoundingClientRect();
-            const offsetX = event.clientX - rect.left;
-            const offsetY = event.clientY - rect.top;
-            dataTransfer.setDragImage(element, offsetX, offsetY);
+        this.activeDrag?.sourceContainer?.onPointerDragEnd();
+        if (this.lastTargetContainer) {
+            this.lastTargetContainer.clearPlaceholder();
         }
-        catch (error) {
-            console.warn('Erro ao configurar drag image:', error);
+        this.globalListeners.forEach(fn => fn());
+        this.globalListeners = [];
+        this.activeDrag = null;
+        this.lastTargetContainer = null;
+        this.currentDragData.set(null);
+        this.currentDragType.set('');
+        if (this.hoverTimer) {
+            clearTimeout(this.hoverTimer);
+            this.hoverTimer = null;
         }
+        this.lastHoveredItemIndex = -1;
+        this.hasMoved = false;
     }
-    cleanupListeners() {
-        this.listeners.forEach(cleanup => cleanup());
-        this.listeners = [];
+    getClientX(event) {
+        if (event instanceof MouseEvent)
+            return event.clientX;
+        const touch = event.touches[0] ?? event.changedTouches[0];
+        return touch?.clientX ?? 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDragDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: MatchaDropListService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: MatchaDragDirective, isStandalone: false, selector: "[matchaDrag]", inputs: { matchaDragData: "matchaDragData", matchaDragDisabled: "matchaDragDisabled" }, host: { properties: { "class.matcha-drag-item": "this.dragItemClass", "class.matcha-drag-disabled": "this.dragDisabledClass" } }, ngImport: i0 }); }
+    getClientY(event) {
+        if (event instanceof MouseEvent)
+            return event.clientY;
+        const touch = event.touches[0] ?? event.changedTouches[0];
+        return touch?.clientY ?? 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDragDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: '[matchaDrag]',
-                    standalone: false
+                    providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: MatchaDropListService }], propDecorators: { matchaDragData: [{
-                type: Input
-            }], matchaDragDisabled: [{
-                type: Input
-            }], dragItemClass: [{
-                type: HostBinding,
-                args: ['class.matcha-drag-item']
-            }], dragDisabledClass: [{
-                type: HostBinding,
-                args: ['class.matcha-drag-disabled']
-            }] } });
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
 
 class MatchaDropListComponent {
+    get directDragItems() {
+        return this._directDragItems.sort((a, b) => {
+            const pos = a.elementRef.nativeElement.compareDocumentPosition(b.elementRef.nativeElement);
+            return (pos & Node.DOCUMENT_POSITION_FOLLOWING) ? -1 : 1;
+        });
+    }
     get dropListClass() {
         return true;
     }
@@ -9916,171 +9873,224 @@ class MatchaDropListComponent {
         this.matchaDropListDisabled = false;
         this.matchaDropListConnectedTo = [];
         this.matchaDropListSortingDisabled = false;
+        this.matchaDropListAcceptTypes = [];
+        // Tree mode inputs
+        this.matchaDropListTreeMode = false;
+        this.matchaDropListHoverExpandDelay = 500;
         this.matchaDropListDropped = new EventEmitter();
-        this.dragStartIndex = -1;
-        // Estado visual
+        this.matchaDropListHoverExpand = new EventEmitter();
+        // Items registered via self-registration in MatchaDragDirective.ngOnInit().
+        // Sorted by DOM order on every read so translateY indices stay correct after reorders.
+        this._directDragItems = [];
+        // Visual state
         this.isReceivingDrag = false;
         this.showDropIndicator = false;
         this.dropIndicatorPosition = 0;
-        this.canAcceptDrop = true; // Controla se pode aceitar o drop atual
-        this.calculatedDropIndex = 0; // Armazenar o índice calculado durante o dragover
+        this.canAcceptDrop = true;
+        this.calculatedDropIndex = 0;
+        this.dragStartIndex = -1;
     }
     ngOnInit() {
-        this.setupDropZone();
-        // Registrar este drop zone no serviço
         this.dropListService.registerDropZone(this.elementRef.nativeElement, this);
     }
-    ngAfterContentInit() {
-        // Configurar referência do drop list para cada item drag
-        this.dragItems.forEach(dragItem => {
-            dragItem.setDropList(this);
-        });
-        // Monitorar mudanças nos itens drag
-        this.dragItems.changes.subscribe(() => {
-            this.dragItems.forEach(dragItem => {
-                dragItem.setDropList(this);
-            });
-        });
+    registerDragItem(item) {
+        if (!this._directDragItems.includes(item)) {
+            this._directDragItems.push(item);
+        }
+    }
+    unregisterDragItem(item) {
+        const idx = this._directDragItems.indexOf(item);
+        if (idx >= 0)
+            this._directDragItems.splice(idx, 1);
     }
     ngOnDestroy() {
-        // Desregistrar do serviço
         this.dropListService.unregisterDropZone(this.elementRef.nativeElement);
-        // Cleanup automático via renderer
     }
-    setupDropZone() {
-        const element = this.elementRef.nativeElement;
-        this.renderer.listen(element, 'dragover', (event) => {
-            event.preventDefault();
-            // Só mostrar efeitos visuais se o item vem de outro container
-            if (this.currentDragItem && this.sourceContainer !== this) {
-                this.isReceivingDrag = true;
-            }
-            // Verificar se pode aceitar o drop
-            this.canAcceptDrop = this.canAcceptCurrentDrop();
-            if (this.canAcceptDrop) {
-                event.dataTransfer.dropEffect = 'move';
-                // Mostrar linha indicadora
-                this.updateDropIndicator(event);
-            }
-            else {
-                event.dataTransfer.dropEffect = 'none';
-                this.showDropIndicator = false;
-            }
-        });
-        this.renderer.listen(element, 'dragenter', (event) => {
-            event.preventDefault();
-            // Só mostrar efeitos visuais se o item vem de outro container
-            if (this.currentDragItem && this.sourceContainer !== this) {
-                this.isReceivingDrag = true;
-            }
-        });
-        this.renderer.listen(element, 'dragleave', (event) => {
-            const rect = element.getBoundingClientRect();
-            const x = event.clientX;
-            const y = event.clientY;
-            // Verificar se realmente saiu do container
-            if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
-                this.isReceivingDrag = false;
-                this.showDropIndicator = false;
-            }
-        });
-        this.renderer.listen(element, 'drop', (event) => {
-            event.preventDefault();
-            this.handleDrop(event);
-        });
-    }
-    updateDropIndicator(event) {
-        if (!this.currentDragItem)
-            return;
-        const containerRect = this.elementRef.nativeElement.getBoundingClientRect();
-        const y = event.clientY - containerRect.top;
-        const dragItemElements = this.dragItems.toArray().map(item => item.elementRef.nativeElement);
-        let indicatorY = 0;
-        let dropIndex = 0;
-        let found = false;
-        for (let i = 0; i < dragItemElements.length; i++) {
-            const itemRect = dragItemElements[i].getBoundingClientRect();
-            const itemY = itemRect.top - containerRect.top;
-            const itemHeight = itemRect.height;
-            const itemCenter = itemY + itemHeight / 2;
-            if (y < itemCenter) {
-                indicatorY = itemY;
-                dropIndex = i;
-                found = true;
-                break;
-            }
-        }
-        if (!found && dragItemElements.length > 0) {
-            // Posicionar no final da lista
-            const lastItem = dragItemElements[dragItemElements.length - 1];
-            const lastRect = lastItem.getBoundingClientRect();
-            indicatorY = lastRect.bottom - containerRect.top;
-            dropIndex = dragItemElements.length;
-        }
-        // Armazenar tanto a posição visual quanto o índice calculado
-        this.dropIndicatorPosition = indicatorY;
-        this.calculatedDropIndex = dropIndex;
-        this.showDropIndicator = true;
-    }
-    // Métodos chamados pelo directive
-    onDragStart(dragItem, event) {
+    // --- Called by the drag engine (MatchaDropListService) ---
+    onPointerDragStart(dragItem) {
         if (this.matchaDropListDisabled)
             return;
         this.currentDragItem = dragItem;
         this.sourceContainer = this;
         this.dragStartIndex = this.getDragItemIndex(dragItem);
-        // Notificar containers conectados
         this.matchaDropListConnectedTo.forEach(container => {
             container.notifyDragStart(dragItem, this);
         });
     }
-    onDragEnd() {
+    onPointerDragEnd() {
         this.currentDragItem = undefined;
         this.sourceContainer = undefined;
         this.dragStartIndex = -1;
+        this.matchaDropListConnectedTo.forEach(container => container.notifyDragEnd());
+    }
+    updatePlaceholder(clientX, clientY, dragDirective, sourceContainer) {
+        if (this.matchaDropListDisabled)
+            return;
+        const isCrossContainer = sourceContainer && sourceContainer !== this;
+        // Type-based accept check
+        if (isCrossContainer && this.matchaDropListAcceptTypes.length > 0) {
+            const dragType = dragDirective.matchaDragType ?? '';
+            if (dragType && !this.matchaDropListAcceptTypes.includes(dragType)) {
+                this.isReceivingDrag = true;
+                this.canAcceptDrop = false;
+                return;
+            }
+        }
+        // Predicate check: reject incoming cross-container drop before showing placeholder
+        if (isCrossContainer && this.matchaDropListAcceptPredicate) {
+            const canAccept = this.matchaDropListAcceptPredicate(dragDirective.matchaDragData, sourceContainer, this);
+            if (!canAccept) {
+                this.isReceivingDrag = true;
+                this.canAcceptDrop = false;
+                return;
+            }
+        }
+        const allItems = this.directDragItems;
+        const allEls = allItems.map(d => d.elementRef.nativeElement);
+        const draggedEl = dragDirective.elementRef.nativeElement;
+        const isSameContainer = allEls.includes(draggedEl);
+        const draggedHeight = draggedEl.getBoundingClientRect().height;
+        // Calculate insert index ignoring the dragged item itself
+        let insertIndex = allEls.length;
+        for (let i = 0; i < allEls.length; i++) {
+            if (allEls[i] === draggedEl)
+                continue;
+            const rect = allEls[i].getBoundingClientRect();
+            if (clientY < rect.top + rect.height / 2) {
+                insertIndex = i;
+                break;
+            }
+        }
+        // Adjust for the removed dragged item when it was before the insert point
+        if (isSameContainer) {
+            const draggedIndex = allEls.indexOf(draggedEl);
+            if (draggedIndex < insertIndex) {
+                insertIndex = Math.max(0, insertIndex - 1);
+            }
+        }
+        this.calculatedDropIndex = insertIndex;
+        // Apply translateY animations: only items strictly between source and target shift
+        allItems.forEach((item, rawIdx) => {
+            const el = item.elementRef.nativeElement;
+            el.style.transition = 'transform 150ms ease, opacity 150ms ease';
+            if (el === draggedEl) {
+                el.style.opacity = '0.25';
+                el.style.transform = '';
+                return;
+            }
+            el.style.opacity = '';
+            if (!isSameContainer) {
+                el.style.transform = rawIdx >= insertIndex ? `translateY(${draggedHeight}px)` : '';
+            }
+            else {
+                const draggedIdx = allEls.indexOf(draggedEl);
+                if (insertIndex < draggedIdx) {
+                    el.style.transform = (rawIdx >= insertIndex && rawIdx < draggedIdx)
+                        ? `translateY(${draggedHeight}px)` : '';
+                }
+                else {
+                    el.style.transform = (rawIdx > draggedIdx && rawIdx <= insertIndex)
+                        ? `translateY(-${draggedHeight}px)` : '';
+                }
+            }
+        });
+        // Extend container bottom for hit-test at last position (Fix E)
+        this.getInnerContainer().style.paddingBottom = `${draggedHeight}px`;
+        this.isReceivingDrag = true;
+        this.canAcceptDrop = true;
+        this.showDropIndicator = false;
+    }
+    clearPlaceholder() {
+        this.getInnerContainer().style.paddingBottom = '';
+        this.directDragItems.forEach(item => {
+            const el = item.elementRef.nativeElement;
+            el.style.transform = '';
+            el.style.opacity = '';
+            el.style.transition = '';
+        });
         this.isReceivingDrag = false;
+        this.canAcceptDrop = true;
         this.showDropIndicator = false;
         this.calculatedDropIndex = 0;
-        // Notificar containers conectados
-        this.matchaDropListConnectedTo.forEach(container => {
-            container.notifyDragEnd();
-        });
     }
-    handleDrop(event) {
-        if (!this.currentDragItem || this.matchaDropListDisabled)
-            return;
-        // Verificar se pode aceitar o drop
-        if (!this.canAcceptCurrentDrop()) {
-            this.showDropIndicator = false;
-            this.isReceivingDrag = false;
+    getInnerContainer() {
+        return this.elementRef.nativeElement.querySelector('.matcha-drop-list-container')
+            ?? this.elementRef.nativeElement;
+    }
+    finalizeDrop(dragDirective, sourceContainer) {
+        if (this.matchaDropListDisabled) {
+            this.clearPlaceholder();
             return;
         }
-        this.showDropIndicator = false;
-        this.isReceivingDrag = false;
-        // Usar o índice já calculado durante o dragover ao invés de recalcular
+        // Save before clearPlaceholder resets it — used to guard same-position drops
+        const hadMovement = this.isReceivingDrag;
+        // Type-based accept check
+        if (sourceContainer !== this && this.matchaDropListAcceptTypes.length > 0) {
+            const dragType = dragDirective.matchaDragType ?? '';
+            if (dragType && !this.matchaDropListAcceptTypes.includes(dragType)) {
+                this.clearPlaceholder();
+                return;
+            }
+        }
+        // Predicate check: reject cross-container drops that the target doesn't accept
+        if (sourceContainer !== this && this.matchaDropListAcceptPredicate) {
+            const canAccept = this.matchaDropListAcceptPredicate(dragDirective.matchaDragData, sourceContainer, this);
+            if (!canAccept) {
+                this.clearPlaceholder();
+                return;
+            }
+        }
         const dropIndex = this.calculatedDropIndex;
-        if (this.sourceContainer === this) {
-            // Drop na mesma lista - reordenar
-            if (!this.matchaDropListSortingDisabled && dropIndex !== this.dragStartIndex) {
-                this.reorderItems(this.dragStartIndex, dropIndex);
+        this.clearPlaceholder();
+        if (sourceContainer === this) {
+            const fromIndex = this.directDragItems.findIndex(d => d === dragDirective);
+            if (fromIndex >= 0 && hadMovement && !this.matchaDropListSortingDisabled && dropIndex !== fromIndex) {
+                this.reorderItems(fromIndex, dropIndex);
+            }
+        }
+        else if (sourceContainer) {
+            this.transferItem(dragDirective, sourceContainer, this, dropIndex);
+        }
+    }
+    // --- Tree mode helpers (called by service) ---
+    getItemIndexAt(clientX, clientY) {
+        const allEls = this.directDragItems.map(d => d.elementRef.nativeElement);
+        for (let i = 0; i < allEls.length; i++) {
+            const rect = allEls[i].getBoundingClientRect();
+            if (clientX >= rect.left && clientX <= rect.right &&
+                clientY >= rect.top && clientY <= rect.bottom) {
+                return i;
             }
         }
-        else if (this.sourceContainer) {
-            // Drop entre listas - transferir
-            this.transferItem(this.currentDragItem, this.sourceContainer, this, dropIndex);
+        return -1;
+    }
+    emitHoverExpand(itemIndex) {
+        const item = this.directDragItems[itemIndex];
+        if (item) {
+            this.matchaDropListHoverExpand.emit(item.matchaDragData);
         }
     }
+    // --- Cross-container communication (connected lists) ---
+    notifyDragStart(dragItem, sourceContainer) {
+        this.currentDragItem = dragItem;
+        this.sourceContainer = sourceContainer;
+        this.dragStartIndex = sourceContainer.getDragItemIndex(dragItem);
+    }
+    notifyDragEnd() {
+        this.currentDragItem = undefined;
+        this.sourceContainer = undefined;
+        this.dragStartIndex = -1;
+        this.isReceivingDrag = false;
+        this.showDropIndicator = false;
+        this.calculatedDropIndex = 0;
+    }
+    // --- Internal reorder/transfer ---
     reorderItems(fromIndex, toIndex) {
         const newData = [...this.matchaDropListData];
-        const item = newData[fromIndex];
-        // Remover item da posição original
-        newData.splice(fromIndex, 1);
-        // Calcular nova posição
-        const insertIndex = toIndex > fromIndex ? toIndex - 1 : toIndex;
-        // Inserir na nova posição
+        const [item] = newData.splice(fromIndex, 1);
+        const insertIndex = toIndex > fromIndex ? toIndex : toIndex;
         newData.splice(insertIndex, 0, item);
         this.matchaDropListData = newData;
-        // Emitir evento
         this.matchaDropListDropped.emit({
             previousIndex: fromIndex,
             currentIndex: insertIndex,
@@ -10092,15 +10102,12 @@ class MatchaDropListComponent {
     transferItem(dragItem, sourceContainer, targetContainer, targetIndex) {
         const item = dragItem.matchaDragData;
         const sourceIndex = sourceContainer.dragStartIndex;
-        // Remover do container origem
         const sourceData = [...sourceContainer.matchaDropListData];
         sourceData.splice(sourceIndex, 1);
         sourceContainer.matchaDropListData = sourceData;
-        // Adicionar ao container destino
         const targetData = [...targetContainer.matchaDropListData];
         targetData.splice(targetIndex, 0, item);
         targetContainer.matchaDropListData = targetData;
-        // Emitir eventos
         targetContainer.matchaDropListDropped.emit({
             previousIndex: sourceIndex,
             currentIndex: targetIndex,
@@ -10118,80 +10125,23 @@ class MatchaDropListComponent {
         });
     }
     getDragItemIndex(dragItem) {
-        return this.dragItems.toArray().indexOf(dragItem);
-    }
-    // Métodos para comunicação entre containers conectados
-    notifyDragStart(dragItem, sourceContainer) {
-        this.currentDragItem = dragItem;
-        this.sourceContainer = sourceContainer;
-        this.dragStartIndex = sourceContainer.getDragItemIndex(dragItem);
-    }
-    notifyDragEnd() {
-        this.currentDragItem = undefined;
-        this.sourceContainer = undefined;
-        this.dragStartIndex = -1;
-        this.isReceivingDrag = false;
-        this.showDropIndicator = false;
-        this.calculatedDropIndex = 0;
+        return this.directDragItems.indexOf(dragItem);
     }
-    canAcceptCurrentDrop() {
-        if (!this.currentDragItem || !this.sourceContainer) {
-            return false;
-        }
-        if (this.matchaDropListAcceptPredicate) {
-            const sourceContainer = this.sourceContainer;
-            const targetContainer = this;
-            const item = this.currentDragItem.matchaDragData;
-            return this.matchaDropListAcceptPredicate(item, sourceContainer, targetContainer);
-        }
-        return true;
+    // --- Kept for backward compat (no-ops with new engine) ---
+    onDragStart(dragItem, _event) {
+        this.onPointerDragStart(dragItem);
     }
-    // Métodos para suporte touch/mobile
-    handleTouchDragOver(event) {
-        // Só mostrar efeitos visuais se o item vem de outro container
-        if (this.currentDragItem && this.sourceContainer !== this) {
-            this.isReceivingDrag = true;
-        }
-        // Verificar se pode aceitar o drop
-        this.canAcceptDrop = this.canAcceptCurrentDrop();
-        if (this.canAcceptDrop) {
-            // Mostrar linha indicadora
-            this.updateDropIndicator(event);
-        }
-        else {
-            this.showDropIndicator = false;
-        }
-    }
-    handleTouchDrop(event, dragItem) {
-        if (!this.currentDragItem || this.matchaDropListDisabled)
-            return;
-        // Verificar se pode aceitar o drop
-        if (!this.canAcceptCurrentDrop()) {
-            this.showDropIndicator = false;
-            this.isReceivingDrag = false;
-            return;
-        }
-        this.showDropIndicator = false;
-        this.isReceivingDrag = false;
-        // Usar o índice já calculado durante o dragover
-        const dropIndex = this.calculatedDropIndex;
-        if (this.sourceContainer === this) {
-            // Drop na mesma lista - reordenar
-            if (!this.matchaDropListSortingDisabled && dropIndex !== this.dragStartIndex) {
-                this.reorderItems(this.dragStartIndex, dropIndex);
-            }
-        }
-        else if (this.sourceContainer) {
-            // Drop entre listas - transferir
-            this.transferItem(this.currentDragItem, this.sourceContainer, this, dropIndex);
-        }
+    onDragEnd() {
+        this.onPointerDragEnd();
     }
+    handleTouchDragOver(_event) { }
+    handleTouchDrop(_event, _dragItem) { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MatchaDropListService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaDropListComponent, isStandalone: false, selector: "matcha-drop-list", inputs: { matchaDropListData: "matchaDropListData", matchaDropListDisabled: "matchaDropListDisabled", matchaDropListConnectedTo: "matchaDropListConnectedTo", matchaDropListSortingDisabled: "matchaDropListSortingDisabled", matchaDropListAcceptPredicate: "matchaDropListAcceptPredicate" }, outputs: { matchaDropListDropped: "matchaDropListDropped" }, host: { properties: { "class.matcha-drop-list": "this.dropListClass" } }, queries: [{ propertyName: "dragItems", predicate: MatchaDragDirective }], ngImport: i0, template: "<div class=\"matcha-drop-list-container\"\n     [class.matcha-drop-list-receiving]=\"isReceivingDrag\"\n     [class.matcha-drop-list-disabled]=\"matchaDropListDisabled\"\n     [class.matcha-drop-list-can-accept]=\"isReceivingDrag && canAcceptDrop\"\n     [class.matcha-drop-list-cannot-accept]=\"isReceivingDrag && !canAcceptDrop\">\n  <ng-content></ng-content>\n\n  <!-- Linha indicadora de drop -->\n  <div class=\"matcha-drop-indicator\"\n       [class.active]=\"showDropIndicator && canAcceptDrop\"\n       [style.top.px]=\"dropIndicatorPosition\">\n  </div>\n\n  <!-- Placeholder para lista vazia -->\n  <div *ngIf=\"isReceivingDrag && dragItems.length === 0\"\n       class=\"matcha-drop-list-placeholder\">\n    <div class=\"matcha-drop-list-empty-placeholder\"\n         [class.can-accept]=\"canAcceptDrop\"\n         [class.cannot-accept]=\"!canAcceptDrop\">\n      <span [class.i-matcha-action_sign_success]=\"canAcceptDrop\"\n            [class.i-matcha-action_sign_error]=\"!canAcceptDrop\"\n            [class.color-green]=\"canAcceptDrop\"\n            [class.color-red]=\"!canAcceptDrop\"\n            class=\"i-size-lg\"></span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaDropListComponent, isStandalone: false, selector: "matcha-drop-list", inputs: { matchaDropListData: "matchaDropListData", matchaDropListDisabled: "matchaDropListDisabled", matchaDropListConnectedTo: "matchaDropListConnectedTo", matchaDropListSortingDisabled: "matchaDropListSortingDisabled", matchaDropListAcceptPredicate: "matchaDropListAcceptPredicate", matchaDropListAcceptTypes: "matchaDropListAcceptTypes", matchaDropListTreeMode: "matchaDropListTreeMode", matchaDropListHoverExpandDelay: "matchaDropListHoverExpandDelay" }, outputs: { matchaDropListDropped: "matchaDropListDropped", matchaDropListHoverExpand: "matchaDropListHoverExpand" }, host: { properties: { "class.matcha-drop-list": "this.dropListClass" } }, ngImport: i0, template: "<div class=\"matcha-drop-list-container\"\n     [class.matcha-drop-list-receiving]=\"isReceivingDrag\"\n     [class.matcha-drop-list-disabled]=\"matchaDropListDisabled\"\n     [class.matcha-drop-list-can-accept]=\"isReceivingDrag && canAcceptDrop\"\n     [class.matcha-drop-list-cannot-accept]=\"isReceivingDrag && !canAcceptDrop\">\n  <ng-content></ng-content>\n\n  <!-- Linha indicadora de drop -->\n  <div class=\"matcha-drop-indicator\"\n       [class.active]=\"showDropIndicator && canAcceptDrop\"\n       [style.top.px]=\"dropIndicatorPosition\">\n  </div>\n\n  <!-- Placeholder para lista vazia -->\n  <div *ngIf=\"isReceivingDrag && directDragItems.length === 0\"\n       class=\"matcha-drop-list-placeholder\">\n    <div class=\"matcha-drop-list-empty-placeholder\"\n         [class.can-accept]=\"canAcceptDrop\"\n         [class.cannot-accept]=\"!canAcceptDrop\">\n      <span [class.i-matcha-action_sign_success]=\"canAcceptDrop\"\n            [class.i-matcha-action_sign_error]=\"!canAcceptDrop\"\n            [class.color-green]=\"canAcceptDrop\"\n            [class.color-red]=\"!canAcceptDrop\"\n            class=\"i-size-lg\"></span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-drop-list', standalone: false, template: "<div class=\"matcha-drop-list-container\"\n     [class.matcha-drop-list-receiving]=\"isReceivingDrag\"\n     [class.matcha-drop-list-disabled]=\"matchaDropListDisabled\"\n     [class.matcha-drop-list-can-accept]=\"isReceivingDrag && canAcceptDrop\"\n     [class.matcha-drop-list-cannot-accept]=\"isReceivingDrag && !canAcceptDrop\">\n  <ng-content></ng-content>\n\n  <!-- Linha indicadora de drop -->\n  <div class=\"matcha-drop-indicator\"\n       [class.active]=\"showDropIndicator && canAcceptDrop\"\n       [style.top.px]=\"dropIndicatorPosition\">\n  </div>\n\n  <!-- Placeholder para lista vazia -->\n  <div *ngIf=\"isReceivingDrag && dragItems.length === 0\"\n       class=\"matcha-drop-list-placeholder\">\n    <div class=\"matcha-drop-list-empty-placeholder\"\n         [class.can-accept]=\"canAcceptDrop\"\n         [class.cannot-accept]=\"!canAcceptDrop\">\n      <span [class.i-matcha-action_sign_success]=\"canAcceptDrop\"\n            [class.i-matcha-action_sign_error]=\"!canAcceptDrop\"\n            [class.color-green]=\"canAcceptDrop\"\n            [class.color-red]=\"!canAcceptDrop\"\n            class=\"i-size-lg\"></span>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'matcha-drop-list', standalone: false, template: "<div class=\"matcha-drop-list-container\"\n     [class.matcha-drop-list-receiving]=\"isReceivingDrag\"\n     [class.matcha-drop-list-disabled]=\"matchaDropListDisabled\"\n     [class.matcha-drop-list-can-accept]=\"isReceivingDrag && canAcceptDrop\"\n     [class.matcha-drop-list-cannot-accept]=\"isReceivingDrag && !canAcceptDrop\">\n  <ng-content></ng-content>\n\n  <!-- Linha indicadora de drop -->\n  <div class=\"matcha-drop-indicator\"\n       [class.active]=\"showDropIndicator && canAcceptDrop\"\n       [style.top.px]=\"dropIndicatorPosition\">\n  </div>\n\n  <!-- Placeholder para lista vazia -->\n  <div *ngIf=\"isReceivingDrag && directDragItems.length === 0\"\n       class=\"matcha-drop-list-placeholder\">\n    <div class=\"matcha-drop-list-empty-placeholder\"\n         [class.can-accept]=\"canAcceptDrop\"\n         [class.cannot-accept]=\"!canAcceptDrop\">\n      <span [class.i-matcha-action_sign_success]=\"canAcceptDrop\"\n            [class.i-matcha-action_sign_error]=\"!canAcceptDrop\"\n            [class.color-green]=\"canAcceptDrop\"\n            [class.color-red]=\"!canAcceptDrop\"\n            class=\"i-size-lg\"></span>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: MatchaDropListService }], propDecorators: { matchaDropListData: [{
                 type: Input
             }], matchaDropListDisabled: [{
@@ -10202,16 +10152,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Input
             }], matchaDropListAcceptPredicate: [{
                 type: Input
+            }], matchaDropListAcceptTypes: [{
+                type: Input
+            }], matchaDropListTreeMode: [{
+                type: Input
+            }], matchaDropListHoverExpandDelay: [{
+                type: Input
             }], matchaDropListDropped: [{
                 type: Output
-            }], dragItems: [{
-                type: ContentChildren,
-                args: [MatchaDragDirective]
+            }], matchaDropListHoverExpand: [{
+                type: Output
             }], dropListClass: [{
                 type: HostBinding,
                 args: ['class.matcha-drop-list']
             }] } });
 
+class MatchaDragDirective {
+    get dragItemClass() {
+        return true;
+    }
+    get dragDisabledClass() {
+        return this.matchaDragDisabled;
+    }
+    constructor(elementRef, renderer, ngZone, dropListService) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.dropListService = dropListService;
+        this.matchaDragDisabled = false;
+        this.matchaDragGroupEl = null;
+        this.matchaDragType = '';
+        this.matchaDragStarted = new EventEmitter();
+        this.listeners = [];
+    }
+    ngOnInit() {
+        this.setupPointerEvents();
+        this.dropList = this.dropListService.findDropZone(this.elementRef.nativeElement);
+        this.dropList?.registerDragItem?.(this);
+    }
+    ngOnDestroy() {
+        this.dropList?.unregisterDragItem?.(this);
+        this.cleanupListeners();
+    }
+    setDropList(dropList) {
+        this.dropList = dropList;
+    }
+    setDragHandle(handle) {
+        this.dragHandle = handle;
+        this.setupPointerEvents();
+    }
+    setupPointerEvents() {
+        if (this.matchaDragDisabled)
+            return;
+        this.cleanupListeners();
+        const dragSource = this.dragHandle || this.elementRef.nativeElement;
+        this.renderer.setStyle(dragSource, 'touch-action', 'none');
+        this.renderer.setStyle(dragSource, 'user-select', 'none');
+        this.renderer.setStyle(dragSource, '-webkit-user-select', 'none');
+        this.renderer.setStyle(dragSource, 'cursor', 'grab');
+        this.ngZone.runOutsideAngular(() => {
+            this.listeners.push(this.renderer.listen(dragSource, 'mousedown', (event) => {
+                if (event.button !== 0 || this.matchaDragDisabled)
+                    return;
+                event.preventDefault();
+                this.ngZone.run(() => {
+                    this.dropListService.beginDrag(this, this.elementRef.nativeElement, event, this.matchaDragGroupEl ?? undefined);
+                    this.matchaDragStarted.emit();
+                });
+            }));
+            this.listeners.push(this.renderer.listen(dragSource, 'touchstart', (event) => {
+                if (this.matchaDragDisabled)
+                    return;
+                event.preventDefault();
+                this.ngZone.run(() => {
+                    this.dropListService.beginDrag(this, this.elementRef.nativeElement, event, this.matchaDragGroupEl ?? undefined);
+                    this.matchaDragStarted.emit();
+                });
+            }));
+        });
+    }
+    cleanupListeners() {
+        this.listeners.forEach(cleanup => cleanup());
+        this.listeners = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDragDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: MatchaDropListService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: MatchaDragDirective, isStandalone: false, selector: "[matchaDrag]", inputs: { matchaDragData: "matchaDragData", matchaDragDisabled: "matchaDragDisabled", matchaDragGroupEl: "matchaDragGroupEl", matchaDragType: "matchaDragType" }, outputs: { matchaDragStarted: "matchaDragStarted" }, host: { properties: { "class.matcha-drag-item": "this.dragItemClass", "class.matcha-drag-disabled": "this.dragDisabledClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matchaDrag]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: MatchaDropListService }], propDecorators: { matchaDragData: [{
+                type: Input
+            }], matchaDragDisabled: [{
+                type: Input
+            }], matchaDragGroupEl: [{
+                type: Input
+            }], matchaDragType: [{
+                type: Input
+            }], matchaDragStarted: [{
+                type: Output
+            }], dragItemClass: [{
+                type: HostBinding,
+                args: ['class.matcha-drag-item']
+            }], dragDisabledClass: [{
+                type: HostBinding,
+                args: ['class.matcha-drag-disabled']
+            }] } });
+
 class MatchaDragHandleDirective {
     get dragHandleClass() {
         return true;
@@ -10237,13 +10287,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 args: ['class.matcha-drag-handle']
             }] } });
 
+class MatchaDropZoneDirective {
+    get isDropRejected() {
+        const data = this.dropListService.currentDragData();
+        if (data == null)
+            return false;
+        if (data?.id != null && String(data.id) === String(this.matchaDropZoneId))
+            return true;
+        if (this.matchaDropZoneAcceptTypes.length > 0) {
+            const dragType = this.dropListService.currentDragType();
+            return !!dragType && !this.matchaDropZoneAcceptTypes.includes(dragType);
+        }
+        return false;
+    }
+    constructor(elementRef, dropListService) {
+        this.elementRef = elementRef;
+        this.dropListService = dropListService;
+        this.matchaDropZoneAcceptTypes = [];
+        this.matchaDropZoneDropped = new EventEmitter();
+    }
+    ngOnInit() {
+        this.dropListService.registerNamedDropZone(this.matchaDropZoneId, this);
+    }
+    ngOnDestroy() {
+        this.dropListService.unregisterNamedDropZone(this.matchaDropZoneId);
+    }
+    handleDrop(item, clientX, clientY) {
+        if (item?.id != null && String(item.id) === String(this.matchaDropZoneId))
+            return;
+        if (this.matchaDropZoneAcceptTypes.length > 0) {
+            const dragType = this.dropListService.currentDragType();
+            if (dragType && !this.matchaDropZoneAcceptTypes.includes(dragType))
+                return;
+        }
+        this.matchaDropZoneDropped.emit({ item, clientX, clientY });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropZoneDirective, deps: [{ token: i0.ElementRef }, { token: MatchaDropListService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: MatchaDropZoneDirective, isStandalone: false, selector: "[matchaDropZone]", inputs: { matchaDropZoneId: "matchaDropZoneId", matchaDropZoneAcceptTypes: "matchaDropZoneAcceptTypes" }, outputs: { matchaDropZoneDropped: "matchaDropZoneDropped" }, host: { properties: { "class.matcha-drop-zone-cannot-accept": "this.isDropRejected" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropZoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matchaDropZone]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MatchaDropListService }], propDecorators: { matchaDropZoneId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], matchaDropZoneAcceptTypes: [{
+                type: Input
+            }], matchaDropZoneDropped: [{
+                type: Output
+            }], isDropRejected: [{
+                type: HostBinding,
+                args: ['class.matcha-drop-zone-cannot-accept']
+            }] } });
+
 class MatchaDropListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListModule, declarations: [MatchaDropListComponent,
             MatchaDragDirective,
-            MatchaDragHandleDirective], imports: [CommonModule], exports: [MatchaDropListComponent,
+            MatchaDragHandleDirective,
+            MatchaDropZoneDirective], imports: [CommonModule], exports: [MatchaDropListComponent,
             MatchaDragDirective,
-            MatchaDragHandleDirective] }); }
+            MatchaDragHandleDirective,
+            MatchaDropZoneDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaDropListModule, providers: [
             MatchaDropListService
         ], imports: [CommonModule] }); }
@@ -10254,7 +10362,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     declarations: [
                         MatchaDropListComponent,
                         MatchaDragDirective,
-                        MatchaDragHandleDirective
+                        MatchaDragHandleDirective,
+                        MatchaDropZoneDirective
                     ],
                     imports: [
                         CommonModule
@@ -10262,7 +10371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     exports: [
                         MatchaDropListComponent,
                         MatchaDragDirective,
-                        MatchaDragHandleDirective
+                        MatchaDragHandleDirective,
+                        MatchaDropZoneDirective
                     ],
                     providers: [
                         MatchaDropListService
@@ -15875,5 +15985,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaMsgBoxActionsComponent, MatchaMsgBoxComponent, MatchaMsgBoxModule, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTextEditorComponent, MatchaTextEditorModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, buildSunEditorConfig, compatibleOptions, initialConfig, timeMasks, withoutValidation };
+export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaDropListService, MatchaDropZoneDirective, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaMsgBoxActionsComponent, MatchaMsgBoxComponent, MatchaMsgBoxModule, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTextEditorComponent, MatchaTextEditorModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, buildSunEditorConfig, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map