@dragonworks/ngx-dashboard 20.0.6 → 20.1.0

package/src/lib/store/features/widget-management.feature.ts

@@ -1,158 +0,0 @@
-import {
-  signalStoreFeature,
-  withMethods,
-  withState,
-  withComputed,
-  patchState,
-} from '@ngrx/signals';
-import { computed } from '@angular/core';
-import {
-  CellId,
-  CellIdUtils,
-  CellData,
-  WidgetFactory,
-  WidgetId,
-  WidgetIdUtils,
-} from '../../models';
-
-export interface WidgetManagementState {
-  widgetsById: Record<string, CellData>;
-}
-
-const initialWidgetManagementState: WidgetManagementState = {
-  widgetsById: {},
-};
-
-export const withWidgetManagement = () =>
-  signalStoreFeature(
-    withState<WidgetManagementState>(initialWidgetManagementState),
-
-    // Computed cells array - lazy evaluation, automatic memoization
-    withComputed((store) => ({
-      cells: computed(() => Object.values(store.widgetsById())),
-    })),
-
-    withMethods((store) => ({
-      addWidget(cell: CellData) {
-        const widgetKey = WidgetIdUtils.toString(cell.widgetId);
-        patchState(store, {
-          widgetsById: { ...store.widgetsById(), [widgetKey]: cell },
-        });
-      },
-
-      removeWidget(widgetId: WidgetId) {
-        const widgetKey = WidgetIdUtils.toString(widgetId);
-        const { [widgetKey]: removed, ...remaining } = store.widgetsById();
-        patchState(store, { widgetsById: remaining });
-      },
-
-      updateWidgetPosition(widgetId: WidgetId, row: number, col: number) {
-        const widgetKey = WidgetIdUtils.toString(widgetId);
-        const existingWidget = store.widgetsById()[widgetKey];
-
-        if (existingWidget) {
-          // Update position and recalculate cellId based on new position
-          const newCellId = CellIdUtils.create(row, col);
-          patchState(store, {
-            widgetsById: {
-              ...store.widgetsById(),
-              [widgetKey]: { ...existingWidget, row, col, cellId: newCellId },
-            },
-          });
-        }
-      },
-
-      createWidget(
-        row: number,
-        col: number,
-        widgetFactory: WidgetFactory,
-        widgetState?: string
-      ) {
-        const widgetId = WidgetIdUtils.generate(); // Generate unique widget ID
-        const cellId = CellIdUtils.create(row, col); // Calculate position-based cell ID
-        const cell: CellData = {
-          widgetId,
-          cellId,
-          row,
-          col,
-          rowSpan: 1,
-          colSpan: 1,
-          widgetFactory,
-          widgetState,
-        };
-
-        const widgetKey = WidgetIdUtils.toString(widgetId);
-        patchState(store, {
-          widgetsById: { ...store.widgetsById(), [widgetKey]: cell },
-        });
-      },
-
-      updateCellSettings(widgetId: WidgetId, flat: boolean) {
-        const widgetKey = WidgetIdUtils.toString(widgetId);
-        const existingWidget = store.widgetsById()[widgetKey];
-
-        if (existingWidget) {
-          patchState(store, {
-            widgetsById: {
-              ...store.widgetsById(),
-              [widgetKey]: { ...existingWidget, flat },
-            },
-          });
-        }
-      },
-
-      updateWidgetSpan(widgetId: WidgetId, rowSpan: number, colSpan: number) {
-        const widgetKey = WidgetIdUtils.toString(widgetId);
-        const existingWidget = store.widgetsById()[widgetKey];
-
-        if (existingWidget) {
-          patchState(store, {
-            widgetsById: {
-              ...store.widgetsById(),
-              [widgetKey]: { ...existingWidget, rowSpan, colSpan },
-            },
-          });
-        }
-      },
-
-      updateWidgetState(widgetId: WidgetId, widgetState: unknown) {
-        const widgetKey = WidgetIdUtils.toString(widgetId);
-        const existingWidget = store.widgetsById()[widgetKey];
-
-        if (existingWidget) {
-          patchState(store, {
-            widgetsById: {
-              ...store.widgetsById(),
-              [widgetKey]: { ...existingWidget, widgetState },
-            },
-          });
-        }
-      },
-
-      updateAllWidgetStates(cellStates: Map<string, unknown>) {
-        const updatedWidgetsById = { ...store.widgetsById() };
-
-        // Convert cell ID keys to widget IDs and update states
-        for (const [cellIdString, newState] of cellStates) {
-          // Find the widget with the matching cell ID
-          const widget = Object.values(updatedWidgetsById).find(w => 
-            CellIdUtils.toString(w.cellId) === cellIdString
-          );
-          
-          if (widget) {
-            const widgetIdString = WidgetIdUtils.toString(widget.widgetId);
-            updatedWidgetsById[widgetIdString] = {
-              ...updatedWidgetsById[widgetIdString],
-              widgetState: newState,
-            };
-          }
-        }
-
-        patchState(store, { widgetsById: updatedWidgetsById });
-      },
-
-      clearDashboard() {
-        patchState(store, { widgetsById: {} });
-      },
-    }))
-  );

package/src/lib/styles/_dashboard-grid-vars.scss

@@ -1,11 +0,0 @@
-@mixin dashboard-grid-vars {
-  /* grid geometry derived once, reused everywhere */
-  --cell-size: calc(
-    100cqi / var(--columns) - var(--gutter-size) * var(--gutters) /
-      var(--columns)
-  );
-  --tile-size: calc(var(--cell-size) + var(--gutter-size));
-  --tile-offset: calc(
-    var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2
-  );
-}

package/src/lib/widget-list/__tests__/widget-list-bridge-integration.spec.ts

@@ -1,137 +0,0 @@
-// widget-list-bridge-integration.spec.ts
-import { TestBed } from '@angular/core/testing';
-import { Component, signal } from '@angular/core';
-import { WidgetListComponent } from '../widget-list.component';
-import { DashboardBridgeService } from '../../services/dashboard-bridge.service';
-import { DashboardService } from '../../services/dashboard.service';
-import { ArrowWidgetComponent } from '@dragonworks/ngx-dashboard-widgets';
-
-// Mock dashboard store
-function createMockDashboardStore(dashboardId = 'test-dashboard', dimensions = { width: 150, height: 100 }) {
-  return {
-    dashboardId: jasmine.createSpy('dashboardId').and.returnValue(dashboardId),
-    gridCellDimensions: jasmine.createSpy('gridCellDimensions').and.returnValue(dimensions),
-    startDrag: jasmine.createSpy('startDrag'),
-    endDrag: jasmine.createSpy('endDrag')
-  } as any;
-}
-
-// Test component that simulates dashboard registration
-@Component({
-  template: '',
-  providers: []
-})
-class MockDashboardComponent {
-  private mockStore = createMockDashboardStore('test-dashboard-1', { width: 200, height: 120 });
-  
-  constructor(private bridge: DashboardBridgeService) {
-    this.bridge.registerDashboard(this.mockStore);
-  }
-  
-  destroy() {
-    this.bridge.unregisterDashboard(this.mockStore);
-  }
-}
-
-describe('WidgetListComponent Integration with DashboardBridgeService', () => {
-  let component: WidgetListComponent;
-  let fixture: any;
-  let bridgeService: DashboardBridgeService;
-  let dashboardService: DashboardService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [WidgetListComponent],
-      providers: [
-        DashboardBridgeService,
-        DashboardService
-      ]
-    }).compileComponents();
-
-    // Register a test widget
-    dashboardService = TestBed.inject(DashboardService);
-    dashboardService.registerWidgetType(ArrowWidgetComponent);
-    
-    bridgeService = TestBed.inject(DashboardBridgeService);
-    fixture = TestBed.createComponent(WidgetListComponent);
-    component = fixture.componentInstance;
-  });
-
-  describe('Standalone Functionality', () => {
-    it('should create without any registered dashboards', () => {
-      expect(component).toBeTruthy();
-      expect(bridgeService.dashboardCount()).toBe(0);
-    });
-
-    it('should use fallback dimensions when no dashboards registered', () => {
-      fixture.detectChanges();
-      
-      expect(component.gridCellDimensions()).toEqual({ width: 100, height: 100 });
-    });
-
-    it('should display available widgets even without dashboards', () => {
-      fixture.detectChanges();
-      
-      expect(component.widgets().length).toBeGreaterThan(0);
-      expect(component.widgets()[0].widgetTypeid).toBe('@default/arrow-widget');
-    });
-
-    it('should handle drag start/end gracefully without dashboards', () => {
-      const mockEvent = {
-        dataTransfer: {
-          effectAllowed: '',
-          setDragImage: jasmine.createSpy('setDragImage')
-        }
-      } as any;
-      
-      const widget = component.widgets()[0];
-      
-      expect(() => {
-        component.onDragStart(mockEvent, widget);
-        component.onDragEnd();
-      }).not.toThrow();
-    });
-  });
-
-
-
-  describe('Drag Ghost Creation', () => {
-    it('should create drag ghost with fallback dimensions when no dashboards', () => {
-      fixture.detectChanges();
-      
-      const mockEvent = {
-        dataTransfer: {
-          effectAllowed: '',
-          setDragImage: jasmine.createSpy('setDragImage')
-        }
-      } as any;
-      
-      const widget = component.widgets()[0];
-      component.onDragStart(mockEvent, widget);
-      
-      // Should still work with fallback dimensions
-      expect(mockEvent.dataTransfer.setDragImage).toHaveBeenCalled();
-    });
-  });
-
-  describe('Widget State Management', () => {
-    it('should manage active widget state independently of dashboard registration', () => {
-      expect(component.activeWidget()).toBeNull();
-      
-      const mockEvent = {
-        dataTransfer: {
-          effectAllowed: '',
-          setDragImage: jasmine.createSpy('setDragImage')
-        }
-      } as any;
-      
-      const widget = component.widgets()[0];
-      
-      component.onDragStart(mockEvent, widget);
-      expect(component.activeWidget()).toBe(widget.widgetTypeid);
-      
-      component.onDragEnd();
-      expect(component.activeWidget()).toBeNull();
-    });
-  });
-});

package/src/lib/widget-list/widget-list.component.html

@@ -1,22 +0,0 @@
-<!-- widget-list.component.html -->
-<div class="widget-list" role="list" aria-label="Available widgets">
-  @for (widget of widgets(); track widget.widgetTypeid) {
-  <div
-    class="widget-list-item"
-    [class.active]="activeWidget() === widget.widgetTypeid"
-    draggable="true"
-    (dragstart)="onDragStart($event, widget)"
-    (dragend)="onDragEnd()"
-    role="listitem"
-    [attr.aria-grabbed]="activeWidget() === widget.widgetTypeid"
-    [attr.aria-label]="widget.name + ' widget: ' + widget.description"
-    tabindex="0"
-  >
-    <div class="icon" [innerHTML]="widget.safeSvgIcon" aria-hidden="true"></div>
-    <div class="content">
-      <strong>{{ widget.name }}</strong>
-      <small>{{ widget.description }}</small>
-    </div>
-  </div>
-  }
-</div>

package/src/lib/widget-list/widget-list.component.scss

@@ -1,154 +0,0 @@
-// widget-list.component.scss
-:host {
-  background-color: var(--mat-sys-surface-container, #f5f5f5);
-  container-type: inline-size;
-}
-
-.widget-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mat-sys-spacing-2, 8px);
-  
-  // Responsive spacing based on container width
-  @container (max-width: 200px) {
-    gap: var(--mat-sys-spacing-1, 4px);
-  }
-  
-  @container (min-width: 400px) {
-    gap: var(--mat-sys-spacing-3, 12px);
-  }
-}
-
-.widget-list-item {
-  display: flex;
-  align-items: start;
-  gap: var(--mat-sys-spacing-3, 12px);
-  background-color: var(--mat-sys-surface, #ffffff);
-  border: 1px solid var(--mat-sys-outline-variant, #c7c7c7);
-  padding: var(--mat-sys-spacing-3, 12px);
-  border-radius: var(--mat-sys-corner-small, 4px);
-  cursor: grab;
-  transition: background-color var(--mat-sys-motion-duration-medium2, 300ms) var(--mat-sys-motion-easing-standard, ease-in-out),
-              border-color var(--mat-sys-motion-duration-medium2, 300ms) var(--mat-sys-motion-easing-standard, ease-in-out),
-              box-shadow var(--mat-sys-motion-duration-medium2, 300ms) var(--mat-sys-motion-easing-standard, ease-in-out);
-  box-shadow: var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.05));
-  
-  // Responsive padding based on container width
-  @container (max-width: 200px) {
-    padding: var(--mat-sys-spacing-2, 8px);
-    gap: var(--mat-sys-spacing-2, 8px);
-  }
-  
-  @container (min-width: 400px) {
-    padding: var(--mat-sys-spacing-4, 16px);
-    gap: var(--mat-sys-spacing-4, 16px);
-  }
-
-  .icon {
-    width: clamp(20px, 4vw, 28px);
-    height: clamp(20px, 4vw, 28px);
-    flex-shrink: 0;
-
-    ::ng-deep svg {
-      width: 100%;
-      height: 100%;
-      display: block;
-      fill: var(--mat-sys-on-surface-variant, #5f5f5f);
-      transition: fill var(--mat-sys-motion-duration-short2, 150ms) var(--mat-sys-motion-easing-standard, ease-in-out);
-    }
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    line-height: 1.2;
-    color: var(--mat-sys-on-surface, #1c1c1c);
-    flex: 1;
-    min-width: 0; // Allow text to truncate
-    
-    strong {
-      color: var(--mat-sys-on-surface, #1c1c1c);
-      font-weight: 500;
-      font-size: clamp(0.875rem, 2.5vw, 1rem);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    
-    small {
-      color: var(--mat-sys-on-surface-variant, #5f5f5f);
-      font-size: clamp(0.75rem, 2vw, 0.875rem);
-      margin-top: var(--mat-sys-spacing-1, 4px);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  &:hover {
-    background-color: var(--mat-sys-surface-container-low, #f0f0f0);
-    box-shadow: var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, 0.1));
-    
-    .icon ::ng-deep svg {
-      fill: var(--mat-sys-on-surface, #1c1c1c);
-    }
-  }
-
-  &:active {
-    cursor: grabbing;
-    background-color: var(--mat-sys-surface-container, #f5f5f5);
-  }
-}
-
-.widget-list-item.active {
-  background-color: var(--mat-sys-primary-container, #e6f2ff);
-  border-color: var(--mat-sys-primary, #1976d2);
-  color: var(--mat-sys-on-primary-container, #004a99);
-  
-  .content {
-    strong {
-      color: var(--mat-sys-on-primary-container, #004a99);
-    }
-    
-    small {
-      color: var(--mat-sys-on-primary-container, #004a99);
-      opacity: 0.8;
-    }
-  }
-  
-  .icon ::ng-deep svg {
-    fill: var(--mat-sys-on-primary-container, #004a99);
-  }
-}
-
-// Drag ghost styles
-.drag-ghost {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  margin: 0;
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  
-  background-color: var(--mat-sys-surface, #ffffff);
-  border: 1px solid var(--mat-sys-outline-variant, #c7c7c7);
-  border-radius: var(--mat-sys-corner-small, 4px);
-  box-shadow: var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, 0.15));
-  opacity: 0.8;
-  
-  .icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    ::ng-deep svg {
-      display: block;
-      fill: var(--mat-sys-on-surface-variant, #5f5f5f);
-      opacity: 0.6;
-    }
-  }
-}

package/src/lib/widget-list/widget-list.component.ts

@@ -1,106 +0,0 @@
-// widget-list.component.ts
-import {
-  Component,
-  computed,
-  inject,
-  Renderer2,
-  signal,
-  ChangeDetectionStrategy,
-  afterNextRender,
-} from '@angular/core';
-import { DragData, WidgetMetadata } from '../models';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { DashboardService } from '../services/dashboard.service';
-import { DashboardBridgeService } from '../services/dashboard-bridge.service';
-
-interface WidgetDisplayItem extends WidgetMetadata {
-  safeSvgIcon?: SafeHtml;
-}
-
-@Component({
-  selector: 'ngx-dashboard-widget-list',
-  standalone: true,
-  imports: [],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './widget-list.component.html',
-  styleUrl: './widget-list.component.scss',
-})
-export class WidgetListComponent {
-  readonly #service = inject(DashboardService);
-  readonly #sanitizer = inject(DomSanitizer);
-  readonly #renderer = inject(Renderer2);
-  readonly #bridge = inject(DashboardBridgeService);
-
-  activeWidget = signal<string | null>(null);
-
-  // Get grid cell dimensions from bridge service (uses first available dashboard)
-  gridCellDimensions = this.#bridge.availableDimensions;
-
-  widgets = computed(() =>
-    this.#service.widgetTypes().map((w) => ({
-      ...w.metadata,
-      safeSvgIcon: this.#sanitizer.bypassSecurityTrustHtml(w.metadata.svgIcon),
-    }))
-  );
-
-  onDragStart(event: DragEvent, widget: WidgetDisplayItem) {
-    if (!event.dataTransfer) return;
-    event.dataTransfer.effectAllowed = 'copy';
-
-    const dragData: DragData = {
-      kind: 'widget',
-      content: widget,
-    };
-
-    this.activeWidget.set(widget.widgetTypeid);
-    this.#bridge.startDrag(dragData);
-
-    // Create custom drag ghost for better UX
-    const ghost = this.#createDragGhost(widget.svgIcon);
-    document.body.appendChild(ghost);
-
-    // Force reflow to ensure element is rendered
-    const _reflow = ghost.offsetHeight;
-
-    event.dataTransfer.setDragImage(ghost, 10, 10);
-
-    // Delay removal to ensure browser has time to snapshot the drag image
-    setTimeout(() => ghost.remove());
-  }
-
-  onDragEnd(): void {
-    this.activeWidget.set(null);
-    this.#bridge.endDrag();
-  }
-
-  #createDragGhost(svgIcon: string | undefined): HTMLElement {
-    const dimensions = this.gridCellDimensions();
-
-    const el = this.#renderer.createElement('div');
-    this.#renderer.addClass(el, 'drag-ghost');
-
-    // Set dimensions using CSS custom properties for dynamic sizing
-    this.#renderer.setStyle(el, 'width', `${dimensions.width}px`);
-    this.#renderer.setStyle(el, 'height', `${dimensions.height}px`);
-
-    if (svgIcon) {
-      const iconWrapper = this.#renderer.createElement('div');
-      this.#renderer.addClass(iconWrapper, 'icon');
-
-      iconWrapper.innerHTML = svgIcon;
-      const svg = iconWrapper.querySelector('svg');
-
-      if (svg) {
-        // Size the SVG to 80% of the cell dimensions
-        svg.setAttribute('width', `${dimensions.width * 0.8}`);
-        svg.setAttribute('height', `${dimensions.height * 0.8}`);
-        // Remove hardcoded fill and opacity - let CSS handle styling
-        svg.removeAttribute('fill');
-      }
-
-      el.appendChild(iconWrapper);
-    }
-
-    return el;
-  }
-}

package/src/public-api.ts

@@ -1,21 +0,0 @@
-/*
- * Public API Surface of ngx-dashboard
- */
-
-// Main dashboard components
-export * from './lib/dashboard/dashboard.component';
-export * from './lib/dashboard-editor/dashboard-editor.component';
-export * from './lib/dashboard-viewer/dashboard-viewer.component';
-export * from './lib/widget-list/widget-list.component';
-
-// Public Services
-export * from './lib/services/dashboard.service';
-
-// Store is now internal - removed from public API
-
-// Public Models and interfaces
-// TODO: not everything should be exported
-export * from './lib/models';
-
-// Providers
-export * from './lib/providers';

package/src/test-setup.ts

@@ -1,10 +0,0 @@
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
-
-// Initialize the Angular testing environment
-getTestBed().initTestEnvironment(
-  BrowserTestingModule,
-  platformBrowserTesting(),
-);

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "sourceMap": true,
-    "types": []
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["**/*.spec.ts"]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "src/**/*.ts"
-  ]
-}