@meshmakers/octo-ui 3.3.850 → 3.3.870

package/fesm2022/meshmakers-octo-ui.mjs

@@ -18,11 +18,11 @@ import { GridModule } from '@progress/kendo-angular-grid';
 import * as i5$1 from '@progress/kendo-angular-icons';
 import { IconsModule, SVGIconModule, SVGIconComponent } from '@progress/kendo-angular-icons';
 import * as i5 from '@progress/kendo-angular-inputs';
-import { InputsModule, TextBoxModule, KENDO_INPUTS } from '@progress/kendo-angular-inputs';
-import { searchIcon, sortAscSmallIcon, sortDescSmallIcon, filterClearIcon, chevronRightIcon, chevronDownIcon, downloadIcon, fileIcon, folderIcon, calendarIcon, checkboxCheckedIcon, listUnorderedIcon, arrowRightIcon, arrowLeftIcon, chevronDoubleRightIcon, chevronDoubleLeftIcon, arrowUpIcon, arrowDownIcon, pencilIcon, trashIcon, copyIcon, folderMoreIcon, folderOpenIcon, gearIcon, plusIcon, minusIcon, dollarIcon, infoCircleIcon, eyeIcon, hyperlinkOpenIcon, arrowRotateCcwIcon, locationsIcon, arrowRotateCwIcon, xIcon } from '@progress/kendo-svg-icons';
+import { InputsModule, TextBoxModule, KENDO_INPUTS, SwitchModule } from '@progress/kendo-angular-inputs';
+import { searchIcon, sortAscSmallIcon, sortDescSmallIcon, filterClearIcon, fileIcon, folderIcon, calendarIcon, checkboxCheckedIcon, listUnorderedIcon, chevronRightIcon, chevronDownIcon, downloadIcon, windowIcon, arrowRightIcon, arrowLeftIcon, chevronDoubleRightIcon, chevronDoubleLeftIcon, arrowUpIcon, arrowDownIcon, pencilIcon, trashIcon, copyIcon, folderMoreIcon, folderOpenIcon, gearIcon, plusIcon, minusIcon, dollarIcon, hyperlinkOpenIcon, infoCircleIcon, eyeIcon, arrowRotateCcwIcon, locationsIcon, arrowRotateCwIcon, xIcon, checkCircleIcon, exclamationCircleIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import { Subject, firstValueFrom, Subscription, of, forkJoin, takeUntil as takeUntil$1, catchError as catchError$1, map as map$1, defer, from, finalize, switchMap as switchMap$1, startWith } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, switchMap, tap, catchError, takeUntil } from 'rxjs/operators';
-import { LoaderModule } from '@progress/kendo-angular-indicators';
+import { LoaderModule, BadgeModule } from '@progress/kendo-angular-indicators';
 import { isCompositeFilterDescriptor } from '@progress/kendo-data-query';
 import { TreeItemDataTyped } from '@meshmakers/shared-services';
 import * as i1$3 from 'apollo-angular';
@@ -1476,6 +1476,492 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Content component for displaying Record and RecordArray attribute values.
+ * Designed to be hosted inside a Kendo Window opened via `WindowService.open()`
+ * — this guarantees the window is mounted at the application root (escaping
+ * any tile/widget stacking context) and is fully resizable, draggable,
+ * minimizable and maximizable like the other dialogs in the studio.
+ *
+ * Inputs are set on the component instance after the window is created:
+ *   const ref = windowService.open({ content: RecordDetailDialogComponent, ... });
+ *   const c = ref.content.instance as RecordDetailDialogComponent;
+ *   c.attributeName = ...; c.value = ...; c.type = ...;
+ */
+class RecordDetailDialogComponent {
+    attributeName = 'Record';
+    value;
+    type = AttributeValueTypeDto.RecordDto;
+    /**
+     * Emitted when the user-visible state changes in a way the host might want
+     * to react to. Currently unused for closing — the host listens to
+     * `WindowRef.result` for that.
+     */
+    closed = new EventEmitter();
+    singleRecordProperties = [];
+    recordItems = [];
+    searchTerm = '';
+    // Icons
+    fileIcon = fileIcon;
+    folderIcon = folderIcon;
+    calendarIcon = calendarIcon;
+    checkboxCheckedIcon = checkboxCheckedIcon;
+    listUnorderedIcon = listUnorderedIcon;
+    chevronRightIcon = chevronRightIcon;
+    chevronDownIcon = chevronDownIcon;
+    get isRecordArray() {
+        return this.type === AttributeValueTypeDto.RecordArrayDto;
+    }
+    /**
+     * Compute the title text for the host window. The host reads this via
+     * the component instance after construction.
+     */
+    get dialogTitle() {
+        const name = this.formatAttributeName(this.attributeName);
+        if (this.isRecordArray && Array.isArray(this.value)) {
+            return `${name} (${this.value.length} record${this.value.length !== 1 ? 's' : ''})`;
+        }
+        return name;
+    }
+    ngOnInit() {
+        this.recompute();
+    }
+    /**
+     * Recompute derived state. Public so the host can call it after late
+     * input assignment (WindowService.open() instantiates the component
+     * before inputs can be set on its instance).
+     */
+    recompute() {
+        if (this.isRecordArray && Array.isArray(this.value)) {
+            this.recordItems = this.value.map((item, originalIndex) => ({
+                originalIndex,
+                label: this.getRecordLabel(item),
+                properties: this.toRecordProperties(item),
+                expanded: true
+            }));
+            this.singleRecordProperties = [];
+        }
+        else {
+            this.singleRecordProperties = this.toRecordProperties(this.value);
+            this.recordItems = [];
+        }
+        this.searchTerm = '';
+    }
+    /**
+     * Records visible after applying the search filter. With no search term
+     * this is just the full list. The matcher checks the record's label and
+     * every property's key + formatted value (case-insensitive substring).
+     */
+    get visibleRecords() {
+        const q = this.searchTerm.trim().toLowerCase();
+        if (!q)
+            return this.recordItems;
+        return this.recordItems.filter(r => this.recordMatches(r, q));
+    }
+    /**
+     * When search is active, force matching records open so their content is
+     * visible without an extra click. Outside search mode the user's manual
+     * expanded state wins.
+     */
+    isRecordExpanded(record) {
+        if (this.searchTerm.trim())
+            return true;
+        return record.expanded;
+    }
+    onSearchInput(event) {
+        this.searchTerm = event.target.value;
+    }
+    clearSearch() {
+        this.searchTerm = '';
+    }
+    recordMatches(record, q) {
+        if (record.label && record.label.toLowerCase().includes(q))
+            return true;
+        for (const p of record.properties) {
+            if (p.key.toLowerCase().includes(q))
+                return true;
+            if (p.formattedValue.toLowerCase().includes(q))
+                return true;
+        }
+        return false;
+    }
+    toggleRecord(index) {
+        const item = this.recordItems[index];
+        if (item) {
+            item.expanded = !item.expanded;
+        }
+    }
+    expandAll() {
+        for (const item of this.recordItems) {
+            item.expanded = true;
+        }
+    }
+    collapseAll() {
+        for (const item of this.recordItems) {
+            item.expanded = false;
+        }
+    }
+    getTypeIcon(type) {
+        switch (type) {
+            case AttributeValueTypeDto.BooleanDto:
+                return checkboxCheckedIcon;
+            case AttributeValueTypeDto.DateTimeDto:
+            case AttributeValueTypeDto.DateTimeOffsetDto:
+                return calendarIcon;
+            case AttributeValueTypeDto.RecordDto:
+            case AttributeValueTypeDto.RecordArrayDto:
+                return folderIcon;
+            case AttributeValueTypeDto.StringArrayDto:
+            case AttributeValueTypeDto.IntegerArrayDto:
+            case AttributeValueTypeDto.IntArrayDto:
+                return listUnorderedIcon;
+            default:
+                return fileIcon;
+        }
+    }
+    formatTypeName(type) {
+        return type.replace('_DTO', '').replace('DTO', '').replace('_', ' ');
+    }
+    toRecordProperties(obj) {
+        const props = this.getObjectProperties(obj);
+        return props.map(prop => {
+            const type = this.inferType(prop.value);
+            return {
+                key: prop.key,
+                value: prop.value,
+                formattedValue: this.formatValue(prop.value, type),
+                type
+            };
+        });
+    }
+    formatValue(value, type) {
+        if (value === null)
+            return '<null>';
+        if (value === undefined)
+            return '<undefined>';
+        if (value === '')
+            return '<empty>';
+        switch (type) {
+            case AttributeValueTypeDto.BooleanDto:
+                return value ? 'True' : 'False';
+            case AttributeValueTypeDto.DateTimeDto:
+            case AttributeValueTypeDto.DateTimeOffsetDto:
+                try {
+                    const date = value instanceof Date ? value : new Date(String(value));
+                    return isNaN(date.getTime()) ? String(value) : date.toLocaleString();
+                }
+                catch {
+                    return String(value);
+                }
+            case AttributeValueTypeDto.RecordDto:
+            case AttributeValueTypeDto.RecordArrayDto:
+                return JSON.stringify(value, null, 2);
+            case AttributeValueTypeDto.DoubleDto: {
+                const num = Number(value);
+                return isNaN(num) ? String(value) : num.toFixed(2);
+            }
+            default:
+                if (Array.isArray(value)) {
+                    return value.length <= 5 ? `[${value.join(', ')}]` : `[${value.slice(0, 5).join(', ')}, ... +${value.length - 5} more]`;
+                }
+                return String(value);
+        }
+    }
+    getRecordLabel(obj) {
+        if (typeof obj !== 'object' || obj === null)
+            return null;
+        const record = obj;
+        // OctoMesh RtRecord format
+        if ('ckRecordId' in record) {
+            return String(record['ckRecordId']);
+        }
+        // Try common name fields
+        for (const key of ['name', 'Name', 'label', 'Label', 'id', 'Id']) {
+            if (key in record && record[key] != null) {
+                return String(record[key]);
+            }
+        }
+        return null;
+    }
+    getObjectProperties(obj) {
+        if (typeof obj !== 'object' || obj === null) {
+            return [];
+        }
+        // OctoMesh RtRecord format: { ckRecordId, attributes: [{ attributeName, value }] }
+        const maybeRecord = obj;
+        if ('ckRecordId' in maybeRecord && 'attributes' in maybeRecord && Array.isArray(maybeRecord['attributes'])) {
+            return maybeRecord['attributes'].map(attr => ({
+                key: attr.attributeName || 'unknown',
+                value: attr.value
+            }));
+        }
+        return Object.keys(maybeRecord).map(key => ({
+            key,
+            value: maybeRecord[key]
+        }));
+    }
+    inferType(value) {
+        if (value === null || value === undefined)
+            return AttributeValueTypeDto.StringDto;
+        if (typeof value === 'boolean')
+            return AttributeValueTypeDto.BooleanDto;
+        if (typeof value === 'number') {
+            return Number.isInteger(value) ? AttributeValueTypeDto.IntegerDto : AttributeValueTypeDto.DoubleDto;
+        }
+        if (typeof value === 'string') {
+            if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value))
+                return AttributeValueTypeDto.DateTimeDto;
+            return AttributeValueTypeDto.StringDto;
+        }
+        if (Array.isArray(value)) {
+            if (value.length > 0 && typeof value[0] === 'object')
+                return AttributeValueTypeDto.RecordArrayDto;
+            if (value.length > 0 && typeof value[0] === 'string')
+                return AttributeValueTypeDto.StringArrayDto;
+            if (value.length > 0 && typeof value[0] === 'number')
+                return AttributeValueTypeDto.IntegerArrayDto;
+            return AttributeValueTypeDto.StringArrayDto;
+        }
+        if (typeof value === 'object')
+            return AttributeValueTypeDto.RecordDto;
+        return AttributeValueTypeDto.StringDto;
+    }
+    formatAttributeName(name) {
+        return name
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/^./, str => str.toUpperCase())
+            .trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RecordDetailDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RecordDetailDialogComponent, isStandalone: true, selector: "mm-record-detail-dialog", inputs: { attributeName: "attributeName", value: "value", type: "type" }, outputs: { closed: "closed" }, ngImport: i0, template: `
+    <div class="record-detail-content">
+      @if (isRecordArray && recordItems.length > 1) {
+        <div class="record-toolbar">
+          <input
+            type="text"
+            class="search-input"
+            [value]="searchTerm"
+            (input)="onSearchInput($event)"
+            placeholder="Search records, keys, values…"
+            aria-label="Search" />
+          @if (searchTerm) {
+            <button
+              type="button"
+              class="search-clear"
+              (click)="clearSearch()"
+              aria-label="Clear search"
+              title="Clear search">×</button>
+            <span class="match-count">
+              {{ visibleRecords.length }} of {{ recordItems.length }}
+            </span>
+          }
+          <span class="toolbar-spacer"></span>
+          <button
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronDownIcon"
+            (click)="expandAll()">
+            Expand All
+          </button>
+          <button
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronRightIcon"
+            (click)="collapseAll()">
+            Collapse All
+          </button>
+        </div>
+      }
+
+      @if (isRecordArray && searchTerm && visibleRecords.length === 0) {
+        <div class="no-matches">No records match "{{ searchTerm }}".</div>
+      } @else if (isRecordArray && visibleRecords.length > 0) {
+        <div class="record-array-list">
+          @for (record of visibleRecords; track record.originalIndex) {
+            <div class="record-array-item">
+              <div class="array-item-header" (click)="toggleRecord(record.originalIndex)">
+                <kendo-svgicon
+                  [icon]="isRecordExpanded(record) ? chevronDownIcon : chevronRightIcon"
+                  class="record-chevron">
+                </kendo-svgicon>
+                <span class="array-item-index">[{{ record.originalIndex }}]</span>
+                @if (record.label) {
+                  <span class="array-item-label">{{ record.label }}</span>
+                }
+                <span class="array-item-summary">
+                  {{ record.properties.length }} propert{{ record.properties.length === 1 ? 'y' : 'ies' }}
+                </span>
+              </div>
+              @if (isRecordExpanded(record)) {
+                <kendo-grid [data]="record.properties" [resizable]="true" scrollable="none" class="detail-grid">
+                  <kendo-grid-column field="key" title="Property" [width]="180">
+                    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+                      <div class="property-name-cell">
+                        <kendo-svgicon [icon]="getTypeIcon(dataItem.type)" class="type-icon"></kendo-svgicon>
+                        <span class="property-name">{{ dataItem.key }}</span>
+                      </div>
+                    </ng-template>
+                  </kendo-grid-column>
+                  <kendo-grid-column field="formattedValue" title="Value">
+                    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+                      <span class="property-value" [title]="dataItem.formattedValue">{{ dataItem.formattedValue }}</span>
+                    </ng-template>
+                  </kendo-grid-column>
+                  <kendo-grid-column field="type" title="Type" [width]="120">
+                    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+                      <span class="type-badge">{{ formatTypeName(dataItem.type) }}</span>
+                    </ng-template>
+                  </kendo-grid-column>
+                </kendo-grid>
+              }
+            </div>
+          }
+        </div>
+      } @else {
+        <kendo-grid [data]="singleRecordProperties" [resizable]="true" class="detail-grid">
+          <kendo-grid-column field="key" title="Property" [width]="180">
+            <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+              <div class="property-name-cell">
+                <kendo-svgicon [icon]="getTypeIcon(dataItem.type)" class="type-icon"></kendo-svgicon>
+                <span class="property-name">{{ dataItem.key }}</span>
+              </div>
+            </ng-template>
+          </kendo-grid-column>
+          <kendo-grid-column field="formattedValue" title="Value">
+            <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+              <span class="property-value" [title]="dataItem.formattedValue">{{ dataItem.formattedValue }}</span>
+            </ng-template>
+          </kendo-grid-column>
+          <kendo-grid-column field="type" title="Type" [width]="120">
+            <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+              <span class="type-badge">{{ formatTypeName(dataItem.type) }}</span>
+            </ng-template>
+          </kendo-grid-column>
+        </kendo-grid>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}.record-detail-content{display:flex;flex-direction:column;height:100%;gap:8px;padding:12px 16px;box-sizing:border-box;overflow:hidden}.record-toolbar{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-bottom:4px;border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.toolbar-spacer{flex:1}.search-input{flex:0 1 220px;min-width:0;padding:4px 8px;font:inherit;color:var(--kendo-color-on-app-surface, #1d1b20);background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 6%,transparent);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:3px;outline:none}.search-input::placeholder{color:var(--kendo-color-subtle, #6c757d)}.search-input:focus{border-color:var(--kendo-color-primary, #0d6efd)}.search-clear{flex-shrink:0;width:22px;height:22px;padding:0;background:transparent;border:none;cursor:pointer;font-size:1.1em;line-height:1;color:var(--kendo-color-subtle, #6c757d);border-radius:3px}.search-clear:hover{color:var(--kendo-color-on-app-surface, #1d1b20);background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 8%,transparent)}.match-count{flex-shrink:0;font-size:.8em;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.no-matches{padding:16px;text-align:center;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.record-array-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:0}.record-array-item{display:block;flex-shrink:0;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;overflow:hidden}.array-item-header{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--kendo-color-surface-alt, #f8f9fa);transition:background-color .15s ease}.array-item-header:hover{background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 6%,transparent)}.record-chevron{width:14px;height:14px;color:var(--kendo-color-subtle);flex-shrink:0}.array-item-index{font-family:Roboto Mono,monospace;font-size:.8em;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.array-item-label{font-size:.85em;color:var(--kendo-color-on-app-surface, #1d1b20);font-weight:500}.array-item-summary{margin-left:auto;font-size:.75em;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.detail-grid{display:block!important;height:auto!important;border:none;border-top:1px solid var(--kendo-color-border, #dee2e6)}:host ::ng-deep .detail-grid .k-grid-aria-root{height:auto}.property-name-cell{display:flex;align-items:center;gap:8px}.type-icon{width:16px;height:16px;opacity:.7}.property-name{font-weight:500}.property-value{word-break:break-word;white-space:pre-wrap}.type-badge{font-size:.75em;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500;background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 12%,transparent);color:var(--kendo-color-on-app-surface, #1d1b20)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: i3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "component", type: i3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RecordDetailDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-record-detail-dialog', standalone: true, imports: [CommonModule, ButtonModule, GridModule, SVGIconModule], template: `
+    <div class="record-detail-content">
+      @if (isRecordArray && recordItems.length > 1) {
+        <div class="record-toolbar">
+          <input
+            type="text"
+            class="search-input"
+            [value]="searchTerm"
+            (input)="onSearchInput($event)"
+            placeholder="Search records, keys, values…"
+            aria-label="Search" />
+          @if (searchTerm) {
+            <button
+              type="button"
+              class="search-clear"
+              (click)="clearSearch()"
+              aria-label="Clear search"
+              title="Clear search">×</button>
+            <span class="match-count">
+              {{ visibleRecords.length }} of {{ recordItems.length }}
+            </span>
+          }
+          <span class="toolbar-spacer"></span>
+          <button
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronDownIcon"
+            (click)="expandAll()">
+            Expand All
+          </button>
+          <button
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronRightIcon"
+            (click)="collapseAll()">
+            Collapse All
+          </button>
+        </div>
+      }
+
+      @if (isRecordArray && searchTerm && visibleRecords.length === 0) {
+        <div class="no-matches">No records match "{{ searchTerm }}".</div>
+      } @else if (isRecordArray && visibleRecords.length > 0) {
+        <div class="record-array-list">
+          @for (record of visibleRecords; track record.originalIndex) {
+            <div class="record-array-item">
+              <div class="array-item-header" (click)="toggleRecord(record.originalIndex)">
+                <kendo-svgicon
+                  [icon]="isRecordExpanded(record) ? chevronDownIcon : chevronRightIcon"
+                  class="record-chevron">
+                </kendo-svgicon>
+                <span class="array-item-index">[{{ record.originalIndex }}]</span>
+                @if (record.label) {
+                  <span class="array-item-label">{{ record.label }}</span>
+                }
+                <span class="array-item-summary">
+                  {{ record.properties.length }} propert{{ record.properties.length === 1 ? 'y' : 'ies' }}
+                </span>
+              </div>
+              @if (isRecordExpanded(record)) {
+                <kendo-grid [data]="record.properties" [resizable]="true" scrollable="none" class="detail-grid">
+                  <kendo-grid-column field="key" title="Property" [width]="180">
+                    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+                      <div class="property-name-cell">
+                        <kendo-svgicon [icon]="getTypeIcon(dataItem.type)" class="type-icon"></kendo-svgicon>
+                        <span class="property-name">{{ dataItem.key }}</span>
+                      </div>
+                    </ng-template>
+                  </kendo-grid-column>
+                  <kendo-grid-column field="formattedValue" title="Value">
+                    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+                      <span class="property-value" [title]="dataItem.formattedValue">{{ dataItem.formattedValue }}</span>
+                    </ng-template>
+                  </kendo-grid-column>
+                  <kendo-grid-column field="type" title="Type" [width]="120">
+                    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+                      <span class="type-badge">{{ formatTypeName(dataItem.type) }}</span>
+                    </ng-template>
+                  </kendo-grid-column>
+                </kendo-grid>
+              }
+            </div>
+          }
+        </div>
+      } @else {
+        <kendo-grid [data]="singleRecordProperties" [resizable]="true" class="detail-grid">
+          <kendo-grid-column field="key" title="Property" [width]="180">
+            <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+              <div class="property-name-cell">
+                <kendo-svgicon [icon]="getTypeIcon(dataItem.type)" class="type-icon"></kendo-svgicon>
+                <span class="property-name">{{ dataItem.key }}</span>
+              </div>
+            </ng-template>
+          </kendo-grid-column>
+          <kendo-grid-column field="formattedValue" title="Value">
+            <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+              <span class="property-value" [title]="dataItem.formattedValue">{{ dataItem.formattedValue }}</span>
+            </ng-template>
+          </kendo-grid-column>
+          <kendo-grid-column field="type" title="Type" [width]="120">
+            <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+              <span class="type-badge">{{ formatTypeName(dataItem.type) }}</span>
+            </ng-template>
+          </kendo-grid-column>
+        </kendo-grid>
+      }
+    </div>
+  `, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}.record-detail-content{display:flex;flex-direction:column;height:100%;gap:8px;padding:12px 16px;box-sizing:border-box;overflow:hidden}.record-toolbar{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-bottom:4px;border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.toolbar-spacer{flex:1}.search-input{flex:0 1 220px;min-width:0;padding:4px 8px;font:inherit;color:var(--kendo-color-on-app-surface, #1d1b20);background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 6%,transparent);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:3px;outline:none}.search-input::placeholder{color:var(--kendo-color-subtle, #6c757d)}.search-input:focus{border-color:var(--kendo-color-primary, #0d6efd)}.search-clear{flex-shrink:0;width:22px;height:22px;padding:0;background:transparent;border:none;cursor:pointer;font-size:1.1em;line-height:1;color:var(--kendo-color-subtle, #6c757d);border-radius:3px}.search-clear:hover{color:var(--kendo-color-on-app-surface, #1d1b20);background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 8%,transparent)}.match-count{flex-shrink:0;font-size:.8em;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.no-matches{padding:16px;text-align:center;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.record-array-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:0}.record-array-item{display:block;flex-shrink:0;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;overflow:hidden}.array-item-header{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--kendo-color-surface-alt, #f8f9fa);transition:background-color .15s ease}.array-item-header:hover{background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 6%,transparent)}.record-chevron{width:14px;height:14px;color:var(--kendo-color-subtle);flex-shrink:0}.array-item-index{font-family:Roboto Mono,monospace;font-size:.8em;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.array-item-label{font-size:.85em;color:var(--kendo-color-on-app-surface, #1d1b20);font-weight:500}.array-item-summary{margin-left:auto;font-size:.75em;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.detail-grid{display:block!important;height:auto!important;border:none;border-top:1px solid var(--kendo-color-border, #dee2e6)}:host ::ng-deep .detail-grid .k-grid-aria-root{height:auto}.property-name-cell{display:flex;align-items:center;gap:8px}.type-icon{width:16px;height:16px;opacity:.7}.property-name{font-weight:500}.property-value{word-break:break-word;white-space:pre-wrap}.type-badge{font-size:.75em;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500;background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 12%,transparent);color:var(--kendo-color-on-app-surface, #1d1b20)}\n"] }]
+        }], propDecorators: { attributeName: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
 /**
  * Component for displaying property values with appropriate formatting
  */
@@ -1483,11 +1969,13 @@ class PropertyValueDisplayComponent {
     value;
     type = AttributeValueTypeDto.StringDto;
     displayMode = PropertyDisplayMode.Text;
+    attributeName = 'Record';
     /** Emitted when a binary download is requested */
     binaryDownload = new EventEmitter();
     // Expansion state
     isExpanded = false;
-    // Pre-computed template properties (computed once in ngOnInit)
+    windowService = inject(WindowService);
+    // Pre-computed template properties — recomputed in ngOnInit and ngOnChanges so Kendo Grid row recycling (cell component reuse with new inputs) does not display stale values.
     expandableRecord = false;
     complexType = false;
     binaryLinkedWithDownload = false;
@@ -1499,13 +1987,33 @@ class PropertyValueDisplayComponent {
     binarySize = null;
     binaryContentType = null;
     formattedBinarySize = '';
+    // RecordArray table-mode state — used when the array is uniform enough to be
+    // displayed as a compact table (one row per record, columns = union of keys).
+    // Falls back to the per-item nested-property layout otherwise.
+    useRecordArrayTable = false;
+    recordArrayColumns = [];
+    recordArrayRows = [];
+    /** Hard cap so we don't render a horizontally-unmanageable table. */
+    static MAX_TABLE_COLUMNS = 12;
     PropertyDisplayMode = PropertyDisplayMode;
     AttributeValueTypeDto = AttributeValueTypeDto;
     Array = Array;
     chevronRightIcon = chevronRightIcon;
     chevronDownIcon = chevronDownIcon;
     downloadIcon = downloadIcon;
+    windowIcon = windowIcon;
     ngOnInit() {
+        this.recomputeDerivedValues();
+    }
+    ngOnChanges(changes) {
+        // Collapse any user-driven expansion carried over from a recycled cell
+        // when the underlying data changes; displayMode changes do not qualify.
+        if (changes['value'] || changes['type']) {
+            this.isExpanded = false;
+        }
+        this.recomputeDerivedValues();
+    }
+    recomputeDerivedValues() {
         this.expandableRecord = this.computeIsExpandableRecord();
         this.complexType = this.computeIsComplexType();
         this.binaryLinkedWithDownload = this.computeIsBinaryLinkedWithDownload();
@@ -1513,6 +2021,7 @@ class PropertyValueDisplayComponent {
         this.recordSummary = this.computeRecordSummary();
         this.typeIndicator = this.computeTypeIndicator();
         this.typeDescription = this.computeTypeDescription();
+        this.computeRecordArrayTable();
         if (this.binaryLinkedWithDownload) {
             const bv = this.value;
             this.binaryFilename = bv?.filename || null;
@@ -1520,6 +2029,12 @@ class PropertyValueDisplayComponent {
             this.binaryContentType = bv?.contentType || null;
             this.formattedBinarySize = this.formatFileSize(this.binarySize);
         }
+        else {
+            this.binaryFilename = null;
+            this.binarySize = null;
+            this.binaryContentType = null;
+            this.formattedBinarySize = '';
+        }
     }
     computeFormattedValue() {
         if (this.value === null) {
@@ -1565,6 +2080,44 @@ class PropertyValueDisplayComponent {
             || this.type === AttributeValueTypeDto.RecordArrayDto;
         return isRecordType && this.value != null && typeof this.value === 'object';
     }
+    /**
+     * For RecordArray values, attempt to render as a compact table when the
+     * records share enough structure: ≥ 2 items, every item is object-like, and
+     * the union of keys stays within MAX_TABLE_COLUMNS. Columns are ordered by
+     * first appearance. Rows are stored as plain objects keyed by column name
+     * so the template can do `row[col]` lookups cheaply.
+     */
+    computeRecordArrayTable() {
+        this.useRecordArrayTable = false;
+        this.recordArrayColumns = [];
+        this.recordArrayRows = [];
+        if (this.type !== AttributeValueTypeDto.RecordArrayDto)
+            return;
+        if (!Array.isArray(this.value) || this.value.length < 2)
+            return;
+        if (!this.value.every(item => item != null && typeof item === 'object'))
+            return;
+        const cols = [];
+        const seen = new Set();
+        const rows = [];
+        for (const item of this.value) {
+            const props = this.getObjectProperties(item);
+            const row = {};
+            for (const { key, value } of props) {
+                if (!seen.has(key)) {
+                    seen.add(key);
+                    cols.push(key);
+                }
+                row[key] = value;
+            }
+            rows.push(row);
+        }
+        if (cols.length === 0 || cols.length > PropertyValueDisplayComponent.MAX_TABLE_COLUMNS)
+            return;
+        this.recordArrayColumns = cols;
+        this.recordArrayRows = rows;
+        this.useRecordArrayTable = true;
+    }
     computeIsComplexType() {
         const isComplexDataType = [
             AttributeValueTypeDto.RecordDto,
@@ -1700,6 +2253,39 @@ class PropertyValueDisplayComponent {
     toggleExpansion() {
         this.isExpanded = !this.isExpanded;
     }
+    /**
+     * Open the record-detail viewer in a Kendo Window. Using `WindowService.open`
+     * (instead of an inline `<kendo-window>`) is what makes the window mount at
+     * the application root with proper viewport positioning. An inline window
+     * inherits its tile's `position: relative` ancestor and ends up anchored
+     * inside that tile's box rather than on the meshboard surface.
+     */
+    openDetailDialog(event) {
+        event.stopPropagation();
+        const ref = this.windowService.open({
+            title: this.computeDialogTitle(),
+            content: RecordDetailDialogComponent,
+            width: 720,
+            height: 560,
+            minWidth: 420,
+            minHeight: 280,
+        });
+        const instance = ref.content.instance;
+        instance.attributeName = this.attributeName;
+        instance.value = this.value;
+        instance.type = this.type;
+        instance.recompute();
+    }
+    computeDialogTitle() {
+        const formatted = this.attributeName
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/^./, s => s.toUpperCase())
+            .trim();
+        if (this.type === AttributeValueTypeDto.RecordArrayDto && Array.isArray(this.value)) {
+            return `${formatted} (${this.value.length} record${this.value.length !== 1 ? 's' : ''})`;
+        }
+        return formatted;
+    }
     /**
      * Compute summary text for record header
      */
@@ -1829,7 +2415,7 @@ class PropertyValueDisplayComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PropertyValueDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PropertyValueDisplayComponent, isStandalone: true, selector: "mm-property-value-display", inputs: { value: "value", type: "type", displayMode: "displayMode" }, outputs: { binaryDownload: "binaryDownload" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PropertyValueDisplayComponent, isStandalone: true, selector: "mm-property-value-display", inputs: { value: "value", type: "type", displayMode: "displayMode", attributeName: "attributeName" }, outputs: { binaryDownload: "binaryDownload" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="property-value-display" [ngClass]="'type-' + type.toLowerCase()">
 
       @if (expandableRecord) {
@@ -1841,6 +2427,15 @@ class PropertyValueDisplayComponent {
               class="expand-icon">
             </kendo-svgicon>
             <span class="record-summary">{{ recordSummary }}</span>
+            <button
+              kendoButton
+              size="small"
+              fillMode="flat"
+              [svgIcon]="windowIcon"
+              title="Show details"
+              class="detail-button"
+              (click)="openDetailDialog($event)">
+            </button>
             <span class="type-indicator" [title]="typeDescription">
               {{ typeIndicator }}
             </span>
@@ -1849,23 +2444,58 @@ class PropertyValueDisplayComponent {
           <!-- Expanded Content -->
           @if (isExpanded) {
             <div class="record-content">
-              @if (type === AttributeValueTypeDto.RecordArrayDto && Array.isArray(value)) {
-                @for (item of value; track $index) {
-                  <div class="array-item">
-                    <span class="array-index">[{{ $index }}]</span>
-                    <div class="nested-properties">
-                      @for (prop of getObjectProperties(item); track prop.key) {
-                        <div class="nested-property">
-                          <span class="property-key">{{ prop.key }}:</span>
-                          <mm-property-value-display
-                            [value]="prop.value"
-                            [type]="getPropertyType(prop.value)">
-                          </mm-property-value-display>
-                        </div>
+              @if (useRecordArrayTable) {
+                <!-- Uniform record array → compact table with sticky header -->
+                <div class="record-table-container">
+                  <table class="record-table">
+                    <thead>
+                      <tr>
+                        <th class="row-index">#</th>
+                        @for (col of recordArrayColumns; track col) {
+                          <th>{{ col }}</th>
+                        }
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (row of recordArrayRows; track $index) {
+                        <tr>
+                          <td class="row-index">{{ $index }}</td>
+                          @for (col of recordArrayColumns; track col) {
+                            <td>
+                              @let v = row[col];
+                              @if (v !== null && v !== undefined) {
+                                <mm-property-value-display
+                                  [value]="v"
+                                  [type]="getPropertyType(v)">
+                                </mm-property-value-display>
+                              }
+                            </td>
+                          }
+                        </tr>
                       }
+                    </tbody>
+                  </table>
+                </div>
+              } @else if (type === AttributeValueTypeDto.RecordArrayDto && Array.isArray(value)) {
+                <!-- Heterogeneous array (or single item) — fallback to per-item nesting, capped height -->
+                <div class="record-array-list">
+                  @for (item of value; track $index) {
+                    <div class="array-item">
+                      <span class="array-index">[{{ $index }}]</span>
+                      <div class="nested-properties">
+                        @for (prop of getObjectProperties(item); track prop.key) {
+                          <div class="nested-property">
+                            <span class="property-key">{{ prop.key }}:</span>
+                            <mm-property-value-display
+                              [value]="prop.value"
+                              [type]="getPropertyType(prop.value)">
+                            </mm-property-value-display>
+                          </div>
+                        }
+                      </div>
                     </div>
-                  </div>
-                }
+                  }
+                </div>
               } @else {
                 <div class="nested-properties">
                   @for (prop of getObjectProperties(value); track prop.key) {
@@ -1926,8 +2556,9 @@ class PropertyValueDisplayComponent {
           </span>
         }
       }
+
     </div>
-  `, isInline: true, styles: [".property-value-display{display:flex;align-items:flex-start;gap:8px;width:100%;min-width:0}.text-display,.default-display{word-break:break-word;white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.json-display{font-family:Roboto Mono,monospace;font-size:.8em;white-space:pre-wrap;word-break:break-word;margin:0;flex:1;min-width:0}.type-indicator{font-family:Roboto Mono,monospace;font-size:.7em;padding:1px 5px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);white-space:nowrap;flex-shrink:0}.expandable-record{width:100%}.record-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 0;border-radius:3px;transition:background-color .15s ease}.record-header:hover{background-color:var(--kendo-color-base-subtle, rgba(0,0,0,.04))}.expand-icon{flex-shrink:0;width:14px;height:14px;color:var(--kendo-color-subtle)}.record-summary{color:var(--kendo-color-subtle);font-size:.85em;font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-content{margin-left:20px;padding-left:8px;border-left:1px solid var(--kendo-color-border, #dee2e6)}.array-item{margin:4px 0}.array-index{font-family:Roboto Mono,monospace;font-size:.8em;color:var(--kendo-color-subtle)}.nested-properties{margin-left:8px}.nested-property{display:flex;align-items:flex-start;gap:8px;padding:2px 0}.property-key{font-weight:500;white-space:nowrap;flex-shrink:0;color:var(--kendo-color-subtle);font-size:.85em}.binary-linked-display{display:flex;align-items:center;gap:12px;width:100%}.binary-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.filename{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.85em;color:var(--kendo-color-subtle);flex-shrink:0}.content-type{font-size:.75em;padding:2px 6px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: PropertyValueDisplayComponent, selector: "mm-property-value-display", inputs: ["value", "type", "displayMode"], outputs: ["binaryDownload"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".property-value-display{display:flex;align-items:flex-start;gap:8px;width:100%;min-width:0}.text-display,.default-display{word-break:break-word;white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.json-display{font-family:Roboto Mono,monospace;font-size:.8em;white-space:pre-wrap;word-break:break-word;margin:0;flex:1;min-width:0}.type-indicator{font-family:Roboto Mono,monospace;font-size:.7em;padding:1px 5px;background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 12%,transparent);border-radius:3px;color:var(--kendo-color-on-app-surface, #1d1b20);white-space:nowrap;flex-shrink:0}.expandable-record{width:100%}.record-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 0;border-radius:3px;transition:background-color .15s ease}.record-header:hover{background-color:var(--kendo-color-base-subtle, rgba(0,0,0,.04))}.expand-icon{flex-shrink:0;width:14px;height:14px;color:var(--kendo-color-subtle)}.record-summary{color:var(--kendo-color-subtle);font-size:.85em;font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detail-button{flex-shrink:0;opacity:.6;transition:opacity .15s ease}.detail-button:hover{opacity:1}.record-content{margin-left:20px;padding-left:8px;border-left:1px solid var(--kendo-color-border, #dee2e6)}.array-item{margin:4px 0}.array-index{font-family:Roboto Mono,monospace;font-size:.8em;color:var(--kendo-color-subtle)}.record-array-list{max-height:320px;overflow-y:auto}.record-table-container{max-height:320px;overflow:auto;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:3px;margin-top:4px}.record-table{width:100%;border-collapse:collapse;font-size:.85em;table-layout:auto}.record-table th{position:sticky;top:0;z-index:1;background:var(--kendo-color-surface-alt, #f8f9fa);color:var(--kendo-color-subtle);text-align:left;padding:4px 8px;border-bottom:1px solid var(--kendo-color-border, #dee2e6);font-weight:500;font-size:.85em;white-space:nowrap}.record-table td{padding:3px 8px;border-bottom:1px solid color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 8%,transparent);vertical-align:top;word-break:break-word}.record-table tr:last-child td{border-bottom:none}.record-table tr:hover td{background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 6%,transparent)}.record-table .row-index{color:var(--kendo-color-subtle);font-family:Roboto Mono,monospace;font-size:.85em;text-align:right;width:1px;white-space:nowrap}.nested-properties{margin-left:8px}.nested-property{display:flex;align-items:flex-start;gap:8px;padding:2px 0}.property-key{font-weight:500;white-space:nowrap;flex-shrink:0;color:var(--kendo-color-subtle);font-size:.85em}.binary-linked-display{display:flex;align-items:center;gap:12px;width:100%}.binary-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.filename{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.85em;color:var(--kendo-color-subtle);flex-shrink:0}.content-type{font-size:.75em;padding:2px 6px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: PropertyValueDisplayComponent, selector: "mm-property-value-display", inputs: ["value", "type", "displayMode", "attributeName"], outputs: ["binaryDownload"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PropertyValueDisplayComponent, decorators: [{
             type: Component,
@@ -1943,6 +2574,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
               class="expand-icon">
             </kendo-svgicon>
             <span class="record-summary">{{ recordSummary }}</span>
+            <button
+              kendoButton
+              size="small"
+              fillMode="flat"
+              [svgIcon]="windowIcon"
+              title="Show details"
+              class="detail-button"
+              (click)="openDetailDialog($event)">
+            </button>
             <span class="type-indicator" [title]="typeDescription">
               {{ typeIndicator }}
             </span>
@@ -1951,23 +2591,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           <!-- Expanded Content -->
           @if (isExpanded) {
             <div class="record-content">
-              @if (type === AttributeValueTypeDto.RecordArrayDto && Array.isArray(value)) {
-                @for (item of value; track $index) {
-                  <div class="array-item">
-                    <span class="array-index">[{{ $index }}]</span>
-                    <div class="nested-properties">
-                      @for (prop of getObjectProperties(item); track prop.key) {
-                        <div class="nested-property">
-                          <span class="property-key">{{ prop.key }}:</span>
-                          <mm-property-value-display
-                            [value]="prop.value"
-                            [type]="getPropertyType(prop.value)">
-                          </mm-property-value-display>
-                        </div>
+              @if (useRecordArrayTable) {
+                <!-- Uniform record array → compact table with sticky header -->
+                <div class="record-table-container">
+                  <table class="record-table">
+                    <thead>
+                      <tr>
+                        <th class="row-index">#</th>
+                        @for (col of recordArrayColumns; track col) {
+                          <th>{{ col }}</th>
+                        }
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (row of recordArrayRows; track $index) {
+                        <tr>
+                          <td class="row-index">{{ $index }}</td>
+                          @for (col of recordArrayColumns; track col) {
+                            <td>
+                              @let v = row[col];
+                              @if (v !== null && v !== undefined) {
+                                <mm-property-value-display
+                                  [value]="v"
+                                  [type]="getPropertyType(v)">
+                                </mm-property-value-display>
+                              }
+                            </td>
+                          }
+                        </tr>
                       }
+                    </tbody>
+                  </table>
+                </div>
+              } @else if (type === AttributeValueTypeDto.RecordArrayDto && Array.isArray(value)) {
+                <!-- Heterogeneous array (or single item) — fallback to per-item nesting, capped height -->
+                <div class="record-array-list">
+                  @for (item of value; track $index) {
+                    <div class="array-item">
+                      <span class="array-index">[{{ $index }}]</span>
+                      <div class="nested-properties">
+                        @for (prop of getObjectProperties(item); track prop.key) {
+                          <div class="nested-property">
+                            <span class="property-key">{{ prop.key }}:</span>
+                            <mm-property-value-display
+                              [value]="prop.value"
+                              [type]="getPropertyType(prop.value)">
+                            </mm-property-value-display>
+                          </div>
+                        }
+                      </div>
                     </div>
-                  </div>
-                }
+                  }
+                </div>
               } @else {
                 <div class="nested-properties">
                   @for (prop of getObjectProperties(value); track prop.key) {
@@ -2028,14 +2703,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           </span>
         }
       }
+
     </div>
-  `, styles: [".property-value-display{display:flex;align-items:flex-start;gap:8px;width:100%;min-width:0}.text-display,.default-display{word-break:break-word;white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.json-display{font-family:Roboto Mono,monospace;font-size:.8em;white-space:pre-wrap;word-break:break-word;margin:0;flex:1;min-width:0}.type-indicator{font-family:Roboto Mono,monospace;font-size:.7em;padding:1px 5px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);white-space:nowrap;flex-shrink:0}.expandable-record{width:100%}.record-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 0;border-radius:3px;transition:background-color .15s ease}.record-header:hover{background-color:var(--kendo-color-base-subtle, rgba(0,0,0,.04))}.expand-icon{flex-shrink:0;width:14px;height:14px;color:var(--kendo-color-subtle)}.record-summary{color:var(--kendo-color-subtle);font-size:.85em;font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-content{margin-left:20px;padding-left:8px;border-left:1px solid var(--kendo-color-border, #dee2e6)}.array-item{margin:4px 0}.array-index{font-family:Roboto Mono,monospace;font-size:.8em;color:var(--kendo-color-subtle)}.nested-properties{margin-left:8px}.nested-property{display:flex;align-items:flex-start;gap:8px;padding:2px 0}.property-key{font-weight:500;white-space:nowrap;flex-shrink:0;color:var(--kendo-color-subtle);font-size:.85em}.binary-linked-display{display:flex;align-items:center;gap:12px;width:100%}.binary-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.filename{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.85em;color:var(--kendo-color-subtle);flex-shrink:0}.content-type{font-size:.75em;padding:2px 6px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);flex-shrink:0}\n"] }]
+  `, styles: [".property-value-display{display:flex;align-items:flex-start;gap:8px;width:100%;min-width:0}.text-display,.default-display{word-break:break-word;white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.json-display{font-family:Roboto Mono,monospace;font-size:.8em;white-space:pre-wrap;word-break:break-word;margin:0;flex:1;min-width:0}.type-indicator{font-family:Roboto Mono,monospace;font-size:.7em;padding:1px 5px;background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 12%,transparent);border-radius:3px;color:var(--kendo-color-on-app-surface, #1d1b20);white-space:nowrap;flex-shrink:0}.expandable-record{width:100%}.record-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 0;border-radius:3px;transition:background-color .15s ease}.record-header:hover{background-color:var(--kendo-color-base-subtle, rgba(0,0,0,.04))}.expand-icon{flex-shrink:0;width:14px;height:14px;color:var(--kendo-color-subtle)}.record-summary{color:var(--kendo-color-subtle);font-size:.85em;font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detail-button{flex-shrink:0;opacity:.6;transition:opacity .15s ease}.detail-button:hover{opacity:1}.record-content{margin-left:20px;padding-left:8px;border-left:1px solid var(--kendo-color-border, #dee2e6)}.array-item{margin:4px 0}.array-index{font-family:Roboto Mono,monospace;font-size:.8em;color:var(--kendo-color-subtle)}.record-array-list{max-height:320px;overflow-y:auto}.record-table-container{max-height:320px;overflow:auto;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:3px;margin-top:4px}.record-table{width:100%;border-collapse:collapse;font-size:.85em;table-layout:auto}.record-table th{position:sticky;top:0;z-index:1;background:var(--kendo-color-surface-alt, #f8f9fa);color:var(--kendo-color-subtle);text-align:left;padding:4px 8px;border-bottom:1px solid var(--kendo-color-border, #dee2e6);font-weight:500;font-size:.85em;white-space:nowrap}.record-table td{padding:3px 8px;border-bottom:1px solid color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 8%,transparent);vertical-align:top;word-break:break-word}.record-table tr:last-child td{border-bottom:none}.record-table tr:hover td{background:color-mix(in srgb,var(--kendo-color-on-app-surface, #1d1b20) 6%,transparent)}.record-table .row-index{color:var(--kendo-color-subtle);font-family:Roboto Mono,monospace;font-size:.85em;text-align:right;width:1px;white-space:nowrap}.nested-properties{margin-left:8px}.nested-property{display:flex;align-items:flex-start;gap:8px;padding:2px 0}.property-key{font-weight:500;white-space:nowrap;flex-shrink:0;color:var(--kendo-color-subtle);font-size:.85em}.binary-linked-display{display:flex;align-items:center;gap:12px;width:100%}.binary-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.filename{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.85em;color:var(--kendo-color-subtle);flex-shrink:0}.content-type{font-size:.75em;padding:2px 6px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);flex-shrink:0}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], type: [{
                 type: Input
             }], displayMode: [{
                 type: Input
+            }], attributeName: [{
+                type: Input
             }], binaryDownload: [{
                 type: Output
             }] } });
@@ -2243,6 +2921,7 @@ class PropertyGridComponent {
             <mm-property-value-display
               [value]="dataItem.value"
               [type]="dataItem.type"
+              [attributeName]="dataItem.displayName || dataItem.name"
               (binaryDownload)="onBinaryDownload($event)">
             </mm-property-value-display>
           </ng-template>
@@ -2265,7 +2944,7 @@ class PropertyGridComponent {
 
       </kendo-grid>
     </div>
-  `, isInline: true, styles: [".mm-property-grid{display:flex;flex-direction:column;border:1px solid var(--kendo-color-border);border-radius:4px;overflow:hidden}.search-toolbar{padding:8px;border-bottom:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle)}.property-grid{flex:1;border:none}.property-name-cell{display:flex;align-items:center;gap:8px;min-height:24px}.type-icon{width:16px;height:16px;opacity:.7}.property-info{display:flex;align-items:center;gap:4px;flex:1}.property-name{font-weight:500}.required-indicator{color:var(--kendo-color-error);font-weight:700}.readonly-indicator{font-size:12px;opacity:.7}.property-editor{width:100%;min-width:200px}.validation-error{color:var(--kendo-color-error);font-size:.8em;margin-top:4px}.type-badge{font-size:.75em;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500;background:var(--kendo-color-base-subtle);color:var(--kendo-color-on-base)}.grid-toolbar{padding:8px;border-top:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle);display:flex;align-items:center;gap:8px}.changes-indicator{margin-left:auto;font-size:.9em;color:var(--kendo-color-primary);font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: i3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "component", type: i3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i5.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: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: PropertyValueDisplayComponent, selector: "mm-property-value-display", inputs: ["value", "type", "displayMode"], outputs: ["binaryDownload"] }] });
+  `, isInline: true, styles: [".mm-property-grid{display:flex;flex-direction:column;border:1px solid var(--kendo-color-border);border-radius:4px;overflow:hidden}.search-toolbar{padding:8px;border-bottom:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle)}.property-grid{flex:1;border:none}.property-name-cell{display:flex;align-items:center;gap:8px;min-height:24px}.type-icon{width:16px;height:16px;opacity:.7}.property-info{display:flex;align-items:center;gap:4px;flex:1}.property-name{font-weight:500}.required-indicator{color:var(--kendo-color-error);font-weight:700}.readonly-indicator{font-size:12px;opacity:.7}.property-editor{width:100%;min-width:200px}.validation-error{color:var(--kendo-color-error);font-size:.8em;margin-top:4px}.type-badge{font-size:.75em;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500;background:var(--kendo-color-base-subtle);color:var(--kendo-color-on-base)}.grid-toolbar{padding:8px;border-top:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle);display:flex;align-items:center;gap:8px}.changes-indicator{margin-left:auto;font-size:.9em;color:var(--kendo-color-primary);font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: i3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "component", type: i3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i5.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: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: PropertyValueDisplayComponent, selector: "mm-property-value-display", inputs: ["value", "type", "displayMode", "attributeName"], outputs: ["binaryDownload"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PropertyGridComponent, decorators: [{
             type: Component,
@@ -2338,6 +3017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             <mm-property-value-display
               [value]="dataItem.value"
               [type]="dataItem.type"
+              [attributeName]="dataItem.displayName || dataItem.name"
               (binaryDownload)="onBinaryDownload($event)">
             </mm-property-value-display>
           </ng-template>
@@ -7128,21 +7808,45 @@ const DEFAULT_RUNTIME_BROWSER_MESSAGES = {
 class DataMappingListComponent {
     mappings = [];
     sourceDataPoints = [];
+    /**
+     * Optional expression validator function. When provided, expressions are validated
+     * on change and feedback (error or preview) is shown below the expression field.
+     * The host app can provide an implementation using any expression engine
+     * (e.g., ExpressionEvaluatorService from octo-process-diagrams).
+     */
+    expressionValidator;
     addMapping = new EventEmitter();
     removeMapping = new EventEmitter();
     selectTarget = new EventEmitter();
     selectSourceAttribute = new EventEmitter();
     selectTargetAttribute = new EventEmitter();
     mappingChanged = new EventEmitter();
+    navigateToTarget = new EventEmitter();
+    saveAll = new EventEmitter();
     onSourceDataPointChange(mapping, value) {
         mapping.sourceAttributePath = value;
         this.mappingChanged.emit(mapping);
     }
-    saveAll = new EventEmitter();
+    onExpressionChange(mapping, expression) {
+        mapping.mappingExpression = expression;
+        if (this.expressionValidator && expression && expression.trim() !== '') {
+            const result = this.expressionValidator(expression);
+            mapping._expressionValid = result.valid;
+            mapping._expressionError = result.error;
+            mapping._expressionPreview = result.preview;
+        }
+        else {
+            mapping._expressionValid = undefined;
+            mapping._expressionError = undefined;
+            mapping._expressionPreview = undefined;
+        }
+        this.mappingChanged.emit(mapping);
+    }
     plusIcon = plusIcon;
     trashIcon = trashIcon;
+    linkIcon = hyperlinkOpenIcon;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataMappingListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DataMappingListComponent, isStandalone: true, selector: "mm-data-mapping-list", inputs: { mappings: "mappings", sourceDataPoints: "sourceDataPoints" }, outputs: { addMapping: "addMapping", removeMapping: "removeMapping", selectTarget: "selectTarget", selectSourceAttribute: "selectSourceAttribute", selectTargetAttribute: "selectTargetAttribute", mappingChanged: "mappingChanged", saveAll: "saveAll" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DataMappingListComponent, isStandalone: true, selector: "mm-data-mapping-list", inputs: { mappings: "mappings", sourceDataPoints: "sourceDataPoints", expressionValidator: "expressionValidator" }, outputs: { addMapping: "addMapping", removeMapping: "removeMapping", selectTarget: "selectTarget", selectSourceAttribute: "selectSourceAttribute", selectTargetAttribute: "selectTargetAttribute", mappingChanged: "mappingChanged", navigateToTarget: "navigateToTarget", saveAll: "saveAll" }, ngImport: i0, template: `
     <div class="mapping-list">
       <div class="mapping-toolbar">
         <button kendoButton themeColor="primary" size="small" [svgIcon]="plusIcon"
@@ -7184,16 +7888,43 @@ class DataMappingListComponent {
               <label>Expression</label>
               <kendo-textbox [(value)]="mapping.mappingExpression"
                 placeholder="e.g. value > 0 ? value : 0"
-                (valueChange)="mappingChanged.emit(mapping)">
+                (valueChange)="onExpressionChange(mapping, $event)">
               </kendo-textbox>
+              @if (mapping.mappingExpression && expressionValidator) {
+                @if (mapping._expressionValid === false) {
+                  <div class="expression-feedback expression-error">{{ mapping._expressionError }}</div>
+                } @else if (mapping._expressionValid === true && mapping._expressionPreview) {
+                  <div class="expression-feedback expression-success">value=42 → {{ mapping._expressionPreview }}</div>
+                }
+              }
             </div>
             <div class="mapping-row">
               <label>Target Entity</label>
-              <div class="target-display">
-                <span class="target-info">{{ mapping.targetCkTypeId || '(not set)' }} {{ mapping.targetName || '' }}</span>
-                <button kendoButton fillMode="flat" size="small"
-                  (click)="selectTarget.emit(mapping)">Select...</button>
-              </div>
+              @if (mapping.targetRtId) {
+                <div class="entity-info-display">
+                  <div class="entity-info-main">
+                    <span class="entity-name">{{ mapping.targetName || mapping.targetRtId }}</span>
+                    @if (mapping.targetRtId) {
+                      <button kendoButton fillMode="flat" size="small" [svgIcon]="linkIcon"
+                        title="Navigate to entity"
+                        (click)="navigateToTarget.emit(mapping)"></button>
+                    }
+                  </div>
+                  <div class="entity-info-details">
+                    <span class="entity-detail-item">{{ mapping.targetCkTypeId }}</span>
+                    <span class="entity-detail-separator">@</span>
+                    <span class="entity-detail-item">{{ mapping.targetRtId }}</span>
+                  </div>
+                  <button kendoButton fillMode="flat" size="small"
+                    (click)="selectTarget.emit(mapping)">Change...</button>
+                </div>
+              } @else {
+                <div class="target-display">
+                  <span class="target-info">(not set)</span>
+                  <button kendoButton fillMode="flat" size="small"
+                    (click)="selectTarget.emit(mapping)">Select...</button>
+                </div>
+              }
             </div>
             <div class="mapping-row">
               <label>Target Attribute</label>
@@ -7216,7 +7947,7 @@ class DataMappingListComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".mapping-list{display:flex;flex-direction:column;gap:12px}.mapping-toolbar{display:flex;justify-content:flex-end}.mapping-empty-hint{text-align:center;padding:16px;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.mapping-card{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:6px;overflow:hidden}.mapping-card-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-on-primary, #ffffff);background:var(--kendo-color-primary, #ff6358)}.mapping-card-header .mapping-name{flex:1}.mapping-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}.mapping-row{display:flex;flex-direction:column;gap:3px}.mapping-row label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #6c757d)}.target-display{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);min-height:30px}.target-display .target-info{flex:1;font-size:.85rem;font-family:monospace}.mapping-actions{display:flex;justify-content:flex-end;padding-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: 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: "ngmodule", type: TextBoxModule }, { kind: "component", type: i5.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: SVGIconModule }] });
+  `, isInline: true, styles: [".mapping-list{display:flex;flex-direction:column;gap:12px}.mapping-toolbar{display:flex;justify-content:flex-end}.mapping-empty-hint{text-align:center;padding:16px;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.mapping-card{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:6px;overflow:hidden}.mapping-card-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-on-primary, #ffffff);background:var(--kendo-color-primary, #ff6358)}.mapping-card-header .mapping-name{flex:1}.mapping-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}.mapping-row{display:flex;flex-direction:column;gap:3px}.mapping-row label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #6c757d)}.target-display{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);min-height:30px}.target-display .target-info{flex:1;font-size:.85rem;font-family:monospace}.mapping-actions{display:flex;justify-content:flex-end;padding-top:4px}.entity-info-display{display:flex;flex-direction:column;gap:2px;padding:4px 8px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa)}.entity-info-main{display:flex;align-items:center;gap:4px}.entity-name{flex:1;font-size:.85rem;font-weight:600}.entity-info-details{display:flex;align-items:center;gap:2px;font-size:.7rem;font-family:monospace;color:var(--kendo-color-subtle, #6c757d)}.entity-detail-separator{color:var(--kendo-color-subtle, #6c757d)}.expression-feedback{font-size:.75rem;padding:2px 0;font-family:monospace}.expression-error{color:var(--kendo-color-error, #dc3545)}.expression-success{color:var(--kendo-color-success, #28a745)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: 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: "ngmodule", type: TextBoxModule }, { kind: "component", type: i5.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: SVGIconModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataMappingListComponent, decorators: [{
             type: Component,
@@ -7269,16 +8000,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
               <label>Expression</label>
               <kendo-textbox [(value)]="mapping.mappingExpression"
                 placeholder="e.g. value > 0 ? value : 0"
-                (valueChange)="mappingChanged.emit(mapping)">
+                (valueChange)="onExpressionChange(mapping, $event)">
               </kendo-textbox>
+              @if (mapping.mappingExpression && expressionValidator) {
+                @if (mapping._expressionValid === false) {
+                  <div class="expression-feedback expression-error">{{ mapping._expressionError }}</div>
+                } @else if (mapping._expressionValid === true && mapping._expressionPreview) {
+                  <div class="expression-feedback expression-success">value=42 → {{ mapping._expressionPreview }}</div>
+                }
+              }
             </div>
             <div class="mapping-row">
               <label>Target Entity</label>
-              <div class="target-display">
-                <span class="target-info">{{ mapping.targetCkTypeId || '(not set)' }} {{ mapping.targetName || '' }}</span>
-                <button kendoButton fillMode="flat" size="small"
-                  (click)="selectTarget.emit(mapping)">Select...</button>
-              </div>
+              @if (mapping.targetRtId) {
+                <div class="entity-info-display">
+                  <div class="entity-info-main">
+                    <span class="entity-name">{{ mapping.targetName || mapping.targetRtId }}</span>
+                    @if (mapping.targetRtId) {
+                      <button kendoButton fillMode="flat" size="small" [svgIcon]="linkIcon"
+                        title="Navigate to entity"
+                        (click)="navigateToTarget.emit(mapping)"></button>
+                    }
+                  </div>
+                  <div class="entity-info-details">
+                    <span class="entity-detail-item">{{ mapping.targetCkTypeId }}</span>
+                    <span class="entity-detail-separator">@</span>
+                    <span class="entity-detail-item">{{ mapping.targetRtId }}</span>
+                  </div>
+                  <button kendoButton fillMode="flat" size="small"
+                    (click)="selectTarget.emit(mapping)">Change...</button>
+                </div>
+              } @else {
+                <div class="target-display">
+                  <span class="target-info">(not set)</span>
+                  <button kendoButton fillMode="flat" size="small"
+                    (click)="selectTarget.emit(mapping)">Select...</button>
+                </div>
+              }
             </div>
             <div class="mapping-row">
               <label>Target Attribute</label>
@@ -7301,11 +8059,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </div>
       }
     </div>
-  `, styles: [".mapping-list{display:flex;flex-direction:column;gap:12px}.mapping-toolbar{display:flex;justify-content:flex-end}.mapping-empty-hint{text-align:center;padding:16px;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.mapping-card{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:6px;overflow:hidden}.mapping-card-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-on-primary, #ffffff);background:var(--kendo-color-primary, #ff6358)}.mapping-card-header .mapping-name{flex:1}.mapping-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}.mapping-row{display:flex;flex-direction:column;gap:3px}.mapping-row label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #6c757d)}.target-display{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);min-height:30px}.target-display .target-info{flex:1;font-size:.85rem;font-family:monospace}.mapping-actions{display:flex;justify-content:flex-end;padding-top:4px}\n"] }]
+  `, styles: [".mapping-list{display:flex;flex-direction:column;gap:12px}.mapping-toolbar{display:flex;justify-content:flex-end}.mapping-empty-hint{text-align:center;padding:16px;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.mapping-card{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:6px;overflow:hidden}.mapping-card-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-on-primary, #ffffff);background:var(--kendo-color-primary, #ff6358)}.mapping-card-header .mapping-name{flex:1}.mapping-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}.mapping-row{display:flex;flex-direction:column;gap:3px}.mapping-row label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #6c757d)}.target-display{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);min-height:30px}.target-display .target-info{flex:1;font-size:.85rem;font-family:monospace}.mapping-actions{display:flex;justify-content:flex-end;padding-top:4px}.entity-info-display{display:flex;flex-direction:column;gap:2px;padding:4px 8px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa)}.entity-info-main{display:flex;align-items:center;gap:4px}.entity-name{flex:1;font-size:.85rem;font-weight:600}.entity-info-details{display:flex;align-items:center;gap:2px;font-size:.7rem;font-family:monospace;color:var(--kendo-color-subtle, #6c757d)}.entity-detail-separator{color:var(--kendo-color-subtle, #6c757d)}.expression-feedback{font-size:.75rem;padding:2px 0;font-family:monospace}.expression-error{color:var(--kendo-color-error, #dc3545)}.expression-success{color:var(--kendo-color-success, #28a745)}\n"] }]
         }], propDecorators: { mappings: [{
                 type: Input
             }], sourceDataPoints: [{
                 type: Input
+            }], expressionValidator: [{
+                type: Input
             }], addMapping: [{
                 type: Output
             }], removeMapping: [{
@@ -7318,6 +8078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Output
             }], mappingChanged: [{
                 type: Output
+            }], navigateToTarget: [{
+                type: Output
             }], saveAll: [{
                 type: Output
             }] } });
@@ -7333,6 +8095,11 @@ class EntityDetailViewComponent {
     showDataMapping = true;
     dataMappings = [];
     sourceDataPoints = [];
+    /**
+     * Optional expression validator function passed through to DataMappingListComponent.
+     * When provided, mapping expressions are validated on change with visual feedback.
+     */
+    expressionValidator;
     retry = new EventEmitter();
     propertyChange = new EventEmitter();
     navigateToEntity = new EventEmitter();
@@ -7526,6 +8293,14 @@ class EntityDetailViewComponent {
     getAssociationCount() {
         return this.entity?.associations?.definitions?.totalCount ?? 0;
     }
+    onNavigateToMappingTarget(mapping) {
+        if (mapping.targetRtId && mapping.targetCkTypeId) {
+            this.navigateToEntity.emit({
+                rtId: mapping.targetRtId,
+                ckTypeId: mapping.targetCkTypeId,
+            });
+        }
+    }
     copyToClipboard(value, label) {
         if (!value)
             return;
@@ -7593,7 +8368,7 @@ class EntityDetailViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EntityDetailViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: EntityDetailViewComponent, isStandalone: true, selector: "mm-entity-detail-view", inputs: { entity: "entity", loading: "loading", error: "error", showHeader: "showHeader", messages: "messages", showDataMapping: "showDataMapping", dataMappings: "dataMappings", sourceDataPoints: "sourceDataPoints" }, outputs: { retry: "retry", propertyChange: "propertyChange", navigateToEntity: "navigateToEntity", addMappingRequested: "addMappingRequested", removeMappingRequested: "removeMappingRequested", selectMappingTarget: "selectMappingTarget", selectSourceAttributeRequested: "selectSourceAttributeRequested", selectTargetAttributeRequested: "selectTargetAttributeRequested", mappingChanged: "mappingChanged", saveAllMappingsRequested: "saveAllMappingsRequested" }, viewQueries: [{ propertyName: "associationsDataSource", first: true, predicate: ["associationsDir"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: EntityDetailViewComponent, isStandalone: true, selector: "mm-entity-detail-view", inputs: { entity: "entity", loading: "loading", error: "error", showHeader: "showHeader", messages: "messages", showDataMapping: "showDataMapping", dataMappings: "dataMappings", sourceDataPoints: "sourceDataPoints", expressionValidator: "expressionValidator" }, outputs: { retry: "retry", propertyChange: "propertyChange", navigateToEntity: "navigateToEntity", addMappingRequested: "addMappingRequested", removeMappingRequested: "removeMappingRequested", selectMappingTarget: "selectMappingTarget", selectSourceAttributeRequested: "selectSourceAttributeRequested", selectTargetAttributeRequested: "selectTargetAttributeRequested", mappingChanged: "mappingChanged", saveAllMappingsRequested: "saveAllMappingsRequested" }, viewQueries: [{ propertyName: "associationsDataSource", first: true, predicate: ["associationsDir"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     @if (loading) {
       <div class="loading-state">
         <p>{{ _messages.loadingEntityDetails }}</p>
@@ -7810,12 +8585,14 @@ class EntityDetailViewComponent {
                 <mm-data-mapping-list
                   [mappings]="dataMappings"
                   [sourceDataPoints]="sourceDataPoints"
+                  [expressionValidator]="expressionValidator"
                   (addMapping)="addMappingRequested.emit()"
                   (removeMapping)="removeMappingRequested.emit($event)"
                   (selectTarget)="selectMappingTarget.emit($event)"
                   (selectSourceAttribute)="selectSourceAttributeRequested.emit($event)"
                   (selectTargetAttribute)="selectTargetAttributeRequested.emit($event)"
                   (mappingChanged)="mappingChanged.emit($event)"
+                  (navigateToTarget)="onNavigateToMappingTarget($event)"
                   (saveAll)="saveAllMappingsRequested.emit()"
                 ></mm-data-mapping-list>
               </div>
@@ -7825,7 +8602,7 @@ class EntityDetailViewComponent {
         </kendo-tabstrip>
       </div>
     }
-  `, isInline: true, styles: [".loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;min-height:200px}.loading-state .error-message,.error-state .error-message{margin-bottom:16px;font-family:Roboto,sans-serif;color:#e74c3c}.entity-content{flex:1;display:flex;flex-direction:column;gap:24px}.entity-content .basic-info-card{padding:20px 24px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;position:relative;box-shadow:0 4px 20px #0006,0 0 15px var(--octo-mint-08)}.entity-content .basic-info-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50);border-radius:4px 0 0 4px}.entity-content .basic-info-card .basic-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.entity-content .basic-info-card .basic-info-grid .info-item{display:flex;flex-direction:column;gap:8px}.entity-content .basic-info-card .basic-info-grid .info-item label{font-family:Montserrat,sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase;color:var(--octo-mint-80)}.entity-content .basic-info-card .basic-info-grid .info-item .value{font-family:Roboto Mono,monospace;font-size:.875rem;color:rgba(var(--octo-text-color),.9);word-break:break-word;background:var(--deep-sea-40);padding:8px 12px;border-radius:4px;border:1px solid var(--octo-mint-15)}.entity-content .basic-info-card .basic-info-grid .info-item.with-action .value-with-action{display:flex;align-items:center}.entity-content .basic-info-card .basic-info-grid .info-item.with-action .value-with-action .value{flex:1;font-family:Roboto Mono,monospace;font-size:.875rem;color:rgba(var(--octo-text-color),.9);word-break:break-word}.entity-content .entity-tabs{flex:1;min-height:400px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;overflow:hidden;position:relative}.entity-content .entity-tabs:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50);z-index:1}.entity-content .entity-tabs ::ng-deep .k-tabstrip{background:transparent}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper{background:linear-gradient(90deg,var(--octo-mint-10),transparent);border-bottom:1px solid var(--octo-mint-20);padding-left:20px}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item{background:transparent;border:none;color:rgba(var(--octo-text-color),.7);font-family:Montserrat,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;padding:12px 20px;margin-right:4px;border-radius:4px 4px 0 0;transition:all .2s ease}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item:hover{background:var(--octo-mint-10);color:var(--octo-mint)}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active{background:linear-gradient(180deg,var(--octo-mint-20),transparent);color:var(--octo-mint);border-bottom:2px solid var(--octo-mint);box-shadow:0 0 10px var(--octo-mint-30)}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-content{background:transparent;border:none;padding:0}.entity-content .entity-tabs .tab-content{padding:20px 24px;height:100%;overflow-y:auto}.entity-content .entity-tabs .tab-content .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;text-align:center}.entity-content .entity-tabs .tab-content .empty-state kendo-svgicon{font-size:64px;margin-bottom:20px;color:var(--octo-mint-40);text-shadow:0 0 20px var(--octo-mint-30)}.entity-content .entity-tabs .tab-content .empty-state p{margin:0;font-family:Montserrat,sans-serif;font-size:.9rem;color:rgba(var(--octo-text-color),.5);letter-spacing:.5px}.entity-content .entity-tabs .tab-content.properties-tab{padding:0;height:100%}.entity-content .entity-tabs .tab-content.properties-tab mm-property-grid{display:block;height:100%;width:100%}.entity-content .entity-tabs .tab-content.associations-tab{display:flex;flex-direction:column;gap:16px;padding:0;height:100%}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 20px;background:linear-gradient(90deg,var(--octo-mint-05),transparent);border-bottom:1px solid var(--octo-mint-20)}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group{display:flex;align-items:center;gap:10px}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group label{font-family:Montserrat,sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase;color:var(--octo-mint-80);white-space:nowrap}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group kendo-dropdownlist{width:160px}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group kendo-textbox{width:220px}.entity-content .entity-tabs .tab-content.associations-tab mm-list-view{flex:1;display:block;height:calc(100% - 70px)}.entity-content .entity-tabs .tab-content.mapping-tab{padding:12px}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-empty{display:flex;flex-direction:column;align-items:center;padding:24px 20px;text-align:center}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-empty kendo-svgicon{font-size:36px;margin-bottom:10px;opacity:.5}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-empty p{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-config{display:flex;flex-direction:column;gap:20px}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-section{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:6px;overflow:hidden}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-section .section-header{padding:8px 14px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--kendo-color-on-primary, #ffffff);background:var(--kendo-color-primary, #ff6358)}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-section .section-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-field{display:flex;flex-direction:column;gap:4px}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-field label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #6c757d)}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-target-display{display:flex;align-items:center;gap:8px}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-target-display .target-type{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);font-family:monospace;padding:2px 6px;border-radius:3px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6)}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-target-display .target-name{font-weight:600;flex:1}.entity-content .entity-tabs .tab-content.mapping-tab .field-hint{font-size:.7rem;color:var(--kendo-color-subtle, #6c757d);font-style:italic;line-height:1.3}.entity-content .entity-tabs .tab-content.mapping-tab .attribute-picker{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:4px;border:1px solid var(--kendo-color-border, #dee2e6);background:var(--kendo-color-surface-alt, #f8f9fa);min-height:32px}.entity-content .entity-tabs .tab-content.mapping-tab .attribute-picker .attribute-value{flex:1;font-family:monospace;font-size:.85rem}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:4px}@media(max-width:768px){.entity-content{gap:16px}.entity-content .basic-info-card{padding:16px 20px}.entity-content .basic-info-card .basic-info-grid{grid-template-columns:1fr;gap:16px}.entity-content .entity-tabs{min-height:300px}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper{padding-left:12px}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item{padding:10px 14px;font-size:.75rem}.entity-content .entity-tabs .tab-content{padding:16px}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar{flex-direction:column;align-items:flex-start;gap:12px}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group{width:100%}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group kendo-dropdownlist,.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group kendo-textbox{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TabStripModule }, { kind: "component", type: i1$4.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: i1$4.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i1$4.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$4.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i1$4.CardBodyComponent, selector: "kendo-card-body" }, { kind: "component", type: i1$4.CardHeaderComponent, selector: "kendo-card-header" }, { 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: "ngmodule", type: TextBoxModule }, { kind: "component", type: i5.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: PropertyGridComponent, selector: "mm-property-grid", inputs: ["data", "config", "showTypeColumn"], outputs: ["propertyChange", "saveRequested", "binaryDownload"] }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "rowClass", "messages", "selectable", "columns"], outputs: ["rowClicked"] }, { kind: "directive", type: EntityAssociationsDataSourceDirective, selector: "[mmEntityAssociationsDataSource]", exportAs: ["mmEntityAssociationsDataSource"] }, { kind: "component", type: DataMappingListComponent, selector: "mm-data-mapping-list", inputs: ["mappings", "sourceDataPoints"], outputs: ["addMapping", "removeMapping", "selectTarget", "selectSourceAttribute", "selectTargetAttribute", "mappingChanged", "saveAll"] }] });
+  `, isInline: true, styles: [".loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;min-height:200px}.loading-state .error-message,.error-state .error-message{margin-bottom:16px;font-family:Roboto,sans-serif;color:#e74c3c}.entity-content{flex:1;display:flex;flex-direction:column;gap:24px}.entity-content .basic-info-card{padding:20px 24px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;position:relative;box-shadow:0 4px 20px #0006,0 0 15px var(--octo-mint-08)}.entity-content .basic-info-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50);border-radius:4px 0 0 4px}.entity-content .basic-info-card .basic-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.entity-content .basic-info-card .basic-info-grid .info-item{display:flex;flex-direction:column;gap:8px}.entity-content .basic-info-card .basic-info-grid .info-item label{font-family:Montserrat,sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase;color:var(--octo-mint-80)}.entity-content .basic-info-card .basic-info-grid .info-item .value{font-family:Roboto Mono,monospace;font-size:.875rem;color:rgba(var(--octo-text-color),.9);word-break:break-word;background:var(--deep-sea-40);padding:8px 12px;border-radius:4px;border:1px solid var(--octo-mint-15)}.entity-content .basic-info-card .basic-info-grid .info-item.with-action .value-with-action{display:flex;align-items:center}.entity-content .basic-info-card .basic-info-grid .info-item.with-action .value-with-action .value{flex:1;font-family:Roboto Mono,monospace;font-size:.875rem;color:rgba(var(--octo-text-color),.9);word-break:break-word}.entity-content .entity-tabs{flex:1;min-height:400px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;overflow:hidden;position:relative}.entity-content .entity-tabs:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50);z-index:1}.entity-content .entity-tabs ::ng-deep .k-tabstrip{background:transparent}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper{background:linear-gradient(90deg,var(--octo-mint-10),transparent);border-bottom:1px solid var(--octo-mint-20);padding-left:20px}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item{background:transparent;border:none;color:rgba(var(--octo-text-color),.7);font-family:Montserrat,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;padding:12px 20px;margin-right:4px;border-radius:4px 4px 0 0;transition:all .2s ease}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item:hover{background:var(--octo-mint-10);color:var(--octo-mint)}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active{background:linear-gradient(180deg,var(--octo-mint-20),transparent);color:var(--octo-mint);border-bottom:2px solid var(--octo-mint);box-shadow:0 0 10px var(--octo-mint-30)}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-content{background:transparent;border:none;padding:0}.entity-content .entity-tabs .tab-content{padding:20px 24px;height:100%;overflow-y:auto}.entity-content .entity-tabs .tab-content .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;text-align:center}.entity-content .entity-tabs .tab-content .empty-state kendo-svgicon{font-size:64px;margin-bottom:20px;color:var(--octo-mint-40);text-shadow:0 0 20px var(--octo-mint-30)}.entity-content .entity-tabs .tab-content .empty-state p{margin:0;font-family:Montserrat,sans-serif;font-size:.9rem;color:rgba(var(--octo-text-color),.5);letter-spacing:.5px}.entity-content .entity-tabs .tab-content.properties-tab{padding:0;height:100%}.entity-content .entity-tabs .tab-content.properties-tab mm-property-grid{display:block;height:100%;width:100%}.entity-content .entity-tabs .tab-content.associations-tab{display:flex;flex-direction:column;gap:16px;padding:0;height:100%}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 20px;background:linear-gradient(90deg,var(--octo-mint-05),transparent);border-bottom:1px solid var(--octo-mint-20)}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group{display:flex;align-items:center;gap:10px}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group label{font-family:Montserrat,sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase;color:var(--octo-mint-80);white-space:nowrap}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group kendo-dropdownlist{width:160px}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group kendo-textbox{width:220px}.entity-content .entity-tabs .tab-content.associations-tab mm-list-view{flex:1;display:block;height:calc(100% - 70px)}.entity-content .entity-tabs .tab-content.mapping-tab{padding:12px}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-empty{display:flex;flex-direction:column;align-items:center;padding:24px 20px;text-align:center}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-empty kendo-svgicon{font-size:36px;margin-bottom:10px;opacity:.5}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-empty p{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-config{display:flex;flex-direction:column;gap:20px}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-section{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:6px;overflow:hidden}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-section .section-header{padding:8px 14px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--kendo-color-on-primary, #ffffff);background:var(--kendo-color-primary, #ff6358)}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-section .section-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-field{display:flex;flex-direction:column;gap:4px}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-field label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #6c757d)}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-target-display{display:flex;align-items:center;gap:8px}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-target-display .target-type{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);font-family:monospace;padding:2px 6px;border-radius:3px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6)}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-target-display .target-name{font-weight:600;flex:1}.entity-content .entity-tabs .tab-content.mapping-tab .field-hint{font-size:.7rem;color:var(--kendo-color-subtle, #6c757d);font-style:italic;line-height:1.3}.entity-content .entity-tabs .tab-content.mapping-tab .attribute-picker{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:4px;border:1px solid var(--kendo-color-border, #dee2e6);background:var(--kendo-color-surface-alt, #f8f9fa);min-height:32px}.entity-content .entity-tabs .tab-content.mapping-tab .attribute-picker .attribute-value{flex:1;font-family:monospace;font-size:.85rem}.entity-content .entity-tabs .tab-content.mapping-tab .mapping-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:4px}@media(max-width:768px){.entity-content{gap:16px}.entity-content .basic-info-card{padding:16px 20px}.entity-content .basic-info-card .basic-info-grid{grid-template-columns:1fr;gap:16px}.entity-content .entity-tabs{min-height:300px}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper{padding-left:12px}.entity-content .entity-tabs ::ng-deep .k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item{padding:10px 14px;font-size:.75rem}.entity-content .entity-tabs .tab-content{padding:16px}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar{flex-direction:column;align-items:flex-start;gap:12px}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group{width:100%}.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group kendo-dropdownlist,.entity-content .entity-tabs .tab-content.associations-tab .associations-toolbar .filter-group kendo-textbox{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TabStripModule }, { kind: "component", type: i1$4.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: i1$4.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i1$4.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$4.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i1$4.CardBodyComponent, selector: "kendo-card-body" }, { kind: "component", type: i1$4.CardHeaderComponent, selector: "kendo-card-header" }, { 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: "ngmodule", type: TextBoxModule }, { kind: "component", type: i5.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: PropertyGridComponent, selector: "mm-property-grid", inputs: ["data", "config", "showTypeColumn"], outputs: ["propertyChange", "saveRequested", "binaryDownload"] }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "rowClass", "messages", "selectable", "columns"], outputs: ["rowClicked"] }, { kind: "directive", type: EntityAssociationsDataSourceDirective, selector: "[mmEntityAssociationsDataSource]", exportAs: ["mmEntityAssociationsDataSource"] }, { kind: "component", type: DataMappingListComponent, selector: "mm-data-mapping-list", inputs: ["mappings", "sourceDataPoints", "expressionValidator"], outputs: ["addMapping", "removeMapping", "selectTarget", "selectSourceAttribute", "selectTargetAttribute", "mappingChanged", "navigateToTarget", "saveAll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EntityDetailViewComponent, decorators: [{
             type: Component,
@@ -8058,12 +8835,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 <mm-data-mapping-list
                   [mappings]="dataMappings"
                   [sourceDataPoints]="sourceDataPoints"
+                  [expressionValidator]="expressionValidator"
                   (addMapping)="addMappingRequested.emit()"
                   (removeMapping)="removeMappingRequested.emit($event)"
                   (selectTarget)="selectMappingTarget.emit($event)"
                   (selectSourceAttribute)="selectSourceAttributeRequested.emit($event)"
                   (selectTargetAttribute)="selectTargetAttributeRequested.emit($event)"
                   (mappingChanged)="mappingChanged.emit($event)"
+                  (navigateToTarget)="onNavigateToMappingTarget($event)"
                   (saveAll)="saveAllMappingsRequested.emit()"
                 ></mm-data-mapping-list>
               </div>
@@ -8090,6 +8869,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }], sourceDataPoints: [{
                 type: Input
+            }], expressionValidator: [{
+                type: Input
             }], retry: [{
                 type: Output
             }], propertyChange: [{
@@ -8609,7 +9390,7 @@ class EntityDetailComponent {
       >
       </mm-entity-detail-view>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%;width:100%}.entity-detail{height:100%;display:flex;flex-direction:column;padding:24px;box-sizing:border-box;overflow-y:auto}.entity-detail .entity-detail-header{display:flex;align-items:center;gap:20px;margin-bottom:24px;padding:20px 24px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;position:relative;box-shadow:0 4px 20px #0006,0 0 15px var(--octo-mint-08)}.entity-detail .entity-detail-header:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50);border-radius:4px 0 0 4px}.entity-detail .entity-detail-header .header-info{flex:1}.entity-detail .entity-detail-header .header-info .entity-title h2{margin:0 0 8px;font-family:Montserrat,sans-serif;font-size:1.4rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--octo-text-color);text-shadow:0 0 10px rgba(0,0,0,.3)}.entity-detail .entity-detail-header .header-info .entity-type{margin:0;font-family:Roboto Mono,monospace;font-size:.8rem;background:var(--deep-sea-60);padding:6px 12px;border-radius:4px;border:1px solid var(--neo-cyan-30);display:inline-block;color:var(--neo-cyan)}.entity-detail mm-entity-detail-view{flex:1;display:flex;flex-direction:column;overflow-y:auto}@media(max-width:768px){.entity-detail{padding:16px}.entity-detail .entity-detail-header{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 20px}.entity-detail .entity-detail-header .header-info .entity-title h2{font-size:1.1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: EntityDetailViewComponent, selector: "mm-entity-detail-view", inputs: ["entity", "loading", "error", "showHeader", "messages", "showDataMapping", "dataMappings", "sourceDataPoints"], outputs: ["retry", "propertyChange", "navigateToEntity", "addMappingRequested", "removeMappingRequested", "selectMappingTarget", "selectSourceAttributeRequested", "selectTargetAttributeRequested", "mappingChanged", "saveAllMappingsRequested"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100%;width:100%}.entity-detail{height:100%;display:flex;flex-direction:column;padding:24px;box-sizing:border-box;overflow-y:auto}.entity-detail .entity-detail-header{display:flex;align-items:center;gap:20px;margin-bottom:24px;padding:20px 24px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;position:relative;box-shadow:0 4px 20px #0006,0 0 15px var(--octo-mint-08)}.entity-detail .entity-detail-header:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50);border-radius:4px 0 0 4px}.entity-detail .entity-detail-header .header-info{flex:1}.entity-detail .entity-detail-header .header-info .entity-title h2{margin:0 0 8px;font-family:Montserrat,sans-serif;font-size:1.4rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--octo-text-color);text-shadow:0 0 10px rgba(0,0,0,.3)}.entity-detail .entity-detail-header .header-info .entity-type{margin:0;font-family:Roboto Mono,monospace;font-size:.8rem;background:var(--deep-sea-60);padding:6px 12px;border-radius:4px;border:1px solid var(--neo-cyan-30);display:inline-block;color:var(--neo-cyan)}.entity-detail mm-entity-detail-view{flex:1;display:flex;flex-direction:column;overflow-y:auto}@media(max-width:768px){.entity-detail{padding:16px}.entity-detail .entity-detail-header{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 20px}.entity-detail .entity-detail-header .header-info .entity-title h2{font-size:1.1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: EntityDetailViewComponent, selector: "mm-entity-detail-view", inputs: ["entity", "loading", "error", "showHeader", "messages", "showDataMapping", "dataMappings", "sourceDataPoints", "expressionValidator"], outputs: ["retry", "propertyChange", "navigateToEntity", "addMappingRequested", "removeMappingRequested", "selectMappingTarget", "selectSourceAttributeRequested", "selectTargetAttributeRequested", "mappingChanged", "saveAllMappingsRequested"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EntityDetailComponent, decorators: [{
             type: Component,
@@ -11975,6 +12756,10 @@ class RuntimeBrowserDetailsComponent {
     // Data Mapping state (list of DataPointMapping entities)
     dataMappings = [];
     sourceDataPoints = [];
+    /**
+     * Optional expression validator function passed through to EntityDetailViewComponent → DataMappingListComponent.
+     */
+    expressionValidator;
     detailsIcon = eyeIcon;
     fullEntity = null;
     loadRequestToken = 0;
@@ -12654,7 +13439,7 @@ class RuntimeBrowserDetailsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RuntimeBrowserDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RuntimeBrowserDetailsComponent, isStandalone: true, selector: "mm-runtime-browser-details", inputs: { selectedItem: "selectedItem", showDataMapping: "showDataMapping", messages: "messages" }, outputs: { entitySaved: "entitySaved" }, viewQueries: [{ propertyName: "dataSourceDirective", first: true, predicate: ["dir"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RuntimeBrowserDetailsComponent, isStandalone: true, selector: "mm-runtime-browser-details", inputs: { selectedItem: "selectedItem", showDataMapping: "showDataMapping", messages: "messages", expressionValidator: "expressionValidator" }, outputs: { entitySaved: "entitySaved" }, viewQueries: [{ propertyName: "dataSourceDirective", first: true, predicate: ["dir"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="runtime-browser-details">
       @if (isCreateModeEnabled) {
         <mm-create-editor-component
@@ -12696,6 +13481,7 @@ class RuntimeBrowserDetailsComponent {
                 [showDataMapping]="showDataMapping"
                 [dataMappings]="dataMappings"
                 [sourceDataPoints]="sourceDataPoints"
+                [expressionValidator]="expressionValidator"
                 (retry)="loadFullEntityDetails()"
                 (navigateToEntity)="
                   navigateToEntity($event.rtId, $event.ckTypeId)
@@ -12794,7 +13580,7 @@ class RuntimeBrowserDetailsComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%;width:100%}.runtime-browser-details{display:flex;flex-direction:column;flex:1;min-height:0;padding:24px;box-sizing:border-box;overflow-y:auto;background:linear-gradient(180deg,var(--surface-elevated) 0%,var(--deep-sea) 100%)}.runtime-browser-details .no-selection{display:flex;align-items:center;justify-content:center;flex:1;min-height:0}.runtime-browser-details .no-selection .placeholder-content{text-align:center;max-width:400px;padding:40px;background:linear-gradient(135deg,var(--iron-navy-80),var(--surface-elevated-90));border:1px solid var(--octo-mint-30);border-radius:8px 24px;box-shadow:0 0 30px var(--octo-mint-10),inset 0 0 40px var(--octo-mint-03)}.runtime-browser-details .no-selection .placeholder-content .placeholder-icon{margin-bottom:24px}.runtime-browser-details .no-selection .placeholder-content .placeholder-icon .k-icon{font-size:64px;color:var(--octo-mint-50);text-shadow:0 0 20px var(--octo-mint-50);animation:lcars-icon-pulse 3s ease-in-out infinite}.runtime-browser-details .no-selection .placeholder-content h3{margin:0 0 12px;font-family:Montserrat,sans-serif;font-size:1.4rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--octo-mint);text-shadow:0 0 15px var(--octo-mint-50)}.runtime-browser-details .no-selection .placeholder-content p{margin:0;font-family:Montserrat,sans-serif;font-size:.9rem;line-height:1.6;color:rgba(var(--octo-text-color),.7);letter-spacing:.5px}.runtime-browser-details .entity-details{height:100%;display:flex;flex-direction:column;overflow:hidden}.runtime-browser-details .entity-details .details-header{display:flex;align-items:center;gap:16px;padding:16px 20px 16px 24px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;margin-bottom:20px;position:relative;box-shadow:0 4px 20px #0006,0 0 15px var(--octo-mint-08)}.runtime-browser-details .entity-details .details-header:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50);border-radius:4px 0 0 4px}.runtime-browser-details .entity-details .details-header .entity-icon{font-size:28px;color:var(--octo-mint);text-shadow:0 0 10px var(--octo-mint-50)}.runtime-browser-details .entity-details .details-header .entity-title{flex:1}.runtime-browser-details .entity-details .details-header .entity-title h3{margin:0 0 6px;font-family:Montserrat,sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--octo-text-color)}.runtime-browser-details .entity-details .details-header .entity-title .entity-type{margin:0;font-family:Roboto Mono,monospace;font-size:.8rem;color:var(--neo-cyan);background:var(--deep-sea-60);padding:4px 10px;border-radius:4px;border:1px solid var(--neo-cyan-30);display:inline-block}.runtime-browser-details .entity-details mm-entity-detail-view{flex:1;display:flex;flex-direction:column;overflow-y:auto}.runtime-browser-details .entity-details .ck-model-details,.runtime-browser-details .entity-details .ck-models-root{padding:24px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;position:relative}.runtime-browser-details .entity-details .ck-model-details:before,.runtime-browser-details .entity-details .ck-models-root:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50)}.runtime-browser-details .entity-details .ck-model-details h3,.runtime-browser-details .entity-details .ck-models-root h3{margin:0 0 20px;font-family:Montserrat,sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--octo-text-color)}.runtime-browser-details .entity-details .ck-model-details p,.runtime-browser-details .entity-details .ck-models-root p{margin:0 0 12px;font-family:Roboto,sans-serif;font-size:.9rem;color:rgba(var(--octo-text-color),.85)}.runtime-browser-details .entity-details .ck-model-details p strong,.runtime-browser-details .entity-details .ck-models-root p strong{font-family:Montserrat,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;color:var(--octo-mint-80);margin-right:12px}.runtime-browser-details .entity-details .ck-model-details p.info-text,.runtime-browser-details .entity-details .ck-models-root p.info-text{color:rgba(var(--octo-text-color),.6);font-style:italic;margin-top:24px;padding:16px 20px;background:linear-gradient(135deg,var(--neo-cyan-10),var(--neo-cyan-05));border:1px solid var(--neo-cyan-30);border-radius:4px 12px}.runtime-browser-details .entity-details .ck-type-details{display:flex;flex-direction:column;height:100%;padding:0}.runtime-browser-details .entity-details .ck-type-details .type-header{margin-bottom:20px;padding:20px 24px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;position:relative}.runtime-browser-details .entity-details .ck-type-details .type-header:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50)}.runtime-browser-details .entity-details .ck-type-details .type-header h3{margin:0 0 12px;font-family:Montserrat,sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--octo-text-color)}.runtime-browser-details .entity-details .ck-type-details .type-header .type-metadata{display:flex;gap:10px;align-items:center}.runtime-browser-details .entity-details .ck-type-details .type-header .type-metadata .badge{padding:6px 14px;border-radius:4px;font-family:Montserrat,sans-serif;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.runtime-browser-details .entity-details .ck-type-details .type-header .type-metadata .badge.abstract{background:linear-gradient(135deg,var(--royal-violet-30),var(--royal-violet-15));border:1px solid var(--royal-violet-50);color:var(--royal-violet-light-20);box-shadow:0 0 10px var(--royal-violet-30)}.runtime-browser-details .entity-details .ck-type-details .type-header .type-metadata .badge.final{background:linear-gradient(135deg,var(--toffee-30),var(--toffee-15));border:1px solid var(--toffee-50);color:var(--toffee);box-shadow:0 0 10px var(--toffee-30)}.runtime-browser-details .entity-details .ck-type-details .type-header .type-metadata .base-type{font-family:Roboto Mono,monospace;font-size:.8rem;color:var(--neo-cyan);background:var(--deep-sea-60);padding:4px 10px;border-radius:4px;border:1px solid var(--neo-cyan-30)}.runtime-browser-details .entity-details .ck-type-details .entities-table{flex:1;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;padding:20px}.runtime-browser-details .entity-details .ck-type-details .entities-table h4{margin:0 0 16px;font-family:Montserrat,sans-serif;font-size:1rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--octo-mint)}.runtime-browser-details .entity-details .ck-type-details .entities-table mm-list-view{flex:1;display:flex;flex-direction:column;overflow:hidden}@keyframes lcars-icon-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@media(max-width:768px){.runtime-browser-details{padding:16px}.runtime-browser-details .no-selection .placeholder-content{padding:24px}.runtime-browser-details .no-selection .placeholder-content .placeholder-icon .k-icon{font-size:48px}.runtime-browser-details .no-selection .placeholder-content h3{font-size:1.1rem}.runtime-browser-details .entity-details .details-header{flex-direction:column;align-items:flex-start;gap:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: EntityDetailViewComponent, selector: "mm-entity-detail-view", inputs: ["entity", "loading", "error", "showHeader", "messages", "showDataMapping", "dataMappings", "sourceDataPoints"], outputs: ["retry", "propertyChange", "navigateToEntity", "addMappingRequested", "removeMappingRequested", "selectMappingTarget", "selectSourceAttributeRequested", "selectTargetAttributeRequested", "mappingChanged", "saveAllMappingsRequested"] }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "rowClass", "messages", "selectable", "columns"], outputs: ["rowClicked"] }, { kind: "directive", type: CkTypeEntitiesDataSourceDirective, selector: "[mmCkTypeEntitiesDataSource]", exportAs: ["mmCkTypeEntitiesDataSource"] }, { kind: "component", type: CreateEditorComponent, selector: "mm-create-editor-component", inputs: ["createInput", "messages"], outputs: ["createOutput", "cancelRequested"] }, { kind: "component", type: UpdateEditorComponent, selector: "mm-update-editor-component", inputs: ["updateInput", "messages"], outputs: ["updateOutput", "cancelRequested"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100%;width:100%}.runtime-browser-details{display:flex;flex-direction:column;flex:1;min-height:0;padding:24px;box-sizing:border-box;overflow-y:auto;background:linear-gradient(180deg,var(--surface-elevated) 0%,var(--deep-sea) 100%)}.runtime-browser-details .no-selection{display:flex;align-items:center;justify-content:center;flex:1;min-height:0}.runtime-browser-details .no-selection .placeholder-content{text-align:center;max-width:400px;padding:40px;background:linear-gradient(135deg,var(--iron-navy-80),var(--surface-elevated-90));border:1px solid var(--octo-mint-30);border-radius:8px 24px;box-shadow:0 0 30px var(--octo-mint-10),inset 0 0 40px var(--octo-mint-03)}.runtime-browser-details .no-selection .placeholder-content .placeholder-icon{margin-bottom:24px}.runtime-browser-details .no-selection .placeholder-content .placeholder-icon .k-icon{font-size:64px;color:var(--octo-mint-50);text-shadow:0 0 20px var(--octo-mint-50);animation:lcars-icon-pulse 3s ease-in-out infinite}.runtime-browser-details .no-selection .placeholder-content h3{margin:0 0 12px;font-family:Montserrat,sans-serif;font-size:1.4rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--octo-mint);text-shadow:0 0 15px var(--octo-mint-50)}.runtime-browser-details .no-selection .placeholder-content p{margin:0;font-family:Montserrat,sans-serif;font-size:.9rem;line-height:1.6;color:rgba(var(--octo-text-color),.7);letter-spacing:.5px}.runtime-browser-details .entity-details{height:100%;display:flex;flex-direction:column;overflow:hidden}.runtime-browser-details .entity-details .details-header{display:flex;align-items:center;gap:16px;padding:16px 20px 16px 24px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;margin-bottom:20px;position:relative;box-shadow:0 4px 20px #0006,0 0 15px var(--octo-mint-08)}.runtime-browser-details .entity-details .details-header:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50);border-radius:4px 0 0 4px}.runtime-browser-details .entity-details .details-header .entity-icon{font-size:28px;color:var(--octo-mint);text-shadow:0 0 10px var(--octo-mint-50)}.runtime-browser-details .entity-details .details-header .entity-title{flex:1}.runtime-browser-details .entity-details .details-header .entity-title h3{margin:0 0 6px;font-family:Montserrat,sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--octo-text-color)}.runtime-browser-details .entity-details .details-header .entity-title .entity-type{margin:0;font-family:Roboto Mono,monospace;font-size:.8rem;color:var(--neo-cyan);background:var(--deep-sea-60);padding:4px 10px;border-radius:4px;border:1px solid var(--neo-cyan-30);display:inline-block}.runtime-browser-details .entity-details mm-entity-detail-view{flex:1;display:flex;flex-direction:column;overflow-y:auto}.runtime-browser-details .entity-details .ck-model-details,.runtime-browser-details .entity-details .ck-models-root{padding:24px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;position:relative}.runtime-browser-details .entity-details .ck-model-details:before,.runtime-browser-details .entity-details .ck-models-root:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50)}.runtime-browser-details .entity-details .ck-model-details h3,.runtime-browser-details .entity-details .ck-models-root h3{margin:0 0 20px;font-family:Montserrat,sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--octo-text-color)}.runtime-browser-details .entity-details .ck-model-details p,.runtime-browser-details .entity-details .ck-models-root p{margin:0 0 12px;font-family:Roboto,sans-serif;font-size:.9rem;color:rgba(var(--octo-text-color),.85)}.runtime-browser-details .entity-details .ck-model-details p strong,.runtime-browser-details .entity-details .ck-models-root p strong{font-family:Montserrat,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;color:var(--octo-mint-80);margin-right:12px}.runtime-browser-details .entity-details .ck-model-details p.info-text,.runtime-browser-details .entity-details .ck-models-root p.info-text{color:rgba(var(--octo-text-color),.6);font-style:italic;margin-top:24px;padding:16px 20px;background:linear-gradient(135deg,var(--neo-cyan-10),var(--neo-cyan-05));border:1px solid var(--neo-cyan-30);border-radius:4px 12px}.runtime-browser-details .entity-details .ck-type-details{display:flex;flex-direction:column;height:100%;padding:0}.runtime-browser-details .entity-details .ck-type-details .type-header{margin-bottom:20px;padding:20px 24px;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;position:relative}.runtime-browser-details .entity-details .ck-type-details .type-header:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--octo-mint),var(--neo-cyan),var(--royal-violet));box-shadow:0 0 10px var(--octo-mint-50)}.runtime-browser-details .entity-details .ck-type-details .type-header h3{margin:0 0 12px;font-family:Montserrat,sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--octo-text-color)}.runtime-browser-details .entity-details .ck-type-details .type-header .type-metadata{display:flex;gap:10px;align-items:center}.runtime-browser-details .entity-details .ck-type-details .type-header .type-metadata .badge{padding:6px 14px;border-radius:4px;font-family:Montserrat,sans-serif;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.runtime-browser-details .entity-details .ck-type-details .type-header .type-metadata .badge.abstract{background:linear-gradient(135deg,var(--royal-violet-30),var(--royal-violet-15));border:1px solid var(--royal-violet-50);color:var(--royal-violet-light-20);box-shadow:0 0 10px var(--royal-violet-30)}.runtime-browser-details .entity-details .ck-type-details .type-header .type-metadata .badge.final{background:linear-gradient(135deg,var(--toffee-30),var(--toffee-15));border:1px solid var(--toffee-50);color:var(--toffee);box-shadow:0 0 10px var(--toffee-30)}.runtime-browser-details .entity-details .ck-type-details .type-header .type-metadata .base-type{font-family:Roboto Mono,monospace;font-size:.8rem;color:var(--neo-cyan);background:var(--deep-sea-60);padding:4px 10px;border-radius:4px;border:1px solid var(--neo-cyan-30)}.runtime-browser-details .entity-details .ck-type-details .entities-table{flex:1;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,var(--iron-navy),var(--surface-elevated));border:1px solid var(--octo-mint-30);border-radius:4px 16px;padding:20px}.runtime-browser-details .entity-details .ck-type-details .entities-table h4{margin:0 0 16px;font-family:Montserrat,sans-serif;font-size:1rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--octo-mint)}.runtime-browser-details .entity-details .ck-type-details .entities-table mm-list-view{flex:1;display:flex;flex-direction:column;overflow:hidden}@keyframes lcars-icon-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@media(max-width:768px){.runtime-browser-details{padding:16px}.runtime-browser-details .no-selection .placeholder-content{padding:24px}.runtime-browser-details .no-selection .placeholder-content .placeholder-icon .k-icon{font-size:48px}.runtime-browser-details .no-selection .placeholder-content h3{font-size:1.1rem}.runtime-browser-details .entity-details .details-header{flex-direction:column;align-items:flex-start;gap:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: EntityDetailViewComponent, selector: "mm-entity-detail-view", inputs: ["entity", "loading", "error", "showHeader", "messages", "showDataMapping", "dataMappings", "sourceDataPoints", "expressionValidator"], outputs: ["retry", "propertyChange", "navigateToEntity", "addMappingRequested", "removeMappingRequested", "selectMappingTarget", "selectSourceAttributeRequested", "selectTargetAttributeRequested", "mappingChanged", "saveAllMappingsRequested"] }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "rowClass", "messages", "selectable", "columns"], outputs: ["rowClicked"] }, { kind: "directive", type: CkTypeEntitiesDataSourceDirective, selector: "[mmCkTypeEntitiesDataSource]", exportAs: ["mmCkTypeEntitiesDataSource"] }, { kind: "component", type: CreateEditorComponent, selector: "mm-create-editor-component", inputs: ["createInput", "messages"], outputs: ["createOutput", "cancelRequested"] }, { kind: "component", type: UpdateEditorComponent, selector: "mm-update-editor-component", inputs: ["updateInput", "messages"], outputs: ["updateOutput", "cancelRequested"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RuntimeBrowserDetailsComponent, decorators: [{
             type: Component,
@@ -12849,6 +13635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 [showDataMapping]="showDataMapping"
                 [dataMappings]="dataMappings"
                 [sourceDataPoints]="sourceDataPoints"
+                [expressionValidator]="expressionValidator"
                 (retry)="loadFullEntityDetails()"
                 (navigateToEntity)="
                   navigateToEntity($event.rtId, $event.ckTypeId)
@@ -12959,6 +13746,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], dataSourceDirective: [{
                 type: ViewChild,
                 args: ["dir", { static: false }]
+            }], expressionValidator: [{
+                type: Input
             }] } });
 
 class RuntimeBrowserComponent {
@@ -12977,6 +13766,11 @@ class RuntimeBrowserComponent {
     isEditing = false;
     messages = input({}, ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
     showDataMapping = input(true, ...(ngDevMode ? [{ debugName: "showDataMapping" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional expression validator function for DataPointMapping expressions.
+     * Passed through to RuntimeBrowserDetailsComponent → EntityDetailViewComponent → DataMappingListComponent.
+     */
+    expressionValidator = input(undefined, ...(ngDevMode ? [{ debugName: "expressionValidator" }] : /* istanbul ignore next */ []));
     resolvedMessages = computed(() => ({
         ...DEFAULT_RUNTIME_BROWSER_MESSAGES,
         ...this.messages(),
@@ -13538,7 +14332,7 @@ class RuntimeBrowserComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RuntimeBrowserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: RuntimeBrowserComponent, isStandalone: true, selector: "mm-runtime-browser", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, showDataMapping: { classPropertyName: "showDataMapping", publicName: "showDataMapping", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "treeDetail", first: true, predicate: ["treeDetail"], descendants: true }, { propertyName: "detailsPanel", first: true, predicate: ["detailsPanel"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: RuntimeBrowserComponent, isStandalone: true, selector: "mm-runtime-browser", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, showDataMapping: { classPropertyName: "showDataMapping", publicName: "showDataMapping", isSignal: true, isRequired: false, transformFunction: null }, expressionValidator: { classPropertyName: "expressionValidator", publicName: "expressionValidator", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "treeDetail", first: true, predicate: ["treeDetail"], descendants: true }, { propertyName: "detailsPanel", first: true, predicate: ["detailsPanel"], descendants: true }], ngImport: i0, template: `
     <div class="runtime-browser-container kendo-theme-provider">
       <!-- LCARS Header -->
       <div class="lcars-page-header">
@@ -13580,6 +14374,7 @@ class RuntimeBrowserComponent {
             [selectedItem]="selectedItem"
             [messages]="resolvedMessages()"
             [showDataMapping]="showDataMapping()"
+            [expressionValidator]="expressionValidator()"
             (entitySaved)="onEntitySaved($event)"
           >
           </mm-runtime-browser-details>
@@ -13599,7 +14394,7 @@ class RuntimeBrowserComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".runtime-browser-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}::ng-deep mm-base-tree-detail .k-splitter{background:transparent;border:none}::ng-deep mm-base-tree-detail .k-splitter .k-splitbar{background:linear-gradient(180deg,var(--octo-mint-30),transparent);width:4px!important}::ng-deep mm-base-tree-detail .k-splitter .k-splitbar:hover{background:linear-gradient(180deg,var(--octo-mint-50),var(--octo-mint-20))}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf{font-family:Roboto,sans-serif;transition:all .2s ease;border-radius:4px}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf:hover{background:var(--octo-mint-10);color:var(--octo-mint)}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf.k-selected{background:linear-gradient(90deg,var(--octo-mint-20),transparent);color:var(--octo-mint);border-left:3px solid var(--octo-mint)}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf.k-selected:hover{background:linear-gradient(90deg,var(--octo-mint-25),transparent)}::ng-deep mm-base-tree-detail .toolbar{background:linear-gradient(90deg,var(--octo-mint-05),transparent);border-bottom:1px solid var(--octo-mint-20)}::ng-deep mm-base-tree-detail .base-tree-detail-container{height:100%;display:flex;flex-direction:column}::ng-deep mm-base-tree-detail .base-tree-detail-container .k-splitter{flex:1;min-height:0}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane{display:flex!important;flex-direction:column!important;height:100%!important}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane>mm-runtime-browser-details{display:flex!important;flex:1!important;min-height:0!important;height:100%!important}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane>mm-runtime-browser-details>.runtime-browser-details{flex:1;display:flex;flex-direction:column;min-height:0}@media(max-width:1024px){.runtime-browser-container{padding:12px;gap:12px}}@media(max-width:768px){.runtime-browser-container{padding:8px;gap:10px}}\n"], dependencies: [{ kind: "component", type: BaseTreeDetailComponent, selector: "mm-base-tree-detail", inputs: ["treeDataSource", "leftPaneSize", "leftToolbarActions", "rightToolbarActions"], outputs: ["nodeSelected", "nodeDropped"] }, { kind: "component", type: RuntimeBrowserDetailsComponent, selector: "mm-runtime-browser-details", inputs: ["selectedItem", "showDataMapping", "messages"], outputs: ["entitySaved"] }] });
+  `, isInline: true, styles: [".runtime-browser-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}::ng-deep mm-base-tree-detail .k-splitter{background:transparent;border:none}::ng-deep mm-base-tree-detail .k-splitter .k-splitbar{background:linear-gradient(180deg,var(--octo-mint-30),transparent);width:4px!important}::ng-deep mm-base-tree-detail .k-splitter .k-splitbar:hover{background:linear-gradient(180deg,var(--octo-mint-50),var(--octo-mint-20))}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf{font-family:Roboto,sans-serif;transition:all .2s ease;border-radius:4px}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf:hover{background:var(--octo-mint-10);color:var(--octo-mint)}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf.k-selected{background:linear-gradient(90deg,var(--octo-mint-20),transparent);color:var(--octo-mint);border-left:3px solid var(--octo-mint)}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf.k-selected:hover{background:linear-gradient(90deg,var(--octo-mint-25),transparent)}::ng-deep mm-base-tree-detail .toolbar{background:linear-gradient(90deg,var(--octo-mint-05),transparent);border-bottom:1px solid var(--octo-mint-20)}::ng-deep mm-base-tree-detail .base-tree-detail-container{height:100%;display:flex;flex-direction:column}::ng-deep mm-base-tree-detail .base-tree-detail-container .k-splitter{flex:1;min-height:0}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane{display:flex!important;flex-direction:column!important;height:100%!important}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane>mm-runtime-browser-details{display:flex!important;flex:1!important;min-height:0!important;height:100%!important}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane>mm-runtime-browser-details>.runtime-browser-details{flex:1;display:flex;flex-direction:column;min-height:0}@media(max-width:1024px){.runtime-browser-container{padding:12px;gap:12px}}@media(max-width:768px){.runtime-browser-container{padding:8px;gap:10px}}\n"], dependencies: [{ kind: "component", type: BaseTreeDetailComponent, selector: "mm-base-tree-detail", inputs: ["treeDataSource", "leftPaneSize", "leftToolbarActions", "rightToolbarActions"], outputs: ["nodeSelected", "nodeDropped"] }, { kind: "component", type: RuntimeBrowserDetailsComponent, selector: "mm-runtime-browser-details", inputs: ["selectedItem", "showDataMapping", "messages", "expressionValidator"], outputs: ["entitySaved"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RuntimeBrowserComponent, decorators: [{
             type: Component,
@@ -13645,6 +14440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             [selectedItem]="selectedItem"
             [messages]="resolvedMessages()"
             [showDataMapping]="showDataMapping()"
+            [expressionValidator]="expressionValidator()"
             (entitySaved)="onEntitySaved($event)"
           >
           </mm-runtime-browser-details>
@@ -13665,7 +14461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       </div>
     </div>
   `, styles: [".runtime-browser-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}::ng-deep mm-base-tree-detail .k-splitter{background:transparent;border:none}::ng-deep mm-base-tree-detail .k-splitter .k-splitbar{background:linear-gradient(180deg,var(--octo-mint-30),transparent);width:4px!important}::ng-deep mm-base-tree-detail .k-splitter .k-splitbar:hover{background:linear-gradient(180deg,var(--octo-mint-50),var(--octo-mint-20))}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf{font-family:Roboto,sans-serif;transition:all .2s ease;border-radius:4px}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf:hover{background:var(--octo-mint-10);color:var(--octo-mint)}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf.k-selected{background:linear-gradient(90deg,var(--octo-mint-20),transparent);color:var(--octo-mint);border-left:3px solid var(--octo-mint)}::ng-deep mm-base-tree-detail kendo-treeview .k-treeview-item .k-treeview-leaf.k-selected:hover{background:linear-gradient(90deg,var(--octo-mint-25),transparent)}::ng-deep mm-base-tree-detail .toolbar{background:linear-gradient(90deg,var(--octo-mint-05),transparent);border-bottom:1px solid var(--octo-mint-20)}::ng-deep mm-base-tree-detail .base-tree-detail-container{height:100%;display:flex;flex-direction:column}::ng-deep mm-base-tree-detail .base-tree-detail-container .k-splitter{flex:1;min-height:0}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane{display:flex!important;flex-direction:column!important;height:100%!important}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane>mm-runtime-browser-details{display:flex!important;flex:1!important;min-height:0!important;height:100%!important}::ng-deep mm-base-tree-detail kendo-splitter-pane.detail-pane>mm-runtime-browser-details>.runtime-browser-details{flex:1;display:flex;flex-direction:column;min-height:0}@media(max-width:1024px){.runtime-browser-container{padding:12px;gap:12px}}@media(max-width:768px){.runtime-browser-container{padding:8px;gap:10px}}\n"] }]
-        }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], showDataMapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDataMapping", required: false }] }], treeDetail: [{
+        }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], showDataMapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDataMapping", required: false }] }], expressionValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "expressionValidator", required: false }] }], treeDetail: [{
                 type: ViewChild,
                 args: ['treeDetail', { static: false }]
             }], detailsPanel: [{
@@ -13709,7 +14505,7 @@ class RuntimeBrowserPageComponent {
         ? this.injectedMessages
         : DEFAULT_RUNTIME_BROWSER_MESSAGES;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RuntimeBrowserPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RuntimeBrowserPageComponent, isStandalone: true, selector: "mm-runtime-browser-page", ngImport: i0, template: `<mm-runtime-browser [messages]="messages" />`, isInline: true, dependencies: [{ kind: "component", type: RuntimeBrowserComponent, selector: "mm-runtime-browser", inputs: ["messages", "showDataMapping"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RuntimeBrowserPageComponent, isStandalone: true, selector: "mm-runtime-browser-page", ngImport: i0, template: `<mm-runtime-browser [messages]="messages" />`, isInline: true, dependencies: [{ kind: "component", type: RuntimeBrowserComponent, selector: "mm-runtime-browser", inputs: ["messages", "showDataMapping", "expressionValidator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RuntimeBrowserPageComponent, decorators: [{
             type: Component,
@@ -13778,6 +14574,630 @@ function createRuntimeBrowserRoutes(options) {
     return [mainRoute, entityRoute];
 }
 
+const GetDataPointMappingsDocumentDto = gql `
+    query getDataPointMappings($ckTypeId: String!, $after: String, $first: Int, $fieldFilters: [FieldFilter], $sort: [Sort]) {
+  runtime {
+    runtimeEntities(
+      ckId: $ckTypeId
+      after: $after
+      first: $first
+      fieldFilter: $fieldFilters
+      sortOrder: $sort
+    ) {
+      totalCount
+      pageInfo {
+        endCursor
+        hasNextPage
+      }
+      items {
+        rtId
+        ckTypeId
+        rtWellKnownName
+        attributes(resolveEnumValuesToNames: true) {
+          items {
+            attributeName
+            value
+          }
+        }
+        associations {
+          definitions(direction: OUTBOUND, first: 10) {
+            items {
+              targetRtId
+              targetCkTypeId
+              originRtId
+              originCkTypeId
+              ckAssociationRoleId
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+class GetDataPointMappingsDtoGQL extends i1$3.Query {
+    document = GetDataPointMappingsDocumentDto;
+    constructor(apollo) {
+        super(apollo);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GetDataPointMappingsDtoGQL, deps: [{ token: i1$3.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GetDataPointMappingsDtoGQL, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GetDataPointMappingsDtoGQL, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$3.Apollo }] });
+
+const DATA_POINT_MAPPING_CK_TYPE = 'System.Communication/DataPointMapping';
+class DataMappingOverviewComponent {
+    getMappingsGQL = inject(GetDataPointMappingsDtoGQL);
+    getEntityByIdGQL = inject(GetRuntimeEntityByIdDtoGQL);
+    updateEntitiesGQL = inject(UpdateRuntimeEntitiesDtoGQL);
+    deleteEntitiesGQL = inject(DeleteEntitiesDtoGQL);
+    navigateToEntity = new EventEmitter();
+    // State
+    mappings = signal([], ...(ngDevMode ? [{ debugName: "mappings" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    selectedMapping = signal(null, ...(ngDevMode ? [{ debugName: "selectedMapping" }] : /* istanbul ignore next */ []));
+    pageSize = 20;
+    skip = 0;
+    gridData = computed(() => ({
+        data: this.mappings().slice(this.skip, this.skip + this.pageSize),
+        total: this.mappings().length,
+    }), ...(ngDevMode ? [{ debugName: "gridData" }] : /* istanbul ignore next */ []));
+    summary = computed(() => {
+        const items = this.mappings();
+        return {
+            total: items.length,
+            valid: items.filter(m => m.validationStatus === 'valid').length,
+            warnings: items.filter(m => m.validationStatus === 'warning').length,
+            errors: items.filter(m => m.validationStatus === 'error').length,
+            disabled: items.filter(m => !m.enabled).length,
+        };
+    }, ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    refreshIcon = arrowRotateCwIcon;
+    checkIcon = checkCircleIcon;
+    warnIcon = exclamationCircleIcon;
+    errorIcon = xCircleIcon;
+    deleteIcon = trashIcon;
+    ngOnInit() {
+        this.loadMappings();
+    }
+    async loadMappings() {
+        this.loading.set(true);
+        try {
+            const result = await firstValueFrom(this.getMappingsGQL.fetch({
+                variables: {
+                    ckTypeId: DATA_POINT_MAPPING_CK_TYPE,
+                    first: 500,
+                },
+                fetchPolicy: 'network-only',
+            }));
+            const entities = result.data?.runtime?.runtimeEntities?.items ?? [];
+            const items = entities
+                .filter((e) => e != null)
+                .map(entity => this.mapEntityToOverviewItem(entity));
+            // Run validation
+            items.forEach(item => this.validateMapping(item, items));
+            this.mappings.set(items);
+            // Resolve entity names in background (non-blocking)
+            this.resolveEntityNames(items);
+        }
+        catch (err) {
+            console.error('Error loading DataPointMappings:', err);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    onPageChange(event) {
+        this.skip = event.skip;
+        this.pageSize = event.take;
+    }
+    onCellClick(event) {
+        this.selectedMapping.set(event.dataItem);
+    }
+    async onToggleEnabled(item, enabled) {
+        try {
+            await firstValueFrom(this.updateEntitiesGQL.mutate({
+                variables: {
+                    entities: [{
+                            rtId: item.rtId,
+                            item: {
+                                ckTypeId: DATA_POINT_MAPPING_CK_TYPE,
+                                attributes: [{ attributeName: 'Enabled', value: enabled }],
+                            },
+                        }],
+                },
+            }));
+            item.enabled = enabled;
+            this.mappings.set([...this.mappings()]);
+        }
+        catch (err) {
+            console.error('Error toggling mapping enabled state:', err);
+        }
+    }
+    async onDeleteMapping(item) {
+        try {
+            await firstValueFrom(this.deleteEntitiesGQL.mutate({
+                variables: {
+                    rtEntityIds: [{ rtId: item.rtId, ckTypeId: DATA_POINT_MAPPING_CK_TYPE }],
+                    deleteStrategy: DeleteStrategiesDto.EraseDto,
+                },
+            }));
+            const updated = this.mappings().filter(m => m.rtId !== item.rtId);
+            this.mappings.set(updated);
+            if (this.selectedMapping()?.rtId === item.rtId) {
+                this.selectedMapping.set(null);
+            }
+        }
+        catch (err) {
+            console.error('Error deleting mapping:', err);
+        }
+    }
+    mapEntityToOverviewItem(entity) {
+        const attrs = entity.attributes?.items ?? [];
+        const assocs = entity.associations?.definitions?.items ?? [];
+        const getAttr = (name) => attrs.find(a => a?.attributeName === name)?.value ?? '';
+        const mapsFrom = assocs.find(a => a && String(a.ckAssociationRoleId).includes('MapsFrom'));
+        const mapsTo = assocs.find(a => a && String(a.ckAssociationRoleId).includes('MapsTo'));
+        const enabledRaw = attrs.find(a => a?.attributeName === 'Enabled')?.value;
+        const enabled = enabledRaw === true || enabledRaw === 'true' || enabledRaw === 'True';
+        return {
+            rtId: String(entity.rtId),
+            name: getAttr('Name') || `Mapping ${String(entity.rtId).slice(-6)}`,
+            enabled,
+            sourceAttributePath: getAttr('SourceAttributePath'),
+            mappingExpression: getAttr('MappingExpression'),
+            targetAttributePath: getAttr('TargetAttributePath'),
+            sourceRtId: mapsFrom ? String(mapsFrom.targetRtId) : '',
+            sourceCkTypeId: mapsFrom ? String(mapsFrom.targetCkTypeId) : '',
+            sourceName: '',
+            targetRtId: mapsTo ? String(mapsTo.targetRtId) : '',
+            targetCkTypeId: mapsTo ? String(mapsTo.targetCkTypeId) : '',
+            targetName: '',
+            validationStatus: 'valid',
+            validationMessages: [],
+        };
+    }
+    validateMapping(item, allItems) {
+        const messages = [];
+        // Error: No source entity
+        if (!item.sourceRtId) {
+            messages.push({ level: 'error', code: 'SOURCE_MISSING', message: 'No MapsFrom source entity configured' });
+        }
+        // Error: No target entity
+        if (!item.targetRtId) {
+            messages.push({ level: 'error', code: 'TARGET_MISSING', message: 'No MapsTo target entity configured' });
+        }
+        // Error: No target attribute
+        if (!item.targetAttributePath) {
+            messages.push({ level: 'error', code: 'TARGET_ATTR_MISSING', message: 'TargetAttributePath is not set' });
+        }
+        // Warning: Duplicate mapping (same source → same target + attribute)
+        const duplicates = allItems.filter(m => m.rtId !== item.rtId &&
+            m.sourceRtId === item.sourceRtId &&
+            m.sourceAttributePath === item.sourceAttributePath &&
+            m.targetRtId === item.targetRtId &&
+            m.targetAttributePath === item.targetAttributePath);
+        if (duplicates.length > 0) {
+            messages.push({ level: 'warning', code: 'DUPLICATE', message: 'Duplicate mapping — same source and target attribute' });
+        }
+        item.validationMessages = messages;
+        item.validationStatus = messages.some(m => m.level === 'error')
+            ? 'error'
+            : messages.some(m => m.level === 'warning')
+                ? 'warning'
+                : 'valid';
+    }
+    /**
+     * Resolves entity names for all unique source/target rtIds.
+     * Updates items in-place and triggers signal update.
+     */
+    async resolveEntityNames(items) {
+        // Collect unique entity references (rtId + ckTypeId pairs)
+        const entityRefs = new Map();
+        for (const item of items) {
+            if (item.sourceRtId && item.sourceCkTypeId) {
+                entityRefs.set(item.sourceRtId, { rtId: item.sourceRtId, ckTypeId: item.sourceCkTypeId });
+            }
+            if (item.targetRtId && item.targetCkTypeId) {
+                entityRefs.set(item.targetRtId, { rtId: item.targetRtId, ckTypeId: item.targetCkTypeId });
+            }
+        }
+        // Load entity names in parallel
+        const nameMap = new Map();
+        const loadPromises = [...entityRefs.values()].map(async (ref) => {
+            try {
+                const result = await firstValueFrom(this.getEntityByIdGQL.fetch({
+                    variables: { rtId: ref.rtId, ckTypeId: ref.ckTypeId },
+                }));
+                const entity = result.data?.runtime?.runtimeEntities?.items?.[0];
+                if (entity) {
+                    const nameAttr = entity.attributes?.items?.find(a => a?.attributeName === 'Name');
+                    const name = nameAttr?.value
+                        ?? entity.rtWellKnownName
+                        ?? '';
+                    if (name) {
+                        nameMap.set(ref.rtId, name);
+                    }
+                }
+            }
+            catch {
+                // Entity not found or access denied — leave name empty
+            }
+        });
+        await Promise.all(loadPromises);
+        // Update items with resolved names
+        let changed = false;
+        for (const item of items) {
+            const sourceName = nameMap.get(item.sourceRtId);
+            if (sourceName && sourceName !== item.sourceName) {
+                item.sourceName = sourceName;
+                changed = true;
+            }
+            const targetName = nameMap.get(item.targetRtId);
+            if (targetName && targetName !== item.targetName) {
+                item.targetName = targetName;
+                changed = true;
+            }
+        }
+        // Trigger signal update to refresh the grid
+        if (changed) {
+            this.mappings.set([...items]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataMappingOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DataMappingOverviewComponent, isStandalone: true, selector: "mm-data-mapping-overview", outputs: { navigateToEntity: "navigateToEntity" }, ngImport: i0, template: `
+    <div class="mapping-overview">
+      <!-- Summary Bar -->
+      <div class="summary-bar">
+        <div class="summary-item">
+          <span class="summary-count">{{ summary().total }}</span>
+          <span class="summary-label">Total</span>
+        </div>
+        <div class="summary-item summary-valid">
+          <span class="summary-count">{{ summary().valid }}</span>
+          <span class="summary-label">Valid</span>
+        </div>
+        <div class="summary-item summary-warnings">
+          <span class="summary-count">{{ summary().warnings }}</span>
+          <span class="summary-label">Warnings</span>
+        </div>
+        <div class="summary-item summary-errors">
+          <span class="summary-count">{{ summary().errors }}</span>
+          <span class="summary-label">Errors</span>
+        </div>
+        <div class="summary-item summary-disabled">
+          <span class="summary-count">{{ summary().disabled }}</span>
+          <span class="summary-label">Disabled</span>
+        </div>
+        <div class="summary-spacer"></div>
+        <button kendoButton fillMode="flat" size="small" [svgIcon]="refreshIcon"
+          (click)="loadMappings()">Refresh</button>
+      </div>
+
+      <!-- Mapping Grid -->
+      <kendo-grid
+        [data]="gridData()"
+        [pageSize]="pageSize"
+        [skip]="skip"
+        [pageable]="{ buttonCount: 3, pageSizes: [10, 20, 50] }"
+        [sortable]="true"
+        [height]="500"
+        (pageChange)="onPageChange($event)"
+        (cellClick)="onCellClick($event)"
+      >
+        <kendo-grid-column title="" field="validationStatus" [width]="40" [sortable]="false">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            @if (dataItem.validationStatus === 'valid') {
+              <kendo-svgicon [icon]="checkIcon" class="status-valid"></kendo-svgicon>
+            } @else if (dataItem.validationStatus === 'warning') {
+              <kendo-svgicon [icon]="warnIcon" class="status-warning"></kendo-svgicon>
+            } @else {
+              <kendo-svgicon [icon]="errorIcon" class="status-error"></kendo-svgicon>
+            }
+          </ng-template>
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Mapping Name" field="name" [width]="200">
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Source" field="sourceName" [width]="200">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            <span class="entity-ref" (click)="navigateToEntity.emit({ rtId: dataItem.sourceRtId, ckTypeId: dataItem.sourceCkTypeId })">
+              {{ dataItem.sourceName || dataItem.sourceRtId | slice:-8 }}
+            </span>
+            <div class="entity-type-hint">{{ dataItem.sourceCkTypeId }}</div>
+          </ng-template>
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Source Attr" field="sourceAttributePath" [width]="120">
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Expression" field="mappingExpression" [width]="160">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            @if (dataItem.mappingExpression) {
+              <code class="expression-cell">{{ dataItem.mappingExpression }}</code>
+            }
+          </ng-template>
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Target" field="targetName" [width]="200">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            @if (dataItem.targetRtId) {
+              <span class="entity-ref" (click)="navigateToEntity.emit({ rtId: dataItem.targetRtId, ckTypeId: dataItem.targetCkTypeId })">
+                {{ dataItem.targetName || dataItem.targetRtId | slice:-8 }}
+              </span>
+              <div class="entity-type-hint">{{ dataItem.targetCkTypeId }}</div>
+            } @else {
+              <span class="no-target">(no target)</span>
+            }
+          </ng-template>
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Target Attr" field="targetAttributePath" [width]="120">
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Enabled" field="enabled" [width]="80">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            <kendo-switch [checked]="dataItem.enabled" size="small"
+              (valueChange)="onToggleEnabled(dataItem, $event)">
+            </kendo-switch>
+          </ng-template>
+        </kendo-grid-column>
+
+        <kendo-grid-column title="" [width]="50" [sortable]="false">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            <button kendoButton fillMode="flat" size="small" [svgIcon]="deleteIcon"
+              (click)="onDeleteMapping(dataItem); $event.stopPropagation()">
+            </button>
+          </ng-template>
+        </kendo-grid-column>
+      </kendo-grid>
+
+      <!-- Detail Panel (selected mapping) -->
+      @if (selectedMapping()) {
+        <div class="detail-panel">
+          <h4>{{ selectedMapping()!.name || 'Mapping Details' }}</h4>
+          <div class="detail-grid">
+            <div class="detail-row">
+              <label>Source Entity</label>
+              <span class="entity-ref" (click)="navigateToEntity.emit({ rtId: selectedMapping()!.sourceRtId, ckTypeId: selectedMapping()!.sourceCkTypeId })">
+                {{ selectedMapping()!.sourceName || selectedMapping()!.sourceRtId }}
+              </span>
+              <span class="entity-type-hint">{{ selectedMapping()!.sourceCkTypeId }}</span>
+            </div>
+            <div class="detail-row">
+              <label>Source Attribute</label>
+              <span>{{ selectedMapping()!.sourceAttributePath || '(default)' }}</span>
+            </div>
+            <div class="detail-row">
+              <label>Expression</label>
+              <code>{{ selectedMapping()!.mappingExpression || '(none — pass through)' }}</code>
+            </div>
+            <div class="detail-row">
+              <label>Target Entity</label>
+              @if (selectedMapping()!.targetRtId) {
+                <span class="entity-ref" (click)="navigateToEntity.emit({ rtId: selectedMapping()!.targetRtId, ckTypeId: selectedMapping()!.targetCkTypeId })">
+                  {{ selectedMapping()!.targetName || selectedMapping()!.targetRtId }}
+                </span>
+                <span class="entity-type-hint">{{ selectedMapping()!.targetCkTypeId }}</span>
+              } @else {
+                <span class="no-target">(no target configured)</span>
+              }
+            </div>
+            <div class="detail-row">
+              <label>Target Attribute</label>
+              <span>{{ selectedMapping()!.targetAttributePath || '(not set)' }}</span>
+            </div>
+            <div class="detail-row">
+              <label>Enabled</label>
+              <span>{{ selectedMapping()!.enabled ? 'Yes' : 'No' }}</span>
+            </div>
+          </div>
+
+          @if (selectedMapping()!.validationMessages.length > 0) {
+            <div class="validation-section">
+              <h5>Validation</h5>
+              @for (msg of selectedMapping()!.validationMessages; track msg.code) {
+                <div class="validation-msg" [class]="'validation-' + msg.level">
+                  {{ msg.message }}
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+
+      @if (loading()) {
+        <div class="loading-overlay">Loading mappings...</div>
+      }
+    </div>
+  `, isInline: true, styles: [".mapping-overview{display:flex;flex-direction:column;gap:12px;padding:16px}.summary-bar{display:flex;gap:16px;align-items:center;padding:8px 12px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:6px;background:var(--kendo-color-surface-alt, #f8f9fa)}.summary-item{display:flex;flex-direction:column;align-items:center;min-width:60px}.summary-count{font-size:1.2rem;font-weight:700}.summary-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #6c757d)}.summary-valid .summary-count{color:var(--kendo-color-success, #28a745)}.summary-warnings .summary-count{color:var(--kendo-color-warning, #ffc107)}.summary-errors .summary-count{color:var(--kendo-color-error, #dc3545)}.summary-disabled .summary-count{color:var(--kendo-color-subtle, #6c757d)}.summary-spacer{flex:1}.status-valid{color:var(--kendo-color-success, #28a745)}.status-warning{color:var(--kendo-color-warning, #ffc107)}.status-error{color:var(--kendo-color-error, #dc3545)}.entity-ref{cursor:pointer;color:var(--kendo-color-primary, #ff6358);font-family:monospace;font-size:.85rem}.entity-ref:hover{text-decoration:underline}.no-target{color:var(--kendo-color-subtle, #6c757d);font-style:italic}.entity-type-hint{font-size:.7rem;color:var(--kendo-color-subtle, #6c757d);font-family:monospace}.expression-cell{font-size:.85rem;background:var(--kendo-color-surface-alt, #f8f9fa);padding:2px 4px;border-radius:3px}.detail-panel{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:6px;padding:12px 16px}.detail-panel h4{margin:0 0 12px;font-size:.9rem;font-weight:600}.detail-grid{display:grid;grid-template-columns:120px 1fr;gap:6px 12px}.detail-row{display:contents}.detail-row label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #6c757d);padding-top:2px}.detail-row span,.detail-row code{font-size:.85rem}.validation-section{margin-top:12px;padding-top:8px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.validation-section h5{margin:0 0 6px;font-size:.8rem;font-weight:600}.validation-msg{font-size:.8rem;padding:2px 0}.validation-error{color:var(--kendo-color-error, #dc3545)}.validation-warning{color:var(--kendo-color-warning, #ffc107)}.validation-info{color:var(--kendo-color-info, #17a2b8)}.loading-overlay{text-align:center;padding:20px;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: i3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "component", type: i3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SwitchModule }, { kind: "component", type: i5.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataMappingOverviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-data-mapping-overview', standalone: true, imports: [
+                        CommonModule,
+                        ButtonModule,
+                        SVGIconModule,
+                        GridModule,
+                        BadgeModule,
+                        SwitchModule,
+                    ], template: `
+    <div class="mapping-overview">
+      <!-- Summary Bar -->
+      <div class="summary-bar">
+        <div class="summary-item">
+          <span class="summary-count">{{ summary().total }}</span>
+          <span class="summary-label">Total</span>
+        </div>
+        <div class="summary-item summary-valid">
+          <span class="summary-count">{{ summary().valid }}</span>
+          <span class="summary-label">Valid</span>
+        </div>
+        <div class="summary-item summary-warnings">
+          <span class="summary-count">{{ summary().warnings }}</span>
+          <span class="summary-label">Warnings</span>
+        </div>
+        <div class="summary-item summary-errors">
+          <span class="summary-count">{{ summary().errors }}</span>
+          <span class="summary-label">Errors</span>
+        </div>
+        <div class="summary-item summary-disabled">
+          <span class="summary-count">{{ summary().disabled }}</span>
+          <span class="summary-label">Disabled</span>
+        </div>
+        <div class="summary-spacer"></div>
+        <button kendoButton fillMode="flat" size="small" [svgIcon]="refreshIcon"
+          (click)="loadMappings()">Refresh</button>
+      </div>
+
+      <!-- Mapping Grid -->
+      <kendo-grid
+        [data]="gridData()"
+        [pageSize]="pageSize"
+        [skip]="skip"
+        [pageable]="{ buttonCount: 3, pageSizes: [10, 20, 50] }"
+        [sortable]="true"
+        [height]="500"
+        (pageChange)="onPageChange($event)"
+        (cellClick)="onCellClick($event)"
+      >
+        <kendo-grid-column title="" field="validationStatus" [width]="40" [sortable]="false">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            @if (dataItem.validationStatus === 'valid') {
+              <kendo-svgicon [icon]="checkIcon" class="status-valid"></kendo-svgicon>
+            } @else if (dataItem.validationStatus === 'warning') {
+              <kendo-svgicon [icon]="warnIcon" class="status-warning"></kendo-svgicon>
+            } @else {
+              <kendo-svgicon [icon]="errorIcon" class="status-error"></kendo-svgicon>
+            }
+          </ng-template>
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Mapping Name" field="name" [width]="200">
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Source" field="sourceName" [width]="200">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            <span class="entity-ref" (click)="navigateToEntity.emit({ rtId: dataItem.sourceRtId, ckTypeId: dataItem.sourceCkTypeId })">
+              {{ dataItem.sourceName || dataItem.sourceRtId | slice:-8 }}
+            </span>
+            <div class="entity-type-hint">{{ dataItem.sourceCkTypeId }}</div>
+          </ng-template>
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Source Attr" field="sourceAttributePath" [width]="120">
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Expression" field="mappingExpression" [width]="160">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            @if (dataItem.mappingExpression) {
+              <code class="expression-cell">{{ dataItem.mappingExpression }}</code>
+            }
+          </ng-template>
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Target" field="targetName" [width]="200">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            @if (dataItem.targetRtId) {
+              <span class="entity-ref" (click)="navigateToEntity.emit({ rtId: dataItem.targetRtId, ckTypeId: dataItem.targetCkTypeId })">
+                {{ dataItem.targetName || dataItem.targetRtId | slice:-8 }}
+              </span>
+              <div class="entity-type-hint">{{ dataItem.targetCkTypeId }}</div>
+            } @else {
+              <span class="no-target">(no target)</span>
+            }
+          </ng-template>
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Target Attr" field="targetAttributePath" [width]="120">
+        </kendo-grid-column>
+
+        <kendo-grid-column title="Enabled" field="enabled" [width]="80">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            <kendo-switch [checked]="dataItem.enabled" size="small"
+              (valueChange)="onToggleEnabled(dataItem, $event)">
+            </kendo-switch>
+          </ng-template>
+        </kendo-grid-column>
+
+        <kendo-grid-column title="" [width]="50" [sortable]="false">
+          <ng-template kendoGridCellTemplate let-dataItem>
+            <button kendoButton fillMode="flat" size="small" [svgIcon]="deleteIcon"
+              (click)="onDeleteMapping(dataItem); $event.stopPropagation()">
+            </button>
+          </ng-template>
+        </kendo-grid-column>
+      </kendo-grid>
+
+      <!-- Detail Panel (selected mapping) -->
+      @if (selectedMapping()) {
+        <div class="detail-panel">
+          <h4>{{ selectedMapping()!.name || 'Mapping Details' }}</h4>
+          <div class="detail-grid">
+            <div class="detail-row">
+              <label>Source Entity</label>
+              <span class="entity-ref" (click)="navigateToEntity.emit({ rtId: selectedMapping()!.sourceRtId, ckTypeId: selectedMapping()!.sourceCkTypeId })">
+                {{ selectedMapping()!.sourceName || selectedMapping()!.sourceRtId }}
+              </span>
+              <span class="entity-type-hint">{{ selectedMapping()!.sourceCkTypeId }}</span>
+            </div>
+            <div class="detail-row">
+              <label>Source Attribute</label>
+              <span>{{ selectedMapping()!.sourceAttributePath || '(default)' }}</span>
+            </div>
+            <div class="detail-row">
+              <label>Expression</label>
+              <code>{{ selectedMapping()!.mappingExpression || '(none — pass through)' }}</code>
+            </div>
+            <div class="detail-row">
+              <label>Target Entity</label>
+              @if (selectedMapping()!.targetRtId) {
+                <span class="entity-ref" (click)="navigateToEntity.emit({ rtId: selectedMapping()!.targetRtId, ckTypeId: selectedMapping()!.targetCkTypeId })">
+                  {{ selectedMapping()!.targetName || selectedMapping()!.targetRtId }}
+                </span>
+                <span class="entity-type-hint">{{ selectedMapping()!.targetCkTypeId }}</span>
+              } @else {
+                <span class="no-target">(no target configured)</span>
+              }
+            </div>
+            <div class="detail-row">
+              <label>Target Attribute</label>
+              <span>{{ selectedMapping()!.targetAttributePath || '(not set)' }}</span>
+            </div>
+            <div class="detail-row">
+              <label>Enabled</label>
+              <span>{{ selectedMapping()!.enabled ? 'Yes' : 'No' }}</span>
+            </div>
+          </div>
+
+          @if (selectedMapping()!.validationMessages.length > 0) {
+            <div class="validation-section">
+              <h5>Validation</h5>
+              @for (msg of selectedMapping()!.validationMessages; track msg.code) {
+                <div class="validation-msg" [class]="'validation-' + msg.level">
+                  {{ msg.message }}
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+
+      @if (loading()) {
+        <div class="loading-overlay">Loading mappings...</div>
+      }
+    </div>
+  `, styles: [".mapping-overview{display:flex;flex-direction:column;gap:12px;padding:16px}.summary-bar{display:flex;gap:16px;align-items:center;padding:8px 12px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:6px;background:var(--kendo-color-surface-alt, #f8f9fa)}.summary-item{display:flex;flex-direction:column;align-items:center;min-width:60px}.summary-count{font-size:1.2rem;font-weight:700}.summary-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #6c757d)}.summary-valid .summary-count{color:var(--kendo-color-success, #28a745)}.summary-warnings .summary-count{color:var(--kendo-color-warning, #ffc107)}.summary-errors .summary-count{color:var(--kendo-color-error, #dc3545)}.summary-disabled .summary-count{color:var(--kendo-color-subtle, #6c757d)}.summary-spacer{flex:1}.status-valid{color:var(--kendo-color-success, #28a745)}.status-warning{color:var(--kendo-color-warning, #ffc107)}.status-error{color:var(--kendo-color-error, #dc3545)}.entity-ref{cursor:pointer;color:var(--kendo-color-primary, #ff6358);font-family:monospace;font-size:.85rem}.entity-ref:hover{text-decoration:underline}.no-target{color:var(--kendo-color-subtle, #6c757d);font-style:italic}.entity-type-hint{font-size:.7rem;color:var(--kendo-color-subtle, #6c757d);font-family:monospace}.expression-cell{font-size:.85rem;background:var(--kendo-color-surface-alt, #f8f9fa);padding:2px 4px;border-radius:3px}.detail-panel{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:6px;padding:12px 16px}.detail-panel h4{margin:0 0 12px;font-size:.9rem;font-weight:600}.detail-grid{display:grid;grid-template-columns:120px 1fr;gap:6px 12px}.detail-row{display:contents}.detail-row label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #6c757d);padding-top:2px}.detail-row span,.detail-row code{font-size:.85rem}.validation-section{margin-top:12px;padding-top:8px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.validation-section h5{margin:0 0 6px;font-size:.8rem;font-weight:600}.validation-msg{font-size:.8rem;padding:2px 0}.validation-error{color:var(--kendo-color-error, #dc3545)}.validation-warning{color:var(--kendo-color-warning, #ffc107)}.validation-info{color:var(--kendo-color-info, #17a2b8)}.loading-overlay{text-align:center;padding:20px;color:var(--kendo-color-subtle, #6c757d)}\n"] }]
+        }], propDecorators: { navigateToEntity: [{
+                type: Output
+            }] } });
+
 class TenantSwitcherComponent {
     currentTenantId = null;
     allowedTenants = [];
@@ -13955,5 +15375,5 @@ function provideOctoUi() {
  * Generated bundle index. Do not edit.
  */
 
-export { AssociationValidationService, AttributeSelectorDialogComponent, AttributeSelectorDialogService, AttributeSortSelectorDialogComponent, AttributeSortSelectorDialogService, AttributeValueTypeDto, CkTypeSelectorDialogComponent, CkTypeSelectorDialogService, CkTypeSelectorInputComponent, DEFAULT_RUNTIME_BROWSER_MESSAGES, DefaultPropertyCategory, EntityDetailComponent, EntityIdInfoComponent, EntitySelectorDialogComponent, EntitySelectorDialogService, FieldFilterEditorComponent, OctoGraphQlDataSource, OctoGraphQlHierarchyDataSource, OctoLoaderComponent, PropertyConverterService, PropertyDisplayMode, PropertyGridComponent, PropertyValueDisplayComponent, RUNTIME_BROWSER_MESSAGES, RtEntityIdHelper, RuntimeBrowserComponent, RuntimeBrowserOutletComponent, RuntimeBrowserPageComponent, RuntimeBrowserStateService, RuntimeEntityVariableDialogComponent, RuntimeEntityVariableDialogService, TenantSwitcherComponent, account_tree, add, analytics, app_registration, article, botService, category, chat, checklist, code, component_exchange, computer, createRuntimeBrowserRoutes, customer, dashboard, event_list, graphic_eq, group, identityService, insert_link, manage_accounts, more_time, notifications, page_info, pages, person_search, playlist_add_check, pool, power, provideOctoUi, publicIcon, query_builder, schedule_send, settings, sort, storage, swagger, swagger_asset, swagger_bot, swagger_communication, swagger_identity, team_dashboard, tenancy, text_snippet, travel_explore, user_diagnostics, webhook, work };
+export { AssociationValidationService, AttributeSelectorDialogComponent, AttributeSelectorDialogService, AttributeSortSelectorDialogComponent, AttributeSortSelectorDialogService, AttributeValueTypeDto, CkTypeSelectorDialogComponent, CkTypeSelectorDialogService, CkTypeSelectorInputComponent, DEFAULT_RUNTIME_BROWSER_MESSAGES, DataMappingOverviewComponent, DefaultPropertyCategory, EntityDetailComponent, EntityIdInfoComponent, EntitySelectorDialogComponent, EntitySelectorDialogService, FieldFilterEditorComponent, OctoGraphQlDataSource, OctoGraphQlHierarchyDataSource, OctoLoaderComponent, PropertyConverterService, PropertyDisplayMode, PropertyGridComponent, PropertyValueDisplayComponent, RUNTIME_BROWSER_MESSAGES, RecordDetailDialogComponent, RtEntityIdHelper, RuntimeBrowserComponent, RuntimeBrowserOutletComponent, RuntimeBrowserPageComponent, RuntimeBrowserStateService, RuntimeEntityVariableDialogComponent, RuntimeEntityVariableDialogService, TenantSwitcherComponent, account_tree, add, analytics, app_registration, article, botService, category, chat, checklist, code, component_exchange, computer, createRuntimeBrowserRoutes, customer, dashboard, event_list, graphic_eq, group, identityService, insert_link, manage_accounts, more_time, notifications, page_info, pages, person_search, playlist_add_check, pool, power, provideOctoUi, publicIcon, query_builder, schedule_send, settings, sort, storage, swagger, swagger_asset, swagger_bot, swagger_communication, swagger_identity, team_dashboard, tenancy, text_snippet, travel_explore, user_diagnostics, webhook, work };
 //# sourceMappingURL=meshmakers-octo-ui.mjs.map