@dragonworks/ngx-dashboard 20.0.4 → 20.0.6

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+/*
+ * 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

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

@@ -0,0 +1,15 @@
+/* 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

@@ -0,0 +1,11 @@
+/* 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

@@ -0,0 +1,14 @@
+/* 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"
+  ]
+}