@dragonworks/ngx-dashboard-widgets 20.0.6 → 20.1.0

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

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

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

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

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

@@ -1,42 +0,0 @@
-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>
-`;