@meshmakers/octo-meshboard 3.3.540 → 3.3.560

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -1,4 +1,4 @@
-import { firstValueFrom, from, map, Observable, of, catchError, interval } from 'rxjs';
+import { firstValueFrom, from, map, Observable, of, catchError, interval, filter } from 'rxjs';
 import { FieldFilterOperatorsDto, CkTypeSelectorService, DeleteStrategiesDto, AssociationModOptionsDto, CkModelService, GraphDirectionDto, AttributeSelectorService, GraphQL, GetCkTypeAvailableQueryColumnsDtoGQL, SortOrdersDto, HealthService, TENANT_ID_PROVIDER, AssetRepoService, JobManagementService } from '@meshmakers/octo-services';
 export { TENANT_ID_PROVIDER } from '@meshmakers/octo-services';
 import * as i0 from '@angular/core';
@@ -6,7 +6,7 @@ import { Injectable, inject, EventEmitter, forwardRef, Output, Input, ViewChild,
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1$7 from '@meshmakers/shared-ui';
-import { EntitySelectInputComponent, ListViewComponent, FetchResultTyped, DataSourceBase, ImportStrategyDialogService, TimeRangeUtils, TimeRangePickerComponent, HAS_UNSAVED_CHANGES, UnsavedChangesDirective } from '@meshmakers/shared-ui';
+import { EntitySelectInputComponent, ListViewComponent, FetchResultTyped, DataSourceBase, TimeRangePickerComponent, ImportStrategyDialogService, TimeRangeUtils, HAS_UNSAVED_CHANGES, UnsavedChangesDirective } from '@meshmakers/shared-ui';
 import * as i1 from 'apollo-angular';
 import { gql, Apollo } from 'apollo-angular';
 import * as i1$3 from '@angular/common';
@@ -22,7 +22,7 @@ import * as i1$2 from '@progress/kendo-angular-indicators';
 import { LoaderModule } from '@progress/kendo-angular-indicators';
 import * as i2$1 from '@progress/kendo-angular-icons';
 import { SVGIconModule } from '@progress/kendo-angular-icons';
-import { arrowUpIcon, arrowDownIcon, minusIcon, arrowRightIcon, arrowLeftIcon, linkIcon, chevronDownIcon, chevronRightIcon, columnsIcon, sortAscIcon, filterIcon, searchIcon, chartPieIcon, plusIcon, trashIcon, checkCircleIcon, chartLineIcon, copyIcon, heartIcon, gridLayoutIcon, chartColumnStackedIcon, chartDoughnutIcon, tableIcon, shareIcon, fileTxtIcon, pencilIcon, checkIcon, xIcon, downloadIcon, uploadIcon, gearIcon, saveIcon, arrowRotateCwIcon } from '@progress/kendo-svg-icons';
+import { arrowUpIcon, arrowDownIcon, minusIcon, arrowRightIcon, arrowLeftIcon, linkIcon, chevronDownIcon, chevronRightIcon, columnsIcon, sortAscIcon, filterIcon, searchIcon, chartPieIcon, plusIcon, trashIcon, checkCircleIcon, chartLineIcon, gearsIcon, clipboardMarkdownIcon, copyIcon, gridIcon, heartIcon, gridLayoutIcon, chartLineMarkersIcon, chartColumnStackedIcon, chartDoughnutIcon, tableIcon, shareIcon, fileTxtIcon, pencilIcon, checkIcon, xIcon, downloadIcon, uploadIcon, gearIcon, saveIcon, arrowRotateCwIcon, undoIcon } from '@progress/kendo-svg-icons';
 import * as i4 from '@progress/kendo-angular-dropdowns';
 import { DropDownsModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
 import { map as map$1, catchError as catchError$1 } from 'rxjs/operators';
@@ -32,7 +32,7 @@ import { CollectionChangesService, KENDO_GAUGES } from '@progress/kendo-angular-
 import * as i1$6 from '@progress/kendo-angular-charts';
 import { ChartsModule } from '@progress/kendo-angular-charts';
 import * as i3$1 from '@angular/router';
-import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
 import * as i2$2 from 'ngx-markdown';
 import { MarkdownModule } from 'ngx-markdown';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -43,6 +43,7 @@ import * as i5 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import * as i4$2 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule, DateTimePickerModule } from '@progress/kendo-angular-dateinputs';
+import { BreadCrumbService } from '@meshmakers/shared-services';
 
 /**
  * MeshBoard Widget Models
@@ -395,7 +396,7 @@ class QuerySelectorComponent {
         <p class="field-hint">{{ hint }}</p>
       }
     </div>
-  `, isInline: true, styles: [".query-selector{width:100%}.field-hint{font-size:.85em;margin-top:4px;opacity:.7}\n"], dependencies: [{ kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }] });
+  `, isInline: true, styles: [".query-selector{width:100%}.field-hint{font-size:.85em;margin-top:4px;opacity:.7}\n"], dependencies: [{ kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: QuerySelectorComponent, decorators: [{
             type: Component,
@@ -713,7 +714,7 @@ class RuntimeEntitySelectorComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".runtime-entity-selector{display:flex;flex-direction:column;gap:16px}.form-field{display:flex;flex-direction:column;gap:4px}.form-field label{font-weight:500}.form-field.disabled{opacity:.6}.field-hint{font-size:.85em;margin:0;opacity:.7}.required{color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }] });
+  `, isInline: true, styles: [".runtime-entity-selector{display:flex;flex-direction:column;gap:16px}.form-field{display:flex;flex-direction:column;gap:4px}.form-field label{font-weight:500}.form-field.disabled{opacity:.6}.field-hint{font-size:.85em;margin:0;opacity:.7}.required{color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RuntimeEntitySelectorComponent, decorators: [{
             type: Component,
@@ -2204,7 +2205,14 @@ class MeshBoardStateService {
             rowHeight: settings.rowHeight,
             gap: settings.gap,
             variables: settings.variables ?? config.variables,
-            timeFilter: settings.timeFilter ?? config.timeFilter
+            timeFilter: settings.timeFilter
+                ? {
+                    ...config.timeFilter,
+                    ...settings.timeFilter,
+                    // When a new defaultSelection is set, reset the stored selection to match
+                    selection: settings.timeFilter.defaultSelection ?? config.timeFilter?.selection
+                }
+                : config.timeFilter
         }));
         // If time filter is disabled, clear the time filter variables
         if (settings.timeFilter && !settings.timeFilter.enabled) {
@@ -3742,7 +3750,7 @@ class EntityCardConfigDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.config-form{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.selection-preview{padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.selection-preview h4{margin:0 0 8px;font-size:.9rem;color:var(--kendo-color-primary, #0d6efd)}.preview-content p{margin:4px 0;font-size:.85rem}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.config-form{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.selection-preview{padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.selection-preview h4{margin:0 0 8px;font-size:.9rem;color:var(--kendo-color-primary, #0d6efd)}.preview-content p{margin:4px 0;font-size:.85rem}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityCardConfigDialogComponent, decorators: [{
             type: Component,
@@ -4063,7 +4071,6 @@ class KpiWidgetComponent {
             const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
                 variables: {
                     rtId: dataSource.queryRtId,
-                    first: 100,
                     fieldFilter
                 }
             }).pipe(catchError(err => {
@@ -4999,7 +5006,7 @@ class KpiConfigDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field.flex-1{flex:1}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.form-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.form-section h4{margin:0 0 16px;font-size:.95rem;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-row{display:flex;gap:16px}.mode-toggle{display:flex;gap:8px}.mode-toggle button{flex:1}.attribute-item{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.attribute-path{flex:1}.attribute-type{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);background:var(--kendo-color-surface-alt, #f8f9fa);padding:2px 6px;border-radius:3px}.required{color:var(--kendo-color-error, #dc3545)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: QuerySelectorComponent, selector: "mm-query-selector", inputs: ["placeholder", "hint", "disabled"], outputs: ["querySelected", "queriesLoaded"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field.flex-1{flex:1}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.form-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.form-section h4{margin:0 0 16px;font-size:.95rem;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-row{display:flex;gap:16px}.mode-toggle{display:flex;gap:8px}.mode-toggle button{flex:1}.attribute-item{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.attribute-path{flex:1}.attribute-type{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);background:var(--kendo-color-surface-alt, #f8f9fa);padding:2px 6px;border-radius:3px}.required{color:var(--kendo-color-error, #dc3545)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: QuerySelectorComponent, selector: "mm-query-selector", inputs: ["placeholder", "hint", "disabled"], outputs: ["querySelected", "queriesLoaded"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: KpiConfigDialogComponent, decorators: [{
             type: Component,
@@ -6594,7 +6601,7 @@ class AssociationsConfigDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;flex:1;overflow-y:auto;gap:16px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.checkbox-group,.radio-group{display:flex;gap:16px}.checkbox-label,.radio-label{display:flex;align-items:center;gap:6px;font-weight:400;cursor:pointer}.loading-roles{padding:8px;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.selection-preview{padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.selection-preview h4{margin:0 0 8px;font-size:.9rem;color:var(--kendo-color-primary, #0d6efd)}.preview-content p{margin:4px 0;font-size:.85rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: CheckBoxModule }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i4.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;flex:1;overflow-y:auto;gap:16px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.checkbox-group,.radio-group{display:flex;gap:16px}.checkbox-label,.radio-label{display:flex;align-items:center;gap:6px;font-weight:400;cursor:pointer}.loading-roles{padding:8px;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.selection-preview{padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.selection-preview h4{margin:0 0 8px;font-size:.9rem;color:var(--kendo-color-primary, #0d6efd)}.preview-content p{margin:4px 0;font-size:.85rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: CheckBoxModule }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i4.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AssociationsConfigDialogComponent, decorators: [{
             type: Component,
@@ -8104,7 +8111,6 @@ class GaugeWidgetComponent {
             const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
                 variables: {
                     rtId: dataSource.queryRtId,
-                    first: 100,
                     fieldFilter
                 }
             }).pipe(catchError(err => {
@@ -9436,7 +9442,7 @@ class GaugeConfigDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;padding:16px;position:relative;flex:1;overflow-y:auto}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field.flex-1{flex:1}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.form-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.form-section h4{margin:0 0 16px;font-size:.95rem;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-row{display:flex;gap:16px}.checkbox-label{margin-left:8px;font-weight:400}.gauge-type-item{display:flex;flex-direction:column;gap:2px}.gauge-type-label{font-weight:500}.gauge-type-desc{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d)}.attribute-item{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.attribute-path{flex:1}.attribute-type{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);background:var(--kendo-color-surface-alt, #f8f9fa);padding:2px 6px;border-radius:3px}.range-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.range-input{width:80px}.range-separator{color:var(--kendo-color-subtle, #6c757d)}.color-picker{width:40px;height:32px;padding:2px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;cursor:pointer}.mode-toggle{display:flex;gap:8px}.mode-toggle button{flex:1}.required{color:var(--kendo-color-error, #dc3545)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: QuerySelectorComponent, selector: "mm-query-selector", inputs: ["placeholder", "hint", "disabled"], outputs: ["querySelected", "queriesLoaded"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;padding:16px;position:relative;flex:1;overflow-y:auto}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field.flex-1{flex:1}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.form-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.form-section h4{margin:0 0 16px;font-size:.95rem;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-row{display:flex;gap:16px}.checkbox-label{margin-left:8px;font-weight:400}.gauge-type-item{display:flex;flex-direction:column;gap:2px}.gauge-type-label{font-weight:500}.gauge-type-desc{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d)}.attribute-item{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.attribute-path{flex:1}.attribute-type{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);background:var(--kendo-color-surface-alt, #f8f9fa);padding:2px 6px;border-radius:3px}.range-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.range-input{width:80px}.range-separator{color:var(--kendo-color-subtle, #6c757d)}.color-picker{width:40px;height:32px;padding:2px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;cursor:pointer}.mode-toggle{display:flex;gap:8px}.mode-toggle button{flex:1}.required{color:var(--kendo-color-error, #dc3545)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: QuerySelectorComponent, selector: "mm-query-selector", inputs: ["placeholder", "hint", "disabled"], outputs: ["querySelected", "queriesLoaded"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaugeConfigDialogComponent, decorators: [{
             type: Component,
@@ -10032,7 +10038,6 @@ class PieChartWidgetComponent {
         const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
             variables: {
                 rtId: dataSource.queryRtId,
-                first: 100, // Limit for pie chart
                 fieldFilter
             }
         }).pipe(catchError(err => {
@@ -11012,7 +11017,6 @@ class BarChartWidgetComponent {
             const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
                 variables: {
                     rtId: queryDataSource.queryRtId,
-                    first: 100, // Limit for bar chart
                     fieldFilter
                 }
             }).pipe(catchError(err => {
@@ -12022,13 +12026,2025 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 Show Legend
               </label>
             </div>
-
-            <div class="form-field checkbox-field">
-              <label>
-                <input type="checkbox" [(ngModel)]="form.showDataLabels" kendoCheckBox />
-                Show Data Labels
-              </label>
-            </div>
+
+            <div class="form-field checkbox-field">
+              <label>
+                <input type="checkbox" [(ngModel)]="form.showDataLabels" kendoCheckBox />
+                Show Data Labels
+              </label>
+            </div>
+          </div>
+
+          @if (form.showLegend) {
+            <div class="form-field">
+              <label>Legend Position</label>
+              <kendo-dropdownlist
+                [data]="legendPositions"
+                [textField]="'label'"
+                [valueField]="'value'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.legendPosition">
+              </kendo-dropdownlist>
+            </div>
+          }
+        </div>
+      </div>
+
+      <div class="action-bar">
+        <button kendoButton fillMode="flat" (click)="onCancel()">Cancel</button>
+        <button
+          kendoButton
+          themeColor="primary"
+          [disabled]="!isValid"
+          (click)="onSave()">
+          Save
+        </button>
+      </div>
+    </div>
+  `, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.config-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-title{margin:0 0 16px;font-size:1rem;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-field:last-child{margin-bottom:0}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.chart-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.form-row{display:flex;gap:24px}.checkbox-field{flex-direction:row;align-items:center}.checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"] }]
+        }], propDecorators: { querySelector: [{
+                type: ViewChild,
+                args: ['querySelector']
+            }], initialQueryRtId: [{
+                type: Input
+            }], initialQueryName: [{
+                type: Input
+            }], initialChartType: [{
+                type: Input
+            }], initialCategoryField: [{
+                type: Input
+            }], initialSeries: [{
+                type: Input
+            }], initialSeriesGroupField: [{
+                type: Input
+            }], initialValueField: [{
+                type: Input
+            }], initialShowLegend: [{
+                type: Input
+            }], initialLegendPosition: [{
+                type: Input
+            }], initialShowDataLabels: [{
+                type: Input
+            }], initialFilters: [{
+                type: Input
+            }] } });
+
+class LineChartWidgetComponent {
+    executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    stateService = inject(MeshBoardStateService);
+    variableService = inject(MeshBoardVariableService);
+    config;
+    // Widget state signals
+    _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
+    _categories = signal([], ...(ngDevMode ? [{ debugName: "_categories" }] : []));
+    _seriesData = signal([], ...(ngDevMode ? [{ debugName: "_seriesData" }] : []));
+    _valueAxes = signal([], ...(ngDevMode ? [{ debugName: "_valueAxes" }] : []));
+    _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
+    _seriesUnitMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "_seriesUnitMap" }] : []));
+    isLoading = this._isLoading.asReadonly();
+    categories = this._categories.asReadonly();
+    seriesData = this._seriesData.asReadonly();
+    valueAxes = this._valueAxes.asReadonly();
+    error = this._error.asReadonly();
+    data = computed(() => this._seriesData(), ...(ngDevMode ? [{ debugName: "data" }] : []));
+    chartType = computed(() => {
+        return this.config?.chartType ?? 'line';
+    }, ...(ngDevMode ? [{ debugName: "chartType" }] : []));
+    labelRotation = computed(() => {
+        const categoryCount = this._categories().length;
+        return categoryCount > 8 ? -45 : 0;
+    }, ...(ngDevMode ? [{ debugName: "labelRotation" }] : []));
+    isNotConfigured() {
+        const dataSource = this.config?.dataSource;
+        if (!dataSource)
+            return true;
+        if (dataSource.type === 'persistentQuery') {
+            const ds = dataSource;
+            return !ds.queryRtId || !this.config?.categoryField || !this.config?.seriesGroupField || !this.config?.valueField;
+        }
+        return true;
+    }
+    categoryLabelContent = (e) => {
+        const maxLen = 18;
+        return e.value.length > maxLen ? e.value.substring(0, maxLen) + '...' : e.value;
+    };
+    ngOnInit() {
+        this.loadData();
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && !changes['config'].firstChange) {
+            this.loadData();
+        }
+    }
+    refresh() {
+        this.loadData();
+    }
+    hasValidConfig() {
+        if (!this.config?.dataSource)
+            return false;
+        if (this.config.dataSource.type === 'persistentQuery') {
+            const ds = this.config.dataSource;
+            return !!(ds.queryRtId && this.config.categoryField && this.config.seriesGroupField && this.config.valueField);
+        }
+        return false;
+    }
+    formatValue(value) {
+        return value.toLocaleString('de-AT', {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2
+        });
+    }
+    getUnitForSeries(seriesName) {
+        const unit = this._seriesUnitMap().get(seriesName);
+        return unit ? ` ${unit}` : '';
+    }
+    async loadData() {
+        if (this.isNotConfigured())
+            return;
+        const queryDataSource = this.config.dataSource;
+        this._isLoading.set(true);
+        this._error.set(null);
+        try {
+            const fieldFilter = this.convertFiltersToDto(this.config.filters);
+            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+                variables: {
+                    rtId: queryDataSource.queryRtId,
+                    fieldFilter
+                }
+            }).pipe(catchError(err => {
+                console.error('Error loading Line Chart data:', err);
+                throw err;
+            })));
+            const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
+            if (queryItems.length === 0) {
+                this._categories.set([]);
+                this._seriesData.set([]);
+                this._valueAxes.set([]);
+                this._isLoading.set(false);
+                return;
+            }
+            const queryResult = queryItems[0];
+            if (!queryResult) {
+                this._categories.set([]);
+                this._seriesData.set([]);
+                this._valueAxes.set([]);
+                this._isLoading.set(false);
+                return;
+            }
+            const rows = queryResult.rows?.items ?? [];
+            const supportedRowTypes = ['RtSimpleQueryRow', 'RtAggregationQueryRow', 'RtGroupingAggregationQueryRow'];
+            const filteredRows = rows
+                .filter((row) => row !== null)
+                .filter(row => supportedRowTypes.includes(row.__typename ?? ''));
+            this.processData(filteredRows);
+            this._isLoading.set(false);
+        }
+        catch (err) {
+            console.error('Error loading Line Chart data:', err);
+            this._error.set('Failed to load data');
+            this._isLoading.set(false);
+        }
+    }
+    /**
+     * Processes query rows into line chart data.
+     * Groups by seriesGroupField, orders by categoryField (date), supports multi-axis by unitField.
+     */
+    processData(filteredRows) {
+        const categoryField = this.config.categoryField;
+        const seriesGroupField = this.config.seriesGroupField;
+        const valueField = this.config.valueField;
+        const unitField = this.config.unitField;
+        // Collect data: category -> seriesGroup -> value
+        const dataMap = new Map();
+        const allCategories = new Map(); // label -> parsed date for sorting
+        const allSeriesGroups = new Set();
+        const seriesUnitMap = new Map(); // seriesGroup -> unit
+        for (const row of filteredRows) {
+            const queryRow = row;
+            const cells = queryRow.cells?.items ?? [];
+            let categoryValue = '';
+            let seriesGroupValue = '';
+            let numericValue = 0;
+            let unitValue = '';
+            for (const cell of cells) {
+                if (!cell?.attributePath)
+                    continue;
+                const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
+                if (sanitizedPath === this.sanitizeFieldName(categoryField)) {
+                    categoryValue = String(cell.value ?? '');
+                }
+                else if (sanitizedPath === this.sanitizeFieldName(seriesGroupField)) {
+                    seriesGroupValue = String(cell.value ?? '');
+                }
+                else if (sanitizedPath === this.sanitizeFieldName(valueField)) {
+                    const val = cell.value;
+                    numericValue = typeof val === 'number' ? val : parseFloat(String(val));
+                    if (isNaN(numericValue))
+                        numericValue = 0;
+                }
+                else if (unitField && sanitizedPath === this.sanitizeFieldName(unitField)) {
+                    unitValue = String(cell.value ?? '');
+                }
+            }
+            if (categoryValue && seriesGroupValue) {
+                // Parse date for sorting
+                if (!allCategories.has(categoryValue)) {
+                    allCategories.set(categoryValue, new Date(categoryValue));
+                }
+                allSeriesGroups.add(seriesGroupValue);
+                if (!dataMap.has(categoryValue)) {
+                    dataMap.set(categoryValue, new Map());
+                }
+                dataMap.get(categoryValue).set(seriesGroupValue, numericValue);
+                // Track unit per series
+                if (unitField && unitValue) {
+                    seriesUnitMap.set(seriesGroupValue, unitValue);
+                }
+            }
+        }
+        // Sort categories chronologically
+        const sortedCategoryEntries = Array.from(allCategories.entries())
+            .sort((a, b) => a[1].getTime() - b[1].getTime());
+        const categories = sortedCategoryEntries.map(([, date]) => this.formatDate(date));
+        const categoryKeys = sortedCategoryEntries.map(([key]) => key);
+        const seriesGroups = Array.from(allSeriesGroups);
+        // Build value axes based on unique units
+        const valueAxes = [];
+        if (unitField && seriesUnitMap.size > 0) {
+            const uniqueUnits = Array.from(new Set(seriesUnitMap.values()));
+            uniqueUnits.forEach((unit, index) => {
+                valueAxes.push({
+                    name: `unit_${this.sanitizeAxisName(unit)}`,
+                    unit,
+                    position: index === 0 ? 'left' : 'right'
+                });
+            });
+        }
+        // Build series data
+        const seriesData = seriesGroups.map(seriesGroup => {
+            const data = categoryKeys.map(categoryKey => {
+                return dataMap.get(categoryKey)?.get(seriesGroup) ?? null;
+            });
+            const unit = seriesUnitMap.get(seriesGroup);
+            const axisName = unit ? `unit_${this.sanitizeAxisName(unit)}` : undefined;
+            return {
+                name: seriesGroup,
+                data,
+                unit,
+                axisName
+            };
+        });
+        this._categories.set(categories);
+        this._seriesData.set(seriesData);
+        this._valueAxes.set(valueAxes);
+        this._seriesUnitMap.set(seriesUnitMap);
+    }
+    /**
+     * Formats a date for display on the category axis.
+     */
+    formatDate(date) {
+        if (isNaN(date.getTime()))
+            return '?';
+        return date.toLocaleDateString('de-AT', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    }
+    sanitizeFieldName(fieldName) {
+        return fieldName.replace(/\./g, '_');
+    }
+    sanitizeAxisName(name) {
+        return name.replace(/[^a-zA-Z0-9]/g, '_');
+    }
+    convertFiltersToDto(filters) {
+        const variables = this.stateService.getVariables();
+        return this.variableService.convertToFieldFilterDto(filters, variables);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LineChartWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LineChartWidgetComponent, isStandalone: true, selector: "mm-line-chart-widget", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="line-chart-widget" [class.loading]="isLoading()" [class.error]="error()">
+      @if (isNotConfigured()) {
+        <mm-widget-not-configured></mm-widget-not-configured>
+      } @else if (isLoading()) {
+        <div class="loading-indicator">
+          <span>...</span>
+        </div>
+      } @else if (error()) {
+        <div class="error-message">
+          <span>{{ error() }}</span>
+        </div>
+      } @else {
+        <kendo-chart class="chart-container">
+          <kendo-chart-plot-area [margin]="{ top: 0, right: 0, bottom: 0, left: 0 }"></kendo-chart-plot-area>
+
+          <kendo-chart-category-axis>
+            <kendo-chart-category-axis-item [categories]="categories()">
+              <kendo-chart-category-axis-item-labels
+                [rotation]="labelRotation()"
+                [content]="categoryLabelContent">
+              </kendo-chart-category-axis-item-labels>
+            </kendo-chart-category-axis-item>
+          </kendo-chart-category-axis>
+
+          @if (valueAxes().length > 0) {
+            <kendo-chart-value-axis>
+              @for (axis of valueAxes(); track axis.name) {
+                <kendo-chart-value-axis-item
+                  [name]="axis.name"
+                  [title]="{ text: axis.unit }">
+                </kendo-chart-value-axis-item>
+              }
+            </kendo-chart-value-axis>
+          }
+
+          <kendo-chart-series>
+            @for (series of seriesData(); track series.name) {
+              <kendo-chart-series-item
+                [type]="chartType()"
+                [data]="series.data"
+                [name]="series.name"
+                [axis]="series.axisName ?? ''"
+                [markers]="{ visible: config.showMarkers ?? false }">
+              </kendo-chart-series-item>
+            }
+          </kendo-chart-series>
+
+          <kendo-chart-legend
+            [visible]="config.showLegend !== false"
+            [position]="config.legendPosition ?? 'right'">
+          </kendo-chart-legend>
+
+          <kendo-chart-tooltip>
+            <ng-template kendoChartSeriesTooltipTemplate let-value="value" let-category="category" let-series="series">
+              <div class="chart-tooltip">
+                <strong>{{ category }}</strong><br/>
+                {{ series.name }}: {{ formatValue(value) }}{{ getUnitForSeries(series.name) }}
+              </div>
+            </ng-template>
+          </kendo-chart-tooltip>
+        </kendo-chart>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.line-chart-widget{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8px;box-sizing:border-box;overflow:hidden}.line-chart-widget.loading,.line-chart-widget.error{opacity:.7}.loading-indicator,.error-message{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.loading-indicator span{font-size:1.5rem;color:var(--kendo-color-subtle, #6c757d)}.error-message span{color:var(--kendo-color-error, #dc3545);font-size:.875rem}.chart-container{width:100%;height:100%}kendo-chart{width:100%;height:100%}.chart-tooltip{padding:4px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ChartsModule }, { kind: "component", type: i1$6.ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "noData", "observeStyles", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "directive", type: i1$6.SeriesTooltipTemplateDirective, selector: "[kendoChartSeriesTooltipTemplate]" }, { kind: "component", type: i1$6.CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "component", type: i1$6.CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels"] }, { kind: "component", type: i1$6.CategoryAxisLabelsComponent, selector: "kendo-chart-category-axis-item-labels", inputs: ["background", "border", "color", "content", "culture", "dateFormats", "font", "format", "margin", "mirror", "padding", "position", "rotation", "skip", "step", "visible", "visual"] }, { kind: "component", type: i1$6.LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title", "focusHighlight"] }, { kind: "component", type: i1$6.PlotAreaComponent, selector: "kendo-chart-plot-area", inputs: ["background", "border", "margin", "opacity", "padding"] }, { kind: "component", type: i1$6.SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: i1$6.SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "pattern", "patternField", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: i1$6.TooltipComponent, selector: "kendo-chart-tooltip", inputs: ["background", "border", "color", "font", "format", "opacity", "padding", "shared", "visible"] }, { kind: "component", type: i1$6.ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: i1$6.ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: WidgetNotConfiguredComponent, selector: "mm-widget-not-configured" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LineChartWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-line-chart-widget', standalone: true, imports: [
+                        CommonModule,
+                        ChartsModule,
+                        WidgetNotConfiguredComponent
+                    ], template: `
+    <div class="line-chart-widget" [class.loading]="isLoading()" [class.error]="error()">
+      @if (isNotConfigured()) {
+        <mm-widget-not-configured></mm-widget-not-configured>
+      } @else if (isLoading()) {
+        <div class="loading-indicator">
+          <span>...</span>
+        </div>
+      } @else if (error()) {
+        <div class="error-message">
+          <span>{{ error() }}</span>
+        </div>
+      } @else {
+        <kendo-chart class="chart-container">
+          <kendo-chart-plot-area [margin]="{ top: 0, right: 0, bottom: 0, left: 0 }"></kendo-chart-plot-area>
+
+          <kendo-chart-category-axis>
+            <kendo-chart-category-axis-item [categories]="categories()">
+              <kendo-chart-category-axis-item-labels
+                [rotation]="labelRotation()"
+                [content]="categoryLabelContent">
+              </kendo-chart-category-axis-item-labels>
+            </kendo-chart-category-axis-item>
+          </kendo-chart-category-axis>
+
+          @if (valueAxes().length > 0) {
+            <kendo-chart-value-axis>
+              @for (axis of valueAxes(); track axis.name) {
+                <kendo-chart-value-axis-item
+                  [name]="axis.name"
+                  [title]="{ text: axis.unit }">
+                </kendo-chart-value-axis-item>
+              }
+            </kendo-chart-value-axis>
+          }
+
+          <kendo-chart-series>
+            @for (series of seriesData(); track series.name) {
+              <kendo-chart-series-item
+                [type]="chartType()"
+                [data]="series.data"
+                [name]="series.name"
+                [axis]="series.axisName ?? ''"
+                [markers]="{ visible: config.showMarkers ?? false }">
+              </kendo-chart-series-item>
+            }
+          </kendo-chart-series>
+
+          <kendo-chart-legend
+            [visible]="config.showLegend !== false"
+            [position]="config.legendPosition ?? 'right'">
+          </kendo-chart-legend>
+
+          <kendo-chart-tooltip>
+            <ng-template kendoChartSeriesTooltipTemplate let-value="value" let-category="category" let-series="series">
+              <div class="chart-tooltip">
+                <strong>{{ category }}</strong><br/>
+                {{ series.name }}: {{ formatValue(value) }}{{ getUnitForSeries(series.name) }}
+              </div>
+            </ng-template>
+          </kendo-chart-tooltip>
+        </kendo-chart>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%;height:100%}.line-chart-widget{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8px;box-sizing:border-box;overflow:hidden}.line-chart-widget.loading,.line-chart-widget.error{opacity:.7}.loading-indicator,.error-message{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.loading-indicator span{font-size:1.5rem;color:var(--kendo-color-subtle, #6c757d)}.error-message span{color:var(--kendo-color-error, #dc3545);font-size:.875rem}.chart-container{width:100%;height:100%}kendo-chart{width:100%;height:100%}.chart-tooltip{padding:4px 8px}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+/**
+ * Configuration dialog for Line Chart widgets.
+ * Supports line and area chart types with multi-series and multi-axis configuration.
+ */
+class LineChartConfigDialogComponent {
+    executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    stateService = inject(MeshBoardStateService);
+    windowRef = inject(WindowRef);
+    querySelector;
+    // Initial values for editing
+    initialQueryRtId;
+    initialQueryName;
+    initialChartType;
+    initialCategoryField;
+    initialSeriesGroupField;
+    initialValueField;
+    initialUnitField;
+    initialShowLegend;
+    initialLegendPosition;
+    initialShowMarkers;
+    initialFilters;
+    // State
+    isLoadingInitial = false;
+    isLoadingColumns = false;
+    // Persistent Query
+    selectedPersistentQuery = null;
+    queryColumns = [];
+    numericColumns = [];
+    nonNumericColumns = [];
+    // Filter state
+    filters = [];
+    filterVariables = [];
+    // Legend position options
+    legendPositions = [
+        { value: 'top', label: 'Top' },
+        { value: 'bottom', label: 'Bottom' },
+        { value: 'left', label: 'Left' },
+        { value: 'right', label: 'Right' }
+    ];
+    // Form
+    form = {
+        chartType: 'line',
+        categoryField: '',
+        seriesGroupField: '',
+        valueField: '',
+        unitField: '',
+        showLegend: true,
+        legendPosition: 'right',
+        showMarkers: false
+    };
+    get isValid() {
+        return this.selectedPersistentQuery !== null
+            && this.form.categoryField !== ''
+            && this.form.seriesGroupField !== ''
+            && this.form.valueField !== '';
+    }
+    async ngOnInit() {
+        // Initialize filter variables from MeshBoard state
+        this.filterVariables = this.stateService.getVariables().map(v => ({
+            name: v.name,
+            label: v.label || v.name,
+            type: v.type
+        }));
+        // Initialize form with initial values
+        this.form.chartType = this.initialChartType ?? 'line';
+        this.form.categoryField = this.initialCategoryField ?? '';
+        this.form.seriesGroupField = this.initialSeriesGroupField ?? '';
+        this.form.valueField = this.initialValueField ?? '';
+        this.form.unitField = this.initialUnitField ?? '';
+        this.form.showLegend = this.initialShowLegend ?? true;
+        this.form.legendPosition = this.initialLegendPosition ?? 'right';
+        this.form.showMarkers = this.initialShowMarkers ?? false;
+        // Initialize filters
+        if (this.initialFilters && this.initialFilters.length > 0) {
+            this.filters = this.initialFilters.map((f, index) => ({
+                id: index + 1,
+                attributePath: f.attributePath,
+                operator: f.operator,
+                comparisonValue: f.comparisonValue
+            }));
+        }
+        // If editing with initial query, load it after view init
+        if (this.initialQueryRtId) {
+            this.isLoadingInitial = true;
+            setTimeout(async () => {
+                if (this.querySelector) {
+                    const query = await this.querySelector.selectByRtId(this.initialQueryRtId);
+                    if (query) {
+                        this.selectedPersistentQuery = query;
+                        await this.loadQueryColumns(query.rtId);
+                    }
+                }
+                this.isLoadingInitial = false;
+            }, 100);
+        }
+    }
+    async onQuerySelected(query) {
+        this.selectedPersistentQuery = query;
+        this.queryColumns = [];
+        this.numericColumns = [];
+        this.nonNumericColumns = [];
+        this.filters = [];
+        this.form.categoryField = '';
+        this.form.seriesGroupField = '';
+        this.form.valueField = '';
+        this.form.unitField = '';
+        if (query) {
+            await this.loadQueryColumns(query.rtId);
+        }
+    }
+    async loadQueryColumns(queryRtId) {
+        this.isLoadingColumns = true;
+        try {
+            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+                variables: {
+                    rtId: queryRtId,
+                    first: 1
+                }
+            }));
+            const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
+            if (queryItems.length > 0 && queryItems[0]) {
+                const columns = queryItems[0].columns ?? [];
+                const filteredColumns = columns
+                    .filter((c) => c !== null);
+                this.queryColumns = filteredColumns.map(c => ({
+                    attributePath: this.sanitizeFieldName(c.attributePath ?? ''),
+                    attributeValueType: c.attributeValueType ?? ''
+                }));
+                const numericTypes = ['INTEGER', 'FLOAT', 'DOUBLE', 'DECIMAL', 'LONG'];
+                this.numericColumns = this.queryColumns.filter(c => numericTypes.includes(c.attributeValueType));
+                this.nonNumericColumns = this.queryColumns.filter(c => !numericTypes.includes(c.attributeValueType));
+            }
+        }
+        catch (error) {
+            console.error('Error loading query columns:', error);
+            this.queryColumns = [];
+            this.numericColumns = [];
+            this.nonNumericColumns = [];
+        }
+        finally {
+            this.isLoadingColumns = false;
+        }
+    }
+    sanitizeFieldName(fieldName) {
+        return fieldName.replace(/\./g, '_');
+    }
+    onFiltersChange(updatedFilters) {
+        this.filters = updatedFilters;
+    }
+    onSave() {
+        if (!this.selectedPersistentQuery)
+            return;
+        const filtersDto = this.filters.length > 0
+            ? this.filters.map(f => ({
+                attributePath: f.attributePath,
+                operator: f.operator,
+                comparisonValue: f.comparisonValue
+            }))
+            : undefined;
+        const result = {
+            ckTypeId: '',
+            rtId: '',
+            queryRtId: this.selectedPersistentQuery.rtId,
+            queryName: this.selectedPersistentQuery.name,
+            chartType: this.form.chartType,
+            categoryField: this.form.categoryField,
+            seriesGroupField: this.form.seriesGroupField,
+            valueField: this.form.valueField,
+            unitField: this.form.unitField || undefined,
+            showLegend: this.form.showLegend,
+            legendPosition: this.form.legendPosition,
+            showMarkers: this.form.showMarkers,
+            filters: filtersDto
+        };
+        this.windowRef.close(result);
+    }
+    onCancel() {
+        this.windowRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LineChartConfigDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LineChartConfigDialogComponent, isStandalone: true, selector: "mm-line-chart-config-dialog", inputs: { initialQueryRtId: "initialQueryRtId", initialQueryName: "initialQueryName", initialChartType: "initialChartType", initialCategoryField: "initialCategoryField", initialSeriesGroupField: "initialSeriesGroupField", initialValueField: "initialValueField", initialUnitField: "initialUnitField", initialShowLegend: "initialShowLegend", initialLegendPosition: "initialLegendPosition", initialShowMarkers: "initialShowMarkers", initialFilters: "initialFilters" }, viewQueries: [{ propertyName: "querySelector", first: true, predicate: ["querySelector"], descendants: true }], ngImport: i0, template: `
+    <div class="config-container">
+
+      <div class="config-form" [class.loading]="isLoadingInitial">
+        <mm-loading-overlay [loading]="isLoadingInitial" />
+
+        <!-- Data Source Section -->
+        <div class="config-section">
+          <h3 class="section-title">Data Source</h3>
+
+          <div class="form-field">
+            <label>Query <span class="required">*</span></label>
+            <mm-query-selector
+              #querySelector
+              [(ngModel)]="selectedPersistentQuery"
+              (querySelected)="onQuerySelected($event)"
+              placeholder="Select a Query..."
+              hint="Select a query that returns time-series data with grouping.">
+            </mm-query-selector>
+          </div>
+        </div>
+
+        <!-- Field Mapping Section -->
+        @if (selectedPersistentQuery && queryColumns.length > 0) {
+          <div class="config-section">
+            <h3 class="section-title">Field Mapping</h3>
+
+            <div class="form-field">
+              <label>Category Field (X-Axis) <span class="required">*</span></label>
+              <kendo-combobox
+                [data]="queryColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.categoryField"
+                placeholder="Select date/time field...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Date/time field used for the X-axis (e.g., timeRange_from).</p>
+            </div>
+
+            <div class="form-field">
+              <label>Series Group Field <span class="required">*</span></label>
+              <kendo-combobox
+                [data]="nonNumericColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.seriesGroupField"
+                placeholder="Select grouping field...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Each unique value becomes a separate line (e.g., OBIS code).</p>
+            </div>
+
+            <div class="form-field">
+              <label>Value Field (Y-Axis) <span class="required">*</span></label>
+              <kendo-combobox
+                [data]="numericColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.valueField"
+                placeholder="Select value field...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Numeric field for Y-axis values (e.g., sum).</p>
+            </div>
+
+            <div class="form-field">
+              <label>Unit Field</label>
+              <kendo-combobox
+                [data]="nonNumericColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.unitField"
+                [clearButton]="true"
+                placeholder="Select unit field (optional)...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Optional unit field (e.g., kWh, m3). Creates separate Y-axes per unit.</p>
+            </div>
+          </div>
+        }
+
+        <!-- Filters Section -->
+        @if (selectedPersistentQuery?.queryCkTypeId) {
+          <div class="config-section">
+            <h3 class="section-title">Filters</h3>
+            <p class="section-hint">Define filters to narrow down the data.</p>
+            <mm-field-filter-editor
+              [ckTypeId]="selectedPersistentQuery?.queryCkTypeId ?? undefined"
+              [filters]="filters"
+              [enableVariables]="filterVariables.length > 0"
+              [availableVariables]="filterVariables"
+              (filtersChange)="onFiltersChange($event)">
+            </mm-field-filter-editor>
+          </div>
+        }
+
+        <!-- Chart Options Section -->
+        <div class="config-section">
+          <h3 class="section-title">Chart Options</h3>
+
+          <div class="form-field">
+            <label>Chart Type</label>
+            <div class="chart-type-grid">
+              <label class="radio-label">
+                <input type="radio"
+                       name="chartType"
+                       value="line"
+                       [(ngModel)]="form.chartType"
+                       kendoRadioButton />
+                <span>Line</span>
+              </label>
+              <label class="radio-label">
+                <input type="radio"
+                       name="chartType"
+                       value="area"
+                       [(ngModel)]="form.chartType"
+                       kendoRadioButton />
+                <span>Area</span>
+              </label>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-field checkbox-field">
+              <label>
+                <input type="checkbox" [(ngModel)]="form.showLegend" kendoCheckBox />
+                Show Legend
+              </label>
+            </div>
+
+            <div class="form-field checkbox-field">
+              <label>
+                <input type="checkbox" [(ngModel)]="form.showMarkers" kendoCheckBox />
+                Show Markers
+              </label>
+            </div>
+          </div>
+
+          @if (form.showLegend) {
+            <div class="form-field">
+              <label>Legend Position</label>
+              <kendo-dropdownlist
+                [data]="legendPositions"
+                [textField]="'label'"
+                [valueField]="'value'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.legendPosition">
+              </kendo-dropdownlist>
+            </div>
+          }
+        </div>
+      </div>
+
+      <div class="action-bar">
+        <button kendoButton fillMode="flat" (click)="onCancel()">Cancel</button>
+        <button
+          kendoButton
+          themeColor="primary"
+          [disabled]="!isValid"
+          (click)="onSave()">
+          Save
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.config-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-title{margin:0 0 16px;font-size:1rem;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-field:last-child{margin-bottom:0}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.chart-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.form-row{display:flex;gap:24px}.checkbox-field{flex-direction:row;align-items:center}.checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: i3.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: QuerySelectorComponent, selector: "mm-query-selector", inputs: ["placeholder", "hint", "disabled"], outputs: ["querySelected", "queriesLoaded"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LineChartConfigDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-line-chart-config-dialog', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ButtonsModule,
+                        InputsModule,
+                        DropDownsModule,
+                        SVGIconModule,
+                        FieldFilterEditorComponent,
+                        QuerySelectorComponent,
+                        LoadingOverlayComponent
+                    ], template: `
+    <div class="config-container">
+
+      <div class="config-form" [class.loading]="isLoadingInitial">
+        <mm-loading-overlay [loading]="isLoadingInitial" />
+
+        <!-- Data Source Section -->
+        <div class="config-section">
+          <h3 class="section-title">Data Source</h3>
+
+          <div class="form-field">
+            <label>Query <span class="required">*</span></label>
+            <mm-query-selector
+              #querySelector
+              [(ngModel)]="selectedPersistentQuery"
+              (querySelected)="onQuerySelected($event)"
+              placeholder="Select a Query..."
+              hint="Select a query that returns time-series data with grouping.">
+            </mm-query-selector>
+          </div>
+        </div>
+
+        <!-- Field Mapping Section -->
+        @if (selectedPersistentQuery && queryColumns.length > 0) {
+          <div class="config-section">
+            <h3 class="section-title">Field Mapping</h3>
+
+            <div class="form-field">
+              <label>Category Field (X-Axis) <span class="required">*</span></label>
+              <kendo-combobox
+                [data]="queryColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.categoryField"
+                placeholder="Select date/time field...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Date/time field used for the X-axis (e.g., timeRange_from).</p>
+            </div>
+
+            <div class="form-field">
+              <label>Series Group Field <span class="required">*</span></label>
+              <kendo-combobox
+                [data]="nonNumericColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.seriesGroupField"
+                placeholder="Select grouping field...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Each unique value becomes a separate line (e.g., OBIS code).</p>
+            </div>
+
+            <div class="form-field">
+              <label>Value Field (Y-Axis) <span class="required">*</span></label>
+              <kendo-combobox
+                [data]="numericColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.valueField"
+                placeholder="Select value field...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Numeric field for Y-axis values (e.g., sum).</p>
+            </div>
+
+            <div class="form-field">
+              <label>Unit Field</label>
+              <kendo-combobox
+                [data]="nonNumericColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.unitField"
+                [clearButton]="true"
+                placeholder="Select unit field (optional)...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Optional unit field (e.g., kWh, m3). Creates separate Y-axes per unit.</p>
+            </div>
+          </div>
+        }
+
+        <!-- Filters Section -->
+        @if (selectedPersistentQuery?.queryCkTypeId) {
+          <div class="config-section">
+            <h3 class="section-title">Filters</h3>
+            <p class="section-hint">Define filters to narrow down the data.</p>
+            <mm-field-filter-editor
+              [ckTypeId]="selectedPersistentQuery?.queryCkTypeId ?? undefined"
+              [filters]="filters"
+              [enableVariables]="filterVariables.length > 0"
+              [availableVariables]="filterVariables"
+              (filtersChange)="onFiltersChange($event)">
+            </mm-field-filter-editor>
+          </div>
+        }
+
+        <!-- Chart Options Section -->
+        <div class="config-section">
+          <h3 class="section-title">Chart Options</h3>
+
+          <div class="form-field">
+            <label>Chart Type</label>
+            <div class="chart-type-grid">
+              <label class="radio-label">
+                <input type="radio"
+                       name="chartType"
+                       value="line"
+                       [(ngModel)]="form.chartType"
+                       kendoRadioButton />
+                <span>Line</span>
+              </label>
+              <label class="radio-label">
+                <input type="radio"
+                       name="chartType"
+                       value="area"
+                       [(ngModel)]="form.chartType"
+                       kendoRadioButton />
+                <span>Area</span>
+              </label>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-field checkbox-field">
+              <label>
+                <input type="checkbox" [(ngModel)]="form.showLegend" kendoCheckBox />
+                Show Legend
+              </label>
+            </div>
+
+            <div class="form-field checkbox-field">
+              <label>
+                <input type="checkbox" [(ngModel)]="form.showMarkers" kendoCheckBox />
+                Show Markers
+              </label>
+            </div>
+          </div>
+
+          @if (form.showLegend) {
+            <div class="form-field">
+              <label>Legend Position</label>
+              <kendo-dropdownlist
+                [data]="legendPositions"
+                [textField]="'label'"
+                [valueField]="'value'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.legendPosition">
+              </kendo-dropdownlist>
+            </div>
+          }
+        </div>
+      </div>
+
+      <div class="action-bar">
+        <button kendoButton fillMode="flat" (click)="onCancel()">Cancel</button>
+        <button
+          kendoButton
+          themeColor="primary"
+          [disabled]="!isValid"
+          (click)="onSave()">
+          Save
+        </button>
+      </div>
+    </div>
+  `, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.config-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-title{margin:0 0 16px;font-size:1rem;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-field:last-child{margin-bottom:0}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.chart-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.form-row{display:flex;gap:24px}.checkbox-field{flex-direction:row;align-items:center}.checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"] }]
+        }], propDecorators: { querySelector: [{
+                type: ViewChild,
+                args: ['querySelector']
+            }], initialQueryRtId: [{
+                type: Input
+            }], initialQueryName: [{
+                type: Input
+            }], initialChartType: [{
+                type: Input
+            }], initialCategoryField: [{
+                type: Input
+            }], initialSeriesGroupField: [{
+                type: Input
+            }], initialValueField: [{
+                type: Input
+            }], initialUnitField: [{
+                type: Input
+            }], initialShowLegend: [{
+                type: Input
+            }], initialLegendPosition: [{
+                type: Input
+            }], initialShowMarkers: [{
+                type: Input
+            }], initialFilters: [{
+                type: Input
+            }] } });
+
+const COLOR_SCHEMES = {
+    green: (min, max) => buildGradientRanges(min, max, ['#e8f5e9', '#a5d6a7', '#66bb6a', '#2e7d32', '#1b5e20']),
+    redGreen: (min, max) => buildGradientRanges(min, max, ['#ef5350', '#ff8a65', '#fff176', '#aed581', '#66bb6a']),
+    blue: (min, max) => buildGradientRanges(min, max, ['#e3f2fd', '#90caf9', '#42a5f5', '#1565c0', '#0d47a1']),
+    heat: (min, max) => buildGradientRanges(min, max, ['#fff9c4', '#ffcc02', '#ff9800', '#f44336', '#b71c1c'])
+};
+function buildGradientRanges(min, max, colors) {
+    if (max <= min) {
+        return [{ from: min, to: min + 1, color: colors[0] }];
+    }
+    const step = (max - min) / colors.length;
+    return colors.map((color, i) => ({
+        from: min + i * step,
+        to: min + (i + 1) * step,
+        color
+    }));
+}
+class HeatmapWidgetComponent {
+    executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    stateService = inject(MeshBoardStateService);
+    variableService = inject(MeshBoardVariableService);
+    config;
+    // Widget state signals
+    _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
+    _heatmapData = signal([], ...(ngDevMode ? [{ debugName: "_heatmapData" }] : []));
+    _xCategories = signal([], ...(ngDevMode ? [{ debugName: "_xCategories" }] : []));
+    _yCategories = signal([], ...(ngDevMode ? [{ debugName: "_yCategories" }] : []));
+    _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
+    isLoading = this._isLoading.asReadonly();
+    heatmapData = this._heatmapData.asReadonly();
+    xCategories = this._xCategories.asReadonly();
+    yCategories = this._yCategories.asReadonly();
+    error = this._error.asReadonly();
+    data = computed(() => this._heatmapData(), ...(ngDevMode ? [{ debugName: "data" }] : []));
+    seriesColor = computed(() => {
+        const scheme = this.config?.colorScheme ?? 'green';
+        const data = this._heatmapData();
+        if (data.length === 0)
+            return '#66bb6a';
+        const values = data.map(d => d.value);
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const ranges = COLOR_SCHEMES[scheme](min, max);
+        // Return the middle color as the base series color
+        return ranges[Math.floor(ranges.length / 2)]?.color ?? '#66bb6a';
+    }, ...(ngDevMode ? [{ debugName: "seriesColor" }] : []));
+    isNotConfigured() {
+        const dataSource = this.config?.dataSource;
+        if (!dataSource)
+            return true;
+        if (dataSource.type === 'persistentQuery') {
+            const ds = dataSource;
+            return !ds.queryRtId || !this.config?.dateField;
+        }
+        return true;
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && !changes['config'].firstChange) {
+            this.loadData();
+        }
+    }
+    refresh() {
+        this.loadData();
+    }
+    hasValidConfig() {
+        if (!this.config?.dataSource)
+            return false;
+        if (this.config.dataSource.type === 'persistentQuery') {
+            const ds = this.config.dataSource;
+            return !!(ds.queryRtId && this.config.dateField);
+        }
+        return false;
+    }
+    formatValue(value) {
+        return value.toLocaleString('de-AT', {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2
+        });
+    }
+    xLabelContent = (e) => {
+        // Truncate date labels if needed
+        const maxLen = 10;
+        return e.value.length > maxLen ? e.value.substring(0, maxLen) : e.value;
+    };
+    async loadData() {
+        if (this.isNotConfigured()) {
+            return;
+        }
+        const queryDataSource = this.config.dataSource;
+        this._isLoading.set(true);
+        this._error.set(null);
+        try {
+            const fieldFilter = this.convertFiltersToDto(this.config.filters);
+            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+                variables: {
+                    rtId: queryDataSource.queryRtId,
+                    fieldFilter
+                }
+            }).pipe(catchError(err => {
+                console.error('Error loading Heatmap data:', err);
+                throw err;
+            })));
+            const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
+            if (queryItems.length === 0) {
+                this._heatmapData.set([]);
+                this._xCategories.set([]);
+                this._yCategories.set([]);
+                this._isLoading.set(false);
+                return;
+            }
+            const queryResult = queryItems[0];
+            if (!queryResult) {
+                this._heatmapData.set([]);
+                this._xCategories.set([]);
+                this._yCategories.set([]);
+                this._isLoading.set(false);
+                return;
+            }
+            const rows = queryResult.rows?.items ?? [];
+            const supportedRowTypes = ['RtSimpleQueryRow', 'RtAggregationQueryRow', 'RtGroupingAggregationQueryRow'];
+            const filteredRows = rows
+                .filter((row) => row !== null)
+                .filter(row => supportedRowTypes.includes(row.__typename ?? ''));
+            this.processHeatmapData(filteredRows);
+            this._isLoading.set(false);
+        }
+        catch (err) {
+            console.error('Error loading Heatmap data:', err);
+            this._error.set('Failed to load data');
+            this._isLoading.set(false);
+        }
+    }
+    /**
+     * Processes query rows into heatmap data.
+     * When dateEndField is configured, auto-detects the interval width and shows sub-hour columns.
+     * Otherwise aggregates into hourly buckets.
+     */
+    processHeatmapData(filteredRows) {
+        const dateField = this.sanitizeFieldName(this.config.dateField);
+        const dateEndField = this.config.dateEndField ? this.sanitizeFieldName(this.config.dateEndField) : null;
+        const valueField = this.config.valueField ? this.sanitizeFieldName(this.config.valueField) : null;
+        const aggregation = this.config.aggregation ?? 'count';
+        const parsedRows = [];
+        for (const row of filteredRows) {
+            const queryRow = row;
+            const cells = queryRow.cells?.items ?? [];
+            let dateFrom = null;
+            let dateTo = null;
+            let numericValue = 1; // default for count
+            for (const cell of cells) {
+                if (!cell?.attributePath)
+                    continue;
+                const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
+                if (sanitizedPath === dateField) {
+                    dateFrom = this.parseDate(cell.value);
+                }
+                else if (dateEndField && sanitizedPath === dateEndField) {
+                    dateTo = this.parseDate(cell.value);
+                }
+                else if (valueField && sanitizedPath === valueField) {
+                    const val = cell.value;
+                    numericValue = typeof val === 'number' ? val : parseFloat(String(val));
+                    if (isNaN(numericValue))
+                        numericValue = 0;
+                }
+            }
+            if (dateFrom) {
+                parsedRows.push({ dateFrom, dateTo, numericValue });
+            }
+        }
+        if (parsedRows.length === 0) {
+            this._heatmapData.set([]);
+            this._xCategories.set([]);
+            this._yCategories.set([]);
+            return;
+        }
+        // Detect interval width in minutes from the first row that has both from and to
+        const intervalMinutes = this.detectIntervalMinutes(parsedRows);
+        const hasSubHourIntervals = dateEndField && intervalMinutes > 0 && intervalMinutes < 60;
+        if (hasSubHourIntervals) {
+            this.processSubHourData(parsedRows, intervalMinutes, aggregation);
+        }
+        else {
+            this.processHourlyData(parsedRows, aggregation);
+        }
+    }
+    /**
+     * Detects the interval width in minutes from the first row with from+to.
+     */
+    detectIntervalMinutes(rows) {
+        for (const row of rows) {
+            if (row.dateTo) {
+                const diffMs = row.dateTo.getTime() - row.dateFrom.getTime();
+                if (diffMs > 0) {
+                    return Math.round(diffMs / 60000);
+                }
+            }
+        }
+        return 60; // default: hourly
+    }
+    /**
+     * Processes data into hourly buckets (original behavior).
+     */
+    processHourlyData(rows, aggregation) {
+        const buckets = new Map();
+        for (const { dateFrom, numericValue } of rows) {
+            const dateKey = this.formatDateKey(dateFrom);
+            const hour = dateFrom.getUTCHours();
+            if (!buckets.has(dateKey))
+                buckets.set(dateKey, new Map());
+            const hourMap = buckets.get(dateKey);
+            if (!hourMap.has(hour))
+                hourMap.set(hour, []);
+            hourMap.get(hour).push(numericValue);
+        }
+        const hourLabels = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0') + ':00');
+        const yCategories = [...hourLabels].reverse();
+        const sortedDates = Array.from(buckets.keys()).sort();
+        const heatmapData = [];
+        for (const date of sortedDates) {
+            const hourMap = buckets.get(date);
+            for (let h = 0; h < 24; h++) {
+                const values = hourMap.get(h);
+                const value = values ? this.aggregate(values, aggregation) : 0;
+                heatmapData.push({ date, hour: hourLabels[h], value });
+            }
+        }
+        this._heatmapData.set(heatmapData);
+        this._xCategories.set(sortedDates);
+        this._yCategories.set(yCategories);
+    }
+    /**
+     * Processes data into sub-hour interval buckets.
+     * Y-axis: hours (00:00..23:00), X-axis: interval labels (e.g. "00-15", "15-30", ...).
+     * For multi-day data, X-axis labels are prefixed with the date.
+     */
+    processSubHourData(rows, intervalMinutes, aggregation) {
+        const intervalsPerHour = Math.floor(60 / intervalMinutes);
+        // Bucket: xKey (date+interval) -> hour -> values[]
+        const buckets = new Map();
+        const allDates = new Set();
+        for (const { dateFrom, numericValue } of rows) {
+            const dateKey = this.formatDateKey(dateFrom);
+            allDates.add(dateKey);
+            const hour = dateFrom.getUTCHours();
+            const minute = dateFrom.getUTCMinutes();
+            const intervalIndex = Math.floor(minute / intervalMinutes);
+            const intervalStart = intervalIndex * intervalMinutes;
+            const intervalEnd = intervalStart + intervalMinutes;
+            const intervalLabel = intervalStart.toString().padStart(2, '0') + '-' + intervalEnd.toString().padStart(2, '0');
+            // X-key: for single day just interval label, for multi-day prefix with date
+            // We'll decide the format after collecting all dates
+            const compositeKey = `${dateKey}|${intervalLabel}`;
+            if (!buckets.has(compositeKey))
+                buckets.set(compositeKey, new Map());
+            const hourMap = buckets.get(compositeKey);
+            if (!hourMap.has(hour))
+                hourMap.set(hour, []);
+            hourMap.get(hour).push(numericValue);
+        }
+        const sortedDates = Array.from(allDates).sort();
+        const isMultiDay = sortedDates.length > 1;
+        // Build interval labels for X-axis
+        const intervalLabels = [];
+        for (let i = 0; i < intervalsPerHour; i++) {
+            const start = (i * intervalMinutes).toString().padStart(2, '0');
+            const end = ((i + 1) * intervalMinutes).toString().padStart(2, '0');
+            intervalLabels.push(`${start}-${end}`);
+        }
+        // Build X-axis categories (ordered: date × interval)
+        const xCategories = [];
+        for (const date of sortedDates) {
+            for (const interval of intervalLabels) {
+                xCategories.push(isMultiDay ? `${date} ${interval}` : interval);
+            }
+        }
+        // Build hour labels for Y-axis
+        const hourLabels = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0') + ':00');
+        const yCategories = [...hourLabels].reverse();
+        // Build heatmap data: for each x-category × hour, aggregate values
+        const heatmapData = [];
+        for (const date of sortedDates) {
+            for (const interval of intervalLabels) {
+                const compositeKey = `${date}|${interval}`;
+                const xLabel = isMultiDay ? `${date} ${interval}` : interval;
+                const hourMap = buckets.get(compositeKey);
+                for (let h = 0; h < 24; h++) {
+                    const values = hourMap?.get(h);
+                    const value = values ? this.aggregate(values, aggregation) : 0;
+                    heatmapData.push({ date: xLabel, hour: hourLabels[h], value });
+                }
+            }
+        }
+        this._heatmapData.set(heatmapData);
+        this._xCategories.set(xCategories);
+        this._yCategories.set(yCategories);
+    }
+    aggregate(values, aggregation) {
+        if (values.length === 0)
+            return 0;
+        switch (aggregation) {
+            case 'count':
+                return values.length;
+            case 'sum':
+                return values.reduce((a, b) => a + b, 0);
+            case 'avg':
+                return values.reduce((a, b) => a + b, 0) / values.length;
+            default:
+                return values.length;
+        }
+    }
+    parseDate(value) {
+        if (!value)
+            return null;
+        if (value instanceof Date)
+            return value;
+        const date = new Date(String(value));
+        return isNaN(date.getTime()) ? null : date;
+    }
+    formatDateKey(date) {
+        const year = date.getUTCFullYear();
+        const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
+        const day = date.getUTCDate().toString().padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    sanitizeFieldName(fieldName) {
+        return fieldName.replace(/\./g, '_');
+    }
+    convertFiltersToDto(filters) {
+        const variables = this.stateService.getVariables();
+        return this.variableService.convertToFieldFilterDto(filters, variables);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HeatmapWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: HeatmapWidgetComponent, isStandalone: true, selector: "mm-heatmap-widget", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="heatmap-widget" [class.loading]="isLoading()" [class.error]="error()">
+      @if (isNotConfigured()) {
+        <mm-widget-not-configured></mm-widget-not-configured>
+      } @else if (isLoading()) {
+        <div class="loading-indicator">
+          <span>...</span>
+        </div>
+      } @else if (error()) {
+        <div class="error-message">
+          <span>{{ error() }}</span>
+        </div>
+      } @else {
+        <kendo-chart class="chart-container">
+          <kendo-chart-x-axis>
+            <kendo-chart-x-axis-item [categories]="xCategories()" [title]="{ text: '' }">
+              <kendo-chart-x-axis-item-labels
+                [rotation]="-45"
+                [content]="xLabelContent">
+              </kendo-chart-x-axis-item-labels>
+            </kendo-chart-x-axis-item>
+          </kendo-chart-x-axis>
+
+          <kendo-chart-y-axis>
+            <kendo-chart-y-axis-item [categories]="yCategories()" [title]="{ text: '' }">
+            </kendo-chart-y-axis-item>
+          </kendo-chart-y-axis>
+
+          <kendo-chart-series>
+            <kendo-chart-series-item
+              type="heatmap"
+              [data]="heatmapData()"
+              xField="date"
+              yField="hour"
+              field="value"
+              [color]="seriesColor()">
+            </kendo-chart-series-item>
+          </kendo-chart-series>
+
+          <kendo-chart-legend
+            [visible]="config.showLegend !== false"
+            [position]="config.legendPosition ?? 'bottom'">
+          </kendo-chart-legend>
+
+          <kendo-chart-tooltip>
+            <ng-template kendoChartSeriesTooltipTemplate let-value="value" let-dataItem="dataItem">
+              <div class="chart-tooltip">
+                <strong>{{ dataItem.date }}</strong> {{ dataItem.hour }}<br/>
+                Value: {{ formatValue(value?.value ?? value) }}
+              </div>
+            </ng-template>
+          </kendo-chart-tooltip>
+        </kendo-chart>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.heatmap-widget{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8px;box-sizing:border-box;overflow:hidden}.heatmap-widget.loading,.heatmap-widget.error{opacity:.7}.loading-indicator,.error-message{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.loading-indicator span{font-size:1.5rem;color:var(--kendo-color-subtle, #6c757d)}.error-message span{color:var(--kendo-color-error, #dc3545);font-size:.875rem}.chart-container{width:100%;height:100%}kendo-chart{width:100%;height:100%}.chart-tooltip{padding:4px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ChartsModule }, { kind: "component", type: i1$6.ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "noData", "observeStyles", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "component", type: i1$6.XAxisComponent, selector: "kendo-chart-x-axis" }, { kind: "component", type: i1$6.XAxisItemComponent, selector: "kendo-chart-x-axis-item", inputs: ["axisCrossingValue", "background", "baseUnit", "categories", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: i1$6.XAxisLabelsComponent, selector: "kendo-chart-x-axis-item-labels", inputs: ["background", "border", "color", "content", "culture", "dateFormats", "font", "format", "margin", "mirror", "padding", "position", "rotation", "skip", "step", "visible", "visual"] }, { kind: "component", type: i1$6.YAxisComponent, selector: "kendo-chart-y-axis" }, { kind: "component", type: i1$6.YAxisItemComponent, selector: "kendo-chart-y-axis-item", inputs: ["axisCrossingValue", "background", "baseUnit", "categories", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "directive", type: i1$6.SeriesTooltipTemplateDirective, selector: "[kendoChartSeriesTooltipTemplate]" }, { kind: "component", type: i1$6.LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title", "focusHighlight"] }, { kind: "component", type: i1$6.SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: i1$6.SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "pattern", "patternField", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: i1$6.TooltipComponent, selector: "kendo-chart-tooltip", inputs: ["background", "border", "color", "font", "format", "opacity", "padding", "shared", "visible"] }, { kind: "component", type: WidgetNotConfiguredComponent, selector: "mm-widget-not-configured" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HeatmapWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-heatmap-widget', standalone: true, imports: [
+                        CommonModule,
+                        ChartsModule,
+                        WidgetNotConfiguredComponent
+                    ], template: `
+    <div class="heatmap-widget" [class.loading]="isLoading()" [class.error]="error()">
+      @if (isNotConfigured()) {
+        <mm-widget-not-configured></mm-widget-not-configured>
+      } @else if (isLoading()) {
+        <div class="loading-indicator">
+          <span>...</span>
+        </div>
+      } @else if (error()) {
+        <div class="error-message">
+          <span>{{ error() }}</span>
+        </div>
+      } @else {
+        <kendo-chart class="chart-container">
+          <kendo-chart-x-axis>
+            <kendo-chart-x-axis-item [categories]="xCategories()" [title]="{ text: '' }">
+              <kendo-chart-x-axis-item-labels
+                [rotation]="-45"
+                [content]="xLabelContent">
+              </kendo-chart-x-axis-item-labels>
+            </kendo-chart-x-axis-item>
+          </kendo-chart-x-axis>
+
+          <kendo-chart-y-axis>
+            <kendo-chart-y-axis-item [categories]="yCategories()" [title]="{ text: '' }">
+            </kendo-chart-y-axis-item>
+          </kendo-chart-y-axis>
+
+          <kendo-chart-series>
+            <kendo-chart-series-item
+              type="heatmap"
+              [data]="heatmapData()"
+              xField="date"
+              yField="hour"
+              field="value"
+              [color]="seriesColor()">
+            </kendo-chart-series-item>
+          </kendo-chart-series>
+
+          <kendo-chart-legend
+            [visible]="config.showLegend !== false"
+            [position]="config.legendPosition ?? 'bottom'">
+          </kendo-chart-legend>
+
+          <kendo-chart-tooltip>
+            <ng-template kendoChartSeriesTooltipTemplate let-value="value" let-dataItem="dataItem">
+              <div class="chart-tooltip">
+                <strong>{{ dataItem.date }}</strong> {{ dataItem.hour }}<br/>
+                Value: {{ formatValue(value?.value ?? value) }}
+              </div>
+            </ng-template>
+          </kendo-chart-tooltip>
+        </kendo-chart>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%;height:100%}.heatmap-widget{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8px;box-sizing:border-box;overflow:hidden}.heatmap-widget.loading,.heatmap-widget.error{opacity:.7}.loading-indicator,.error-message{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.loading-indicator span{font-size:1.5rem;color:var(--kendo-color-subtle, #6c757d)}.error-message span{color:var(--kendo-color-error, #dc3545);font-size:.875rem}.chart-container{width:100%;height:100%}kendo-chart{width:100%;height:100%}.chart-tooltip{padding:4px 8px}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class HeatmapConfigDialogComponent {
+    executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    stateService = inject(MeshBoardStateService);
+    windowRef = inject(WindowRef);
+    querySelector;
+    // Initial values for editing
+    initialQueryRtId;
+    initialQueryName;
+    initialDateField;
+    initialDateEndField;
+    initialValueField;
+    initialAggregation;
+    initialColorScheme;
+    initialShowLegend;
+    initialLegendPosition;
+    initialFilters;
+    // State
+    isLoadingInitial = false;
+    isLoadingColumns = false;
+    // Persistent Query
+    selectedPersistentQuery = null;
+    queryColumns = [];
+    numericColumns = [];
+    dateTimeColumns = [];
+    // Filter state
+    filters = [];
+    filterVariables = [];
+    // Aggregation options
+    aggregationOptions = [
+        { value: 'count', label: 'Count (number of rows)' },
+        { value: 'sum', label: 'Sum (total of values)' },
+        { value: 'avg', label: 'Average (mean of values)' }
+    ];
+    // Color scheme options
+    colorSchemeOptions = [
+        { value: 'green', label: 'Green', previewColor: '#66bb6a' },
+        { value: 'redGreen', label: 'Red-Green', previewColor: '#aed581' },
+        { value: 'blue', label: 'Blue', previewColor: '#42a5f5' },
+        { value: 'heat', label: 'Heat', previewColor: '#ff9800' }
+    ];
+    // Legend position options
+    legendPositions = [
+        { value: 'top', label: 'Top' },
+        { value: 'bottom', label: 'Bottom' },
+        { value: 'left', label: 'Left' },
+        { value: 'right', label: 'Right' }
+    ];
+    // Form
+    form = {
+        dateField: '',
+        dateEndField: '',
+        valueField: '',
+        aggregation: 'count',
+        colorScheme: 'green',
+        showLegend: true,
+        legendPosition: 'bottom'
+    };
+    get isValid() {
+        return this.selectedPersistentQuery !== null && this.form.dateField !== '';
+    }
+    async ngOnInit() {
+        // Initialize filter variables from MeshBoard state
+        this.filterVariables = this.stateService.getVariables().map(v => ({
+            name: v.name,
+            label: v.label || v.name,
+            type: v.type
+        }));
+        // Initialize form with initial values
+        this.form.dateField = this.initialDateField ?? '';
+        this.form.dateEndField = this.initialDateEndField;
+        this.form.valueField = this.initialValueField;
+        this.form.aggregation = this.initialAggregation ?? 'count';
+        this.form.colorScheme = this.initialColorScheme ?? 'green';
+        this.form.showLegend = this.initialShowLegend ?? true;
+        this.form.legendPosition = this.initialLegendPosition ?? 'bottom';
+        // Initialize filters
+        if (this.initialFilters && this.initialFilters.length > 0) {
+            this.filters = this.initialFilters.map((f, index) => ({
+                id: index + 1,
+                attributePath: f.attributePath,
+                operator: f.operator,
+                comparisonValue: f.comparisonValue
+            }));
+        }
+        // If editing with initial query, load it after view init
+        if (this.initialQueryRtId) {
+            this.isLoadingInitial = true;
+            setTimeout(async () => {
+                if (this.querySelector) {
+                    const query = await this.querySelector.selectByRtId(this.initialQueryRtId);
+                    if (query) {
+                        this.selectedPersistentQuery = query;
+                        await this.loadQueryColumns(query.rtId);
+                    }
+                }
+                this.isLoadingInitial = false;
+            }, 100);
+        }
+    }
+    async onQuerySelected(query) {
+        this.selectedPersistentQuery = query;
+        this.queryColumns = [];
+        this.numericColumns = [];
+        this.dateTimeColumns = [];
+        this.filters = [];
+        this.form.dateField = '';
+        this.form.dateEndField = undefined;
+        this.form.valueField = undefined;
+        if (query) {
+            await this.loadQueryColumns(query.rtId);
+        }
+    }
+    async loadQueryColumns(queryRtId) {
+        this.isLoadingColumns = true;
+        try {
+            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+                variables: {
+                    rtId: queryRtId,
+                    first: 1
+                }
+            }));
+            const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
+            if (queryItems.length > 0 && queryItems[0]) {
+                const columns = queryItems[0].columns ?? [];
+                const filteredColumns = columns
+                    .filter((c) => c !== null);
+                this.queryColumns = filteredColumns.map(c => ({
+                    attributePath: this.sanitizeFieldName(c.attributePath ?? ''),
+                    attributeValueType: c.attributeValueType ?? ''
+                }));
+                const numericTypes = ['INTEGER', 'FLOAT', 'DOUBLE', 'DECIMAL', 'LONG'];
+                const dateTimeTypes = ['DATE_TIME', 'DATETIME', 'DATE'];
+                this.numericColumns = this.queryColumns.filter(c => numericTypes.includes(c.attributeValueType));
+                this.dateTimeColumns = this.queryColumns.filter(c => dateTimeTypes.includes(c.attributeValueType));
+                // If no explicit datetime columns found, also allow string columns
+                // (datetime values are sometimes returned as strings)
+                if (this.dateTimeColumns.length === 0) {
+                    this.dateTimeColumns = this.queryColumns;
+                }
+                // Auto-select first datetime column if not editing
+                if (!this.initialQueryRtId && this.dateTimeColumns.length > 0) {
+                    this.form.dateField = this.dateTimeColumns[0].attributePath;
+                }
+            }
+        }
+        catch (error) {
+            console.error('Error loading query columns:', error);
+            this.queryColumns = [];
+            this.numericColumns = [];
+            this.dateTimeColumns = [];
+        }
+        finally {
+            this.isLoadingColumns = false;
+        }
+    }
+    sanitizeFieldName(fieldName) {
+        return fieldName.replace(/\./g, '_');
+    }
+    onFiltersChange(updatedFilters) {
+        this.filters = updatedFilters;
+    }
+    onSave() {
+        if (!this.selectedPersistentQuery)
+            return;
+        const filtersDto = this.filters.length > 0
+            ? this.filters.map(f => ({
+                attributePath: f.attributePath,
+                operator: f.operator,
+                comparisonValue: f.comparisonValue
+            }))
+            : undefined;
+        const result = {
+            ckTypeId: '',
+            rtId: '',
+            queryRtId: this.selectedPersistentQuery.rtId,
+            queryName: this.selectedPersistentQuery.name,
+            dateField: this.form.dateField,
+            dateEndField: this.form.dateEndField || undefined,
+            valueField: this.form.valueField || undefined,
+            aggregation: this.form.aggregation,
+            colorScheme: this.form.colorScheme,
+            showLegend: this.form.showLegend,
+            legendPosition: this.form.legendPosition,
+            filters: filtersDto
+        };
+        this.windowRef.close(result);
+    }
+    onCancel() {
+        this.windowRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HeatmapConfigDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: HeatmapConfigDialogComponent, isStandalone: true, selector: "mm-heatmap-config-dialog", inputs: { initialQueryRtId: "initialQueryRtId", initialQueryName: "initialQueryName", initialDateField: "initialDateField", initialDateEndField: "initialDateEndField", initialValueField: "initialValueField", initialAggregation: "initialAggregation", initialColorScheme: "initialColorScheme", initialShowLegend: "initialShowLegend", initialLegendPosition: "initialLegendPosition", initialFilters: "initialFilters" }, viewQueries: [{ propertyName: "querySelector", first: true, predicate: ["querySelector"], descendants: true }], ngImport: i0, template: `
+    <div class="config-container">
+
+      <div class="config-form" [class.loading]="isLoadingInitial">
+        <mm-loading-overlay [loading]="isLoadingInitial" />
+
+        <!-- Data Source Section -->
+        <div class="config-section">
+          <h3 class="section-title">Data Source</h3>
+
+          <div class="form-field">
+            <label>Query <span class="required">*</span></label>
+            <mm-query-selector
+              #querySelector
+              [(ngModel)]="selectedPersistentQuery"
+              (querySelected)="onQuerySelected($event)"
+              placeholder="Select a Query..."
+              hint="Select a query containing datetime data for the heatmap.">
+            </mm-query-selector>
+          </div>
+        </div>
+
+        <!-- Field Mapping Section -->
+        @if (selectedPersistentQuery && queryColumns.length > 0) {
+          <div class="config-section">
+            <h3 class="section-title">Field Mapping</h3>
+
+            <div class="form-field">
+              <label>Date/Time Field <span class="required">*</span></label>
+              <kendo-combobox
+                [data]="dateTimeColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.dateField"
+                placeholder="Select date/time field...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">The datetime field used to group data into day/hour buckets.</p>
+            </div>
+
+            <div class="form-field">
+              <label>Date/Time End Field</label>
+              <kendo-combobox
+                [data]="dateTimeColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.dateEndField"
+                [clearButton]="true"
+                placeholder="Select end field (optional)...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Optional: end-of-interval field (e.g. timeRange.to). When set, sub-hour intervals are auto-detected.</p>
+            </div>
+
+            <div class="form-field">
+              <label>Value Field</label>
+              <kendo-combobox
+                [data]="numericColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.valueField"
+                [clearButton]="true"
+                placeholder="Select value field (optional)...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Numeric field to aggregate. Leave empty for count aggregation.</p>
+            </div>
+
+            <div class="form-field">
+              <label>Aggregation</label>
+              <kendo-dropdownlist
+                [data]="aggregationOptions"
+                [textField]="'label'"
+                [valueField]="'value'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.aggregation">
+              </kendo-dropdownlist>
+              <p class="field-hint">How to aggregate values within each time slot.</p>
+            </div>
+          </div>
+        }
+
+        <!-- Filters Section -->
+        @if (selectedPersistentQuery?.queryCkTypeId) {
+          <div class="config-section">
+            <h3 class="section-title">Filters</h3>
+            <p class="section-hint">Define filters to narrow down the data.</p>
+            <mm-field-filter-editor
+              [ckTypeId]="selectedPersistentQuery?.queryCkTypeId ?? undefined"
+              [filters]="filters"
+              [enableVariables]="filterVariables.length > 0"
+              [availableVariables]="filterVariables"
+              (filtersChange)="onFiltersChange($event)">
+            </mm-field-filter-editor>
+          </div>
+        }
+
+        <!-- Display Options Section -->
+        <div class="config-section">
+          <h3 class="section-title">Display Options</h3>
+
+          <div class="form-field">
+            <label>Color Scheme</label>
+            <div class="color-scheme-grid">
+              @for (scheme of colorSchemeOptions; track scheme.value) {
+                <label class="radio-label">
+                  <input type="radio"
+                         name="colorScheme"
+                         [value]="scheme.value"
+                         [(ngModel)]="form.colorScheme"
+                         kendoRadioButton />
+                  <span class="color-scheme-preview">
+                    <span class="color-swatch" [style.background]="scheme.previewColor"></span>
+                    {{ scheme.label }}
+                  </span>
+                </label>
+              }
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-field checkbox-field">
+              <label>
+                <input type="checkbox" [(ngModel)]="form.showLegend" kendoCheckBox />
+                Show Legend
+              </label>
+            </div>
+          </div>
+
+          @if (form.showLegend) {
+            <div class="form-field">
+              <label>Legend Position</label>
+              <kendo-dropdownlist
+                [data]="legendPositions"
+                [textField]="'label'"
+                [valueField]="'value'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.legendPosition">
+              </kendo-dropdownlist>
+            </div>
+          }
+        </div>
+      </div>
+
+      <div class="action-bar">
+        <button kendoButton fillMode="flat" (click)="onCancel()">Cancel</button>
+        <button
+          kendoButton
+          themeColor="primary"
+          [disabled]="!isValid"
+          (click)="onSave()">
+          Save
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.config-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-title{margin:0 0 16px;font-size:1rem;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-field:last-child{margin-bottom:0}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.color-scheme-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.color-scheme-preview{display:flex;align-items:center;gap:6px}.color-swatch{display:inline-block;width:16px;height:16px;border-radius:3px;border:1px solid var(--kendo-color-border, #dee2e6)}.form-row{display:flex;gap:24px}.checkbox-field{flex-direction:row;align-items:center}.checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: i3.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: QuerySelectorComponent, selector: "mm-query-selector", inputs: ["placeholder", "hint", "disabled"], outputs: ["querySelected", "queriesLoaded"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HeatmapConfigDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-heatmap-config-dialog', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ButtonsModule,
+                        InputsModule,
+                        DropDownsModule,
+                        SVGIconModule,
+                        FieldFilterEditorComponent,
+                        QuerySelectorComponent,
+                        LoadingOverlayComponent
+                    ], template: `
+    <div class="config-container">
+
+      <div class="config-form" [class.loading]="isLoadingInitial">
+        <mm-loading-overlay [loading]="isLoadingInitial" />
+
+        <!-- Data Source Section -->
+        <div class="config-section">
+          <h3 class="section-title">Data Source</h3>
+
+          <div class="form-field">
+            <label>Query <span class="required">*</span></label>
+            <mm-query-selector
+              #querySelector
+              [(ngModel)]="selectedPersistentQuery"
+              (querySelected)="onQuerySelected($event)"
+              placeholder="Select a Query..."
+              hint="Select a query containing datetime data for the heatmap.">
+            </mm-query-selector>
+          </div>
+        </div>
+
+        <!-- Field Mapping Section -->
+        @if (selectedPersistentQuery && queryColumns.length > 0) {
+          <div class="config-section">
+            <h3 class="section-title">Field Mapping</h3>
+
+            <div class="form-field">
+              <label>Date/Time Field <span class="required">*</span></label>
+              <kendo-combobox
+                [data]="dateTimeColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.dateField"
+                placeholder="Select date/time field...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">The datetime field used to group data into day/hour buckets.</p>
+            </div>
+
+            <div class="form-field">
+              <label>Date/Time End Field</label>
+              <kendo-combobox
+                [data]="dateTimeColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.dateEndField"
+                [clearButton]="true"
+                placeholder="Select end field (optional)...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Optional: end-of-interval field (e.g. timeRange.to). When set, sub-hour intervals are auto-detected.</p>
+            </div>
+
+            <div class="form-field">
+              <label>Value Field</label>
+              <kendo-combobox
+                [data]="numericColumns"
+                [textField]="'attributePath'"
+                [valueField]="'attributePath'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.valueField"
+                [clearButton]="true"
+                placeholder="Select value field (optional)...">
+                <ng-template kendoComboBoxItemTemplate let-dataItem>
+                  <div class="column-item">
+                    <span class="column-path">{{ dataItem.attributePath }}</span>
+                    <span class="column-type">{{ dataItem.attributeValueType }}</span>
+                  </div>
+                </ng-template>
+              </kendo-combobox>
+              <p class="field-hint">Numeric field to aggregate. Leave empty for count aggregation.</p>
+            </div>
+
+            <div class="form-field">
+              <label>Aggregation</label>
+              <kendo-dropdownlist
+                [data]="aggregationOptions"
+                [textField]="'label'"
+                [valueField]="'value'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.aggregation">
+              </kendo-dropdownlist>
+              <p class="field-hint">How to aggregate values within each time slot.</p>
+            </div>
+          </div>
+        }
+
+        <!-- Filters Section -->
+        @if (selectedPersistentQuery?.queryCkTypeId) {
+          <div class="config-section">
+            <h3 class="section-title">Filters</h3>
+            <p class="section-hint">Define filters to narrow down the data.</p>
+            <mm-field-filter-editor
+              [ckTypeId]="selectedPersistentQuery?.queryCkTypeId ?? undefined"
+              [filters]="filters"
+              [enableVariables]="filterVariables.length > 0"
+              [availableVariables]="filterVariables"
+              (filtersChange)="onFiltersChange($event)">
+            </mm-field-filter-editor>
+          </div>
+        }
+
+        <!-- Display Options Section -->
+        <div class="config-section">
+          <h3 class="section-title">Display Options</h3>
+
+          <div class="form-field">
+            <label>Color Scheme</label>
+            <div class="color-scheme-grid">
+              @for (scheme of colorSchemeOptions; track scheme.value) {
+                <label class="radio-label">
+                  <input type="radio"
+                         name="colorScheme"
+                         [value]="scheme.value"
+                         [(ngModel)]="form.colorScheme"
+                         kendoRadioButton />
+                  <span class="color-scheme-preview">
+                    <span class="color-swatch" [style.background]="scheme.previewColor"></span>
+                    {{ scheme.label }}
+                  </span>
+                </label>
+              }
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-field checkbox-field">
+              <label>
+                <input type="checkbox" [(ngModel)]="form.showLegend" kendoCheckBox />
+                Show Legend
+              </label>
+            </div>
           </div>
 
           @if (form.showLegend) {
@@ -12057,7 +14073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         </button>
       </div>
     </div>
-  `, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.config-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-title{margin:0 0 16px;font-size:1rem;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-field:last-child{margin-bottom:0}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.chart-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.form-row{display:flex;gap:24px}.checkbox-field{flex-direction:row;align-items:center}.checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"] }]
+  `, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.config-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-title{margin:0 0 16px;font-size:1rem;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-field:last-child{margin-bottom:0}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.color-scheme-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.color-scheme-preview{display:flex;align-items:center;gap:6px}.color-swatch{display:inline-block;width:16px;height:16px;border-radius:3px;border:1px solid var(--kendo-color-border, #dee2e6)}.form-row{display:flex;gap:24px}.checkbox-field{flex-direction:row;align-items:center}.checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"] }]
         }], propDecorators: { querySelector: [{
                 type: ViewChild,
                 args: ['querySelector']
@@ -12065,22 +14081,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 type: Input
             }], initialQueryName: [{
                 type: Input
-            }], initialChartType: [{
+            }], initialDateField: [{
                 type: Input
-            }], initialCategoryField: [{
+            }], initialDateEndField: [{
                 type: Input
-            }], initialSeries: [{
+            }], initialValueField: [{
                 type: Input
-            }], initialSeriesGroupField: [{
+            }], initialAggregation: [{
                 type: Input
-            }], initialValueField: [{
+            }], initialColorScheme: [{
                 type: Input
             }], initialShowLegend: [{
                 type: Input
             }], initialLegendPosition: [{
                 type: Input
-            }], initialShowDataLabels: [{
-                type: Input
             }], initialFilters: [{
                 type: Input
             }] } });
@@ -19978,7 +21992,7 @@ class ProcessConfigDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{flex:1;overflow-y:auto;padding:16px}.tab-content{padding:16px;min-height:200px;position:relative}.tab-content.loading{pointer-events:none}.section-hint{margin:0 0 16px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.empty-hint{text-align:center;padding:24px;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.form-field:last-child{margin-bottom:0}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.field-hint.warning{color:var(--kendo-color-warning, #ffc107)}.form-row{display:flex;gap:24px;margin-bottom:12px}.form-row:last-child{margin-bottom:0}.mode-toggle{display:flex;gap:8px}.checkbox-field{flex-direction:row;align-items:flex-start}.checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.checkbox-field .field-hint{margin-top:4px;margin-left:28px}.preview-section{margin-top:16px;padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.preview-info{display:flex;flex-direction:column;gap:6px}.preview-item{display:flex;justify-content:space-between;padding:6px 10px;background:var(--kendo-color-surface, #ffffff);border-radius:4px}.preview-label{font-weight:500;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.preview-value{font-weight:600;font-size:.85rem;color:var(--kendo-color-on-app-surface, #212529)}.diagram-item{display:flex;justify-content:space-between;gap:16px}.diagram-name{font-weight:500}.diagram-size{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.property-mappings-table{display:flex;flex-direction:column;gap:6px}.mapping-header{display:grid;grid-template-columns:minmax(80px,1fr) 55px 85px minmax(80px,1fr) minmax(90px,1.2fr);gap:6px;padding:6px 10px;background:var(--kendo-color-surface-alt, #f8f9fa);border-radius:4px;font-weight:600;font-size:.7rem;color:var(--kendo-color-subtle, #6c757d);text-transform:uppercase}.mapping-row{display:grid;grid-template-columns:minmax(80px,1fr) 55px 85px minmax(80px,1fr) minmax(90px,1.2fr);gap:6px;padding:6px 10px;background:var(--kendo-color-surface, #ffffff);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;align-items:center}.col-property{font-weight:500;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.col-type.type-badge{font-size:.65rem;padding:2px 4px;background:var(--kendo-color-surface-alt, #f8f9fa);border-radius:10px;text-align:center;text-transform:uppercase;color:var(--kendo-color-subtle, #6c757d)}.col-expression kendo-textbox{font-family:Consolas,Monaco,monospace;font-size:.8rem}.expression-help{margin-top:12px}.expression-help code{background:var(--kendo-color-surface-alt, #f8f9fa);padding:1px 4px;border-radius:3px;font-size:.75rem}.loading-hint{font-style:italic;color:var(--kendo-color-subtle, #6c757d);padding:8px;text-align:center}:host ::ng-deep kendo-tabstrip{border:none}:host ::ng-deep .k-tabstrip-items-wrapper{border-bottom:1px solid var(--kendo-color-border, #dee2e6)}:host ::ng-deep .k-tabstrip-content{border:none;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: LayoutModule }, { kind: "component", type: i4$1.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i4$1.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i4$1.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{flex:1;overflow-y:auto;padding:16px}.tab-content{padding:16px;min-height:200px;position:relative}.tab-content.loading{pointer-events:none}.section-hint{margin:0 0 16px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.empty-hint{text-align:center;padding:24px;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.form-field:last-child{margin-bottom:0}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.field-hint.warning{color:var(--kendo-color-warning, #ffc107)}.form-row{display:flex;gap:24px;margin-bottom:12px}.form-row:last-child{margin-bottom:0}.mode-toggle{display:flex;gap:8px}.checkbox-field{flex-direction:row;align-items:flex-start}.checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.checkbox-field .field-hint{margin-top:4px;margin-left:28px}.preview-section{margin-top:16px;padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.preview-info{display:flex;flex-direction:column;gap:6px}.preview-item{display:flex;justify-content:space-between;padding:6px 10px;background:var(--kendo-color-surface, #ffffff);border-radius:4px}.preview-label{font-weight:500;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.preview-value{font-weight:600;font-size:.85rem;color:var(--kendo-color-on-app-surface, #212529)}.diagram-item{display:flex;justify-content:space-between;gap:16px}.diagram-name{font-weight:500}.diagram-size{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.property-mappings-table{display:flex;flex-direction:column;gap:6px}.mapping-header{display:grid;grid-template-columns:minmax(80px,1fr) 55px 85px minmax(80px,1fr) minmax(90px,1.2fr);gap:6px;padding:6px 10px;background:var(--kendo-color-surface-alt, #f8f9fa);border-radius:4px;font-weight:600;font-size:.7rem;color:var(--kendo-color-subtle, #6c757d);text-transform:uppercase}.mapping-row{display:grid;grid-template-columns:minmax(80px,1fr) 55px 85px minmax(80px,1fr) minmax(90px,1.2fr);gap:6px;padding:6px 10px;background:var(--kendo-color-surface, #ffffff);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;align-items:center}.col-property{font-weight:500;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.col-type.type-badge{font-size:.65rem;padding:2px 4px;background:var(--kendo-color-surface-alt, #f8f9fa);border-radius:10px;text-align:center;text-transform:uppercase;color:var(--kendo-color-subtle, #6c757d)}.col-expression kendo-textbox{font-family:Consolas,Monaco,monospace;font-size:.8rem}.expression-help{margin-top:12px}.expression-help code{background:var(--kendo-color-surface-alt, #f8f9fa);padding:1px 4px;border-radius:3px;font-size:.75rem}.loading-hint{font-style:italic;color:var(--kendo-color-subtle, #6c757d);padding:8px;text-align:center}:host ::ng-deep kendo-tabstrip{border:none}:host ::ng-deep .k-tabstrip-items-wrapper{border-bottom:1px solid var(--kendo-color-border, #dee2e6)}:host ::ng-deep .k-tabstrip-content{border:none;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: LayoutModule }, { kind: "component", type: i4$1.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i4$1.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i4$1.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProcessConfigDialogComponent, decorators: [{
             type: Component,
@@ -21455,6 +23469,110 @@ function registerDefaultWidgets(registry) {
             };
         }
     });
+    // Line Chart Widget
+    registry.registerWidget({
+        type: 'lineChart',
+        label: 'Line Chart',
+        component: LineChartWidgetComponent,
+        configDialogComponent: LineChartConfigDialogComponent,
+        configDialogSize: { width: 750, height: 650, minWidth: 550, minHeight: 450 },
+        configDialogTitle: 'Line Chart Configuration',
+        defaultSize: { colSpan: 3, rowSpan: 2 },
+        supportedDataSources: ['persistentQuery'],
+        getInitialConfig: (widget) => {
+            const lineWidget = widget;
+            const dataSource = lineWidget.dataSource;
+            const isPersistentQuery = dataSource.type === 'persistentQuery';
+            return {
+                initialQueryRtId: isPersistentQuery ? dataSource.queryRtId : undefined,
+                initialQueryName: isPersistentQuery ? dataSource.queryName : undefined,
+                initialChartType: lineWidget.chartType,
+                initialCategoryField: lineWidget.categoryField,
+                initialSeriesGroupField: lineWidget.seriesGroupField,
+                initialValueField: lineWidget.valueField,
+                initialUnitField: lineWidget.unitField,
+                initialShowLegend: lineWidget.showLegend,
+                initialLegendPosition: lineWidget.legendPosition,
+                initialShowMarkers: lineWidget.showMarkers,
+                initialFilters: lineWidget.filters
+            };
+        },
+        applyConfigResult: (widget, result) => {
+            const dataSource = {
+                type: 'persistentQuery',
+                queryRtId: result.queryRtId,
+                queryName: result.queryName
+            };
+            const filters = result.filters?.map(f => ({
+                attributePath: f.attributePath,
+                operator: String(f.operator),
+                comparisonValue: f.comparisonValue
+            }));
+            return {
+                ...widget,
+                dataSource,
+                chartType: result.chartType,
+                categoryField: result.categoryField,
+                seriesGroupField: result.seriesGroupField,
+                valueField: result.valueField,
+                unitField: result.unitField,
+                showLegend: result.showLegend,
+                legendPosition: result.legendPosition,
+                showMarkers: result.showMarkers,
+                filters
+            };
+        },
+        createDefaultConfig: (base) => ({
+            ...base,
+            type: 'lineChart',
+            colSpan: 3,
+            rowSpan: 2,
+            dataSource: createDefaultPersistentQueryDataSource(),
+            chartType: 'line',
+            categoryField: '',
+            seriesGroupField: '',
+            valueField: '',
+            showLegend: true,
+            legendPosition: 'right',
+            showMarkers: false
+        }),
+        toPersistedConfig: (widget) => ({
+            dataSourceType: 'persistentQuery',
+            dataSourceRtId: widget.dataSource.queryRtId,
+            config: {
+                chartType: widget.chartType,
+                categoryField: widget.categoryField,
+                seriesGroupField: widget.seriesGroupField,
+                valueField: widget.valueField,
+                unitField: widget.unitField,
+                showLegend: widget.showLegend,
+                legendPosition: widget.legendPosition,
+                showMarkers: widget.showMarkers,
+                queryName: widget.dataSource.queryName,
+                queryRtId: widget.dataSource.queryRtId,
+                filters: widget.filters
+            }
+        }),
+        fromPersistedConfig: (data, base) => {
+            const config = parseConfig(data);
+            const dataSource = buildDataSourceFromPersisted(data, config);
+            return {
+                ...base,
+                rtId: data.rtId,
+                type: 'lineChart',
+                dataSource,
+                chartType: config['chartType'] ?? 'line',
+                categoryField: config['categoryField'] ?? '',
+                seriesGroupField: config['seriesGroupField'] ?? '',
+                valueField: config['valueField'] ?? '',
+                unitField: config['unitField'],
+                showLegend: config['showLegend'] ?? true,
+                legendPosition: config['legendPosition'] ?? 'right',
+                showMarkers: config['showMarkers'] ?? false,
+                filters: config['filters']
+            };
+        }
+    });
     // Stats Grid Widget
     registry.registerWidget({
         type: 'statsGrid',
@@ -21879,6 +23997,107 @@ function registerDefaultWidgets(registry) {
             };
         }
     });
+    // Heatmap Widget
+    registry.registerWidget({
+        type: 'heatmap',
+        label: 'Heatmap',
+        component: HeatmapWidgetComponent,
+        configDialogComponent: HeatmapConfigDialogComponent,
+        configDialogSize: { width: 750, height: 650, minWidth: 550, minHeight: 450 },
+        configDialogTitle: 'Heatmap Configuration',
+        defaultSize: { colSpan: 3, rowSpan: 2 },
+        supportedDataSources: ['persistentQuery'],
+        getInitialConfig: (widget) => {
+            const heatmapWidget = widget;
+            const dataSource = heatmapWidget.dataSource;
+            const isPersistentQuery = dataSource.type === 'persistentQuery';
+            return {
+                initialQueryRtId: isPersistentQuery ? dataSource.queryRtId : undefined,
+                initialQueryName: isPersistentQuery ? dataSource.queryName : undefined,
+                initialDateField: heatmapWidget.dateField,
+                initialDateEndField: heatmapWidget.dateEndField,
+                initialValueField: heatmapWidget.valueField,
+                initialAggregation: heatmapWidget.aggregation,
+                initialColorScheme: heatmapWidget.colorScheme,
+                initialShowLegend: heatmapWidget.showLegend,
+                initialLegendPosition: heatmapWidget.legendPosition,
+                initialFilters: heatmapWidget.filters
+            };
+        },
+        applyConfigResult: (widget, result) => {
+            const dataSource = {
+                type: 'persistentQuery',
+                queryRtId: result.queryRtId,
+                queryName: result.queryName
+            };
+            const filters = result.filters?.map(f => ({
+                attributePath: f.attributePath,
+                operator: String(f.operator),
+                comparisonValue: f.comparisonValue
+            }));
+            return {
+                ...widget,
+                dataSource,
+                dateField: result.dateField,
+                dateEndField: result.dateEndField,
+                valueField: result.valueField,
+                aggregation: result.aggregation,
+                colorScheme: result.colorScheme,
+                showLegend: result.showLegend,
+                legendPosition: result.legendPosition,
+                filters
+            };
+        },
+        // SOLID: Factory function
+        createDefaultConfig: (base) => ({
+            ...base,
+            type: 'heatmap',
+            colSpan: 3,
+            rowSpan: 2,
+            dataSource: createDefaultPersistentQueryDataSource(),
+            dateField: '',
+            aggregation: 'count',
+            colorScheme: 'green',
+            showLegend: true,
+            legendPosition: 'bottom'
+        }),
+        // SOLID: Serialization for persistence
+        toPersistedConfig: (widget) => ({
+            dataSourceType: 'persistentQuery',
+            dataSourceRtId: widget.dataSource.queryRtId,
+            config: {
+                dateField: widget.dateField,
+                dateEndField: widget.dateEndField,
+                valueField: widget.valueField,
+                aggregation: widget.aggregation,
+                colorScheme: widget.colorScheme,
+                showLegend: widget.showLegend,
+                legendPosition: widget.legendPosition,
+                queryName: widget.dataSource.queryName,
+                queryRtId: widget.dataSource.queryRtId,
+                filters: widget.filters
+            }
+        }),
+        // SOLID: Deserialization from persistence
+        fromPersistedConfig: (data, base) => {
+            const config = parseConfig(data);
+            const dataSource = buildDataSourceFromPersisted(data, config);
+            return {
+                ...base,
+                rtId: data.rtId,
+                type: 'heatmap',
+                dataSource,
+                dateField: config['dateField'] ?? '',
+                dateEndField: config['dateEndField'],
+                valueField: config['valueField'],
+                aggregation: config['aggregation'] ?? 'count',
+                colorScheme: config['colorScheme'] ?? 'green',
+                showLegend: config['showLegend'] ?? true,
+                legendPosition: config['legendPosition'] ?? 'bottom',
+                filters: config['filters']
+            };
+        }
+    });
     // Note: Process Widget registration moved to process-widget-registration.ts
     // Use provideProcessWidget() or registerProcessWidget() to enable it
 }
@@ -22181,6 +24400,8 @@ class MeshBoardSettingsDialogComponent {
     gap = 16;
     variables = [];
     timeFilterEnabled = false;
+    defaultSelection;
+    initialDefaultSelection;
     // Validation
     get isValid() {
         return (this.name.trim().length > 0 &&
@@ -22200,6 +24421,32 @@ class MeshBoardSettingsDialogComponent {
         this.gap = settings.gap;
         this.variables = settings.variables ? [...settings.variables] : [];
         this.timeFilterEnabled = settings.timeFilter?.enabled ?? false;
+        this.defaultSelection = settings.timeFilter?.defaultSelection;
+        if (this.defaultSelection) {
+            this.initialDefaultSelection = {
+                ...this.defaultSelection,
+                customFrom: this.defaultSelection.customFrom ? new Date(this.defaultSelection.customFrom) : undefined,
+                customTo: this.defaultSelection.customTo ? new Date(this.defaultSelection.customTo) : undefined
+            };
+        }
+    }
+    /**
+     * Handles default selection change from the time range picker.
+     */
+    onDefaultSelectionChange(sharedSelection) {
+        this.defaultSelection = {
+            type: sharedSelection.type,
+            year: sharedSelection.year,
+            quarter: sharedSelection.quarter,
+            month: sharedSelection.month,
+            day: sharedSelection.day,
+            hourFrom: sharedSelection.hourFrom,
+            hourTo: sharedSelection.hourTo,
+            relativeValue: sharedSelection.relativeValue,
+            relativeUnit: sharedSelection.relativeUnit,
+            customFrom: sharedSelection.customFrom?.toISOString(),
+            customTo: sharedSelection.customTo?.toISOString()
+        };
     }
     /**
      * Saves the settings and closes the dialog.
@@ -22209,7 +24456,8 @@ class MeshBoardSettingsDialogComponent {
             return;
         }
         const timeFilter = {
-            enabled: this.timeFilterEnabled
+            enabled: this.timeFilterEnabled,
+            defaultSelection: this.timeFilterEnabled ? this.defaultSelection : undefined
         };
         const result = new MeshBoardSettingsResult(this.name.trim(), this.description.trim(), this.columns, this.rowHeight, this.gap, this.variables, timeFilter, this.rtWellKnownName.trim() || undefined);
         this.dialogRef.close(result);
@@ -22221,7 +24469,7 @@ class MeshBoardSettingsDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MeshBoardSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MeshBoardSettingsDialogComponent, isStandalone: true, selector: "mm-meshboard-settings-dialog", ngImport: i0, template: "<div class=\"meshboard-settings-dialog\">\n  <form class=\"settings-form\">\n    <!-- Name Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n      <kendo-textbox\n        #nameInput\n        [(ngModel)]=\"name\"\n        name=\"name\"\n        placeholder=\"Enter MeshBoard name\"\n        required>\n      </kendo-textbox>\n      @if (name.trim().length === 0) {\n        <kendo-formerror>Name is required</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Description Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n      <kendo-textarea\n        #descriptionInput\n        [(ngModel)]=\"description\"\n        name=\"description\"\n        placeholder=\"Enter MeshBoard description (optional)\"\n        [rows]=\"3\">\n      </kendo-textarea>\n    </kendo-formfield>\n\n    <!-- Well-Known Name Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n      <kendo-textbox\n        #wellKnownNameInput\n        [(ngModel)]=\"rtWellKnownName\"\n        name=\"rtWellKnownName\"\n        placeholder=\"e.g., cockpit, dashboard-main\">\n      </kendo-textbox>\n      <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n    </kendo-formfield>\n\n    <!-- Layout Settings -->\n    <div class=\"section-title\">Layout Settings</div>\n\n    <!-- Columns Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n      <kendo-numerictextbox\n        #columnsInput\n        [(ngModel)]=\"columns\"\n        name=\"columns\"\n        [min]=\"1\"\n        [max]=\"12\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n      @if (columns < 1 || columns > 12) {\n        <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Row Height Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n      <kendo-numerictextbox\n        #rowHeightInput\n        [(ngModel)]=\"rowHeight\"\n        name=\"rowHeight\"\n        [min]=\"100\"\n        [max]=\"1000\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n      @if (rowHeight < 100 || rowHeight > 1000) {\n        <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Gap Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n      <kendo-numerictextbox\n        #gapInput\n        [(ngModel)]=\"gap\"\n        name=\"gap\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n      @if (gap < 0 || gap > 100) {\n        <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Variables Section -->\n    <mm-variables-editor\n      [(variables)]=\"variables\">\n    </mm-variables-editor>\n\n    <!-- Time Filter Section -->\n    <div class=\"section-title\">Time Filter</div>\n\n    <kendo-formfield>\n      <div class=\"checkbox-wrapper\">\n        <input\n          type=\"checkbox\"\n          kendoCheckBox\n          #timeFilterCheckbox\n          [(ngModel)]=\"timeFilterEnabled\"\n          name=\"timeFilterEnabled\"\n          id=\"timeFilterEnabled\"/>\n        <kendo-label\n          [for]=\"timeFilterCheckbox\"\n          text=\"Enable Time Filter\"\n          class=\"checkbox-label\">\n        </kendo-label>\n      </div>\n      <kendo-formhint>\n        Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n      </kendo-formhint>\n    </kendo-formfield>\n  </form>\n\n  <!-- Dialog Actions -->\n  <kendo-dialog-actions>\n    <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n      Cancel\n    </button>\n    <button\n      kendoButton\n      (click)=\"save()\"\n      [disabled]=\"!isValid\"\n      themeColor=\"primary\">\n      Save\n    </button>\n  </kendo-dialog-actions>\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;max-height:calc(80vh - 60px);overflow:hidden}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem;overflow-y:auto;flex:1;min-height:0}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog kendo-dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--kendo-color-border, #e0e0e0);flex-shrink:0;background-color:var(--kendo-color-surface-alt, white)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$4.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i3.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i3.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i3.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "ngmodule", type: CheckBoxModule }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: VariablesEditorComponent, selector: "mm-variables-editor", inputs: ["variables"], outputs: ["variablesChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MeshBoardSettingsDialogComponent, isStandalone: true, selector: "mm-meshboard-settings-dialog", ngImport: i0, template: "<div class=\"meshboard-settings-dialog\">\n  <form class=\"settings-form\">\n    <!-- Name Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n      <kendo-textbox\n        #nameInput\n        [(ngModel)]=\"name\"\n        name=\"name\"\n        placeholder=\"Enter MeshBoard name\"\n        required>\n      </kendo-textbox>\n      @if (name.trim().length === 0) {\n        <kendo-formerror>Name is required</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Description Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n      <kendo-textarea\n        #descriptionInput\n        [(ngModel)]=\"description\"\n        name=\"description\"\n        placeholder=\"Enter MeshBoard description (optional)\"\n        [rows]=\"3\">\n      </kendo-textarea>\n    </kendo-formfield>\n\n    <!-- Well-Known Name Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n      <kendo-textbox\n        #wellKnownNameInput\n        [(ngModel)]=\"rtWellKnownName\"\n        name=\"rtWellKnownName\"\n        placeholder=\"e.g., cockpit, dashboard-main\">\n      </kendo-textbox>\n      <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n    </kendo-formfield>\n\n    <!-- Layout Settings -->\n    <div class=\"section-title\">Layout Settings</div>\n\n    <!-- Columns Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n      <kendo-numerictextbox\n        #columnsInput\n        [(ngModel)]=\"columns\"\n        name=\"columns\"\n        [min]=\"1\"\n        [max]=\"12\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n      @if (columns < 1 || columns > 12) {\n        <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Row Height Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n      <kendo-numerictextbox\n        #rowHeightInput\n        [(ngModel)]=\"rowHeight\"\n        name=\"rowHeight\"\n        [min]=\"100\"\n        [max]=\"1000\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n      @if (rowHeight < 100 || rowHeight > 1000) {\n        <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Gap Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n      <kendo-numerictextbox\n        #gapInput\n        [(ngModel)]=\"gap\"\n        name=\"gap\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n      @if (gap < 0 || gap > 100) {\n        <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Variables Section -->\n    <mm-variables-editor\n      [(variables)]=\"variables\">\n    </mm-variables-editor>\n\n    <!-- Time Filter Section -->\n    <div class=\"section-title\">Time Filter</div>\n\n    <kendo-formfield>\n      <div class=\"checkbox-wrapper\">\n        <input\n          type=\"checkbox\"\n          kendoCheckBox\n          #timeFilterCheckbox\n          [(ngModel)]=\"timeFilterEnabled\"\n          name=\"timeFilterEnabled\"\n          id=\"timeFilterEnabled\"/>\n        <kendo-label\n          [for]=\"timeFilterCheckbox\"\n          text=\"Enable Time Filter\"\n          class=\"checkbox-label\">\n        </kendo-label>\n      </div>\n      <kendo-formhint>\n        Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n      </kendo-formhint>\n    </kendo-formfield>\n\n    @if (timeFilterEnabled) {\n      <kendo-formfield>\n        <kendo-label text=\"Default Selection\"></kendo-label>\n        <mm-time-range-picker\n          [initialSelection]=\"initialDefaultSelection\"\n          (selectionChange)=\"onDefaultSelectionChange($event)\">\n        </mm-time-range-picker>\n        <kendo-formhint>Initial time filter shown when no URL parameters are set. Note: User-selected filters override this default. Use the reset button in the toolbar to revert to the default.</kendo-formhint>\n      </kendo-formfield>\n    }\n  </form>\n\n  <!-- Dialog Actions -->\n  <kendo-dialog-actions>\n    <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n      Cancel\n    </button>\n    <button\n      kendoButton\n      (click)=\"save()\"\n      [disabled]=\"!isValid\"\n      themeColor=\"primary\">\n      Save\n    </button>\n  </kendo-dialog-actions>\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;max-height:calc(80vh - 60px);overflow:hidden}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem;overflow-y:auto;flex:1;min-height:0}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog kendo-dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--kendo-color-border, #e0e0e0);flex-shrink:0;background-color:var(--kendo-color-surface-alt, white)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$4.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i3.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i3.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i3.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "ngmodule", type: CheckBoxModule }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: VariablesEditorComponent, selector: "mm-variables-editor", inputs: ["variables"], outputs: ["variablesChange"] }, { kind: "component", type: TimeRangePickerComponent, selector: "mm-time-range-picker", inputs: ["config", "labels", "initialSelection"], outputs: ["rangeChange", "rangeChangeISO", "selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MeshBoardSettingsDialogComponent, decorators: [{
             type: Component,
@@ -22234,8 +24482,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         CheckBoxModule,
                         LabelModule,
                         FormFieldModule,
-                        VariablesEditorComponent
-                    ], template: "<div class=\"meshboard-settings-dialog\">\n  <form class=\"settings-form\">\n    <!-- Name Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n      <kendo-textbox\n        #nameInput\n        [(ngModel)]=\"name\"\n        name=\"name\"\n        placeholder=\"Enter MeshBoard name\"\n        required>\n      </kendo-textbox>\n      @if (name.trim().length === 0) {\n        <kendo-formerror>Name is required</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Description Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n      <kendo-textarea\n        #descriptionInput\n        [(ngModel)]=\"description\"\n        name=\"description\"\n        placeholder=\"Enter MeshBoard description (optional)\"\n        [rows]=\"3\">\n      </kendo-textarea>\n    </kendo-formfield>\n\n    <!-- Well-Known Name Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n      <kendo-textbox\n        #wellKnownNameInput\n        [(ngModel)]=\"rtWellKnownName\"\n        name=\"rtWellKnownName\"\n        placeholder=\"e.g., cockpit, dashboard-main\">\n      </kendo-textbox>\n      <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n    </kendo-formfield>\n\n    <!-- Layout Settings -->\n    <div class=\"section-title\">Layout Settings</div>\n\n    <!-- Columns Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n      <kendo-numerictextbox\n        #columnsInput\n        [(ngModel)]=\"columns\"\n        name=\"columns\"\n        [min]=\"1\"\n        [max]=\"12\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n      @if (columns < 1 || columns > 12) {\n        <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Row Height Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n      <kendo-numerictextbox\n        #rowHeightInput\n        [(ngModel)]=\"rowHeight\"\n        name=\"rowHeight\"\n        [min]=\"100\"\n        [max]=\"1000\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n      @if (rowHeight < 100 || rowHeight > 1000) {\n        <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Gap Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n      <kendo-numerictextbox\n        #gapInput\n        [(ngModel)]=\"gap\"\n        name=\"gap\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n      @if (gap < 0 || gap > 100) {\n        <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Variables Section -->\n    <mm-variables-editor\n      [(variables)]=\"variables\">\n    </mm-variables-editor>\n\n    <!-- Time Filter Section -->\n    <div class=\"section-title\">Time Filter</div>\n\n    <kendo-formfield>\n      <div class=\"checkbox-wrapper\">\n        <input\n          type=\"checkbox\"\n          kendoCheckBox\n          #timeFilterCheckbox\n          [(ngModel)]=\"timeFilterEnabled\"\n          name=\"timeFilterEnabled\"\n          id=\"timeFilterEnabled\"/>\n        <kendo-label\n          [for]=\"timeFilterCheckbox\"\n          text=\"Enable Time Filter\"\n          class=\"checkbox-label\">\n        </kendo-label>\n      </div>\n      <kendo-formhint>\n        Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n      </kendo-formhint>\n    </kendo-formfield>\n  </form>\n\n  <!-- Dialog Actions -->\n  <kendo-dialog-actions>\n    <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n      Cancel\n    </button>\n    <button\n      kendoButton\n      (click)=\"save()\"\n      [disabled]=\"!isValid\"\n      themeColor=\"primary\">\n      Save\n    </button>\n  </kendo-dialog-actions>\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;max-height:calc(80vh - 60px);overflow:hidden}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem;overflow-y:auto;flex:1;min-height:0}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog kendo-dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--kendo-color-border, #e0e0e0);flex-shrink:0;background-color:var(--kendo-color-surface-alt, white)}\n"] }]
+                        VariablesEditorComponent,
+                        TimeRangePickerComponent
+                    ], template: "<div class=\"meshboard-settings-dialog\">\n  <form class=\"settings-form\">\n    <!-- Name Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n      <kendo-textbox\n        #nameInput\n        [(ngModel)]=\"name\"\n        name=\"name\"\n        placeholder=\"Enter MeshBoard name\"\n        required>\n      </kendo-textbox>\n      @if (name.trim().length === 0) {\n        <kendo-formerror>Name is required</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Description Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n      <kendo-textarea\n        #descriptionInput\n        [(ngModel)]=\"description\"\n        name=\"description\"\n        placeholder=\"Enter MeshBoard description (optional)\"\n        [rows]=\"3\">\n      </kendo-textarea>\n    </kendo-formfield>\n\n    <!-- Well-Known Name Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n      <kendo-textbox\n        #wellKnownNameInput\n        [(ngModel)]=\"rtWellKnownName\"\n        name=\"rtWellKnownName\"\n        placeholder=\"e.g., cockpit, dashboard-main\">\n      </kendo-textbox>\n      <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n    </kendo-formfield>\n\n    <!-- Layout Settings -->\n    <div class=\"section-title\">Layout Settings</div>\n\n    <!-- Columns Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n      <kendo-numerictextbox\n        #columnsInput\n        [(ngModel)]=\"columns\"\n        name=\"columns\"\n        [min]=\"1\"\n        [max]=\"12\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n      @if (columns < 1 || columns > 12) {\n        <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Row Height Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n      <kendo-numerictextbox\n        #rowHeightInput\n        [(ngModel)]=\"rowHeight\"\n        name=\"rowHeight\"\n        [min]=\"100\"\n        [max]=\"1000\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n      @if (rowHeight < 100 || rowHeight > 1000) {\n        <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Gap Field -->\n    <kendo-formfield>\n      <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n      <kendo-numerictextbox\n        #gapInput\n        [(ngModel)]=\"gap\"\n        name=\"gap\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [decimals]=\"0\"\n        [format]=\"'n0'\"\n        [spinners]=\"true\"\n        required>\n      </kendo-numerictextbox>\n      <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n      @if (gap < 0 || gap > 100) {\n        <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n      }\n    </kendo-formfield>\n\n    <!-- Variables Section -->\n    <mm-variables-editor\n      [(variables)]=\"variables\">\n    </mm-variables-editor>\n\n    <!-- Time Filter Section -->\n    <div class=\"section-title\">Time Filter</div>\n\n    <kendo-formfield>\n      <div class=\"checkbox-wrapper\">\n        <input\n          type=\"checkbox\"\n          kendoCheckBox\n          #timeFilterCheckbox\n          [(ngModel)]=\"timeFilterEnabled\"\n          name=\"timeFilterEnabled\"\n          id=\"timeFilterEnabled\"/>\n        <kendo-label\n          [for]=\"timeFilterCheckbox\"\n          text=\"Enable Time Filter\"\n          class=\"checkbox-label\">\n        </kendo-label>\n      </div>\n      <kendo-formhint>\n        Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n      </kendo-formhint>\n    </kendo-formfield>\n\n    @if (timeFilterEnabled) {\n      <kendo-formfield>\n        <kendo-label text=\"Default Selection\"></kendo-label>\n        <mm-time-range-picker\n          [initialSelection]=\"initialDefaultSelection\"\n          (selectionChange)=\"onDefaultSelectionChange($event)\">\n        </mm-time-range-picker>\n        <kendo-formhint>Initial time filter shown when no URL parameters are set. Note: User-selected filters override this default. Use the reset button in the toolbar to revert to the default.</kendo-formhint>\n      </kendo-formfield>\n    }\n  </form>\n\n  <!-- Dialog Actions -->\n  <kendo-dialog-actions>\n    <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n      Cancel\n    </button>\n    <button\n      kendoButton\n      (click)=\"save()\"\n      [disabled]=\"!isValid\"\n      themeColor=\"primary\">\n      Save\n    </button>\n  </kendo-dialog-actions>\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;max-height:calc(80vh - 60px);overflow:hidden}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem;overflow-y:auto;flex:1;min-height:0}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog kendo-dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--kendo-color-border, #e0e0e0);flex-shrink:0;background-color:var(--kendo-color-surface-alt, white)}\n"] }]
         }] });
 
 /**
@@ -22279,16 +24528,22 @@ class AddWidgetDialogComponent {
                 return chartPieIcon;
             case 'barChart':
                 return chartColumnStackedIcon;
+            case 'lineChart':
+                return chartLineMarkersIcon;
             case 'statsGrid':
                 return gridLayoutIcon;
             case 'statusIndicator':
                 return checkCircleIcon;
             case 'serviceHealth':
                 return heartIcon;
+            case 'heatmap':
+                return gridIcon;
             case 'widgetGroup':
                 return copyIcon;
+            case 'markdown':
+                return clipboardMarkdownIcon;
             case 'process':
-                return chartLineIcon;
+                return gearsIcon;
             default:
                 return chartLineIcon;
         }
@@ -22312,6 +24567,8 @@ class AddWidgetDialogComponent {
                 return 'Display data distribution as a pie or donut chart';
             case 'barChart':
                 return 'Display data as vertical or horizontal bars';
+            case 'lineChart':
+                return 'Display time-series data as a multi-series line chart with optional multiple Y-axes';
             case 'statsGrid':
                 return 'Display multiple KPIs in a grid layout';
             case 'statusIndicator':
@@ -22320,6 +24577,10 @@ class AddWidgetDialogComponent {
                 return 'Display service health status with pulse animation';
             case 'widgetGroup':
                 return 'Display a repeating group of child widgets from a query or CK type';
+            case 'heatmap':
+                return 'Visualize data density or availability over time as a heatmap grid';
+            case 'markdown':
+                return 'Display formatted text content with Markdown syntax';
             case 'process':
                 return 'Display and interact with process diagrams and HMI graphics';
             default:
@@ -22995,8 +25256,11 @@ class MeshBoardViewComponent {
     route = inject(ActivatedRoute);
     gridService = inject(MeshBoardGridService);
     tenantIdProvider = inject(TENANT_ID_PROVIDER, { optional: true });
+    breadCrumbService = inject(BreadCrumbService, { optional: true });
     // Track the last known rtId to avoid unnecessary navigation
     lastNavigatedRtId = null;
+    // Guard to prevent the effect from running during initial load
+    initialLoadComplete = false;
     // Icons
     gearIcon = gearIcon;
     plusIcon = plusIcon;
@@ -23007,11 +25271,13 @@ class MeshBoardViewComponent {
     linkIcon = linkIcon;
     trashIcon = trashIcon;
     gridLayoutIcon = gridLayoutIcon;
+    undoIcon = undoIcon;
     // Edit widget dialog state
     showEditWidgetDialog = false;
     editingWidget = null;
     // Config dialog state
     configDialogSubscription = null;
+    navigationSubscription = null;
     // State signals
     config = this.stateService.meshBoardConfig;
     isEditMode = this.editModeService.isEditMode;
@@ -23039,45 +25305,85 @@ class MeshBoardViewComponent {
     // Time Filter computed signals
     isTimeFilterEnabled = computed(() => this.stateService.isTimeFilterEnabled(), ...(ngDevMode ? [{ debugName: "isTimeFilterEnabled" }] : []));
     timeFilterConfig = computed(() => this.stateService.getTimeFilterConfig(), ...(ngDevMode ? [{ debugName: "timeFilterConfig" }] : []));
+    _urlTimeSelection = signal(null, ...(ngDevMode ? [{ debugName: "_urlTimeSelection" }] : []));
     initialTimeSelection = computed(() => {
-        const selection = this.timeFilterConfig()?.selection;
+        // Priority: URL selection > stored selection > default selection
+        const urlSelection = this._urlTimeSelection();
+        const config = this.timeFilterConfig();
+        const selection = urlSelection ?? config?.selection ?? config?.defaultSelection;
         if (!selection)
             return undefined;
-        // Convert our TimeRangeSelection to shared-ui TimeRangeSelection
-        // Handle customFrom/customTo as Date objects
         return {
             ...selection,
             customFrom: selection.customFrom ? new Date(selection.customFrom) : undefined,
             customTo: selection.customTo ? new Date(selection.customTo) : undefined
         };
     }, ...(ngDevMode ? [{ debugName: "initialTimeSelection" }] : []));
+    /**
+     * Whether the time filter can be reset to the default selection.
+     * True when a default selection is configured and the stored selection differs from it.
+     */
+    canResetTimeFilter = computed(() => {
+        const config = this.timeFilterConfig();
+        if (!config?.enabled || !config.defaultSelection)
+            return false;
+        if (!config.selection)
+            return false;
+        return !this.isSelectionEqual(config.selection, config.defaultSelection);
+    }, ...(ngDevMode ? [{ debugName: "canResetTimeFilter" }] : []));
     constructor() {
-        // Effect to sync URL when dashboard changes
+        // Effect to sync URL when dashboard changes (after initial load)
         effect(() => {
             const currentRtId = this.stateService.persistedMeshBoardId();
             if (currentRtId && currentRtId !== this.lastNavigatedRtId) {
                 this.lastNavigatedRtId = currentRtId;
-                this.updateUrlWithRtId(currentRtId);
-                // Initialize time filter variables when switching to a different MeshBoard
-                this.initializeTimeFilterVariables();
+                if (this.initialLoadComplete) {
+                    // Only update URL and time filter for post-init board switches (e.g. manager dialog)
+                    this.updateUrlWithRtId(currentRtId);
+                    this.initializeTimeFilterVariables();
+                }
             }
         });
+        // Update breadcrumb after each navigation (BreadCrumbService recreates items on NavigationEnd)
+        if (this.breadCrumbService) {
+            this.navigationSubscription = this.router.events
+                .pipe(filter(event => event instanceof NavigationEnd))
+                .subscribe(() => {
+                const name = this.config().name;
+                if (name) {
+                    this.breadCrumbService.updateBreadcrumbLabels({ name });
+                }
+            });
+        }
+    }
+    /**
+     * Updates the breadcrumb with the current MeshBoard name.
+     */
+    updateBreadcrumb() {
+        const name = this.config().name;
+        if (name && this.breadCrumbService) {
+            this.breadCrumbService.updateBreadcrumbLabels({ name });
+        }
     }
     /**
      * Updates the URL to include the current MeshBoard rtId.
+     * Preserves existing query parameters.
      */
     updateUrlWithRtId(rtId) {
         const currentUrl = this.router.url;
         const hasRtIdParam = this.route.snapshot.paramMap.has('rtId');
+        // Split off query string to preserve it
+        const [pathPart, queryPart] = currentUrl.split('?');
+        const querySuffix = queryPart ? '?' + queryPart : '';
         if (hasRtIdParam) {
             // Replace the last URL segment (the old rtId) with the new one
-            const lastSlashIndex = currentUrl.lastIndexOf('/');
-            const newUrl = currentUrl.substring(0, lastSlashIndex + 1) + rtId;
-            this.router.navigateByUrl(newUrl, { replaceUrl: true });
+            const lastSlashIndex = pathPart.lastIndexOf('/');
+            const newPath = pathPart.substring(0, lastSlashIndex + 1) + rtId;
+            this.router.navigateByUrl(newPath + querySuffix, { replaceUrl: true });
         }
         else {
             // Append the rtId to the current URL
-            this.router.navigateByUrl(`${currentUrl}/${rtId}`, { replaceUrl: true });
+            this.router.navigateByUrl(`${pathPart}/${rtId}${querySuffix}`, { replaceUrl: true });
         }
     }
     async ngOnInit() {
@@ -23113,6 +25419,10 @@ class MeshBoardViewComponent {
             }
             // Initialize time filter variables if enabled with stored selection
             this.initializeTimeFilterVariables();
+            // Mark initial load as complete so the effect can handle subsequent board switches
+            this.initialLoadComplete = true;
+            // Update breadcrumb with MeshBoard name
+            this.updateBreadcrumb();
             this._isInitialized.set(true);
         }
         catch (err) {
@@ -23142,6 +25452,7 @@ class MeshBoardViewComponent {
     }
     ngOnDestroy() {
         this.closeConfigDialog();
+        this.navigationSubscription?.unsubscribe();
     }
     /**
      * Preloads data for all widgets to improve initial rendering performance.
@@ -23162,29 +25473,65 @@ class MeshBoardViewComponent {
         await Promise.all(promises);
     }
     /**
-     * Initializes time filter variables based on the stored selection.
-     * Called after loading a MeshBoard to ensure time filter variables are set.
+     * Initializes time filter variables based on URL query params or stored selection.
+     * URL params take precedence over stored selection to support page reload.
      */
     initializeTimeFilterVariables() {
         const timeFilter = this.stateService.getTimeFilterConfig();
-        if (!timeFilter?.enabled || !timeFilter.selection) {
+        if (!timeFilter?.enabled) {
             return;
         }
-        // Convert stored selection to shared-ui format for TimeRangeUtils
-        const sharedSelection = {
-            ...timeFilter.selection,
-            customFrom: timeFilter.selection.customFrom ? new Date(timeFilter.selection.customFrom) : undefined,
-            customTo: timeFilter.selection.customTo ? new Date(timeFilter.selection.customTo) : undefined
-        };
-        // Calculate the current time range from the selection
-        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection);
+        // Check URL query params first (takes precedence over stored selection)
+        const urlSelection = this.readTimeFilterFromUrl();
+        if (urlSelection) {
+            // Signal the URL selection so the picker picks it up
+            this._urlTimeSelection.set(urlSelection);
+            // Update state so widgets use the URL-derived time range
+            const sharedSelection = this.toSharedSelection(urlSelection);
+            const showTime = timeFilter.pickerConfig?.showTime ?? false;
+            const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
+            if (range) {
+                const rangeISO = TimeRangeUtils.toISO(range);
+                this.stateService.updateTimeFilterSelection(urlSelection, rangeISO.from, rangeISO.to);
+            }
+            return;
+        }
+        // Fall back to stored selection, then default selection
+        const selection = timeFilter.selection ?? timeFilter.defaultSelection;
+        if (!selection) {
+            return;
+        }
+        // If using defaultSelection (no stored selection yet), apply it as the active selection
+        if (!timeFilter.selection && timeFilter.defaultSelection) {
+            this._urlTimeSelection.set(selection);
+            const sharedSelection = this.toSharedSelection(selection);
+            const showTime = timeFilter.pickerConfig?.showTime ?? false;
+            const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
+            if (range) {
+                const rangeISO = TimeRangeUtils.toISO(range);
+                this.stateService.updateTimeFilterSelection(selection, rangeISO.from, rangeISO.to);
+            }
+            return;
+        }
+        const sharedSelection = this.toSharedSelection(selection);
+        const showTime = timeFilter.pickerConfig?.showTime ?? false;
+        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
         if (!range) {
             return;
         }
-        // Convert to ISO strings and set the variables
         const rangeISO = TimeRangeUtils.toISO(range);
         this.stateService.setTimeFilterVariables(rangeISO.from, rangeISO.to);
     }
+    /**
+     * Converts a TimeRangeSelection to a SharedTimeRangeSelection.
+     */
+    toSharedSelection(selection) {
+        return {
+            ...selection,
+            customFrom: selection.customFrom ? new Date(selection.customFrom) : undefined,
+            customTo: selection.customTo ? new Date(selection.customTo) : undefined
+        };
+    }
     /**
      * Gets the component type for a widget based on its type.
      */
@@ -23359,7 +25706,7 @@ class MeshBoardViewComponent {
     }
     /**
      * Handles time selection change from the time range picker.
-     * Updates the time filter variables and persists the selection.
+     * Updates the time filter variables, persists the selection, and syncs to URL query params.
      */
     onTimeSelectionChange(sharedSelection) {
         // Convert shared-ui selection to our model
@@ -23368,6 +25715,9 @@ class MeshBoardViewComponent {
             year: sharedSelection.year,
             quarter: sharedSelection.quarter,
             month: sharedSelection.month,
+            day: sharedSelection.day,
+            hourFrom: sharedSelection.hourFrom,
+            hourTo: sharedSelection.hourTo,
             relativeValue: sharedSelection.relativeValue,
             relativeUnit: sharedSelection.relativeUnit,
             customFrom: sharedSelection.customFrom?.toISOString(),
@@ -23380,13 +25730,127 @@ class MeshBoardViewComponent {
             return;
         }
         // Calculate the time range from the selection
-        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection);
+        const showTime = this.stateService.getTimeFilterConfig()?.pickerConfig?.showTime ?? false;
+        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
         if (!range)
             return;
         // Convert to ISO strings
         const rangeISO = TimeRangeUtils.toISO(range);
         // Update state with new selection and time range values
         this.stateService.updateTimeFilterSelection(selection, rangeISO.from, rangeISO.to);
+        // Sync selection to URL query parameters
+        this.writeTimeFilterToUrl(selection);
+    }
+    /**
+     * Resets the time filter to the configured default selection.
+     * Clears the stored selection and applies the default.
+     */
+    resetTimeFilterToDefault() {
+        const config = this.timeFilterConfig();
+        if (!config?.defaultSelection)
+            return;
+        const defaultSel = config.defaultSelection;
+        const sharedSelection = this.toSharedSelection(defaultSel);
+        const showTime = config.pickerConfig?.showTime ?? false;
+        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
+        if (!range)
+            return;
+        const rangeISO = TimeRangeUtils.toISO(range);
+        this.stateService.updateTimeFilterSelection(defaultSel, rangeISO.from, rangeISO.to);
+        this._urlTimeSelection.set(defaultSel);
+        this.writeTimeFilterToUrl(defaultSel);
+    }
+    /**
+     * Writes the time filter selection to URL query parameters.
+     * Only writes params relevant to the current type, clears all others.
+     */
+    writeTimeFilterToUrl(selection) {
+        // Start with all params cleared
+        const cleanParams = {
+            tf_type: selection.type,
+            tf_year: null,
+            tf_quarter: null,
+            tf_month: null,
+            tf_day: null,
+            tf_hf: null,
+            tf_ht: null,
+            tf_rv: null,
+            tf_ru: null,
+            tf_from: null,
+            tf_to: null
+        };
+        // Set only the params relevant to the current type
+        switch (selection.type) {
+            case 'year':
+                if (selection.year != null)
+                    cleanParams['tf_year'] = selection.year.toString();
+                break;
+            case 'quarter':
+                if (selection.year != null)
+                    cleanParams['tf_year'] = selection.year.toString();
+                if (selection.quarter != null)
+                    cleanParams['tf_quarter'] = selection.quarter.toString();
+                break;
+            case 'month':
+                if (selection.year != null)
+                    cleanParams['tf_year'] = selection.year.toString();
+                if (selection.month != null)
+                    cleanParams['tf_month'] = selection.month.toString();
+                break;
+            case 'day':
+                if (selection.year != null)
+                    cleanParams['tf_year'] = selection.year.toString();
+                if (selection.month != null)
+                    cleanParams['tf_month'] = selection.month.toString();
+                if (selection.day != null)
+                    cleanParams['tf_day'] = selection.day.toString();
+                if (selection.hourFrom != null)
+                    cleanParams['tf_hf'] = selection.hourFrom.toString();
+                if (selection.hourTo != null)
+                    cleanParams['tf_ht'] = selection.hourTo.toString();
+                break;
+            case 'relative':
+                if (selection.relativeValue != null)
+                    cleanParams['tf_rv'] = selection.relativeValue.toString();
+                if (selection.relativeUnit)
+                    cleanParams['tf_ru'] = selection.relativeUnit;
+                break;
+            case 'custom':
+                if (selection.customFrom)
+                    cleanParams['tf_from'] = selection.customFrom;
+                if (selection.customTo)
+                    cleanParams['tf_to'] = selection.customTo;
+                break;
+        }
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: cleanParams,
+            queryParamsHandling: 'merge',
+            replaceUrl: true
+        });
+    }
+    /**
+     * Reads the time filter selection from URL query parameters.
+     * Returns null if no time filter params are present.
+     */
+    readTimeFilterFromUrl() {
+        const params = this.route.snapshot.queryParamMap;
+        const type = params.get('tf_type');
+        if (!type)
+            return null;
+        return {
+            type: type,
+            year: params.has('tf_year') ? Number(params.get('tf_year')) : undefined,
+            quarter: params.has('tf_quarter') ? Number(params.get('tf_quarter')) : undefined,
+            month: params.has('tf_month') ? Number(params.get('tf_month')) : undefined,
+            day: params.has('tf_day') ? Number(params.get('tf_day')) : undefined,
+            hourFrom: params.has('tf_hf') ? Number(params.get('tf_hf')) : undefined,
+            hourTo: params.has('tf_ht') ? Number(params.get('tf_ht')) : undefined,
+            relativeValue: params.has('tf_rv') ? Number(params.get('tf_rv')) : undefined,
+            relativeUnit: params.get('tf_ru') ?? undefined,
+            customFrom: params.get('tf_from') ?? undefined,
+            customTo: params.get('tf_to') ?? undefined
+        };
     }
     /**
      * Compares two TimeRangeSelection objects for equality.
@@ -23396,6 +25860,9 @@ class MeshBoardViewComponent {
             a.year === b.year &&
             a.quarter === b.quarter &&
             a.month === b.month &&
+            a.day === b.day &&
+            a.hourFrom === b.hourFrom &&
+            a.hourTo === b.hourTo &&
             a.relativeValue === b.relativeValue &&
             a.relativeUnit === b.relativeUnit &&
             a.customFrom === b.customFrom &&
@@ -23567,7 +26034,7 @@ class MeshBoardViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MeshBoardViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MeshBoardViewComponent, isStandalone: true, selector: "mm-meshboard-view", providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent }], hostDirectives: [{ directive: i1$7.UnsavedChangesDirective }], ngImport: i0, template: "<div class=\"meshboard-view\">\n  @if (isLoading()) {\n    <div class=\"loading-container\">\n      <div class=\"k-loading-mask\">\n        <span class=\"k-loading-text\">Loading MeshBoard...</span>\n        <div class=\"k-loading-image\"></div>\n        <div class=\"k-loading-color\"></div>\n      </div>\n    </div>\n  } @else if (isModelAvailable() === false) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Available</h2>\n        <p>The MeshBoard feature requires the CK model 'System.UI' version 1.0.1 or higher.</p>\n        <p>Please install the required model in your tenant to use this feature.</p>\n      </div>\n    </div>\n  } @else if (notFoundError()) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Found</h2>\n        <p>{{ notFoundError() }}</p>\n        <p>To create a MeshBoard with a Well-Known Name:</p>\n        <ol>\n          <li>Go to the <a [routerLink]=\"meshBoardPageLink()\">MeshBoard</a> page</li>\n          <li>Open Settings</li>\n          <li>Set the \"Well-Known Name\" field</li>\n          <li>Save the MeshBoard</li>\n        </ol>\n      </div>\n    </div>\n  } @else if (isInitialized()) {\n    <!-- Toolbar -->\n    <div class=\"meshboard-toolbar\">\n      <div class=\"toolbar-left\">\n        <h2 class=\"meshboard-title\">{{ config().name }}</h2>\n        @if (config().description) {\n          <span class=\"meshboard-description\">{{ config().description }}</span>\n        }\n      </div>\n\n      <!-- Time Filter (center) -->\n      @if (isTimeFilterEnabled()) {\n        <div class=\"toolbar-center\">\n          <mm-time-range-picker\n            [config]=\"timeFilterConfig()?.pickerConfig ?? {}\"\n            [initialSelection]=\"initialTimeSelection()\"\n            (rangeChange)=\"onTimeRangeChange($event)\"\n            (selectionChange)=\"onTimeSelectionChange($event)\">\n          </mm-time-range-picker>\n        </div>\n      }\n\n      <div class=\"toolbar-right\">\n        @if (!isReadonly()) {\n          <!-- Manager Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gridLayoutIcon\"\n            (click)=\"openManager()\"\n            title=\"Manage MeshBoards\"\n            fillMode=\"flat\">\n          </button>\n\n          <!-- Settings Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gearIcon\"\n            (click)=\"openSettings()\"\n            title=\"MeshBoard Settings\"\n            fillMode=\"flat\">\n          </button>\n        }\n\n        <!-- Refresh Button (icon only) -->\n        <button\n          kendoButton\n          [svgIcon]=\"arrowRotateCwIcon\"\n          (click)=\"refresh()\"\n          title=\"Refresh All Widgets\"\n          fillMode=\"flat\">\n        </button>\n\n        @if (!isReadonly()) {\n          <!-- Edit Mode Toggle (icon only) -->\n          @if (!isEditMode()) {\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"toggleEditMode()\"\n              title=\"Enter Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          } @else {\n            <button\n              kendoButton\n              [svgIcon]=\"xIcon\"\n              (click)=\"cancelEdit()\"\n              title=\"Cancel Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          }\n\n          <!-- Add Widget Button (with text) -->\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            title=\"Add Widget\"\n            fillMode=\"flat\"\n            themeColor=\"primary\">\n            Add Widget\n          </button>\n\n          <!-- Save Button (with text) -->\n          @if (canSave()) {\n            <button\n              kendoButton\n              [svgIcon]=\"saveIcon\"\n              (click)=\"save()\"\n              [disabled]=\"isSaving()\"\n              title=\"Save MeshBoard\"\n              fillMode=\"solid\"\n              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- MeshBoard Grid -->\n    @if (hasWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"config().columns\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [resizable]=\"isEditMode()\"\n        [reorderable]=\"isEditMode()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (widget of config().widgets; track trackByWidgetId($index, widget)) {\n          <kendo-tilelayout-item\n            [col]=\"widget.col\"\n            [row]=\"widget.row\"\n            [colSpan]=\"widget.colSpan\"\n            [rowSpan]=\"widget.rowSpan\">\n            <kendo-tilelayout-item-header>\n              <div class=\"widget-header\" [class.unconfigured]=\"isWidgetUnconfigured(widget)\">\n                <span class=\"widget-title\">{{ widget.title }}</span>\n                @if (isWidgetUnconfigured(widget) && !isEditMode()) {\n                  <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                }\n                @if (isEditMode()) {\n                  <div class=\"widget-actions\" (pointerdown)=\"$event.stopPropagation()\">\n                    @if (supportsConfiguration(widget)) {\n                      <button\n                        kendoButton\n                        [svgIcon]=\"linkIcon\"\n                        (click)=\"openWidgetConfig(widget)\"\n                        fillMode=\"flat\"\n                        size=\"small\"\n                        class=\"config-widget-btn\"\n                        [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                        [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                      </button>\n                    }\n                    <button\n                      kendoButton\n                      [svgIcon]=\"gearIcon\"\n                      (click)=\"openEditWidgetDialog(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"edit-widget-btn\"\n                      title=\"Edit position\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\">\n                    </button>\n                  </div>\n                }\n              </div>\n            </kendo-tilelayout-item-header>\n            <kendo-tilelayout-item-body>\n              @if (getWidgetComponentType(widget.type); as componentType) {\n                <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n              } @else {\n                <div class=\"widget-error\">\n                  <p>Unknown widget type: {{ widget.type }}</p>\n                </div>\n              }\n            </kendo-tilelayout-item-body>\n          </kendo-tilelayout-item>\n        }\n      </kendo-tilelayout>\n    } @else {\n      <div class=\"empty-state\">\n        <div class=\"empty-state-content\">\n          <kendo-svg-icon [icon]=\"plusIcon\" size=\"xlarge\"></kendo-svg-icon>\n          <h3>No Widgets</h3>\n          <p>Get started by adding widgets to your MeshBoard.</p>\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            themeColor=\"primary\">\n            Add Your First Widget\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Edit Widget Dialog -->\n    @if (showEditWidgetDialog && editingWidget) {\n      <mm-edit-widget-dialog\n        [widget]=\"editingWidget\"\n        [widgets]=\"config().widgets\"\n        [maxColumns]=\"config().columns\"\n        [gridService]=\"gridService\"\n        (save)=\"onEditWidgetSave($event)\"\n        (cancelled)=\"closeEditWidgetDialog()\">\n      </mm-edit-widget-dialog>\n    }\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;width:100%}.meshboard-view{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background-color:var(--kendo-color-surface, #f5f5f5)}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.model-unavailable{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:2rem;overflow:hidden;box-sizing:border-box}.model-unavailable .message-card{text-align:center;max-width:500px;padding:2rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:8px;overflow:hidden}.model-unavailable .message-card kendo-svg-icon{color:var(--kendo-color-warning, #ff9800);margin-bottom:1rem}.model-unavailable .message-card h2{margin:1rem 0;color:var(--kendo-color-on-app-surface, #424242)}.model-unavailable .message-card p{margin:.5rem 0;color:var(--kendo-color-subtle, #757575);line-height:1.5}.model-unavailable .message-card ol{text-align:left;margin:1rem 0;padding-left:1.5rem;color:var(--kendo-color-subtle, #757575);line-height:1.8}.model-unavailable .message-card ol li{margin:.25rem 0}.model-unavailable .message-card ol a{color:var(--kendo-color-primary, #3f51b5);text-decoration:none}.model-unavailable .message-card ol a:hover{text-decoration:underline}.meshboard-toolbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--kendo-color-surface-alt, white);border-bottom:1px solid var(--kendo-color-border, #e0e0e0);gap:1rem;flex-shrink:0}.meshboard-toolbar .toolbar-left{display:flex;align-items:baseline;gap:1rem;flex:1;min-width:0}.meshboard-toolbar .toolbar-left .meshboard-title{margin:0;font-size:1.5rem;font-weight:500;color:var(--kendo-color-on-app-surface, #212121);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-left .meshboard-description{color:var(--kendo-color-subtle, #757575);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-center{display:flex;justify-content:center;align-items:center;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-right{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.empty-state{display:flex;align-items:flex-start;justify-content:center;height:calc(100% - 80px);width:100%;padding-top:4rem}.empty-state .empty-state-content{text-align:center;padding:2rem}.empty-state .empty-state-content kendo-svg-icon{color:var(--kendo-color-subtle, #9e9e9e);margin-bottom:1rem}.empty-state .empty-state-content h3{margin:1rem 0 .5rem;color:var(--kendo-color-on-app-surface, #424242);font-size:1.25rem;font-weight:500}.empty-state .empty-state-content p{margin:0 0 1.5rem;color:var(--kendo-color-subtle, #757575)}kendo-tilelayout{padding:1.5rem;overflow:auto;flex:1;min-height:0}.widget-header{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.5rem}.widget-header.unconfigured{background-color:#ff98001a}.widget-header .widget-title{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-header .unconfigured-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:var(--kendo-color-warning, #ff9800);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.widget-header .widget-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.widget-header .config-widget-btn,.widget-header .edit-widget-btn,.widget-header .remove-widget-btn{opacity:.6;transition:opacity .2s}.widget-header .config-widget-btn:hover,.widget-header .edit-widget-btn:hover,.widget-header .remove-widget-btn:hover{opacity:1}.widget-header .config-widget-btn.needs-config{color:var(--kendo-color-warning, #ff9800);opacity:1}.widget-header .remove-widget-btn{color:var(--kendo-color-error, #f44336)}.widget-error{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;color:var(--kendo-color-error, #f44336);text-align:center}.meshboard-view.edit-mode kendo-tilelayout-item:hover{box-shadow:0 0 0 2px var(--kendo-color-primary, #3f51b5)}@media(max-width:768px){.meshboard-toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.meshboard-toolbar .toolbar-left{flex-direction:column;align-items:flex-start;gap:.25rem}.meshboard-toolbar .toolbar-right{flex-wrap:wrap;justify-content:flex-end}kendo-tilelayout{padding:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TileLayoutModule }, { kind: "component", type: i4$1.TileLayoutComponent, selector: "kendo-tilelayout", inputs: ["columns", "columnWidth", "gap", "reorderable", "resizable", "rowHeight", "autoFlow", "navigable"], outputs: ["reorder", "resize"] }, { kind: "component", type: i4$1.TileLayoutItemBodyComponent, selector: "kendo-tilelayout-item-body" }, { kind: "component", type: i4$1.TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: ["title", "rowSpan", "colSpan", "order", "col", "row", "reorderable", "resizable"] }, { kind: "component", type: i4$1.TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i2$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: EditWidgetDialogComponent, selector: "mm-edit-widget-dialog", inputs: ["widget", "widgets", "maxColumns", "gridService"], outputs: ["save", "cancelled"] }, { kind: "component", type: TimeRangePickerComponent, selector: "mm-time-range-picker", inputs: ["config", "labels", "initialSelection"], outputs: ["rangeChange", "rangeChangeISO", "selectionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MeshBoardViewComponent, isStandalone: true, selector: "mm-meshboard-view", providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent }], hostDirectives: [{ directive: i1$7.UnsavedChangesDirective }], ngImport: i0, template: "<div class=\"meshboard-view\">\n  @if (isLoading()) {\n    <div class=\"loading-container\">\n      <div class=\"k-loading-mask\">\n        <span class=\"k-loading-text\">Loading MeshBoard...</span>\n        <div class=\"k-loading-image\"></div>\n        <div class=\"k-loading-color\"></div>\n      </div>\n    </div>\n  } @else if (isModelAvailable() === false) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Available</h2>\n        <p>The MeshBoard feature requires the CK model 'System.UI' version 1.0.1 or higher.</p>\n        <p>Please install the required model in your tenant to use this feature.</p>\n      </div>\n    </div>\n  } @else if (notFoundError()) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Found</h2>\n        <p>{{ notFoundError() }}</p>\n        <p>To create a MeshBoard with a Well-Known Name:</p>\n        <ol>\n          <li>Go to the <a [routerLink]=\"meshBoardPageLink()\">MeshBoard</a> page</li>\n          <li>Open Settings</li>\n          <li>Set the \"Well-Known Name\" field</li>\n          <li>Save the MeshBoard</li>\n        </ol>\n      </div>\n    </div>\n  } @else if (isInitialized()) {\n    <!-- Toolbar -->\n    <div class=\"meshboard-toolbar\">\n      <div class=\"toolbar-left\">\n        <h2 class=\"meshboard-title\">{{ config().name }}</h2>\n        @if (config().description) {\n          <span class=\"meshboard-description\">{{ config().description }}</span>\n        }\n      </div>\n\n      <!-- Time Filter (center) -->\n      @if (isTimeFilterEnabled()) {\n        <div class=\"toolbar-center\">\n          <mm-time-range-picker\n            [config]=\"timeFilterConfig()?.pickerConfig ?? {}\"\n            [initialSelection]=\"initialTimeSelection()\"\n            (rangeChange)=\"onTimeRangeChange($event)\"\n            (selectionChange)=\"onTimeSelectionChange($event)\">\n          </mm-time-range-picker>\n          @if (canResetTimeFilter()) {\n            <button\n              kendoButton\n              [svgIcon]=\"undoIcon\"\n              (click)=\"resetTimeFilterToDefault()\"\n              title=\"Reset to default time filter\"\n              fillMode=\"flat\"\n              size=\"small\">\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"toolbar-right\">\n        @if (!isReadonly()) {\n          <!-- Manager Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gridLayoutIcon\"\n            (click)=\"openManager()\"\n            title=\"Manage MeshBoards\"\n            fillMode=\"flat\">\n          </button>\n\n          <!-- Settings Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gearIcon\"\n            (click)=\"openSettings()\"\n            title=\"MeshBoard Settings\"\n            fillMode=\"flat\">\n          </button>\n        }\n\n        <!-- Refresh Button (icon only) -->\n        <button\n          kendoButton\n          [svgIcon]=\"arrowRotateCwIcon\"\n          (click)=\"refresh()\"\n          title=\"Refresh All Widgets\"\n          fillMode=\"flat\">\n        </button>\n\n        @if (!isReadonly()) {\n          <!-- Edit Mode Toggle (icon only) -->\n          @if (!isEditMode()) {\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"toggleEditMode()\"\n              title=\"Enter Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          } @else {\n            <button\n              kendoButton\n              [svgIcon]=\"xIcon\"\n              (click)=\"cancelEdit()\"\n              title=\"Cancel Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          }\n\n          <!-- Add Widget Button (with text) -->\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            title=\"Add Widget\"\n            fillMode=\"flat\"\n            themeColor=\"primary\">\n            Add Widget\n          </button>\n\n          <!-- Save Button (with text) -->\n          @if (canSave()) {\n            <button\n              kendoButton\n              [svgIcon]=\"saveIcon\"\n              (click)=\"save()\"\n              [disabled]=\"isSaving()\"\n              title=\"Save MeshBoard\"\n              fillMode=\"solid\"\n              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- MeshBoard Grid -->\n    @if (hasWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"config().columns\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [resizable]=\"isEditMode()\"\n        [reorderable]=\"isEditMode()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (widget of config().widgets; track trackByWidgetId($index, widget)) {\n          <kendo-tilelayout-item\n            [col]=\"widget.col\"\n            [row]=\"widget.row\"\n            [colSpan]=\"widget.colSpan\"\n            [rowSpan]=\"widget.rowSpan\">\n            <kendo-tilelayout-item-header>\n              <div class=\"widget-header\" [class.unconfigured]=\"isWidgetUnconfigured(widget)\">\n                <span class=\"widget-title\">{{ widget.title }}</span>\n                @if (isWidgetUnconfigured(widget) && !isEditMode()) {\n                  <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                }\n                @if (isEditMode()) {\n                  <div class=\"widget-actions\" (pointerdown)=\"$event.stopPropagation()\">\n                    @if (supportsConfiguration(widget)) {\n                      <button\n                        kendoButton\n                        [svgIcon]=\"linkIcon\"\n                        (click)=\"openWidgetConfig(widget)\"\n                        fillMode=\"flat\"\n                        size=\"small\"\n                        class=\"config-widget-btn\"\n                        [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                        [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                      </button>\n                    }\n                    <button\n                      kendoButton\n                      [svgIcon]=\"gearIcon\"\n                      (click)=\"openEditWidgetDialog(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"edit-widget-btn\"\n                      title=\"Edit position\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\">\n                    </button>\n                  </div>\n                }\n              </div>\n            </kendo-tilelayout-item-header>\n            <kendo-tilelayout-item-body>\n              @if (getWidgetComponentType(widget.type); as componentType) {\n                <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n              } @else {\n                <div class=\"widget-error\">\n                  <p>Unknown widget type: {{ widget.type }}</p>\n                </div>\n              }\n            </kendo-tilelayout-item-body>\n          </kendo-tilelayout-item>\n        }\n      </kendo-tilelayout>\n    } @else {\n      <div class=\"empty-state\">\n        <div class=\"empty-state-content\">\n          <kendo-svg-icon [icon]=\"plusIcon\" size=\"xlarge\"></kendo-svg-icon>\n          <h3>No Widgets</h3>\n          <p>Get started by adding widgets to your MeshBoard.</p>\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            themeColor=\"primary\">\n            Add Your First Widget\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Edit Widget Dialog -->\n    @if (showEditWidgetDialog && editingWidget) {\n      <mm-edit-widget-dialog\n        [widget]=\"editingWidget\"\n        [widgets]=\"config().widgets\"\n        [maxColumns]=\"config().columns\"\n        [gridService]=\"gridService\"\n        (save)=\"onEditWidgetSave($event)\"\n        (cancelled)=\"closeEditWidgetDialog()\">\n      </mm-edit-widget-dialog>\n    }\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;width:100%}.meshboard-view{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background-color:var(--kendo-color-surface, #f5f5f5)}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.model-unavailable{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:2rem;overflow:hidden;box-sizing:border-box}.model-unavailable .message-card{text-align:center;max-width:500px;padding:2rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:8px;overflow:hidden}.model-unavailable .message-card kendo-svg-icon{color:var(--kendo-color-warning, #ff9800);margin-bottom:1rem}.model-unavailable .message-card h2{margin:1rem 0;color:var(--kendo-color-on-app-surface, #424242)}.model-unavailable .message-card p{margin:.5rem 0;color:var(--kendo-color-subtle, #757575);line-height:1.5}.model-unavailable .message-card ol{text-align:left;margin:1rem 0;padding-left:1.5rem;color:var(--kendo-color-subtle, #757575);line-height:1.8}.model-unavailable .message-card ol li{margin:.25rem 0}.model-unavailable .message-card ol a{color:var(--kendo-color-primary, #3f51b5);text-decoration:none}.model-unavailable .message-card ol a:hover{text-decoration:underline}.meshboard-toolbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--kendo-color-surface-alt, white);border-bottom:1px solid var(--kendo-color-border, #e0e0e0);gap:1rem;flex-shrink:0}.meshboard-toolbar .toolbar-left{display:flex;align-items:baseline;gap:1rem;flex:1;min-width:0}.meshboard-toolbar .toolbar-left .meshboard-title{margin:0;font-size:1.5rem;font-weight:500;color:var(--kendo-color-on-app-surface, #212121);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-left .meshboard-description{color:var(--kendo-color-subtle, #757575);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-center{display:flex;justify-content:center;align-items:center;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-right{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.empty-state{display:flex;align-items:flex-start;justify-content:center;height:calc(100% - 80px);width:100%;padding-top:4rem}.empty-state .empty-state-content{text-align:center;padding:2rem}.empty-state .empty-state-content kendo-svg-icon{color:var(--kendo-color-subtle, #9e9e9e);margin-bottom:1rem}.empty-state .empty-state-content h3{margin:1rem 0 .5rem;color:var(--kendo-color-on-app-surface, #424242);font-size:1.25rem;font-weight:500}.empty-state .empty-state-content p{margin:0 0 1.5rem;color:var(--kendo-color-subtle, #757575)}kendo-tilelayout{padding:1.5rem;overflow:auto;flex:1;min-height:0}.widget-header{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.5rem}.widget-header.unconfigured{background-color:#ff98001a}.widget-header .widget-title{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-header .unconfigured-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:var(--kendo-color-warning, #ff9800);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.widget-header .widget-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.widget-header .config-widget-btn,.widget-header .edit-widget-btn,.widget-header .remove-widget-btn{opacity:.6;transition:opacity .2s}.widget-header .config-widget-btn:hover,.widget-header .edit-widget-btn:hover,.widget-header .remove-widget-btn:hover{opacity:1}.widget-header .config-widget-btn.needs-config{color:var(--kendo-color-warning, #ff9800);opacity:1}.widget-header .remove-widget-btn{color:var(--kendo-color-error, #f44336)}.widget-error{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;color:var(--kendo-color-error, #f44336);text-align:center}.meshboard-view.edit-mode kendo-tilelayout-item:hover{box-shadow:0 0 0 2px var(--kendo-color-primary, #3f51b5)}@media(max-width:768px){.meshboard-toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.meshboard-toolbar .toolbar-left{flex-direction:column;align-items:flex-start;gap:.25rem}.meshboard-toolbar .toolbar-right{flex-wrap:wrap;justify-content:flex-end}kendo-tilelayout{padding:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TileLayoutModule }, { kind: "component", type: i4$1.TileLayoutComponent, selector: "kendo-tilelayout", inputs: ["columns", "columnWidth", "gap", "reorderable", "resizable", "rowHeight", "autoFlow", "navigable"], outputs: ["reorder", "resize"] }, { kind: "component", type: i4$1.TileLayoutItemBodyComponent, selector: "kendo-tilelayout-item-body" }, { kind: "component", type: i4$1.TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: ["title", "rowSpan", "colSpan", "order", "col", "row", "reorderable", "resizable"] }, { kind: "component", type: i4$1.TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i2$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: EditWidgetDialogComponent, selector: "mm-edit-widget-dialog", inputs: ["widget", "widgets", "maxColumns", "gridService"], outputs: ["save", "cancelled"] }, { kind: "component", type: TimeRangePickerComponent, selector: "mm-time-range-picker", inputs: ["config", "labels", "initialSelection"], outputs: ["rangeChange", "rangeChangeISO", "selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MeshBoardViewComponent, decorators: [{
             type: Component,
@@ -23580,7 +26047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SVGIconModule,
                         EditWidgetDialogComponent,
                         TimeRangePickerComponent
-                    ], hostDirectives: [UnsavedChangesDirective], providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent }], template: "<div class=\"meshboard-view\">\n  @if (isLoading()) {\n    <div class=\"loading-container\">\n      <div class=\"k-loading-mask\">\n        <span class=\"k-loading-text\">Loading MeshBoard...</span>\n        <div class=\"k-loading-image\"></div>\n        <div class=\"k-loading-color\"></div>\n      </div>\n    </div>\n  } @else if (isModelAvailable() === false) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Available</h2>\n        <p>The MeshBoard feature requires the CK model 'System.UI' version 1.0.1 or higher.</p>\n        <p>Please install the required model in your tenant to use this feature.</p>\n      </div>\n    </div>\n  } @else if (notFoundError()) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Found</h2>\n        <p>{{ notFoundError() }}</p>\n        <p>To create a MeshBoard with a Well-Known Name:</p>\n        <ol>\n          <li>Go to the <a [routerLink]=\"meshBoardPageLink()\">MeshBoard</a> page</li>\n          <li>Open Settings</li>\n          <li>Set the \"Well-Known Name\" field</li>\n          <li>Save the MeshBoard</li>\n        </ol>\n      </div>\n    </div>\n  } @else if (isInitialized()) {\n    <!-- Toolbar -->\n    <div class=\"meshboard-toolbar\">\n      <div class=\"toolbar-left\">\n        <h2 class=\"meshboard-title\">{{ config().name }}</h2>\n        @if (config().description) {\n          <span class=\"meshboard-description\">{{ config().description }}</span>\n        }\n      </div>\n\n      <!-- Time Filter (center) -->\n      @if (isTimeFilterEnabled()) {\n        <div class=\"toolbar-center\">\n          <mm-time-range-picker\n            [config]=\"timeFilterConfig()?.pickerConfig ?? {}\"\n            [initialSelection]=\"initialTimeSelection()\"\n            (rangeChange)=\"onTimeRangeChange($event)\"\n            (selectionChange)=\"onTimeSelectionChange($event)\">\n          </mm-time-range-picker>\n        </div>\n      }\n\n      <div class=\"toolbar-right\">\n        @if (!isReadonly()) {\n          <!-- Manager Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gridLayoutIcon\"\n            (click)=\"openManager()\"\n            title=\"Manage MeshBoards\"\n            fillMode=\"flat\">\n          </button>\n\n          <!-- Settings Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gearIcon\"\n            (click)=\"openSettings()\"\n            title=\"MeshBoard Settings\"\n            fillMode=\"flat\">\n          </button>\n        }\n\n        <!-- Refresh Button (icon only) -->\n        <button\n          kendoButton\n          [svgIcon]=\"arrowRotateCwIcon\"\n          (click)=\"refresh()\"\n          title=\"Refresh All Widgets\"\n          fillMode=\"flat\">\n        </button>\n\n        @if (!isReadonly()) {\n          <!-- Edit Mode Toggle (icon only) -->\n          @if (!isEditMode()) {\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"toggleEditMode()\"\n              title=\"Enter Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          } @else {\n            <button\n              kendoButton\n              [svgIcon]=\"xIcon\"\n              (click)=\"cancelEdit()\"\n              title=\"Cancel Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          }\n\n          <!-- Add Widget Button (with text) -->\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            title=\"Add Widget\"\n            fillMode=\"flat\"\n            themeColor=\"primary\">\n            Add Widget\n          </button>\n\n          <!-- Save Button (with text) -->\n          @if (canSave()) {\n            <button\n              kendoButton\n              [svgIcon]=\"saveIcon\"\n              (click)=\"save()\"\n              [disabled]=\"isSaving()\"\n              title=\"Save MeshBoard\"\n              fillMode=\"solid\"\n              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- MeshBoard Grid -->\n    @if (hasWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"config().columns\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [resizable]=\"isEditMode()\"\n        [reorderable]=\"isEditMode()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (widget of config().widgets; track trackByWidgetId($index, widget)) {\n          <kendo-tilelayout-item\n            [col]=\"widget.col\"\n            [row]=\"widget.row\"\n            [colSpan]=\"widget.colSpan\"\n            [rowSpan]=\"widget.rowSpan\">\n            <kendo-tilelayout-item-header>\n              <div class=\"widget-header\" [class.unconfigured]=\"isWidgetUnconfigured(widget)\">\n                <span class=\"widget-title\">{{ widget.title }}</span>\n                @if (isWidgetUnconfigured(widget) && !isEditMode()) {\n                  <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                }\n                @if (isEditMode()) {\n                  <div class=\"widget-actions\" (pointerdown)=\"$event.stopPropagation()\">\n                    @if (supportsConfiguration(widget)) {\n                      <button\n                        kendoButton\n                        [svgIcon]=\"linkIcon\"\n                        (click)=\"openWidgetConfig(widget)\"\n                        fillMode=\"flat\"\n                        size=\"small\"\n                        class=\"config-widget-btn\"\n                        [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                        [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                      </button>\n                    }\n                    <button\n                      kendoButton\n                      [svgIcon]=\"gearIcon\"\n                      (click)=\"openEditWidgetDialog(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"edit-widget-btn\"\n                      title=\"Edit position\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\">\n                    </button>\n                  </div>\n                }\n              </div>\n            </kendo-tilelayout-item-header>\n            <kendo-tilelayout-item-body>\n              @if (getWidgetComponentType(widget.type); as componentType) {\n                <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n              } @else {\n                <div class=\"widget-error\">\n                  <p>Unknown widget type: {{ widget.type }}</p>\n                </div>\n              }\n            </kendo-tilelayout-item-body>\n          </kendo-tilelayout-item>\n        }\n      </kendo-tilelayout>\n    } @else {\n      <div class=\"empty-state\">\n        <div class=\"empty-state-content\">\n          <kendo-svg-icon [icon]=\"plusIcon\" size=\"xlarge\"></kendo-svg-icon>\n          <h3>No Widgets</h3>\n          <p>Get started by adding widgets to your MeshBoard.</p>\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            themeColor=\"primary\">\n            Add Your First Widget\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Edit Widget Dialog -->\n    @if (showEditWidgetDialog && editingWidget) {\n      <mm-edit-widget-dialog\n        [widget]=\"editingWidget\"\n        [widgets]=\"config().widgets\"\n        [maxColumns]=\"config().columns\"\n        [gridService]=\"gridService\"\n        (save)=\"onEditWidgetSave($event)\"\n        (cancelled)=\"closeEditWidgetDialog()\">\n      </mm-edit-widget-dialog>\n    }\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;width:100%}.meshboard-view{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background-color:var(--kendo-color-surface, #f5f5f5)}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.model-unavailable{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:2rem;overflow:hidden;box-sizing:border-box}.model-unavailable .message-card{text-align:center;max-width:500px;padding:2rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:8px;overflow:hidden}.model-unavailable .message-card kendo-svg-icon{color:var(--kendo-color-warning, #ff9800);margin-bottom:1rem}.model-unavailable .message-card h2{margin:1rem 0;color:var(--kendo-color-on-app-surface, #424242)}.model-unavailable .message-card p{margin:.5rem 0;color:var(--kendo-color-subtle, #757575);line-height:1.5}.model-unavailable .message-card ol{text-align:left;margin:1rem 0;padding-left:1.5rem;color:var(--kendo-color-subtle, #757575);line-height:1.8}.model-unavailable .message-card ol li{margin:.25rem 0}.model-unavailable .message-card ol a{color:var(--kendo-color-primary, #3f51b5);text-decoration:none}.model-unavailable .message-card ol a:hover{text-decoration:underline}.meshboard-toolbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--kendo-color-surface-alt, white);border-bottom:1px solid var(--kendo-color-border, #e0e0e0);gap:1rem;flex-shrink:0}.meshboard-toolbar .toolbar-left{display:flex;align-items:baseline;gap:1rem;flex:1;min-width:0}.meshboard-toolbar .toolbar-left .meshboard-title{margin:0;font-size:1.5rem;font-weight:500;color:var(--kendo-color-on-app-surface, #212121);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-left .meshboard-description{color:var(--kendo-color-subtle, #757575);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-center{display:flex;justify-content:center;align-items:center;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-right{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.empty-state{display:flex;align-items:flex-start;justify-content:center;height:calc(100% - 80px);width:100%;padding-top:4rem}.empty-state .empty-state-content{text-align:center;padding:2rem}.empty-state .empty-state-content kendo-svg-icon{color:var(--kendo-color-subtle, #9e9e9e);margin-bottom:1rem}.empty-state .empty-state-content h3{margin:1rem 0 .5rem;color:var(--kendo-color-on-app-surface, #424242);font-size:1.25rem;font-weight:500}.empty-state .empty-state-content p{margin:0 0 1.5rem;color:var(--kendo-color-subtle, #757575)}kendo-tilelayout{padding:1.5rem;overflow:auto;flex:1;min-height:0}.widget-header{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.5rem}.widget-header.unconfigured{background-color:#ff98001a}.widget-header .widget-title{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-header .unconfigured-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:var(--kendo-color-warning, #ff9800);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.widget-header .widget-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.widget-header .config-widget-btn,.widget-header .edit-widget-btn,.widget-header .remove-widget-btn{opacity:.6;transition:opacity .2s}.widget-header .config-widget-btn:hover,.widget-header .edit-widget-btn:hover,.widget-header .remove-widget-btn:hover{opacity:1}.widget-header .config-widget-btn.needs-config{color:var(--kendo-color-warning, #ff9800);opacity:1}.widget-header .remove-widget-btn{color:var(--kendo-color-error, #f44336)}.widget-error{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;color:var(--kendo-color-error, #f44336);text-align:center}.meshboard-view.edit-mode kendo-tilelayout-item:hover{box-shadow:0 0 0 2px var(--kendo-color-primary, #3f51b5)}@media(max-width:768px){.meshboard-toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.meshboard-toolbar .toolbar-left{flex-direction:column;align-items:flex-start;gap:.25rem}.meshboard-toolbar .toolbar-right{flex-wrap:wrap;justify-content:flex-end}kendo-tilelayout{padding:1rem}}\n"] }]
+                    ], hostDirectives: [UnsavedChangesDirective], providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent }], template: "<div class=\"meshboard-view\">\n  @if (isLoading()) {\n    <div class=\"loading-container\">\n      <div class=\"k-loading-mask\">\n        <span class=\"k-loading-text\">Loading MeshBoard...</span>\n        <div class=\"k-loading-image\"></div>\n        <div class=\"k-loading-color\"></div>\n      </div>\n    </div>\n  } @else if (isModelAvailable() === false) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Available</h2>\n        <p>The MeshBoard feature requires the CK model 'System.UI' version 1.0.1 or higher.</p>\n        <p>Please install the required model in your tenant to use this feature.</p>\n      </div>\n    </div>\n  } @else if (notFoundError()) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Found</h2>\n        <p>{{ notFoundError() }}</p>\n        <p>To create a MeshBoard with a Well-Known Name:</p>\n        <ol>\n          <li>Go to the <a [routerLink]=\"meshBoardPageLink()\">MeshBoard</a> page</li>\n          <li>Open Settings</li>\n          <li>Set the \"Well-Known Name\" field</li>\n          <li>Save the MeshBoard</li>\n        </ol>\n      </div>\n    </div>\n  } @else if (isInitialized()) {\n    <!-- Toolbar -->\n    <div class=\"meshboard-toolbar\">\n      <div class=\"toolbar-left\">\n        <h2 class=\"meshboard-title\">{{ config().name }}</h2>\n        @if (config().description) {\n          <span class=\"meshboard-description\">{{ config().description }}</span>\n        }\n      </div>\n\n      <!-- Time Filter (center) -->\n      @if (isTimeFilterEnabled()) {\n        <div class=\"toolbar-center\">\n          <mm-time-range-picker\n            [config]=\"timeFilterConfig()?.pickerConfig ?? {}\"\n            [initialSelection]=\"initialTimeSelection()\"\n            (rangeChange)=\"onTimeRangeChange($event)\"\n            (selectionChange)=\"onTimeSelectionChange($event)\">\n          </mm-time-range-picker>\n          @if (canResetTimeFilter()) {\n            <button\n              kendoButton\n              [svgIcon]=\"undoIcon\"\n              (click)=\"resetTimeFilterToDefault()\"\n              title=\"Reset to default time filter\"\n              fillMode=\"flat\"\n              size=\"small\">\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"toolbar-right\">\n        @if (!isReadonly()) {\n          <!-- Manager Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gridLayoutIcon\"\n            (click)=\"openManager()\"\n            title=\"Manage MeshBoards\"\n            fillMode=\"flat\">\n          </button>\n\n          <!-- Settings Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gearIcon\"\n            (click)=\"openSettings()\"\n            title=\"MeshBoard Settings\"\n            fillMode=\"flat\">\n          </button>\n        }\n\n        <!-- Refresh Button (icon only) -->\n        <button\n          kendoButton\n          [svgIcon]=\"arrowRotateCwIcon\"\n          (click)=\"refresh()\"\n          title=\"Refresh All Widgets\"\n          fillMode=\"flat\">\n        </button>\n\n        @if (!isReadonly()) {\n          <!-- Edit Mode Toggle (icon only) -->\n          @if (!isEditMode()) {\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"toggleEditMode()\"\n              title=\"Enter Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          } @else {\n            <button\n              kendoButton\n              [svgIcon]=\"xIcon\"\n              (click)=\"cancelEdit()\"\n              title=\"Cancel Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          }\n\n          <!-- Add Widget Button (with text) -->\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            title=\"Add Widget\"\n            fillMode=\"flat\"\n            themeColor=\"primary\">\n            Add Widget\n          </button>\n\n          <!-- Save Button (with text) -->\n          @if (canSave()) {\n            <button\n              kendoButton\n              [svgIcon]=\"saveIcon\"\n              (click)=\"save()\"\n              [disabled]=\"isSaving()\"\n              title=\"Save MeshBoard\"\n              fillMode=\"solid\"\n              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- MeshBoard Grid -->\n    @if (hasWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"config().columns\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [resizable]=\"isEditMode()\"\n        [reorderable]=\"isEditMode()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (widget of config().widgets; track trackByWidgetId($index, widget)) {\n          <kendo-tilelayout-item\n            [col]=\"widget.col\"\n            [row]=\"widget.row\"\n            [colSpan]=\"widget.colSpan\"\n            [rowSpan]=\"widget.rowSpan\">\n            <kendo-tilelayout-item-header>\n              <div class=\"widget-header\" [class.unconfigured]=\"isWidgetUnconfigured(widget)\">\n                <span class=\"widget-title\">{{ widget.title }}</span>\n                @if (isWidgetUnconfigured(widget) && !isEditMode()) {\n                  <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                }\n                @if (isEditMode()) {\n                  <div class=\"widget-actions\" (pointerdown)=\"$event.stopPropagation()\">\n                    @if (supportsConfiguration(widget)) {\n                      <button\n                        kendoButton\n                        [svgIcon]=\"linkIcon\"\n                        (click)=\"openWidgetConfig(widget)\"\n                        fillMode=\"flat\"\n                        size=\"small\"\n                        class=\"config-widget-btn\"\n                        [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                        [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                      </button>\n                    }\n                    <button\n                      kendoButton\n                      [svgIcon]=\"gearIcon\"\n                      (click)=\"openEditWidgetDialog(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"edit-widget-btn\"\n                      title=\"Edit position\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\">\n                    </button>\n                  </div>\n                }\n              </div>\n            </kendo-tilelayout-item-header>\n            <kendo-tilelayout-item-body>\n              @if (getWidgetComponentType(widget.type); as componentType) {\n                <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n              } @else {\n                <div class=\"widget-error\">\n                  <p>Unknown widget type: {{ widget.type }}</p>\n                </div>\n              }\n            </kendo-tilelayout-item-body>\n          </kendo-tilelayout-item>\n        }\n      </kendo-tilelayout>\n    } @else {\n      <div class=\"empty-state\">\n        <div class=\"empty-state-content\">\n          <kendo-svg-icon [icon]=\"plusIcon\" size=\"xlarge\"></kendo-svg-icon>\n          <h3>No Widgets</h3>\n          <p>Get started by adding widgets to your MeshBoard.</p>\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            themeColor=\"primary\">\n            Add Your First Widget\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Edit Widget Dialog -->\n    @if (showEditWidgetDialog && editingWidget) {\n      <mm-edit-widget-dialog\n        [widget]=\"editingWidget\"\n        [widgets]=\"config().widgets\"\n        [maxColumns]=\"config().columns\"\n        [gridService]=\"gridService\"\n        (save)=\"onEditWidgetSave($event)\"\n        (cancelled)=\"closeEditWidgetDialog()\">\n      </mm-edit-widget-dialog>\n    }\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;width:100%}.meshboard-view{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background-color:var(--kendo-color-surface, #f5f5f5)}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.model-unavailable{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:2rem;overflow:hidden;box-sizing:border-box}.model-unavailable .message-card{text-align:center;max-width:500px;padding:2rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:8px;overflow:hidden}.model-unavailable .message-card kendo-svg-icon{color:var(--kendo-color-warning, #ff9800);margin-bottom:1rem}.model-unavailable .message-card h2{margin:1rem 0;color:var(--kendo-color-on-app-surface, #424242)}.model-unavailable .message-card p{margin:.5rem 0;color:var(--kendo-color-subtle, #757575);line-height:1.5}.model-unavailable .message-card ol{text-align:left;margin:1rem 0;padding-left:1.5rem;color:var(--kendo-color-subtle, #757575);line-height:1.8}.model-unavailable .message-card ol li{margin:.25rem 0}.model-unavailable .message-card ol a{color:var(--kendo-color-primary, #3f51b5);text-decoration:none}.model-unavailable .message-card ol a:hover{text-decoration:underline}.meshboard-toolbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--kendo-color-surface-alt, white);border-bottom:1px solid var(--kendo-color-border, #e0e0e0);gap:1rem;flex-shrink:0}.meshboard-toolbar .toolbar-left{display:flex;align-items:baseline;gap:1rem;flex:1;min-width:0}.meshboard-toolbar .toolbar-left .meshboard-title{margin:0;font-size:1.5rem;font-weight:500;color:var(--kendo-color-on-app-surface, #212121);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-left .meshboard-description{color:var(--kendo-color-subtle, #757575);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-center{display:flex;justify-content:center;align-items:center;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-right{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.empty-state{display:flex;align-items:flex-start;justify-content:center;height:calc(100% - 80px);width:100%;padding-top:4rem}.empty-state .empty-state-content{text-align:center;padding:2rem}.empty-state .empty-state-content kendo-svg-icon{color:var(--kendo-color-subtle, #9e9e9e);margin-bottom:1rem}.empty-state .empty-state-content h3{margin:1rem 0 .5rem;color:var(--kendo-color-on-app-surface, #424242);font-size:1.25rem;font-weight:500}.empty-state .empty-state-content p{margin:0 0 1.5rem;color:var(--kendo-color-subtle, #757575)}kendo-tilelayout{padding:1.5rem;overflow:auto;flex:1;min-height:0}.widget-header{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.5rem}.widget-header.unconfigured{background-color:#ff98001a}.widget-header .widget-title{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-header .unconfigured-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:var(--kendo-color-warning, #ff9800);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.widget-header .widget-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.widget-header .config-widget-btn,.widget-header .edit-widget-btn,.widget-header .remove-widget-btn{opacity:.6;transition:opacity .2s}.widget-header .config-widget-btn:hover,.widget-header .edit-widget-btn:hover,.widget-header .remove-widget-btn:hover{opacity:1}.widget-header .config-widget-btn.needs-config{color:var(--kendo-color-warning, #ff9800);opacity:1}.widget-header .remove-widget-btn{color:var(--kendo-color-error, #f44336)}.widget-error{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;color:var(--kendo-color-error, #f44336);text-align:center}.meshboard-view.edit-mode kendo-tilelayout-item:hover{box-shadow:0 0 0 2px var(--kendo-color-primary, #3f51b5)}@media(max-width:768px){.meshboard-toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.meshboard-toolbar .toolbar-left{flex-direction:column;align-items:flex-start;gap:.25rem}.meshboard-toolbar .toolbar-right{flex-wrap:wrap;justify-content:flex-end}kendo-tilelayout{padding:1rem}}\n"] }]
         }], ctorParameters: () => [] });
 
 /*
@@ -23592,5 +26059,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddWidgetDialogComponent, AssociationsConfigDialogComponent, BarChartConfigDialogComponent, BarChartWidgetComponent, DashboardDataService, DashboardGridService, EditModeStateService, EditWidgetDialogComponent, EntityAssociationsWidgetComponent, EntityCardConfigDialogComponent, EntityCardWidgetComponent, EntityDetailDialogComponent, GaugeConfigDialogComponent, GaugeWidgetComponent, KpiConfigDialogComponent, KpiWidgetComponent, MESHBOARD_OPTIONS, MESHBOARD_TENANT_ID_PROVIDER, MarkdownConfigDialogComponent, MarkdownWidgetComponent, MeshBoardDataService, MeshBoardGridService, MeshBoardManagerDialogComponent, MeshBoardPersistenceService, MeshBoardSettingsDialogComponent, MeshBoardSettingsResult, MeshBoardStateService, MeshBoardViewComponent, PieChartConfigDialogComponent, PieChartWidgetComponent, QuerySelectorComponent, RuntimeEntityDialogDataSource$2 as RuntimeEntityDialogDataSource, RuntimeEntitySelectDataSource$2 as RuntimeEntitySelectDataSource, RuntimeEntitySelectorComponent, ServiceHealthConfigDialogComponent, ServiceHealthWidgetComponent, StatsGridConfigDialogComponent, StatsGridWidgetComponent, StatusIndicatorConfigDialogComponent, StatusIndicatorWidgetComponent, TableConfigDialogComponent, TableWidgetComponent, TableWidgetDataSourceDirective, WidgetFactoryService, WidgetGroupComponent, WidgetGroupConfigDialogComponent, WidgetNotConfiguredComponent, WidgetRegistryService, provideDefaultWidgets, provideMeshBoard, provideProcessWidget, provideWidgetRegistrations, registerDefaultWidgets, registerProcessWidget };
+export { AddWidgetDialogComponent, AssociationsConfigDialogComponent, BarChartConfigDialogComponent, BarChartWidgetComponent, DashboardDataService, DashboardGridService, EditModeStateService, EditWidgetDialogComponent, EntityAssociationsWidgetComponent, EntityCardConfigDialogComponent, EntityCardWidgetComponent, EntityDetailDialogComponent, GaugeConfigDialogComponent, GaugeWidgetComponent, HeatmapConfigDialogComponent, HeatmapWidgetComponent, KpiConfigDialogComponent, KpiWidgetComponent, LineChartConfigDialogComponent, LineChartWidgetComponent, MESHBOARD_OPTIONS, MESHBOARD_TENANT_ID_PROVIDER, MarkdownConfigDialogComponent, MarkdownWidgetComponent, MeshBoardDataService, MeshBoardGridService, MeshBoardManagerDialogComponent, MeshBoardPersistenceService, MeshBoardSettingsDialogComponent, MeshBoardSettingsResult, MeshBoardStateService, MeshBoardViewComponent, PieChartConfigDialogComponent, PieChartWidgetComponent, QuerySelectorComponent, RuntimeEntityDialogDataSource$2 as RuntimeEntityDialogDataSource, RuntimeEntitySelectDataSource$2 as RuntimeEntitySelectDataSource, RuntimeEntitySelectorComponent, ServiceHealthConfigDialogComponent, ServiceHealthWidgetComponent, StatsGridConfigDialogComponent, StatsGridWidgetComponent, StatusIndicatorConfigDialogComponent, StatusIndicatorWidgetComponent, TableConfigDialogComponent, TableWidgetComponent, TableWidgetDataSourceDirective, WidgetFactoryService, WidgetGroupComponent, WidgetGroupConfigDialogComponent, WidgetNotConfiguredComponent, WidgetRegistryService, provideDefaultWidgets, provideMeshBoard, provideProcessWidget, provideWidgetRegistrations, registerDefaultWidgets, registerProcessWidget };
 //# sourceMappingURL=meshmakers-octo-meshboard.mjs.map