@dragonworks/ngx-dashboard-widgets 20.0.4 → 20.0.6

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

@@ -0,0 +1,120 @@
+import { Component, ChangeDetectionStrategy, input, inject, signal, computed, DestroyRef, viewChild, ElementRef, Renderer2, effect } from '@angular/core';
+
+@Component({
+  selector: 'ngx-analog-clock',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './analog-clock.component.html',
+  styleUrl: './analog-clock.component.scss',
+  host: {
+    '[class.has-background]': 'hasBackground()',
+    '[class.show-seconds]': 'showSeconds()',
+    'class': 'clock-widget analog'
+  }
+})
+export class AnalogClockComponent {
+  readonly #destroyRef = inject(DestroyRef);
+  readonly #renderer = inject(Renderer2);
+
+  // Inputs
+  hasBackground = input<boolean>(false);
+  showSeconds = input<boolean>(true);
+
+  // ViewChild references for clock hands
+  hourHand = viewChild<ElementRef<SVGPathElement>>('hourHand');
+  minuteHand = viewChild<ElementRef<SVGPathElement>>('minuteHand');
+  secondHand = viewChild<ElementRef<SVGPathElement>>('secondHand');
+
+  // Time tracking
+  currentTime = signal(new Date());
+
+  // Computed rotation signals
+  secondHandRotation = computed(() => {
+    const seconds = this.currentTime().getSeconds();
+    return seconds * 6; // 360° / 60s = 6° per second
+  });
+
+  minuteHandRotation = computed(() => {
+    const time = this.currentTime();
+    const minutes = time.getMinutes();
+    const seconds = time.getSeconds();
+    return minutes * 6 + seconds / 10; // Smooth minute hand movement
+  });
+
+  hourHandRotation = computed(() => {
+    const time = this.currentTime();
+    const hours = time.getHours() % 12;
+    const minutes = time.getMinutes();
+    const seconds = time.getSeconds();
+    return hours * 30 + minutes / 2 + seconds / 120; // Smooth hour hand movement
+  });
+
+  #intervalId: number | null = null;
+
+  constructor() {
+    // Set up time update timer
+    this.#startTimer();
+    
+    // Clean up timer on component destruction
+    this.#destroyRef.onDestroy(() => {
+      this.#stopTimer();
+    });
+
+    // Update DOM when rotations change
+    effect(() => {
+      this.#updateClockHands();
+    });
+  }
+
+  #startTimer(): void {
+    // Sync to the next second boundary for smooth start
+    const now = new Date();
+    const msUntilNextSecond = 1000 - now.getMilliseconds();
+    
+    setTimeout(() => {
+      this.currentTime.set(new Date());
+      
+      // Start the regular 1-second interval
+      this.#intervalId = window.setInterval(() => {
+        this.currentTime.set(new Date());
+      }, 1000);
+    }, msUntilNextSecond);
+  }
+
+  #stopTimer(): void {
+    if (this.#intervalId !== null) {
+      clearInterval(this.#intervalId);
+      this.#intervalId = null;
+    }
+  }
+
+  #updateClockHands(): void {
+    const hourElement = this.hourHand()?.nativeElement;
+    const minuteElement = this.minuteHand()?.nativeElement;
+    const secondElement = this.secondHand()?.nativeElement;
+
+    if (hourElement) {
+      this.#renderer.setAttribute(
+        hourElement,
+        'transform',
+        `rotate(${this.hourHandRotation()}, 400, 400)`
+      );
+    }
+
+    if (minuteElement) {
+      this.#renderer.setAttribute(
+        minuteElement,
+        'transform',
+        `rotate(${this.minuteHandRotation()}, 400, 400)`
+      );
+    }
+
+    if (secondElement && this.showSeconds()) {
+      this.#renderer.setAttribute(
+        secondElement,
+        'transform',
+        `rotate(${this.secondHandRotation()}, 400, 400)`
+      );
+    }
+  }
+}

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

@@ -0,0 +1,170 @@
+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 { MatRadioModule } from '@angular/material/radio';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { ClockWidgetState } from './clock-widget.component';
+
+@Component({
+  selector: 'demo-clock-state-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatRadioModule,
+    MatSlideToggleModule,
+  ],
+  template: `
+    <h2 mat-dialog-title>Clock Settings</h2>
+    <mat-dialog-content>
+      <div class="mode-selection">
+        <label class="section-label">Display Mode</label>
+        <mat-radio-group
+          [value]="mode()"
+          (change)="mode.set($any($event.value))"
+        >
+          <mat-radio-button value="digital">Digital</mat-radio-button>
+          <mat-radio-button value="analog">Analog</mat-radio-button>
+        </mat-radio-group>
+      </div>
+
+      <!-- Time Format (only for digital mode) -->
+      @if (mode() === 'digital') {
+      <div class="format-selection">
+        <label class="section-label">Time Format</label>
+        <mat-radio-group
+          [value]="timeFormat()"
+          (change)="timeFormat.set($any($event.value))"
+        >
+          <mat-radio-button value="24h">24 Hour (14:30:45)</mat-radio-button>
+          <mat-radio-button value="12h">12 Hour (2:30:45 PM)</mat-radio-button>
+        </mat-radio-group>
+      </div>
+      }
+
+      <!-- Show Seconds Toggle (for both digital and analog modes) -->
+      <div class="toggle-section">
+        <mat-slide-toggle 
+          [checked]="showSeconds()"
+          (change)="showSeconds.set($event.checked)">
+          Show Seconds
+        </mat-slide-toggle>
+        <span class="toggle-description">
+          @if (mode() === 'digital') {
+            Display seconds in the time
+          } @else {
+            Show the second hand on the clock
+          }
+        </span>
+      </div>
+
+      <!-- Background Toggle -->
+      <div class="toggle-section">
+        <mat-slide-toggle 
+          [checked]="hasBackground()"
+          (change)="hasBackground.set($event.checked)">
+          Background
+        </mat-slide-toggle>
+        <span class="toggle-description"
+          >Adds a background behind the clock</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;
+      }
+
+      .mode-selection,
+      .format-selection {
+        margin-top: 1rem;
+        margin-bottom: 2rem;
+      }
+
+      .section-label {
+        display: block;
+        margin-bottom: 0.75rem;
+        font-weight: 500;
+      }
+
+      mat-radio-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      mat-radio-button {
+        margin: 0;
+      }
+
+      /* Toggle section */
+      .toggle-section {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .toggle-description {
+        margin: 0;
+      }
+    `,
+  ],
+})
+export class ClockStateDialogComponent {
+  private readonly data = inject<ClockWidgetState>(MAT_DIALOG_DATA);
+  private readonly dialogRef = inject(MatDialogRef<ClockStateDialogComponent>);
+
+  // State signals
+  readonly mode = signal<'analog' | 'digital'>(this.data.mode ?? 'digital');
+  readonly hasBackground = signal<boolean>(this.data.hasBackground ?? true);
+  readonly timeFormat = signal<'12h' | '24h'>(this.data.timeFormat ?? '24h');
+  readonly showSeconds = signal<boolean>(this.data.showSeconds ?? true);
+
+  // Store original values for comparison
+  private readonly originalMode = this.data.mode ?? 'digital';
+  private readonly originalHasBackground = this.data.hasBackground ?? true;
+  private readonly originalTimeFormat = this.data.timeFormat ?? '24h';
+  private readonly originalShowSeconds = this.data.showSeconds ?? true;
+
+  // Computed values
+  readonly hasChanged = computed(
+    () =>
+      this.mode() !== this.originalMode ||
+      this.hasBackground() !== this.originalHasBackground ||
+      this.timeFormat() !== this.originalTimeFormat ||
+      this.showSeconds() !== this.originalShowSeconds
+  );
+
+  onCancel(): void {
+    this.dialogRef.close();
+  }
+
+  save(): void {
+    this.dialogRef.close({
+      mode: this.mode(),
+      hasBackground: this.hasBackground(),
+      timeFormat: this.timeFormat(),
+      showSeconds: this.showSeconds(),
+    } as ClockWidgetState);
+  }
+}

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

@@ -0,0 +1,16 @@
+@if (isDigital) {
+  <ngx-digital-clock
+    [timeFormat]="state().timeFormat || '24h'"
+    [showSeconds]="state().showSeconds ?? true"
+    [hasBackground]="state().hasBackground ?? false"
+  />
+} @else if (isAnalog) {
+  <ngx-analog-clock
+    [hasBackground]="state().hasBackground ?? false"
+    [showSeconds]="state().showSeconds ?? true"
+  />
+} @else {
+<div class="svg-wrapper" [class.has-background]="state().hasBackground">
+  <div class="svg-placeholder" [innerHTML]="safeSvgIcon"></div>
+</div>
+}

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

@@ -0,0 +1,160 @@
+// clock-widget.component.scss
+:host {
+  display: block;
+  container-type: size;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+// Shared styles for all widget states
+%widget-base {
+  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);
+
+  &.has-background {
+    background-color: var(--mat-sys-surface-container-high);
+    border-radius: 4px;
+  }
+}
+
+// Clock widget styles
+.clock-widget {
+  @extend %widget-base;
+  padding: var(--mat-sys-spacing-4);
+  color: var(--mat-sys-on-surface-variant, #6c757d);
+
+  &.has-background {
+    color: var(--mat-sys-on-surface, #1f1f1f);
+  }
+
+  &:hover {
+    opacity: 0.8;
+    color: var(--mat-sys-primary, #6750a4);
+  }
+}
+
+// Digital clock styles moved to digital-clock.component.scss
+
+// Analog clock styles
+.analog-clock {
+  width: min(80cqw, 80cqh);
+  aspect-ratio: 1 / 1;
+  position: relative;
+}
+
+.clock-face {
+  width: 100%;
+  height: 100%;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  position: relative;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    background-color: currentColor;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  // 12 o'clock marker
+  &::before {
+    width: 2px;
+    height: 10%;
+    top: 0;
+  }
+
+  // 6 o'clock marker
+  &::after {
+    width: 2px;
+    height: 10%;
+    bottom: 0;
+  }
+}
+
+.hour-hand,
+.minute-hand {
+  position: absolute;
+  background-color: currentColor;
+  left: 50%;
+  bottom: 50%;
+  transform-origin: 50% 100%;
+  border-radius: 2px;
+}
+
+.hour-hand {
+  width: 4px;
+  height: 25%;
+  transform: translateX(-50%) rotate(30deg); // 1 o'clock position
+}
+
+.minute-hand {
+  width: 2px;
+  height: 35%;
+  transform: translateX(-50%) rotate(90deg); // 15 minutes position
+}
+
+.center-dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: currentColor;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// SVG placeholder styles
+.svg-wrapper {
+  @extend %widget-base;
+  overflow: hidden;
+}
+
+.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;
+
+  ::ng-deep svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+
+    // Hour markers and tick marks
+    .clock-face {
+      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);
+    }
+  }
+
+  .has-background & ::ng-deep svg {
+    // Background circle (matching live analog clock behavior)
+    circle {
+      fill: var(--mat-sys-surface, #fffbfe);
+    }
+  }
+}
+

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

@@ -0,0 +1,87 @@
+// clock-widget.component.ts
+import { Component, inject, signal } from '@angular/core';
+import { Widget, WidgetMetadata } from '@dragonworks/ngx-dashboard';
+import { svgIcon } from './clock-widget.metadata';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ClockStateDialogComponent } from './clock-state-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { DigitalClockComponent } from './digital-clock/digital-clock.component';
+import { AnalogClockComponent } from './analog-clock/analog-clock.component';
+
+export interface ClockWidgetState {
+  mode: 'analog' | 'digital';
+  hasBackground?: boolean;
+  timeFormat?: '12h' | '24h';
+  showSeconds?: boolean;
+}
+
+@Component({
+  selector: 'ngx-dashboard-clock-widget',
+  standalone: true,
+  imports: [DigitalClockComponent, AnalogClockComponent],
+  templateUrl: './clock-widget.component.html',
+  styleUrl: './clock-widget.component.scss',
+})
+export class ClockWidgetComponent implements Widget {
+  static metadata: WidgetMetadata = {
+    widgetTypeid: '@default/clock-widget',
+    name: 'Clock',
+    description: 'Display time in analog or digital format',
+    svgIcon,
+  };
+
+  readonly #sanitizer = inject(DomSanitizer);
+  readonly #dialog = inject(MatDialog);
+
+  safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon);
+
+  state = signal<ClockWidgetState>({
+    mode: 'analog',
+    hasBackground: true,
+    timeFormat: '24h',
+    showSeconds: true,
+  });
+
+  constructor() {
+    // No timer logic needed - DigitalClock manages its own time
+  }
+
+  dashboardSetState(state?: unknown) {
+    if (state) {
+      this.state.update((current) => ({
+        ...current,
+        ...(state as ClockWidgetState),
+      }));
+    }
+  }
+
+  dashboardGetState(): ClockWidgetState {
+    return { ...this.state() };
+  }
+
+  dashboardEditState(): void {
+    const dialogRef = this.#dialog.open(ClockStateDialogComponent, {
+      data: this.dashboardGetState(),
+      width: '400px',
+      maxWidth: '90vw',
+      disableClose: false,
+      autoFocus: false,
+    });
+
+    dialogRef
+      .afterClosed()
+      .subscribe((result: ClockWidgetState | undefined) => {
+        if (result) {
+          this.state.set(result);
+        }
+      });
+  }
+
+  get isAnalog(): boolean {
+    return this.state().mode === 'analog';
+  }
+
+  get isDigital(): boolean {
+    return this.state().mode === 'digital';
+  }
+}

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

@@ -0,0 +1,42 @@
+export const svgIcon = `
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" preserveAspectRatio="xMidYMid meet">
+  <use transform="matrix(-1,0,0,1,800,0)" href="#one-half" />
+  <g id="one-half">
+    <g id="one-fourth">
+      <path d="m400 40v107" stroke-width="26.7" stroke="currentColor" />
+      <g id="one-twelfth">
+        <path
+          d="m580 88.233-42.5 73.612"
+          stroke-width="26.7"
+          stroke="currentColor"
+        />
+        <g id="one-thirtieth">
+          <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>
+  <path
+    class="clock-hour-hand"
+    id="anim-clock-hour-hand"
+    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"
+    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)"
+  />
+</svg>
+`;