matcha-components 20.12.0 → 20.15.0

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

@@ -0,0 +1,36 @@
+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

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

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,369 @@
+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

@@ -0,0 +1,27 @@
+<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>