@dragonworks/ngx-dashboard-widgets 20.3.1 → 21.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 (5) hide show
  1. package/README.md +194 -194
  2. package/fesm2022/dragonworks-ngx-dashboard-widgets.mjs +1290 -1285
  3. package/fesm2022/dragonworks-ngx-dashboard-widgets.mjs.map +1 -1
  4. package/package.json +7 -7
  5. package/{index.d.ts → types/dragonworks-ngx-dashboard-widgets.d.ts} +6 -6
package/fesm2022/dragonworks-ngx-dashboard-widgets.mjs CHANGED
@@ -1,9 +1,8 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, signal, computed, Component, input, numberAttribute, booleanAttribute, ElementRef, NgZone, PLATFORM_ID, DestroyRef, effect, Directive, ChangeDetectionStrategy, Renderer2, viewChild, LOCALE_ID, afterNextRender } from '@angular/core';
2
+ import { inject, signal, computed, ChangeDetectionStrategy, Component, input, numberAttribute, booleanAttribute, ElementRef, PLATFORM_ID, DestroyRef, NgZone, afterNextRender, effect, Directive, Renderer2, viewChild, LOCALE_ID } from '@angular/core';
3
3
  import { DomSanitizer } from '@angular/platform-browser';
4
4
  import * as i2 from '@angular/material/dialog';
5
5
  import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
6
- import { CommonModule, isPlatformBrowser } from '@angular/common';
7
6
  import * as i1 from '@angular/forms';
8
7
  import { FormsModule } from '@angular/forms';
9
8
  import * as i3 from '@angular/material/button';
@@ -18,6 +17,7 @@ import * as i7 from '@angular/material/slide-toggle';
18
17
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
19
18
  import * as i5$1 from '@angular/material/input';
20
19
  import { MatInputModule } from '@angular/material/input';
20
+ import { isPlatformBrowser } from '@angular/common';
21
21
  import * as i3$1 from '@angular/material/radio';
22
22
  import { MatRadioModule } from '@angular/material/radio';
23
23
  import { from, map, of } from 'rxjs';
@@ -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 = '20.3.1';
28
+ const NGX_DASHBOARD_WIDGETS_VERSION = '21.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>';
@@ -82,188 +82,187 @@ class ArrowStateDialogComponent {
82
82
  hasBackground: this.hasBackground(),
83
83
  });
84
84
  }
85
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrowStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
86
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: ArrowStateDialogComponent, isStandalone: true, selector: "lib-arrow-state-dialog", ngImport: i0, template: `
87
- <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.arrow.dialog.title">
88
- Arrow Settings
89
- </h2>
90
- <mat-dialog-content>
91
- <!-- Direction Selection -->
92
- <mat-form-field appearance="outline" class="direction-field">
93
- <mat-label i18n="@@ngx.dashboard.widgets.arrow.dialog.direction"
94
- >Arrow Direction</mat-label
95
- >
96
- <mat-select
97
- [value]="direction()"
98
- (selectionChange)="direction.set($any($event.value))"
99
- >
100
- <mat-option
101
- value="up"
102
- i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.up"
103
- >Up</mat-option
104
- >
105
- <mat-option
106
- value="right"
107
- i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.right"
108
- >Right</mat-option
109
- >
110
- <mat-option
111
- value="down"
112
- i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.down"
113
- >Down</mat-option
114
- >
115
- <mat-option
116
- value="left"
117
- i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.left"
118
- >Left</mat-option
119
- >
120
- </mat-select>
121
- </mat-form-field>
122
-
123
- <!-- Opacity Slider -->
124
- <div class="slider-field">
125
- <div
126
- class="field-label"
127
- i18n="@@ngx.dashboard.widgets.arrow.dialog.opacity"
128
- >
129
- Opacity: {{ formatOpacity(opacity()) }}%
130
- </div>
131
- <mat-slider [min]="0.1" [max]="1" [step]="0.1">
132
- <input matSliderThumb [(ngModel)]="opacity" />
133
- </mat-slider>
134
- </div>
135
-
136
- <!-- Background Toggle -->
137
- <div class="toggle-field">
138
- <mat-slide-toggle
139
- [checked]="hasBackground()"
140
- (change)="onBackgroundToggle($event.checked)"
141
- i18n="@@ngx.dashboard.widgets.arrow.dialog.background"
142
- >
143
- Background
144
- </mat-slide-toggle>
145
- <span
146
- class="toggle-hint"
147
- i18n="@@ngx.dashboard.widgets.arrow.dialog.backgroundHint"
148
- >Adds a background behind the arrow</span
149
- >
150
- </div>
151
- </mat-dialog-content>
152
-
153
- <mat-dialog-actions align="end">
154
- <button
155
- mat-button
156
- (click)="onCancel()"
157
- i18n="@@ngx.dashboard.common.cancel"
158
- >
159
- Cancel
160
- </button>
161
- <button
162
- mat-flat-button
163
- (click)="save()"
164
- [disabled]="!hasChanged()"
165
- i18n="@@ngx.dashboard.common.save"
166
- >
167
- Save
168
- </button>
169
- </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: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
85
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrowStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
86
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ArrowStateDialogComponent, isStandalone: true, selector: "lib-arrow-state-dialog", ngImport: i0, template: `
87
+ <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.arrow.dialog.title">
88
+ Arrow Settings
89
+ </h2>
90
+ <mat-dialog-content>
91
+ <!-- Direction Selection -->
92
+ <mat-form-field appearance="outline" class="direction-field">
93
+ <mat-label i18n="@@ngx.dashboard.widgets.arrow.dialog.direction"
94
+ >Arrow Direction</mat-label
95
+ >
96
+ <mat-select
97
+ [value]="direction()"
98
+ (selectionChange)="direction.set($any($event.value))"
99
+ >
100
+ <mat-option
101
+ value="up"
102
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.up"
103
+ >Up</mat-option
104
+ >
105
+ <mat-option
106
+ value="right"
107
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.right"
108
+ >Right</mat-option
109
+ >
110
+ <mat-option
111
+ value="down"
112
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.down"
113
+ >Down</mat-option
114
+ >
115
+ <mat-option
116
+ value="left"
117
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.left"
118
+ >Left</mat-option
119
+ >
120
+ </mat-select>
121
+ </mat-form-field>
122
+
123
+ <!-- Opacity Slider -->
124
+ <div class="slider-field">
125
+ <div
126
+ class="field-label"
127
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.opacity"
128
+ >
129
+ Opacity: {{ formatOpacity(opacity()) }}%
130
+ </div>
131
+ <mat-slider [min]="0.1" [max]="1" [step]="0.1">
132
+ <input matSliderThumb [(ngModel)]="opacity" />
133
+ </mat-slider>
134
+ </div>
135
+
136
+ <!-- Background Toggle -->
137
+ <div class="toggle-field">
138
+ <mat-slide-toggle
139
+ [checked]="hasBackground()"
140
+ (change)="onBackgroundToggle($event.checked)"
141
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.background"
142
+ >
143
+ Background
144
+ </mat-slide-toggle>
145
+ <span
146
+ class="toggle-hint"
147
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.backgroundHint"
148
+ >Adds a background behind the arrow</span
149
+ >
150
+ </div>
151
+ </mat-dialog-content>
152
+
153
+ <mat-dialog-actions align="end">
154
+ <button
155
+ mat-button
156
+ (click)="onCancel()"
157
+ i18n="@@ngx.dashboard.common.cancel"
158
+ >
159
+ Cancel
160
+ </button>
161
+ <button
162
+ mat-flat-button
163
+ (click)="save()"
164
+ [disabled]="!hasChanged()"
165
+ i18n="@@ngx.dashboard.common.save"
166
+ >
167
+ Save
168
+ </button>
169
+ </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 });
171
171
  }
172
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrowStateDialogComponent, decorators: [{
172
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrowStateDialogComponent, decorators: [{
173
173
  type: Component,
174
- args: [{ selector: 'lib-arrow-state-dialog', standalone: true, imports: [
175
- CommonModule,
174
+ args: [{ selector: 'lib-arrow-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
176
175
  FormsModule,
177
176
  MatDialogModule,
178
177
  MatButtonModule,
179
178
  MatFormFieldModule,
180
179
  MatSelectModule,
181
180
  MatSliderModule,
182
- MatSlideToggleModule,
183
- ], template: `
184
- <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.arrow.dialog.title">
185
- Arrow Settings
186
- </h2>
187
- <mat-dialog-content>
188
- <!-- Direction Selection -->
189
- <mat-form-field appearance="outline" class="direction-field">
190
- <mat-label i18n="@@ngx.dashboard.widgets.arrow.dialog.direction"
191
- >Arrow Direction</mat-label
192
- >
193
- <mat-select
194
- [value]="direction()"
195
- (selectionChange)="direction.set($any($event.value))"
196
- >
197
- <mat-option
198
- value="up"
199
- i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.up"
200
- >Up</mat-option
201
- >
202
- <mat-option
203
- value="right"
204
- i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.right"
205
- >Right</mat-option
206
- >
207
- <mat-option
208
- value="down"
209
- i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.down"
210
- >Down</mat-option
211
- >
212
- <mat-option
213
- value="left"
214
- i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.left"
215
- >Left</mat-option
216
- >
217
- </mat-select>
218
- </mat-form-field>
219
-
220
- <!-- Opacity Slider -->
221
- <div class="slider-field">
222
- <div
223
- class="field-label"
224
- i18n="@@ngx.dashboard.widgets.arrow.dialog.opacity"
225
- >
226
- Opacity: {{ formatOpacity(opacity()) }}%
227
- </div>
228
- <mat-slider [min]="0.1" [max]="1" [step]="0.1">
229
- <input matSliderThumb [(ngModel)]="opacity" />
230
- </mat-slider>
231
- </div>
232
-
233
- <!-- Background Toggle -->
234
- <div class="toggle-field">
235
- <mat-slide-toggle
236
- [checked]="hasBackground()"
237
- (change)="onBackgroundToggle($event.checked)"
238
- i18n="@@ngx.dashboard.widgets.arrow.dialog.background"
239
- >
240
- Background
241
- </mat-slide-toggle>
242
- <span
243
- class="toggle-hint"
244
- i18n="@@ngx.dashboard.widgets.arrow.dialog.backgroundHint"
245
- >Adds a background behind the arrow</span
246
- >
247
- </div>
248
- </mat-dialog-content>
249
-
250
- <mat-dialog-actions align="end">
251
- <button
252
- mat-button
253
- (click)="onCancel()"
254
- i18n="@@ngx.dashboard.common.cancel"
255
- >
256
- Cancel
257
- </button>
258
- <button
259
- mat-flat-button
260
- (click)="save()"
261
- [disabled]="!hasChanged()"
262
- i18n="@@ngx.dashboard.common.save"
263
- >
264
- Save
265
- </button>
266
- </mat-dialog-actions>
181
+ MatSlideToggleModule
182
+ ], template: `
183
+ <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.arrow.dialog.title">
184
+ Arrow Settings
185
+ </h2>
186
+ <mat-dialog-content>
187
+ <!-- Direction Selection -->
188
+ <mat-form-field appearance="outline" class="direction-field">
189
+ <mat-label i18n="@@ngx.dashboard.widgets.arrow.dialog.direction"
190
+ >Arrow Direction</mat-label
191
+ >
192
+ <mat-select
193
+ [value]="direction()"
194
+ (selectionChange)="direction.set($any($event.value))"
195
+ >
196
+ <mat-option
197
+ value="up"
198
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.up"
199
+ >Up</mat-option
200
+ >
201
+ <mat-option
202
+ value="right"
203
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.right"
204
+ >Right</mat-option
205
+ >
206
+ <mat-option
207
+ value="down"
208
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.down"
209
+ >Down</mat-option
210
+ >
211
+ <mat-option
212
+ value="left"
213
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.left"
214
+ >Left</mat-option
215
+ >
216
+ </mat-select>
217
+ </mat-form-field>
218
+
219
+ <!-- Opacity Slider -->
220
+ <div class="slider-field">
221
+ <div
222
+ class="field-label"
223
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.opacity"
224
+ >
225
+ Opacity: {{ formatOpacity(opacity()) }}%
226
+ </div>
227
+ <mat-slider [min]="0.1" [max]="1" [step]="0.1">
228
+ <input matSliderThumb [(ngModel)]="opacity" />
229
+ </mat-slider>
230
+ </div>
231
+
232
+ <!-- Background Toggle -->
233
+ <div class="toggle-field">
234
+ <mat-slide-toggle
235
+ [checked]="hasBackground()"
236
+ (change)="onBackgroundToggle($event.checked)"
237
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.background"
238
+ >
239
+ Background
240
+ </mat-slide-toggle>
241
+ <span
242
+ class="toggle-hint"
243
+ i18n="@@ngx.dashboard.widgets.arrow.dialog.backgroundHint"
244
+ >Adds a background behind the arrow</span
245
+ >
246
+ </div>
247
+ </mat-dialog-content>
248
+
249
+ <mat-dialog-actions align="end">
250
+ <button
251
+ mat-button
252
+ (click)="onCancel()"
253
+ i18n="@@ngx.dashboard.common.cancel"
254
+ >
255
+ Cancel
256
+ </button>
257
+ <button
258
+ mat-flat-button
259
+ (click)="save()"
260
+ [disabled]="!hasChanged()"
261
+ i18n="@@ngx.dashboard.common.save"
262
+ >
263
+ Save
264
+ </button>
265
+ </mat-dialog-actions>
267
266
  `, 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"] }]
268
267
  }] });
269
268
 
@@ -318,12 +317,12 @@ class ArrowWidgetComponent {
318
317
  }
319
318
  });
320
319
  }
321
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrowWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
322
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: ArrowWidgetComponent, isStandalone: true, selector: "ngx-dashboard-arrow-widget", ngImport: i0, template: "<!-- arrow-widget.component.html -->\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n <div\r\n class=\"svg-placeholder\"\r\n [innerHTML]=\"safeSvgIcon\"\r\n [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\r\n [style.opacity]=\"state().opacity\"\r\n ></div>\r\n</div>\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.svg-wrapper.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] });
320
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrowWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
321
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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"] });
323
322
  }
324
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrowWidgetComponent, decorators: [{
323
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrowWidgetComponent, decorators: [{
325
324
  type: Component,
326
- args: [{ selector: 'ngx-dashboard-arrow-widget', imports: [], template: "<!-- arrow-widget.component.html -->\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n <div\r\n class=\"svg-placeholder\"\r\n [innerHTML]=\"safeSvgIcon\"\r\n [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\r\n [style.opacity]=\"state().opacity\"\r\n ></div>\r\n</div>\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.svg-wrapper.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] }]
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"] }]
327
326
  }] });
328
327
 
329
328
  // label-widget.metadata.ts
@@ -433,263 +432,262 @@ class LabelStateDialogComponent {
433
432
  }
434
433
  this.dialogRef.close(state);
435
434
  }
436
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
437
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LabelStateDialogComponent, isStandalone: true, selector: "lib-label-state-dialog", ngImport: i0, template: `
438
- <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.label.dialog.title">
439
- Label Settings
440
- </h2>
441
- <mat-dialog-content>
442
- <mat-form-field appearance="outline" class="label-text-field">
443
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.labelText"
444
- >Label Text</mat-label
445
- >
446
- <input
447
- matInput
448
- type="text"
449
- [value]="label()"
450
- (input)="label.set($any($event.target).value)"
451
- i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.placeholder"
452
- placeholder="Enter your label text..."
453
- />
454
- </mat-form-field>
455
-
456
- <!-- Responsive Text Toggle -->
457
- <div class="toggle-section">
458
- <mat-slide-toggle
459
- [checked]="responsive()"
460
- (change)="responsive.set($event.checked)"
461
- i18n="@@ngx.dashboard.widgets.label.dialog.responsive"
462
- >
463
- Responsive Text
464
- </mat-slide-toggle>
465
- <span
466
- class="toggle-description"
467
- i18n="@@ngx.dashboard.widgets.label.dialog.responsiveDescription"
468
- >Automatically adjust text size to fit the widget</span
469
- >
470
- </div>
471
-
472
- <!-- Responsive Font Size Constraints (only shown when responsive is enabled) -->
473
- @if (responsive()) {
474
- <div class="responsive-section">
475
- <div
476
- class="section-label"
477
- i18n="@@ngx.dashboard.widgets.label.dialog.fontSizeLimits"
478
- >
479
- Font Size Limits
480
- </div>
481
- <div class="row-layout">
482
- <mat-form-field appearance="outline">
483
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.minSize"
484
- >Min Size (px)</mat-label
485
- >
486
- <input
487
- matInput
488
- type="number"
489
- [value]="minFontSize()"
490
- (input)="
491
- validateAndCorrectMinFontSize(+$any($event.target).value)
492
- "
493
- (blur)="validateAndCorrectMinFontSize(minFontSize())"
494
- min="8"
495
- max="24"
496
- placeholder="8"
497
- />
498
- @if (!isMinFontSizeValid() || !isFontSizeRangeValid()) {
499
- <mat-error>
500
- @if (!isMinFontSizeValid()) {
501
- <span i18n="@@ngx.dashboard.widgets.label.dialog.minSizeError"
502
- >Must be between 8-24px</span
503
- >
504
- } @else {
505
- <span
506
- i18n="@@ngx.dashboard.widgets.label.dialog.minSizeRangeError"
507
- >Must be less than max size</span
508
- >
509
- }
510
- </mat-error>
511
- } @else {
512
- <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.minSizeHint"
513
- >8-24px range</mat-hint
514
- >
515
- }
516
- </mat-form-field>
517
-
518
- <mat-form-field appearance="outline">
519
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.maxSize"
520
- >Max Size (px)</mat-label
521
- >
522
- <input
523
- matInput
524
- type="number"
525
- [value]="maxFontSize()"
526
- (input)="
527
- validateAndCorrectMaxFontSize(+$any($event.target).value)
528
- "
529
- (blur)="validateAndCorrectMaxFontSize(maxFontSize())"
530
- min="16"
531
- max="128"
532
- placeholder="64"
533
- />
534
- @if (!isMaxFontSizeValid() || !isFontSizeRangeValid()) {
535
- <mat-error>
536
- @if (!isMaxFontSizeValid()) {
537
- <span i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeError"
538
- >Must be between 16-128px</span
539
- >
540
- } @else {
541
- <span
542
- i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeRangeError"
543
- >Must be greater than min size</span
544
- >
545
- }
546
- </mat-error>
547
- } @else {
548
- <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeHint"
549
- >16-128px range</mat-hint
550
- >
551
- }
552
- </mat-form-field>
553
- </div>
554
-
555
- <!-- Template String field -->
556
- <mat-form-field appearance="outline">
557
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.templateString"
558
- >Template String</mat-label
559
- >
560
- <input
561
- matInput
562
- type="text"
563
- [value]="templateString() || ''"
564
- (input)="templateString.set($any($event.target).value || undefined)"
565
- i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.templateStringPlaceholder"
566
- placeholder="Optional: Text to use for size calculation"
567
- />
568
- <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.templateStringHint"
569
- >Use when displayed text varies but size should remain consistent</mat-hint
570
- >
571
- </mat-form-field>
572
- </div>
573
- }
574
-
575
- <div class="row-layout">
576
- <mat-form-field appearance="outline">
577
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontSize"
578
- >Font Size (px)</mat-label
579
- >
580
- <input
581
- matInput
582
- type="number"
583
- [value]="fontSize()"
584
- (input)="fontSize.set(+$any($event.target).value)"
585
- [disabled]="responsive()"
586
- min="8"
587
- max="48"
588
- placeholder="16"
589
- />
590
- </mat-form-field>
591
-
592
- <mat-form-field appearance="outline">
593
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.alignment"
594
- >Alignment</mat-label
595
- >
596
- <mat-select
597
- [value]="alignment()"
598
- (selectionChange)="alignment.set($any($event.value))"
599
- >
600
- <mat-option
601
- value="left"
602
- i18n="@@ngx.dashboard.widgets.label.dialog.alignment.left"
603
- >Left</mat-option
604
- >
605
- <mat-option
606
- value="center"
607
- i18n="@@ngx.dashboard.widgets.label.dialog.alignment.center"
608
- >Center</mat-option
609
- >
610
- <mat-option
611
- value="right"
612
- i18n="@@ngx.dashboard.widgets.label.dialog.alignment.right"
613
- >Right</mat-option
614
- >
615
- </mat-select>
616
- </mat-form-field>
617
- </div>
618
-
619
- <mat-form-field appearance="outline">
620
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight"
621
- >Font Weight</mat-label
622
- >
623
- <mat-select
624
- [value]="fontWeight()"
625
- (selectionChange)="fontWeight.set($any($event.value))"
626
- >
627
- <mat-option
628
- value="normal"
629
- i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.normal"
630
- >Normal</mat-option
631
- >
632
- <mat-option
633
- value="bold"
634
- i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.bold"
635
- >Bold</mat-option
636
- >
637
- </mat-select>
638
- </mat-form-field>
639
-
640
- <!-- Opacity Slider -->
641
- <div class="slider-section">
642
- <div
643
- class="slider-label"
644
- i18n="@@ngx.dashboard.widgets.label.dialog.opacity"
645
- >
646
- Opacity: {{ formatOpacity(opacity()) }}%
647
- </div>
648
- <mat-slider [min]="0.1" [max]="1" [step]="0.1">
649
- <input matSliderThumb [(ngModel)]="opacity" />
650
- </mat-slider>
651
- </div>
652
-
653
- <!-- Background Toggle -->
654
- <div class="toggle-section">
655
- <mat-slide-toggle
656
- [checked]="!transparentBackground()"
657
- (change)="onBackgroundToggle($event.checked)"
658
- i18n="@@ngx.dashboard.widgets.label.dialog.background"
659
- >
660
- Background
661
- </mat-slide-toggle>
662
- <span
663
- class="toggle-description"
664
- i18n="@@ngx.dashboard.widgets.label.dialog.backgroundDescription"
665
- >Adds a background behind the text</span
666
- >
667
- </div>
668
- </mat-dialog-content>
669
-
670
- <mat-dialog-actions align="end">
671
- <button
672
- mat-button
673
- (click)="onCancel()"
674
- i18n="@@ngx.dashboard.common.cancel"
675
- >
676
- Cancel
677
- </button>
678
- <button
679
- mat-flat-button
680
- (click)="save()"
681
- [disabled]="!hasChanged() || !isFormValid()"
682
- i18n="@@ngx.dashboard.common.save"
683
- >
684
- Save
685
- </button>
686
- </mat-dialog-actions>
687
- `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden}mat-form-field{width:100%;display:block;margin-bottom:1rem}.label-text-field{margin-top:1rem}.row-layout{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.row-layout mat-form-field{margin-bottom:0}.slider-section{margin-bottom:1.5rem;margin-right:1rem}.slider-label{display:block;margin-bottom:.5rem}mat-slider{width:100%;display:block}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.toggle-description{margin:0}.responsive-section{margin-bottom:1.5rem;padding:1rem;border-radius:12px;background-color:var( --mat-app-surface-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .05) );border:1px solid var( --mat-app-outline-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .12) )}.section-label{display:block;margin-bottom:.75rem;font-weight:500;color:var( --mat-app-on-surface-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .6) )}.responsive-section .row-layout{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
435
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LabelStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
436
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: LabelStateDialogComponent, isStandalone: true, selector: "lib-label-state-dialog", ngImport: i0, template: `
437
+ <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.label.dialog.title">
438
+ Label Settings
439
+ </h2>
440
+ <mat-dialog-content>
441
+ <mat-form-field appearance="outline" class="label-text-field">
442
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.labelText"
443
+ >Label Text</mat-label
444
+ >
445
+ <input
446
+ matInput
447
+ type="text"
448
+ [value]="label()"
449
+ (input)="label.set($any($event.target).value)"
450
+ i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.placeholder"
451
+ placeholder="Enter your label text..."
452
+ />
453
+ </mat-form-field>
454
+
455
+ <!-- Responsive Text Toggle -->
456
+ <div class="toggle-section">
457
+ <mat-slide-toggle
458
+ [checked]="responsive()"
459
+ (change)="responsive.set($event.checked)"
460
+ i18n="@@ngx.dashboard.widgets.label.dialog.responsive"
461
+ >
462
+ Responsive Text
463
+ </mat-slide-toggle>
464
+ <span
465
+ class="toggle-description"
466
+ i18n="@@ngx.dashboard.widgets.label.dialog.responsiveDescription"
467
+ >Automatically adjust text size to fit the widget</span
468
+ >
469
+ </div>
470
+
471
+ <!-- Responsive Font Size Constraints (only shown when responsive is enabled) -->
472
+ @if (responsive()) {
473
+ <div class="responsive-section">
474
+ <div
475
+ class="section-label"
476
+ i18n="@@ngx.dashboard.widgets.label.dialog.fontSizeLimits"
477
+ >
478
+ Font Size Limits
479
+ </div>
480
+ <div class="row-layout">
481
+ <mat-form-field appearance="outline">
482
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.minSize"
483
+ >Min Size (px)</mat-label
484
+ >
485
+ <input
486
+ matInput
487
+ type="number"
488
+ [value]="minFontSize()"
489
+ (input)="
490
+ validateAndCorrectMinFontSize(+$any($event.target).value)
491
+ "
492
+ (blur)="validateAndCorrectMinFontSize(minFontSize())"
493
+ min="8"
494
+ max="24"
495
+ placeholder="8"
496
+ />
497
+ @if (!isMinFontSizeValid() || !isFontSizeRangeValid()) {
498
+ <mat-error>
499
+ @if (!isMinFontSizeValid()) {
500
+ <span i18n="@@ngx.dashboard.widgets.label.dialog.minSizeError"
501
+ >Must be between 8-24px</span
502
+ >
503
+ } @else {
504
+ <span
505
+ i18n="@@ngx.dashboard.widgets.label.dialog.minSizeRangeError"
506
+ >Must be less than max size</span
507
+ >
508
+ }
509
+ </mat-error>
510
+ } @else {
511
+ <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.minSizeHint"
512
+ >8-24px range</mat-hint
513
+ >
514
+ }
515
+ </mat-form-field>
516
+
517
+ <mat-form-field appearance="outline">
518
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.maxSize"
519
+ >Max Size (px)</mat-label
520
+ >
521
+ <input
522
+ matInput
523
+ type="number"
524
+ [value]="maxFontSize()"
525
+ (input)="
526
+ validateAndCorrectMaxFontSize(+$any($event.target).value)
527
+ "
528
+ (blur)="validateAndCorrectMaxFontSize(maxFontSize())"
529
+ min="16"
530
+ max="128"
531
+ placeholder="64"
532
+ />
533
+ @if (!isMaxFontSizeValid() || !isFontSizeRangeValid()) {
534
+ <mat-error>
535
+ @if (!isMaxFontSizeValid()) {
536
+ <span i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeError"
537
+ >Must be between 16-128px</span
538
+ >
539
+ } @else {
540
+ <span
541
+ i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeRangeError"
542
+ >Must be greater than min size</span
543
+ >
544
+ }
545
+ </mat-error>
546
+ } @else {
547
+ <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeHint"
548
+ >16-128px range</mat-hint
549
+ >
550
+ }
551
+ </mat-form-field>
552
+ </div>
553
+
554
+ <!-- Template String field -->
555
+ <mat-form-field appearance="outline">
556
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.templateString"
557
+ >Template String</mat-label
558
+ >
559
+ <input
560
+ matInput
561
+ type="text"
562
+ [value]="templateString() || ''"
563
+ (input)="templateString.set($any($event.target).value || undefined)"
564
+ i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.templateStringPlaceholder"
565
+ placeholder="Optional: Text to use for size calculation"
566
+ />
567
+ <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.templateStringHint"
568
+ >Use when displayed text varies but size should remain consistent</mat-hint
569
+ >
570
+ </mat-form-field>
571
+ </div>
572
+ }
573
+
574
+ <div class="row-layout">
575
+ <mat-form-field appearance="outline">
576
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontSize"
577
+ >Font Size (px)</mat-label
578
+ >
579
+ <input
580
+ matInput
581
+ type="number"
582
+ [value]="fontSize()"
583
+ (input)="fontSize.set(+$any($event.target).value)"
584
+ [disabled]="responsive()"
585
+ min="8"
586
+ max="48"
587
+ placeholder="16"
588
+ />
589
+ </mat-form-field>
590
+
591
+ <mat-form-field appearance="outline">
592
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.alignment"
593
+ >Alignment</mat-label
594
+ >
595
+ <mat-select
596
+ [value]="alignment()"
597
+ (selectionChange)="alignment.set($any($event.value))"
598
+ >
599
+ <mat-option
600
+ value="left"
601
+ i18n="@@ngx.dashboard.widgets.label.dialog.alignment.left"
602
+ >Left</mat-option
603
+ >
604
+ <mat-option
605
+ value="center"
606
+ i18n="@@ngx.dashboard.widgets.label.dialog.alignment.center"
607
+ >Center</mat-option
608
+ >
609
+ <mat-option
610
+ value="right"
611
+ i18n="@@ngx.dashboard.widgets.label.dialog.alignment.right"
612
+ >Right</mat-option
613
+ >
614
+ </mat-select>
615
+ </mat-form-field>
616
+ </div>
617
+
618
+ <mat-form-field appearance="outline">
619
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight"
620
+ >Font Weight</mat-label
621
+ >
622
+ <mat-select
623
+ [value]="fontWeight()"
624
+ (selectionChange)="fontWeight.set($any($event.value))"
625
+ >
626
+ <mat-option
627
+ value="normal"
628
+ i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.normal"
629
+ >Normal</mat-option
630
+ >
631
+ <mat-option
632
+ value="bold"
633
+ i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.bold"
634
+ >Bold</mat-option
635
+ >
636
+ </mat-select>
637
+ </mat-form-field>
638
+
639
+ <!-- Opacity Slider -->
640
+ <div class="slider-section">
641
+ <div
642
+ class="slider-label"
643
+ i18n="@@ngx.dashboard.widgets.label.dialog.opacity"
644
+ >
645
+ Opacity: {{ formatOpacity(opacity()) }}%
646
+ </div>
647
+ <mat-slider [min]="0.1" [max]="1" [step]="0.1">
648
+ <input matSliderThumb [(ngModel)]="opacity" />
649
+ </mat-slider>
650
+ </div>
651
+
652
+ <!-- Background Toggle -->
653
+ <div class="toggle-section">
654
+ <mat-slide-toggle
655
+ [checked]="!transparentBackground()"
656
+ (change)="onBackgroundToggle($event.checked)"
657
+ i18n="@@ngx.dashboard.widgets.label.dialog.background"
658
+ >
659
+ Background
660
+ </mat-slide-toggle>
661
+ <span
662
+ class="toggle-description"
663
+ i18n="@@ngx.dashboard.widgets.label.dialog.backgroundDescription"
664
+ >Adds a background behind the text</span
665
+ >
666
+ </div>
667
+ </mat-dialog-content>
668
+
669
+ <mat-dialog-actions align="end">
670
+ <button
671
+ mat-button
672
+ (click)="onCancel()"
673
+ i18n="@@ngx.dashboard.common.cancel"
674
+ >
675
+ Cancel
676
+ </button>
677
+ <button
678
+ mat-flat-button
679
+ (click)="save()"
680
+ [disabled]="!hasChanged() || !isFormValid()"
681
+ i18n="@@ngx.dashboard.common.save"
682
+ >
683
+ Save
684
+ </button>
685
+ </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 });
688
687
  }
689
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelStateDialogComponent, decorators: [{
688
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LabelStateDialogComponent, decorators: [{
690
689
  type: Component,
691
- args: [{ selector: 'lib-label-state-dialog', standalone: true, imports: [
692
- CommonModule,
690
+ args: [{ selector: 'lib-label-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
693
691
  FormsModule,
694
692
  MatDialogModule,
695
693
  MatButtonModule,
@@ -697,257 +695,257 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
697
695
  MatInputModule,
698
696
  MatSelectModule,
699
697
  MatSliderModule,
700
- MatSlideToggleModule, // Add this import
701
- ], template: `
702
- <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.label.dialog.title">
703
- Label Settings
704
- </h2>
705
- <mat-dialog-content>
706
- <mat-form-field appearance="outline" class="label-text-field">
707
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.labelText"
708
- >Label Text</mat-label
709
- >
710
- <input
711
- matInput
712
- type="text"
713
- [value]="label()"
714
- (input)="label.set($any($event.target).value)"
715
- i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.placeholder"
716
- placeholder="Enter your label text..."
717
- />
718
- </mat-form-field>
719
-
720
- <!-- Responsive Text Toggle -->
721
- <div class="toggle-section">
722
- <mat-slide-toggle
723
- [checked]="responsive()"
724
- (change)="responsive.set($event.checked)"
725
- i18n="@@ngx.dashboard.widgets.label.dialog.responsive"
726
- >
727
- Responsive Text
728
- </mat-slide-toggle>
729
- <span
730
- class="toggle-description"
731
- i18n="@@ngx.dashboard.widgets.label.dialog.responsiveDescription"
732
- >Automatically adjust text size to fit the widget</span
733
- >
734
- </div>
735
-
736
- <!-- Responsive Font Size Constraints (only shown when responsive is enabled) -->
737
- @if (responsive()) {
738
- <div class="responsive-section">
739
- <div
740
- class="section-label"
741
- i18n="@@ngx.dashboard.widgets.label.dialog.fontSizeLimits"
742
- >
743
- Font Size Limits
744
- </div>
745
- <div class="row-layout">
746
- <mat-form-field appearance="outline">
747
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.minSize"
748
- >Min Size (px)</mat-label
749
- >
750
- <input
751
- matInput
752
- type="number"
753
- [value]="minFontSize()"
754
- (input)="
755
- validateAndCorrectMinFontSize(+$any($event.target).value)
756
- "
757
- (blur)="validateAndCorrectMinFontSize(minFontSize())"
758
- min="8"
759
- max="24"
760
- placeholder="8"
761
- />
762
- @if (!isMinFontSizeValid() || !isFontSizeRangeValid()) {
763
- <mat-error>
764
- @if (!isMinFontSizeValid()) {
765
- <span i18n="@@ngx.dashboard.widgets.label.dialog.minSizeError"
766
- >Must be between 8-24px</span
767
- >
768
- } @else {
769
- <span
770
- i18n="@@ngx.dashboard.widgets.label.dialog.minSizeRangeError"
771
- >Must be less than max size</span
772
- >
773
- }
774
- </mat-error>
775
- } @else {
776
- <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.minSizeHint"
777
- >8-24px range</mat-hint
778
- >
779
- }
780
- </mat-form-field>
781
-
782
- <mat-form-field appearance="outline">
783
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.maxSize"
784
- >Max Size (px)</mat-label
785
- >
786
- <input
787
- matInput
788
- type="number"
789
- [value]="maxFontSize()"
790
- (input)="
791
- validateAndCorrectMaxFontSize(+$any($event.target).value)
792
- "
793
- (blur)="validateAndCorrectMaxFontSize(maxFontSize())"
794
- min="16"
795
- max="128"
796
- placeholder="64"
797
- />
798
- @if (!isMaxFontSizeValid() || !isFontSizeRangeValid()) {
799
- <mat-error>
800
- @if (!isMaxFontSizeValid()) {
801
- <span i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeError"
802
- >Must be between 16-128px</span
803
- >
804
- } @else {
805
- <span
806
- i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeRangeError"
807
- >Must be greater than min size</span
808
- >
809
- }
810
- </mat-error>
811
- } @else {
812
- <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeHint"
813
- >16-128px range</mat-hint
814
- >
815
- }
816
- </mat-form-field>
817
- </div>
818
-
819
- <!-- Template String field -->
820
- <mat-form-field appearance="outline">
821
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.templateString"
822
- >Template String</mat-label
823
- >
824
- <input
825
- matInput
826
- type="text"
827
- [value]="templateString() || ''"
828
- (input)="templateString.set($any($event.target).value || undefined)"
829
- i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.templateStringPlaceholder"
830
- placeholder="Optional: Text to use for size calculation"
831
- />
832
- <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.templateStringHint"
833
- >Use when displayed text varies but size should remain consistent</mat-hint
834
- >
835
- </mat-form-field>
836
- </div>
837
- }
838
-
839
- <div class="row-layout">
840
- <mat-form-field appearance="outline">
841
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontSize"
842
- >Font Size (px)</mat-label
843
- >
844
- <input
845
- matInput
846
- type="number"
847
- [value]="fontSize()"
848
- (input)="fontSize.set(+$any($event.target).value)"
849
- [disabled]="responsive()"
850
- min="8"
851
- max="48"
852
- placeholder="16"
853
- />
854
- </mat-form-field>
855
-
856
- <mat-form-field appearance="outline">
857
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.alignment"
858
- >Alignment</mat-label
859
- >
860
- <mat-select
861
- [value]="alignment()"
862
- (selectionChange)="alignment.set($any($event.value))"
863
- >
864
- <mat-option
865
- value="left"
866
- i18n="@@ngx.dashboard.widgets.label.dialog.alignment.left"
867
- >Left</mat-option
868
- >
869
- <mat-option
870
- value="center"
871
- i18n="@@ngx.dashboard.widgets.label.dialog.alignment.center"
872
- >Center</mat-option
873
- >
874
- <mat-option
875
- value="right"
876
- i18n="@@ngx.dashboard.widgets.label.dialog.alignment.right"
877
- >Right</mat-option
878
- >
879
- </mat-select>
880
- </mat-form-field>
881
- </div>
882
-
883
- <mat-form-field appearance="outline">
884
- <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight"
885
- >Font Weight</mat-label
886
- >
887
- <mat-select
888
- [value]="fontWeight()"
889
- (selectionChange)="fontWeight.set($any($event.value))"
890
- >
891
- <mat-option
892
- value="normal"
893
- i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.normal"
894
- >Normal</mat-option
895
- >
896
- <mat-option
897
- value="bold"
898
- i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.bold"
899
- >Bold</mat-option
900
- >
901
- </mat-select>
902
- </mat-form-field>
903
-
904
- <!-- Opacity Slider -->
905
- <div class="slider-section">
906
- <div
907
- class="slider-label"
908
- i18n="@@ngx.dashboard.widgets.label.dialog.opacity"
909
- >
910
- Opacity: {{ formatOpacity(opacity()) }}%
911
- </div>
912
- <mat-slider [min]="0.1" [max]="1" [step]="0.1">
913
- <input matSliderThumb [(ngModel)]="opacity" />
914
- </mat-slider>
915
- </div>
916
-
917
- <!-- Background Toggle -->
918
- <div class="toggle-section">
919
- <mat-slide-toggle
920
- [checked]="!transparentBackground()"
921
- (change)="onBackgroundToggle($event.checked)"
922
- i18n="@@ngx.dashboard.widgets.label.dialog.background"
923
- >
924
- Background
925
- </mat-slide-toggle>
926
- <span
927
- class="toggle-description"
928
- i18n="@@ngx.dashboard.widgets.label.dialog.backgroundDescription"
929
- >Adds a background behind the text</span
930
- >
931
- </div>
932
- </mat-dialog-content>
933
-
934
- <mat-dialog-actions align="end">
935
- <button
936
- mat-button
937
- (click)="onCancel()"
938
- i18n="@@ngx.dashboard.common.cancel"
939
- >
940
- Cancel
941
- </button>
942
- <button
943
- mat-flat-button
944
- (click)="save()"
945
- [disabled]="!hasChanged() || !isFormValid()"
946
- i18n="@@ngx.dashboard.common.save"
947
- >
948
- Save
949
- </button>
950
- </mat-dialog-actions>
698
+ MatSlideToggleModule
699
+ ], template: `
700
+ <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.label.dialog.title">
701
+ Label Settings
702
+ </h2>
703
+ <mat-dialog-content>
704
+ <mat-form-field appearance="outline" class="label-text-field">
705
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.labelText"
706
+ >Label Text</mat-label
707
+ >
708
+ <input
709
+ matInput
710
+ type="text"
711
+ [value]="label()"
712
+ (input)="label.set($any($event.target).value)"
713
+ i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.placeholder"
714
+ placeholder="Enter your label text..."
715
+ />
716
+ </mat-form-field>
717
+
718
+ <!-- Responsive Text Toggle -->
719
+ <div class="toggle-section">
720
+ <mat-slide-toggle
721
+ [checked]="responsive()"
722
+ (change)="responsive.set($event.checked)"
723
+ i18n="@@ngx.dashboard.widgets.label.dialog.responsive"
724
+ >
725
+ Responsive Text
726
+ </mat-slide-toggle>
727
+ <span
728
+ class="toggle-description"
729
+ i18n="@@ngx.dashboard.widgets.label.dialog.responsiveDescription"
730
+ >Automatically adjust text size to fit the widget</span
731
+ >
732
+ </div>
733
+
734
+ <!-- Responsive Font Size Constraints (only shown when responsive is enabled) -->
735
+ @if (responsive()) {
736
+ <div class="responsive-section">
737
+ <div
738
+ class="section-label"
739
+ i18n="@@ngx.dashboard.widgets.label.dialog.fontSizeLimits"
740
+ >
741
+ Font Size Limits
742
+ </div>
743
+ <div class="row-layout">
744
+ <mat-form-field appearance="outline">
745
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.minSize"
746
+ >Min Size (px)</mat-label
747
+ >
748
+ <input
749
+ matInput
750
+ type="number"
751
+ [value]="minFontSize()"
752
+ (input)="
753
+ validateAndCorrectMinFontSize(+$any($event.target).value)
754
+ "
755
+ (blur)="validateAndCorrectMinFontSize(minFontSize())"
756
+ min="8"
757
+ max="24"
758
+ placeholder="8"
759
+ />
760
+ @if (!isMinFontSizeValid() || !isFontSizeRangeValid()) {
761
+ <mat-error>
762
+ @if (!isMinFontSizeValid()) {
763
+ <span i18n="@@ngx.dashboard.widgets.label.dialog.minSizeError"
764
+ >Must be between 8-24px</span
765
+ >
766
+ } @else {
767
+ <span
768
+ i18n="@@ngx.dashboard.widgets.label.dialog.minSizeRangeError"
769
+ >Must be less than max size</span
770
+ >
771
+ }
772
+ </mat-error>
773
+ } @else {
774
+ <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.minSizeHint"
775
+ >8-24px range</mat-hint
776
+ >
777
+ }
778
+ </mat-form-field>
779
+
780
+ <mat-form-field appearance="outline">
781
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.maxSize"
782
+ >Max Size (px)</mat-label
783
+ >
784
+ <input
785
+ matInput
786
+ type="number"
787
+ [value]="maxFontSize()"
788
+ (input)="
789
+ validateAndCorrectMaxFontSize(+$any($event.target).value)
790
+ "
791
+ (blur)="validateAndCorrectMaxFontSize(maxFontSize())"
792
+ min="16"
793
+ max="128"
794
+ placeholder="64"
795
+ />
796
+ @if (!isMaxFontSizeValid() || !isFontSizeRangeValid()) {
797
+ <mat-error>
798
+ @if (!isMaxFontSizeValid()) {
799
+ <span i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeError"
800
+ >Must be between 16-128px</span
801
+ >
802
+ } @else {
803
+ <span
804
+ i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeRangeError"
805
+ >Must be greater than min size</span
806
+ >
807
+ }
808
+ </mat-error>
809
+ } @else {
810
+ <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeHint"
811
+ >16-128px range</mat-hint
812
+ >
813
+ }
814
+ </mat-form-field>
815
+ </div>
816
+
817
+ <!-- Template String field -->
818
+ <mat-form-field appearance="outline">
819
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.templateString"
820
+ >Template String</mat-label
821
+ >
822
+ <input
823
+ matInput
824
+ type="text"
825
+ [value]="templateString() || ''"
826
+ (input)="templateString.set($any($event.target).value || undefined)"
827
+ i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.templateStringPlaceholder"
828
+ placeholder="Optional: Text to use for size calculation"
829
+ />
830
+ <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.templateStringHint"
831
+ >Use when displayed text varies but size should remain consistent</mat-hint
832
+ >
833
+ </mat-form-field>
834
+ </div>
835
+ }
836
+
837
+ <div class="row-layout">
838
+ <mat-form-field appearance="outline">
839
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontSize"
840
+ >Font Size (px)</mat-label
841
+ >
842
+ <input
843
+ matInput
844
+ type="number"
845
+ [value]="fontSize()"
846
+ (input)="fontSize.set(+$any($event.target).value)"
847
+ [disabled]="responsive()"
848
+ min="8"
849
+ max="48"
850
+ placeholder="16"
851
+ />
852
+ </mat-form-field>
853
+
854
+ <mat-form-field appearance="outline">
855
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.alignment"
856
+ >Alignment</mat-label
857
+ >
858
+ <mat-select
859
+ [value]="alignment()"
860
+ (selectionChange)="alignment.set($any($event.value))"
861
+ >
862
+ <mat-option
863
+ value="left"
864
+ i18n="@@ngx.dashboard.widgets.label.dialog.alignment.left"
865
+ >Left</mat-option
866
+ >
867
+ <mat-option
868
+ value="center"
869
+ i18n="@@ngx.dashboard.widgets.label.dialog.alignment.center"
870
+ >Center</mat-option
871
+ >
872
+ <mat-option
873
+ value="right"
874
+ i18n="@@ngx.dashboard.widgets.label.dialog.alignment.right"
875
+ >Right</mat-option
876
+ >
877
+ </mat-select>
878
+ </mat-form-field>
879
+ </div>
880
+
881
+ <mat-form-field appearance="outline">
882
+ <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight"
883
+ >Font Weight</mat-label
884
+ >
885
+ <mat-select
886
+ [value]="fontWeight()"
887
+ (selectionChange)="fontWeight.set($any($event.value))"
888
+ >
889
+ <mat-option
890
+ value="normal"
891
+ i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.normal"
892
+ >Normal</mat-option
893
+ >
894
+ <mat-option
895
+ value="bold"
896
+ i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.bold"
897
+ >Bold</mat-option
898
+ >
899
+ </mat-select>
900
+ </mat-form-field>
901
+
902
+ <!-- Opacity Slider -->
903
+ <div class="slider-section">
904
+ <div
905
+ class="slider-label"
906
+ i18n="@@ngx.dashboard.widgets.label.dialog.opacity"
907
+ >
908
+ Opacity: {{ formatOpacity(opacity()) }}%
909
+ </div>
910
+ <mat-slider [min]="0.1" [max]="1" [step]="0.1">
911
+ <input matSliderThumb [(ngModel)]="opacity" />
912
+ </mat-slider>
913
+ </div>
914
+
915
+ <!-- Background Toggle -->
916
+ <div class="toggle-section">
917
+ <mat-slide-toggle
918
+ [checked]="!transparentBackground()"
919
+ (change)="onBackgroundToggle($event.checked)"
920
+ i18n="@@ngx.dashboard.widgets.label.dialog.background"
921
+ >
922
+ Background
923
+ </mat-slide-toggle>
924
+ <span
925
+ class="toggle-description"
926
+ i18n="@@ngx.dashboard.widgets.label.dialog.backgroundDescription"
927
+ >Adds a background behind the text</span
928
+ >
929
+ </div>
930
+ </mat-dialog-content>
931
+
932
+ <mat-dialog-actions align="end">
933
+ <button
934
+ mat-button
935
+ (click)="onCancel()"
936
+ i18n="@@ngx.dashboard.common.cancel"
937
+ >
938
+ Cancel
939
+ </button>
940
+ <button
941
+ mat-flat-button
942
+ (click)="save()"
943
+ [disabled]="!hasChanged() || !isFormValid()"
944
+ i18n="@@ngx.dashboard.common.save"
945
+ >
946
+ Save
947
+ </button>
948
+ </mat-dialog-actions>
951
949
  `, 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"] }]
952
950
  }] });
953
951
 
@@ -964,29 +962,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
964
962
  class ResponsiveTextDirective {
965
963
  /* ───────────────────────── Inputs with transforms ─────────────── */
966
964
  /** Minimum font-size in pixels (accessibility floor) */
967
- minFontSize = input(8, ...(ngDevMode ? [{ debugName: "minFontSize", transform: numberAttribute }] : [{ transform: numberAttribute }]));
965
+ minFontSize = input(8, { ...(ngDevMode ? { debugName: "minFontSize" } : {}), transform: numberAttribute });
968
966
  /** Maximum font-size in pixels (layout ceiling) */
969
- maxFontSize = input(512, ...(ngDevMode ? [{ debugName: "maxFontSize", transform: numberAttribute }] : [{ transform: numberAttribute }]));
967
+ maxFontSize = input(512, { ...(ngDevMode ? { debugName: "maxFontSize" } : {}), transform: numberAttribute });
970
968
  /**
971
969
  * Line-height: pass a multiplier (e.g. 1.1) or absolute px value.
972
970
  * For single-line text a multiplier < 10 is treated as unitless.
973
971
  */
974
- lineHeight = input(1.1, ...(ngDevMode ? [{ debugName: "lineHeight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
972
+ lineHeight = input(1.1, { ...(ngDevMode ? { debugName: "lineHeight" } : {}), transform: numberAttribute });
975
973
  /** Whether to observe text mutations after first render */
976
- observeMutations = input(true, ...(ngDevMode ? [{ debugName: "observeMutations", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
974
+ observeMutations = input(true, { ...(ngDevMode ? { debugName: "observeMutations" } : {}), transform: booleanAttribute });
977
975
  /** Debounce delay in ms for resize/mutation callbacks */
978
- debounceMs = input(16, ...(ngDevMode ? [{ debugName: "debounceMs", transform: numberAttribute }] : [{ transform: numberAttribute }]));
976
+ debounceMs = input(16, { ...(ngDevMode ? { debugName: "debounceMs" } : {}), transform: numberAttribute });
979
977
  /** Template string to use for size calculations instead of actual content */
980
978
  templateString = input(undefined, ...(ngDevMode ? [{ debugName: "templateString" }] : []));
981
979
  /* ───────────────────────── Private state ───────────────────────── */
982
980
  el = inject(ElementRef);
983
- zone = inject(NgZone);
984
981
  platformId = inject(PLATFORM_ID);
985
982
  destroyRef = inject(DestroyRef);
983
+ zone = inject(NgZone, { optional: true });
986
984
  // Canvas context - lazy initialization
987
985
  _ctx;
988
986
  get ctx() {
989
- if (!this._ctx) {
987
+ if (this._ctx === undefined) {
990
988
  const canvas = document.createElement('canvas');
991
989
  this._ctx = canvas.getContext('2d', {
992
990
  willReadFrequently: true,
@@ -1004,37 +1002,43 @@ class ResponsiveTextDirective {
1004
1002
  lastMaxW = 0;
1005
1003
  lastMaxH = 0;
1006
1004
  lastFontSize = 0;
1007
- isViewInitialized = false;
1005
+ isRendered = false;
1006
+ /** Run callback outside Angular zone if zone.js is present */
1007
+ runOutsideAngular(fn) {
1008
+ if (this.zone) {
1009
+ this.zone.runOutsideAngular(fn);
1010
+ }
1011
+ else {
1012
+ fn();
1013
+ }
1014
+ }
1008
1015
  constructor() {
1009
1016
  // Set up cleanup on component destruction using modern DestroyRef
1010
1017
  this.destroyRef.onDestroy(() => {
1011
1018
  this.cleanup();
1012
1019
  });
1020
+ // Initialize after first render (replaces ngAfterViewInit for zoneless)
1021
+ afterNextRender(() => {
1022
+ if (!isPlatformBrowser(this.platformId))
1023
+ return;
1024
+ this.isRendered = true;
1025
+ this.runOutsideAngular(() => {
1026
+ this.fit();
1027
+ this.observeResize();
1028
+ if (this.observeMutations()) {
1029
+ this.observeText();
1030
+ }
1031
+ });
1032
+ });
1013
1033
  // Watch for input changes and trigger refit
1014
1034
  effect(() => {
1015
1035
  // Access the signals to track them (triggers when they change)
1016
1036
  this.templateString();
1017
1037
  this.minFontSize();
1018
1038
  this.maxFontSize();
1019
- // Only trigger refit if directive is initialized and view is ready
1020
- if (this.isViewInitialized && isPlatformBrowser(this.platformId)) {
1021
- this.zone.runOutsideAngular(() => {
1022
- this.requestFit();
1023
- });
1024
- }
1025
- });
1026
- }
1027
- ngAfterViewInit() {
1028
- if (!isPlatformBrowser(this.platformId))
1029
- return;
1030
- // Mark as initialized for the effect to start watching
1031
- this.isViewInitialized = true;
1032
- // All observer callbacks run outside Angular's zone
1033
- this.zone.runOutsideAngular(() => {
1034
- this.fit();
1035
- this.observeResize();
1036
- if (this.observeMutations()) {
1037
- this.observeText();
1039
+ // Only trigger refit if directive is rendered
1040
+ if (this.isRendered && isPlatformBrowser(this.platformId)) {
1041
+ this.runOutsideAngular(() => this.requestFit());
1038
1042
  }
1039
1043
  });
1040
1044
  }
@@ -1126,6 +1130,10 @@ class ResponsiveTextDirective {
1126
1130
  calcFit(text, maxW, maxH, precision = 0.1) {
1127
1131
  if (maxW <= 0 || maxH <= 0)
1128
1132
  return this.minFontSize();
1133
+ // Fallback if canvas context unavailable
1134
+ const ctx = this.ctx;
1135
+ if (!ctx)
1136
+ return this.minFontSize();
1129
1137
  const computedStyle = getComputedStyle(this.el.nativeElement);
1130
1138
  const fontFamily = computedStyle.fontFamily || 'sans-serif';
1131
1139
  const fontWeight = computedStyle.fontWeight || '400';
@@ -1134,8 +1142,8 @@ class ResponsiveTextDirective {
1134
1142
  let bestFit = this.minFontSize();
1135
1143
  while (hi - lo > precision) {
1136
1144
  const mid = (hi + lo) / 2;
1137
- this.ctx.font = `${fontWeight} ${mid}px ${fontFamily}`;
1138
- const metrics = this.ctx.measureText(text);
1145
+ ctx.font = `${fontWeight} ${mid}px ${fontFamily}`;
1146
+ const metrics = ctx.measureText(text);
1139
1147
  const width = metrics.width;
1140
1148
  // Calculate height based on available metrics
1141
1149
  const height = this.calculateTextHeight(metrics, mid);
@@ -1218,14 +1226,13 @@ class ResponsiveTextDirective {
1218
1226
  // Clear canvas context
1219
1227
  this._ctx = undefined;
1220
1228
  }
1221
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResponsiveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1222
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.1", type: ResponsiveTextDirective, isStandalone: true, selector: "[libResponsiveText]", inputs: { minFontSize: { classPropertyName: "minFontSize", publicName: "minFontSize", isSignal: true, isRequired: false, transformFunction: null }, maxFontSize: { classPropertyName: "maxFontSize", publicName: "maxFontSize", isSignal: true, isRequired: false, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, observeMutations: { classPropertyName: "observeMutations", publicName: "observeMutations", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, 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 });
1229
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResponsiveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1230
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", 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 });
1223
1231
  }
1224
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
1232
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
1225
1233
  type: Directive,
1226
1234
  args: [{
1227
1235
  selector: '[libResponsiveText]',
1228
- standalone: true,
1229
1236
  host: {
1230
1237
  '[style.display]': '"block"',
1231
1238
  '[style.width]': '"100%"',
@@ -1233,7 +1240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
1233
1240
  '[style.overflow]': '"visible"',
1234
1241
  },
1235
1242
  }]
1236
- }], ctorParameters: () => [] });
1243
+ }], ctorParameters: () => [], propDecorators: { minFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFontSize", required: false }] }], maxFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFontSize", required: false }] }], lineHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineHeight", required: false }] }], observeMutations: [{ type: i0.Input, args: [{ isSignal: true, alias: "observeMutations", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], templateString: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateString", required: false }] }] } });
1237
1244
 
1238
1245
  // label-widget.component.ts
1239
1246
  class LabelWidgetComponent {
@@ -1299,57 +1306,57 @@ class LabelWidgetComponent {
1299
1306
  minFontSize = computed(() => this.state().minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : []));
1300
1307
  maxFontSize = computed(() => this.state().maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : []));
1301
1308
  templateString = computed(() => this.state().templateString, ...(ngDevMode ? [{ debugName: "templateString" }] : []));
1302
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1303
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LabelWidgetComponent, isStandalone: true, selector: "ngx-dashboard-label-widget", ngImport: i0, template: "@if (hasContent) {\r\n<div\r\n class=\"label-widget\"\r\n [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\r\n [style.--widget-opacity]=\"state().opacity\"\r\n [class.text-left]=\"state().alignment === 'left'\"\r\n [class.text-right]=\"state().alignment === 'right'\"\r\n [class.font-bold]=\"state().fontWeight === 'bold'\"\r\n [class.has-background]=\"state().hasBackground\"\r\n>\r\n @if (state().responsive) {\r\n <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\" [templateString]=\"templateString()\">{{ label }}</div>\r\n } @else {\r\n <div class=\"label-text\">{{ label }}</div>\r\n }\r\n</div>\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "directive", type: ResponsiveTextDirective, selector: "[libResponsiveText]", inputs: ["minFontSize", "maxFontSize", "lineHeight", "observeMutations", "debounceMs", "templateString"] }] });
1309
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LabelWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1310
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"] }] });
1304
1311
  }
1305
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelWidgetComponent, decorators: [{
1312
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LabelWidgetComponent, decorators: [{
1306
1313
  type: Component,
1307
- args: [{ selector: 'ngx-dashboard-label-widget', imports: [ResponsiveTextDirective], template: "@if (hasContent) {\r\n<div\r\n class=\"label-widget\"\r\n [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\r\n [style.--widget-opacity]=\"state().opacity\"\r\n [class.text-left]=\"state().alignment === 'left'\"\r\n [class.text-right]=\"state().alignment === 'right'\"\r\n [class.font-bold]=\"state().fontWeight === 'bold'\"\r\n [class.has-background]=\"state().hasBackground\"\r\n>\r\n @if (state().responsive) {\r\n <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\" [templateString]=\"templateString()\">{{ label }}</div>\r\n } @else {\r\n <div class=\"label-text\">{{ label }}</div>\r\n }\r\n</div>\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] }]
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"] }]
1308
1315
  }] });
1309
1316
 
1310
- const svgIcon$1 = `
1311
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" preserveAspectRatio="xMidYMid meet">
1312
- <use transform="matrix(-1,0,0,1,800,0)" href="#one-half" />
1313
- <g id="one-half">
1314
- <g id="one-fourth">
1315
- <path d="m400 40v107" stroke-width="26.7" stroke="currentColor" />
1316
- <g id="one-twelfth">
1317
- <path
1318
- d="m580 88.233-42.5 73.612"
1319
- stroke-width="26.7"
1320
- stroke="currentColor"
1321
- />
1322
- <g id="one-thirtieth">
1323
- <path
1324
- id="one-sixtieth"
1325
- d="m437.63 41.974-3.6585 34.808"
1326
- stroke-width="13.6"
1327
- stroke="currentColor"
1328
- />
1329
- <use transform="rotate(6 400 400)" href="#one-sixtieth" />
1330
- </g>
1331
- <use transform="rotate(12 400 400)" href="#one-thirtieth" />
1332
- </g>
1333
- <use transform="rotate(30 400 400)" href="#one-twelfth" />
1334
- <use transform="rotate(60 400 400)" href="#one-twelfth" />
1335
- </g>
1336
- <use transform="rotate(90 400 400)" href="#one-fourth" />
1337
- </g>
1338
- <path
1339
- class="clock-hour-hand"
1340
- id="anim-clock-hour-hand"
1341
- fill="currentColor"
1342
- d="m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z"
1343
- transform="rotate(110.2650694444, 400, 400)"
1344
- />
1345
- <path
1346
- class="clock-minute-hand"
1347
- id="anim-clock-minute-hand"
1348
- fill="currentColor"
1349
- d="M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z"
1350
- transform="rotate(243.1808333333, 400, 400)"
1351
- />
1352
- </svg>
1317
+ const svgIcon$1 = `
1318
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" preserveAspectRatio="xMidYMid meet">
1319
+ <use transform="matrix(-1,0,0,1,800,0)" href="#one-half" />
1320
+ <g id="one-half">
1321
+ <g id="one-fourth">
1322
+ <path d="m400 40v107" stroke-width="26.7" stroke="currentColor" />
1323
+ <g id="one-twelfth">
1324
+ <path
1325
+ d="m580 88.233-42.5 73.612"
1326
+ stroke-width="26.7"
1327
+ stroke="currentColor"
1328
+ />
1329
+ <g id="one-thirtieth">
1330
+ <path
1331
+ id="one-sixtieth"
1332
+ d="m437.63 41.974-3.6585 34.808"
1333
+ stroke-width="13.6"
1334
+ stroke="currentColor"
1335
+ />
1336
+ <use transform="rotate(6 400 400)" href="#one-sixtieth" />
1337
+ </g>
1338
+ <use transform="rotate(12 400 400)" href="#one-thirtieth" />
1339
+ </g>
1340
+ <use transform="rotate(30 400 400)" href="#one-twelfth" />
1341
+ <use transform="rotate(60 400 400)" href="#one-twelfth" />
1342
+ </g>
1343
+ <use transform="rotate(90 400 400)" href="#one-fourth" />
1344
+ </g>
1345
+ <path
1346
+ class="clock-hour-hand"
1347
+ id="anim-clock-hour-hand"
1348
+ fill="currentColor"
1349
+ d="m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z"
1350
+ transform="rotate(110.2650694444, 400, 400)"
1351
+ />
1352
+ <path
1353
+ class="clock-minute-hand"
1354
+ id="anim-clock-minute-hand"
1355
+ fill="currentColor"
1356
+ d="M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z"
1357
+ transform="rotate(243.1808333333, 400, 400)"
1358
+ />
1359
+ </svg>
1353
1360
  `;
1354
1361
 
1355
1362
  class ClockStateDialogComponent {
@@ -1381,254 +1388,253 @@ class ClockStateDialogComponent {
1381
1388
  showSeconds: this.showSeconds(),
1382
1389
  });
1383
1390
  }
1384
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ClockStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1385
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ClockStateDialogComponent, isStandalone: true, selector: "lib-clock-state-dialog", ngImport: i0, template: `
1386
- <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.clock.dialog.title">
1387
- Clock Settings
1388
- </h2>
1389
- <mat-dialog-content>
1390
- <div class="mode-selection">
1391
- <label
1392
- class="section-label"
1393
- for="mode-selection-group"
1394
- i18n="@@ngx.dashboard.widgets.clock.dialog.displayMode"
1395
- >Display Mode</label
1396
- >
1397
- <mat-radio-group
1398
- id="mode-selection-group"
1399
- [value]="mode()"
1400
- (change)="mode.set($any($event.value))"
1401
- >
1402
- <mat-radio-button
1403
- value="digital"
1404
- i18n="@@ngx.dashboard.widgets.clock.dialog.mode.digital"
1405
- >Digital</mat-radio-button
1406
- >
1407
- <mat-radio-button
1408
- value="analog"
1409
- i18n="@@ngx.dashboard.widgets.clock.dialog.mode.analog"
1410
- >Analog</mat-radio-button
1411
- >
1412
- </mat-radio-group>
1413
- </div>
1414
-
1415
- <!-- Time Format (only for digital mode) -->
1416
- @if (mode() === 'digital') {
1417
- <div class="format-selection">
1418
- <label
1419
- class="section-label"
1420
- for="time-format-group"
1421
- i18n="@@ngx.dashboard.widgets.clock.dialog.timeFormat"
1422
- >Time Format</label
1423
- >
1424
- <mat-radio-group
1425
- id="time-format-group"
1426
- [value]="timeFormat()"
1427
- (change)="timeFormat.set($any($event.value))"
1428
- >
1429
- <mat-radio-button
1430
- value="24h"
1431
- i18n="@@ngx.dashboard.widgets.clock.dialog.format.24h"
1432
- >24 Hour (14:30:45)</mat-radio-button
1433
- >
1434
- <mat-radio-button
1435
- value="12h"
1436
- i18n="@@ngx.dashboard.widgets.clock.dialog.format.12h"
1437
- >12 Hour (2:30:45 PM)</mat-radio-button
1438
- >
1439
- </mat-radio-group>
1440
- </div>
1441
- }
1442
-
1443
- <!-- Show Seconds Toggle (for both digital and analog modes) -->
1444
- <div class="toggle-section">
1445
- <mat-slide-toggle
1446
- [checked]="showSeconds()"
1447
- (change)="showSeconds.set($event.checked)"
1448
- i18n="@@ngx.dashboard.widgets.clock.dialog.showSeconds"
1449
- >
1450
- Show Seconds
1451
- </mat-slide-toggle>
1452
- <span class="toggle-description">
1453
- @if (mode() === 'digital') {
1454
- <span
1455
- i18n="
1456
- @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.digital"
1457
- >Display seconds in the time</span
1458
- >
1459
- } @else {
1460
- <span
1461
- i18n="
1462
- @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.analog"
1463
- >Show the second hand on the clock</span
1464
- >
1465
- }
1466
- </span>
1467
- </div>
1468
-
1469
- <!-- Background Toggle -->
1470
- <div class="toggle-section">
1471
- <mat-slide-toggle
1472
- [checked]="hasBackground()"
1473
- (change)="hasBackground.set($event.checked)"
1474
- i18n="@@ngx.dashboard.widgets.clock.dialog.background"
1475
- >
1476
- Background
1477
- </mat-slide-toggle>
1478
- <span
1479
- class="toggle-description"
1480
- i18n="@@ngx.dashboard.widgets.clock.dialog.backgroundDescription"
1481
- >Adds a background behind the clock</span
1482
- >
1483
- </div>
1484
- </mat-dialog-content>
1485
-
1486
- <mat-dialog-actions align="end">
1487
- <button
1488
- mat-button
1489
- (click)="onCancel()"
1490
- i18n="@@ngx.dashboard.common.cancel"
1491
- >
1492
- Cancel
1493
- </button>
1494
- <button
1495
- mat-flat-button
1496
- (click)="save()"
1497
- [disabled]="!hasChanged()"
1498
- i18n="@@ngx.dashboard.common.save"
1499
- >
1500
- Save
1501
- </button>
1502
- </mat-dialog-actions>
1503
- `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden}.mode-selection,.format-selection{margin-top:1rem;margin-bottom:2rem}.section-label{display:block;margin-bottom:.75rem;font-weight:500}mat-radio-group{display:flex;flex-direction:column;gap:.75rem}mat-radio-button{margin:0}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-description{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
1391
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClockStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1392
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClockStateDialogComponent, isStandalone: true, selector: "lib-clock-state-dialog", ngImport: i0, template: `
1393
+ <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.clock.dialog.title">
1394
+ Clock Settings
1395
+ </h2>
1396
+ <mat-dialog-content>
1397
+ <div class="mode-selection">
1398
+ <label
1399
+ class="section-label"
1400
+ for="mode-selection-group"
1401
+ i18n="@@ngx.dashboard.widgets.clock.dialog.displayMode"
1402
+ >Display Mode</label
1403
+ >
1404
+ <mat-radio-group
1405
+ id="mode-selection-group"
1406
+ [value]="mode()"
1407
+ (change)="mode.set($any($event.value))"
1408
+ >
1409
+ <mat-radio-button
1410
+ value="digital"
1411
+ i18n="@@ngx.dashboard.widgets.clock.dialog.mode.digital"
1412
+ >Digital</mat-radio-button
1413
+ >
1414
+ <mat-radio-button
1415
+ value="analog"
1416
+ i18n="@@ngx.dashboard.widgets.clock.dialog.mode.analog"
1417
+ >Analog</mat-radio-button
1418
+ >
1419
+ </mat-radio-group>
1420
+ </div>
1421
+
1422
+ <!-- Time Format (only for digital mode) -->
1423
+ @if (mode() === 'digital') {
1424
+ <div class="format-selection">
1425
+ <label
1426
+ class="section-label"
1427
+ for="time-format-group"
1428
+ i18n="@@ngx.dashboard.widgets.clock.dialog.timeFormat"
1429
+ >Time Format</label
1430
+ >
1431
+ <mat-radio-group
1432
+ id="time-format-group"
1433
+ [value]="timeFormat()"
1434
+ (change)="timeFormat.set($any($event.value))"
1435
+ >
1436
+ <mat-radio-button
1437
+ value="24h"
1438
+ i18n="@@ngx.dashboard.widgets.clock.dialog.format.24h"
1439
+ >24 Hour (14:30:45)</mat-radio-button
1440
+ >
1441
+ <mat-radio-button
1442
+ value="12h"
1443
+ i18n="@@ngx.dashboard.widgets.clock.dialog.format.12h"
1444
+ >12 Hour (2:30:45 PM)</mat-radio-button
1445
+ >
1446
+ </mat-radio-group>
1447
+ </div>
1448
+ }
1449
+
1450
+ <!-- Show Seconds Toggle (for both digital and analog modes) -->
1451
+ <div class="toggle-section">
1452
+ <mat-slide-toggle
1453
+ [checked]="showSeconds()"
1454
+ (change)="showSeconds.set($event.checked)"
1455
+ i18n="@@ngx.dashboard.widgets.clock.dialog.showSeconds"
1456
+ >
1457
+ Show Seconds
1458
+ </mat-slide-toggle>
1459
+ <span class="toggle-description">
1460
+ @if (mode() === 'digital') {
1461
+ <span
1462
+ i18n="
1463
+ @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.digital"
1464
+ >Display seconds in the time</span
1465
+ >
1466
+ } @else {
1467
+ <span
1468
+ i18n="
1469
+ @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.analog"
1470
+ >Show the second hand on the clock</span
1471
+ >
1472
+ }
1473
+ </span>
1474
+ </div>
1475
+
1476
+ <!-- Background Toggle -->
1477
+ <div class="toggle-section">
1478
+ <mat-slide-toggle
1479
+ [checked]="hasBackground()"
1480
+ (change)="hasBackground.set($event.checked)"
1481
+ i18n="@@ngx.dashboard.widgets.clock.dialog.background"
1482
+ >
1483
+ Background
1484
+ </mat-slide-toggle>
1485
+ <span
1486
+ class="toggle-description"
1487
+ i18n="@@ngx.dashboard.widgets.clock.dialog.backgroundDescription"
1488
+ >Adds a background behind the clock</span
1489
+ >
1490
+ </div>
1491
+ </mat-dialog-content>
1492
+
1493
+ <mat-dialog-actions align="end">
1494
+ <button
1495
+ mat-button
1496
+ (click)="onCancel()"
1497
+ i18n="@@ngx.dashboard.common.cancel"
1498
+ >
1499
+ Cancel
1500
+ </button>
1501
+ <button
1502
+ mat-flat-button
1503
+ (click)="save()"
1504
+ [disabled]="!hasChanged()"
1505
+ i18n="@@ngx.dashboard.common.save"
1506
+ >
1507
+ Save
1508
+ </button>
1509
+ </mat-dialog-actions>
1510
+ `, 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 });
1504
1511
  }
1505
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ClockStateDialogComponent, decorators: [{
1512
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClockStateDialogComponent, decorators: [{
1506
1513
  type: Component,
1507
- args: [{ selector: 'lib-clock-state-dialog', standalone: true, imports: [
1508
- CommonModule,
1514
+ args: [{ selector: 'lib-clock-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
1509
1515
  FormsModule,
1510
1516
  MatDialogModule,
1511
1517
  MatButtonModule,
1512
1518
  MatRadioModule,
1513
- MatSlideToggleModule,
1514
- ], template: `
1515
- <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.clock.dialog.title">
1516
- Clock Settings
1517
- </h2>
1518
- <mat-dialog-content>
1519
- <div class="mode-selection">
1520
- <label
1521
- class="section-label"
1522
- for="mode-selection-group"
1523
- i18n="@@ngx.dashboard.widgets.clock.dialog.displayMode"
1524
- >Display Mode</label
1525
- >
1526
- <mat-radio-group
1527
- id="mode-selection-group"
1528
- [value]="mode()"
1529
- (change)="mode.set($any($event.value))"
1530
- >
1531
- <mat-radio-button
1532
- value="digital"
1533
- i18n="@@ngx.dashboard.widgets.clock.dialog.mode.digital"
1534
- >Digital</mat-radio-button
1535
- >
1536
- <mat-radio-button
1537
- value="analog"
1538
- i18n="@@ngx.dashboard.widgets.clock.dialog.mode.analog"
1539
- >Analog</mat-radio-button
1540
- >
1541
- </mat-radio-group>
1542
- </div>
1543
-
1544
- <!-- Time Format (only for digital mode) -->
1545
- @if (mode() === 'digital') {
1546
- <div class="format-selection">
1547
- <label
1548
- class="section-label"
1549
- for="time-format-group"
1550
- i18n="@@ngx.dashboard.widgets.clock.dialog.timeFormat"
1551
- >Time Format</label
1552
- >
1553
- <mat-radio-group
1554
- id="time-format-group"
1555
- [value]="timeFormat()"
1556
- (change)="timeFormat.set($any($event.value))"
1557
- >
1558
- <mat-radio-button
1559
- value="24h"
1560
- i18n="@@ngx.dashboard.widgets.clock.dialog.format.24h"
1561
- >24 Hour (14:30:45)</mat-radio-button
1562
- >
1563
- <mat-radio-button
1564
- value="12h"
1565
- i18n="@@ngx.dashboard.widgets.clock.dialog.format.12h"
1566
- >12 Hour (2:30:45 PM)</mat-radio-button
1567
- >
1568
- </mat-radio-group>
1569
- </div>
1570
- }
1571
-
1572
- <!-- Show Seconds Toggle (for both digital and analog modes) -->
1573
- <div class="toggle-section">
1574
- <mat-slide-toggle
1575
- [checked]="showSeconds()"
1576
- (change)="showSeconds.set($event.checked)"
1577
- i18n="@@ngx.dashboard.widgets.clock.dialog.showSeconds"
1578
- >
1579
- Show Seconds
1580
- </mat-slide-toggle>
1581
- <span class="toggle-description">
1582
- @if (mode() === 'digital') {
1583
- <span
1584
- i18n="
1585
- @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.digital"
1586
- >Display seconds in the time</span
1587
- >
1588
- } @else {
1589
- <span
1590
- i18n="
1591
- @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.analog"
1592
- >Show the second hand on the clock</span
1593
- >
1594
- }
1595
- </span>
1596
- </div>
1597
-
1598
- <!-- Background Toggle -->
1599
- <div class="toggle-section">
1600
- <mat-slide-toggle
1601
- [checked]="hasBackground()"
1602
- (change)="hasBackground.set($event.checked)"
1603
- i18n="@@ngx.dashboard.widgets.clock.dialog.background"
1604
- >
1605
- Background
1606
- </mat-slide-toggle>
1607
- <span
1608
- class="toggle-description"
1609
- i18n="@@ngx.dashboard.widgets.clock.dialog.backgroundDescription"
1610
- >Adds a background behind the clock</span
1611
- >
1612
- </div>
1613
- </mat-dialog-content>
1614
-
1615
- <mat-dialog-actions align="end">
1616
- <button
1617
- mat-button
1618
- (click)="onCancel()"
1619
- i18n="@@ngx.dashboard.common.cancel"
1620
- >
1621
- Cancel
1622
- </button>
1623
- <button
1624
- mat-flat-button
1625
- (click)="save()"
1626
- [disabled]="!hasChanged()"
1627
- i18n="@@ngx.dashboard.common.save"
1628
- >
1629
- Save
1630
- </button>
1631
- </mat-dialog-actions>
1519
+ MatSlideToggleModule
1520
+ ], template: `
1521
+ <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.clock.dialog.title">
1522
+ Clock Settings
1523
+ </h2>
1524
+ <mat-dialog-content>
1525
+ <div class="mode-selection">
1526
+ <label
1527
+ class="section-label"
1528
+ for="mode-selection-group"
1529
+ i18n="@@ngx.dashboard.widgets.clock.dialog.displayMode"
1530
+ >Display Mode</label
1531
+ >
1532
+ <mat-radio-group
1533
+ id="mode-selection-group"
1534
+ [value]="mode()"
1535
+ (change)="mode.set($any($event.value))"
1536
+ >
1537
+ <mat-radio-button
1538
+ value="digital"
1539
+ i18n="@@ngx.dashboard.widgets.clock.dialog.mode.digital"
1540
+ >Digital</mat-radio-button
1541
+ >
1542
+ <mat-radio-button
1543
+ value="analog"
1544
+ i18n="@@ngx.dashboard.widgets.clock.dialog.mode.analog"
1545
+ >Analog</mat-radio-button
1546
+ >
1547
+ </mat-radio-group>
1548
+ </div>
1549
+
1550
+ <!-- Time Format (only for digital mode) -->
1551
+ @if (mode() === 'digital') {
1552
+ <div class="format-selection">
1553
+ <label
1554
+ class="section-label"
1555
+ for="time-format-group"
1556
+ i18n="@@ngx.dashboard.widgets.clock.dialog.timeFormat"
1557
+ >Time Format</label
1558
+ >
1559
+ <mat-radio-group
1560
+ id="time-format-group"
1561
+ [value]="timeFormat()"
1562
+ (change)="timeFormat.set($any($event.value))"
1563
+ >
1564
+ <mat-radio-button
1565
+ value="24h"
1566
+ i18n="@@ngx.dashboard.widgets.clock.dialog.format.24h"
1567
+ >24 Hour (14:30:45)</mat-radio-button
1568
+ >
1569
+ <mat-radio-button
1570
+ value="12h"
1571
+ i18n="@@ngx.dashboard.widgets.clock.dialog.format.12h"
1572
+ >12 Hour (2:30:45 PM)</mat-radio-button
1573
+ >
1574
+ </mat-radio-group>
1575
+ </div>
1576
+ }
1577
+
1578
+ <!-- Show Seconds Toggle (for both digital and analog modes) -->
1579
+ <div class="toggle-section">
1580
+ <mat-slide-toggle
1581
+ [checked]="showSeconds()"
1582
+ (change)="showSeconds.set($event.checked)"
1583
+ i18n="@@ngx.dashboard.widgets.clock.dialog.showSeconds"
1584
+ >
1585
+ Show Seconds
1586
+ </mat-slide-toggle>
1587
+ <span class="toggle-description">
1588
+ @if (mode() === 'digital') {
1589
+ <span
1590
+ i18n="
1591
+ @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.digital"
1592
+ >Display seconds in the time</span
1593
+ >
1594
+ } @else {
1595
+ <span
1596
+ i18n="
1597
+ @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.analog"
1598
+ >Show the second hand on the clock</span
1599
+ >
1600
+ }
1601
+ </span>
1602
+ </div>
1603
+
1604
+ <!-- Background Toggle -->
1605
+ <div class="toggle-section">
1606
+ <mat-slide-toggle
1607
+ [checked]="hasBackground()"
1608
+ (change)="hasBackground.set($event.checked)"
1609
+ i18n="@@ngx.dashboard.widgets.clock.dialog.background"
1610
+ >
1611
+ Background
1612
+ </mat-slide-toggle>
1613
+ <span
1614
+ class="toggle-description"
1615
+ i18n="@@ngx.dashboard.widgets.clock.dialog.backgroundDescription"
1616
+ >Adds a background behind the clock</span
1617
+ >
1618
+ </div>
1619
+ </mat-dialog-content>
1620
+
1621
+ <mat-dialog-actions align="end">
1622
+ <button
1623
+ mat-button
1624
+ (click)="onCancel()"
1625
+ i18n="@@ngx.dashboard.common.cancel"
1626
+ >
1627
+ Cancel
1628
+ </button>
1629
+ <button
1630
+ mat-flat-button
1631
+ (click)="save()"
1632
+ [disabled]="!hasChanged()"
1633
+ i18n="@@ngx.dashboard.common.save"
1634
+ >
1635
+ Save
1636
+ </button>
1637
+ </mat-dialog-actions>
1632
1638
  `, 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"] }]
1633
1639
  }] });
1634
1640
 
@@ -1695,18 +1701,18 @@ class DigitalClockComponent {
1695
1701
  this.#intervalId = null;
1696
1702
  }
1697
1703
  }
1698
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DigitalClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1699
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: DigitalClockComponent, isStandalone: true, selector: "lib-digital-clock", inputs: { timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-background": "hasBackground()", "class.show-pm": "timeFormat() === \"12h\"", "class.show-seconds": "showSeconds()" }, classAttribute: "clock-widget digital" }, ngImport: i0, template: "<div responsiveText class=\"digital-time\">{{ formattedTime() }}</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard);padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}:host.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px;color:var(--mat-sys-on-surface, #1f1f1f)}:host:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.digital-time{font-size:clamp(8px,min(20cqw,50cqh),200px);font-family:monospace;font-weight:500;letter-spacing:.05em;transition:color .2s ease}:host.show-pm.show-seconds .digital-time{font-size:clamp(8px,min(15cqw,50cqh),200px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1704
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DigitalClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1705
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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 });
1700
1706
  }
1701
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DigitalClockComponent, decorators: [{
1707
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DigitalClockComponent, decorators: [{
1702
1708
  type: Component,
1703
1709
  args: [{ selector: 'lib-digital-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
1704
1710
  '[class.has-background]': 'hasBackground()',
1705
1711
  '[class.show-pm]': 'timeFormat() === "12h"',
1706
1712
  '[class.show-seconds]': 'showSeconds()',
1707
1713
  class: 'clock-widget digital',
1708
- }, template: "<div responsiveText class=\"digital-time\">{{ formattedTime() }}</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard);padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}:host.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px;color:var(--mat-sys-on-surface, #1f1f1f)}:host:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.digital-time{font-size:clamp(8px,min(20cqw,50cqh),200px);font-family:monospace;font-weight:500;letter-spacing:.05em;transition:color .2s ease}:host.show-pm.show-seconds .digital-time{font-size:clamp(8px,min(15cqw,50cqh),200px)}\n"] }]
1709
- }], ctorParameters: () => [] });
1714
+ }, 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"] }]
1715
+ }], ctorParameters: () => [], propDecorators: { timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], hasBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackground", required: false }] }] } });
1710
1716
 
1711
1717
  class AnalogClockComponent {
1712
1718
  #destroyRef = inject(DestroyRef);
@@ -1783,17 +1789,17 @@ class AnalogClockComponent {
1783
1789
  this.#renderer.setAttribute(secondElement, 'transform', `rotate(${this.secondHandRotation()}, 400, 400)`);
1784
1790
  }
1785
1791
  }
1786
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1787
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.1", type: AnalogClockComponent, isStandalone: true, selector: "lib-analog-clock", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-background": "hasBackground()", "class.show-seconds": "showSeconds()" }, classAttribute: "clock-widget analog" }, viewQueries: [{ propertyName: "hourHand", first: true, predicate: ["hourHand"], descendants: true, isSignal: true }, { propertyName: "minuteHand", first: true, predicate: ["minuteHand"], descendants: true, isSignal: true }, { propertyName: "secondHand", first: true, predicate: ["secondHand"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"analog-clock-container\">\r\n <div class=\"aspect-ratio-box\">\r\n <svg\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 800 800\"\r\n preserveAspectRatio=\"xMidYMid meet\"\r\n >\r\n <!-- Optional face circle; uncomment if you want a visible outline by default -->\r\n <!-- <circle cx=\"400\" cy=\"400\" r=\"400\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"2\" /> -->\r\n\r\n <use transform=\"matrix(-1,0,0,1,800,0)\" href=\"#one-half\" />\r\n <g id=\"one-half\">\r\n <g id=\"one-fourth\">\r\n <!-- 12 / 3 / 6 / 9 heavy marks -->\r\n <path d=\"m400 40v107\" stroke-width=\"26.7\" stroke=\"currentColor\" />\r\n <g id=\"one-twelfth\">\r\n <!-- 30\u00B0 heavy marks -->\r\n <path\r\n d=\"m580 88.233-42.5 73.612\"\r\n stroke-width=\"26.7\"\r\n stroke=\"currentColor\"\r\n />\r\n <g id=\"one-thirtieth\">\r\n <!-- minute/second ticks -->\r\n <path\r\n id=\"one-sixtieth\"\r\n d=\"m437.63 41.974-3.6585 34.808\"\r\n stroke-width=\"13.6\"\r\n stroke=\"currentColor\"\r\n />\r\n <use transform=\"rotate(6 400 400)\" href=\"#one-sixtieth\" />\r\n </g>\r\n <use transform=\"rotate(12 400 400)\" href=\"#one-thirtieth\" />\r\n </g>\r\n <use transform=\"rotate(30 400 400)\" href=\"#one-twelfth\" />\r\n <use transform=\"rotate(60 400 400)\" href=\"#one-twelfth\" />\r\n </g>\r\n <use transform=\"rotate(90 400 400)\" href=\"#one-fourth\" />\r\n </g>\r\n\r\n <!-- Hands -->\r\n <path\r\n class=\"clock-hour-hand\"\r\n id=\"anim-clock-hour-hand\"\r\n #hourHand\r\n d=\"m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z\"\r\n transform=\"rotate(110.2650694444, 400, 400)\"\r\n />\r\n <path\r\n class=\"clock-minute-hand\"\r\n id=\"anim-clock-minute-hand\"\r\n #minuteHand\r\n d=\"M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z\"\r\n transform=\"rotate(243.1808333333, 400, 400)\"\r\n />\r\n <path\r\n class=\"clock-second-hand\"\r\n id=\"anim-clock-second-hand\"\r\n #secondHand\r\n d=\"M 397.317,63.51744 395.91962,168.4 C 374.575,170.5125 358.2,188.365 358.2,210 c 0,21.635 16.3,39 36.61214,41.47594 L 391.52847,498 h 16.94306 L 405.1868,251.47593 C 425.5,249 441.8,231.635 441.8,210 c 2e-5,-21.635 -16.375,-39.4875 -37.71971,-41.6 L 402.683,63.51744 400,60 Z M 400,190.534 c 10.888,0 19.466,8.866 19.466,19.466 0,10.6 -8.578,19.466 -19.466,19.466 -10.888,0 -19.466,-8.866 -19.466,-19.466 0,-10.6 8.578,-19.466 19.466,-19.466 z\"\r\n transform=\"rotate(190.85, 400, 400)\"\r\n />\r\n </svg>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}.analog-clock-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.analog-clock-container .aspect-ratio-box{position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:1/1}@supports not (aspect-ratio: 1/1){.analog-clock-container .aspect-ratio-box:before{content:\"\";display:block;padding-bottom:100%}.analog-clock-container .aspect-ratio-box svg{position:absolute;top:0;left:0;width:100%;height:100%}}.analog-clock-container .aspect-ratio-box svg{display:block;width:100%;height:100%}.analog-clock-container .aspect-ratio-box svg path:not(.clock-hour-hand):not(.clock-minute-hand):not(.clock-second-hand){stroke:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}:host:not(.show-seconds) .clock-second-hand{display:none}:host.has-background svg circle{fill:var(--mat-sys-surface, #fffbfe)}:host:hover{opacity:.8}:host:hover svg .clock-hour-hand,:host:hover svg .clock-minute-hand{fill:var(--mat-sys-primary, #6750a4)}:host.clock-widget.analog{container-type:size;container-name:analog-clock}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1792
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1793
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", 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 });
1788
1794
  }
1789
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: AnalogClockComponent, decorators: [{
1795
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AnalogClockComponent, decorators: [{
1790
1796
  type: Component,
1791
1797
  args: [{ selector: 'lib-analog-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
1792
1798
  '[class.has-background]': 'hasBackground()',
1793
1799
  '[class.show-seconds]': 'showSeconds()',
1794
1800
  'class': 'clock-widget analog'
1795
- }, template: "<div class=\"analog-clock-container\">\r\n <div class=\"aspect-ratio-box\">\r\n <svg\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 800 800\"\r\n preserveAspectRatio=\"xMidYMid meet\"\r\n >\r\n <!-- Optional face circle; uncomment if you want a visible outline by default -->\r\n <!-- <circle cx=\"400\" cy=\"400\" r=\"400\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"2\" /> -->\r\n\r\n <use transform=\"matrix(-1,0,0,1,800,0)\" href=\"#one-half\" />\r\n <g id=\"one-half\">\r\n <g id=\"one-fourth\">\r\n <!-- 12 / 3 / 6 / 9 heavy marks -->\r\n <path d=\"m400 40v107\" stroke-width=\"26.7\" stroke=\"currentColor\" />\r\n <g id=\"one-twelfth\">\r\n <!-- 30\u00B0 heavy marks -->\r\n <path\r\n d=\"m580 88.233-42.5 73.612\"\r\n stroke-width=\"26.7\"\r\n stroke=\"currentColor\"\r\n />\r\n <g id=\"one-thirtieth\">\r\n <!-- minute/second ticks -->\r\n <path\r\n id=\"one-sixtieth\"\r\n d=\"m437.63 41.974-3.6585 34.808\"\r\n stroke-width=\"13.6\"\r\n stroke=\"currentColor\"\r\n />\r\n <use transform=\"rotate(6 400 400)\" href=\"#one-sixtieth\" />\r\n </g>\r\n <use transform=\"rotate(12 400 400)\" href=\"#one-thirtieth\" />\r\n </g>\r\n <use transform=\"rotate(30 400 400)\" href=\"#one-twelfth\" />\r\n <use transform=\"rotate(60 400 400)\" href=\"#one-twelfth\" />\r\n </g>\r\n <use transform=\"rotate(90 400 400)\" href=\"#one-fourth\" />\r\n </g>\r\n\r\n <!-- Hands -->\r\n <path\r\n class=\"clock-hour-hand\"\r\n id=\"anim-clock-hour-hand\"\r\n #hourHand\r\n d=\"m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z\"\r\n transform=\"rotate(110.2650694444, 400, 400)\"\r\n />\r\n <path\r\n class=\"clock-minute-hand\"\r\n id=\"anim-clock-minute-hand\"\r\n #minuteHand\r\n d=\"M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z\"\r\n transform=\"rotate(243.1808333333, 400, 400)\"\r\n />\r\n <path\r\n class=\"clock-second-hand\"\r\n id=\"anim-clock-second-hand\"\r\n #secondHand\r\n d=\"M 397.317,63.51744 395.91962,168.4 C 374.575,170.5125 358.2,188.365 358.2,210 c 0,21.635 16.3,39 36.61214,41.47594 L 391.52847,498 h 16.94306 L 405.1868,251.47593 C 425.5,249 441.8,231.635 441.8,210 c 2e-5,-21.635 -16.375,-39.4875 -37.71971,-41.6 L 402.683,63.51744 400,60 Z M 400,190.534 c 10.888,0 19.466,8.866 19.466,19.466 0,10.6 -8.578,19.466 -19.466,19.466 -10.888,0 -19.466,-8.866 -19.466,-19.466 0,-10.6 8.578,-19.466 19.466,-19.466 z\"\r\n transform=\"rotate(190.85, 400, 400)\"\r\n />\r\n </svg>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}.analog-clock-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.analog-clock-container .aspect-ratio-box{position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:1/1}@supports not (aspect-ratio: 1/1){.analog-clock-container .aspect-ratio-box:before{content:\"\";display:block;padding-bottom:100%}.analog-clock-container .aspect-ratio-box svg{position:absolute;top:0;left:0;width:100%;height:100%}}.analog-clock-container .aspect-ratio-box svg{display:block;width:100%;height:100%}.analog-clock-container .aspect-ratio-box svg path:not(.clock-hour-hand):not(.clock-minute-hand):not(.clock-second-hand){stroke:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}:host:not(.show-seconds) .clock-second-hand{display:none}:host.has-background svg circle{fill:var(--mat-sys-surface, #fffbfe)}:host:hover{opacity:.8}:host:hover svg .clock-hour-hand,:host:hover svg .clock-minute-hand{fill:var(--mat-sys-primary, #6750a4)}:host.clock-widget.analog{container-type:size;container-name:analog-clock}\n"] }]
1796
- }], ctorParameters: () => [] });
1801
+ }, 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"] }]
1802
+ }], ctorParameters: () => [], propDecorators: { hasBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackground", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], hourHand: [{ type: i0.ViewChild, args: ['hourHand', { isSignal: true }] }], minuteHand: [{ type: i0.ViewChild, args: ['minuteHand', { isSignal: true }] }], secondHand: [{ type: i0.ViewChild, args: ['secondHand', { isSignal: true }] }] } });
1797
1803
 
1798
1804
  // clock-widget.component.ts
1799
1805
  class ClockWidgetComponent {
@@ -1848,12 +1854,12 @@ class ClockWidgetComponent {
1848
1854
  get isDigital() {
1849
1855
  return this.state().mode === 'digital';
1850
1856
  }
1851
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ClockWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1852
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ClockWidgetComponent, isStandalone: true, selector: "ngx-dashboard-clock-widget", ngImport: i0, template: "@if (isDigital) {\r\n <lib-digital-clock\r\n [timeFormat]=\"state().timeFormat || '24h'\"\r\n [showSeconds]=\"state().showSeconds ?? true\"\r\n [hasBackground]=\"state().hasBackground ?? false\"\r\n />\r\n} @else if (isAnalog) {\r\n <lib-analog-clock\r\n [hasBackground]=\"state().hasBackground ?? false\"\r\n [showSeconds]=\"state().showSeconds ?? true\"\r\n />\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.clock-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.clock-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.clock-widget{padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}.clock-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.clock-widget:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.analog-clock{width:min(80cqw,80cqh);aspect-ratio:1/1;position:relative}.clock-face{width:100%;height:100%;border:2px solid currentColor;border-radius:50%;position:relative}.clock-face:before,.clock-face:after{content:\"\";position:absolute;background-color:currentColor;left:50%;transform:translate(-50%)}.clock-face:before{width:2px;height:10%;top:0}.clock-face:after{width:2px;height:10%;bottom:0}.hour-hand,.minute-hand{position:absolute;background-color:currentColor;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px}.hour-hand{width:4px;height:25%;transform:translate(-50%) rotate(30deg)}.minute-hand{width:2px;height:35%;transform:translate(-50%) rotate(90deg)}.center-dot{position:absolute;width:8px;height:8px;background-color:currentColor;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-placeholder ::ng-deep svg .clock-face{stroke:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}.has-background .svg-placeholder ::ng-deep svg circle{fill:var(--mat-sys-surface, #fffbfe)}\n"], dependencies: [{ kind: "component", type: DigitalClockComponent, selector: "lib-digital-clock", inputs: ["timeFormat", "showSeconds", "hasBackground"] }, { kind: "component", type: AnalogClockComponent, selector: "lib-analog-clock", inputs: ["hasBackground", "showSeconds"] }] });
1857
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClockWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1858
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"] }] });
1853
1859
  }
1854
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ClockWidgetComponent, decorators: [{
1860
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClockWidgetComponent, decorators: [{
1855
1861
  type: Component,
1856
- args: [{ selector: 'ngx-dashboard-clock-widget', standalone: true, imports: [DigitalClockComponent, AnalogClockComponent], template: "@if (isDigital) {\r\n <lib-digital-clock\r\n [timeFormat]=\"state().timeFormat || '24h'\"\r\n [showSeconds]=\"state().showSeconds ?? true\"\r\n [hasBackground]=\"state().hasBackground ?? false\"\r\n />\r\n} @else if (isAnalog) {\r\n <lib-analog-clock\r\n [hasBackground]=\"state().hasBackground ?? false\"\r\n [showSeconds]=\"state().showSeconds ?? true\"\r\n />\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.clock-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.clock-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.clock-widget{padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}.clock-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.clock-widget:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.analog-clock{width:min(80cqw,80cqh);aspect-ratio:1/1;position:relative}.clock-face{width:100%;height:100%;border:2px solid currentColor;border-radius:50%;position:relative}.clock-face:before,.clock-face:after{content:\"\";position:absolute;background-color:currentColor;left:50%;transform:translate(-50%)}.clock-face:before{width:2px;height:10%;top:0}.clock-face:after{width:2px;height:10%;bottom:0}.hour-hand,.minute-hand{position:absolute;background-color:currentColor;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px}.hour-hand{width:4px;height:25%;transform:translate(-50%) rotate(30deg)}.minute-hand{width:2px;height:35%;transform:translate(-50%) rotate(90deg)}.center-dot{position:absolute;width:8px;height:8px;background-color:currentColor;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-placeholder ::ng-deep svg .clock-face{stroke:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}.has-background .svg-placeholder ::ng-deep svg circle{fill:var(--mat-sys-surface, #fffbfe)}\n"] }]
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"] }]
1857
1863
  }], ctorParameters: () => [] });
1858
1864
 
1859
1865
  /**
@@ -2414,12 +2420,12 @@ class RadialGaugeComponent {
2414
2420
  const semicircumference = Math.PI * r;
2415
2421
  return 180 * this.clamp(px / semicircumference, 0, 1);
2416
2422
  }
2417
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2418
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RadialGaugeComponent, isStandalone: true, selector: "ngx-radial-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, segmentGapPx: { classPropertyName: "segmentGapPx", publicName: "segmentGapPx", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fitToContainer: { classPropertyName: "fitToContainer", publicName: "fitToContainer", isSignal: true, isRequired: false, transformFunction: null }, containerPadding: { classPropertyName: "containerPadding", publicName: "containerPadding", isSignal: true, isRequired: false, transformFunction: null }, responsiveMode: { classPropertyName: "responsiveMode", publicName: "responsiveMode", isSignal: true, isRequired: false, transformFunction: null }, sizeToThicknessRatio: { classPropertyName: "sizeToThicknessRatio", publicName: "sizeToThicknessRatio", isSignal: true, isRequired: false, transformFunction: null }, responsiveProportions: { classPropertyName: "responsiveProportions", publicName: "responsiveProportions", isSignal: true, isRequired: false, transformFunction: null }, outerThickness: { classPropertyName: "outerThickness", publicName: "outerThickness", isSignal: true, isRequired: false, transformFunction: null }, innerThickness: { classPropertyName: "innerThickness", publicName: "innerThickness", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, labelReference: { classPropertyName: "labelReference", publicName: "labelReference", isSignal: true, isRequired: false, transformFunction: null }, referenceGlyph: { classPropertyName: "referenceGlyph", publicName: "referenceGlyph", isSignal: true, isRequired: false, transformFunction: null }, labelPadding: { classPropertyName: "labelPadding", publicName: "labelPadding", isSignal: true, isRequired: false, transformFunction: null }, baselineSafety: { classPropertyName: "baselineSafety", publicName: "baselineSafety", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "clampedValue()", "attr.aria-valuetext": "formattedLabel()", "attr.aria-labelledby": "titleId", "attr.aria-describedby": "descId", "class.fit-container": "fitToContainer()", "class.has-background": "hasBackground()" } }, viewQueries: [{ propertyName: "valueTextEl", first: true, predicate: ["valueText"], descendants: true, isSignal: true }, { propertyName: "valueGroupEl", first: true, predicate: ["valueGroup"], descendants: true, isSignal: true }, { propertyName: "refTextEl", first: true, predicate: ["refText"], descendants: true, isSignal: true }], ngImport: i0, template: "@let w = svgWidth(); @let h = svgHeight(); @let cy = centerY(); @let pct =\r\npercent();\r\n\r\n<svg\r\n [attr.width]=\"fitToContainer() ? null : w\"\r\n [attr.height]=\"fitToContainer() ? null : h\"\r\n [attr.viewBox]=\"'0 0 ' + w + ' ' + h\"\r\n [class.responsive]=\"fitToContainer()\"\r\n class=\"gauge-svg\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n <title [attr.id]=\"titleId\">{{ title() }}</title>\r\n @if (description()) {\r\n <desc [attr.id]=\"descId\">{{ description() }}</desc>\r\n }\r\n\r\n <defs>\r\n <clipPath [attr.id]=\"clipId\">\r\n <!-- Give a tiny extra room equal to half of the outer stroke to avoid anti-alias cutoff at the baseline -->\r\n <rect\r\n x=\"0\"\r\n y=\"0\"\r\n [attr.width]=\"w\"\r\n [attr.height]=\"cy + effectiveOuterThickness() / 2\"\r\n />\r\n </clipPath>\r\n </defs>\r\n\r\n <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\r\n <path\r\n [attr.d]=\"backgroundArcPath()\"\r\n pathLength=\"100\"\r\n fill=\"none\"\r\n class=\"gauge-background\"\r\n [attr.stroke-width]=\"effectiveOuterThickness()\"\r\n stroke-linecap=\"butt\"\r\n />\r\n\r\n <path\r\n [attr.d]=\"backgroundArcPath()\"\r\n pathLength=\"100\"\r\n fill=\"none\"\r\n class=\"gauge-value\"\r\n [attr.stroke]=\"valueColor()\"\r\n [attr.stroke-width]=\"effectiveOuterThickness()\"\r\n stroke-linecap=\"butt\"\r\n [attr.stroke-dasharray]=\"pct + ' 100'\"\r\n />\r\n\r\n @for (segment of segmentPaths(); track segment.path) {\r\n <path\r\n [attr.d]=\"segment.path\"\r\n fill=\"none\"\r\n [attr.stroke]=\"segment.color\"\r\n [attr.stroke-width]=\"effectiveInnerThickness()\"\r\n stroke-linecap=\"butt\"\r\n class=\"gauge-segment\"\r\n />\r\n }\r\n </g>\r\n\r\n @if (showValueLabel()) {\r\n <g #valueGroup [attr.transform]=\"valueTransform()\">\r\n <text\r\n #valueText\r\n class=\"gauge-value-text\"\r\n x=\"0\"\r\n y=\"0\"\r\n text-anchor=\"middle\"\r\n alignment-baseline=\"baseline\"\r\n dy=\"-0.75\"\r\n >\r\n {{ formattedLabel() }}\r\n </text>\r\n </g>\r\n }\r\n\r\n <!-- Hidden reference text used ONLY for width measurement -->\r\n <g style=\"visibility: hidden; pointer-events: none\" aria-hidden=\"true\">\r\n <text\r\n #refText\r\n x=\"0\"\r\n y=\"0\"\r\n text-anchor=\"start\"\r\n dominant-baseline=\"alphabetic\"\r\n >\r\n {{ referenceString() }}\r\n </text>\r\n </g>\r\n</svg>\r\n", styles: [":host{display:block;--gauge-outer-bg: var(--mat-sys-surface-variant, #e0e0e0);--gauge-value-good: var(--mat-sys-tertiary, #10b981);--gauge-value-warning: var(--mat-sys-secondary, #f59e0b);--gauge-value-critical: var(--mat-sys-error, #dc2626)}:host.fit-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.gauge-svg{display:block;margin-inline:auto;max-width:100%;height:auto;shape-rendering:geometricPrecision}.gauge-svg.responsive{max-width:100%;max-height:100%;width:auto;height:auto}.gauge-background{stroke:var(--gauge-outer-bg);transition:stroke .2s ease}.gauge-value{transition:stroke-dasharray .2s ease,stroke .2s ease}.gauge-segment{transition:stroke .2s ease;opacity:.9}.gauge-segment:hover{opacity:1}@media (prefers-reduced-motion: reduce){.gauge-value,.gauge-segment{transition:none}}@media (prefers-contrast: high){.gauge-background{stroke-width:2;stroke:var(--mat-sys-outline, #000000)}.gauge-segment{opacity:1}}@media (prefers-color-scheme: dark){:host{--gauge-outer-bg: #374151}}.gauge-value-text{fill:var(--mat-sys-on-surface-variant, #6c757d);font-family:var(--mat-sys-typescale-body-large-font, \"Roboto\", sans-serif);font-weight:var(--mat-sys-typescale-body-large-weight, 400);transition:fill var(--mat-sys-motion-duration-short2, .2s) var(--mat-sys-motion-easing-standard, ease)}:host.has-background .gauge-value-text{fill:var(--mat-sys-on-surface, #1f1f1f)}:host:hover .gauge-value-text{fill:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2423
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RadialGaugeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2424
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 });
2419
2425
  }
2420
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeComponent, decorators: [{
2426
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RadialGaugeComponent, decorators: [{
2421
2427
  type: Component,
2422
- args: [{ selector: 'ngx-radial-gauge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
2428
+ args: [{ selector: 'ngx-radial-gauge', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
2423
2429
  role: 'meter',
2424
2430
  '[attr.aria-label]': 'ariaLabel()',
2425
2431
  '[attr.aria-valuemin]': 'min()',
@@ -2430,43 +2436,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
2430
2436
  '[attr.aria-describedby]': 'descId',
2431
2437
  '[class.fit-container]': 'fitToContainer()',
2432
2438
  '[class.has-background]': 'hasBackground()',
2433
- }, template: "@let w = svgWidth(); @let h = svgHeight(); @let cy = centerY(); @let pct =\r\npercent();\r\n\r\n<svg\r\n [attr.width]=\"fitToContainer() ? null : w\"\r\n [attr.height]=\"fitToContainer() ? null : h\"\r\n [attr.viewBox]=\"'0 0 ' + w + ' ' + h\"\r\n [class.responsive]=\"fitToContainer()\"\r\n class=\"gauge-svg\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n <title [attr.id]=\"titleId\">{{ title() }}</title>\r\n @if (description()) {\r\n <desc [attr.id]=\"descId\">{{ description() }}</desc>\r\n }\r\n\r\n <defs>\r\n <clipPath [attr.id]=\"clipId\">\r\n <!-- Give a tiny extra room equal to half of the outer stroke to avoid anti-alias cutoff at the baseline -->\r\n <rect\r\n x=\"0\"\r\n y=\"0\"\r\n [attr.width]=\"w\"\r\n [attr.height]=\"cy + effectiveOuterThickness() / 2\"\r\n />\r\n </clipPath>\r\n </defs>\r\n\r\n <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\r\n <path\r\n [attr.d]=\"backgroundArcPath()\"\r\n pathLength=\"100\"\r\n fill=\"none\"\r\n class=\"gauge-background\"\r\n [attr.stroke-width]=\"effectiveOuterThickness()\"\r\n stroke-linecap=\"butt\"\r\n />\r\n\r\n <path\r\n [attr.d]=\"backgroundArcPath()\"\r\n pathLength=\"100\"\r\n fill=\"none\"\r\n class=\"gauge-value\"\r\n [attr.stroke]=\"valueColor()\"\r\n [attr.stroke-width]=\"effectiveOuterThickness()\"\r\n stroke-linecap=\"butt\"\r\n [attr.stroke-dasharray]=\"pct + ' 100'\"\r\n />\r\n\r\n @for (segment of segmentPaths(); track segment.path) {\r\n <path\r\n [attr.d]=\"segment.path\"\r\n fill=\"none\"\r\n [attr.stroke]=\"segment.color\"\r\n [attr.stroke-width]=\"effectiveInnerThickness()\"\r\n stroke-linecap=\"butt\"\r\n class=\"gauge-segment\"\r\n />\r\n }\r\n </g>\r\n\r\n @if (showValueLabel()) {\r\n <g #valueGroup [attr.transform]=\"valueTransform()\">\r\n <text\r\n #valueText\r\n class=\"gauge-value-text\"\r\n x=\"0\"\r\n y=\"0\"\r\n text-anchor=\"middle\"\r\n alignment-baseline=\"baseline\"\r\n dy=\"-0.75\"\r\n >\r\n {{ formattedLabel() }}\r\n </text>\r\n </g>\r\n }\r\n\r\n <!-- Hidden reference text used ONLY for width measurement -->\r\n <g style=\"visibility: hidden; pointer-events: none\" aria-hidden=\"true\">\r\n <text\r\n #refText\r\n x=\"0\"\r\n y=\"0\"\r\n text-anchor=\"start\"\r\n dominant-baseline=\"alphabetic\"\r\n >\r\n {{ referenceString() }}\r\n </text>\r\n </g>\r\n</svg>\r\n", styles: [":host{display:block;--gauge-outer-bg: var(--mat-sys-surface-variant, #e0e0e0);--gauge-value-good: var(--mat-sys-tertiary, #10b981);--gauge-value-warning: var(--mat-sys-secondary, #f59e0b);--gauge-value-critical: var(--mat-sys-error, #dc2626)}:host.fit-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.gauge-svg{display:block;margin-inline:auto;max-width:100%;height:auto;shape-rendering:geometricPrecision}.gauge-svg.responsive{max-width:100%;max-height:100%;width:auto;height:auto}.gauge-background{stroke:var(--gauge-outer-bg);transition:stroke .2s ease}.gauge-value{transition:stroke-dasharray .2s ease,stroke .2s ease}.gauge-segment{transition:stroke .2s ease;opacity:.9}.gauge-segment:hover{opacity:1}@media (prefers-reduced-motion: reduce){.gauge-value,.gauge-segment{transition:none}}@media (prefers-contrast: high){.gauge-background{stroke-width:2;stroke:var(--mat-sys-outline, #000000)}.gauge-segment{opacity:1}}@media (prefers-color-scheme: dark){:host{--gauge-outer-bg: #374151}}.gauge-value-text{fill:var(--mat-sys-on-surface-variant, #6c757d);font-family:var(--mat-sys-typescale-body-large-font, \"Roboto\", sans-serif);font-weight:var(--mat-sys-typescale-body-large-weight, 400);transition:fill var(--mat-sys-motion-duration-short2, .2s) var(--mat-sys-motion-easing-standard, ease)}:host.has-background .gauge-value-text{fill:var(--mat-sys-on-surface, #1f1f1f)}:host:hover .gauge-value-text{fill:var(--mat-sys-primary, #6750a4)}\n"] }]
2434
- }], ctorParameters: () => [] });
2439
+ }, 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"] }]
2440
+ }], ctorParameters: () => [], propDecorators: { valueTextEl: [{ type: i0.ViewChild, args: ['valueText', { isSignal: true }] }], valueGroupEl: [{ type: i0.ViewChild, args: ['valueGroup', { isSignal: true }] }], refTextEl: [{ type: i0.ViewChild, args: ['refText', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], segmentGapPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "segmentGapPx", required: false }] }], hasBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackground", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fitToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToContainer", required: false }] }], containerPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerPadding", required: false }] }], responsiveMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveMode", required: false }] }], sizeToThicknessRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeToThicknessRatio", required: false }] }], responsiveProportions: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveProportions", required: false }] }], outerThickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "outerThickness", required: false }] }], innerThickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerThickness", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], labelReference: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelReference", required: false }] }], referenceGlyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceGlyph", required: false }] }], labelPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPadding", required: false }] }], baselineSafety: [{ type: i0.Input, args: [{ isSignal: true, alias: "baselineSafety", required: false }] }] } });
2435
2441
 
2436
2442
  // radial-gauge-widget.metadata.ts
2437
- const svgIcon = `
2438
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 55" fill="currentColor">
2439
- <defs>
2440
- <clipPath id="gauge-clip"><rect x="0" y="0" width="100" height="52"/></clipPath>
2441
-
2442
- <!-- Outer arc geometry (radius 40, stroke 8) -->
2443
- <path id="outerArc" d="M 10 50 A 40 40 0 0 1 90 50" pathLength="100"/>
2444
-
2445
- <!-- Inner arc geometry (radius 31) -->
2446
- <path id="innerArc" d="M 19 50 A 31 31 0 0 1 81 50" pathLength="100"/>
2447
- </defs>
2448
-
2449
- <g clip-path="url(#gauge-clip)" stroke="currentColor" fill="none" stroke-linecap="butt">
2450
- <!-- Outer background arc -->
2451
- <use href="#outerArc" stroke-width="8" opacity="0.2"/>
2452
-
2453
- <!-- Value arc: 65% -->
2454
- <use href="#outerArc" stroke-width="8" stroke-dasharray="65 100"/>
2455
-
2456
- <!-- Inner legend segments (single geometry with dash windows) -->
2457
- <!-- 0–60% -->
2458
- <use href="#innerArc" stroke-width="4" opacity="0.2"
2459
- stroke-dasharray="60 100" stroke-dashoffset="0"/>
2460
- <!-- 60–80% -->
2461
- <use href="#innerArc" stroke-width="4" opacity="0.4"
2462
- stroke-dasharray="20 100" stroke-dashoffset="60"/>
2463
- <!-- 0–100% (full half-circle), same color as value arc -->
2464
- <use href="#innerArc" stroke-width="4"
2465
- stroke-dasharray="100 100" stroke-dashoffset="0"/>
2466
- <!-- (Alternatively, you can omit dash attributes entirely on this one:
2467
- <use href="#innerArc" stroke-width="4"/> ) -->
2468
- </g>
2469
- </svg>
2443
+ const svgIcon = `
2444
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 55" fill="currentColor">
2445
+ <defs>
2446
+ <clipPath id="gauge-clip"><rect x="0" y="0" width="100" height="52"/></clipPath>
2447
+
2448
+ <!-- Outer arc geometry (radius 40, stroke 8) -->
2449
+ <path id="outerArc" d="M 10 50 A 40 40 0 0 1 90 50" pathLength="100"/>
2450
+
2451
+ <!-- Inner arc geometry (radius 31) -->
2452
+ <path id="innerArc" d="M 19 50 A 31 31 0 0 1 81 50" pathLength="100"/>
2453
+ </defs>
2454
+
2455
+ <g clip-path="url(#gauge-clip)" stroke="currentColor" fill="none" stroke-linecap="butt">
2456
+ <!-- Outer background arc -->
2457
+ <use href="#outerArc" stroke-width="8" opacity="0.2"/>
2458
+
2459
+ <!-- Value arc: 65% -->
2460
+ <use href="#outerArc" stroke-width="8" stroke-dasharray="65 100"/>
2461
+
2462
+ <!-- Inner legend segments (single geometry with dash windows) -->
2463
+ <!-- 0–60% -->
2464
+ <use href="#innerArc" stroke-width="4" opacity="0.2"
2465
+ stroke-dasharray="60 100" stroke-dashoffset="0"/>
2466
+ <!-- 60–80% -->
2467
+ <use href="#innerArc" stroke-width="4" opacity="0.4"
2468
+ stroke-dasharray="20 100" stroke-dashoffset="60"/>
2469
+ <!-- 0–100% (full half-circle), same color as value arc -->
2470
+ <use href="#innerArc" stroke-width="4"
2471
+ stroke-dasharray="100 100" stroke-dashoffset="0"/>
2472
+ <!-- (Alternatively, you can omit dash attributes entirely on this one:
2473
+ <use href="#innerArc" stroke-width="4"/> ) -->
2474
+ </g>
2475
+ </svg>
2470
2476
  `;
2471
2477
 
2472
2478
  class RadialGaugeStateDialogComponent {
@@ -2485,232 +2491,231 @@ class RadialGaugeStateDialogComponent {
2485
2491
  onSave() {
2486
2492
  this.dialogRef.close(this.localState);
2487
2493
  }
2488
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2489
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: RadialGaugeStateDialogComponent, isStandalone: true, selector: "lib-radial-gauge-state-dialog", ngImport: i0, template: `
2490
- <h2
2491
- mat-dialog-title
2492
- i18n="@@ngx.dashboard.widgets.radialGauge.dialog.title"
2493
- >
2494
- Radial Gauge Settings
2495
- </h2>
2496
- <mat-dialog-content>
2497
- <mat-form-field>
2498
- <mat-label i18n="@@ngx.dashboard.widgets.radialGauge.dialog.value"
2499
- >Value (0-100)</mat-label
2500
- >
2501
- <input
2502
- matInput
2503
- type="number"
2504
- [(ngModel)]="localState.value"
2505
- min="0"
2506
- max="100"
2507
- />
2508
- </mat-form-field>
2509
-
2510
- <div class="section">
2511
- <h4 i18n="@@ngx.dashboard.widgets.radialGauge.dialog.colorProfile">
2512
- Color Profile
2513
- </h4>
2514
- <mat-radio-group [(ngModel)]="localState.colorProfile">
2515
- <mat-radio-button
2516
- value="dynamic"
2517
- i18n="
2518
- @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.dynamic"
2519
- >Dynamic (Theme Colors)</mat-radio-button
2520
- >
2521
- <mat-radio-button
2522
- value="static"
2523
- i18n="
2524
- @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.static"
2525
- >Static (Performance Colors)</mat-radio-button
2526
- >
2527
- </mat-radio-group>
2528
- </div>
2529
-
2530
- <div class="toggle-section">
2531
- <mat-slide-toggle
2532
- [(ngModel)]="localState.active"
2533
- i18n="@@ngx.dashboard.widgets.radialGauge.dialog.activeDisplay"
2534
- >
2535
- Active Display
2536
- </mat-slide-toggle>
2537
- <p
2538
- class="toggle-description"
2539
- i18n="
2540
- @@ngx.dashboard.widgets.radialGauge.dialog.activeDisplayDescription"
2541
- >
2542
- Display live gauge instead of passive icon
2543
- </p>
2544
- </div>
2545
-
2546
- <div class="toggle-section">
2547
- <mat-slide-toggle
2548
- [(ngModel)]="localState.hasBackground"
2549
- i18n="@@ngx.dashboard.widgets.radialGauge.dialog.background"
2550
- >
2551
- Background
2552
- </mat-slide-toggle>
2553
- <p
2554
- class="toggle-description"
2555
- i18n="
2556
- @@ngx.dashboard.widgets.radialGauge.dialog.backgroundDescription"
2557
- >
2558
- Add a background color to the widget
2559
- </p>
2560
- </div>
2561
-
2562
- <div class="toggle-section">
2563
- <mat-slide-toggle
2564
- [(ngModel)]="localState.showValueLabel"
2565
- i18n="@@ngx.dashboard.widgets.radialGauge.dialog.showValueLabel"
2566
- >
2567
- Show Value Label
2568
- </mat-slide-toggle>
2569
- <p
2570
- class="toggle-description"
2571
- i18n="
2572
- @@ngx.dashboard.widgets.radialGauge.dialog.showValueLabelDescription"
2573
- >
2574
- Display numeric value in gauge center
2575
- </p>
2576
- </div>
2577
- </mat-dialog-content>
2578
-
2579
- <mat-dialog-actions align="end">
2580
- <button
2581
- mat-button
2582
- (click)="onCancel()"
2583
- i18n="@@ngx.dashboard.common.cancel"
2584
- >
2585
- Cancel
2586
- </button>
2587
- <button
2588
- mat-flat-button
2589
- (click)="onSave()"
2590
- i18n="@@ngx.dashboard.common.save"
2591
- >
2592
- Save
2593
- </button>
2594
- </mat-dialog-actions>
2595
- `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden}mat-form-field{width:100%;display:block;margin-bottom:1rem}.section{margin-bottom:1.5rem}.section h4{margin:0 0 .5rem;font-size:.875rem;font-weight:500;color:var(--mat-sys-on-surface, #1f1f1f)}mat-radio-group{display:flex;flex-direction:column;gap:.5rem}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-description{margin:0;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
2494
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RadialGaugeStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2495
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RadialGaugeStateDialogComponent, isStandalone: true, selector: "lib-radial-gauge-state-dialog", ngImport: i0, template: `
2496
+ <h2
2497
+ mat-dialog-title
2498
+ i18n="@@ngx.dashboard.widgets.radialGauge.dialog.title"
2499
+ >
2500
+ Radial Gauge Settings
2501
+ </h2>
2502
+ <mat-dialog-content>
2503
+ <mat-form-field>
2504
+ <mat-label i18n="@@ngx.dashboard.widgets.radialGauge.dialog.value"
2505
+ >Value (0-100)</mat-label
2506
+ >
2507
+ <input
2508
+ matInput
2509
+ type="number"
2510
+ [(ngModel)]="localState.value"
2511
+ min="0"
2512
+ max="100"
2513
+ />
2514
+ </mat-form-field>
2515
+
2516
+ <div class="section">
2517
+ <h4 i18n="@@ngx.dashboard.widgets.radialGauge.dialog.colorProfile">
2518
+ Color Profile
2519
+ </h4>
2520
+ <mat-radio-group [(ngModel)]="localState.colorProfile">
2521
+ <mat-radio-button
2522
+ value="dynamic"
2523
+ i18n="
2524
+ @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.dynamic"
2525
+ >Dynamic (Theme Colors)</mat-radio-button
2526
+ >
2527
+ <mat-radio-button
2528
+ value="static"
2529
+ i18n="
2530
+ @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.static"
2531
+ >Static (Performance Colors)</mat-radio-button
2532
+ >
2533
+ </mat-radio-group>
2534
+ </div>
2535
+
2536
+ <div class="toggle-section">
2537
+ <mat-slide-toggle
2538
+ [(ngModel)]="localState.active"
2539
+ i18n="@@ngx.dashboard.widgets.radialGauge.dialog.activeDisplay"
2540
+ >
2541
+ Active Display
2542
+ </mat-slide-toggle>
2543
+ <p
2544
+ class="toggle-description"
2545
+ i18n="
2546
+ @@ngx.dashboard.widgets.radialGauge.dialog.activeDisplayDescription"
2547
+ >
2548
+ Display live gauge instead of passive icon
2549
+ </p>
2550
+ </div>
2551
+
2552
+ <div class="toggle-section">
2553
+ <mat-slide-toggle
2554
+ [(ngModel)]="localState.hasBackground"
2555
+ i18n="@@ngx.dashboard.widgets.radialGauge.dialog.background"
2556
+ >
2557
+ Background
2558
+ </mat-slide-toggle>
2559
+ <p
2560
+ class="toggle-description"
2561
+ i18n="
2562
+ @@ngx.dashboard.widgets.radialGauge.dialog.backgroundDescription"
2563
+ >
2564
+ Add a background color to the widget
2565
+ </p>
2566
+ </div>
2567
+
2568
+ <div class="toggle-section">
2569
+ <mat-slide-toggle
2570
+ [(ngModel)]="localState.showValueLabel"
2571
+ i18n="@@ngx.dashboard.widgets.radialGauge.dialog.showValueLabel"
2572
+ >
2573
+ Show Value Label
2574
+ </mat-slide-toggle>
2575
+ <p
2576
+ class="toggle-description"
2577
+ i18n="
2578
+ @@ngx.dashboard.widgets.radialGauge.dialog.showValueLabelDescription"
2579
+ >
2580
+ Display numeric value in gauge center
2581
+ </p>
2582
+ </div>
2583
+ </mat-dialog-content>
2584
+
2585
+ <mat-dialog-actions align="end">
2586
+ <button
2587
+ mat-button
2588
+ (click)="onCancel()"
2589
+ i18n="@@ngx.dashboard.common.cancel"
2590
+ >
2591
+ Cancel
2592
+ </button>
2593
+ <button
2594
+ mat-flat-button
2595
+ (click)="onSave()"
2596
+ i18n="@@ngx.dashboard.common.save"
2597
+ >
2598
+ Save
2599
+ </button>
2600
+ </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 });
2596
2602
  }
2597
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeStateDialogComponent, decorators: [{
2603
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RadialGaugeStateDialogComponent, decorators: [{
2598
2604
  type: Component,
2599
- args: [{ selector: 'lib-radial-gauge-state-dialog', standalone: true, imports: [
2600
- CommonModule,
2605
+ args: [{ selector: 'lib-radial-gauge-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
2601
2606
  MatDialogModule,
2602
2607
  MatButtonModule,
2603
2608
  MatFormFieldModule,
2604
2609
  MatInputModule,
2605
2610
  MatSlideToggleModule,
2606
2611
  MatRadioModule,
2607
- FormsModule,
2608
- ], template: `
2609
- <h2
2610
- mat-dialog-title
2611
- i18n="@@ngx.dashboard.widgets.radialGauge.dialog.title"
2612
- >
2613
- Radial Gauge Settings
2614
- </h2>
2615
- <mat-dialog-content>
2616
- <mat-form-field>
2617
- <mat-label i18n="@@ngx.dashboard.widgets.radialGauge.dialog.value"
2618
- >Value (0-100)</mat-label
2619
- >
2620
- <input
2621
- matInput
2622
- type="number"
2623
- [(ngModel)]="localState.value"
2624
- min="0"
2625
- max="100"
2626
- />
2627
- </mat-form-field>
2628
-
2629
- <div class="section">
2630
- <h4 i18n="@@ngx.dashboard.widgets.radialGauge.dialog.colorProfile">
2631
- Color Profile
2632
- </h4>
2633
- <mat-radio-group [(ngModel)]="localState.colorProfile">
2634
- <mat-radio-button
2635
- value="dynamic"
2636
- i18n="
2637
- @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.dynamic"
2638
- >Dynamic (Theme Colors)</mat-radio-button
2639
- >
2640
- <mat-radio-button
2641
- value="static"
2642
- i18n="
2643
- @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.static"
2644
- >Static (Performance Colors)</mat-radio-button
2645
- >
2646
- </mat-radio-group>
2647
- </div>
2648
-
2649
- <div class="toggle-section">
2650
- <mat-slide-toggle
2651
- [(ngModel)]="localState.active"
2652
- i18n="@@ngx.dashboard.widgets.radialGauge.dialog.activeDisplay"
2653
- >
2654
- Active Display
2655
- </mat-slide-toggle>
2656
- <p
2657
- class="toggle-description"
2658
- i18n="
2659
- @@ngx.dashboard.widgets.radialGauge.dialog.activeDisplayDescription"
2660
- >
2661
- Display live gauge instead of passive icon
2662
- </p>
2663
- </div>
2664
-
2665
- <div class="toggle-section">
2666
- <mat-slide-toggle
2667
- [(ngModel)]="localState.hasBackground"
2668
- i18n="@@ngx.dashboard.widgets.radialGauge.dialog.background"
2669
- >
2670
- Background
2671
- </mat-slide-toggle>
2672
- <p
2673
- class="toggle-description"
2674
- i18n="
2675
- @@ngx.dashboard.widgets.radialGauge.dialog.backgroundDescription"
2676
- >
2677
- Add a background color to the widget
2678
- </p>
2679
- </div>
2680
-
2681
- <div class="toggle-section">
2682
- <mat-slide-toggle
2683
- [(ngModel)]="localState.showValueLabel"
2684
- i18n="@@ngx.dashboard.widgets.radialGauge.dialog.showValueLabel"
2685
- >
2686
- Show Value Label
2687
- </mat-slide-toggle>
2688
- <p
2689
- class="toggle-description"
2690
- i18n="
2691
- @@ngx.dashboard.widgets.radialGauge.dialog.showValueLabelDescription"
2692
- >
2693
- Display numeric value in gauge center
2694
- </p>
2695
- </div>
2696
- </mat-dialog-content>
2697
-
2698
- <mat-dialog-actions align="end">
2699
- <button
2700
- mat-button
2701
- (click)="onCancel()"
2702
- i18n="@@ngx.dashboard.common.cancel"
2703
- >
2704
- Cancel
2705
- </button>
2706
- <button
2707
- mat-flat-button
2708
- (click)="onSave()"
2709
- i18n="@@ngx.dashboard.common.save"
2710
- >
2711
- Save
2712
- </button>
2713
- </mat-dialog-actions>
2612
+ FormsModule
2613
+ ], template: `
2614
+ <h2
2615
+ mat-dialog-title
2616
+ i18n="@@ngx.dashboard.widgets.radialGauge.dialog.title"
2617
+ >
2618
+ Radial Gauge Settings
2619
+ </h2>
2620
+ <mat-dialog-content>
2621
+ <mat-form-field>
2622
+ <mat-label i18n="@@ngx.dashboard.widgets.radialGauge.dialog.value"
2623
+ >Value (0-100)</mat-label
2624
+ >
2625
+ <input
2626
+ matInput
2627
+ type="number"
2628
+ [(ngModel)]="localState.value"
2629
+ min="0"
2630
+ max="100"
2631
+ />
2632
+ </mat-form-field>
2633
+
2634
+ <div class="section">
2635
+ <h4 i18n="@@ngx.dashboard.widgets.radialGauge.dialog.colorProfile">
2636
+ Color Profile
2637
+ </h4>
2638
+ <mat-radio-group [(ngModel)]="localState.colorProfile">
2639
+ <mat-radio-button
2640
+ value="dynamic"
2641
+ i18n="
2642
+ @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.dynamic"
2643
+ >Dynamic (Theme Colors)</mat-radio-button
2644
+ >
2645
+ <mat-radio-button
2646
+ value="static"
2647
+ i18n="
2648
+ @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.static"
2649
+ >Static (Performance Colors)</mat-radio-button
2650
+ >
2651
+ </mat-radio-group>
2652
+ </div>
2653
+
2654
+ <div class="toggle-section">
2655
+ <mat-slide-toggle
2656
+ [(ngModel)]="localState.active"
2657
+ i18n="@@ngx.dashboard.widgets.radialGauge.dialog.activeDisplay"
2658
+ >
2659
+ Active Display
2660
+ </mat-slide-toggle>
2661
+ <p
2662
+ class="toggle-description"
2663
+ i18n="
2664
+ @@ngx.dashboard.widgets.radialGauge.dialog.activeDisplayDescription"
2665
+ >
2666
+ Display live gauge instead of passive icon
2667
+ </p>
2668
+ </div>
2669
+
2670
+ <div class="toggle-section">
2671
+ <mat-slide-toggle
2672
+ [(ngModel)]="localState.hasBackground"
2673
+ i18n="@@ngx.dashboard.widgets.radialGauge.dialog.background"
2674
+ >
2675
+ Background
2676
+ </mat-slide-toggle>
2677
+ <p
2678
+ class="toggle-description"
2679
+ i18n="
2680
+ @@ngx.dashboard.widgets.radialGauge.dialog.backgroundDescription"
2681
+ >
2682
+ Add a background color to the widget
2683
+ </p>
2684
+ </div>
2685
+
2686
+ <div class="toggle-section">
2687
+ <mat-slide-toggle
2688
+ [(ngModel)]="localState.showValueLabel"
2689
+ i18n="@@ngx.dashboard.widgets.radialGauge.dialog.showValueLabel"
2690
+ >
2691
+ Show Value Label
2692
+ </mat-slide-toggle>
2693
+ <p
2694
+ class="toggle-description"
2695
+ i18n="
2696
+ @@ngx.dashboard.widgets.radialGauge.dialog.showValueLabelDescription"
2697
+ >
2698
+ Display numeric value in gauge center
2699
+ </p>
2700
+ </div>
2701
+ </mat-dialog-content>
2702
+
2703
+ <mat-dialog-actions align="end">
2704
+ <button
2705
+ mat-button
2706
+ (click)="onCancel()"
2707
+ i18n="@@ngx.dashboard.common.cancel"
2708
+ >
2709
+ Cancel
2710
+ </button>
2711
+ <button
2712
+ mat-flat-button
2713
+ (click)="onSave()"
2714
+ i18n="@@ngx.dashboard.common.save"
2715
+ >
2716
+ Save
2717
+ </button>
2718
+ </mat-dialog-actions>
2714
2719
  `, 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"] }]
2715
2720
  }] });
2716
2721
 
@@ -2777,12 +2782,12 @@ class RadialGaugeWidgetComponent {
2777
2782
  }
2778
2783
  });
2779
2784
  }
2780
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2781
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RadialGaugeWidgetComponent, isStandalone: true, selector: "ngx-dashboard-radial-gauge-widget", ngImport: i0, template: "<!-- radial-gauge-widget.component.html -->\r\n<div class=\"widget-container\" [class.has-background]=\"state().hasBackground\">\r\n @if (state().active) {\r\n <!-- Active mode: Show live gauge -->\r\n <div class=\"gauge-container\">\r\n <ngx-radial-gauge\r\n [value]=\"state().value || 0\"\r\n [min]=\"0\"\r\n [max]=\"100\"\r\n [fitToContainer]=\"true\"\r\n [responsiveMode]=\"true\"\r\n [segments]=\"segments()\"\r\n [outerThickness]=\"24\"\r\n [innerThickness]=\"8\"\r\n [gap]=\"4\"\r\n [segmentGapPx]=\"2\"\r\n [labelReference]=\"'00000'\"\r\n [referenceGlyph]=\"'0'\"\r\n [hasBackground]=\"state().hasBackground || false\"\r\n [showValueLabel]=\"state().showValueLabel ?? true\"\r\n />\r\n </div>\r\n } @else {\r\n <!-- Passive mode: Show static icon -->\r\n <div class=\"icon-container\">\r\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.widget-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.widget-container.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.gauge-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}ngx-radial-gauge{width:100%;height:100%;min-height:0;flex:1}.icon-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}.svg-placeholder{width:80%;height:80%;display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #6c757d);transition:color .2s ease}.svg-placeholder :deep(svg){width:100%;height:100%;max-width:100px;max-height:100px;fill:currentColor}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.widget-container:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "component", type: RadialGaugeComponent, selector: "ngx-radial-gauge", inputs: ["value", "min", "max", "segments", "title", "description", "segmentGapPx", "hasBackground", "showValueLabel", "size", "fitToContainer", "containerPadding", "responsiveMode", "sizeToThicknessRatio", "responsiveProportions", "outerThickness", "innerThickness", "gap", "labelReference", "referenceGlyph", "labelPadding", "baselineSafety"] }] });
2785
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RadialGaugeWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2786
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"] }] });
2782
2787
  }
2783
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeWidgetComponent, decorators: [{
2788
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RadialGaugeWidgetComponent, decorators: [{
2784
2789
  type: Component,
2785
- args: [{ selector: 'ngx-dashboard-radial-gauge-widget', imports: [RadialGaugeComponent], template: "<!-- radial-gauge-widget.component.html -->\r\n<div class=\"widget-container\" [class.has-background]=\"state().hasBackground\">\r\n @if (state().active) {\r\n <!-- Active mode: Show live gauge -->\r\n <div class=\"gauge-container\">\r\n <ngx-radial-gauge\r\n [value]=\"state().value || 0\"\r\n [min]=\"0\"\r\n [max]=\"100\"\r\n [fitToContainer]=\"true\"\r\n [responsiveMode]=\"true\"\r\n [segments]=\"segments()\"\r\n [outerThickness]=\"24\"\r\n [innerThickness]=\"8\"\r\n [gap]=\"4\"\r\n [segmentGapPx]=\"2\"\r\n [labelReference]=\"'00000'\"\r\n [referenceGlyph]=\"'0'\"\r\n [hasBackground]=\"state().hasBackground || false\"\r\n [showValueLabel]=\"state().showValueLabel ?? true\"\r\n />\r\n </div>\r\n } @else {\r\n <!-- Passive mode: Show static icon -->\r\n <div class=\"icon-container\">\r\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.widget-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.widget-container.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.gauge-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}ngx-radial-gauge{width:100%;height:100%;min-height:0;flex:1}.icon-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}.svg-placeholder{width:80%;height:80%;display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #6c757d);transition:color .2s ease}.svg-placeholder :deep(svg){width:100%;height:100%;max-width:100px;max-height:100px;fill:currentColor}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.widget-container:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] }]
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"] }]
2786
2791
  }] });
2787
2792
 
2788
2793
  /*