@meshmakers/octo-meshboard 3.4.360 → 3.4.380

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -9288,7 +9288,7 @@ class TableWidgetComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".table-widget{height:100%;width:100%;display:flex;flex-direction:column}.no-config-overlay{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-subtle, #6c757d);font-style:italic}:host ::ng-deep mm-list-view{height:100%}:host ::ng-deep .k-grid{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "rowClass", "messages", "selectable", "columns"], outputs: ["rowClicked"] }, { kind: "directive", type: TableWidgetDataSourceDirective, selector: "[mmTableWidgetDataSource]", inputs: ["config"], outputs: ["queryColumnsLoaded"], exportAs: ["mmTableWidgetDataSource"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [".table-widget{height:100%;width:100%;display:flex;flex-direction:column}.no-config-overlay{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-subtle, #6c757d);font-style:italic}:host ::ng-deep mm-list-view{height:100%}:host ::ng-deep .k-grid{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "resizable", "actionsColumnWidth", "hideCheckboxesBelow", "rowClass", "messages", "selectable", "columns"], outputs: ["rowClicked"] }, { kind: "directive", type: TableWidgetDataSourceDirective, selector: "[mmTableWidgetDataSource]", inputs: ["config"], outputs: ["queryColumnsLoaded"], exportAs: ["mmTableWidgetDataSource"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableWidgetComponent, decorators: [{
             type: Component,
@@ -13378,9 +13378,10 @@ class BarChartWidgetComponent {
         const categories = Array.from(allCategories);
         const seriesGroups = Array.from(allSeriesGroups);
         // Build series data
+        const valueScale = this.config?.valueScale ?? 1;
         const seriesData = seriesGroups.map(seriesGroup => {
             const rawData = categories.map(category => {
-                return dataMap.get(category)?.get(seriesGroup) ?? 0;
+                return (dataMap.get(category)?.get(seriesGroup) ?? 0) * valueScale;
             });
             return {
                 name: seriesGroup,
@@ -15409,7 +15410,8 @@ class LineChartConfigDialogComponent {
         { value: 'AVG', label: 'Average (instantaneous)' },
         { value: 'MAX', label: 'Max (e.g. demand)' },
         { value: 'MIN', label: 'Min' },
-        { value: 'COUNT', label: 'Count' }
+        { value: 'COUNT', label: 'Count' },
+        { value: 'TIME_WEIGHTED_AVG', label: 'Time-weighted average (event-based duty cycle)' }
     ];
     /** Entity selectors available on the current MeshBoard (for the scope picker). */
     get availableEntitySelectors() {
@@ -29158,6 +29160,7 @@ function registerDefaultWidgets(registry) {
                 legendPosition: widget.legendPosition,
                 showDataLabels: widget.showDataLabels,
                 dataLabelSuffix: widget.dataLabelSuffix,
+                valueScale: widget.valueScale,
                 colorThresholds: widget.colorThresholds,
                 defaultBarColor: widget.defaultBarColor,
                 queryName: widget.dataSource.queryName,
@@ -29192,6 +29195,7 @@ function registerDefaultWidgets(registry) {
                 legendPosition: config['legendPosition'] ?? 'right',
                 showDataLabels: config['showDataLabels'] ?? false,
                 dataLabelSuffix: config['dataLabelSuffix'],
+                valueScale: config['valueScale'],
                 colorThresholds: config['colorThresholds'],
                 defaultBarColor: config['defaultBarColor'],
                 filters: config['filters']
@@ -30715,6 +30719,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Output
             }] } });
 
+/** Below this container width the board stacks in a single column. */
+const PHONE_MAX_WIDTH = 700;
+/** Below this container width the board clamps to at most TABLET_MAX_COLUMNS. */
+const TABLET_MAX_WIDTH = 1100;
+const TABLET_MAX_COLUMNS = 3;
+function compactTierForWidth(width) {
+    if (width === null) {
+        return 'none';
+    }
+    if (width < PHONE_MAX_WIDTH) {
+        return 'phone';
+    }
+    if (width < TABLET_MAX_WIDTH) {
+        return 'tablet';
+    }
+    return 'none';
+}
+function columnsForTier(tier, configuredColumns) {
+    switch (tier) {
+        case 'phone':
+            return 1;
+        case 'tablet':
+            return Math.min(configuredColumns, TABLET_MAX_COLUMNS);
+        default:
+            return configuredColumns;
+    }
+}
+function placeWidgetsForTier(widgets, tier, configuredColumns) {
+    if (tier === 'none') {
+        return widgets.map(widget => ({
+            widget,
+            col: widget.col,
+            row: widget.row,
+            colSpan: widget.colSpan,
+            rowSpan: widget.rowSpan
+        }));
+    }
+    const columns = columnsForTier(tier, configuredColumns);
+    return [...widgets]
+        .sort((a, b) => (a.row - b.row) || (a.col - b.col))
+        .map(widget => ({
+        widget,
+        colSpan: Math.max(1, Math.min(widget.colSpan, columns)),
+        rowSpan: widget.rowSpan
+    }));
+}
+
 /**
  * Component for editing MeshBoard variables.
  * Allows adding, editing, and removing static variables with type-specific input controls.
@@ -31987,6 +32038,26 @@ class MeshBoardViewComponent {
     ...(ngDevMode ? [{ debugName: "hasGridWidgets" }] : /* istanbul ignore next */ []));
     canSave = computed(() => this.isEditMode() && !this.isSaving(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+    // Compact layout (AB#4353): the TileLayout renders its configured column
+    // count at any width, so narrow containers get a presentation-side remap —
+    // single column below 700px, at most 3 columns below 1100px, persisted
+    // config untouched. Editing stays native-tier-only because drag/resize
+    // against remapped positions would corrupt the stored anchors.
+    hostElement = inject((ElementRef));
+    ngZone = inject(NgZone);
+    resizeObserver;
+    containerWidth = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
+    compactTier = computed(() => compactTierForWidth(this.containerWidth()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compactTier" }] : /* istanbul ignore next */ []));
+    displayColumns = computed(() => columnsForTier(this.compactTier(), this.config().columns), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayColumns" }] : /* istanbul ignore next */ []));
+    displayAutoFlow = computed(() => this.compactTier() === 'none' ? 'column' : 'row', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayAutoFlow" }] : /* istanbul ignore next */ []));
+    canEditLayout = computed(() => this.isEditMode() && this.compactTier() === 'none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEditLayout" }] : /* istanbul ignore next */ []));
+    displayGridWidgets = computed(() => placeWidgetsForTier(this.gridWidgets(), this.compactTier(), this.config().columns), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayGridWidgets" }] : /* istanbul ignore next */ []));
     // Time Filter computed signals
     isTimeFilterEnabled = computed(() => this.stateService.isTimeFilterEnabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isTimeFilterEnabled" }] : /* istanbul ignore next */ []));
@@ -32099,6 +32170,19 @@ class MeshBoardViewComponent {
         }
     }
     async ngOnInit() {
+        // Track the component's own width for the compact layout tiers. The callback
+        // fires outside the Angular zone; re-enter it so the signal update schedules
+        // change detection for this OnPush component.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(entries => {
+                const width = entries[entries.length - 1]?.contentRect.width;
+                if (width === undefined) {
+                    return;
+                }
+                this.ngZone.run(() => this.containerWidth.set(width));
+            });
+            this.resizeObserver.observe(this.hostElement.nativeElement);
+        }
         // Reset edit mode state when entering the page to clear any lingering state from previous sessions
         this.editModeService.reset();
         try {
@@ -32177,6 +32261,7 @@ class MeshBoardViewComponent {
         }
     }
     ngOnDestroy() {
+        this.resizeObserver?.disconnect();
         this.closeConfigDialog();
         this.navigationSubscription?.unsubscribe();
         this.autoRefreshTimer.stop();
@@ -33164,7 +33249,7 @@ class MeshBoardViewComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MeshBoardViewComponent, isStandalone: true, selector: "mm-meshboard-view", providers: [
             { provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent },
             AutoRefreshTimerService
-        ], viewQueries: [{ propertyName: "tileLayout", first: true, predicate: TileLayoutComponent, descendants: true }], hostDirectives: [{ directive: i1$8.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            [labels]=\"timeRangeLabels()\"\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      <!-- Entity Selectors -->\n      @if (hasEntitySelectors()) {\n        @if (isTimeFilterEnabled()) {\n          <div class=\"toolbar-separator\"></div>\n        }\n        <div class=\"toolbar-entity-selectors\">\n          <mm-entity-selector-toolbar\n            [entitySelectors]=\"entitySelectorsConfig()\"\n            (entitySelected)=\"onEntitySelectorSelected($event)\"\n            (entityCleared)=\"onEntitySelectorCleared($event)\">\n          </mm-entity-selector-toolbar>\n        </div>\n      }\n\n      @if (isTimeFilterEnabled() || hasEntitySelectors()) {\n        <div class=\"toolbar-separator\"></div>\n      }\n      <div class=\"toolbar-right mm-toolbar-actions\">\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            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              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- Entity Selector Hint -->\n    @if (unselectedToolbarSelectors().length > 0) {\n      <div class=\"entity-selector-hint\">\n        <kendo-svg-icon [icon]=\"infoCircleIcon\" size=\"medium\"></kendo-svg-icon>\n        <span>\n          Please select\n          @for (selector of unselectedToolbarSelectors(); track selector.id; let last = $last) {\n            <strong>{{ selector.label }}</strong>@if (!last) {, }\n          }\n          to display dashboard data.\n        </span>\n      </div>\n    }\n\n    <!-- Variable Resolution Errors -->\n    @if (variableResolutionErrors().length > 0) {\n      <div class=\"variable-resolution-errors\">\n        <strong>Variable resolution errors:</strong>\n        @for (error of variableResolutionErrors(); track error.variableName) {\n          <span class=\"error-item\">{{ error.variableName }}: {{ error.message }}</span>\n        }\n      </div>\n    }\n\n    <!-- Banner Zone: widgets placed in the banner stack above the grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label banner-zone-label\">Banner Zone</div>\n    }\n    @for (widget of bannerWidgets(); track trackByWidgetId($index, widget); let first = $first; let last = $last) {\n      <div class=\"banner-zone-item\" [class.banner-edit]=\"isEditMode()\">\n        @if (isEditMode()) {\n          <div class=\"banner-edit-header\">\n            <span class=\"widget-title\">{{ widget.title }}</span>\n            <div class=\"widget-actions\">\n              <button\n                kendoButton\n                [svgIcon]=\"arrowUpIcon\"\n                (click)=\"moveBannerUp(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"first\"\n                title=\"Move up\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"arrowDownIcon\"\n                (click)=\"moveBannerDown(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"last\"\n                title=\"Move down\">\n              </button>\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 widget\">\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          </div>\n        }\n        @if (getWidgetComponentType(widget.type); as componentType) {\n          <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n        }\n      </div>\n    }\n\n    <!-- MeshBoard Grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label grid-zone-label\">Grid Zone</div>\n    }\n    @if (hasGridWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"config().columns\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [class.has-banners]=\"bannerWidgets().length > 0 && !isEditMode()\"\n        [resizable]=\"isEditMode()\"\n        [reorderable]=\"isEditMode()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (widget of gridWidgets(); 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\"\n                   [class.unconfigured]=\"isWidgetUnconfigured(widget)\"\n                   [class.chromeless-header]=\"widget.chromeless && !isEditMode()\">\n                @if (!(widget.chromeless && !isEditMode())) {\n                  <span class=\"widget-title\">{{ widget.title }}</span>\n                  @if (isWidgetUnconfigured(widget)) {\n                    <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                  }\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]=\"copyIcon\"\n                      (click)=\"duplicateWidget(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"duplicate-widget-btn\"\n                      title=\"Duplicate widget\">\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%}.entity-selector-hint{display:flex;align-items:center;gap:8px;padding:10px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-info, #2196f3) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid color-mix(in srgb,var(--kendo-color-info, #2196f3) 40%,transparent);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.entity-selector-hint strong{color:var(--kendo-color-info, #2196f3)}.variable-resolution-errors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid var(--kendo-color-error, #f44336);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.variable-resolution-errors strong{color:var(--kendo-color-error, #f44336)}.variable-resolution-errors .error-item{padding:2px 8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 8%,transparent);border-radius:3px;font-family:Consolas,Monaco,monospace;font-size:12px}.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:flex-end;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;align-self:center}.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:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-separator{width:1px;align-self:stretch;background-color:var(--kendo-color-border, #e0e0e0);flex-shrink:0}.meshboard-toolbar .toolbar-entity-selectors{display:flex;align-items:flex-end;flex-shrink:0}.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}}:host ::ng-deep kendo-tilelayout.has-banners{padding-top:0!important}:host ::ng-deep kendo-tilelayout{padding-bottom:1.5rem!important}.widget-header.chromeless-header{display:none}:host ::ng-deep .k-tilelayout-item-header:has(.chromeless-header){display:none}:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-tilelayout-item,:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-card{border:none;box-shadow:none;background:transparent}:host ::ng-deep kendo-tilelayout-item:has(kendo-dialog),:host ::ng-deep kendo-tilelayout-item:has(kendo-window){z-index:9999}.zone-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;opacity:.4;padding:6px 1rem 2px;font-weight:600}.banner-zone-item{margin:0;padding:8px 1rem}.banner-zone-item.banner-edit{border:1px dashed var(--kendo-color-border, rgba(255, 255, 255, .2));border-radius:4px;margin:0 1rem 12px;padding:4px 0}.banner-edit-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;opacity:.7}.banner-edit-header .widget-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.banner-edit-header .widget-actions{display:flex;gap:2px}\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", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: TileLayoutModule }, { kind: "component", type: i5.TileLayoutComponent, selector: "kendo-tilelayout", inputs: ["columns", "columnWidth", "gap", "reorderable", "resizable", "rowHeight", "autoFlow", "navigable"], outputs: ["reorder", "resize"] }, { kind: "component", type: i5.TileLayoutItemBodyComponent, selector: "kendo-tilelayout-item-body" }, { kind: "component", type: i5.TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: ["title", "rowSpan", "colSpan", "order", "col", "row", "reorderable", "resizable"] }, { kind: "component", type: i5.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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i1$4.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], 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"] }, { kind: "component", type: EntitySelectorToolbarComponent, selector: "mm-entity-selector-toolbar", inputs: ["entitySelectors"], outputs: ["entitySelected", "entityCleared"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], viewQueries: [{ propertyName: "tileLayout", first: true, predicate: TileLayoutComponent, descendants: true }], hostDirectives: [{ directive: i1$8.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            [labels]=\"timeRangeLabels()\"\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      <!-- Entity Selectors -->\n      @if (hasEntitySelectors()) {\n        @if (isTimeFilterEnabled()) {\n          <div class=\"toolbar-separator\"></div>\n        }\n        <div class=\"toolbar-entity-selectors\">\n          <mm-entity-selector-toolbar\n            [entitySelectors]=\"entitySelectorsConfig()\"\n            (entitySelected)=\"onEntitySelectorSelected($event)\"\n            (entityCleared)=\"onEntitySelectorCleared($event)\">\n          </mm-entity-selector-toolbar>\n        </div>\n      }\n\n      @if (isTimeFilterEnabled() || hasEntitySelectors()) {\n        <div class=\"toolbar-separator\"></div>\n      }\n      <div class=\"toolbar-right mm-toolbar-actions\">\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            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              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- Entity Selector Hint -->\n    @if (unselectedToolbarSelectors().length > 0) {\n      <div class=\"entity-selector-hint\">\n        <kendo-svg-icon [icon]=\"infoCircleIcon\" size=\"medium\"></kendo-svg-icon>\n        <span>\n          Please select\n          @for (selector of unselectedToolbarSelectors(); track selector.id; let last = $last) {\n            <strong>{{ selector.label }}</strong>@if (!last) {, }\n          }\n          to display dashboard data.\n        </span>\n      </div>\n    }\n\n    <!-- Variable Resolution Errors -->\n    @if (variableResolutionErrors().length > 0) {\n      <div class=\"variable-resolution-errors\">\n        <strong>Variable resolution errors:</strong>\n        @for (error of variableResolutionErrors(); track error.variableName) {\n          <span class=\"error-item\">{{ error.variableName }}: {{ error.message }}</span>\n        }\n      </div>\n    }\n\n    <!-- Banner Zone: widgets placed in the banner stack above the grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label banner-zone-label\">Banner Zone</div>\n    }\n    @for (widget of bannerWidgets(); track trackByWidgetId($index, widget); let first = $first; let last = $last) {\n      <div class=\"banner-zone-item\" [class.banner-edit]=\"isEditMode()\">\n        @if (isEditMode()) {\n          <div class=\"banner-edit-header\">\n            <span class=\"widget-title\">{{ widget.title }}</span>\n            <div class=\"widget-actions\">\n              <button\n                kendoButton\n                [svgIcon]=\"arrowUpIcon\"\n                (click)=\"moveBannerUp(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"first\"\n                title=\"Move up\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"arrowDownIcon\"\n                (click)=\"moveBannerDown(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"last\"\n                title=\"Move down\">\n              </button>\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 widget\">\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          </div>\n        }\n        @if (getWidgetComponentType(widget.type); as componentType) {\n          <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n        }\n      </div>\n    }\n\n    <!-- MeshBoard Grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label grid-zone-label\">Grid Zone</div>\n    }\n    @if (hasGridWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"displayColumns()\"\n        [autoFlow]=\"displayAutoFlow()\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [class.has-banners]=\"bannerWidgets().length > 0 && !isEditMode()\"\n        [resizable]=\"canEditLayout()\"\n        [reorderable]=\"canEditLayout()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (placement of displayGridWidgets(); track placement.widget.id) {\n          @let widget = placement.widget;\n          <kendo-tilelayout-item\n            [col]=\"$any(placement.col)\"\n            [row]=\"$any(placement.row)\"\n            [colSpan]=\"placement.colSpan\"\n            [rowSpan]=\"placement.rowSpan\">\n            <kendo-tilelayout-item-header>\n              <div class=\"widget-header\"\n                   [class.unconfigured]=\"isWidgetUnconfigured(widget)\"\n                   [class.chromeless-header]=\"widget.chromeless && !isEditMode()\">\n                @if (!(widget.chromeless && !isEditMode())) {\n                  <span class=\"widget-title\">{{ widget.title }}</span>\n                  @if (isWidgetUnconfigured(widget)) {\n                    <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                  }\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]=\"copyIcon\"\n                      (click)=\"duplicateWidget(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"duplicate-widget-btn\"\n                      title=\"Duplicate widget\">\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%}.entity-selector-hint{display:flex;align-items:center;gap:8px;padding:10px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-info, #2196f3) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid color-mix(in srgb,var(--kendo-color-info, #2196f3) 40%,transparent);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.entity-selector-hint strong{color:var(--kendo-color-info, #2196f3)}.variable-resolution-errors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid var(--kendo-color-error, #f44336);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.variable-resolution-errors strong{color:var(--kendo-color-error, #f44336)}.variable-resolution-errors .error-item{padding:2px 8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 8%,transparent);border-radius:3px;font-family:Consolas,Monaco,monospace;font-size:12px}.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:flex-end;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;align-self:center}.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:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-separator{width:1px;align-self:stretch;background-color:var(--kendo-color-border, #e0e0e0);flex-shrink:0}.meshboard-toolbar .toolbar-entity-selectors{display:flex;align-items:flex-end;flex-shrink:0}.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}}:host ::ng-deep kendo-tilelayout.has-banners{padding-top:0!important}:host ::ng-deep kendo-tilelayout{padding-bottom:1.5rem!important}.widget-header.chromeless-header{display:none}:host ::ng-deep .k-tilelayout-item-header:has(.chromeless-header){display:none}:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-tilelayout-item,:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-card{border:none;box-shadow:none;background:transparent}:host ::ng-deep kendo-tilelayout-item:has(kendo-dialog),:host ::ng-deep kendo-tilelayout-item:has(kendo-window){z-index:9999}.zone-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;opacity:.4;padding:6px 1rem 2px;font-weight:600}.banner-zone-item{margin:0;padding:8px 1rem}.banner-zone-item.banner-edit{border:1px dashed var(--kendo-color-border, rgba(255, 255, 255, .2));border-radius:4px;margin:0 1rem 12px;padding:4px 0}.banner-edit-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;opacity:.7}.banner-edit-header .widget-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.banner-edit-header .widget-actions{display:flex;gap:2px}\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", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: TileLayoutModule }, { kind: "component", type: i5.TileLayoutComponent, selector: "kendo-tilelayout", inputs: ["columns", "columnWidth", "gap", "reorderable", "resizable", "rowHeight", "autoFlow", "navigable"], outputs: ["reorder", "resize"] }, { kind: "component", type: i5.TileLayoutItemBodyComponent, selector: "kendo-tilelayout-item-body" }, { kind: "component", type: i5.TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: ["title", "rowSpan", "colSpan", "order", "col", "row", "reorderable", "resizable"] }, { kind: "component", type: i5.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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i1$4.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], 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"] }, { kind: "component", type: EntitySelectorToolbarComponent, selector: "mm-entity-selector-toolbar", inputs: ["entitySelectors"], outputs: ["entitySelected", "entityCleared"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MeshBoardViewComponent, decorators: [{
             type: Component,
@@ -33181,7 +33266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], hostDirectives: [UnsavedChangesDirective], providers: [
                         { provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent },
                         AutoRefreshTimerService
-                    ], changeDetection: ChangeDetectionStrategy.Eager, 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            [labels]=\"timeRangeLabels()\"\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      <!-- Entity Selectors -->\n      @if (hasEntitySelectors()) {\n        @if (isTimeFilterEnabled()) {\n          <div class=\"toolbar-separator\"></div>\n        }\n        <div class=\"toolbar-entity-selectors\">\n          <mm-entity-selector-toolbar\n            [entitySelectors]=\"entitySelectorsConfig()\"\n            (entitySelected)=\"onEntitySelectorSelected($event)\"\n            (entityCleared)=\"onEntitySelectorCleared($event)\">\n          </mm-entity-selector-toolbar>\n        </div>\n      }\n\n      @if (isTimeFilterEnabled() || hasEntitySelectors()) {\n        <div class=\"toolbar-separator\"></div>\n      }\n      <div class=\"toolbar-right mm-toolbar-actions\">\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            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              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- Entity Selector Hint -->\n    @if (unselectedToolbarSelectors().length > 0) {\n      <div class=\"entity-selector-hint\">\n        <kendo-svg-icon [icon]=\"infoCircleIcon\" size=\"medium\"></kendo-svg-icon>\n        <span>\n          Please select\n          @for (selector of unselectedToolbarSelectors(); track selector.id; let last = $last) {\n            <strong>{{ selector.label }}</strong>@if (!last) {, }\n          }\n          to display dashboard data.\n        </span>\n      </div>\n    }\n\n    <!-- Variable Resolution Errors -->\n    @if (variableResolutionErrors().length > 0) {\n      <div class=\"variable-resolution-errors\">\n        <strong>Variable resolution errors:</strong>\n        @for (error of variableResolutionErrors(); track error.variableName) {\n          <span class=\"error-item\">{{ error.variableName }}: {{ error.message }}</span>\n        }\n      </div>\n    }\n\n    <!-- Banner Zone: widgets placed in the banner stack above the grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label banner-zone-label\">Banner Zone</div>\n    }\n    @for (widget of bannerWidgets(); track trackByWidgetId($index, widget); let first = $first; let last = $last) {\n      <div class=\"banner-zone-item\" [class.banner-edit]=\"isEditMode()\">\n        @if (isEditMode()) {\n          <div class=\"banner-edit-header\">\n            <span class=\"widget-title\">{{ widget.title }}</span>\n            <div class=\"widget-actions\">\n              <button\n                kendoButton\n                [svgIcon]=\"arrowUpIcon\"\n                (click)=\"moveBannerUp(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"first\"\n                title=\"Move up\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"arrowDownIcon\"\n                (click)=\"moveBannerDown(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"last\"\n                title=\"Move down\">\n              </button>\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 widget\">\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          </div>\n        }\n        @if (getWidgetComponentType(widget.type); as componentType) {\n          <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n        }\n      </div>\n    }\n\n    <!-- MeshBoard Grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label grid-zone-label\">Grid Zone</div>\n    }\n    @if (hasGridWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"config().columns\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [class.has-banners]=\"bannerWidgets().length > 0 && !isEditMode()\"\n        [resizable]=\"isEditMode()\"\n        [reorderable]=\"isEditMode()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (widget of gridWidgets(); 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\"\n                   [class.unconfigured]=\"isWidgetUnconfigured(widget)\"\n                   [class.chromeless-header]=\"widget.chromeless && !isEditMode()\">\n                @if (!(widget.chromeless && !isEditMode())) {\n                  <span class=\"widget-title\">{{ widget.title }}</span>\n                  @if (isWidgetUnconfigured(widget)) {\n                    <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                  }\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]=\"copyIcon\"\n                      (click)=\"duplicateWidget(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"duplicate-widget-btn\"\n                      title=\"Duplicate widget\">\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%}.entity-selector-hint{display:flex;align-items:center;gap:8px;padding:10px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-info, #2196f3) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid color-mix(in srgb,var(--kendo-color-info, #2196f3) 40%,transparent);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.entity-selector-hint strong{color:var(--kendo-color-info, #2196f3)}.variable-resolution-errors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid var(--kendo-color-error, #f44336);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.variable-resolution-errors strong{color:var(--kendo-color-error, #f44336)}.variable-resolution-errors .error-item{padding:2px 8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 8%,transparent);border-radius:3px;font-family:Consolas,Monaco,monospace;font-size:12px}.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:flex-end;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;align-self:center}.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:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-separator{width:1px;align-self:stretch;background-color:var(--kendo-color-border, #e0e0e0);flex-shrink:0}.meshboard-toolbar .toolbar-entity-selectors{display:flex;align-items:flex-end;flex-shrink:0}.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}}:host ::ng-deep kendo-tilelayout.has-banners{padding-top:0!important}:host ::ng-deep kendo-tilelayout{padding-bottom:1.5rem!important}.widget-header.chromeless-header{display:none}:host ::ng-deep .k-tilelayout-item-header:has(.chromeless-header){display:none}:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-tilelayout-item,:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-card{border:none;box-shadow:none;background:transparent}:host ::ng-deep kendo-tilelayout-item:has(kendo-dialog),:host ::ng-deep kendo-tilelayout-item:has(kendo-window){z-index:9999}.zone-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;opacity:.4;padding:6px 1rem 2px;font-weight:600}.banner-zone-item{margin:0;padding:8px 1rem}.banner-zone-item.banner-edit{border:1px dashed var(--kendo-color-border, rgba(255, 255, 255, .2));border-radius:4px;margin:0 1rem 12px;padding:4px 0}.banner-edit-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;opacity:.7}.banner-edit-header .widget-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.banner-edit-header .widget-actions{display:flex;gap:2px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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            [labels]=\"timeRangeLabels()\"\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      <!-- Entity Selectors -->\n      @if (hasEntitySelectors()) {\n        @if (isTimeFilterEnabled()) {\n          <div class=\"toolbar-separator\"></div>\n        }\n        <div class=\"toolbar-entity-selectors\">\n          <mm-entity-selector-toolbar\n            [entitySelectors]=\"entitySelectorsConfig()\"\n            (entitySelected)=\"onEntitySelectorSelected($event)\"\n            (entityCleared)=\"onEntitySelectorCleared($event)\">\n          </mm-entity-selector-toolbar>\n        </div>\n      }\n\n      @if (isTimeFilterEnabled() || hasEntitySelectors()) {\n        <div class=\"toolbar-separator\"></div>\n      }\n      <div class=\"toolbar-right mm-toolbar-actions\">\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            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              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- Entity Selector Hint -->\n    @if (unselectedToolbarSelectors().length > 0) {\n      <div class=\"entity-selector-hint\">\n        <kendo-svg-icon [icon]=\"infoCircleIcon\" size=\"medium\"></kendo-svg-icon>\n        <span>\n          Please select\n          @for (selector of unselectedToolbarSelectors(); track selector.id; let last = $last) {\n            <strong>{{ selector.label }}</strong>@if (!last) {, }\n          }\n          to display dashboard data.\n        </span>\n      </div>\n    }\n\n    <!-- Variable Resolution Errors -->\n    @if (variableResolutionErrors().length > 0) {\n      <div class=\"variable-resolution-errors\">\n        <strong>Variable resolution errors:</strong>\n        @for (error of variableResolutionErrors(); track error.variableName) {\n          <span class=\"error-item\">{{ error.variableName }}: {{ error.message }}</span>\n        }\n      </div>\n    }\n\n    <!-- Banner Zone: widgets placed in the banner stack above the grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label banner-zone-label\">Banner Zone</div>\n    }\n    @for (widget of bannerWidgets(); track trackByWidgetId($index, widget); let first = $first; let last = $last) {\n      <div class=\"banner-zone-item\" [class.banner-edit]=\"isEditMode()\">\n        @if (isEditMode()) {\n          <div class=\"banner-edit-header\">\n            <span class=\"widget-title\">{{ widget.title }}</span>\n            <div class=\"widget-actions\">\n              <button\n                kendoButton\n                [svgIcon]=\"arrowUpIcon\"\n                (click)=\"moveBannerUp(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"first\"\n                title=\"Move up\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"arrowDownIcon\"\n                (click)=\"moveBannerDown(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"last\"\n                title=\"Move down\">\n              </button>\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 widget\">\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          </div>\n        }\n        @if (getWidgetComponentType(widget.type); as componentType) {\n          <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n        }\n      </div>\n    }\n\n    <!-- MeshBoard Grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label grid-zone-label\">Grid Zone</div>\n    }\n    @if (hasGridWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"displayColumns()\"\n        [autoFlow]=\"displayAutoFlow()\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [class.has-banners]=\"bannerWidgets().length > 0 && !isEditMode()\"\n        [resizable]=\"canEditLayout()\"\n        [reorderable]=\"canEditLayout()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (placement of displayGridWidgets(); track placement.widget.id) {\n          @let widget = placement.widget;\n          <kendo-tilelayout-item\n            [col]=\"$any(placement.col)\"\n            [row]=\"$any(placement.row)\"\n            [colSpan]=\"placement.colSpan\"\n            [rowSpan]=\"placement.rowSpan\">\n            <kendo-tilelayout-item-header>\n              <div class=\"widget-header\"\n                   [class.unconfigured]=\"isWidgetUnconfigured(widget)\"\n                   [class.chromeless-header]=\"widget.chromeless && !isEditMode()\">\n                @if (!(widget.chromeless && !isEditMode())) {\n                  <span class=\"widget-title\">{{ widget.title }}</span>\n                  @if (isWidgetUnconfigured(widget)) {\n                    <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                  }\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]=\"copyIcon\"\n                      (click)=\"duplicateWidget(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"duplicate-widget-btn\"\n                      title=\"Duplicate widget\">\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%}.entity-selector-hint{display:flex;align-items:center;gap:8px;padding:10px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-info, #2196f3) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid color-mix(in srgb,var(--kendo-color-info, #2196f3) 40%,transparent);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.entity-selector-hint strong{color:var(--kendo-color-info, #2196f3)}.variable-resolution-errors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid var(--kendo-color-error, #f44336);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.variable-resolution-errors strong{color:var(--kendo-color-error, #f44336)}.variable-resolution-errors .error-item{padding:2px 8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 8%,transparent);border-radius:3px;font-family:Consolas,Monaco,monospace;font-size:12px}.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:flex-end;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;align-self:center}.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:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-separator{width:1px;align-self:stretch;background-color:var(--kendo-color-border, #e0e0e0);flex-shrink:0}.meshboard-toolbar .toolbar-entity-selectors{display:flex;align-items:flex-end;flex-shrink:0}.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}}:host ::ng-deep kendo-tilelayout.has-banners{padding-top:0!important}:host ::ng-deep kendo-tilelayout{padding-bottom:1.5rem!important}.widget-header.chromeless-header{display:none}:host ::ng-deep .k-tilelayout-item-header:has(.chromeless-header){display:none}:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-tilelayout-item,:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-card{border:none;box-shadow:none;background:transparent}:host ::ng-deep kendo-tilelayout-item:has(kendo-dialog),:host ::ng-deep kendo-tilelayout-item:has(kendo-window){z-index:9999}.zone-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;opacity:.4;padding:6px 1rem 2px;font-weight:600}.banner-zone-item{margin:0;padding:8px 1rem}.banner-zone-item.banner-edit{border:1px dashed var(--kendo-color-border, rgba(255, 255, 255, .2));border-radius:4px;margin:0 1rem 12px;padding:4px 0}.banner-edit-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;opacity:.7}.banner-edit-header .widget-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.banner-edit-header .widget-actions{display:flex;gap:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tileLayout: [{
                 type: ViewChild,
                 args: [TileLayoutComponent]