@meshmakers/octo-meshboard 3.5.490 → 3.5.500

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -4,9 +4,9 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, EventEmitter, forwardRef, Output, Input, ViewChild, ChangeDetectionStrategy, Component, Injector, EnvironmentInjector, ApplicationRef, signal, computed, effect, untracked, Directive, InjectionToken, isSignal, NgZone, DestroyRef, ElementRef, input, createEnvironmentInjector, ViewContainerRef, makeEnvironmentProviders, provideAppInitializer, output, viewChild } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { firstValueFrom, from, map, Observable, of, switchMap as switchMap$1, catchError, interval, filter, combineLatest, defer, EMPTY } from 'rxjs';
+import { firstValueFrom, from, map, Observable, of, switchMap as switchMap$1, catchError, NEVER, interval, filter, combineLatest, defer, EMPTY } from 'rxjs';
 import * as i1$8 from '@meshmakers/shared-ui';
-import { EntitySelectInputComponent, WindowStateService, TimeRangeUtils, MmDialogActionsDirective, ListViewComponent, FetchResultTyped, DataSourceBase, MM_ACTION_ICONS, TimeRangePickerComponent, ConfirmationService, ImportStrategyDialogService, HAS_UNSAVED_CHANGES, UnsavedChangesDirective } from '@meshmakers/shared-ui';
+import { EntitySelectInputComponent, WindowStateService, TimeRangeUtils, MmDialogActionsDirective, ListViewComponent, FetchResultTyped, DataSourceBase, MM_ACTION_ICONS, ConfirmationService, TimeRangePickerComponent, ImportStrategyDialogService, HAS_UNSAVED_CHANGES, UnsavedChangesDirective } from '@meshmakers/shared-ui';
 import * as i1 from 'apollo-angular';
 import { gql, Apollo } from 'apollo-angular';
 import * as i1$3 from '@angular/common';
@@ -492,6 +492,24 @@ function queryFamily(queryCkTypeId) {
     return classifyQuery(queryCkTypeId)?.family ?? null;
 }
 
+/**
+ * The result a widget renders instead of executing its query when its scope is
+ * `empty` (AB#7721). Shape-compatible with a real empty response, so each
+ * widget's existing no-data rendering applies unchanged.
+ */
+function emptyQueryExecutionResult(family) {
+    return {
+        family: family ?? 'streamData',
+        queryRtId: null,
+        associatedCkTypeId: null,
+        columns: [],
+        rows: [],
+        totalCount: 0,
+        hasNextPage: false,
+        endCursor: null
+    };
+}
+
 const GetSystemPersistentQueriesDocumentDto = gql `
     query getSystemPersistentQueries($after: String, $first: Int, $searchFilter: SearchFilter, $fieldFilters: [FieldFilter], $sort: [Sort]) {
   runtime {
@@ -2181,7 +2199,10 @@ class MeshBoardPersistenceService {
                     attributeMappings: es.attributeMappings,
                     showInToolbar: es.showInToolbar,
                     defaultRtId: es.defaultRtId,
-                    childScope: es.childScope
+                    childScope: es.childScope,
+                    // AB#7722 — omitted (undefined → dropped by JSON.stringify) for
+                    // selectors that follow nobody, so older boards encode unchanged.
+                    followsSelectorId: es.followsSelectorId || undefined
                 }));
             }
             const dataJson = JSON.stringify(data);
@@ -2425,13 +2446,15 @@ class MeshBoardStateService {
     _variableResolutionErrors = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_variableResolutionErrors" }] : /* istanbul ignore next */ []));
     /**
-     * Transient cache of the source rtIds resolved from each entity selector's
-     * current selection (keyed by selector id). Populated by the view component
-     * when a selection resolves (one-hop childScope traversal, or the picked
-     * entity's own rtId). Not persisted — derived fresh from each selection.
+     * Transient scope state of each entity selector's current selection (keyed
+     * by selector id): `pending` while the view resolves the pick, `resolved`
+     * with the source rtIds (one-hop childScope traversal, or the picked entity's
+     * own rtId; possibly none), or `failed`. No entry = no active pick. Not
+     * persisted — derived fresh from each selection, cleared on board switch
+     * (AB#7721).
      */
-    _entitySelectorRtIds = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_entitySelectorRtIds" }] : /* istanbul ignore next */ []));
+    _entitySelectorScopes = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_entitySelectorScopes" }] : /* istanbul ignore next */ []));
     /**
      * Transient variables published by widgets (KPI output variables, AB#5364).
      * Kept apart from `_meshBoardConfig` so publishing triggers no persistence and
@@ -2565,6 +2588,7 @@ class MeshBoardStateService {
                     console.warn(`Resolved ${movedWidgets.length} overlapping widget(s)`);
                 }
                 this._widgetVariables.set([]);
+                this._entitySelectorScopes.set({});
                 this._hiddenForViewer.set(new Set());
                 this._widgetContentHeights.set(new Map());
                 this._loadedTenantId.set(tenantId);
@@ -3104,21 +3128,41 @@ class MeshBoardStateService {
         }
         return mode;
     }
+    /**
+     * Marks an entity selector's scope as being resolved (AB#7721). Bound
+     * stream-data widgets show their loading state and send no query until the
+     * scope is resolved, failed or cleared — so they never flash rows of the
+     * query's persisted (unscoped) scope while a pick is resolving.
+     */
+    setEntitySelectorScopePending(selectorId) {
+        this.setEntitySelectorScope(selectorId, { status: 'pending' });
+    }
     /**
      * Stores the source rtIds resolved from an entity selector's current
      * selection. Called by the view component after a selection resolves (the
      * one-hop childScope traversal, or the picked entity's own rtId when the
-     * selector has no childScope). Transient — not persisted.
+     * selector has no childScope). An empty array is a resolved EMPTY scope:
+     * bound widgets show no data and send no query (AB#7721). Transient — not
+     * persisted.
      */
     setEntitySelectorRtIds(selectorId, rtIds) {
-        this._entitySelectorRtIds.update(map => ({ ...map, [selectorId]: rtIds }));
+        this.setEntitySelectorScope(selectorId, { status: 'resolved', rtIds: [...rtIds] });
+    }
+    /**
+     * Marks an entity selector's scope resolution as failed (e.g. the association
+     * fetch threw). Bound widgets treat it like an empty scope — no data, no
+     * query — and the view tells the user the scope could not be resolved
+     * (AB#7721).
+     */
+    setEntitySelectorScopeFailed(selectorId) {
+        this.setEntitySelectorScope(selectorId, { status: 'failed' });
     }
     /**
-     * Clears the cached source rtIds for an entity selector (e.g. when its
-     * selection is cleared).
+     * Clears the scope state for an entity selector (its selection was cleared).
+     * Bound widgets then query with the persisted scope again.
      */
     clearEntitySelectorRtIds(selectorId) {
-        this._entitySelectorRtIds.update(map => {
+        this._entitySelectorScopes.update(map => {
             if (!(selectorId in map)) {
                 return map;
             }
@@ -3127,18 +3171,65 @@ class MeshBoardStateService {
             return next;
         });
     }
+    /** The raw scope state of a selector, or `undefined` when it has no active pick. */
+    getEntitySelectorScopeState(selectorId) {
+        return this._entitySelectorScopes()[selectorId];
+    }
     /**
-     * Resolves the stream-data `rtIds` scope for a persistent-query widget bound
-     * to an entity selector. Returns the source rtIds cached from the selector's
-     * current selection, or `undefined` when the selector id is absent, unknown,
-     * or has no active selection (so the query keeps its persisted scope).
+     * Ids of the selectors whose scope resolution failed (for the view's
+     * "could not resolve the scope" notice, AB#7721).
      */
-    resolveStreamDataRtIds(entitySelectorId) {
-        if (!entitySelectorId) {
-            return undefined;
+    failedEntitySelectorScopeIds = computed(() => Object.entries(this._entitySelectorScopes())
+        .filter(([, state]) => state.status === 'failed')
+        .map(([id]) => id), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "failedEntitySelectorScopeIds" }] : /* istanbul ignore next */ []));
+    /**
+     * Decides how a widget bound to an entity selector runs its stream-data query
+     * (AB#7721):
+     *
+     * - `unscoped` — no binding, a runtime query (`family === 'runtime'`, the
+     *   binding is ignored there), or no active pick: keep the persisted scope.
+     * - `pending` — the pick is still resolving: show loading, send no query.
+     * - `scoped` — query with the resolved source rtIds.
+     * - `empty` — the pick has nothing in scope or the lookup failed: show the
+     *   no-data state and send no query. Never fall back to the persisted scope.
+     *
+     * A legacy config without `queryFamily` is treated as stream data.
+     */
+    resolveStreamDataScope(entitySelectorId, family) {
+        if (!entitySelectorId || family === 'runtime') {
+            return { kind: 'unscoped' };
         }
-        const rtIds = this._entitySelectorRtIds()[entitySelectorId];
-        return rtIds && rtIds.length > 0 ? rtIds : undefined;
+        const state = this._entitySelectorScopes()[entitySelectorId];
+        if (!state) {
+            return { kind: 'unscoped' };
+        }
+        switch (state.status) {
+            case 'pending':
+                return { kind: 'pending' };
+            case 'failed':
+                return { kind: 'empty', reason: 'failed' };
+            case 'resolved':
+                return state.rtIds.length > 0
+                    ? { kind: 'scoped', rtIds: state.rtIds }
+                    : { kind: 'empty', reason: 'noTargets' };
+        }
+    }
+    /**
+     * Resolves the stream-data `rtIds` for a persistent-query widget bound to an
+     * entity selector: the resolved source rtIds when the scope is `scoped`,
+     * otherwise `undefined`.
+     *
+     * `undefined` does NOT mean "query with the persisted scope" for a pending or
+     * empty scope — callers must check {@link resolveStreamDataScope} first and
+     * skip the query for `pending` / `empty` (AB#7721).
+     */
+    resolveStreamDataRtIds(entitySelectorId) {
+        const scope = this.resolveStreamDataScope(entitySelectorId);
+        return scope.kind === 'scoped' ? scope.rtIds : undefined;
+    }
+    setEntitySelectorScope(selectorId, state) {
+        this._entitySelectorScopes.update(map => ({ ...map, [selectorId]: state }));
     }
     /**
      * Updates the time filter configuration.
@@ -6520,6 +6611,18 @@ class KpiWidgetComponent {
             // queryFamily may be undefined for legacy widget configs — the executor
             // falls back to a one-time lookup by rtId. streamDataArgs is sent
             // unconditionally because the runtime path ignores it.
+            // Entity-selector scope (AB#7721): pending → stay in the loading state and
+            // send no query (the view refreshes once the scope is known); empty → show
+            // the no-data value '-' without querying the persisted (unscoped) scope.
+            const scope = this.stateService.resolveStreamDataScope(dataSource.entitySelectorId, dataSource.queryFamily);
+            if (scope.kind === 'pending') {
+                return;
+            }
+            if (scope.kind === 'empty') {
+                this._data.set(null);
+                this._isLoading.set(false);
+                return;
+            }
             const streamDataArgs = this.buildStreamDataArgs();
             const result = await firstValueFrom(this.queryExecutor.execute(dataSource.queryFamily, dataSource.queryRtId, {
                 fieldFilter: fieldFilter ?? undefined,
@@ -10159,6 +10262,17 @@ class TableWidgetDataSourceDirective extends OctoGraphQlDataSource {
      * `'runtime'` for legacy configs that predate stream-data support.
      */
     fetchPersistentQueryData(dataSource, queryOptions) {
+        // Entity-selector scope (AB#7721): pending → keep the list in its loading
+        // state (an observable that never emits; the next refresh after the scope
+        // resolves cancels it) and send no query; empty → no rows, no query — never
+        // the persisted (unscoped) scope.
+        const scope = this.stateService.resolveStreamDataScope(dataSource.entitySelectorId, dataSource.queryFamily);
+        if (scope.kind === 'pending') {
+            return NEVER;
+        }
+        if (scope.kind === 'empty') {
+            return of(new FetchResultTyped([], 0));
+        }
         const fieldFilter = this.convertFiltersToDto(this._config?.filters);
         // queryFamily may be undefined for legacy widget configs — the executor
         // falls back to a one-time lookup by rtId. streamDataArgs is sent
@@ -10302,6 +10416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 /** Default texts of {@link MeshBoardMessages} (the list texts default inside `mm-list-view`). */
 const DEFAULT_MESHBOARD_MESSAGES = {
     tableNotConfigured: 'Table not configured',
+    scopeResolutionFailed: 'Could not resolve the scope of "{label}" - widgets bound to it show no data.',
 };
 /**
  * Optional: the host's translations of the MeshBoard widget texts (English without it). Set it
@@ -10326,6 +10441,7 @@ function resolveMeshBoardMessages(messages) {
         ...DEFAULT_MESHBOARD_MESSAGES,
         ...(messages?.tableList ? { tableList: messages.tableList } : {}),
         ...(messages?.tableNotConfigured ? { tableNotConfigured: messages.tableNotConfigured } : {}),
+        ...(messages?.scopeResolutionFailed ? { scopeResolutionFailed: messages.scopeResolutionFailed } : {}),
     };
 }
 /** The resolved MeshBoard messages of {@link MESHBOARD_MESSAGES} as a signal. Call in an injection context. */
@@ -11446,6 +11562,9 @@ class GaugeWidgetComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "numericValue" }] : /* istanbul ignore next */ []));
     formattedValue = computed(() => {
+        // Nothing loaded (e.g. an empty entity-selector scope, AB#7721): no value, not "0".
+        if (!this._data())
+            return '-';
         const value = this.numericValue();
         return value.toLocaleString('de-AT', {
             minimumFractionDigits: value % 1 !== 0 ? 1 : 0,
@@ -11517,6 +11636,18 @@ class GaugeWidgetComponent {
             // queryFamily may be undefined for legacy widget configs — the executor
             // falls back to a one-time lookup by rtId. streamDataArgs is sent
             // unconditionally because the runtime path ignores it.
+            // Entity-selector scope (AB#7721): pending → stay in the loading state and
+            // send no query (the view refreshes once the scope is known); empty → show
+            // no value ('-') without querying the persisted (unscoped) scope.
+            const scope = this.stateService.resolveStreamDataScope(dataSource.entitySelectorId, dataSource.queryFamily);
+            if (scope.kind === 'pending') {
+                return;
+            }
+            if (scope.kind === 'empty') {
+                this._data.set(null);
+                this._isLoading.set(false);
+                return;
+            }
             const streamDataArgs = this.buildStreamDataArgs();
             const result = await firstValueFrom(this.queryExecutor.execute(dataSource.queryFamily, dataSource.queryRtId, {
                 fieldFilter: fieldFilter ?? undefined,
@@ -13619,6 +13750,18 @@ class PieChartWidgetComponent {
      * Note: isNotConfigured() check in loadData() ensures queryRtId is set.
      */
     async loadPersistentQueryData(dataSource) {
+        // Entity-selector scope (AB#7721): pending → stay in the loading state and
+        // send no query (the view refreshes once the scope is known); empty → render
+        // the empty chart without querying the persisted (unscoped) scope.
+        const scope = this.stateService.resolveStreamDataScope(dataSource.entitySelectorId, dataSource.queryFamily);
+        if (scope.kind === 'pending') {
+            return;
+        }
+        if (scope.kind === 'empty') {
+            this._rawData.set([]);
+            this._isLoading.set(false);
+            return;
+        }
         const fieldFilter = this.convertFiltersToDto(this.config.filters);
         // queryFamily may be undefined for legacy widget configs — the executor
         // falls back to a one-time lookup by rtId. streamDataArgs is sent
@@ -14833,14 +14976,23 @@ class BarChartWidgetComponent {
             // queryFamily may be undefined for legacy widget configs — the executor
             // falls back to a one-time lookup by rtId. streamDataArgs is sent
             // unconditionally because the runtime path ignores it.
+            // Entity-selector scope (AB#7721): pending → stay in the loading state and
+            // send no query (the view refreshes once the scope is known); empty → render
+            // the empty chart without querying the persisted (unscoped) scope.
+            const scope = this.stateService.resolveStreamDataScope(queryDataSource.entitySelectorId, queryDataSource.queryFamily);
+            if (scope.kind === 'pending') {
+                return;
+            }
             const streamDataArgs = this.buildStreamDataArgs();
-            const result = await firstValueFrom(this.queryExecutor.execute(queryDataSource.queryFamily, queryDataSource.queryRtId, {
-                fieldFilter: fieldFilter ?? undefined,
-                streamDataArgs
-            }).pipe(catchError(err => {
-                console.error('Error loading Bar Chart data:', err);
-                throw err;
-            })));
+            const result = scope.kind === 'empty'
+                ? emptyQueryExecutionResult(queryDataSource.queryFamily)
+                : await firstValueFrom(this.queryExecutor.execute(queryDataSource.queryFamily, queryDataSource.queryRtId, {
+                    fieldFilter: fieldFilter ?? undefined,
+                    streamDataArgs
+                }).pipe(catchError(err => {
+                    console.error('Error loading Bar Chart data:', err);
+                    throw err;
+                })));
             const filteredRows = result.rows.filter(row => BarChartWidgetComponent.SUPPORTED_ROW_TYPES.has(row.__typename ?? ''));
             if (this.isDynamicSeriesMode()) {
                 this.processDynamicSeriesData(filteredRows);
@@ -16385,6 +16537,21 @@ class LineChartWidgetComponent {
         this._isLoading.set(true);
         this._error.set(null);
         try {
+            // Entity-selector scope (AB#7721): pending → stay in the loading state and
+            // send no query (the view refreshes once the scope is known); empty → render
+            // the empty chart without querying the persisted (unscoped) scope.
+            const scope = this.stateService.resolveStreamDataScope(queryDataSource.entitySelectorId, queryDataSource.queryFamily);
+            if (scope.kind === 'pending') {
+                return;
+            }
+            if (scope.kind === 'empty') {
+                this._resolutionSignal.set(null);
+                this._resolutionTarget.set(null);
+                this.processData([], false);
+                this._dataInfo.set({ rows: 0, points: 0, total: 0 });
+                this._isLoading.set(false);
+                return;
+            }
             const fieldFilter = this.convertFiltersToDto(this.config.filters);
             // Resolution-aware routing (AB#4290): let the server pick the archive/rollup for the visible
             // window + target point count, then downsample each source series against it. Requires a
@@ -17966,14 +18133,23 @@ class HeatmapWidgetComponent {
             // queryFamily may be undefined for legacy widget configs — the executor
             // falls back to a one-time lookup by rtId. streamDataArgs is sent
             // unconditionally because the runtime path ignores it.
+            // Entity-selector scope (AB#7721): pending → stay in the loading state and
+            // send no query (the view refreshes once the scope is known); empty → render
+            // the empty grid without querying the persisted (unscoped) scope.
+            const scope = this.stateService.resolveStreamDataScope(queryDataSource.entitySelectorId, queryDataSource.queryFamily);
+            if (scope.kind === 'pending') {
+                return;
+            }
             const streamDataArgs = this.buildStreamDataArgs();
-            const result = await firstValueFrom(this.queryExecutor.execute(queryDataSource.queryFamily, queryDataSource.queryRtId, {
-                fieldFilter: fieldFilter ?? undefined,
-                streamDataArgs
-            }).pipe(catchError(err => {
-                console.error('Error loading Heatmap data:', err);
-                throw err;
-            })));
+            const result = scope.kind === 'empty'
+                ? emptyQueryExecutionResult(queryDataSource.queryFamily)
+                : await firstValueFrom(this.queryExecutor.execute(queryDataSource.queryFamily, queryDataSource.queryRtId, {
+                    fieldFilter: fieldFilter ?? undefined,
+                    streamDataArgs
+                }).pipe(catchError(err => {
+                    console.error('Error loading Heatmap data:', err);
+                    throw err;
+                })));
             const filteredRows = result.rows.filter(row => HeatmapWidgetComponent.SUPPORTED_ROW_TYPES.has(row.__typename ?? ''));
             this.processHeatmapData(filteredRows);
             this._isLoading.set(false);
@@ -19308,6 +19484,13 @@ class StatsGridWidgetComponent {
         this._statValues.set(initialValues);
         this._isLoading.set(true);
         this._error.set(null);
+        // Entity-selector scope (AB#7721): while a bound stat's scope is still
+        // resolving, stay in the loading state and send no query at all; the view
+        // refreshes the widget once the scope is known.
+        if (this.config.stats.some(stat => stat.persistentQuerySource
+            && this.scopeOf(stat.persistentQuerySource).kind === 'pending')) {
+            return;
+        }
         try {
             // Runtime aggregation queries are only needed for stats WITHOUT a
             // per-stat persistent-query source — those run through the executor below.
@@ -19347,6 +19530,11 @@ class StatsGridWidgetComponent {
         return aggregationResults.get(stat.queryId) ?? null;
     }
     async loadPersistentQueryValue(source) {
+        // Empty scope (nothing in scope or lookup failed, AB#7721): no value, no
+        // query — never the persisted (unscoped) scope.
+        if (this.scopeOf(source).kind === 'empty') {
+            return null;
+        }
         try {
             const result = await firstValueFrom(this.queryExecutor.execute(source.queryFamily, source.queryRtId, {
                 fieldFilter: this.convertFiltersToDto(source.filters),
@@ -19359,6 +19547,9 @@ class StatsGridWidgetComponent {
             return null;
         }
     }
+    scopeOf(source) {
+        return this.stateService.resolveStreamDataScope(source.entitySelectorId, source.queryFamily);
+    }
     buildStreamDataArgs(source) {
         const timeArgs = this.stateService.resolveStreamDataTimeArgs(source.ignoreTimeFilter);
         const rtIds = this.stateService.resolveStreamDataRtIds(source.entitySelectorId);
@@ -22983,6 +23174,13 @@ class SummaryCardWidgetComponent {
             return;
         this._isLoading.set(true);
         this._error.set(null);
+        // Entity-selector scope (AB#7721): while a bound tile's scope is still
+        // resolving, stay in the loading state and send no query at all; the view
+        // refreshes the widget once the scope is known.
+        if (this.config.tiles.some(tile => tile.persistentQuerySource
+            && this.scopeOf(tile.persistentQuerySource).kind === 'pending')) {
+            return;
+        }
         try {
             // Cache entities by rtId to avoid duplicate fetches
             const entityCache = new Map();
@@ -23031,12 +23229,20 @@ class SummaryCardWidgetComponent {
         return null;
     }
     async fetchPersistentQueryValue(source) {
+        // Empty scope (nothing in scope or lookup failed, AB#7721): no value, no
+        // query — never the persisted (unscoped) scope.
+        if (this.scopeOf(source).kind === 'empty') {
+            return null;
+        }
         const result = await firstValueFrom(this.queryExecutor.execute(source.queryFamily, source.queryRtId, {
             fieldFilter: this.convertFiltersToDto(source.filters),
             streamDataArgs: this.buildStreamDataArgs(source)
         }));
         return extractPersistentQueryCellValue(result, source);
     }
+    scopeOf(source) {
+        return this.stateService.resolveStreamDataScope(source.entitySelectorId, source.queryFamily);
+    }
     buildStreamDataArgs(source) {
         const timeArgs = this.stateService.resolveStreamDataTimeArgs(source.ignoreTimeFilter);
         const rtIds = this.stateService.resolveStreamDataRtIds(source.entitySelectorId);
@@ -24743,6 +24949,21 @@ class ProcessDataService {
         if (!bindingQueryRtId) {
             throw new Error('Persistent query binding requires a Query rtId');
         }
+        // Entity-selector scope (AB#7721): NO query is sent while the scope is pending
+        // or empty — never the persisted (unscoped) scope. Pending → a `pending` result
+        // (the widget stays loading; a refresh follows once the scope resolves);
+        // empty → no rows.
+        const scope = this.stateService.resolveStreamDataScope(config.bindingEntitySelectorId, bindingQueryFamily);
+        if (scope.kind === 'pending') {
+            return { type: 'query', pending: true, loadedAt: new Date() };
+        }
+        if (scope.kind === 'empty') {
+            return {
+                type: 'query',
+                queryResult: this.mapExecutionResult(emptyQueryExecutionResult(bindingQueryFamily)),
+                loadedAt: new Date()
+            };
+        }
         // Convert widget filters to GraphQL format with variable resolution
         const fieldFilters = this.convertFiltersToDto(bindingFilters);
         // Execute via the unified executor — it routes runtime vs stream-data from
@@ -24971,13 +25192,16 @@ class ProcessWidgetComponent {
         this._isLoading.set(true);
         this._error.set(null);
         this._boundData.set(null);
+        // A bound entity-selector scope that is still resolving keeps the widget loading
+        // until the refresh that follows the resolution (AB#7721).
+        let scopePending = false;
         try {
             // Check for inline config first
             if (this.config.inlineConfig) {
                 this._diagramConfig.set(this.config.inlineConfig);
                 await this.loadSymbolDefinitions(this.config.inlineConfig);
                 await this.loadRuntimeData();
-                await this.loadBoundData();
+                scopePending = await this.loadBoundData();
                 return;
             }
             // Load from backend by rtId
@@ -24986,7 +25210,7 @@ class ProcessWidgetComponent {
                 this._diagramConfig.set(diagram);
                 await this.loadSymbolDefinitions(diagram);
                 await this.loadRuntimeData();
-                await this.loadBoundData();
+                scopePending = await this.loadBoundData();
                 return;
             }
             // No configuration
@@ -24997,25 +25221,32 @@ class ProcessWidgetComponent {
             this._error.set('Failed to load process diagram');
         }
         finally {
-            this._isLoading.set(false);
+            if (!scopePending) {
+                this._isLoading.set(false);
+            }
         }
     }
     /**
-     * Loads bound data based on widget data binding configuration
+     * Loads bound data based on widget data binding configuration.
+     * Returns `true` when the bound entity-selector scope is still resolving (AB#7721).
      */
     async loadBoundData() {
         // Only load if data binding is configured
         if (!this.config.dataBindingMode || this.config.dataBindingMode === 'none') {
-            return;
+            return false;
         }
         try {
             const boundData = await this.dataService.loadBoundData(this.config);
+            if (boundData?.pending) {
+                return true;
+            }
             this._boundData.set(boundData);
         }
         catch (err) {
             console.error('Error loading bound data:', err);
             // Don't set error - diagram still displays, just without bound data
         }
+        return false;
     }
     /**
      * Loads symbol definitions for all symbol instances in the diagram
@@ -32105,6 +32336,96 @@ function provideWidgetRegistrations(registrations) {
     ]);
 }
 
+/** True when the selector is configured to follow another selector. */
+function isFollowerSelector(selector) {
+    return !!selector.followsSelectorId;
+}
+/** True when the selector renders a picker in the toolbar. Followers never do. */
+function showsInToolbar(selector) {
+    return selector.showInToolbar !== false && !isFollowerSelector(selector);
+}
+/** Resolves the leader of `selector` among `selectors`. */
+function resolveFollowLeader(selectors, selector) {
+    const leaderId = selector.followsSelectorId;
+    if (!leaderId) {
+        return { kind: 'none' };
+    }
+    if (leaderId === selector.id) {
+        return { kind: 'invalid', problem: 'self', leaderId };
+    }
+    const leader = selectors.find(s => s.id === leaderId);
+    if (!leader) {
+        return { kind: 'invalid', problem: 'unknown', leaderId };
+    }
+    if (isFollowerSelector(leader)) {
+        return { kind: 'invalid', problem: 'chained', leaderId };
+    }
+    return { kind: 'leader', leader };
+}
+/**
+ * The valid followers of `leaderId`: selectors whose `followsSelectorId` is
+ * `leaderId`, provided the leader exists and is not itself a follower.
+ */
+function followersOf(selectors, leaderId) {
+    return selectors.filter(s => s.followsSelectorId === leaderId && resolveFollowLeader(selectors, s).kind === 'leader');
+}
+/**
+ * Selectors that `selectorId` may follow (the editor's "Follows" list): every
+ * other selector that does not follow one itself.
+ */
+function eligibleLeaders(selectors, selectorId) {
+    return selectors.filter(s => s.id !== selectorId && !isFollowerSelector(s));
+}
+/** Ids of the selectors that name `selectorId` as their leader (valid or not). */
+function selectorsFollowing(selectors, selectorId) {
+    return selectors.filter(s => s.id !== selectorId && s.followsSelectorId === selectorId);
+}
+/**
+ * The selector as it is resolved at runtime: a follower with a valid leader
+ * picks from the leader's CK type (the editor fixes it to the leader's anyway;
+ * this keeps an out-of-date stored type from breaking the entity fetch).
+ */
+function effectiveSelector(selectors, selector) {
+    const resolution = resolveFollowLeader(selectors, selector);
+    if (resolution.kind === 'leader' && resolution.leader.ckTypeId !== selector.ckTypeId) {
+        return { ...selector, ckTypeId: resolution.leader.ckTypeId };
+    }
+    return selector;
+}
+/**
+ * Editor validation of a "Follows" choice for the selector `selectorId`.
+ * Returns the message that tells the author why the choice is not allowed, or
+ * `null` when it is valid (including "follows nobody").
+ */
+function followValidationError(selectors, selectorId, followsSelectorId) {
+    if (!followsSelectorId) {
+        return null;
+    }
+    if (followsSelectorId === selectorId) {
+        return 'A selector cannot follow itself.';
+    }
+    const followedBy = selectorsFollowing(selectors, selectorId);
+    if (followedBy.length > 0) {
+        return `Followed by ${labelList(followedBy)} — a selector that is followed cannot follow another one.`;
+    }
+    const leader = selectors.find(s => s.id === followsSelectorId);
+    if (!leader) {
+        return `The leader '${followsSelectorId}' does not exist — pick another leader or none.`;
+    }
+    if (isFollowerSelector(leader)) {
+        return `The leader '${leader.label || leader.id}' follows another selector — pick another leader or none.`;
+    }
+    return null;
+}
+/** "A, B and C" from the selectors' labels (falling back to their ids). */
+function labelList(selectors) {
+    const labels = selectors.map(s => s.label || s.id);
+    if (labels.length <= 1) {
+        return labels.join('');
+    }
+    return `${labels.slice(0, -1).join(', ')} and ${labels[labels.length - 1]}`;
+}
+
 /**
  * Component for editing entity selector configurations in MeshBoard settings.
  * Allows adding, editing, and removing entity selectors.
@@ -32115,6 +32436,7 @@ class EntitySelectorEditorComponent {
     attributeSelectorService = inject(AttributeSelectorDialogService);
     variableService = inject(MeshBoardVariableService);
     getEntitiesByCkTypeGQL = inject(GetEntitiesByCkTypeDtoGQL);
+    confirmationService = inject(ConfirmationService, { optional: true });
     entitySelectors = [];
     /** Existing variable names from other sources (static variables, other selectors) for duplicate detection */
     existingVariableNames = [];
@@ -32143,6 +32465,10 @@ class EntitySelectorEditorComponent {
     // the association to its parent), so 'in' is the correct default for a
     // childScope that resolves a picked parent to its children.
     editChildScopeDirection = 'in';
+    // Leader/follower (AB#7722): id of the selector this one follows ('' = none).
+    editFollowsSelectorId = '';
+    /** Why choosing the leader changed the form (CK type fixed, mappings/default cleared). */
+    followNotice = '';
     // Data sources for the default entity picker (created when CK type is set)
     defaultEntityDataSource = null;
     defaultEntityDialogDataSource = null;
@@ -32162,6 +32488,8 @@ class EntitySelectorEditorComponent {
         this.editChildScopeTargetCkTypeItem = null;
         this.editChildScopeRoleId = 'System/ParentChild';
         this.editChildScopeDirection = 'in';
+        this.editFollowsSelectorId = '';
+        this.followNotice = '';
         this.defaultEntityDataSource = null;
         this.defaultEntityDialogDataSource = null;
         this.isEditing = true;
@@ -32197,6 +32525,14 @@ class EntitySelectorEditorComponent {
             : null;
         this.editChildScopeRoleId = selector.childScope?.roleId ?? 'System/ParentChild';
         this.editChildScopeDirection = selector.childScope?.direction ?? 'in';
+        this.editFollowsSelectorId = selector.followsSelectorId ?? '';
+        this.followNotice = '';
+        // A follower picks from its leader's CK type; re-sync it in case the leader's
+        // type changed after the follower was saved.
+        const leader = resolveFollowLeader(this.entitySelectors, selector);
+        if (leader.kind === 'leader' && leader.leader.ckTypeId !== this.editCkTypeId) {
+            this.applyLeaderCkType(leader.leader.ckTypeId);
+        }
         this.updateDefaultEntityDataSources();
         this.isEditing = true;
         this.editingStateChange.emit(true);
@@ -32204,10 +32540,82 @@ class EntitySelectorEditorComponent {
     /**
      * Removes an entity selector at the given index.
      */
-    removeSelector(index) {
+    async removeSelector(index) {
+        const selector = this.entitySelectors[index];
+        const followers = selector ? selectorsFollowing(this.entitySelectors, selector.id) : [];
+        if (followers.length > 0 && this.confirmationService) {
+            // AB#7722: removing a leader orphans its followers — name them.
+            const name = selector.label || selector.id;
+            const confirmed = await this.confirmationService.showDangerConfirm({
+                title: `Remove selector ${name}?`,
+                targetName: name,
+                consequence: `${labelList(followers)} ${followers.length === 1 ? 'follows' : 'follow'} this selector. `
+                    + 'Without a leader they behave as if the leader had no pick until you choose another leader.',
+                confirmText: 'Remove selector'
+            });
+            if (!confirmed)
+                return;
+        }
         this.entitySelectors = this.entitySelectors.filter((_, i) => i !== index);
         this.emitChange();
     }
+    /** Selectors the edited selector may follow (non-followers, never itself). */
+    get leaderOptions() {
+        return eligibleLeaders(this.entitySelectors, this.editId);
+    }
+    /** Selectors that follow the edited selector (it then cannot follow one itself). */
+    get followedBy() {
+        return this.editingIndex === null ? [] : selectorsFollowing(this.entitySelectors, this.editId);
+    }
+    /** True when the stored leader is not among the selectable leaders (deleted or a follower). */
+    get isLeaderUnavailable() {
+        return !!this.editFollowsSelectorId && !this.leaderOptions.some(l => l.id === this.editFollowsSelectorId);
+    }
+    /** "A, B and C" of the selectors following the edited one. */
+    get followedByLabels() {
+        return labelList(this.followedBy);
+    }
+    /** Validation message of the "Follows" choice, or '' when it is valid. */
+    get followError() {
+        return followValidationError(this.entitySelectors, this.editId, this.editFollowsSelectorId || undefined) ?? '';
+    }
+    /** True while the edited selector follows another one. */
+    get isFollower() {
+        return !!this.editFollowsSelectorId;
+    }
+    /**
+     * Handles a change of the "Follows" choice. Choosing a leader fixes the CK type
+     * to the leader's (clearing default entity and mappings with a notice when the
+     * type changes) and hides the toolbar option; back to none makes the CK type
+     * editable again with "Show in Toolbar" unchecked.
+     */
+    onFollowsChanged(leaderId) {
+        this.editFollowsSelectorId = leaderId;
+        this.followNotice = '';
+        this.editShowInToolbar = false;
+        if (!leaderId)
+            return;
+        const leader = this.entitySelectors.find(s => s.id === leaderId);
+        if (leader && leader.ckTypeId !== this.editCkTypeId) {
+            const cleared = this.editMappings.length > 0 || !!this.editDefaultRtId;
+            this.applyLeaderCkType(leader.ckTypeId);
+            this.updateDefaultEntityDataSources();
+            if (cleared) {
+                this.followNotice = `The CK type is now the leader's (${leader.ckTypeId}); `
+                    + 'the default entity and attribute mappings of the previous type were cleared.';
+            }
+        }
+    }
+    /** True when the selector names a leader that does not exist or is itself a follower. */
+    isOrphanFollower(selector) {
+        return resolveFollowLeader(this.entitySelectors, selector).kind === 'invalid';
+    }
+    applyLeaderCkType(ckTypeId) {
+        this.editCkTypeId = ckTypeId;
+        this.editCkTypeItem = { fullName: ckTypeId, rtCkTypeId: ckTypeId, isAbstract: false, isFinal: false };
+        this.editMappings = [];
+        this.editDefaultRtId = '';
+    }
     /**
      * Handles CK type selection in the editor form.
      */
@@ -32297,7 +32705,9 @@ class EntitySelectorEditorComponent {
             attributeMappings: this.editMappings,
             showInToolbar: this.editShowInToolbar,
             defaultRtId: this.editDefaultRtId.trim() || undefined,
-            childScope
+            childScope,
+            // A follower never renders a picker (AB#7722).
+            ...(this.editFollowsSelectorId ? { showInToolbar: false, followsSelectorId: this.editFollowsSelectorId } : {})
         };
         if (this.editingIndex !== null) {
             this.entitySelectors = this.entitySelectors.map((es, i) => i === this.editingIndex ? selector : es);
@@ -32325,13 +32735,18 @@ class EntitySelectorEditorComponent {
         const hasRequiredFields = this.editId.trim().length > 0 &&
             this.editLabel.trim().length > 0 &&
             this.editCkTypeId.length > 0 &&
-            this.editMappings.length > 0 &&
+            // A follower mostly exists for its child scope: mappings are optional (AB#7722).
+            (this.isFollower || this.editMappings.length > 0) &&
             this.editMappings.every(m => m.variableName.trim().length > 0 &&
                 this.isValidVariableName(m.variableName) &&
                 !this.isDuplicateVariableName(m.variableName, m.attributePath)) &&
             !this.isDuplicateId(this.editId, this.editingIndex);
-        // If not shown in toolbar, a default entity must be selected
-        if (!this.editShowInToolbar && !this.editDefaultRtId.trim()) {
+        // If not shown in toolbar, a default entity must be selected — except for a
+        // follower, which takes its leader's pick (AB#7722).
+        if (!this.isFollower && !this.editShowInToolbar && !this.editDefaultRtId.trim()) {
+            return false;
+        }
+        if (this.followError) {
             return false;
         }
         return hasRequiredFields;
@@ -32354,6 +32769,13 @@ class EntitySelectorEditorComponent {
      * Gets a display label indicating the selector mode.
      */
     getModeLabel(selector) {
+        const leader = resolveFollowLeader(this.entitySelectors, selector);
+        if (leader.kind === 'leader') {
+            return `Follows: ${leader.leader.label || leader.leader.id}`;
+        }
+        if (leader.kind === 'invalid') {
+            return 'Follows: missing';
+        }
         return selector.showInToolbar !== false ? 'Toolbar' : 'Fixed';
     }
     /**
@@ -32417,7 +32839,7 @@ class EntitySelectorEditorComponent {
         this.entitySelectorsChange.emit([...this.entitySelectors]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EntitySelectorEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: EntitySelectorEditorComponent, isStandalone: true, selector: "mm-entity-selector-editor", inputs: { entitySelectors: "entitySelectors", existingVariableNames: "existingVariableNames" }, outputs: { entitySelectorsChange: "entitySelectorsChange", editingStateChange: "editingStateChange" }, ngImport: i0, template: "<div class=\"entity-selector-editor\">\n  @if (!isEditing) {\n    <!-- Selector List -->\n    <div class=\"selector-list\">\n      @for (selector of entitySelectors; track selector.id; let i = $index) {\n        <div class=\"selector-item\">\n          <div class=\"selector-info\">\n            <span class=\"selector-label\">{{ selector.label }}</span>\n            <span class=\"selector-mode\">{{ getModeLabel(selector) }}</span>\n            <span class=\"selector-ck-type\">{{ selector.ckTypeId }}</span>\n            <span class=\"selector-mappings\">{{ getMappingSummary(selector) }}</span>\n          </div>\n          <div class=\"selector-actions\">\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"editSelector(i)\"\n              fillMode=\"flat\"\n              size=\"small\"\n              title=\"Edit selector\"\n              [attr.aria-label]=\"'Edit selector ' + (selector.label || selector.ckTypeId)\">\n            </button>\n            <button\n              kendoButton\n              [svgIcon]=\"trashIcon\"\n              (click)=\"removeSelector(i)\"\n              fillMode=\"flat\"\n              size=\"small\"\n              themeColor=\"error\"\n              title=\"Remove selector\"\n              [attr.aria-label]=\"'Remove selector ' + (selector.label || selector.ckTypeId)\"\n              class=\"remove-btn\">\n            </button>\n          </div>\n        </div>\n      }\n\n      @if (entitySelectors.length === 0) {\n        <div class=\"empty-state\">\n          No entity selectors configured. Add one to enable entity-based variables.\n        </div>\n      }\n    </div>\n\n    <div class=\"add-button-row\">\n      <button\n        kendoButton\n        [svgIcon]=\"plusIcon\"\n        (click)=\"addSelector()\"\n        themeColor=\"primary\">\n        Add Entity Selector\n      </button>\n    </div>\n  } @else {\n    <!-- Edit Form -->\n    <div class=\"edit-panel\">\n      <div class=\"edit-panel-header\">\n        {{ editingIndex !== null ? 'Edit Entity Selector' : 'New Entity Selector' }}\n      </div>\n      <div class=\"edit-form\">\n      <div class=\"form-field\">\n        <label class=\"field-label\">ID *</label>\n        <kendo-textbox\n          [(ngModel)]=\"editId\"\n          placeholder=\"e.g., mp\"\n          [readonly]=\"editingIndex !== null\">\n        </kendo-textbox>\n        @if (isDuplicateId(editId, editingIndex)) {\n          <span class=\"field-error\">ID must be unique</span>\n        }\n        <span class=\"field-hint\">Used in URL parameters (es_&lt;id&gt;=&lt;rtId&gt;)</span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Label *</label>\n        <kendo-textbox\n          [(ngModel)]=\"editLabel\"\n          placeholder=\"e.g., Metering Point\">\n        </kendo-textbox>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">CK Type *</label>\n        <mm-ck-type-selector-input\n          [ngModel]=\"editCkTypeItem\"\n          [placeholder]=\"'Select CK type...'\"\n          (ckTypeSelected)=\"onCkTypeSelected($event)\"\n          (ckTypeCleared)=\"onCkTypeCleared()\">\n        </mm-ck-type-selector-input>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Attribute Mappings *</label>\n        <button\n          kendoButton\n          (click)=\"selectAttributes()\"\n          [disabled]=\"!editCkTypeId\"\n          fillMode=\"outline\"\n          size=\"small\">\n          Select Attributes...\n        </button>\n\n        @if (editMappings.length > 0) {\n          <div class=\"mappings-list\">\n            <div class=\"mappings-header\">\n              <span class=\"mappings-header-attr\">Attribute</span>\n              <span class=\"mappings-header-var\">Variable Name</span>\n            </div>\n            @for (mapping of editMappings; track mapping.attributePath; let j = $index) {\n              <div class=\"mapping-item\">\n                <span class=\"mapping-path\">{{ mapping.attributePath }}</span>\n                <span class=\"mapping-arrow\">&rarr;</span>\n                <div class=\"mapping-var-field\">\n                  <div class=\"mapping-var-input-wrapper\">\n                    <span class=\"mapping-var-prefix\">$</span>\n                    <kendo-textbox\n                      [(ngModel)]=\"mapping.variableName\"\n                      size=\"small\"\n                      class=\"mapping-var-input\"\n                      placeholder=\"variableName\"\n                      [class.invalid]=\"getVariableNameError(mapping)\">\n                    </kendo-textbox>\n                  </div>\n                  @if (getVariableNameError(mapping); as error) {\n                    <span class=\"field-error\">{{ error }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <div class=\"checkbox-row\">\n          <input\n            type=\"checkbox\"\n            kendoCheckBox\n            [(ngModel)]=\"editShowInToolbar\"\n            id=\"showInToolbar\" />\n          <label class=\"field-label checkbox-label\" for=\"showInToolbar\">Show in Toolbar</label>\n        </div>\n        <span class=\"field-hint\">\n          @if (editShowInToolbar) {\n            Users can select an entity from a dropdown in the toolbar.\n          } @else {\n            Hidden selector \u2014 variables are resolved from the default entity below.\n          }\n        </span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Default Entity{{ !editShowInToolbar ? ' *' : '' }}</label>\n        @if (defaultEntityDataSource) {\n          <mm-entity-select-input\n            [dataSource]=\"defaultEntityDataSource\"\n            [dialogDataSource]=\"defaultEntityDialogDataSource!\"\n            [placeholder]=\"'Select default entity...'\"\n            [dialogTitle]=\"'Select Default ' + editLabel\"\n            (entitySelected)=\"onDefaultEntitySelected($event)\"\n            (entityCleared)=\"onDefaultEntityCleared()\">\n          </mm-entity-select-input>\n        } @else {\n          <span class=\"field-hint\">Select a CK type first to pick a default entity.</span>\n        }\n        @if (editDefaultRtId) {\n          <span class=\"field-hint\">Selected: {{ editDefaultRtId }}</span>\n        }\n        @if (!editShowInToolbar && !editDefaultRtId) {\n          <span class=\"field-error\">A default entity is required when not shown in toolbar.</span>\n        }\n        <span class=\"field-hint\">\n          @if (editShowInToolbar) {\n            Optional \u2014 pre-selected entity when the MeshBoard loads.\n          } @else {\n            This entity's attributes will be used to populate the variables.\n          }\n        </span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Child Scope (stream-data)</label>\n        <span class=\"field-hint\">\n          Optional. Resolves the picked entity to its child source rtIds (one\n          association hop) so a stream-data widget can scope to them \u2014 e.g. a\n          MeteringPoint resolved to its EnergyMeasurement rtIds. Leave empty to\n          scope by the picked entity's own rtId.\n        </span>\n        <mm-ck-type-selector-input\n          [ngModel]=\"editChildScopeTargetCkTypeItem\"\n          [placeholder]=\"'Child CK type (e.g. EnergyMeasurement)...'\"\n          (ckTypeSelected)=\"onChildScopeCkTypeSelected($event)\"\n          (ckTypeCleared)=\"onChildScopeCkTypeCleared()\">\n        </mm-ck-type-selector-input>\n        <kendo-textbox\n          [(ngModel)]=\"editChildScopeRoleId\"\n          placeholder=\"Association role (e.g. System/ParentChild)\">\n        </kendo-textbox>\n        <label class=\"field-label\">Direction</label>\n        <select [(ngModel)]=\"editChildScopeDirection\" class=\"child-scope-direction\">\n          <option value=\"out\">Outbound (parent \u2192 child)</option>\n          <option value=\"in\">Inbound (child \u2192 parent)</option>\n        </select>\n      </div>\n\n      <div class=\"edit-actions mm-dialog-actions\">\n        <button kendoButton (click)=\"cancelEdit()\" fillMode=\"flat\">\n          Cancel\n        </button>\n        <button\n          kendoButton\n          (click)=\"saveEdit()\"\n          [disabled]=\"!isEditValid()\"\n          themeColor=\"primary\">\n          {{ editingIndex !== null ? 'Update' : 'Add' }}\n        </button>\n      </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".entity-selector-editor{display:flex;flex-direction:column;gap:1.25rem}.selector-list{display:flex;flex-direction:column;gap:.5rem}.selector-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px}.selector-item .selector-info{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1}.selector-item .selector-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.selector-item .selector-mode{font-size:.75rem;font-weight:500;color:var(--kendo-color-info, #0288d1)}.selector-item .selector-ck-type{font-size:.8rem;color:var(--kendo-color-subtle, #757575);font-family:var(--theme-font-mono)}.selector-item .selector-mappings{font-size:.8rem;color:var(--kendo-color-primary, #3f51b5);font-family:var(--theme-font-mono)}.selector-item .selector-actions{display:flex;gap:.25rem;flex-shrink:0}.selector-item .remove-btn{color:var(--kendo-color-error, #f44336)}.empty-state{padding:1.5rem;text-align:center;color:var(--kendo-color-subtle, #757575);font-size:.875rem}.add-button-row{display:flex;justify-content:flex-start}.edit-panel{border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px;overflow:hidden}.edit-panel-header{padding:.625rem 1rem;font-weight:600;font-size:.875rem;color:var(--kendo-color-on-primary, #ffffff);background:var(--kendo-color-primary, #3f51b5)}.edit-form{display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem}.edit-form .form-field{display:flex;flex-direction:column;gap:.5rem}.edit-form .field-label{font-weight:500;font-size:.875rem;color:var(--kendo-color-on-app-surface, #424242)}.edit-form .field-hint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.edit-form .field-error{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.edit-form .checkbox-row{display:flex;align-items:center;gap:.5rem}.edit-form .checkbox-row .checkbox-label{margin:0;cursor:pointer}.mappings-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;padding:.75rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px}.mappings-header{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--kendo-color-subtle, #757575);padding-bottom:.25rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.mappings-header .mappings-header-attr{min-width:150px}.mappings-header .mappings-header-var{margin-left:1.75rem}.mapping-item{display:flex;align-items:flex-start;gap:.5rem}.mapping-item .mapping-path{font-size:.8rem;font-family:var(--theme-font-mono);color:var(--kendo-color-subtle, #757575);min-width:150px;padding-top:5px}.mapping-item .mapping-arrow{color:var(--kendo-color-subtle, #757575);flex-shrink:0;padding-top:5px}.mapping-item .mapping-var-field{display:flex;flex-direction:column;gap:2px;flex:1;min-width:100px}.mapping-item .mapping-var-input-wrapper{display:flex;align-items:center;gap:0}.mapping-item .mapping-var-prefix{font-family:var(--theme-font-mono);font-size:.875rem;font-weight:600;color:var(--kendo-color-primary, #3f51b5);padding-right:2px;flex-shrink:0}.mapping-item .mapping-var-input{flex:1}.mapping-item .mapping-var-input.invalid ::ng-deep .k-input{border-color:var(--kendo-color-error, #f44336)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: LabelModule }, { kind: "directive", type: i4$1.LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "messages", "dialogMessages", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "initialDisplayValue", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: EntitySelectorEditorComponent, isStandalone: true, selector: "mm-entity-selector-editor", inputs: { entitySelectors: "entitySelectors", existingVariableNames: "existingVariableNames" }, outputs: { entitySelectorsChange: "entitySelectorsChange", editingStateChange: "editingStateChange" }, ngImport: i0, template: "<div class=\"entity-selector-editor\">\n  @if (!isEditing) {\n    <!-- Selector List -->\n    <div class=\"selector-list\">\n      @for (selector of entitySelectors; track selector.id; let i = $index) {\n        <div class=\"selector-item\">\n          <div class=\"selector-info\">\n            <span class=\"selector-label\">{{ selector.label }}</span>\n            <span class=\"selector-mode\" [class.selector-mode-error]=\"isOrphanFollower(selector)\">{{ getModeLabel(selector) }}</span>\n            <span class=\"selector-ck-type\">{{ selector.ckTypeId }}</span>\n            <span class=\"selector-mappings\">{{ getMappingSummary(selector) }}</span>\n          </div>\n          <div class=\"selector-actions\">\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"editSelector(i)\"\n              fillMode=\"flat\"\n              size=\"small\"\n              title=\"Edit selector\"\n              [attr.aria-label]=\"'Edit selector ' + (selector.label || selector.ckTypeId)\">\n            </button>\n            <button\n              kendoButton\n              [svgIcon]=\"trashIcon\"\n              (click)=\"removeSelector(i)\"\n              fillMode=\"flat\"\n              size=\"small\"\n              themeColor=\"error\"\n              title=\"Remove selector\"\n              [attr.aria-label]=\"'Remove selector ' + (selector.label || selector.ckTypeId)\"\n              class=\"remove-btn\">\n            </button>\n          </div>\n        </div>\n      }\n\n      @if (entitySelectors.length === 0) {\n        <div class=\"empty-state\">\n          No entity selectors configured. Add one to enable entity-based variables.\n        </div>\n      }\n    </div>\n\n    <div class=\"add-button-row\">\n      <button\n        kendoButton\n        [svgIcon]=\"plusIcon\"\n        (click)=\"addSelector()\"\n        themeColor=\"primary\">\n        Add Entity Selector\n      </button>\n    </div>\n  } @else {\n    <!-- Edit Form -->\n    <div class=\"edit-panel\">\n      <div class=\"edit-panel-header\">\n        {{ editingIndex !== null ? 'Edit Entity Selector' : 'New Entity Selector' }}\n      </div>\n      <div class=\"edit-form\">\n      <div class=\"form-field\">\n        <label class=\"field-label\">ID *</label>\n        <kendo-textbox\n          [(ngModel)]=\"editId\"\n          placeholder=\"e.g., mp\"\n          [readonly]=\"editingIndex !== null\">\n        </kendo-textbox>\n        @if (isDuplicateId(editId, editingIndex)) {\n          <span class=\"field-error\">ID must be unique</span>\n        }\n        <span class=\"field-hint\">Used in URL parameters (es_&lt;id&gt;=&lt;rtId&gt;)</span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Label *</label>\n        <kendo-textbox\n          [(ngModel)]=\"editLabel\"\n          placeholder=\"e.g., Metering Point\">\n        </kendo-textbox>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\" for=\"followsSelectorId\">Follows</label>\n        <select\n          id=\"followsSelectorId\"\n          class=\"follows-select\"\n          [ngModel]=\"editFollowsSelectorId\"\n          (ngModelChange)=\"onFollowsChanged($event)\"\n          [disabled]=\"followedBy.length > 0 && !editFollowsSelectorId\">\n          <option value=\"\">\u2014 none (own picker / default entity) \u2014</option>\n          @for (leader of leaderOptions; track leader.id) {\n            <option [value]=\"leader.id\">{{ leader.label || leader.id }} ({{ leader.id }})</option>\n          }\n          @if (isLeaderUnavailable) {\n            <option [value]=\"editFollowsSelectorId\">{{ editFollowsSelectorId }} (unavailable)</option>\n          }\n        </select>\n        @if (followError) {\n          <span class=\"field-error\">{{ followError }}</span>\n        } @else if (followedBy.length > 0) {\n          <span class=\"field-hint\">Followed by {{ followedByLabels }} \u2014 a selector that is followed cannot follow another one.</span>\n        }\n        @if (followNotice) {\n          <span class=\"field-hint follow-notice\">{{ followNotice }}</span>\n        }\n        <span class=\"field-hint\">\n          Takes the pick of the selected selector. The CK type is fixed to the leader's.\n          A follower never shows a picker and is not written to the URL.\n        </span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">CK Type *</label>\n        @if (isFollower) {\n          <kendo-textbox [value]=\"editCkTypeId\" [readonly]=\"true\"></kendo-textbox>\n          <span class=\"field-hint\">Fixed to the leader's CK type.</span>\n        } @else {\n          <mm-ck-type-selector-input\n            [ngModel]=\"editCkTypeItem\"\n            [placeholder]=\"'Select CK type...'\"\n            (ckTypeSelected)=\"onCkTypeSelected($event)\"\n            (ckTypeCleared)=\"onCkTypeCleared()\">\n          </mm-ck-type-selector-input>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Attribute Mappings{{ isFollower ? '' : ' *' }}</label>\n        <button\n          kendoButton\n          (click)=\"selectAttributes()\"\n          [disabled]=\"!editCkTypeId\"\n          fillMode=\"outline\"\n          size=\"small\">\n          Select Attributes...\n        </button>\n\n        @if (editMappings.length > 0) {\n          <div class=\"mappings-list\">\n            <div class=\"mappings-header\">\n              <span class=\"mappings-header-attr\">Attribute</span>\n              <span class=\"mappings-header-var\">Variable Name</span>\n            </div>\n            @for (mapping of editMappings; track mapping.attributePath; let j = $index) {\n              <div class=\"mapping-item\">\n                <span class=\"mapping-path\">{{ mapping.attributePath }}</span>\n                <span class=\"mapping-arrow\">&rarr;</span>\n                <div class=\"mapping-var-field\">\n                  <div class=\"mapping-var-input-wrapper\">\n                    <span class=\"mapping-var-prefix\">$</span>\n                    <kendo-textbox\n                      [(ngModel)]=\"mapping.variableName\"\n                      size=\"small\"\n                      class=\"mapping-var-input\"\n                      placeholder=\"variableName\"\n                      [class.invalid]=\"getVariableNameError(mapping)\">\n                    </kendo-textbox>\n                  </div>\n                  @if (getVariableNameError(mapping); as error) {\n                    <span class=\"field-error\">{{ error }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      @if (!isFollower) {\n      <div class=\"form-field\">\n        <div class=\"checkbox-row\">\n          <input\n            type=\"checkbox\"\n            kendoCheckBox\n            [(ngModel)]=\"editShowInToolbar\"\n            id=\"showInToolbar\" />\n          <label class=\"field-label checkbox-label\" for=\"showInToolbar\">Show in Toolbar</label>\n        </div>\n        <span class=\"field-hint\">\n          @if (editShowInToolbar) {\n            Users can select an entity from a dropdown in the toolbar.\n          } @else {\n            Hidden selector \u2014 variables are resolved from the default entity below.\n          }\n        </span>\n      </div>\n      }\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Default Entity{{ !editShowInToolbar && !isFollower ? ' *' : '' }}</label>\n        @if (defaultEntityDataSource) {\n          <mm-entity-select-input\n            [dataSource]=\"defaultEntityDataSource\"\n            [dialogDataSource]=\"defaultEntityDialogDataSource!\"\n            [placeholder]=\"'Select default entity...'\"\n            [dialogTitle]=\"'Select Default ' + editLabel\"\n            (entitySelected)=\"onDefaultEntitySelected($event)\"\n            (entityCleared)=\"onDefaultEntityCleared()\">\n          </mm-entity-select-input>\n        } @else {\n          <span class=\"field-hint\">Select a CK type first to pick a default entity.</span>\n        }\n        @if (editDefaultRtId) {\n          <span class=\"field-hint\">Selected: {{ editDefaultRtId }}</span>\n        }\n        @if (!editShowInToolbar && !isFollower && !editDefaultRtId) {\n          <span class=\"field-error\">A default entity is required when not shown in toolbar.</span>\n        }\n        <span class=\"field-hint\">\n          @if (isFollower) {\n            Optional \u2014 used only while the leader has no pick.\n          } @else if (editShowInToolbar) {\n            Optional \u2014 pre-selected entity when the MeshBoard loads.\n          } @else {\n            This entity's attributes will be used to populate the variables.\n          }\n        </span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Child Scope (stream-data)</label>\n        <span class=\"field-hint\">\n          Optional. Resolves the picked entity to its child source rtIds (one\n          association hop) so a stream-data widget can scope to them \u2014 e.g. a\n          MeteringPoint resolved to its EnergyMeasurement rtIds. Leave empty to\n          scope by the picked entity's own rtId.\n        </span>\n        <mm-ck-type-selector-input\n          [ngModel]=\"editChildScopeTargetCkTypeItem\"\n          [placeholder]=\"'Child CK type (e.g. EnergyMeasurement)...'\"\n          (ckTypeSelected)=\"onChildScopeCkTypeSelected($event)\"\n          (ckTypeCleared)=\"onChildScopeCkTypeCleared()\">\n        </mm-ck-type-selector-input>\n        <kendo-textbox\n          [(ngModel)]=\"editChildScopeRoleId\"\n          placeholder=\"Association role (e.g. System/ParentChild)\">\n        </kendo-textbox>\n        <label class=\"field-label\">Direction</label>\n        <select [(ngModel)]=\"editChildScopeDirection\" class=\"child-scope-direction\">\n          <option value=\"out\">Outbound (parent \u2192 child)</option>\n          <option value=\"in\">Inbound (child \u2192 parent)</option>\n        </select>\n      </div>\n\n      <div class=\"edit-actions mm-dialog-actions\">\n        <button kendoButton (click)=\"cancelEdit()\" fillMode=\"flat\">\n          Cancel\n        </button>\n        <button\n          kendoButton\n          (click)=\"saveEdit()\"\n          [disabled]=\"!isEditValid()\"\n          themeColor=\"primary\">\n          {{ editingIndex !== null ? 'Update' : 'Add' }}\n        </button>\n      </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".entity-selector-editor{display:flex;flex-direction:column;gap:1.25rem}.selector-list{display:flex;flex-direction:column;gap:.5rem}.selector-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px}.selector-item .selector-info{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1}.selector-item .selector-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.selector-item .selector-mode{font-size:.75rem;font-weight:500;color:var(--kendo-color-info, #0288d1)}.selector-item .selector-mode-error{color:var(--kendo-color-error, #d32f2f)}.selector-item .selector-ck-type{font-size:.8rem;color:var(--kendo-color-subtle, #757575);font-family:var(--theme-font-mono)}.selector-item .selector-mappings{font-size:.8rem;color:var(--kendo-color-primary, #3f51b5);font-family:var(--theme-font-mono)}.selector-item .selector-actions{display:flex;gap:.25rem;flex-shrink:0}.selector-item .remove-btn{color:var(--kendo-color-error, #f44336)}.empty-state{padding:1.5rem;text-align:center;color:var(--kendo-color-subtle, #757575);font-size:.875rem}.add-button-row{display:flex;justify-content:flex-start}.edit-panel{border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px;overflow:hidden}.edit-panel-header{padding:.625rem 1rem;font-weight:600;font-size:.875rem;color:var(--kendo-color-on-primary, #ffffff);background:var(--kendo-color-primary, #3f51b5)}.edit-form{display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem}.edit-form .form-field{display:flex;flex-direction:column;gap:.5rem}.edit-form .field-label{font-weight:500;font-size:.875rem;color:var(--kendo-color-on-app-surface, #424242)}.edit-form .field-hint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.edit-form .field-error{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.edit-form .checkbox-row{display:flex;align-items:center;gap:.5rem}.edit-form .checkbox-row .checkbox-label{margin:0;cursor:pointer}.mappings-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;padding:.75rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px}.mappings-header{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--kendo-color-subtle, #757575);padding-bottom:.25rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.mappings-header .mappings-header-attr{min-width:150px}.mappings-header .mappings-header-var{margin-left:1.75rem}.mapping-item{display:flex;align-items:flex-start;gap:.5rem}.mapping-item .mapping-path{font-size:.8rem;font-family:var(--theme-font-mono);color:var(--kendo-color-subtle, #757575);min-width:150px;padding-top:5px}.mapping-item .mapping-arrow{color:var(--kendo-color-subtle, #757575);flex-shrink:0;padding-top:5px}.mapping-item .mapping-var-field{display:flex;flex-direction:column;gap:2px;flex:1;min-width:100px}.mapping-item .mapping-var-input-wrapper{display:flex;align-items:center;gap:0}.mapping-item .mapping-var-prefix{font-family:var(--theme-font-mono);font-size:.875rem;font-weight:600;color:var(--kendo-color-primary, #3f51b5);padding-right:2px;flex-shrink:0}.mapping-item .mapping-var-input{flex:1}.mapping-item .mapping-var-input.invalid ::ng-deep .k-input{border-color:var(--kendo-color-error, #f44336)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: LabelModule }, { kind: "directive", type: i4$1.LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "messages", "dialogMessages", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "initialDisplayValue", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EntitySelectorEditorComponent, decorators: [{
             type: Component,
@@ -32430,7 +32852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         SVGIconModule,
                         CkTypeSelectorInputComponent,
                         EntitySelectInputComponent
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"entity-selector-editor\">\n  @if (!isEditing) {\n    <!-- Selector List -->\n    <div class=\"selector-list\">\n      @for (selector of entitySelectors; track selector.id; let i = $index) {\n        <div class=\"selector-item\">\n          <div class=\"selector-info\">\n            <span class=\"selector-label\">{{ selector.label }}</span>\n            <span class=\"selector-mode\">{{ getModeLabel(selector) }}</span>\n            <span class=\"selector-ck-type\">{{ selector.ckTypeId }}</span>\n            <span class=\"selector-mappings\">{{ getMappingSummary(selector) }}</span>\n          </div>\n          <div class=\"selector-actions\">\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"editSelector(i)\"\n              fillMode=\"flat\"\n              size=\"small\"\n              title=\"Edit selector\"\n              [attr.aria-label]=\"'Edit selector ' + (selector.label || selector.ckTypeId)\">\n            </button>\n            <button\n              kendoButton\n              [svgIcon]=\"trashIcon\"\n              (click)=\"removeSelector(i)\"\n              fillMode=\"flat\"\n              size=\"small\"\n              themeColor=\"error\"\n              title=\"Remove selector\"\n              [attr.aria-label]=\"'Remove selector ' + (selector.label || selector.ckTypeId)\"\n              class=\"remove-btn\">\n            </button>\n          </div>\n        </div>\n      }\n\n      @if (entitySelectors.length === 0) {\n        <div class=\"empty-state\">\n          No entity selectors configured. Add one to enable entity-based variables.\n        </div>\n      }\n    </div>\n\n    <div class=\"add-button-row\">\n      <button\n        kendoButton\n        [svgIcon]=\"plusIcon\"\n        (click)=\"addSelector()\"\n        themeColor=\"primary\">\n        Add Entity Selector\n      </button>\n    </div>\n  } @else {\n    <!-- Edit Form -->\n    <div class=\"edit-panel\">\n      <div class=\"edit-panel-header\">\n        {{ editingIndex !== null ? 'Edit Entity Selector' : 'New Entity Selector' }}\n      </div>\n      <div class=\"edit-form\">\n      <div class=\"form-field\">\n        <label class=\"field-label\">ID *</label>\n        <kendo-textbox\n          [(ngModel)]=\"editId\"\n          placeholder=\"e.g., mp\"\n          [readonly]=\"editingIndex !== null\">\n        </kendo-textbox>\n        @if (isDuplicateId(editId, editingIndex)) {\n          <span class=\"field-error\">ID must be unique</span>\n        }\n        <span class=\"field-hint\">Used in URL parameters (es_&lt;id&gt;=&lt;rtId&gt;)</span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Label *</label>\n        <kendo-textbox\n          [(ngModel)]=\"editLabel\"\n          placeholder=\"e.g., Metering Point\">\n        </kendo-textbox>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">CK Type *</label>\n        <mm-ck-type-selector-input\n          [ngModel]=\"editCkTypeItem\"\n          [placeholder]=\"'Select CK type...'\"\n          (ckTypeSelected)=\"onCkTypeSelected($event)\"\n          (ckTypeCleared)=\"onCkTypeCleared()\">\n        </mm-ck-type-selector-input>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Attribute Mappings *</label>\n        <button\n          kendoButton\n          (click)=\"selectAttributes()\"\n          [disabled]=\"!editCkTypeId\"\n          fillMode=\"outline\"\n          size=\"small\">\n          Select Attributes...\n        </button>\n\n        @if (editMappings.length > 0) {\n          <div class=\"mappings-list\">\n            <div class=\"mappings-header\">\n              <span class=\"mappings-header-attr\">Attribute</span>\n              <span class=\"mappings-header-var\">Variable Name</span>\n            </div>\n            @for (mapping of editMappings; track mapping.attributePath; let j = $index) {\n              <div class=\"mapping-item\">\n                <span class=\"mapping-path\">{{ mapping.attributePath }}</span>\n                <span class=\"mapping-arrow\">&rarr;</span>\n                <div class=\"mapping-var-field\">\n                  <div class=\"mapping-var-input-wrapper\">\n                    <span class=\"mapping-var-prefix\">$</span>\n                    <kendo-textbox\n                      [(ngModel)]=\"mapping.variableName\"\n                      size=\"small\"\n                      class=\"mapping-var-input\"\n                      placeholder=\"variableName\"\n                      [class.invalid]=\"getVariableNameError(mapping)\">\n                    </kendo-textbox>\n                  </div>\n                  @if (getVariableNameError(mapping); as error) {\n                    <span class=\"field-error\">{{ error }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <div class=\"checkbox-row\">\n          <input\n            type=\"checkbox\"\n            kendoCheckBox\n            [(ngModel)]=\"editShowInToolbar\"\n            id=\"showInToolbar\" />\n          <label class=\"field-label checkbox-label\" for=\"showInToolbar\">Show in Toolbar</label>\n        </div>\n        <span class=\"field-hint\">\n          @if (editShowInToolbar) {\n            Users can select an entity from a dropdown in the toolbar.\n          } @else {\n            Hidden selector \u2014 variables are resolved from the default entity below.\n          }\n        </span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Default Entity{{ !editShowInToolbar ? ' *' : '' }}</label>\n        @if (defaultEntityDataSource) {\n          <mm-entity-select-input\n            [dataSource]=\"defaultEntityDataSource\"\n            [dialogDataSource]=\"defaultEntityDialogDataSource!\"\n            [placeholder]=\"'Select default entity...'\"\n            [dialogTitle]=\"'Select Default ' + editLabel\"\n            (entitySelected)=\"onDefaultEntitySelected($event)\"\n            (entityCleared)=\"onDefaultEntityCleared()\">\n          </mm-entity-select-input>\n        } @else {\n          <span class=\"field-hint\">Select a CK type first to pick a default entity.</span>\n        }\n        @if (editDefaultRtId) {\n          <span class=\"field-hint\">Selected: {{ editDefaultRtId }}</span>\n        }\n        @if (!editShowInToolbar && !editDefaultRtId) {\n          <span class=\"field-error\">A default entity is required when not shown in toolbar.</span>\n        }\n        <span class=\"field-hint\">\n          @if (editShowInToolbar) {\n            Optional \u2014 pre-selected entity when the MeshBoard loads.\n          } @else {\n            This entity's attributes will be used to populate the variables.\n          }\n        </span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Child Scope (stream-data)</label>\n        <span class=\"field-hint\">\n          Optional. Resolves the picked entity to its child source rtIds (one\n          association hop) so a stream-data widget can scope to them \u2014 e.g. a\n          MeteringPoint resolved to its EnergyMeasurement rtIds. Leave empty to\n          scope by the picked entity's own rtId.\n        </span>\n        <mm-ck-type-selector-input\n          [ngModel]=\"editChildScopeTargetCkTypeItem\"\n          [placeholder]=\"'Child CK type (e.g. EnergyMeasurement)...'\"\n          (ckTypeSelected)=\"onChildScopeCkTypeSelected($event)\"\n          (ckTypeCleared)=\"onChildScopeCkTypeCleared()\">\n        </mm-ck-type-selector-input>\n        <kendo-textbox\n          [(ngModel)]=\"editChildScopeRoleId\"\n          placeholder=\"Association role (e.g. System/ParentChild)\">\n        </kendo-textbox>\n        <label class=\"field-label\">Direction</label>\n        <select [(ngModel)]=\"editChildScopeDirection\" class=\"child-scope-direction\">\n          <option value=\"out\">Outbound (parent \u2192 child)</option>\n          <option value=\"in\">Inbound (child \u2192 parent)</option>\n        </select>\n      </div>\n\n      <div class=\"edit-actions mm-dialog-actions\">\n        <button kendoButton (click)=\"cancelEdit()\" fillMode=\"flat\">\n          Cancel\n        </button>\n        <button\n          kendoButton\n          (click)=\"saveEdit()\"\n          [disabled]=\"!isEditValid()\"\n          themeColor=\"primary\">\n          {{ editingIndex !== null ? 'Update' : 'Add' }}\n        </button>\n      </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".entity-selector-editor{display:flex;flex-direction:column;gap:1.25rem}.selector-list{display:flex;flex-direction:column;gap:.5rem}.selector-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px}.selector-item .selector-info{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1}.selector-item .selector-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.selector-item .selector-mode{font-size:.75rem;font-weight:500;color:var(--kendo-color-info, #0288d1)}.selector-item .selector-ck-type{font-size:.8rem;color:var(--kendo-color-subtle, #757575);font-family:var(--theme-font-mono)}.selector-item .selector-mappings{font-size:.8rem;color:var(--kendo-color-primary, #3f51b5);font-family:var(--theme-font-mono)}.selector-item .selector-actions{display:flex;gap:.25rem;flex-shrink:0}.selector-item .remove-btn{color:var(--kendo-color-error, #f44336)}.empty-state{padding:1.5rem;text-align:center;color:var(--kendo-color-subtle, #757575);font-size:.875rem}.add-button-row{display:flex;justify-content:flex-start}.edit-panel{border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px;overflow:hidden}.edit-panel-header{padding:.625rem 1rem;font-weight:600;font-size:.875rem;color:var(--kendo-color-on-primary, #ffffff);background:var(--kendo-color-primary, #3f51b5)}.edit-form{display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem}.edit-form .form-field{display:flex;flex-direction:column;gap:.5rem}.edit-form .field-label{font-weight:500;font-size:.875rem;color:var(--kendo-color-on-app-surface, #424242)}.edit-form .field-hint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.edit-form .field-error{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.edit-form .checkbox-row{display:flex;align-items:center;gap:.5rem}.edit-form .checkbox-row .checkbox-label{margin:0;cursor:pointer}.mappings-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;padding:.75rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px}.mappings-header{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--kendo-color-subtle, #757575);padding-bottom:.25rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.mappings-header .mappings-header-attr{min-width:150px}.mappings-header .mappings-header-var{margin-left:1.75rem}.mapping-item{display:flex;align-items:flex-start;gap:.5rem}.mapping-item .mapping-path{font-size:.8rem;font-family:var(--theme-font-mono);color:var(--kendo-color-subtle, #757575);min-width:150px;padding-top:5px}.mapping-item .mapping-arrow{color:var(--kendo-color-subtle, #757575);flex-shrink:0;padding-top:5px}.mapping-item .mapping-var-field{display:flex;flex-direction:column;gap:2px;flex:1;min-width:100px}.mapping-item .mapping-var-input-wrapper{display:flex;align-items:center;gap:0}.mapping-item .mapping-var-prefix{font-family:var(--theme-font-mono);font-size:.875rem;font-weight:600;color:var(--kendo-color-primary, #3f51b5);padding-right:2px;flex-shrink:0}.mapping-item .mapping-var-input{flex:1}.mapping-item .mapping-var-input.invalid ::ng-deep .k-input{border-color:var(--kendo-color-error, #f44336)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"entity-selector-editor\">\n  @if (!isEditing) {\n    <!-- Selector List -->\n    <div class=\"selector-list\">\n      @for (selector of entitySelectors; track selector.id; let i = $index) {\n        <div class=\"selector-item\">\n          <div class=\"selector-info\">\n            <span class=\"selector-label\">{{ selector.label }}</span>\n            <span class=\"selector-mode\" [class.selector-mode-error]=\"isOrphanFollower(selector)\">{{ getModeLabel(selector) }}</span>\n            <span class=\"selector-ck-type\">{{ selector.ckTypeId }}</span>\n            <span class=\"selector-mappings\">{{ getMappingSummary(selector) }}</span>\n          </div>\n          <div class=\"selector-actions\">\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"editSelector(i)\"\n              fillMode=\"flat\"\n              size=\"small\"\n              title=\"Edit selector\"\n              [attr.aria-label]=\"'Edit selector ' + (selector.label || selector.ckTypeId)\">\n            </button>\n            <button\n              kendoButton\n              [svgIcon]=\"trashIcon\"\n              (click)=\"removeSelector(i)\"\n              fillMode=\"flat\"\n              size=\"small\"\n              themeColor=\"error\"\n              title=\"Remove selector\"\n              [attr.aria-label]=\"'Remove selector ' + (selector.label || selector.ckTypeId)\"\n              class=\"remove-btn\">\n            </button>\n          </div>\n        </div>\n      }\n\n      @if (entitySelectors.length === 0) {\n        <div class=\"empty-state\">\n          No entity selectors configured. Add one to enable entity-based variables.\n        </div>\n      }\n    </div>\n\n    <div class=\"add-button-row\">\n      <button\n        kendoButton\n        [svgIcon]=\"plusIcon\"\n        (click)=\"addSelector()\"\n        themeColor=\"primary\">\n        Add Entity Selector\n      </button>\n    </div>\n  } @else {\n    <!-- Edit Form -->\n    <div class=\"edit-panel\">\n      <div class=\"edit-panel-header\">\n        {{ editingIndex !== null ? 'Edit Entity Selector' : 'New Entity Selector' }}\n      </div>\n      <div class=\"edit-form\">\n      <div class=\"form-field\">\n        <label class=\"field-label\">ID *</label>\n        <kendo-textbox\n          [(ngModel)]=\"editId\"\n          placeholder=\"e.g., mp\"\n          [readonly]=\"editingIndex !== null\">\n        </kendo-textbox>\n        @if (isDuplicateId(editId, editingIndex)) {\n          <span class=\"field-error\">ID must be unique</span>\n        }\n        <span class=\"field-hint\">Used in URL parameters (es_&lt;id&gt;=&lt;rtId&gt;)</span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Label *</label>\n        <kendo-textbox\n          [(ngModel)]=\"editLabel\"\n          placeholder=\"e.g., Metering Point\">\n        </kendo-textbox>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\" for=\"followsSelectorId\">Follows</label>\n        <select\n          id=\"followsSelectorId\"\n          class=\"follows-select\"\n          [ngModel]=\"editFollowsSelectorId\"\n          (ngModelChange)=\"onFollowsChanged($event)\"\n          [disabled]=\"followedBy.length > 0 && !editFollowsSelectorId\">\n          <option value=\"\">\u2014 none (own picker / default entity) \u2014</option>\n          @for (leader of leaderOptions; track leader.id) {\n            <option [value]=\"leader.id\">{{ leader.label || leader.id }} ({{ leader.id }})</option>\n          }\n          @if (isLeaderUnavailable) {\n            <option [value]=\"editFollowsSelectorId\">{{ editFollowsSelectorId }} (unavailable)</option>\n          }\n        </select>\n        @if (followError) {\n          <span class=\"field-error\">{{ followError }}</span>\n        } @else if (followedBy.length > 0) {\n          <span class=\"field-hint\">Followed by {{ followedByLabels }} \u2014 a selector that is followed cannot follow another one.</span>\n        }\n        @if (followNotice) {\n          <span class=\"field-hint follow-notice\">{{ followNotice }}</span>\n        }\n        <span class=\"field-hint\">\n          Takes the pick of the selected selector. The CK type is fixed to the leader's.\n          A follower never shows a picker and is not written to the URL.\n        </span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">CK Type *</label>\n        @if (isFollower) {\n          <kendo-textbox [value]=\"editCkTypeId\" [readonly]=\"true\"></kendo-textbox>\n          <span class=\"field-hint\">Fixed to the leader's CK type.</span>\n        } @else {\n          <mm-ck-type-selector-input\n            [ngModel]=\"editCkTypeItem\"\n            [placeholder]=\"'Select CK type...'\"\n            (ckTypeSelected)=\"onCkTypeSelected($event)\"\n            (ckTypeCleared)=\"onCkTypeCleared()\">\n          </mm-ck-type-selector-input>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Attribute Mappings{{ isFollower ? '' : ' *' }}</label>\n        <button\n          kendoButton\n          (click)=\"selectAttributes()\"\n          [disabled]=\"!editCkTypeId\"\n          fillMode=\"outline\"\n          size=\"small\">\n          Select Attributes...\n        </button>\n\n        @if (editMappings.length > 0) {\n          <div class=\"mappings-list\">\n            <div class=\"mappings-header\">\n              <span class=\"mappings-header-attr\">Attribute</span>\n              <span class=\"mappings-header-var\">Variable Name</span>\n            </div>\n            @for (mapping of editMappings; track mapping.attributePath; let j = $index) {\n              <div class=\"mapping-item\">\n                <span class=\"mapping-path\">{{ mapping.attributePath }}</span>\n                <span class=\"mapping-arrow\">&rarr;</span>\n                <div class=\"mapping-var-field\">\n                  <div class=\"mapping-var-input-wrapper\">\n                    <span class=\"mapping-var-prefix\">$</span>\n                    <kendo-textbox\n                      [(ngModel)]=\"mapping.variableName\"\n                      size=\"small\"\n                      class=\"mapping-var-input\"\n                      placeholder=\"variableName\"\n                      [class.invalid]=\"getVariableNameError(mapping)\">\n                    </kendo-textbox>\n                  </div>\n                  @if (getVariableNameError(mapping); as error) {\n                    <span class=\"field-error\">{{ error }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      @if (!isFollower) {\n      <div class=\"form-field\">\n        <div class=\"checkbox-row\">\n          <input\n            type=\"checkbox\"\n            kendoCheckBox\n            [(ngModel)]=\"editShowInToolbar\"\n            id=\"showInToolbar\" />\n          <label class=\"field-label checkbox-label\" for=\"showInToolbar\">Show in Toolbar</label>\n        </div>\n        <span class=\"field-hint\">\n          @if (editShowInToolbar) {\n            Users can select an entity from a dropdown in the toolbar.\n          } @else {\n            Hidden selector \u2014 variables are resolved from the default entity below.\n          }\n        </span>\n      </div>\n      }\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Default Entity{{ !editShowInToolbar && !isFollower ? ' *' : '' }}</label>\n        @if (defaultEntityDataSource) {\n          <mm-entity-select-input\n            [dataSource]=\"defaultEntityDataSource\"\n            [dialogDataSource]=\"defaultEntityDialogDataSource!\"\n            [placeholder]=\"'Select default entity...'\"\n            [dialogTitle]=\"'Select Default ' + editLabel\"\n            (entitySelected)=\"onDefaultEntitySelected($event)\"\n            (entityCleared)=\"onDefaultEntityCleared()\">\n          </mm-entity-select-input>\n        } @else {\n          <span class=\"field-hint\">Select a CK type first to pick a default entity.</span>\n        }\n        @if (editDefaultRtId) {\n          <span class=\"field-hint\">Selected: {{ editDefaultRtId }}</span>\n        }\n        @if (!editShowInToolbar && !isFollower && !editDefaultRtId) {\n          <span class=\"field-error\">A default entity is required when not shown in toolbar.</span>\n        }\n        <span class=\"field-hint\">\n          @if (isFollower) {\n            Optional \u2014 used only while the leader has no pick.\n          } @else if (editShowInToolbar) {\n            Optional \u2014 pre-selected entity when the MeshBoard loads.\n          } @else {\n            This entity's attributes will be used to populate the variables.\n          }\n        </span>\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"field-label\">Child Scope (stream-data)</label>\n        <span class=\"field-hint\">\n          Optional. Resolves the picked entity to its child source rtIds (one\n          association hop) so a stream-data widget can scope to them \u2014 e.g. a\n          MeteringPoint resolved to its EnergyMeasurement rtIds. Leave empty to\n          scope by the picked entity's own rtId.\n        </span>\n        <mm-ck-type-selector-input\n          [ngModel]=\"editChildScopeTargetCkTypeItem\"\n          [placeholder]=\"'Child CK type (e.g. EnergyMeasurement)...'\"\n          (ckTypeSelected)=\"onChildScopeCkTypeSelected($event)\"\n          (ckTypeCleared)=\"onChildScopeCkTypeCleared()\">\n        </mm-ck-type-selector-input>\n        <kendo-textbox\n          [(ngModel)]=\"editChildScopeRoleId\"\n          placeholder=\"Association role (e.g. System/ParentChild)\">\n        </kendo-textbox>\n        <label class=\"field-label\">Direction</label>\n        <select [(ngModel)]=\"editChildScopeDirection\" class=\"child-scope-direction\">\n          <option value=\"out\">Outbound (parent \u2192 child)</option>\n          <option value=\"in\">Inbound (child \u2192 parent)</option>\n        </select>\n      </div>\n\n      <div class=\"edit-actions mm-dialog-actions\">\n        <button kendoButton (click)=\"cancelEdit()\" fillMode=\"flat\">\n          Cancel\n        </button>\n        <button\n          kendoButton\n          (click)=\"saveEdit()\"\n          [disabled]=\"!isEditValid()\"\n          themeColor=\"primary\">\n          {{ editingIndex !== null ? 'Update' : 'Add' }}\n        </button>\n      </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".entity-selector-editor{display:flex;flex-direction:column;gap:1.25rem}.selector-list{display:flex;flex-direction:column;gap:.5rem}.selector-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px}.selector-item .selector-info{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1}.selector-item .selector-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.selector-item .selector-mode{font-size:.75rem;font-weight:500;color:var(--kendo-color-info, #0288d1)}.selector-item .selector-mode-error{color:var(--kendo-color-error, #d32f2f)}.selector-item .selector-ck-type{font-size:.8rem;color:var(--kendo-color-subtle, #757575);font-family:var(--theme-font-mono)}.selector-item .selector-mappings{font-size:.8rem;color:var(--kendo-color-primary, #3f51b5);font-family:var(--theme-font-mono)}.selector-item .selector-actions{display:flex;gap:.25rem;flex-shrink:0}.selector-item .remove-btn{color:var(--kendo-color-error, #f44336)}.empty-state{padding:1.5rem;text-align:center;color:var(--kendo-color-subtle, #757575);font-size:.875rem}.add-button-row{display:flex;justify-content:flex-start}.edit-panel{border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px;overflow:hidden}.edit-panel-header{padding:.625rem 1rem;font-weight:600;font-size:.875rem;color:var(--kendo-color-on-primary, #ffffff);background:var(--kendo-color-primary, #3f51b5)}.edit-form{display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem}.edit-form .form-field{display:flex;flex-direction:column;gap:.5rem}.edit-form .field-label{font-weight:500;font-size:.875rem;color:var(--kendo-color-on-app-surface, #424242)}.edit-form .field-hint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.edit-form .field-error{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.edit-form .checkbox-row{display:flex;align-items:center;gap:.5rem}.edit-form .checkbox-row .checkbox-label{margin:0;cursor:pointer}.mappings-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;padding:.75rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px}.mappings-header{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--kendo-color-subtle, #757575);padding-bottom:.25rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.mappings-header .mappings-header-attr{min-width:150px}.mappings-header .mappings-header-var{margin-left:1.75rem}.mapping-item{display:flex;align-items:flex-start;gap:.5rem}.mapping-item .mapping-path{font-size:.8rem;font-family:var(--theme-font-mono);color:var(--kendo-color-subtle, #757575);min-width:150px;padding-top:5px}.mapping-item .mapping-arrow{color:var(--kendo-color-subtle, #757575);flex-shrink:0;padding-top:5px}.mapping-item .mapping-var-field{display:flex;flex-direction:column;gap:2px;flex:1;min-width:100px}.mapping-item .mapping-var-input-wrapper{display:flex;align-items:center;gap:0}.mapping-item .mapping-var-prefix{font-family:var(--theme-font-mono);font-size:.875rem;font-weight:600;color:var(--kendo-color-primary, #3f51b5);padding-right:2px;flex-shrink:0}.mapping-item .mapping-var-input{flex:1}.mapping-item .mapping-var-input.invalid ::ng-deep .k-input{border-color:var(--kendo-color-error, #f44336)}\n"] }]
         }], propDecorators: { entitySelectors: [{
                 type: Input
             }], existingVariableNames: [{
@@ -32461,6 +32883,13 @@ class EntitySelectorToolbarComponent {
             this.updateDataSources();
         }
     }
+    /**
+     * True when the selector renders a picker. Hidden selectors and followers
+     * (AB#7722) never do; a follower's pick is derived from its leader.
+     */
+    showsInToolbar(selector) {
+        return showsInToolbar(selector);
+    }
     /**
      * Returns the data source for a selector.
      */
@@ -32502,7 +32931,7 @@ class EntitySelectorToolbarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EntitySelectorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: EntitySelectorToolbarComponent, isStandalone: true, selector: "mm-entity-selector-toolbar", inputs: { entitySelectors: "entitySelectors" }, outputs: { entitySelected: "entitySelected", entityCleared: "entityCleared" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"entity-selector-toolbar\">\n  @for (selector of entitySelectors; track selector.id) {\n    @if (selector.showInToolbar !== false) {\n    <div class=\"entity-selector-item\">\n      <kendo-label [text]=\"selector.label\">\n        <mm-entity-select-input\n          [dataSource]=\"getDataSource(selector)\"\n          [dialogDataSource]=\"getDialogDataSource(selector)\"\n          [initialDisplayValue]=\"selector.selectedDisplayName\"\n          [placeholder]=\"'Select ' + selector.label + '...'\"\n          [dialogTitle]=\"'Select ' + selector.label\"\n          (entitySelected)=\"onEntitySelected(selector.id, $event)\"\n          (entityCleared)=\"onEntityCleared(selector.id)\">\n        </mm-entity-select-input>\n      </kendo-label>\n    </div>\n    }\n  }\n</div>\n", styles: [".entity-selector-toolbar{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}.entity-selector-item{display:flex;flex-direction:column}.entity-selector-item kendo-label{display:flex;flex-direction:column;gap:.25rem}.entity-selector-item mm-entity-select-input{min-width:200px;max-width:300px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i4$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "initialDisplayValue", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: EntitySelectorToolbarComponent, isStandalone: true, selector: "mm-entity-selector-toolbar", inputs: { entitySelectors: "entitySelectors" }, outputs: { entitySelected: "entitySelected", entityCleared: "entityCleared" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"entity-selector-toolbar\">\n  @for (selector of entitySelectors; track selector.id) {\n    @if (showsInToolbar(selector)) {\n    <div class=\"entity-selector-item\">\n      <kendo-label [text]=\"selector.label\">\n        <mm-entity-select-input\n          [dataSource]=\"getDataSource(selector)\"\n          [dialogDataSource]=\"getDialogDataSource(selector)\"\n          [initialDisplayValue]=\"selector.selectedDisplayName\"\n          [placeholder]=\"'Select ' + selector.label + '...'\"\n          [dialogTitle]=\"'Select ' + selector.label\"\n          (entitySelected)=\"onEntitySelected(selector.id, $event)\"\n          (entityCleared)=\"onEntityCleared(selector.id)\">\n        </mm-entity-select-input>\n      </kendo-label>\n    </div>\n    }\n  }\n</div>\n", styles: [".entity-selector-toolbar{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}.entity-selector-item{display:flex;flex-direction:column}.entity-selector-item kendo-label{display:flex;flex-direction:column;gap:.25rem}.entity-selector-item mm-entity-select-input{min-width:200px;max-width:300px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i4$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "initialDisplayValue", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EntitySelectorToolbarComponent, decorators: [{
             type: Component,
@@ -32510,7 +32939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         CommonModule,
                         KENDO_LABELS,
                         EntitySelectInputComponent
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"entity-selector-toolbar\">\n  @for (selector of entitySelectors; track selector.id) {\n    @if (selector.showInToolbar !== false) {\n    <div class=\"entity-selector-item\">\n      <kendo-label [text]=\"selector.label\">\n        <mm-entity-select-input\n          [dataSource]=\"getDataSource(selector)\"\n          [dialogDataSource]=\"getDialogDataSource(selector)\"\n          [initialDisplayValue]=\"selector.selectedDisplayName\"\n          [placeholder]=\"'Select ' + selector.label + '...'\"\n          [dialogTitle]=\"'Select ' + selector.label\"\n          (entitySelected)=\"onEntitySelected(selector.id, $event)\"\n          (entityCleared)=\"onEntityCleared(selector.id)\">\n        </mm-entity-select-input>\n      </kendo-label>\n    </div>\n    }\n  }\n</div>\n", styles: [".entity-selector-toolbar{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}.entity-selector-item{display:flex;flex-direction:column}.entity-selector-item kendo-label{display:flex;flex-direction:column;gap:.25rem}.entity-selector-item mm-entity-select-input{min-width:200px;max-width:300px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"entity-selector-toolbar\">\n  @for (selector of entitySelectors; track selector.id) {\n    @if (showsInToolbar(selector)) {\n    <div class=\"entity-selector-item\">\n      <kendo-label [text]=\"selector.label\">\n        <mm-entity-select-input\n          [dataSource]=\"getDataSource(selector)\"\n          [dialogDataSource]=\"getDialogDataSource(selector)\"\n          [initialDisplayValue]=\"selector.selectedDisplayName\"\n          [placeholder]=\"'Select ' + selector.label + '...'\"\n          [dialogTitle]=\"'Select ' + selector.label\"\n          (entitySelected)=\"onEntitySelected(selector.id, $event)\"\n          (entityCleared)=\"onEntityCleared(selector.id)\">\n        </mm-entity-select-input>\n      </kendo-label>\n    </div>\n    }\n  }\n</div>\n", styles: [".entity-selector-toolbar{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}.entity-selector-item{display:flex;flex-direction:column}.entity-selector-item kendo-label{display:flex;flex-direction:column;gap:.25rem}.entity-selector-item mm-entity-select-input{min-width:200px;max-width:300px}\n"] }]
         }], propDecorators: { entitySelectors: [{
                 type: Input
             }], entitySelected: [{
@@ -34358,13 +34787,13 @@ class MeshBoardViewComponent {
     // Entity Selector computed signals
     entitySelectorsConfig = computed(() => this.stateService.getEntitySelectors(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "entitySelectorsConfig" }] : /* istanbul ignore next */ []));
-    hasEntitySelectors = computed(() => !this.hideEntitySelectors() && (this.entitySelectorsConfig()?.some(es => es.showInToolbar !== false) ?? false), /* @ts-ignore */
+    hasEntitySelectors = computed(() => !this.hideEntitySelectors() && (this.entitySelectorsConfig()?.some(es => showsInToolbar(es)) ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasEntitySelectors" }] : /* istanbul ignore next */ []));
     unselectedToolbarSelectors = computed(() => {
         if (this.hideEntitySelectors())
             return [];
         const selectors = this.entitySelectorsConfig() ?? [];
-        return selectors.filter(es => es.showInToolbar !== false && !es.selectedRtId);
+        return selectors.filter(es => showsInToolbar(es) && !es.selectedRtId);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "unselectedToolbarSelectors" }] : /* istanbul ignore next */ []));
     /**
@@ -34381,6 +34810,7 @@ class MeshBoardViewComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canResetTimeFilter" }] : /* istanbul ignore next */ []));
     constructor() {
+        this.messages = injectMeshBoardMessages();
         // Effect to sync URL when dashboard changes (after initial load)
         effect(() => {
             const currentRtId = this.stateService.persistedMeshBoardId();
@@ -34495,6 +34925,7 @@ class MeshBoardViewComponent {
                 // Load MeshBoard by well-known name from route data
                 const widgets = await this.stateService.switchToMeshBoardByWellKnownName(wellKnownName);
                 if (widgets) {
+                    this.primeEntitySelectorScopes();
                     await this.preloadWidgetData(widgets);
                 }
                 else {
@@ -34505,6 +34936,7 @@ class MeshBoardViewComponent {
             else {
                 // Load initial MeshBoard (first available)
                 const widgets = await this.stateService.loadInitialMeshBoard();
+                this.primeEntitySelectorScopes();
                 await this.preloadWidgetData(widgets);
             }
             // Initialize time filter variables if enabled with stored selection
@@ -34566,11 +34998,13 @@ class MeshBoardViewComponent {
         if (exists) {
             // Switch to the requested MeshBoard
             const switchedWidgets = await this.stateService.switchToMeshBoard(rtId);
+            this.primeEntitySelectorScopes();
             await this.preloadWidgetData(switchedWidgets);
         }
         else {
             // MeshBoard not found - use whatever was loaded initially
             console.warn(`MeshBoard with rtId ${rtId} not found, using default`);
+            this.primeEntitySelectorScopes();
             await this.preloadWidgetData(widgets);
         }
     }
@@ -34877,6 +35311,11 @@ class MeshBoardViewComponent {
             console.warn(`Entity selector '${selectorId}' not found`);
             return;
         }
+        if (isFollowerSelector(selector)) {
+            // A follower's pick is derived from its leader (AB#7722).
+            console.warn(`Entity selector '${selectorId}' follows '${selector.followsSelectorId}' and cannot be set directly`);
+            return;
+        }
         // Update selection state
         this.stateService.updateEntitySelectorSelection(selectorId, rtId, displayName);
         // Fetch entity and set variables from attribute mappings
@@ -34891,12 +35330,80 @@ class MeshBoardViewComponent {
      * Programmatically clears an entity selector value from outside the component.
      */
     clearEntitySelector(selectorId) {
+        const selector = this.stateService.getEntitySelector(selectorId);
+        if (selector && isFollowerSelector(selector)) {
+            console.warn(`Entity selector '${selectorId}' follows '${selector.followsSelectorId}' and cannot be cleared directly`);
+            return;
+        }
+        this.clearSelectorPick(selectorId);
+        // Followers fall back to their own defaultRtId, or to no scope (AB#7722).
+        const followers = this.resetFollowersOf(selectorId);
+        this.stateService.triggerRefresh();
+        if (followers) {
+            void followers.then(() => this.stateService.triggerRefresh());
+        }
+    }
+    /**
+     * Clears one selector's pick, variables and scope state. Without a pick bound
+     * widgets fall back to the persisted scope (AB#7721).
+     */
+    clearSelectorPick(selectorId) {
         this.stateService.updateEntitySelectorSelection(selectorId, undefined);
         this.stateService.clearEntitySelectorVariables(selectorId);
-        this.stateService.triggerRefresh();
+        this.scopeRequestSeq.set(selectorId, (this.scopeRequestSeq.get(selectorId) ?? 0) + 1);
+        this.stateService.clearEntitySelectorRtIds(selectorId);
+    }
+    /**
+     * The leader `leaderId` has no pick any more: each of its followers resolves
+     * its own `defaultRtId`, or — without one — has no pick and no scope
+     * (AB#7722). Followers with a default are marked pending synchronously.
+     * Returns a promise for the default resolutions, or `null` when there are none.
+     */
+    resetFollowersOf(leaderId) {
+        const followers = followersOf(this.stateService.getEntitySelectors(), leaderId);
+        const resolutions = [];
+        for (const follower of followers) {
+            if (follower.defaultRtId) {
+                const rtId = follower.defaultRtId;
+                const resolution = this.resolveEntitySelectorVariables(follower, rtId);
+                // The resolution marked the follower pending synchronously; remember
+                // its sequence so a leader pick made meanwhile keeps its selection.
+                const seq = this.scopeRequestSeq.get(follower.id);
+                resolutions.push(resolution.then(displayName => {
+                    if (this.scopeRequestSeq.get(follower.id) === seq) {
+                        this.stateService.updateEntitySelectorSelection(follower.id, rtId, displayName);
+                    }
+                }));
+            }
+            else {
+                this.clearSelectorPick(follower.id);
+            }
+        }
+        return resolutions.length > 0 ? Promise.all(resolutions).then(() => undefined) : null;
     }
     /** Resolution errors for runtime entity variables */
     variableResolutionErrors = this.stateService.variableResolutionErrors;
+    // Assigned in the constructor: a field initialised from a relative import breaks under the
+    // Vitest module runner (see the frontend-libraries CLAUDE.md).
+    messages;
+    /**
+     * One notice per entity selector whose stream-data scope could not be
+     * resolved (AB#7721), so "nothing in scope" (empty widgets, no notice) and
+     * "lookup failed" (empty widgets plus this notice) are distinguishable.
+     */
+    scopeResolutionErrors = computed(() => {
+        const template = this.messages().scopeResolutionFailed;
+        return this.stateService.failedEntitySelectorScopeIds().map(id => {
+            const label = this.stateService.getEntitySelector(id)?.label || id;
+            return { selectorId: id, message: template.split('{label}').join(label) };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scopeResolutionErrors" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-selector sequence number of the latest scope resolution, so a slower
+     * resolution of an earlier pick never overwrites the scope of a newer pick.
+     */
+    scopeRequestSeq = new Map();
     // ============================================================================
     // Time Filter Event Handlers
     // ============================================================================
@@ -35330,7 +35837,8 @@ class MeshBoardViewComponent {
     async onEntitySelectorSelected(event) {
         const { selectorId, entity } = event;
         const selector = this.stateService.getEntitySelector(selectorId);
-        if (!selector)
+        // Followers render no picker; their pick is derived from the leader (AB#7722).
+        if (!selector || isFollowerSelector(selector))
             return;
         // Update selector selection state
         this.stateService.updateEntitySelectorSelection(selectorId, entity.rtId, entity.displayName);
@@ -35347,12 +35855,14 @@ class MeshBoardViewComponent {
      */
     async onEntitySelectorCleared(event) {
         const { selectorId } = event;
-        // Clear selection state
-        this.stateService.updateEntitySelectorSelection(selectorId, undefined);
-        // Clear variables for this selector
-        this.stateService.clearEntitySelectorVariables(selectorId);
-        // Clear the resolved stream-data scope rtIds for this selector
-        this.stateService.clearEntitySelectorRtIds(selectorId);
+        const selector = this.stateService.getEntitySelector(selectorId);
+        if (selector && isFollowerSelector(selector))
+            return;
+        // Clear selection, variables and the resolved stream-data scope: without a
+        // pick bound widgets fall back to the persisted scope (AB#7721).
+        this.clearSelectorPick(selectorId);
+        // Followers fall back to their own defaultRtId, or to no scope (AB#7722).
+        await this.resetFollowersOf(selectorId);
         // Sync to URL
         this.writeEntitySelectorsToUrl();
         // Refresh widgets
@@ -35362,84 +35872,179 @@ class MeshBoardViewComponent {
      * Initializes entity selectors from URL params, route data, or defaults.
      */
     async initializeEntitySelectors() {
+        const picks = this.initialEntitySelectorPicks(true);
+        if (picks.length === 0)
+            return;
+        // Mark every picked scope pending before the first await, so no bound
+        // widget queries the persisted scope while the picks resolve (AB#7721).
+        this.primeEntitySelectorScopes();
+        for (const { selector, rtId, viaLeader } of picks) {
+            // A follower whose leader has a pick is resolved together with the
+            // leader (one entity fetch, AB#7722).
+            if (viaLeader)
+                continue;
+            const displayName = await this.resolveEntitySelectorVariables(selector, rtId);
+            this.stateService.updateEntitySelectorSelection(selector.id, rtId, displayName);
+        }
+        // Widgets reload only when their config reference changes. Bound widgets
+        // rendered while their scope was pending must now load with the resolved
+        // scope (AB#7721).
+        this.stateService.triggerRefresh();
+    }
+    /**
+     * The initial pick of each entity selector. Priority: route data > URL
+     * params > defaultRtId. Selectors without a pick are left out.
+     *
+     * Followers (AB#7722) never read route data or the URL: a follower takes its
+     * leader's initial pick (`viaLeader: true`, resolved together with the
+     * leader) and falls back to its own `defaultRtId` only when the leader has
+     * none. An unknown or chained leader counts as "leader has no pick"; with
+     * `warn` set this logs a console warning.
+     */
+    initialEntitySelectorPicks(warn = false) {
         const selectors = this.stateService.getEntitySelectors();
         if (selectors.length === 0)
-            return;
-        // Read URL params
+            return [];
         const urlSelections = this.readEntitySelectorsFromUrl();
-        // Read route data
         const routeData = this.route.snapshot.data['entitySelectors'];
+        const ownPick = (selector) => routeData?.[selector.id] ?? urlSelections.get(selector.id) ?? selector.defaultRtId;
+        const picks = [];
         for (const selector of selectors) {
-            // Priority: route data > URL params > defaultRtId
-            const rtId = routeData?.[selector.id]
-                ?? urlSelections.get(selector.id)
-                ?? selector.defaultRtId;
-            if (rtId) {
-                const displayName = await this.resolveEntitySelectorVariables(selector, rtId);
-                this.stateService.updateEntitySelectorSelection(selector.id, rtId, displayName);
+            const leader = resolveFollowLeader(selectors, selector);
+            if (leader.kind === 'none') {
+                const rtId = ownPick(selector);
+                if (rtId)
+                    picks.push({ selector, rtId, viaLeader: false });
+                continue;
+            }
+            if (leader.kind === 'invalid' && warn) {
+                console.warn(`Entity selector '${selector.id}' follows '${leader.leaderId}', which ${leader.problem === 'unknown' ? 'does not exist' : leader.problem === 'self' ? 'is itself' : 'follows another selector'} — treated as "leader has no pick"`);
+            }
+            const leaderRtId = leader.kind === 'leader' ? ownPick(leader.leader) : undefined;
+            if (leaderRtId) {
+                picks.push({ selector, rtId: leaderRtId, viaLeader: true });
+            }
+            else if (selector.defaultRtId) {
+                picks.push({ selector, rtId: selector.defaultRtId, viaLeader: false });
+            }
+        }
+        return picks;
+    }
+    /**
+     * Marks the scope of every selector that has an initial pick as pending
+     * (AB#7721). Called synchronously right after a board is loaded, before
+     * change detection renders its widgets, so a bound stream-data widget starts
+     * in its loading state instead of querying the persisted (unscoped) scope.
+     * Selectors without a pick stay without scope state (persisted scope).
+     */
+    primeEntitySelectorScopes() {
+        for (const { selector } of this.initialEntitySelectorPicks()) {
+            if (!this.stateService.getEntitySelectorScopeState(selector.id)) {
+                this.stateService.setEntitySelectorScopePending(selector.id);
             }
         }
     }
     /**
-     * Resolves variables for an entity selector by fetching entity attributes.
+     * Resolves variables for an entity selector by fetching entity attributes,
+     * then its stream-data scope.
+     *
+     * A leader's pick is also the pick of all its followers (AB#7722): they are
+     * marked pending together with the leader, the picked entity is fetched
+     * once, and each follower gets its own variables (its attribute mappings,
+     * `<id>_rtId`, `<id>_rtCkTypeId`), its own scope (its `childScope`) and the
+     * leader's selection. Returns the picked entity's display name.
      */
     async resolveEntitySelectorVariables(selector, rtId) {
+        const selectors = this.stateService.getEntitySelectors();
+        const resolved = effectiveSelector(selectors, selector);
+        const followers = followersOf(selectors, selector.id).map(f => effectiveSelector(selectors, f));
+        const targets = [resolved, ...followers];
+        // The scope of the new pick is unknown until it resolves: bound widgets
+        // must neither keep the previous pick's scope nor fall back to the
+        // persisted one (AB#7721). Followers are pending while the leader is.
+        const seqs = targets.map(t => this.beginScopeResolution(t.id));
+        const failAll = () => targets.forEach((t, i) => this.failScopeResolution(t.id, seqs[i]));
         try {
             const entity = await firstValueFrom(this.dataService.fetchRuntimeEntity({
                 type: 'runtimeEntity',
-                ckTypeId: selector.ckTypeId,
+                ckTypeId: resolved.ckTypeId,
                 rtId
             }));
             if (!entity) {
                 console.warn(`Entity not found for selector '${selector.id}': ${rtId}`);
+                // The pick cannot be resolved: bound widgets show no data instead of
+                // waiting forever or falling back to the persisted scope (AB#7721).
+                failAll();
                 return undefined;
             }
-            const values = selector.attributeMappings.map(mapping => {
-                const attr = entity.attributes.find(a => a.attributeName === mapping.attributePath);
-                return {
-                    name: mapping.variableName,
-                    value: attr ? String(attr.value ?? '') : '',
-                    type: mapping.attributeValueType
-                        ? this.variableService.mapAttributeTypeToVariableType(mapping.attributeValueType)
-                        : 'string'
-                };
+            // A newer pick (of the leader, or a follower's own default) may have
+            // started meanwhile; never overwrite its variables or selection.
+            const isCurrent = (i) => this.scopeRequestSeq.get(targets[i].id) === seqs[i];
+            targets.forEach((target, i) => {
+                if (isCurrent(i)) {
+                    this.stateService.setEntitySelectorVariables(target.id, this.selectorVariables(target, entity, rtId));
+                }
             });
-            // Auto-expose the selected entity's rtId as `$<selectorId>_rtId` so SD/runtime
-            // widgets can scope to the picked asset (parent-association filter) without the
-            // designer adding a fake attribute mapping. An explicit mapping to the same
-            // variable name wins (skip the synthetic one if already present).
-            const rtIdVariableName = `${selector.id}_rtId`;
-            if (!values.some(v => v.name === rtIdVariableName)) {
-                values.push({ name: rtIdVariableName, value: rtId, type: 'string' });
-            }
-            // Auto-expose the selected entity's CK type as `$<selectorId>_rtCkTypeId`
-            // so entity-display widgets (e.g. the entity card) can resolve both the
-            // rtId and its type from a single board-level selection. Prefer the picked
-            // entity's actual type (it may be a subtype of the selector's configured
-            // `ckTypeId`); fall back to the selector's type. An explicit mapping to the
-            // same variable name wins.
-            const rtCkTypeIdVariableName = `${selector.id}_rtCkTypeId`;
-            if (!values.some(v => v.name === rtCkTypeIdVariableName)) {
-                values.push({ name: rtCkTypeIdVariableName, value: entity.ckTypeId ?? selector.ckTypeId, type: 'string' });
-            }
-            this.stateService.setEntitySelectorVariables(selector.id, values);
-            // Resolve the stream-data scope rtIds for this selection (one-hop
-            // childScope traversal, or the picked entity itself). Runs alongside the
-            // variable resolution so widgets bound to this selector can scope their
-            // stream-data query by the resolved source rtIds.
-            await this.resolveEntitySelectorScopeRtIds(selector, rtId);
             // Label the selection the way the pick dialog does: by the engine's
             // display name (the type's displayNameRule — "2026" for a fiscal year),
             // not the well-known name, which most entities do not carry. Without it
             // a board opened on its defaultRtId showed the raw rtId in the toolbar
             // until the user re-picked the very same entity.
-            return entity.rtDisplayName || entity.rtWellKnownName || entity.rtId;
+            const displayName = entity.rtDisplayName || entity.rtWellKnownName || entity.rtId;
+            followers.forEach((follower, i) => {
+                if (isCurrent(i + 1)) {
+                    this.stateService.updateEntitySelectorSelection(follower.id, rtId, displayName);
+                }
+            });
+            // Resolve the stream-data scope rtIds for this selection (one-hop
+            // childScope traversal, or the picked entity itself), per selector, so
+            // widgets bound to the leader or any follower scope their stream-data
+            // query by the resolved source rtIds.
+            await Promise.all(targets.map((t, i) => this.resolveEntitySelectorScopeRtIds(t, rtId, seqs[i])));
+            return displayName;
         }
         catch (error) {
             console.error(`Error resolving entity selector '${selector.id}':`, error);
+            // Same as above: a failed pick is an empty scope, never the persisted one.
+            failAll();
             return undefined;
         }
     }
+    /**
+     * The variables one selector derives from the picked entity: its attribute
+     * mappings plus the auto-exposed `<id>_rtId` and `<id>_rtCkTypeId`.
+     */
+    selectorVariables(selector, entity, rtId) {
+        const values = selector.attributeMappings.map(mapping => {
+            const attr = entity.attributes.find(a => a.attributeName === mapping.attributePath);
+            return {
+                name: mapping.variableName,
+                value: attr ? String(attr.value ?? '') : '',
+                type: mapping.attributeValueType
+                    ? this.variableService.mapAttributeTypeToVariableType(mapping.attributeValueType)
+                    : 'string'
+            };
+        });
+        // Auto-expose the selected entity's rtId as `$<selectorId>_rtId` so SD/runtime
+        // widgets can scope to the picked asset (parent-association filter) without the
+        // designer adding a fake attribute mapping. An explicit mapping to the same
+        // variable name wins (skip the synthetic one if already present).
+        const rtIdVariableName = `${selector.id}_rtId`;
+        if (!values.some(v => v.name === rtIdVariableName)) {
+            values.push({ name: rtIdVariableName, value: rtId, type: 'string' });
+        }
+        // Auto-expose the selected entity's CK type as `$<selectorId>_rtCkTypeId`
+        // so entity-display widgets (e.g. the entity card) can resolve both the
+        // rtId and its type from a single board-level selection. Prefer the picked
+        // entity's actual type (it may be a subtype of the selector's configured
+        // `ckTypeId`); fall back to the selector's type. An explicit mapping to the
+        // same variable name wins.
+        const rtCkTypeIdVariableName = `${selector.id}_rtCkTypeId`;
+        if (!values.some(v => v.name === rtCkTypeIdVariableName)) {
+            values.push({ name: rtCkTypeIdVariableName, value: entity.ckTypeId ?? selector.ckTypeId, type: 'string' });
+        }
+        return values;
+    }
     /**
      * Resolves the set of source rtIds that a stream-data widget bound to this
      * selector should be scoped to, and caches them on the state service.
@@ -35449,7 +36054,10 @@ class MeshBoardViewComponent {
      * become the scope (e.g. MeteringPoint → its EnergyMeasurement rtIds). With
      * no childScope, the picked entity's own rtId is the scope (direct keying).
      */
-    async resolveEntitySelectorScopeRtIds(selector, rtId) {
+    async resolveEntitySelectorScopeRtIds(selector, rtId, seq) {
+        const isCurrent = () => this.scopeRequestSeq.get(selector.id) === seq;
+        if (!isCurrent())
+            return;
         const childScope = selector.childScope;
         if (!childScope?.targetCkTypeId || !childScope.roleId) {
             this.stateService.setEntitySelectorRtIds(selector.id, [rtId]);
@@ -35460,16 +36068,39 @@ class MeshBoardViewComponent {
             // Parent → children via System/ParentChild is an INBOUND hop (the child
             // owns the association to its parent), so 'in' is the default.
             childScope.direction ?? 'in'));
+            if (!isCurrent())
+                return;
             const childRtIds = (targets ?? [])
                 .map(t => String(t.rtId))
                 .filter(id => id.length > 0);
+            // An empty list is a resolved EMPTY scope: bound widgets show no data and
+            // send no query — never the persisted scope, which would show rows of
+            // other entities (AB#7721).
             this.stateService.setEntitySelectorRtIds(selector.id, childRtIds);
         }
         catch (error) {
+            if (!isCurrent())
+                return;
+            // Logged once per failed resolution; the view shows a notice and bound
+            // widgets show no data (AB#7721).
             console.error(`Error resolving child scope for selector '${selector.id}':`, error);
-            // Empty scope is safer than a stale one: the bound widget falls back to
-            // its persisted scope rather than querying the wrong asset.
-            this.stateService.setEntitySelectorRtIds(selector.id, []);
+            this.stateService.setEntitySelectorScopeFailed(selector.id);
+        }
+    }
+    /**
+     * Starts the scope resolution of a new pick: marks the scope pending and
+     * returns the sequence number that identifies this resolution (AB#7721).
+     */
+    beginScopeResolution(selectorId) {
+        const seq = (this.scopeRequestSeq.get(selectorId) ?? 0) + 1;
+        this.scopeRequestSeq.set(selectorId, seq);
+        this.stateService.setEntitySelectorScopePending(selectorId);
+        return seq;
+    }
+    /** Marks the scope failed — unless a newer pick has started resolving meanwhile. */
+    failScopeResolution(selectorId, seq) {
+        if (this.scopeRequestSeq.get(selectorId) === seq) {
+            this.stateService.setEntitySelectorScopeFailed(selectorId);
         }
     }
     /**
@@ -35480,6 +36111,9 @@ class MeshBoardViewComponent {
         const selectors = this.stateService.getEntitySelectors();
         const params = {};
         for (const selector of selectors) {
+            // Followers are derived from their leader and never serialized (AB#7722).
+            if (isFollowerSelector(selector))
+                continue;
             params[`es_${selector.id}`] = selector.selectedRtId ?? null;
         }
         // Same single-URL serialization as writeTimeFilterToUrl: no relative
@@ -35533,7 +36167,7 @@ class MeshBoardViewComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MeshBoardViewComponent, isStandalone: true, selector: "mm-meshboard-view", inputs: { headerMode: { classPropertyName: "headerMode", publicName: "headerMode", isSignal: true, isRequired: false, transformFunction: null }, chrome: { classPropertyName: "chrome", publicName: "chrome", isSignal: true, isRequired: false, transformFunction: null } }, 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\" [class.chrome-plain]=\"effectiveChrome() === 'plain'\">\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 (headerMode: full = name + description + controls, compact = controls only, none = no row) -->\n    @if (effectiveHeaderMode() !== 'none') {\n      <div class=\"meshboard-toolbar\" [class.compact]=\"effectiveHeaderMode() === 'compact'\">\n        @if (effectiveHeaderMode() === 'full') {\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\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                aria-label=\"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              aria-label=\"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              aria-label=\"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            aria-label=\"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                aria-label=\"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                aria-label=\"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\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                [attr.aria-label]=\"'Move up ' + widget.title\">\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                [attr.aria-label]=\"'Move down ' + widget.title\">\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                  [attr.aria-label]=\"(isWidgetUnconfigured(widget) ? 'Configure data source (required) ' : 'Configure data source ') + widget.title\">\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                [attr.aria-label]=\"'Edit widget ' + widget.title\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"trashIcon\"\n                (click)=\"removeWidget(widget.id)\"\n                fillMode=\"flat\"\n                themeColor=\"error\"\n                size=\"small\"\n                class=\"remove-widget-btn\"\n                title=\"Delete widget\"\n                [attr.aria-label]=\"'Delete widget ' + widget.title\">\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                  [attr.aria-label]=\"(isWidgetUnconfigured(widget) ? 'Configure data source (required) ' : 'Configure data source ') + widget.title\">\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                      [attr.aria-label]=\"'Edit position ' + widget.title\">\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                      [attr.aria-label]=\"'Duplicate widget ' + widget.title\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      themeColor=\"error\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\"\n                [attr.aria-label]=\"'Delete widget ' + widget.title\">\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      <mm-meshboard-empty-state [readonly]=\"isReadonly()\" (addWidget)=\"openAddWidget()\"></mm-meshboard-empty-state>\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:var(--theme-font-mono);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}.meshboard-toolbar.compact{justify-content:flex-end;align-items:center;padding:.25rem 1.5rem 0;background-color:transparent;border-bottom:none}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}.meshboard-toolbar.compact{align-items:flex-end;padding:.25rem 1rem 0}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;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}.banner-edit-header .widget-actions{display:flex;gap:2px}.meshboard-view.chrome-plain{background:transparent!important}.meshboard-view.chrome-plain .meshboard-toolbar{padding:0 0 var(--theme-space-3, 12px);background:transparent!important;border-bottom:none!important}.meshboard-view.chrome-plain kendo-tilelayout{padding:0!important}.meshboard-view.chrome-plain .banner-zone-item:not(.banner-edit){padding-left:0;padding-right:0}\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"] }, { kind: "component", type: MeshBoardEmptyStateComponent, selector: "mm-meshboard-empty-state", inputs: ["readonly"], outputs: ["addWidget"] }], 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\" [class.chrome-plain]=\"effectiveChrome() === 'plain'\">\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 (headerMode: full = name + description + controls, compact = controls only, none = no row) -->\n    @if (effectiveHeaderMode() !== 'none') {\n      <div class=\"meshboard-toolbar\" [class.compact]=\"effectiveHeaderMode() === 'compact'\">\n        @if (effectiveHeaderMode() === 'full') {\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\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                aria-label=\"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              aria-label=\"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              aria-label=\"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            aria-label=\"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                aria-label=\"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                aria-label=\"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\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    <!-- Entity selector scopes that could not be resolved (AB#7721) -->\n    @if (scopeResolutionErrors().length > 0) {\n      <div class=\"variable-resolution-errors scope-resolution-errors\" role=\"status\">\n        @for (error of scopeResolutionErrors(); track error.selectorId) {\n          <span class=\"error-item\">{{ 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                [attr.aria-label]=\"'Move up ' + widget.title\">\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                [attr.aria-label]=\"'Move down ' + widget.title\">\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                  [attr.aria-label]=\"(isWidgetUnconfigured(widget) ? 'Configure data source (required) ' : 'Configure data source ') + widget.title\">\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                [attr.aria-label]=\"'Edit widget ' + widget.title\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"trashIcon\"\n                (click)=\"removeWidget(widget.id)\"\n                fillMode=\"flat\"\n                themeColor=\"error\"\n                size=\"small\"\n                class=\"remove-widget-btn\"\n                title=\"Delete widget\"\n                [attr.aria-label]=\"'Delete widget ' + widget.title\">\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                  [attr.aria-label]=\"(isWidgetUnconfigured(widget) ? 'Configure data source (required) ' : 'Configure data source ') + widget.title\">\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                      [attr.aria-label]=\"'Edit position ' + widget.title\">\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                      [attr.aria-label]=\"'Duplicate widget ' + widget.title\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      themeColor=\"error\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\"\n                [attr.aria-label]=\"'Delete widget ' + widget.title\">\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      <mm-meshboard-empty-state [readonly]=\"isReadonly()\" (addWidget)=\"openAddWidget()\"></mm-meshboard-empty-state>\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:var(--theme-font-mono);font-size:12px}.scope-resolution-errors .error-item{font-family:inherit}.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}.meshboard-toolbar.compact{justify-content:flex-end;align-items:center;padding:.25rem 1.5rem 0;background-color:transparent;border-bottom:none}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}.meshboard-toolbar.compact{align-items:flex-end;padding:.25rem 1rem 0}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;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}.banner-edit-header .widget-actions{display:flex;gap:2px}.meshboard-view.chrome-plain{background:transparent!important}.meshboard-view.chrome-plain .meshboard-toolbar{padding:0 0 var(--theme-space-3, 12px);background:transparent!important;border-bottom:none!important}.meshboard-view.chrome-plain kendo-tilelayout{padding:0!important}.meshboard-view.chrome-plain .banner-zone-item:not(.banner-edit){padding-left:0;padding-right:0}\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"] }, { kind: "component", type: MeshBoardEmptyStateComponent, selector: "mm-meshboard-empty-state", inputs: ["readonly"], outputs: ["addWidget"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MeshBoardViewComponent, decorators: [{
             type: Component,
@@ -35551,7 +36185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     ], hostDirectives: [UnsavedChangesDirective], providers: [
                         { provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent },
                         AutoRefreshTimerService
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"meshboard-view\" [class.chrome-plain]=\"effectiveChrome() === 'plain'\">\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 (headerMode: full = name + description + controls, compact = controls only, none = no row) -->\n    @if (effectiveHeaderMode() !== 'none') {\n      <div class=\"meshboard-toolbar\" [class.compact]=\"effectiveHeaderMode() === 'compact'\">\n        @if (effectiveHeaderMode() === 'full') {\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\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                aria-label=\"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              aria-label=\"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              aria-label=\"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            aria-label=\"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                aria-label=\"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                aria-label=\"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\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                [attr.aria-label]=\"'Move up ' + widget.title\">\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                [attr.aria-label]=\"'Move down ' + widget.title\">\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                  [attr.aria-label]=\"(isWidgetUnconfigured(widget) ? 'Configure data source (required) ' : 'Configure data source ') + widget.title\">\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                [attr.aria-label]=\"'Edit widget ' + widget.title\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"trashIcon\"\n                (click)=\"removeWidget(widget.id)\"\n                fillMode=\"flat\"\n                themeColor=\"error\"\n                size=\"small\"\n                class=\"remove-widget-btn\"\n                title=\"Delete widget\"\n                [attr.aria-label]=\"'Delete widget ' + widget.title\">\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                  [attr.aria-label]=\"(isWidgetUnconfigured(widget) ? 'Configure data source (required) ' : 'Configure data source ') + widget.title\">\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                      [attr.aria-label]=\"'Edit position ' + widget.title\">\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                      [attr.aria-label]=\"'Duplicate widget ' + widget.title\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      themeColor=\"error\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\"\n                [attr.aria-label]=\"'Delete widget ' + widget.title\">\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      <mm-meshboard-empty-state [readonly]=\"isReadonly()\" (addWidget)=\"openAddWidget()\"></mm-meshboard-empty-state>\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:var(--theme-font-mono);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}.meshboard-toolbar.compact{justify-content:flex-end;align-items:center;padding:.25rem 1.5rem 0;background-color:transparent;border-bottom:none}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}.meshboard-toolbar.compact{align-items:flex-end;padding:.25rem 1rem 0}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;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}.banner-edit-header .widget-actions{display:flex;gap:2px}.meshboard-view.chrome-plain{background:transparent!important}.meshboard-view.chrome-plain .meshboard-toolbar{padding:0 0 var(--theme-space-3, 12px);background:transparent!important;border-bottom:none!important}.meshboard-view.chrome-plain kendo-tilelayout{padding:0!important}.meshboard-view.chrome-plain .banner-zone-item:not(.banner-edit){padding-left:0;padding-right:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"meshboard-view\" [class.chrome-plain]=\"effectiveChrome() === 'plain'\">\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 (headerMode: full = name + description + controls, compact = controls only, none = no row) -->\n    @if (effectiveHeaderMode() !== 'none') {\n      <div class=\"meshboard-toolbar\" [class.compact]=\"effectiveHeaderMode() === 'compact'\">\n        @if (effectiveHeaderMode() === 'full') {\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\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                aria-label=\"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              aria-label=\"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              aria-label=\"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            aria-label=\"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                aria-label=\"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                aria-label=\"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\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    <!-- Entity selector scopes that could not be resolved (AB#7721) -->\n    @if (scopeResolutionErrors().length > 0) {\n      <div class=\"variable-resolution-errors scope-resolution-errors\" role=\"status\">\n        @for (error of scopeResolutionErrors(); track error.selectorId) {\n          <span class=\"error-item\">{{ 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                [attr.aria-label]=\"'Move up ' + widget.title\">\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                [attr.aria-label]=\"'Move down ' + widget.title\">\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                  [attr.aria-label]=\"(isWidgetUnconfigured(widget) ? 'Configure data source (required) ' : 'Configure data source ') + widget.title\">\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                [attr.aria-label]=\"'Edit widget ' + widget.title\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"trashIcon\"\n                (click)=\"removeWidget(widget.id)\"\n                fillMode=\"flat\"\n                themeColor=\"error\"\n                size=\"small\"\n                class=\"remove-widget-btn\"\n                title=\"Delete widget\"\n                [attr.aria-label]=\"'Delete widget ' + widget.title\">\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                  [attr.aria-label]=\"(isWidgetUnconfigured(widget) ? 'Configure data source (required) ' : 'Configure data source ') + widget.title\">\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                      [attr.aria-label]=\"'Edit position ' + widget.title\">\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                      [attr.aria-label]=\"'Duplicate widget ' + widget.title\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      themeColor=\"error\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\"\n                [attr.aria-label]=\"'Delete widget ' + widget.title\">\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      <mm-meshboard-empty-state [readonly]=\"isReadonly()\" (addWidget)=\"openAddWidget()\"></mm-meshboard-empty-state>\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:var(--theme-font-mono);font-size:12px}.scope-resolution-errors .error-item{font-family:inherit}.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}.meshboard-toolbar.compact{justify-content:flex-end;align-items:center;padding:.25rem 1.5rem 0;background-color:transparent;border-bottom:none}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}.meshboard-toolbar.compact{align-items:flex-end;padding:.25rem 1rem 0}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;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}.banner-edit-header .widget-actions{display:flex;gap:2px}.meshboard-view.chrome-plain{background:transparent!important}.meshboard-view.chrome-plain .meshboard-toolbar{padding:0 0 var(--theme-space-3, 12px);background:transparent!important;border-bottom:none!important}.meshboard-view.chrome-plain kendo-tilelayout{padding:0!important}.meshboard-view.chrome-plain .banner-zone-item:not(.banner-edit){padding-left:0;padding-right:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tileLayout: [{
                 type: ViewChild,
                 args: [TileLayoutComponent]
@@ -39001,5 +39635,5 @@ function provideCockpitWidgets() {
  * Generated bundle index. Do not edit.
  */
 
-export { ADAPTER_OFFLINE_GRACE_MS, ATTENTION_SEVERITY_ORDER, AdaptersAttentionProvider, AddWidgetDialogComponent, AiInsightsConfigDialogComponent, AiInsightsService, AiInsightsWidgetComponent, AlertBannerConfigDialogComponent, AlertBannerWidgetComponent, AlertListConfigDialogComponent, AlertListWidgetComponent, AssociationsConfigDialogComponent, AttentionListConfigDialogComponent, AttentionListWidgetComponent, AutoRefreshTimerService, BUILT_IN_ATTENTION_PROVIDERS, BarChartConfigDialogComponent, BarChartWidgetComponent, BlueprintUpdatesAttentionProvider, COCKPIT_ADAPTER_LIMIT, COCKPIT_ATTENTION_PROVIDERS, COCKPIT_BLUEPRINT_CATALOG_LIMIT, COCKPIT_CHILD_TENANT_IDS, COCKPIT_DATA_FLOW_LIMIT, COCKPIT_EXPLAIN_HANDLER, COCKPIT_FAILED_EXECUTIONS_OPTIONS, COCKPIT_KPI_GATES, COCKPIT_KPI_SLOW_LOADING_MS, COCKPIT_LINK_RESOLVER, COCKPIT_RECENT_ITEMS, COCKPIT_ROLES, COCKPIT_SERVICE_NAMES, COCKPIT_VERSION_SOURCE, COCKPIT_VIEWER_ACCESS, COCKPIT_WIDGET_MESSAGES, COCKPIT_WIDGET_TYPES, CkModelsResolveFailedAttentionProvider, CockpitAdapterStatesService, CockpitAttentionService, CockpitBlueprintStatusService, CockpitChildTenantsService, CockpitCkModelStatesService, CockpitContextService, CockpitDataFlowExecutionsService, CockpitKpiConfigDialogComponent, CockpitKpiService, CockpitKpiWidgetComponent, CockpitServiceHealthService, DAY_MS, DEFAULT_ATTENTION_MAX_ITEMS, DEFAULT_COCKPIT_WIDGET_MESSAGES, DEFAULT_FAILED_EXECUTIONS_OPTIONS, DEFAULT_MESHBOARD_MESSAGES, DEFAULT_RECENT_ITEMS_MAX, DEFAULT_TIME_ZONE_MODE, DashboardDataService, DashboardGridService, EditModeStateService, EditWidgetDialogComponent, EntityAssociationsWidgetComponent, EntityCardConfigDialogComponent, EntityCardWidgetComponent, EntityDetailDialogComponent, EntitySelectorEditorComponent, EntitySelectorToolbarComponent, FALLBACK_SERIES_COLORS, FailedExecutionsAttentionProvider, FeaturesNotInstalledAttentionProvider, GaugeConfigDialogComponent, GaugeWidgetComponent, HISTOGRAM_HOURS, HOUR_MS, HeatmapConfigDialogComponent, HeatmapWidgetComponent, KPI_ERROR_TEXT, KpiConfigDialogComponent, KpiWidgetComponent, LazyMarkdownComponent, LineChartConfigDialogComponent, LineChartWidgetComponent, MAX_RECENT_ITEMS, MESHBOARD_CHROME_ROUTE_DATA, MESHBOARD_DESCRIPTION_MARKER, MESHBOARD_EDIT_QUERY_PARAM, MESHBOARD_HEADER_MODE_ROUTE_DATA, MESHBOARD_LABEL_RESOLVER, MESHBOARD_MESSAGES, MESHBOARD_OPTIONS, MESHBOARD_TENANT_ID_PROVIDER, MarkdownConfigDialogComponent, MarkdownWidgetComponent, MeshBoardDataService, MeshBoardGridService, MeshBoardManagerDialogComponent, MeshBoardPersistenceService, MeshBoardSettingsDialogComponent, MeshBoardSettingsResult, MeshBoardStateService, MeshBoardViewComponent, NOT_AVAILABLE_TEXT, PieChartConfigDialogComponent, PieChartWidgetComponent, QueryExecutorService, QuerySelectorComponent, RecentItemsConfigDialogComponent, RecentItemsWidgetComponent, RuntimeEntitySelectorComponent, SERVICE_MANAGED_BLUEPRINT_PREFIX, STATE_STATUS_BY_KEY, ServiceHealthConfigDialogComponent, ServiceHealthWidgetComponent, ServicesHealthAttentionProvider, StatsGridConfigDialogComponent, StatsGridWidgetComponent, StatusIndicatorConfigDialogComponent, StatusIndicatorWidgetComponent, StatusListConfigDialogComponent, StatusListWidgetComponent, SummaryCardConfigDialogComponent, SummaryCardWidgetComponent, TableConfigDialogComponent, TableWidgetComponent, TableWidgetDataSourceDirective, UnregisteredPoolsAttentionProvider, WidgetFactoryService, WidgetGroupComponent, WidgetGroupConfigDialogComponent, WidgetNotConfiguredComponent, WidgetRegistryService, adapterKpi, adaptersInError, adaptersOffline, blueprintUpdatesKpi, buildHourlyHistogram, categoryStatus, chartSeriesColors, ckModelKpi, classifyQuery, compareBlueprintVersions, compareMeshBoardNavigation, countFlowExecutions, countLabel, countPipelineExecutions, enabledButNotInstalled, executionKpi, failedExecutionsSeverity, formatCockpitMessage, formatCount, humanizeCategory, isAdapterAtRest, isAdapterExpectedToRun, isAdapterOnline, isCockpitWidgetType, isMeshBoardChrome, isMeshBoardHeaderMode, isServiceConfigured, joinEncodedDescription, kpiKindOf, latestStatisticsUpdate, legacyCockpitLinkTarget, loadNgxMarkdown, nameList, newMeshBoardConfig, normalizeNavigation, observeThemeChanges, pipelineExecutionInputs, plural, provideCockpitWidgetHost, provideCockpitWidgets, provideDefaultWidgets, provideMeshBoard, provideMeshBoardMessages, provideProcessWidget, provideWidgetRegistrations, queryFamily, readMeshBoardNavigation, recentRelativeTime, registerCockpitWidgets, registerDefaultWidgets, registerProcessWidget, resolveChartColor, resolveCockpitWidgetMessages, resolveMeshBoardChrome, resolveMeshBoardHeaderMode, resolveMeshBoardLabel, resolveMeshBoardMessages, selectProviders, serviceStateText, servicesHealthKpi, sortAttentionFindings, sparklineGeometry, splitBlueprintId, splitEncodedDescription, statusColor, summarizeAdapterOnline, tenantCountKpi, toBlueprintStatus, toServiceHealthStatus, truncationNote, versionKpi, withMeshBoardNavigation };
+export { ADAPTER_OFFLINE_GRACE_MS, ATTENTION_SEVERITY_ORDER, AdaptersAttentionProvider, AddWidgetDialogComponent, AiInsightsConfigDialogComponent, AiInsightsService, AiInsightsWidgetComponent, AlertBannerConfigDialogComponent, AlertBannerWidgetComponent, AlertListConfigDialogComponent, AlertListWidgetComponent, AssociationsConfigDialogComponent, AttentionListConfigDialogComponent, AttentionListWidgetComponent, AutoRefreshTimerService, BUILT_IN_ATTENTION_PROVIDERS, BarChartConfigDialogComponent, BarChartWidgetComponent, BlueprintUpdatesAttentionProvider, COCKPIT_ADAPTER_LIMIT, COCKPIT_ATTENTION_PROVIDERS, COCKPIT_BLUEPRINT_CATALOG_LIMIT, COCKPIT_CHILD_TENANT_IDS, COCKPIT_DATA_FLOW_LIMIT, COCKPIT_EXPLAIN_HANDLER, COCKPIT_FAILED_EXECUTIONS_OPTIONS, COCKPIT_KPI_GATES, COCKPIT_KPI_SLOW_LOADING_MS, COCKPIT_LINK_RESOLVER, COCKPIT_RECENT_ITEMS, COCKPIT_ROLES, COCKPIT_SERVICE_NAMES, COCKPIT_VERSION_SOURCE, COCKPIT_VIEWER_ACCESS, COCKPIT_WIDGET_MESSAGES, COCKPIT_WIDGET_TYPES, CkModelsResolveFailedAttentionProvider, CockpitAdapterStatesService, CockpitAttentionService, CockpitBlueprintStatusService, CockpitChildTenantsService, CockpitCkModelStatesService, CockpitContextService, CockpitDataFlowExecutionsService, CockpitKpiConfigDialogComponent, CockpitKpiService, CockpitKpiWidgetComponent, CockpitServiceHealthService, DAY_MS, DEFAULT_ATTENTION_MAX_ITEMS, DEFAULT_COCKPIT_WIDGET_MESSAGES, DEFAULT_FAILED_EXECUTIONS_OPTIONS, DEFAULT_MESHBOARD_MESSAGES, DEFAULT_RECENT_ITEMS_MAX, DEFAULT_TIME_ZONE_MODE, DashboardDataService, DashboardGridService, EditModeStateService, EditWidgetDialogComponent, EntityAssociationsWidgetComponent, EntityCardConfigDialogComponent, EntityCardWidgetComponent, EntityDetailDialogComponent, EntitySelectorEditorComponent, EntitySelectorToolbarComponent, FALLBACK_SERIES_COLORS, FailedExecutionsAttentionProvider, FeaturesNotInstalledAttentionProvider, GaugeConfigDialogComponent, GaugeWidgetComponent, HISTOGRAM_HOURS, HOUR_MS, HeatmapConfigDialogComponent, HeatmapWidgetComponent, KPI_ERROR_TEXT, KpiConfigDialogComponent, KpiWidgetComponent, LazyMarkdownComponent, LineChartConfigDialogComponent, LineChartWidgetComponent, MAX_RECENT_ITEMS, MESHBOARD_CHROME_ROUTE_DATA, MESHBOARD_DESCRIPTION_MARKER, MESHBOARD_EDIT_QUERY_PARAM, MESHBOARD_HEADER_MODE_ROUTE_DATA, MESHBOARD_LABEL_RESOLVER, MESHBOARD_MESSAGES, MESHBOARD_OPTIONS, MESHBOARD_TENANT_ID_PROVIDER, MarkdownConfigDialogComponent, MarkdownWidgetComponent, MeshBoardDataService, MeshBoardGridService, MeshBoardManagerDialogComponent, MeshBoardPersistenceService, MeshBoardSettingsDialogComponent, MeshBoardSettingsResult, MeshBoardStateService, MeshBoardViewComponent, NOT_AVAILABLE_TEXT, PieChartConfigDialogComponent, PieChartWidgetComponent, QueryExecutorService, QuerySelectorComponent, RecentItemsConfigDialogComponent, RecentItemsWidgetComponent, RuntimeEntitySelectorComponent, SERVICE_MANAGED_BLUEPRINT_PREFIX, STATE_STATUS_BY_KEY, ServiceHealthConfigDialogComponent, ServiceHealthWidgetComponent, ServicesHealthAttentionProvider, StatsGridConfigDialogComponent, StatsGridWidgetComponent, StatusIndicatorConfigDialogComponent, StatusIndicatorWidgetComponent, StatusListConfigDialogComponent, StatusListWidgetComponent, SummaryCardConfigDialogComponent, SummaryCardWidgetComponent, TableConfigDialogComponent, TableWidgetComponent, TableWidgetDataSourceDirective, UnregisteredPoolsAttentionProvider, WidgetFactoryService, WidgetGroupComponent, WidgetGroupConfigDialogComponent, WidgetNotConfiguredComponent, WidgetRegistryService, adapterKpi, adaptersInError, adaptersOffline, blueprintUpdatesKpi, buildHourlyHistogram, categoryStatus, chartSeriesColors, ckModelKpi, classifyQuery, compareBlueprintVersions, compareMeshBoardNavigation, countFlowExecutions, countLabel, countPipelineExecutions, emptyQueryExecutionResult, enabledButNotInstalled, executionKpi, failedExecutionsSeverity, formatCockpitMessage, formatCount, humanizeCategory, isAdapterAtRest, isAdapterExpectedToRun, isAdapterOnline, isCockpitWidgetType, isMeshBoardChrome, isMeshBoardHeaderMode, isServiceConfigured, joinEncodedDescription, kpiKindOf, latestStatisticsUpdate, legacyCockpitLinkTarget, loadNgxMarkdown, nameList, newMeshBoardConfig, normalizeNavigation, observeThemeChanges, pipelineExecutionInputs, plural, provideCockpitWidgetHost, provideCockpitWidgets, provideDefaultWidgets, provideMeshBoard, provideMeshBoardMessages, provideProcessWidget, provideWidgetRegistrations, queryFamily, readMeshBoardNavigation, recentRelativeTime, registerCockpitWidgets, registerDefaultWidgets, registerProcessWidget, resolveChartColor, resolveCockpitWidgetMessages, resolveMeshBoardChrome, resolveMeshBoardHeaderMode, resolveMeshBoardLabel, resolveMeshBoardMessages, selectProviders, serviceStateText, servicesHealthKpi, sortAttentionFindings, sparklineGeometry, splitBlueprintId, splitEncodedDescription, statusColor, summarizeAdapterOnline, tenantCountKpi, toBlueprintStatus, toServiceHealthStatus, truncationNote, versionKpi, withMeshBoardNavigation };
 //# sourceMappingURL=meshmakers-octo-meshboard.mjs.map