@dragonworks/ngx-dashboard-widgets 20.0.6 → 20.1.1

package/fesm2022/dragonworks-ngx-dashboard-widgets.mjs

@@ -0,0 +1,2251 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, Component, input, numberAttribute, booleanAttribute, ElementRef, NgZone, PLATFORM_ID, DestroyRef, Directive, ChangeDetectionStrategy, Renderer2, viewChild, effect, LOCALE_ID, afterNextRender } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i7 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i5$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3$1 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import { from, map, of } from 'rxjs';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+// arrow-widget.metadata.ts
+const svgIcon$3 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M320-120v-320H120l360-440 360 440H640v320H320Zm80-80h160v-320h111L480-754 289-520h111v320Zm80-320Z"/></svg>';
+
+class ArrowStateDialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef = inject((MatDialogRef));
+    // State signals
+    direction = signal(this.data.direction, ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    opacity = signal(this.data.opacity ?? 1, ...(ngDevMode ? [{ debugName: "opacity" }] : []));
+    hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
+    transparentBackground = signal(!(this.data.hasBackground ?? true), ...(ngDevMode ? [{ debugName: "transparentBackground" }] : []));
+    // Store original values for comparison
+    originalDirection = this.data.direction;
+    originalOpacity = this.data.opacity ?? 1;
+    originalHasBackground = this.data.hasBackground ?? true;
+    // Computed values
+    rotation = computed(() => {
+        const rotationMap = {
+            up: 0,
+            right: 90,
+            down: 180,
+            left: 270,
+        };
+        return rotationMap[this.direction()];
+    }, ...(ngDevMode ? [{ debugName: "rotation" }] : []));
+    rotationTransform = computed(() => `rotate(${this.rotation()}deg)`, ...(ngDevMode ? [{ debugName: "rotationTransform" }] : []));
+    directionName = computed(() => {
+        const nameMap = {
+            up: 'Up',
+            right: 'Right',
+            down: 'Down',
+            left: 'Left',
+        };
+        return nameMap[this.direction()];
+    }, ...(ngDevMode ? [{ debugName: "directionName" }] : []));
+    hasChanged = computed(() => this.direction() !== this.originalDirection ||
+        this.opacity() !== this.originalOpacity ||
+        this.hasBackground() !== this.originalHasBackground, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
+    formatOpacity(value) {
+        return Math.round(value * 100);
+    }
+    onBackgroundToggle(hasBackground) {
+        this.hasBackground.set(hasBackground);
+        this.transparentBackground.set(!hasBackground);
+    }
+    onCancel() {
+        this.dialogRef.close();
+    }
+    save() {
+        this.dialogRef.close({
+            direction: this.direction(),
+            opacity: this.opacity(),
+            hasBackground: this.hasBackground(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrowStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: ArrowStateDialogComponent, isStandalone: true, selector: "lib-arrow-state-dialog", ngImport: i0, 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>
+  `, isInline: true, 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}.slider-field{margin-bottom:1.5rem;margin-right:1rem}.field-label{display:block;margin-bottom:.5rem}mat-slider{width:100%;display:block}.toggle-field{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-hint{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrowStateDialogComponent, decorators: [{
+            type: Component,
+            args: [{ 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}.slider-field{margin-bottom:1.5rem;margin-right:1rem}.field-label{display:block;margin-bottom:.5rem}mat-slider{width:100%;display:block}.toggle-field{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-hint{margin:0}\n"] }]
+        }] });
+
+// arrow-widget.component.ts
+class ArrowWidgetComponent {
+    static metadata = {
+        widgetTypeid: '@ngx-dashboard/arrow-widget',
+        name: 'Arrow',
+        description: 'A generic arrow',
+        svgIcon: svgIcon$3,
+    };
+    #sanitizer = inject(DomSanitizer);
+    #dialog = inject(MatDialog);
+    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon$3);
+    state = signal({
+        direction: 'up',
+        opacity: 0.3,
+        hasBackground: true,
+    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    // Computed rotation
+    rotationAngle = computed(() => {
+        const rotationMap = {
+            up: 0,
+            right: 90,
+            down: 180,
+            left: 270,
+        };
+        return rotationMap[this.state().direction];
+    }, ...(ngDevMode ? [{ debugName: "rotationAngle" }] : []));
+    dashboardSetState(state) {
+        if (state) {
+            this.state.update((current) => ({
+                ...current,
+                ...state,
+            }));
+        }
+    }
+    dashboardGetState() {
+        return this.state();
+    }
+    dashboardEditState() {
+        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);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrowWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: ArrowWidgetComponent, isStandalone: true, selector: "ngx-dashboard-arrow-widget", ngImport: i0, template: "<!-- arrow-widget.component.html -->\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div\r\n    class=\"svg-placeholder\"\r\n    [innerHTML]=\"safeSvgIcon\"\r\n    [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\r\n    [style.opacity]=\"state().opacity\"\r\n  ></div>\r\n</div>\r\n", styles: [":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)}.svg-wrapper.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrowWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dashboard-arrow-widget', imports: [], template: "<!-- arrow-widget.component.html -->\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div\r\n    class=\"svg-placeholder\"\r\n    [innerHTML]=\"safeSvgIcon\"\r\n    [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\r\n    [style.opacity]=\"state().opacity\"\r\n  ></div>\r\n</div>\r\n", styles: [":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)}.svg-wrapper.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] }]
+        }] });
+
+// label-widget.metadata.ts
+const svgIcon$2 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" 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>';
+
+class LabelStateDialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef = inject((MatDialogRef));
+    // State signals
+    label = signal(this.data.label ?? '', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    fontSize = signal(this.data.fontSize ?? 16, ...(ngDevMode ? [{ debugName: "fontSize" }] : []));
+    alignment = signal(this.data.alignment ?? 'center', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    fontWeight = signal(this.data.fontWeight ?? 'normal', ...(ngDevMode ? [{ debugName: "fontWeight" }] : []));
+    opacity = signal(this.data.opacity ?? 1, ...(ngDevMode ? [{ debugName: "opacity" }] : []));
+    hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
+    transparentBackground = signal(!(this.data.hasBackground ?? true), ...(ngDevMode ? [{ debugName: "transparentBackground" }] : []));
+    responsive = signal(this.data.responsive ?? false, ...(ngDevMode ? [{ debugName: "responsive" }] : []));
+    // Responsive font size constraints
+    minFontSize = signal(this.data.minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : []));
+    maxFontSize = signal(this.data.maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : []));
+    // Store original values for comparison
+    originalLabel = this.data.label ?? '';
+    originalFontSize = this.data.fontSize ?? 16;
+    originalAlignment = this.data.alignment ?? 'center';
+    originalFontWeight = this.data.fontWeight ?? 'normal';
+    originalOpacity = this.data.opacity ?? 1;
+    originalHasBackground = this.data.hasBackground ?? true;
+    originalResponsive = this.data.responsive ?? false;
+    originalMinFontSize = this.data.minFontSize ?? 8;
+    originalMaxFontSize = this.data.maxFontSize ?? 64;
+    // Validation computed properties
+    isMinFontSizeValid = computed(() => {
+        const min = this.minFontSize();
+        return min >= 8 && min <= 24;
+    }, ...(ngDevMode ? [{ debugName: "isMinFontSizeValid" }] : []));
+    isMaxFontSizeValid = computed(() => {
+        const max = this.maxFontSize();
+        return max >= 16 && max <= 128;
+    }, ...(ngDevMode ? [{ debugName: "isMaxFontSizeValid" }] : []));
+    isFontSizeRangeValid = computed(() => this.minFontSize() < this.maxFontSize(), ...(ngDevMode ? [{ debugName: "isFontSizeRangeValid" }] : []));
+    isFormValid = computed(() => this.isMinFontSizeValid() &&
+        this.isMaxFontSizeValid() &&
+        this.isFontSizeRangeValid(), ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    // Computed values
+    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, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
+    formatOpacity(value) {
+        return Math.round(value * 100);
+    }
+    formatOpacitySlider = (value) => {
+        return `${Math.round(value * 100)}%`;
+    };
+    // Validation methods with robust min < max enforcement
+    validateAndCorrectMinFontSize(value) {
+        // 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) {
+        // 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) {
+        this.hasBackground.set(hasWhiteBackground);
+        this.transparentBackground.set(!hasWhiteBackground);
+    }
+    onCancel() {
+        this.dialogRef.close();
+    }
+    save() {
+        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(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LabelStateDialogComponent, isStandalone: true, selector: "lib-label-state-dialog", ngImport: i0, 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>
+  `, isInline: true, 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}.row-layout{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.row-layout mat-form-field{margin-bottom:0}.slider-section{margin-bottom:1.5rem;margin-right:1rem}.slider-label{display:block;margin-bottom:.5rem}mat-slider{width:100%;display:block}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.toggle-description{margin:0}.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), .05));border:1px solid var(--mat-app-outline-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .12))}.section-label{display:block;margin-bottom:.75rem;font-weight:500;color:var(--mat-app-on-surface-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .6))}.responsive-section .row-layout{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelStateDialogComponent, decorators: [{
+            type: Component,
+            args: [{ 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}.row-layout{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.row-layout mat-form-field{margin-bottom:0}.slider-section{margin-bottom:1.5rem;margin-right:1rem}.slider-label{display:block;margin-bottom:.5rem}mat-slider{width:100%;display:block}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.toggle-description{margin:0}.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), .05));border:1px solid var(--mat-app-outline-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .12))}.section-label{display:block;margin-bottom:.75rem;font-weight:500;color:var(--mat-app-on-surface-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .6))}.responsive-section .row-layout{margin-bottom:0}\n"] }]
+        }] });
+
+/**
+ * Directive that automatically adjusts font size to fit text within its parent container.
+ * Uses canvas-based measurement for performance and DOM verification for accuracy.
+ *
+ * @example
+ * <div class="container">
+ *   <span responsiveText [minFontSize]="12" [maxFontSize]="72">Dynamic text here</span>
+ * </div>
+ */
+class ResponsiveTextDirective {
+    /* ───────────────────────── Inputs with transforms ─────────────── */
+    /** Minimum font-size in pixels (accessibility floor) */
+    minFontSize = input(8, ...(ngDevMode ? [{ debugName: "minFontSize", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Maximum font-size in pixels (layout ceiling) */
+    maxFontSize = input(512, ...(ngDevMode ? [{ debugName: "maxFontSize", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /**
+     * Line-height: pass a multiplier (e.g. 1.1) or absolute px value.
+     * For single-line text a multiplier < 10 is treated as unitless.
+     */
+    lineHeight = input(1.1, ...(ngDevMode ? [{ debugName: "lineHeight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Whether to observe text mutations after first render */
+    observeMutations = input(true, ...(ngDevMode ? [{ debugName: "observeMutations", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Debounce delay in ms for resize/mutation callbacks */
+    debounceMs = input(16, ...(ngDevMode ? [{ debugName: "debounceMs", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /* ───────────────────────── Private state ───────────────────────── */
+    el = inject(ElementRef);
+    zone = inject(NgZone);
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    // Canvas context - lazy initialization
+    _ctx;
+    get ctx() {
+        if (!this._ctx) {
+            const canvas = document.createElement('canvas');
+            this._ctx = canvas.getContext('2d', {
+                willReadFrequently: true,
+                alpha: false,
+            });
+        }
+        return this._ctx;
+    }
+    ro;
+    mo;
+    fitTimeout;
+    // Cache for performance
+    lastText = '';
+    lastMaxW = 0;
+    lastMaxH = 0;
+    lastFontSize = 0;
+    constructor() {
+        // Set up cleanup on component destruction using modern DestroyRef
+        this.destroyRef.onDestroy(() => {
+            this.cleanup();
+        });
+    }
+    ngAfterViewInit() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Set initial styles
+        const span = this.el.nativeElement;
+        span.style.transition = 'font-size 0.1s ease-out';
+        // All observer callbacks run outside Angular's zone
+        this.zone.runOutsideAngular(() => {
+            this.fit();
+            this.observeResize();
+            if (this.observeMutations()) {
+                this.observeText();
+            }
+        });
+    }
+    /* ───────────────────── Core fitting logic ───────────────────── */
+    /**
+     * Debounced fit handler to prevent excessive recalculations
+     */
+    requestFit = () => {
+        if (this.fitTimeout) {
+            cancelAnimationFrame(this.fitTimeout);
+        }
+        this.fitTimeout = requestAnimationFrame(() => {
+            this.fit();
+        });
+    };
+    /**
+     * Recalculate & apply the ideal font-size
+     */
+    fit = () => {
+        const span = this.el.nativeElement;
+        const parent = span.parentElement;
+        if (!parent)
+            return;
+        const text = span.textContent?.trim() || '';
+        if (!text) {
+            span.style.fontSize = `${this.minFontSize()}px`;
+            return;
+        }
+        const { maxW, maxH } = this.getAvailableSpace(parent);
+        // Check cache to avoid redundant calculations
+        if (text === this.lastText &&
+            maxW === this.lastMaxW &&
+            maxH === this.lastMaxH &&
+            this.lastFontSize > 0) {
+            return;
+        }
+        // Calculate with conservative buffer for sub-pixel accuracy
+        const ideal = this.calcFit(text, maxW * 0.98, maxH * 0.98);
+        span.style.fontSize = `${ideal}px`;
+        // DOM verification pass
+        this.verifyFit(span, maxW, maxH, ideal);
+        // Update cache
+        this.lastText = text;
+        this.lastMaxW = maxW;
+        this.lastMaxH = maxH;
+        this.lastFontSize = parseFloat(span.style.fontSize);
+    };
+    /**
+     * Calculate available space accounting for padding and borders
+     */
+    getAvailableSpace(parent) {
+        const cs = getComputedStyle(parent);
+        const maxW = parent.clientWidth -
+            parseFloat(cs.paddingLeft) -
+            parseFloat(cs.paddingRight);
+        const maxH = parent.clientHeight -
+            parseFloat(cs.paddingTop) -
+            parseFloat(cs.paddingBottom);
+        return { maxW: Math.max(0, maxW), maxH: Math.max(0, maxH) };
+    }
+    /**
+     * DOM-based verification to handle sub-pixel discrepancies
+     */
+    verifyFit(span, maxW, maxH, ideal) {
+        // Simple synchronous verification
+        if (span.scrollWidth > maxW || span.scrollHeight > maxH) {
+            let safe = ideal;
+            let iterations = 0;
+            const maxIterations = 10;
+            while (iterations < maxIterations &&
+                safe > this.minFontSize() &&
+                (span.scrollWidth > maxW || span.scrollHeight > maxH)) {
+                safe -= 0.25;
+                span.style.fontSize = `${safe}px`;
+                iterations++;
+            }
+            // Update cache with verified size
+            this.lastFontSize = safe;
+        }
+    }
+    /* ───────────────────── Binary search algorithm ────────────────── */
+    /**
+     * Binary search for optimal font size using canvas measurements
+     */
+    calcFit(text, maxW, maxH, precision = 0.1) {
+        if (maxW <= 0 || maxH <= 0)
+            return this.minFontSize();
+        const computedStyle = getComputedStyle(this.el.nativeElement);
+        const fontFamily = computedStyle.fontFamily || 'sans-serif';
+        const fontWeight = computedStyle.fontWeight || '400';
+        let lo = this.minFontSize();
+        let hi = this.maxFontSize();
+        let bestFit = this.minFontSize();
+        while (hi - lo > precision) {
+            const mid = (hi + lo) / 2;
+            this.ctx.font = `${fontWeight} ${mid}px ${fontFamily}`;
+            const metrics = this.ctx.measureText(text);
+            const width = metrics.width;
+            // Calculate height based on available metrics
+            const height = this.calculateTextHeight(metrics, mid);
+            if (width <= maxW && height <= maxH) {
+                bestFit = mid;
+                lo = mid;
+            }
+            else {
+                hi = mid;
+            }
+        }
+        return Math.floor(bestFit * 100) / 100;
+    }
+    /**
+     * Calculate text height from metrics
+     */
+    calculateTextHeight(metrics, fontSize) {
+        // Use font bounding box metrics if available
+        if (metrics.fontBoundingBoxAscent && metrics.fontBoundingBoxDescent) {
+            return metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
+        }
+        // Fallback to actual bounding box
+        if (metrics.actualBoundingBoxAscent && metrics.actualBoundingBoxDescent) {
+            return metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+        }
+        // Final fallback using line height
+        return this.lineHeight() < 10
+            ? fontSize * this.lineHeight()
+            : this.lineHeight();
+    }
+    /* ───────────────────────── Observers ─────────────────────────── */
+    /**
+     * Observe parent container resizes
+     */
+    observeResize() {
+        if (!('ResizeObserver' in window))
+            return;
+        this.ro = new ResizeObserver((entries) => {
+            // Only trigger if size actually changed
+            const entry = entries[0];
+            if (entry?.contentRect) {
+                this.requestFit();
+            }
+        });
+        const parent = this.el.nativeElement.parentElement;
+        if (parent) {
+            this.ro.observe(parent);
+        }
+    }
+    /**
+     * Observe text content changes
+     */
+    observeText() {
+        if (!('MutationObserver' in window))
+            return;
+        this.mo = new MutationObserver((mutations) => {
+            // Check if text actually changed
+            const hasTextChange = mutations.some((m) => m.type === 'characterData' ||
+                (m.type === 'childList' &&
+                    (m.addedNodes.length > 0 || m.removedNodes.length > 0)));
+            if (hasTextChange) {
+                this.requestFit();
+            }
+        });
+        this.mo.observe(this.el.nativeElement, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    /**
+     * Cleanup resources
+     */
+    cleanup() {
+        this.ro?.disconnect();
+        this.mo?.disconnect();
+        if (this.fitTimeout) {
+            cancelAnimationFrame(this.fitTimeout);
+        }
+        // Clear canvas context
+        this._ctx = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResponsiveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.1", type: ResponsiveTextDirective, isStandalone: true, selector: "[libResponsiveText]", inputs: { minFontSize: { classPropertyName: "minFontSize", publicName: "minFontSize", isSignal: true, isRequired: false, transformFunction: null }, maxFontSize: { classPropertyName: "maxFontSize", publicName: "maxFontSize", isSignal: true, isRequired: false, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, observeMutations: { classPropertyName: "observeMutations", publicName: "observeMutations", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.white-space": "\"nowrap\"", "style.overflow": "\"visible\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libResponsiveText]',
+                    standalone: true,
+                    host: {
+                        '[style.display]': '"block"',
+                        '[style.width]': '"100%"',
+                        '[style.white-space]': '"nowrap"',
+                        '[style.overflow]': '"visible"',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+// label-widget.component.ts
+class LabelWidgetComponent {
+    static metadata = {
+        widgetTypeid: '@ngx-dashboard/label-widget',
+        name: 'Label',
+        description: 'A generic text label',
+        svgIcon: svgIcon$2,
+    };
+    #sanitizer = inject(DomSanitizer);
+    #dialog = inject(MatDialog);
+    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon$2);
+    state = signal({
+        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
+    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    dashboardSetState(state) {
+        if (state) {
+            this.state.update((current) => ({
+                ...current,
+                ...state,
+            }));
+        }
+    }
+    dashboardGetState() {
+        return { ...this.state() };
+    }
+    dashboardEditState() {
+        const dialogRef = this.#dialog.open(LabelStateDialogComponent, {
+            data: this.dashboardGetState(),
+            width: '400px',
+            maxWidth: '90vw',
+            disableClose: false,
+            autoFocus: false,
+        });
+        dialogRef
+            .afterClosed()
+            .subscribe((result) => {
+            if (result) {
+                this.state.set(result);
+            }
+        });
+    }
+    get hasContent() {
+        return !!this.state().label?.trim();
+    }
+    get label() {
+        return this.state().label?.trim();
+    }
+    // Computed properties for responsive font size limits with fallbacks
+    minFontSize = computed(() => this.state().minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : []));
+    maxFontSize = computed(() => this.state().maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LabelWidgetComponent, isStandalone: true, selector: "ngx-dashboard-label-widget", ngImport: i0, template: "@if (hasContent) {\r\n<div\r\n  class=\"label-widget\"\r\n  [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\r\n  [style.--widget-opacity]=\"state().opacity\"\r\n  [class.text-left]=\"state().alignment === 'left'\"\r\n  [class.text-right]=\"state().alignment === 'right'\"\r\n  [class.font-bold]=\"state().fontWeight === 'bold'\"\r\n  [class.has-background]=\"state().hasBackground\"\r\n>\r\n  @if (state().responsive) {\r\n    <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\">{{ label }}</div>\r\n  } @else {\r\n    <div class=\"label-text\">{{ label }}</div>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{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.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "directive", type: ResponsiveTextDirective, selector: "[libResponsiveText]", inputs: ["minFontSize", "maxFontSize", "lineHeight", "observeMutations", "debounceMs"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dashboard-label-widget', imports: [ResponsiveTextDirective], template: "@if (hasContent) {\r\n<div\r\n  class=\"label-widget\"\r\n  [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\r\n  [style.--widget-opacity]=\"state().opacity\"\r\n  [class.text-left]=\"state().alignment === 'left'\"\r\n  [class.text-right]=\"state().alignment === 'right'\"\r\n  [class.font-bold]=\"state().fontWeight === 'bold'\"\r\n  [class.has-background]=\"state().hasBackground\"\r\n>\r\n  @if (state().responsive) {\r\n    <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\">{{ label }}</div>\r\n  } @else {\r\n    <div class=\"label-text\">{{ label }}</div>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{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.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] }]
+        }] });
+
+const svgIcon$1 = `
+<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"
+    fill="currentColor"
+    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"
+    fill="currentColor"
+    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>
+`;
+
+class ClockStateDialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef = inject((MatDialogRef));
+    // State signals
+    mode = signal(this.data.mode ?? 'digital', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
+    timeFormat = signal(this.data.timeFormat ?? '24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
+    showSeconds = signal(this.data.showSeconds ?? true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
+    // Store original values for comparison
+    originalMode = this.data.mode ?? 'digital';
+    originalHasBackground = this.data.hasBackground ?? true;
+    originalTimeFormat = this.data.timeFormat ?? '24h';
+    originalShowSeconds = this.data.showSeconds ?? true;
+    // Computed values
+    hasChanged = computed(() => this.mode() !== this.originalMode ||
+        this.hasBackground() !== this.originalHasBackground ||
+        this.timeFormat() !== this.originalTimeFormat ||
+        this.showSeconds() !== this.originalShowSeconds, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
+    onCancel() {
+        this.dialogRef.close();
+    }
+    save() {
+        this.dialogRef.close({
+            mode: this.mode(),
+            hasBackground: this.hasBackground(),
+            timeFormat: this.timeFormat(),
+            showSeconds: this.showSeconds(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ClockStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ClockStateDialogComponent, isStandalone: true, selector: "lib-clock-state-dialog", ngImport: i0, template: `
+    <h2 mat-dialog-title>Clock Settings</h2>
+    <mat-dialog-content>
+      <div class="mode-selection">
+        <label class="section-label" for="mode-selection-group">Display Mode</label>
+        <mat-radio-group
+          id="mode-selection-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" for="time-format-group">Time Format</label>
+        <mat-radio-group
+          id="time-format-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>
+  `, isInline: true, 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:.75rem;font-weight:500}mat-radio-group{display:flex;flex-direction:column;gap:.75rem}mat-radio-button{margin:0}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-description{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ClockStateDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-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" for="mode-selection-group">Display Mode</label>
+        <mat-radio-group
+          id="mode-selection-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" for="time-format-group">Time Format</label>
+        <mat-radio-group
+          id="time-format-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:.75rem;font-weight:500}mat-radio-group{display:flex;flex-direction:column;gap:.75rem}mat-radio-button{margin:0}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-description{margin:0}\n"] }]
+        }] });
+
+class DigitalClockComponent {
+    #destroyRef = inject(DestroyRef);
+    // Inputs
+    timeFormat = input('24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
+    showSeconds = input(true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
+    hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
+    // Time tracking
+    currentTime = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentTime" }] : []));
+    formattedTime = computed(() => {
+        const time = this.currentTime();
+        const format = this.timeFormat();
+        const showSecs = this.showSeconds();
+        return this.#formatTime(time, format, showSecs);
+    }, ...(ngDevMode ? [{ debugName: "formattedTime" }] : []));
+    #intervalId = null;
+    #formatTime(time, format, showSecs) {
+        let hours = time.getHours();
+        const minutes = time.getMinutes();
+        const seconds = time.getSeconds();
+        // Pad with leading zeros
+        const mm = minutes.toString().padStart(2, '0');
+        const ss = seconds.toString().padStart(2, '0');
+        if (format === '12h') {
+            // 12-hour format with AM/PM
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            hours = hours % 12;
+            if (hours === 0)
+                hours = 12; // Convert 0 to 12 for 12 AM/PM
+            const hh = hours.toString().padStart(2, '0');
+            return showSecs ? `${hh}:${mm}:${ss} ${ampm}` : `${hh}:${mm} ${ampm}`;
+        }
+        else {
+            // 24-hour format
+            const hh = hours.toString().padStart(2, '0');
+            return showSecs ? `${hh}:${mm}:${ss}` : `${hh}:${mm}`;
+        }
+    }
+    constructor() {
+        // Set up time update timer
+        this.#startTimer();
+        // Clean up timer on component destruction
+        this.#destroyRef.onDestroy(() => {
+            this.#stopTimer();
+        });
+    }
+    #startTimer() {
+        // 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() {
+        if (this.#intervalId !== null) {
+            clearInterval(this.#intervalId);
+            this.#intervalId = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DigitalClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: DigitalClockComponent, isStandalone: true, selector: "lib-digital-clock", inputs: { timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-background": "hasBackground()", "class.show-pm": "timeFormat() === \"12h\"", "class.show-seconds": "showSeconds()" }, classAttribute: "clock-widget digital" }, ngImport: i0, template: "<div responsiveText class=\"digital-time\">{{ formattedTime() }}</div>\r\n", styles: [":host{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);padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}:host.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px;color:var(--mat-sys-on-surface, #1f1f1f)}:host:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.digital-time{font-size:clamp(8px,min(20cqw,50cqh),200px);font-family:monospace;font-weight:500;letter-spacing:.05em;transition:color .2s ease}:host.show-pm.show-seconds .digital-time{font-size:clamp(8px,min(15cqw,50cqh),200px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DigitalClockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-digital-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.has-background]': 'hasBackground()',
+                        '[class.show-pm]': 'timeFormat() === "12h"',
+                        '[class.show-seconds]': 'showSeconds()',
+                        class: 'clock-widget digital',
+                    }, template: "<div responsiveText class=\"digital-time\">{{ formattedTime() }}</div>\r\n", styles: [":host{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);padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}:host.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px;color:var(--mat-sys-on-surface, #1f1f1f)}:host:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.digital-time{font-size:clamp(8px,min(20cqw,50cqh),200px);font-family:monospace;font-weight:500;letter-spacing:.05em;transition:color .2s ease}:host.show-pm.show-seconds .digital-time{font-size:clamp(8px,min(15cqw,50cqh),200px)}\n"] }]
+        }], ctorParameters: () => [] });
+
+class AnalogClockComponent {
+    #destroyRef = inject(DestroyRef);
+    #renderer = inject(Renderer2);
+    // Inputs
+    hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
+    showSeconds = input(true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
+    // ViewChild references for clock hands
+    hourHand = viewChild('hourHand', ...(ngDevMode ? [{ debugName: "hourHand" }] : []));
+    minuteHand = viewChild('minuteHand', ...(ngDevMode ? [{ debugName: "minuteHand" }] : []));
+    secondHand = viewChild('secondHand', ...(ngDevMode ? [{ debugName: "secondHand" }] : []));
+    // Time tracking
+    currentTime = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentTime" }] : []));
+    // Computed rotation signals
+    secondHandRotation = computed(() => {
+        const seconds = this.currentTime().getSeconds();
+        return seconds * 6; // 360° / 60s = 6° per second
+    }, ...(ngDevMode ? [{ debugName: "secondHandRotation" }] : []));
+    minuteHandRotation = computed(() => {
+        const time = this.currentTime();
+        const minutes = time.getMinutes();
+        const seconds = time.getSeconds();
+        return minutes * 6 + seconds / 10; // Smooth minute hand movement
+    }, ...(ngDevMode ? [{ debugName: "minuteHandRotation" }] : []));
+    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
+    }, ...(ngDevMode ? [{ debugName: "hourHandRotation" }] : []));
+    #intervalId = 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() {
+        // 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() {
+        if (this.#intervalId !== null) {
+            clearInterval(this.#intervalId);
+            this.#intervalId = null;
+        }
+    }
+    #updateClockHands() {
+        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)`);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.1", type: AnalogClockComponent, isStandalone: true, selector: "lib-analog-clock", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-background": "hasBackground()", "class.show-seconds": "showSeconds()" }, classAttribute: "clock-widget analog" }, viewQueries: [{ propertyName: "hourHand", first: true, predicate: ["hourHand"], descendants: true, isSignal: true }, { propertyName: "minuteHand", first: true, predicate: ["minuteHand"], descendants: true, isSignal: true }, { propertyName: "secondHand", first: true, predicate: ["secondHand"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"analog-clock-container\">\r\n  <div class=\"aspect-ratio-box\">\r\n    <svg\r\n      version=\"1.1\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 800 800\"\r\n      preserveAspectRatio=\"xMidYMid meet\"\r\n    >\r\n      <!-- Optional face circle; uncomment if you want a visible outline by default -->\r\n      <!-- <circle cx=\"400\" cy=\"400\" r=\"400\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"2\" /> -->\r\n\r\n      <use transform=\"matrix(-1,0,0,1,800,0)\" href=\"#one-half\" />\r\n      <g id=\"one-half\">\r\n        <g id=\"one-fourth\">\r\n          <!-- 12 / 3 / 6 / 9 heavy marks -->\r\n          <path d=\"m400 40v107\" stroke-width=\"26.7\" stroke=\"currentColor\" />\r\n          <g id=\"one-twelfth\">\r\n            <!-- 30\u00B0 heavy marks -->\r\n            <path\r\n              d=\"m580 88.233-42.5 73.612\"\r\n              stroke-width=\"26.7\"\r\n              stroke=\"currentColor\"\r\n            />\r\n            <g id=\"one-thirtieth\">\r\n              <!-- minute/second ticks -->\r\n              <path\r\n                id=\"one-sixtieth\"\r\n                d=\"m437.63 41.974-3.6585 34.808\"\r\n                stroke-width=\"13.6\"\r\n                stroke=\"currentColor\"\r\n              />\r\n              <use transform=\"rotate(6 400 400)\" href=\"#one-sixtieth\" />\r\n            </g>\r\n            <use transform=\"rotate(12 400 400)\" href=\"#one-thirtieth\" />\r\n          </g>\r\n          <use transform=\"rotate(30 400 400)\" href=\"#one-twelfth\" />\r\n          <use transform=\"rotate(60 400 400)\" href=\"#one-twelfth\" />\r\n        </g>\r\n        <use transform=\"rotate(90 400 400)\" href=\"#one-fourth\" />\r\n      </g>\r\n\r\n      <!-- Hands -->\r\n      <path\r\n        class=\"clock-hour-hand\"\r\n        id=\"anim-clock-hour-hand\"\r\n        #hourHand\r\n        d=\"m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z\"\r\n        transform=\"rotate(110.2650694444, 400, 400)\"\r\n      />\r\n      <path\r\n        class=\"clock-minute-hand\"\r\n        id=\"anim-clock-minute-hand\"\r\n        #minuteHand\r\n        d=\"M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z\"\r\n        transform=\"rotate(243.1808333333, 400, 400)\"\r\n      />\r\n      <path\r\n        class=\"clock-second-hand\"\r\n        id=\"anim-clock-second-hand\"\r\n        #secondHand\r\n        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\"\r\n        transform=\"rotate(190.85, 400, 400)\"\r\n      />\r\n    </svg>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}.analog-clock-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.analog-clock-container .aspect-ratio-box{position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:1/1}@supports not (aspect-ratio: 1/1){.analog-clock-container .aspect-ratio-box:before{content:\"\";display:block;padding-bottom:100%}.analog-clock-container .aspect-ratio-box svg{position:absolute;top:0;left:0;width:100%;height:100%}}.analog-clock-container .aspect-ratio-box svg{display:block;width:100%;height:100%}.analog-clock-container .aspect-ratio-box svg path:not(.clock-hour-hand):not(.clock-minute-hand):not(.clock-second-hand){stroke:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}:host:not(.show-seconds) .clock-second-hand{display:none}:host.has-background svg circle{fill:var(--mat-sys-surface, #fffbfe)}:host:hover{opacity:.8}:host:hover svg .clock-hour-hand,:host:hover svg .clock-minute-hand{fill:var(--mat-sys-primary, #6750a4)}:host.clock-widget.analog{container-type:size;container-name:analog-clock}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AnalogClockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-analog-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.has-background]': 'hasBackground()',
+                        '[class.show-seconds]': 'showSeconds()',
+                        'class': 'clock-widget analog'
+                    }, template: "<div class=\"analog-clock-container\">\r\n  <div class=\"aspect-ratio-box\">\r\n    <svg\r\n      version=\"1.1\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 800 800\"\r\n      preserveAspectRatio=\"xMidYMid meet\"\r\n    >\r\n      <!-- Optional face circle; uncomment if you want a visible outline by default -->\r\n      <!-- <circle cx=\"400\" cy=\"400\" r=\"400\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"2\" /> -->\r\n\r\n      <use transform=\"matrix(-1,0,0,1,800,0)\" href=\"#one-half\" />\r\n      <g id=\"one-half\">\r\n        <g id=\"one-fourth\">\r\n          <!-- 12 / 3 / 6 / 9 heavy marks -->\r\n          <path d=\"m400 40v107\" stroke-width=\"26.7\" stroke=\"currentColor\" />\r\n          <g id=\"one-twelfth\">\r\n            <!-- 30\u00B0 heavy marks -->\r\n            <path\r\n              d=\"m580 88.233-42.5 73.612\"\r\n              stroke-width=\"26.7\"\r\n              stroke=\"currentColor\"\r\n            />\r\n            <g id=\"one-thirtieth\">\r\n              <!-- minute/second ticks -->\r\n              <path\r\n                id=\"one-sixtieth\"\r\n                d=\"m437.63 41.974-3.6585 34.808\"\r\n                stroke-width=\"13.6\"\r\n                stroke=\"currentColor\"\r\n              />\r\n              <use transform=\"rotate(6 400 400)\" href=\"#one-sixtieth\" />\r\n            </g>\r\n            <use transform=\"rotate(12 400 400)\" href=\"#one-thirtieth\" />\r\n          </g>\r\n          <use transform=\"rotate(30 400 400)\" href=\"#one-twelfth\" />\r\n          <use transform=\"rotate(60 400 400)\" href=\"#one-twelfth\" />\r\n        </g>\r\n        <use transform=\"rotate(90 400 400)\" href=\"#one-fourth\" />\r\n      </g>\r\n\r\n      <!-- Hands -->\r\n      <path\r\n        class=\"clock-hour-hand\"\r\n        id=\"anim-clock-hour-hand\"\r\n        #hourHand\r\n        d=\"m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z\"\r\n        transform=\"rotate(110.2650694444, 400, 400)\"\r\n      />\r\n      <path\r\n        class=\"clock-minute-hand\"\r\n        id=\"anim-clock-minute-hand\"\r\n        #minuteHand\r\n        d=\"M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z\"\r\n        transform=\"rotate(243.1808333333, 400, 400)\"\r\n      />\r\n      <path\r\n        class=\"clock-second-hand\"\r\n        id=\"anim-clock-second-hand\"\r\n        #secondHand\r\n        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\"\r\n        transform=\"rotate(190.85, 400, 400)\"\r\n      />\r\n    </svg>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}.analog-clock-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.analog-clock-container .aspect-ratio-box{position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:1/1}@supports not (aspect-ratio: 1/1){.analog-clock-container .aspect-ratio-box:before{content:\"\";display:block;padding-bottom:100%}.analog-clock-container .aspect-ratio-box svg{position:absolute;top:0;left:0;width:100%;height:100%}}.analog-clock-container .aspect-ratio-box svg{display:block;width:100%;height:100%}.analog-clock-container .aspect-ratio-box svg path:not(.clock-hour-hand):not(.clock-minute-hand):not(.clock-second-hand){stroke:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}:host:not(.show-seconds) .clock-second-hand{display:none}:host.has-background svg circle{fill:var(--mat-sys-surface, #fffbfe)}:host:hover{opacity:.8}:host:hover svg .clock-hour-hand,:host:hover svg .clock-minute-hand{fill:var(--mat-sys-primary, #6750a4)}:host.clock-widget.analog{container-type:size;container-name:analog-clock}\n"] }]
+        }], ctorParameters: () => [] });
+
+// clock-widget.component.ts
+class ClockWidgetComponent {
+    static metadata = {
+        widgetTypeid: '@ngx-dashboard/clock-widget',
+        name: 'Clock',
+        description: 'Display time in analog or digital format',
+        svgIcon: svgIcon$1,
+    };
+    #sanitizer = inject(DomSanitizer);
+    #dialog = inject(MatDialog);
+    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon$1);
+    state = signal({
+        mode: 'analog',
+        hasBackground: true,
+        timeFormat: '24h',
+        showSeconds: true,
+    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    constructor() {
+        // No timer logic needed - DigitalClock manages its own time
+    }
+    dashboardSetState(state) {
+        if (state) {
+            this.state.update((current) => ({
+                ...current,
+                ...state,
+            }));
+        }
+    }
+    dashboardGetState() {
+        return { ...this.state() };
+    }
+    dashboardEditState() {
+        const dialogRef = this.#dialog.open(ClockStateDialogComponent, {
+            data: this.dashboardGetState(),
+            width: '400px',
+            maxWidth: '90vw',
+            disableClose: false,
+            autoFocus: false,
+        });
+        dialogRef
+            .afterClosed()
+            .subscribe((result) => {
+            if (result) {
+                this.state.set(result);
+            }
+        });
+    }
+    get isAnalog() {
+        return this.state().mode === 'analog';
+    }
+    get isDigital() {
+        return this.state().mode === 'digital';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ClockWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ClockWidgetComponent, isStandalone: true, selector: "ngx-dashboard-clock-widget", ngImport: i0, template: "@if (isDigital) {\r\n  <lib-digital-clock\r\n    [timeFormat]=\"state().timeFormat || '24h'\"\r\n    [showSeconds]=\"state().showSeconds ?? true\"\r\n    [hasBackground]=\"state().hasBackground ?? false\"\r\n  />\r\n} @else if (isAnalog) {\r\n  <lib-analog-clock\r\n    [hasBackground]=\"state().hasBackground ?? false\"\r\n    [showSeconds]=\"state().showSeconds ?? true\"\r\n  />\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.clock-widget{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.svg-wrapper,.has-background.clock-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.clock-widget{padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}.clock-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.clock-widget:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.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}.clock-face:before,.clock-face:after{content:\"\";position:absolute;background-color:currentColor;left:50%;transform:translate(-50%)}.clock-face:before{width:2px;height:10%;top:0}.clock-face: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:translate(-50%) rotate(30deg)}.minute-hand{width:2px;height:35%;transform:translate(-50%) rotate(90deg)}.center-dot{position:absolute;width:8px;height:8px;background-color:currentColor;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-placeholder ::ng-deep svg .clock-face{stroke:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}.has-background .svg-placeholder ::ng-deep svg circle{fill:var(--mat-sys-surface, #fffbfe)}\n"], dependencies: [{ kind: "component", type: DigitalClockComponent, selector: "lib-digital-clock", inputs: ["timeFormat", "showSeconds", "hasBackground"] }, { kind: "component", type: AnalogClockComponent, selector: "lib-analog-clock", inputs: ["hasBackground", "showSeconds"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ClockWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dashboard-clock-widget', standalone: true, imports: [DigitalClockComponent, AnalogClockComponent], template: "@if (isDigital) {\r\n  <lib-digital-clock\r\n    [timeFormat]=\"state().timeFormat || '24h'\"\r\n    [showSeconds]=\"state().showSeconds ?? true\"\r\n    [hasBackground]=\"state().hasBackground ?? false\"\r\n  />\r\n} @else if (isAnalog) {\r\n  <lib-analog-clock\r\n    [hasBackground]=\"state().hasBackground ?? false\"\r\n    [showSeconds]=\"state().showSeconds ?? true\"\r\n  />\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.clock-widget{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.svg-wrapper,.has-background.clock-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.clock-widget{padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}.clock-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.clock-widget:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.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}.clock-face:before,.clock-face:after{content:\"\";position:absolute;background-color:currentColor;left:50%;transform:translate(-50%)}.clock-face:before{width:2px;height:10%;top:0}.clock-face: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:translate(-50%) rotate(30deg)}.minute-hand{width:2px;height:35%;transform:translate(-50%) rotate(90deg)}.center-dot{position:absolute;width:8px;height:8px;background-color:currentColor;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-placeholder ::ng-deep svg .clock-face{stroke:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}.has-background .svg-placeholder ::ng-deep svg circle{fill:var(--mat-sys-surface, #fffbfe)}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Responsive radial gauge component with hybrid sizing and thickness control.
+ *
+ * This component provides a highly flexible gauge system with three independent
+ * control dimensions that can be mixed and matched for different use cases:
+ *
+ * ## Size Control:
+ * - **Fixed Size**: Use manual `size` input (traditional behavior)
+ * - **Container Responsive**: Enable `fitToContainer` for automatic sizing
+ *
+ * ## Thickness Control:
+ * - **Manual Thickness**: Use individual thickness inputs (traditional behavior)
+ * - **Proportional Thickness**: Enable `responsiveMode` for size-based scaling
+ *
+ * ## Usage Scenarios:
+ *
+ * ### 1. Dashboard Widgets (Recommended)
+ * ```html
+ * <ngx-radial-gauge
+ *   [value]="cpuUsage"
+ *   [fitToContainer]="true"
+ *   [responsiveMode]="true"
+ *   [sizeToThicknessRatio]="12" />
+ * ```
+ * **Best for**: Grid layouts, dashboard panels, adaptive containers
+ * **Behavior**: Automatically resizes to fit available space while maintaining
+ * consistent proportional appearance across all sizes.
+ *
+ * ### 2. Fixed Layouts (Traditional)
+ * ```html
+ * <ngx-radial-gauge
+ *   [value]="temperature"
+ *   [size]="300"
+ *   [outerThickness]="36"
+ *   [innerThickness]="12" />
+ * ```
+ * **Best for**: Static designs, precise sizing requirements, print layouts
+ * **Behavior**: Exact pixel control over all dimensions, predictable appearance.
+ *
+ * ### 3. Scalable Designs
+ * ```html
+ * <ngx-radial-gauge
+ *   [value]="batteryLevel"
+ *   [size]="gaugeSize"
+ *   [responsiveMode]="true"
+ *   [sizeToThicknessRatio]="20" />
+ * ```
+ * **Best for**: User-configurable sizing, responsive breakpoints, zoom interfaces
+ * **Behavior**: Manual size control with automatic thickness scaling. As size
+ * increases/decreases, ring thickness scales proportionally to maintain visual balance.
+ *
+ * ## Mathematical Relationships:
+ *
+ * When `responsiveMode=true`, thickness follows this formula:
+ * ```
+ * baseThickness = effectiveSize / sizeToThicknessRatio
+ * outerThickness = baseThickness × responsiveProportions.outer (default: 3)
+ * innerThickness = baseThickness × responsiveProportions.inner (default: 1)
+ * gap = baseThickness × responsiveProportions.gap (default: 0.5)
+ * totalThickness = baseThickness × 4.5 (outer + inner + gap)
+ * ```
+ *
+ * Example with 300px gauge and ratio=20 (ultra-thin):
+ * - baseThickness = 15px
+ * - outerThickness = 45px (15×3)
+ * - innerThickness = 15px (15×1)
+ * - gap = 7.5px (15×0.5)
+ * - totalThickness = 67.5px (22.5% of diameter)
+ *
+ * ## Container Responsiveness:
+ *
+ * When `fitToContainer=true`, the component uses ResizeObserver to:
+ * 1. Monitor parent container dimension changes
+ * 2. Calculate maximum diameter maintaining 2:1 aspect ratio (width:height)
+ * 3. Apply containerPadding for safe margins
+ * 4. Update gauge size in real-time
+ *
+ * This provides true responsive behavior for dashboard widgets, grid layouts,
+ * and adaptive interfaces.
+ *
+ * ## Accessibility:
+ *
+ * The component implements ARIA meter role with proper labeling:
+ * - `role="meter"` for semantic meaning
+ * - `aria-valuemin/max/now` for screen readers
+ * - `aria-label` with contextual information
+ * - Internationalized number formatting
+ *
+ */
+class RadialGaugeComponent {
+    valueTextEl = viewChild('valueText', ...(ngDevMode ? [{ debugName: "valueTextEl" }] : []));
+    valueGroupEl = viewChild('valueGroup', ...(ngDevMode ? [{ debugName: "valueGroupEl" }] : []));
+    refTextEl = viewChild.required('refText');
+    // Core Inputs - Value and Range
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    segments = input(...(ngDevMode ? [undefined, { debugName: "segments" }] : []));
+    title = input('Gauge', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    segmentGapPx = input(4, ...(ngDevMode ? [{ debugName: "segmentGapPx" }] : []));
+    // Widget styling inputs
+    /**
+     * Whether the gauge should display with a background.
+     * Affects text color contrast and other visual elements.
+     * @default false
+     */
+    hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
+    /**
+     * Whether to display the numeric value label in the center of the gauge.
+     * @default true
+     */
+    showValueLabel = input(true, ...(ngDevMode ? [{ debugName: "showValueLabel" }] : []));
+    // Size Control Inputs
+    /**
+     * Base gauge diameter in pixels. Used as fallback when fitToContainer is false.
+     * @default 300
+     */
+    size = input(300, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Automatically resize gauge to fit its container dimensions.
+     * When true, the gauge will observe container size changes and adjust accordingly.
+     * Maintains semicircle aspect ratio (2:1 width:height).
+     * @default false
+     */
+    fitToContainer = input(false, ...(ngDevMode ? [{ debugName: "fitToContainer" }] : []));
+    /**
+     * Padding in pixels to maintain from container edges when fitToContainer is true.
+     * @default 10
+     */
+    containerPadding = input(10, ...(ngDevMode ? [{ debugName: "containerPadding" }] : []));
+    // Thickness Control Inputs
+    /**
+     * Use proportional thickness scaling based on gauge size.
+     * When true, all thickness values are calculated as multiples of baseThickness.
+     * Overrides manual outerThickness, innerThickness, and gap inputs.
+     * @default false
+     */
+    responsiveMode = input(false, ...(ngDevMode ? [{ debugName: "responsiveMode" }] : []));
+    /**
+     * Ratio used to calculate base thickness from gauge size.
+     * baseThickness = effectiveSize / sizeToThicknessRatio
+     * Higher values create thinner gauge rings for ultra-thin appearance.
+     * @default 20
+     * @example
+     * - ratio=15: thicker rings (bt = size/15)
+     * - ratio=20: ultra-thin balanced appearance (bt = size/20)
+     * - ratio=30: extremely thin rings (bt = size/30)
+     */
+    sizeToThicknessRatio = input(20, ...(ngDevMode ? [{ debugName: "sizeToThicknessRatio" }] : []));
+    /**
+     * Proportional multipliers for responsive thickness calculations.
+     * - outer: Multiplier for outer ring thickness (default: 3)
+     * - inner: Multiplier for inner ring thickness (default: 1)
+     * - gap: Multiplier for gap between rings (default: 0.5)
+     * Total thickness = baseThickness × (outer + inner + gap) = bt × 4.5
+     * @default { outer: 3, inner: 1, gap: 0.5 }
+     */
+    responsiveProportions = input({ outer: 3, inner: 1, gap: 0.5 }, ...(ngDevMode ? [{ debugName: "responsiveProportions" }] : []));
+    // Manual Thickness Inputs (used when responsiveMode is false)
+    /**
+     * Manual outer ring thickness in pixels. Ignored when responsiveMode is true.
+     * @default 36
+     */
+    outerThickness = input(36, ...(ngDevMode ? [{ debugName: "outerThickness" }] : []));
+    /**
+     * Manual inner ring thickness in pixels. Ignored when responsiveMode is true.
+     * @default 12
+     */
+    innerThickness = input(12, ...(ngDevMode ? [{ debugName: "innerThickness" }] : []));
+    /**
+     * Manual gap between rings in pixels. Ignored when responsiveMode is true.
+     * @default 8
+     */
+    gap = input(8, ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    titleId = `rg-title-${Math.random().toString(36).slice(2)}`;
+    descId = `rg-desc-${Math.random().toString(36).slice(2)}`;
+    clipId = `rg-clip-${Math.random().toString(36).slice(2)}`;
+    locale = inject(LOCALE_ID);
+    elementRef = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    nf = new Intl.NumberFormat(this.locale, {
+        maximumFractionDigits: 1,
+    });
+    // Container Size Detection
+    /**
+     * Tracks the container's available size for responsive sizing.
+     * Updated by ResizeObserver when fitToContainer is enabled.
+     * @private
+     */
+    containerSize = signal(null, ...(ngDevMode ? [{ debugName: "containerSize" }] : []));
+    /**
+     * ResizeObserver instance for monitoring container size changes.
+     * Created when fitToContainer is enabled, destroyed on component cleanup.
+     * @private
+     */
+    resizeObserver = null;
+    viewReady = toSignal(from(new Promise((resolve) => afterNextRender(resolve))).pipe(map(() => true)), { initialValue: false });
+    fontsReady = toSignal(typeof document !== 'undefined' && 'fonts' in document
+        ? from(document.fonts.ready).pipe(map(() => true))
+        : of(true), // SSR or older browsers: treat as ready
+    { initialValue: false });
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+                this.resizeObserver = null;
+            }
+        });
+    }
+    /**
+     * Effect that manages ResizeObserver lifecycle based on fitToContainer input.
+     * Automatically connects/disconnects observer when the input changes.
+     * @private
+     */
+    containerObserverEffect = effect(() => {
+        const shouldObserve = this.fitToContainer();
+        if (shouldObserve && !this.resizeObserver) {
+            // Create and start observing
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                if (!entry)
+                    return;
+                const { width, height } = entry.contentRect;
+                const padding = this.containerPadding();
+                const availW = Math.max(0, width - padding * 2);
+                const availH = Math.max(0, height - padding);
+                let sFromW;
+                let sFromH;
+                if (this.responsiveMode()) {
+                    // In responsive mode: outerThickness = 3 * baseThickness = 3 * size / ratio
+                    // Total space needed = size + outerThickness = size + 3*size/ratio = size * (1 + 3/ratio)
+                    const ratio = this.sizeToThicknessRatio();
+                    const spaceFactor = 1 + 3 / ratio; // Total space factor
+                    sFromW = availW / spaceFactor;
+                    sFromH = (2 * availH) / spaceFactor;
+                }
+                else {
+                    // Manual thickness: outer thickness is fixed
+                    const outerT = this.outerThickness();
+                    sFromW = Math.max(0, availW - outerT);
+                    sFromH = Math.max(0, 2 * availH - outerT);
+                }
+                const maxDiameter = Math.min(sFromW, sFromH);
+                this.containerSize.set(Math.max(maxDiameter, 50));
+            });
+            this.resizeObserver.observe(this.elementRef.nativeElement);
+        }
+        else if (!shouldObserve && this.resizeObserver) {
+            // Stop observing and cleanup
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+            this.containerSize.set(null);
+        }
+    }, ...(ngDevMode ? [{ debugName: "containerObserverEffect" }] : []));
+    // ── Build the reference string reactively ───────────────────────────────────
+    referenceString = computed(() => {
+        const ref = this.labelReference();
+        if (typeof ref === 'string')
+            return ref;
+        if (typeof ref === 'number' && ref > 0) {
+            const g = this.referenceGlyph() ?? '0';
+            return g.repeat(ref);
+        }
+        return this.formattedLabel(); // measure actual label
+    }, ...(ngDevMode ? [{ debugName: "referenceString" }] : []));
+    // ── Core transform: center + uniform scale to fit the reserved box ──────────
+    valueTransform = computed(() => {
+        if (!this.showValueLabel())
+            return '';
+        // ensure we wait for first paint + font shaping
+        this.viewReady();
+        this.fontsReady();
+        const cx = this.centerX();
+        const cy = this.centerY();
+        const r = this.legendInnerRadius();
+        const pad = this.labelPadding();
+        const boxWidth = Math.max(0, 2 * r - 2 * pad);
+        const boxHeight = Math.max(0, r - pad);
+        // If geometry is degenerate, just center.
+        if (!boxWidth || !boxHeight)
+            return `translate(${cx},${cy})`;
+        // Measure the actual label (for height) and the reference (for width)
+        const labelEl = this.valueTextEl()?.nativeElement;
+        const refEl = this.refTextEl().nativeElement;
+        if (!labelEl)
+            return `translate(${cx},${cy})`;
+        // Important: ensure text nodes are up to date before reading BBox
+        // (Angular's computed/effect guarantees sync within the same microtask)
+        const labelBox = this.safeBBox(labelEl);
+        const refBox = this.safeBBox(refEl);
+        // Use reference width and actual label height
+        const widthForFit = refBox.width || labelBox.width || 1;
+        const heightForFit = labelBox.height || refBox.height || 1;
+        const s = Math.min(boxWidth / widthForFit, boxHeight / heightForFit) *
+            this.baselineSafety();
+        return `translate(${cx},${cy}) scale(${s})`;
+    }, ...(ngDevMode ? [{ debugName: "valueTransform" }] : []));
+    /** Guarded getBBox that avoids 0/NaN on detached or invisible nodes. */
+    safeBBox(node) {
+        try {
+            const box = node.getBBox();
+            // Firefox/Safari can occasionally return 0 when text hasn’t painted yet; fall back to a rough estimate.
+            if (box && (box.width > 0 || box.height > 0))
+                return box;
+        }
+        catch {
+            /* ignore */
+        }
+        // Fallback guess to avoid divide-by-zero (tuned small; will get corrected next tick)
+        return new DOMRect(0, 0, 1, 1);
+    }
+    // Responsive Size and Thickness Calculations
+    /**
+     * The effective gauge diameter, accounting for container sizing and manual size input.
+     * Priority: containerSize (when fitToContainer=true) > manual size input
+     * @returns Effective diameter in pixels
+     *
+     * @example
+     * // Fixed size mode
+     * fitToContainer=false, size=300 → effectiveSize=300
+     *
+     * // Container responsive mode
+     * fitToContainer=true, container=400px wide → effectiveSize=380 (minus padding)
+     */
+    effectiveSize = computed(() => {
+        const containerDiameter = this.containerSize();
+        if (this.fitToContainer() && containerDiameter !== null) {
+            return containerDiameter;
+        }
+        return this.size();
+    }, ...(ngDevMode ? [{ debugName: "effectiveSize" }] : []));
+    /**
+     * Base thickness calculated from effective size for proportional scaling.
+     * Only used when responsiveMode is enabled.
+     * Formula: baseThickness = effectiveSize / sizeToThicknessRatio
+     * @returns Base thickness in pixels, or 0 when responsiveMode is false
+     *
+     * @example
+     * // effectiveSize=300, sizeToThicknessRatio=12
+     * baseThickness = 300/12 = 25px
+     * // Total ring thickness = 25 × 4.5 = 112.5px (37.5% of diameter)
+     */
+    baseThickness = computed(() => {
+        if (!this.responsiveMode())
+            return 0;
+        return this.effectiveSize() / this.sizeToThicknessRatio();
+    }, ...(ngDevMode ? [{ debugName: "baseThickness" }] : []));
+    /**
+     * Effective outer ring thickness, supporting both manual and responsive modes.
+     * - Responsive mode: baseThickness × responsiveProportions.outer
+     * - Manual mode: outerThickness input value
+     * @returns Outer ring thickness in pixels
+     */
+    effectiveOuterThickness = computed(() => {
+        if (this.responsiveMode()) {
+            return this.baseThickness() * this.responsiveProportions().outer;
+        }
+        return this.outerThickness();
+    }, ...(ngDevMode ? [{ debugName: "effectiveOuterThickness" }] : []));
+    /**
+     * Effective inner ring thickness, supporting both manual and responsive modes.
+     * - Responsive mode: baseThickness × responsiveProportions.inner
+     * - Manual mode: innerThickness input value
+     * @returns Inner ring thickness in pixels
+     */
+    effectiveInnerThickness = computed(() => {
+        if (this.responsiveMode()) {
+            return this.baseThickness() * this.responsiveProportions().inner;
+        }
+        return this.innerThickness();
+    }, ...(ngDevMode ? [{ debugName: "effectiveInnerThickness" }] : []));
+    /**
+     * Effective gap between rings, supporting both manual and responsive modes.
+     * - Responsive mode: baseThickness × responsiveProportions.gap
+     * - Manual mode: gap input value
+     * @returns Gap between rings in pixels
+     */
+    effectiveGap = computed(() => {
+        if (this.responsiveMode()) {
+            return this.baseThickness() * this.responsiveProportions().gap;
+        }
+        return this.gap();
+    }, ...(ngDevMode ? [{ debugName: "effectiveGap" }] : []));
+    // SVG Layout Calculations
+    svgPadding = computed(() => this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "svgPadding" }] : []));
+    svgWidth = computed(() => this.effectiveSize() + this.effectiveOuterThickness(), ...(ngDevMode ? [{ debugName: "svgWidth" }] : []));
+    svgHeight = computed(() => Math.ceil(this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2), ...(ngDevMode ? [{ debugName: "svgHeight" }] : []));
+    centerX = computed(() => this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "centerX" }] : []));
+    centerY = computed(() => this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "centerY" }] : []));
+    /**
+     * If a string is provided, we measure it and allocate space for that width.
+     * If a number is provided, we build a string of that many `referenceGlyph`s.
+     * If omitted, we fall back to measuring the actual label.
+     */
+    labelReference = input(undefined, ...(ngDevMode ? [{ debugName: "labelReference" }] : []));
+    /** Glyph to repeat when labelReference is a number (defaults to '0'). */
+    referenceGlyph = input('0', ...(ngDevMode ? [{ debugName: "referenceGlyph" }] : []));
+    /** Extra breathing room inside the inner semicircle box (in px). */
+    labelPadding = input(4, ...(ngDevMode ? [{ debugName: "labelPadding" }] : []));
+    /** Safety multiplier to avoid clipping ascenders/descenders. */
+    baselineSafety = input(0.95, ...(ngDevMode ? [{ debugName: "baselineSafety" }] : []));
+    outerRadius = computed(() => this.effectiveSize() / 2, ...(ngDevMode ? [{ debugName: "outerRadius" }] : []));
+    innerRadius = computed(() => this.outerRadius() -
+        this.effectiveOuterThickness() / 2 -
+        this.effectiveGap(), ...(ngDevMode ? [{ debugName: "innerRadius" }] : []));
+    legendOuterRadius = computed(() => this.outerRadius() -
+        this.effectiveOuterThickness() / 2 -
+        this.effectiveGap() -
+        this.effectiveInnerThickness() / 2, ...(ngDevMode ? [{ debugName: "legendOuterRadius" }] : []));
+    legendInnerRadius = computed(() => this.legendOuterRadius() - this.effectiveInnerThickness(), ...(ngDevMode ? [{ debugName: "legendInnerRadius" }] : []));
+    startAngle = -180;
+    endAngle = 0;
+    clampedValue = computed(() => this.clamp(this.value(), this.min(), this.max()), ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
+    percentage = computed(() => {
+        const range = this.max() - this.min();
+        if (range === 0)
+            return 0;
+        return (this.clampedValue() - this.min()) / range;
+    }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
+    percent = computed(() => Math.round(this.percentage() * 100), ...(ngDevMode ? [{ debugName: "percent" }] : []));
+    defaultSegments = computed(() => {
+        const minVal = this.min();
+        const maxVal = this.max();
+        const range = maxVal - minVal;
+        return [
+            {
+                from: minVal,
+                to: minVal + 0.6 * range,
+                color: 'var(--gauge-value-critical, #dc2626)',
+            },
+            {
+                from: minVal + 0.6 * range,
+                to: minVal + 0.8 * range,
+                color: 'var(--gauge-value-warning, #f59e0b)',
+            },
+            {
+                from: minVal + 0.8 * range,
+                to: maxVal,
+                color: 'var(--gauge-value-good, #10b981)',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "defaultSegments" }] : []));
+    actualSegments = computed(() => this.segments() || this.defaultSegments(), ...(ngDevMode ? [{ debugName: "actualSegments" }] : []));
+    formattedLabel = computed(() => this.nf.format(this.clampedValue()), ...(ngDevMode ? [{ debugName: "formattedLabel" }] : []));
+    valueColor = computed(() => {
+        const v = this.clampedValue();
+        const segs = this.actualSegments();
+        for (const s of segs) {
+            if (v >= s.from && v <= s.to)
+                return s.color;
+        }
+        return segs.at(-1)?.color ?? 'var(--mat-sys-primary)';
+    }, ...(ngDevMode ? [{ debugName: "valueColor" }] : []));
+    backgroundArcPath = computed(() => this.createArcPath(this.outerRadius(), this.startAngle, this.endAngle), ...(ngDevMode ? [{ debugName: "backgroundArcPath" }] : []));
+    segmentPaths = computed(() => {
+        const segs = this.actualSegments();
+        const minVal = this.min();
+        const maxVal = this.max();
+        const range = maxVal - minVal;
+        if (!range)
+            return [];
+        const r = this.legendOuterRadius();
+        const gapDeg = this.gapDegreesForRadius(this.segmentGapPx(), r);
+        return segs
+            .map((s, i) => {
+            const startPct = this.clamp((s.from - minVal) / range, 0, 1);
+            const endPct = this.clamp((s.to - minVal) / range, 0, 1);
+            let a0 = this.angleForPercentage(startPct);
+            let a1 = this.angleForPercentage(endPct);
+            if (i > 0)
+                a0 += gapDeg / 2;
+            if (i < segs.length - 1)
+                a1 -= gapDeg / 2;
+            if (a1 <= a0)
+                return null;
+            return { path: this.createArcPath(r, a0, a1), color: s.color };
+        })
+            .filter((x) => !!x);
+    }, ...(ngDevMode ? [{ debugName: "segmentPaths" }] : []));
+    ariaLabel = computed(() => `${this.title()}: ${this.formattedLabel()} (range ${this.min()}–${this.max()})`, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    clamp(v, min, max) {
+        return Math.min(Math.max(v, min), max);
+    }
+    /**
+     * Converts a percentage (0-1) to an angle position on the gauge arc.
+     * The gauge spans from startAngle (-180°) to endAngle (0°), creating a semicircle.
+     * @param p - Percentage value between 0 and 1
+     * @returns Angle in degrees for the given percentage along the gauge arc
+     * @example
+     * angleForPercentage(0) => -180° (start of gauge)
+     * angleForPercentage(0.5) => -90° (middle of gauge)
+     * angleForPercentage(1) => 0° (end of gauge)
+     */
+    angleForPercentage(p) {
+        return this.startAngle + (this.endAngle - this.startAngle) * p;
+    }
+    /**
+     * Converts polar coordinates (radius, angle) to Cartesian coordinates (x, y).
+     * Uses standard trigonometric conversion where angle 0° points to the right (3 o'clock).
+     * @param cx - Center X coordinate of the circle
+     * @param cy - Center Y coordinate of the circle
+     * @param r - Radius distance from center
+     * @param angle - Angle in degrees (0° = right, 90° = down, 180° = left, -90° = up)
+     * @returns Object with x and y Cartesian coordinates
+     * @example
+     * polarToCartesian(100, 100, 50, 0) => {x: 150, y: 100} // 3 o'clock
+     * polarToCartesian(100, 100, 50, -90) => {x: 100, y: 50} // 12 o'clock
+     */
+    polarToCartesian(cx, cy, r, angle) {
+        const a = (angle * Math.PI) / 180;
+        return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
+    }
+    /**
+     * Creates an SVG path string for a circular arc segment.
+     * Uses SVG arc path commands to draw an arc from start angle to end angle.
+     * @param r - Radius of the arc
+     * @param a0 - Starting angle in degrees
+     * @param a1 - Ending angle in degrees
+     * @returns SVG path string defining the arc
+     * @example
+     * createArcPath(50, -180, 0) => "M cx-50 cy A 50 50 0 1 1 cx+50 cy"
+     * This creates a semicircle from left (-180°) to right (0°)
+     *
+     * SVG Arc Parameters:
+     * - rx, ry: Radii (equal for circular arc)
+     * - x-axis-rotation: 0 (no rotation for circles)
+     * - large-arc-flag: 1 if arc > 180°, 0 otherwise
+     * - sweep-flag: 1 for clockwise, 0 for counter-clockwise
+     */
+    createArcPath(r, a0, a1) {
+        const cx = this.centerX(), cy = this.centerY();
+        const start = this.polarToCartesian(cx, cy, r, a0);
+        const end = this.polarToCartesian(cx, cy, r, a1);
+        const largeArc = Math.abs(a1 - a0) > 180 ? 1 : 0;
+        const sweep = a1 > a0 ? 1 : 0;
+        return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} ${sweep} ${end.x} ${end.y}`;
+    }
+    /**
+     * Calculates the angular gap in degrees needed for a specific pixel gap at a given radius.
+     * Used to create visual separation between legend segments.
+     * @param px - Desired gap size in pixels
+     * @param r - Radius at which the gap will appear
+     * @returns Gap size in degrees, clamped between 0° and 180°
+     * @example
+     * For a 4px gap on a radius of 100px:
+     * Arc length = π * 100 = 314.16px (semicircle)
+     * Degrees = 180 * (4 / 314.16) ≈ 2.3°
+     *
+     * Mathematical basis:
+     * - Semicircle arc length = π * r
+     * - Ratio of gap to semicircle = px / (π * r)
+     * - Convert ratio to degrees by multiplying by 180°
+     */
+    gapDegreesForRadius(px, r) {
+        const semicircumference = Math.PI * r;
+        return 180 * this.clamp(px / semicircumference, 0, 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RadialGaugeComponent, isStandalone: true, selector: "ngx-radial-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, segmentGapPx: { classPropertyName: "segmentGapPx", publicName: "segmentGapPx", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fitToContainer: { classPropertyName: "fitToContainer", publicName: "fitToContainer", isSignal: true, isRequired: false, transformFunction: null }, containerPadding: { classPropertyName: "containerPadding", publicName: "containerPadding", isSignal: true, isRequired: false, transformFunction: null }, responsiveMode: { classPropertyName: "responsiveMode", publicName: "responsiveMode", isSignal: true, isRequired: false, transformFunction: null }, sizeToThicknessRatio: { classPropertyName: "sizeToThicknessRatio", publicName: "sizeToThicknessRatio", isSignal: true, isRequired: false, transformFunction: null }, responsiveProportions: { classPropertyName: "responsiveProportions", publicName: "responsiveProportions", isSignal: true, isRequired: false, transformFunction: null }, outerThickness: { classPropertyName: "outerThickness", publicName: "outerThickness", isSignal: true, isRequired: false, transformFunction: null }, innerThickness: { classPropertyName: "innerThickness", publicName: "innerThickness", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, labelReference: { classPropertyName: "labelReference", publicName: "labelReference", isSignal: true, isRequired: false, transformFunction: null }, referenceGlyph: { classPropertyName: "referenceGlyph", publicName: "referenceGlyph", isSignal: true, isRequired: false, transformFunction: null }, labelPadding: { classPropertyName: "labelPadding", publicName: "labelPadding", isSignal: true, isRequired: false, transformFunction: null }, baselineSafety: { classPropertyName: "baselineSafety", publicName: "baselineSafety", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "clampedValue()", "attr.aria-valuetext": "formattedLabel()", "attr.aria-labelledby": "titleId", "attr.aria-describedby": "descId", "class.fit-container": "fitToContainer()", "class.has-background": "hasBackground()" } }, viewQueries: [{ propertyName: "valueTextEl", first: true, predicate: ["valueText"], descendants: true, isSignal: true }, { propertyName: "valueGroupEl", first: true, predicate: ["valueGroup"], descendants: true, isSignal: true }, { propertyName: "refTextEl", first: true, predicate: ["refText"], descendants: true, isSignal: true }], ngImport: i0, template: "@let w = svgWidth(); @let h = svgHeight(); @let cy = centerY(); @let pct =\r\npercent();\r\n\r\n<svg\r\n  [attr.width]=\"fitToContainer() ? null : w\"\r\n  [attr.height]=\"fitToContainer() ? null : h\"\r\n  [attr.viewBox]=\"'0 0 ' + w + ' ' + h\"\r\n  [class.responsive]=\"fitToContainer()\"\r\n  class=\"gauge-svg\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n  <title [attr.id]=\"titleId\">{{ title() }}</title>\r\n  @if (description()) {\r\n  <desc [attr.id]=\"descId\">{{ description() }}</desc>\r\n  }\r\n\r\n  <defs>\r\n    <clipPath [attr.id]=\"clipId\">\r\n      <!-- Give a tiny extra room equal to half of the outer stroke to avoid anti-alias cutoff at the baseline -->\r\n      <rect\r\n        x=\"0\"\r\n        y=\"0\"\r\n        [attr.width]=\"w\"\r\n        [attr.height]=\"cy + effectiveOuterThickness() / 2\"\r\n      />\r\n    </clipPath>\r\n  </defs>\r\n\r\n  <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\r\n    <path\r\n      [attr.d]=\"backgroundArcPath()\"\r\n      pathLength=\"100\"\r\n      fill=\"none\"\r\n      class=\"gauge-background\"\r\n      [attr.stroke-width]=\"effectiveOuterThickness()\"\r\n      stroke-linecap=\"butt\"\r\n    />\r\n\r\n    <path\r\n      [attr.d]=\"backgroundArcPath()\"\r\n      pathLength=\"100\"\r\n      fill=\"none\"\r\n      class=\"gauge-value\"\r\n      [attr.stroke]=\"valueColor()\"\r\n      [attr.stroke-width]=\"effectiveOuterThickness()\"\r\n      stroke-linecap=\"butt\"\r\n      [attr.stroke-dasharray]=\"pct + ' 100'\"\r\n    />\r\n\r\n    @for (segment of segmentPaths(); track segment.path) {\r\n    <path\r\n      [attr.d]=\"segment.path\"\r\n      fill=\"none\"\r\n      [attr.stroke]=\"segment.color\"\r\n      [attr.stroke-width]=\"effectiveInnerThickness()\"\r\n      stroke-linecap=\"butt\"\r\n      class=\"gauge-segment\"\r\n    />\r\n    }\r\n  </g>\r\n\r\n  @if (showValueLabel()) {\r\n  <g #valueGroup [attr.transform]=\"valueTransform()\">\r\n    <text\r\n      #valueText\r\n      class=\"gauge-value-text\"\r\n      x=\"0\"\r\n      y=\"0\"\r\n      text-anchor=\"middle\"\r\n      alignment-baseline=\"baseline\"\r\n      dy=\"-0.75\"\r\n    >\r\n      {{ formattedLabel() }}\r\n    </text>\r\n  </g>\r\n  }\r\n\r\n  <!-- Hidden reference text used ONLY for width measurement -->\r\n  <g style=\"visibility: hidden; pointer-events: none\" aria-hidden=\"true\">\r\n    <text\r\n      #refText\r\n      x=\"0\"\r\n      y=\"0\"\r\n      text-anchor=\"start\"\r\n      dominant-baseline=\"alphabetic\"\r\n    >\r\n      {{ referenceString() }}\r\n    </text>\r\n  </g>\r\n</svg>\r\n", styles: [":host{display:block;--gauge-outer-bg: var(--mat-sys-surface-variant, #e0e0e0);--gauge-value-good: var(--mat-sys-tertiary, #10b981);--gauge-value-warning: var(--mat-sys-secondary, #f59e0b);--gauge-value-critical: var(--mat-sys-error, #dc2626)}:host.fit-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.gauge-svg{display:block;margin-inline:auto;max-width:100%;height:auto;shape-rendering:geometricPrecision}.gauge-svg.responsive{max-width:100%;max-height:100%;width:auto;height:auto}.gauge-background{stroke:var(--gauge-outer-bg);transition:stroke .2s ease}.gauge-value{transition:stroke-dasharray .2s ease,stroke .2s ease}.gauge-segment{transition:stroke .2s ease;opacity:.9}.gauge-segment:hover{opacity:1}@media (prefers-reduced-motion: reduce){.gauge-value,.gauge-segment{transition:none}}@media (prefers-contrast: high){.gauge-background{stroke-width:2;stroke:var(--mat-sys-outline, #000000)}.gauge-segment{opacity:1}}@media (prefers-color-scheme: dark){:host{--gauge-outer-bg: #374151}}.gauge-value-text{fill:var(--mat-sys-on-surface-variant, #6c757d);font-family:var(--mat-sys-typescale-body-large-font, \"Roboto\", sans-serif);font-weight:var(--mat-sys-typescale-body-large-weight, 400);transition:fill var(--mat-sys-motion-duration-short2, .2s) var(--mat-sys-motion-easing-standard, ease)}:host.has-background .gauge-value-text{fill:var(--mat-sys-on-surface, #1f1f1f)}:host:hover .gauge-value-text{fill:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-radial-gauge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'meter',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-valuemin]': 'min()',
+                        '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-valuenow]': 'clampedValue()',
+                        '[attr.aria-valuetext]': 'formattedLabel()',
+                        '[attr.aria-labelledby]': 'titleId',
+                        '[attr.aria-describedby]': 'descId',
+                        '[class.fit-container]': 'fitToContainer()',
+                        '[class.has-background]': 'hasBackground()',
+                    }, template: "@let w = svgWidth(); @let h = svgHeight(); @let cy = centerY(); @let pct =\r\npercent();\r\n\r\n<svg\r\n  [attr.width]=\"fitToContainer() ? null : w\"\r\n  [attr.height]=\"fitToContainer() ? null : h\"\r\n  [attr.viewBox]=\"'0 0 ' + w + ' ' + h\"\r\n  [class.responsive]=\"fitToContainer()\"\r\n  class=\"gauge-svg\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n  <title [attr.id]=\"titleId\">{{ title() }}</title>\r\n  @if (description()) {\r\n  <desc [attr.id]=\"descId\">{{ description() }}</desc>\r\n  }\r\n\r\n  <defs>\r\n    <clipPath [attr.id]=\"clipId\">\r\n      <!-- Give a tiny extra room equal to half of the outer stroke to avoid anti-alias cutoff at the baseline -->\r\n      <rect\r\n        x=\"0\"\r\n        y=\"0\"\r\n        [attr.width]=\"w\"\r\n        [attr.height]=\"cy + effectiveOuterThickness() / 2\"\r\n      />\r\n    </clipPath>\r\n  </defs>\r\n\r\n  <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\r\n    <path\r\n      [attr.d]=\"backgroundArcPath()\"\r\n      pathLength=\"100\"\r\n      fill=\"none\"\r\n      class=\"gauge-background\"\r\n      [attr.stroke-width]=\"effectiveOuterThickness()\"\r\n      stroke-linecap=\"butt\"\r\n    />\r\n\r\n    <path\r\n      [attr.d]=\"backgroundArcPath()\"\r\n      pathLength=\"100\"\r\n      fill=\"none\"\r\n      class=\"gauge-value\"\r\n      [attr.stroke]=\"valueColor()\"\r\n      [attr.stroke-width]=\"effectiveOuterThickness()\"\r\n      stroke-linecap=\"butt\"\r\n      [attr.stroke-dasharray]=\"pct + ' 100'\"\r\n    />\r\n\r\n    @for (segment of segmentPaths(); track segment.path) {\r\n    <path\r\n      [attr.d]=\"segment.path\"\r\n      fill=\"none\"\r\n      [attr.stroke]=\"segment.color\"\r\n      [attr.stroke-width]=\"effectiveInnerThickness()\"\r\n      stroke-linecap=\"butt\"\r\n      class=\"gauge-segment\"\r\n    />\r\n    }\r\n  </g>\r\n\r\n  @if (showValueLabel()) {\r\n  <g #valueGroup [attr.transform]=\"valueTransform()\">\r\n    <text\r\n      #valueText\r\n      class=\"gauge-value-text\"\r\n      x=\"0\"\r\n      y=\"0\"\r\n      text-anchor=\"middle\"\r\n      alignment-baseline=\"baseline\"\r\n      dy=\"-0.75\"\r\n    >\r\n      {{ formattedLabel() }}\r\n    </text>\r\n  </g>\r\n  }\r\n\r\n  <!-- Hidden reference text used ONLY for width measurement -->\r\n  <g style=\"visibility: hidden; pointer-events: none\" aria-hidden=\"true\">\r\n    <text\r\n      #refText\r\n      x=\"0\"\r\n      y=\"0\"\r\n      text-anchor=\"start\"\r\n      dominant-baseline=\"alphabetic\"\r\n    >\r\n      {{ referenceString() }}\r\n    </text>\r\n  </g>\r\n</svg>\r\n", styles: [":host{display:block;--gauge-outer-bg: var(--mat-sys-surface-variant, #e0e0e0);--gauge-value-good: var(--mat-sys-tertiary, #10b981);--gauge-value-warning: var(--mat-sys-secondary, #f59e0b);--gauge-value-critical: var(--mat-sys-error, #dc2626)}:host.fit-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.gauge-svg{display:block;margin-inline:auto;max-width:100%;height:auto;shape-rendering:geometricPrecision}.gauge-svg.responsive{max-width:100%;max-height:100%;width:auto;height:auto}.gauge-background{stroke:var(--gauge-outer-bg);transition:stroke .2s ease}.gauge-value{transition:stroke-dasharray .2s ease,stroke .2s ease}.gauge-segment{transition:stroke .2s ease;opacity:.9}.gauge-segment:hover{opacity:1}@media (prefers-reduced-motion: reduce){.gauge-value,.gauge-segment{transition:none}}@media (prefers-contrast: high){.gauge-background{stroke-width:2;stroke:var(--mat-sys-outline, #000000)}.gauge-segment{opacity:1}}@media (prefers-color-scheme: dark){:host{--gauge-outer-bg: #374151}}.gauge-value-text{fill:var(--mat-sys-on-surface-variant, #6c757d);font-family:var(--mat-sys-typescale-body-large-font, \"Roboto\", sans-serif);font-weight:var(--mat-sys-typescale-body-large-weight, 400);transition:fill var(--mat-sys-motion-duration-short2, .2s) var(--mat-sys-motion-easing-standard, ease)}:host.has-background .gauge-value-text{fill:var(--mat-sys-on-surface, #1f1f1f)}:host:hover .gauge-value-text{fill:var(--mat-sys-primary, #6750a4)}\n"] }]
+        }], ctorParameters: () => [] });
+
+// radial-gauge-widget.metadata.ts
+const svgIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 55" fill="currentColor">
+  <defs>
+    <clipPath id="gauge-clip"><rect x="0" y="0" width="100" height="52"/></clipPath>
+
+    <!-- Outer arc geometry (radius 40, stroke 8) -->
+    <path id="outerArc" d="M 10 50 A 40 40 0 0 1 90 50" pathLength="100"/>
+
+    <!-- Inner arc geometry (radius 31) -->
+    <path id="innerArc" d="M 19 50 A 31 31 0 0 1 81 50" pathLength="100"/>
+  </defs>
+
+  <g clip-path="url(#gauge-clip)" stroke="currentColor" fill="none" stroke-linecap="butt">
+    <!-- Outer background arc -->
+    <use href="#outerArc" stroke-width="8" opacity="0.2"/>
+
+    <!-- Value arc: 65% -->
+    <use href="#outerArc" stroke-width="8" stroke-dasharray="65 100"/>
+
+    <!-- Inner legend segments (single geometry with dash windows) -->
+    <!-- 0–60% -->
+    <use href="#innerArc" stroke-width="4" opacity="0.2"
+         stroke-dasharray="60 100" stroke-dashoffset="0"/>
+    <!-- 60–80% -->
+    <use href="#innerArc" stroke-width="4" opacity="0.4"
+         stroke-dasharray="20 100" stroke-dashoffset="60"/>
+    <!-- 0–100% (full half-circle), same color as value arc -->
+    <use href="#innerArc" stroke-width="4"
+         stroke-dasharray="100 100" stroke-dashoffset="0"/>
+    <!-- (Alternatively, you can omit dash attributes entirely on this one:
+         <use href="#innerArc" stroke-width="4"/> ) -->
+  </g>
+</svg>
+`;
+
+class RadialGaugeStateDialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef = inject((MatDialogRef));
+    localState = {
+        value: this.data.value ?? 50,
+        colorProfile: this.data.colorProfile ?? 'dynamic',
+        active: this.data.active ?? false,
+        hasBackground: this.data.hasBackground ?? true,
+        showValueLabel: this.data.showValueLabel ?? true,
+    };
+    onCancel() {
+        this.dialogRef.close();
+    }
+    onSave() {
+        this.dialogRef.close(this.localState);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: RadialGaugeStateDialogComponent, isStandalone: true, selector: "lib-radial-gauge-state-dialog", ngImport: i0, template: `
+    <h2 mat-dialog-title>Radial Gauge Settings</h2>
+    <mat-dialog-content>
+      <mat-form-field>
+        <mat-label>Value (0-100)</mat-label>
+        <input
+          matInput
+          type="number"
+          [(ngModel)]="localState.value"
+          min="0"
+          max="100"
+        />
+      </mat-form-field>
+
+      <div class="section">
+        <h4>Color Profile</h4>
+        <mat-radio-group [(ngModel)]="localState.colorProfile">
+          <mat-radio-button value="dynamic">Dynamic (Theme Colors)</mat-radio-button>
+          <mat-radio-button value="static">Static (Performance Colors)</mat-radio-button>
+        </mat-radio-group>
+      </div>
+
+      <div class="toggle-section">
+        <mat-slide-toggle [(ngModel)]="localState.active">
+          Active Display
+        </mat-slide-toggle>
+        <p class="toggle-description">Display live gauge instead of passive icon</p>
+      </div>
+
+      <div class="toggle-section">
+        <mat-slide-toggle [(ngModel)]="localState.hasBackground">
+          Background
+        </mat-slide-toggle>
+        <p class="toggle-description">Add a background color to the widget</p>
+      </div>
+
+      <div class="toggle-section">
+        <mat-slide-toggle [(ngModel)]="localState.showValueLabel">
+          Show Value Label
+        </mat-slide-toggle>
+        <p class="toggle-description">Display numeric value in gauge center</p>
+      </div>
+    </mat-dialog-content>
+
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="onCancel()">Cancel</button>
+      <button mat-flat-button (click)="onSave()">Save</button>
+    </mat-dialog-actions>
+  `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden}mat-form-field{width:100%;display:block;margin-bottom:1rem}.section{margin-bottom:1.5rem}.section h4{margin:0 0 .5rem;font-size:.875rem;font-weight:500;color:var(--mat-sys-on-surface, #1f1f1f)}mat-radio-group{display:flex;flex-direction:column;gap:.5rem}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-description{margin:0;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeStateDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-radial-gauge-state-dialog', standalone: true, imports: [
+                        CommonModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSlideToggleModule,
+                        MatRadioModule,
+                        FormsModule,
+                    ], template: `
+    <h2 mat-dialog-title>Radial Gauge Settings</h2>
+    <mat-dialog-content>
+      <mat-form-field>
+        <mat-label>Value (0-100)</mat-label>
+        <input
+          matInput
+          type="number"
+          [(ngModel)]="localState.value"
+          min="0"
+          max="100"
+        />
+      </mat-form-field>
+
+      <div class="section">
+        <h4>Color Profile</h4>
+        <mat-radio-group [(ngModel)]="localState.colorProfile">
+          <mat-radio-button value="dynamic">Dynamic (Theme Colors)</mat-radio-button>
+          <mat-radio-button value="static">Static (Performance Colors)</mat-radio-button>
+        </mat-radio-group>
+      </div>
+
+      <div class="toggle-section">
+        <mat-slide-toggle [(ngModel)]="localState.active">
+          Active Display
+        </mat-slide-toggle>
+        <p class="toggle-description">Display live gauge instead of passive icon</p>
+      </div>
+
+      <div class="toggle-section">
+        <mat-slide-toggle [(ngModel)]="localState.hasBackground">
+          Background
+        </mat-slide-toggle>
+        <p class="toggle-description">Add a background color to the widget</p>
+      </div>
+
+      <div class="toggle-section">
+        <mat-slide-toggle [(ngModel)]="localState.showValueLabel">
+          Show Value Label
+        </mat-slide-toggle>
+        <p class="toggle-description">Display numeric value in gauge center</p>
+      </div>
+    </mat-dialog-content>
+
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="onCancel()">Cancel</button>
+      <button mat-flat-button (click)="onSave()">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}.section{margin-bottom:1.5rem}.section h4{margin:0 0 .5rem;font-size:.875rem;font-weight:500;color:var(--mat-sys-on-surface, #1f1f1f)}mat-radio-group{display:flex;flex-direction:column;gap:.5rem}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-description{margin:0;flex:1}\n"] }]
+        }] });
+
+// radial-gauge-widget.component.ts
+class RadialGaugeWidgetComponent {
+    static metadata = {
+        widgetTypeid: '@ngx-dashboard/radial-gauge-widget',
+        name: 'Radial Gauge',
+        description: 'A semi-circular gauge indicator',
+        svgIcon,
+    };
+    #dialog = inject(MatDialog);
+    #sanitizer = inject(DomSanitizer);
+    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon);
+    state = signal({
+        value: 50,
+        colorProfile: 'dynamic',
+        active: false,
+        hasBackground: true,
+        showValueLabel: true,
+    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    segments = computed(() => {
+        const profile = this.state().colorProfile || 'dynamic';
+        if (profile === 'static') {
+            // Static performance segments (like CPU usage example)
+            return [
+                { from: 0, to: 25, color: '#dc2626' }, // Poor - red
+                { from: 25, to: 50, color: '#f59e0b' }, // Fair - orange
+                { from: 50, to: 75, color: '#3b82f6' }, // Good - blue
+                { from: 75, to: 100, color: '#10b981' }, // Excellent - green
+            ];
+        }
+        else {
+            // Dynamic theme-aware segments (like demo gauge preview)
+            return [
+                { from: 0, to: 60, color: 'var(--mat-sys-error)' },
+                { from: 60, to: 80, color: 'var(--mat-sys-secondary)' },
+                { from: 80, to: 100, color: 'var(--mat-sys-tertiary)' },
+            ];
+        }
+    }, ...(ngDevMode ? [{ debugName: "segments" }] : []));
+    dashboardSetState(state) {
+        if (state) {
+            this.state.update((current) => ({
+                ...current,
+                ...state,
+            }));
+        }
+    }
+    dashboardGetState() {
+        return this.state();
+    }
+    dashboardEditState() {
+        const dialogRef = this.#dialog.open(RadialGaugeStateDialogComponent, {
+            data: this.state(),
+            width: '400px',
+            maxWidth: '90vw',
+            disableClose: false,
+            autoFocus: false,
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.state.set(result);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RadialGaugeWidgetComponent, isStandalone: true, selector: "ngx-dashboard-radial-gauge-widget", ngImport: i0, template: "<!-- radial-gauge-widget.component.html -->\r\n<div class=\"widget-container\" [class.has-background]=\"state().hasBackground\">\r\n  @if (state().active) {\r\n  <!-- Active mode: Show live gauge -->\r\n  <div class=\"gauge-container\">\r\n    <ngx-radial-gauge\r\n      [value]=\"state().value || 0\"\r\n      [min]=\"0\"\r\n      [max]=\"100\"\r\n      [fitToContainer]=\"true\"\r\n      [responsiveMode]=\"true\"\r\n      [segments]=\"segments()\"\r\n      [outerThickness]=\"24\"\r\n      [innerThickness]=\"8\"\r\n      [gap]=\"4\"\r\n      [segmentGapPx]=\"2\"\r\n      [labelReference]=\"'00000'\"\r\n      [referenceGlyph]=\"'0'\"\r\n      [hasBackground]=\"state().hasBackground || false\"\r\n      [showValueLabel]=\"state().showValueLabel ?? true\"\r\n    />\r\n  </div>\r\n  } @else {\r\n  <!-- Passive mode: Show static icon -->\r\n  <div class=\"icon-container\">\r\n    <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.widget-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.widget-container.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.gauge-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}ngx-radial-gauge{width:100%;height:100%;min-height:0;flex:1}.icon-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}.svg-placeholder{width:80%;height:80%;display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #6c757d);transition:color .2s ease}.svg-placeholder :deep(svg){width:100%;height:100%;max-width:100px;max-height:100px;fill:currentColor}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.widget-container:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "component", type: RadialGaugeComponent, selector: "ngx-radial-gauge", inputs: ["value", "min", "max", "segments", "title", "description", "segmentGapPx", "hasBackground", "showValueLabel", "size", "fitToContainer", "containerPadding", "responsiveMode", "sizeToThicknessRatio", "responsiveProportions", "outerThickness", "innerThickness", "gap", "labelReference", "referenceGlyph", "labelPadding", "baselineSafety"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dashboard-radial-gauge-widget', imports: [RadialGaugeComponent], template: "<!-- radial-gauge-widget.component.html -->\r\n<div class=\"widget-container\" [class.has-background]=\"state().hasBackground\">\r\n  @if (state().active) {\r\n  <!-- Active mode: Show live gauge -->\r\n  <div class=\"gauge-container\">\r\n    <ngx-radial-gauge\r\n      [value]=\"state().value || 0\"\r\n      [min]=\"0\"\r\n      [max]=\"100\"\r\n      [fitToContainer]=\"true\"\r\n      [responsiveMode]=\"true\"\r\n      [segments]=\"segments()\"\r\n      [outerThickness]=\"24\"\r\n      [innerThickness]=\"8\"\r\n      [gap]=\"4\"\r\n      [segmentGapPx]=\"2\"\r\n      [labelReference]=\"'00000'\"\r\n      [referenceGlyph]=\"'0'\"\r\n      [hasBackground]=\"state().hasBackground || false\"\r\n      [showValueLabel]=\"state().showValueLabel ?? true\"\r\n    />\r\n  </div>\r\n  } @else {\r\n  <!-- Passive mode: Show static icon -->\r\n  <div class=\"icon-container\">\r\n    <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.widget-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.widget-container.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.gauge-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}ngx-radial-gauge{width:100%;height:100%;min-height:0;flex:1}.icon-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}.svg-placeholder{width:80%;height:80%;display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #6c757d);transition:color .2s ease}.svg-placeholder :deep(svg){width:100%;height:100%;max-width:100px;max-height:100px;fill:currentColor}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.widget-container:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] }]
+        }] });
+
+/*
+ * Public API Surface of ngx-dashboard-widgets
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ArrowWidgetComponent, ClockWidgetComponent, LabelWidgetComponent, RadialGaugeComponent, RadialGaugeWidgetComponent, ResponsiveTextDirective };
+//# sourceMappingURL=dragonworks-ngx-dashboard-widgets.mjs.map