@dragonworks/ngx-dashboard-widgets 20.0.5 → 20.1.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Component, input, numberAttribute, booleanAttribute, ElementRef, NgZone, PLATFORM_ID, DestroyRef, Directive, ChangeDetectionStrategy, Renderer2, viewChild, effect } 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';
@@ -20,18 +20,20 @@ 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$2 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-120v-320H120l360-440 360 440H640v320H320Zm80-80h160v-320h111L480-754 289-520h111v320Zm80-320Z"/></svg>';
+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);
-    opacity = signal(this.data.opacity ?? 1);
-    hasBackground = signal(this.data.hasBackground ?? true);
-    transparentBackground = signal(!(this.data.hasBackground ?? true));
+    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;
@@ -45,8 +47,8 @@ class ArrowStateDialogComponent {
             left: 270,
         };
         return rotationMap[this.direction()];
-    });
-    rotationTransform = computed(() => `rotate(${this.rotation()}deg)`);
+    }, ...(ngDevMode ? [{ debugName: "rotation" }] : []));
+    rotationTransform = computed(() => `rotate(${this.rotation()}deg)`, ...(ngDevMode ? [{ debugName: "rotationTransform" }] : []));
     directionName = computed(() => {
         const nameMap = {
             up: 'Up',
@@ -55,10 +57,10 @@ class ArrowStateDialogComponent {
             left: 'Left',
         };
         return nameMap[this.direction()];
-    });
+    }, ...(ngDevMode ? [{ debugName: "directionName" }] : []));
     hasChanged = computed(() => this.direction() !== this.originalDirection ||
         this.opacity() !== this.originalOpacity ||
-        this.hasBackground() !== this.originalHasBackground);
+        this.hasBackground() !== this.originalHasBackground, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
     formatOpacity(value) {
         return Math.round(value * 100);
     }
@@ -76,8 +78,8 @@ class ArrowStateDialogComponent {
             hasBackground: this.hasBackground(),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ArrowStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: ArrowStateDialogComponent, isStandalone: true, selector: "lib-arrow-state-dialog", ngImport: i0, template: `
+    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 -->
@@ -121,7 +123,7 @@ class ArrowStateDialogComponent {
     </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.0.6", ngImport: i0, type: ArrowStateDialogComponent, decorators: [{
+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,
@@ -183,16 +185,16 @@ class ArrowWidgetComponent {
         widgetTypeid: '@default/arrow-widget',
         name: 'Arrow',
         description: 'A generic arrow',
-        svgIcon: svgIcon$2,
+        svgIcon: svgIcon$3,
     };
     #sanitizer = inject(DomSanitizer);
     #dialog = inject(MatDialog);
-    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon$2);
+    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon$3);
     state = signal({
         direction: 'up',
         opacity: 0.3,
         hasBackground: true,
-    });
+    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
     // Computed rotation
     rotationAngle = computed(() => {
         const rotationMap = {
@@ -202,7 +204,7 @@ class ArrowWidgetComponent {
             left: 270,
         };
         return rotationMap[this.state().direction];
-    });
+    }, ...(ngDevMode ? [{ debugName: "rotationAngle" }] : []));
     dashboardSetState(state) {
         if (state) {
             this.state.update((current) => ({
@@ -228,32 +230,32 @@ class ArrowWidgetComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ArrowWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", 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;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #6c757d);transition:fill .2s ease}.has-background .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-on-surface, #1f1f1f)}.svg-wrapper:hover .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-primary, #6750a4)}\n"] });
+    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.0.6", ngImport: i0, type: ArrowWidgetComponent, decorators: [{
+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;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #6c757d);transition:fill .2s ease}.has-background .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-on-surface, #1f1f1f)}.svg-wrapper:hover .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-primary, #6750a4)}\n"] }]
+            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$1 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M280-280h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm-80 480q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>';
+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 ?? '');
-    fontSize = signal(this.data.fontSize ?? 16);
-    alignment = signal(this.data.alignment ?? 'center');
-    fontWeight = signal(this.data.fontWeight ?? 'normal');
-    opacity = signal(this.data.opacity ?? 1);
-    hasBackground = signal(this.data.hasBackground ?? true);
-    transparentBackground = signal(!(this.data.hasBackground ?? true));
-    responsive = signal(this.data.responsive ?? false);
+    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);
-    maxFontSize = signal(this.data.maxFontSize ?? 64);
+    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;
@@ -268,15 +270,15 @@ class LabelStateDialogComponent {
     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;
-    });
-    isFontSizeRangeValid = computed(() => this.minFontSize() < this.maxFontSize());
+    }, ...(ngDevMode ? [{ debugName: "isMaxFontSizeValid" }] : []));
+    isFontSizeRangeValid = computed(() => this.minFontSize() < this.maxFontSize(), ...(ngDevMode ? [{ debugName: "isFontSizeRangeValid" }] : []));
     isFormValid = computed(() => this.isMinFontSizeValid() &&
         this.isMaxFontSizeValid() &&
-        this.isFontSizeRangeValid());
+        this.isFontSizeRangeValid(), ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
     // Computed values
     hasChanged = computed(() => this.label() !== this.originalLabel ||
         this.fontSize() !== this.originalFontSize ||
@@ -286,7 +288,7 @@ class LabelStateDialogComponent {
         this.hasBackground() !== this.originalHasBackground ||
         this.responsive() !== this.originalResponsive ||
         this.minFontSize() !== this.originalMinFontSize ||
-        this.maxFontSize() !== this.originalMaxFontSize);
+        this.maxFontSize() !== this.originalMaxFontSize, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
     formatOpacity(value) {
         return Math.round(value * 100);
     }
@@ -334,8 +336,8 @@ class LabelStateDialogComponent {
             maxFontSize: this.maxFontSize(),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LabelStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LabelStateDialogComponent, isStandalone: true, selector: "lib-label-state-dialog", ngImport: i0, template: `
+    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">
@@ -487,7 +489,7 @@ class LabelStateDialogComponent {
     </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.0.6", ngImport: i0, type: LabelStateDialogComponent, decorators: [{
+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,
@@ -664,18 +666,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 class ResponsiveTextDirective {
     /* ───────────────────────── Inputs with transforms ─────────────── */
     /** Minimum font-size in pixels (accessibility floor) */
-    minFontSize = input(8, { transform: numberAttribute });
+    minFontSize = input(8, ...(ngDevMode ? [{ debugName: "minFontSize", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /** Maximum font-size in pixels (layout ceiling) */
-    maxFontSize = input(512, { transform: numberAttribute });
+    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, { transform: numberAttribute });
+    lineHeight = input(1.1, ...(ngDevMode ? [{ debugName: "lineHeight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /** Whether to observe text mutations after first render */
-    observeMutations = input(true, { transform: booleanAttribute });
+    observeMutations = input(true, ...(ngDevMode ? [{ debugName: "observeMutations", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Debounce delay in ms for resize/mutation callbacks */
-    debounceMs = input(16, { transform: numberAttribute });
+    debounceMs = input(16, ...(ngDevMode ? [{ debugName: "debounceMs", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /* ───────────────────────── Private state ───────────────────────── */
     el = inject(ElementRef);
     zone = inject(NgZone);
@@ -701,7 +703,12 @@ class ResponsiveTextDirective {
     lastMaxW = 0;
     lastMaxH = 0;
     lastFontSize = 0;
-    /* ───────────────────────── Lifecycle ──────────────────────────── */
+    constructor() {
+        // Set up cleanup on component destruction using modern DestroyRef
+        this.destroyRef.onDestroy(() => {
+            this.cleanup();
+        });
+    }
     ngAfterViewInit() {
         if (!isPlatformBrowser(this.platformId))
             return;
@@ -717,9 +724,6 @@ class ResponsiveTextDirective {
             }
         });
     }
-    ngOnDestroy() {
-        this.cleanup();
-    }
     /* ───────────────────── Core fitting logic ───────────────────── */
     /**
      * Debounced fit handler to prevent excessive recalculations
@@ -896,13 +900,13 @@ class ResponsiveTextDirective {
         // Clear canvas context
         this._ctx = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ResponsiveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: ResponsiveTextDirective, isStandalone: true, selector: "[responsiveText]", 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 });
+    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.0.6", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[responsiveText]',
+                    selector: '[libResponsiveText]',
                     standalone: true,
                     host: {
                         '[style.display]': '"block"',
@@ -911,7 +915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         '[style.overflow]': '"visible"',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 // label-widget.component.ts
 class LabelWidgetComponent {
@@ -919,11 +923,11 @@ class LabelWidgetComponent {
         widgetTypeid: '@default/label-widget',
         name: 'Label',
         description: 'A generic text label',
-        svgIcon: svgIcon$1,
+        svgIcon: svgIcon$2,
     };
     #sanitizer = inject(DomSanitizer);
     #dialog = inject(MatDialog);
-    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon$1);
+    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon$2);
     state = signal({
         label: '',
         fontSize: 16,
@@ -934,7 +938,7 @@ class LabelWidgetComponent {
         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) => ({
@@ -969,17 +973,17 @@ class LabelWidgetComponent {
         return this.state().label?.trim();
     }
     // Computed properties for responsive font size limits with fallbacks
-    minFontSize = computed(() => this.state().minFontSize ?? 8);
-    maxFontSize = computed(() => this.state().maxFontSize ?? 64);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LabelWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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\" responsiveText [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;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #6c757d);transition:fill .2s ease}.has-background .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-on-surface, #1f1f1f)}.svg-wrapper:hover .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "directive", type: ResponsiveTextDirective, selector: "[responsiveText]", inputs: ["minFontSize", "maxFontSize", "lineHeight", "observeMutations", "debounceMs"] }] });
+    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.0.6", ngImport: i0, type: LabelWidgetComponent, decorators: [{
+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\" responsiveText [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;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #6c757d);transition:fill .2s ease}.has-background .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-on-surface, #1f1f1f)}.svg-wrapper:hover .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-primary, #6750a4)}\n"] }]
+            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 = `
+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">
@@ -1010,12 +1014,14 @@ const svgIcon = `
   <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)"
   />
@@ -1026,10 +1032,10 @@ class ClockStateDialogComponent {
     data = inject(MAT_DIALOG_DATA);
     dialogRef = inject((MatDialogRef));
     // State signals
-    mode = signal(this.data.mode ?? 'digital');
-    hasBackground = signal(this.data.hasBackground ?? true);
-    timeFormat = signal(this.data.timeFormat ?? '24h');
-    showSeconds = signal(this.data.showSeconds ?? true);
+    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;
@@ -1039,7 +1045,7 @@ class ClockStateDialogComponent {
     hasChanged = computed(() => this.mode() !== this.originalMode ||
         this.hasBackground() !== this.originalHasBackground ||
         this.timeFormat() !== this.originalTimeFormat ||
-        this.showSeconds() !== this.originalShowSeconds);
+        this.showSeconds() !== this.originalShowSeconds, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
     onCancel() {
         this.dialogRef.close();
     }
@@ -1051,13 +1057,14 @@ class ClockStateDialogComponent {
             showSeconds: this.showSeconds(),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ClockStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ClockStateDialogComponent, isStandalone: true, selector: "demo-clock-state-dialog", ngImport: i0, template: `
+    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">Display Mode</label>
+        <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))"
         >
@@ -1069,8 +1076,9 @@ class ClockStateDialogComponent {
       <!-- Time Format (only for digital mode) -->
       @if (mode() === 'digital') {
       <div class="format-selection">
-        <label class="section-label">Time Format</label>
+        <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))"
         >
@@ -1117,9 +1125,9 @@ class ClockStateDialogComponent {
     </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.0.6", ngImport: i0, type: ClockStateDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ClockStateDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'demo-clock-state-dialog', standalone: true, imports: [
+            args: [{ selector: 'lib-clock-state-dialog', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         MatDialogModule,
@@ -1130,8 +1138,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
     <h2 mat-dialog-title>Clock Settings</h2>
     <mat-dialog-content>
       <div class="mode-selection">
-        <label class="section-label">Display Mode</label>
+        <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))"
         >
@@ -1143,8 +1152,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
       <!-- Time Format (only for digital mode) -->
       @if (mode() === 'digital') {
       <div class="format-selection">
-        <label class="section-label">Time Format</label>
+        <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))"
         >
@@ -1195,17 +1205,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 class DigitalClockComponent {
     #destroyRef = inject(DestroyRef);
     // Inputs
-    timeFormat = input('24h');
-    showSeconds = input(true);
-    hasBackground = input(false);
+    timeFormat = input('24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
+    showSeconds = input(true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
+    hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
     // Time tracking
-    currentTime = signal(new Date());
+    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();
@@ -1255,12 +1265,12 @@ class DigitalClockComponent {
             this.#intervalId = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DigitalClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: DigitalClockComponent, isStandalone: true, selector: "ngx-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 });
+    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.0.6", ngImport: i0, type: DigitalClockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DigitalClockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-digital-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'lib-digital-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.has-background]': 'hasBackground()',
                         '[class.show-pm]': 'timeFormat() === "12h"',
                         '[class.show-seconds]': 'showSeconds()',
@@ -1272,32 +1282,32 @@ class AnalogClockComponent {
     #destroyRef = inject(DestroyRef);
     #renderer = inject(Renderer2);
     // Inputs
-    hasBackground = input(false);
-    showSeconds = input(true);
+    hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
+    showSeconds = input(true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
     // ViewChild references for clock hands
-    hourHand = viewChild('hourHand');
-    minuteHand = viewChild('minuteHand');
-    secondHand = viewChild('secondHand');
+    hourHand = viewChild('hourHand', ...(ngDevMode ? [{ debugName: "hourHand" }] : []));
+    minuteHand = viewChild('minuteHand', ...(ngDevMode ? [{ debugName: "minuteHand" }] : []));
+    secondHand = viewChild('secondHand', ...(ngDevMode ? [{ debugName: "secondHand" }] : []));
     // Time tracking
-    currentTime = signal(new Date());
+    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
@@ -1343,12 +1353,12 @@ class AnalogClockComponent {
             this.#renderer.setAttribute(secondElement, 'transform', `rotate(${this.secondHandRotation()}, 400, 400)`);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: AnalogClockComponent, isStandalone: true, selector: "ngx-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 });
+    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.0.6", ngImport: i0, type: AnalogClockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AnalogClockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-analog-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'lib-analog-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.has-background]': 'hasBackground()',
                         '[class.show-seconds]': 'showSeconds()',
                         'class': 'clock-widget analog'
@@ -1361,17 +1371,17 @@ class ClockWidgetComponent {
         widgetTypeid: '@default/clock-widget',
         name: 'Clock',
         description: 'Display time in analog or digital format',
-        svgIcon,
+        svgIcon: svgIcon$1,
     };
     #sanitizer = inject(DomSanitizer);
     #dialog = inject(MatDialog);
-    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon);
+    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
     }
@@ -1408,14 +1418,827 @@ class ClockWidgetComponent {
     get isDigital() {
         return this.state().mode === 'digital';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ClockWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ClockWidgetComponent, isStandalone: true, selector: "ngx-dashboard-clock-widget", ngImport: i0, template: "@if (isDigital) {\r\n  <ngx-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  <ngx-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: "ngx-digital-clock", inputs: ["timeFormat", "showSeconds", "hasBackground"] }, { kind: "component", type: AnalogClockComponent, selector: "ngx-analog-clock", inputs: ["hasBackground", "showSeconds"] }] });
+    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.0.6", ngImport: i0, type: ClockWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-dashboard-clock-widget', standalone: true, imports: [DigitalClockComponent, AnalogClockComponent], template: "@if (isDigital) {\r\n  <ngx-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  <ngx-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"] }]
+            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: '@default/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
  */
@@ -1424,5 +2247,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ArrowWidgetComponent, ClockWidgetComponent, LabelWidgetComponent, ResponsiveTextDirective };
+export { ArrowWidgetComponent, ClockWidgetComponent, LabelWidgetComponent, RadialGaugeComponent, RadialGaugeWidgetComponent, ResponsiveTextDirective };
 //# sourceMappingURL=dragonworks-ngx-dashboard-widgets.mjs.map