matcha-components 20.15.0 → 20.17.0

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

@@ -1,380 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ElementRef,
-  Renderer2,
-  OnInit,
-  OnDestroy,
-  ContentChildren,
-  QueryList,
-  AfterContentInit,
-  HostBinding
-} from '@angular/core';
-import { MatchaDragDirective } from '../directives/drag.directive';
-import { MatchaDropListService } from '../services/drop-list.service';
-
-export interface MatchaDropListDroppedEvent<T = any> {
-  previousIndex: number;
-  currentIndex: number;
-  item: T;
-  container: MatchaDropListComponent;
-  previousContainer?: MatchaDropListComponent;
-  data: T[];
-}
-
-export interface MatchaDropListConnectedToEvent<T = any> {
-  sourceData: T[];
-  targetData: T[];
-  item: T;
-  previousIndex: number;
-  currentIndex: number;
-}
-
-@Component({
-  selector: 'matcha-drop-list',
-  templateUrl: './drop-list.component.html',
-  standalone:false
-})
-export class MatchaDropListComponent<T = any> implements OnInit, OnDestroy, AfterContentInit {
-  @Input() matchaDropListData: T[] = [];
-  @Input() matchaDropListDisabled: boolean = false;
-  @Input() matchaDropListConnectedTo: MatchaDropListComponent[] = [];
-  @Input() matchaDropListSortingDisabled: boolean = false;
-  @Input() matchaDropListAcceptPredicate?: (item: any, sourceContainer: MatchaDropListComponent, targetContainer: MatchaDropListComponent) => boolean;
-
-  @Output() matchaDropListDropped = new EventEmitter<MatchaDropListDroppedEvent<T>>();
-
-  @ContentChildren(MatchaDragDirective) dragItems!: QueryList<MatchaDragDirective>;
-
-  @HostBinding('class.matcha-drop-list') get dropListClass() {
-    return true;
-  }
-
-  // Estado do drag
-  private currentDragItem?: MatchaDragDirective;
-  private dragStartIndex: number = -1;
-  private sourceContainer?: MatchaDropListComponent;
-
-  // Estado visual
-  public isReceivingDrag = false;
-  public showDropIndicator = false;
-  public dropIndicatorPosition = 0;
-  public canAcceptDrop = true; // Controla se pode aceitar o drop atual
-  private calculatedDropIndex = 0; // Armazenar o índice calculado durante o dragover
-
-  constructor(
-    public elementRef: ElementRef<HTMLElement>,
-    private renderer: Renderer2,
-    private dropListService: MatchaDropListService
-  ) {}
-
-  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
-  }
-
-  private setupDropZone() {
-    const element = this.elementRef.nativeElement;
-
-    this.renderer.listen(element, 'dragover', (event: DragEvent) => {
-      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: DragEvent) => {
-      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: DragEvent) => {
-      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: DragEvent) => {
-      event.preventDefault();
-      this.handleDrop(event);
-    });
-  }
-
-  private updateDropIndicator(event: DragEvent) {
-    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: MatchaDragDirective, event: DragEvent) {
-    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();
-    });
-  }
-
-  private handleDrop(event: DragEvent) {
-    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);
-    }
-  }
-
-  private reorderItems(fromIndex: number, toIndex: number) {
-    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
-    });
-  }
-
-  private transferItem(dragItem: MatchaDragDirective, sourceContainer: MatchaDropListComponent, targetContainer: MatchaDropListComponent, targetIndex: number) {
-    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
-    });
-  }
-
-  private getDragItemIndex(dragItem: MatchaDragDirective): number {
-    return this.dragItems.toArray().indexOf(dragItem);
-  }
-
-  // Métodos para comunicação entre containers conectados
-  notifyDragStart(dragItem: MatchaDragDirective, sourceContainer: MatchaDropListComponent) {
-    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;
-  }
-
-  private canAcceptCurrentDrop(): boolean {
-    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: any) {
-    // 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: any, dragItem: any) {
-    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);
-    }
-  }
-}

package/src/lib/matcha-drop-list/drop-list-argtype.ts

@@ -1,56 +0,0 @@
-export const dropListArgtypes = {
-    matchaDropListData: {
-        description: 'Array de dados para os itens da lista drag-and-drop',
-        control: 'object',
-        defaultValue: [],
-        table: {
-            type: { summary: '[]' },
-            defaultValue: { summary: '[]' },
-        },
-    },
-    matchaDropListDisabled: {
-        description: 'Desabilita toda a funcionalidade de drag-and-drop da lista',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: 'false' },
-        },
-    },
-    matchaDropListSortingDisabled: {
-        description: 'Desabilita apenas a reordenação dentro da própria lista (permite transferência entre listas)',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: 'false' },
-        },
-    },
-    matchaDropListConnectedTo: {
-        description: 'Array de outras listas conectadas que podem receber itens desta lista',
-        control: 'object',
-        defaultValue: [],
-        table: {
-            type: { summary: 'MatchaDropListComponent[]' },
-            defaultValue: { summary: '[]' },
-        },
-    },
-    matchaDropListAcceptPredicate: {
-        description: 'Função que determina se um item pode ser aceito nesta lista',
-        control: false,
-        table: {
-            type: { summary: '(item: any, sourceContainer: MatchaDropListComponent, targetContainer: MatchaDropListComponent) => boolean' },
-            defaultValue: { summary: 'undefined' },
-        },
-    },
-    // Propriedades de eventos
-    matchaDropListDropped: {
-        description: 'Evento emitido quando um item é solto na lista',
-        control: false,
-        table: {
-            type: { summary: 'EventEmitter<MatchaDropListDroppedEvent<T>>' },
-            category: 'Events',
-        },
-    },
-};
-

package/src/lib/matcha-drop-list/drop-list.module.ts

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { MatchaDropListComponent } from './drop-list/drop-list.component';
-import { MatchaDragDirective } from './directives/drag.directive';
-import { MatchaDragHandleDirective } from './directives/drag-handle.directive';
-import { MatchaDropListService } from './services/drop-list.service';
-
-@NgModule({
-  declarations: [
-    MatchaDropListComponent,
-    MatchaDragDirective,
-    MatchaDragHandleDirective
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    MatchaDropListComponent,
-    MatchaDragDirective,
-    MatchaDragHandleDirective
-  ],
-  providers: [
-    MatchaDropListService
-  ]
-})
-export class MatchaDropListModule { }