@dragonworks/ngx-dashboard-widgets 20.0.4 → 20.0.6

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

@@ -1,1255 +0,0 @@
-import * as i0 from '@angular/core';
-import { inject, signal, computed, Component, input, numberAttribute, booleanAttribute, ElementRef, NgZone, PLATFORM_ID, DestroyRef, Directive, ChangeDetectionStrategy, Renderer2, viewChild, effect } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import * as i2 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i6 from '@angular/material/slider';
-import { MatSliderModule } from '@angular/material/slider';
-import * as i7 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i5$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-
-// arrow-widget.metadata.ts
-const svgIcon$2 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-120v-320H120l360-440 360 440H640v320H320Zm80-80h160v-320h111L480-754 289-520h111v320Zm80-320Z"/></svg>';
-
-class ArrowStateDialogComponent {
-    data = inject(MAT_DIALOG_DATA);
-    dialogRef = inject((MatDialogRef));
-    // State signals
-    direction = signal(this.data.direction);
-    opacity = signal(this.data.opacity ?? 1);
-    hasBackground = signal(this.data.hasBackground ?? true);
-    transparentBackground = signal(!(this.data.hasBackground ?? true));
-    // Store original values for comparison
-    originalDirection = this.data.direction;
-    originalOpacity = this.data.opacity ?? 1;
-    originalHasBackground = this.data.hasBackground ?? true;
-    // Computed values
-    rotation = computed(() => {
-        const rotationMap = {
-            up: 0,
-            right: 90,
-            down: 180,
-            left: 270,
-        };
-        return rotationMap[this.direction()];
-    });
-    rotationTransform = computed(() => `rotate(${this.rotation()}deg)`);
-    directionName = computed(() => {
-        const nameMap = {
-            up: 'Up',
-            right: 'Right',
-            down: 'Down',
-            left: 'Left',
-        };
-        return nameMap[this.direction()];
-    });
-    hasChanged = computed(() => this.direction() !== this.originalDirection ||
-        this.opacity() !== this.originalOpacity ||
-        this.hasBackground() !== this.originalHasBackground);
-    formatOpacity(value) {
-        return Math.round(value * 100);
-    }
-    onBackgroundToggle(hasBackground) {
-        this.hasBackground.set(hasBackground);
-        this.transparentBackground.set(!hasBackground);
-    }
-    onCancel() {
-        this.dialogRef.close();
-    }
-    save() {
-        this.dialogRef.close({
-            direction: this.direction(),
-            opacity: this.opacity(),
-            hasBackground: this.hasBackground(),
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ArrowStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: ArrowStateDialogComponent, isStandalone: true, selector: "lib-arrow-state-dialog", ngImport: i0, template: `
-    <h2 mat-dialog-title>Arrow Settings</h2>
-    <mat-dialog-content>
-      <!-- Direction Selection -->
-      <mat-form-field appearance="outline" class="direction-field">
-        <mat-label>Arrow Direction</mat-label>
-        <mat-select
-          [value]="direction()"
-          (selectionChange)="direction.set($any($event.value))"
-        >
-          <mat-option value="up">Up</mat-option>
-          <mat-option value="right">Right</mat-option>
-          <mat-option value="down">Down</mat-option>
-          <mat-option value="left">Left</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <!-- Opacity Slider -->
-      <div class="slider-field">
-        <div class="field-label">Opacity: {{ formatOpacity(opacity()) }}%</div>
-        <mat-slider [min]="0.1" [max]="1" [step]="0.1">
-          <input matSliderThumb [(ngModel)]="opacity" />
-        </mat-slider>
-      </div>
-
-      <!-- Background Toggle -->
-      <div class="toggle-field">
-        <mat-slide-toggle 
-          [checked]="hasBackground()"
-          (change)="onBackgroundToggle($event.checked)">
-          Background
-        </mat-slide-toggle>
-        <span class="toggle-hint">Adds a background behind the arrow</span>
-      </div>
-    </mat-dialog-content>
-
-    <mat-dialog-actions align="end">
-      <button mat-button (click)="onCancel()">Cancel</button>
-      <button mat-flat-button (click)="save()" [disabled]="!hasChanged()">
-        Save
-      </button>
-    </mat-dialog-actions>
-  `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden}mat-form-field{width:100%;display:block;margin-bottom:1rem}.direction-field{margin-top:1rem}.slider-field{margin-bottom:1.5rem;margin-right:1rem}.field-label{display:block;margin-bottom:.5rem}mat-slider{width:100%;display:block}.toggle-field{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-hint{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ArrowStateDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-arrow-state-dialog', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatDialogModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatSelectModule,
-                        MatSliderModule,
-                        MatSlideToggleModule,
-                    ], template: `
-    <h2 mat-dialog-title>Arrow Settings</h2>
-    <mat-dialog-content>
-      <!-- Direction Selection -->
-      <mat-form-field appearance="outline" class="direction-field">
-        <mat-label>Arrow Direction</mat-label>
-        <mat-select
-          [value]="direction()"
-          (selectionChange)="direction.set($any($event.value))"
-        >
-          <mat-option value="up">Up</mat-option>
-          <mat-option value="right">Right</mat-option>
-          <mat-option value="down">Down</mat-option>
-          <mat-option value="left">Left</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <!-- Opacity Slider -->
-      <div class="slider-field">
-        <div class="field-label">Opacity: {{ formatOpacity(opacity()) }}%</div>
-        <mat-slider [min]="0.1" [max]="1" [step]="0.1">
-          <input matSliderThumb [(ngModel)]="opacity" />
-        </mat-slider>
-      </div>
-
-      <!-- Background Toggle -->
-      <div class="toggle-field">
-        <mat-slide-toggle 
-          [checked]="hasBackground()"
-          (change)="onBackgroundToggle($event.checked)">
-          Background
-        </mat-slide-toggle>
-        <span class="toggle-hint">Adds a background behind the arrow</span>
-      </div>
-    </mat-dialog-content>
-
-    <mat-dialog-actions align="end">
-      <button mat-button (click)="onCancel()">Cancel</button>
-      <button mat-flat-button (click)="save()" [disabled]="!hasChanged()">
-        Save
-      </button>
-    </mat-dialog-actions>
-  `, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden}mat-form-field{width:100%;display:block;margin-bottom:1rem}.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"] }]
-        }] });
-
-// arrow-widget.component.ts
-class ArrowWidgetComponent {
-    static metadata = {
-        widgetTypeid: '@default/arrow-widget',
-        name: 'Arrow',
-        description: 'A generic arrow',
-        svgIcon: svgIcon$2,
-    };
-    #sanitizer = inject(DomSanitizer);
-    #dialog = inject(MatDialog);
-    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon$2);
-    state = signal({
-        direction: 'up',
-        opacity: 0.3,
-        hasBackground: true,
-    });
-    // Computed rotation
-    rotationAngle = computed(() => {
-        const rotationMap = {
-            up: 0,
-            right: 90,
-            down: 180,
-            left: 270,
-        };
-        return rotationMap[this.state().direction];
-    });
-    dashboardSetState(state) {
-        if (state) {
-            this.state.update((current) => ({
-                ...current,
-                ...state,
-            }));
-        }
-    }
-    dashboardGetState() {
-        return this.state();
-    }
-    dashboardEditState() {
-        const dialogRef = this.#dialog.open(ArrowStateDialogComponent, {
-            data: this.state(),
-            width: '400px',
-            maxWidth: '90vw',
-            disableClose: false,
-            autoFocus: false,
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result) {
-                this.state.set(result);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ArrowWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: ArrowWidgetComponent, isStandalone: true, selector: "ngx-dashboard-arrow-widget", ngImport: i0, template: "<!-- arrow-widget.component.html -->\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div\r\n    class=\"svg-placeholder\"\r\n    [innerHTML]=\"safeSvgIcon\"\r\n    [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\r\n    [style.opacity]=\"state().opacity\"\r\n  ></div>\r\n</div>\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.svg-wrapper.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #6c757d);transition:fill .2s ease}.has-background .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-on-surface, #1f1f1f)}.svg-wrapper:hover .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-primary, #6750a4)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ArrowWidgetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-dashboard-arrow-widget', imports: [], template: "<!-- arrow-widget.component.html -->\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div\r\n    class=\"svg-placeholder\"\r\n    [innerHTML]=\"safeSvgIcon\"\r\n    [style.transform]=\"'rotate(' + rotationAngle() + 'deg)'\"\r\n    [style.opacity]=\"state().opacity\"\r\n  ></div>\r\n</div>\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.svg-wrapper.has-background{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #6c757d);transition:fill .2s ease}.has-background .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-on-surface, #1f1f1f)}.svg-wrapper:hover .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-primary, #6750a4)}\n"] }]
-        }] });
-
-// label-widget.metadata.ts
-const svgIcon$1 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M280-280h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm-80 480q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>';
-
-class LabelStateDialogComponent {
-    data = inject(MAT_DIALOG_DATA);
-    dialogRef = inject((MatDialogRef));
-    // State signals
-    label = signal(this.data.label ?? '');
-    fontSize = signal(this.data.fontSize ?? 16);
-    alignment = signal(this.data.alignment ?? 'center');
-    fontWeight = signal(this.data.fontWeight ?? 'normal');
-    opacity = signal(this.data.opacity ?? 1);
-    hasBackground = signal(this.data.hasBackground ?? true);
-    transparentBackground = signal(!(this.data.hasBackground ?? true));
-    responsive = signal(this.data.responsive ?? false);
-    // Store original values for comparison
-    originalLabel = this.data.label ?? '';
-    originalFontSize = this.data.fontSize ?? 16;
-    originalAlignment = this.data.alignment ?? 'center';
-    originalFontWeight = this.data.fontWeight ?? 'normal';
-    originalOpacity = this.data.opacity ?? 1;
-    originalHasBackground = this.data.hasBackground ?? true;
-    originalResponsive = this.data.responsive ?? false;
-    // Computed values
-    hasChanged = computed(() => this.label() !== this.originalLabel ||
-        this.fontSize() !== this.originalFontSize ||
-        this.alignment() !== this.originalAlignment ||
-        this.fontWeight() !== this.originalFontWeight ||
-        this.opacity() !== this.originalOpacity ||
-        this.hasBackground() !== this.originalHasBackground ||
-        this.responsive() !== this.originalResponsive);
-    formatOpacity(value) {
-        return Math.round(value * 100);
-    }
-    formatOpacitySlider = (value) => {
-        return `${Math.round(value * 100)}%`;
-    };
-    onBackgroundToggle(hasWhiteBackground) {
-        this.hasBackground.set(hasWhiteBackground);
-        this.transparentBackground.set(!hasWhiteBackground);
-    }
-    onCancel() {
-        this.dialogRef.close();
-    }
-    save() {
-        this.dialogRef.close({
-            label: this.label(),
-            fontSize: this.fontSize(),
-            alignment: this.alignment(),
-            fontWeight: this.fontWeight(),
-            opacity: this.opacity(),
-            hasBackground: this.hasBackground(),
-            responsive: this.responsive(),
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LabelStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: LabelStateDialogComponent, isStandalone: true, selector: "lib-label-state-dialog", ngImport: i0, template: `
-    <h2 mat-dialog-title>Label Settings</h2>
-    <mat-dialog-content>
-      <mat-form-field appearance="outline" class="label-text-field">
-        <mat-label>Label Text</mat-label>
-        <input
-          matInput
-          type="text"
-          [value]="label()"
-          (input)="label.set($any($event.target).value)"
-          placeholder="Enter your label text..."
-        />
-      </mat-form-field>
-
-      <!-- Responsive Text Toggle -->
-      <div class="toggle-section">
-        <mat-slide-toggle 
-          [checked]="responsive()"
-          (change)="responsive.set($event.checked)">
-          Responsive Text
-        </mat-slide-toggle>
-        <span class="toggle-description"
-          >Automatically adjust text size to fit the widget</span
-        >
-      </div>
-
-      <div class="row-layout">
-        <mat-form-field appearance="outline">
-          <mat-label>Font Size (px)</mat-label>
-          <input
-            matInput
-            type="number"
-            [value]="fontSize()"
-            (input)="fontSize.set(+$any($event.target).value)"
-            [disabled]="responsive()"
-            min="8"
-            max="48"
-            placeholder="16"
-          />
-        </mat-form-field>
-
-        <mat-form-field appearance="outline">
-          <mat-label>Alignment</mat-label>
-          <mat-select
-            [value]="alignment()"
-            (selectionChange)="alignment.set($any($event.value))"
-          >
-            <mat-option value="left">Left</mat-option>
-            <mat-option value="center">Center</mat-option>
-            <mat-option value="right">Right</mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-
-      <mat-form-field appearance="outline">
-        <mat-label>Font Weight</mat-label>
-        <mat-select
-          [value]="fontWeight()"
-          (selectionChange)="fontWeight.set($any($event.value))"
-        >
-          <mat-option value="normal">Normal</mat-option>
-          <mat-option value="bold">Bold</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <!-- Opacity Slider -->
-      <div class="slider-section">
-        <div class="slider-label">Opacity: {{ formatOpacity(opacity()) }}%</div>
-        <mat-slider [min]="0.1" [max]="1" [step]="0.1">
-          <input matSliderThumb [(ngModel)]="opacity" />
-        </mat-slider>
-      </div>
-
-      <!-- Background Toggle -->
-      <div class="toggle-section">
-        <mat-slide-toggle 
-          [checked]="!transparentBackground()"
-          (change)="onBackgroundToggle($event.checked)">
-          Background
-        </mat-slide-toggle>
-        <span class="toggle-description"
-          >Adds a background behind the text</span
-        >
-      </div>
-    </mat-dialog-content>
-
-    <mat-dialog-actions align="end">
-      <button mat-button (click)="onCancel()">Cancel</button>
-      <button mat-flat-button (click)="save()" [disabled]="!hasChanged()">
-        Save
-      </button>
-    </mat-dialog-actions>
-  `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden}mat-form-field{width:100%;display:block;margin-bottom:1rem}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LabelStateDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-label-state-dialog', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatDialogModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatSliderModule,
-                        MatSlideToggleModule, // Add this import
-                    ], template: `
-    <h2 mat-dialog-title>Label Settings</h2>
-    <mat-dialog-content>
-      <mat-form-field appearance="outline" class="label-text-field">
-        <mat-label>Label Text</mat-label>
-        <input
-          matInput
-          type="text"
-          [value]="label()"
-          (input)="label.set($any($event.target).value)"
-          placeholder="Enter your label text..."
-        />
-      </mat-form-field>
-
-      <!-- Responsive Text Toggle -->
-      <div class="toggle-section">
-        <mat-slide-toggle 
-          [checked]="responsive()"
-          (change)="responsive.set($event.checked)">
-          Responsive Text
-        </mat-slide-toggle>
-        <span class="toggle-description"
-          >Automatically adjust text size to fit the widget</span
-        >
-      </div>
-
-      <div class="row-layout">
-        <mat-form-field appearance="outline">
-          <mat-label>Font Size (px)</mat-label>
-          <input
-            matInput
-            type="number"
-            [value]="fontSize()"
-            (input)="fontSize.set(+$any($event.target).value)"
-            [disabled]="responsive()"
-            min="8"
-            max="48"
-            placeholder="16"
-          />
-        </mat-form-field>
-
-        <mat-form-field appearance="outline">
-          <mat-label>Alignment</mat-label>
-          <mat-select
-            [value]="alignment()"
-            (selectionChange)="alignment.set($any($event.value))"
-          >
-            <mat-option value="left">Left</mat-option>
-            <mat-option value="center">Center</mat-option>
-            <mat-option value="right">Right</mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-
-      <mat-form-field appearance="outline">
-        <mat-label>Font Weight</mat-label>
-        <mat-select
-          [value]="fontWeight()"
-          (selectionChange)="fontWeight.set($any($event.value))"
-        >
-          <mat-option value="normal">Normal</mat-option>
-          <mat-option value="bold">Bold</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <!-- Opacity Slider -->
-      <div class="slider-section">
-        <div class="slider-label">Opacity: {{ formatOpacity(opacity()) }}%</div>
-        <mat-slider [min]="0.1" [max]="1" [step]="0.1">
-          <input matSliderThumb [(ngModel)]="opacity" />
-        </mat-slider>
-      </div>
-
-      <!-- Background Toggle -->
-      <div class="toggle-section">
-        <mat-slide-toggle 
-          [checked]="!transparentBackground()"
-          (change)="onBackgroundToggle($event.checked)">
-          Background
-        </mat-slide-toggle>
-        <span class="toggle-description"
-          >Adds a background behind the text</span
-        >
-      </div>
-    </mat-dialog-content>
-
-    <mat-dialog-actions align="end">
-      <button mat-button (click)="onCancel()">Cancel</button>
-      <button mat-flat-button (click)="save()" [disabled]="!hasChanged()">
-        Save
-      </button>
-    </mat-dialog-actions>
-  `, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden}mat-form-field{width:100%;display:block;margin-bottom:1rem}.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}\n"] }]
-        }] });
-
-/**
- * Directive that automatically adjusts font size to fit text within its parent container.
- * Uses canvas-based measurement for performance and DOM verification for accuracy.
- *
- * @example
- * <div class="container">
- *   <span responsiveText [min]="12" [max]="72">Dynamic text here</span>
- * </div>
- */
-class ResponsiveTextDirective {
-    /* ───────────────────────── Inputs with transforms ─────────────── */
-    /** Minimum font-size in pixels (accessibility floor) */
-    min = input(8, { transform: numberAttribute });
-    /** Maximum font-size in pixels (layout ceiling) */
-    max = input(512, { transform: numberAttribute });
-    /**
-     * Line-height: pass a multiplier (e.g. 1.1) or absolute px value.
-     * For single-line text a multiplier < 10 is treated as unitless.
-     */
-    lineHeight = input(1.1, { transform: numberAttribute });
-    /** Whether to observe text mutations after first render */
-    observeMutations = input(true, { transform: booleanAttribute });
-    /** Debounce delay in ms for resize/mutation callbacks */
-    debounceMs = input(16, { transform: numberAttribute });
-    /* ───────────────────────── Private state ───────────────────────── */
-    el = inject(ElementRef);
-    zone = inject(NgZone);
-    platformId = inject(PLATFORM_ID);
-    destroyRef = inject(DestroyRef);
-    // Canvas context - lazy initialization
-    _ctx;
-    get ctx() {
-        if (!this._ctx) {
-            const canvas = document.createElement('canvas');
-            this._ctx = canvas.getContext('2d', {
-                willReadFrequently: true,
-                alpha: false,
-            });
-        }
-        return this._ctx;
-    }
-    ro;
-    mo;
-    fitTimeout;
-    // Cache for performance
-    lastText = '';
-    lastMaxW = 0;
-    lastMaxH = 0;
-    lastFontSize = 0;
-    /* ───────────────────────── Lifecycle ──────────────────────────── */
-    ngAfterViewInit() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        // Set initial styles
-        const span = this.el.nativeElement;
-        span.style.transition = 'font-size 0.1s ease-out';
-        // All observer callbacks run outside Angular's zone
-        this.zone.runOutsideAngular(() => {
-            this.fit();
-            this.observeResize();
-            if (this.observeMutations()) {
-                this.observeText();
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.cleanup();
-    }
-    /* ───────────────────── Core fitting logic ───────────────────── */
-    /**
-     * Debounced fit handler to prevent excessive recalculations
-     */
-    requestFit = () => {
-        if (this.fitTimeout) {
-            cancelAnimationFrame(this.fitTimeout);
-        }
-        this.fitTimeout = requestAnimationFrame(() => {
-            this.fit();
-        });
-    };
-    /**
-     * Recalculate & apply the ideal font-size
-     */
-    fit = () => {
-        const span = this.el.nativeElement;
-        const parent = span.parentElement;
-        if (!parent)
-            return;
-        const text = span.textContent?.trim() || '';
-        if (!text) {
-            span.style.fontSize = `${this.min()}px`;
-            return;
-        }
-        // Get available space
-        const { maxW, maxH } = this.getAvailableSpace(parent);
-        // Check cache to avoid redundant calculations
-        if (text === this.lastText &&
-            maxW === this.lastMaxW &&
-            maxH === this.lastMaxH &&
-            this.lastFontSize > 0) {
-            return;
-        }
-        // Calculate ideal font size
-        const ideal = this.calcFit(text, maxW, maxH);
-        span.style.fontSize = `${ideal}px`;
-        // DOM verification pass
-        this.verifyFit(span, maxW, maxH, ideal);
-        // Update cache
-        this.lastText = text;
-        this.lastMaxW = maxW;
-        this.lastMaxH = maxH;
-        this.lastFontSize = parseFloat(span.style.fontSize);
-    };
-    /**
-     * Calculate available space accounting for padding and borders
-     */
-    getAvailableSpace(parent) {
-        const cs = getComputedStyle(parent);
-        const maxW = parent.clientWidth -
-            parseFloat(cs.paddingLeft) -
-            parseFloat(cs.paddingRight);
-        const maxH = parent.clientHeight -
-            parseFloat(cs.paddingTop) -
-            parseFloat(cs.paddingBottom);
-        return { maxW: Math.max(0, maxW), maxH: Math.max(0, maxH) };
-    }
-    /**
-     * DOM-based verification to handle sub-pixel discrepancies
-     */
-    verifyFit(span, maxW, maxH, ideal) {
-        // Use requestAnimationFrame to ensure layout is complete
-        requestAnimationFrame(() => {
-            if (span.scrollWidth > maxW || span.scrollHeight > maxH) {
-                let safe = ideal;
-                while (safe > this.min() &&
-                    (span.scrollWidth > maxW || span.scrollHeight > maxH)) {
-                    safe -= 0.5; // Finer adjustments
-                    span.style.fontSize = `${safe}px`;
-                }
-            }
-        });
-    }
-    /* ───────────────────── Binary search algorithm ────────────────── */
-    /**
-     * Binary search for optimal font size using canvas measurements
-     */
-    calcFit(text, maxW, maxH, precision = 0.1) {
-        if (maxW <= 0 || maxH <= 0)
-            return this.min();
-        const computedStyle = getComputedStyle(this.el.nativeElement);
-        const fontFamily = computedStyle.fontFamily || 'sans-serif';
-        const fontWeight = computedStyle.fontWeight || '400';
-        let lo = this.min();
-        let hi = this.max();
-        let bestFit = this.min();
-        while (hi - lo > precision) {
-            const mid = (hi + lo) / 2;
-            this.ctx.font = `${fontWeight} ${mid}px ${fontFamily}`;
-            const metrics = this.ctx.measureText(text);
-            const width = metrics.width;
-            // Calculate height based on available metrics
-            const height = this.calculateTextHeight(metrics, mid);
-            if (width <= maxW && height <= maxH) {
-                bestFit = mid;
-                lo = mid;
-            }
-            else {
-                hi = mid;
-            }
-        }
-        return Math.floor(bestFit * 100) / 100;
-    }
-    /**
-     * Calculate text height from metrics
-     */
-    calculateTextHeight(metrics, fontSize) {
-        // Use font bounding box metrics if available
-        if (metrics.fontBoundingBoxAscent && metrics.fontBoundingBoxDescent) {
-            return metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
-        }
-        // Fallback to actual bounding box
-        if (metrics.actualBoundingBoxAscent && metrics.actualBoundingBoxDescent) {
-            return metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
-        }
-        // Final fallback using line height
-        return this.lineHeight() < 10
-            ? fontSize * this.lineHeight()
-            : this.lineHeight();
-    }
-    /* ───────────────────────── Observers ─────────────────────────── */
-    /**
-     * Observe parent container resizes
-     */
-    observeResize() {
-        if (!('ResizeObserver' in window))
-            return;
-        this.ro = new ResizeObserver((entries) => {
-            // Only trigger if size actually changed
-            const entry = entries[0];
-            if (entry?.contentRect) {
-                this.requestFit();
-            }
-        });
-        const parent = this.el.nativeElement.parentElement;
-        if (parent) {
-            this.ro.observe(parent);
-        }
-    }
-    /**
-     * Observe text content changes
-     */
-    observeText() {
-        if (!('MutationObserver' in window))
-            return;
-        this.mo = new MutationObserver((mutations) => {
-            // Check if text actually changed
-            const hasTextChange = mutations.some((m) => m.type === 'characterData' ||
-                (m.type === 'childList' &&
-                    (m.addedNodes.length > 0 || m.removedNodes.length > 0)));
-            if (hasTextChange) {
-                this.requestFit();
-            }
-        });
-        this.mo.observe(this.el.nativeElement, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-        });
-    }
-    /**
-     * Cleanup resources
-     */
-    cleanup() {
-        this.ro?.disconnect();
-        this.mo?.disconnect();
-        if (this.fitTimeout) {
-            cancelAnimationFrame(this.fitTimeout);
-        }
-        // Clear canvas context
-        this._ctx = undefined;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ResponsiveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: ResponsiveTextDirective, isStandalone: true, selector: "[responsiveText]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, observeMutations: { classPropertyName: "observeMutations", publicName: "observeMutations", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.white-space": "\"nowrap\"", "style.overflow": "\"hidden\"", "style.text-overflow": "\"ellipsis\"" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[responsiveText]',
-                    standalone: true,
-                    host: {
-                        '[style.display]': '"block"',
-                        '[style.width]': '"100%"',
-                        '[style.white-space]': '"nowrap"',
-                        '[style.overflow]': '"hidden"',
-                        '[style.text-overflow]': '"ellipsis"',
-                    },
-                }]
-        }] });
-
-// label-widget.component.ts
-class LabelWidgetComponent {
-    static metadata = {
-        widgetTypeid: '@default/label-widget',
-        name: 'Label',
-        description: 'A generic text label',
-        svgIcon: svgIcon$1,
-    };
-    #sanitizer = inject(DomSanitizer);
-    #dialog = inject(MatDialog);
-    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon$1);
-    state = signal({
-        label: '',
-        fontSize: 16,
-        alignment: 'center',
-        fontWeight: 'normal',
-        opacity: 1,
-        hasBackground: true,
-        responsive: false,
-    });
-    dashboardSetState(state) {
-        if (state) {
-            this.state.update((current) => ({
-                ...current,
-                ...state,
-            }));
-        }
-    }
-    dashboardGetState() {
-        return { ...this.state() };
-    }
-    dashboardEditState() {
-        const dialogRef = this.#dialog.open(LabelStateDialogComponent, {
-            data: this.dashboardGetState(),
-            width: '400px',
-            maxWidth: '90vw',
-            disableClose: false,
-            autoFocus: false,
-        });
-        dialogRef
-            .afterClosed()
-            .subscribe((result) => {
-            if (result) {
-                this.state.set(result);
-            }
-        });
-    }
-    get hasContent() {
-        return !!this.state().label?.trim();
-    }
-    get label() {
-        return this.state().label?.trim();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LabelWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LabelWidgetComponent, isStandalone: true, selector: "ngx-dashboard-label-widget", ngImport: i0, template: "@if (hasContent) {\r\n<div\r\n  class=\"label-widget\"\r\n  [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\r\n  [style.--widget-opacity]=\"state().opacity\"\r\n  [class.text-left]=\"state().alignment === 'left'\"\r\n  [class.text-right]=\"state().alignment === 'right'\"\r\n  [class.font-bold]=\"state().fontWeight === 'bold'\"\r\n  [class.has-background]=\"state().hasBackground\"\r\n>\r\n  @if (state().responsive) {\r\n    <div class=\"label-text\" responsiveText>{{ label }}</div>\r\n  } @else {\r\n    <div class=\"label-text\">{{ label }}</div>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #6c757d);transition:fill .2s ease}.has-background .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-on-surface, #1f1f1f)}.svg-wrapper:hover .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "directive", type: ResponsiveTextDirective, selector: "[responsiveText]", inputs: ["min", "max", "lineHeight", "observeMutations", "debounceMs"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LabelWidgetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-dashboard-label-widget', imports: [ResponsiveTextDirective], template: "@if (hasContent) {\r\n<div\r\n  class=\"label-widget\"\r\n  [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\r\n  [style.--widget-opacity]=\"state().opacity\"\r\n  [class.text-left]=\"state().alignment === 'left'\"\r\n  [class.text-right]=\"state().alignment === 'right'\"\r\n  [class.font-bold]=\"state().fontWeight === 'bold'\"\r\n  [class.has-background]=\"state().hasBackground\"\r\n>\r\n  @if (state().responsive) {\r\n    <div class=\"label-text\" responsiveText>{{ label }}</div>\r\n  } @else {\r\n    <div class=\"label-text\">{{ label }}</div>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #6c757d);transition:fill .2s ease}.has-background .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-on-surface, #1f1f1f)}.svg-wrapper:hover .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-primary, #6750a4)}\n"] }]
-        }] });
-
-// clock-widget.metadata.ts
-const svgIcon = `
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800">
-	<circle cx="400" cy="400" r="400" fill="#fff"/>
-	<use transform="matrix(-1,0,0,1,800,0)" xlink:href="#one-half"/>
-	<g id="one-half">
-		<g id="one-fourth">
-			<path d="m400 40v107" stroke="#000" stroke-width="26.7"/>
-			<g id="one-twelfth">
-				<path d="m580 88.233-42.5 73.612" stroke="#000" stroke-width="26.7"/>
-				<g id="one-thirtieth">
-					<path id="one-sixtieth" d="m437.63 41.974-3.6585 34.808" stroke="#000" stroke-width="13.6" />
-					<use transform="rotate(6 400 400)" xlink:href="#one-sixtieth"/>
-				</g>
-				<use transform="rotate(12 400 400)" xlink:href="#one-thirtieth"/>
-			</g>
-			<use transform="rotate(30 400 400)" xlink:href="#one-twelfth"/>
-			<use transform="rotate(60 400 400)" xlink:href="#one-twelfth"/>
-		</g>
-		<use transform="rotate(90 400 400)" xlink:href="#one-fourth"/>
-	</g>
-	<path class="clock-hour-hand" id="anim-clock-hour-hand" d="m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z" transform="rotate(110.2650694444, 400, 400)" />
-	<path class="clock-minute-hand" id="anim-clock-minute-hand" d="M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z" transform="rotate(243.1808333333, 400, 400)" />
-</svg>
-`;
-
-class ClockStateDialogComponent {
-    data = inject(MAT_DIALOG_DATA);
-    dialogRef = inject((MatDialogRef));
-    // State signals
-    mode = signal(this.data.mode ?? 'digital');
-    hasBackground = signal(this.data.hasBackground ?? true);
-    timeFormat = signal(this.data.timeFormat ?? '24h');
-    showSeconds = signal(this.data.showSeconds ?? true);
-    // Store original values for comparison
-    originalMode = this.data.mode ?? 'digital';
-    originalHasBackground = this.data.hasBackground ?? true;
-    originalTimeFormat = this.data.timeFormat ?? '24h';
-    originalShowSeconds = this.data.showSeconds ?? true;
-    // Computed values
-    hasChanged = computed(() => this.mode() !== this.originalMode ||
-        this.hasBackground() !== this.originalHasBackground ||
-        this.timeFormat() !== this.originalTimeFormat ||
-        this.showSeconds() !== this.originalShowSeconds);
-    onCancel() {
-        this.dialogRef.close();
-    }
-    save() {
-        this.dialogRef.close({
-            mode: this.mode(),
-            hasBackground: this.hasBackground(),
-            timeFormat: this.timeFormat(),
-            showSeconds: this.showSeconds(),
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ClockStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ClockStateDialogComponent, isStandalone: true, selector: "demo-clock-state-dialog", ngImport: i0, template: `
-    <h2 mat-dialog-title>Clock Settings</h2>
-    <mat-dialog-content>
-      <div class="mode-selection">
-        <label class="section-label">Display Mode</label>
-        <mat-radio-group
-          [value]="mode()"
-          (change)="mode.set($any($event.value))"
-        >
-          <mat-radio-button value="digital">Digital</mat-radio-button>
-          <mat-radio-button value="analog">Analog</mat-radio-button>
-        </mat-radio-group>
-      </div>
-
-      <!-- Time Format (only for digital mode) -->
-      @if (mode() === 'digital') {
-      <div class="format-selection">
-        <label class="section-label">Time Format</label>
-        <mat-radio-group
-          [value]="timeFormat()"
-          (change)="timeFormat.set($any($event.value))"
-        >
-          <mat-radio-button value="24h">24 Hour (14:30:45)</mat-radio-button>
-          <mat-radio-button value="12h">12 Hour (2:30:45 PM)</mat-radio-button>
-        </mat-radio-group>
-      </div>
-      }
-
-      <!-- Show Seconds Toggle (for both digital and analog modes) -->
-      <div class="toggle-section">
-        <mat-slide-toggle 
-          [checked]="showSeconds()"
-          (change)="showSeconds.set($event.checked)">
-          Show Seconds
-        </mat-slide-toggle>
-        <span class="toggle-description">
-          @if (mode() === 'digital') {
-            Display seconds in the time
-          } @else {
-            Show the second hand on the clock
-          }
-        </span>
-      </div>
-
-      <!-- Background Toggle -->
-      <div class="toggle-section">
-        <mat-slide-toggle 
-          [checked]="hasBackground()"
-          (change)="hasBackground.set($event.checked)">
-          Background
-        </mat-slide-toggle>
-        <span class="toggle-description"
-          >Adds a background behind the clock</span
-        >
-      </div>
-    </mat-dialog-content>
-
-    <mat-dialog-actions align="end">
-      <button mat-button (click)="onCancel()">Cancel</button>
-      <button mat-flat-button (click)="save()" [disabled]="!hasChanged()">
-        Save
-      </button>
-    </mat-dialog-actions>
-  `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden}.mode-selection,.format-selection{margin-top:1rem;margin-bottom:2rem}.section-label{display:block;margin-bottom:.75rem;font-weight:500}mat-radio-group{display:flex;flex-direction:column;gap:.75rem}mat-radio-button{margin:0}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-description{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ClockStateDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'demo-clock-state-dialog', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatDialogModule,
-                        MatButtonModule,
-                        MatRadioModule,
-                        MatSlideToggleModule,
-                    ], template: `
-    <h2 mat-dialog-title>Clock Settings</h2>
-    <mat-dialog-content>
-      <div class="mode-selection">
-        <label class="section-label">Display Mode</label>
-        <mat-radio-group
-          [value]="mode()"
-          (change)="mode.set($any($event.value))"
-        >
-          <mat-radio-button value="digital">Digital</mat-radio-button>
-          <mat-radio-button value="analog">Analog</mat-radio-button>
-        </mat-radio-group>
-      </div>
-
-      <!-- Time Format (only for digital mode) -->
-      @if (mode() === 'digital') {
-      <div class="format-selection">
-        <label class="section-label">Time Format</label>
-        <mat-radio-group
-          [value]="timeFormat()"
-          (change)="timeFormat.set($any($event.value))"
-        >
-          <mat-radio-button value="24h">24 Hour (14:30:45)</mat-radio-button>
-          <mat-radio-button value="12h">12 Hour (2:30:45 PM)</mat-radio-button>
-        </mat-radio-group>
-      </div>
-      }
-
-      <!-- Show Seconds Toggle (for both digital and analog modes) -->
-      <div class="toggle-section">
-        <mat-slide-toggle 
-          [checked]="showSeconds()"
-          (change)="showSeconds.set($event.checked)">
-          Show Seconds
-        </mat-slide-toggle>
-        <span class="toggle-description">
-          @if (mode() === 'digital') {
-            Display seconds in the time
-          } @else {
-            Show the second hand on the clock
-          }
-        </span>
-      </div>
-
-      <!-- Background Toggle -->
-      <div class="toggle-section">
-        <mat-slide-toggle 
-          [checked]="hasBackground()"
-          (change)="hasBackground.set($event.checked)">
-          Background
-        </mat-slide-toggle>
-        <span class="toggle-description"
-          >Adds a background behind the clock</span
-        >
-      </div>
-    </mat-dialog-content>
-
-    <mat-dialog-actions align="end">
-      <button mat-button (click)="onCancel()">Cancel</button>
-      <button mat-flat-button (click)="save()" [disabled]="!hasChanged()">
-        Save
-      </button>
-    </mat-dialog-actions>
-  `, 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"] }]
-        }] });
-
-class DigitalClockComponent {
-    #destroyRef = inject(DestroyRef);
-    // Inputs
-    timeFormat = input('24h');
-    showSeconds = input(true);
-    hasBackground = input(false);
-    // Time tracking
-    currentTime = signal(new Date());
-    formattedTime = computed(() => {
-        const time = this.currentTime();
-        const format = this.timeFormat();
-        const showSecs = this.showSeconds();
-        return this.#formatTime(time, format, showSecs);
-    });
-    #intervalId = null;
-    #formatTime(time, format, showSecs) {
-        let hours = time.getHours();
-        const minutes = time.getMinutes();
-        const seconds = time.getSeconds();
-        // Pad with leading zeros
-        const mm = minutes.toString().padStart(2, '0');
-        const ss = seconds.toString().padStart(2, '0');
-        if (format === '12h') {
-            // 12-hour format with AM/PM
-            const ampm = hours >= 12 ? 'PM' : 'AM';
-            hours = hours % 12;
-            if (hours === 0)
-                hours = 12; // Convert 0 to 12 for 12 AM/PM
-            const hh = hours.toString().padStart(2, '0');
-            if (showSecs) {
-                return `${hh}:${mm}:${ss} ${ampm}`;
-            }
-            else {
-                return `${hh}:${mm} ${ampm}`;
-            }
-        }
-        else {
-            // 24-hour format
-            const hh = hours.toString().padStart(2, '0');
-            if (showSecs) {
-                return `${hh}:${mm}:${ss}`;
-            }
-            else {
-                return `${hh}:${mm}`;
-            }
-        }
-    }
-    constructor() {
-        // Set up time update timer
-        this.#startTimer();
-        // Clean up timer on component destruction
-        this.#destroyRef.onDestroy(() => {
-            this.#stopTimer();
-        });
-    }
-    #startTimer() {
-        // Sync to the next second boundary for smooth start
-        const now = new Date();
-        const msUntilNextSecond = 1000 - now.getMilliseconds();
-        setTimeout(() => {
-            this.currentTime.set(new Date());
-            // Start the regular 1-second interval
-            this.#intervalId = window.setInterval(() => {
-                this.currentTime.set(new Date());
-            }, 1000);
-        }, msUntilNextSecond);
-    }
-    #stopTimer() {
-        if (this.#intervalId !== null) {
-            clearInterval(this.#intervalId);
-            this.#intervalId = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DigitalClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: DigitalClockComponent, isStandalone: true, selector: "ngx-digital-clock", inputs: { timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-background": "hasBackground()", "class.show-pm": "timeFormat() === \"12h\"", "class.show-seconds": "showSeconds()" }, classAttribute: "clock-widget digital" }, ngImport: i0, template: "<div class=\"digital-time\">{{ formattedTime() }}</div>", 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(12px,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(12px,min(15cqw,50cqh),200px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DigitalClockComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-digital-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.has-background]': 'hasBackground()',
-                        '[class.show-pm]': 'timeFormat() === "12h"',
-                        '[class.show-seconds]': 'showSeconds()',
-                        'class': 'clock-widget digital'
-                    }, template: "<div class=\"digital-time\">{{ formattedTime() }}</div>", 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(12px,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(12px,min(15cqw,50cqh),200px)}\n"] }]
-        }], ctorParameters: () => [] });
-
-class AnalogClockComponent {
-    #destroyRef = inject(DestroyRef);
-    #renderer = inject(Renderer2);
-    // Inputs
-    hasBackground = input(false);
-    showSeconds = input(true);
-    // ViewChild references for clock hands
-    hourHand = viewChild('hourHand');
-    minuteHand = viewChild('minuteHand');
-    secondHand = viewChild('secondHand');
-    // Time tracking
-    currentTime = signal(new Date());
-    // Computed rotation signals
-    secondHandRotation = computed(() => {
-        const seconds = this.currentTime().getSeconds();
-        return seconds * 6; // 360° / 60s = 6° per second
-    });
-    minuteHandRotation = computed(() => {
-        const time = this.currentTime();
-        const minutes = time.getMinutes();
-        const seconds = time.getSeconds();
-        return minutes * 6 + seconds / 10; // Smooth minute hand movement
-    });
-    hourHandRotation = computed(() => {
-        const time = this.currentTime();
-        const hours = time.getHours() % 12;
-        const minutes = time.getMinutes();
-        const seconds = time.getSeconds();
-        return hours * 30 + minutes / 2 + seconds / 120; // Smooth hour hand movement
-    });
-    #intervalId = null;
-    constructor() {
-        // Set up time update timer
-        this.#startTimer();
-        // Clean up timer on component destruction
-        this.#destroyRef.onDestroy(() => {
-            this.#stopTimer();
-        });
-        // Update DOM when rotations change
-        effect(() => {
-            this.#updateClockHands();
-        });
-    }
-    #startTimer() {
-        // Sync to the next second boundary for smooth start
-        const now = new Date();
-        const msUntilNextSecond = 1000 - now.getMilliseconds();
-        setTimeout(() => {
-            this.currentTime.set(new Date());
-            // Start the regular 1-second interval
-            this.#intervalId = window.setInterval(() => {
-                this.currentTime.set(new Date());
-            }, 1000);
-        }, msUntilNextSecond);
-    }
-    #stopTimer() {
-        if (this.#intervalId !== null) {
-            clearInterval(this.#intervalId);
-            this.#intervalId = null;
-        }
-    }
-    #updateClockHands() {
-        const hourElement = this.hourHand()?.nativeElement;
-        const minuteElement = this.minuteHand()?.nativeElement;
-        const secondElement = this.secondHand()?.nativeElement;
-        if (hourElement) {
-            this.#renderer.setAttribute(hourElement, 'transform', `rotate(${this.hourHandRotation()}, 400, 400)`);
-        }
-        if (minuteElement) {
-            this.#renderer.setAttribute(minuteElement, 'transform', `rotate(${this.minuteHandRotation()}, 400, 400)`);
-        }
-        if (secondElement && this.showSeconds()) {
-            this.#renderer.setAttribute(secondElement, 'transform', `rotate(${this.secondHandRotation()}, 400, 400)`);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: AnalogClockComponent, isStandalone: true, selector: "ngx-analog-clock", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-background": "hasBackground()", "class.show-seconds": "showSeconds()" }, classAttribute: "clock-widget analog" }, viewQueries: [{ propertyName: "hourHand", first: true, predicate: ["hourHand"], descendants: true, isSignal: true }, { propertyName: "minuteHand", first: true, predicate: ["minuteHand"], descendants: true, isSignal: true }, { propertyName: "secondHand", first: true, predicate: ["secondHand"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"analog-clock-container\">\r\n  <div class=\"aspect-ratio-box\">\r\n    <svg\r\n      version=\"1.1\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n      viewBox=\"0 0 800 800\"\r\n      preserveAspectRatio=\"xMidYMid meet\"\r\n    >\r\n      <!-- <circle cx=\"400\" cy=\"400\" r=\"400\" fill=\"#fff\"/> -->\r\n      <use transform=\"matrix(-1,0,0,1,800,0)\" xlink:href=\"#one-half\" />\r\n      <g id=\"one-half\">\r\n        <g id=\"one-fourth\">\r\n          <path d=\"m400 40v107\" stroke=\"#000\" stroke-width=\"26.7\" />\r\n          <g id=\"one-twelfth\">\r\n            <path\r\n              d=\"m580 88.233-42.5 73.612\"\r\n              stroke=\"#000\"\r\n              stroke-width=\"26.7\"\r\n            />\r\n            <g id=\"one-thirtieth\">\r\n              <path\r\n                id=\"one-sixtieth\"\r\n                d=\"m437.63 41.974-3.6585 34.808\"\r\n                stroke=\"#000\"\r\n                stroke-width=\"13.6\"\r\n              />\r\n              <use transform=\"rotate(6 400 400)\" xlink:href=\"#one-sixtieth\" />\r\n            </g>\r\n            <use transform=\"rotate(12 400 400)\" xlink:href=\"#one-thirtieth\" />\r\n          </g>\r\n          <use transform=\"rotate(30 400 400)\" xlink:href=\"#one-twelfth\" />\r\n          <use transform=\"rotate(60 400 400)\" xlink:href=\"#one-twelfth\" />\r\n        </g>\r\n        <use transform=\"rotate(90 400 400)\" xlink:href=\"#one-fourth\" />\r\n      </g>\r\n      <path\r\n        class=\"clock-hour-hand\"\r\n        id=\"anim-clock-hour-hand\"\r\n        #hourHand\r\n        d=\"m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z\"\r\n        transform=\"rotate(110.2650694444, 400, 400)\"\r\n      />\r\n      <path\r\n        class=\"clock-minute-hand\"\r\n        id=\"anim-clock-minute-hand\"\r\n        #minuteHand\r\n        d=\"M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z\"\r\n        transform=\"rotate(243.1808333333, 400, 400)\"\r\n      />\r\n      <path\r\n        class=\"clock-second-hand\"\r\n        id=\"anim-clock-second-hand\"\r\n        #secondHand\r\n        fill=\"#a40000\"\r\n        d=\"M 397.317,63.51744 395.91962,168.4 C 374.575,170.5125 358.2,188.365 358.2,210 c 0,21.635 16.3,39 36.61214,41.47594 L 391.52847,498 h 16.94306 L 405.1868,251.47593 C 425.5,249 441.8,231.635 441.8,210 c 2e-5,-21.635 -16.375,-39.4875 -37.71971,-41.6 L 402.683,63.51744 400,60 Z M 400,190.534 c 10.888,0 19.466,8.866 19.466,19.466 0,10.6 -8.578,19.466 -19.466,19.466 -10.888,0 -19.466,-8.866 -19.466,-19.466 0,-10.6 8.578,-19.466 19.466,-19.466 z\"\r\n        transform=\"rotate(190.85, 400, 400)\"\r\n      />\r\n    </svg>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}.analog-clock-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.analog-clock-container .aspect-ratio-box{position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:1/1}@supports not (aspect-ratio: 1/1){.analog-clock-container .aspect-ratio-box:before{content:\"\";display:block;padding-bottom:100%}.analog-clock-container .aspect-ratio-box svg{position:absolute;top:0;left:0;width:100%;height:100%}}.analog-clock-container .aspect-ratio-box svg{display:block;width:100%;height:100%}.analog-clock-container .aspect-ratio-box svg path:not(.clock-hour-hand):not(.clock-minute-hand):not(.clock-second-hand){stroke:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}:host:not(.show-seconds) .clock-second-hand{display:none}:host.has-background svg circle{fill:var(--mat-sys-surface, #fffbfe)}:host.clock-widget.analog{container-type:size;container-name:analog-clock}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AnalogClockComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-analog-clock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.has-background]': 'hasBackground()',
-                        '[class.show-seconds]': 'showSeconds()',
-                        'class': 'clock-widget analog'
-                    }, template: "<div class=\"analog-clock-container\">\r\n  <div class=\"aspect-ratio-box\">\r\n    <svg\r\n      version=\"1.1\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n      viewBox=\"0 0 800 800\"\r\n      preserveAspectRatio=\"xMidYMid meet\"\r\n    >\r\n      <!-- <circle cx=\"400\" cy=\"400\" r=\"400\" fill=\"#fff\"/> -->\r\n      <use transform=\"matrix(-1,0,0,1,800,0)\" xlink:href=\"#one-half\" />\r\n      <g id=\"one-half\">\r\n        <g id=\"one-fourth\">\r\n          <path d=\"m400 40v107\" stroke=\"#000\" stroke-width=\"26.7\" />\r\n          <g id=\"one-twelfth\">\r\n            <path\r\n              d=\"m580 88.233-42.5 73.612\"\r\n              stroke=\"#000\"\r\n              stroke-width=\"26.7\"\r\n            />\r\n            <g id=\"one-thirtieth\">\r\n              <path\r\n                id=\"one-sixtieth\"\r\n                d=\"m437.63 41.974-3.6585 34.808\"\r\n                stroke=\"#000\"\r\n                stroke-width=\"13.6\"\r\n              />\r\n              <use transform=\"rotate(6 400 400)\" xlink:href=\"#one-sixtieth\" />\r\n            </g>\r\n            <use transform=\"rotate(12 400 400)\" xlink:href=\"#one-thirtieth\" />\r\n          </g>\r\n          <use transform=\"rotate(30 400 400)\" xlink:href=\"#one-twelfth\" />\r\n          <use transform=\"rotate(60 400 400)\" xlink:href=\"#one-twelfth\" />\r\n        </g>\r\n        <use transform=\"rotate(90 400 400)\" xlink:href=\"#one-fourth\" />\r\n      </g>\r\n      <path\r\n        class=\"clock-hour-hand\"\r\n        id=\"anim-clock-hour-hand\"\r\n        #hourHand\r\n        d=\"m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z\"\r\n        transform=\"rotate(110.2650694444, 400, 400)\"\r\n      />\r\n      <path\r\n        class=\"clock-minute-hand\"\r\n        id=\"anim-clock-minute-hand\"\r\n        #minuteHand\r\n        d=\"M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z\"\r\n        transform=\"rotate(243.1808333333, 400, 400)\"\r\n      />\r\n      <path\r\n        class=\"clock-second-hand\"\r\n        id=\"anim-clock-second-hand\"\r\n        #secondHand\r\n        fill=\"#a40000\"\r\n        d=\"M 397.317,63.51744 395.91962,168.4 C 374.575,170.5125 358.2,188.365 358.2,210 c 0,21.635 16.3,39 36.61214,41.47594 L 391.52847,498 h 16.94306 L 405.1868,251.47593 C 425.5,249 441.8,231.635 441.8,210 c 2e-5,-21.635 -16.375,-39.4875 -37.71971,-41.6 L 402.683,63.51744 400,60 Z M 400,190.534 c 10.888,0 19.466,8.866 19.466,19.466 0,10.6 -8.578,19.466 -19.466,19.466 -10.888,0 -19.466,-8.866 -19.466,-19.466 0,-10.6 8.578,-19.466 19.466,-19.466 z\"\r\n        transform=\"rotate(190.85, 400, 400)\"\r\n      />\r\n    </svg>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}.analog-clock-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.analog-clock-container .aspect-ratio-box{position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:1/1}@supports not (aspect-ratio: 1/1){.analog-clock-container .aspect-ratio-box:before{content:\"\";display:block;padding-bottom:100%}.analog-clock-container .aspect-ratio-box svg{position:absolute;top:0;left:0;width:100%;height:100%}}.analog-clock-container .aspect-ratio-box svg{display:block;width:100%;height:100%}.analog-clock-container .aspect-ratio-box svg path:not(.clock-hour-hand):not(.clock-minute-hand):not(.clock-second-hand){stroke:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-hour-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-minute-hand{fill:var(--mat-sys-on-surface, #1d1b20)}.analog-clock-container .aspect-ratio-box svg .clock-second-hand{fill:var(--mat-sys-primary, #6750a4)}:host:not(.show-seconds) .clock-second-hand{display:none}:host.has-background svg circle{fill:var(--mat-sys-surface, #fffbfe)}:host.clock-widget.analog{container-type:size;container-name:analog-clock}\n"] }]
-        }], ctorParameters: () => [] });
-
-// clock-widget.component.ts
-class ClockWidgetComponent {
-    static metadata = {
-        widgetTypeid: '@default/clock-widget',
-        name: 'Clock',
-        description: 'Display time in analog or digital format',
-        svgIcon,
-    };
-    #sanitizer = inject(DomSanitizer);
-    #dialog = inject(MatDialog);
-    safeSvgIcon = this.#sanitizer.bypassSecurityTrustHtml(svgIcon);
-    state = signal({
-        mode: 'analog',
-        hasBackground: true,
-        timeFormat: '24h',
-        showSeconds: true,
-    });
-    constructor() {
-        // No timer logic needed - DigitalClock manages its own time
-    }
-    dashboardSetState(state) {
-        if (state) {
-            this.state.update((current) => ({
-                ...current,
-                ...state,
-            }));
-        }
-    }
-    dashboardGetState() {
-        return { ...this.state() };
-    }
-    dashboardEditState() {
-        const dialogRef = this.#dialog.open(ClockStateDialogComponent, {
-            data: this.dashboardGetState(),
-            width: '400px',
-            maxWidth: '90vw',
-            disableClose: false,
-            autoFocus: false,
-        });
-        dialogRef
-            .afterClosed()
-            .subscribe((result) => {
-            if (result) {
-                this.state.set(result);
-            }
-        });
-    }
-    get isAnalog() {
-        return this.state().mode === 'analog';
-    }
-    get isDigital() {
-        return this.state().mode === 'digital';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ClockWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ClockWidgetComponent, isStandalone: true, selector: "ngx-dashboard-clock-widget", ngImport: i0, template: "@if (isDigital) {\r\n  <ngx-digital-clock\r\n    [timeFormat]=\"state().timeFormat || '24h'\"\r\n    [showSeconds]=\"state().showSeconds ?? true\"\r\n    [hasBackground]=\"state().hasBackground ?? false\"\r\n  />\r\n} @else if (isAnalog) {\r\n  <ngx-analog-clock\r\n    [hasBackground]=\"state().hasBackground ?? false\"\r\n    [showSeconds]=\"state().showSeconds ?? true\"\r\n  />\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.clock-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.clock-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.clock-widget{padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}.clock-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.clock-widget:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.analog-clock{width:min(80cqw,80cqh);aspect-ratio:1/1;position:relative}.clock-face{width:100%;height:100%;border:2px solid currentColor;border-radius:50%;position:relative}.clock-face:before,.clock-face:after{content:\"\";position:absolute;background-color:currentColor;left:50%;transform:translate(-50%)}.clock-face:before{width:2px;height:10%;top:0}.clock-face:after{width:2px;height:10%;bottom:0}.hour-hand,.minute-hand{position:absolute;background-color:currentColor;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px}.hour-hand{width:4px;height:25%;transform:translate(-50%) rotate(30deg)}.minute-hand{width:2px;height:35%;transform:translate(-50%) rotate(90deg)}.center-dot{position:absolute;width:8px;height:8px;background-color:currentColor;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #6c757d);transition:fill .2s ease}.has-background .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-on-surface, #1f1f1f)}.svg-wrapper:hover .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "component", type: DigitalClockComponent, selector: "ngx-digital-clock", inputs: ["timeFormat", "showSeconds", "hasBackground"] }, { kind: "component", type: AnalogClockComponent, selector: "ngx-analog-clock", inputs: ["hasBackground", "showSeconds"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ClockWidgetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-dashboard-clock-widget', standalone: true, imports: [DigitalClockComponent, AnalogClockComponent], template: "@if (isDigital) {\r\n  <ngx-digital-clock\r\n    [timeFormat]=\"state().timeFormat || '24h'\"\r\n    [showSeconds]=\"state().showSeconds ?? true\"\r\n    [hasBackground]=\"state().hasBackground ?? false\"\r\n  />\r\n} @else if (isAnalog) {\r\n  <ngx-analog-clock\r\n    [hasBackground]=\"state().hasBackground ?? false\"\r\n    [showSeconds]=\"state().showSeconds ?? true\"\r\n  />\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.clock-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.clock-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.clock-widget{padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d)}.clock-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.clock-widget:hover{opacity:.8;color:var(--mat-sys-primary, #6750a4)}.analog-clock{width:min(80cqw,80cqh);aspect-ratio:1/1;position:relative}.clock-face{width:100%;height:100%;border:2px solid currentColor;border-radius:50%;position:relative}.clock-face:before,.clock-face:after{content:\"\";position:absolute;background-color:currentColor;left:50%;transform:translate(-50%)}.clock-face:before{width:2px;height:10%;top:0}.clock-face:after{width:2px;height:10%;bottom:0}.hour-hand,.minute-hand{position:absolute;background-color:currentColor;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px}.hour-hand{width:4px;height:25%;transform:translate(-50%) rotate(30deg)}.minute-hand{width:2px;height:35%;transform:translate(-50%) rotate(90deg)}.center-dot{position:absolute;width:8px;height:8px;background-color:currentColor;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease;transform-origin:center center}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #6c757d);transition:fill .2s ease}.has-background .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-on-surface, #1f1f1f)}.svg-wrapper:hover .svg-placeholder ::ng-deep svg{fill:var(--mat-sys-primary, #6750a4)}\n"] }]
-        }], ctorParameters: () => [] });
-
-/*
- * Public API Surface of ngx-dashboard-widgets
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ArrowWidgetComponent, ClockWidgetComponent, LabelWidgetComponent, ResponsiveTextDirective };
-//# sourceMappingURL=dragonworks-ngx-dashboard-widgets.mjs.map