matcha-components 20.15.0 → 20.16.0

package/src/lib/matcha-drawer/drawer-container/drawer-container.component.ts

@@ -1,36 +0,0 @@
-import { Component, Input, ContentChild, TemplateRef, OnInit, OnDestroy } from '@angular/core';
-import { MatchaDrawerComponent } from '../drawer/drawer.component';
-
-@Component({
-  selector: 'matcha-drawer-container',
-  templateUrl: './drawer-container.component.html',
-  standalone: false
-})
-export class MatchaDrawerContainerComponent implements OnInit, OnDestroy {
-  @Input() hasBackdrop: boolean = true;
-  @Input() autoFocus: boolean = true;
-
-  @ContentChild(MatchaDrawerComponent) drawer!: MatchaDrawerComponent;
-
-  ngOnInit() {
-    if (this.drawer) {
-      this.setupDrawerEvents();
-    }
-  }
-
-  ngOnDestroy() {
-    // Cleanup se necessário
-  }
-
-  private setupDrawerEvents() {
-    if (this.drawer) {
-      this.drawer.drawerOpened.subscribe(() => {
-        if (this.autoFocus) {
-          setTimeout(() => {
-            // Focus será gerenciado pelo próprio drawer component
-          }, 100);
-        }
-      });
-    }
-  }
-}

package/src/lib/matcha-drawer/drawer-content/drawer-content.component.html

@@ -1,3 +0,0 @@
-<div class="matcha-drawer-content-wrapper">
-    <ng-content></ng-content>
-  </div>

package/src/lib/matcha-drawer/drawer-content/drawer-content.component.ts

@@ -1,24 +0,0 @@
-import { Component, Input, HostBinding } from '@angular/core';
-
-@Component({
-  selector: 'matcha-drawer-content',
-  template: `
-    <div class="matcha-drawer-content-wrapper">
-      <ng-content></ng-content>
-    </div>
-  `,
-  standalone: false
-})
-export class MatchaDrawerContentComponent {
-  @Input() padding: string = '24px';
-  @Input() scrollable: boolean = true;
-  @Input() maxHeight: string = 'auto';
-
-  @HostBinding('class') get contentClasses() {
-    return `matcha-drawer-content ${this.scrollable ? 'scrollable' : 'no-scroll'}`;
-  }
-
-  @HostBinding('style.max-height') get maxHeightStyle() {
-    return this.maxHeight;
-  }
-}

package/src/lib/matcha-drawer/drawer.module.ts

@@ -1,28 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaDrawerComponent } from './drawer/drawer.component';
-import { MatchaDrawerContainerComponent } from './drawer-container/drawer-container.component';
-import { MatchaDrawerContentComponent } from './drawer-content/drawer-content.component';
-import { MatchaButtonModule } from '../matcha-button/button.module';
-import { MatchaBreakpointObserver } from '../matcha-breakpoint-observable/breakpoint-observer.service';
-
-@NgModule({
-  declarations: [
-    MatchaDrawerComponent,
-    MatchaDrawerContainerComponent,
-    MatchaDrawerContentComponent
-  ],
-  imports: [
-    CommonModule,
-    MatchaButtonModule
-  ],
-  providers: [
-    MatchaBreakpointObserver
-  ],
-  exports: [
-    MatchaDrawerComponent,
-    MatchaDrawerContainerComponent,
-    MatchaDrawerContentComponent
-  ]
-})
-export class MatchaDrawerModule { }

package/src/lib/matcha-drop-list/directives/drag-handle.directive.ts

@@ -1,22 +0,0 @@
-import { Directive, ElementRef, OnInit, HostBinding } from '@angular/core';
-import { MatchaDragDirective } from './drag.directive';
-
-@Directive({
-  selector: '[matchaDragHandle]',
-  standalone:false
-})
-export class MatchaDragHandleDirective implements OnInit {
-
-  @HostBinding('class.matcha-drag-handle') get dragHandleClass() {
-    return true;
-  }
-
-  constructor(
-    private elementRef: ElementRef<HTMLElement>,
-    private dragDirective: MatchaDragDirective
-  ) {}
-
-  ngOnInit() {
-    this.dragDirective.setDragHandle(this.elementRef.nativeElement);
-  }
-}

package/src/lib/matcha-drop-list/directives/drag.directive.ts

@@ -1,369 +0,0 @@
-import { Directive, ElementRef, Input, OnInit, OnDestroy, Renderer2, HostBinding, NgZone } from '@angular/core';
-import { MatchaDropListService } from '../services/drop-list.service';
-
-@Directive({
-  selector: '[matchaDrag]',
-  standalone:false
-})
-export class MatchaDragDirective implements OnInit, OnDestroy {
-  @Input() matchaDragData: any;
-  @Input() matchaDragDisabled: boolean = false;
-
-  @HostBinding('class.matcha-drag-item') get dragItemClass() {
-    return true;
-  }
-
-  @HostBinding('class.matcha-drag-disabled') get dragDisabledClass() {
-    return this.matchaDragDisabled;
-  }
-
-  private listeners: (() => void)[] = [];
-  private isDragging = false;
-  private dragHandle?: HTMLElement;
-  private dropList?: any;
-
-  // Touch/Mobile support
-  private touchStartPosition = { x: 0, y: 0 };
-  private touchCurrentPosition = { x: 0, y: 0 };
-  private touchDragThreshold = 10; // pixels
-  private isTouchDragging = false;
-  private dragPreview?: HTMLElement;
-  private touchIdentifier?: number;
-
-  constructor(
-    public elementRef: ElementRef<HTMLElement>,
-    private renderer: Renderer2,
-    private ngZone: NgZone,
-    private dropListService: MatchaDropListService
-  ) {}
-
-  ngOnInit() {
-    this.setupDragEvents();
-  }
-
-  ngOnDestroy() {
-    this.cleanupListeners();
-    this.cleanupTouchDrag();
-  }
-
-  setDropList(dropList: any) {
-    this.dropList = dropList;
-  }
-
-  setDragHandle(handle: HTMLElement) {
-    this.dragHandle = handle;
-    this.setupDragEvents(); // Re-setup when handle is set
-  }
-
-  private 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: DragEvent) => {
-          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: DragEvent) => {
-          event.preventDefault();
-        })
-      );
-
-      // Mobile/Touch events
-      this.listeners.push(
-        this.renderer.listen(dragSource, 'touchstart', (event: TouchEvent) => {
-          if (this.matchaDragDisabled) return;
-          this.onTouchStart(event);
-        })
-      );
-
-      this.listeners.push(
-        this.renderer.listen(dragSource, 'touchmove', (event: TouchEvent) => {
-          if (this.matchaDragDisabled) return;
-          this.onTouchMove(event);
-        })
-      );
-
-      this.listeners.push(
-        this.renderer.listen(dragSource, 'touchend', (event: TouchEvent) => {
-          if (this.matchaDragDisabled) return;
-          this.onTouchEnd(event);
-        })
-      );
-
-      this.listeners.push(
-        this.renderer.listen(dragSource, 'touchcancel', (event: TouchEvent) => {
-          if (this.matchaDragDisabled) return;
-          this.onTouchCancel(event);
-        })
-      );
-    });
-  }
-
-  // Desktop drag methods
-  private onDragStart(event: DragEvent) {
-    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);
-      });
-    }
-  }
-
-  private 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
-  private onTouchStart(event: TouchEvent) {
-    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();
-  }
-
-  private onTouchMove(event: TouchEvent) {
-    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();
-    }
-  }
-
-  private onTouchEnd(event: TouchEvent) {
-    if (this.touchIdentifier === undefined) return;
-
-    const touch = this.findTouch(event.changedTouches, this.touchIdentifier);
-    if (!touch) return;
-
-    if (this.isTouchDragging) {
-      this.endTouchDrag(touch);
-    }
-
-    this.resetTouchState();
-  }
-
-  private onTouchCancel(event: TouchEvent) {
-    if (this.isTouchDragging) {
-      this.cancelTouchDrag();
-    }
-    this.resetTouchState();
-  }
-
-  private startTouchDrag(touch: 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);
-      });
-    }
-  }
-
-  private updateTouchDrag(touch: 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);
-  }
-
-  private endTouchDrag(touch: 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();
-  }
-
-  private cancelTouchDrag() {
-    this.cleanupTouchDrag();
-  }
-
-  private createTouchDragPreview() {
-    const element = this.elementRef.nativeElement;
-    const rect = element.getBoundingClientRect();
-
-    // Criar clone do elemento para preview
-    this.dragPreview = element.cloneNode(true) as HTMLElement;
-
-    // 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);
-  }
-
-  private checkDropZones(touch: 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);
-      });
-    }
-  }
-
-  private findDropZone(element: Element | null): any {
-    return this.dropListService.findDropZone(element);
-  }
-
-  private findAngularComponent(element: Element): any {
-    // Método mantido para compatibilidade, mas agora usa o serviço
-    return this.dropListService.findDropZone(element);
-  }
-
-  private createFakeDragEvent(type: string, touch: Touch): any {
-    return {
-      type,
-      clientX: touch.clientX,
-      clientY: touch.clientY,
-      preventDefault: () => {},
-      dataTransfer: {
-        effectAllowed: 'move',
-        dropEffect: 'move',
-        setData: () => {},
-        getData: () => '',
-        setDragImage: () => {}
-      }
-    };
-  }
-
-  private findTouch(touches: TouchList, identifier: number): Touch | null {
-    for (let i = 0; i < touches.length; i++) {
-      if (touches[i].identifier === identifier) {
-        return touches[i];
-      }
-    }
-    return null;
-  }
-
-  private 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();
-      });
-    }
-  }
-
-  private cleanupTouchDrag() {
-    if (this.dragPreview) {
-      document.body.removeChild(this.dragPreview);
-      this.dragPreview = undefined;
-    }
-  }
-
-  private createDragImage(dataTransfer: DataTransfer, element: HTMLElement, event: DragEvent) {
-    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);
-    }
-  }
-
-  private cleanupListeners() {
-    this.listeners.forEach(cleanup => cleanup());
-    this.listeners = [];
-  }
-}

package/src/lib/matcha-drop-list/drop-list/drop-list.component.html

@@ -1,27 +0,0 @@
-<div class="matcha-drop-list-container"
-     [class.matcha-drop-list-receiving]="isReceivingDrag"
-     [class.matcha-drop-list-disabled]="matchaDropListDisabled"
-     [class.matcha-drop-list-can-accept]="isReceivingDrag && canAcceptDrop"
-     [class.matcha-drop-list-cannot-accept]="isReceivingDrag && !canAcceptDrop">
-  <ng-content></ng-content>
-
-  <!-- Linha indicadora de drop -->
-  <div class="matcha-drop-indicator"
-       [class.active]="showDropIndicator && canAcceptDrop"
-       [style.top.px]="dropIndicatorPosition">
-  </div>
-
-  <!-- Placeholder para lista vazia -->
-  <div *ngIf="isReceivingDrag && dragItems.length === 0"
-       class="matcha-drop-list-placeholder">
-    <div class="matcha-drop-list-empty-placeholder"
-         [class.can-accept]="canAcceptDrop"
-         [class.cannot-accept]="!canAcceptDrop">
-      <span [class.i-matcha-action_sign_success]="canAcceptDrop"
-            [class.i-matcha-action_sign_error]="!canAcceptDrop"
-            [class.color-green]="canAcceptDrop"
-            [class.color-red]="!canAcceptDrop"
-            class="i-size-lg"></span>
-    </div>
-  </div>
-</div>