matcha-components 19.110.0 → 19.112.0

package/fesm2022/matcha-components.mjs

@@ -1887,6 +1887,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: ['size']
             }] } });
 
+class MatchaSkeletonComponent {
+    constructor() {
+        this.amount = 3;
+        this.grid = 3;
+        this.height = 100;
+        this.model = 'empty';
+        this.gap = 16;
+    }
+    get classes() {
+        // if string parse to int
+        this.amount = typeof this.amount === 'string' ? parseInt(this.amount) : this.amount;
+        this.grid = typeof this.grid === 'string' ? parseInt(this.grid) : this.grid;
+        let classes = `gap-${this.gap} `;
+        this.amount > 1 ? classes += `grid-sm-${this.grid - 1} ` : classes;
+        this.amount > 2 ? classes += `grid-md-${this.grid} ` : classes;
+        return classes;
+    }
+    get heightClass() {
+        return `h-${this.height}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: MatchaSkeletonComponent, isStandalone: false, selector: "matcha-skeleton", inputs: { amount: "amount", grid: "grid", height: "height", model: "model", gap: "gap" }, ngImport: i0, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none\" *ngFor=\"let i of [].constructor(amount)\">\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"'h-'+ height + ' flex-column--force p-16 background-bg-alpha'\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of [].constructor(amount)\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-skeleton', standalone: false, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none\" *ngFor=\"let i of [].constructor(amount)\">\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"'h-'+ height + ' flex-column--force p-16 background-bg-alpha'\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of [].constructor(amount)\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->" }]
+        }], propDecorators: { amount: [{
+                type: Input
+            }], grid: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }] } });
+
 class MatchaSlideToggleComponent {
     set checked(value) {
         const newCheckedState = value === '' ? true : !!value;
@@ -2134,11 +2172,11 @@ class MatchaTabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { activeTabIndex: "activeTabIndex" }, outputs: { tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], ngImport: i0, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group grid-2 grid-sm-3 grid-md-6 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-controls]=\"'tab-content-' + i\" \n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"text-label 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: "19.2.8", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { activeTabIndex: "activeTabIndex" }, outputs: { tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], ngImport: i0, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\" \n            [attr.aria-selected]=\"tab.active\" \n            [attr.aria-controls]=\"'tab-content-' + i\" \n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-88 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"text-label 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] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-tabs', animations: [...createAnimations], standalone: false, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group grid-2 grid-sm-3 grid-md-6 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-controls]=\"'tab-content-' + i\" \n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"text-label 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-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\" \n            [attr.aria-selected]=\"tab.active\" \n            [attr.aria-controls]=\"'tab-content-' + i\" \n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-88 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"text-label 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" }]
         }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [MatchaTabItemComponent]
@@ -2468,6 +2506,658 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }] } });
 
+class MatchaDropListService {
+    constructor() {
+        this.dropZones = new Map();
+    }
+    registerDropZone(element, component) {
+        this.dropZones.set(element, component);
+    }
+    unregisterDropZone(element) {
+        this.dropZones.delete(element);
+    }
+    findDropZone(element) {
+        while (element) {
+            if (this.dropZones.has(element)) {
+                return this.dropZones.get(element);
+            }
+            element = element.parentElement;
+        }
+        return null;
+    }
+    getAllDropZones() {
+        return Array.from(this.dropZones.values());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaDropListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaDropListService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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');
+        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);
+            }));
+        });
+    }
+    // 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)
+            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);
+            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();
+    }
+    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);
+            });
+        }
+    }
+    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);
+            });
+        }
+    }
+    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: () => { }
+            }
+        };
+    }
+    findTouch(touches, identifier) {
+        for (let i = 0; i < touches.length; i++) {
+            if (touches[i].identifier === identifier) {
+                return touches[i];
+            }
+        }
+        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;
+        }
+    }
+    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);
+        }
+        catch (error) {
+            console.warn('Erro ao configurar drag image:', error);
+        }
+    }
+    cleanupListeners() {
+        this.listeners.forEach(cleanup => cleanup());
+        this.listeners = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", 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: "19.2.8", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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
+            }], dragItemClass: [{
+                type: HostBinding,
+                args: ['class.matcha-drag-item']
+            }], dragDisabledClass: [{
+                type: HostBinding,
+                args: ['class.matcha-drag-disabled']
+            }] } });
+
+class MatchaDropListComponent {
+    get dropListClass() {
+        return true;
+    }
+    constructor(elementRef, renderer, dropListService) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.dropListService = dropListService;
+        this.matchaDropListData = [];
+        this.matchaDropListDisabled = false;
+        this.matchaDropListConnectedTo = [];
+        this.matchaDropListSortingDisabled = false;
+        this.matchaDropListDropped = new EventEmitter();
+        this.dragStartIndex = -1;
+        // Estado visual
+        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
+    }
+    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);
+            });
+        });
+    }
+    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) {
+        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() {
+        this.currentDragItem = undefined;
+        this.sourceContainer = undefined;
+        this.dragStartIndex = -1;
+        this.isReceivingDrag = false;
+        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;
+            return;
+        }
+        this.showDropIndicator = false;
+        this.isReceivingDrag = false;
+        // Usar o índice já calculado durante o dragover ao invés de recalcular
+        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);
+        }
+    }
+    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
+        newData.splice(insertIndex, 0, item);
+        this.matchaDropListData = newData;
+        // Emitir evento
+        this.matchaDropListDropped.emit({
+            previousIndex: fromIndex,
+            currentIndex: insertIndex,
+            item,
+            container: this,
+            data: this.matchaDropListData
+        });
+    }
+    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,
+            item,
+            container: targetContainer,
+            previousContainer: sourceContainer,
+            data: targetContainer.matchaDropListData
+        });
+        sourceContainer.matchaDropListDropped.emit({
+            previousIndex: sourceIndex,
+            currentIndex: -1,
+            item,
+            container: sourceContainer,
+            data: sourceContainer.matchaDropListData
+        });
+    }
+    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;
+    }
+    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;
+    }
+    // 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);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", 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: "19.2.8", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: MatchaDropListService }], propDecorators: { matchaDropListData: [{
+                type: Input
+            }], matchaDropListDisabled: [{
+                type: Input
+            }], matchaDropListConnectedTo: [{
+                type: Input
+            }], matchaDropListSortingDisabled: [{
+                type: Input
+            }], matchaDropListAcceptPredicate: [{
+                type: Input
+            }], matchaDropListDropped: [{
+                type: Output
+            }], dragItems: [{
+                type: ContentChildren,
+                args: [MatchaDragDirective]
+            }], dropListClass: [{
+                type: HostBinding,
+                args: ['class.matcha-drop-list']
+            }] } });
+
 class MatchaTooltipDirective {
     constructor(el, renderer) {
         this.el = el;
@@ -3867,38 +4557,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }] });
 
-class MatchaTreeDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-tree');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaTreeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: MatchaTreeDirective, isStandalone: false, selector: "[matchaTree]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaTreeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaTree]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaTreeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: MatchaTreeModule, declarations: [MatchaTreeDirective], imports: [CommonModule], exports: [MatchaTreeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaTreeModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaTreeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaTreeDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaTreeDirective],
-                }]
-        }] });
-
 class MatchaDateModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: MatchaDateModule, declarations: [MatchaDateComponent], imports: [CommonModule,
@@ -4020,6 +4678,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }] });
 
+class MatchaDragHandleDirective {
+    get dragHandleClass() {
+        return true;
+    }
+    constructor(elementRef, dragDirective) {
+        this.elementRef = elementRef;
+        this.dragDirective = dragDirective;
+    }
+    ngOnInit() {
+        this.dragDirective.setDragHandle(this.elementRef.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaDragHandleDirective, deps: [{ token: i0.ElementRef }, { token: MatchaDragDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: MatchaDragHandleDirective, isStandalone: false, selector: "[matchaDragHandle]", host: { properties: { "class.matcha-drag-handle": "this.dragHandleClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaDragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matchaDragHandle]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MatchaDragDirective }], propDecorators: { dragHandleClass: [{
+                type: HostBinding,
+                args: ['class.matcha-drag-handle']
+            }] } });
+
+class MatchaDropListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaDropListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: MatchaDropListModule, declarations: [MatchaDropListComponent,
+            MatchaDragDirective,
+            MatchaDragHandleDirective], imports: [CommonModule], exports: [MatchaDropListComponent,
+            MatchaDragDirective,
+            MatchaDragHandleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaDropListModule, providers: [
+            MatchaDropListService
+        ], imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaDropListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaDropListComponent,
+                        MatchaDragDirective,
+                        MatchaDragHandleDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        MatchaDropListComponent,
+                        MatchaDragDirective,
+                        MatchaDragHandleDirective
+                    ],
+                    providers: [
+                        MatchaDropListService
+                    ]
+                }]
+        }] });
+
 // import { MatchaInputPhoneModule } from './matcha-input-phone/input-phone.module';
 class MatchaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -4063,9 +4779,9 @@ class MatchaComponentsModule {
             MatchaTabsModule,
             MatchaTitleModule,
             MatchaTooltipModule,
-            MatchaTreeModule,
             MatchaDateModule,
-            MatchaTimeModule], exports: [MatchaAccordionModule,
+            MatchaTimeModule,
+            MatchaDropListModule], exports: [MatchaAccordionModule,
             //MatchaAutocompleteModule,
             MatchaBadgeModule,
             MatchaButtonModule,
@@ -4102,9 +4818,9 @@ class MatchaComponentsModule {
             MatchaTabsModule,
             MatchaTitleModule,
             MatchaTooltipModule,
-            MatchaTreeModule,
             MatchaDateModule,
-            MatchaTimeModule] }); }
+            MatchaTimeModule,
+            MatchaDropListModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -4145,9 +4861,9 @@ class MatchaComponentsModule {
             MatchaTabsModule,
             MatchaTitleModule,
             MatchaTooltipModule,
-            MatchaTreeModule,
             MatchaDateModule,
-            MatchaTimeModule, MatchaAccordionModule,
+            MatchaTimeModule,
+            MatchaDropListModule, MatchaAccordionModule,
             //MatchaAutocompleteModule,
             MatchaBadgeModule,
             MatchaButtonModule,
@@ -4184,9 +4900,9 @@ class MatchaComponentsModule {
             MatchaTabsModule,
             MatchaTitleModule,
             MatchaTooltipModule,
-            MatchaTreeModule,
             MatchaDateModule,
-            MatchaTimeModule] }); }
+            MatchaTimeModule,
+            MatchaDropListModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
@@ -4233,9 +4949,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         MatchaTabsModule,
                         MatchaTitleModule,
                         MatchaTooltipModule,
-                        MatchaTreeModule,
                         MatchaDateModule,
                         MatchaTimeModule,
+                        MatchaDropListModule
                     ],
                     exports: [MatchaAccordionModule,
                         //MatchaAutocompleteModule,
@@ -4274,10 +4990,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         MatchaTabsModule,
                         MatchaTitleModule,
                         MatchaTooltipModule,
-                        MatchaTreeModule,
                         MatchaDateModule,
                         MatchaTimeModule,
+                        MatchaDropListModule,
+                    ],
+                }]
+        }] });
+
+class MatchaSkeletonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: MatchaSkeletonModule, declarations: [MatchaSkeletonComponent], imports: [CommonModule], exports: [MatchaSkeletonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaSkeletonModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MatchaSkeletonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaSkeletonComponent],
+                    imports: [
+                        CommonModule
                     ],
+                    exports: [MatchaSkeletonComponent],
                 }]
         }] });
 
@@ -4328,5 +5060,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOverlayService, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, MatchaTreeDirective, MatchaTreeModule, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective };
+export { MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaBadgeDirective, MatchaBadgeModule, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipsDirective, MatchaChipsModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDatepickerDirective, MatchaDatepickerModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaLabelComponent, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOverlayService, MatchaPaginatorDirective, MatchaPaginatorModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioButtonDirective, MatchaRadioButtonModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectDirective, MatchaSelectModule, MatchaSidenavDirective, MatchaSidenavModule, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderDirective, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective };
 //# sourceMappingURL=matcha-components.mjs.map