@dragonworks/ngx-dashboard 20.0.6 → 20.1.0

package/src/lib/internal-widgets/unknown-widget/unknown-widget.component.ts

@@ -1,72 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  signal,
-  computed,
-} from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { Widget, WidgetMetadata } from '../../models';
-
-export interface UnknownWidgetState {
-  originalWidgetTypeid: string;
-}
-
-@Component({
-  selector: 'lib-unknown-widget',
-  imports: [MatIconModule, MatTooltipModule],
-  template: `
-    <div class="unknown-widget-container" [matTooltip]="tooltipText()">
-      <mat-icon class="unknown-widget-icon">error_outline</mat-icon>
-    </div>
-  `,
-  styles: [
-    `
-      .unknown-widget-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        background-color: var(--mat-sys-error);
-        border-radius: 8px;
-        container-type: size;
-      }
-
-      .unknown-widget-icon {
-        color: var(--mat-sys-on-error);
-        font-size: clamp(12px, 75cqmin, 68px);
-        width: clamp(12px, 75cqmin, 68px);
-        height: clamp(12px, 75cqmin, 68px);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class UnknownWidgetComponent implements Widget {
-  static metadata: WidgetMetadata = {
-    widgetTypeid: '__internal/unknown-widget',
-    name: 'Unknown Widget',
-    description: 'Fallback widget for unknown widget types',
-    svgIcon:
-      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>',
-  };
-
-  readonly state = signal<UnknownWidgetState>({
-    originalWidgetTypeid: 'unknown',
-  });
-
-  readonly tooltipText = computed(() => `${this.state().originalWidgetTypeid}`);
-
-  dashboardSetState(state?: unknown): void {
-    if (state && typeof state === 'object' && 'originalWidgetTypeid' in state) {
-      this.state.set(state as UnknownWidgetState);
-    }
-  }
-
-  dashboardGetState(): UnknownWidgetState {
-    return this.state();
-  }
-
-  // No edit dialog for error widgets - method intentionally not implemented
-}

package/src/lib/models/cell-data.ts

@@ -1,13 +0,0 @@
-// cell-data.ts
-import { WidgetFactory } from './widget-factory';
-import { CellId } from './cell-id';
-import { WidgetId } from './widget-id';
-import { CellPosition } from './cell-position';
-
-export interface CellData extends CellPosition {
-  widgetId: WidgetId;  // Unique identifier for the widget instance
-  cellId: CellId;      // Current grid position (updates when widget moves)
-  flat?: boolean;
-  widgetFactory: WidgetFactory;
-  widgetState: unknown;
-}

package/src/lib/models/cell-dialog.ts

@@ -1,7 +0,0 @@
-/**
- * Data structure for cell display settings
- */
-export interface CellDisplayData {
-  id: string;
-  flat: boolean | undefined;
-}

package/src/lib/models/cell-id.ts

@@ -1,85 +0,0 @@
-/**
- * Branded type for cell identifiers to ensure type safety when working with grid coordinates.
- * This prevents accidentally mixing up row/column numbers with cell IDs.
- */
-export type CellId = number & { __brand: 'CellId' };
-
-/**
- * Maximum number of columns supported by the grid.
- * This determines the encoding scheme for cell coordinates.
- */
-const MAX_COLUMNS = 1024;
-
-/**
- * Utility functions for working with CellId branded type.
- */
-export const CellIdUtils = {
-  /**
-   * Creates a CellId from row and column coordinates.
-   * @param row - The row number (1-based)
-   * @param col - The column number (1-based)
-   * @returns A branded CellId that encodes both coordinates
-   * @throws Error if row or col is less than 1, or if col exceeds MAX_COLUMNS
-   */
-  create(row: number, col: number): CellId {
-    if (row < 1 || col < 1) {
-      throw new Error(
-        `Invalid cell coordinates: row=${row}, col=${col}. Both must be >= 1`,
-      );
-    }
-    if (col >= MAX_COLUMNS) {
-      throw new Error(`Column ${col} exceeds maximum of ${MAX_COLUMNS - 1}`);
-    }
-    return (row * MAX_COLUMNS + col) as CellId;
-  },
-
-  /**
-   * Decodes a CellId back into row and column coordinates.
-   * @param cellId - The CellId to decode
-   * @returns A tuple of [row, col] coordinates (1-based)
-   */
-  decode(cellId: CellId): [number, number] {
-    const id = cellId as number;
-    const row = Math.floor(id / MAX_COLUMNS);
-    const col = id % MAX_COLUMNS;
-    return [row, col];
-  },
-
-  /**
-   * Gets the row coordinate from a CellId.
-   * @param cellId - The CellId to extract row from
-   * @returns The row number (1-based)
-   */
-  getRow(cellId: CellId): number {
-    return Math.floor((cellId as number) / MAX_COLUMNS);
-  },
-
-  /**
-   * Gets the column coordinate from a CellId.
-   * @param cellId - The CellId to extract column from
-   * @returns The column number (1-based)
-   */
-  getCol(cellId: CellId): number {
-    return (cellId as number) % MAX_COLUMNS;
-  },
-
-  /**
-   * Creates a string representation of a CellId for debugging/display purposes.
-   * @param cellId - The CellId to convert to string
-   * @returns A string in the format "row-col"
-   */
-  toString(cellId: CellId): string {
-    const [row, col] = this.decode(cellId);
-    return `${row}-${col}`;
-  },
-
-  /**
-   * Checks if two CellIds are equal.
-   * @param a - First CellId
-   * @param b - Second CellId
-   * @returns True if the CellIds represent the same cell
-   */
-  equals(a: CellId, b: CellId): boolean {
-    return a === b;
-  },
-};

package/src/lib/models/cell-position.ts

@@ -1,15 +0,0 @@
-// cell-position.ts
-import { CellId } from './cell-id';
-import { WidgetId } from './widget-id';
-
-export interface CellPosition {
-  row: number;
-  col: number;
-  rowSpan: number;
-  colSpan: number;
-}
-
-export interface CellComponentPosition extends CellPosition {
-  cellId: CellId;  // Current position
-  widgetId: WidgetId;  // Widget instance identifier
-}

package/src/lib/models/dashboard-data.dto.ts

@@ -1,44 +0,0 @@
-// dashboard-data.dto.ts
-/**
- * Serializable data format for dashboard export/import functionality.
- * This format can be safely converted to/from JSON for persistence.
- * Corresponds to the persistent state from the dashboard store features.
- */
-export interface DashboardDataDto {
-  /** Version for future compatibility and migration support */
-  version: string;
-
-  /** Unique dashboard identifier managed by the client */
-  dashboardId: string;
-
-  /** Grid dimensions */
-  rows: number;
-  columns: number;
-  gutterSize: string;
-
-  /** Array of serializable cell data */
-  cells: CellDataDto[];
-}
-
-/**
- * Serializable version of CellData that can be safely JSON stringified.
- * Converts non-serializable types (CellId, WidgetFactory) to serializable equivalents.
- */
-export interface CellDataDto {
-  /** Grid position */
-  row: number;
-  col: number;
-
-  /** Cell span */
-  rowSpan: number;
-  colSpan: number;
-
-  /** Display settings */
-  flat?: boolean;
-
-  /** Widget type identifier for factory lookup during import */
-  widgetTypeid: string;
-
-  /** Raw widget state (must be JSON serializable) */
-  widgetState: unknown;
-}

package/src/lib/models/dashboard-data.utils.ts

@@ -1,49 +0,0 @@
-import { DashboardDataDto } from './dashboard-data.dto';
-
-/**
- * Creates an empty dashboard configuration with the specified dimensions.
- * This is a convenience function for creating a basic dashboard without any cells.
- *
- * @param dashboardId - Unique identifier for the dashboard (managed by client)
- * @param rows - Number of rows in the dashboard grid
- * @param columns - Number of columns in the dashboard grid
- * @param gutterSize - CSS size for the gutter between cells (default: '0.5em')
- * @returns A DashboardDataDto configured with the specified dimensions and no cells
- *
- * @example
- * // Create an 8x16 dashboard with default gutter
- * const dashboard = createEmptyDashboard('my-dashboard-1', 8, 16);
- *
- * @example
- * // Create a 5x10 dashboard with custom gutter
- * const dashboard = createEmptyDashboard('my-dashboard-2', 5, 10, '0.5rem');
- */
-export function createEmptyDashboard(
-  dashboardId: string,
-  rows: number,
-  columns: number,
-  gutterSize = '0.5em'
-): DashboardDataDto {
-  return {
-    version: '1.0.0',
-    dashboardId,
-    rows,
-    columns,
-    gutterSize,
-    cells: [],
-  };
-}
-
-/**
- * Creates a default dashboard configuration with standard dimensions.
- * This provides a reasonable starting point for most use cases.
- *
- * @param dashboardId - Unique identifier for the dashboard (managed by client)
- * @returns A DashboardDataDto with 8 rows, 16 columns, and 0.5em gutter
- *
- * @example
- * const dashboard = createDefaultDashboard('my-dashboard-id');
- */
-export function createDefaultDashboard(dashboardId: string): DashboardDataDto {
-  return createEmptyDashboard(dashboardId, 8, 16, '0.5em');
-}

package/src/lib/models/drag-data.ts

@@ -1,6 +0,0 @@
-import { CellComponentPosition } from './cell-position';
-import { WidgetMetadata } from './widget';
-
-export type DragData =
-  | { kind: 'cell'; content: CellComponentPosition }
-  | { kind: 'widget'; content: WidgetMetadata };

package/src/lib/models/index.ts

@@ -1,11 +0,0 @@
-export * from './cell-id';
-export * from './widget-id';
-export * from './cell-data';
-export * from './cell-position';
-export * from './cell-dialog';
-export * from './dashboard-data.dto';
-export * from './dashboard-data.utils';
-export * from './drag-data';
-export * from './reserved-space';
-export * from './widget';
-export * from './widget-factory';

package/src/lib/models/reserved-space.ts

@@ -1,24 +0,0 @@
-/**
- * Defines space that should be reserved around the dashboard component
- * when calculating viewport constraints.
- */
-export interface ReservedSpace {
-  /** Space reserved at the top (e.g., toolbar height) */
-  top: number;
-  /** Space reserved on the right (e.g., padding, widget list) */
-  right: number;
-  /** Space reserved at the bottom (e.g., padding) */
-  bottom: number;
-  /** Space reserved on the left (e.g., padding) */
-  left: number;
-}
-
-/**
- * Default reserved space when none is specified
- */
-export const DEFAULT_RESERVED_SPACE: ReservedSpace = {
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0
-};

package/src/lib/models/widget-factory.ts

@@ -1,33 +0,0 @@
-// widget-factory.ts
-import { ComponentRef, ViewContainerRef } from '@angular/core';
-import {
-  Widget,
-  WidgetComponentClass,
-} from './widget';
-
-export interface WidgetFactory<
-  T extends Widget = Widget
-> {
-  widgetTypeid: string; // application wide unique ID
-  name: string;
-  description: string;
-  svgIcon: string; // SVG markup as string
-  createInstance(container: ViewContainerRef, state?: unknown): ComponentRef<T>;
-}
-
-export function createFactoryFromComponent<T extends Widget>(
-  component: WidgetComponentClass<T>
-): WidgetFactory {
-  return {
-    ...component.metadata,
-
-    createInstance(
-      container: ViewContainerRef,
-      state?: unknown
-    ): ComponentRef<T> {
-      const ref = container.createComponent(component);
-      ref.instance.dashboardSetState?.(state);
-      return ref;
-    },
-  };
-}

package/src/lib/models/widget-id.ts

@@ -1,70 +0,0 @@
-/**
- * Branded type for widget identifiers to ensure type safety when working with widget instances.
- * This prevents accidentally mixing up widget IDs with other string values.
- */
-export type WidgetId = string & { __brand: 'WidgetId' };
-
-/**
- * Utility functions for working with WidgetId branded type.
- * WidgetIds are UUIDs that uniquely identify widget instances throughout their lifecycle,
- * independent of their position on the dashboard grid.
- */
-export const WidgetIdUtils = {
-  /**
-   * Generates a new unique WidgetId.
-   * Uses crypto.randomUUID() when available, falls back to timestamp-based ID for older browsers.
-   * @returns A new unique WidgetId
-   */
-  generate(): WidgetId {
-    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-      return crypto.randomUUID() as WidgetId;
-    }
-    // Fallback for older browsers
-    return `widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` as WidgetId;
-  },
-
-  /**
-   * Validates if a string is a valid WidgetId format.
-   * @param id - The string to validate
-   * @returns True if the string is a valid WidgetId format
-   */
-  validate(id: string): id is WidgetId {
-    // UUID v4 format or fallback format
-    return (
-      /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(id) ||
-      /^widget-\d+-[a-z0-9]{9}$/i.test(id)
-    );
-  },
-
-  /**
-   * Converts a WidgetId to a string for use as map keys or serialization.
-   * @param id - The WidgetId to convert
-   * @returns The string representation of the WidgetId
-   */
-  toString(id: WidgetId): string {
-    return id;
-  },
-
-  /**
-   * Creates a WidgetId from a string, validating the format.
-   * @param str - The string to convert to WidgetId
-   * @returns A WidgetId
-   * @throws Error if the string is not a valid WidgetId format
-   */
-  fromString(str: string): WidgetId {
-    if (!this.validate(str)) {
-      throw new Error(`Invalid WidgetId format: ${str}`);
-    }
-    return str as WidgetId;
-  },
-
-  /**
-   * Checks if two WidgetIds are equal.
-   * @param a - First WidgetId
-   * @param b - Second WidgetId
-   * @returns True if the WidgetIds are the same
-   */
-  equals(a: WidgetId, b: WidgetId): boolean {
-    return a === b;
-  },
-};

package/src/lib/models/widget.ts

@@ -1,21 +0,0 @@
-// widget.ts
-import { Type } from '@angular/core';
-
-export interface Widget {
-  dashboardGetState?(): unknown;
-  dashboardSetState?(state?: unknown): void;
-  dashboardEditState?(): void;
-}
-
-export interface WidgetMetadata {
-  widgetTypeid: string; // application wide unique ID
-  name: string; // to used in GUI
-  description: string; // short description for tooltip / GUI
-  svgIcon: string; // SVG markup as string
-}
-
-export interface WidgetComponentClass<
-  T extends Widget = Widget
-> extends Type<T> {
-  metadata: WidgetMetadata;
-}

package/src/lib/providers/cell-settings-dialog/cell-settings-dialog.component.ts

@@ -1,127 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogModule,
-} from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { MatRadioModule } from '@angular/material/radio';
-import { CellDisplayData } from '../../models/cell-dialog';
-
-@Component({
-  selector: 'lib-cell-settings-dialog',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatRadioModule,
-  ],
-  template: `
-    <h2 mat-dialog-title>Cell Display Settings</h2>
-    <mat-dialog-content>
-      <p class="cell-info">Cell ID: <strong>{{ data.id }}</strong></p>
-      
-      <div class="radio-group">
-        <mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
-          <mat-radio-button value="normal">
-            <div class="radio-option">
-              <div class="option-title">Normal</div>
-              <div class="option-description">Standard cell display with full content visibility</div>
-            </div>
-          </mat-radio-button>
-          
-          <mat-radio-button value="flat">
-            <div class="radio-option">
-              <div class="option-title">Flat</div>
-              <div class="option-description">Simplified display with reduced visual emphasis</div>
-            </div>
-          </mat-radio-button>
-        </mat-radio-group>
-      </div>
-    </mat-dialog-content>
-    <mat-dialog-actions align="end">
-      <button mat-button (click)="onCancel()">Cancel</button>
-      <button 
-        mat-flat-button 
-        (click)="save()"
-        [disabled]="selectedMode === currentMode">
-        Apply
-      </button>
-    </mat-dialog-actions>
-  `,
-  styles: [
-    `
-      mat-dialog-content {
-        display: block;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding-top: 0.5rem;
-      }
-
-      .cell-info {
-        margin: 0 0 1.5rem 0;
-        padding-bottom: 1rem;
-      }
-
-      .radio-group {
-        width: 100%;
-      }
-
-      mat-radio-group {
-        display: block;
-      }
-
-      mat-radio-button {
-        width: 100%;
-        display: block;
-        margin-bottom: 1rem;
-      }
-
-      mat-radio-button:last-child {
-        margin-bottom: 0;
-      }
-
-      .radio-option {
-        margin-left: 0.75rem;
-        padding: 0.25rem 0;
-      }
-
-      .option-title {
-        display: block;
-        margin-bottom: 0.25rem;
-      }
-
-      .option-description {
-        display: block;
-      }
-    `,
-  ],
-})
-export class CellSettingsDialogComponent {
-  selectedMode: 'normal' | 'flat';
-  currentMode: 'normal' | 'flat';
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: CellDisplayData,
-    private dialogRef: MatDialogRef<CellSettingsDialogComponent>
-  ) {
-    this.currentMode = data.flat ? 'flat' : 'normal';
-    this.selectedMode = this.currentMode;
-  }
-
-  onCancel(): void {
-    this.dialogRef.close();
-  }
-
-  save(): void {
-    const newData: CellDisplayData = {
-      ...this.data,
-      flat: this.selectedMode === 'flat'
-    };
-    this.dialogRef.close(newData);
-  }
-}

package/src/lib/providers/cell-settings-dialog/cell-settings-dialog.provider.ts

@@ -1,15 +0,0 @@
-import { CellDisplayData } from '../../models/cell-dialog';
-
-/**
- * Abstract provider for cell settings dialogs.
- * Implement this to provide custom dialog solutions.
- */
-export abstract class CellSettingsDialogProvider {
-  /**
-   * Open a settings dialog for the given cell.
-   * Returns a promise that resolves to the new settings, or undefined if cancelled.
-   */
-  abstract openCellSettings(
-    data: CellDisplayData
-  ): Promise<CellDisplayData | undefined>;
-}

package/src/lib/providers/cell-settings-dialog/cell-settings-dialog.tokens.ts

@@ -1,20 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { CellSettingsDialogProvider } from './cell-settings-dialog.provider';
-import { DefaultCellSettingsDialogProvider } from './default-cell-settings-dialog.provider';
-
-/**
- * Injection token for the cell dialog provider.
- * Use this to provide your custom dialog implementation.
- *
- * @example
- * ```typescript
- * providers: [
- *   { provide: CELL_SETTINGS_DIALOG_PROVIDER, useClass: MyCellSettingsDialogProvider }
- * ]
- * ```
- */
-export const CELL_SETTINGS_DIALOG_PROVIDER =
-  new InjectionToken<CellSettingsDialogProvider>('CellSettingsDialogProvider', {
-    providedIn: 'root',
-    factory: () => new DefaultCellSettingsDialogProvider(),
-  });

package/src/lib/providers/cell-settings-dialog/default-cell-settings-dialog.provider.ts

@@ -1,32 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { firstValueFrom } from 'rxjs';
-import { CellDisplayData } from '../../models/cell-dialog';
-import { CellSettingsDialogProvider } from './cell-settings-dialog.provider';
-import { CellSettingsDialogComponent } from './cell-settings-dialog.component';
-
-/**
- * Default cell dialog provider that uses Material Design dialogs.
- * Provides a modern, accessible dialog experience for cell settings.
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class DefaultCellSettingsDialogProvider extends CellSettingsDialogProvider {
-  private dialog = inject(MatDialog);
-
-  async openCellSettings(
-    data: CellDisplayData
-  ): Promise<CellDisplayData | undefined> {
-    const dialogRef = this.dialog.open(CellSettingsDialogComponent, {
-      data,
-      width: '400px',
-      maxWidth: '90vw',
-      disableClose: false,
-      autoFocus: false,
-    });
-
-    const result = await firstValueFrom(dialogRef.afterClosed());
-    return result;
-  }
-}

package/src/lib/providers/cell-settings-dialog/index.ts

@@ -1,3 +0,0 @@
-export { CellSettingsDialogProvider } from './cell-settings-dialog.provider';
-export { DefaultCellSettingsDialogProvider } from './default-cell-settings-dialog.provider';
-export { CELL_SETTINGS_DIALOG_PROVIDER } from './cell-settings-dialog.tokens';

package/src/lib/providers/index.ts

@@ -1 +0,0 @@
-export * from './cell-settings-dialog';