@dragonworks/ngx-dashboard-widgets 21.1.1 → 21.2.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.2.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>';
|
|
@@ -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.2.
|
|
86
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
85
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ArrowStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
86
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: ArrowStateDialogComponent, isStandalone: true, selector: "lib-arrow-state-dialog", ngImport: i0, template: `
|
|
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.2.
|
|
172
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ArrowStateDialogComponent, decorators: [{
|
|
173
173
|
type: Component,
|
|
174
174
|
args: [{ selector: 'lib-arrow-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
175
175
|
FormsModule,
|
|
@@ -317,10 +317,10 @@ class ArrowWidgetComponent {
|
|
|
317
317
|
}
|
|
318
318
|
});
|
|
319
319
|
}
|
|
320
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
321
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
320
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ArrowWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
321
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: ArrowWidgetComponent, isStandalone: true, selector: "ngx-dashboard-arrow-widget", ngImport: i0, template: "<!-- arrow-widget.component.html -->\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div\n class=\"svg-placeholder\"\n [innerHTML]=\"safeSvgIcon\"\n [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\n [style.opacity]=\"state().opacity\"\n ></div>\n</div>\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.svg-wrapper.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] });
|
|
322
322
|
}
|
|
323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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
|
}] });
|
|
@@ -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.2.
|
|
436
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
435
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LabelStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
436
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LabelStateDialogComponent, isStandalone: true, selector: "lib-label-state-dialog", ngImport: i0, template: `
|
|
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.2.
|
|
688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LabelStateDialogComponent, decorators: [{
|
|
689
689
|
type: Component,
|
|
690
690
|
args: [{ selector: 'lib-label-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
691
691
|
FormsModule,
|
|
@@ -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.2.
|
|
1230
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
1229
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ResponsiveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1230
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: ResponsiveTextDirective, isStandalone: true, selector: "[libResponsiveText]", inputs: { minFontSize: { classPropertyName: "minFontSize", publicName: "minFontSize", isSignal: true, isRequired: false, transformFunction: null }, maxFontSize: { classPropertyName: "maxFontSize", publicName: "maxFontSize", isSignal: true, isRequired: false, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, observeMutations: { classPropertyName: "observeMutations", publicName: "observeMutations", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, templateString: { classPropertyName: "templateString", publicName: "templateString", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.white-space": "\"nowrap\"", "style.overflow": "\"visible\"" } }, ngImport: i0 });
|
|
1231
1231
|
}
|
|
1232
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
|
|
1233
1233
|
type: Directive,
|
|
1234
1234
|
args: [{
|
|
1235
1235
|
selector: '[libResponsiveText]',
|
|
@@ -1306,10 +1306,10 @@ class LabelWidgetComponent {
|
|
|
1306
1306
|
minFontSize = computed(() => this.state().minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : /* istanbul ignore next */ []));
|
|
1307
1307
|
maxFontSize = computed(() => this.state().maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : /* istanbul ignore next */ []));
|
|
1308
1308
|
templateString = computed(() => this.state().templateString, ...(ngDevMode ? [{ debugName: "templateString" }] : /* istanbul ignore next */ []));
|
|
1309
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1310
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1309
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LabelWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LabelWidgetComponent, isStandalone: true, selector: "ngx-dashboard-label-widget", ngImport: i0, template: "@if (hasContent) {\n<div\n class=\"label-widget\"\n [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\n [style.--widget-opacity]=\"state().opacity\"\n [class.text-left]=\"state().alignment === 'left'\"\n [class.text-right]=\"state().alignment === 'right'\"\n [class.font-bold]=\"state().fontWeight === 'bold'\"\n [class.has-background]=\"state().hasBackground\"\n>\n @if (state().responsive) {\n <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\" [templateString]=\"templateString()\">{{ label }}</div>\n } @else {\n <div class=\"label-text\">{{ label }}</div>\n }\n</div>\n} @else {\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n</div>\n}\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "directive", type: ResponsiveTextDirective, selector: "[libResponsiveText]", inputs: ["minFontSize", "maxFontSize", "lineHeight", "observeMutations", "debounceMs", "templateString"] }] });
|
|
1311
1311
|
}
|
|
1312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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
|
}] });
|
|
@@ -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.2.
|
|
1392
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1391
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ClockStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1392
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ClockStateDialogComponent, isStandalone: true, selector: "lib-clock-state-dialog", ngImport: i0, template: `
|
|
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.2.
|
|
1512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ClockStateDialogComponent, decorators: [{
|
|
1513
1513
|
type: Component,
|
|
1514
1514
|
args: [{ selector: 'lib-clock-state-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1515
1515
|
FormsModule,
|
|
@@ -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.2.
|
|
1705
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1704
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DigitalClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1705
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: DigitalClockComponent, isStandalone: true, selector: "lib-digital-clock", inputs: { timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-background": "hasBackground()", "class.show-pm": "timeFormat() === \"12h\"", "class.show-seconds": "showSeconds()" }, classAttribute: "clock-widget digital" }, ngImport: i0, template: "<div responsiveText class=\"digital-time\">{{ formattedTime() }}</div>\n", styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard);padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}:host.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px;color:var(--mat-sys-on-surface, #1f1f1f)}:host:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.digital-time{font-size:clamp(8px,min(20cqw,50cqh),200px);font-family:monospace;font-weight:500;letter-spacing:.05em;transition:color .2s ease}:host.show-pm.show-seconds .digital-time{font-size:clamp(8px,min(15cqw,50cqh),200px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1706
1706
|
}
|
|
1707
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1707
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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()',
|
|
@@ -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.2.
|
|
1793
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
1792
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: AnalogClockComponent, isStandalone: true, selector: "lib-analog-clock", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-background": "hasBackground()", "class.show-seconds": "showSeconds()" }, classAttribute: "clock-widget analog" }, viewQueries: [{ propertyName: "hourHand", first: true, predicate: ["hourHand"], descendants: true, isSignal: true }, { propertyName: "minuteHand", first: true, predicate: ["minuteHand"], descendants: true, isSignal: true }, { propertyName: "secondHand", first: true, predicate: ["secondHand"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"analog-clock-container\">\n <div class=\"aspect-ratio-box\">\n <svg\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 800 800\"\n preserveAspectRatio=\"xMidYMid meet\"\n >\n <!-- Optional face circle; uncomment if you want a visible outline by default -->\n <!-- <circle cx=\"400\" cy=\"400\" r=\"400\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"2\" /> -->\n\n <use transform=\"matrix(-1,0,0,1,800,0)\" href=\"#one-half\" />\n <g id=\"one-half\">\n <g id=\"one-fourth\">\n <!-- 12 / 3 / 6 / 9 heavy marks -->\n <path d=\"m400 40v107\" stroke-width=\"26.7\" stroke=\"currentColor\" />\n <g id=\"one-twelfth\">\n <!-- 30\u00B0 heavy marks -->\n <path\n d=\"m580 88.233-42.5 73.612\"\n stroke-width=\"26.7\"\n stroke=\"currentColor\"\n />\n <g id=\"one-thirtieth\">\n <!-- minute/second ticks -->\n <path\n id=\"one-sixtieth\"\n d=\"m437.63 41.974-3.6585 34.808\"\n stroke-width=\"13.6\"\n stroke=\"currentColor\"\n />\n <use transform=\"rotate(6 400 400)\" href=\"#one-sixtieth\" />\n </g>\n <use transform=\"rotate(12 400 400)\" href=\"#one-thirtieth\" />\n </g>\n <use transform=\"rotate(30 400 400)\" href=\"#one-twelfth\" />\n <use transform=\"rotate(60 400 400)\" href=\"#one-twelfth\" />\n </g>\n <use transform=\"rotate(90 400 400)\" href=\"#one-fourth\" />\n </g>\n\n <!-- Hands -->\n <path\n class=\"clock-hour-hand\"\n id=\"anim-clock-hour-hand\"\n #hourHand\n d=\"m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z\"\n transform=\"rotate(110.2650694444, 400, 400)\"\n />\n <path\n class=\"clock-minute-hand\"\n id=\"anim-clock-minute-hand\"\n #minuteHand\n d=\"M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z\"\n transform=\"rotate(243.1808333333, 400, 400)\"\n />\n <path\n class=\"clock-second-hand\"\n id=\"anim-clock-second-hand\"\n #secondHand\n d=\"M 397.317,63.51744 395.91962,168.4 C 374.575,170.5125 358.2,188.365 358.2,210 c 0,21.635 16.3,39 36.61214,41.47594 L 391.52847,498 h 16.94306 L 405.1868,251.47593 C 425.5,249 441.8,231.635 441.8,210 c 2e-5,-21.635 -16.375,-39.4875 -37.71971,-41.6 L 402.683,63.51744 400,60 Z M 400,190.534 c 10.888,0 19.466,8.866 19.466,19.466 0,10.6 -8.578,19.466 -19.466,19.466 -10.888,0 -19.466,-8.866 -19.466,-19.466 0,-10.6 8.578,-19.466 19.466,-19.466 z\"\n transform=\"rotate(190.85, 400, 400)\"\n />\n </svg>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.analog-clock-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.analog-clock-container .aspect-ratio-box{position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:1/1}@supports not (aspect-ratio: 1/1){.analog-clock-container .aspect-ratio-box:before{content:\"\";display:block;padding-bottom:100%}.analog-clock-container .aspect-ratio-box svg{position:absolute;top:0;left:0;width:100%;height:100%}}.analog-clock-container .aspect-ratio-box svg{display:block;width:100%;height:100%}.analog-clock-container .aspect-ratio-box svg path:not(.clock-hour-hand):not(.clock-minute-hand):not(.clock-second-hand){stroke:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}:host:not(.show-seconds) .clock-second-hand{display:none}:host.has-background svg circle{fill:var(--mat-sys-surface, #fffbfe)}:host:hover{opacity:.8}:host:hover svg .clock-hour-hand,:host:hover svg .clock-minute-hand{fill:var(--mat-sys-primary, #6750a4)}:host.clock-widget.analog{container-type:size;container-name:analog-clock}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1794
1794
|
}
|
|
1795
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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()',
|
|
@@ -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.2.
|
|
1858
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1857
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ClockWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1858
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ClockWidgetComponent, isStandalone: true, selector: "ngx-dashboard-clock-widget", ngImport: i0, template: "@if (isDigital) {\n <lib-digital-clock\n [timeFormat]=\"state().timeFormat || '24h'\"\n [showSeconds]=\"state().showSeconds ?? true\"\n [hasBackground]=\"state().hasBackground ?? false\"\n />\n} @else if (isAnalog) {\n <lib-analog-clock\n [hasBackground]=\"state().hasBackground ?? false\"\n [showSeconds]=\"state().showSeconds ?? true\"\n />\n} @else {\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n</div>\n}", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.clock-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.clock-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.clock-widget{padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}.clock-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.clock-widget:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.analog-clock{width:min(80cqw,80cqh);aspect-ratio:1/1;position:relative}.clock-face{width:100%;height:100%;border:2px solid currentColor;border-radius:50%;position:relative}.clock-face:before,.clock-face:after{content:\"\";position:absolute;background-color:currentColor;left:50%;transform:translate(-50%)}.clock-face:before{width:2px;height:10%;top:0}.clock-face:after{width:2px;height:10%;bottom:0}.hour-hand,.minute-hand{position:absolute;background-color:currentColor;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px}.hour-hand{width:4px;height:25%;transform:translate(-50%) rotate(30deg)}.minute-hand{width:2px;height:35%;transform:translate(-50%) rotate(90deg)}.center-dot{position:absolute;width:8px;height:8px;background-color:currentColor;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-placeholder ::ng-deep svg .clock-face{stroke:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.svg-placeholder ::ng-deep svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}.has-background .svg-placeholder ::ng-deep svg circle{fill:var(--mat-sys-surface, #fffbfe)}\n"], dependencies: [{ kind: "component", type: DigitalClockComponent, selector: "lib-digital-clock", inputs: ["timeFormat", "showSeconds", "hasBackground"] }, { kind: "component", type: AnalogClockComponent, selector: "lib-analog-clock", inputs: ["hasBackground", "showSeconds"] }] });
|
|
1859
1859
|
}
|
|
1860
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1860
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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: () => [] });
|
|
@@ -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.2.
|
|
2424
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2423
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadialGaugeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2424
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadialGaugeComponent, isStandalone: true, selector: "ngx-radial-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, segmentGapPx: { classPropertyName: "segmentGapPx", publicName: "segmentGapPx", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fitToContainer: { classPropertyName: "fitToContainer", publicName: "fitToContainer", isSignal: true, isRequired: false, transformFunction: null }, containerPadding: { classPropertyName: "containerPadding", publicName: "containerPadding", isSignal: true, isRequired: false, transformFunction: null }, responsiveMode: { classPropertyName: "responsiveMode", publicName: "responsiveMode", isSignal: true, isRequired: false, transformFunction: null }, sizeToThicknessRatio: { classPropertyName: "sizeToThicknessRatio", publicName: "sizeToThicknessRatio", isSignal: true, isRequired: false, transformFunction: null }, responsiveProportions: { classPropertyName: "responsiveProportions", publicName: "responsiveProportions", isSignal: true, isRequired: false, transformFunction: null }, outerThickness: { classPropertyName: "outerThickness", publicName: "outerThickness", isSignal: true, isRequired: false, transformFunction: null }, innerThickness: { classPropertyName: "innerThickness", publicName: "innerThickness", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, labelReference: { classPropertyName: "labelReference", publicName: "labelReference", isSignal: true, isRequired: false, transformFunction: null }, referenceGlyph: { classPropertyName: "referenceGlyph", publicName: "referenceGlyph", isSignal: true, isRequired: false, transformFunction: null }, labelPadding: { classPropertyName: "labelPadding", publicName: "labelPadding", isSignal: true, isRequired: false, transformFunction: null }, baselineSafety: { classPropertyName: "baselineSafety", publicName: "baselineSafety", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "clampedValue()", "attr.aria-valuetext": "formattedLabel()", "attr.aria-labelledby": "titleId", "attr.aria-describedby": "descId", "class.fit-container": "fitToContainer()", "class.has-background": "hasBackground()" } }, viewQueries: [{ propertyName: "valueTextEl", first: true, predicate: ["valueText"], descendants: true, isSignal: true }, { propertyName: "valueGroupEl", first: true, predicate: ["valueGroup"], descendants: true, isSignal: true }, { propertyName: "refTextEl", first: true, predicate: ["refText"], descendants: true, isSignal: true }], ngImport: i0, template: "@let w = svgWidth(); @let h = svgHeight(); @let cy = centerY(); @let pct =\npercent();\n\n<svg\n [attr.width]=\"fitToContainer() ? null : w\"\n [attr.height]=\"fitToContainer() ? null : h\"\n [attr.viewBox]=\"'0 0 ' + w + ' ' + h\"\n [class.responsive]=\"fitToContainer()\"\n class=\"gauge-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <title [attr.id]=\"titleId\">{{ title() }}</title>\n @if (description()) {\n <desc [attr.id]=\"descId\">{{ description() }}</desc>\n }\n\n <defs>\n <clipPath [attr.id]=\"clipId\">\n <!-- Give a tiny extra room equal to half of the outer stroke to avoid anti-alias cutoff at the baseline -->\n <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"w\"\n [attr.height]=\"cy + effectiveOuterThickness() / 2\"\n />\n </clipPath>\n </defs>\n\n <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\n <path\n [attr.d]=\"backgroundArcPath()\"\n pathLength=\"100\"\n fill=\"none\"\n class=\"gauge-background\"\n [attr.stroke-width]=\"effectiveOuterThickness()\"\n stroke-linecap=\"butt\"\n />\n\n <path\n [attr.d]=\"backgroundArcPath()\"\n pathLength=\"100\"\n fill=\"none\"\n class=\"gauge-value\"\n [attr.stroke]=\"valueColor()\"\n [attr.stroke-width]=\"effectiveOuterThickness()\"\n stroke-linecap=\"butt\"\n [attr.stroke-dasharray]=\"pct + ' 100'\"\n />\n\n @for (segment of segmentPaths(); track segment.path) {\n <path\n [attr.d]=\"segment.path\"\n fill=\"none\"\n [attr.stroke]=\"segment.color\"\n [attr.stroke-width]=\"effectiveInnerThickness()\"\n stroke-linecap=\"butt\"\n class=\"gauge-segment\"\n />\n }\n </g>\n\n @if (showValueLabel()) {\n <g #valueGroup [attr.transform]=\"valueTransform()\">\n <text\n #valueText\n class=\"gauge-value-text\"\n x=\"0\"\n y=\"0\"\n text-anchor=\"middle\"\n alignment-baseline=\"baseline\"\n dy=\"-0.75\"\n >\n {{ formattedLabel() }}\n </text>\n </g>\n }\n\n <!-- Hidden reference text used ONLY for width measurement -->\n <g style=\"visibility: hidden; pointer-events: none\" aria-hidden=\"true\">\n <text\n #refText\n x=\"0\"\n y=\"0\"\n text-anchor=\"start\"\n dominant-baseline=\"alphabetic\"\n >\n {{ referenceString() }}\n </text>\n </g>\n</svg>\n", styles: [":host{display:block;--gauge-outer-bg: var(--mat-sys-surface-variant, #e0e0e0);--gauge-value-good: var(--mat-sys-tertiary, #10b981);--gauge-value-warning: var(--mat-sys-secondary, #f59e0b);--gauge-value-critical: var(--mat-sys-error, #dc2626)}:host.fit-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.gauge-svg{display:block;margin-inline:auto;max-width:100%;height:auto;shape-rendering:geometricPrecision}.gauge-svg.responsive{max-width:100%;max-height:100%;width:auto;height:auto}.gauge-background{stroke:var(--gauge-outer-bg);transition:stroke .2s ease}.gauge-value{transition:stroke-dasharray .2s ease,stroke .2s ease}.gauge-segment{transition:stroke .2s ease;opacity:.9}.gauge-segment:hover{opacity:1}@media(prefers-reduced-motion:reduce){.gauge-value,.gauge-segment{transition:none}}@media(prefers-contrast:high){.gauge-background{stroke-width:2;stroke:var(--mat-sys-outline, #000000)}.gauge-segment{opacity:1}}@media(prefers-color-scheme:dark){:host{--gauge-outer-bg: #374151}}.gauge-value-text{fill:var(--mat-sys-on-surface-variant, #6c757d);font-family:var(--mat-sys-typescale-body-large-font, \"Roboto\", sans-serif);font-weight:var(--mat-sys-typescale-body-large-weight, 400);transition:fill var(--mat-sys-motion-duration-short2, .2s) var(--mat-sys-motion-easing-standard, ease)}:host.has-background .gauge-value-text{fill:var(--mat-sys-on-surface, #1f1f1f)}:host:hover .gauge-value-text{fill:var(--mat-sys-primary, #6750a4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2425
2425
|
}
|
|
2426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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.2.
|
|
2495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
2494
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadialGaugeStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2495
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: RadialGaugeStateDialogComponent, isStandalone: true, selector: "lib-radial-gauge-state-dialog", ngImport: i0, template: `
|
|
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.2.
|
|
2603
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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,
|
|
@@ -2782,10 +2782,10 @@ class RadialGaugeWidgetComponent {
|
|
|
2782
2782
|
}
|
|
2783
2783
|
});
|
|
2784
2784
|
}
|
|
2785
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2786
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2785
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadialGaugeWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2786
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadialGaugeWidgetComponent, isStandalone: true, selector: "ngx-dashboard-radial-gauge-widget", ngImport: i0, template: "<!-- radial-gauge-widget.component.html -->\n<div class=\"widget-container\" [class.has-background]=\"state().hasBackground\">\n @if (state().active) {\n <!-- Active mode: Show live gauge -->\n <div class=\"gauge-container\">\n <ngx-radial-gauge\n [value]=\"state().value || 0\"\n [min]=\"0\"\n [max]=\"100\"\n [fitToContainer]=\"true\"\n [responsiveMode]=\"true\"\n [segments]=\"segments()\"\n [outerThickness]=\"24\"\n [innerThickness]=\"8\"\n [gap]=\"4\"\n [segmentGapPx]=\"2\"\n [labelReference]=\"'00000'\"\n [referenceGlyph]=\"'0'\"\n [hasBackground]=\"state().hasBackground || false\"\n [showValueLabel]=\"state().showValueLabel ?? true\"\n />\n </div>\n } @else {\n <!-- Passive mode: Show static icon -->\n <div class=\"icon-container\">\n <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\n </div>\n }\n</div>\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.widget-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.widget-container.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.gauge-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}ngx-radial-gauge{width:100%;height:100%;min-height:0;flex:1}.icon-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}.svg-placeholder{width:80%;height:80%;display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #6c757d);transition:color .2s ease}.svg-placeholder :deep(svg){width:100%;height:100%;max-width:100px;max-height:100px;fill:currentColor}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.widget-container:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "component", type: RadialGaugeComponent, selector: "ngx-radial-gauge", inputs: ["value", "min", "max", "segments", "title", "description", "segmentGapPx", "hasBackground", "showValueLabel", "size", "fitToContainer", "containerPadding", "responsiveMode", "sizeToThicknessRatio", "responsiveProportions", "outerThickness", "innerThickness", "gap", "labelReference", "referenceGlyph", "labelPadding", "baselineSafety"] }] });
|
|
2787
2787
|
}
|
|
2788
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2788
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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
|
}] });
|