@dragonworks/ngx-dashboard 20.0.6 → 20.1.0

package/src/lib/drop-zone/__tests__/drop-zone.component.spec.ts

@@ -1,465 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ElementRef } from '@angular/core';
-import { DropZoneComponent } from '../drop-zone.component';
-import { DashboardStore } from '../../store/dashboard-store';
-import { DragData, CellIdUtils, WidgetIdUtils, WidgetMetadata } from '../../models';
-import { DashboardService } from '../../services/dashboard.service';
-
-describe('DropZoneComponent - Focused Regression Tests', () => {
-  let component: DropZoneComponent;
-  let fixture: ComponentFixture<DropZoneComponent>;
-  let store: InstanceType<typeof DashboardStore>;
-  let dashboardService: jasmine.SpyObj<DashboardService>;
-
-  const testWidgetMetadata: WidgetMetadata = {
-    widgetTypeid: 'test-widget',
-    name: 'Test Widget',
-    description: 'A test widget',
-    svgIcon: '<svg></svg>'
-  };
-
-  const cellDragData: DragData = {
-    kind: 'cell',
-    content: {
-      cellId: CellIdUtils.create(2, 2),
-      widgetId: WidgetIdUtils.generate(),
-      row: 2,
-      col: 2,
-      rowSpan: 1,
-      colSpan: 1
-    }
-  };
-
-  const widgetDragData: DragData = {
-    kind: 'widget',
-    content: testWidgetMetadata
-  };
-
-  beforeEach(async () => {
-    const spy = jasmine.createSpyObj('DashboardService', ['getFactory']);
-
-    await TestBed.configureTestingModule({
-      imports: [DropZoneComponent],
-      providers: [
-        DashboardStore,
-        { provide: DashboardService, useValue: spy }
-      ]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DropZoneComponent);
-    component = fixture.componentInstance;
-    store = TestBed.inject(DashboardStore);
-    dashboardService = TestBed.inject(DashboardService) as jasmine.SpyObj<DashboardService>;
-    
-    // Set required inputs
-    fixture.componentRef.setInput('row', 3);
-    fixture.componentRef.setInput('col', 4);
-    fixture.componentRef.setInput('index', 12);
-    
-    fixture.detectChanges();
-  });
-
-  describe('Critical Drag & Drop Event Handling', () => {
-    it('should prevent default and stop propagation on dragenter', () => {
-      const event = new DragEvent('dragenter', { bubbles: true });
-      spyOn(event, 'preventDefault');
-      spyOn(event, 'stopPropagation');
-      
-      component.onDragEnter(event);
-      
-      expect(event.preventDefault).toHaveBeenCalled();
-      expect(event.stopPropagation).toHaveBeenCalled();
-    });
-
-    it('should prevent default and stop propagation on dragover', () => {
-      const event = new DragEvent('dragover', { bubbles: true });
-      Object.defineProperty(event, 'dataTransfer', {
-        value: { dropEffect: 'none' }
-      });
-      spyOn(event, 'preventDefault');
-      spyOn(event, 'stopPropagation');
-      
-      component.onDragOver(event);
-      
-      expect(event.preventDefault).toHaveBeenCalled();
-      expect(event.stopPropagation).toHaveBeenCalled();
-    });
-
-    it('should prevent default and stop propagation on dragleave', () => {
-      const event = new DragEvent('dragleave', { bubbles: true });
-      spyOn(event, 'preventDefault');
-      spyOn(event, 'stopPropagation');
-      
-      component.onDragLeave(event);
-      
-      expect(event.preventDefault).toHaveBeenCalled();
-      expect(event.stopPropagation).toHaveBeenCalled();
-    });
-
-    it('should prevent default and stop propagation on drop', () => {
-      const event = new DragEvent('drop', { bubbles: true });
-      Object.defineProperty(event, 'dataTransfer', {
-        value: {}
-      });
-      spyOn(event, 'preventDefault');
-      spyOn(event, 'stopPropagation');
-      
-      component.onDrop(event);
-      
-      expect(event.preventDefault).toHaveBeenCalled();
-      expect(event.stopPropagation).toHaveBeenCalled();
-    });
-
-    it('should return move drop effect for cell drag data', () => {
-      store.startDrag(cellDragData);
-      fixture.detectChanges();
-      
-      expect(component.dropEffect()).toBe('move');
-    });
-
-    it('should return copy drop effect for widget drag data', () => {
-      store.startDrag(widgetDragData);
-      fixture.detectChanges();
-      
-      expect(component.dropEffect()).toBe('copy');
-    });
-
-    it('should return none drop effect for invalid drops', () => {
-      store.endDrag();
-      fixture.componentRef.setInput('highlightInvalid', true);
-      fixture.detectChanges();
-      
-      expect(component.dropEffect()).toBe('none');
-    });
-
-    it('should return none drop effect when no drag data', () => {
-      store.endDrag();
-      fixture.detectChanges();
-      
-      expect(component.dropEffect()).toBe('none');
-    });
-
-    it('should detect when mouse leaves element boundaries through dragExit behavior', () => {
-      spyOn(component.dragExit, 'emit');
-      const mockBoundingRect = {
-        left: 100,
-        right: 200,
-        top: 50,
-        bottom: 150
-      };
-      spyOn(component.nativeElement, 'getBoundingClientRect').and.returnValue(mockBoundingRect as DOMRect);
-      
-      // Mouse outside left boundary - should emit dragExit
-      const event1 = new DragEvent('dragleave', { clientX: 90, clientY: 100 });
-      component.onDragLeave(event1);
-      expect(component.dragExit.emit).toHaveBeenCalled();
-      
-      // Reset spy
-      (component.dragExit.emit as jasmine.Spy).calls.reset();
-      
-      // Mouse inside boundaries - should not emit dragExit
-      const event2 = new DragEvent('dragleave', { clientX: 150, clientY: 100 });
-      component.onDragLeave(event2);
-      expect(component.dragExit.emit).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Output Event Emission', () => {
-    it('should emit dragEnter with correct row and col data', () => {
-      spyOn(component.dragEnter, 'emit');
-      const event = new DragEvent('dragenter');
-      
-      component.onDragEnter(event);
-      
-      expect(component.dragEnter.emit).toHaveBeenCalledWith({ row: 3, col: 4 });
-    });
-
-    it('should emit dragOver with correct row and col data', () => {
-      spyOn(component.dragOver, 'emit');
-      const event = new DragEvent('dragover');
-      Object.defineProperty(event, 'dataTransfer', {
-        value: { dropEffect: 'none' }
-      });
-      
-      component.onDragOver(event);
-      
-      expect(component.dragOver.emit).toHaveBeenCalledWith({ row: 3, col: 4 });
-    });
-
-    it('should emit dragDrop with correct data structure when drag data exists', () => {
-      spyOn(component.dragDrop, 'emit');
-      store.startDrag(cellDragData);
-      fixture.detectChanges();
-      
-      const event = new DragEvent('drop');
-      Object.defineProperty(event, 'dataTransfer', {
-        value: {}
-      });
-      
-      component.onDrop(event);
-      
-      expect(component.dragDrop.emit).toHaveBeenCalledWith({
-        data: cellDragData,
-        target: { row: 3, col: 4 }
-      });
-    });
-
-    it('should not emit dragDrop when no drag data exists', () => {
-      spyOn(component.dragDrop, 'emit');
-      store.endDrag();
-      fixture.detectChanges();
-      
-      const event = new DragEvent('drop');
-      Object.defineProperty(event, 'dataTransfer', {
-        value: {}
-      });
-      
-      component.onDrop(event);
-      
-      expect(component.dragDrop.emit).not.toHaveBeenCalled();
-    });
-
-    it('should not emit dragDrop when dataTransfer is missing', () => {
-      spyOn(component.dragDrop, 'emit');
-      store.startDrag(cellDragData);
-      fixture.detectChanges();
-      
-      const event = new DragEvent('drop');
-      
-      component.onDrop(event);
-      
-      expect(component.dragDrop.emit).not.toHaveBeenCalled();
-    });
-
-    it('should emit dragExit only when actually leaving element', () => {
-      spyOn(component.dragExit, 'emit');
-      const mockBoundingRect = {
-        left: 100,
-        right: 200,
-        top: 50,
-        bottom: 150
-      };
-      spyOn(component.nativeElement, 'getBoundingClientRect').and.returnValue(mockBoundingRect as DOMRect);
-      
-      // Mouse outside boundaries - should emit
-      const event = new DragEvent('dragleave', { clientX: 90, clientY: 100 });
-      component.onDragLeave(event);
-      
-      expect(component.dragExit.emit).toHaveBeenCalled();
-    });
-
-    it('should not emit dragExit when not leaving element', () => {
-      spyOn(component.dragExit, 'emit');
-      const mockBoundingRect = {
-        left: 100,
-        right: 200,
-        top: 50,
-        bottom: 150
-      };
-      spyOn(component.nativeElement, 'getBoundingClientRect').and.returnValue(mockBoundingRect as DOMRect);
-      
-      // Mouse inside boundaries - should not emit
-      const event = new DragEvent('dragleave', { clientX: 150, clientY: 100 });
-      component.onDragLeave(event);
-      
-      expect(component.dragExit.emit).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Visual State Management', () => {
-    it('should apply highlight class when highlight is true and highlightInvalid is false', () => {
-      fixture.componentRef.setInput('highlight', true);
-      fixture.componentRef.setInput('highlightInvalid', false);
-      fixture.detectChanges();
-      
-      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
-      expect(dropZone.classList).toContain('drop-zone--highlight');
-    });
-
-    it('should not apply highlight class when highlightInvalid is true', () => {
-      fixture.componentRef.setInput('highlight', true);
-      fixture.componentRef.setInput('highlightInvalid', true);
-      fixture.detectChanges();
-      
-      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
-      expect(dropZone.classList).not.toContain('drop-zone--highlight');
-    });
-
-    it('should apply invalid class when highlightInvalid is true', () => {
-      fixture.componentRef.setInput('highlightInvalid', true);
-      fixture.detectChanges();
-      
-      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
-      expect(dropZone.classList).toContain('drop-zone--invalid');
-    });
-
-    it('should apply resize class when highlightResize is true', () => {
-      fixture.componentRef.setInput('highlightResize', true);
-      fixture.detectChanges();
-      
-      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
-      expect(dropZone.classList).toContain('drop-zone--resize');
-    });
-
-    it('should display edit mode cell numbers with correct values', () => {
-      fixture.componentRef.setInput('editMode', true);
-      fixture.detectChanges();
-      
-      const cellNumber = fixture.nativeElement.querySelector('.edit-mode-cell-number');
-      expect(cellNumber).toBeTruthy();
-      expect(cellNumber.textContent.trim()).toBe('12 3,4');
-    });
-
-    it('should not display edit mode cell numbers when editMode is false', () => {
-      fixture.componentRef.setInput('editMode', false);
-      fixture.detectChanges();
-      
-      const cellNumber = fixture.nativeElement.querySelector('.edit-mode-cell-number');
-      expect(cellNumber).toBeFalsy();
-    });
-  });
-
-  describe('Integration & Edge Cases', () => {
-    it('should correctly read dragData from store', () => {
-      store.startDrag(cellDragData);
-      fixture.detectChanges();
-      
-      expect(component.dragData()).toEqual(cellDragData);
-    });
-
-    it('should handle null dragData gracefully', () => {
-      store.endDrag();
-      fixture.detectChanges();
-      
-      expect(component.dragData()).toBeNull();
-      expect(component.dropEffect()).toBe('none');
-    });
-
-    it('should set dataTransfer dropEffect on dragover when drag data exists', () => {
-      store.startDrag(cellDragData);
-      fixture.detectChanges();
-      
-      const mockDataTransfer = { dropEffect: 'none' };
-      const event = new DragEvent('dragover');
-      Object.defineProperty(event, 'dataTransfer', {
-        value: mockDataTransfer
-      });
-      
-      component.onDragOver(event);
-      
-      expect(mockDataTransfer.dropEffect).toBe('move');
-    });
-
-    it('should not set dataTransfer dropEffect when no drag data', () => {
-      store.endDrag();
-      fixture.detectChanges();
-      
-      const mockDataTransfer = { dropEffect: 'copy' };
-      const event = new DragEvent('dragover');
-      Object.defineProperty(event, 'dataTransfer', {
-        value: mockDataTransfer
-      });
-      
-      component.onDragOver(event);
-      
-      expect(mockDataTransfer.dropEffect).toBe('copy'); // Should remain unchanged
-    });
-
-    it('should generate unique dropZoneId', () => {
-      expect(component.dropZoneId()).toBe('drop-zone-3-4');
-    });
-
-    it('should provide correct dropData object', () => {
-      expect(component.dropData()).toEqual({ row: 3, col: 4 });
-    });
-
-    it('should handle rapid drag events without state corruption', () => {
-      spyOn(component.dragEnter, 'emit');
-      spyOn(component.dragExit, 'emit');
-      
-      const mockBoundingRect = {
-        left: 100,
-        right: 200,
-        top: 50,
-        bottom: 150
-      };
-      spyOn(component.nativeElement, 'getBoundingClientRect').and.returnValue(mockBoundingRect as DOMRect);
-      
-      const enterEvent = new DragEvent('dragenter');
-      const leaveEvent = new DragEvent('dragleave', { clientX: 90, clientY: 100 }); // Outside bounds
-      
-      // Rapid fire events
-      component.onDragEnter(enterEvent);
-      component.onDragLeave(leaveEvent);
-      component.onDragEnter(enterEvent);
-      component.onDragLeave(leaveEvent);
-      
-      expect(component.dragEnter.emit).toHaveBeenCalledTimes(2);
-      expect(component.dragExit.emit).toHaveBeenCalledTimes(2);
-    });
-
-    it('should handle drag events in correct sequence', () => {
-      spyOn(component.dragEnter, 'emit');
-      spyOn(component.dragOver, 'emit');
-      spyOn(component.dragExit, 'emit');
-      spyOn(component.dragDrop, 'emit');
-      
-      const mockBoundingRect = {
-        left: 100,
-        right: 200,
-        top: 50,
-        bottom: 150
-      };
-      spyOn(component.nativeElement, 'getBoundingClientRect').and.returnValue(mockBoundingRect as DOMRect);
-      
-      store.startDrag(cellDragData);
-      fixture.detectChanges();
-      
-      const enterEvent = new DragEvent('dragenter');
-      const overEvent = new DragEvent('dragover');
-      Object.defineProperty(overEvent, 'dataTransfer', {
-        value: { dropEffect: 'none' }
-      });
-      const dropEvent = new DragEvent('drop');
-      Object.defineProperty(dropEvent, 'dataTransfer', {
-        value: {}
-      });
-      const leaveEvent = new DragEvent('dragleave', { clientX: 90, clientY: 100 }); // Outside bounds
-      
-      component.onDragEnter(enterEvent);
-      component.onDragOver(overEvent);
-      component.onDrop(dropEvent);
-      component.onDragLeave(leaveEvent);
-      
-      expect(component.dragEnter.emit).toHaveBeenCalledWith({ row: 3, col: 4 });
-      expect(component.dragOver.emit).toHaveBeenCalledWith({ row: 3, col: 4 });
-      expect(component.dragDrop.emit).toHaveBeenCalledWith({
-        data: cellDragData,
-        target: { row: 3, col: 4 }
-      });
-      expect(component.dragExit.emit).toHaveBeenCalled();
-    });
-  });
-
-  describe('Grid Positioning', () => {
-    it('should apply correct grid positioning styles', () => {
-      fixture.detectChanges();
-      
-      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
-      expect(dropZone.style.gridRow).toBe('3');
-      expect(dropZone.style.gridColumn).toBe('4');
-    });
-
-    it('should update positioning when inputs change', () => {
-      fixture.componentRef.setInput('row', 5);
-      fixture.componentRef.setInput('col', 6);
-      fixture.detectChanges();
-      
-      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
-      expect(dropZone.style.gridRow).toBe('5');
-      expect(dropZone.style.gridColumn).toBe('6');
-      expect(component.dropZoneId()).toBe('drop-zone-5-6');
-      expect(component.dropData()).toEqual({ row: 5, col: 6 });
-    });
-  });
-});

package/src/lib/drop-zone/drop-zone.component.html

@@ -1,20 +0,0 @@
-<!-- drop-zone.component.html -->
-<div
-  class="drop-zone"
-  [class.drop-zone--highlight]="highlight() && !highlightInvalid()"
-  [class.drop-zone--invalid]="highlightInvalid()"
-  [class.drop-zone--resize]="highlightResize()"
-  [style.grid-row]="row()"
-  [style.grid-column]="col()"
-  (dragenter)="onDragEnter($event)"
-  (dragover)="onDragOver($event)"
-  (dragleave)="onDragLeave($event)"
-  (drop)="onDrop($event)"
->
-  @if (editMode()) {
-    <div class="edit-mode-cell-number">
-      {{ index() }}<br />
-      {{ row() }},{{ col() }}
-    </div>
-  }
-</div>

package/src/lib/drop-zone/drop-zone.component.scss

@@ -1,67 +0,0 @@
-// drop-zone.component.scss
-
-.drop-zone {
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-
-  // Ensure proper alignment when explicitly positioned in CSS Grid
-  align-self: stretch;
-  justify-self: stretch;
-
-  // Ensure the drop zone takes up the full grid area
-  display: block;
-  box-sizing: border-box;
-}
-
-.drop-zone--active {
-  background-color: rgba(128, 128, 128, 0.5);
-  // background-color: var(--mat-sys-surface-dim);
-}
-
-.drop-zone--highlight {
-  background-color: rgba(128, 128, 128, 0.5);
-  // background-color: var(--mat-sys-surface-dim);
-}
-
-.drop-zone--invalid {
-  // background-color: var(--mat-sys-error);
-  // background-color: color-mix(in srgb, var(--mat-sys-error) 50%, transparent);
-  //background-color: rgba(255, 0, 0, 0.2);
-
-  background-color: light-dark(
-    color-mix(in srgb, var(--mat-sys-error) 40%, white),
-    color-mix(in srgb, var(--mat-sys-error) 80%, black)
-  );
-}
-
-.drop-zone--resize {
-  background-color: rgba(33, 150, 243, 0.3);
-  outline: 1px solid rgba(33, 150, 243, 0.6);
-}
-
-// Edit mode cell numbers - centered in cell
-.edit-mode-cell-number {
-  // Text styling
-  font-size: 10px;
-  // color: var(-mat-sys-surface-container-highest);
-  color: rgba(100, 100, 100, 0.6);
-  // color: color-mix(in srgb, var(--mat-sys-surface-on-dim) 40%, transparent);
-
-  pointer-events: none;
-  user-select: none;
-  z-index: -1;
-
-  // Center in cell
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-
-  // Take up entire cell area
-  width: 100%;
-  height: 100%;
-
-  // background-color: rgba(255, 255, 255, 0.1);
-}

package/src/lib/drop-zone/drop-zone.component.ts

@@ -1,122 +0,0 @@
-// drop-zone.component.ts
-import {
-  Component,
-  ElementRef,
-  inject,
-  input,
-  output,
-  computed,
-  ChangeDetectionStrategy,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DashboardStore } from '../store/dashboard-store';
-import { DragData } from '../models';
-
-@Component({
-  selector: 'lib-drop-zone',
-  standalone: true,
-  imports: [CommonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './drop-zone.component.html',
-  styleUrl: './drop-zone.component.scss',
-})
-export class DropZoneComponent {
-  // Required inputs
-  row = input.required<number>();
-  col = input.required<number>();
-  index = input.required<number>();
-
-  // Optional inputs with defaults
-  highlight = input(false);
-  highlightInvalid = input(false);
-  highlightResize = input(false);
-  editMode = input(false);
-
-  // Outputs
-  dragEnter = output<{ row: number; col: number }>();
-  dragExit = output<void>();
-  dragOver = output<{ row: number; col: number }>();
-  dragDrop = output<{
-    data: DragData;
-    target: { row: number; col: number };
-  }>();
-
-  // Computed properties
-  dropZoneId = computed(() => `drop-zone-${this.row()}-${this.col()}`);
-
-  dropData = computed(() => ({
-    row: this.row(),
-    col: this.col(),
-  }));
-
-  // Abstract drag state from store
-  dragData = computed(() => this.#store.dragData());
-  
-  // Computed drop effect based on drag data and validity
-  dropEffect = computed(() => {
-    const data = this.dragData();
-    if (!data || this.highlightInvalid()) {
-      return 'none';
-    }
-    return data.kind === 'cell' ? 'move' : 'copy';
-  });
-
-  readonly #store = inject(DashboardStore);
-  readonly #elementRef = inject(ElementRef);
-
-  get nativeElement(): HTMLElement {
-    return this.#elementRef.nativeElement;
-  }
-
-  onDragEnter(event: DragEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.dragEnter.emit({ row: this.row(), col: this.col() });
-  }
-
-  onDragOver(event: DragEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (event.dataTransfer && this.dragData()) {
-      event.dataTransfer.dropEffect = this.dropEffect();
-    }
-
-    this.dragOver.emit({ row: this.row(), col: this.col() });
-  }
-
-  onDragLeave(event: DragEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-
-    // Only emit if actually leaving the element (not entering a child)
-    if (this.#isLeavingElement(event)) {
-      this.dragExit.emit();
-    }
-  }
-
-  #isLeavingElement(event: DragEvent): boolean {
-    const rect = this.#elementRef.nativeElement.getBoundingClientRect();
-    return (
-      event.clientX <= rect.left ||
-      event.clientX >= rect.right ||
-      event.clientY <= rect.top ||
-      event.clientY >= rect.bottom
-    );
-  }
-
-  onDrop(event: DragEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (!event.dataTransfer) return;
-
-    const data = this.dragData();
-    if (data) {
-      this.dragDrop.emit({
-        data,
-        target: { row: this.row(), col: this.col() },
-      });
-    }
-  }
-}