@dragonworks/ngx-dashboard-widgets 20.0.4 → 20.0.6

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-dashboard-widgets",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,42 +1,31 @@
-{
-  "name": "@dragonworks/ngx-dashboard-widgets",
-  "version": "20.0.4",
-  "description": "Widget collection for ngx-dashboard with Material Design 3 compliance including arrow, label, clock widgets and responsive text directive",
-  "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@dragonworks/ngx-dashboard": "^20.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/TobyBackstrom/ngx-dashboard.git"
-  },
-  "author": "Toby Backstrom",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/TobyBackstrom/ngx-dashboard/issues"
-  },
-  "homepage": "https://github.com/TobyBackstrom/ngx-dashboard#readme",
-  "keywords": [
-    "angular",
-    "dashboard",
-    "widgets",
-    "material-design",
-    "md3"
-  ],
-  "module": "fesm2022/dragonworks-ngx-dashboard-widgets.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/dragonworks-ngx-dashboard-widgets.mjs"
-    }
-  }
-}
+{
+  "name": "@dragonworks/ngx-dashboard-widgets",
+  "version": "20.0.6",
+  "description": "Widget collection for ngx-dashboard with Material Design 3 compliance including arrow, label, clock widgets and responsive text directive",
+  "peerDependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@dragonworks/ngx-dashboard": "^20.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TobyBackstrom/ngx-dashboard.git"
+  },
+  "author": "Toby Backstrom",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/TobyBackstrom/ngx-dashboard/issues"
+  },
+  "homepage": "https://dragonworks.dev",
+  "keywords": [
+    "angular",
+    "dashboard",
+    "widgets",
+    "material-design",
+    "md3"
+  ]
+}

package/src/lib/arrow-widget/arrow-state-dialog.component.ts

@@ -0,0 +1,187 @@
+import { Component, inject, signal, computed } 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 { ArrowWidgetState } from './arrow-widget.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+
+@Component({
+  selector: 'lib-arrow-state-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+  ],
+  template: `
+    <h2 mat-dialog-title>Arrow Settings</h2>
+    <mat-dialog-content>
+      <!-- Direction Selection -->
+      <mat-form-field appearance="outline" class="direction-field">
+        <mat-label>Arrow Direction</mat-label>
+        <mat-select
+          [value]="direction()"
+          (selectionChange)="direction.set($any($event.value))"
+        >
+          <mat-option value="up">Up</mat-option>
+          <mat-option value="right">Right</mat-option>
+          <mat-option value="down">Down</mat-option>
+          <mat-option value="left">Left</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <!-- Opacity Slider -->
+      <div class="slider-field">
+        <div class="field-label">Opacity: {{ formatOpacity(opacity()) }}%</div>
+        <mat-slider [min]="0.1" [max]="1" [step]="0.1">
+          <input matSliderThumb [(ngModel)]="opacity" />
+        </mat-slider>
+      </div>
+
+      <!-- Background Toggle -->
+      <div class="toggle-field">
+        <mat-slide-toggle 
+          [checked]="hasBackground()"
+          (change)="onBackgroundToggle($event.checked)">
+          Background
+        </mat-slide-toggle>
+        <span class="toggle-hint">Adds a background behind the arrow</span>
+      </div>
+    </mat-dialog-content>
+
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="onCancel()">Cancel</button>
+      <button mat-flat-button (click)="save()" [disabled]="!hasChanged()">
+        Save
+      </button>
+    </mat-dialog-actions>
+  `,
+  styles: [
+    `
+      mat-dialog-content {
+        display: block;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      mat-form-field {
+        width: 100%;
+        display: block;
+        margin-bottom: 1rem;
+      }
+
+      .direction-field {
+        margin-top: 1rem;
+      }
+
+      /* Opacity slider section */
+      .slider-field {
+        margin-bottom: 1.5rem;
+        margin-right: 1rem;
+      }
+
+      .field-label {
+        display: block;
+        margin-bottom: 0.5rem;
+      }
+
+      mat-slider {
+        width: 100%;
+        display: block;
+      }
+
+      /* Toggle section */
+      .toggle-field {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .toggle-hint {
+        margin: 0;
+      }
+    `,
+  ],
+})
+export class ArrowStateDialogComponent {
+  private readonly data = inject<ArrowWidgetState>(MAT_DIALOG_DATA);
+  private readonly dialogRef = inject(MatDialogRef<ArrowStateDialogComponent>);
+
+  // State signals
+  readonly direction = signal<'left' | 'up' | 'right' | 'down'>(
+    this.data.direction
+  );
+  readonly opacity = signal<number>(this.data.opacity ?? 1);
+  readonly hasBackground = signal<boolean>(this.data.hasBackground ?? true);
+  readonly transparentBackground = signal<boolean>(!(this.data.hasBackground ?? true));
+
+  // Store original values for comparison
+  private readonly originalDirection = this.data.direction;
+  private readonly originalOpacity = this.data.opacity ?? 1;
+  private readonly originalHasBackground = this.data.hasBackground ?? true;
+
+  // Computed values
+  readonly rotation = computed(() => {
+    const rotationMap = {
+      up: 0,
+      right: 90,
+      down: 180,
+      left: 270,
+    };
+    return rotationMap[this.direction()];
+  });
+
+  readonly rotationTransform = computed(() => `rotate(${this.rotation()}deg)`);
+
+  readonly directionName = computed(() => {
+    const nameMap = {
+      up: 'Up',
+      right: 'Right',
+      down: 'Down',
+      left: 'Left',
+    };
+    return nameMap[this.direction()];
+  });
+
+  readonly hasChanged = computed(
+    () =>
+      this.direction() !== this.originalDirection ||
+      this.opacity() !== this.originalOpacity ||
+      this.hasBackground() !== this.originalHasBackground
+  );
+
+  formatOpacity(value: number): number {
+    return Math.round(value * 100);
+  }
+
+  onBackgroundToggle(hasBackground: boolean): void {
+    this.hasBackground.set(hasBackground);
+    this.transparentBackground.set(!hasBackground);
+  }
+
+  onCancel(): void {
+    this.dialogRef.close();
+  }
+
+  save(): void {
+    this.dialogRef.close({
+      direction: this.direction(),
+      opacity: this.opacity(),
+      hasBackground: this.hasBackground(),
+    } as ArrowWidgetState);
+  }
+}

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

@@ -0,0 +1,9 @@
+<!-- arrow-widget.component.html -->
+<div class="svg-wrapper" [class.has-background]="state().hasBackground">
+  <div
+    class="svg-placeholder"
+    [innerHTML]="safeSvgIcon"
+    [style.transform]="'rotate(' + rotationAngle() + 'deg)'"
+    [style.opacity]="state().opacity"
+  ></div>
+</div>

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

@@ -0,0 +1,52 @@
+// arrow-widget.component.scss
+:host {
+  display: block;
+  container-type: size;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.svg-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  transition: background-color var(--mat-sys-motion-duration-medium2)
+    var(--mat-sys-motion-easing-standard);
+
+  // Add background color when enabled
+  &.has-background {
+    background-color: var(--mat-sys-surface-container-high);
+    border-radius: 4px;
+  }
+}
+
+.svg-placeholder {
+  width: min(80cqw, 80cqh);
+  aspect-ratio: 1 / 1;
+  opacity: 0.3;
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease;
+  transform-origin: center center;
+
+  // SVG styling
+  ::ng-deep svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+    fill: var(--mat-sys-on-surface-variant, #6c757d);
+    transition: fill 0.2s ease;
+  }
+
+  // Different color when parent has background
+  .has-background & ::ng-deep svg {
+    fill: var(--mat-sys-on-surface, #1f1f1f);
+  }
+}
+
+// Hover effect
+.svg-wrapper:hover .svg-placeholder ::ng-deep svg {
+  fill: var(--mat-sys-primary, #6750a4);
+}

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

@@ -0,0 +1,78 @@
+// arrow-widget.component.ts
+import { Component, inject, signal, computed } from '@angular/core';
+import { Widget, WidgetMetadata } from '@dragonworks/ngx-dashboard';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatDialog } from '@angular/material/dialog';
+import { svgIcon } from './arrow-widget.metadata';
+import { ArrowStateDialogComponent } from './arrow-state-dialog.component';
+
+export interface ArrowWidgetState {
+  direction: 'left' | 'up' | 'right' | 'down';
+  opacity?: number;
+  hasBackground?: boolean;
+}
+
+@Component({
+  selector: 'ngx-dashboard-arrow-widget',
+  imports: [],
+  templateUrl: './arrow-widget.component.html',
+  styleUrl: './arrow-widget.component.scss',
+})
+export class ArrowWidgetComponent implements Widget {
+  static metadata: WidgetMetadata = {
+    widgetTypeid: '@default/arrow-widget',
+    name: 'Arrow',
+    description: 'A generic arrow',
+    svgIcon,
+  };
+
+  readonly #sanitizer = inject(DomSanitizer);
+  readonly #dialog = inject(MatDialog);
+
+  readonly safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon);
+
+  readonly state = signal<ArrowWidgetState>({
+    direction: 'up',
+    opacity: 0.3,
+    hasBackground: true,
+  });
+  // Computed rotation
+  readonly rotationAngle = computed(() => {
+    const rotationMap = {
+      up: 0,
+      right: 90,
+      down: 180,
+      left: 270,
+    };
+    return rotationMap[this.state().direction];
+  });
+
+  dashboardSetState(state?: unknown): void {
+    if (state) {
+      this.state.update((current) => ({
+        ...current,
+        ...(state as ArrowWidgetState),
+      }));
+    }
+  }
+
+  dashboardGetState(): ArrowWidgetState {
+    return this.state();
+  }
+
+  dashboardEditState(): void {
+    const dialogRef = this.#dialog.open(ArrowStateDialogComponent, {
+      data: this.state(),
+      width: '400px',
+      maxWidth: '90vw',
+      disableClose: false,
+      autoFocus: false,
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        this.state.set(result);
+      }
+    });
+  }
+}

package/src/lib/arrow-widget/arrow-widget.metadata.ts

@@ -0,0 +1,3 @@
+// arrow-widget.metadata.ts
+export const svgIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-120v-320H120l360-440 360 440H640v320H320Zm80-80h160v-320h111L480-754 289-520h111v320Zm80-320Z"/></svg>';

package/src/lib/clock-widget/analog-clock/analog-clock.component.html

@@ -0,0 +1,66 @@
+<div class="analog-clock-container">
+  <div class="aspect-ratio-box">
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 800 800"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <!-- Optional face circle; uncomment if you want a visible outline by default -->
+      <!-- <circle cx="400" cy="400" r="400" fill="transparent" stroke="currentColor" stroke-width="2" /> -->
+
+      <use transform="matrix(-1,0,0,1,800,0)" href="#one-half" />
+      <g id="one-half">
+        <g id="one-fourth">
+          <!-- 12 / 3 / 6 / 9 heavy marks -->
+          <path d="m400 40v107" stroke-width="26.7" stroke="currentColor" />
+          <g id="one-twelfth">
+            <!-- 30° heavy marks -->
+            <path
+              d="m580 88.233-42.5 73.612"
+              stroke-width="26.7"
+              stroke="currentColor"
+            />
+            <g id="one-thirtieth">
+              <!-- minute/second ticks -->
+              <path
+                id="one-sixtieth"
+                d="m437.63 41.974-3.6585 34.808"
+                stroke-width="13.6"
+                stroke="currentColor"
+              />
+              <use transform="rotate(6 400 400)" href="#one-sixtieth" />
+            </g>
+            <use transform="rotate(12 400 400)" href="#one-thirtieth" />
+          </g>
+          <use transform="rotate(30 400 400)" href="#one-twelfth" />
+          <use transform="rotate(60 400 400)" href="#one-twelfth" />
+        </g>
+        <use transform="rotate(90 400 400)" href="#one-fourth" />
+      </g>
+
+      <!-- Hands -->
+      <path
+        class="clock-hour-hand"
+        id="anim-clock-hour-hand"
+        #hourHand
+        d="m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z"
+        transform="rotate(110.2650694444, 400, 400)"
+      />
+      <path
+        class="clock-minute-hand"
+        id="anim-clock-minute-hand"
+        #minuteHand
+        d="M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z"
+        transform="rotate(243.1808333333, 400, 400)"
+      />
+      <path
+        class="clock-second-hand"
+        id="anim-clock-second-hand"
+        #secondHand
+        d="M 397.317,63.51744 395.91962,168.4 C 374.575,170.5125 358.2,188.365 358.2,210 c 0,21.635 16.3,39 36.61214,41.47594 L 391.52847,498 h 16.94306 L 405.1868,251.47593 C 425.5,249 441.8,231.635 441.8,210 c 2e-5,-21.635 -16.375,-39.4875 -37.71971,-41.6 L 402.683,63.51744 400,60 Z M 400,190.534 c 10.888,0 19.466,8.866 19.466,19.466 0,10.6 -8.578,19.466 -19.466,19.466 -10.888,0 -19.466,-8.866 -19.466,-19.466 0,-10.6 8.578,-19.466 19.466,-19.466 z"
+        transform="rotate(190.85, 400, 400)"
+      />
+    </svg>
+  </div>
+</div>

package/src/lib/clock-widget/analog-clock/analog-clock.component.scss

@@ -0,0 +1,103 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.analog-clock-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  // Modern aspect ratio approach
+  .aspect-ratio-box {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    aspect-ratio: 1 / 1;
+
+    // Fallback for browsers without aspect-ratio support
+    @supports not (aspect-ratio: 1 / 1) {
+      &::before {
+        content: "";
+        display: block;
+        padding-bottom: 100%;
+      }
+
+      svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+
+      // Clock face styling
+      // circle {
+      //   fill: transparent;
+      //   stroke: var(--mat-sys-outline, #79747e);
+      //   stroke-width: 2;
+      // }
+
+      // Hour markers and tick marks
+      path:not(.clock-hour-hand):not(.clock-minute-hand):not(
+          .clock-second-hand
+        ) {
+        stroke: var(--mat-sys-on-surface, #1d1b20);
+      }
+
+      // Clock hands
+      .clock-hour-hand {
+        fill: var(--mat-sys-on-surface, #1d1b20);
+      }
+
+      .clock-minute-hand {
+        fill: var(--mat-sys-on-surface, #1d1b20);
+      }
+
+      .clock-second-hand {
+        fill: var(--mat-sys-primary, #6750a4);
+      }
+    }
+  }
+}
+
+// Hide second hand when showSeconds is false
+:host:not(.show-seconds) {
+  .clock-second-hand {
+    display: none;
+  }
+}
+
+// Background styling based on hasBackground setting
+:host.has-background {
+  svg circle {
+    fill: var(--mat-sys-surface, #fffbfe);
+  }
+}
+
+// Hover effects
+:host:hover {
+  opacity: 0.8;
+  
+  svg {
+    .clock-hour-hand, .clock-minute-hand {
+      fill: var(--mat-sys-primary, #6750a4);
+    }
+  }
+}
+
+// Host class styling for consistency with digital clock
+:host.clock-widget.analog {
+  container-type: size;
+  container-name: analog-clock;
+}