@dragonworks/ngx-dashboard-widgets 21.0.0 → 21.1.1
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.
|
@@ -25,7 +25,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
|
|
|
25
25
|
|
|
26
26
|
// Auto-generated by scripts/generate-versions.js
|
|
27
27
|
// Do not edit manually
|
|
28
|
-
const NGX_DASHBOARD_WIDGETS_VERSION = '21.
|
|
28
|
+
const NGX_DASHBOARD_WIDGETS_VERSION = '21.1.1';
|
|
29
29
|
|
|
30
30
|
// arrow-widget.metadata.ts
|
|
31
31
|
const svgIcon$3 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M320-120v-320H120l360-440 360 440H640v320H320Zm80-80h160v-320h111L480-754 289-520h111v320Zm80-320Z"/></svg>';
|
|
@@ -34,10 +34,10 @@ class ArrowStateDialogComponent {
|
|
|
34
34
|
data = inject(MAT_DIALOG_DATA);
|
|
35
35
|
dialogRef = inject((MatDialogRef));
|
|
36
36
|
// State signals
|
|
37
|
-
direction = signal(this.data.direction, ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
38
|
-
opacity = signal(this.data.opacity ?? 1, ...(ngDevMode ? [{ debugName: "opacity" }] : []));
|
|
39
|
-
hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
|
|
40
|
-
transparentBackground = signal(!(this.data.hasBackground ?? true), ...(ngDevMode ? [{ debugName: "transparentBackground" }] : []));
|
|
37
|
+
direction = signal(this.data.direction, ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
|
|
38
|
+
opacity = signal(this.data.opacity ?? 1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
|
|
39
|
+
hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
|
|
40
|
+
transparentBackground = signal(!(this.data.hasBackground ?? true), ...(ngDevMode ? [{ debugName: "transparentBackground" }] : /* istanbul ignore next */ []));
|
|
41
41
|
// Store original values for comparison
|
|
42
42
|
originalDirection = this.data.direction;
|
|
43
43
|
originalOpacity = this.data.opacity ?? 1;
|
|
@@ -51,8 +51,8 @@ class ArrowStateDialogComponent {
|
|
|
51
51
|
left: 270,
|
|
52
52
|
};
|
|
53
53
|
return rotationMap[this.direction()];
|
|
54
|
-
}, ...(ngDevMode ? [{ debugName: "rotation" }] : []));
|
|
55
|
-
rotationTransform = computed(() => `rotate(${this.rotation()}deg)`, ...(ngDevMode ? [{ debugName: "rotationTransform" }] : []));
|
|
54
|
+
}, ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
|
|
55
|
+
rotationTransform = computed(() => `rotate(${this.rotation()}deg)`, ...(ngDevMode ? [{ debugName: "rotationTransform" }] : /* istanbul ignore next */ []));
|
|
56
56
|
directionName = computed(() => {
|
|
57
57
|
const nameMap = {
|
|
58
58
|
up: 'Up',
|
|
@@ -61,10 +61,10 @@ class ArrowStateDialogComponent {
|
|
|
61
61
|
left: 'Left',
|
|
62
62
|
};
|
|
63
63
|
return nameMap[this.direction()];
|
|
64
|
-
}, ...(ngDevMode ? [{ debugName: "directionName" }] : []));
|
|
64
|
+
}, ...(ngDevMode ? [{ debugName: "directionName" }] : /* istanbul ignore next */ []));
|
|
65
65
|
hasChanged = computed(() => this.direction() !== this.originalDirection ||
|
|
66
66
|
this.opacity() !== this.originalOpacity ||
|
|
67
|
-
this.hasBackground() !== this.originalHasBackground, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
|
|
67
|
+
this.hasBackground() !== this.originalHasBackground, ...(ngDevMode ? [{ debugName: "hasChanged" }] : /* istanbul ignore next */ []));
|
|
68
68
|
formatOpacity(value) {
|
|
69
69
|
return Math.round(value * 100);
|
|
70
70
|
}
|
|
@@ -82,8 +82,8 @@ class ArrowStateDialogComponent {
|
|
|
82
82
|
hasBackground: this.hasBackground(),
|
|
83
83
|
});
|
|
84
84
|
}
|
|
85
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
86
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
85
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ArrowStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
86
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: ArrowStateDialogComponent, isStandalone: true, selector: "lib-arrow-state-dialog", ngImport: i0, template: `
|
|
87
87
|
<h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.arrow.dialog.title">
|
|
88
88
|
Arrow Settings
|
|
89
89
|
</h2>
|
|
@@ -169,7 +169,7 @@ class ArrowStateDialogComponent {
|
|
|
169
169
|
</mat-dialog-actions>
|
|
170
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: "21.
|
|
172
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ArrowStateDialogComponent, decorators: [{
|
|
173
173
|
type: Component,
|
|
174
174
|
args: [{ selector: 'lib-arrow-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
175
175
|
FormsModule,
|
|
@@ -281,7 +281,7 @@ class ArrowWidgetComponent {
|
|
|
281
281
|
direction: 'up',
|
|
282
282
|
opacity: 0.3,
|
|
283
283
|
hasBackground: true,
|
|
284
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
284
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
285
285
|
// Computed rotation
|
|
286
286
|
rotationAngle = computed(() => {
|
|
287
287
|
const rotationMap = {
|
|
@@ -291,7 +291,7 @@ class ArrowWidgetComponent {
|
|
|
291
291
|
left: 270,
|
|
292
292
|
};
|
|
293
293
|
return rotationMap[this.state().direction];
|
|
294
|
-
}, ...(ngDevMode ? [{ debugName: "rotationAngle" }] : []));
|
|
294
|
+
}, ...(ngDevMode ? [{ debugName: "rotationAngle" }] : /* istanbul ignore next */ []));
|
|
295
295
|
dashboardSetState(state) {
|
|
296
296
|
if (state) {
|
|
297
297
|
this.state.update((current) => ({
|
|
@@ -317,10 +317,10 @@ class ArrowWidgetComponent {
|
|
|
317
317
|
}
|
|
318
318
|
});
|
|
319
319
|
}
|
|
320
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
321
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
320
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ArrowWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
321
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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"] });
|
|
322
322
|
}
|
|
323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ArrowWidgetComponent, decorators: [{
|
|
324
324
|
type: Component,
|
|
325
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"] }]
|
|
326
326
|
}] });
|
|
@@ -332,18 +332,18 @@ class LabelStateDialogComponent {
|
|
|
332
332
|
data = inject(MAT_DIALOG_DATA);
|
|
333
333
|
dialogRef = inject((MatDialogRef));
|
|
334
334
|
// State signals
|
|
335
|
-
label = signal(this.data.label ?? '', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
336
|
-
fontSize = signal(this.data.fontSize ?? 16, ...(ngDevMode ? [{ debugName: "fontSize" }] : []));
|
|
337
|
-
alignment = signal(this.data.alignment ?? 'center', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
|
|
338
|
-
fontWeight = signal(this.data.fontWeight ?? 'normal', ...(ngDevMode ? [{ debugName: "fontWeight" }] : []));
|
|
339
|
-
opacity = signal(this.data.opacity ?? 1, ...(ngDevMode ? [{ debugName: "opacity" }] : []));
|
|
340
|
-
hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
|
|
341
|
-
transparentBackground = signal(!(this.data.hasBackground ?? true), ...(ngDevMode ? [{ debugName: "transparentBackground" }] : []));
|
|
342
|
-
responsive = signal(this.data.responsive ?? false, ...(ngDevMode ? [{ debugName: "responsive" }] : []));
|
|
335
|
+
label = signal(this.data.label ?? '', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
336
|
+
fontSize = signal(this.data.fontSize ?? 16, ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
|
|
337
|
+
alignment = signal(this.data.alignment ?? 'center', ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
|
|
338
|
+
fontWeight = signal(this.data.fontWeight ?? 'normal', ...(ngDevMode ? [{ debugName: "fontWeight" }] : /* istanbul ignore next */ []));
|
|
339
|
+
opacity = signal(this.data.opacity ?? 1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
|
|
340
|
+
hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
|
|
341
|
+
transparentBackground = signal(!(this.data.hasBackground ?? true), ...(ngDevMode ? [{ debugName: "transparentBackground" }] : /* istanbul ignore next */ []));
|
|
342
|
+
responsive = signal(this.data.responsive ?? false, ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
|
|
343
343
|
// Responsive font size constraints
|
|
344
|
-
minFontSize = signal(this.data.minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : []));
|
|
345
|
-
maxFontSize = signal(this.data.maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : []));
|
|
346
|
-
templateString = signal(this.data.templateString, ...(ngDevMode ? [{ debugName: "templateString" }] : []));
|
|
344
|
+
minFontSize = signal(this.data.minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : /* istanbul ignore next */ []));
|
|
345
|
+
maxFontSize = signal(this.data.maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : /* istanbul ignore next */ []));
|
|
346
|
+
templateString = signal(this.data.templateString, ...(ngDevMode ? [{ debugName: "templateString" }] : /* istanbul ignore next */ []));
|
|
347
347
|
// Store original values for comparison
|
|
348
348
|
originalLabel = this.data.label ?? '';
|
|
349
349
|
originalFontSize = this.data.fontSize ?? 16;
|
|
@@ -359,15 +359,15 @@ class LabelStateDialogComponent {
|
|
|
359
359
|
isMinFontSizeValid = computed(() => {
|
|
360
360
|
const min = this.minFontSize();
|
|
361
361
|
return min >= 8 && min <= 24;
|
|
362
|
-
}, ...(ngDevMode ? [{ debugName: "isMinFontSizeValid" }] : []));
|
|
362
|
+
}, ...(ngDevMode ? [{ debugName: "isMinFontSizeValid" }] : /* istanbul ignore next */ []));
|
|
363
363
|
isMaxFontSizeValid = computed(() => {
|
|
364
364
|
const max = this.maxFontSize();
|
|
365
365
|
return max >= 16 && max <= 128;
|
|
366
|
-
}, ...(ngDevMode ? [{ debugName: "isMaxFontSizeValid" }] : []));
|
|
367
|
-
isFontSizeRangeValid = computed(() => this.minFontSize() < this.maxFontSize(), ...(ngDevMode ? [{ debugName: "isFontSizeRangeValid" }] : []));
|
|
366
|
+
}, ...(ngDevMode ? [{ debugName: "isMaxFontSizeValid" }] : /* istanbul ignore next */ []));
|
|
367
|
+
isFontSizeRangeValid = computed(() => this.minFontSize() < this.maxFontSize(), ...(ngDevMode ? [{ debugName: "isFontSizeRangeValid" }] : /* istanbul ignore next */ []));
|
|
368
368
|
isFormValid = computed(() => this.isMinFontSizeValid() &&
|
|
369
369
|
this.isMaxFontSizeValid() &&
|
|
370
|
-
this.isFontSizeRangeValid(), ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
|
|
370
|
+
this.isFontSizeRangeValid(), ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
|
|
371
371
|
// Computed values
|
|
372
372
|
hasChanged = computed(() => this.label() !== this.originalLabel ||
|
|
373
373
|
this.fontSize() !== this.originalFontSize ||
|
|
@@ -378,7 +378,7 @@ class LabelStateDialogComponent {
|
|
|
378
378
|
this.responsive() !== this.originalResponsive ||
|
|
379
379
|
this.minFontSize() !== this.originalMinFontSize ||
|
|
380
380
|
this.maxFontSize() !== this.originalMaxFontSize ||
|
|
381
|
-
this.templateString() !== this.originalTemplateString, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
|
|
381
|
+
this.templateString() !== this.originalTemplateString, ...(ngDevMode ? [{ debugName: "hasChanged" }] : /* istanbul ignore next */ []));
|
|
382
382
|
formatOpacity(value) {
|
|
383
383
|
return Math.round(value * 100);
|
|
384
384
|
}
|
|
@@ -432,8 +432,8 @@ class LabelStateDialogComponent {
|
|
|
432
432
|
}
|
|
433
433
|
this.dialogRef.close(state);
|
|
434
434
|
}
|
|
435
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
436
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
435
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LabelStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
436
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LabelStateDialogComponent, isStandalone: true, selector: "lib-label-state-dialog", ngImport: i0, template: `
|
|
437
437
|
<h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.label.dialog.title">
|
|
438
438
|
Label Settings
|
|
439
439
|
</h2>
|
|
@@ -685,7 +685,7 @@ class LabelStateDialogComponent {
|
|
|
685
685
|
</mat-dialog-actions>
|
|
686
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 });
|
|
687
687
|
}
|
|
688
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LabelStateDialogComponent, decorators: [{
|
|
689
689
|
type: Component,
|
|
690
690
|
args: [{ selector: 'lib-label-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
691
691
|
FormsModule,
|
|
@@ -962,20 +962,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
962
962
|
class ResponsiveTextDirective {
|
|
963
963
|
/* ───────────────────────── Inputs with transforms ─────────────── */
|
|
964
964
|
/** Minimum font-size in pixels (accessibility floor) */
|
|
965
|
-
minFontSize = input(8, { ...(ngDevMode ? { debugName: "minFontSize" } : {}), transform: numberAttribute });
|
|
965
|
+
minFontSize = input(8, { ...(ngDevMode ? { debugName: "minFontSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
966
966
|
/** Maximum font-size in pixels (layout ceiling) */
|
|
967
|
-
maxFontSize = input(512, { ...(ngDevMode ? { debugName: "maxFontSize" } : {}), transform: numberAttribute });
|
|
967
|
+
maxFontSize = input(512, { ...(ngDevMode ? { debugName: "maxFontSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
968
968
|
/**
|
|
969
969
|
* Line-height: pass a multiplier (e.g. 1.1) or absolute px value.
|
|
970
970
|
* For single-line text a multiplier < 10 is treated as unitless.
|
|
971
971
|
*/
|
|
972
|
-
lineHeight = input(1.1, { ...(ngDevMode ? { debugName: "lineHeight" } : {}), transform: numberAttribute });
|
|
972
|
+
lineHeight = input(1.1, { ...(ngDevMode ? { debugName: "lineHeight" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
973
973
|
/** Whether to observe text mutations after first render */
|
|
974
|
-
observeMutations = input(true, { ...(ngDevMode ? { debugName: "observeMutations" } : {}), transform: booleanAttribute });
|
|
974
|
+
observeMutations = input(true, { ...(ngDevMode ? { debugName: "observeMutations" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
975
975
|
/** Debounce delay in ms for resize/mutation callbacks */
|
|
976
|
-
debounceMs = input(16, { ...(ngDevMode ? { debugName: "debounceMs" } : {}), transform: numberAttribute });
|
|
976
|
+
debounceMs = input(16, { ...(ngDevMode ? { debugName: "debounceMs" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
977
977
|
/** Template string to use for size calculations instead of actual content */
|
|
978
|
-
templateString = input(undefined, ...(ngDevMode ? [{ debugName: "templateString" }] : []));
|
|
978
|
+
templateString = input(undefined, ...(ngDevMode ? [{ debugName: "templateString" }] : /* istanbul ignore next */ []));
|
|
979
979
|
/* ───────────────────────── Private state ───────────────────────── */
|
|
980
980
|
el = inject(ElementRef);
|
|
981
981
|
platformId = inject(PLATFORM_ID);
|
|
@@ -1226,10 +1226,10 @@ class ResponsiveTextDirective {
|
|
|
1226
1226
|
// Clear canvas context
|
|
1227
1227
|
this._ctx = undefined;
|
|
1228
1228
|
}
|
|
1229
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1230
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.
|
|
1229
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ResponsiveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1230
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: ResponsiveTextDirective, isStandalone: true, selector: "[libResponsiveText]", inputs: { minFontSize: { classPropertyName: "minFontSize", publicName: "minFontSize", isSignal: true, isRequired: false, transformFunction: null }, maxFontSize: { classPropertyName: "maxFontSize", publicName: "maxFontSize", isSignal: true, isRequired: false, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, observeMutations: { classPropertyName: "observeMutations", publicName: "observeMutations", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, templateString: { classPropertyName: "templateString", publicName: "templateString", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.white-space": "\"nowrap\"", "style.overflow": "\"visible\"" } }, ngImport: i0 });
|
|
1231
1231
|
}
|
|
1232
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
|
|
1233
1233
|
type: Directive,
|
|
1234
1234
|
args: [{
|
|
1235
1235
|
selector: '[libResponsiveText]',
|
|
@@ -1263,7 +1263,7 @@ class LabelWidgetComponent {
|
|
|
1263
1263
|
responsive: false,
|
|
1264
1264
|
minFontSize: 8, // Accessible minimum for responsive text
|
|
1265
1265
|
maxFontSize: 64, // Practical maximum for widget display
|
|
1266
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
1266
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1267
1267
|
dashboardSetState(state) {
|
|
1268
1268
|
if (state) {
|
|
1269
1269
|
this.state.update((current) => ({
|
|
@@ -1303,13 +1303,13 @@ class LabelWidgetComponent {
|
|
|
1303
1303
|
return this.state().label?.trim();
|
|
1304
1304
|
}
|
|
1305
1305
|
// Computed properties for responsive font size limits with fallbacks
|
|
1306
|
-
minFontSize = computed(() => this.state().minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : []));
|
|
1307
|
-
maxFontSize = computed(() => this.state().maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : []));
|
|
1308
|
-
templateString = computed(() => this.state().templateString, ...(ngDevMode ? [{ debugName: "templateString" }] : []));
|
|
1309
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1310
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1306
|
+
minFontSize = computed(() => this.state().minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : /* istanbul ignore next */ []));
|
|
1307
|
+
maxFontSize = computed(() => this.state().maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : /* istanbul ignore next */ []));
|
|
1308
|
+
templateString = computed(() => this.state().templateString, ...(ngDevMode ? [{ debugName: "templateString" }] : /* istanbul ignore next */ []));
|
|
1309
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LabelWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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"] }] });
|
|
1311
1311
|
}
|
|
1312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LabelWidgetComponent, decorators: [{
|
|
1313
1313
|
type: Component,
|
|
1314
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"] }]
|
|
1315
1315
|
}] });
|
|
@@ -1363,10 +1363,10 @@ class ClockStateDialogComponent {
|
|
|
1363
1363
|
data = inject(MAT_DIALOG_DATA);
|
|
1364
1364
|
dialogRef = inject((MatDialogRef));
|
|
1365
1365
|
// State signals
|
|
1366
|
-
mode = signal(this.data.mode ?? 'digital', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
1367
|
-
hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
|
|
1368
|
-
timeFormat = signal(this.data.timeFormat ?? '24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
|
|
1369
|
-
showSeconds = signal(this.data.showSeconds ?? true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
|
|
1366
|
+
mode = signal(this.data.mode ?? 'digital', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
1367
|
+
hasBackground = signal(this.data.hasBackground ?? true, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
|
|
1368
|
+
timeFormat = signal(this.data.timeFormat ?? '24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
|
|
1369
|
+
showSeconds = signal(this.data.showSeconds ?? true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
|
|
1370
1370
|
// Store original values for comparison
|
|
1371
1371
|
originalMode = this.data.mode ?? 'digital';
|
|
1372
1372
|
originalHasBackground = this.data.hasBackground ?? true;
|
|
@@ -1376,7 +1376,7 @@ class ClockStateDialogComponent {
|
|
|
1376
1376
|
hasChanged = computed(() => this.mode() !== this.originalMode ||
|
|
1377
1377
|
this.hasBackground() !== this.originalHasBackground ||
|
|
1378
1378
|
this.timeFormat() !== this.originalTimeFormat ||
|
|
1379
|
-
this.showSeconds() !== this.originalShowSeconds, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
|
|
1379
|
+
this.showSeconds() !== this.originalShowSeconds, ...(ngDevMode ? [{ debugName: "hasChanged" }] : /* istanbul ignore next */ []));
|
|
1380
1380
|
onCancel() {
|
|
1381
1381
|
this.dialogRef.close();
|
|
1382
1382
|
}
|
|
@@ -1388,8 +1388,8 @@ class ClockStateDialogComponent {
|
|
|
1388
1388
|
showSeconds: this.showSeconds(),
|
|
1389
1389
|
});
|
|
1390
1390
|
}
|
|
1391
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1392
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1391
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClockStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1392
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ClockStateDialogComponent, isStandalone: true, selector: "lib-clock-state-dialog", ngImport: i0, template: `
|
|
1393
1393
|
<h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.clock.dialog.title">
|
|
1394
1394
|
Clock Settings
|
|
1395
1395
|
</h2>
|
|
@@ -1509,7 +1509,7 @@ class ClockStateDialogComponent {
|
|
|
1509
1509
|
</mat-dialog-actions>
|
|
1510
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 });
|
|
1511
1511
|
}
|
|
1512
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClockStateDialogComponent, decorators: [{
|
|
1513
1513
|
type: Component,
|
|
1514
1514
|
args: [{ selector: 'lib-clock-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1515
1515
|
FormsModule,
|
|
@@ -1641,17 +1641,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1641
1641
|
class DigitalClockComponent {
|
|
1642
1642
|
#destroyRef = inject(DestroyRef);
|
|
1643
1643
|
// Inputs
|
|
1644
|
-
timeFormat = input('24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
|
|
1645
|
-
showSeconds = input(true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
|
|
1646
|
-
hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
|
|
1644
|
+
timeFormat = input('24h', ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
|
|
1645
|
+
showSeconds = input(true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
|
|
1646
|
+
hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
|
|
1647
1647
|
// Time tracking
|
|
1648
|
-
currentTime = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentTime" }] : []));
|
|
1648
|
+
currentTime = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
|
|
1649
1649
|
formattedTime = computed(() => {
|
|
1650
1650
|
const time = this.currentTime();
|
|
1651
1651
|
const format = this.timeFormat();
|
|
1652
1652
|
const showSecs = this.showSeconds();
|
|
1653
1653
|
return this.#formatTime(time, format, showSecs);
|
|
1654
|
-
}, ...(ngDevMode ? [{ debugName: "formattedTime" }] : []));
|
|
1654
|
+
}, ...(ngDevMode ? [{ debugName: "formattedTime" }] : /* istanbul ignore next */ []));
|
|
1655
1655
|
#intervalId = null;
|
|
1656
1656
|
#formatTime(time, format, showSecs) {
|
|
1657
1657
|
let hours = time.getHours();
|
|
@@ -1701,10 +1701,10 @@ class DigitalClockComponent {
|
|
|
1701
1701
|
this.#intervalId = null;
|
|
1702
1702
|
}
|
|
1703
1703
|
}
|
|
1704
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1705
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
1704
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DigitalClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1705
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: DigitalClockComponent, isStandalone: true, selector: "lib-digital-clock", inputs: { timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-background": "hasBackground()", "class.show-pm": "timeFormat() === \"12h\"", "class.show-seconds": "showSeconds()" }, classAttribute: "clock-widget digital" }, ngImport: i0, template: "<div responsiveText class=\"digital-time\">{{ formattedTime() }}</div>\n", styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard);padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}:host.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px;color:var(--mat-sys-on-surface, #1f1f1f)}:host:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.digital-time{font-size:clamp(8px,min(20cqw,50cqh),200px);font-family:monospace;font-weight:500;letter-spacing:.05em;transition:color .2s ease}:host.show-pm.show-seconds .digital-time{font-size:clamp(8px,min(15cqw,50cqh),200px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1706
1706
|
}
|
|
1707
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1707
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DigitalClockComponent, decorators: [{
|
|
1708
1708
|
type: Component,
|
|
1709
1709
|
args: [{ selector: 'lib-digital-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1710
1710
|
'[class.has-background]': 'hasBackground()',
|
|
@@ -1718,32 +1718,32 @@ class AnalogClockComponent {
|
|
|
1718
1718
|
#destroyRef = inject(DestroyRef);
|
|
1719
1719
|
#renderer = inject(Renderer2);
|
|
1720
1720
|
// Inputs
|
|
1721
|
-
hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
|
|
1722
|
-
showSeconds = input(true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
|
|
1721
|
+
hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
|
|
1722
|
+
showSeconds = input(true, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
|
|
1723
1723
|
// ViewChild references for clock hands
|
|
1724
|
-
hourHand = viewChild('hourHand', ...(ngDevMode ? [{ debugName: "hourHand" }] : []));
|
|
1725
|
-
minuteHand = viewChild('minuteHand', ...(ngDevMode ? [{ debugName: "minuteHand" }] : []));
|
|
1726
|
-
secondHand = viewChild('secondHand', ...(ngDevMode ? [{ debugName: "secondHand" }] : []));
|
|
1724
|
+
hourHand = viewChild('hourHand', ...(ngDevMode ? [{ debugName: "hourHand" }] : /* istanbul ignore next */ []));
|
|
1725
|
+
minuteHand = viewChild('minuteHand', ...(ngDevMode ? [{ debugName: "minuteHand" }] : /* istanbul ignore next */ []));
|
|
1726
|
+
secondHand = viewChild('secondHand', ...(ngDevMode ? [{ debugName: "secondHand" }] : /* istanbul ignore next */ []));
|
|
1727
1727
|
// Time tracking
|
|
1728
|
-
currentTime = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentTime" }] : []));
|
|
1728
|
+
currentTime = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
|
|
1729
1729
|
// Computed rotation signals
|
|
1730
1730
|
secondHandRotation = computed(() => {
|
|
1731
1731
|
const seconds = this.currentTime().getSeconds();
|
|
1732
1732
|
return seconds * 6; // 360° / 60s = 6° per second
|
|
1733
|
-
}, ...(ngDevMode ? [{ debugName: "secondHandRotation" }] : []));
|
|
1733
|
+
}, ...(ngDevMode ? [{ debugName: "secondHandRotation" }] : /* istanbul ignore next */ []));
|
|
1734
1734
|
minuteHandRotation = computed(() => {
|
|
1735
1735
|
const time = this.currentTime();
|
|
1736
1736
|
const minutes = time.getMinutes();
|
|
1737
1737
|
const seconds = time.getSeconds();
|
|
1738
1738
|
return minutes * 6 + seconds / 10; // Smooth minute hand movement
|
|
1739
|
-
}, ...(ngDevMode ? [{ debugName: "minuteHandRotation" }] : []));
|
|
1739
|
+
}, ...(ngDevMode ? [{ debugName: "minuteHandRotation" }] : /* istanbul ignore next */ []));
|
|
1740
1740
|
hourHandRotation = computed(() => {
|
|
1741
1741
|
const time = this.currentTime();
|
|
1742
1742
|
const hours = time.getHours() % 12;
|
|
1743
1743
|
const minutes = time.getMinutes();
|
|
1744
1744
|
const seconds = time.getSeconds();
|
|
1745
1745
|
return hours * 30 + minutes / 2 + seconds / 120; // Smooth hour hand movement
|
|
1746
|
-
}, ...(ngDevMode ? [{ debugName: "hourHandRotation" }] : []));
|
|
1746
|
+
}, ...(ngDevMode ? [{ debugName: "hourHandRotation" }] : /* istanbul ignore next */ []));
|
|
1747
1747
|
#intervalId = null;
|
|
1748
1748
|
constructor() {
|
|
1749
1749
|
// Set up time update timer
|
|
@@ -1789,10 +1789,10 @@ class AnalogClockComponent {
|
|
|
1789
1789
|
this.#renderer.setAttribute(secondElement, 'transform', `rotate(${this.secondHandRotation()}, 400, 400)`);
|
|
1790
1790
|
}
|
|
1791
1791
|
}
|
|
1792
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1793
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.
|
|
1792
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AnalogClockComponent, isStandalone: true, selector: "lib-analog-clock", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-background": "hasBackground()", "class.show-seconds": "showSeconds()" }, classAttribute: "clock-widget analog" }, viewQueries: [{ propertyName: "hourHand", first: true, predicate: ["hourHand"], descendants: true, isSignal: true }, { propertyName: "minuteHand", first: true, predicate: ["minuteHand"], descendants: true, isSignal: true }, { propertyName: "secondHand", first: true, predicate: ["secondHand"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"analog-clock-container\">\n <div class=\"aspect-ratio-box\">\n <svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 800 800\"\n preserveAspectRatio=\"xMidYMid meet\"\n >\n <!-- Optional face circle; uncomment if you want a visible outline by default -->\n <!-- <circle cx=\"400\" cy=\"400\" r=\"400\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"2\" /> -->\n\n <use transform=\"matrix(-1,0,0,1,800,0)\" href=\"#one-half\" />\n <g id=\"one-half\">\n <g id=\"one-fourth\">\n <!-- 12 / 3 / 6 / 9 heavy marks -->\n <path d=\"m400 40v107\" stroke-width=\"26.7\" stroke=\"currentColor\" />\n <g id=\"one-twelfth\">\n <!-- 30\u00B0 heavy marks -->\n <path\n d=\"m580 88.233-42.5 73.612\"\n stroke-width=\"26.7\"\n stroke=\"currentColor\"\n />\n <g id=\"one-thirtieth\">\n <!-- minute/second ticks -->\n <path\n id=\"one-sixtieth\"\n d=\"m437.63 41.974-3.6585 34.808\"\n stroke-width=\"13.6\"\n stroke=\"currentColor\"\n />\n <use transform=\"rotate(6 400 400)\" href=\"#one-sixtieth\" />\n </g>\n <use transform=\"rotate(12 400 400)\" href=\"#one-thirtieth\" />\n </g>\n <use transform=\"rotate(30 400 400)\" href=\"#one-twelfth\" />\n <use transform=\"rotate(60 400 400)\" href=\"#one-twelfth\" />\n </g>\n <use transform=\"rotate(90 400 400)\" href=\"#one-fourth\" />\n </g>\n\n <!-- Hands -->\n <path\n class=\"clock-hour-hand\"\n id=\"anim-clock-hour-hand\"\n #hourHand\n d=\"m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z\"\n transform=\"rotate(110.2650694444, 400, 400)\"\n />\n <path\n class=\"clock-minute-hand\"\n id=\"anim-clock-minute-hand\"\n #minuteHand\n d=\"M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z\"\n transform=\"rotate(243.1808333333, 400, 400)\"\n />\n <path\n class=\"clock-second-hand\"\n id=\"anim-clock-second-hand\"\n #secondHand\n d=\"M 397.317,63.51744 395.91962,168.4 C 374.575,170.5125 358.2,188.365 358.2,210 c 0,21.635 16.3,39 36.61214,41.47594 L 391.52847,498 h 16.94306 L 405.1868,251.47593 C 425.5,249 441.8,231.635 441.8,210 c 2e-5,-21.635 -16.375,-39.4875 -37.71971,-41.6 L 402.683,63.51744 400,60 Z M 400,190.534 c 10.888,0 19.466,8.866 19.466,19.466 0,10.6 -8.578,19.466 -19.466,19.466 -10.888,0 -19.466,-8.866 -19.466,-19.466 0,-10.6 8.578,-19.466 19.466,-19.466 z\"\n transform=\"rotate(190.85, 400, 400)\"\n />\n </svg>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.analog-clock-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.analog-clock-container .aspect-ratio-box{position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:1/1}@supports not (aspect-ratio: 1/1){.analog-clock-container .aspect-ratio-box:before{content:\"\";display:block;padding-bottom:100%}.analog-clock-container .aspect-ratio-box svg{position:absolute;top:0;left:0;width:100%;height:100%}}.analog-clock-container .aspect-ratio-box svg{display:block;width:100%;height:100%}.analog-clock-container .aspect-ratio-box svg path:not(.clock-hour-hand):not(.clock-minute-hand):not(.clock-second-hand){stroke:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}:host:not(.show-seconds) .clock-second-hand{display:none}:host.has-background svg circle{fill:var(--mat-sys-surface, #fffbfe)}:host:hover{opacity:.8}:host:hover svg .clock-hour-hand,:host:hover svg .clock-minute-hand{fill:var(--mat-sys-primary, #6750a4)}:host.clock-widget.analog{container-type:size;container-name:analog-clock}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1794
1794
|
}
|
|
1795
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AnalogClockComponent, decorators: [{
|
|
1796
1796
|
type: Component,
|
|
1797
1797
|
args: [{ selector: 'lib-analog-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1798
1798
|
'[class.has-background]': 'hasBackground()',
|
|
@@ -1817,7 +1817,7 @@ class ClockWidgetComponent {
|
|
|
1817
1817
|
hasBackground: true,
|
|
1818
1818
|
timeFormat: '24h',
|
|
1819
1819
|
showSeconds: true,
|
|
1820
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
1820
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1821
1821
|
constructor() {
|
|
1822
1822
|
// No timer logic needed - DigitalClock manages its own time
|
|
1823
1823
|
}
|
|
@@ -1854,10 +1854,10 @@ class ClockWidgetComponent {
|
|
|
1854
1854
|
get isDigital() {
|
|
1855
1855
|
return this.state().mode === 'digital';
|
|
1856
1856
|
}
|
|
1857
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1858
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1857
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClockWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1858
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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"] }] });
|
|
1859
1859
|
}
|
|
1860
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1860
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClockWidgetComponent, decorators: [{
|
|
1861
1861
|
type: Component,
|
|
1862
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"] }]
|
|
1863
1863
|
}], ctorParameters: () => [] });
|
|
@@ -1952,47 +1952,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1952
1952
|
*
|
|
1953
1953
|
*/
|
|
1954
1954
|
class RadialGaugeComponent {
|
|
1955
|
-
valueTextEl = viewChild('valueText', ...(ngDevMode ? [{ debugName: "valueTextEl" }] : []));
|
|
1956
|
-
valueGroupEl = viewChild('valueGroup', ...(ngDevMode ? [{ debugName: "valueGroupEl" }] : []));
|
|
1955
|
+
valueTextEl = viewChild('valueText', ...(ngDevMode ? [{ debugName: "valueTextEl" }] : /* istanbul ignore next */ []));
|
|
1956
|
+
valueGroupEl = viewChild('valueGroup', ...(ngDevMode ? [{ debugName: "valueGroupEl" }] : /* istanbul ignore next */ []));
|
|
1957
1957
|
refTextEl = viewChild.required('refText');
|
|
1958
1958
|
// Core Inputs - Value and Range
|
|
1959
|
-
value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1960
|
-
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
1961
|
-
max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
1962
|
-
segments = input(...(ngDevMode ? [undefined, { debugName: "segments" }] : []));
|
|
1963
|
-
title = input('Gauge', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
1964
|
-
description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
1965
|
-
segmentGapPx = input(4, ...(ngDevMode ? [{ debugName: "segmentGapPx" }] : []));
|
|
1959
|
+
value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1960
|
+
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
1961
|
+
max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
1962
|
+
segments = input(...(ngDevMode ? [undefined, { debugName: "segments" }] : /* istanbul ignore next */ []));
|
|
1963
|
+
title = input('Gauge', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1964
|
+
description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
1965
|
+
segmentGapPx = input(4, ...(ngDevMode ? [{ debugName: "segmentGapPx" }] : /* istanbul ignore next */ []));
|
|
1966
1966
|
// Widget styling inputs
|
|
1967
1967
|
/**
|
|
1968
1968
|
* Whether the gauge should display with a background.
|
|
1969
1969
|
* Affects text color contrast and other visual elements.
|
|
1970
1970
|
* @default false
|
|
1971
1971
|
*/
|
|
1972
|
-
hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : []));
|
|
1972
|
+
hasBackground = input(false, ...(ngDevMode ? [{ debugName: "hasBackground" }] : /* istanbul ignore next */ []));
|
|
1973
1973
|
/**
|
|
1974
1974
|
* Whether to display the numeric value label in the center of the gauge.
|
|
1975
1975
|
* @default true
|
|
1976
1976
|
*/
|
|
1977
|
-
showValueLabel = input(true, ...(ngDevMode ? [{ debugName: "showValueLabel" }] : []));
|
|
1977
|
+
showValueLabel = input(true, ...(ngDevMode ? [{ debugName: "showValueLabel" }] : /* istanbul ignore next */ []));
|
|
1978
1978
|
// Size Control Inputs
|
|
1979
1979
|
/**
|
|
1980
1980
|
* Base gauge diameter in pixels. Used as fallback when fitToContainer is false.
|
|
1981
1981
|
* @default 300
|
|
1982
1982
|
*/
|
|
1983
|
-
size = input(300, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1983
|
+
size = input(300, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1984
1984
|
/**
|
|
1985
1985
|
* Automatically resize gauge to fit its container dimensions.
|
|
1986
1986
|
* When true, the gauge will observe container size changes and adjust accordingly.
|
|
1987
1987
|
* Maintains semicircle aspect ratio (2:1 width:height).
|
|
1988
1988
|
* @default false
|
|
1989
1989
|
*/
|
|
1990
|
-
fitToContainer = input(false, ...(ngDevMode ? [{ debugName: "fitToContainer" }] : []));
|
|
1990
|
+
fitToContainer = input(false, ...(ngDevMode ? [{ debugName: "fitToContainer" }] : /* istanbul ignore next */ []));
|
|
1991
1991
|
/**
|
|
1992
1992
|
* Padding in pixels to maintain from container edges when fitToContainer is true.
|
|
1993
1993
|
* @default 10
|
|
1994
1994
|
*/
|
|
1995
|
-
containerPadding = input(10, ...(ngDevMode ? [{ debugName: "containerPadding" }] : []));
|
|
1995
|
+
containerPadding = input(10, ...(ngDevMode ? [{ debugName: "containerPadding" }] : /* istanbul ignore next */ []));
|
|
1996
1996
|
// Thickness Control Inputs
|
|
1997
1997
|
/**
|
|
1998
1998
|
* Use proportional thickness scaling based on gauge size.
|
|
@@ -2000,7 +2000,7 @@ class RadialGaugeComponent {
|
|
|
2000
2000
|
* Overrides manual outerThickness, innerThickness, and gap inputs.
|
|
2001
2001
|
* @default false
|
|
2002
2002
|
*/
|
|
2003
|
-
responsiveMode = input(false, ...(ngDevMode ? [{ debugName: "responsiveMode" }] : []));
|
|
2003
|
+
responsiveMode = input(false, ...(ngDevMode ? [{ debugName: "responsiveMode" }] : /* istanbul ignore next */ []));
|
|
2004
2004
|
/**
|
|
2005
2005
|
* Ratio used to calculate base thickness from gauge size.
|
|
2006
2006
|
* baseThickness = effectiveSize / sizeToThicknessRatio
|
|
@@ -2011,7 +2011,7 @@ class RadialGaugeComponent {
|
|
|
2011
2011
|
* - ratio=20: ultra-thin balanced appearance (bt = size/20)
|
|
2012
2012
|
* - ratio=30: extremely thin rings (bt = size/30)
|
|
2013
2013
|
*/
|
|
2014
|
-
sizeToThicknessRatio = input(20, ...(ngDevMode ? [{ debugName: "sizeToThicknessRatio" }] : []));
|
|
2014
|
+
sizeToThicknessRatio = input(20, ...(ngDevMode ? [{ debugName: "sizeToThicknessRatio" }] : /* istanbul ignore next */ []));
|
|
2015
2015
|
/**
|
|
2016
2016
|
* Proportional multipliers for responsive thickness calculations.
|
|
2017
2017
|
* - outer: Multiplier for outer ring thickness (default: 3)
|
|
@@ -2020,23 +2020,23 @@ class RadialGaugeComponent {
|
|
|
2020
2020
|
* Total thickness = baseThickness × (outer + inner + gap) = bt × 4.5
|
|
2021
2021
|
* @default { outer: 3, inner: 1, gap: 0.5 }
|
|
2022
2022
|
*/
|
|
2023
|
-
responsiveProportions = input({ outer: 3, inner: 1, gap: 0.5 }, ...(ngDevMode ? [{ debugName: "responsiveProportions" }] : []));
|
|
2023
|
+
responsiveProportions = input({ outer: 3, inner: 1, gap: 0.5 }, ...(ngDevMode ? [{ debugName: "responsiveProportions" }] : /* istanbul ignore next */ []));
|
|
2024
2024
|
// Manual Thickness Inputs (used when responsiveMode is false)
|
|
2025
2025
|
/**
|
|
2026
2026
|
* Manual outer ring thickness in pixels. Ignored when responsiveMode is true.
|
|
2027
2027
|
* @default 36
|
|
2028
2028
|
*/
|
|
2029
|
-
outerThickness = input(36, ...(ngDevMode ? [{ debugName: "outerThickness" }] : []));
|
|
2029
|
+
outerThickness = input(36, ...(ngDevMode ? [{ debugName: "outerThickness" }] : /* istanbul ignore next */ []));
|
|
2030
2030
|
/**
|
|
2031
2031
|
* Manual inner ring thickness in pixels. Ignored when responsiveMode is true.
|
|
2032
2032
|
* @default 12
|
|
2033
2033
|
*/
|
|
2034
|
-
innerThickness = input(12, ...(ngDevMode ? [{ debugName: "innerThickness" }] : []));
|
|
2034
|
+
innerThickness = input(12, ...(ngDevMode ? [{ debugName: "innerThickness" }] : /* istanbul ignore next */ []));
|
|
2035
2035
|
/**
|
|
2036
2036
|
* Manual gap between rings in pixels. Ignored when responsiveMode is true.
|
|
2037
2037
|
* @default 8
|
|
2038
2038
|
*/
|
|
2039
|
-
gap = input(8, ...(ngDevMode ? [{ debugName: "gap" }] : []));
|
|
2039
|
+
gap = input(8, ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
2040
2040
|
titleId = `rg-title-${Math.random().toString(36).slice(2)}`;
|
|
2041
2041
|
descId = `rg-desc-${Math.random().toString(36).slice(2)}`;
|
|
2042
2042
|
clipId = `rg-clip-${Math.random().toString(36).slice(2)}`;
|
|
@@ -2052,7 +2052,7 @@ class RadialGaugeComponent {
|
|
|
2052
2052
|
* Updated by ResizeObserver when fitToContainer is enabled.
|
|
2053
2053
|
* @private
|
|
2054
2054
|
*/
|
|
2055
|
-
containerSize = signal(null, ...(ngDevMode ? [{ debugName: "containerSize" }] : []));
|
|
2055
|
+
containerSize = signal(null, ...(ngDevMode ? [{ debugName: "containerSize" }] : /* istanbul ignore next */ []));
|
|
2056
2056
|
/**
|
|
2057
2057
|
* ResizeObserver instance for monitoring container size changes.
|
|
2058
2058
|
* Created when fitToContainer is enabled, destroyed on component cleanup.
|
|
@@ -2116,7 +2116,7 @@ class RadialGaugeComponent {
|
|
|
2116
2116
|
this.resizeObserver = null;
|
|
2117
2117
|
this.containerSize.set(null);
|
|
2118
2118
|
}
|
|
2119
|
-
}, ...(ngDevMode ? [{ debugName: "containerObserverEffect" }] : []));
|
|
2119
|
+
}, ...(ngDevMode ? [{ debugName: "containerObserverEffect" }] : /* istanbul ignore next */ []));
|
|
2120
2120
|
// ── Build the reference string reactively ───────────────────────────────────
|
|
2121
2121
|
referenceString = computed(() => {
|
|
2122
2122
|
const ref = this.labelReference();
|
|
@@ -2127,7 +2127,7 @@ class RadialGaugeComponent {
|
|
|
2127
2127
|
return g.repeat(ref);
|
|
2128
2128
|
}
|
|
2129
2129
|
return this.formattedLabel(); // measure actual label
|
|
2130
|
-
}, ...(ngDevMode ? [{ debugName: "referenceString" }] : []));
|
|
2130
|
+
}, ...(ngDevMode ? [{ debugName: "referenceString" }] : /* istanbul ignore next */ []));
|
|
2131
2131
|
// ── Core transform: center + uniform scale to fit the reserved box ──────────
|
|
2132
2132
|
valueTransform = computed(() => {
|
|
2133
2133
|
if (!this.showValueLabel())
|
|
@@ -2159,7 +2159,7 @@ class RadialGaugeComponent {
|
|
|
2159
2159
|
const s = Math.min(boxWidth / widthForFit, boxHeight / heightForFit) *
|
|
2160
2160
|
this.baselineSafety();
|
|
2161
2161
|
return `translate(${cx},${cy}) scale(${s})`;
|
|
2162
|
-
}, ...(ngDevMode ? [{ debugName: "valueTransform" }] : []));
|
|
2162
|
+
}, ...(ngDevMode ? [{ debugName: "valueTransform" }] : /* istanbul ignore next */ []));
|
|
2163
2163
|
/** Guarded getBBox that avoids 0/NaN on detached or invisible nodes. */
|
|
2164
2164
|
safeBBox(node) {
|
|
2165
2165
|
try {
|
|
@@ -2193,7 +2193,7 @@ class RadialGaugeComponent {
|
|
|
2193
2193
|
return containerDiameter;
|
|
2194
2194
|
}
|
|
2195
2195
|
return this.size();
|
|
2196
|
-
}, ...(ngDevMode ? [{ debugName: "effectiveSize" }] : []));
|
|
2196
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
|
|
2197
2197
|
/**
|
|
2198
2198
|
* Base thickness calculated from effective size for proportional scaling.
|
|
2199
2199
|
* Only used when responsiveMode is enabled.
|
|
@@ -2209,7 +2209,7 @@ class RadialGaugeComponent {
|
|
|
2209
2209
|
if (!this.responsiveMode())
|
|
2210
2210
|
return 0;
|
|
2211
2211
|
return this.effectiveSize() / this.sizeToThicknessRatio();
|
|
2212
|
-
}, ...(ngDevMode ? [{ debugName: "baseThickness" }] : []));
|
|
2212
|
+
}, ...(ngDevMode ? [{ debugName: "baseThickness" }] : /* istanbul ignore next */ []));
|
|
2213
2213
|
/**
|
|
2214
2214
|
* Effective outer ring thickness, supporting both manual and responsive modes.
|
|
2215
2215
|
* - Responsive mode: baseThickness × responsiveProportions.outer
|
|
@@ -2221,7 +2221,7 @@ class RadialGaugeComponent {
|
|
|
2221
2221
|
return this.baseThickness() * this.responsiveProportions().outer;
|
|
2222
2222
|
}
|
|
2223
2223
|
return this.outerThickness();
|
|
2224
|
-
}, ...(ngDevMode ? [{ debugName: "effectiveOuterThickness" }] : []));
|
|
2224
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveOuterThickness" }] : /* istanbul ignore next */ []));
|
|
2225
2225
|
/**
|
|
2226
2226
|
* Effective inner ring thickness, supporting both manual and responsive modes.
|
|
2227
2227
|
* - Responsive mode: baseThickness × responsiveProportions.inner
|
|
@@ -2233,7 +2233,7 @@ class RadialGaugeComponent {
|
|
|
2233
2233
|
return this.baseThickness() * this.responsiveProportions().inner;
|
|
2234
2234
|
}
|
|
2235
2235
|
return this.innerThickness();
|
|
2236
|
-
}, ...(ngDevMode ? [{ debugName: "effectiveInnerThickness" }] : []));
|
|
2236
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveInnerThickness" }] : /* istanbul ignore next */ []));
|
|
2237
2237
|
/**
|
|
2238
2238
|
* Effective gap between rings, supporting both manual and responsive modes.
|
|
2239
2239
|
* - Responsive mode: baseThickness × responsiveProportions.gap
|
|
@@ -2245,44 +2245,44 @@ class RadialGaugeComponent {
|
|
|
2245
2245
|
return this.baseThickness() * this.responsiveProportions().gap;
|
|
2246
2246
|
}
|
|
2247
2247
|
return this.gap();
|
|
2248
|
-
}, ...(ngDevMode ? [{ debugName: "effectiveGap" }] : []));
|
|
2248
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveGap" }] : /* istanbul ignore next */ []));
|
|
2249
2249
|
// SVG Layout Calculations
|
|
2250
|
-
svgPadding = computed(() => this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "svgPadding" }] : []));
|
|
2251
|
-
svgWidth = computed(() => this.effectiveSize() + this.effectiveOuterThickness(), ...(ngDevMode ? [{ debugName: "svgWidth" }] : []));
|
|
2252
|
-
svgHeight = computed(() => Math.ceil(this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2), ...(ngDevMode ? [{ debugName: "svgHeight" }] : []));
|
|
2253
|
-
centerX = computed(() => this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "centerX" }] : []));
|
|
2254
|
-
centerY = computed(() => this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "centerY" }] : []));
|
|
2250
|
+
svgPadding = computed(() => this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "svgPadding" }] : /* istanbul ignore next */ []));
|
|
2251
|
+
svgWidth = computed(() => this.effectiveSize() + this.effectiveOuterThickness(), ...(ngDevMode ? [{ debugName: "svgWidth" }] : /* istanbul ignore next */ []));
|
|
2252
|
+
svgHeight = computed(() => Math.ceil(this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2), ...(ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []));
|
|
2253
|
+
centerX = computed(() => this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "centerX" }] : /* istanbul ignore next */ []));
|
|
2254
|
+
centerY = computed(() => this.effectiveSize() / 2 + this.effectiveOuterThickness() / 2, ...(ngDevMode ? [{ debugName: "centerY" }] : /* istanbul ignore next */ []));
|
|
2255
2255
|
/**
|
|
2256
2256
|
* If a string is provided, we measure it and allocate space for that width.
|
|
2257
2257
|
* If a number is provided, we build a string of that many `referenceGlyph`s.
|
|
2258
2258
|
* If omitted, we fall back to measuring the actual label.
|
|
2259
2259
|
*/
|
|
2260
|
-
labelReference = input(undefined, ...(ngDevMode ? [{ debugName: "labelReference" }] : []));
|
|
2260
|
+
labelReference = input(undefined, ...(ngDevMode ? [{ debugName: "labelReference" }] : /* istanbul ignore next */ []));
|
|
2261
2261
|
/** Glyph to repeat when labelReference is a number (defaults to '0'). */
|
|
2262
|
-
referenceGlyph = input('0', ...(ngDevMode ? [{ debugName: "referenceGlyph" }] : []));
|
|
2262
|
+
referenceGlyph = input('0', ...(ngDevMode ? [{ debugName: "referenceGlyph" }] : /* istanbul ignore next */ []));
|
|
2263
2263
|
/** Extra breathing room inside the inner semicircle box (in px). */
|
|
2264
|
-
labelPadding = input(4, ...(ngDevMode ? [{ debugName: "labelPadding" }] : []));
|
|
2264
|
+
labelPadding = input(4, ...(ngDevMode ? [{ debugName: "labelPadding" }] : /* istanbul ignore next */ []));
|
|
2265
2265
|
/** Safety multiplier to avoid clipping ascenders/descenders. */
|
|
2266
|
-
baselineSafety = input(0.95, ...(ngDevMode ? [{ debugName: "baselineSafety" }] : []));
|
|
2267
|
-
outerRadius = computed(() => this.effectiveSize() / 2, ...(ngDevMode ? [{ debugName: "outerRadius" }] : []));
|
|
2266
|
+
baselineSafety = input(0.95, ...(ngDevMode ? [{ debugName: "baselineSafety" }] : /* istanbul ignore next */ []));
|
|
2267
|
+
outerRadius = computed(() => this.effectiveSize() / 2, ...(ngDevMode ? [{ debugName: "outerRadius" }] : /* istanbul ignore next */ []));
|
|
2268
2268
|
innerRadius = computed(() => this.outerRadius() -
|
|
2269
2269
|
this.effectiveOuterThickness() / 2 -
|
|
2270
|
-
this.effectiveGap(), ...(ngDevMode ? [{ debugName: "innerRadius" }] : []));
|
|
2270
|
+
this.effectiveGap(), ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
|
|
2271
2271
|
legendOuterRadius = computed(() => this.outerRadius() -
|
|
2272
2272
|
this.effectiveOuterThickness() / 2 -
|
|
2273
2273
|
this.effectiveGap() -
|
|
2274
|
-
this.effectiveInnerThickness() / 2, ...(ngDevMode ? [{ debugName: "legendOuterRadius" }] : []));
|
|
2275
|
-
legendInnerRadius = computed(() => this.legendOuterRadius() - this.effectiveInnerThickness(), ...(ngDevMode ? [{ debugName: "legendInnerRadius" }] : []));
|
|
2274
|
+
this.effectiveInnerThickness() / 2, ...(ngDevMode ? [{ debugName: "legendOuterRadius" }] : /* istanbul ignore next */ []));
|
|
2275
|
+
legendInnerRadius = computed(() => this.legendOuterRadius() - this.effectiveInnerThickness(), ...(ngDevMode ? [{ debugName: "legendInnerRadius" }] : /* istanbul ignore next */ []));
|
|
2276
2276
|
startAngle = -180;
|
|
2277
2277
|
endAngle = 0;
|
|
2278
|
-
clampedValue = computed(() => this.clamp(this.value(), this.min(), this.max()), ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
|
|
2278
|
+
clampedValue = computed(() => this.clamp(this.value(), this.min(), this.max()), ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
|
|
2279
2279
|
percentage = computed(() => {
|
|
2280
2280
|
const range = this.max() - this.min();
|
|
2281
2281
|
if (range === 0)
|
|
2282
2282
|
return 0;
|
|
2283
2283
|
return (this.clampedValue() - this.min()) / range;
|
|
2284
|
-
}, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
|
|
2285
|
-
percent = computed(() => Math.round(this.percentage() * 100), ...(ngDevMode ? [{ debugName: "percent" }] : []));
|
|
2284
|
+
}, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
|
|
2285
|
+
percent = computed(() => Math.round(this.percentage() * 100), ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
|
|
2286
2286
|
defaultSegments = computed(() => {
|
|
2287
2287
|
const minVal = this.min();
|
|
2288
2288
|
const maxVal = this.max();
|
|
@@ -2304,9 +2304,9 @@ class RadialGaugeComponent {
|
|
|
2304
2304
|
color: 'var(--gauge-value-good, #10b981)',
|
|
2305
2305
|
},
|
|
2306
2306
|
];
|
|
2307
|
-
}, ...(ngDevMode ? [{ debugName: "defaultSegments" }] : []));
|
|
2308
|
-
actualSegments = computed(() => this.segments() || this.defaultSegments(), ...(ngDevMode ? [{ debugName: "actualSegments" }] : []));
|
|
2309
|
-
formattedLabel = computed(() => this.nf.format(this.clampedValue()), ...(ngDevMode ? [{ debugName: "formattedLabel" }] : []));
|
|
2307
|
+
}, ...(ngDevMode ? [{ debugName: "defaultSegments" }] : /* istanbul ignore next */ []));
|
|
2308
|
+
actualSegments = computed(() => this.segments() || this.defaultSegments(), ...(ngDevMode ? [{ debugName: "actualSegments" }] : /* istanbul ignore next */ []));
|
|
2309
|
+
formattedLabel = computed(() => this.nf.format(this.clampedValue()), ...(ngDevMode ? [{ debugName: "formattedLabel" }] : /* istanbul ignore next */ []));
|
|
2310
2310
|
valueColor = computed(() => {
|
|
2311
2311
|
const v = this.clampedValue();
|
|
2312
2312
|
const segs = this.actualSegments();
|
|
@@ -2315,8 +2315,8 @@ class RadialGaugeComponent {
|
|
|
2315
2315
|
return s.color;
|
|
2316
2316
|
}
|
|
2317
2317
|
return segs.at(-1)?.color ?? 'var(--mat-sys-primary)';
|
|
2318
|
-
}, ...(ngDevMode ? [{ debugName: "valueColor" }] : []));
|
|
2319
|
-
backgroundArcPath = computed(() => this.createArcPath(this.outerRadius(), this.startAngle, this.endAngle), ...(ngDevMode ? [{ debugName: "backgroundArcPath" }] : []));
|
|
2318
|
+
}, ...(ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []));
|
|
2319
|
+
backgroundArcPath = computed(() => this.createArcPath(this.outerRadius(), this.startAngle, this.endAngle), ...(ngDevMode ? [{ debugName: "backgroundArcPath" }] : /* istanbul ignore next */ []));
|
|
2320
2320
|
segmentPaths = computed(() => {
|
|
2321
2321
|
const segs = this.actualSegments();
|
|
2322
2322
|
const minVal = this.min();
|
|
@@ -2341,8 +2341,8 @@ class RadialGaugeComponent {
|
|
|
2341
2341
|
return { path: this.createArcPath(r, a0, a1), color: s.color };
|
|
2342
2342
|
})
|
|
2343
2343
|
.filter((x) => !!x);
|
|
2344
|
-
}, ...(ngDevMode ? [{ debugName: "segmentPaths" }] : []));
|
|
2345
|
-
ariaLabel = computed(() => `${this.title()}: ${this.formattedLabel()} (range ${this.min()}–${this.max()})`, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
2344
|
+
}, ...(ngDevMode ? [{ debugName: "segmentPaths" }] : /* istanbul ignore next */ []));
|
|
2345
|
+
ariaLabel = computed(() => `${this.title()}: ${this.formattedLabel()} (range ${this.min()}–${this.max()})`, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2346
2346
|
clamp(v, min, max) {
|
|
2347
2347
|
return Math.min(Math.max(v, min), max);
|
|
2348
2348
|
}
|
|
@@ -2420,10 +2420,10 @@ class RadialGaugeComponent {
|
|
|
2420
2420
|
const semicircumference = Math.PI * r;
|
|
2421
2421
|
return 180 * this.clamp(px / semicircumference, 0, 1);
|
|
2422
2422
|
}
|
|
2423
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2424
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2423
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadialGaugeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2424
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RadialGaugeComponent, isStandalone: true, selector: "ngx-radial-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, segmentGapPx: { classPropertyName: "segmentGapPx", publicName: "segmentGapPx", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fitToContainer: { classPropertyName: "fitToContainer", publicName: "fitToContainer", isSignal: true, isRequired: false, transformFunction: null }, containerPadding: { classPropertyName: "containerPadding", publicName: "containerPadding", isSignal: true, isRequired: false, transformFunction: null }, responsiveMode: { classPropertyName: "responsiveMode", publicName: "responsiveMode", isSignal: true, isRequired: false, transformFunction: null }, sizeToThicknessRatio: { classPropertyName: "sizeToThicknessRatio", publicName: "sizeToThicknessRatio", isSignal: true, isRequired: false, transformFunction: null }, responsiveProportions: { classPropertyName: "responsiveProportions", publicName: "responsiveProportions", isSignal: true, isRequired: false, transformFunction: null }, outerThickness: { classPropertyName: "outerThickness", publicName: "outerThickness", isSignal: true, isRequired: false, transformFunction: null }, innerThickness: { classPropertyName: "innerThickness", publicName: "innerThickness", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, labelReference: { classPropertyName: "labelReference", publicName: "labelReference", isSignal: true, isRequired: false, transformFunction: null }, referenceGlyph: { classPropertyName: "referenceGlyph", publicName: "referenceGlyph", isSignal: true, isRequired: false, transformFunction: null }, labelPadding: { classPropertyName: "labelPadding", publicName: "labelPadding", isSignal: true, isRequired: false, transformFunction: null }, baselineSafety: { classPropertyName: "baselineSafety", publicName: "baselineSafety", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "clampedValue()", "attr.aria-valuetext": "formattedLabel()", "attr.aria-labelledby": "titleId", "attr.aria-describedby": "descId", "class.fit-container": "fitToContainer()", "class.has-background": "hasBackground()" } }, viewQueries: [{ propertyName: "valueTextEl", first: true, predicate: ["valueText"], descendants: true, isSignal: true }, { propertyName: "valueGroupEl", first: true, predicate: ["valueGroup"], descendants: true, isSignal: true }, { propertyName: "refTextEl", first: true, predicate: ["refText"], descendants: true, isSignal: true }], ngImport: i0, template: "@let w = svgWidth(); @let h = svgHeight(); @let cy = centerY(); @let pct =\npercent();\n\n<svg\n [attr.width]=\"fitToContainer() ? null : w\"\n [attr.height]=\"fitToContainer() ? null : h\"\n [attr.viewBox]=\"'0 0 ' + w + ' ' + h\"\n [class.responsive]=\"fitToContainer()\"\n class=\"gauge-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <title [attr.id]=\"titleId\">{{ title() }}</title>\n @if (description()) {\n <desc [attr.id]=\"descId\">{{ description() }}</desc>\n }\n\n <defs>\n <clipPath [attr.id]=\"clipId\">\n <!-- Give a tiny extra room equal to half of the outer stroke to avoid anti-alias cutoff at the baseline -->\n <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"w\"\n [attr.height]=\"cy + effectiveOuterThickness() / 2\"\n />\n </clipPath>\n </defs>\n\n <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\n <path\n [attr.d]=\"backgroundArcPath()\"\n pathLength=\"100\"\n fill=\"none\"\n class=\"gauge-background\"\n [attr.stroke-width]=\"effectiveOuterThickness()\"\n stroke-linecap=\"butt\"\n />\n\n <path\n [attr.d]=\"backgroundArcPath()\"\n pathLength=\"100\"\n fill=\"none\"\n class=\"gauge-value\"\n [attr.stroke]=\"valueColor()\"\n [attr.stroke-width]=\"effectiveOuterThickness()\"\n stroke-linecap=\"butt\"\n [attr.stroke-dasharray]=\"pct + ' 100'\"\n />\n\n @for (segment of segmentPaths(); track segment.path) {\n <path\n [attr.d]=\"segment.path\"\n fill=\"none\"\n [attr.stroke]=\"segment.color\"\n [attr.stroke-width]=\"effectiveInnerThickness()\"\n stroke-linecap=\"butt\"\n class=\"gauge-segment\"\n />\n }\n </g>\n\n @if (showValueLabel()) {\n <g #valueGroup [attr.transform]=\"valueTransform()\">\n <text\n #valueText\n class=\"gauge-value-text\"\n x=\"0\"\n y=\"0\"\n text-anchor=\"middle\"\n alignment-baseline=\"baseline\"\n dy=\"-0.75\"\n >\n {{ formattedLabel() }}\n </text>\n </g>\n }\n\n <!-- Hidden reference text used ONLY for width measurement -->\n <g style=\"visibility: hidden; pointer-events: none\" aria-hidden=\"true\">\n <text\n #refText\n x=\"0\"\n y=\"0\"\n text-anchor=\"start\"\n dominant-baseline=\"alphabetic\"\n >\n {{ referenceString() }}\n </text>\n </g>\n</svg>\n", styles: [":host{display:block;--gauge-outer-bg: var(--mat-sys-surface-variant, #e0e0e0);--gauge-value-good: var(--mat-sys-tertiary, #10b981);--gauge-value-warning: var(--mat-sys-secondary, #f59e0b);--gauge-value-critical: var(--mat-sys-error, #dc2626)}:host.fit-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.gauge-svg{display:block;margin-inline:auto;max-width:100%;height:auto;shape-rendering:geometricPrecision}.gauge-svg.responsive{max-width:100%;max-height:100%;width:auto;height:auto}.gauge-background{stroke:var(--gauge-outer-bg);transition:stroke .2s ease}.gauge-value{transition:stroke-dasharray .2s ease,stroke .2s ease}.gauge-segment{transition:stroke .2s ease;opacity:.9}.gauge-segment:hover{opacity:1}@media(prefers-reduced-motion:reduce){.gauge-value,.gauge-segment{transition:none}}@media(prefers-contrast:high){.gauge-background{stroke-width:2;stroke:var(--mat-sys-outline, #000000)}.gauge-segment{opacity:1}}@media(prefers-color-scheme:dark){:host{--gauge-outer-bg: #374151}}.gauge-value-text{fill:var(--mat-sys-on-surface-variant, #6c757d);font-family:var(--mat-sys-typescale-body-large-font, \"Roboto\", sans-serif);font-weight:var(--mat-sys-typescale-body-large-weight, 400);transition:fill var(--mat-sys-motion-duration-short2, .2s) var(--mat-sys-motion-easing-standard, ease)}:host.has-background .gauge-value-text{fill:var(--mat-sys-on-surface, #1f1f1f)}:host:hover .gauge-value-text{fill:var(--mat-sys-primary, #6750a4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2425
2425
|
}
|
|
2426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadialGaugeComponent, decorators: [{
|
|
2427
2427
|
type: Component,
|
|
2428
2428
|
args: [{ selector: 'ngx-radial-gauge', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2429
2429
|
role: 'meter',
|
|
@@ -2491,8 +2491,8 @@ class RadialGaugeStateDialogComponent {
|
|
|
2491
2491
|
onSave() {
|
|
2492
2492
|
this.dialogRef.close(this.localState);
|
|
2493
2493
|
}
|
|
2494
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
2494
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadialGaugeStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2495
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RadialGaugeStateDialogComponent, isStandalone: true, selector: "lib-radial-gauge-state-dialog", ngImport: i0, template: `
|
|
2496
2496
|
<h2
|
|
2497
2497
|
mat-dialog-title
|
|
2498
2498
|
i18n="@@ngx.dashboard.widgets.radialGauge.dialog.title"
|
|
@@ -2600,7 +2600,7 @@ class RadialGaugeStateDialogComponent {
|
|
|
2600
2600
|
</mat-dialog-actions>
|
|
2601
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 });
|
|
2602
2602
|
}
|
|
2603
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2603
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadialGaugeStateDialogComponent, decorators: [{
|
|
2604
2604
|
type: Component,
|
|
2605
2605
|
args: [{ selector: 'lib-radial-gauge-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2606
2606
|
MatDialogModule,
|
|
@@ -2736,7 +2736,7 @@ class RadialGaugeWidgetComponent {
|
|
|
2736
2736
|
active: false,
|
|
2737
2737
|
hasBackground: true,
|
|
2738
2738
|
showValueLabel: true,
|
|
2739
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
2739
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
2740
2740
|
segments = computed(() => {
|
|
2741
2741
|
const profile = this.state().colorProfile || 'dynamic';
|
|
2742
2742
|
if (profile === 'static') {
|
|
@@ -2756,7 +2756,7 @@ class RadialGaugeWidgetComponent {
|
|
|
2756
2756
|
{ from: 80, to: 100, color: 'var(--mat-sys-tertiary)' },
|
|
2757
2757
|
];
|
|
2758
2758
|
}
|
|
2759
|
-
}, ...(ngDevMode ? [{ debugName: "segments" }] : []));
|
|
2759
|
+
}, ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
|
|
2760
2760
|
dashboardSetState(state) {
|
|
2761
2761
|
if (state) {
|
|
2762
2762
|
this.state.update((current) => ({
|
|
@@ -2782,10 +2782,10 @@ class RadialGaugeWidgetComponent {
|
|
|
2782
2782
|
}
|
|
2783
2783
|
});
|
|
2784
2784
|
}
|
|
2785
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2786
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2785
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadialGaugeWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2786
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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"] }] });
|
|
2787
2787
|
}
|
|
2788
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2788
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadialGaugeWidgetComponent, decorators: [{
|
|
2789
2789
|
type: Component,
|
|
2790
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"] }]
|
|
2791
2791
|
}] });
|