@meshmakers/octo-meshboard 3.5.500 → 3.5.510

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -1,20 +1,20 @@
 import { FieldFilterOperatorsDto, CkTypeSelectorService, RuntimeEntitySelectDataSource, RuntimeEntityDialogDataSource, DeleteStrategiesDto, AssociationModOptionsDto, CkModelService, TENANT_ID_PROVIDER, QueryModeDto, GraphDirectionDto, AttributeSelectorService, GraphQL, GetCkTypeAvailableQueryColumnsDtoGQL, SortOrdersDto, SeriesResolutionSignalDto, HealthService, AssetRepoService, JobManagementService, CONFIGURATION_SERVICE, SystemCommunicationDeploymentStateDto, SystemCommunicationConfigurationStateDto, HealthStatus } from '@meshmakers/octo-services';
 export { RuntimeEntityDialogDataSource, RuntimeEntitySelectDataSource, TENANT_ID_PROVIDER } from '@meshmakers/octo-services';
 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 { Injectable, inject, EventEmitter, forwardRef, Output, Input, ViewChild, ChangeDetectionStrategy, Component, Injector, EnvironmentInjector, ApplicationRef, signal, computed, effect, untracked, Directive, InjectionToken, isSignal, LOCALE_ID, NgZone, DestroyRef, ElementRef, input, createEnvironmentInjector, ViewContainerRef, makeEnvironmentProviders, provideAppInitializer, ChangeDetectorRef, ViewChildren, 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, NEVER, interval, filter, combineLatest, defer, EMPTY } from 'rxjs';
+import { firstValueFrom, from, map, Observable, of, switchMap as switchMap$1, forkJoin, catchError, NEVER, interval, Subject, 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, 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';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { CommonModule, formatDate, formatNumber, NgTemplateOutlet } from '@angular/common';
 import { CkTypeSelectorInputComponent, SecretSafeAttributeNamesService, AttributeValueTypeDto, PropertyValueDisplayComponent, FieldFilterEditorComponent, PropertyGridComponent, OctoGraphQlDataSource, AttributeSelectorDialogService, AttributeSortSelectorDialogService } from '@meshmakers/octo-ui';
 import * as i1$5 from '@progress/kendo-angular-dialog';
 import { WindowService, WindowCloseResult, WindowRef, DialogsModule, DialogRef, DialogModule, DialogService } from '@progress/kendo-angular-dialog';
-import { switchMap, map as map$1, catchError as catchError$1, startWith, take, shareReplay, tap } from 'rxjs/operators';
+import { switchMap, map as map$1, catchError as catchError$1, debounceTime, startWith, take, shareReplay, tap } from 'rxjs/operators';
 import * as i2 from '@progress/kendo-angular-buttons';
 import { ButtonsModule, ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i3 from '@progress/kendo-angular-inputs';
@@ -39,6 +39,7 @@ import { LabelModule, KENDO_LABELS } from '@progress/kendo-angular-label';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i5 from '@progress/kendo-angular-layout';
 import { LayoutModule, TabStripModule, TileLayoutModule, TileLayoutComponent } from '@progress/kendo-angular-layout';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i4$2 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule, DateTimePickerModule } from '@progress/kendo-angular-dateinputs';
 import { BreadCrumbService } from '@meshmakers/shared-services';
@@ -58,6 +59,8 @@ function isCockpitWidgetType(type) {
 }
 /** The board-level default timezone mode applied when none is persisted. */
 const DEFAULT_TIME_ZONE_MODE = 'local';
+/** Maximum number of hops of a child-scope path, enforced by editor and runtime (AB#7723). */
+const MAX_SCOPE_HOPS = 5;
 
 // Re-export from octo-services (moved there for reuse by octo-ui)
 
@@ -2199,10 +2202,17 @@ class MeshBoardPersistenceService {
                     attributeMappings: es.attributeMappings,
                     showInToolbar: es.showInToolbar,
                     defaultRtId: es.defaultRtId,
+                    // Carried verbatim: the one-hop form and the multi-hop `path`
+                    // (AB#7723) keep their keys and order, so older boards encode unchanged.
                     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
+                    followsSelectorId: es.followsSelectorId || undefined,
+                    // AB#7724 — omitted when empty, so older boards encode unchanged;
+                    // rows are reduced to the persisted filter fields (no editor state).
+                    filters: es.filters?.length
+                        ? es.filters.map(f => ({ attributePath: f.attributePath, operator: f.operator, comparisonValue: f.comparisonValue }))
+                        : undefined
                 }));
             }
             const dataJson = JSON.stringify(data);
@@ -2448,13 +2458,20 @@ class MeshBoardStateService {
     /**
      * 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
+     * with the source rtIds (childScope hop or path, 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).
      */
     _entitySelectorScopes = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_entitySelectorScopes" }] : /* istanbul ignore next */ []));
+    /**
+     * Period set by the page that embeds the board (`MeshBoardViewComponent.timeRange`, AB#7582):
+     * exact instants, or `invalid` when the host passed an unusable range. `null` = the board's own
+     * selection applies. Transient — never persisted, never written into the board config.
+     */
+    _hostTimeRange = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hostTimeRange" }] : /* istanbul ignore next */ []));
     /**
      * Transient variables published by widgets (KPI output variables, AB#5364).
      * Kept apart from `_meshBoardConfig` so publishing triggers no persistence and
@@ -3068,10 +3085,22 @@ class MeshBoardStateService {
      * Boundaries are resolved on the board's {@link timeZoneMode} basis (local by
      * default, or UTC), the same basis widgets format their datetime display on —
      * so the selected range and the displayed timestamps stay consistent.
+     *
+     * While an embedding host has set a period ({@link setHostTimeRange}, AB#7582)
+     * and the board's time filter is enabled, the host's instants are returned
+     * unchanged (no day snapping, no zone conversion) and the stored selection is
+     * ignored; an invalid host period resolves to `null`.
      */
     resolveCurrentTimeRange() {
         const config = this._meshBoardConfig().timeFilter;
-        if (!config?.enabled || !config.selection) {
+        if (!config?.enabled) {
+            return null;
+        }
+        const host = this._hostTimeRange();
+        if (host) {
+            return host.status === 'valid' ? { from: new Date(host.from), to: new Date(host.to) } : null;
+        }
+        if (!config.selection) {
             return null;
         }
         const showTime = config.pickerConfig?.showTime ?? false;
@@ -3140,7 +3169,7 @@ class MeshBoardStateService {
     /**
      * 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
+     * childScope traversal (one hop or a path), or the picked entity's own rtId when the
      * 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.
@@ -3184,20 +3213,38 @@ class MeshBoardStateService {
         .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):
+     * Decides how a widget runs its persistent query — the entry point every
+     * built-in widget calls with its binding, query family and time-filter opt-out:
      *
-     * - `unscoped` — no binding, a runtime query (`family === 'runtime'`, the
-     *   binding is ignored there), or no active pick: keep the persisted scope.
+     * 1. Host gate (AB#7582): while the embedding host's period is invalid, every
+     *    stream-data query bound to the time filter is `empty` (`invalidTimeRange`),
+     *    whatever its selector binding; pass the widget's `ignoreTimeFilter` so an
+     *    opted-out widget, whose data does not depend on the period, keeps querying.
+     *    Runtime queries have no time window and are not gated. A legacy config
+     *    without `queryFamily` is treated as stream data here.
+     * 2. Entity-selector scope ({@link resolveEntitySelectorScope}, AB#7721) — since
+     *    AB#7725 for runtime queries too: `unscoped` / `pending` / `scoped` / `empty`.
+     */
+    resolveStreamDataScope(entitySelectorId, family, ignoreTimeFilter) {
+        if (family !== 'runtime' && this.isStreamDataBlockedByHostTimeRange(ignoreTimeFilter)) {
+            return { kind: 'empty', reason: 'invalidTimeRange' };
+        }
+        return this.resolveEntitySelectorScope(entitySelectorId);
+    }
+    /**
+     * The entity-selector part of {@link resolveStreamDataScope}, without the host
+     * gate — stream data (AB#7721) and runtime queries alike (AB#7725):
+     *
+     * - `unscoped` — no binding, or no active pick: keep the query as saved.
      * - `pending` — the pick is still resolving: show loading, send no query.
-     * - `scoped` — query with the resolved source rtIds.
+     * - `scoped` — query restricted to the resolved rtIds: stream data via
+     *   `streamDataArgs.rtIds`, runtime queries via the `rtId IN` field filter
+     *   (`QueryExecutionOptions.scopeRtIds`).
      * - `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') {
+    resolveEntitySelectorScope(entitySelectorId) {
+        if (!entitySelectorId) {
             return { kind: 'unscoped' };
         }
         const state = this._entitySelectorScopes()[entitySelectorId];
@@ -3225,12 +3272,46 @@ class MeshBoardStateService {
      * skip the query for `pending` / `empty` (AB#7721).
      */
     resolveStreamDataRtIds(entitySelectorId) {
-        const scope = this.resolveStreamDataScope(entitySelectorId);
+        const scope = this.resolveEntitySelectorScope(entitySelectorId);
         return scope.kind === 'scoped' ? scope.rtIds : undefined;
     }
     setEntitySelectorScope(selectorId, state) {
         this._entitySelectorScopes.update(map => ({ ...map, [selectorId]: state }));
     }
+    /**
+     * Sets (or with `null` clears) the period of the page embedding the board
+     * (AB#7582). Called by `MeshBoardViewComponent` for its `timeRange` input; a
+     * host normally sets the input instead of calling this. Transient: not
+     * persisted, not written into the board config, so it never causes unsaved
+     * changes. Only takes effect while the board's time filter is enabled.
+     */
+    setHostTimeRange(state, owner) {
+        this._hostTimeRange.set(state);
+        this.hostTimeRangeOwner = state ? owner ?? null : null;
+    }
+    /**
+     * Clears the host period only if `owner` set it (AB#7582). The service is
+     * root-provided, so a view that is destroyed (or drops its `timeRange`) must not
+     * clear a period another view set in the meantime.
+     */
+    clearHostTimeRange(owner) {
+        if (this.hostTimeRangeOwner === owner) {
+            this.setHostTimeRange(null);
+        }
+    }
+    /** The view (or other caller) that set the current host period, if it said so. */
+    hostTimeRangeOwner = null;
+    /** The period set by the embedding host, or `null` when the board's own selection applies. */
+    hostTimeRange = this._hostTimeRange.asReadonly();
+    /**
+     * True when an invalid host period blocks a stream-data query that is bound to
+     * the time filter (AB#7582): the period is invalid, the board's time filter is
+     * enabled and the caller did not opt out with `ignoreTimeFilter`. Such a query
+     * must not be sent — without a window it would read the whole archive.
+     */
+    isStreamDataBlockedByHostTimeRange(ignoreTimeFilter) {
+        return !ignoreTimeFilter && this._hostTimeRange()?.status === 'invalid' && this.isTimeFilterEnabled();
+    }
     /**
      * Updates the time filter configuration.
      */
@@ -3747,7 +3828,7 @@ class QueryExecutorService {
                 rtId: queryRtId,
                 first: options.first ?? undefined,
                 after: options.after ?? undefined,
-                fieldFilter: options.fieldFilter ?? undefined
+                fieldFilter: QueryExecutorService.withRtIdScope(options.fieldFilter, options.scopeRtIds)
             },
             fetchPolicy: options.forceRefresh ? 'network-only' : 'cache-first'
         }).pipe(map$1(result => {
@@ -3768,7 +3849,8 @@ class QueryExecutorService {
         }));
     }
     executeStreamData(queryRtId, options = {}) {
-        const arg = options.streamDataArgs ? this.buildStreamDataArg(options.streamDataArgs) : undefined;
+        const streamDataArgs = QueryExecutorService.withStreamDataScope(options.streamDataArgs, options.scopeRtIds);
+        const arg = streamDataArgs ? this.buildStreamDataArg(streamDataArgs) : undefined;
         return this.streamDataGql.fetch({
             variables: {
                 rtId: queryRtId,
@@ -3945,6 +4027,29 @@ class QueryExecutorService {
         }
         return groups;
     }
+    /**
+     * Runtime entity-selector scope (AB#7725): appends `rtId IN (scopeRtIds)` to the
+     * caller's field filters. The backend AND-combines all runtime field filters with
+     * the persisted query's filters before the database query, so simple rows as well
+     * as aggregation / grouping results cover the scoped entities only. Returns the
+     * caller's filters unchanged (or `undefined`) when there is no scope.
+     */
+    static withRtIdScope(fieldFilter, scopeRtIds) {
+        if (!scopeRtIds || scopeRtIds.length === 0) {
+            return fieldFilter ?? undefined;
+        }
+        return [
+            ...(fieldFilter ?? []),
+            { attributePath: 'rtId', operator: FieldFilterOperatorsDto.InDto, comparisonValue: scopeRtIds }
+        ];
+    }
+    /** Stream-data entity-selector scope: `scopeRtIds` fill `rtIds` unless the caller set them. */
+    static withStreamDataScope(args, scopeRtIds) {
+        if (!scopeRtIds || scopeRtIds.length === 0 || (args?.rtIds && args.rtIds.length > 0)) {
+            return args;
+        }
+        return { ...args, rtIds: scopeRtIds };
+    }
     buildStreamDataArg(args) {
         // Skip the entire `arg` field when the caller has nothing to override —
         // the persisted query then runs with its intrinsic from/to/limit and the
@@ -4086,6 +4191,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1.Apollo }] });
 
+const GetAssociationTargetRtIdsDocumentDto = gql `
+    query getAssociationTargetRtIds($rtIds: [OctoObjectId]!, $ckTypeId: String!, $targetCkTypeId: String!, $roleId: String!, $direction: GraphDirection!, $first: Int!, $targetsFirst: Int!) {
+  runtime {
+    runtimeEntities(rtIds: $rtIds, ckId: $ckTypeId, first: $first) {
+      items {
+        rtId
+        associations {
+          targets(
+            ckId: $targetCkTypeId
+            roleId: $roleId
+            direction: $direction
+            first: $targetsFirst
+          ) {
+            totalCount
+            items {
+              rtId
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+class GetAssociationTargetRtIdsDtoGQL extends i1.Query {
+    document = GetAssociationTargetRtIdsDocumentDto;
+    constructor(apollo) {
+        super(apollo);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GetAssociationTargetRtIdsDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GetAssociationTargetRtIdsDtoGQL, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GetAssociationTargetRtIdsDtoGQL, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Apollo }] });
+
 const GetCkTypeAttributesForMeshboardDocumentDto = gql `
     query getCkTypeAttributesForMeshboard($ckTypeId: String!, $first: Int) {
   constructionKit {
@@ -4308,12 +4452,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 }]
         }] });
 
+/** Source rtIds per request of one batched association hop (AB#7723). */
+const ASSOCIATION_HOP_SOURCE_BATCH = 100;
+/** Targets read per source entity in one association hop (AB#7723). */
+const ASSOCIATION_HOP_TARGETS_PER_SOURCE = 1000;
 class MeshBoardDataService {
     getDashboardEntityGQL = inject(GetDashboardEntityDtoGQL);
     getCkModelsWithStateGQL = inject(GetCkModelsWithStateDtoGQL);
     getEntitiesByCkTypeGQL = inject(GetEntitiesByCkTypeDtoGQL);
     queryExecutor = inject(QueryExecutorService);
     getAssociationTargetsGQL = inject(GetAssociationTargetsDtoGQL);
+    getAssociationTargetRtIdsGQL = inject(GetAssociationTargetRtIdsDtoGQL);
     secretSafeNames = inject(SecretSafeAttributeNamesService);
     getCkTypeAttributesGQL = inject(GetCkTypeAttributesForMeshboardDtoGQL);
     apollo = inject(Apollo);
@@ -4552,6 +4701,13 @@ class MeshBoardDataService {
      */
     async fetchRepeaterFromQuery(family, queryRtId, maxItems) {
         try {
+            // AB#7582: while the embedding host's period is invalid, a stream-data
+            // repeater query is not sent (it would read the whole archive); the group
+            // shows no items. Runtime queries are unaffected.
+            if (this.stateService.isStreamDataBlockedByHostTimeRange()
+                && (family ?? await this.queryExecutor.resolveFamily(queryRtId)) === 'streamData') {
+                return [];
+            }
             const streamDataArgs = this.buildRepeaterStreamDataArgs();
             const result = await firstValueFrom(this.queryExecutor.execute(family, queryRtId, {
                 first: maxItems,
@@ -4676,6 +4832,56 @@ class MeshBoardDataService {
             }));
         }));
     }
+    /**
+     * One association hop for MANY source entities (AB#7723, multi-hop child
+     * scope): the rtIds of the `targetCkTypeId` entities reached from each of
+     * `sourceRtIds` (all of `sourceCkTypeId`) over `roleId` in `direction`.
+     *
+     * Query cost: the sources go out in batches of
+     * {@link ASSOCIATION_HOP_SOURCE_BATCH} rtIds per request (`runtimeEntities(rtIds:)`
+     * with the association targets nested), the batches of one hop in parallel —
+     * never one request per entity. Only rtIds are selected. Per source at most
+     * {@link ASSOCIATION_HOP_TARGETS_PER_SOURCE} targets are read; a truncated
+     * source is logged as a warning. Duplicates are not removed here.
+     * Errors propagate (the caller turns them into a failed scope).
+     */
+    fetchAssociationTargetRtIds(sourceRtIds, sourceCkTypeId, targetCkTypeId, roleId, direction) {
+        if (sourceRtIds.length === 0) {
+            return of([]);
+        }
+        const graphDirection = direction === 'out' ? GraphDirectionDto.OutboundDto : GraphDirectionDto.InboundDto;
+        const batches = [];
+        for (let i = 0; i < sourceRtIds.length; i += ASSOCIATION_HOP_SOURCE_BATCH) {
+            batches.push(sourceRtIds.slice(i, i + ASSOCIATION_HOP_SOURCE_BATCH));
+        }
+        return forkJoin(batches.map(batch => this.getAssociationTargetRtIdsGQL.fetch({
+            variables: {
+                rtIds: batch,
+                ckTypeId: sourceCkTypeId,
+                targetCkTypeId,
+                roleId,
+                direction: graphDirection,
+                first: batch.length,
+                targetsFirst: ASSOCIATION_HOP_TARGETS_PER_SOURCE
+            }
+        }).pipe(map(result => {
+            const rtIds = [];
+            for (const source of result.data?.runtime?.runtimeEntities?.items ?? []) {
+                const targets = source?.associations?.targets;
+                const items = targets?.items ?? [];
+                if ((targets?.totalCount ?? 0) > items.length) {
+                    console.warn(`Child scope hop ${roleId} → ${targetCkTypeId}: source ${String(source?.rtId)} has `
+                        + `${targets?.totalCount} targets, only the first ${items.length} are used.`);
+                }
+                for (const target of items) {
+                    if (target?.rtId !== null && target?.rtId !== undefined) {
+                        rtIds.push(String(target.rtId));
+                    }
+                }
+            }
+            return rtIds;
+        })))).pipe(map(perBatch => perBatch.flat()));
+    }
     /**
      * Fetches CK type attribute definitions (name + type) for config dialog.
      */
@@ -6614,7 +6820,7 @@ class KpiWidgetComponent {
             // 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);
+            const scope = this.stateService.resolveStreamDataScope(dataSource.entitySelectorId, dataSource.queryFamily, dataSource.ignoreTimeFilter);
             if (scope.kind === 'pending') {
                 return;
             }
@@ -6626,7 +6832,9 @@ class KpiWidgetComponent {
             const streamDataArgs = this.buildStreamDataArgs();
             const result = await firstValueFrom(this.queryExecutor.execute(dataSource.queryFamily, dataSource.queryRtId, {
                 fieldFilter: fieldFilter ?? undefined,
-                streamDataArgs
+                streamDataArgs,
+                // Runtime queries: `rtId IN` field filter (AB#7725); stream data: arg.rtIds.
+                scopeRtIds: scope.kind === 'scoped' ? scope.rtIds : undefined
             }).pipe(catchError(err => {
                 console.error('Error loading KPI query data:', err);
                 throw err;
@@ -6866,19 +7074,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             }] } });
 
 /**
- * Per-widget asset-scope binding for stream-data persistent-query widgets.
+ * Per-widget asset-scope binding for persistent-query widgets — stream-data and
+ * runtime queries (AB#7725).
  *
- * Stream-data archives are keyed by their source rtIds, so a widget is scoped
- * to a picked asset by passing those source rtIds as `streamDataArgs.rtIds`
- * (see `MeshBoardStateService.resolveStreamDataRtIds` and the backend
- * `StreamDataArguments.rtIds` override). This control lets the designer bind a
- * single widget to one of the MeshBoard's entity selectors: when the selector's
- * entity is picked, its resolved source rtIds (the selector's `childScope`
- * one-hop, or the picked entity itself) scope this widget's query.
+ * This control lets the designer bind a single widget to one of the MeshBoard's
+ * entity selectors: when the selector's entity is picked, its resolved rtIds
+ * (the selector's `childScope` hop or path, or the picked entity itself) scope
+ * this widget's query on the server (see
+ * `MeshBoardStateService.resolveEntitySelectorScope` and
+ * `QueryExecutionOptions.scopeRtIds`):
+ * - stream-data queries get the rtIds as `streamDataArgs.rtIds` (the backend
+ *   `StreamDataArguments.rtIds` override) — simple, aggregation, grouping and
+ *   downsampling queries alike;
+ * - runtime queries (SimpleRtQuery, AggregationRtQuery,
+ *   GroupingAggregationRtQuery) get the field filter `rtId IN (rtIds)`,
+ *   AND-combined with the widget's and the saved query's own filters.
  *
- * The control renders only when the selected query is a stream-data query
- * (`family === 'streamData'`); for runtime queries the binding has no effect and
- * the picker stays hidden (mirrors `SdTimeFilterToggleComponent`).
+ * The control renders once a query is selected (`family` is known); without a
+ * query there is nothing to scope.
  *
  * Two-way bindable:
  * ```html
@@ -6890,7 +7103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * ```
  */
 class EntitySelectorScopePickerComponent {
-    /** Family of the currently selected query. Picker is shown only for 'streamData'. */
+    /** Family of the currently selected query. Picker is shown once a query (either family) is selected. */
     family;
     /** Currently bound entity selector id (`undefined` ⇒ no binding). */
     entitySelectorId;
@@ -6905,7 +7118,7 @@ class EntitySelectorScopePickerComponent {
     /** Emits on change (enables `[(entitySelectorId)]` two-way binding). */
     entitySelectorIdChange = new EventEmitter();
     get visible() {
-        return this.family === 'streamData';
+        return this.family === 'streamData' || this.family === 'runtime';
     }
     /** "None" row first, then one row per available selector. */
     get options() {
@@ -6932,7 +7145,7 @@ class EntitySelectorScopePickerComponent {
           (valueChange)="onSelect($event)">
         </kendo-dropdownlist>
         <p class="field-hint">
-          Scopes this widget's stream-data query to the rtIds resolved from the
+          Restricts this widget's query to the entities resolved from the
           selected asset. Leave unset to use the saved query's own scope.
         </p>
       </div>
@@ -6954,7 +7167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           (valueChange)="onSelect($event)">
         </kendo-dropdownlist>
         <p class="field-hint">
-          Scopes this widget's stream-data query to the rtIds resolved from the
+          Restricts this widget's query to the entities resolved from the
           selected asset. Leave unset to use the saved query's own scope.
         </p>
       </div>
@@ -8871,7 +9084,7 @@ const ISO_NAIVE_DATE_TIME_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?(\.\d+)?$
  * instant. A naive ISO date-time string (no `Z`/offset) is treated as UTC — the
  * wire's serialization of an instant — never as browser-local time (AB#4818).
  */
-function toInstant(value) {
+function toInstant$1(value) {
     if (value instanceof Date) {
         return isNaN(value.getTime()) ? null : value;
     }
@@ -8929,7 +9142,7 @@ function partsFormatter(mode) {
  * non-instants so callers can skip the row.
  */
 function getZonedDateParts(value, mode) {
-    const date = toInstant(value);
+    const date = toInstant$1(value);
     if (!date) {
         return null;
     }
@@ -8961,7 +9174,7 @@ function zonedDateKey(parts) {
  * instant, so callers can fall back to their own rendering.
  */
 function formatInstant(value, mode, options) {
-    const date = toInstant(value);
+    const date = toInstant$1(value);
     if (!date) {
         return null;
     }
@@ -10266,7 +10479,7 @@ class TableWidgetDataSourceDirective extends OctoGraphQlDataSource {
         // 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);
+        const scope = this.stateService.resolveStreamDataScope(dataSource.entitySelectorId, dataSource.queryFamily, dataSource.ignoreTimeFilter);
         if (scope.kind === 'pending') {
             return NEVER;
         }
@@ -10285,7 +10498,9 @@ class TableWidgetDataSourceDirective extends OctoGraphQlDataSource {
             first: queryOptions.state.take ?? this._config?.pageSize ?? 10,
             after: GraphQL.offsetToCursor(queryOptions.state.skip ?? 0),
             fieldFilter: fieldFilter ?? undefined,
-            streamDataArgs
+            streamDataArgs,
+            // Runtime queries: `rtId IN` field filter (AB#7725); stream data: arg.rtIds.
+            scopeRtIds: scope.kind === 'scoped' ? scope.rtIds : undefined
         }).pipe(map$1(result => {
             // Extract columns from query response and update signal.
             // Replace dots with underscores for grid compatibility (Kendo treats dots as nested paths).
@@ -10472,6 +10687,286 @@ function resolveMeshBoardLabel(resolver, request) {
     return typeof text === 'string' && text !== '' ? text : request.defaultText;
 }
 
+/**
+ * Optional: the host's current UI language. MeshBoard does not derive it from `LOCALE_ID` (that is
+ * static in many apps); a host that wants per-language texts in board configurations (table column
+ * `titles`, `valueLabels`) hands its language over once, via `provideMeshBoard({ language })`,
+ * `provideMeshBoardLanguage(language)` or this token directly. Not provided = the configured default
+ * texts (e.g. the column `title`).
+ *
+ * ```ts
+ * providers: [provideMeshBoard({ language: languageService.currentLanguage })] // Signal<string>
+ * ```
+ */
+const MESHBOARD_LANGUAGE = new InjectionToken('MESHBOARD_LANGUAGE');
+/** Reads a {@link MeshBoardLanguageSource} (fixed or signal) as a normalised culture code, or `null`. */
+function readMeshBoardLanguageSource(source) {
+    if (!source) {
+        return null;
+    }
+    const value = isSignal(source) ? source() : source;
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const normalised = value.trim().replace(/_/g, '-');
+    return normalised === '' ? null : normalised;
+}
+/** The host language of {@link MESHBOARD_LANGUAGE} as a signal (`null` without one). Call in an injection context. */
+function injectMeshBoardLanguage() {
+    const source = inject(MESHBOARD_LANGUAGE, { optional: true });
+    return computed(() => readMeshBoardLanguageSource(source));
+}
+/**
+ * Well-formed culture key of a per-language text map: a 2-3 letter language, optionally followed by
+ * subtags (`de`, `de-AT`, `en-GB`, `zh-Hant-TW`). Keys such as `german` or `de_AT` are not culture codes.
+ */
+const CULTURE_KEY = /^[A-Za-z]{2,3}(-[A-Za-z0-9]{1,8})*$/;
+/** Whether `key` is a well-formed culture key of a per-language text map. */
+function isCultureKey(key) {
+    return CULTURE_KEY.test(key);
+}
+/**
+ * Picks the text for `language` from a per-language map (AB#7655). Lookup order:
+ * 1. the exact culture or language (`de-AT`, `de`; case-insensitive);
+ * 2. a culture (`de-AT`) without an exact key: a key equal to its language part (`de`). A culture
+ *    never picks a sibling culture (`de-DE` does not take `de-AT`);
+ * 3. a bare language (`de`) without an exact key: the first authored key of that language
+ *    (`de-AT` in `{ 'en-GB': …, 'de-AT': …, 'de-DE': … }`), in the map's key order.
+ * Returns `undefined` when there is no language, no map or no match, so the caller applies its own
+ * fallback (e.g. the column `title`).
+ */
+function pickLocalizedText(texts, language) {
+    if (!texts || !language) {
+        return undefined;
+    }
+    const wanted = language.toLowerCase();
+    const isBareLanguage = !wanted.includes('-');
+    const languagePart = wanted.split('-')[0];
+    let languageMatch;
+    for (const [key, text] of Object.entries(texts)) {
+        if (typeof text !== 'string' || text === '') {
+            continue;
+        }
+        const candidate = key.toLowerCase();
+        if (candidate === wanted) {
+            return text;
+        }
+        if (languageMatch !== undefined) {
+            continue;
+        }
+        if (isBareLanguage ? candidate.split('-')[0] === wanted : candidate === languagePart) {
+            languageMatch = text;
+        }
+    }
+    return languageMatch;
+}
+
+/** An empty problems record. */
+function emptyLabelProblems() {
+    return { unknownCultureKeys: [], malformedValueKeys: [], malformedTitleKeys: [], statusMappingIgnored: false };
+}
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+/**
+ * Keeps the usable entries of a per-language text map: culture keys with a non-empty string text.
+ * Bad culture keys are reported; the keys of entries with a non-string or empty text are returned
+ * as `malformedKeys`.
+ */
+function cleanLocalizedTexts(texts, unknownCultureKeys) {
+    const clean = {};
+    const malformedKeys = [];
+    for (const [key, text] of Object.entries(texts)) {
+        if (!isCultureKey(key)) {
+            unknownCultureKeys.push(key);
+            continue;
+        }
+        if (typeof text !== 'string' || text === '') {
+            malformedKeys.push(key);
+            continue;
+        }
+        clean[key] = text;
+    }
+    return { texts: clean, malformedKeys };
+}
+/**
+ * The header text of a column: `titles` looked up with {@link pickLocalizedText} (exact culture,
+ * then language part; a bare language takes the first key of that language), then `title`.
+ * Without a language (no `MESHBOARD_LANGUAGE`) it is always `title`, as before AB#7655.
+ * Unknown culture keys and malformed entries (non-string or empty text, a `titles` that is no
+ * object) are reported in `problems` and never matched.
+ */
+function resolveColumnTitle(column, language, problems) {
+    const titles = column.titles;
+    if (!isPlainObject(titles)) {
+        if (titles !== undefined && titles !== null) {
+            problems?.malformedTitleKeys?.push('*');
+        }
+        return column.title;
+    }
+    const { texts, malformedKeys } = cleanLocalizedTexts(titles, problems?.unknownCultureKeys ?? []);
+    problems?.malformedTitleKeys?.push(...malformedKeys);
+    return pickLocalizedText(texts, language) ?? column.title;
+}
+/**
+ * Resolves a column's `valueLabels` for the current language into a lookup by raw value (`"1"`,
+ * `"2"`, ...). A label given per language follows the language like `titles`; without a match that
+ * entry is left out, so the cell shows the value in the column's normal rendering. Malformed
+ * entries and unknown culture keys are ignored and reported in `problems`. Returns `null` when no
+ * label applies for the current language (no usable `valueLabels`, or only per-language labels
+ * without a match), so the column keeps its `dataType` / `format` rendering and the label resolver.
+ */
+function resolveValueLabels(column, language, problems) {
+    const valueLabels = column.valueLabels;
+    if (valueLabels === undefined || valueLabels === null) {
+        return null;
+    }
+    const report = problems ?? { unknownCultureKeys: [], malformedValueKeys: [] };
+    if (!isPlainObject(valueLabels)) {
+        report.malformedValueKeys.push('*');
+        return null;
+    }
+    const resolved = new Map();
+    for (const [key, entry] of Object.entries(valueLabels)) {
+        if (!isPlainObject(entry)) {
+            report.malformedValueKeys.push(key);
+            continue;
+        }
+        const { label, color } = entry;
+        if (color !== undefined && typeof color !== 'string') {
+            report.malformedValueKeys.push(key);
+            continue;
+        }
+        let text;
+        if (typeof label === 'string' && label !== '') {
+            text = label;
+        }
+        else if (isPlainObject(label)) {
+            const cleaned = cleanLocalizedTexts(label, report.unknownCultureKeys);
+            if (cleaned.malformedKeys.length > 0 || Object.keys(label).length === 0) {
+                report.malformedValueKeys.push(key);
+                continue;
+            }
+            text = pickLocalizedText(cleaned.texts, language);
+        }
+        else {
+            report.malformedValueKeys.push(key);
+            continue;
+        }
+        if (text !== undefined) {
+            resolved.set(key, { text, ...(color ? { color } : {}) });
+        }
+    }
+    return resolved.size > 0 ? resolved : null;
+}
+/**
+ * Text of a value-label cell whose value has no label: the value as the list view renders the
+ * column's `dataType` - `numeric` with `format` like the `number` pipe, `iso8601` with `format`
+ * like the `date` pipe (both with the app's `locale`), plain text through `textFormatter` (the
+ * board's date-time formatter), anything else as string. A value the pipe cannot format shows as is.
+ */
+function formatUnlabelledValue(value, column, locale, textFormatter) {
+    const format = column.format || undefined;
+    try {
+        switch (column.dataType) {
+            case 'numeric': {
+                const number = typeof value === 'number'
+                    ? value
+                    : typeof value === 'string' && value.trim() !== '' ? Number(value) : Number.NaN;
+                return Number.isFinite(number) ? formatNumber(number, locale, format) : String(value);
+            }
+            case 'iso8601':
+                return typeof value === 'string' || typeof value === 'number' || value instanceof Date
+                    ? formatDate(value, format ?? 'mediumDate', locale)
+                    : String(value);
+            case undefined:
+            case 'text':
+                return textFormatter(value);
+            default:
+                return String(value);
+        }
+    }
+    catch {
+        return String(value);
+    }
+}
+/** Whether a problems record holds anything worth a warning. */
+function hasLabelProblems(problems) {
+    return problems.unknownCultureKeys.length > 0
+        || problems.malformedValueKeys.length > 0
+        || (problems.malformedTitleKeys?.length ?? 0) > 0
+        || problems.statusMappingIgnored === true;
+}
+/**
+ * Columns the table config dialog saves (AB#7655 AC 6). The dialog edits which fields are shown,
+ * not their presentation, so it must not erase hand-authored column properties (`titles`,
+ * `valueLabels`, `width`, `format`, `statusMapping`, ...):
+ * - same data source (same CK type / same persistent query): a field that stays selected keeps its
+ *   existing column object as is; a newly selected field gets a fresh column with `defaultTitle(field)`;
+ * - persistent query: see {@link mergePersistentQueryColumns}.
+ */
+function mergeRuntimeEntityColumns(selectedFields, initialColumns, sameDataSource, defaultTitle) {
+    const existing = new Map();
+    if (sameDataSource) {
+        for (const column of initialColumns ?? []) {
+            if (column && typeof column.field === 'string' && !existing.has(column.field)) {
+                existing.set(column.field, column);
+            }
+        }
+    }
+    return selectedFields.map(field => existing.get(field) ?? { field, title: defaultTitle(field), width: undefined });
+}
+/**
+ * Explicit columns of a persistent-query table after the dialog saved (AB#7655):
+ * - a different query, or no explicit columns: `[]` (columns are derived from the query at run time);
+ * - the same query with known `queryFields` (the columns the query returns now): the explicit columns
+ *   whose field the query still returns, unchanged and in their order, followed by the query's other
+ *   fields as derived columns (`defaultTitle(field)`, like the widget derives them);
+ * - the same query, `queryFields` unknown (`null`, empty, or the lookup failed): the explicit columns unchanged.
+ */
+function mergePersistentQueryColumns(initialColumns, sameQuery, queryFields, defaultTitle = field => field) {
+    if (!sameQuery || !initialColumns || initialColumns.length === 0) {
+        return [];
+    }
+    if (!queryFields || queryFields.length === 0) {
+        return [...initialColumns];
+    }
+    const returned = new Set(queryFields);
+    const kept = initialColumns.filter(column => column && typeof column.field === 'string' && returned.has(column.field));
+    const keptFields = new Set(kept.map(column => column.field));
+    const added = [...returned]
+        .filter(field => !keptFields.has(field))
+        .map(field => ({ field, title: defaultTitle(field) }));
+    return [...kept, ...added];
+}
+
+/**
+ * Cell of a table widget column with `valueLabels` (AB#7655): plain text like every other cell,
+ * optionally in the configured colour. Without a colour it inherits the theme text colour; an
+ * empty text renders an empty cell.
+ */
+class TableValueLabelCellComponent {
+    /** Text of the cell: the label, or the raw value when unmapped; `''` for null / missing. */
+    text = '';
+    /** Optional CSS colour of the text. */
+    color;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TableValueLabelCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: TableValueLabelCellComponent, isStandalone: true, selector: "mm-table-value-label-cell", inputs: { text: "text", color: "color" }, ngImport: i0, template: `@if (text) {<span class="mm-table-value-label" [style.color]="color || null">{{ text }}</span>}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TableValueLabelCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mm-table-value-label-cell',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `@if (text) {<span class="mm-table-value-label" [style.color]="color || null">{{ text }}</span>}`
+                }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
 const ICON_MAP = {
     'check-circle': checkCircleIcon,
     'x-circle': xCircleIcon,
@@ -10487,6 +10982,35 @@ function resolveStatusMapping(config) {
         { icon: ICON_MAP[val.icon] ?? questionCircleIcon, tooltip: val.tooltip, color: val.color }
     ]));
 }
+/** Per-instance fallback for the warning key of widgets without an id. */
+let nextTableWidgetInstance = 0;
+/** Short, stable hash of a text (FNV-1a, base 36) for warning keys. */
+function shortHash(text) {
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < text.length; i++) {
+        hash ^= text.charCodeAt(i);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return (hash >>> 0).toString(36);
+}
+/** A row's value for a column field, read like `mm-list-view` does (flat key first, then nested path). */
+function readCellValue(item, field) {
+    if (item === null || typeof item !== 'object') {
+        return undefined;
+    }
+    const row = item;
+    if (!field.includes('.') || row[field] !== undefined) {
+        return row[field];
+    }
+    let value = row;
+    for (const key of field.split('.')) {
+        if (value === null || value === undefined || typeof value !== 'object') {
+            return undefined;
+        }
+        value = value[key];
+    }
+    return value;
+}
 class TableWidgetComponent {
     config;
     dataSource;
@@ -10498,6 +11022,27 @@ class TableWidgetComponent {
     /** CK value type per derived column field (persistent queries), for the label resolver. */
     _queryColumnValueTypes = signal(new Map(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_queryColumnValueTypes" }] : /* istanbul ignore next */ []));
+    /** Host UI language (`MESHBOARD_LANGUAGE`, AB#7655) for column `titles` / `valueLabels`; `null` = `title` / raw texts. */
+    language;
+    /**
+     * Problems already warned about (`<widget id or instance>|<field>|<problem hash>`), so a bad config
+     * logs once, not on every language change, while a new problem after a config edit is reported again.
+     */
+    warnedColumns = new Set();
+    /** Fallback warning key of a widget without an id. */
+    instanceKey = `#${++nextTableWidgetInstance}`;
+    /** App locale for the `number` / `date` rendering of unlabelled values in value-label columns. */
+    locale = inject(LOCALE_ID);
+    /**
+     * Bumped on every `config` change: `config` is a plain `@Input`, so the computeds that read it
+     * depend on this signal to pick up a new config on the same widget instance (AB#7655).
+     */
+    _configVersion = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_configVersion" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Assigned here, not as a field initialiser: relative-import initialisers break under the Vitest runner (CLAUDE.md).
+        this.language = injectMeshBoardLanguage();
+    }
     // Widget state signals
     _isLoading = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
@@ -10530,6 +11075,8 @@ class TableWidgetComponent {
      * For persistent queries, uses dynamically derived columns from the query response.
      */
     listViewColumns = computed(() => {
+        // A new config on the same instance recomputes the columns (titles, valueLabels, columns).
+        this._configVersion();
         // Read the board's timezone mode so datetime cells (e.g. archive
         // window_start/window_end, which arrive as raw ISO-8601 strings) render on
         // the same basis the time filter is computed on. Reading it here makes the
@@ -10561,30 +11108,66 @@ class TableWidgetComponent {
                 ...column,
                 formatter: (value) => {
                     const text = formatTableCellValue(value, mode);
-                    if (typeof value !== 'string' || value === '') {
+                    // String cells as before; numeric cells only when the query reports an enum value
+                    // type (numeric enum codes, AB#7655) — the resolver gets the number as string.
+                    const isEnumNumber = typeof value === 'number' && Number.isFinite(value) && !!valueType && /ENUM/i.test(valueType);
+                    if (!isEnumNumber && (typeof value !== 'string' || value === '')) {
                         return text;
                     }
                     return resolveMeshBoardLabel(resolver, {
                         kind: 'tableCell',
                         ...(ckTypeId ? { ckTypeId } : {}),
                         attribute: column.field,
-                        value,
+                        value: String(value),
                         ...(valueType ? { valueType } : {}),
                         defaultText: text
                     });
                 }
             };
         };
-        // If explicit columns are configured, use them (works for both data source types)
+        // If explicit columns are configured, use them (works for both data source types).
+        // Header texts and value labels follow the host language (AB#7655); reading the
+        // language signal here re-labels the columns without refetching data.
         if (this.config?.columns && this.config.columns.length > 0) {
-            return this.config.columns.map(col => withDateFormatter({
-                field: col.field,
-                displayName: col.title,
-                dataType: (col.dataType ?? 'text'),
-                width: col.width,
-                ...(col.format ? { format: col.format } : {}),
-                ...(col.statusMapping ? { statusMapping: resolveStatusMapping(col.statusMapping) } : {})
-            }));
+            const language = this.language();
+            const textFormatter = (value) => formatTableCellValue(value, mode);
+            return this.config.columns.map(col => {
+                const problems = emptyLabelProblems();
+                const base = {
+                    field: col.field,
+                    displayName: resolveColumnTitle(col, language, problems),
+                    dataType: (col.dataType ?? 'text'),
+                    width: col.width,
+                    ...(col.format ? { format: col.format } : {}),
+                    ...(col.statusMapping ? { statusMapping: resolveStatusMapping(col.statusMapping) } : {})
+                };
+                const labels = resolveValueLabels(col, language, problems);
+                if (labels && (col.statusMapping || col.dataType === 'statusIcons')) {
+                    // valueLabels together with statusMapping (status icons) is not supported: the labels win.
+                    problems.statusMappingIgnored = true;
+                }
+                this.warnOnce(col, problems);
+                if (!labels) {
+                    return withDateFormatter(base);
+                }
+                // valueLabels win over the label resolver: a plain-text cell with the label (and its optional
+                // colour); an unmapped value keeps the column's dataType / format rendering; empty for null.
+                return {
+                    ...base,
+                    dataType: 'component',
+                    cellComponent: TableValueLabelCellComponent,
+                    cellInputs: (item) => {
+                        const value = readCellValue(item, col.field);
+                        if (value === null || value === undefined || value === '') {
+                            return { text: '' };
+                        }
+                        const label = labels.get(String(value));
+                        return label
+                            ? { text: label.text, color: label.color }
+                            : { text: formatUnlabelledValue(value, col, this.locale, textFormatter) };
+                    }
+                };
+            });
         }
         // For persistent query without explicit columns, use derived columns
         if (this.config?.dataSource?.type === 'persistentQuery') {
@@ -10619,6 +11202,7 @@ class TableWidgetComponent {
      * Returns true once columns are available.
      */
     columnsReady = computed(() => {
+        this._configVersion();
         if (!this.config?.dataSource)
             return false;
         if (this.config.dataSource.type === 'persistentQuery') {
@@ -10629,6 +11213,38 @@ class TableWidgetComponent {
         return (this.config.columns?.length ?? 0) > 0;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columnsReady" }] : /* istanbul ignore next */ []));
+    /**
+     * Logs one console warning per widget, column and set of problems for ignored `titles` /
+     * `valueLabels` entries (unknown culture keys, malformed titles or value labels, `valueLabels`
+     * together with `statusMapping`, AB#7655). The table still renders. The key carries a hash of the
+     * problem list, so a different problem after a config edit is reported again; widgets without an
+     * id use a per-instance key.
+     */
+    warnOnce(column, problems) {
+        if (!hasLabelProblems(problems)) {
+            return;
+        }
+        const parts = [];
+        const quoted = (keys) => keys.map(k => `"${k}"`).join(', ');
+        if (problems.unknownCultureKeys.length > 0) {
+            parts.push(`unknown culture keys ${quoted(problems.unknownCultureKeys)}`);
+        }
+        if (problems.malformedTitleKeys && problems.malformedTitleKeys.length > 0) {
+            parts.push(`malformed titles entries ${quoted(problems.malformedTitleKeys)}`);
+        }
+        if (problems.malformedValueKeys.length > 0) {
+            parts.push(`malformed valueLabels entries ${quoted(problems.malformedValueKeys)}`);
+        }
+        if (problems.statusMappingIgnored) {
+            parts.push('statusMapping (valueLabels together with status icons are not supported; the labels are shown)');
+        }
+        const key = `${this.config?.id || this.instanceKey}|${column.field}|${shortHash(parts.join(';'))}`;
+        if (this.warnedColumns.has(key)) {
+            return;
+        }
+        this.warnedColumns.add(key);
+        console.warn(`octo-meshboard: table widget "${this.config?.title ?? ''}" (${this.config?.id ?? ''}), column "${column.field}": ignoring ${parts.join('; ')}`);
+    }
     formatColumnTitle(field) {
         return field
             .replace(/([A-Z])/g, ' $1')
@@ -10636,6 +11252,9 @@ class TableWidgetComponent {
             .trim();
     }
     ngOnChanges(changes) {
+        if (changes['config']) {
+            this._configVersion.update(version => version + 1);
+        }
         if (changes['config'] && !changes['config'].firstChange) {
             // Clear cached query columns when config changes (for persistent queries)
             if (this.config?.dataSource?.type === 'persistentQuery') {
@@ -10713,7 +11332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       }
     </div>
   `, changeDetection: ChangeDetectionStrategy.Eager, styles: [".table-widget{height:100%;width:100%;display:flex;flex-direction:column}.no-config-overlay{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-subtle, #6c757d);font-style:italic}:host ::ng-deep mm-list-view{height:100%}:host ::ng-deep .k-grid{height:100%}\n"] }]
-        }], propDecorators: { config: [{
+        }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], dataSource: [{
                 type: ViewChild,
@@ -10732,6 +11351,10 @@ class TableConfigDialogComponent {
     getCkTypeAvailableQueryColumnsGQL = inject(GetCkTypeAvailableQueryColumnsDtoGQL);
     stateService = inject(MeshBoardStateService);
     windowRef = inject(WindowRef);
+    getRuntimeQueryColumnsGQL = inject(GetRuntimeQueryColumnsDtoGQL);
+    queryExecutor = inject(QueryExecutorService);
+    /** Fields the saved query returns now, loaded once per query rtId (AB#7655, kept explicit columns). */
+    queryFieldsLoad;
     ckTypeSelectorInput;
     filterEditor;
     querySelector;
@@ -10949,14 +11572,48 @@ class TableConfigDialogComponent {
             return 'No sorting configured';
         return this.sorting.map(s => `${s.attributePath} ${s.sortOrder === SortOrdersDto.AscendingDto ? '↑' : '↓'}`).join(', ');
     }
-    onSave() {
+    /**
+     * The fields a persistent query returns now (`null` when unknown or the lookup failed). Runtime
+     * queries use the metadata-only column resolver; stream-data queries execute with `first: 1`
+     * (no column-introspection endpoint), like the chart dialogs.
+     */
+    loadQueryFields(rtId) {
+        if (this.queryFieldsLoad?.rtId === rtId) {
+            return this.queryFieldsLoad.fields;
+        }
+        const fields = (async () => {
+            try {
+                const family = queryFamily(this.selectedPersistentQuery?.ckTypeId) ?? this.initialQueryFamily
+                    ?? await this.queryExecutor.resolveFamily(rtId);
+                if (family === 'runtime') {
+                    // network-only: the query may have changed since its columns were cached.
+                    const result = await firstValueFrom(this.getRuntimeQueryColumnsGQL.fetch({
+                        variables: { rtId },
+                        fetchPolicy: 'network-only'
+                    }));
+                    const columns = result.data?.runtime?.runtimeQuery?.items?.[0]?.columns ?? [];
+                    return columns
+                        .map(c => c?.attributePath ?? '')
+                        .filter(path => path !== '');
+                }
+                const sdResult = await firstValueFrom(this.queryExecutor.executeStreamData(rtId, { first: 1, forceRefresh: true }));
+                return sdResult.columns.map(c => c.attributePath).filter(path => !!path);
+            }
+            catch (error) {
+                console.error('Error loading query columns:', error);
+                return null;
+            }
+        })();
+        this.queryFieldsLoad = { rtId, fields };
+        return fields;
+    }
+    async onSave() {
         if (this.dataSourceType === 'runtimeEntity' && this.selectedCkType) {
-            // Convert selected columns to TableColumn format
-            const columns = this.selectedColumns.map(field => ({
-                field,
-                title: this.formatColumnTitle(field),
-                width: undefined
-            }));
+            // Convert selected columns to TableColumn format. Columns that stay selected on the same
+            // CK type keep their authored properties (titles, valueLabels, width, format, ... — AB#7655).
+            const sameDataSource = this.initialDataSourceType !== 'persistentQuery'
+                && !!this.initialCkTypeId && this.selectedCkType.rtCkTypeId === this.initialCkTypeId;
+            const columns = mergeRuntimeEntityColumns(this.selectedColumns, this.initialColumns, sameDataSource, field => this.formatColumnTitle(field));
             // Convert filters (remove IDs)
             const filterDtos = this.filters.map(f => ({
                 attributePath: f.attributePath,
@@ -10982,15 +11639,24 @@ class TableConfigDialogComponent {
             }));
             // Derive family from the selected query's CK type so the runtime executor
             // can route correctly without an extra lookup.
-            const family = queryFamily(this.selectedPersistentQuery.ckTypeId) ?? this.initialQueryFamily ?? undefined;
+            const query = this.selectedPersistentQuery;
+            const family = queryFamily(query.ckTypeId) ?? this.initialQueryFamily ?? undefined;
+            // Explicit (hand-authored) columns survive a save on the same query (AB#7655), minus the ones
+            // the query no longer returns, plus the query's other columns as derived columns; a new query
+            // starts without explicit columns (derived from the query at run time).
+            const sameQuery = this.initialDataSourceType === 'persistentQuery' && query.rtId === this.initialQueryRtId;
+            const queryFields = sameQuery && (this.initialColumns?.length ?? 0) > 0
+                ? await this.loadQueryFields(query.rtId)
+                : null;
+            const columns = mergePersistentQueryColumns(this.initialColumns, sameQuery, queryFields, field => this.formatColumnTitle(field));
             this.windowRef.close({
                 dataSourceType: 'persistentQuery',
                 ckTypeId: '', // Not used for persistent query
-                columns: [], // Will be derived from query
+                columns,
                 sorting: [],
                 filters: queryFilterDtos,
-                queryRtId: this.selectedPersistentQuery.rtId,
-                queryName: this.selectedPersistentQuery.name,
+                queryRtId: query.rtId,
+                queryName: query.name,
                 queryFamily: family,
                 ignoreTimeFilter: this.ignoreTimeFilter,
                 entitySelectorId: this.entitySelectorId,
@@ -11639,7 +12305,7 @@ class GaugeWidgetComponent {
             // 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);
+            const scope = this.stateService.resolveStreamDataScope(dataSource.entitySelectorId, dataSource.queryFamily, dataSource.ignoreTimeFilter);
             if (scope.kind === 'pending') {
                 return;
             }
@@ -11651,7 +12317,9 @@ class GaugeWidgetComponent {
             const streamDataArgs = this.buildStreamDataArgs();
             const result = await firstValueFrom(this.queryExecutor.execute(dataSource.queryFamily, dataSource.queryRtId, {
                 fieldFilter: fieldFilter ?? undefined,
-                streamDataArgs
+                streamDataArgs,
+                // Runtime queries: `rtId IN` field filter (AB#7725); stream data: arg.rtIds.
+                scopeRtIds: scope.kind === 'scoped' ? scope.rtIds : undefined
             }).pipe(catchError(err => {
                 console.error('Error loading Gauge query data:', err);
                 throw err;
@@ -13753,7 +14421,7 @@ class PieChartWidgetComponent {
         // 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);
+        const scope = this.stateService.resolveStreamDataScope(dataSource.entitySelectorId, dataSource.queryFamily, dataSource.ignoreTimeFilter);
         if (scope.kind === 'pending') {
             return;
         }
@@ -13769,7 +14437,9 @@ class PieChartWidgetComponent {
         const streamDataArgs = this.buildStreamDataArgs();
         const result = await firstValueFrom(this.queryExecutor.execute(dataSource.queryFamily, dataSource.queryRtId, {
             fieldFilter: fieldFilter ?? undefined,
-            streamDataArgs
+            streamDataArgs,
+            // Runtime queries: `rtId IN` field filter (AB#7725); stream data: arg.rtIds.
+            scopeRtIds: scope.kind === 'scoped' ? scope.rtIds : undefined
         }).pipe(catchError(err => {
             console.error('Error loading Pie Chart data:', err);
             throw err;
@@ -14979,7 +15649,7 @@ class BarChartWidgetComponent {
             // 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);
+            const scope = this.stateService.resolveStreamDataScope(queryDataSource.entitySelectorId, queryDataSource.queryFamily, queryDataSource.ignoreTimeFilter);
             if (scope.kind === 'pending') {
                 return;
             }
@@ -14988,7 +15658,9 @@ class BarChartWidgetComponent {
                 ? emptyQueryExecutionResult(queryDataSource.queryFamily)
                 : await firstValueFrom(this.queryExecutor.execute(queryDataSource.queryFamily, queryDataSource.queryRtId, {
                     fieldFilter: fieldFilter ?? undefined,
-                    streamDataArgs
+                    streamDataArgs,
+                    // Runtime queries: `rtId IN` field filter (AB#7725); stream data: arg.rtIds.
+                    scopeRtIds: scope.kind === 'scoped' ? scope.rtIds : undefined
                 }).pipe(catchError(err => {
                     console.error('Error loading Bar Chart data:', err);
                     throw err;
@@ -16540,7 +17212,7 @@ class LineChartWidgetComponent {
             // 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);
+            const scope = this.stateService.resolveStreamDataScope(queryDataSource.entitySelectorId, queryDataSource.queryFamily, queryDataSource.ignoreTimeFilter);
             if (scope.kind === 'pending') {
                 return;
             }
@@ -16580,7 +17252,9 @@ class LineChartWidgetComponent {
             this.lastLimit = streamDataArgs?.limit ?? 0;
             const result = await firstValueFrom(this.queryExecutor.execute(queryDataSource.queryFamily, queryDataSource.queryRtId, {
                 fieldFilter: fieldFilter ?? undefined,
-                streamDataArgs
+                streamDataArgs,
+                // Runtime queries: `rtId IN` field filter (AB#7725); stream data: arg.rtIds.
+                scopeRtIds: scope.kind === 'scoped' ? scope.rtIds : undefined
             }).pipe(catchError(err => {
                 console.error('Error loading Line Chart data:', err);
                 throw err;
@@ -16796,7 +17470,7 @@ class LineChartWidgetComponent {
                 // as UTC — a bare `new Date(...)` would reinterpret it as browser-local time and shift
                 // the axis by the UTC offset (AB#4818).
                 if (!allCategories.has(categoryValue)) {
-                    allCategories.set(categoryValue, toInstant(categoryValue) ?? new Date(NaN));
+                    allCategories.set(categoryValue, toInstant$1(categoryValue) ?? new Date(NaN));
                 }
                 allSeriesGroups.add(seriesGroupValue);
                 if (!dataMap.has(categoryValue)) {
@@ -18136,7 +18810,7 @@ class HeatmapWidgetComponent {
             // 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);
+            const scope = this.stateService.resolveStreamDataScope(queryDataSource.entitySelectorId, queryDataSource.queryFamily, queryDataSource.ignoreTimeFilter);
             if (scope.kind === 'pending') {
                 return;
             }
@@ -18145,7 +18819,9 @@ class HeatmapWidgetComponent {
                 ? emptyQueryExecutionResult(queryDataSource.queryFamily)
                 : await firstValueFrom(this.queryExecutor.execute(queryDataSource.queryFamily, queryDataSource.queryRtId, {
                     fieldFilter: fieldFilter ?? undefined,
-                    streamDataArgs
+                    streamDataArgs,
+                    // Runtime queries: `rtId IN` field filter (AB#7725); stream data: arg.rtIds.
+                    scopeRtIds: scope.kind === 'scoped' ? scope.rtIds : undefined
                 }).pipe(catchError(err => {
                     console.error('Error loading Heatmap data:', err);
                     throw err;
@@ -18413,7 +19089,7 @@ class HeatmapWidgetComponent {
     parseDate(value) {
         if (!value)
             return null;
-        return toInstant(value);
+        return toInstant$1(value);
     }
     convertFiltersToDto(filters) {
         const variables = this.stateService.getVariables();
@@ -19530,15 +20206,19 @@ 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') {
+        // Pending or empty scope (still resolving, nothing in scope or lookup failed,
+        // AB#7721/AB#7725): no value, no query — never the persisted (unscoped) scope.
+        // The view refreshes the widget once a pending scope is resolved.
+        const scope = this.scopeOf(source);
+        if (scope.kind === 'pending' || scope.kind === 'empty') {
             return null;
         }
         try {
             const result = await firstValueFrom(this.queryExecutor.execute(source.queryFamily, source.queryRtId, {
                 fieldFilter: this.convertFiltersToDto(source.filters),
-                streamDataArgs: this.buildStreamDataArgs(source)
+                streamDataArgs: this.buildStreamDataArgs(source),
+                // Runtime queries: `rtId IN` field filter (AB#7725); stream data: arg.rtIds.
+                scopeRtIds: scope.kind === 'scoped' ? scope.rtIds : undefined
             }));
             return extractPersistentQueryCellValue(result, source);
         }
@@ -19548,7 +20228,7 @@ class StatsGridWidgetComponent {
         }
     }
     scopeOf(source) {
-        return this.stateService.resolveStreamDataScope(source.entitySelectorId, source.queryFamily);
+        return this.stateService.resolveStreamDataScope(source.entitySelectorId, source.queryFamily, source.ignoreTimeFilter);
     }
     buildStreamDataArgs(source) {
         const timeArgs = this.stateService.resolveStreamDataTimeArgs(source.ignoreTimeFilter);
@@ -19721,7 +20401,7 @@ class PersistentQueryCellEditorComponent {
         </kendo-combobox>
       </div>
 
-      <!-- Stream-data-only options (hidden for runtime queries) -->
+      <!-- Time filter: stream data only. Scope binding: both families (AB#7725). -->
       <mm-sd-time-filter-toggle
         [family]="family"
         [(ignoreTimeFilter)]="ignoreTimeFilter"
@@ -19786,7 +20466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         </kendo-combobox>
       </div>
 
-      <!-- Stream-data-only options (hidden for runtime queries) -->
+      <!-- Time filter: stream data only. Scope binding: both families (AB#7725). -->
       <mm-sd-time-filter-toggle
         [family]="family"
         [(ignoreTimeFilter)]="ignoreTimeFilter"
@@ -23229,19 +23909,23 @@ 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') {
+        // Pending or empty scope (still resolving, nothing in scope or lookup failed,
+        // AB#7721/AB#7725): no value, no query — never the persisted (unscoped) scope.
+        // The view refreshes the widget once a pending scope is resolved.
+        const scope = this.scopeOf(source);
+        if (scope.kind === 'pending' || scope.kind === 'empty') {
             return null;
         }
         const result = await firstValueFrom(this.queryExecutor.execute(source.queryFamily, source.queryRtId, {
             fieldFilter: this.convertFiltersToDto(source.filters),
-            streamDataArgs: this.buildStreamDataArgs(source)
+            streamDataArgs: this.buildStreamDataArgs(source),
+            // Runtime queries: `rtId IN` field filter (AB#7725); stream data: arg.rtIds.
+            scopeRtIds: scope.kind === 'scoped' ? scope.rtIds : undefined
         }));
         return extractPersistentQueryCellValue(result, source);
     }
     scopeOf(source) {
-        return this.stateService.resolveStreamDataScope(source.entitySelectorId, source.queryFamily);
+        return this.stateService.resolveStreamDataScope(source.entitySelectorId, source.queryFamily, source.ignoreTimeFilter);
     }
     buildStreamDataArgs(source) {
         const timeArgs = this.stateService.resolveStreamDataTimeArgs(source.ignoreTimeFilter);
@@ -24753,6 +25437,13 @@ class ProcessDataService {
         if (!queryRtId) {
             throw new Error('Persistent query binding requires queryRtId');
         }
+        // AB#7582: while the embedding host's period is invalid, a stream-data query
+        // bound to the time filter is not sent (it would read the whole archive); the
+        // binding gets no value. Runtime queries are unaffected.
+        if (this.stateService.isStreamDataBlockedByHostTimeRange()
+            && await this.queryExecutor.resolveFamily(queryRtId) === 'streamData') {
+            return undefined;
+        }
         // Execute via the unified executor (family resolved lazily). The active time
         // filter is applied by default for stream-data queries; runtime queries
         // ignore it. The element binding has no asset-scope, so no rtIds override.
@@ -24953,7 +25644,7 @@ class ProcessDataService {
         // 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);
+        const scope = this.stateService.resolveStreamDataScope(config.bindingEntitySelectorId, bindingQueryFamily, config.bindingIgnoreTimeFilter);
         if (scope.kind === 'pending') {
             return { type: 'query', pending: true, loadedAt: new Date() };
         }
@@ -24973,7 +25664,9 @@ class ProcessDataService {
         const result = await firstValueFrom(this.queryExecutor.execute(bindingQueryFamily, bindingQueryRtId, {
             first: 1000, // Reasonable limit for process diagram data
             fieldFilter: fieldFilters,
-            streamDataArgs: this.buildBindingStreamDataArgs(config)
+            streamDataArgs: this.buildBindingStreamDataArgs(config),
+            // Runtime queries: `rtId IN` field filter (AB#7725); stream data: arg.rtIds.
+            scopeRtIds: scope.kind === 'scoped' ? scope.rtIds : undefined
         }));
         return {
             type: 'query',
@@ -30592,7 +31285,8 @@ function registerDefaultWidgets(registry) {
                 return {
                     ...widget,
                     dataSource,
-                    columns: [], // Will be derived from query at runtime
+                    // Explicit columns the dialog kept (same query, AB#7655); [] = derived from the query at runtime
+                    columns: result.columns ?? [],
                     sorting: [],
                     filters,
                     pageSize: result.pageSize,
@@ -32279,6 +32973,9 @@ function provideMeshBoard(options) {
     if (opts.messages) {
         providers.push({ provide: MESHBOARD_MESSAGES, useValue: opts.messages });
     }
+    if (opts.language) {
+        providers.push({ provide: MESHBOARD_LANGUAGE, useValue: opts.language });
+    }
     // Include default widgets unless explicitly disabled
     if (opts.includeDefaultWidgets !== false) {
         providers.push(provideAppInitializer(() => {
@@ -32295,6 +32992,13 @@ function provideMeshBoard(options) {
 function provideMeshBoardMessages(messages) {
     return makeEnvironmentProviders([{ provide: MESHBOARD_MESSAGES, useValue: messages }]);
 }
+/**
+ * Provides the host's UI language (`MESHBOARD_LANGUAGE`, AB#7655) without `provideMeshBoard()` —
+ * for apps that register the widgets lazily. A string or a signal (the widgets follow it).
+ */
+function provideMeshBoardLanguage(language) {
+    return makeEnvironmentProviders([{ provide: MESHBOARD_LANGUAGE, useValue: language }]);
+}
 /**
  * Provider function for registering custom widgets.
  * Use this to add your own widget types to MeshBoard.
@@ -32426,6 +33130,506 @@ function labelList(selectors) {
     return `${labels.slice(0, -1).join(', ')} and ${labels[labels.length - 1]}`;
 }
 
+/** Turns a selector's child scope into its resolution plan. */
+function scopePlan(childScope) {
+    if (!childScope) {
+        return { kind: 'none' };
+    }
+    const path = childScope.path;
+    if (Array.isArray(path) && path.length > 0) {
+        if (path.length > MAX_SCOPE_HOPS) {
+            return { kind: 'invalid', reason: `the path has ${path.length} hops (at most ${MAX_SCOPE_HOPS})` };
+        }
+        const hops = [];
+        for (let i = 0; i < path.length; i++) {
+            const hop = normalizeHop(path[i]);
+            if (!hop) {
+                return { kind: 'invalid', reason: `hop ${i + 1} needs an association role and a target type` };
+            }
+            hops.push(hop);
+        }
+        return { kind: 'path', hops };
+    }
+    // Original one-hop form; incomplete top-level fields mean "no child scope",
+    // exactly as before AB#7723.
+    if (!childScope.targetCkTypeId || !childScope.roleId) {
+        return { kind: 'none' };
+    }
+    return {
+        kind: 'single',
+        hop: {
+            roleId: childScope.roleId,
+            direction: childScope.direction ?? 'in',
+            targetCkTypeId: childScope.targetCkTypeId
+        }
+    };
+}
+/** The hops of a child scope as the editor shows them (one-hop form = one hop). */
+function scopeHopsOf(childScope) {
+    if (!childScope) {
+        return [];
+    }
+    if (Array.isArray(childScope.path) && childScope.path.length > 0) {
+        return childScope.path.map(h => ({ roleId: h.roleId, direction: h.direction ?? 'in', targetCkTypeId: h.targetCkTypeId }));
+    }
+    // Incomplete top-level fields are "no child scope" at runtime; show them as none.
+    if (childScope.targetCkTypeId && childScope.roleId) {
+        return [{ roleId: childScope.roleId, direction: childScope.direction ?? 'in', targetCkTypeId: childScope.targetCkTypeId }];
+    }
+    return [];
+}
+/**
+ * Editor validation of a hop list: the message for the first hop without role
+ * or target type, or for more than {@link MAX_SCOPE_HOPS} hops; `null` when the
+ * list can be saved (an empty list = no child scope).
+ */
+function scopeHopsValidationError(hops) {
+    if (hops.length > MAX_SCOPE_HOPS) {
+        return `At most ${MAX_SCOPE_HOPS} hops.`;
+    }
+    const index = hops.findIndex(h => !h.roleId?.trim() || !h.targetCkTypeId?.trim());
+    return index < 0 ? null : `Hop ${index + 1} needs an association and a target type.`;
+}
+/**
+ * The child scope the editor saves for a list of hops: none for zero hops, the
+ * original top-level form for one hop (older library versions keep reading
+ * it), and `path` only for two or more hops. Roles are trimmed.
+ */
+function childScopeFromHops(hops) {
+    const clean = hops.map(h => ({
+        roleId: h.roleId.trim(),
+        direction: h.direction ?? 'in',
+        targetCkTypeId: h.targetCkTypeId.trim()
+    }));
+    if (clean.length === 0) {
+        return undefined;
+    }
+    if (clean.length === 1) {
+        const [hop] = clean;
+        return { targetCkTypeId: hop.targetCkTypeId, roleId: hop.roleId, direction: hop.direction };
+    }
+    return { path: clean };
+}
+/**
+ * Resolves a scope path hop by hop from the picked entity: each hop is ONE
+ * batched step over all entities the previous hop reached (the fetcher decides
+ * how to batch), the source type of hop n is the target type of hop n-1, and
+ * the result is the distinct rtIds of the last hop.
+ *
+ * - An empty hop ends the resolution: no further hop is requested and the
+ *   scope is empty (AB#7721 empty-scope rule).
+ * - A failing hop rejects; the caller turns that into a failed scope.
+ * - `isCurrent` is checked after every hop: when a newer pick has started, the
+ *   resolution stops and returns `null` (stale — must not be applied).
+ */
+async function resolveScopePath(pickedRtId, pickedCkTypeId, hops, fetchHop, isCurrent = () => true) {
+    let sources = [pickedRtId];
+    let sourceCkTypeId = pickedCkTypeId;
+    for (const hop of hops) {
+        const targets = await fetchHop(sources, sourceCkTypeId, hop);
+        if (!isCurrent()) {
+            return null;
+        }
+        sources = distinctRtIds(targets);
+        if (sources.length === 0) {
+            return [];
+        }
+        sourceCkTypeId = hop.targetCkTypeId;
+    }
+    return sources;
+}
+/** Non-empty rtIds in first-seen order, without duplicates. */
+function distinctRtIds(rtIds) {
+    const seen = new Set();
+    for (const id of rtIds) {
+        const value = id === null || id === undefined ? '' : String(id);
+        if (value.length > 0) {
+            seen.add(value);
+        }
+    }
+    return [...seen];
+}
+/** "Test/Site → Test/System → Test/Device" for the editor's path line. */
+function scopePathLabel(startCkTypeId, hops) {
+    return [startCkTypeId, ...hops.map(h => h.targetCkTypeId || '?')].join(' → ');
+}
+function normalizeHop(hop) {
+    const roleId = typeof hop?.roleId === 'string' ? hop.roleId.trim() : '';
+    const targetCkTypeId = typeof hop?.targetCkTypeId === 'string' ? hop.targetCkTypeId.trim() : '';
+    if (!roleId || !targetCkTypeId) {
+        return null;
+    }
+    return { roleId, direction: hop?.direction === 'out' ? 'out' : 'in', targetCkTypeId };
+}
+
+/**
+ * Picker filter of an entity selector (AB#7724).
+ *
+ * `EntitySelectorConfig.filters` narrows what the selector's pickers list. The
+ * rows are converted exactly like widget filters (variables substituted, AND)
+ * and sent as GraphQL `fieldFilter` of the `runtimeEntities` query, so the
+ * server filters — the picker never loads all entities of the type. Pure
+ * helpers, shared by the toolbar (runtime) and the selector editor.
+ */
+/** True when the selector carries at least one filter row that applies (never for followers). */
+function hasPickerFilter(selector) {
+    return !isFollowerSelector(selector) && (selector.filters?.length ?? 0) > 0;
+}
+/**
+ * The GraphQL field filters of the selector's picker, with board variables
+ * substituted; `undefined` when the selector has no filter or is a follower
+ * (a follower has no picker and ignores a filter).
+ */
+function pickerFieldFilters(selector, variables, variableService) {
+    if (!hasPickerFilter(selector)) {
+        return undefined;
+    }
+    return variableService.convertToFieldFilterDto(selector.filters, variables);
+}
+/**
+ * Wraps the picker query so every fetch carries `baseFilters` in front of the
+ * fetch's own field filters (the text search of the dropdown and the dialog).
+ * GraphQL combines field filters with AND, so the search works on top of the
+ * selector filter. Without base filters the original query is returned
+ * unchanged — an unfiltered picker sends exactly the query it sent before.
+ *
+ * The wrapper inherits from the original service object, so it is usable
+ * wherever the picker data sources (octo-services) expect the query service.
+ */
+function withPickerFilters(gql, baseFilters) {
+    if (!baseFilters?.length) {
+        return gql;
+    }
+    const wrapped = Object.create(gql);
+    wrapped.fetch = ((options) => {
+        const variables = options?.variables;
+        const own = variables?.fieldFilters;
+        const ownList = own === undefined || own === null ? [] : Array.isArray(own) ? own : [own];
+        return gql.fetch({
+            ...options,
+            variables: { ...variables, fieldFilters: [...baseFilters, ...ownList] }
+        });
+    });
+    return wrapped;
+}
+/**
+ * Variable names a filter row still references after substitution — a board
+ * variable without a value. Such a value is sent literally, exactly like in
+ * widget filters (`MeshBoardVariableService.resolveVariables` keeps the
+ * placeholder), so it usually matches nothing; the picker names the variable
+ * in its empty-list text instead of showing an unexplained empty list.
+ */
+function unresolvedFilterVariables(filters) {
+    const names = new Set();
+    for (const filter of filters ?? []) {
+        const value = typeof filter?.comparisonValue === 'string' ? filter.comparisonValue : '';
+        for (const match of value.matchAll(/\$\{([^}]+)\}|\$([a-zA-Z_]\w*)/g)) {
+            names.add(match[1] ?? match[2]);
+        }
+    }
+    return [...names];
+}
+/**
+ * Empty-list text of a filtered picker (wording agreed with the Studio PO):
+ * the search alone may have found nothing, so it names the filter as a
+ * possible reason without claiming it is the reason.
+ */
+function filteredNoEntitiesMessage(label, unresolvedVariables = []) {
+    const name = label || 'entity';
+    const base = `No ${name} found. This board only lists ${name} that match its filter.`;
+    if (unresolvedVariables.length === 0) {
+        return base;
+    }
+    const vars = unresolvedVariables.map(v => `$${v}`).join(', ');
+    return `${base} The filter uses ${vars}, which has no value yet.`;
+}
+/** Title of the picker's search dialog when a filter is set. */
+function filteredDialogTitle(label) {
+    return `Select ${label} (filtered)`;
+}
+
+/** Key of the "Other role…" entry: free-text role and direction. */
+const OTHER_ASSOCIATION = '__other__';
+/**
+ * Hop list of an entity selector's child scope (AB#7723; wireframe agreed by
+ * Freya, AB#7723 comment 6625315). Each hop picks an association of its source
+ * type from the CK metadata (role + direction + base target in one entry, or
+ * "Other role…" for free text) and a target type restricted to types derived
+ * from the association's target. The source type of hop 1 is the selector's
+ * CK type, of every later hop the previous hop's target type. Hops can be
+ * added (at most {@link MAX_SCOPE_HOPS}), removed and moved up/down.
+ *
+ * Two-way bindable; emits the hops as configured (validation is the host's,
+ * see `scopeHopsValidationError`):
+ * ```html
+ * <mm-entity-selector-scope-path-editor
+ *   [sourceCkTypeId]="ckTypeId"
+ *   [(hops)]="hops">
+ * </mm-entity-selector-scope-path-editor>
+ * ```
+ */
+class EntitySelectorScopePathEditorComponent {
+    rolesGQL = inject(GetCkTypeAssociationRolesDtoGQL);
+    cdr = inject(ChangeDetectorRef);
+    hopsChange = new EventEmitter();
+    hopCards;
+    rows = [];
+    plusIcon = plusIcon;
+    arrowUpIcon = arrowUpIcon;
+    arrowDownIcon = arrowDownIcon;
+    trashIcon = MM_ACTION_ICONS.delete;
+    _sourceCkTypeId = '';
+    lastEmitted = null;
+    associations = new Map();
+    /** CK type of the picked entity — the source type of hop 1. */
+    set sourceCkTypeId(value) {
+        this._sourceCkTypeId = value ?? '';
+        this.syncAssociationKeys();
+    }
+    get sourceCkTypeId() {
+        return this._sourceCkTypeId;
+    }
+    /** The configured hops (one-hop form = one hop). */
+    set hops(value) {
+        // Our own emission coming back through the two-way binding: keep the rows
+        // (free-text mode) as they are.
+        if (value && value === this.lastEmitted)
+            return;
+        this.rows = (value ?? []).map(h => ({
+            roleId: h.roleId ?? '',
+            direction: h.direction ?? 'in',
+            targetCkTypeId: h.targetCkTypeId ?? '',
+            targetItem: h.targetCkTypeId ? ckTypeItem(h.targetCkTypeId) : null,
+            associationKey: ''
+        }));
+        this.syncAssociationKeys();
+    }
+    /** Maximum hop count (getter: relative imports must not initialise fields, see CLAUDE.md). */
+    get maxHops() {
+        return MAX_SCOPE_HOPS;
+    }
+    get canAddHop() {
+        return this.rows.length < MAX_SCOPE_HOPS;
+    }
+    /** "Test/Site → Test/System → Test/Device". */
+    get pathLabel() {
+        return scopePathLabel(this.sourceCkTypeId || '?', this.rows);
+    }
+    /** True when the association metadata of any shown source type could not be loaded. */
+    get metadataFailed() {
+        return this.rows.some((_, i) => this.loadOf(i)?.state === 'failed');
+    }
+    /** Source type of hop `index`. */
+    sourceTypeOf(index) {
+        return index === 0 ? this.sourceCkTypeId : this.rows[index - 1]?.targetCkTypeId ?? '';
+    }
+    /** Dropdown entries of hop `index`: the source type's associations plus "Other role…". */
+    associationOptions(index) {
+        const load = this.loadOf(index);
+        const options = load?.state === 'loaded' ? load.options : [];
+        return [...options, {
+                key: OTHER_ASSOCIATION,
+                roleId: '',
+                direction: 'in',
+                baseTargetCkTypeId: '',
+                label: 'Other role…'
+            }];
+    }
+    /** True when hop `index` offers the association dropdown (metadata loaded with ≥1 association). */
+    hasAssociationList(index) {
+        const load = this.loadOf(index);
+        return load?.state === 'loaded' && load.options.length > 0;
+    }
+    /** True when hop `index` shows the free-text role and direction fields. */
+    isFreeText(index) {
+        return !this.hasAssociationList(index) || this.rows[index].associationKey === OTHER_ASSOCIATION;
+    }
+    /** Base type the target-type picker of hop `index` is restricted to (undefined = any type). */
+    baseTargetOf(index) {
+        const row = this.rows[index];
+        const option = this.associationOptions(index).find(o => o.key === row.associationKey && o.key !== OTHER_ASSOCIATION);
+        return option?.baseTargetCkTypeId || undefined;
+    }
+    /**
+     * Warning of hop `index` when its role is not an association of its (new)
+     * source type — after a reorder, a removal or a changed earlier target. The
+     * values are kept; it does not block saving.
+     */
+    associationWarning(index) {
+        const row = this.rows[index];
+        if (!row.roleId.trim() || !this.hasAssociationList(index))
+            return '';
+        const load = this.loadOf(index);
+        const defined = load?.state === 'loaded'
+            && load.options.some(o => o.roleId === row.roleId.trim() && o.direction === row.direction);
+        return defined ? '' : `Association ${row.roleId.trim()} is not defined on ${this.sourceTypeOf(index) || 'the source type'}.`;
+    }
+    /** Validation message of hop `index`: an incomplete hop blocks saving (see `scopeHopsValidationError`). */
+    hopError(index) {
+        const row = this.rows[index];
+        return !row.roleId.trim() || !row.targetCkTypeId.trim()
+            ? `Hop ${index + 1} needs an association and a target type.`
+            : '';
+    }
+    isRoleInvalid(index) {
+        return !this.rows[index].roleId.trim();
+    }
+    isTargetInvalid(index) {
+        return !this.rows[index].targetCkTypeId.trim();
+    }
+    addHop() {
+        if (!this.canAddHop)
+            return;
+        this.rows = [...this.rows, {
+                roleId: 'System/ParentChild',
+                direction: 'in',
+                targetCkTypeId: '',
+                targetItem: null,
+                associationKey: ''
+            }];
+        this.syncAssociationKeys();
+        this.emit();
+    }
+    removeHop(index) {
+        this.rows = this.rows.filter((_, i) => i !== index);
+        this.syncAssociationKeys();
+        this.emit();
+    }
+    moveHop(index, delta) {
+        const target = index + delta;
+        if (target < 0 || target >= this.rows.length)
+            return;
+        const rows = [...this.rows];
+        [rows[index], rows[target]] = [rows[target], rows[index]];
+        this.rows = rows;
+        this.syncAssociationKeys();
+        this.emit();
+        this.focusHop(target);
+    }
+    onAssociationChanged(index, key) {
+        const row = this.rows[index];
+        row.associationKey = key;
+        const option = this.associationOptions(index).find(o => o.key === key);
+        if (option && key !== OTHER_ASSOCIATION) {
+            row.roleId = option.roleId;
+            row.direction = option.direction;
+        }
+        this.emit();
+    }
+    onRoleChanged(index, roleId) {
+        this.rows[index].roleId = roleId;
+        this.emit();
+    }
+    onDirectionChanged(index, direction) {
+        this.rows[index].direction = direction;
+        this.emit();
+    }
+    onTargetSelected(index, ckType) {
+        const row = this.rows[index];
+        row.targetCkTypeId = ckType.rtCkTypeId;
+        row.targetItem = ckType;
+        // Later hops keep their values; their source type changed, so re-match them.
+        this.syncAssociationKeys();
+        this.emit();
+    }
+    onTargetCleared(index) {
+        const row = this.rows[index];
+        row.targetCkTypeId = '';
+        row.targetItem = null;
+        this.syncAssociationKeys();
+        this.emit();
+    }
+    emit() {
+        this.lastEmitted = this.rows.map(r => ({ roleId: r.roleId, direction: r.direction, targetCkTypeId: r.targetCkTypeId }));
+        this.hopsChange.emit(this.lastEmitted);
+    }
+    loadOf(index) {
+        const type = this.sourceTypeOf(index);
+        return type ? this.associations.get(type) : undefined;
+    }
+    /**
+     * Matches every hop's role/direction to an entry of its source type's
+     * associations (loading missing metadata); a hop whose association is not
+     * listed switches to "Other role…" with its values kept.
+     */
+    syncAssociationKeys() {
+        this.rows.forEach((row, index) => {
+            const type = this.sourceTypeOf(index);
+            if (type && !this.associations.has(type)) {
+                void this.loadAssociations(type);
+            }
+            const load = this.loadOf(index);
+            if (load?.state !== 'loaded' || load.options.length === 0) {
+                row.associationKey = '';
+                return;
+            }
+            const match = load.options.find(o => o.roleId === row.roleId.trim() && o.direction === row.direction);
+            row.associationKey = match ? match.key : (row.roleId.trim() ? OTHER_ASSOCIATION : '');
+        });
+    }
+    async loadAssociations(ckTypeId) {
+        this.associations.set(ckTypeId, { state: 'loading' });
+        try {
+            const result = await firstValueFrom(this.rolesGQL.fetch({ variables: { ckTypeId } }));
+            const ckType = result.data?.constructionKit?.types?.items?.[0];
+            const options = [];
+            const add = (direction, all) => {
+                for (const assoc of all ?? []) {
+                    const roleId = assoc?.rtRoleId ? String(assoc.rtRoleId) : '';
+                    if (!roleId)
+                        continue;
+                    const base = assoc?.rtTargetCkTypeId ? String(assoc.rtTargetCkTypeId) : '';
+                    const key = `${direction}|${roleId}|${base}`;
+                    if (options.some(o => o.key === key))
+                        continue;
+                    options.push({
+                        key,
+                        roleId,
+                        direction,
+                        baseTargetCkTypeId: base,
+                        label: `${roleId} · ${direction === 'in' ? 'inbound' : 'outbound'}${base ? ` · ${base}` : ''}`
+                    });
+                }
+            };
+            add('in', ckType?.associations?.in?.all);
+            add('out', ckType?.associations?.out?.all);
+            this.associations.set(ckTypeId, { state: 'loaded', options });
+        }
+        catch (error) {
+            console.warn(`Could not load the associations of ${ckTypeId}:`, error);
+            this.associations.set(ckTypeId, { state: 'failed' });
+        }
+        this.syncAssociationKeys();
+        this.cdr.markForCheck();
+    }
+    /** Keeps the keyboard focus on a moved hop (wireframe change 4). */
+    focusHop(index) {
+        setTimeout(() => {
+            const card = this.hopCards?.get(index)?.nativeElement;
+            const button = card?.querySelector(`[data-hop-action="${index > 0 ? 'up' : 'down'}"]`);
+            (button ?? card)?.focus();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EntitySelectorScopePathEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: EntitySelectorScopePathEditorComponent, isStandalone: true, selector: "mm-entity-selector-scope-path-editor", inputs: { sourceCkTypeId: "sourceCkTypeId", hops: "hops" }, outputs: { hopsChange: "hopsChange" }, viewQueries: [{ propertyName: "hopCards", predicate: ["hopCard"], descendants: true }], ngImport: i0, template: "<div class=\"scope-path-editor\">\n  <span class=\"field-hint\">\n    Optional. Path of associations from the picked entity to the entities whose\n    rtIds scope bound stream-data widgets (up to {{ maxHops }} hops).\n  </span>\n\n  @if (rows.length === 0) {\n    <p class=\"scope-empty\" data-test=\"scope-empty\">No child scope: widgets use the picked entity's own rtId.</p>\n  } @else {\n    <span class=\"scope-from\">From: <code>{{ sourceCkTypeId || '?' }}</code> (picked entity)</span>\n    @if (metadataFailed) {\n      <span class=\"field-hint scope-metadata-failed\" data-test=\"metadata-failed\">\n        Associations could not be loaded; enter the role manually.\n      </span>\n    }\n\n    @for (row of rows; track $index; let i = $index; let first = $first; let last = $last) {\n      <div class=\"hop-card\" #hopCard tabindex=\"-1\" [attr.data-test]=\"'hop-' + (i + 1)\">\n        <div class=\"hop-header\">\n          <span class=\"hop-title\">\n            Hop {{ i + 1 }}\n            @if (i > 0) {\n              <span class=\"hop-source\">(from <code>{{ sourceTypeOf(i) || '?' }}</code>)</span>\n            }\n          </span>\n          <span class=\"hop-actions\">\n            @if (!first) {\n              <button kendoButton fillMode=\"flat\" size=\"small\" [svgIcon]=\"arrowUpIcon\"\n                data-hop-action=\"up\"\n                [attr.aria-label]=\"'Move hop ' + (i + 1) + ' up'\" [title]=\"'Move hop ' + (i + 1) + ' up'\"\n                (click)=\"moveHop(i, -1)\"></button>\n            }\n            @if (!last) {\n              <button kendoButton fillMode=\"flat\" size=\"small\" [svgIcon]=\"arrowDownIcon\"\n                data-hop-action=\"down\"\n                [attr.aria-label]=\"'Move hop ' + (i + 1) + ' down'\" [title]=\"'Move hop ' + (i + 1) + ' down'\"\n                (click)=\"moveHop(i, 1)\"></button>\n            }\n            <button kendoButton fillMode=\"flat\" size=\"small\" [svgIcon]=\"trashIcon\" class=\"hop-remove\"\n              data-hop-action=\"remove\"\n              [attr.aria-label]=\"'Remove hop ' + (i + 1)\" [title]=\"'Remove hop ' + (i + 1)\"\n              (click)=\"removeHop(i)\"></button>\n          </span>\n        </div>\n\n        <div class=\"hop-field\">\n          <label class=\"field-label\" [attr.for]=\"'hop-assoc-' + i\">Association</label>\n          @if (hasAssociationList(i)) {\n            <kendo-dropdownlist\n              [id]=\"'hop-assoc-' + i\"\n              [data]=\"associationOptions(i)\"\n              textField=\"label\"\n              valueField=\"key\"\n              [valuePrimitive]=\"true\"\n              [value]=\"row.associationKey || null\"\n              [defaultItem]=\"{ key: '', label: 'Select an association\u2026' }\"\n              [class.k-invalid]=\"isRoleInvalid(i)\"\n              (valueChange)=\"onAssociationChanged(i, $event)\">\n              <ng-template kendoDropDownListValueTemplate let-item>\n                <span class=\"assoc-text\" [title]=\"item?.label ?? ''\">{{ item?.label }}</span>\n              </ng-template>\n              <ng-template kendoDropDownListItemTemplate let-item>\n                <span class=\"assoc-text\" [title]=\"item.label\">{{ item.label }}</span>\n              </ng-template>\n            </kendo-dropdownlist>\n          }\n          @if (isFreeText(i)) {\n            <div class=\"hop-free-text\">\n              <kendo-textbox\n                [id]=\"hasAssociationList(i) ? null : 'hop-assoc-' + i\"\n                [value]=\"row.roleId\"\n                placeholder=\"Association role (e.g. System/ParentChild)\"\n                [class.k-invalid]=\"isRoleInvalid(i)\"\n                (valueChange)=\"onRoleChanged(i, $event)\">\n              </kendo-textbox>\n              <select class=\"hop-direction\" [attr.aria-label]=\"'Direction of hop ' + (i + 1)\"\n                [ngModel]=\"row.direction\" (ngModelChange)=\"onDirectionChanged(i, $event)\">\n                <option value=\"in\">Inbound</option>\n                <option value=\"out\">Outbound</option>\n              </select>\n            </div>\n          }\n          @if (associationWarning(i); as warning) {\n            <span class=\"field-warning\" data-test=\"association-warning\">{{ warning }}</span>\n          }\n        </div>\n\n        <div class=\"hop-field\">\n          <label class=\"field-label\">Target type</label>\n          <mm-ck-type-selector-input\n            [ngModel]=\"row.targetItem\"\n            [derivedFromRtCkTypeId]=\"baseTargetOf(i)\"\n            [placeholder]=\"'Target CK type\u2026'\"\n            [class.k-invalid]=\"isTargetInvalid(i)\"\n            (ckTypeSelected)=\"onTargetSelected(i, $event)\"\n            (ckTypeCleared)=\"onTargetCleared(i)\">\n          </mm-ck-type-selector-input>\n        </div>\n\n        @if (hopError(i); as error) {\n          <span class=\"field-error\" data-test=\"hop-error\">{{ error }}</span>\n        }\n      </div>\n    }\n  }\n\n  <div class=\"scope-footer\">\n    <button kendoButton fillMode=\"flat\" [svgIcon]=\"plusIcon\" [disabled]=\"!canAddHop\"\n      data-test=\"add-hop\" (click)=\"addHop()\">Add hop</button>\n    @if (!canAddHop) {\n      <span class=\"field-hint\">At most {{ maxHops }} hops.</span>\n    }\n  </div>\n\n  @if (rows.length > 0) {\n    <span class=\"scope-path\" data-test=\"scope-path\">Path: {{ pathLabel }}</span>\n  }\n</div>\n", styles: [".scope-path-editor{display:flex;flex-direction:column;gap:.5rem;min-width:0}.field-label{font-weight:500;font-size:.875rem;color:var(--kendo-color-on-app-surface, #424242)}.field-hint,.scope-from,.scope-empty{font-size:.75rem;color:var(--kendo-color-subtle, #757575);margin:0}.field-error{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.field-warning{font-size:.75rem;color:var(--kendo-color-warning, #b26a00)}code{font-family:var(--theme-font-mono, monospace)}.hop-card{display:flex;flex-direction:column;gap:.5rem;padding:.5rem .75rem .75rem;border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px;background:var(--kendo-color-surface-alt, #fafafa);min-width:0}.hop-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.hop-title{font-weight:500;font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hop-source{font-weight:400;color:var(--kendo-color-subtle, #757575)}.hop-actions{display:flex;flex-wrap:nowrap;flex-shrink:0}.hop-remove{color:var(--kendo-color-error, #f44336)}.hop-field{display:flex;flex-direction:column;gap:.25rem;min-width:0}.hop-field kendo-dropdownlist{width:100%;min-width:0}.assoc-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hop-free-text{display:flex;gap:.5rem;min-width:0}.hop-free-text kendo-textbox{flex:1 1 auto;min-width:0}.hop-direction{flex:0 0 auto}.scope-footer{display:flex;align-items:center;gap:.5rem}.scope-path{font-size:.75rem;font-family:var(--theme-font-mono, monospace);color:var(--kendo-color-on-app-surface, #424242);overflow-wrap:break-word}\n"], dependencies: [{ 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.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: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "messages", "dialogMessages", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EntitySelectorScopePathEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-entity-selector-scope-path-editor', standalone: true, imports: [FormsModule, ButtonModule, DropDownsModule, InputsModule, CkTypeSelectorInputComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"scope-path-editor\">\n  <span class=\"field-hint\">\n    Optional. Path of associations from the picked entity to the entities whose\n    rtIds scope bound stream-data widgets (up to {{ maxHops }} hops).\n  </span>\n\n  @if (rows.length === 0) {\n    <p class=\"scope-empty\" data-test=\"scope-empty\">No child scope: widgets use the picked entity's own rtId.</p>\n  } @else {\n    <span class=\"scope-from\">From: <code>{{ sourceCkTypeId || '?' }}</code> (picked entity)</span>\n    @if (metadataFailed) {\n      <span class=\"field-hint scope-metadata-failed\" data-test=\"metadata-failed\">\n        Associations could not be loaded; enter the role manually.\n      </span>\n    }\n\n    @for (row of rows; track $index; let i = $index; let first = $first; let last = $last) {\n      <div class=\"hop-card\" #hopCard tabindex=\"-1\" [attr.data-test]=\"'hop-' + (i + 1)\">\n        <div class=\"hop-header\">\n          <span class=\"hop-title\">\n            Hop {{ i + 1 }}\n            @if (i > 0) {\n              <span class=\"hop-source\">(from <code>{{ sourceTypeOf(i) || '?' }}</code>)</span>\n            }\n          </span>\n          <span class=\"hop-actions\">\n            @if (!first) {\n              <button kendoButton fillMode=\"flat\" size=\"small\" [svgIcon]=\"arrowUpIcon\"\n                data-hop-action=\"up\"\n                [attr.aria-label]=\"'Move hop ' + (i + 1) + ' up'\" [title]=\"'Move hop ' + (i + 1) + ' up'\"\n                (click)=\"moveHop(i, -1)\"></button>\n            }\n            @if (!last) {\n              <button kendoButton fillMode=\"flat\" size=\"small\" [svgIcon]=\"arrowDownIcon\"\n                data-hop-action=\"down\"\n                [attr.aria-label]=\"'Move hop ' + (i + 1) + ' down'\" [title]=\"'Move hop ' + (i + 1) + ' down'\"\n                (click)=\"moveHop(i, 1)\"></button>\n            }\n            <button kendoButton fillMode=\"flat\" size=\"small\" [svgIcon]=\"trashIcon\" class=\"hop-remove\"\n              data-hop-action=\"remove\"\n              [attr.aria-label]=\"'Remove hop ' + (i + 1)\" [title]=\"'Remove hop ' + (i + 1)\"\n              (click)=\"removeHop(i)\"></button>\n          </span>\n        </div>\n\n        <div class=\"hop-field\">\n          <label class=\"field-label\" [attr.for]=\"'hop-assoc-' + i\">Association</label>\n          @if (hasAssociationList(i)) {\n            <kendo-dropdownlist\n              [id]=\"'hop-assoc-' + i\"\n              [data]=\"associationOptions(i)\"\n              textField=\"label\"\n              valueField=\"key\"\n              [valuePrimitive]=\"true\"\n              [value]=\"row.associationKey || null\"\n              [defaultItem]=\"{ key: '', label: 'Select an association\u2026' }\"\n              [class.k-invalid]=\"isRoleInvalid(i)\"\n              (valueChange)=\"onAssociationChanged(i, $event)\">\n              <ng-template kendoDropDownListValueTemplate let-item>\n                <span class=\"assoc-text\" [title]=\"item?.label ?? ''\">{{ item?.label }}</span>\n              </ng-template>\n              <ng-template kendoDropDownListItemTemplate let-item>\n                <span class=\"assoc-text\" [title]=\"item.label\">{{ item.label }}</span>\n              </ng-template>\n            </kendo-dropdownlist>\n          }\n          @if (isFreeText(i)) {\n            <div class=\"hop-free-text\">\n              <kendo-textbox\n                [id]=\"hasAssociationList(i) ? null : 'hop-assoc-' + i\"\n                [value]=\"row.roleId\"\n                placeholder=\"Association role (e.g. System/ParentChild)\"\n                [class.k-invalid]=\"isRoleInvalid(i)\"\n                (valueChange)=\"onRoleChanged(i, $event)\">\n              </kendo-textbox>\n              <select class=\"hop-direction\" [attr.aria-label]=\"'Direction of hop ' + (i + 1)\"\n                [ngModel]=\"row.direction\" (ngModelChange)=\"onDirectionChanged(i, $event)\">\n                <option value=\"in\">Inbound</option>\n                <option value=\"out\">Outbound</option>\n              </select>\n            </div>\n          }\n          @if (associationWarning(i); as warning) {\n            <span class=\"field-warning\" data-test=\"association-warning\">{{ warning }}</span>\n          }\n        </div>\n\n        <div class=\"hop-field\">\n          <label class=\"field-label\">Target type</label>\n          <mm-ck-type-selector-input\n            [ngModel]=\"row.targetItem\"\n            [derivedFromRtCkTypeId]=\"baseTargetOf(i)\"\n            [placeholder]=\"'Target CK type\u2026'\"\n            [class.k-invalid]=\"isTargetInvalid(i)\"\n            (ckTypeSelected)=\"onTargetSelected(i, $event)\"\n            (ckTypeCleared)=\"onTargetCleared(i)\">\n          </mm-ck-type-selector-input>\n        </div>\n\n        @if (hopError(i); as error) {\n          <span class=\"field-error\" data-test=\"hop-error\">{{ error }}</span>\n        }\n      </div>\n    }\n  }\n\n  <div class=\"scope-footer\">\n    <button kendoButton fillMode=\"flat\" [svgIcon]=\"plusIcon\" [disabled]=\"!canAddHop\"\n      data-test=\"add-hop\" (click)=\"addHop()\">Add hop</button>\n    @if (!canAddHop) {\n      <span class=\"field-hint\">At most {{ maxHops }} hops.</span>\n    }\n  </div>\n\n  @if (rows.length > 0) {\n    <span class=\"scope-path\" data-test=\"scope-path\">Path: {{ pathLabel }}</span>\n  }\n</div>\n", styles: [".scope-path-editor{display:flex;flex-direction:column;gap:.5rem;min-width:0}.field-label{font-weight:500;font-size:.875rem;color:var(--kendo-color-on-app-surface, #424242)}.field-hint,.scope-from,.scope-empty{font-size:.75rem;color:var(--kendo-color-subtle, #757575);margin:0}.field-error{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.field-warning{font-size:.75rem;color:var(--kendo-color-warning, #b26a00)}code{font-family:var(--theme-font-mono, monospace)}.hop-card{display:flex;flex-direction:column;gap:.5rem;padding:.5rem .75rem .75rem;border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:4px;background:var(--kendo-color-surface-alt, #fafafa);min-width:0}.hop-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.hop-title{font-weight:500;font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hop-source{font-weight:400;color:var(--kendo-color-subtle, #757575)}.hop-actions{display:flex;flex-wrap:nowrap;flex-shrink:0}.hop-remove{color:var(--kendo-color-error, #f44336)}.hop-field{display:flex;flex-direction:column;gap:.25rem;min-width:0}.hop-field kendo-dropdownlist{width:100%;min-width:0}.assoc-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hop-free-text{display:flex;gap:.5rem;min-width:0}.hop-free-text kendo-textbox{flex:1 1 auto;min-width:0}.hop-direction{flex:0 0 auto}.scope-footer{display:flex;align-items:center;gap:.5rem}.scope-path{font-size:.75rem;font-family:var(--theme-font-mono, monospace);color:var(--kendo-color-on-app-surface, #424242);overflow-wrap:break-word}\n"] }]
+        }], propDecorators: { hopsChange: [{
+                type: Output
+            }], hopCards: [{
+                type: ViewChildren,
+                args: ['hopCard']
+            }], sourceCkTypeId: [{
+                type: Input
+            }], hops: [{
+                type: Input
+            }] } });
+function ckTypeItem(ckTypeId) {
+    return { fullName: ckTypeId, rtCkTypeId: ckTypeId, isAbstract: false, isFinal: false };
+}
+
 /**
  * Component for editing entity selector configurations in MeshBoard settings.
  * Allows adding, editing, and removing entity selectors.
@@ -32437,9 +33641,16 @@ class EntitySelectorEditorComponent {
     variableService = inject(MeshBoardVariableService);
     getEntitiesByCkTypeGQL = inject(GetEntitiesByCkTypeDtoGQL);
     confirmationService = inject(ConfirmationService, { optional: true });
+    cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
     entitySelectors = [];
     /** Existing variable names from other sources (static variables, other selectors) for duplicate detection */
     existingVariableNames = [];
+    /**
+     * The board's static variables (AB#7724): offered in the picker filter and
+     * substituted when the editor lists default entities and checks the default.
+     */
+    variables = [];
     entitySelectorsChange = new EventEmitter();
     /** Emits true when entering edit mode, false when leaving — allows parent to hide its own buttons */
     editingStateChange = new EventEmitter();
@@ -32456,22 +33667,32 @@ class EntitySelectorEditorComponent {
     editMappings = [];
     editShowInToolbar = true;
     editDefaultRtId = '';
-    // Child scope (stream-data): optional one-hop traversal resolving the picked
-    // entity to the child source rtIds a stream-data widget scopes by.
-    editChildScopeTargetCkTypeId = '';
-    editChildScopeTargetCkTypeItem = null;
-    editChildScopeRoleId = '';
-    // Parent → children via System/ParentChild is reached INBOUND (the child holds
-    // the association to its parent), so 'in' is the correct default for a
-    // childScope that resolves a picked parent to its children.
-    editChildScopeDirection = 'in';
+    // Child scope (stream-data, AB#7723): the hops from the picked entity to the
+    // entities whose rtIds scope bound widgets. Empty = the picked entity itself.
+    // One hop saves in the original top-level form, two or more as `path`.
+    editScopeHops = [];
     // 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 = '';
+    // Picker filter (AB#7724): attribute rows on the CK type, AND-combined.
+    editFilters = [];
+    /** Filter rows a follower carries from hand-editing; ignored and dropped on save. */
+    followerFilterCount = 0;
+    /** Result of the server check whether the default entity matches the filter. */
+    defaultFilterCheck = { state: 'none' };
+    defaultCheckRequests = new Subject();
     // Data sources for the default entity picker (created when CK type is set)
     defaultEntityDataSource = null;
     defaultEntityDialogDataSource = null;
+    constructor() {
+        // Debounced so typing in the filter grid does not fire a request per key;
+        // switchMap drops the answer of an outdated check.
+        this.defaultCheckRequests.pipe(debounceTime(DEFAULT_CHECK_DEBOUNCE_MS), switchMap(request => 'state' in request ? of(request) : this.checkDefaultEntity(request)), takeUntilDestroyed(this.destroyRef)).subscribe(check => {
+            this.defaultFilterCheck = check;
+            this.cdr.markForCheck();
+        });
+    }
     /**
      * Starts adding a new entity selector.
      */
@@ -32484,12 +33705,12 @@ class EntitySelectorEditorComponent {
         this.editMappings = [];
         this.editShowInToolbar = true;
         this.editDefaultRtId = '';
-        this.editChildScopeTargetCkTypeId = '';
-        this.editChildScopeTargetCkTypeItem = null;
-        this.editChildScopeRoleId = 'System/ParentChild';
-        this.editChildScopeDirection = 'in';
+        this.editScopeHops = [];
         this.editFollowsSelectorId = '';
         this.followNotice = '';
+        this.editFilters = [];
+        this.followerFilterCount = 0;
+        this.defaultFilterCheck = { state: 'none' };
         this.defaultEntityDataSource = null;
         this.defaultEntityDialogDataSource = null;
         this.isEditing = true;
@@ -32514,19 +33735,17 @@ class EntitySelectorEditorComponent {
         this.editMappings = [...selector.attributeMappings];
         this.editShowInToolbar = selector.showInToolbar !== false;
         this.editDefaultRtId = selector.defaultRtId ?? '';
-        this.editChildScopeTargetCkTypeId = selector.childScope?.targetCkTypeId ?? '';
-        this.editChildScopeTargetCkTypeItem = selector.childScope?.targetCkTypeId
-            ? {
-                fullName: selector.childScope.targetCkTypeId,
-                rtCkTypeId: selector.childScope.targetCkTypeId,
-                isAbstract: false,
-                isFinal: false
-            }
-            : null;
-        this.editChildScopeRoleId = selector.childScope?.roleId ?? 'System/ParentChild';
-        this.editChildScopeDirection = selector.childScope?.direction ?? 'in';
+        this.editScopeHops = scopeHopsOf(selector.childScope);
         this.editFollowsSelectorId = selector.followsSelectorId ?? '';
         this.followNotice = '';
+        this.editFilters = (selector.filters ?? []).map((f, i) => ({
+            id: i + 1,
+            attributePath: f.attributePath,
+            operator: f.operator,
+            comparisonValue: f.comparisonValue
+        }));
+        this.followerFilterCount = selector.followsSelectorId ? this.editFilters.length : 0;
+        this.defaultFilterCheck = { state: 'none' };
         // 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);
@@ -32534,6 +33753,7 @@ class EntitySelectorEditorComponent {
             this.applyLeaderCkType(leader.leader.ckTypeId);
         }
         this.updateDefaultEntityDataSources();
+        this.requestDefaultCheck();
         this.isEditing = true;
         this.editingStateChange.emit(true);
     }
@@ -32593,6 +33813,10 @@ class EntitySelectorEditorComponent {
         this.editFollowsSelectorId = leaderId;
         this.followNotice = '';
         this.editShowInToolbar = false;
+        // A follower has no picker: its filter rows are ignored and dropped on save (AB#7724).
+        this.followerFilterCount = leaderId ? this.editFilters.length : 0;
+        this.requestDefaultCheck();
+        this.updateDefaultEntityDataSources();
         if (!leaderId)
             return;
         const leader = this.entitySelectors.find(s => s.id === leaderId);
@@ -32615,6 +33839,8 @@ class EntitySelectorEditorComponent {
         this.editCkTypeItem = { fullName: ckTypeId, rtCkTypeId: ckTypeId, isAbstract: false, isFinal: false };
         this.editMappings = [];
         this.editDefaultRtId = '';
+        this.editFilters = [];
+        this.followerFilterCount = 0;
     }
     /**
      * Handles CK type selection in the editor form.
@@ -32622,10 +33848,12 @@ class EntitySelectorEditorComponent {
     onCkTypeSelected(ckType) {
         this.editCkTypeId = ckType.rtCkTypeId;
         this.editCkTypeItem = ckType;
-        // Clear mappings and default entity when CK type changes
+        // Clear mappings, default entity and filter rows when CK type changes
         this.editMappings = [];
         this.editDefaultRtId = '';
+        this.editFilters = [];
         this.updateDefaultEntityDataSources();
+        this.requestDefaultCheck();
     }
     /**
      * Handles CK type cleared in the editor form.
@@ -32635,8 +33863,10 @@ class EntitySelectorEditorComponent {
         this.editCkTypeItem = null;
         this.editMappings = [];
         this.editDefaultRtId = '';
+        this.editFilters = [];
         this.defaultEntityDataSource = null;
         this.defaultEntityDialogDataSource = null;
+        this.requestDefaultCheck();
     }
     /**
      * Opens the attribute selector dialog to pick attributes for variable mappings.
@@ -32657,31 +33887,70 @@ class EntitySelectorEditorComponent {
             };
         });
     }
-    /**
-     * Handles child-scope target CK type selection.
-     */
-    onChildScopeCkTypeSelected(ckType) {
-        this.editChildScopeTargetCkTypeId = ckType.rtCkTypeId;
-        this.editChildScopeTargetCkTypeItem = ckType;
+    /** Takes the hop list of the child-scope editor (AB#7723). */
+    onScopeHopsChanged(hops) {
+        this.editScopeHops = hops;
     }
-    /**
-     * Handles child-scope target CK type cleared.
-     */
-    onChildScopeCkTypeCleared() {
-        this.editChildScopeTargetCkTypeId = '';
-        this.editChildScopeTargetCkTypeItem = null;
+    /** Validation message of the hop list, or '' when it can be saved. */
+    get scopeHopsError() {
+        return scopeHopsValidationError(this.editScopeHops) ?? '';
     }
     /**
      * Handles default entity selection from the entity picker.
      */
     onDefaultEntitySelected(entity) {
         this.editDefaultRtId = entity.rtId;
+        this.requestDefaultCheck();
     }
     /**
      * Handles default entity cleared.
      */
     onDefaultEntityCleared() {
         this.editDefaultRtId = '';
+        this.requestDefaultCheck();
+    }
+    /** Takes the rows of the picker filter editor (AB#7724). */
+    onFiltersChange(filters) {
+        this.editFilters = filters;
+        this.updateDefaultEntityDataSources();
+        this.requestDefaultCheck();
+    }
+    /**
+     * Variables offered in filter values: the board's static variables and the
+     * variables other selectors map. The edited selector's own mappings are
+     * left out — they are filled from its own pick.
+     */
+    get filterVariables() {
+        const result = new Map();
+        for (const v of this.variables) {
+            result.set(v.name, { name: v.name, label: v.label || v.name, type: v.type });
+        }
+        this.entitySelectors
+            .filter((_, i) => i !== this.editingIndex)
+            .forEach(es => es.attributeMappings.forEach(m => {
+            if (!result.has(m.variableName)) {
+                result.set(m.variableName, { name: m.variableName, label: `${m.variableName} (${es.label || es.id})` });
+            }
+        }));
+        return [...result.values()];
+    }
+    /** "2 filters" chip of a selector in the list, or '' without filter. */
+    getFilterSummary(selector) {
+        const count = selector.followsSelectorId ? 0 : selector.filters?.length ?? 0;
+        if (count === 0)
+            return '';
+        return count === 1 ? '1 filter' : `${count} filters`;
+    }
+    /** "$a, $b" of the variables the default-entity check cannot substitute. */
+    get uncheckedVariablesText() {
+        return this.defaultFilterCheck.state === 'unchecked'
+            ? this.defaultFilterCheck.variables.map(v => `$${v}`).join(', ')
+            : '';
+    }
+    /** Label of the leader the edited follower takes its pick from. */
+    get leaderLabel() {
+        const leader = this.entitySelectors.find(s => s.id === this.editFollowsSelectorId);
+        return leader ? (leader.label || leader.id) : this.editFollowsSelectorId;
     }
     /**
      * Saves the current entity selector being edited.
@@ -32689,15 +33958,10 @@ class EntitySelectorEditorComponent {
     saveEdit() {
         if (!this.isEditValid())
             return;
-        // Only persist a childScope when both the target type and role are set;
-        // otherwise leave it undefined (the picked entity itself is the scope).
-        const childScope = this.editChildScopeTargetCkTypeId && this.editChildScopeRoleId.trim()
-            ? {
-                targetCkTypeId: this.editChildScopeTargetCkTypeId,
-                roleId: this.editChildScopeRoleId.trim(),
-                direction: this.editChildScopeDirection
-            }
-            : undefined;
+        // No hops = no childScope (the picked entity itself is the scope); one hop
+        // in the original top-level form (older library versions keep reading it);
+        // two or more hops as `path` (AB#7723).
+        const childScope = childScopeFromHops(this.editScopeHops);
         const selector = {
             id: this.editId,
             label: this.editLabel.trim(),
@@ -32706,6 +33970,8 @@ class EntitySelectorEditorComponent {
             showInToolbar: this.editShowInToolbar,
             defaultRtId: this.editDefaultRtId.trim() || undefined,
             childScope,
+            // Picker filter (AB#7724); omitted when empty and never written for a follower.
+            filters: !this.editFollowsSelectorId && this.editFilters.length > 0 ? this.toFilterConfigs(this.editFilters) : undefined,
             // A follower never renders a picker (AB#7722).
             ...(this.editFollowsSelectorId ? { showInToolbar: false, followsSelectorId: this.editFollowsSelectorId } : {})
         };
@@ -32749,6 +34015,10 @@ class EntitySelectorEditorComponent {
         if (this.followError) {
             return false;
         }
+        // Every hop needs an association and a target type; at most 5 hops (AB#7723).
+        if (this.scopeHopsError) {
+            return false;
+        }
         return hasRequiredFields;
     }
     /**
@@ -32827,19 +34097,74 @@ class EntitySelectorEditorComponent {
     }
     updateDefaultEntityDataSources() {
         if (this.editCkTypeId) {
-            this.defaultEntityDataSource = new RuntimeEntitySelectDataSource(this.getEntitiesByCkTypeGQL, this.editCkTypeId);
-            this.defaultEntityDialogDataSource = new RuntimeEntityDialogDataSource(this.getEntitiesByCkTypeGQL, this.editCkTypeId);
+            // The default-entity picker lists what the toolbar picker lists (AB#7724).
+            const gql = withPickerFilters(this.getEntitiesByCkTypeGQL, this.resolvedEditorFilters().filters);
+            this.defaultEntityDataSource = new RuntimeEntitySelectDataSource(gql, this.editCkTypeId);
+            this.defaultEntityDialogDataSource = new RuntimeEntityDialogDataSource(gql, this.editCkTypeId);
         }
         else {
             this.defaultEntityDataSource = null;
             this.defaultEntityDialogDataSource = null;
         }
     }
+    toFilterConfigs(rows) {
+        return rows.map(f => ({
+            attributePath: f.attributePath,
+            operator: f.operator,
+            comparisonValue: f.comparisonValue == null ? '' : String(f.comparisonValue)
+        }));
+    }
+    /**
+     * The filter rows that apply in the editor, with the board's static
+     * variables substituted. Rows whose value still names a variable without a
+     * value (e.g. one a selector pick fills at view time) are left out and
+     * reported in `unresolved`; the editor cannot know their value.
+     */
+    resolvedEditorFilters() {
+        if (this.isFollower || this.editFilters.length === 0) {
+            return { filters: undefined, unresolved: [] };
+        }
+        const converted = this.variableService.convertToFieldFilterDto(this.toFilterConfigs(this.editFilters), this.variables) ?? [];
+        const unresolved = unresolvedFilterVariables(converted);
+        const applicable = converted.filter(f => unresolvedFilterVariables([f]).length === 0);
+        return { filters: applicable.length > 0 ? applicable : undefined, unresolved };
+    }
+    /** Queues the (debounced) check whether the default entity matches the filter. */
+    requestDefaultCheck() {
+        const rtId = this.editDefaultRtId.trim();
+        if (!rtId || !this.editCkTypeId || this.isFollower || this.editFilters.length === 0) {
+            this.defaultCheckRequests.next({ state: 'none' });
+            return;
+        }
+        const { filters, unresolved } = this.resolvedEditorFilters();
+        if (unresolved.length > 0) {
+            this.defaultCheckRequests.next({ state: 'unchecked', variables: unresolved });
+            return;
+        }
+        this.defaultCheckRequests.next({ ckTypeId: this.editCkTypeId, rtId, filters: filters ?? [] });
+    }
+    /** Asks the server whether the entity is among the filtered ones (rtId + filter, first 1). */
+    checkDefaultEntity(request) {
+        return this.getEntitiesByCkTypeGQL.fetch({
+            variables: {
+                ckTypeId: request.ckTypeId,
+                attributeNames: [],
+                rtId: request.rtId,
+                first: 1,
+                fieldFilters: request.filters
+            },
+            fetchPolicy: 'network-only'
+        }).pipe(map$1(result => {
+            const count = result.data?.runtime?.runtimeEntities?.totalCount
+                ?? result.data?.runtime?.runtimeEntities?.items?.length ?? 0;
+            return (count > 0 ? { state: 'match' } : { state: 'mismatch' });
+        }), catchError$1(() => of({ state: 'error' })));
+    }
     emitChange() {
         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\" [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 });
+    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", variables: "variables" }, 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            @if (getFilterSummary(selector); as filterSummary) {\n              <span class=\"selector-mode selector-filter-chip\">{{ filterSummary }}</span>\n            }\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      @if (editCkTypeId) {\n      <div class=\"form-field picker-filter-field\">\n        <label class=\"field-label\">Picker filter</label>\n        @if (isFollower) {\n          <span class=\"field-hint\">A follower takes the leader's pick. Set the filter on {{ leaderLabel }}.</span>\n          @if (followerFilterCount > 0) {\n            <span class=\"field-hint follow-notice\">Filters on a follower are ignored and are removed when you save.</span>\n          }\n        } @else {\n          <span class=\"field-hint\">\n            Only entities that match all rows are listed in the toolbar picker and in the default-entity picker below.\n          </span>\n          <mm-field-filter-editor\n            [ckTypeId]=\"editCkTypeId\"\n            [filters]=\"editFilters\"\n            [enableVariables]=\"filterVariables.length > 0\"\n            [availableVariables]=\"filterVariables\"\n            (filtersChange)=\"onFiltersChange($event)\">\n          </mm-field-filter-editor>\n        }\n      </div>\n      }\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        @switch (defaultFilterCheck.state) {\n          @case ('mismatch') {\n            <span class=\"field-warning default-filter-warning\">The default entity does not match the picker filter. It still loads, but users cannot pick it again.</span>\n          }\n          @case ('error') {\n            <span class=\"field-hint default-filter-warning\">Could not check the default entity.</span>\n          }\n          @case ('unchecked') {\n            <span class=\"field-hint default-filter-warning\">Cannot check the default entity: the filter uses {{ uncheckedVariablesText }}, which is filled at view time.</span>\n          }\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        <mm-entity-selector-scope-path-editor\n          [sourceCkTypeId]=\"editCkTypeId\"\n          [hops]=\"editScopeHops\"\n          (hopsChange)=\"onScopeHopsChanged($event)\">\n        </mm-entity-selector-scope-path-editor>\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-filter-chip{color:var(--kendo-color-subtle, #757575)}.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 .field-warning{font-size:.75rem;color:var(--kendo-color-warning, #f57c00)}.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"] }, { kind: "component", type: EntitySelectorScopePathEditorComponent, selector: "mm-entity-selector-scope-path-editor", inputs: ["sourceCkTypeId", "hops"], outputs: ["hopsChange"] }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "hideNavigationProperties", "attributePaths", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EntitySelectorEditorComponent, decorators: [{
             type: Component,
@@ -32851,38 +34176,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         LabelModule,
                         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\" [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: [{
+                        EntitySelectInputComponent,
+                        EntitySelectorScopePathEditorComponent,
+                        FieldFilterEditorComponent
+                    ], 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            @if (getFilterSummary(selector); as filterSummary) {\n              <span class=\"selector-mode selector-filter-chip\">{{ filterSummary }}</span>\n            }\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      @if (editCkTypeId) {\n      <div class=\"form-field picker-filter-field\">\n        <label class=\"field-label\">Picker filter</label>\n        @if (isFollower) {\n          <span class=\"field-hint\">A follower takes the leader's pick. Set the filter on {{ leaderLabel }}.</span>\n          @if (followerFilterCount > 0) {\n            <span class=\"field-hint follow-notice\">Filters on a follower are ignored and are removed when you save.</span>\n          }\n        } @else {\n          <span class=\"field-hint\">\n            Only entities that match all rows are listed in the toolbar picker and in the default-entity picker below.\n          </span>\n          <mm-field-filter-editor\n            [ckTypeId]=\"editCkTypeId\"\n            [filters]=\"editFilters\"\n            [enableVariables]=\"filterVariables.length > 0\"\n            [availableVariables]=\"filterVariables\"\n            (filtersChange)=\"onFiltersChange($event)\">\n          </mm-field-filter-editor>\n        }\n      </div>\n      }\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        @switch (defaultFilterCheck.state) {\n          @case ('mismatch') {\n            <span class=\"field-warning default-filter-warning\">The default entity does not match the picker filter. It still loads, but users cannot pick it again.</span>\n          }\n          @case ('error') {\n            <span class=\"field-hint default-filter-warning\">Could not check the default entity.</span>\n          }\n          @case ('unchecked') {\n            <span class=\"field-hint default-filter-warning\">Cannot check the default entity: the filter uses {{ uncheckedVariablesText }}, which is filled at view time.</span>\n          }\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        <mm-entity-selector-scope-path-editor\n          [sourceCkTypeId]=\"editCkTypeId\"\n          [hops]=\"editScopeHops\"\n          (hopsChange)=\"onScopeHopsChanged($event)\">\n        </mm-entity-selector-scope-path-editor>\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-filter-chip{color:var(--kendo-color-subtle, #757575)}.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 .field-warning{font-size:.75rem;color:var(--kendo-color-warning, #f57c00)}.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"] }]
+        }], ctorParameters: () => [], propDecorators: { entitySelectors: [{
                 type: Input
             }], existingVariableNames: [{
                 type: Input
+            }], variables: [{
+                type: Input
             }], entitySelectorsChange: [{
                 type: Output
             }], editingStateChange: [{
                 type: Output
             }] } });
+/** Debounce of the default-entity filter check (ms). */
+const DEFAULT_CHECK_DEBOUNCE_MS = 400;
 
 /**
  * Toolbar component that renders entity select inputs for each configured entity selector.
- * Creates data sources per CK type and emits selection/clear events.
+ * Creates data sources per CK type and picker filter (AB#7724) and emits selection/clear events.
  */
 class EntitySelectorToolbarComponent {
     getEntitiesByCkTypeGQL = inject(GetEntitiesByCkTypeDtoGQL);
+    variableService = inject(MeshBoardVariableService);
     entitySelectors = [];
+    /**
+     * Board variables substituted into the selectors' picker filters (AB#7724),
+     * the same substitution widget filters get.
+     */
+    variables = [];
     entitySelected = new EventEmitter();
     entityCleared = new EventEmitter();
-    // Cached data sources per CK type
+    // Cached data sources per CK type and resolved picker filter
     dataSourceCache = new Map();
     dialogDataSourceCache = new Map();
     // Map of selector ID -> data sources for template
     selectorDataSources = new Map();
     selectorDialogDataSources = new Map();
+    // Picker texts of filtered selectors (absent ⇒ the input's defaults)
+    selectorMessages = new Map();
     ngOnChanges(changes) {
-        if (changes['entitySelectors']) {
+        if (changes['entitySelectors'] || changes['variables']) {
             this.updateDataSources();
         }
     }
+    /** Texts of the selector's picker: a filtered picker explains its empty list (AB#7724). */
+    getMessages(selector) {
+        return this.selectorMessages.get(selector.id) ?? NO_MESSAGES;
+    }
+    /** Title of the selector's search dialog; marks a filtered picker (AB#7724). */
+    getDialogTitle(selector) {
+        return this.selectorMessages.has(selector.id) ? filteredDialogTitle(selector.label) : 'Select ' + selector.label;
+    }
     /**
      * True when the selector renders a picker. Hidden selectors and followers
      * (AB#7722) never do; a follower's pick is derived from its leader.
@@ -32915,23 +34262,45 @@ class EntitySelectorToolbarComponent {
         this.entityCleared.emit({ selectorId });
     }
     /**
-     * Creates or retrieves cached data sources for each selector.
+     * Creates or retrieves cached data sources for each selector. Selectors of
+     * the same CK type and the same resolved filter share their data sources; a
+     * selector without filter uses the plain query, exactly as before AB#7724.
+     * Entries no selector uses any more (e.g. after a filter variable changed)
+     * are dropped, so the caches never outgrow the current selectors.
      */
     updateDataSources() {
+        this.selectorMessages = new Map();
+        const usedKeys = new Set();
         for (const selector of this.entitySelectors) {
-            // Reuse cached data source if same CK type
-            if (!this.dataSourceCache.has(selector.ckTypeId)) {
-                this.dataSourceCache.set(selector.ckTypeId, new RuntimeEntitySelectDataSource(this.getEntitiesByCkTypeGQL, selector.ckTypeId));
+            const filters = pickerFieldFilters(selector, this.variables, this.variableService);
+            const key = filters ? `${selector.ckTypeId}|${JSON.stringify(filters)}` : selector.ckTypeId;
+            usedKeys.add(key);
+            if (!this.dataSourceCache.has(key) || !this.dialogDataSourceCache.has(key)) {
+                const gql = withPickerFilters(this.getEntitiesByCkTypeGQL, filters);
+                this.dataSourceCache.set(key, new RuntimeEntitySelectDataSource(gql, selector.ckTypeId));
+                this.dialogDataSourceCache.set(key, new RuntimeEntityDialogDataSource(gql, selector.ckTypeId));
+            }
+            this.selectorDataSources.set(selector.id, this.dataSourceCache.get(key));
+            this.selectorDialogDataSources.set(selector.id, this.dialogDataSourceCache.get(key));
+            if (filters) {
+                this.selectorMessages.set(selector.id, {
+                    noEntitiesFound: filteredNoEntitiesMessage(selector.label, unresolvedFilterVariables(filters))
+                });
             }
-            if (!this.dialogDataSourceCache.has(selector.ckTypeId)) {
-                this.dialogDataSourceCache.set(selector.ckTypeId, new RuntimeEntityDialogDataSource(this.getEntitiesByCkTypeGQL, selector.ckTypeId));
+        }
+        for (const key of [...this.dataSourceCache.keys()]) {
+            if (!usedKeys.has(key)) {
+                this.dataSourceCache.delete(key);
+                this.dialogDataSourceCache.delete(key);
             }
-            this.selectorDataSources.set(selector.id, this.dataSourceCache.get(selector.ckTypeId));
-            this.selectorDialogDataSources.set(selector.id, this.dialogDataSourceCache.get(selector.ckTypeId));
         }
     }
+    /** Number of cached data source pairs (for tests). */
+    get cachedDataSourceCount() {
+        return this.dataSourceCache.size;
+    }
     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 (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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: EntitySelectorToolbarComponent, isStandalone: true, selector: "mm-entity-selector-toolbar", inputs: { entitySelectors: "entitySelectors", variables: "variables" }, 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]=\"getDialogTitle(selector)\"\n          [messages]=\"getMessages(selector)\"\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,
@@ -32939,14 +34308,17 @@ 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 (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"] }]
+                    ], 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]=\"getDialogTitle(selector)\"\n          [messages]=\"getMessages(selector)\"\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
+            }], variables: [{
+                type: Input
             }], entitySelected: [{
                 type: Output
             }], entityCleared: [{
                 type: Output
             }] } });
+const NO_MESSAGES = {};
 
 /** Below this container width the board stacks in a single column. */
 const PHONE_MAX_WIDTH = 700;
@@ -33294,6 +34666,90 @@ function applyTimeFilterParams(url, selection) {
     return applyQueryParams(url, timeFilterQueryParams(selection));
 }
 
+/**
+ * RFC 3339 date-time: `YYYY-MM-DDTHH:MM:SS`, optional 1-3 fraction digits, then `Z` or `±HH:MM`.
+ * Uppercase `T`/`Z` only, seconds required, no compact offset (`+0100`): those forms parse
+ * differently across browsers (Safari), and a string without an offset would be read in the
+ * browser's own zone.
+ */
+const RFC3339 = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,3}))?(?:(Z)|([+-])(\d{2}):(\d{2}))$/;
+function daysInMonth(year, month) {
+    return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+/**
+ * The instant of an RFC 3339 string, computed from its fields (never from `Date.parse`, so every
+ * browser gets the same result), or `null` when the string is not RFC 3339 or names a date or time
+ * that does not exist (`2026-02-30`, `24:00`, `23:60`, leap second `:60`, offset hour > 23).
+ */
+function parseRfc3339(value) {
+    const m = RFC3339.exec(value);
+    if (!m) {
+        return null;
+    }
+    const [year, month, day, hour, minute, second] = m.slice(1, 7).map(Number);
+    const millis = m[7] ? Number(m[7].padEnd(3, '0')) : 0;
+    if (month < 1 || month > 12 || day < 1 || day > daysInMonth(year, month)
+        || hour > 23 || minute > 59 || second > 59) {
+        return null;
+    }
+    let offsetMinutes = 0;
+    if (!m[8]) {
+        const offsetHours = Number(m[10]);
+        const offsetMins = Number(m[11]);
+        if (offsetHours > 23 || offsetMins > 59) {
+            return null;
+        }
+        offsetMinutes = (m[9] === '-' ? -1 : 1) * (offsetHours * 60 + offsetMins);
+    }
+    // setUTCFullYear (not Date.UTC, which maps years 0-99 to 1900-1999) for the wall-clock fields,
+    // then the offset: local wall clock = UTC + offset.
+    const date = new Date(0);
+    date.setUTCFullYear(year, month - 1, day);
+    date.setUTCHours(hour, minute, second, millis);
+    date.setTime(date.getTime() - offsetMinutes * 60_000);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+function toInstant(value) {
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime()) ? null : new Date(value.getTime());
+    }
+    return typeof value === 'string' ? parseRfc3339(value) : null;
+}
+/**
+ * Parses the host's `timeRange` input. `undefined`/`null` = the host sets no period.
+ * Never snaps or converts: the instants are taken as given. `Date` objects are accepted as they
+ * are; strings must be RFC 3339 with an offset, e.g. `2026-03-28T05:00:00Z` or
+ * `2026-03-28T06:00:00+01:00` (see {@link RFC3339}).
+ */
+function parseHostTimeRange(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    const from = toInstant(value.from);
+    const to = toInstant(value.to);
+    if (!from || !to) {
+        return {
+            status: 'invalid',
+            reason: 'from and to must be Date objects or RFC 3339 date-times with an offset '
+                + '(YYYY-MM-DDTHH:MM:SS[.sss] followed by Z or ±HH:MM)'
+        };
+    }
+    if (from.getTime() >= to.getTime()) {
+        return { status: 'invalid', reason: 'from must be before to' };
+    }
+    return { status: 'valid', from, to };
+}
+/** True when two parsed ranges mean the same period (same instants, or both invalid for the same reason). */
+function sameHostTimeRange(a, b) {
+    if (!a || !b) {
+        return a === b;
+    }
+    if (a.status === 'valid' && b.status === 'valid') {
+        return a.from.getTime() === b.from.getTime() && a.to.getTime() === b.to.getTime();
+    }
+    return a.status === 'invalid' && b.status === 'invalid' && a.reason === b.reason;
+}
+
 /**
  * Component for editing MeshBoard variables.
  * Allows adding, editing, and removing static variables with type-specific input controls.
@@ -33630,7 +35086,7 @@ class MeshBoardSettingsDialogComponent {
         this.windowRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MeshBoardSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MeshBoardSettingsDialogComponent, isStandalone: true, selector: "mm-meshboard-settings-dialog", ngImport: i0, template: "<div class=\"meshboard-settings-dialog\">\n  <kendo-tabstrip [animate]=\"false\">\n    <!-- General Tab -->\n    <kendo-tabstrip-tab [title]=\"'General'\" [selected]=\"true\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <!-- Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n              <kendo-textbox\n                #nameInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                placeholder=\"Enter MeshBoard name\"\n                required>\n              </kendo-textbox>\n              @if (name.trim().length === 0) {\n                <kendo-formerror>Name is required</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Description Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n              <kendo-textarea\n                #descriptionInput\n                [(ngModel)]=\"description\"\n                name=\"description\"\n                placeholder=\"Enter MeshBoard description (optional)\"\n                [rows]=\"3\">\n              </kendo-textarea>\n            </kendo-formfield>\n\n            <!-- Well-Known Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n              <kendo-textbox\n                #wellKnownNameInput\n                [(ngModel)]=\"rtWellKnownName\"\n                name=\"rtWellKnownName\"\n                placeholder=\"e.g., cockpit, dashboard-main\">\n              </kendo-textbox>\n              <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n            </kendo-formfield>\n\n            <!-- Layout Settings -->\n            <div class=\"section-title\">Layout Settings</div>\n\n            <!-- Columns Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n              <kendo-numerictextbox\n                #columnsInput\n                [(ngModel)]=\"columns\"\n                name=\"columns\"\n                [min]=\"1\"\n                [max]=\"12\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n              @if (columns < 1 || columns > 12) {\n                <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Row Height Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n              <kendo-numerictextbox\n                #rowHeightInput\n                [(ngModel)]=\"rowHeight\"\n                name=\"rowHeight\"\n                [min]=\"100\"\n                [max]=\"1000\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n              @if (rowHeight < 100 || rowHeight > 1000) {\n                <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Gap Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n              <kendo-numerictextbox\n                #gapInput\n                [(ngModel)]=\"gap\"\n                name=\"gap\"\n                [min]=\"0\"\n                [max]=\"100\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n              @if (gap < 0 || gap > 100) {\n                <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Auto-Refresh Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"autoRefreshInput\" text=\"Auto-refresh\"></kendo-label>\n              <kendo-numerictextbox\n                #autoRefreshInput\n                [(ngModel)]=\"autoRefreshSeconds\"\n                name=\"autoRefreshSeconds\"\n                [min]=\"0\"\n                [max]=\"3600\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\">\n              </kendo-numerictextbox>\n              <kendo-formhint>Refresh interval in seconds (0 = disabled, max 3600). Pauses while the tab is hidden.</kendo-formhint>\n              @if (autoRefreshSeconds < 0 || autoRefreshSeconds > 3600) {\n                <kendo-formerror>Auto-refresh must be between 0 and 3600 seconds</kendo-formerror>\n              }\n            </kendo-formfield>\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Variables Tab -->\n    <kendo-tabstrip-tab [title]=\"'Variables'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-variables-editor\n            [(variables)]=\"variables\">\n          </mm-variables-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Time Filter Tab -->\n    <kendo-tabstrip-tab [title]=\"'Time Filter'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <kendo-formfield>\n              <kendo-label text=\"Timezone\"></kendo-label>\n              <div class=\"radio-group\">\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzLocal\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"local\"\n                    id=\"timeZoneModeLocal\"/>\n                  <kendo-label [for]=\"tzLocal\" text=\"Local time (browser)\" class=\"radio-label\"></kendo-label>\n                </div>\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzUtc\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"utc\"\n                    id=\"timeZoneModeUtc\"/>\n                  <kendo-label [for]=\"tzUtc\" text=\"UTC\" class=\"radio-label\"></kendo-label>\n                </div>\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzZone\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    [value]=\"zoneSelection\"\n                    id=\"timeZoneModeZone\"/>\n                  <kendo-label [for]=\"tzZone\" text=\"Specific time zone\" class=\"radio-label\"></kendo-label>\n                  <kendo-dropdownlist\n                    class=\"tz-zone-select\"\n                    [data]=\"commonTimeZones\"\n                    [value]=\"zoneSelection\"\n                    (valueChange)=\"onZoneSelectionChange($event)\"\n                    [disabled]=\"!isSpecificZone\"\n                    [filterable]=\"true\"\n                    aria-label=\"IANA time zone\">\n                  </kendo-dropdownlist>\n                </div>\n              </div>\n              <kendo-formhint>\n                Basis for the time filter and for how all widgets display dates and times. Local time is the default.\n                A specific time zone resolves civil days (today / yesterday / this month) DST-correctly in that\n                zone and selects matching calendar rollups.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            <kendo-formfield>\n              <div class=\"checkbox-wrapper\">\n                <input\n                  type=\"checkbox\"\n                  kendoCheckBox\n                  #timeFilterCheckbox\n                  [(ngModel)]=\"timeFilterEnabled\"\n                  name=\"timeFilterEnabled\"\n                  id=\"timeFilterEnabled\"/>\n                <kendo-label\n                  [for]=\"timeFilterCheckbox\"\n                  text=\"Enable Time Filter\"\n                  class=\"checkbox-label\">\n                </kendo-label>\n              </div>\n              <kendo-formhint>\n                Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            @if (timeFilterEnabled) {\n              <kendo-formfield>\n                <kendo-label text=\"Default Selection\"></kendo-label>\n                <mm-time-range-picker\n                  [initialSelection]=\"initialDefaultSelection\"\n                  (selectionChange)=\"onDefaultSelectionChange($event)\">\n                </mm-time-range-picker>\n                <kendo-formhint>Initial time filter shown when no URL parameters are set. Note: User-selected filters override this default. Use the reset button in the toolbar to revert to the default.</kendo-formhint>\n              </kendo-formfield>\n            }\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Entity Selectors Tab -->\n    <kendo-tabstrip-tab [title]=\"'Entity Selectors'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-entity-selector-editor\n            [(entitySelectors)]=\"entitySelectors\"\n            [existingVariableNames]=\"staticVariableNames\"\n            (editingStateChange)=\"entitySelectorEditing = $event\">\n          </mm-entity-selector-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n  </kendo-tabstrip>\n\n  <!-- Dialog Actions -->\n  @if (!entitySelectorEditing) {\n    <div class=\"dialog-actions mm-dialog-actions\">\n      <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n        Cancel\n      </button>\n      <button\n        kendoButton\n        (click)=\"save()\"\n        [disabled]=\"!isValid\"\n        themeColor=\"primary\">\n        Save\n      </button>\n    </div>\n  }\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;overflow:hidden}.meshboard-settings-dialog kendo-tabstrip{flex:1;min-height:0;display:flex;flex-direction:column}.meshboard-settings-dialog kendo-tabstrip ::ng-deep .k-tabstrip-content{flex:1;min-height:0;overflow:hidden}.meshboard-settings-dialog .tab-content{height:100%;overflow-y:auto;padding:1.5rem}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper,.meshboard-settings-dialog .settings-form .radio-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .checkbox-wrapper .radio-label,.meshboard-settings-dialog .settings-form .radio-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .radio-wrapper .radio-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog .settings-form .checkbox-wrapper .tz-zone-select,.meshboard-settings-dialog .settings-form .radio-wrapper .tz-zone-select{min-width:12rem}.meshboard-settings-dialog .settings-form .radio-group{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "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: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: i3.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { kind: "component", type: i3.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i3.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i3.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "ngmodule", type: CheckBoxModule }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i4$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: FormFieldModule }, { kind: "ngmodule", type: TabStripModule }, { kind: "component", type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i5.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: VariablesEditorComponent, selector: "mm-variables-editor", inputs: ["variables"], outputs: ["variablesChange"] }, { kind: "component", type: EntitySelectorEditorComponent, selector: "mm-entity-selector-editor", inputs: ["entitySelectors", "existingVariableNames"], outputs: ["entitySelectorsChange", "editingStateChange"] }, { kind: "component", type: TimeRangePickerComponent, selector: "mm-time-range-picker", inputs: ["config", "labels", "initialSelection"], outputs: ["rangeChange", "rangeChangeISO", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MeshBoardSettingsDialogComponent, isStandalone: true, selector: "mm-meshboard-settings-dialog", ngImport: i0, template: "<div class=\"meshboard-settings-dialog\">\n  <kendo-tabstrip [animate]=\"false\">\n    <!-- General Tab -->\n    <kendo-tabstrip-tab [title]=\"'General'\" [selected]=\"true\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <!-- Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n              <kendo-textbox\n                #nameInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                placeholder=\"Enter MeshBoard name\"\n                required>\n              </kendo-textbox>\n              @if (name.trim().length === 0) {\n                <kendo-formerror>Name is required</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Description Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n              <kendo-textarea\n                #descriptionInput\n                [(ngModel)]=\"description\"\n                name=\"description\"\n                placeholder=\"Enter MeshBoard description (optional)\"\n                [rows]=\"3\">\n              </kendo-textarea>\n            </kendo-formfield>\n\n            <!-- Well-Known Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n              <kendo-textbox\n                #wellKnownNameInput\n                [(ngModel)]=\"rtWellKnownName\"\n                name=\"rtWellKnownName\"\n                placeholder=\"e.g., cockpit, dashboard-main\">\n              </kendo-textbox>\n              <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n            </kendo-formfield>\n\n            <!-- Layout Settings -->\n            <div class=\"section-title\">Layout Settings</div>\n\n            <!-- Columns Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n              <kendo-numerictextbox\n                #columnsInput\n                [(ngModel)]=\"columns\"\n                name=\"columns\"\n                [min]=\"1\"\n                [max]=\"12\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n              @if (columns < 1 || columns > 12) {\n                <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Row Height Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n              <kendo-numerictextbox\n                #rowHeightInput\n                [(ngModel)]=\"rowHeight\"\n                name=\"rowHeight\"\n                [min]=\"100\"\n                [max]=\"1000\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n              @if (rowHeight < 100 || rowHeight > 1000) {\n                <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Gap Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n              <kendo-numerictextbox\n                #gapInput\n                [(ngModel)]=\"gap\"\n                name=\"gap\"\n                [min]=\"0\"\n                [max]=\"100\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n              @if (gap < 0 || gap > 100) {\n                <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Auto-Refresh Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"autoRefreshInput\" text=\"Auto-refresh\"></kendo-label>\n              <kendo-numerictextbox\n                #autoRefreshInput\n                [(ngModel)]=\"autoRefreshSeconds\"\n                name=\"autoRefreshSeconds\"\n                [min]=\"0\"\n                [max]=\"3600\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\">\n              </kendo-numerictextbox>\n              <kendo-formhint>Refresh interval in seconds (0 = disabled, max 3600). Pauses while the tab is hidden.</kendo-formhint>\n              @if (autoRefreshSeconds < 0 || autoRefreshSeconds > 3600) {\n                <kendo-formerror>Auto-refresh must be between 0 and 3600 seconds</kendo-formerror>\n              }\n            </kendo-formfield>\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Variables Tab -->\n    <kendo-tabstrip-tab [title]=\"'Variables'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-variables-editor\n            [(variables)]=\"variables\">\n          </mm-variables-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Time Filter Tab -->\n    <kendo-tabstrip-tab [title]=\"'Time Filter'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <kendo-formfield>\n              <kendo-label text=\"Timezone\"></kendo-label>\n              <div class=\"radio-group\">\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzLocal\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"local\"\n                    id=\"timeZoneModeLocal\"/>\n                  <kendo-label [for]=\"tzLocal\" text=\"Local time (browser)\" class=\"radio-label\"></kendo-label>\n                </div>\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzUtc\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"utc\"\n                    id=\"timeZoneModeUtc\"/>\n                  <kendo-label [for]=\"tzUtc\" text=\"UTC\" class=\"radio-label\"></kendo-label>\n                </div>\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzZone\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    [value]=\"zoneSelection\"\n                    id=\"timeZoneModeZone\"/>\n                  <kendo-label [for]=\"tzZone\" text=\"Specific time zone\" class=\"radio-label\"></kendo-label>\n                  <kendo-dropdownlist\n                    class=\"tz-zone-select\"\n                    [data]=\"commonTimeZones\"\n                    [value]=\"zoneSelection\"\n                    (valueChange)=\"onZoneSelectionChange($event)\"\n                    [disabled]=\"!isSpecificZone\"\n                    [filterable]=\"true\"\n                    aria-label=\"IANA time zone\">\n                  </kendo-dropdownlist>\n                </div>\n              </div>\n              <kendo-formhint>\n                Basis for the time filter and for how all widgets display dates and times. Local time is the default.\n                A specific time zone resolves civil days (today / yesterday / this month) DST-correctly in that\n                zone and selects matching calendar rollups.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            <kendo-formfield>\n              <div class=\"checkbox-wrapper\">\n                <input\n                  type=\"checkbox\"\n                  kendoCheckBox\n                  #timeFilterCheckbox\n                  [(ngModel)]=\"timeFilterEnabled\"\n                  name=\"timeFilterEnabled\"\n                  id=\"timeFilterEnabled\"/>\n                <kendo-label\n                  [for]=\"timeFilterCheckbox\"\n                  text=\"Enable Time Filter\"\n                  class=\"checkbox-label\">\n                </kendo-label>\n              </div>\n              <kendo-formhint>\n                Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            @if (timeFilterEnabled) {\n              <kendo-formfield>\n                <kendo-label text=\"Default Selection\"></kendo-label>\n                <mm-time-range-picker\n                  [initialSelection]=\"initialDefaultSelection\"\n                  (selectionChange)=\"onDefaultSelectionChange($event)\">\n                </mm-time-range-picker>\n                <kendo-formhint>Initial time filter shown when no URL parameters are set. Note: User-selected filters override this default. Use the reset button in the toolbar to revert to the default.</kendo-formhint>\n              </kendo-formfield>\n            }\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Entity Selectors Tab -->\n    <kendo-tabstrip-tab [title]=\"'Entity Selectors'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-entity-selector-editor\n            [(entitySelectors)]=\"entitySelectors\"\n            [existingVariableNames]=\"staticVariableNames\"\n            [variables]=\"variables\"\n            (editingStateChange)=\"entitySelectorEditing = $event\">\n          </mm-entity-selector-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n  </kendo-tabstrip>\n\n  <!-- Dialog Actions -->\n  @if (!entitySelectorEditing) {\n    <div class=\"dialog-actions mm-dialog-actions\">\n      <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n        Cancel\n      </button>\n      <button\n        kendoButton\n        (click)=\"save()\"\n        [disabled]=\"!isValid\"\n        themeColor=\"primary\">\n        Save\n      </button>\n    </div>\n  }\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;overflow:hidden}.meshboard-settings-dialog kendo-tabstrip{flex:1;min-height:0;display:flex;flex-direction:column}.meshboard-settings-dialog kendo-tabstrip ::ng-deep .k-tabstrip-content{flex:1;min-height:0;overflow:hidden}.meshboard-settings-dialog .tab-content{height:100%;overflow-y:auto;padding:1.5rem}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper,.meshboard-settings-dialog .settings-form .radio-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .checkbox-wrapper .radio-label,.meshboard-settings-dialog .settings-form .radio-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .radio-wrapper .radio-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog .settings-form .checkbox-wrapper .tz-zone-select,.meshboard-settings-dialog .settings-form .radio-wrapper .tz-zone-select{min-width:12rem}.meshboard-settings-dialog .settings-form .radio-group{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "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: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: i3.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { kind: "component", type: i3.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i3.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i3.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "ngmodule", type: CheckBoxModule }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i4$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: FormFieldModule }, { kind: "ngmodule", type: TabStripModule }, { kind: "component", type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i5.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: VariablesEditorComponent, selector: "mm-variables-editor", inputs: ["variables"], outputs: ["variablesChange"] }, { kind: "component", type: EntitySelectorEditorComponent, selector: "mm-entity-selector-editor", inputs: ["entitySelectors", "existingVariableNames", "variables"], outputs: ["entitySelectorsChange", "editingStateChange"] }, { kind: "component", type: TimeRangePickerComponent, selector: "mm-time-range-picker", inputs: ["config", "labels", "initialSelection"], outputs: ["rangeChange", "rangeChangeISO", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MeshBoardSettingsDialogComponent, decorators: [{
             type: Component,
@@ -33647,7 +35103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         VariablesEditorComponent,
                         EntitySelectorEditorComponent,
                         TimeRangePickerComponent
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"meshboard-settings-dialog\">\n  <kendo-tabstrip [animate]=\"false\">\n    <!-- General Tab -->\n    <kendo-tabstrip-tab [title]=\"'General'\" [selected]=\"true\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <!-- Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n              <kendo-textbox\n                #nameInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                placeholder=\"Enter MeshBoard name\"\n                required>\n              </kendo-textbox>\n              @if (name.trim().length === 0) {\n                <kendo-formerror>Name is required</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Description Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n              <kendo-textarea\n                #descriptionInput\n                [(ngModel)]=\"description\"\n                name=\"description\"\n                placeholder=\"Enter MeshBoard description (optional)\"\n                [rows]=\"3\">\n              </kendo-textarea>\n            </kendo-formfield>\n\n            <!-- Well-Known Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n              <kendo-textbox\n                #wellKnownNameInput\n                [(ngModel)]=\"rtWellKnownName\"\n                name=\"rtWellKnownName\"\n                placeholder=\"e.g., cockpit, dashboard-main\">\n              </kendo-textbox>\n              <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n            </kendo-formfield>\n\n            <!-- Layout Settings -->\n            <div class=\"section-title\">Layout Settings</div>\n\n            <!-- Columns Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n              <kendo-numerictextbox\n                #columnsInput\n                [(ngModel)]=\"columns\"\n                name=\"columns\"\n                [min]=\"1\"\n                [max]=\"12\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n              @if (columns < 1 || columns > 12) {\n                <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Row Height Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n              <kendo-numerictextbox\n                #rowHeightInput\n                [(ngModel)]=\"rowHeight\"\n                name=\"rowHeight\"\n                [min]=\"100\"\n                [max]=\"1000\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n              @if (rowHeight < 100 || rowHeight > 1000) {\n                <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Gap Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n              <kendo-numerictextbox\n                #gapInput\n                [(ngModel)]=\"gap\"\n                name=\"gap\"\n                [min]=\"0\"\n                [max]=\"100\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n              @if (gap < 0 || gap > 100) {\n                <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Auto-Refresh Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"autoRefreshInput\" text=\"Auto-refresh\"></kendo-label>\n              <kendo-numerictextbox\n                #autoRefreshInput\n                [(ngModel)]=\"autoRefreshSeconds\"\n                name=\"autoRefreshSeconds\"\n                [min]=\"0\"\n                [max]=\"3600\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\">\n              </kendo-numerictextbox>\n              <kendo-formhint>Refresh interval in seconds (0 = disabled, max 3600). Pauses while the tab is hidden.</kendo-formhint>\n              @if (autoRefreshSeconds < 0 || autoRefreshSeconds > 3600) {\n                <kendo-formerror>Auto-refresh must be between 0 and 3600 seconds</kendo-formerror>\n              }\n            </kendo-formfield>\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Variables Tab -->\n    <kendo-tabstrip-tab [title]=\"'Variables'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-variables-editor\n            [(variables)]=\"variables\">\n          </mm-variables-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Time Filter Tab -->\n    <kendo-tabstrip-tab [title]=\"'Time Filter'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <kendo-formfield>\n              <kendo-label text=\"Timezone\"></kendo-label>\n              <div class=\"radio-group\">\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzLocal\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"local\"\n                    id=\"timeZoneModeLocal\"/>\n                  <kendo-label [for]=\"tzLocal\" text=\"Local time (browser)\" class=\"radio-label\"></kendo-label>\n                </div>\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzUtc\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"utc\"\n                    id=\"timeZoneModeUtc\"/>\n                  <kendo-label [for]=\"tzUtc\" text=\"UTC\" class=\"radio-label\"></kendo-label>\n                </div>\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzZone\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    [value]=\"zoneSelection\"\n                    id=\"timeZoneModeZone\"/>\n                  <kendo-label [for]=\"tzZone\" text=\"Specific time zone\" class=\"radio-label\"></kendo-label>\n                  <kendo-dropdownlist\n                    class=\"tz-zone-select\"\n                    [data]=\"commonTimeZones\"\n                    [value]=\"zoneSelection\"\n                    (valueChange)=\"onZoneSelectionChange($event)\"\n                    [disabled]=\"!isSpecificZone\"\n                    [filterable]=\"true\"\n                    aria-label=\"IANA time zone\">\n                  </kendo-dropdownlist>\n                </div>\n              </div>\n              <kendo-formhint>\n                Basis for the time filter and for how all widgets display dates and times. Local time is the default.\n                A specific time zone resolves civil days (today / yesterday / this month) DST-correctly in that\n                zone and selects matching calendar rollups.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            <kendo-formfield>\n              <div class=\"checkbox-wrapper\">\n                <input\n                  type=\"checkbox\"\n                  kendoCheckBox\n                  #timeFilterCheckbox\n                  [(ngModel)]=\"timeFilterEnabled\"\n                  name=\"timeFilterEnabled\"\n                  id=\"timeFilterEnabled\"/>\n                <kendo-label\n                  [for]=\"timeFilterCheckbox\"\n                  text=\"Enable Time Filter\"\n                  class=\"checkbox-label\">\n                </kendo-label>\n              </div>\n              <kendo-formhint>\n                Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            @if (timeFilterEnabled) {\n              <kendo-formfield>\n                <kendo-label text=\"Default Selection\"></kendo-label>\n                <mm-time-range-picker\n                  [initialSelection]=\"initialDefaultSelection\"\n                  (selectionChange)=\"onDefaultSelectionChange($event)\">\n                </mm-time-range-picker>\n                <kendo-formhint>Initial time filter shown when no URL parameters are set. Note: User-selected filters override this default. Use the reset button in the toolbar to revert to the default.</kendo-formhint>\n              </kendo-formfield>\n            }\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Entity Selectors Tab -->\n    <kendo-tabstrip-tab [title]=\"'Entity Selectors'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-entity-selector-editor\n            [(entitySelectors)]=\"entitySelectors\"\n            [existingVariableNames]=\"staticVariableNames\"\n            (editingStateChange)=\"entitySelectorEditing = $event\">\n          </mm-entity-selector-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n  </kendo-tabstrip>\n\n  <!-- Dialog Actions -->\n  @if (!entitySelectorEditing) {\n    <div class=\"dialog-actions mm-dialog-actions\">\n      <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n        Cancel\n      </button>\n      <button\n        kendoButton\n        (click)=\"save()\"\n        [disabled]=\"!isValid\"\n        themeColor=\"primary\">\n        Save\n      </button>\n    </div>\n  }\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;overflow:hidden}.meshboard-settings-dialog kendo-tabstrip{flex:1;min-height:0;display:flex;flex-direction:column}.meshboard-settings-dialog kendo-tabstrip ::ng-deep .k-tabstrip-content{flex:1;min-height:0;overflow:hidden}.meshboard-settings-dialog .tab-content{height:100%;overflow-y:auto;padding:1.5rem}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper,.meshboard-settings-dialog .settings-form .radio-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .checkbox-wrapper .radio-label,.meshboard-settings-dialog .settings-form .radio-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .radio-wrapper .radio-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog .settings-form .checkbox-wrapper .tz-zone-select,.meshboard-settings-dialog .settings-form .radio-wrapper .tz-zone-select{min-width:12rem}.meshboard-settings-dialog .settings-form .radio-group{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"meshboard-settings-dialog\">\n  <kendo-tabstrip [animate]=\"false\">\n    <!-- General Tab -->\n    <kendo-tabstrip-tab [title]=\"'General'\" [selected]=\"true\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <!-- Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n              <kendo-textbox\n                #nameInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                placeholder=\"Enter MeshBoard name\"\n                required>\n              </kendo-textbox>\n              @if (name.trim().length === 0) {\n                <kendo-formerror>Name is required</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Description Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n              <kendo-textarea\n                #descriptionInput\n                [(ngModel)]=\"description\"\n                name=\"description\"\n                placeholder=\"Enter MeshBoard description (optional)\"\n                [rows]=\"3\">\n              </kendo-textarea>\n            </kendo-formfield>\n\n            <!-- Well-Known Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n              <kendo-textbox\n                #wellKnownNameInput\n                [(ngModel)]=\"rtWellKnownName\"\n                name=\"rtWellKnownName\"\n                placeholder=\"e.g., cockpit, dashboard-main\">\n              </kendo-textbox>\n              <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n            </kendo-formfield>\n\n            <!-- Layout Settings -->\n            <div class=\"section-title\">Layout Settings</div>\n\n            <!-- Columns Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n              <kendo-numerictextbox\n                #columnsInput\n                [(ngModel)]=\"columns\"\n                name=\"columns\"\n                [min]=\"1\"\n                [max]=\"12\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n              @if (columns < 1 || columns > 12) {\n                <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Row Height Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n              <kendo-numerictextbox\n                #rowHeightInput\n                [(ngModel)]=\"rowHeight\"\n                name=\"rowHeight\"\n                [min]=\"100\"\n                [max]=\"1000\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n              @if (rowHeight < 100 || rowHeight > 1000) {\n                <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Gap Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n              <kendo-numerictextbox\n                #gapInput\n                [(ngModel)]=\"gap\"\n                name=\"gap\"\n                [min]=\"0\"\n                [max]=\"100\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n              @if (gap < 0 || gap > 100) {\n                <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Auto-Refresh Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"autoRefreshInput\" text=\"Auto-refresh\"></kendo-label>\n              <kendo-numerictextbox\n                #autoRefreshInput\n                [(ngModel)]=\"autoRefreshSeconds\"\n                name=\"autoRefreshSeconds\"\n                [min]=\"0\"\n                [max]=\"3600\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\">\n              </kendo-numerictextbox>\n              <kendo-formhint>Refresh interval in seconds (0 = disabled, max 3600). Pauses while the tab is hidden.</kendo-formhint>\n              @if (autoRefreshSeconds < 0 || autoRefreshSeconds > 3600) {\n                <kendo-formerror>Auto-refresh must be between 0 and 3600 seconds</kendo-formerror>\n              }\n            </kendo-formfield>\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Variables Tab -->\n    <kendo-tabstrip-tab [title]=\"'Variables'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-variables-editor\n            [(variables)]=\"variables\">\n          </mm-variables-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Time Filter Tab -->\n    <kendo-tabstrip-tab [title]=\"'Time Filter'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <kendo-formfield>\n              <kendo-label text=\"Timezone\"></kendo-label>\n              <div class=\"radio-group\">\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzLocal\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"local\"\n                    id=\"timeZoneModeLocal\"/>\n                  <kendo-label [for]=\"tzLocal\" text=\"Local time (browser)\" class=\"radio-label\"></kendo-label>\n                </div>\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzUtc\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"utc\"\n                    id=\"timeZoneModeUtc\"/>\n                  <kendo-label [for]=\"tzUtc\" text=\"UTC\" class=\"radio-label\"></kendo-label>\n                </div>\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzZone\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    [value]=\"zoneSelection\"\n                    id=\"timeZoneModeZone\"/>\n                  <kendo-label [for]=\"tzZone\" text=\"Specific time zone\" class=\"radio-label\"></kendo-label>\n                  <kendo-dropdownlist\n                    class=\"tz-zone-select\"\n                    [data]=\"commonTimeZones\"\n                    [value]=\"zoneSelection\"\n                    (valueChange)=\"onZoneSelectionChange($event)\"\n                    [disabled]=\"!isSpecificZone\"\n                    [filterable]=\"true\"\n                    aria-label=\"IANA time zone\">\n                  </kendo-dropdownlist>\n                </div>\n              </div>\n              <kendo-formhint>\n                Basis for the time filter and for how all widgets display dates and times. Local time is the default.\n                A specific time zone resolves civil days (today / yesterday / this month) DST-correctly in that\n                zone and selects matching calendar rollups.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            <kendo-formfield>\n              <div class=\"checkbox-wrapper\">\n                <input\n                  type=\"checkbox\"\n                  kendoCheckBox\n                  #timeFilterCheckbox\n                  [(ngModel)]=\"timeFilterEnabled\"\n                  name=\"timeFilterEnabled\"\n                  id=\"timeFilterEnabled\"/>\n                <kendo-label\n                  [for]=\"timeFilterCheckbox\"\n                  text=\"Enable Time Filter\"\n                  class=\"checkbox-label\">\n                </kendo-label>\n              </div>\n              <kendo-formhint>\n                Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            @if (timeFilterEnabled) {\n              <kendo-formfield>\n                <kendo-label text=\"Default Selection\"></kendo-label>\n                <mm-time-range-picker\n                  [initialSelection]=\"initialDefaultSelection\"\n                  (selectionChange)=\"onDefaultSelectionChange($event)\">\n                </mm-time-range-picker>\n                <kendo-formhint>Initial time filter shown when no URL parameters are set. Note: User-selected filters override this default. Use the reset button in the toolbar to revert to the default.</kendo-formhint>\n              </kendo-formfield>\n            }\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Entity Selectors Tab -->\n    <kendo-tabstrip-tab [title]=\"'Entity Selectors'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-entity-selector-editor\n            [(entitySelectors)]=\"entitySelectors\"\n            [existingVariableNames]=\"staticVariableNames\"\n            [variables]=\"variables\"\n            (editingStateChange)=\"entitySelectorEditing = $event\">\n          </mm-entity-selector-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n  </kendo-tabstrip>\n\n  <!-- Dialog Actions -->\n  @if (!entitySelectorEditing) {\n    <div class=\"dialog-actions mm-dialog-actions\">\n      <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n        Cancel\n      </button>\n      <button\n        kendoButton\n        (click)=\"save()\"\n        [disabled]=\"!isValid\"\n        themeColor=\"primary\">\n        Save\n      </button>\n    </div>\n  }\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;overflow:hidden}.meshboard-settings-dialog kendo-tabstrip{flex:1;min-height:0;display:flex;flex-direction:column}.meshboard-settings-dialog kendo-tabstrip ::ng-deep .k-tabstrip-content{flex:1;min-height:0;overflow:hidden}.meshboard-settings-dialog .tab-content{height:100%;overflow-y:auto;padding:1.5rem}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper,.meshboard-settings-dialog .settings-form .radio-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .checkbox-wrapper .radio-label,.meshboard-settings-dialog .settings-form .radio-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .radio-wrapper .radio-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog .settings-form .checkbox-wrapper .tz-zone-select,.meshboard-settings-dialog .settings-form .radio-wrapper .tz-zone-select{min-width:12rem}.meshboard-settings-dialog .settings-form .radio-group{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -34706,6 +36162,46 @@ class MeshBoardViewComponent {
     ...(ngDevMode ? [{ debugName: "routeChrome" }] : /* istanbul ignore next */ []));
     effectiveChrome = computed(() => resolveMeshBoardChrome(this.chrome(), this.routeChrome()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveChrome" }] : /* istanbul ignore next */ []));
+    /**
+     * The period set by the host page (AB#7582): two exact instants, half-open `[from, to)`, as
+     * `Date` objects or ISO 8601 strings with a zone designator. While set (and the board's time
+     * filter is enabled) the view publishes exactly these instants as `$timeRangeFrom` /
+     * `$timeRangeTo` and as the stream-data window - no day snapping, no zone conversion - and
+     * ignores the `tf_*` query parameters and the stored/default selection. It writes no `tf_*`
+     * parameters and causes no unsaved changes. A change reloads the widgets once; `undefined`
+     * returns the board to its own selection. Day rules (e.g. a 06:00 gas day) belong to the host.
+     * An invalid range (unparseable, or `from >= to`) sends no stream-data query and logs one
+     * console error. A board with the time filter disabled ignores the input.
+     */
+    timeRange = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeRange" }] : /* istanbul ignore next */ []));
+    /**
+     * Who controls the period: `board` (default, unchanged behaviour) shows the board's time-range
+     * picker; `host` hides the picker and its reset button - entity selectors and actions stay.
+     * While `timeRange` is set the picker is hidden and its events are ignored either way.
+     */
+    timeFilterControl = input('board', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFilterControl" }] : /* istanbul ignore next */ []));
+    /** The parsed `timeRange` input; `undefined` = the host sets no period. */
+    parsedHostTimeRange = computed(() => parseHostTimeRange(this.timeRange()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parsedHostTimeRange" }] : /* istanbul ignore next */ []));
+    /** True while the host owns the period (a valid or an invalid `timeRange` is set). */
+    isHostTimeRangeActive = computed(() => this.parsedHostTimeRange() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHostTimeRangeActive" }] : /* istanbul ignore next */ []));
+    /** Whether the board's own time-range picker (and its reset button) is rendered. */
+    showTimeRangePicker = computed(() => this.isTimeFilterEnabled() && this.timeFilterControl() !== 'host' && !this.isHostTimeRangeActive(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTimeRangePicker" }] : /* istanbul ignore next */ []));
+    /** The host range last applied to the state service (to reload only on a real change). */
+    appliedHostTimeRange;
+    /** The invalid host range already reported, so a board switch does not log it again. */
+    reportedInvalidHostTimeRange;
+    /**
+     * Set once the host has owned the period: the `tf_*` parameters of the URL this view was opened
+     * with are stale from then on and are not applied again when `timeRange` goes back to undefined.
+     */
+    hostHasOwnedPeriod = false;
+    /** Set in ngOnDestroy; the async initial load stops touching shared state after it (AB#7582). */
+    destroyed = false;
     // Computed link to MeshBoard page with tenant
     meshBoardPageLink = computed(() => {
         // Get tenant from route parameters (synchronously from snapshot)
@@ -34787,6 +36283,9 @@ class MeshBoardViewComponent {
     // Entity Selector computed signals
     entitySelectorsConfig = computed(() => this.stateService.getEntitySelectors(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "entitySelectorsConfig" }] : /* istanbul ignore next */ []));
+    /** Board variables substituted into the selectors' picker filters (AB#7724). */
+    boardVariables = computed(() => this.stateService.getVariables(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boardVariables" }] : /* istanbul ignore next */ []));
     hasEntitySelectors = computed(() => !this.hideEntitySelectors() && (this.entitySelectorsConfig()?.some(es => showsInToolbar(es)) ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasEntitySelectors" }] : /* istanbul ignore next */ []));
     unselectedToolbarSelectors = computed(() => {
@@ -34828,6 +36327,15 @@ class MeshBoardViewComponent {
                 }
             }
         });
+        // Host period (AB#7582): apply every change of the timeRange input after the initial load
+        // (ngOnInit applies the initial value) and reload the widgets once.
+        effect(() => {
+            const parsed = this.parsedHostTimeRange();
+            if (!this._isInitialized()) {
+                return;
+            }
+            untracked(() => this.onHostTimeRangeChanged(parsed));
+        });
         // Effect to re-evaluate the auto-refresh timer whenever the MeshBoard
         // config changes (e.g. user edits autoRefreshSeconds in settings, or a
         // different board is loaded). Re-reads on the same interval skip the
@@ -34881,8 +36389,16 @@ class MeshBoardViewComponent {
             this.router.navigateByUrl(applyTimeFilterParams(targetUrl, this.activeTimeFilterSelection()), { replaceUrl: true });
         }
     }
-    /** The active time-filter selection to mirror into the URL, or null when the filter is off. */
+    /**
+     * The active time-filter selection to mirror into the URL, or null when the filter is off or
+     * the host owns the period or controls the filter (AB#7582: the view then writes no tf_*
+     * parameters; with `timeFilterControl='host'` and no `timeRange` the board selection still
+     * applies, but the URL is the host's).
+     */
     activeTimeFilterSelection() {
+        if (this.isHostTimeRangeActive() || this.timeFilterControl() === 'host') {
+            return null;
+        }
         const config = this.stateService.getTimeFilterConfig();
         return config?.enabled ? config.selection ?? null : null;
     }
@@ -34939,10 +36455,18 @@ class MeshBoardViewComponent {
                 this.primeEntitySelectorScopes();
                 await this.preloadWidgetData(widgets);
             }
+            // The view may have been destroyed while the board loaded (e.g. a fast switch on the host
+            // page): it must not publish its host period or selection into the root-provided state.
+            if (this.destroyed) {
+                return;
+            }
             // Initialize time filter variables if enabled with stored selection
             this.initializeTimeFilterVariables();
             // Initialize entity selectors from URL params, route data, or defaults
             await this.initializeEntitySelectors();
+            if (this.destroyed) {
+                return;
+            }
             // Mark initial load as complete so the effect can handle subsequent board switches
             this.initialLoadComplete = true;
             // `?edit=1` (e.g. "Edit" in a host's board list) opens the board in edit mode;
@@ -35009,6 +36533,14 @@ class MeshBoardViewComponent {
         }
     }
     ngOnDestroy() {
+        this.destroyed = true;
+        // The state service is root-provided: a host period must not outlive the view that set it.
+        // Owner-aware, so a period another view set in the meantime stays. Only a view that set a
+        // period clears one (the default path never touches it); a view destroyed while its board was
+        // still loading never set one (see the guards after the awaits in ngOnInit).
+        if (this.hostHasOwnedPeriod) {
+            this.stateService.clearHostTimeRange(this);
+        }
         this.resizeObserver?.disconnect();
         this.closeConfigDialog();
         this.navigationSubscription?.unsubscribe();
@@ -35051,14 +36583,19 @@ class MeshBoardViewComponent {
     /**
      * Initializes time filter variables based on URL query params or stored selection.
      * URL params take precedence over stored selection to support page reload.
+     * A period set by the host (`timeRange`, AB#7582) takes precedence over both.
      */
     initializeTimeFilterVariables() {
+        if (this.applyHostTimeRange(this.parsedHostTimeRange())) {
+            return;
+        }
         const timeFilter = this.stateService.getTimeFilterConfig();
         if (!timeFilter?.enabled) {
             return;
         }
-        // Check URL query params first (takes precedence over stored selection)
-        const urlSelection = this.readTimeFilterFromUrl();
+        // Check URL query params first (takes precedence over stored selection). Once the host has
+        // owned the period, the tf_* of the opening URL are stale and are not applied again.
+        const urlSelection = this.hostHasOwnedPeriod ? null : this.readTimeFilterFromUrl();
         if (urlSelection) {
             // Signal the URL selection so the picker picks it up
             this._urlTimeSelection.set(urlSelection);
@@ -35098,6 +36635,59 @@ class MeshBoardViewComponent {
         const rangeISO = TimeRangeUtils.toISO(range);
         this.stateService.setTimeFilterVariables(rangeISO.from, rangeISO.to);
     }
+    /**
+     * Hands the host period to the state service and publishes `$timeRangeFrom` / `$timeRangeTo`
+     * as exactly its instants (AB#7582). Returns true while the host owns the period, so the
+     * caller skips the board's own selection. With the time filter disabled the period is only
+     * stored (the state service ignores it then) and nothing is logged.
+     */
+    applyHostTimeRange(parsed) {
+        if (this.destroyed) {
+            return parsed !== undefined;
+        }
+        const previous = this.appliedHostTimeRange;
+        this.appliedHostTimeRange = parsed;
+        if (!parsed) {
+            // Without a host period nothing changes for the board (default path untouched). When the
+            // host drops its period, its variables go too; the board's own selection (if any) re-sets them.
+            if (previous) {
+                this.stateService.clearHostTimeRange(this);
+                this.stateService.clearTimeFilterVariables();
+            }
+            return false;
+        }
+        this.hostHasOwnedPeriod = true;
+        this.stateService.setHostTimeRange(parsed, this);
+        if (!this.stateService.isTimeFilterEnabled()) {
+            return true;
+        }
+        if (parsed.status === 'valid') {
+            this.stateService.setTimeFilterVariables(parsed.from.toISOString(), parsed.to.toISOString());
+        }
+        else {
+            this.stateService.clearTimeFilterVariables();
+            if (this.reportedInvalidHostTimeRange !== parsed) {
+                this.reportedInvalidHostTimeRange = parsed;
+                console.error(`mm-meshboard-view: input "timeRange" is invalid (${parsed.reason}); `
+                    + 'the board sends no stream-data query until the host sets a valid range.');
+            }
+        }
+        return true;
+    }
+    /**
+     * Applies a change of the `timeRange` input after the initial load (AB#7582): the host period,
+     * or the board's own selection again when the input went back to `undefined`. Reloads the
+     * widgets once; an equal period (same instants) changes nothing.
+     */
+    onHostTimeRangeChanged(parsed) {
+        if (sameHostTimeRange(parsed, this.appliedHostTimeRange)) {
+            return;
+        }
+        this.initializeTimeFilterVariables();
+        if (this.stateService.isTimeFilterEnabled()) {
+            this.stateService.triggerRefresh();
+        }
+    }
     /**
      * Recomputes the active time-filter range from the current selection on the
      * board's (possibly just-changed) timezone mode and republishes the
@@ -35105,6 +36695,11 @@ class MeshBoardViewComponent {
      * disabled or no selection is active.
      */
     reapplyTimeFilterRange() {
+        // A host period (valid or invalid) takes the same path as on every other change.
+        if (this.isHostTimeRangeActive()) {
+            this.applyHostTimeRange(this.parsedHostTimeRange());
+            return;
+        }
         const range = this.stateService.resolveCurrentTimeRange();
         if (!range) {
             return;
@@ -35421,6 +37016,10 @@ class MeshBoardViewComponent {
      * Updates the time filter variables, persists the selection, syncs to URL, and triggers refresh.
      */
     async onTimeSelectionChange(sharedSelection) {
+        // The host owns the period (AB#7582): no selection, URL or refresh from the picker.
+        if (this.isHostTimeRangeActive()) {
+            return;
+        }
         // Convert shared-ui selection to our model
         const selection = {
             type: sharedSelection.type,
@@ -35463,6 +37062,9 @@ class MeshBoardViewComponent {
      * Clears the stored selection and applies the default.
      */
     resetTimeFilterToDefault() {
+        if (this.isHostTimeRangeActive()) {
+            return;
+        }
         const config = this.timeFilterConfig();
         if (!config?.defaultSelection)
             return;
@@ -35996,8 +37598,8 @@ class MeshBoardViewComponent {
                     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
+            // Resolve the stream-data scope rtIds for this selection (childScope
+            // hop or path, 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])));
@@ -36049,34 +37651,52 @@ class MeshBoardViewComponent {
      * 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.
      *
-     * When the selector defines a {@link EntitySelectorChildScope}, the picked
-     * entity's children of `targetCkTypeId` reached via `roleId`/`direction`
-     * become the scope (e.g. MeteringPoint → its EnergyMeasurement rtIds). With
-     * no childScope, the picked entity's own rtId is the scope (direct keying).
+     * - No {@link EntitySelectorChildScope}: the picked entity's own rtId is the
+     *   scope (direct keying).
+     * - One-hop form (top-level fields): the picked entity's targets of
+     *   `targetCkTypeId` reached via `roleId`/`direction` (e.g. MeteringPoint →
+     *   its EnergyMeasurement rtIds) — exactly as before AB#7723.
+     * - `path` (AB#7723): hop by hop, each hop one batched request over all
+     *   entities the previous hop reached; the scope is the distinct rtIds of the
+     *   last hop. An empty hop ends the resolution with an empty scope; a failed
+     *   hop, or an invalid path (more than 5 hops, a hop without role or target
+     *   type), is a failed scope (AB#7721).
      */
     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) {
+        const plan = scopePlan(selector.childScope);
+        if (plan.kind === 'none') {
             this.stateService.setEntitySelectorRtIds(selector.id, [rtId]);
             return;
         }
+        if (plan.kind === 'invalid') {
+            console.error(`Invalid child scope path for selector '${selector.id}': ${plan.reason}`);
+            this.stateService.setEntitySelectorScopeFailed(selector.id);
+            return;
+        }
         try {
-            const targets = await firstValueFrom(this.dataService.fetchAssociationTargets(rtId, selector.ckTypeId, childScope.targetCkTypeId, childScope.roleId, 
-            // 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())
+            let scopeRtIds;
+            if (plan.kind === 'single') {
+                // The original one-hop request, unchanged (AB#7723 keeps old boards byte-identical).
+                const targets = await firstValueFrom(this.dataService.fetchAssociationTargets(rtId, selector.ckTypeId, plan.hop.targetCkTypeId, plan.hop.roleId, 
+                // Parent → children via System/ParentChild is an INBOUND hop (the child
+                // owns the association to its parent), so 'in' is the default.
+                plan.hop.direction));
+                scopeRtIds = isCurrent()
+                    ? (targets ?? []).map(t => String(t.rtId)).filter(id => id.length > 0)
+                    : null;
+            }
+            else {
+                scopeRtIds = await resolveScopePath(rtId, selector.ckTypeId, plan.hops, (sources, sourceCkTypeId, hop) => firstValueFrom(this.dataService.fetchAssociationTargetRtIds(sources, sourceCkTypeId, hop.targetCkTypeId, hop.roleId, hop.direction)), isCurrent);
+            }
+            if (scopeRtIds === null || !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);
+            this.stateService.setEntitySelectorRtIds(selector.id, scopeRtIds);
         }
         catch (error) {
             if (!isCurrent())
@@ -36164,10 +37784,10 @@ class MeshBoardViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MeshBoardViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    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 }, timeRange: { classPropertyName: "timeRange", publicName: "timeRange", isSignal: true, isRequired: false, transformFunction: null }, timeFilterControl: { classPropertyName: "timeFilterControl", publicName: "timeFilterControl", 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    <!-- 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 });
+        ], 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); hidden when the host owns the period (AB#7582) -->\n        @if (showTimeRangePicker()) {\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 (showTimeRangePicker()) {\n            <div class=\"toolbar-separator\"></div>\n          }\n          <div class=\"toolbar-entity-selectors\">\n            <mm-entity-selector-toolbar\n              [entitySelectors]=\"entitySelectorsConfig()\"\n              [variables]=\"boardVariables()\"\n              (entitySelected)=\"onEntitySelectorSelected($event)\"\n              (entityCleared)=\"onEntitySelectorCleared($event)\">\n            </mm-entity-selector-toolbar>\n          </div>\n        }\n\n        @if (showTimeRangePicker() || 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", "variables"], 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,
@@ -36185,11 +37805,11 @@ 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    <!-- 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"] }]
+                    ], 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); hidden when the host owns the period (AB#7582) -->\n        @if (showTimeRangePicker()) {\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 (showTimeRangePicker()) {\n            <div class=\"toolbar-separator\"></div>\n          }\n          <div class=\"toolbar-entity-selectors\">\n            <mm-entity-selector-toolbar\n              [entitySelectors]=\"entitySelectorsConfig()\"\n              [variables]=\"boardVariables()\"\n              (entitySelected)=\"onEntitySelectorSelected($event)\"\n              (entityCleared)=\"onEntitySelectorCleared($event)\">\n            </mm-entity-selector-toolbar>\n          </div>\n        }\n\n        @if (showTimeRangePicker() || 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]
-            }], headerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerMode", required: false }] }], chrome: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrome", required: false }] }] } });
+            }], headerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerMode", required: false }] }], chrome: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrome", required: false }] }], timeRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeRange", required: false }] }], timeFilterControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFilterControl", required: false }] }] } });
 
 /** English defaults — today's texts. Complete: every member (optional ones too) has a value. */
 const DEFAULT_COCKPIT_WIDGET_MESSAGES = {
@@ -39635,5 +41255,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, 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 };
+export { ADAPTER_OFFLINE_GRACE_MS, ASSOCIATION_HOP_SOURCE_BATCH, ASSOCIATION_HOP_TARGETS_PER_SOURCE, 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, EntitySelectorScopePathEditorComponent, 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, MAX_SCOPE_HOPS, MESHBOARD_CHROME_ROUTE_DATA, MESHBOARD_DESCRIPTION_MARKER, MESHBOARD_EDIT_QUERY_PARAM, MESHBOARD_HEADER_MODE_ROUTE_DATA, MESHBOARD_LABEL_RESOLVER, MESHBOARD_LANGUAGE, 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, parseHostTimeRange, pickLocalizedText, pipelineExecutionInputs, plural, provideCockpitWidgetHost, provideCockpitWidgets, provideDefaultWidgets, provideMeshBoard, provideMeshBoardLanguage, 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