npm - @dragonworks/ngx-dashboard-widgets - Versions diffs - 20.1.6 → 20.3.1 - Mend

@dragonworks/ngx-dashboard-widgets 20.1.6 → 20.3.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.

Files changed (4) hide show

package/fesm2022/dragonworks-ngx-dashboard-widgets.mjs +791 -245
package/fesm2022/dragonworks-ngx-dashboard-widgets.mjs.map +1 -1
package/index.d.ts +12 -3
package/package.json +3 -2

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Component, input, numberAttribute, booleanAttribute, ElementRef, NgZone, PLATFORM_ID, DestroyRef, Directive, ChangeDetectionStrategy, Renderer2, viewChild, effect, LOCALE_ID, afterNextRender } from '@angular/core';
+import { inject, signal, computed, Component, input, numberAttribute, booleanAttribute, ElementRef, NgZone, PLATFORM_ID, DestroyRef, effect, Directive, ChangeDetectionStrategy, Renderer2, viewChild, LOCALE_ID, afterNextRender } 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';
@@ -23,6 +23,10 @@ import { MatRadioModule } from '@angular/material/radio';
 import { from, map, of } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
+// Auto-generated by scripts/generate-versions.js
+// Do not edit manually
+const NGX_DASHBOARD_WIDGETS_VERSION = '20.3.1';
 // arrow-widget.metadata.ts
 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>';
@@ -80,25 +84,50 @@ class ArrowStateDialogComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ArrowStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: ArrowStateDialogComponent, isStandalone: true, selector: "lib-arrow-state-dialog", ngImport: i0, template: `
-    <h2 mat-dialog-title>Arrow Settings</h2>
+    <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.arrow.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-label i18n="@@ngx.dashboard.widgets.arrow.dialog.direction"
+          >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-option
+            value="up"
+            i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.up"
+            >Up</mat-option
+          >
+          <mat-option
+            value="right"
+            i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.right"
+            >Right</mat-option
+          >
+          <mat-option
+            value="down"
+            i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.down"
+            >Down</mat-option
+          >
+          <mat-option
+            value="left"
+            i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.left"
+            >Left</mat-option
+          >
         </mat-select>
       </mat-form-field>
       <!-- Opacity Slider -->
       <div class="slider-field">
-        <div class="field-label">Opacity: {{ formatOpacity(opacity()) }}%</div>
+        <div
+          class="field-label"
+          i18n="@@ngx.dashboard.widgets.arrow.dialog.opacity"
+        >
+          Opacity: {{ formatOpacity(opacity()) }}%
+        </div>
         <mat-slider [min]="0.1" [max]="1" [step]="0.1">
           <input matSliderThumb [(ngModel)]="opacity" />
         </mat-slider>
@@ -106,18 +135,35 @@ class ArrowStateDialogComponent {
       <!-- Background Toggle -->
       <div class="toggle-field">
-        <mat-slide-toggle
+        <mat-slide-toggle
           [checked]="hasBackground()"
-          (change)="onBackgroundToggle($event.checked)">
+          (change)="onBackgroundToggle($event.checked)"
+          i18n="@@ngx.dashboard.widgets.arrow.dialog.background"
+        >
           Background
         </mat-slide-toggle>
-        <span class="toggle-hint">Adds a background behind the arrow</span>
+        <span
+          class="toggle-hint"
+          i18n="@@ngx.dashboard.widgets.arrow.dialog.backgroundHint"
+          >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()">
+      <button
+        mat-button
+        (click)="onCancel()"
+        i18n="@@ngx.dashboard.common.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        (click)="save()"
+        [disabled]="!hasChanged()"
+        i18n="@@ngx.dashboard.common.save"
+      >
         Save
       </button>
     </mat-dialog-actions>
@@ -135,25 +181,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatSliderModule,
                         MatSlideToggleModule,
                     ], template: `
-    <h2 mat-dialog-title>Arrow Settings</h2>
+    <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.arrow.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-label i18n="@@ngx.dashboard.widgets.arrow.dialog.direction"
+          >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-option
+            value="up"
+            i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.up"
+            >Up</mat-option
+          >
+          <mat-option
+            value="right"
+            i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.right"
+            >Right</mat-option
+          >
+          <mat-option
+            value="down"
+            i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.down"
+            >Down</mat-option
+          >
+          <mat-option
+            value="left"
+            i18n="@@ngx.dashboard.widgets.arrow.dialog.direction.left"
+            >Left</mat-option
+          >
         </mat-select>
       </mat-form-field>
       <!-- Opacity Slider -->
       <div class="slider-field">
-        <div class="field-label">Opacity: {{ formatOpacity(opacity()) }}%</div>
+        <div
+          class="field-label"
+          i18n="@@ngx.dashboard.widgets.arrow.dialog.opacity"
+        >
+          Opacity: {{ formatOpacity(opacity()) }}%
+        </div>
         <mat-slider [min]="0.1" [max]="1" [step]="0.1">
           <input matSliderThumb [(ngModel)]="opacity" />
         </mat-slider>
@@ -161,18 +232,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
       <!-- Background Toggle -->
       <div class="toggle-field">
-        <mat-slide-toggle
+        <mat-slide-toggle
           [checked]="hasBackground()"
-          (change)="onBackgroundToggle($event.checked)">
+          (change)="onBackgroundToggle($event.checked)"
+          i18n="@@ngx.dashboard.widgets.arrow.dialog.background"
+        >
           Background
         </mat-slide-toggle>
-        <span class="toggle-hint">Adds a background behind the arrow</span>
+        <span
+          class="toggle-hint"
+          i18n="@@ngx.dashboard.widgets.arrow.dialog.backgroundHint"
+          >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()">
+      <button
+        mat-button
+        (click)="onCancel()"
+        i18n="@@ngx.dashboard.common.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        (click)="save()"
+        [disabled]="!hasChanged()"
+        i18n="@@ngx.dashboard.common.save"
+      >
         Save
       </button>
     </mat-dialog-actions>
@@ -183,8 +271,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
 class ArrowWidgetComponent {
     static metadata = {
         widgetTypeid: '@ngx-dashboard/arrow-widget',
-        name: 'Arrow',
-        description: 'A generic arrow',
+        name: $localize `:@@ngx.dashboard.widgets.arrow.name:Arrow`,
+        description: $localize `:@@ngx.dashboard.widgets.arrow.description:A generic arrow`,
         svgIcon: svgIcon$3,
     };
     #sanitizer = inject(DomSanitizer);
@@ -256,6 +344,7 @@ class LabelStateDialogComponent {
     // Responsive font size constraints
     minFontSize = signal(this.data.minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : []));
     maxFontSize = signal(this.data.maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : []));
+    templateString = signal(this.data.templateString, ...(ngDevMode ? [{ debugName: "templateString" }] : []));
     // Store original values for comparison
     originalLabel = this.data.label ?? '';
     originalFontSize = this.data.fontSize ?? 16;
@@ -266,6 +355,7 @@ class LabelStateDialogComponent {
     originalResponsive = this.data.responsive ?? false;
     originalMinFontSize = this.data.minFontSize ?? 8;
     originalMaxFontSize = this.data.maxFontSize ?? 64;
+    originalTemplateString = this.data.templateString;
     // Validation computed properties
     isMinFontSizeValid = computed(() => {
         const min = this.minFontSize();
@@ -288,7 +378,8 @@ class LabelStateDialogComponent {
         this.hasBackground() !== this.originalHasBackground ||
         this.responsive() !== this.originalResponsive ||
         this.minFontSize() !== this.originalMinFontSize ||
-        this.maxFontSize() !== this.originalMaxFontSize, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
+        this.maxFontSize() !== this.originalMaxFontSize ||
+        this.templateString() !== this.originalTemplateString, ...(ngDevMode ? [{ debugName: "hasChanged" }] : []));
     formatOpacity(value) {
         return Math.round(value * 100);
     }
@@ -324,7 +415,7 @@ class LabelStateDialogComponent {
         this.dialogRef.close();
     }
     save() {
-        this.dialogRef.close({
+        const state = {
             label: this.label(),
             fontSize: this.fontSize(),
             alignment: this.alignment(),
@@ -334,96 +425,158 @@ class LabelStateDialogComponent {
             responsive: this.responsive(),
             minFontSize: this.minFontSize(),
             maxFontSize: this.maxFontSize(),
-        });
+        };
+        // Only include templateString if it has a value
+        const templateString = this.templateString();
+        if (templateString) {
+            state.templateString = templateString;
+        }
+        this.dialogRef.close(state);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LabelStateDialogComponent, isStandalone: true, selector: "lib-label-state-dialog", ngImport: i0, template: `
-    <h2 mat-dialog-title>Label Settings</h2>
+    <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.label.dialog.title">
+      Label Settings
+    </h2>
     <mat-dialog-content>
       <mat-form-field appearance="outline" class="label-text-field">
-        <mat-label>Label Text</mat-label>
+        <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.labelText"
+          >Label Text</mat-label
+        >
         <input
           matInput
           type="text"
           [value]="label()"
           (input)="label.set($any($event.target).value)"
+          i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.placeholder"
           placeholder="Enter your label text..."
         />
       </mat-form-field>
       <!-- Responsive Text Toggle -->
       <div class="toggle-section">
-        <mat-slide-toggle
+        <mat-slide-toggle
           [checked]="responsive()"
-          (change)="responsive.set($event.checked)">
+          (change)="responsive.set($event.checked)"
+          i18n="@@ngx.dashboard.widgets.label.dialog.responsive"
+        >
           Responsive Text
         </mat-slide-toggle>
-        <span class="toggle-description"
+        <span
+          class="toggle-description"
+          i18n="@@ngx.dashboard.widgets.label.dialog.responsiveDescription"
           >Automatically adjust text size to fit the widget</span
         >
       </div>
       <!-- Responsive Font Size Constraints (only shown when responsive is enabled) -->
       @if (responsive()) {
-        <div class="responsive-section">
-          <div class="section-label">Font Size Limits</div>
-          <div class="row-layout">
-            <mat-form-field appearance="outline">
-              <mat-label>Min Size (px)</mat-label>
-              <input
-                matInput
-                type="number"
-                [value]="minFontSize()"
-                (input)="validateAndCorrectMinFontSize(+$any($event.target).value)"
-                (blur)="validateAndCorrectMinFontSize(minFontSize())"
-                min="8"
-                max="24"
-                placeholder="8"
-              />
-              @if (!isMinFontSizeValid() || !isFontSizeRangeValid()) {
-                <mat-error>
-                  @if (!isMinFontSizeValid()) {
-                    Must be between 8-24px
-                  } @else {
-                    Must be less than max size
-                  }
-                </mat-error>
+      <div class="responsive-section">
+        <div
+          class="section-label"
+          i18n="@@ngx.dashboard.widgets.label.dialog.fontSizeLimits"
+        >
+          Font Size Limits
+        </div>
+        <div class="row-layout">
+          <mat-form-field appearance="outline">
+            <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.minSize"
+              >Min Size (px)</mat-label
+            >
+            <input
+              matInput
+              type="number"
+              [value]="minFontSize()"
+              (input)="
+                validateAndCorrectMinFontSize(+$any($event.target).value)
+              "
+              (blur)="validateAndCorrectMinFontSize(minFontSize())"
+              min="8"
+              max="24"
+              placeholder="8"
+            />
+            @if (!isMinFontSizeValid() || !isFontSizeRangeValid()) {
+            <mat-error>
+              @if (!isMinFontSizeValid()) {
+              <span i18n="@@ngx.dashboard.widgets.label.dialog.minSizeError"
+                >Must be between 8-24px</span
+              >
               } @else {
-                <mat-hint>8-24px range</mat-hint>
+              <span
+                i18n="@@ngx.dashboard.widgets.label.dialog.minSizeRangeError"
+                >Must be less than max size</span
+              >
               }
-            </mat-form-field>
+            </mat-error>
+            } @else {
+            <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.minSizeHint"
+              >8-24px range</mat-hint
+            >
+            }
+          </mat-form-field>
-            <mat-form-field appearance="outline">
-              <mat-label>Max Size (px)</mat-label>
-              <input
-                matInput
-                type="number"
-                [value]="maxFontSize()"
-                (input)="validateAndCorrectMaxFontSize(+$any($event.target).value)"
-                (blur)="validateAndCorrectMaxFontSize(maxFontSize())"
-                min="16"
-                max="128"
-                placeholder="64"
-              />
-              @if (!isMaxFontSizeValid() || !isFontSizeRangeValid()) {
-                <mat-error>
-                  @if (!isMaxFontSizeValid()) {
-                    Must be between 16-128px
-                  } @else {
-                    Must be greater than min size
-                  }
-                </mat-error>
+          <mat-form-field appearance="outline">
+            <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.maxSize"
+              >Max Size (px)</mat-label
+            >
+            <input
+              matInput
+              type="number"
+              [value]="maxFontSize()"
+              (input)="
+                validateAndCorrectMaxFontSize(+$any($event.target).value)
+              "
+              (blur)="validateAndCorrectMaxFontSize(maxFontSize())"
+              min="16"
+              max="128"
+              placeholder="64"
+            />
+            @if (!isMaxFontSizeValid() || !isFontSizeRangeValid()) {
+            <mat-error>
+              @if (!isMaxFontSizeValid()) {
+              <span i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeError"
+                >Must be between 16-128px</span
+              >
               } @else {
-                <mat-hint>16-128px range</mat-hint>
+              <span
+                i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeRangeError"
+                >Must be greater than min size</span
+              >
               }
-            </mat-form-field>
-          </div>
+            </mat-error>
+            } @else {
+            <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeHint"
+              >16-128px range</mat-hint
+            >
+            }
+          </mat-form-field>
         </div>
+        <!-- Template String field -->
+        <mat-form-field appearance="outline">
+          <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.templateString"
+            >Template String</mat-label
+          >
+          <input
+            matInput
+            type="text"
+            [value]="templateString() || ''"
+            (input)="templateString.set($any($event.target).value || undefined)"
+            i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.templateStringPlaceholder"
+            placeholder="Optional: Text to use for size calculation"
+          />
+          <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.templateStringHint"
+            >Use when displayed text varies but size should remain consistent</mat-hint
+          >
+        </mat-form-field>
+      </div>
       }
       <div class="row-layout">
         <mat-form-field appearance="outline">
-          <mat-label>Font Size (px)</mat-label>
+          <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontSize"
+            >Font Size (px)</mat-label
+          >
           <input
             matInput
             type="number"
@@ -437,32 +590,61 @@ class LabelStateDialogComponent {
         </mat-form-field>
         <mat-form-field appearance="outline">
-          <mat-label>Alignment</mat-label>
+          <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.alignment"
+            >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-option
+              value="left"
+              i18n="@@ngx.dashboard.widgets.label.dialog.alignment.left"
+              >Left</mat-option
+            >
+            <mat-option
+              value="center"
+              i18n="@@ngx.dashboard.widgets.label.dialog.alignment.center"
+              >Center</mat-option
+            >
+            <mat-option
+              value="right"
+              i18n="@@ngx.dashboard.widgets.label.dialog.alignment.right"
+              >Right</mat-option
+            >
           </mat-select>
         </mat-form-field>
       </div>
       <mat-form-field appearance="outline">
-        <mat-label>Font Weight</mat-label>
+        <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight"
+          >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-option
+            value="normal"
+            i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.normal"
+            >Normal</mat-option
+          >
+          <mat-option
+            value="bold"
+            i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.bold"
+            >Bold</mat-option
+          >
         </mat-select>
       </mat-form-field>
       <!-- Opacity Slider -->
       <div class="slider-section">
-        <div class="slider-label">Opacity: {{ formatOpacity(opacity()) }}%</div>
+        <div
+          class="slider-label"
+          i18n="@@ngx.dashboard.widgets.label.dialog.opacity"
+        >
+          Opacity: {{ formatOpacity(opacity()) }}%
+        </div>
         <mat-slider [min]="0.1" [max]="1" [step]="0.1">
           <input matSliderThumb [(ngModel)]="opacity" />
         </mat-slider>
@@ -470,24 +652,39 @@ class LabelStateDialogComponent {
       <!-- Background Toggle -->
       <div class="toggle-section">
-        <mat-slide-toggle
+        <mat-slide-toggle
           [checked]="!transparentBackground()"
-          (change)="onBackgroundToggle($event.checked)">
+          (change)="onBackgroundToggle($event.checked)"
+          i18n="@@ngx.dashboard.widgets.label.dialog.background"
+        >
           Background
         </mat-slide-toggle>
-        <span class="toggle-description"
+        <span
+          class="toggle-description"
+          i18n="@@ngx.dashboard.widgets.label.dialog.backgroundDescription"
           >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() || !isFormValid()">
+      <button
+        mat-button
+        (click)="onCancel()"
+        i18n="@@ngx.dashboard.common.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        (click)="save()"
+        [disabled]="!hasChanged() || !isFormValid()"
+        i18n="@@ngx.dashboard.common.save"
+      >
         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}.responsive-section{margin-bottom:1.5rem;padding:1rem;border-radius:12px;background-color:var(--mat-app-surface-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .05));border:1px solid var(--mat-app-outline-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .12))}.section-label{display:block;margin-bottom:.75rem;font-weight:500;color:var(--mat-app-on-surface-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .6))}.responsive-section .row-layout{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+  `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden}mat-form-field{width:100%;display:block;margin-bottom:1rem}.label-text-field{margin-top:1rem}.row-layout{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.row-layout mat-form-field{margin-bottom:0}.slider-section{margin-bottom:1.5rem;margin-right:1rem}.slider-label{display:block;margin-bottom:.5rem}mat-slider{width:100%;display:block}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.toggle-description{margin:0}.responsive-section{margin-bottom:1.5rem;padding:1rem;border-radius:12px;background-color:var( --mat-app-surface-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .05) );border:1px solid var( --mat-app-outline-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .12) )}.section-label{display:block;margin-bottom:.75rem;font-weight:500;color:var( --mat-app-on-surface-variant, rgba(var(--mat-app-on-surface-rgb, 0, 0, 0), .6) )}.responsive-section .row-layout{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelStateDialogComponent, decorators: [{
             type: Component,
@@ -502,92 +699,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatSliderModule,
                         MatSlideToggleModule, // Add this import
                     ], template: `
-    <h2 mat-dialog-title>Label Settings</h2>
+    <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.label.dialog.title">
+      Label Settings
+    </h2>
     <mat-dialog-content>
       <mat-form-field appearance="outline" class="label-text-field">
-        <mat-label>Label Text</mat-label>
+        <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.labelText"
+          >Label Text</mat-label
+        >
         <input
           matInput
           type="text"
           [value]="label()"
           (input)="label.set($any($event.target).value)"
+          i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.placeholder"
           placeholder="Enter your label text..."
         />
       </mat-form-field>
       <!-- Responsive Text Toggle -->
       <div class="toggle-section">
-        <mat-slide-toggle
+        <mat-slide-toggle
           [checked]="responsive()"
-          (change)="responsive.set($event.checked)">
+          (change)="responsive.set($event.checked)"
+          i18n="@@ngx.dashboard.widgets.label.dialog.responsive"
+        >
           Responsive Text
         </mat-slide-toggle>
-        <span class="toggle-description"
+        <span
+          class="toggle-description"
+          i18n="@@ngx.dashboard.widgets.label.dialog.responsiveDescription"
           >Automatically adjust text size to fit the widget</span
         >
       </div>
       <!-- Responsive Font Size Constraints (only shown when responsive is enabled) -->
       @if (responsive()) {
-        <div class="responsive-section">
-          <div class="section-label">Font Size Limits</div>
-          <div class="row-layout">
-            <mat-form-field appearance="outline">
-              <mat-label>Min Size (px)</mat-label>
-              <input
-                matInput
-                type="number"
-                [value]="minFontSize()"
-                (input)="validateAndCorrectMinFontSize(+$any($event.target).value)"
-                (blur)="validateAndCorrectMinFontSize(minFontSize())"
-                min="8"
-                max="24"
-                placeholder="8"
-              />
-              @if (!isMinFontSizeValid() || !isFontSizeRangeValid()) {
-                <mat-error>
-                  @if (!isMinFontSizeValid()) {
-                    Must be between 8-24px
-                  } @else {
-                    Must be less than max size
-                  }
-                </mat-error>
+      <div class="responsive-section">
+        <div
+          class="section-label"
+          i18n="@@ngx.dashboard.widgets.label.dialog.fontSizeLimits"
+        >
+          Font Size Limits
+        </div>
+        <div class="row-layout">
+          <mat-form-field appearance="outline">
+            <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.minSize"
+              >Min Size (px)</mat-label
+            >
+            <input
+              matInput
+              type="number"
+              [value]="minFontSize()"
+              (input)="
+                validateAndCorrectMinFontSize(+$any($event.target).value)
+              "
+              (blur)="validateAndCorrectMinFontSize(minFontSize())"
+              min="8"
+              max="24"
+              placeholder="8"
+            />
+            @if (!isMinFontSizeValid() || !isFontSizeRangeValid()) {
+            <mat-error>
+              @if (!isMinFontSizeValid()) {
+              <span i18n="@@ngx.dashboard.widgets.label.dialog.minSizeError"
+                >Must be between 8-24px</span
+              >
               } @else {
-                <mat-hint>8-24px range</mat-hint>
+              <span
+                i18n="@@ngx.dashboard.widgets.label.dialog.minSizeRangeError"
+                >Must be less than max size</span
+              >
               }
-            </mat-form-field>
+            </mat-error>
+            } @else {
+            <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.minSizeHint"
+              >8-24px range</mat-hint
+            >
+            }
+          </mat-form-field>
-            <mat-form-field appearance="outline">
-              <mat-label>Max Size (px)</mat-label>
-              <input
-                matInput
-                type="number"
-                [value]="maxFontSize()"
-                (input)="validateAndCorrectMaxFontSize(+$any($event.target).value)"
-                (blur)="validateAndCorrectMaxFontSize(maxFontSize())"
-                min="16"
-                max="128"
-                placeholder="64"
-              />
-              @if (!isMaxFontSizeValid() || !isFontSizeRangeValid()) {
-                <mat-error>
-                  @if (!isMaxFontSizeValid()) {
-                    Must be between 16-128px
-                  } @else {
-                    Must be greater than min size
-                  }
-                </mat-error>
+          <mat-form-field appearance="outline">
+            <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.maxSize"
+              >Max Size (px)</mat-label
+            >
+            <input
+              matInput
+              type="number"
+              [value]="maxFontSize()"
+              (input)="
+                validateAndCorrectMaxFontSize(+$any($event.target).value)
+              "
+              (blur)="validateAndCorrectMaxFontSize(maxFontSize())"
+              min="16"
+              max="128"
+              placeholder="64"
+            />
+            @if (!isMaxFontSizeValid() || !isFontSizeRangeValid()) {
+            <mat-error>
+              @if (!isMaxFontSizeValid()) {
+              <span i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeError"
+                >Must be between 16-128px</span
+              >
               } @else {
-                <mat-hint>16-128px range</mat-hint>
+              <span
+                i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeRangeError"
+                >Must be greater than min size</span
+              >
               }
-            </mat-form-field>
-          </div>
+            </mat-error>
+            } @else {
+            <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.maxSizeHint"
+              >16-128px range</mat-hint
+            >
+            }
+          </mat-form-field>
         </div>
+        <!-- Template String field -->
+        <mat-form-field appearance="outline">
+          <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.templateString"
+            >Template String</mat-label
+          >
+          <input
+            matInput
+            type="text"
+            [value]="templateString() || ''"
+            (input)="templateString.set($any($event.target).value || undefined)"
+            i18n-placeholder="@@ngx.dashboard.widgets.label.dialog.templateStringPlaceholder"
+            placeholder="Optional: Text to use for size calculation"
+          />
+          <mat-hint i18n="@@ngx.dashboard.widgets.label.dialog.templateStringHint"
+            >Use when displayed text varies but size should remain consistent</mat-hint
+          >
+        </mat-form-field>
+      </div>
       }
       <div class="row-layout">
         <mat-form-field appearance="outline">
-          <mat-label>Font Size (px)</mat-label>
+          <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontSize"
+            >Font Size (px)</mat-label
+          >
           <input
             matInput
             type="number"
@@ -601,32 +854,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
         </mat-form-field>
         <mat-form-field appearance="outline">
-          <mat-label>Alignment</mat-label>
+          <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.alignment"
+            >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-option
+              value="left"
+              i18n="@@ngx.dashboard.widgets.label.dialog.alignment.left"
+              >Left</mat-option
+            >
+            <mat-option
+              value="center"
+              i18n="@@ngx.dashboard.widgets.label.dialog.alignment.center"
+              >Center</mat-option
+            >
+            <mat-option
+              value="right"
+              i18n="@@ngx.dashboard.widgets.label.dialog.alignment.right"
+              >Right</mat-option
+            >
           </mat-select>
         </mat-form-field>
       </div>
       <mat-form-field appearance="outline">
-        <mat-label>Font Weight</mat-label>
+        <mat-label i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight"
+          >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-option
+            value="normal"
+            i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.normal"
+            >Normal</mat-option
+          >
+          <mat-option
+            value="bold"
+            i18n="@@ngx.dashboard.widgets.label.dialog.fontWeight.bold"
+            >Bold</mat-option
+          >
         </mat-select>
       </mat-form-field>
       <!-- Opacity Slider -->
       <div class="slider-section">
-        <div class="slider-label">Opacity: {{ formatOpacity(opacity()) }}%</div>
+        <div
+          class="slider-label"
+          i18n="@@ngx.dashboard.widgets.label.dialog.opacity"
+        >
+          Opacity: {{ formatOpacity(opacity()) }}%
+        </div>
         <mat-slider [min]="0.1" [max]="1" [step]="0.1">
           <input matSliderThumb [(ngModel)]="opacity" />
         </mat-slider>
@@ -634,24 +916,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
       <!-- Background Toggle -->
       <div class="toggle-section">
-        <mat-slide-toggle
+        <mat-slide-toggle
           [checked]="!transparentBackground()"
-          (change)="onBackgroundToggle($event.checked)">
+          (change)="onBackgroundToggle($event.checked)"
+          i18n="@@ngx.dashboard.widgets.label.dialog.background"
+        >
           Background
         </mat-slide-toggle>
-        <span class="toggle-description"
+        <span
+          class="toggle-description"
+          i18n="@@ngx.dashboard.widgets.label.dialog.backgroundDescription"
           >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() || !isFormValid()">
+      <button
+        mat-button
+        (click)="onCancel()"
+        i18n="@@ngx.dashboard.common.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        (click)="save()"
+        [disabled]="!hasChanged() || !isFormValid()"
+        i18n="@@ngx.dashboard.common.save"
+      >
         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}.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"] }]
+  `, 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"] }]
         }] });
 /**
@@ -660,7 +957,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
  *
  * @example
  * <div class="container">
- *   <span responsiveText [minFontSize]="12" [maxFontSize]="72">Dynamic text here</span>
+ *   <span libResponsiveText [minFontSize]="12" [maxFontSize]="72">Dynamic text here</span>
+ *   <span libResponsiveText [templateString]="'Template for sizing'">Shorter text</span>
  * </div>
  */
 class ResponsiveTextDirective {
@@ -678,6 +976,8 @@ class ResponsiveTextDirective {
     observeMutations = input(true, ...(ngDevMode ? [{ debugName: "observeMutations", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Debounce delay in ms for resize/mutation callbacks */
     debounceMs = input(16, ...(ngDevMode ? [{ debugName: "debounceMs", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Template string to use for size calculations instead of actual content */
+    templateString = input(undefined, ...(ngDevMode ? [{ debugName: "templateString" }] : []));
     /* ───────────────────────── Private state ───────────────────────── */
     el = inject(ElementRef);
     zone = inject(NgZone);
@@ -700,21 +1000,35 @@ class ResponsiveTextDirective {
     fitTimeout;
     // Cache for performance
     lastText = '';
+    lastTemplateString = '';
     lastMaxW = 0;
     lastMaxH = 0;
     lastFontSize = 0;
+    isViewInitialized = false;
     constructor() {
         // Set up cleanup on component destruction using modern DestroyRef
         this.destroyRef.onDestroy(() => {
             this.cleanup();
         });
+        // Watch for input changes and trigger refit
+        effect(() => {
+            // Access the signals to track them (triggers when they change)
+            this.templateString();
+            this.minFontSize();
+            this.maxFontSize();
+            // Only trigger refit if directive is initialized and view is ready
+            if (this.isViewInitialized && isPlatformBrowser(this.platformId)) {
+                this.zone.runOutsideAngular(() => {
+                    this.requestFit();
+                });
+            }
+        });
     }
     ngAfterViewInit() {
         if (!isPlatformBrowser(this.platformId))
             return;
-        // Set initial styles
-        const span = this.el.nativeElement;
-        span.style.transition = 'font-size 0.1s ease-out';
+        // Mark as initialized for the effect to start watching
+        this.isViewInitialized = true;
         // All observer callbacks run outside Angular's zone
         this.zone.runOutsideAngular(() => {
             this.fit();
@@ -744,26 +1058,30 @@ class ResponsiveTextDirective {
         const parent = span.parentElement;
         if (!parent)
             return;
-        const text = span.textContent?.trim() || '';
-        if (!text) {
+        const actualText = span.textContent?.trim() || '';
+        const templateString = this.templateString()?.trim();
+        const measureText = templateString || actualText;
+        if (!measureText) {
             span.style.fontSize = `${this.minFontSize()}px`;
             return;
         }
         const { maxW, maxH } = this.getAvailableSpace(parent);
         // Check cache to avoid redundant calculations
-        if (text === this.lastText &&
+        if (actualText === this.lastText &&
+            (templateString || '') === this.lastTemplateString &&
             maxW === this.lastMaxW &&
             maxH === this.lastMaxH &&
             this.lastFontSize > 0) {
             return;
         }
         // Calculate with conservative buffer for sub-pixel accuracy
-        const ideal = this.calcFit(text, maxW * 0.98, maxH * 0.98);
+        const ideal = this.calcFit(measureText, maxW * 0.98, maxH * 0.98);
         span.style.fontSize = `${ideal}px`;
         // DOM verification pass
         this.verifyFit(span, maxW, maxH, ideal);
         // Update cache
-        this.lastText = text;
+        this.lastText = actualText;
+        this.lastTemplateString = templateString || '';
         this.lastMaxW = maxW;
         this.lastMaxH = maxH;
         this.lastFontSize = parseFloat(span.style.fontSize);
@@ -901,7 +1219,7 @@ class ResponsiveTextDirective {
         this._ctx = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResponsiveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.1", type: ResponsiveTextDirective, isStandalone: true, selector: "[libResponsiveText]", inputs: { minFontSize: { classPropertyName: "minFontSize", publicName: "minFontSize", isSignal: true, isRequired: false, transformFunction: null }, maxFontSize: { classPropertyName: "maxFontSize", publicName: "maxFontSize", isSignal: true, isRequired: false, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, observeMutations: { classPropertyName: "observeMutations", publicName: "observeMutations", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.white-space": "\"nowrap\"", "style.overflow": "\"visible\"" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.1", type: ResponsiveTextDirective, isStandalone: true, selector: "[libResponsiveText]", inputs: { minFontSize: { classPropertyName: "minFontSize", publicName: "minFontSize", isSignal: true, isRequired: false, transformFunction: null }, maxFontSize: { classPropertyName: "maxFontSize", publicName: "maxFontSize", isSignal: true, isRequired: false, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, observeMutations: { classPropertyName: "observeMutations", publicName: "observeMutations", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, templateString: { classPropertyName: "templateString", publicName: "templateString", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.white-space": "\"nowrap\"", "style.overflow": "\"visible\"" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResponsiveTextDirective, decorators: [{
             type: Directive,
@@ -921,8 +1239,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
 class LabelWidgetComponent {
     static metadata = {
         widgetTypeid: '@ngx-dashboard/label-widget',
-        name: 'Label',
-        description: 'A generic text label',
+        name: $localize `:@@ngx.dashboard.widgets.label.name:Label`,
+        description: $localize `:@@ngx.dashboard.widgets.label.description:A generic text label`,
         svgIcon: svgIcon$2,
     };
     #sanitizer = inject(DomSanitizer);
@@ -948,7 +1266,12 @@ class LabelWidgetComponent {
         }
     }
     dashboardGetState() {
-        return { ...this.state() };
+        const state = { ...this.state() };
+        // Remove templateString if undefined to maintain backward compatibility
+        if (state.templateString === undefined) {
+            delete state.templateString;
+        }
+        return state;
     }
     dashboardEditState() {
         const dialogRef = this.#dialog.open(LabelStateDialogComponent, {
@@ -975,12 +1298,13 @@ class LabelWidgetComponent {
     // Computed properties for responsive font size limits with fallbacks
     minFontSize = computed(() => this.state().minFontSize ?? 8, ...(ngDevMode ? [{ debugName: "minFontSize" }] : []));
     maxFontSize = computed(() => this.state().maxFontSize ?? 64, ...(ngDevMode ? [{ debugName: "maxFontSize" }] : []));
+    templateString = computed(() => this.state().templateString, ...(ngDevMode ? [{ debugName: "templateString" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LabelWidgetComponent, isStandalone: true, selector: "ngx-dashboard-label-widget", ngImport: i0, template: "@if (hasContent) {\r\n<div\r\n  class=\"label-widget\"\r\n  [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\r\n  [style.--widget-opacity]=\"state().opacity\"\r\n  [class.text-left]=\"state().alignment === 'left'\"\r\n  [class.text-right]=\"state().alignment === 'right'\"\r\n  [class.font-bold]=\"state().fontWeight === 'bold'\"\r\n  [class.has-background]=\"state().hasBackground\"\r\n>\r\n  @if (state().responsive) {\r\n    <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\">{{ label }}</div>\r\n  } @else {\r\n    <div class=\"label-text\">{{ label }}</div>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "directive", type: ResponsiveTextDirective, selector: "[libResponsiveText]", inputs: ["minFontSize", "maxFontSize", "lineHeight", "observeMutations", "debounceMs"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LabelWidgetComponent, isStandalone: true, selector: "ngx-dashboard-label-widget", ngImport: i0, template: "@if (hasContent) {\r\n<div\r\n  class=\"label-widget\"\r\n  [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\r\n  [style.--widget-opacity]=\"state().opacity\"\r\n  [class.text-left]=\"state().alignment === 'left'\"\r\n  [class.text-right]=\"state().alignment === 'right'\"\r\n  [class.font-bold]=\"state().fontWeight === 'bold'\"\r\n  [class.has-background]=\"state().hasBackground\"\r\n>\r\n  @if (state().responsive) {\r\n    <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\" [templateString]=\"templateString()\">{{ label }}</div>\r\n  } @else {\r\n    <div class=\"label-text\">{{ label }}</div>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "directive", type: ResponsiveTextDirective, selector: "[libResponsiveText]", inputs: ["minFontSize", "maxFontSize", "lineHeight", "observeMutations", "debounceMs", "templateString"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", 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\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\">{{ label }}</div>\r\n  } @else {\r\n    <div class=\"label-text\">{{ label }}</div>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] }]
+            args: [{ selector: 'ngx-dashboard-label-widget', imports: [ResponsiveTextDirective], template: "@if (hasContent) {\r\n<div\r\n  class=\"label-widget\"\r\n  [style.fontSize.rem]=\"state().responsive ? null : state().fontSize! / 16\"\r\n  [style.--widget-opacity]=\"state().opacity\"\r\n  [class.text-left]=\"state().alignment === 'left'\"\r\n  [class.text-right]=\"state().alignment === 'right'\"\r\n  [class.font-bold]=\"state().fontWeight === 'bold'\"\r\n  [class.has-background]=\"state().hasBackground\"\r\n>\r\n  @if (state().responsive) {\r\n    <div class=\"label-text\" libResponsiveText [minFontSize]=\"minFontSize()\" [maxFontSize]=\"maxFontSize()\" [templateString]=\"templateString()\">{{ label }}</div>\r\n  } @else {\r\n    <div class=\"label-text\">{{ label }}</div>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"svg-wrapper\" [class.has-background]=\"state().hasBackground\">\r\n  <div class=\"svg-placeholder\" [innerHTML]=\"safeSvgIcon\"></div>\r\n</div>\r\n}\r\n", styles: [":host{display:block;container-type:size;width:100%;height:100%;overflow:hidden}.svg-wrapper,.label-widget{display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box;transition:background-color var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard)}.has-background.svg-wrapper,.has-background.label-widget{background-color:var(--mat-sys-surface-container-high);border-radius:4px}.label-widget{overflow:hidden;container-type:size;padding:var(--mat-sys-spacing-4);color:var(--mat-sys-on-surface-variant, #6c757d);opacity:var(--widget-opacity, 1)}.label-widget.text-left{justify-content:flex-start}.label-widget.text-right{justify-content:flex-end}.label-widget.has-background{color:var(--mat-sys-on-surface, #1f1f1f)}.label-widget:hover{opacity:.3;color:var(--mat-sys-primary, #6750a4)}.label-text{width:100%;text-align:center;overflow-wrap:break-word;transition:color .2s ease}.text-left .label-text{text-align:left}.text-right .label-text{text-align:right}.font-bold .label-text{font-weight:700}.label-text[responsiveText]{overflow-wrap:normal}.svg-wrapper{overflow:hidden}.svg-placeholder{width:min(80cqw,80cqh);aspect-ratio:1/1;opacity:.3;transition:transform .3s ease-in-out,opacity .3s ease,color .2s ease;transform-origin:center center;color:var(--mat-sys-on-surface-variant, #6c757d)}.has-background .svg-placeholder{color:var(--mat-sys-on-surface, #1f1f1f)}.svg-placeholder ::ng-deep svg{width:100%;height:100%;display:block}.svg-wrapper:hover .svg-placeholder{color:var(--mat-sys-primary, #6750a4)}\n"] }]
         }] });
 const svgIcon$1 = `
@@ -1059,67 +1383,120 @@ class ClockStateDialogComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ClockStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ClockStateDialogComponent, isStandalone: true, selector: "lib-clock-state-dialog", ngImport: i0, template: `
-    <h2 mat-dialog-title>Clock Settings</h2>
+    <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.clock.dialog.title">
+      Clock Settings
+    </h2>
     <mat-dialog-content>
       <div class="mode-selection">
-        <label class="section-label" for="mode-selection-group">Display Mode</label>
+        <label
+          class="section-label"
+          for="mode-selection-group"
+          i18n="@@ngx.dashboard.widgets.clock.dialog.displayMode"
+          >Display Mode</label
+        >
         <mat-radio-group
           id="mode-selection-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-button
+            value="digital"
+            i18n="@@ngx.dashboard.widgets.clock.dialog.mode.digital"
+            >Digital</mat-radio-button
+          >
+          <mat-radio-button
+            value="analog"
+            i18n="@@ngx.dashboard.widgets.clock.dialog.mode.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" for="time-format-group">Time Format</label>
+        <label
+          class="section-label"
+          for="time-format-group"
+          i18n="@@ngx.dashboard.widgets.clock.dialog.timeFormat"
+          >Time Format</label
+        >
         <mat-radio-group
           id="time-format-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-button
+            value="24h"
+            i18n="@@ngx.dashboard.widgets.clock.dialog.format.24h"
+            >24 Hour (14:30:45)</mat-radio-button
+          >
+          <mat-radio-button
+            value="12h"
+            i18n="@@ngx.dashboard.widgets.clock.dialog.format.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
+        <mat-slide-toggle
           [checked]="showSeconds()"
-          (change)="showSeconds.set($event.checked)">
+          (change)="showSeconds.set($event.checked)"
+          i18n="@@ngx.dashboard.widgets.clock.dialog.showSeconds"
+        >
           Show Seconds
         </mat-slide-toggle>
         <span class="toggle-description">
           @if (mode() === 'digital') {
-            Display seconds in the time
+          <span
+            i18n="
+              @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.digital"
+            >Display seconds in the time</span
+          >
           } @else {
-            Show the second hand on the clock
+          <span
+            i18n="
+              @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.analog"
+            >Show the second hand on the clock</span
+          >
           }
         </span>
       </div>
       <!-- Background Toggle -->
       <div class="toggle-section">
-        <mat-slide-toggle
+        <mat-slide-toggle
           [checked]="hasBackground()"
-          (change)="hasBackground.set($event.checked)">
+          (change)="hasBackground.set($event.checked)"
+          i18n="@@ngx.dashboard.widgets.clock.dialog.background"
+        >
           Background
         </mat-slide-toggle>
-        <span class="toggle-description"
+        <span
+          class="toggle-description"
+          i18n="@@ngx.dashboard.widgets.clock.dialog.backgroundDescription"
           >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()">
+      <button
+        mat-button
+        (click)="onCancel()"
+        i18n="@@ngx.dashboard.common.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        (click)="save()"
+        [disabled]="!hasChanged()"
+        i18n="@@ngx.dashboard.common.save"
+      >
         Save
       </button>
     </mat-dialog-actions>
@@ -1135,67 +1512,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatRadioModule,
                         MatSlideToggleModule,
                     ], template: `
-    <h2 mat-dialog-title>Clock Settings</h2>
+    <h2 mat-dialog-title i18n="@@ngx.dashboard.widgets.clock.dialog.title">
+      Clock Settings
+    </h2>
     <mat-dialog-content>
       <div class="mode-selection">
-        <label class="section-label" for="mode-selection-group">Display Mode</label>
+        <label
+          class="section-label"
+          for="mode-selection-group"
+          i18n="@@ngx.dashboard.widgets.clock.dialog.displayMode"
+          >Display Mode</label
+        >
         <mat-radio-group
           id="mode-selection-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-button
+            value="digital"
+            i18n="@@ngx.dashboard.widgets.clock.dialog.mode.digital"
+            >Digital</mat-radio-button
+          >
+          <mat-radio-button
+            value="analog"
+            i18n="@@ngx.dashboard.widgets.clock.dialog.mode.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" for="time-format-group">Time Format</label>
+        <label
+          class="section-label"
+          for="time-format-group"
+          i18n="@@ngx.dashboard.widgets.clock.dialog.timeFormat"
+          >Time Format</label
+        >
         <mat-radio-group
           id="time-format-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-button
+            value="24h"
+            i18n="@@ngx.dashboard.widgets.clock.dialog.format.24h"
+            >24 Hour (14:30:45)</mat-radio-button
+          >
+          <mat-radio-button
+            value="12h"
+            i18n="@@ngx.dashboard.widgets.clock.dialog.format.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
+        <mat-slide-toggle
           [checked]="showSeconds()"
-          (change)="showSeconds.set($event.checked)">
+          (change)="showSeconds.set($event.checked)"
+          i18n="@@ngx.dashboard.widgets.clock.dialog.showSeconds"
+        >
           Show Seconds
         </mat-slide-toggle>
         <span class="toggle-description">
           @if (mode() === 'digital') {
-            Display seconds in the time
+          <span
+            i18n="
+              @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.digital"
+            >Display seconds in the time</span
+          >
           } @else {
-            Show the second hand on the clock
+          <span
+            i18n="
+              @@ngx.dashboard.widgets.clock.dialog.showSecondsDescription.analog"
+            >Show the second hand on the clock</span
+          >
           }
         </span>
       </div>
       <!-- Background Toggle -->
       <div class="toggle-section">
-        <mat-slide-toggle
+        <mat-slide-toggle
           [checked]="hasBackground()"
-          (change)="hasBackground.set($event.checked)">
+          (change)="hasBackground.set($event.checked)"
+          i18n="@@ngx.dashboard.widgets.clock.dialog.background"
+        >
           Background
         </mat-slide-toggle>
-        <span class="toggle-description"
+        <span
+          class="toggle-description"
+          i18n="@@ngx.dashboard.widgets.clock.dialog.backgroundDescription"
           >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()">
+      <button
+        mat-button
+        (click)="onCancel()"
+        i18n="@@ngx.dashboard.common.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        (click)="save()"
+        [disabled]="!hasChanged()"
+        i18n="@@ngx.dashboard.common.save"
+      >
         Save
       </button>
     </mat-dialog-actions>
@@ -1369,8 +1799,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
 class ClockWidgetComponent {
     static metadata = {
         widgetTypeid: '@ngx-dashboard/clock-widget',
-        name: 'Clock',
-        description: 'Display time in analog or digital format',
+        name: $localize `:@@ngx.dashboard.widgets.clock.name:Clock`,
+        description: $localize `:@@ngx.dashboard.widgets.clock.description:Display time in analog or digital format`,
         svgIcon: svgIcon$1,
     };
     #sanitizer = inject(DomSanitizer);
@@ -2057,10 +2487,17 @@ class RadialGaugeStateDialogComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadialGaugeStateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: RadialGaugeStateDialogComponent, isStandalone: true, selector: "lib-radial-gauge-state-dialog", ngImport: i0, template: `
-    <h2 mat-dialog-title>Radial Gauge Settings</h2>
+    <h2
+      mat-dialog-title
+      i18n="@@ngx.dashboard.widgets.radialGauge.dialog.title"
+    >
+      Radial Gauge Settings
+    </h2>
     <mat-dialog-content>
       <mat-form-field>
-        <mat-label>Value (0-100)</mat-label>
+        <mat-label i18n="@@ngx.dashboard.widgets.radialGauge.dialog.value"
+          >Value (0-100)</mat-label
+        >
         <input
           matInput
           type="number"
@@ -2071,38 +2508,89 @@ class RadialGaugeStateDialogComponent {
       </mat-form-field>
       <div class="section">
-        <h4>Color Profile</h4>
+        <h4 i18n="@@ngx.dashboard.widgets.radialGauge.dialog.colorProfile">
+          Color Profile
+        </h4>
         <mat-radio-group [(ngModel)]="localState.colorProfile">
-          <mat-radio-button value="dynamic">Dynamic (Theme Colors)</mat-radio-button>
-          <mat-radio-button value="static">Static (Performance Colors)</mat-radio-button>
+          <mat-radio-button
+            value="dynamic"
+            i18n="
+              @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.dynamic"
+            >Dynamic (Theme Colors)</mat-radio-button
+          >
+          <mat-radio-button
+            value="static"
+            i18n="
+              @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.static"
+            >Static (Performance Colors)</mat-radio-button
+          >
         </mat-radio-group>
       </div>
       <div class="toggle-section">
-        <mat-slide-toggle [(ngModel)]="localState.active">
+        <mat-slide-toggle
+          [(ngModel)]="localState.active"
+          i18n="@@ngx.dashboard.widgets.radialGauge.dialog.activeDisplay"
+        >
           Active Display
         </mat-slide-toggle>
-        <p class="toggle-description">Display live gauge instead of passive icon</p>
+        <p
+          class="toggle-description"
+          i18n="
+            @@ngx.dashboard.widgets.radialGauge.dialog.activeDisplayDescription"
+        >
+          Display live gauge instead of passive icon
+        </p>
       </div>
       <div class="toggle-section">
-        <mat-slide-toggle [(ngModel)]="localState.hasBackground">
+        <mat-slide-toggle
+          [(ngModel)]="localState.hasBackground"
+          i18n="@@ngx.dashboard.widgets.radialGauge.dialog.background"
+        >
           Background
         </mat-slide-toggle>
-        <p class="toggle-description">Add a background color to the widget</p>
+        <p
+          class="toggle-description"
+          i18n="
+            @@ngx.dashboard.widgets.radialGauge.dialog.backgroundDescription"
+        >
+          Add a background color to the widget
+        </p>
       </div>
       <div class="toggle-section">
-        <mat-slide-toggle [(ngModel)]="localState.showValueLabel">
+        <mat-slide-toggle
+          [(ngModel)]="localState.showValueLabel"
+          i18n="@@ngx.dashboard.widgets.radialGauge.dialog.showValueLabel"
+        >
           Show Value Label
         </mat-slide-toggle>
-        <p class="toggle-description">Display numeric value in gauge center</p>
+        <p
+          class="toggle-description"
+          i18n="
+            @@ngx.dashboard.widgets.radialGauge.dialog.showValueLabelDescription"
+        >
+          Display numeric value in gauge center
+        </p>
       </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-      <button mat-button (click)="onCancel()">Cancel</button>
-      <button mat-flat-button (click)="onSave()">Save</button>
+      <button
+        mat-button
+        (click)="onCancel()"
+        i18n="@@ngx.dashboard.common.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        (click)="onSave()"
+        i18n="@@ngx.dashboard.common.save"
+      >
+        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}.section{margin-bottom:1.5rem}.section h4{margin:0 0 .5rem;font-size:.875rem;font-weight:500;color:var(--mat-sys-on-surface, #1f1f1f)}mat-radio-group{display:flex;flex-direction:column;gap:.5rem}.toggle-section{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.toggle-description{margin:0;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
@@ -2118,10 +2606,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         MatRadioModule,
                         FormsModule,
                     ], template: `
-    <h2 mat-dialog-title>Radial Gauge Settings</h2>
+    <h2
+      mat-dialog-title
+      i18n="@@ngx.dashboard.widgets.radialGauge.dialog.title"
+    >
+      Radial Gauge Settings
+    </h2>
     <mat-dialog-content>
       <mat-form-field>
-        <mat-label>Value (0-100)</mat-label>
+        <mat-label i18n="@@ngx.dashboard.widgets.radialGauge.dialog.value"
+          >Value (0-100)</mat-label
+        >
         <input
           matInput
           type="number"
@@ -2132,38 +2627,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
       </mat-form-field>
       <div class="section">
-        <h4>Color Profile</h4>
+        <h4 i18n="@@ngx.dashboard.widgets.radialGauge.dialog.colorProfile">
+          Color Profile
+        </h4>
         <mat-radio-group [(ngModel)]="localState.colorProfile">
-          <mat-radio-button value="dynamic">Dynamic (Theme Colors)</mat-radio-button>
-          <mat-radio-button value="static">Static (Performance Colors)</mat-radio-button>
+          <mat-radio-button
+            value="dynamic"
+            i18n="
+              @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.dynamic"
+            >Dynamic (Theme Colors)</mat-radio-button
+          >
+          <mat-radio-button
+            value="static"
+            i18n="
+              @@ngx.dashboard.widgets.radialGauge.dialog.colorProfile.static"
+            >Static (Performance Colors)</mat-radio-button
+          >
         </mat-radio-group>
       </div>
       <div class="toggle-section">
-        <mat-slide-toggle [(ngModel)]="localState.active">
+        <mat-slide-toggle
+          [(ngModel)]="localState.active"
+          i18n="@@ngx.dashboard.widgets.radialGauge.dialog.activeDisplay"
+        >
           Active Display
         </mat-slide-toggle>
-        <p class="toggle-description">Display live gauge instead of passive icon</p>
+        <p
+          class="toggle-description"
+          i18n="
+            @@ngx.dashboard.widgets.radialGauge.dialog.activeDisplayDescription"
+        >
+          Display live gauge instead of passive icon
+        </p>
       </div>
       <div class="toggle-section">
-        <mat-slide-toggle [(ngModel)]="localState.hasBackground">
+        <mat-slide-toggle
+          [(ngModel)]="localState.hasBackground"
+          i18n="@@ngx.dashboard.widgets.radialGauge.dialog.background"
+        >
           Background
         </mat-slide-toggle>
-        <p class="toggle-description">Add a background color to the widget</p>
+        <p
+          class="toggle-description"
+          i18n="
+            @@ngx.dashboard.widgets.radialGauge.dialog.backgroundDescription"
+        >
+          Add a background color to the widget
+        </p>
       </div>
       <div class="toggle-section">
-        <mat-slide-toggle [(ngModel)]="localState.showValueLabel">
+        <mat-slide-toggle
+          [(ngModel)]="localState.showValueLabel"
+          i18n="@@ngx.dashboard.widgets.radialGauge.dialog.showValueLabel"
+        >
           Show Value Label
         </mat-slide-toggle>
-        <p class="toggle-description">Display numeric value in gauge center</p>
+        <p
+          class="toggle-description"
+          i18n="
+            @@ngx.dashboard.widgets.radialGauge.dialog.showValueLabelDescription"
+        >
+          Display numeric value in gauge center
+        </p>
       </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-      <button mat-button (click)="onCancel()">Cancel</button>
-      <button mat-flat-button (click)="onSave()">Save</button>
+      <button
+        mat-button
+        (click)="onCancel()"
+        i18n="@@ngx.dashboard.common.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        (click)="onSave()"
+        i18n="@@ngx.dashboard.common.save"
+      >
+        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}.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"] }]
         }] });
@@ -2172,8 +2718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
 class RadialGaugeWidgetComponent {
     static metadata = {
         widgetTypeid: '@ngx-dashboard/radial-gauge-widget',
-        name: 'Radial Gauge',
-        description: 'A semi-circular gauge indicator',
+        name: $localize `:@@ngx.dashboard.widgets.radialGauge.name:Radial Gauge`,
+        description: $localize `:@@ngx.dashboard.widgets.radialGauge.description:A semi-circular gauge indicator`,
         svgIcon,
     };
     #dialog = inject(MatDialog);
@@ -2242,11 +2788,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
 /*
  * Public API Surface of ngx-dashboard-widgets
  */
-// Widget Components
+// Library version
 /**
  * Generated bundle index. Do not edit.
  */
-export { ArrowWidgetComponent, ClockWidgetComponent, LabelWidgetComponent, RadialGaugeComponent, RadialGaugeWidgetComponent, ResponsiveTextDirective };
+export { ArrowWidgetComponent, ClockWidgetComponent, LabelWidgetComponent, NGX_DASHBOARD_WIDGETS_VERSION, RadialGaugeComponent, RadialGaugeWidgetComponent, ResponsiveTextDirective };
 //# sourceMappingURL=dragonworks-ngx-dashboard-widgets.mjs.map