@meshmakers/octo-meshboard 3.4.1280 → 3.4.1340

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -1,7 +1,7 @@
 import { FieldFilterOperatorsDto, CkTypeSelectorService, RuntimeEntitySelectDataSource as RuntimeEntitySelectDataSource$2, RuntimeEntityDialogDataSource as RuntimeEntityDialogDataSource$2, DeleteStrategiesDto, AssociationModOptionsDto, CkModelService, QueryModeDto, GraphDirectionDto, AttributeSelectorService, GraphQL, GetCkTypeAvailableQueryColumnsDtoGQL, SortOrdersDto, SeriesResolutionSignalDto, HealthService, TENANT_ID_PROVIDER, AssetRepoService, JobManagementService } 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, Directive, ElementRef, NgZone, makeEnvironmentProviders, provideAppInitializer, InjectionToken, effect } from '@angular/core';
+import { Injectable, inject, EventEmitter, forwardRef, Output, Input, ViewChild, ChangeDetectionStrategy, Component, Injector, EnvironmentInjector, ApplicationRef, signal, computed, effect, untracked, Directive, ElementRef, NgZone, makeEnvironmentProviders, provideAppInitializer, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { firstValueFrom, from, map, Observable, of, catchError, interval, filter } from 'rxjs';
@@ -26,6 +26,7 @@ import { LoaderModule } from '@progress/kendo-angular-indicators';
 import * as i1$4 from '@progress/kendo-angular-icons';
 import { SVGIconModule } from '@progress/kendo-angular-icons';
 import { arrowUpIcon, arrowDownIcon, minusIcon, arrowRightIcon, arrowLeftIcon, linkIcon, chevronDownIcon, chevronRightIcon, circleIcon, questionCircleIcon, minusCircleIcon, warningTriangleIcon, exclamationCircleIcon, xCircleIcon, checkCircleIcon, columnsIcon, sortAscIcon, filterIcon, searchIcon, chartPieIcon, infoCircleIcon, plusIcon, trashIcon, pencilIcon, chartLineIcon, gearsIcon, clipboardMarkdownIcon, copyIcon, gridIcon, heartIcon, gridLayoutIcon, chartLineMarkersIcon, chartColumnStackedIcon, chartDoughnutIcon, tableIcon, shareIcon, fileTxtIcon, checkIcon, xIcon, downloadIcon, uploadIcon, gearIcon, saveIcon, arrowRotateCwIcon, undoIcon } from '@progress/kendo-svg-icons';
+import { ExpressionEvaluatorService, GetProcessDiagramDtoGQL, GetProcessDiagramsDtoGQL, CreateProcessDiagramDtoGQL, UpdateProcessDiagramDtoGQL, SymbolLibraryService, renderAnimations, getFlowParticlesAnimation, renderFlowParticles } from '@meshmakers/octo-process-diagrams';
 import { NotificationService } from '@progress/kendo-angular-notification';
 import * as i1$6 from '@progress/kendo-angular-gauges';
 import { CollectionChangesService, KENDO_GAUGES } from '@progress/kendo-angular-gauges';
@@ -38,7 +39,6 @@ import { MarkdownModule } from 'ngx-markdown';
 import * as i4$1 from '@progress/kendo-angular-label';
 import { LabelModule, KENDO_LABELS } from '@progress/kendo-angular-label';
 import { DomSanitizer } from '@angular/platform-browser';
-import { GetProcessDiagramDtoGQL, GetProcessDiagramsDtoGQL, CreateProcessDiagramDtoGQL, UpdateProcessDiagramDtoGQL, SymbolLibraryService, ExpressionEvaluatorService, renderAnimations, getFlowParticlesAnimation, renderFlowParticles } from '@meshmakers/octo-process-diagrams';
 import * as i5 from '@progress/kendo-angular-layout';
 import { LayoutModule, TabStripModule, TileLayoutModule, TileLayoutComponent } from '@progress/kendo-angular-layout';
 import * as i4$2 from '@progress/kendo-angular-dateinputs';
@@ -2019,6 +2019,13 @@ class MeshBoardStateService {
      */
     _entitySelectorRtIds = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_entitySelectorRtIds" }] : /* istanbul ignore next */ []));
+    /**
+     * Transient variables published by widgets (KPI output variables, AB#5364).
+     * Kept apart from `_meshBoardConfig` so publishing triggers no persistence and
+     * no dirty state. Cleared on every board switch.
+     */
+    _widgetVariables = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_widgetVariables" }] : /* istanbul ignore next */ []));
     // Public computed signals
     meshBoardConfig = computed(() => this._meshBoardConfig(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "meshBoardConfig" }] : /* istanbul ignore next */ []));
@@ -2120,6 +2127,7 @@ class MeshBoardStateService {
                 if (movedWidgets.length > 0) {
                     console.warn(`Resolved ${movedWidgets.length} overlapping widget(s)`);
                 }
+                this._widgetVariables.set([]);
                 this._meshBoardConfig.set(config);
                 this._persistedMeshBoardId.set(result.meshBoard.rtId);
                 this._existingWidgetRtIds.set(result.widgets.map(w => w.rtId));
@@ -2425,11 +2433,55 @@ class MeshBoardStateService {
     // Variable Management
     // ============================================================================
     /**
-     * Gets all variables from the current MeshBoard configuration.
+     * Gets all variables: the MeshBoard configuration's variables plus the runtime
+     * variables published by widgets. A configuration variable wins on a name clash.
+     * Reads signals, so `computed()`s calling it react to both.
      */
     getVariables() {
+        const configVariables = this.configVariables();
+        const widgetVariables = this._widgetVariables();
+        if (widgetVariables.length === 0) {
+            return configVariables;
+        }
+        const configNames = new Set(configVariables.map(v => v.name));
+        return [...configVariables, ...widgetVariables.filter(v => !configNames.has(v.name))];
+    }
+    /**
+     * Variables stored in the MeshBoard configuration (without widget variables).
+     * Every write path builds on this, so widget variables never reach the config.
+     */
+    configVariables() {
         return this._meshBoardConfig().variables ?? [];
     }
+    /**
+     * Publishes a widget's value as runtime variable (source `'widget'`).
+     * Replaces a variable the same widget published under another name, and does
+     * nothing when name and value are unchanged, so publishing effects cannot loop.
+     */
+    setWidgetVariable(widgetId, name, value) {
+        const current = this._widgetVariables();
+        const existing = current.find(v => v.widgetId === widgetId);
+        if (existing && existing.name === name && existing.value === value) {
+            return;
+        }
+        const variable = {
+            name,
+            type: value !== '' && !isNaN(Number(value)) ? 'number' : 'string',
+            source: 'widget',
+            value,
+            widgetId
+        };
+        this._widgetVariables.set([...current.filter(v => v.widgetId !== widgetId), variable]);
+    }
+    /**
+     * Removes the runtime variable published by a widget (e.g. when it is destroyed).
+     */
+    clearWidgetVariable(widgetId) {
+        const current = this._widgetVariables();
+        if (current.some(v => v.widgetId === widgetId)) {
+            this._widgetVariables.set(current.filter(v => v.widgetId !== widgetId));
+        }
+    }
     /**
      * Gets a specific variable by name.
      */
@@ -2449,7 +2501,7 @@ class MeshBoardStateService {
      * Sets the value of a single variable.
      */
     setVariableValue(name, value) {
-        const variables = [...this.getVariables()];
+        const variables = [...this.configVariables()];
         const index = variables.findIndex(v => v.name === name);
         if (index >= 0) {
             variables[index] = { ...variables[index], value };
@@ -2460,14 +2512,14 @@ class MeshBoardStateService {
      * Adds a new variable to the MeshBoard.
      */
     addVariable(variable) {
-        const variables = [...this.getVariables(), variable];
+        const variables = [...this.configVariables(), variable];
         this.updateVariables(variables);
     }
     /**
      * Removes a variable by name.
      */
     removeVariable(name) {
-        const variables = this.getVariables().filter(v => v.name !== name);
+        const variables = this.configVariables().filter(v => v.name !== name);
         this.updateVariables(variables);
     }
     // ============================================================================
@@ -2620,7 +2672,7 @@ class MeshBoardStateService {
      */
     setTimeFilterVariables(fromISO, toISO) {
         // Filter out existing timeFilter variables
-        const currentVars = this.getVariables().filter(v => v.source !== 'timeFilter');
+        const currentVars = this.configVariables().filter(v => v.source !== 'timeFilter');
         // Create new time filter variables
         const timeFilterVars = [
             {
@@ -2643,7 +2695,7 @@ class MeshBoardStateService {
      * Clears time filter variables (called when time filter is disabled).
      */
     clearTimeFilterVariables() {
-        const currentVars = this.getVariables().filter(v => v.source !== 'timeFilter');
+        const currentVars = this.configVariables().filter(v => v.source !== 'timeFilter');
         this.updateVariables(currentVars);
     }
     // ============================================================================
@@ -2687,7 +2739,7 @@ class MeshBoardStateService {
      */
     setEntitySelectorVariables(selectorId, values) {
         // Remove existing variables for this selector
-        const currentVars = this.getVariables().filter(v => !(v.source === 'entitySelector' && v.entitySelectorId === selectorId));
+        const currentVars = this.configVariables().filter(v => !(v.source === 'entitySelector' && v.entitySelectorId === selectorId));
         // Create new variables
         const selectorVars = values.map(v => ({
             name: v.name,
@@ -2702,7 +2754,7 @@ class MeshBoardStateService {
      * Clears entity selector variables for a given selector.
      */
     clearEntitySelectorVariables(selectorId) {
-        const currentVars = this.getVariables().filter(v => !(v.source === 'entitySelector' && v.entitySelectorId === selectorId));
+        const currentVars = this.configVariables().filter(v => !(v.source === 'entitySelector' && v.entitySelectorId === selectorId));
         this.updateVariables(currentVars);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MeshBoardStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -5360,11 +5412,162 @@ function applyValueMultiplier(value, multiplier) {
     return value * multiplier;
 }
 
+const VARIABLE_REFERENCE = /\$\{([^}]+)\}|\$([a-zA-Z_]\w*)/g;
+const IDENTIFIER_PREFIX = '__v_';
+const NUMERIC_VALUE = /^[-+]?(\d+\.?\d*|\.\d+)([eE][-+]?\d+)?$/;
+/**
+ * Safe expr-eval identifier for a variable name. Every character outside `[A-Za-z0-9]`,
+ * including `_`, is hex-escaped as `_<hex>_`, so underscores only ever delimit escapes and
+ * the mapping is injective (`my-var` and `my_2d_var` stay distinct).
+ */
+function toIdentifier(name) {
+    return IDENTIFIER_PREFIX + name.replace(/[^A-Za-z0-9]/g, c => `_${c.charCodeAt(0).toString(16)}_`);
+}
+/**
+ * Replaces `${name}` / `$name` references with safe identifiers.
+ */
+function rewriteFormula(formula) {
+    const referencedNames = [];
+    const expression = (formula ?? '').replace(VARIABLE_REFERENCE, (_match, bracketName, simpleName) => {
+        const name = (bracketName ?? simpleName).trim();
+        if (!referencedNames.includes(name)) {
+            referencedNames.push(name);
+        }
+        return toIdentifier(name);
+    });
+    return { expression, referencedNames };
+}
+/**
+ * Validates a formula: syntax, and that every referenced variable exists.
+ * A bare identifier (`a` instead of `${a}`) is reported as unknown variable.
+ */
+function validateFormula(formula, availableNames, evaluator) {
+    if (!formula?.trim()) {
+        return { valid: false, error: 'Formula is empty', unknownVariables: [] };
+    }
+    const { expression, referencedNames } = rewriteFormula(formula);
+    const syntax = evaluator.validate(expression);
+    if (!syntax.valid) {
+        return { valid: false, error: syntax.error ?? 'Invalid formula', unknownVariables: [] };
+    }
+    const unknownVariables = referencedNames.filter(name => !availableNames.includes(name));
+    const bareIdentifiers = evaluator.getVariables(expression)
+        .filter(identifier => !identifier.startsWith(IDENTIFIER_PREFIX));
+    for (const identifier of bareIdentifiers) {
+        if (!unknownVariables.includes(identifier)) {
+            unknownVariables.push(identifier);
+        }
+    }
+    if (unknownVariables.length > 0) {
+        return {
+            valid: false,
+            error: `Unknown variable${unknownVariables.length > 1 ? 's' : ''}: ${unknownVariables.join(', ')}`,
+            unknownVariables
+        };
+    }
+    return { valid: true, unknownVariables: [] };
+}
+/** Converts a variable's string value to the type expr-eval should see. */
+function toContextValue(value) {
+    const trimmed = value.trim();
+    if (NUMERIC_VALUE.test(trimmed)) {
+        return Number(trimmed);
+    }
+    if (trimmed === 'true' || trimmed === 'false') {
+        return trimmed === 'true';
+    }
+    return value;
+}
+/**
+ * Evaluates a formula against the given variables.
+ *
+ * Returns `pending` while the formula is empty or a referenced variable is missing or empty
+ * (e.g. an upstream widget has not published yet), so the widget shows `-` instead of an error.
+ */
+function evaluateFormula(formula, variables, evaluator) {
+    if (!formula?.trim()) {
+        return { status: 'pending' };
+    }
+    const { expression, referencedNames } = rewriteFormula(formula);
+    const context = {};
+    for (const name of referencedNames) {
+        const variable = variables.find(v => v.name === name);
+        const value = variable?.value || variable?.defaultValue;
+        if (value === undefined || value === '') {
+            return { status: 'pending' };
+        }
+        context[toIdentifier(name)] = toContextValue(value);
+    }
+    const result = evaluator.evaluate(expression, context);
+    if (!result.success) {
+        return { status: 'error', error: result.error ?? 'Evaluation failed' };
+    }
+    const value = result.value;
+    if (typeof value === 'number') {
+        return Number.isFinite(value)
+            ? { status: 'ok', value }
+            : { status: 'error', error: 'Result is not a finite number' };
+    }
+    if (typeof value === 'string' || typeof value === 'boolean') {
+        return { status: 'ok', value };
+    }
+    return { status: 'error', error: 'Result is not a number' };
+}
+/** True when the widget is a KPI in formula mode. */
+function isFormulaKpi(widget) {
+    return widget.type === 'kpi' && widget.valueMode === 'formula';
+}
+/**
+ * Finds widgets that depend on their own output, directly or through other widgets.
+ *
+ * Graph: a formula KPI depends on every widget whose `outputVariableName` its formula
+ * references. A name that is also a configured MeshBoard variable resolves to that variable
+ * at runtime (config variables win), so it creates no dependency on the widget.
+ * Returns the IDs of all widgets that are part of a cycle (including self-references).
+ */
+function findVariableCycles(widgets, configuredVariableNames = []) {
+    const configuredNames = new Set(configuredVariableNames);
+    const producerByName = new Map();
+    for (const widget of widgets) {
+        const name = widget.type === 'kpi' ? widget.outputVariableName?.trim() : undefined;
+        if (name) {
+            producerByName.set(name, widget.id);
+        }
+    }
+    const dependencies = new Map();
+    for (const widget of widgets) {
+        if (!isFormulaKpi(widget))
+            continue;
+        const producers = rewriteFormula(widget.formula ?? '').referencedNames
+            .map(name => configuredNames.has(name) ? undefined : producerByName.get(name))
+            .filter((id) => id !== undefined);
+        dependencies.set(widget.id, producers);
+    }
+    const inCycle = new Set();
+    for (const start of dependencies.keys()) {
+        const visited = new Set();
+        const stack = [...(dependencies.get(start) ?? [])];
+        while (stack.length > 0) {
+            const current = stack.pop();
+            if (current === start) {
+                inCycle.add(start);
+                break;
+            }
+            if (visited.has(current))
+                continue;
+            visited.add(current);
+            stack.push(...(dependencies.get(current) ?? []));
+        }
+    }
+    return inCycle;
+}
+
 class KpiWidgetComponent {
     dataService = inject(DashboardDataService);
     queryExecutor = inject(QueryExecutorService);
     stateService = inject(MeshBoardStateService);
     variableService = inject(MeshBoardVariableService);
+    expressionEvaluator = inject(ExpressionEvaluatorService);
     /**
      * Row __typenames KPI extraction recognises.
      * Runtime queries discriminate; stream-data queries collapse all kinds
@@ -5389,6 +5592,34 @@ class KpiWidgetComponent {
     isLoading = this._isLoading.asReadonly();
     data = this._data.asReadonly();
     error = this._error.asReadonly();
+    /**
+     * Signal mirror of the `config` input, so computeds re-run when the config
+     * changes (the input itself is a plain property). Falls back to the input
+     * before the first lifecycle hook.
+     */
+    _config = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_config" }] : /* istanbul ignore next */ []));
+    currentConfig() {
+        return this._config() ?? this.config;
+    }
+    constructor() {
+        // Publishes the raw value as runtime MeshBoard variable (AB#5364).
+        effect(() => {
+            const config = this.currentConfig();
+            if (!config)
+                return;
+            const name = config.outputVariableName?.trim();
+            const value = name ? this.publishedValue() : null;
+            untracked(() => {
+                if (name && value !== null) {
+                    this.stateService.setWidgetVariable(config.id, name, value);
+                }
+                else {
+                    this.stateService.clearWidgetVariable(config.id);
+                }
+            });
+        });
+    }
     /**
      * Check if widget is not configured (needs data source setup).
      * This is a method (not computed) to ensure it re-evaluates when config changes via @Input.
@@ -5408,39 +5639,92 @@ class KpiWidgetComponent {
             return !dataSource.queryRtId;
         }
         if (dataSource.type === 'static') {
+            if (this.isFormulaMode()) {
+                return !this.config.formula?.trim();
+            }
             return false;
         }
         return false;
     }
-    value = computed(() => {
+    /** True when the value is computed from a formula (AB#5364). */
+    isFormulaMode() {
+        return this.currentConfig()?.valueMode === 'formula';
+    }
+    /**
+     * Formula evaluation result, live over the MeshBoard variables.
+     * `null` outside formula mode. A widget in a circular reference is not evaluated,
+     * otherwise publishing would ping-pong between the widgets of the cycle.
+     */
+    formulaResult = computed(() => {
+        const config = this.currentConfig();
+        if (config?.valueMode !== 'formula')
+            return null;
+        const configuredNames = (this.stateService.meshBoardConfig().variables ?? []).map(v => v.name);
+        if (findVariableCycles(this.stateService.widgets(), configuredNames).has(config.id)) {
+            return { status: 'error', error: 'Circular variable reference' };
+        }
+        return evaluateFormula(config.formula, this.stateService.getVariables(), this.expressionEvaluator);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formulaResult" }] : /* istanbul ignore next */ []));
+    /** Error message of the formula (syntax, evaluation or circular reference). */
+    formulaError = computed(() => {
+        const result = this.formulaResult();
+        return result?.status === 'error' ? result.error : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formulaError" }] : /* istanbul ignore next */ []));
+    /**
+     * Unformatted value: the formula result, or the value taken from the loaded data
+     * (query values already scaled by `valueMultiplier`).
+     */
+    rawValue = computed(() => {
+        const formulaResult = this.formulaResult();
+        if (formulaResult) {
+            return formulaResult.status === 'ok' ? formulaResult.value : null;
+        }
         const data = this._data();
         if (!data)
-            return '-';
+            return null;
+        const config = this.currentConfig();
         // Determine attribute name based on data source type
         let attributeName;
-        if (this.config?.dataSource?.type === 'persistentQuery') {
+        if (config?.dataSource?.type === 'persistentQuery') {
             attributeName = '_queryValue';
         }
-        else if (this.config?.dataSource?.type === 'static') {
+        else if (config?.dataSource?.type === 'static') {
             attributeName = '_staticValue';
         }
         else {
-            attributeName = this.config?.valueAttribute;
+            attributeName = config?.valueAttribute;
         }
         // First check for system properties (direct properties on RuntimeEntityData)
         const systemValue = this.getSystemPropertyValue(data, attributeName);
         if (systemValue !== undefined) {
-            return this.formatDisplayValue(systemValue);
+            return systemValue;
         }
         // Then check in the attributes array
-        if (!data.attributes)
-            return '-';
-        const attr = data.attributes.find(a => a.attributeName === attributeName);
-        if (!attr)
-            return '-';
-        return this.formatDisplayValue(attr.value);
+        return data.attributes?.find(a => a.attributeName === attributeName)?.value ?? null;
     }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rawValue" }] : /* istanbul ignore next */ []));
+    value = computed(() => this.formatDisplayValue(this.rawValue()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Value published as output variable: the raw value as string, or `null` while
+     * there is none (nothing loaded, pending formula, unresolved placeholder, failed load).
+     * During a refresh the last value stays published, so dependents do not flicker to `-`.
+     */
+    publishedValue = computed(() => {
+        if (this._error())
+            return null;
+        const raw = this.rawValue();
+        if (raw === null || raw === undefined)
+            return null;
+        const str = String(raw);
+        if (str === '' || str === 'null' || this.variableService.hasUnresolvedVariables(str)) {
+            return null;
+        }
+        return str;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "publishedValue" }] : /* istanbul ignore next */ []));
     /**
      * Gets a system property value from RuntimeEntityData.
      * System properties are top-level properties like rtId, ckTypeId, rtWellKnownName.
@@ -5530,18 +5814,32 @@ class KpiWidgetComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "trendClass" }] : /* istanbul ignore next */ []));
     comparisonText = computed(() => {
-        if (!this.config?.comparisonText)
+        const comparisonText = this.currentConfig()?.comparisonText;
+        if (!comparisonText)
             return null;
         const variables = this.stateService.getVariables();
-        return this.variableService.resolveVariables(this.config.comparisonText, variables);
+        return this.variableService.resolveVariables(comparisonText, variables);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "comparisonText" }] : /* istanbul ignore next */ []));
     ngOnInit() {
+        this._config.set(this.config);
         this.loadData();
     }
     ngOnChanges(changes) {
-        if (changes['config'] && !changes['config'].firstChange) {
-            this.loadData();
+        if (changes['config']) {
+            const previous = changes['config'].previousValue;
+            if (previous && previous.id !== this.config?.id) {
+                this.stateService.clearWidgetVariable(previous.id);
+            }
+            this._config.set(this.config);
+            if (!changes['config'].firstChange) {
+                this.loadData();
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.config?.id) {
+            this.stateService.clearWidgetVariable(this.config.id);
         }
     }
     refresh() {
@@ -5553,6 +5851,12 @@ class KpiWidgetComponent {
             return;
         }
         const dataSource = this.config?.dataSource;
+        if (this.isFormulaMode()) {
+            // Formula values are computed live from the variables (see formulaResult)
+            this._data.set(null);
+            this._error.set(null);
+            return;
+        }
         if (dataSource.type === 'static') {
             // Resolve static value with variable substitution
             const staticValue = this.config.staticValue ?? '';
@@ -5753,12 +6057,12 @@ class KpiWidgetComponent {
         return this.variableService.convertToFieldFilterDto(filters, variables);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: KpiWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: KpiWidgetComponent, isStandalone: true, selector: "mm-kpi-widget", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"kpi-widget\" [class.loading]=\"isLoading()\" [class.error]=\"error()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>...</span>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-message\">\n      <span>{{ error() }}</span>\n    </div>\n  } @else {\n    <div class=\"kpi-content\">\n      <div class=\"kpi-value-container\">\n        @if (config.prefix) {\n          <span class=\"kpi-prefix\">{{ config.prefix }}</span>\n        }\n        <span class=\"kpi-value\">{{ value() }}</span>\n        @if (config.suffix) {\n          <span class=\"kpi-suffix\">{{ config.suffix }}</span>\n        }\n      </div>\n\n      @if (comparisonText()) {\n        <div class=\"kpi-comparison\" [ngClass]=\"trendClass()\">\n          @if (config.trend) {\n            <kendo-svg-icon [icon]=\"trendIcon()\" size=\"xsmall\"></kendo-svg-icon>\n          }\n          {{ comparisonText() }}\n        </div>\n      }\n\n      @if (label()) {\n        <div class=\"kpi-label\">{{ label() }}</div>\n      }\n    </div>\n\n    @if (config.trend) {\n      <div class=\"kpi-trend\" [ngClass]=\"trendClass()\">\n        <kendo-svg-icon [icon]=\"trendIcon()\" size=\"medium\"></kendo-svg-icon>\n      </div>\n    }\n  }\n</div>\n", styles: [".kpi-widget{display:flex;align-items:center;justify-content:center;height:100%;padding:16px;gap:16px}.kpi-content{display:flex;flex-direction:column;align-items:center;text-align:center}.kpi-value-container{display:flex;align-items:baseline;gap:4px}.kpi-prefix,.kpi-suffix{font-size:1.25rem;font-weight:500;color:var(--kendo-color-subtle, #6c757d)}.kpi-value{font-size:2.5rem;font-weight:700;color:var(--kendo-color-on-surface, #212529);line-height:1}.kpi-comparison{margin-top:4px;font-size:.75rem;font-weight:500;display:flex;align-items:center;gap:4px;justify-content:center}.kpi-comparison.trend-up{color:var(--kendo-color-success, #28a745)}.kpi-comparison.trend-down{color:var(--kendo-color-error, #dc3545)}.kpi-comparison.trend-neutral{color:var(--kendo-color-subtle, #6c757d)}.kpi-label{margin-top:8px;font-size:.875rem;color:var(--kendo-color-subtle, #6c757d)}.kpi-trend{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.kpi-trend.trend-up{background:#28a74526;color:var(--kendo-color-success, #28a745)}.kpi-trend.trend-down{background:#dc354526;color:var(--kendo-color-error, #dc3545)}.kpi-trend.trend-neutral{background:#6c757d26;color:var(--kendo-color-subtle, #6c757d)}@media(max-width:768px){.kpi-value{font-size:1.75rem}.kpi-prefix,.kpi-suffix{font-size:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i1$4.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: WidgetNotConfiguredComponent, selector: "mm-widget-not-configured" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: KpiWidgetComponent, isStandalone: true, selector: "mm-kpi-widget", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"kpi-widget\" [class.loading]=\"isLoading()\" [class.error]=\"error() || formulaError()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>...</span>\n    </div>\n  } @else if (error() || formulaError()) {\n    <div class=\"error-message\">\n      <span>{{ error() ?? formulaError() }}</span>\n    </div>\n  } @else {\n    <div class=\"kpi-content\">\n      <div class=\"kpi-value-container\">\n        @if (config.prefix) {\n          <span class=\"kpi-prefix\">{{ config.prefix }}</span>\n        }\n        <span class=\"kpi-value\">{{ value() }}</span>\n        @if (config.suffix) {\n          <span class=\"kpi-suffix\">{{ config.suffix }}</span>\n        }\n      </div>\n\n      @if (comparisonText()) {\n        <div class=\"kpi-comparison\" [ngClass]=\"trendClass()\">\n          @if (config.trend) {\n            <kendo-svg-icon [icon]=\"trendIcon()\" size=\"xsmall\"></kendo-svg-icon>\n          }\n          {{ comparisonText() }}\n        </div>\n      }\n\n      @if (label()) {\n        <div class=\"kpi-label\">{{ label() }}</div>\n      }\n    </div>\n\n    @if (config.trend) {\n      <div class=\"kpi-trend\" [ngClass]=\"trendClass()\">\n        <kendo-svg-icon [icon]=\"trendIcon()\" size=\"medium\"></kendo-svg-icon>\n      </div>\n    }\n  }\n</div>\n", styles: [".kpi-widget{display:flex;align-items:center;justify-content:center;height:100%;padding:16px;gap:16px}.kpi-content{display:flex;flex-direction:column;align-items:center;text-align:center}.kpi-value-container{display:flex;align-items:baseline;gap:4px}.kpi-prefix,.kpi-suffix{font-size:1.25rem;font-weight:500;color:var(--kendo-color-subtle, #6c757d)}.kpi-value{font-size:2.5rem;font-weight:700;color:var(--kendo-color-on-surface, #212529);line-height:1}.kpi-comparison{margin-top:4px;font-size:.75rem;font-weight:500;display:flex;align-items:center;gap:4px;justify-content:center}.kpi-comparison.trend-up{color:var(--kendo-color-success, #28a745)}.kpi-comparison.trend-down{color:var(--kendo-color-error, #dc3545)}.kpi-comparison.trend-neutral{color:var(--kendo-color-subtle, #6c757d)}.kpi-label{margin-top:8px;font-size:.875rem;color:var(--kendo-color-subtle, #6c757d)}.kpi-trend{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.kpi-trend.trend-up{background:#28a74526;color:var(--kendo-color-success, #28a745)}.kpi-trend.trend-down{background:#dc354526;color:var(--kendo-color-error, #dc3545)}.kpi-trend.trend-neutral{background:#6c757d26;color:var(--kendo-color-subtle, #6c757d)}@media(max-width:768px){.kpi-value{font-size:1.75rem}.kpi-prefix,.kpi-suffix{font-size:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i1$4.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: WidgetNotConfiguredComponent, selector: "mm-widget-not-configured" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: KpiWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-kpi-widget', standalone: true, imports: [CommonModule, SVGIconModule, WidgetNotConfiguredComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"kpi-widget\" [class.loading]=\"isLoading()\" [class.error]=\"error()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>...</span>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-message\">\n      <span>{{ error() }}</span>\n    </div>\n  } @else {\n    <div class=\"kpi-content\">\n      <div class=\"kpi-value-container\">\n        @if (config.prefix) {\n          <span class=\"kpi-prefix\">{{ config.prefix }}</span>\n        }\n        <span class=\"kpi-value\">{{ value() }}</span>\n        @if (config.suffix) {\n          <span class=\"kpi-suffix\">{{ config.suffix }}</span>\n        }\n      </div>\n\n      @if (comparisonText()) {\n        <div class=\"kpi-comparison\" [ngClass]=\"trendClass()\">\n          @if (config.trend) {\n            <kendo-svg-icon [icon]=\"trendIcon()\" size=\"xsmall\"></kendo-svg-icon>\n          }\n          {{ comparisonText() }}\n        </div>\n      }\n\n      @if (label()) {\n        <div class=\"kpi-label\">{{ label() }}</div>\n      }\n    </div>\n\n    @if (config.trend) {\n      <div class=\"kpi-trend\" [ngClass]=\"trendClass()\">\n        <kendo-svg-icon [icon]=\"trendIcon()\" size=\"medium\"></kendo-svg-icon>\n      </div>\n    }\n  }\n</div>\n", styles: [".kpi-widget{display:flex;align-items:center;justify-content:center;height:100%;padding:16px;gap:16px}.kpi-content{display:flex;flex-direction:column;align-items:center;text-align:center}.kpi-value-container{display:flex;align-items:baseline;gap:4px}.kpi-prefix,.kpi-suffix{font-size:1.25rem;font-weight:500;color:var(--kendo-color-subtle, #6c757d)}.kpi-value{font-size:2.5rem;font-weight:700;color:var(--kendo-color-on-surface, #212529);line-height:1}.kpi-comparison{margin-top:4px;font-size:.75rem;font-weight:500;display:flex;align-items:center;gap:4px;justify-content:center}.kpi-comparison.trend-up{color:var(--kendo-color-success, #28a745)}.kpi-comparison.trend-down{color:var(--kendo-color-error, #dc3545)}.kpi-comparison.trend-neutral{color:var(--kendo-color-subtle, #6c757d)}.kpi-label{margin-top:8px;font-size:.875rem;color:var(--kendo-color-subtle, #6c757d)}.kpi-trend{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.kpi-trend.trend-up{background:#28a74526;color:var(--kendo-color-success, #28a745)}.kpi-trend.trend-down{background:#dc354526;color:var(--kendo-color-error, #dc3545)}.kpi-trend.trend-neutral{background:#6c757d26;color:var(--kendo-color-subtle, #6c757d)}@media(max-width:768px){.kpi-value{font-size:1.75rem}.kpi-prefix,.kpi-suffix{font-size:1rem}}\n"] }]
-        }], propDecorators: { config: [{
+            args: [{ selector: 'mm-kpi-widget', standalone: true, imports: [CommonModule, SVGIconModule, WidgetNotConfiguredComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"kpi-widget\" [class.loading]=\"isLoading()\" [class.error]=\"error() || formulaError()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>...</span>\n    </div>\n  } @else if (error() || formulaError()) {\n    <div class=\"error-message\">\n      <span>{{ error() ?? formulaError() }}</span>\n    </div>\n  } @else {\n    <div class=\"kpi-content\">\n      <div class=\"kpi-value-container\">\n        @if (config.prefix) {\n          <span class=\"kpi-prefix\">{{ config.prefix }}</span>\n        }\n        <span class=\"kpi-value\">{{ value() }}</span>\n        @if (config.suffix) {\n          <span class=\"kpi-suffix\">{{ config.suffix }}</span>\n        }\n      </div>\n\n      @if (comparisonText()) {\n        <div class=\"kpi-comparison\" [ngClass]=\"trendClass()\">\n          @if (config.trend) {\n            <kendo-svg-icon [icon]=\"trendIcon()\" size=\"xsmall\"></kendo-svg-icon>\n          }\n          {{ comparisonText() }}\n        </div>\n      }\n\n      @if (label()) {\n        <div class=\"kpi-label\">{{ label() }}</div>\n      }\n    </div>\n\n    @if (config.trend) {\n      <div class=\"kpi-trend\" [ngClass]=\"trendClass()\">\n        <kendo-svg-icon [icon]=\"trendIcon()\" size=\"medium\"></kendo-svg-icon>\n      </div>\n    }\n  }\n</div>\n", styles: [".kpi-widget{display:flex;align-items:center;justify-content:center;height:100%;padding:16px;gap:16px}.kpi-content{display:flex;flex-direction:column;align-items:center;text-align:center}.kpi-value-container{display:flex;align-items:baseline;gap:4px}.kpi-prefix,.kpi-suffix{font-size:1.25rem;font-weight:500;color:var(--kendo-color-subtle, #6c757d)}.kpi-value{font-size:2.5rem;font-weight:700;color:var(--kendo-color-on-surface, #212529);line-height:1}.kpi-comparison{margin-top:4px;font-size:.75rem;font-weight:500;display:flex;align-items:center;gap:4px;justify-content:center}.kpi-comparison.trend-up{color:var(--kendo-color-success, #28a745)}.kpi-comparison.trend-down{color:var(--kendo-color-error, #dc3545)}.kpi-comparison.trend-neutral{color:var(--kendo-color-subtle, #6c757d)}.kpi-label{margin-top:8px;font-size:.875rem;color:var(--kendo-color-subtle, #6c757d)}.kpi-trend{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.kpi-trend.trend-up{background:#28a74526;color:var(--kendo-color-success, #28a745)}.kpi-trend.trend-down{background:#dc354526;color:var(--kendo-color-error, #dc3545)}.kpi-trend.trend-neutral{background:#6c757d26;color:var(--kendo-color-subtle, #6c757d)}@media(max-width:768px){.kpi-value{font-size:1.75rem}.kpi-prefix,.kpi-suffix{font-size:1rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }] } });
 
@@ -6002,6 +6306,8 @@ class KpiConfigDialogComponent {
         'StreamDataQueryRow'
     ]);
     meshBoardStateService = inject(MeshBoardStateService);
+    variableService = inject(MeshBoardVariableService);
+    expressionEvaluator = inject(ExpressionEvaluatorService);
     windowRef = inject(WindowRef);
     ckTypeSelectorInput;
     entitySelectorInput;
@@ -6028,6 +6334,11 @@ class KpiConfigDialogComponent {
     initialQueryCategoryValue;
     // Initial values for static
     initialStaticValue;
+    // Initial values for formula / output variable (AB#5364)
+    /** Id of the edited widget: excludes its own output from the checks and drives the cycle check */
+    initialWidgetId;
+    initialFormula;
+    initialOutputVariableName;
     // Initial values for filters
     initialFilters;
     // Data source type selection
@@ -6081,8 +6392,103 @@ class KpiConfigDialogComponent {
         queryCategoryField: '',
         queryCategoryValue: '',
         // Static form fields
-        staticValue: ''
+        staticValue: '',
+        // Formula form fields
+        formula: '',
+        outputVariableName: ''
     };
+    /**
+     * Variables a formula can reference: MeshBoard variables plus other widgets' outputs.
+     * Read live, so outputs published while the dialog is open (e.g. a query KPI that
+     * finished loading) become available immediately.
+     */
+    get formulaVariables() {
+        return this.meshBoardStateService.getVariables()
+            .filter(v => !(v.source === 'widget' && v.widgetId === this.initialWidgetId));
+    }
+    formulaValidationCache;
+    /**
+     * Variable names that exist by configuration even while they carry no value yet: the
+     * outputs declared by other KPIs (e.g. still loading or in error) and the variables an
+     * entity selector exposes once an entity is picked.
+     */
+    get declaredVariableNames() {
+        const outputs = this.meshBoardStateService.widgets()
+            .filter(w => w.id !== this.initialWidgetId && w.type === 'kpi')
+            .map(w => w.outputVariableName?.trim())
+            .filter((name) => !!name);
+        const selectorVariables = this.meshBoardStateService.getEntitySelectors().flatMap(selector => [
+            ...(selector.attributeMappings ?? []).map(m => m.variableName),
+            `${selector.id}_rtId`,
+            `${selector.id}_rtCkTypeId`
+        ]);
+        return [...outputs, ...selectorVariables];
+    }
+    /**
+     * Validation of the current formula (memoized per formula text and available variable names).
+     * Declared names count as known, so a reference to an output without a value yet can be saved;
+     * the preview keeps evaluating the live values and shows it as pending.
+     */
+    get formulaValidation() {
+        const formula = this.form.formula;
+        const availableNames = [...new Set([...this.formulaVariables.map(v => v.name), ...this.declaredVariableNames])];
+        const names = JSON.stringify(availableNames);
+        if (this.formulaValidationCache?.formula !== formula || this.formulaValidationCache.names !== names) {
+            this.formulaValidationCache = {
+                formula,
+                names,
+                result: validateFormula(formula, availableNames, this.expressionEvaluator)
+            };
+        }
+        return this.formulaValidationCache.result;
+    }
+    /** Result of the current formula over the current variable values */
+    get formulaPreview() {
+        const result = evaluateFormula(this.form.formula, this.formulaVariables, this.expressionEvaluator);
+        switch (result.status) {
+            case 'ok': return String(result.value);
+            case 'pending': return '- (a referenced variable has no value yet)';
+            default: return result.error;
+        }
+    }
+    /** Validation message for the output variable name, or `null` when valid or empty */
+    get outputVariableError() {
+        const name = this.form.outputVariableName.trim();
+        if (!name)
+            return null;
+        if (!this.variableService.isValidVariableName(name)) {
+            return 'Use letters, digits and underscores only; the name must not start with a digit.';
+        }
+        if ((this.meshBoardStateService.meshBoardConfig().variables ?? []).some(v => v.name === name)) {
+            return `A MeshBoard variable named "${name}" already exists.`;
+        }
+        const otherProducer = this.meshBoardStateService.widgets().find(w => w.id !== this.initialWidgetId && w.type === 'kpi' && w.outputVariableName?.trim() === name);
+        if (otherProducer) {
+            return `Widget "${otherProducer.title}" already publishes "${name}".`;
+        }
+        return null;
+    }
+    /** Circular reference introduced by the pending formula / output name, or `null` */
+    get cycleError() {
+        if (this.dataSourceType !== 'formula')
+            return null;
+        const widgetId = this.initialWidgetId ?? '__pending-kpi__';
+        const widgets = this.meshBoardStateService.widgets();
+        const current = widgets.find(w => w.id === widgetId);
+        const pending = {
+            ...(current ?? { id: widgetId, type: 'kpi', title: '', col: 1, row: 1, colSpan: 1, rowSpan: 1, valueAttribute: '', dataSource: { type: 'static' } }),
+            valueMode: 'formula',
+            formula: this.form.formula,
+            outputVariableName: this.form.outputVariableName.trim() || undefined
+        };
+        const pendingWidgets = current
+            ? widgets.map(w => w.id === widgetId ? pending : w)
+            : [...widgets, pending];
+        const configuredNames = (this.meshBoardStateService.meshBoardConfig().variables ?? []).map(v => v.name);
+        return findVariableCycles(pendingWidgets, configuredNames).has(widgetId)
+            ? 'Circular reference: the formula depends on this widget\'s own output.'
+            : null;
+    }
     variableSyntaxHint = '${variableName}';
     trendOptions = [
         { value: undefined, label: 'None' },
@@ -6096,6 +6502,11 @@ class KpiConfigDialogComponent {
         { value: 'groupedAggregation', label: 'Grouped Aggregation' }
     ];
     get isValid() {
+        if (this.outputVariableError)
+            return false;
+        if (this.dataSourceType === 'formula') {
+            return this.formulaValidation.valid && !this.cycleError;
+        }
         if (this.dataSourceType === 'static') {
             return (this.form.staticValue?.trim() ?? '') !== '';
         }
@@ -6138,6 +6549,8 @@ class KpiConfigDialogComponent {
         this.form.queryCategoryField = this.initialQueryCategoryField || '';
         this.form.queryCategoryValue = this.initialQueryCategoryValue || '';
         this.form.staticValue = this.initialStaticValue || '';
+        this.form.formula = this.initialFormula || '';
+        this.form.outputVariableName = this.initialOutputVariableName || '';
         // Initialize filters
         if (this.initialFilters && this.initialFilters.length > 0) {
             this.filters = this.initialFilters.map((f, index) => ({
@@ -6300,6 +6713,20 @@ class KpiConfigDialogComponent {
                 comparisonValue: f.comparisonValue
             }))
             : undefined;
+        if (this.dataSourceType === 'formula') {
+            this.windowRef.close({
+                dataSourceType: 'formula',
+                ckTypeId: '',
+                valueAttribute: '',
+                formula: this.form.formula.trim(),
+                prefix: this.form.prefix || undefined,
+                suffix: this.form.suffix || undefined,
+                trend: this.form.trend,
+                comparisonText: this.form.comparisonText || undefined,
+                outputVariableName: this.form.outputVariableName.trim() || undefined
+            });
+            return;
+        }
         if (this.dataSourceType === 'static') {
             this.windowRef.close({
                 dataSourceType: 'static',
@@ -6309,7 +6736,8 @@ class KpiConfigDialogComponent {
                 prefix: this.form.prefix || undefined,
                 suffix: this.form.suffix || undefined,
                 trend: this.form.trend,
-                comparisonText: this.form.comparisonText || undefined
+                comparisonText: this.form.comparisonText || undefined,
+                outputVariableName: this.form.outputVariableName.trim() || undefined
             });
             return;
         }
@@ -6333,6 +6761,7 @@ class KpiConfigDialogComponent {
                 suffix: this.form.suffix || undefined,
                 trend: this.form.trend,
                 comparisonText: this.form.comparisonText || undefined,
+                outputVariableName: this.form.outputVariableName.trim() || undefined,
                 filters: filtersDto
             });
         }
@@ -6347,6 +6776,7 @@ class KpiConfigDialogComponent {
                 suffix: this.form.suffix || undefined,
                 trend: this.form.trend,
                 comparisonText: this.form.comparisonText || undefined,
+                outputVariableName: this.form.outputVariableName.trim() || undefined,
                 filters: filtersDto
             });
         }
@@ -6360,6 +6790,12 @@ class KpiConfigDialogComponent {
     onDataSourceTypeChange(type) {
         this.dataSourceType = type;
     }
+    /** Appends a `${name}` reference to the formula */
+    insertVariable(name) {
+        const formula = this.form.formula;
+        const separator = formula && !formula.endsWith(' ') ? ' ' : '';
+        this.form.formula = `${formula}${separator}\${${name}}`;
+    }
     // ============================================================================
     // Persistent Query Methods
     // ============================================================================
@@ -6489,7 +6925,7 @@ class KpiConfigDialogComponent {
         this.filters = updatedFilters;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: KpiConfigDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: KpiConfigDialogComponent, isStandalone: true, selector: "mm-kpi-config-dialog", inputs: { initialCkTypeId: "initialCkTypeId", initialRtId: "initialRtId", initialValueAttribute: "initialValueAttribute", initialLabelAttribute: "initialLabelAttribute", initialPrefix: "initialPrefix", initialSuffix: "initialSuffix", initialTrend: "initialTrend", initialComparisonText: "initialComparisonText", initialDataSourceType: "initialDataSourceType", initialQueryRtId: "initialQueryRtId", initialQueryName: "initialQueryName", initialQueryFamily: "initialQueryFamily", initialIgnoreTimeFilter: "initialIgnoreTimeFilter", initialEntitySelectorId: "initialEntitySelectorId", initialQueryMode: "initialQueryMode", initialQueryValueField: "initialQueryValueField", initialQueryCategoryField: "initialQueryCategoryField", initialQueryCategoryValue: "initialQueryCategoryValue", initialStaticValue: "initialStaticValue", initialFilters: "initialFilters" }, viewQueries: [{ propertyName: "ckTypeSelectorInput", first: true, predicate: ["ckTypeSelector"], descendants: true }, { propertyName: "entitySelectorInput", first: true, predicate: ["entitySelector"], descendants: true }, { propertyName: "querySelector", first: true, predicate: ["querySelector"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: KpiConfigDialogComponent, isStandalone: true, selector: "mm-kpi-config-dialog", inputs: { initialCkTypeId: "initialCkTypeId", initialRtId: "initialRtId", initialValueAttribute: "initialValueAttribute", initialLabelAttribute: "initialLabelAttribute", initialPrefix: "initialPrefix", initialSuffix: "initialSuffix", initialTrend: "initialTrend", initialComparisonText: "initialComparisonText", initialDataSourceType: "initialDataSourceType", initialQueryRtId: "initialQueryRtId", initialQueryName: "initialQueryName", initialQueryFamily: "initialQueryFamily", initialIgnoreTimeFilter: "initialIgnoreTimeFilter", initialEntitySelectorId: "initialEntitySelectorId", initialQueryMode: "initialQueryMode", initialQueryValueField: "initialQueryValueField", initialQueryCategoryField: "initialQueryCategoryField", initialQueryCategoryValue: "initialQueryCategoryValue", initialStaticValue: "initialStaticValue", initialWidgetId: "initialWidgetId", initialFormula: "initialFormula", initialOutputVariableName: "initialOutputVariableName", initialFilters: "initialFilters" }, viewQueries: [{ propertyName: "ckTypeSelectorInput", first: true, predicate: ["ckTypeSelector"], descendants: true }, { propertyName: "entitySelectorInput", first: true, predicate: ["entitySelector"], descendants: true }, { propertyName: "querySelector", first: true, predicate: ["querySelector"], descendants: true }], ngImport: i0, template: `
     <div class="config-container">
 
       <div class="config-form" [class.loading]="isLoadingInitial">
@@ -6520,6 +6956,13 @@ class KpiConfigDialogComponent {
               (click)="onDataSourceTypeChange('static')">
               Static
             </button>
+            <button
+              kendoButton
+              [fillMode]="dataSourceType === 'formula' ? 'solid' : 'outline'"
+              [themeColor]="dataSourceType === 'formula' ? 'primary' : 'base'"
+              (click)="onDataSourceTypeChange('formula')">
+              Formula
+            </button>
           </div>
         </div>
 
@@ -6806,6 +7249,59 @@ class KpiConfigDialogComponent {
           </div>
         }
 
+        <!-- ============================================================ -->
+        <!-- FORMULA -->
+        <!-- ============================================================ -->
+        @if (dataSourceType === 'formula') {
+          <div class="form-field">
+            <label>Formula <span class="required">*</span></label>
+            <kendo-textbox
+              [(ngModel)]="form.formula"
+              placeholder="e.g., (\${a} - \${b}) / 1000">
+            </kendo-textbox>
+            <p class="field-hint">
+              Reference variables with <code>{{variableSyntaxHint}}</code>. Supported: <code>+ - * / % ^</code>, parentheses,
+              <code>min</code>, <code>max</code>, <code>abs</code>, <code>round</code>, <code>clamp</code>, <code>? :</code>.
+              Numbers use a dot as decimal separator.
+            </p>
+            @if (form.formula.trim() && formulaValidation.error) {
+              <p class="field-error">{{ formulaValidation.error }}</p>
+            } @else if (form.formula.trim()) {
+              <p class="field-hint">Preview: <strong>{{ formulaPreview }}</strong></p>
+            }
+          </div>
+          <div class="form-field">
+            <label>Available Variables</label>
+            @if (formulaVariables.length > 0) {
+              <div class="variable-list">
+                @for (variable of formulaVariables; track variable.name) {
+                  <button kendoButton fillMode="flat" size="small" type="button"
+                          [title]="'Insert ' + variable.name + ' (current value: ' + (variable.value || '-') + ')'"
+                          (click)="insertVariable(variable.name)">
+                    {{ variable.name }}@if (variable.source === 'widget') { <span class="variable-source">(widget)</span> }
+                  </button>
+                }
+              </div>
+            } @else {
+              <p class="field-hint">No variables defined. Add variables in the MeshBoard settings or publish a widget value as output variable.</p>
+            }
+          </div>
+        }
+
+        <!-- Output Variable -->
+        <div class="form-field">
+          <label>Output Variable</label>
+          <kendo-textbox [(ngModel)]="form.outputVariableName" placeholder="e.g., consumption"></kendo-textbox>
+          @if (outputVariableError) {
+            <p class="field-error">{{ outputVariableError }}</p>
+          } @else {
+            <p class="field-hint">Optional. Publishes the displayed raw value as MeshBoard variable for formulas, texts and filters of other widgets.</p>
+          }
+          @if (cycleError) {
+            <p class="field-error">{{ cycleError }}</p>
+          }
+        </div>
+
         <!-- Display Options -->
         <div class="form-section">
           <h4>Display Options</h4>
@@ -6871,7 +7367,7 @@ class KpiConfigDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field.flex-1{flex:1}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.form-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.form-section h4{margin:0 0 16px;font-size:.95rem;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-row{display:flex;gap:16px}.mode-toggle{display:flex;gap:8px}.mode-toggle button{flex:1}.attribute-item{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.attribute-path{flex:1}.attribute-type{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);background:var(--kendo-color-surface-alt, #f8f9fa);padding:2px 6px;border-radius:3px}.required{color:var(--kendo-color-error, #dc3545)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "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: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "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: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "hideNavigationProperties", "attributePaths", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: QuerySelectorComponent, selector: "mm-query-selector", inputs: ["placeholder", "hint", "disabled", "acceptFamilies"], outputs: ["querySelected", "queriesLoaded"] }, { kind: "component", type: SdTimeFilterToggleComponent, selector: "mm-sd-time-filter-toggle", inputs: ["family", "ignoreTimeFilter"], outputs: ["ignoreTimeFilterChange"] }, { kind: "component", type: EntitySelectorScopePickerComponent, selector: "mm-entity-selector-scope-picker", inputs: ["family", "entitySelectorId", "selectors"], outputs: ["entitySelectorIdChange"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field.flex-1{flex:1}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.form-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.form-section h4{margin:0 0 16px;font-size:.95rem;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-row{display:flex;gap:16px}.mode-toggle{display:flex;gap:8px}.mode-toggle button{flex:1}.attribute-item{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.attribute-path{flex:1}.attribute-type{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);background:var(--kendo-color-surface-alt, #f8f9fa);padding:2px 6px;border-radius:3px}.required{color:var(--kendo-color-error, #dc3545)}.field-error{margin:0;font-size:.8rem;color:var(--kendo-color-error, #dc3545)}.variable-list{display:flex;flex-wrap:wrap;gap:4px}.variable-source{color:var(--kendo-color-subtle, #6c757d)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "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: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "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: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "hideNavigationProperties", "attributePaths", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: QuerySelectorComponent, selector: "mm-query-selector", inputs: ["placeholder", "hint", "disabled", "acceptFamilies"], outputs: ["querySelected", "queriesLoaded"] }, { kind: "component", type: SdTimeFilterToggleComponent, selector: "mm-sd-time-filter-toggle", inputs: ["family", "ignoreTimeFilter"], outputs: ["ignoreTimeFilterChange"] }, { kind: "component", type: EntitySelectorScopePickerComponent, selector: "mm-entity-selector-scope-picker", inputs: ["family", "entitySelectorId", "selectors"], outputs: ["entitySelectorIdChange"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: KpiConfigDialogComponent, decorators: [{
             type: Component,
@@ -6919,6 +7415,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               (click)="onDataSourceTypeChange('static')">
               Static
             </button>
+            <button
+              kendoButton
+              [fillMode]="dataSourceType === 'formula' ? 'solid' : 'outline'"
+              [themeColor]="dataSourceType === 'formula' ? 'primary' : 'base'"
+              (click)="onDataSourceTypeChange('formula')">
+              Formula
+            </button>
           </div>
         </div>
 
@@ -7205,6 +7708,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           </div>
         }
 
+        <!-- ============================================================ -->
+        <!-- FORMULA -->
+        <!-- ============================================================ -->
+        @if (dataSourceType === 'formula') {
+          <div class="form-field">
+            <label>Formula <span class="required">*</span></label>
+            <kendo-textbox
+              [(ngModel)]="form.formula"
+              placeholder="e.g., (\${a} - \${b}) / 1000">
+            </kendo-textbox>
+            <p class="field-hint">
+              Reference variables with <code>{{variableSyntaxHint}}</code>. Supported: <code>+ - * / % ^</code>, parentheses,
+              <code>min</code>, <code>max</code>, <code>abs</code>, <code>round</code>, <code>clamp</code>, <code>? :</code>.
+              Numbers use a dot as decimal separator.
+            </p>
+            @if (form.formula.trim() && formulaValidation.error) {
+              <p class="field-error">{{ formulaValidation.error }}</p>
+            } @else if (form.formula.trim()) {
+              <p class="field-hint">Preview: <strong>{{ formulaPreview }}</strong></p>
+            }
+          </div>
+          <div class="form-field">
+            <label>Available Variables</label>
+            @if (formulaVariables.length > 0) {
+              <div class="variable-list">
+                @for (variable of formulaVariables; track variable.name) {
+                  <button kendoButton fillMode="flat" size="small" type="button"
+                          [title]="'Insert ' + variable.name + ' (current value: ' + (variable.value || '-') + ')'"
+                          (click)="insertVariable(variable.name)">
+                    {{ variable.name }}@if (variable.source === 'widget') { <span class="variable-source">(widget)</span> }
+                  </button>
+                }
+              </div>
+            } @else {
+              <p class="field-hint">No variables defined. Add variables in the MeshBoard settings or publish a widget value as output variable.</p>
+            }
+          </div>
+        }
+
+        <!-- Output Variable -->
+        <div class="form-field">
+          <label>Output Variable</label>
+          <kendo-textbox [(ngModel)]="form.outputVariableName" placeholder="e.g., consumption"></kendo-textbox>
+          @if (outputVariableError) {
+            <p class="field-error">{{ outputVariableError }}</p>
+          } @else {
+            <p class="field-hint">Optional. Publishes the displayed raw value as MeshBoard variable for formulas, texts and filters of other widgets.</p>
+          }
+          @if (cycleError) {
+            <p class="field-error">{{ cycleError }}</p>
+          }
+        </div>
+
         <!-- Display Options -->
         <div class="form-section">
           <h4>Display Options</h4>
@@ -7270,7 +7826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         </button>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field.flex-1{flex:1}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.form-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.form-section h4{margin:0 0 16px;font-size:.95rem;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-row{display:flex;gap:16px}.mode-toggle{display:flex;gap:8px}.mode-toggle button{flex:1}.attribute-item{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.attribute-path{flex:1}.attribute-type{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);background:var(--kendo-color-surface-alt, #f8f9fa);padding:2px 6px;border-radius:3px}.required{color:var(--kendo-color-error, #dc3545)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;flex:1;overflow-y:auto;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field.flex-1{flex:1}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.form-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.form-section h4{margin:0 0 16px;font-size:.95rem;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-row{display:flex;gap:16px}.mode-toggle{display:flex;gap:8px}.mode-toggle button{flex:1}.attribute-item{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.attribute-path{flex:1}.attribute-type{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);background:var(--kendo-color-surface-alt, #f8f9fa);padding:2px 6px;border-radius:3px}.required{color:var(--kendo-color-error, #dc3545)}.field-error{margin:0;font-size:.8rem;color:var(--kendo-color-error, #dc3545)}.variable-list{display:flex;flex-wrap:wrap;gap:4px}.variable-source{color:var(--kendo-color-subtle, #6c757d)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"] }]
         }], propDecorators: { ckTypeSelectorInput: [{
                 type: ViewChild,
                 args: ['ckTypeSelector']
@@ -7318,6 +7874,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 type: Input
             }], initialStaticValue: [{
                 type: Input
+            }], initialWidgetId: [{
+                type: Input
+            }], initialFormula: [{
+                type: Input
+            }], initialOutputVariableName: [{
+                type: Input
             }], initialFilters: [{
                 type: Input
             }] } });
@@ -28425,8 +28987,10 @@ function registerDefaultWidgets(registry) {
             const kpiWidget = widget;
             const isPersistentQuery = kpiWidget.dataSource.type === 'persistentQuery';
             const isStatic = kpiWidget.dataSource.type === 'static';
-            const dataSourceType = isPersistentQuery ? 'persistentQuery' : isStatic ? 'static' : 'runtimeEntity';
+            const isFormula = isStatic && kpiWidget.valueMode === 'formula';
+            const dataSourceType = isPersistentQuery ? 'persistentQuery' : isFormula ? 'formula' : isStatic ? 'static' : 'runtimeEntity';
             return {
+                initialWidgetId: kpiWidget.id,
                 // Runtime entity fields
                 initialCkTypeId: getDataSourceInfo(widget).ckTypeId,
                 initialRtId: getDataSourceInfo(widget).rtId,
@@ -28445,6 +29009,9 @@ function registerDefaultWidgets(registry) {
                 initialQueryCategoryValue: kpiWidget.queryCategoryValue,
                 // Static fields
                 initialStaticValue: kpiWidget.staticValue,
+                // Formula / output variable (AB#5364)
+                initialFormula: kpiWidget.formula,
+                initialOutputVariableName: kpiWidget.outputVariableName,
                 // Display options
                 initialPrefix: kpiWidget.prefix,
                 initialSuffix: kpiWidget.suffix,
@@ -28461,9 +29028,33 @@ function registerDefaultWidgets(registry) {
                 operator: String(f.operator),
                 comparisonValue: f.comparisonValue
             }));
-            if (result.dataSourceType === 'static') {
+            if (result.dataSourceType === 'formula') {
+                return {
+                    ...widget,
+                    dataSource: { type: 'static' },
+                    valueMode: 'formula',
+                    formula: result.formula,
+                    outputVariableName: result.outputVariableName,
+                    valueAttribute: '',
+                    staticValue: undefined,
+                    labelAttribute: undefined,
+                    queryMode: undefined,
+                    queryValueField: undefined,
+                    queryCategoryField: undefined,
+                    queryCategoryValue: undefined,
+                    prefix: result.prefix,
+                    suffix: result.suffix,
+                    trend: result.trend,
+                    comparisonText: result.comparisonText,
+                    filters: undefined
+                };
+            }
+            else if (result.dataSourceType === 'static') {
                 return {
                     ...widget,
+                    valueMode: undefined,
+                    formula: undefined,
+                    outputVariableName: result.outputVariableName,
                     dataSource: { type: 'static' },
                     valueAttribute: '',
                     staticValue: result.staticValue,
@@ -28475,6 +29066,7 @@ function registerDefaultWidgets(registry) {
                     prefix: result.prefix,
                     suffix: result.suffix,
                     trend: result.trend,
+                    comparisonText: result.comparisonText,
                     filters: undefined
                 };
             }
@@ -28490,6 +29082,9 @@ function registerDefaultWidgets(registry) {
                 };
                 return {
                     ...widget,
+                    valueMode: undefined,
+                    formula: undefined,
+                    outputVariableName: result.outputVariableName,
                     dataSource,
                     valueAttribute: '',
                     staticValue: undefined,
@@ -28500,6 +29095,7 @@ function registerDefaultWidgets(registry) {
                     prefix: result.prefix,
                     suffix: result.suffix,
                     trend: result.trend,
+                    comparisonText: result.comparisonText,
                     filters
                 };
             }
@@ -28507,6 +29103,9 @@ function registerDefaultWidgets(registry) {
                 // Create RuntimeEntityDataSource (default behavior)
                 return {
                     ...widget,
+                    valueMode: undefined,
+                    formula: undefined,
+                    outputVariableName: result.outputVariableName,
                     dataSource: createDataSource(result, false),
                     valueAttribute: result.valueAttribute,
                     labelAttribute: result.labelAttribute,
@@ -28518,6 +29117,7 @@ function registerDefaultWidgets(registry) {
                     prefix: result.prefix,
                     suffix: result.suffix,
                     trend: result.trend,
+                    comparisonText: result.comparisonText,
                     filters
                 };
             }
@@ -28549,7 +29149,11 @@ function registerDefaultWidgets(registry) {
                     suffix: widget.suffix,
                     icon: widget.icon,
                     trend: widget.trend,
+                    comparisonText: widget.comparisonText,
                     staticValue: widget.staticValue,
+                    valueMode: widget.valueMode,
+                    formula: widget.formula,
+                    outputVariableName: widget.outputVariableName,
                     queryMode: widget.queryMode,
                     queryValueField: widget.queryValueField,
                     queryCategoryField: widget.queryCategoryField,
@@ -28584,11 +29188,14 @@ function registerDefaultWidgets(registry) {
                     dataSource,
                     valueAttribute: '',
                     staticValue: config['staticValue'],
+                    valueMode: config['valueMode'] === 'formula' ? 'formula' : undefined,
+                    formula: config['formula'],
                     prefix: config['prefix'],
                     suffix: config['suffix'],
                     icon: config['icon'],
                     trend: config['trend'],
-                    comparisonText: config['comparisonText']
+                    comparisonText: config['comparisonText'],
+                    outputVariableName: config['outputVariableName']
                 };
             }
             if (dataSource.type === 'persistentQuery') {
@@ -28608,6 +29215,7 @@ function registerDefaultWidgets(registry) {
                     icon: config['icon'],
                     trend: config['trend'],
                     comparisonText: config['comparisonText'],
+                    outputVariableName: config['outputVariableName'],
                     filters: config['filters']
                 };
             }
@@ -28623,6 +29231,7 @@ function registerDefaultWidgets(registry) {
                 icon: config['icon'],
                 trend: config['trend'],
                 comparisonText: config['comparisonText'],
+                outputVariableName: config['outputVariableName'],
                 filters: config['filters']
             };
         }