@dragonworks/ngx-dashboard-widgets 21.2.1 → 22.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/dragonworks-ngx-dashboard-widgets.mjs +254 -149
  2. package/fesm2022/dragonworks-ngx-dashboard-widgets.mjs.map +1 -1
  3. package/package.json +8 -5
  4. package/types/dragonworks-ngx-dashboard-widgets.d.ts +1 -1
package/fesm2022/dragonworks-ngx-dashboard-widgets.mjs CHANGED
@@ -25,7 +25,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
25
25
 
26
26
  // Auto-generated by scripts/generate-versions.js
27
27
  // Do not edit manually
28
- const NGX_DASHBOARD_WIDGETS_VERSION = '21.2.1';
28
+ const NGX_DASHBOARD_WIDGETS_VERSION = '22.0.0';
29
29
 
30
30
  // arrow-widget.metadata.ts
31
31
  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>';
@@ -34,10 +34,14 @@ class ArrowStateDialogComponent {
34
34
  data = inject(MAT_DIALOG_DATA);
35
35
  dialogRef = inject((MatDialogRef));
36
36
  // State signals
37
- direction = signal(this.data.direction, ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
38
- opacity = signal(this.data.opacity ?? 1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
39
- hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
40
- transparentBackground = signal(!(this.data.hasBackground ?? true), ...(ngDevMode ? [{ debugName: "transparentBackground" }] : /* istanbul ignore next */ []));
37
+ direction = signal(this.data.direction, /* @ts-ignore */
38
+ ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
39
+ opacity = signal(this.data.opacity ?? 1, /* @ts-ignore */
40
+ ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
41
+ hasBackground = signal(this.data.hasBackground ?? true, /* @ts-ignore */
42
+ ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
43
+ transparentBackground = signal(!(this.data.hasBackground ?? true), /* @ts-ignore */
44
+ ...(ngDevMode ? [{ debugName: "transparentBackground" }] : /* istanbul ignore next */ []));
41
45
  // Store original values for comparison
42
46
  originalDirection = this.data.direction;
43
47
  originalOpacity = this.data.opacity ?? 1;
@@ -51,8 +55,10 @@ class ArrowStateDialogComponent {
51
55
  left: 270,
52
56
  };
53
57
  return rotationMap[this.direction()];
54
- }, ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
55
- rotationTransform = computed(() => `rotate(${this.rotation()}deg)`, ...(ngDevMode ? [{ debugName: "rotationTransform" }] : /* istanbul ignore next */ []));
58
+ }, /* @ts-ignore */
59
+ ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
60
+ rotationTransform = computed(() => `rotate(${this.rotation()}deg)`, /* @ts-ignore */
61
+ ...(ngDevMode ? [{ debugName: "rotationTransform" }] : /* istanbul ignore next */ []));
56
62
  directionName = computed(() => {
57
63
  const nameMap = {
58
64
  up: 'Up',
@@ -61,10 +67,12 @@ class ArrowStateDialogComponent {
61
67
  left: 'Left',
62
68
  };
63
69
  return nameMap[this.direction()];
64
- }, ...(ngDevMode ? [{ debugName: "directionName" }] : /* istanbul ignore next */ []));
70
+ }, /* @ts-ignore */
71
+ ...(ngDevMode ? [{ debugName: "directionName" }] : /* istanbul ignore next */ []));
65
72
  hasChanged = computed(() => this.direction() !== this.originalDirection ||
66
73
  this.opacity() !== this.originalOpacity ||
67
- this.hasBackground() !== this.originalHasBackground, ...(ngDevMode ? [{ debugName: "hasChanged" }] : /* istanbul ignore next */ []));
74
+ this.hasBackground() !== this.originalHasBackground, /* @ts-ignore */
75
+ ...(ngDevMode ? [{ debugName: "hasChanged" }] : /* istanbul ignore next */ []));
68
76
  formatOpacity(value) {
69
77
  return Math.round(value * 100);
70
78
  }
@@ -82,8 +90,8 @@ class ArrowStateDialogComponent {
82
90
  hasBackground: this.hasBackground(),
83
91
  });
84
92
  }
85
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ArrowStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
86
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: ArrowStateDialogComponent, isStandalone: true, selector: "lib-arrow-state-dialog", ngImport: i0, template: `
93
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ArrowStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
94
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ArrowStateDialogComponent, isStandalone: true, selector: "lib-arrow-state-dialog", ngImport: i0, template: `
87
95
  <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.arrow.dialog.title">
88
96
  Arrow Settings
89
97
  </h2>
@@ -167,9 +175,9 @@ class ArrowStateDialogComponent {
167
175
  Save
168
176
  </button>
169
177
  </mat-dialog-actions>
170
- `, 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
178
+ `, 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: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
171
179
  }
172
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ArrowStateDialogComponent, decorators: [{
180
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ArrowStateDialogComponent, decorators: [{
173
181
  type: Component,
174
182
  args: [{ selector: 'lib-arrow-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
175
183
  FormsModule,
@@ -281,7 +289,8 @@ class ArrowWidgetComponent {
281
289
  direction: 'up',
282
290
  opacity: 0.3,
283
291
  hasBackground: true,
284
- }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
292
+ }, /* @ts-ignore */
293
+ ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
285
294
  // Computed rotation
286
295
  rotationAngle = computed(() => {
287
296
  const rotationMap = {
@@ -291,7 +300,8 @@ class ArrowWidgetComponent {
291
300
  left: 270,
292
301
  };
293
302
  return rotationMap[this.state().direction];
294
- }, ...(ngDevMode ? [{ debugName: "rotationAngle" }] : /* istanbul ignore next */ []));
303
+ }, /* @ts-ignore */
304
+ ...(ngDevMode ? [{ debugName: "rotationAngle" }] : /* istanbul ignore next */ []));
295
305
  dashboardSetState(state) {
296
306
  if (state) {
297
307
  this.state.update((current) => ({
@@ -317,12 +327,12 @@ class ArrowWidgetComponent {
317
327
  }
318
328
  });
319
329
  }
320
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ArrowWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
321
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: ArrowWidgetComponent, isStandalone: true, selector: "ngx-dashboard-arrow-widget", ngImport: i0, template: "<!-- arrow-widget.component.html -->\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div\n class=\"svg-placeholder\"\n [innerHTML]=\"safeSvgIcon\"\n [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\n [style.opacity]=\"state().opacity\"\n ></div>\n</div>\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"] });
330
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ArrowWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
331
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ArrowWidgetComponent, isStandalone: true, selector: "ngx-dashboard-arrow-widget", ngImport: i0, template: "<!-- arrow-widget.component.html -->\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div\n class=\"svg-placeholder\"\n [innerHTML]=\"safeSvgIcon\"\n [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\n [style.opacity]=\"state().opacity\"\n ></div>\n</div>\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
322
332
  }
323
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ArrowWidgetComponent, decorators: [{
333
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ArrowWidgetComponent, decorators: [{
324
334
  type: Component,
325
- args: [{ selector: 'ngx-dashboard-arrow-widget', imports: [], template: "<!-- arrow-widget.component.html -->\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div\n class=\"svg-placeholder\"\n [innerHTML]=\"safeSvgIcon\"\n [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\n [style.opacity]=\"state().opacity\"\n ></div>\n</div>\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"] }]
335
+ args: [{ selector: 'ngx-dashboard-arrow-widget', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- arrow-widget.component.html -->\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div\n class=\"svg-placeholder\"\n [innerHTML]=\"safeSvgIcon\"\n [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\n [style.opacity]=\"state().opacity\"\n ></div>\n</div>\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"] }]
326
336
  }] });
327
337
 
328
338
  // label-widget.metadata.ts
@@ -332,18 +342,29 @@ class LabelStateDialogComponent {
332
342
  data = inject(MAT_DIALOG_DATA);
333
343
  dialogRef = inject((MatDialogRef));
334
344
  // State signals
335
- label = signal(this.data.label ?? '', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
336
- fontSize = signal(this.data.fontSize ?? 16, ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
337
- alignment = signal(this.data.alignment ?? 'center', ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
338
- fontWeight = signal(this.data.fontWeight ?? 'normal', ...(ngDevMode ? [{ debugName: "fontWeight" }] : /* istanbul ignore next */ []));
339
- opacity = signal(this.data.opacity ?? 1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
340
- hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
341
- transparentBackground = signal(!(this.data.hasBackground ?? true), ...(ngDevMode ? [{ debugName: "transparentBackground" }] : /* istanbul ignore next */ []));
342
- responsive = signal(this.data.responsive ?? false, ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
345
+ label = signal(this.data.label ?? '', /* @ts-ignore */
346
+ ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
347
+ fontSize = signal(this.data.fontSize ?? 16, /* @ts-ignore */
348
+ ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
349
+ alignment = signal(this.data.alignment ?? 'center', /* @ts-ignore */
350
+ ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
351
+ fontWeight = signal(this.data.fontWeight ?? 'normal', /* @ts-ignore */
352
+ ...(ngDevMode ? [{ debugName: "fontWeight" }] : /* istanbul ignore next */ []));
353
+ opacity = signal(this.data.opacity ?? 1, /* @ts-ignore */
354
+ ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
355
+ hasBackground = signal(this.data.hasBackground ?? true, /* @ts-ignore */
356
+ ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
357
+ transparentBackground = signal(!(this.data.hasBackground ?? true), /* @ts-ignore */
358
+ ...(ngDevMode ? [{ debugName: "transparentBackground" }] : /* istanbul ignore next */ []));
359
+ responsive = signal(this.data.responsive ?? false, /* @ts-ignore */
360
+ ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
343
361
  // Responsive font size constraints
344
- minFontSize = signal(this.data.minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : /* istanbul ignore next */ []));
345
- maxFontSize = signal(this.data.maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : /* istanbul ignore next */ []));
346
- templateString = signal(this.data.templateString, ...(ngDevMode ? [{ debugName: "templateString" }] : /* istanbul ignore next */ []));
362
+ minFontSize = signal(this.data.minFontSize ?? 8, /* @ts-ignore */
363
+ ...(ngDevMode ? [{ debugName: "minFontSize" }] : /* istanbul ignore next */ []));
364
+ maxFontSize = signal(this.data.maxFontSize ?? 64, /* @ts-ignore */
365
+ ...(ngDevMode ? [{ debugName: "maxFontSize" }] : /* istanbul ignore next */ []));
366
+ templateString = signal(this.data.templateString, /* @ts-ignore */
367
+ ...(ngDevMode ? [{ debugName: "templateString" }] : /* istanbul ignore next */ []));
347
368
  // Store original values for comparison
348
369
  originalLabel = this.data.label ?? '';
349
370
  originalFontSize = this.data.fontSize ?? 16;
@@ -359,15 +380,19 @@ class LabelStateDialogComponent {
359
380
  isMinFontSizeValid = computed(() => {
360
381
  const min = this.minFontSize();
361
382
  return min >= 8 && min <= 24;
362
- }, ...(ngDevMode ? [{ debugName: "isMinFontSizeValid" }] : /* istanbul ignore next */ []));
383
+ }, /* @ts-ignore */
384
+ ...(ngDevMode ? [{ debugName: "isMinFontSizeValid" }] : /* istanbul ignore next */ []));
363
385
  isMaxFontSizeValid = computed(() => {
364
386
  const max = this.maxFontSize();
365
387
  return max >= 16 && max <= 128;
366
- }, ...(ngDevMode ? [{ debugName: "isMaxFontSizeValid" }] : /* istanbul ignore next */ []));
367
- isFontSizeRangeValid = computed(() => this.minFontSize() < this.maxFontSize(), ...(ngDevMode ? [{ debugName: "isFontSizeRangeValid" }] : /* istanbul ignore next */ []));
388
+ }, /* @ts-ignore */
389
+ ...(ngDevMode ? [{ debugName: "isMaxFontSizeValid" }] : /* istanbul ignore next */ []));
390
+ isFontSizeRangeValid = computed(() => this.minFontSize() < this.maxFontSize(), /* @ts-ignore */
391
+ ...(ngDevMode ? [{ debugName: "isFontSizeRangeValid" }] : /* istanbul ignore next */ []));
368
392
  isFormValid = computed(() => this.isMinFontSizeValid() &&
369
393
  this.isMaxFontSizeValid() &&
370
- this.isFontSizeRangeValid(), ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
394
+ this.isFontSizeRangeValid(), /* @ts-ignore */
395
+ ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
371
396
  // Computed values
372
397
  hasChanged = computed(() => this.label() !== this.originalLabel ||
373
398
  this.fontSize() !== this.originalFontSize ||
@@ -378,7 +403,8 @@ class LabelStateDialogComponent {
378
403
  this.responsive() !== this.originalResponsive ||
379
404
  this.minFontSize() !== this.originalMinFontSize ||
380
405
  this.maxFontSize() !== this.originalMaxFontSize ||
381
- this.templateString() !== this.originalTemplateString, ...(ngDevMode ? [{ debugName: "hasChanged" }] : /* istanbul ignore next */ []));
406
+ this.templateString() !== this.originalTemplateString, /* @ts-ignore */
407
+ ...(ngDevMode ? [{ debugName: "hasChanged" }] : /* istanbul ignore next */ []));
382
408
  formatOpacity(value) {
383
409
  return Math.round(value * 100);
384
410
  }
@@ -432,8 +458,8 @@ class LabelStateDialogComponent {
432
458
  }
433
459
  this.dialogRef.close(state);
434
460
  }
435
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LabelStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
436
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LabelStateDialogComponent, isStandalone: true, selector: "lib-label-state-dialog", ngImport: i0, template: `
461
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LabelStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
462
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LabelStateDialogComponent, isStandalone: true, selector: "lib-label-state-dialog", ngImport: i0, template: `
437
463
  <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.label.dialog.title">
438
464
  Label Settings
439
465
  </h2>
@@ -683,9 +709,9 @@ class LabelStateDialogComponent {
683
709
  Save
684
710
  </button>
685
711
  </mat-dialog-actions>
686
- `, 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
712
+ `, 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: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
687
713
  }
688
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LabelStateDialogComponent, decorators: [{
714
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LabelStateDialogComponent, decorators: [{
689
715
  type: Component,
690
716
  args: [{ selector: 'lib-label-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
691
717
  FormsModule,
@@ -975,7 +1001,8 @@ class ResponsiveTextDirective {
975
1001
  /** Debounce delay in ms for resize/mutation callbacks */
976
1002
  debounceMs = input(16, { ...(ngDevMode ? { debugName: "debounceMs" } : /* istanbul ignore next */ {}), transform: numberAttribute });
977
1003
  /** Template string to use for size calculations instead of actual content */
978
- templateString = input(undefined, ...(ngDevMode ? [{ debugName: "templateString" }] : /* istanbul ignore next */ []));
1004
+ templateString = input(undefined, /* @ts-ignore */
1005
+ ...(ngDevMode ? [{ debugName: "templateString" }] : /* istanbul ignore next */ []));
979
1006
  /* ───────────────────────── Private state ───────────────────────── */
980
1007
  el = inject(ElementRef);
981
1008
  platformId = inject(PLATFORM_ID);
@@ -1226,10 +1253,10 @@ class ResponsiveTextDirective {
1226
1253
  // Clear canvas context
1227
1254
  this._ctx = undefined;
1228
1255
  }
1229
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ResponsiveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1230
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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 }, templateString: { classPropertyName: "templateString", publicName: "templateString", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.white-space": "\"nowrap\"", "style.overflow": "\"visible\"" } }, ngImport: i0 });
1256
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ResponsiveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1257
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", 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 }, templateString: { classPropertyName: "templateString", publicName: "templateString", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.white-space": "\"nowrap\"", "style.overflow": "\"visible\"" } }, ngImport: i0 });
1231
1258
  }
1232
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
1259
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
1233
1260
  type: Directive,
1234
1261
  args: [{
1235
1262
  selector: '[libResponsiveText]',
@@ -1263,7 +1290,8 @@ class LabelWidgetComponent {
1263
1290
  responsive: false,
1264
1291
  minFontSize: 8, // Accessible minimum for responsive text
1265
1292
  maxFontSize: 64, // Practical maximum for widget display
1266
- }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
1293
+ }, /* @ts-ignore */
1294
+ ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
1267
1295
  dashboardSetState(state) {
1268
1296
  if (state) {
1269
1297
  this.state.update((current) => ({
@@ -1303,15 +1331,18 @@ class LabelWidgetComponent {
1303
1331
  return this.state().label?.trim();
1304
1332
  }
1305
1333
  // Computed properties for responsive font size limits with fallbacks
1306
- minFontSize = computed(() => this.state().minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : /* istanbul ignore next */ []));
1307
- maxFontSize = computed(() => this.state().maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : /* istanbul ignore next */ []));
1308
- templateString = computed(() => this.state().templateString, ...(ngDevMode ? [{ debugName: "templateString" }] : /* istanbul ignore next */ []));
1309
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LabelWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1310
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LabelWidgetComponent, isStandalone: true, selector: "ngx-dashboard-label-widget", ngImport: i0, template: "@if (hasContent) {\n<div\n class=\"label-widget\"\n [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\n [style.--widget-opacity]=\"state().opacity\"\n [class.text-left]=\"state().alignment === 'left'\"\n [class.text-right]=\"state().alignment === 'right'\"\n [class.font-bold]=\"state().fontWeight === 'bold'\"\n [class.has-background]=\"state().hasBackground\"\n>\n @if (state().responsive) {\n <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\" [templateString]=\"templateString()\">{{ label }}</div>\n } @else {\n <div class=\"label-text\">{{ label }}</div>\n }\n</div>\n} @else {\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n</div>\n}\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", "templateString"] }] });
1334
+ minFontSize = computed(() => this.state().minFontSize ?? 8, /* @ts-ignore */
1335
+ ...(ngDevMode ? [{ debugName: "minFontSize" }] : /* istanbul ignore next */ []));
1336
+ maxFontSize = computed(() => this.state().maxFontSize ?? 64, /* @ts-ignore */
1337
+ ...(ngDevMode ? [{ debugName: "maxFontSize" }] : /* istanbul ignore next */ []));
1338
+ templateString = computed(() => this.state().templateString, /* @ts-ignore */
1339
+ ...(ngDevMode ? [{ debugName: "templateString" }] : /* istanbul ignore next */ []));
1340
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LabelWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1341
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LabelWidgetComponent, isStandalone: true, selector: "ngx-dashboard-label-widget", ngImport: i0, template: "@if (hasContent) {\n<div\n class=\"label-widget\"\n [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\n [style.--widget-opacity]=\"state().opacity\"\n [class.text-left]=\"state().alignment === 'left'\"\n [class.text-right]=\"state().alignment === 'right'\"\n [class.font-bold]=\"state().fontWeight === 'bold'\"\n [class.has-background]=\"state().hasBackground\"\n>\n @if (state().responsive) {\n <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\" [templateString]=\"templateString()\">{{ label }}</div>\n } @else {\n <div class=\"label-text\">{{ label }}</div>\n }\n</div>\n} @else {\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n</div>\n}\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", "templateString"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1311
1342
  }
1312
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LabelWidgetComponent, decorators: [{
1343
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LabelWidgetComponent, decorators: [{
1313
1344
  type: Component,
1314
- args: [{ selector: 'ngx-dashboard-label-widget', imports: [ResponsiveTextDirective], template: "@if (hasContent) {\n<div\n class=\"label-widget\"\n [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\n [style.--widget-opacity]=\"state().opacity\"\n [class.text-left]=\"state().alignment === 'left'\"\n [class.text-right]=\"state().alignment === 'right'\"\n [class.font-bold]=\"state().fontWeight === 'bold'\"\n [class.has-background]=\"state().hasBackground\"\n>\n @if (state().responsive) {\n <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\" [templateString]=\"templateString()\">{{ label }}</div>\n } @else {\n <div class=\"label-text\">{{ label }}</div>\n }\n</div>\n} @else {\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n</div>\n}\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"] }]
1345
+ args: [{ selector: 'ngx-dashboard-label-widget', imports: [ResponsiveTextDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasContent) {\n<div\n class=\"label-widget\"\n [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\n [style.--widget-opacity]=\"state().opacity\"\n [class.text-left]=\"state().alignment === 'left'\"\n [class.text-right]=\"state().alignment === 'right'\"\n [class.font-bold]=\"state().fontWeight === 'bold'\"\n [class.has-background]=\"state().hasBackground\"\n>\n @if (state().responsive) {\n <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\" [templateString]=\"templateString()\">{{ label }}</div>\n } @else {\n <div class=\"label-text\">{{ label }}</div>\n }\n</div>\n} @else {\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n</div>\n}\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"] }]
1315
1346
  }] });
1316
1347
 
1317
1348
  const svgIcon$1 = `
@@ -1363,10 +1394,14 @@ class ClockStateDialogComponent {
1363
1394
  data = inject(MAT_DIALOG_DATA);
1364
1395
  dialogRef = inject((MatDialogRef));
1365
1396
  // State signals
1366
- mode = signal(this.data.mode ?? 'digital', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
1367
- hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
1368
- timeFormat = signal(this.data.timeFormat ?? '24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
1369
- showSeconds = signal(this.data.showSeconds ?? true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
1397
+ mode = signal(this.data.mode ?? 'digital', /* @ts-ignore */
1398
+ ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
1399
+ hasBackground = signal(this.data.hasBackground ?? true, /* @ts-ignore */
1400
+ ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
1401
+ timeFormat = signal(this.data.timeFormat ?? '24h', /* @ts-ignore */
1402
+ ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
1403
+ showSeconds = signal(this.data.showSeconds ?? true, /* @ts-ignore */
1404
+ ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
1370
1405
  // Store original values for comparison
1371
1406
  originalMode = this.data.mode ?? 'digital';
1372
1407
  originalHasBackground = this.data.hasBackground ?? true;
@@ -1376,7 +1411,8 @@ class ClockStateDialogComponent {
1376
1411
  hasChanged = computed(() => this.mode() !== this.originalMode ||
1377
1412
  this.hasBackground() !== this.originalHasBackground ||
1378
1413
  this.timeFormat() !== this.originalTimeFormat ||
1379
- this.showSeconds() !== this.originalShowSeconds, ...(ngDevMode ? [{ debugName: "hasChanged" }] : /* istanbul ignore next */ []));
1414
+ this.showSeconds() !== this.originalShowSeconds, /* @ts-ignore */
1415
+ ...(ngDevMode ? [{ debugName: "hasChanged" }] : /* istanbul ignore next */ []));
1380
1416
  onCancel() {
1381
1417
  this.dialogRef.close();
1382
1418
  }
@@ -1388,8 +1424,8 @@ class ClockStateDialogComponent {
1388
1424
  showSeconds: this.showSeconds(),
1389
1425
  });
1390
1426
  }
1391
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ClockStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1392
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ClockStateDialogComponent, isStandalone: true, selector: "lib-clock-state-dialog", ngImport: i0, template: `
1427
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ClockStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1428
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ClockStateDialogComponent, isStandalone: true, selector: "lib-clock-state-dialog", ngImport: i0, template: `
1393
1429
  <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.clock.dialog.title">
1394
1430
  Clock Settings
1395
1431
  </h2>
@@ -1509,7 +1545,7 @@ class ClockStateDialogComponent {
1509
1545
  </mat-dialog-actions>
1510
1546
  `, 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1511
1547
  }
1512
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ClockStateDialogComponent, decorators: [{
1548
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ClockStateDialogComponent, decorators: [{
1513
1549
  type: Component,
1514
1550
  args: [{ selector: 'lib-clock-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
1515
1551
  FormsModule,
@@ -1641,17 +1677,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
1641
1677
  class DigitalClockComponent {
1642
1678
  #destroyRef = inject(DestroyRef);
1643
1679
  // Inputs
1644
- timeFormat = input('24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
1645
- showSeconds = input(true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
1646
- hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
1680
+ timeFormat = input('24h', /* @ts-ignore */
1681
+ ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
1682
+ showSeconds = input(true, /* @ts-ignore */
1683
+ ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
1684
+ hasBackground = input(false, /* @ts-ignore */
1685
+ ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
1647
1686
  // Time tracking
1648
- currentTime = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
1687
+ currentTime = signal(new Date(), /* @ts-ignore */
1688
+ ...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
1649
1689
  formattedTime = computed(() => {
1650
1690
  const time = this.currentTime();
1651
1691
  const format = this.timeFormat();
1652
1692
  const showSecs = this.showSeconds();
1653
1693
  return this.#formatTime(time, format, showSecs);
1654
- }, ...(ngDevMode ? [{ debugName: "formattedTime" }] : /* istanbul ignore next */ []));
1694
+ }, /* @ts-ignore */
1695
+ ...(ngDevMode ? [{ debugName: "formattedTime" }] : /* istanbul ignore next */ []));
1655
1696
  #intervalId = null;
1656
1697
  #formatTime(time, format, showSecs) {
1657
1698
  let hours = time.getHours();
@@ -1701,10 +1742,10 @@ class DigitalClockComponent {
1701
1742
  this.#intervalId = null;
1702
1743
  }
1703
1744
  }
1704
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DigitalClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1705
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", 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>\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 });
1745
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DigitalClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1746
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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>\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 });
1706
1747
  }
1707
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DigitalClockComponent, decorators: [{
1748
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DigitalClockComponent, decorators: [{
1708
1749
  type: Component,
1709
1750
  args: [{ selector: 'lib-digital-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
1710
1751
  '[class.has-background]': 'hasBackground()',
@@ -1718,32 +1759,41 @@ class AnalogClockComponent {
1718
1759
  #destroyRef = inject(DestroyRef);
1719
1760
  #renderer = inject(Renderer2);
1720
1761
  // Inputs
1721
- hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
1722
- showSeconds = input(true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
1762
+ hasBackground = input(false, /* @ts-ignore */
1763
+ ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
1764
+ showSeconds = input(true, /* @ts-ignore */
1765
+ ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
1723
1766
  // ViewChild references for clock hands
1724
- hourHand = viewChild('hourHand', ...(ngDevMode ? [{ debugName: "hourHand" }] : /* istanbul ignore next */ []));
1725
- minuteHand = viewChild('minuteHand', ...(ngDevMode ? [{ debugName: "minuteHand" }] : /* istanbul ignore next */ []));
1726
- secondHand = viewChild('secondHand', ...(ngDevMode ? [{ debugName: "secondHand" }] : /* istanbul ignore next */ []));
1767
+ hourHand = viewChild('hourHand', /* @ts-ignore */
1768
+ ...(ngDevMode ? [{ debugName: "hourHand" }] : /* istanbul ignore next */ []));
1769
+ minuteHand = viewChild('minuteHand', /* @ts-ignore */
1770
+ ...(ngDevMode ? [{ debugName: "minuteHand" }] : /* istanbul ignore next */ []));
1771
+ secondHand = viewChild('secondHand', /* @ts-ignore */
1772
+ ...(ngDevMode ? [{ debugName: "secondHand" }] : /* istanbul ignore next */ []));
1727
1773
  // Time tracking
1728
- currentTime = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
1774
+ currentTime = signal(new Date(), /* @ts-ignore */
1775
+ ...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
1729
1776
  // Computed rotation signals
1730
1777
  secondHandRotation = computed(() => {
1731
1778
  const seconds = this.currentTime().getSeconds();
1732
1779
  return seconds * 6; // 360° / 60s = 6° per second
1733
- }, ...(ngDevMode ? [{ debugName: "secondHandRotation" }] : /* istanbul ignore next */ []));
1780
+ }, /* @ts-ignore */
1781
+ ...(ngDevMode ? [{ debugName: "secondHandRotation" }] : /* istanbul ignore next */ []));
1734
1782
  minuteHandRotation = computed(() => {
1735
1783
  const time = this.currentTime();
1736
1784
  const minutes = time.getMinutes();
1737
1785
  const seconds = time.getSeconds();
1738
1786
  return minutes * 6 + seconds / 10; // Smooth minute hand movement
1739
- }, ...(ngDevMode ? [{ debugName: "minuteHandRotation" }] : /* istanbul ignore next */ []));
1787
+ }, /* @ts-ignore */
1788
+ ...(ngDevMode ? [{ debugName: "minuteHandRotation" }] : /* istanbul ignore next */ []));
1740
1789
  hourHandRotation = computed(() => {
1741
1790
  const time = this.currentTime();
1742
1791
  const hours = time.getHours() % 12;
1743
1792
  const minutes = time.getMinutes();
1744
1793
  const seconds = time.getSeconds();
1745
1794
  return hours * 30 + minutes / 2 + seconds / 120; // Smooth hour hand movement
1746
- }, ...(ngDevMode ? [{ debugName: "hourHandRotation" }] : /* istanbul ignore next */ []));
1795
+ }, /* @ts-ignore */
1796
+ ...(ngDevMode ? [{ debugName: "hourHandRotation" }] : /* istanbul ignore next */ []));
1747
1797
  #intervalId = null;
1748
1798
  constructor() {
1749
1799
  // Set up time update timer
@@ -1789,10 +1839,10 @@ class AnalogClockComponent {
1789
1839
  this.#renderer.setAttribute(secondElement, 'transform', `rotate(${this.secondHandRotation()}, 400, 400)`);
1790
1840
  }
1791
1841
  }
1792
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1793
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", 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\">\n <div class=\"aspect-ratio-box\">\n <svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 800 800\"\n preserveAspectRatio=\"xMidYMid meet\"\n >\n <!-- Optional face circle; uncomment if you want a visible outline by default -->\n <!-- <circle cx=\"400\" cy=\"400\" r=\"400\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"2\" /> -->\n\n <use transform=\"matrix(-1,0,0,1,800,0)\" href=\"#one-half\" />\n <g id=\"one-half\">\n <g id=\"one-fourth\">\n <!-- 12 / 3 / 6 / 9 heavy marks -->\n <path d=\"m400 40v107\" stroke-width=\"26.7\" stroke=\"currentColor\" />\n <g id=\"one-twelfth\">\n <!-- 30\u00B0 heavy marks -->\n <path\n d=\"m580 88.233-42.5 73.612\"\n stroke-width=\"26.7\"\n stroke=\"currentColor\"\n />\n <g id=\"one-thirtieth\">\n <!-- minute/second ticks -->\n <path\n id=\"one-sixtieth\"\n d=\"m437.63 41.974-3.6585 34.808\"\n stroke-width=\"13.6\"\n stroke=\"currentColor\"\n />\n <use transform=\"rotate(6 400 400)\" href=\"#one-sixtieth\" />\n </g>\n <use transform=\"rotate(12 400 400)\" href=\"#one-thirtieth\" />\n </g>\n <use transform=\"rotate(30 400 400)\" href=\"#one-twelfth\" />\n <use transform=\"rotate(60 400 400)\" href=\"#one-twelfth\" />\n </g>\n <use transform=\"rotate(90 400 400)\" href=\"#one-fourth\" />\n </g>\n\n <!-- Hands -->\n <path\n class=\"clock-hour-hand\"\n id=\"anim-clock-hour-hand\"\n #hourHand\n d=\"m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z\"\n transform=\"rotate(110.2650694444, 400, 400)\"\n />\n <path\n class=\"clock-minute-hand\"\n id=\"anim-clock-minute-hand\"\n #minuteHand\n d=\"M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z\"\n transform=\"rotate(243.1808333333, 400, 400)\"\n />\n <path\n class=\"clock-second-hand\"\n id=\"anim-clock-second-hand\"\n #secondHand\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\"\n transform=\"rotate(190.85, 400, 400)\"\n />\n </svg>\n </div>\n</div>\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 });
1842
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1843
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", 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\">\n <div class=\"aspect-ratio-box\">\n <svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 800 800\"\n preserveAspectRatio=\"xMidYMid meet\"\n >\n <!-- Optional face circle; uncomment if you want a visible outline by default -->\n <!-- <circle cx=\"400\" cy=\"400\" r=\"400\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"2\" /> -->\n\n <use transform=\"matrix(-1,0,0,1,800,0)\" href=\"#one-half\" />\n <g id=\"one-half\">\n <g id=\"one-fourth\">\n <!-- 12 / 3 / 6 / 9 heavy marks -->\n <path d=\"m400 40v107\" stroke-width=\"26.7\" stroke=\"currentColor\" />\n <g id=\"one-twelfth\">\n <!-- 30\u00B0 heavy marks -->\n <path\n d=\"m580 88.233-42.5 73.612\"\n stroke-width=\"26.7\"\n stroke=\"currentColor\"\n />\n <g id=\"one-thirtieth\">\n <!-- minute/second ticks -->\n <path\n id=\"one-sixtieth\"\n d=\"m437.63 41.974-3.6585 34.808\"\n stroke-width=\"13.6\"\n stroke=\"currentColor\"\n />\n <use transform=\"rotate(6 400 400)\" href=\"#one-sixtieth\" />\n </g>\n <use transform=\"rotate(12 400 400)\" href=\"#one-thirtieth\" />\n </g>\n <use transform=\"rotate(30 400 400)\" href=\"#one-twelfth\" />\n <use transform=\"rotate(60 400 400)\" href=\"#one-twelfth\" />\n </g>\n <use transform=\"rotate(90 400 400)\" href=\"#one-fourth\" />\n </g>\n\n <!-- Hands -->\n <path\n class=\"clock-hour-hand\"\n id=\"anim-clock-hour-hand\"\n #hourHand\n d=\"m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z\"\n transform=\"rotate(110.2650694444, 400, 400)\"\n />\n <path\n class=\"clock-minute-hand\"\n id=\"anim-clock-minute-hand\"\n #minuteHand\n d=\"M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z\"\n transform=\"rotate(243.1808333333, 400, 400)\"\n />\n <path\n class=\"clock-second-hand\"\n id=\"anim-clock-second-hand\"\n #secondHand\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\"\n transform=\"rotate(190.85, 400, 400)\"\n />\n </svg>\n </div>\n</div>\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 });
1794
1844
  }
1795
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AnalogClockComponent, decorators: [{
1845
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AnalogClockComponent, decorators: [{
1796
1846
  type: Component,
1797
1847
  args: [{ selector: 'lib-analog-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
1798
1848
  '[class.has-background]': 'hasBackground()',
@@ -1817,7 +1867,8 @@ class ClockWidgetComponent {
1817
1867
  hasBackground: true,
1818
1868
  timeFormat: '24h',
1819
1869
  showSeconds: true,
1820
- }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
1870
+ }, /* @ts-ignore */
1871
+ ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
1821
1872
  constructor() {
1822
1873
  // No timer logic needed - DigitalClock manages its own time
1823
1874
  }
@@ -1854,12 +1905,12 @@ class ClockWidgetComponent {
1854
1905
  get isDigital() {
1855
1906
  return this.state().mode === 'digital';
1856
1907
  }
1857
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ClockWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1858
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ClockWidgetComponent, isStandalone: true, selector: "ngx-dashboard-clock-widget", ngImport: i0, template: "@if (isDigital) {\n <lib-digital-clock\n [timeFormat]=\"state().timeFormat || '24h'\"\n [showSeconds]=\"state().showSeconds ?? true\"\n [hasBackground]=\"state().hasBackground ?? false\"\n />\n} @else if (isAnalog) {\n <lib-analog-clock\n [hasBackground]=\"state().hasBackground ?? false\"\n [showSeconds]=\"state().showSeconds ?? true\"\n />\n} @else {\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n</div>\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"] }] });
1908
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ClockWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1909
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ClockWidgetComponent, isStandalone: true, selector: "ngx-dashboard-clock-widget", ngImport: i0, template: "@if (isDigital) {\n <lib-digital-clock\n [timeFormat]=\"state().timeFormat || '24h'\"\n [showSeconds]=\"state().showSeconds ?? true\"\n [hasBackground]=\"state().hasBackground ?? false\"\n />\n} @else if (isAnalog) {\n <lib-analog-clock\n [hasBackground]=\"state().hasBackground ?? false\"\n [showSeconds]=\"state().showSeconds ?? true\"\n />\n} @else {\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n</div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1859
1910
  }
1860
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ClockWidgetComponent, decorators: [{
1911
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ClockWidgetComponent, decorators: [{
1861
1912
  type: Component,
1862
- args: [{ selector: 'ngx-dashboard-clock-widget', standalone: true, imports: [DigitalClockComponent, AnalogClockComponent], template: "@if (isDigital) {\n <lib-digital-clock\n [timeFormat]=\"state().timeFormat || '24h'\"\n [showSeconds]=\"state().showSeconds ?? true\"\n [hasBackground]=\"state().hasBackground ?? false\"\n />\n} @else if (isAnalog) {\n <lib-analog-clock\n [hasBackground]=\"state().hasBackground ?? false\"\n [showSeconds]=\"state().showSeconds ?? true\"\n />\n} @else {\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n</div>\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"] }]
1913
+ args: [{ selector: 'ngx-dashboard-clock-widget', standalone: true, imports: [DigitalClockComponent, AnalogClockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isDigital) {\n <lib-digital-clock\n [timeFormat]=\"state().timeFormat || '24h'\"\n [showSeconds]=\"state().showSeconds ?? true\"\n [hasBackground]=\"state().hasBackground ?? false\"\n />\n} @else if (isAnalog) {\n <lib-analog-clock\n [hasBackground]=\"state().hasBackground ?? false\"\n [showSeconds]=\"state().showSeconds ?? true\"\n />\n} @else {\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n</div>\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"] }]
1863
1914
  }], ctorParameters: () => [] });
1864
1915
 
1865
1916
  /**
@@ -1952,47 +2003,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
1952
2003
  *
1953
2004
  */
1954
2005
  class RadialGaugeComponent {
1955
- valueTextEl = viewChild('valueText', ...(ngDevMode ? [{ debugName: "valueTextEl" }] : /* istanbul ignore next */ []));
1956
- valueGroupEl = viewChild('valueGroup', ...(ngDevMode ? [{ debugName: "valueGroupEl" }] : /* istanbul ignore next */ []));
2006
+ valueTextEl = viewChild('valueText', /* @ts-ignore */
2007
+ ...(ngDevMode ? [{ debugName: "valueTextEl" }] : /* istanbul ignore next */ []));
2008
+ valueGroupEl = viewChild('valueGroup', /* @ts-ignore */
2009
+ ...(ngDevMode ? [{ debugName: "valueGroupEl" }] : /* istanbul ignore next */ []));
1957
2010
  refTextEl = viewChild.required('refText');
1958
2011
  // Core Inputs - Value and Range
1959
- value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
1960
- min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
1961
- max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
1962
- segments = input(...(ngDevMode ? [undefined, { debugName: "segments" }] : /* istanbul ignore next */ []));
1963
- title = input('Gauge', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1964
- description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
1965
- segmentGapPx = input(4, ...(ngDevMode ? [{ debugName: "segmentGapPx" }] : /* istanbul ignore next */ []));
2012
+ value = input(0, /* @ts-ignore */
2013
+ ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
2014
+ min = input(0, /* @ts-ignore */
2015
+ ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
2016
+ max = input(100, /* @ts-ignore */
2017
+ ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
2018
+ segments = input(/* @ts-ignore */
2019
+ ...(ngDevMode ? [undefined, { debugName: "segments" }] : /* istanbul ignore next */ []));
2020
+ title = input('Gauge', /* @ts-ignore */
2021
+ ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
2022
+ description = input('', /* @ts-ignore */
2023
+ ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
2024
+ segmentGapPx = input(4, /* @ts-ignore */
2025
+ ...(ngDevMode ? [{ debugName: "segmentGapPx" }] : /* istanbul ignore next */ []));
1966
2026
  // Widget styling inputs
1967
2027
  /**
1968
2028
  * Whether the gauge should display with a background.
1969
2029
  * Affects text color contrast and other visual elements.
1970
2030
  * @default false
1971
2031
  */
1972
- hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
2032
+ hasBackground = input(false, /* @ts-ignore */
2033
+ ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
1973
2034
  /**
1974
2035
  * Whether to display the numeric value label in the center of the gauge.
1975
2036
  * @default true
1976
2037
  */
1977
- showValueLabel = input(true, ...(ngDevMode ? [{ debugName: "showValueLabel" }] : /* istanbul ignore next */ []));
2038
+ showValueLabel = input(true, /* @ts-ignore */
2039
+ ...(ngDevMode ? [{ debugName: "showValueLabel" }] : /* istanbul ignore next */ []));
1978
2040
  // Size Control Inputs
1979
2041
  /**
1980
2042
  * Base gauge diameter in pixels. Used as fallback when fitToContainer is false.
1981
2043
  * @default 300
1982
2044
  */
1983
- size = input(300, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
2045
+ size = input(300, /* @ts-ignore */
2046
+ ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
1984
2047
  /**
1985
2048
  * Automatically resize gauge to fit its container dimensions.
1986
2049
  * When true, the gauge will observe container size changes and adjust accordingly.
1987
2050
  * Maintains semicircle aspect ratio (2:1 width:height).
1988
2051
  * @default false
1989
2052
  */
1990
- fitToContainer = input(false, ...(ngDevMode ? [{ debugName: "fitToContainer" }] : /* istanbul ignore next */ []));
2053
+ fitToContainer = input(false, /* @ts-ignore */
2054
+ ...(ngDevMode ? [{ debugName: "fitToContainer" }] : /* istanbul ignore next */ []));
1991
2055
  /**
1992
2056
  * Padding in pixels to maintain from container edges when fitToContainer is true.
1993
2057
  * @default 10
1994
2058
  */
1995
- containerPadding = input(10, ...(ngDevMode ? [{ debugName: "containerPadding" }] : /* istanbul ignore next */ []));
2059
+ containerPadding = input(10, /* @ts-ignore */
2060
+ ...(ngDevMode ? [{ debugName: "containerPadding" }] : /* istanbul ignore next */ []));
1996
2061
  // Thickness Control Inputs
1997
2062
  /**
1998
2063
  * Use proportional thickness scaling based on gauge size.
@@ -2000,7 +2065,8 @@ class RadialGaugeComponent {
2000
2065
  * Overrides manual outerThickness, innerThickness, and gap inputs.
2001
2066
  * @default false
2002
2067
  */
2003
- responsiveMode = input(false, ...(ngDevMode ? [{ debugName: "responsiveMode" }] : /* istanbul ignore next */ []));
2068
+ responsiveMode = input(false, /* @ts-ignore */
2069
+ ...(ngDevMode ? [{ debugName: "responsiveMode" }] : /* istanbul ignore next */ []));
2004
2070
  /**
2005
2071
  * Ratio used to calculate base thickness from gauge size.
2006
2072
  * baseThickness = effectiveSize / sizeToThicknessRatio
@@ -2011,7 +2077,8 @@ class RadialGaugeComponent {
2011
2077
  * - ratio=20: ultra-thin balanced appearance (bt = size/20)
2012
2078
  * - ratio=30: extremely thin rings (bt = size/30)
2013
2079
  */
2014
- sizeToThicknessRatio = input(20, ...(ngDevMode ? [{ debugName: "sizeToThicknessRatio" }] : /* istanbul ignore next */ []));
2080
+ sizeToThicknessRatio = input(20, /* @ts-ignore */
2081
+ ...(ngDevMode ? [{ debugName: "sizeToThicknessRatio" }] : /* istanbul ignore next */ []));
2015
2082
  /**
2016
2083
  * Proportional multipliers for responsive thickness calculations.
2017
2084
  * - outer: Multiplier for outer ring thickness (default: 3)
@@ -2020,23 +2087,27 @@ class RadialGaugeComponent {
2020
2087
  * Total thickness = baseThickness × (outer + inner + gap) = bt × 4.5
2021
2088
  * @default { outer: 3, inner: 1, gap: 0.5 }
2022
2089
  */
2023
- responsiveProportions = input({ outer: 3, inner: 1, gap: 0.5 }, ...(ngDevMode ? [{ debugName: "responsiveProportions" }] : /* istanbul ignore next */ []));
2090
+ responsiveProportions = input({ outer: 3, inner: 1, gap: 0.5 }, /* @ts-ignore */
2091
+ ...(ngDevMode ? [{ debugName: "responsiveProportions" }] : /* istanbul ignore next */ []));
2024
2092
  // Manual Thickness Inputs (used when responsiveMode is false)
2025
2093
  /**
2026
2094
  * Manual outer ring thickness in pixels. Ignored when responsiveMode is true.
2027
2095
  * @default 36
2028
2096
  */
2029
- outerThickness = input(36, ...(ngDevMode ? [{ debugName: "outerThickness" }] : /* istanbul ignore next */ []));
2097
+ outerThickness = input(36, /* @ts-ignore */
2098
+ ...(ngDevMode ? [{ debugName: "outerThickness" }] : /* istanbul ignore next */ []));
2030
2099
  /**
2031
2100
  * Manual inner ring thickness in pixels. Ignored when responsiveMode is true.
2032
2101
  * @default 12
2033
2102
  */
2034
- innerThickness = input(12, ...(ngDevMode ? [{ debugName: "innerThickness" }] : /* istanbul ignore next */ []));
2103
+ innerThickness = input(12, /* @ts-ignore */
2104
+ ...(ngDevMode ? [{ debugName: "innerThickness" }] : /* istanbul ignore next */ []));
2035
2105
  /**
2036
2106
  * Manual gap between rings in pixels. Ignored when responsiveMode is true.
2037
2107
  * @default 8
2038
2108
  */
2039
- gap = input(8, ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
2109
+ gap = input(8, /* @ts-ignore */
2110
+ ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
2040
2111
  titleId = `rg-title-${Math.random().toString(36).slice(2)}`;
2041
2112
  descId = `rg-desc-${Math.random().toString(36).slice(2)}`;
2042
2113
  clipId = `rg-clip-${Math.random().toString(36).slice(2)}`;
@@ -2052,7 +2123,8 @@ class RadialGaugeComponent {
2052
2123
  * Updated by ResizeObserver when fitToContainer is enabled.
2053
2124
  * @private
2054
2125
  */
2055
- containerSize = signal(null, ...(ngDevMode ? [{ debugName: "containerSize" }] : /* istanbul ignore next */ []));
2126
+ containerSize = signal(null, /* @ts-ignore */
2127
+ ...(ngDevMode ? [{ debugName: "containerSize" }] : /* istanbul ignore next */ []));
2056
2128
  /**
2057
2129
  * ResizeObserver instance for monitoring container size changes.
2058
2130
  * Created when fitToContainer is enabled, destroyed on component cleanup.
@@ -2116,7 +2188,8 @@ class RadialGaugeComponent {
2116
2188
  this.resizeObserver = null;
2117
2189
  this.containerSize.set(null);
2118
2190
  }
2119
- }, ...(ngDevMode ? [{ debugName: "containerObserverEffect" }] : /* istanbul ignore next */ []));
2191
+ }, /* @ts-ignore */
2192
+ ...(ngDevMode ? [{ debugName: "containerObserverEffect" }] : /* istanbul ignore next */ []));
2120
2193
  // ── Build the reference string reactively ───────────────────────────────────
2121
2194
  referenceString = computed(() => {
2122
2195
  const ref = this.labelReference();
@@ -2127,7 +2200,8 @@ class RadialGaugeComponent {
2127
2200
  return g.repeat(ref);
2128
2201
  }
2129
2202
  return this.formattedLabel(); // measure actual label
2130
- }, ...(ngDevMode ? [{ debugName: "referenceString" }] : /* istanbul ignore next */ []));
2203
+ }, /* @ts-ignore */
2204
+ ...(ngDevMode ? [{ debugName: "referenceString" }] : /* istanbul ignore next */ []));
2131
2205
  // ── Core transform: center + uniform scale to fit the reserved box ──────────
2132
2206
  valueTransform = computed(() => {
2133
2207
  if (!this.showValueLabel())
@@ -2159,7 +2233,8 @@ class RadialGaugeComponent {
2159
2233
  const s = Math.min(boxWidth / widthForFit, boxHeight / heightForFit) *
2160
2234
  this.baselineSafety();
2161
2235
  return `translate(${cx},${cy}) scale(${s})`;
2162
- }, ...(ngDevMode ? [{ debugName: "valueTransform" }] : /* istanbul ignore next */ []));
2236
+ }, /* @ts-ignore */
2237
+ ...(ngDevMode ? [{ debugName: "valueTransform" }] : /* istanbul ignore next */ []));
2163
2238
  /** Guarded getBBox that avoids 0/NaN on detached or invisible nodes. */
2164
2239
  safeBBox(node) {
2165
2240
  try {
@@ -2193,7 +2268,8 @@ class RadialGaugeComponent {
2193
2268
  return containerDiameter;
2194
2269
  }
2195
2270
  return this.size();
2196
- }, ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
2271
+ }, /* @ts-ignore */
2272
+ ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
2197
2273
  /**
2198
2274
  * Base thickness calculated from effective size for proportional scaling.
2199
2275
  * Only used when responsiveMode is enabled.
@@ -2209,7 +2285,8 @@ class RadialGaugeComponent {
2209
2285
  if (!this.responsiveMode())
2210
2286
  return 0;
2211
2287
  return this.effectiveSize() / this.sizeToThicknessRatio();
2212
- }, ...(ngDevMode ? [{ debugName: "baseThickness" }] : /* istanbul ignore next */ []));
2288
+ }, /* @ts-ignore */
2289
+ ...(ngDevMode ? [{ debugName: "baseThickness" }] : /* istanbul ignore next */ []));
2213
2290
  /**
2214
2291
  * Effective outer ring thickness, supporting both manual and responsive modes.
2215
2292
  * - Responsive mode: baseThickness × responsiveProportions.outer
@@ -2221,7 +2298,8 @@ class RadialGaugeComponent {
2221
2298
  return this.baseThickness() * this.responsiveProportions().outer;
2222
2299
  }
2223
2300
  return this.outerThickness();
2224
- }, ...(ngDevMode ? [{ debugName: "effectiveOuterThickness" }] : /* istanbul ignore next */ []));
2301
+ }, /* @ts-ignore */
2302
+ ...(ngDevMode ? [{ debugName: "effectiveOuterThickness" }] : /* istanbul ignore next */ []));
2225
2303
  /**
2226
2304
  * Effective inner ring thickness, supporting both manual and responsive modes.
2227
2305
  * - Responsive mode: baseThickness × responsiveProportions.inner
@@ -2233,7 +2311,8 @@ class RadialGaugeComponent {
2233
2311
  return this.baseThickness() * this.responsiveProportions().inner;
2234
2312
  }
2235
2313
  return this.innerThickness();
2236
- }, ...(ngDevMode ? [{ debugName: "effectiveInnerThickness" }] : /* istanbul ignore next */ []));
2314
+ }, /* @ts-ignore */
2315
+ ...(ngDevMode ? [{ debugName: "effectiveInnerThickness" }] : /* istanbul ignore next */ []));
2237
2316
  /**
2238
2317
  * Effective gap between rings, supporting both manual and responsive modes.
2239
2318
  * - Responsive mode: baseThickness × responsiveProportions.gap
@@ -2245,44 +2324,61 @@ class RadialGaugeComponent {
2245
2324
  return this.baseThickness() * this.responsiveProportions().gap;
2246
2325
  }
2247
2326
  return this.gap();
2248
- }, ...(ngDevMode ? [{ debugName: "effectiveGap" }] : /* istanbul ignore next */ []));
2327
+ }, /* @ts-ignore */
2328
+ ...(ngDevMode ? [{ debugName: "effectiveGap" }] : /* istanbul ignore next */ []));
2249
2329
  // SVG Layout Calculations
2250
- svgPadding = computed(() => this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "svgPadding" }] : /* istanbul ignore next */ []));
2251
- svgWidth = computed(() => this.effectiveSize() + this.effectiveOuterThickness(), ...(ngDevMode ? [{ debugName: "svgWidth" }] : /* istanbul ignore next */ []));
2252
- svgHeight = computed(() => Math.ceil(this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2), ...(ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []));
2253
- centerX = computed(() => this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "centerX" }] : /* istanbul ignore next */ []));
2254
- centerY = computed(() => this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "centerY" }] : /* istanbul ignore next */ []));
2330
+ svgPadding = computed(() => this.effectiveOuterThickness() / 2, /* @ts-ignore */
2331
+ ...(ngDevMode ? [{ debugName: "svgPadding" }] : /* istanbul ignore next */ []));
2332
+ svgWidth = computed(() => this.effectiveSize() + this.effectiveOuterThickness(), /* @ts-ignore */
2333
+ ...(ngDevMode ? [{ debugName: "svgWidth" }] : /* istanbul ignore next */ []));
2334
+ svgHeight = computed(() => Math.ceil(this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2), /* @ts-ignore */
2335
+ ...(ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []));
2336
+ centerX = computed(() => this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2, /* @ts-ignore */
2337
+ ...(ngDevMode ? [{ debugName: "centerX" }] : /* istanbul ignore next */ []));
2338
+ centerY = computed(() => this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2, /* @ts-ignore */
2339
+ ...(ngDevMode ? [{ debugName: "centerY" }] : /* istanbul ignore next */ []));
2255
2340
  /**
2256
2341
  * If a string is provided, we measure it and allocate space for that width.
2257
2342
  * If a number is provided, we build a string of that many `referenceGlyph`s.
2258
2343
  * If omitted, we fall back to measuring the actual label.
2259
2344
  */
2260
- labelReference = input(undefined, ...(ngDevMode ? [{ debugName: "labelReference" }] : /* istanbul ignore next */ []));
2345
+ labelReference = input(undefined, /* @ts-ignore */
2346
+ ...(ngDevMode ? [{ debugName: "labelReference" }] : /* istanbul ignore next */ []));
2261
2347
  /** Glyph to repeat when labelReference is a number (defaults to '0'). */
2262
- referenceGlyph = input('0', ...(ngDevMode ? [{ debugName: "referenceGlyph" }] : /* istanbul ignore next */ []));
2348
+ referenceGlyph = input('0', /* @ts-ignore */
2349
+ ...(ngDevMode ? [{ debugName: "referenceGlyph" }] : /* istanbul ignore next */ []));
2263
2350
  /** Extra breathing room inside the inner semicircle box (in px). */
2264
- labelPadding = input(4, ...(ngDevMode ? [{ debugName: "labelPadding" }] : /* istanbul ignore next */ []));
2351
+ labelPadding = input(4, /* @ts-ignore */
2352
+ ...(ngDevMode ? [{ debugName: "labelPadding" }] : /* istanbul ignore next */ []));
2265
2353
  /** Safety multiplier to avoid clipping ascenders/descenders. */
2266
- baselineSafety = input(0.95, ...(ngDevMode ? [{ debugName: "baselineSafety" }] : /* istanbul ignore next */ []));
2267
- outerRadius = computed(() => this.effectiveSize() / 2, ...(ngDevMode ? [{ debugName: "outerRadius" }] : /* istanbul ignore next */ []));
2354
+ baselineSafety = input(0.95, /* @ts-ignore */
2355
+ ...(ngDevMode ? [{ debugName: "baselineSafety" }] : /* istanbul ignore next */ []));
2356
+ outerRadius = computed(() => this.effectiveSize() / 2, /* @ts-ignore */
2357
+ ...(ngDevMode ? [{ debugName: "outerRadius" }] : /* istanbul ignore next */ []));
2268
2358
  innerRadius = computed(() => this.outerRadius() -
2269
2359
  this.effectiveOuterThickness() / 2 -
2270
- this.effectiveGap(), ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
2360
+ this.effectiveGap(), /* @ts-ignore */
2361
+ ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
2271
2362
  legendOuterRadius = computed(() => this.outerRadius() -
2272
2363
  this.effectiveOuterThickness() / 2 -
2273
2364
  this.effectiveGap() -
2274
- this.effectiveInnerThickness() / 2, ...(ngDevMode ? [{ debugName: "legendOuterRadius" }] : /* istanbul ignore next */ []));
2275
- legendInnerRadius = computed(() => this.legendOuterRadius() - this.effectiveInnerThickness(), ...(ngDevMode ? [{ debugName: "legendInnerRadius" }] : /* istanbul ignore next */ []));
2365
+ this.effectiveInnerThickness() / 2, /* @ts-ignore */
2366
+ ...(ngDevMode ? [{ debugName: "legendOuterRadius" }] : /* istanbul ignore next */ []));
2367
+ legendInnerRadius = computed(() => this.legendOuterRadius() - this.effectiveInnerThickness(), /* @ts-ignore */
2368
+ ...(ngDevMode ? [{ debugName: "legendInnerRadius" }] : /* istanbul ignore next */ []));
2276
2369
  startAngle = -180;
2277
2370
  endAngle = 0;
2278
- clampedValue = computed(() => this.clamp(this.value(), this.min(), this.max()), ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
2371
+ clampedValue = computed(() => this.clamp(this.value(), this.min(), this.max()), /* @ts-ignore */
2372
+ ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
2279
2373
  percentage = computed(() => {
2280
2374
  const range = this.max() - this.min();
2281
2375
  if (range === 0)
2282
2376
  return 0;
2283
2377
  return (this.clampedValue() - this.min()) / range;
2284
- }, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
2285
- percent = computed(() => Math.round(this.percentage() * 100), ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
2378
+ }, /* @ts-ignore */
2379
+ ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
2380
+ percent = computed(() => Math.round(this.percentage() * 100), /* @ts-ignore */
2381
+ ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
2286
2382
  defaultSegments = computed(() => {
2287
2383
  const minVal = this.min();
2288
2384
  const maxVal = this.max();
@@ -2304,9 +2400,12 @@ class RadialGaugeComponent {
2304
2400
  color: 'var(--gauge-value-good, #10b981)',
2305
2401
  },
2306
2402
  ];
2307
- }, ...(ngDevMode ? [{ debugName: "defaultSegments" }] : /* istanbul ignore next */ []));
2308
- actualSegments = computed(() => this.segments() || this.defaultSegments(), ...(ngDevMode ? [{ debugName: "actualSegments" }] : /* istanbul ignore next */ []));
2309
- formattedLabel = computed(() => this.nf.format(this.clampedValue()), ...(ngDevMode ? [{ debugName: "formattedLabel" }] : /* istanbul ignore next */ []));
2403
+ }, /* @ts-ignore */
2404
+ ...(ngDevMode ? [{ debugName: "defaultSegments" }] : /* istanbul ignore next */ []));
2405
+ actualSegments = computed(() => this.segments() || this.defaultSegments(), /* @ts-ignore */
2406
+ ...(ngDevMode ? [{ debugName: "actualSegments" }] : /* istanbul ignore next */ []));
2407
+ formattedLabel = computed(() => this.nf.format(this.clampedValue()), /* @ts-ignore */
2408
+ ...(ngDevMode ? [{ debugName: "formattedLabel" }] : /* istanbul ignore next */ []));
2310
2409
  valueColor = computed(() => {
2311
2410
  const v = this.clampedValue();
2312
2411
  const segs = this.actualSegments();
@@ -2315,8 +2414,10 @@ class RadialGaugeComponent {
2315
2414
  return s.color;
2316
2415
  }
2317
2416
  return segs.at(-1)?.color ?? 'var(--mat-sys-primary)';
2318
- }, ...(ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []));
2319
- backgroundArcPath = computed(() => this.createArcPath(this.outerRadius(), this.startAngle, this.endAngle), ...(ngDevMode ? [{ debugName: "backgroundArcPath" }] : /* istanbul ignore next */ []));
2417
+ }, /* @ts-ignore */
2418
+ ...(ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []));
2419
+ backgroundArcPath = computed(() => this.createArcPath(this.outerRadius(), this.startAngle, this.endAngle), /* @ts-ignore */
2420
+ ...(ngDevMode ? [{ debugName: "backgroundArcPath" }] : /* istanbul ignore next */ []));
2320
2421
  segmentPaths = computed(() => {
2321
2422
  const segs = this.actualSegments();
2322
2423
  const minVal = this.min();
@@ -2341,8 +2442,10 @@ class RadialGaugeComponent {
2341
2442
  return { path: this.createArcPath(r, a0, a1), color: s.color };
2342
2443
  })
2343
2444
  .filter((x) => !!x);
2344
- }, ...(ngDevMode ? [{ debugName: "segmentPaths" }] : /* istanbul ignore next */ []));
2345
- ariaLabel = computed(() => `${this.title()}: ${this.formattedLabel()} (range ${this.min()}–${this.max()})`, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
2445
+ }, /* @ts-ignore */
2446
+ ...(ngDevMode ? [{ debugName: "segmentPaths" }] : /* istanbul ignore next */ []));
2447
+ ariaLabel = computed(() => `${this.title()}: ${this.formattedLabel()} (range ${this.min()}–${this.max()})`, /* @ts-ignore */
2448
+ ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
2346
2449
  clamp(v, min, max) {
2347
2450
  return Math.min(Math.max(v, min), max);
2348
2451
  }
@@ -2420,10 +2523,10 @@ class RadialGaugeComponent {
2420
2523
  const semicircumference = Math.PI * r;
2421
2524
  return 180 * this.clamp(px / semicircumference, 0, 1);
2422
2525
  }
2423
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadialGaugeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2424
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 =\npercent();\n\n<svg\n [attr.width]=\"fitToContainer() ? null : w\"\n [attr.height]=\"fitToContainer() ? null : h\"\n [attr.viewBox]=\"'0 0 ' + w + ' ' + h\"\n [class.responsive]=\"fitToContainer()\"\n class=\"gauge-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <title [attr.id]=\"titleId\">{{ title() }}</title>\n @if (description()) {\n <desc [attr.id]=\"descId\">{{ description() }}</desc>\n }\n\n <defs>\n <clipPath [attr.id]=\"clipId\">\n <!-- Give a tiny extra room equal to half of the outer stroke to avoid anti-alias cutoff at the baseline -->\n <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"w\"\n [attr.height]=\"cy + effectiveOuterThickness() / 2\"\n />\n </clipPath>\n </defs>\n\n <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\n <path\n [attr.d]=\"backgroundArcPath()\"\n pathLength=\"100\"\n fill=\"none\"\n class=\"gauge-background\"\n [attr.stroke-width]=\"effectiveOuterThickness()\"\n stroke-linecap=\"butt\"\n />\n\n <path\n [attr.d]=\"backgroundArcPath()\"\n pathLength=\"100\"\n fill=\"none\"\n class=\"gauge-value\"\n [attr.stroke]=\"valueColor()\"\n [attr.stroke-width]=\"effectiveOuterThickness()\"\n stroke-linecap=\"butt\"\n [attr.stroke-dasharray]=\"pct + ' 100'\"\n />\n\n @for (segment of segmentPaths(); track segment.path) {\n <path\n [attr.d]=\"segment.path\"\n fill=\"none\"\n [attr.stroke]=\"segment.color\"\n [attr.stroke-width]=\"effectiveInnerThickness()\"\n stroke-linecap=\"butt\"\n class=\"gauge-segment\"\n />\n }\n </g>\n\n @if (showValueLabel()) {\n <g #valueGroup [attr.transform]=\"valueTransform()\">\n <text\n #valueText\n class=\"gauge-value-text\"\n x=\"0\"\n y=\"0\"\n text-anchor=\"middle\"\n alignment-baseline=\"baseline\"\n dy=\"-0.75\"\n >\n {{ formattedLabel() }}\n </text>\n </g>\n }\n\n <!-- Hidden reference text used ONLY for width measurement -->\n <g style=\"visibility: hidden; pointer-events: none\" aria-hidden=\"true\">\n <text\n #refText\n x=\"0\"\n y=\"0\"\n text-anchor=\"start\"\n dominant-baseline=\"alphabetic\"\n >\n {{ referenceString() }}\n </text>\n </g>\n</svg>\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2526
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialGaugeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2527
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 =\npercent();\n\n<svg\n [attr.width]=\"fitToContainer() ? null : w\"\n [attr.height]=\"fitToContainer() ? null : h\"\n [attr.viewBox]=\"'0 0 ' + w + ' ' + h\"\n [class.responsive]=\"fitToContainer()\"\n class=\"gauge-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <title [attr.id]=\"titleId\">{{ title() }}</title>\n @if (description()) {\n <desc [attr.id]=\"descId\">{{ description() }}</desc>\n }\n\n <defs>\n <clipPath [attr.id]=\"clipId\">\n <!-- Give a tiny extra room equal to half of the outer stroke to avoid anti-alias cutoff at the baseline -->\n <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"w\"\n [attr.height]=\"cy + effectiveOuterThickness() / 2\"\n />\n </clipPath>\n </defs>\n\n <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\n <path\n [attr.d]=\"backgroundArcPath()\"\n pathLength=\"100\"\n fill=\"none\"\n class=\"gauge-background\"\n [attr.stroke-width]=\"effectiveOuterThickness()\"\n stroke-linecap=\"butt\"\n />\n\n <path\n [attr.d]=\"backgroundArcPath()\"\n pathLength=\"100\"\n fill=\"none\"\n class=\"gauge-value\"\n [attr.stroke]=\"valueColor()\"\n [attr.stroke-width]=\"effectiveOuterThickness()\"\n stroke-linecap=\"butt\"\n [attr.stroke-dasharray]=\"pct + ' 100'\"\n />\n\n @for (segment of segmentPaths(); track segment.path) {\n <path\n [attr.d]=\"segment.path\"\n fill=\"none\"\n [attr.stroke]=\"segment.color\"\n [attr.stroke-width]=\"effectiveInnerThickness()\"\n stroke-linecap=\"butt\"\n class=\"gauge-segment\"\n />\n }\n </g>\n\n @if (showValueLabel()) {\n <g #valueGroup [attr.transform]=\"valueTransform()\">\n <text\n #valueText\n class=\"gauge-value-text\"\n x=\"0\"\n y=\"0\"\n text-anchor=\"middle\"\n alignment-baseline=\"baseline\"\n dy=\"-0.75\"\n >\n {{ formattedLabel() }}\n </text>\n </g>\n }\n\n <!-- Hidden reference text used ONLY for width measurement -->\n <g style=\"visibility: hidden; pointer-events: none\" aria-hidden=\"true\">\n <text\n #refText\n x=\"0\"\n y=\"0\"\n text-anchor=\"start\"\n dominant-baseline=\"alphabetic\"\n >\n {{ referenceString() }}\n </text>\n </g>\n</svg>\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2425
2528
  }
2426
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadialGaugeComponent, decorators: [{
2529
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialGaugeComponent, decorators: [{
2427
2530
  type: Component,
2428
2531
  args: [{ selector: 'ngx-radial-gauge', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
2429
2532
  role: 'meter',
@@ -2491,8 +2594,8 @@ class RadialGaugeStateDialogComponent {
2491
2594
  onSave() {
2492
2595
  this.dialogRef.close(this.localState);
2493
2596
  }
2494
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadialGaugeStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2495
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: RadialGaugeStateDialogComponent, isStandalone: true, selector: "lib-radial-gauge-state-dialog", ngImport: i0, template: `
2597
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialGaugeStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2598
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: RadialGaugeStateDialogComponent, isStandalone: true, selector: "lib-radial-gauge-state-dialog", ngImport: i0, template: `
2496
2599
  <h2
2497
2600
  mat-dialog-title
2498
2601
  i18n="@@ngx.dashboard.widgets.radialGauge.dialog.title"
@@ -2598,9 +2701,9 @@ class RadialGaugeStateDialogComponent {
2598
2701
  Save
2599
2702
  </button>
2600
2703
  </mat-dialog-actions>
2601
- `, 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2704
+ `, 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: 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2602
2705
  }
2603
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadialGaugeStateDialogComponent, decorators: [{
2706
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialGaugeStateDialogComponent, decorators: [{
2604
2707
  type: Component,
2605
2708
  args: [{ selector: 'lib-radial-gauge-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
2606
2709
  MatDialogModule,
@@ -2736,7 +2839,8 @@ class RadialGaugeWidgetComponent {
2736
2839
  active: false,
2737
2840
  hasBackground: true,
2738
2841
  showValueLabel: true,
2739
- }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
2842
+ }, /* @ts-ignore */
2843
+ ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
2740
2844
  segments = computed(() => {
2741
2845
  const profile = this.state().colorProfile || 'dynamic';
2742
2846
  if (profile === 'static') {
@@ -2756,7 +2860,8 @@ class RadialGaugeWidgetComponent {
2756
2860
  { from: 80, to: 100, color: 'var(--mat-sys-tertiary)' },
2757
2861
  ];
2758
2862
  }
2759
- }, ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
2863
+ }, /* @ts-ignore */
2864
+ ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
2760
2865
  dashboardSetState(state) {
2761
2866
  if (state) {
2762
2867
  this.state.update((current) => ({
@@ -2782,12 +2887,12 @@ class RadialGaugeWidgetComponent {
2782
2887
  }
2783
2888
  });
2784
2889
  }
2785
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadialGaugeWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2786
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadialGaugeWidgetComponent, isStandalone: true, selector: "ngx-dashboard-radial-gauge-widget", ngImport: i0, template: "<!-- radial-gauge-widget.component.html -->\n<div class=\"widget-container\" [class.has-background]=\"state().hasBackground\">\n @if (state().active) {\n <!-- Active mode: Show live gauge -->\n <div class=\"gauge-container\">\n <ngx-radial-gauge\n [value]=\"state().value || 0\"\n [min]=\"0\"\n [max]=\"100\"\n [fitToContainer]=\"true\"\n [responsiveMode]=\"true\"\n [segments]=\"segments()\"\n [outerThickness]=\"24\"\n [innerThickness]=\"8\"\n [gap]=\"4\"\n [segmentGapPx]=\"2\"\n [labelReference]=\"'00000'\"\n [referenceGlyph]=\"'0'\"\n [hasBackground]=\"state().hasBackground || false\"\n [showValueLabel]=\"state().showValueLabel ?? true\"\n />\n </div>\n } @else {\n <!-- Passive mode: Show static icon -->\n <div class=\"icon-container\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n </div>\n }\n</div>\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"] }] });
2890
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialGaugeWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2891
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RadialGaugeWidgetComponent, isStandalone: true, selector: "ngx-dashboard-radial-gauge-widget", ngImport: i0, template: "<!-- radial-gauge-widget.component.html -->\n<div class=\"widget-container\" [class.has-background]=\"state().hasBackground\">\n @if (state().active) {\n <!-- Active mode: Show live gauge -->\n <div class=\"gauge-container\">\n <ngx-radial-gauge\n [value]=\"state().value || 0\"\n [min]=\"0\"\n [max]=\"100\"\n [fitToContainer]=\"true\"\n [responsiveMode]=\"true\"\n [segments]=\"segments()\"\n [outerThickness]=\"24\"\n [innerThickness]=\"8\"\n [gap]=\"4\"\n [segmentGapPx]=\"2\"\n [labelReference]=\"'00000'\"\n [referenceGlyph]=\"'0'\"\n [hasBackground]=\"state().hasBackground || false\"\n [showValueLabel]=\"state().showValueLabel ?? true\"\n />\n </div>\n } @else {\n <!-- Passive mode: Show static icon -->\n <div class=\"icon-container\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n </div>\n }\n</div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2787
2892
  }
2788
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadialGaugeWidgetComponent, decorators: [{
2893
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialGaugeWidgetComponent, decorators: [{
2789
2894
  type: Component,
2790
- args: [{ selector: 'ngx-dashboard-radial-gauge-widget', imports: [RadialGaugeComponent], template: "<!-- radial-gauge-widget.component.html -->\n<div class=\"widget-container\" [class.has-background]=\"state().hasBackground\">\n @if (state().active) {\n <!-- Active mode: Show live gauge -->\n <div class=\"gauge-container\">\n <ngx-radial-gauge\n [value]=\"state().value || 0\"\n [min]=\"0\"\n [max]=\"100\"\n [fitToContainer]=\"true\"\n [responsiveMode]=\"true\"\n [segments]=\"segments()\"\n [outerThickness]=\"24\"\n [innerThickness]=\"8\"\n [gap]=\"4\"\n [segmentGapPx]=\"2\"\n [labelReference]=\"'00000'\"\n [referenceGlyph]=\"'0'\"\n [hasBackground]=\"state().hasBackground || false\"\n [showValueLabel]=\"state().showValueLabel ?? true\"\n />\n </div>\n } @else {\n <!-- Passive mode: Show static icon -->\n <div class=\"icon-container\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n </div>\n }\n</div>\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"] }]
2895
+ args: [{ selector: 'ngx-dashboard-radial-gauge-widget', imports: [RadialGaugeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- radial-gauge-widget.component.html -->\n<div class=\"widget-container\" [class.has-background]=\"state().hasBackground\">\n @if (state().active) {\n <!-- Active mode: Show live gauge -->\n <div class=\"gauge-container\">\n <ngx-radial-gauge\n [value]=\"state().value || 0\"\n [min]=\"0\"\n [max]=\"100\"\n [fitToContainer]=\"true\"\n [responsiveMode]=\"true\"\n [segments]=\"segments()\"\n [outerThickness]=\"24\"\n [innerThickness]=\"8\"\n [gap]=\"4\"\n [segmentGapPx]=\"2\"\n [labelReference]=\"'00000'\"\n [referenceGlyph]=\"'0'\"\n [hasBackground]=\"state().hasBackground || false\"\n [showValueLabel]=\"state().showValueLabel ?? true\"\n />\n </div>\n } @else {\n <!-- Passive mode: Show static icon -->\n <div class=\"icon-container\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n </div>\n }\n</div>\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"] }]
2791
2896
  }] });
2792
2897
 
2793
2898
  /*