@dragonworks/ngx-dashboard-widgets 20.0.6 → 20.1.1

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

@@ -1,385 +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 { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle'; // Add this import
-import { LabelWidgetState } from './label-widget.component';
-
-@Component({
-  selector: 'lib-label-state-dialog',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    MatSliderModule,
-    MatSlideToggleModule, // Add this import
-  ],
-  template: `
-    <h2 mat-dialog-title>Label Settings</h2>
-    <mat-dialog-content>
-      <mat-form-field appearance="outline" class="label-text-field">
-        <mat-label>Label Text</mat-label>
-        <input
-          matInput
-          type="text"
-          [value]="label()"
-          (input)="label.set($any($event.target).value)"
-          placeholder="Enter your label text..."
-        />
-      </mat-form-field>
-
-      <!-- Responsive Text Toggle -->
-      <div class="toggle-section">
-        <mat-slide-toggle 
-          [checked]="responsive()"
-          (change)="responsive.set($event.checked)">
-          Responsive Text
-        </mat-slide-toggle>
-        <span class="toggle-description"
-          >Automatically adjust text size to fit the widget</span
-        >
-      </div>
-
-      <!-- Responsive Font Size Constraints (only shown when responsive is enabled) -->
-      @if (responsive()) {
-        <div class="responsive-section">
-          <div class="section-label">Font Size Limits</div>
-          <div class="row-layout">
-            <mat-form-field appearance="outline">
-              <mat-label>Min Size (px)</mat-label>
-              <input
-                matInput
-                type="number"
-                [value]="minFontSize()"
-                (input)="validateAndCorrectMinFontSize(+$any($event.target).value)"
-                (blur)="validateAndCorrectMinFontSize(minFontSize())"
-                min="8"
-                max="24"
-                placeholder="8"
-              />
-              @if (!isMinFontSizeValid() || !isFontSizeRangeValid()) {
-                <mat-error>
-                  @if (!isMinFontSizeValid()) {
-                    Must be between 8-24px
-                  } @else {
-                    Must be less than max size
-                  }
-                </mat-error>
-              } @else {
-                <mat-hint>8-24px range</mat-hint>
-              }
-            </mat-form-field>
-
-            <mat-form-field appearance="outline">
-              <mat-label>Max Size (px)</mat-label>
-              <input
-                matInput
-                type="number"
-                [value]="maxFontSize()"
-                (input)="validateAndCorrectMaxFontSize(+$any($event.target).value)"
-                (blur)="validateAndCorrectMaxFontSize(maxFontSize())"
-                min="16"
-                max="128"
-                placeholder="64"
-              />
-              @if (!isMaxFontSizeValid() || !isFontSizeRangeValid()) {
-                <mat-error>
-                  @if (!isMaxFontSizeValid()) {
-                    Must be between 16-128px
-                  } @else {
-                    Must be greater than min size
-                  }
-                </mat-error>
-              } @else {
-                <mat-hint>16-128px range</mat-hint>
-              }
-            </mat-form-field>
-          </div>
-        </div>
-      }
-
-      <div class="row-layout">
-        <mat-form-field appearance="outline">
-          <mat-label>Font Size (px)</mat-label>
-          <input
-            matInput
-            type="number"
-            [value]="fontSize()"
-            (input)="fontSize.set(+$any($event.target).value)"
-            [disabled]="responsive()"
-            min="8"
-            max="48"
-            placeholder="16"
-          />
-        </mat-form-field>
-
-        <mat-form-field appearance="outline">
-          <mat-label>Alignment</mat-label>
-          <mat-select
-            [value]="alignment()"
-            (selectionChange)="alignment.set($any($event.value))"
-          >
-            <mat-option value="left">Left</mat-option>
-            <mat-option value="center">Center</mat-option>
-            <mat-option value="right">Right</mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-
-      <mat-form-field appearance="outline">
-        <mat-label>Font Weight</mat-label>
-        <mat-select
-          [value]="fontWeight()"
-          (selectionChange)="fontWeight.set($any($event.value))"
-        >
-          <mat-option value="normal">Normal</mat-option>
-          <mat-option value="bold">Bold</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <!-- Opacity Slider -->
-      <div class="slider-section">
-        <div class="slider-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-section">
-        <mat-slide-toggle 
-          [checked]="!transparentBackground()"
-          (change)="onBackgroundToggle($event.checked)">
-          Background
-        </mat-slide-toggle>
-        <span class="toggle-description"
-          >Adds a background behind the text</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() || !isFormValid()">
-        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;
-      }
-
-      .label-text-field {
-        margin-top: 1rem;
-      }
-
-      /* Side-by-side layout for font size and alignment */
-      .row-layout {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1rem;
-        margin-bottom: 1rem;
-      }
-
-      .row-layout mat-form-field {
-        margin-bottom: 0;
-      }
-
-      /* Opacity slider section */
-      .slider-section {
-        margin-bottom: 1.5rem;
-        margin-right: 1rem;
-      }
-
-      .slider-label {
-        display: block;
-        margin-bottom: 0.5rem;
-      }
-
-      mat-slider {
-        width: 100%;
-        display: block;
-      }
-
-      /* Toggle section */
-      .toggle-section {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        margin-bottom: 1rem;
-      }
-
-      .toggle-description {
-        margin: 0;
-      }
-
-      /* Responsive font size section */
-      .responsive-section {
-        margin-bottom: 1.5rem;
-        padding: 1rem;
-        border-radius: 12px;
-        background-color: var(--mat-app-surface-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), 0.05));
-        border: 1px solid var(--mat-app-outline-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), 0.12));
-      }
-
-      .section-label {
-        display: block;
-        margin-bottom: 0.75rem;
-        font-weight: 500;
-        color: var(--mat-app-on-surface-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), 0.6));
-      }
-
-      /* Ensure responsive section row layout has no bottom margin */
-      .responsive-section .row-layout {
-        margin-bottom: 0;
-      }
-    `,
-  ],
-})
-export class LabelStateDialogComponent {
-  private readonly data = inject<LabelWidgetState>(MAT_DIALOG_DATA);
-  private readonly dialogRef = inject(MatDialogRef<LabelStateDialogComponent>);
-
-  // State signals
-  readonly label = signal<string>(this.data.label ?? '');
-  readonly fontSize = signal<number>(this.data.fontSize ?? 16);
-  readonly alignment = signal<'left' | 'center' | 'right'>(
-    this.data.alignment ?? 'center'
-  );
-  readonly fontWeight = signal<'normal' | 'bold'>(
-    this.data.fontWeight ?? 'normal'
-  );
-  readonly opacity = signal<number>(this.data.opacity ?? 1);
-  readonly hasBackground = signal<boolean>(this.data.hasBackground ?? true);
-  readonly transparentBackground = signal<boolean>(!(this.data.hasBackground ?? true));
-  readonly responsive = signal<boolean>(this.data.responsive ?? false);
-  // Responsive font size constraints
-  readonly minFontSize = signal<number>(this.data.minFontSize ?? 8);
-  readonly maxFontSize = signal<number>(this.data.maxFontSize ?? 64);
-
-  // Store original values for comparison
-  private readonly originalLabel = this.data.label ?? '';
-  private readonly originalFontSize = this.data.fontSize ?? 16;
-  private readonly originalAlignment = this.data.alignment ?? 'center';
-  private readonly originalFontWeight = this.data.fontWeight ?? 'normal';
-  private readonly originalOpacity = this.data.opacity ?? 1;
-  private readonly originalHasBackground = this.data.hasBackground ?? true;
-  private readonly originalResponsive = this.data.responsive ?? false;
-  private readonly originalMinFontSize = this.data.minFontSize ?? 8;
-  private readonly originalMaxFontSize = this.data.maxFontSize ?? 64;
-
-  // Validation computed properties
-  readonly isMinFontSizeValid = computed(() => {
-    const min = this.minFontSize();
-    return min >= 8 && min <= 24;
-  });
-
-  readonly isMaxFontSizeValid = computed(() => {
-    const max = this.maxFontSize();
-    return max >= 16 && max <= 128;
-  });
-
-  readonly isFontSizeRangeValid = computed(() =>
-    this.minFontSize() < this.maxFontSize()
-  );
-
-  readonly isFormValid = computed(() =>
-    this.isMinFontSizeValid() &&
-    this.isMaxFontSizeValid() &&
-    this.isFontSizeRangeValid()
-  );
-
-  // Computed values
-  readonly hasChanged = computed(
-    () =>
-      this.label() !== this.originalLabel ||
-      this.fontSize() !== this.originalFontSize ||
-      this.alignment() !== this.originalAlignment ||
-      this.fontWeight() !== this.originalFontWeight ||
-      this.opacity() !== this.originalOpacity ||
-      this.hasBackground() !== this.originalHasBackground ||
-      this.responsive() !== this.originalResponsive ||
-      this.minFontSize() !== this.originalMinFontSize ||
-      this.maxFontSize() !== this.originalMaxFontSize
-  );
-
-  formatOpacity(value: number): number {
-    return Math.round(value * 100);
-  }
-
-  formatOpacitySlider = (value: number): string => {
-    return `${Math.round(value * 100)}%`;
-  };
-
-  // Validation methods with robust min < max enforcement
-  validateAndCorrectMinFontSize(value: number): void {
-    // Clamp to valid range
-    const corrected = Math.max(8, Math.min(24, value));
-    this.minFontSize.set(corrected);
-    
-    // Ensure min < max with adequate gap
-    if (corrected >= this.maxFontSize()) {
-      const newMax = Math.min(128, corrected + 8); // Ensure at least 8px gap
-      this.maxFontSize.set(newMax);
-    }
-  }
-
-  validateAndCorrectMaxFontSize(value: number): void {
-    // Clamp to valid range
-    const corrected = Math.max(16, Math.min(128, value));
-    this.maxFontSize.set(corrected);
-    
-    // Ensure min < max with adequate gap
-    if (corrected <= this.minFontSize()) {
-      const newMin = Math.max(8, corrected - 8); // Ensure at least 8px gap
-      this.minFontSize.set(newMin);
-    }
-  }
-
-  onBackgroundToggle(hasWhiteBackground: boolean): void {
-    this.hasBackground.set(hasWhiteBackground);
-    this.transparentBackground.set(!hasWhiteBackground);
-  }
-
-  onCancel(): void {
-    this.dialogRef.close();
-  }
-
-  save(): void {
-    this.dialogRef.close({
-      label: this.label(),
-      fontSize: this.fontSize(),
-      alignment: this.alignment(),
-      fontWeight: this.fontWeight(),
-      opacity: this.opacity(),
-      hasBackground: this.hasBackground(),
-      responsive: this.responsive(),
-      minFontSize: this.minFontSize(),
-      maxFontSize: this.maxFontSize(),
-    } as LabelWidgetState);
-  }
-}

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

@@ -1,21 +0,0 @@
-@if (hasContent) {
-<div
-  class="label-widget"
-  [style.fontSize.rem]="state().responsive ? null : state().fontSize! / 16"
-  [style.--widget-opacity]="state().opacity"
-  [class.text-left]="state().alignment === 'left'"
-  [class.text-right]="state().alignment === 'right'"
-  [class.font-bold]="state().fontWeight === 'bold'"
-  [class.has-background]="state().hasBackground"
->
-  @if (state().responsive) {
-    <div class="label-text" responsiveText [minFontSize]="minFontSize()" [maxFontSize]="maxFontSize()">{{ label }}</div>
-  } @else {
-    <div class="label-text">{{ label }}</div>
-  }
-</div>
-} @else {
-<div class="svg-wrapper" [class.has-background]="state().hasBackground">
-  <div class="svg-placeholder" [innerHTML]="safeSvgIcon"></div>
-</div>
-}

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

@@ -1,112 +0,0 @@
-// label-widget.component.scss
-:host {
-  display: block;
-  container-type: size;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-// Shared styles for both widget types
-%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;
-  }
-}
-
-// Text widget styles
-.label-widget {
-  @extend %widget-base;
-
-  overflow: hidden;
-  container-type: size;
-  padding: var(--mat-sys-spacing-4);
-  color: var(--mat-sys-on-surface-variant, #6c757d);
-
-  opacity: var(--widget-opacity, 1);
-
-  &.text-left {
-    justify-content: flex-start;
-  }
-
-  &.text-right {
-    justify-content: flex-end;
-  }
-
-  &.has-background {
-    color: var(--mat-sys-on-surface, #1f1f1f);
-  }
-
-  &:hover {
-    opacity: 0.3;
-    color: var(--mat-sys-primary, #6750a4);
-  }
-}
-
-.label-text {
-  width: 100%;
-  text-align: center;
-  overflow-wrap: break-word;
-  transition: color 0.2s ease;
-
-  .text-left & {
-    text-align: left;
-  }
-
-  .text-right & {
-    text-align: right;
-  }
-
-  .font-bold & {
-    font-weight: bold;
-  }
-
-  // When using responsive text directive, don't break words
-  &[responsiveText] {
-    overflow-wrap: normal;
-  }
-}
-
-// SVG widget 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;
-    fill: var(--mat-sys-on-surface-variant, #6c757d);
-    transition: fill 0.2s ease;
-  }
-
-  .has-background & ::ng-deep svg {
-    fill: var(--mat-sys-on-surface, #1f1f1f);
-  }
-}
-
-.svg-wrapper:hover .svg-placeholder {
-  // opacity: 1; // Full opacity on hover for vibrant primary color
-
-  ::ng-deep svg {
-    fill: var(--mat-sys-primary, #6750a4);
-  }
-}

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

@@ -1,96 +0,0 @@
-// label-widget.component.ts
-import { Component, inject, signal, computed } from '@angular/core';
-import { Widget, WidgetMetadata } from '@dragonworks/ngx-dashboard';
-import { svgIcon } from './label-widget.metadata';
-import { DomSanitizer } from '@angular/platform-browser';
-import { LabelStateDialogComponent } from './label-state-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
-import { ResponsiveTextDirective } from '../directives/responsive-text.directive';
-
-export interface LabelWidgetState {
-  label: string;
-  fontSize?: number;
-  alignment?: 'left' | 'center' | 'right';
-  fontWeight?: 'normal' | 'bold';
-  opacity?: number;
-  hasBackground?: boolean;
-  responsive?: boolean;
-  // Font size constraints for responsive text (px values)
-  minFontSize?: number; // Default: 8px (accessible minimum)
-  maxFontSize?: number; // Default: 64px (practical widget maximum)
-}
-
-@Component({
-  selector: 'ngx-dashboard-label-widget',
-  imports: [ResponsiveTextDirective],
-  templateUrl: './label-widget.component.html',
-  styleUrl: './label-widget.component.scss',
-})
-export class LabelWidgetComponent implements Widget {
-  static metadata: WidgetMetadata = {
-    widgetTypeid: '@default/label-widget',
-    name: 'Label',
-    description: 'A generic text label',
-    svgIcon,
-  };
-
-  readonly #sanitizer = inject(DomSanitizer);
-  readonly #dialog = inject(MatDialog);
-
-  safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon);
-
-  state = signal<LabelWidgetState>({
-    label: '',
-    fontSize: 16,
-    alignment: 'center',
-    fontWeight: 'normal',
-    opacity: 1,
-    hasBackground: true,
-    responsive: false,
-    minFontSize: 8, // Accessible minimum for responsive text
-    maxFontSize: 64, // Practical maximum for widget display
-  });
-
-  dashboardSetState(state?: unknown) {
-    if (state) {
-      this.state.update((current) => ({
-        ...current,
-        ...(state as LabelWidgetState),
-      }));
-    }
-  }
-
-  dashboardGetState(): LabelWidgetState {
-    return { ...this.state() };
-  }
-
-  dashboardEditState(): void {
-    const dialogRef = this.#dialog.open(LabelStateDialogComponent, {
-      data: this.dashboardGetState(),
-      width: '400px',
-      maxWidth: '90vw',
-      disableClose: false,
-      autoFocus: false,
-    });
-
-    dialogRef
-      .afterClosed()
-      .subscribe((result: LabelWidgetState | undefined) => {
-        if (result) {
-          this.state.set(result);
-        }
-      });
-  }
-
-  get hasContent(): boolean {
-    return !!this.state().label?.trim();
-  }
-
-  get label(): string {
-    return this.state().label?.trim();
-  }
-
-  // Computed properties for responsive font size limits with fallbacks
-  readonly minFontSize = computed(() => this.state().minFontSize ?? 8);
-  readonly maxFontSize = computed(() => this.state().maxFontSize ?? 64);
-}

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

@@ -1,3 +0,0 @@
-// label-widget.metadata.ts
-export const svgIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M280-280h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm-80 480q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>';

package/src/public-api.ts

@@ -1,7 +0,0 @@
-/*
- * Public API Surface of ngx-dashboard-widgets
- */
-export * from './lib/arrow-widget/arrow-widget.component';
-export * from './lib/label-widget/label-widget.component';
-export * from './lib/clock-widget/clock-widget.component';
-export * from './lib/directives/responsive-text.directive';

package/tsconfig.lib.json

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

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

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