@meshmakers/octo-meshboard 3.3.490 → 3.3.510

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -1,5 +1,5 @@
 import { firstValueFrom, from, map, Observable, of, catchError, interval } from 'rxjs';
-import { FieldFilterOperatorsDto, CkTypeSelectorService, DeleteStrategiesDto, AssociationModOptionsDto, CkModelService, AttributeSelectorService, GraphQL, GetCkTypeAvailableQueryColumnsDtoGQL, SortOrdersDto, HealthService, TENANT_ID_PROVIDER, AssetRepoService, JobManagementService } from '@meshmakers/octo-services';
+import { FieldFilterOperatorsDto, CkTypeSelectorService, DeleteStrategiesDto, AssociationModOptionsDto, CkModelService, GraphDirectionDto, AttributeSelectorService, GraphQL, GetCkTypeAvailableQueryColumnsDtoGQL, SortOrdersDto, HealthService, TENANT_ID_PROVIDER, AssetRepoService, JobManagementService } from '@meshmakers/octo-services';
 export { TENANT_ID_PROVIDER } from '@meshmakers/octo-services';
 import * as i0 from '@angular/core';
 import { Injectable, inject, EventEmitter, forwardRef, Output, Input, ViewChild, Component, Injector, EnvironmentInjector, ApplicationRef, signal, computed, Directive, makeEnvironmentProviders, provideAppInitializer, InjectionToken, effect } from '@angular/core';
@@ -2586,6 +2586,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1.Apollo }] });
 
+const GetAssociationTargetsDocumentDto = gql `
+    query getAssociationTargets($rtId: OctoObjectId!, $ckTypeId: String!, $targetCkTypeId: String!, $roleId: String!, $direction: GraphDirection!, $first: Int, $attributeNames: [String]) {
+  runtime {
+    runtimeEntities(rtId: $rtId, ckId: $ckTypeId, first: 1) {
+      items {
+        associations {
+          targets(
+            ckId: $targetCkTypeId
+            roleId: $roleId
+            direction: $direction
+            first: $first
+          ) {
+            totalCount
+            items {
+              rtId
+              ckTypeId
+              rtWellKnownName
+              attributes(attributeNames: $attributeNames, resolveEnumValuesToNames: true) {
+                items {
+                  attributeName
+                  value
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+class GetAssociationTargetsDtoGQL extends i1.Query {
+    document = GetAssociationTargetsDocumentDto;
+    constructor(apollo) {
+        super(apollo);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GetAssociationTargetsDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GetAssociationTargetsDtoGQL, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GetAssociationTargetsDtoGQL, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Apollo }] });
+
+const GetCkTypeAttributesForMeshboardDocumentDto = gql `
+    query getCkTypeAttributesForMeshboard($ckTypeId: String!, $first: Int) {
+  constructionKit {
+    types(rtCkId: $ckTypeId, first: 1) {
+      items {
+        rtCkTypeId
+        attributes(first: $first) {
+          items {
+            attributeName
+            attributeValueType
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+class GetCkTypeAttributesForMeshboardDtoGQL extends i1.Query {
+    document = GetCkTypeAttributesForMeshboardDocumentDto;
+    constructor(apollo) {
+        super(apollo);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GetCkTypeAttributesForMeshboardDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GetCkTypeAttributesForMeshboardDtoGQL, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GetCkTypeAttributesForMeshboardDtoGQL, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Apollo }] });
+
 /**
  * Service for resolving MeshBoard variables in filter values.
  * Variables use the syntax $variableName and are replaced at query execution time.
@@ -2734,6 +2812,8 @@ class MeshBoardDataService {
     getCkModelsWithStateGQL = inject(GetCkModelsWithStateDtoGQL);
     getEntitiesByCkTypeGQL = inject(GetEntitiesByCkTypeDtoGQL);
     executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    getAssociationTargetsGQL = inject(GetAssociationTargetsDtoGQL);
+    getCkTypeAttributesGQL = inject(GetCkTypeAttributesForMeshboardDtoGQL);
     apollo = inject(Apollo);
     stateService = inject(MeshBoardStateService);
     variableService = inject(MeshBoardVariableService);
@@ -3050,6 +3130,63 @@ class MeshBoardDataService {
         }
     }
     // ============================================================================
+    // Association Target Queries
+    // ============================================================================
+    /**
+     * Fetches target entities of an association group with their attributes.
+     * Uses the associations.targets() GraphQL endpoint.
+     */
+    fetchAssociationTargets(sourceRtId, sourceCkTypeId, targetCkTypeId, roleId, direction, attributeNames, first) {
+        const graphDirection = direction === 'out' ? GraphDirectionDto.OutboundDto : GraphDirectionDto.InboundDto;
+        return this.getAssociationTargetsGQL.fetch({
+            variables: {
+                rtId: sourceRtId,
+                ckTypeId: sourceCkTypeId,
+                targetCkTypeId,
+                roleId,
+                direction: graphDirection,
+                first: first ?? 100,
+                attributeNames: attributeNames ?? null
+            }
+        }).pipe(map(result => {
+            const entity = result.data?.runtime?.runtimeEntities?.items?.[0];
+            const targets = entity?.associations?.targets?.items ?? [];
+            return targets
+                .filter((t) => t !== null)
+                .map(t => ({
+                rtId: t.rtId,
+                ckTypeId: t.ckTypeId,
+                rtWellKnownName: t.rtWellKnownName ?? undefined,
+                attributes: (t.attributes?.items ?? [])
+                    .filter((a) => a !== null && a.attributeName !== null)
+                    .map(a => ({
+                    attributeName: a.attributeName,
+                    value: a.value
+                }))
+            }));
+        }));
+    }
+    /**
+     * Fetches CK type attribute definitions (name + type) for config dialog.
+     */
+    fetchCkTypeAttributes(ckTypeId) {
+        return this.getCkTypeAttributesGQL.fetch({
+            variables: {
+                ckTypeId,
+                first: 200
+            }
+        }).pipe(map(result => {
+            const ckType = result.data?.constructionKit?.types?.items?.[0];
+            const attrs = ckType?.attributes?.items ?? [];
+            return attrs
+                .filter((a) => a !== null)
+                .map(a => ({
+                attributeName: a.attributeName,
+                attributeValueType: a.attributeValueType
+            }));
+        }));
+    }
+    // ============================================================================
     // Private Helper Methods
     // ============================================================================
     /**
@@ -5506,6 +5643,9 @@ class EntityAssociationsWidgetComponent {
     _data = signal(null, ...(ngDevMode ? [{ debugName: "_data" }] : []));
     _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
     _expandedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "_expandedGroups" }] : []));
+    // Cache for target entity attributes per group (key = roleId_direction)
+    _targetAttributesCache = signal(new Map(), ...(ngDevMode ? [{ debugName: "_targetAttributesCache" }] : []));
+    _loadingTargetGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "_loadingTargetGroups" }] : []));
     // Detail dialog state
     showDetailDialog = false;
     detailEntityRtId = '';
@@ -5545,6 +5685,16 @@ class EntityAssociationsWidgetComponent {
     displayMode = computed(() => {
         return this.config?.displayMode ?? 'expandable';
     }, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+    /**
+     * Filtered source entity attributes based on configured entityAttributePaths
+     */
+    filteredEntityAttributes = computed(() => {
+        const data = this._data();
+        const paths = this.config?.entityAttributePaths;
+        if (!data?.attributes || !paths?.length)
+            return [];
+        return data.attributes.filter(a => paths.includes(a.attributeName));
+    }, ...(ngDevMode ? [{ debugName: "filteredEntityAttributes" }] : []));
     groupedAssociations = computed(() => {
         const data = this._data();
         if (!data?.associations)
@@ -5622,6 +5772,8 @@ class EntityAssociationsWidgetComponent {
         }
         else {
             expanded.add(key);
+            // Load target attributes when expanding, if configured
+            this.loadTargetAttributes(group);
         }
         this._expandedGroups.set(expanded);
         // Update the group's expanded state
@@ -5632,6 +5784,18 @@ class EntityAssociationsWidgetComponent {
         return this._expandedGroups().has(key);
     }
     getTargetEntities(group) {
+        const cacheKey = this.getGroupCacheKey(group);
+        const cached = this._targetAttributesCache().get(cacheKey);
+        if (cached) {
+            // Return enriched targets from cache
+            return cached.map(t => ({
+                rtId: t.rtId,
+                ckTypeId: t.ckTypeId,
+                displayName: t.rtWellKnownName || t.rtId,
+                attributes: t.attributes
+            }));
+        }
+        // Fall back to basic association data
         const sourceRtId = this._data()?.rtId;
         return group.associations.map(assoc => {
             const isOutgoing = assoc.originRtId === sourceRtId;
@@ -5640,10 +5804,81 @@ class EntityAssociationsWidgetComponent {
             return {
                 rtId,
                 ckTypeId,
-                displayName: rtId // Could be enhanced with wellKnownName if available
+                displayName: rtId
             };
         });
     }
+    isLoadingTargets(group) {
+        return this._loadingTargetGroups().has(this.getGroupCacheKey(group));
+    }
+    formatAttributeName(name) {
+        // camelCase/PascalCase → "Title Case"
+        return name
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/^./, str => str.toUpperCase())
+            .trim();
+    }
+    formatValue(value) {
+        if (value === null || value === undefined)
+            return '–';
+        if (typeof value === 'boolean')
+            return value ? 'Yes' : 'No';
+        if (typeof value === 'number') {
+            return value.toLocaleString('de-AT', {
+                minimumFractionDigits: value % 1 !== 0 ? 1 : 0,
+                maximumFractionDigits: 2
+            });
+        }
+        if (value instanceof Date)
+            return value.toLocaleDateString('de-AT');
+        if (typeof value === 'string') {
+            // Try to detect ISO date strings
+            if (/^\d{4}-\d{2}-\d{2}T/.test(value)) {
+                const date = new Date(value);
+                if (!isNaN(date.getTime()))
+                    return date.toLocaleDateString('de-AT');
+            }
+            return value;
+        }
+        return String(value);
+    }
+    getGroupCacheKey(group) {
+        return `${group.direction}-${group.roleId}-${group.targetType}`;
+    }
+    loadTargetAttributes(group) {
+        const targetAttributePaths = this.config?.targetAttributePaths;
+        if (!targetAttributePaths?.length)
+            return;
+        const cacheKey = this.getGroupCacheKey(group);
+        // Skip if already cached or loading
+        if (this._targetAttributesCache().has(cacheKey) || this._loadingTargetGroups().has(cacheKey))
+            return;
+        const data = this._data();
+        if (!data)
+            return;
+        // Mark as loading
+        const loading = new Set(this._loadingTargetGroups());
+        loading.add(cacheKey);
+        this._loadingTargetGroups.set(loading);
+        // Determine target CK type from the group's associations
+        const sourceRtId = data.rtId;
+        const firstAssoc = group.associations[0];
+        const isOutgoing = firstAssoc.originRtId === sourceRtId;
+        const targetCkTypeId = isOutgoing ? firstAssoc.targetCkTypeId : firstAssoc.originCkTypeId;
+        this.dataService.fetchAssociationTargets(data.rtId, data.ckTypeId, targetCkTypeId, group.roleId, group.direction, targetAttributePaths, group.count).pipe(catchError(err => {
+            console.error('Error loading target attributes:', err);
+            return of([]);
+        })).subscribe(targets => {
+            // Update cache
+            const cache = new Map(this._targetAttributesCache());
+            cache.set(cacheKey, targets);
+            this._targetAttributesCache.set(cache);
+            // Remove from loading
+            const loadingState = new Set(this._loadingTargetGroups());
+            loadingState.delete(cacheKey);
+            this._loadingTargetGroups.set(loadingState);
+        });
+    }
     onTargetClick(target) {
         this.detailEntityRtId = target.rtId;
         this.detailEntityCkTypeId = target.ckTypeId;
@@ -5670,6 +5905,8 @@ class EntityAssociationsWidgetComponent {
         if (dataSource.type === 'runtimeEntity') {
             this._isLoading.set(true);
             this._error.set(null);
+            this._targetAttributesCache.set(new Map());
+            this._loadingTargetGroups.set(new Set());
             this.dataService.fetchEntityWithAssociations(dataSource.rtId, dataSource.ckTypeId)
                 .pipe(catchError(err => {
                 console.error('Error loading associations data:', err);
@@ -5679,6 +5916,14 @@ class EntityAssociationsWidgetComponent {
                 .subscribe(entityData => {
                 this._data.set(entityData);
                 this._isLoading.set(false);
+                // Re-load target attributes for any currently expanded groups
+                if (entityData && this.config?.targetAttributePaths?.length) {
+                    for (const group of this.groupedAssociations()) {
+                        if (this.isGroupExpanded(group)) {
+                            this.loadTargetAttributes(group);
+                        }
+                    }
+                }
             });
         }
     }
@@ -5693,11 +5938,11 @@ class EntityAssociationsWidgetComponent {
             .trim();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityAssociationsWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EntityAssociationsWidgetComponent, isStandalone: true, selector: "mm-entity-associations-widget", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"associations-widget\" [class.no-data]=\"!data()\" [class.loading]=\"isLoading()\" [class.error]=\"error()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>Loading...</span>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-message\">\n      <span>{{ error() }}</span>\n    </div>\n  } @else if (data()) {\n    <!-- Entity Info Header -->\n    <div class=\"entity-header\">\n      <div class=\"entity-box\">\n        <span class=\"entity-name\">{{ entityName() }}</span>\n      </div>\n      <div class=\"entity-details\">\n        <span class=\"entity-id\" title=\"{{ entityCkTypeId() }}\">{{ entityRtId() }}</span>\n      </div>\n    </div>\n\n    <!-- Associations List -->\n    <div class=\"associations-container\">\n      @for (group of groupedAssociations(); track group.roleId + group.direction) {\n        <div class=\"association-group\" [class.expanded]=\"isGroupExpanded(group)\">\n          <!-- Group Header -->\n          <div class=\"group-header\"\n               [class.clickable]=\"displayMode() === 'expandable'\"\n               (click)=\"toggleGroup(group)\">\n            <div class=\"direction-indicator\">\n              @if (group.direction === 'out') {\n                <kendo-svg-icon [icon]=\"arrowRightIcon\" size=\"small\"></kendo-svg-icon>\n              } @else {\n                <kendo-svg-icon [icon]=\"arrowLeftIcon\" size=\"small\"></kendo-svg-icon>\n              }\n            </div>\n            <div class=\"group-info\">\n              <span class=\"role-name\">{{ group.roleName }}</span>\n              <span class=\"target-type\">{{ group.targetType }}</span>\n              <span class=\"count-badge\">{{ group.count }}</span>\n            </div>\n            @if (displayMode() === 'expandable') {\n              <div class=\"expand-icon\">\n                @if (isGroupExpanded(group)) {\n                  <kendo-svg-icon [icon]=\"chevronDownIcon\" size=\"small\"></kendo-svg-icon>\n                } @else {\n                  <kendo-svg-icon [icon]=\"chevronRightIcon\" size=\"small\"></kendo-svg-icon>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Expanded Target List -->\n          @if (displayMode() === 'expandable' && isGroupExpanded(group)) {\n            <div class=\"target-list\">\n              @for (target of getTargetEntities(group); track target.rtId) {\n                <div class=\"target-item\" (click)=\"onTargetClick(target)\">\n                  <span class=\"target-id\">{{ target.displayName }}</span>\n                  <span class=\"target-type-hint\">{{ target.ckTypeId | slice:-30 }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Summary Footer -->\n    <div class=\"associations-summary\">\n      <kendo-svg-icon [icon]=\"linkIcon\" size=\"small\"></kendo-svg-icon>\n      <span>{{ totalAssociations() }} relationship(s)</span>\n    </div>\n  } @else {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  }\n</div>\n\n<!-- Entity Detail Dialog -->\n@if (showDetailDialog) {\n  <mm-entity-detail-dialog\n    [rtId]=\"detailEntityRtId\"\n    [ckTypeId]=\"detailEntityCkTypeId\"\n    (closed)=\"onDetailDialogClosed()\">\n  </mm-entity-detail-dialog>\n}\n", styles: [".associations-widget{display:flex;flex-direction:column;height:100%}.associations-widget.no-data{justify-content:center;align-items:center;color:var(--kendo-color-subtle, #6c757d)}.entity-header{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.entity-header .entity-box{display:flex;align-items:center;justify-content:center;padding:8px 16px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);border-radius:4px;font-weight:600;font-size:.875rem}.entity-header .entity-details{display:flex;flex-direction:column;gap:2px}.entity-header .entity-id{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);font-family:monospace}.associations-container{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:4px}.association-group{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;overflow:hidden}.association-group.expanded .group-header{border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.group-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa)}.group-header.clickable{cursor:pointer}.group-header.clickable:hover{background:var(--kendo-color-surface, #ffffff)}.direction-indicator{color:var(--kendo-color-subtle, #6c757d);display:flex;align-items:center;width:20px}.group-info{display:flex;align-items:center;gap:8px;flex:1;font-size:.8125rem}.group-info .role-name{color:var(--kendo-color-subtle, #6c757d);font-style:italic}.group-info .target-type{font-weight:500;color:var(--kendo-color-on-surface, #212529)}.group-info .count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);border-radius:10px;font-size:.6875rem;font-weight:600}.expand-icon{color:var(--kendo-color-subtle, #6c757d);display:flex;align-items:center}.target-list{padding:4px 0;max-height:200px;overflow-y:auto}.target-item{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 6px 40px;cursor:pointer;font-size:.8125rem;transition:background .15s ease}.target-item:hover{background:var(--kendo-color-surface-alt, #f8f9fa)}.target-item .target-id{font-family:monospace;color:var(--kendo-color-on-surface, #212529)}.target-item .target-type-hint{font-size:.6875rem;color:var(--kendo-color-subtle, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.associations-summary{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-top:1px solid var(--kendo-color-border, #dee2e6);font-size:.75rem;color:var(--kendo-color-subtle, #6c757d)}.no-data-message{font-size:.875rem}.loading-indicator{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-subtle, #6c757d)}.error-message{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-error, #dc3545)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i2$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: EntityDetailDialogComponent, selector: "mm-entity-detail-dialog", inputs: ["rtId", "ckTypeId"], outputs: ["closed"] }, { kind: "component", type: WidgetNotConfiguredComponent, selector: "mm-widget-not-configured" }, { kind: "pipe", type: i1$3.SlicePipe, name: "slice" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EntityAssociationsWidgetComponent, isStandalone: true, selector: "mm-entity-associations-widget", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"associations-widget\" [class.no-data]=\"!data()\" [class.loading]=\"isLoading()\" [class.error]=\"error()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>Loading...</span>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-message\">\n      <span>{{ error() }}</span>\n    </div>\n  } @else if (data()) {\n    <!-- Entity Info Header -->\n    <div class=\"entity-header\">\n      <div class=\"entity-box\">\n        <span class=\"entity-name\">{{ entityName() }}</span>\n      </div>\n      <div class=\"entity-details\">\n        <span class=\"entity-id\" title=\"{{ entityCkTypeId() }}\">{{ entityRtId() }}</span>\n      </div>\n    </div>\n\n    <!-- Entity Attributes (Source) -->\n    @if (filteredEntityAttributes().length > 0) {\n      <div class=\"entity-attributes\">\n        @for (attr of filteredEntityAttributes(); track attr.attributeName) {\n          <div class=\"attribute-row\">\n            <span class=\"attribute-name\">{{ formatAttributeName(attr.attributeName) }}</span>\n            <span class=\"attribute-value\">{{ formatValue(attr.value) }}</span>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Associations List -->\n    <div class=\"associations-container\">\n      @for (group of groupedAssociations(); track group.roleId + group.direction) {\n        <div class=\"association-group\" [class.expanded]=\"isGroupExpanded(group)\">\n          <!-- Group Header -->\n          <div class=\"group-header\"\n               [class.clickable]=\"displayMode() === 'expandable'\"\n               (click)=\"toggleGroup(group)\">\n            <div class=\"direction-indicator\">\n              @if (group.direction === 'out') {\n                <kendo-svg-icon [icon]=\"arrowRightIcon\" size=\"small\"></kendo-svg-icon>\n              } @else {\n                <kendo-svg-icon [icon]=\"arrowLeftIcon\" size=\"small\"></kendo-svg-icon>\n              }\n            </div>\n            <div class=\"group-info\">\n              <span class=\"role-name\">{{ group.roleName }}</span>\n              <span class=\"target-type\">{{ group.targetType }}</span>\n              <span class=\"count-badge\">{{ group.count }}</span>\n            </div>\n            @if (displayMode() === 'expandable') {\n              <div class=\"expand-icon\">\n                @if (isGroupExpanded(group)) {\n                  <kendo-svg-icon [icon]=\"chevronDownIcon\" size=\"small\"></kendo-svg-icon>\n                } @else {\n                  <kendo-svg-icon [icon]=\"chevronRightIcon\" size=\"small\"></kendo-svg-icon>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Expanded Target List -->\n          @if (displayMode() === 'expandable' && isGroupExpanded(group)) {\n            <div class=\"target-list\">\n              @if (isLoadingTargets(group)) {\n                <div class=\"target-loading\">Loading attributes...</div>\n              }\n              @for (target of getTargetEntities(group); track target.rtId) {\n                <div class=\"target-entry\">\n                  <div class=\"target-item\" (click)=\"onTargetClick(target)\">\n                    <span class=\"target-id\">{{ target.displayName }}</span>\n                    <span class=\"target-type-hint\" [title]=\"target.ckTypeId\">{{ target.ckTypeId }}</span>\n                  </div>\n                  @if (target.attributes?.length) {\n                    <div class=\"target-attributes\">\n                      @for (attr of target.attributes; track attr.attributeName) {\n                        <div class=\"target-attr-row\">\n                          <span class=\"target-attr-name\">{{ formatAttributeName(attr.attributeName) }}</span>\n                          <span class=\"target-attr-value\">{{ formatValue(attr.value) }}</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Summary Footer -->\n    <div class=\"associations-summary\">\n      <kendo-svg-icon [icon]=\"linkIcon\" size=\"small\"></kendo-svg-icon>\n      <span>{{ totalAssociations() }} relationship(s)</span>\n    </div>\n  } @else {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  }\n</div>\n\n<!-- Entity Detail Dialog -->\n@if (showDetailDialog) {\n  <mm-entity-detail-dialog\n    [rtId]=\"detailEntityRtId\"\n    [ckTypeId]=\"detailEntityCkTypeId\"\n    (closed)=\"onDetailDialogClosed()\">\n  </mm-entity-detail-dialog>\n}\n", styles: [".associations-widget{display:flex;flex-direction:column;height:100%}.associations-widget.no-data{justify-content:center;align-items:center;color:var(--kendo-color-subtle, #6c757d)}.entity-header{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.entity-header .entity-box{display:flex;align-items:center;justify-content:center;padding:8px 16px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);border-radius:4px;font-weight:600;font-size:.875rem}.entity-header .entity-details{display:flex;flex-direction:column;gap:2px}.entity-header .entity-id{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);font-family:monospace}.entity-attributes{padding:4px 12px 8px;border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.entity-attributes .attribute-row{display:flex;justify-content:space-between;padding:2px 0;font-size:.8125rem}.entity-attributes .attribute-name{color:var(--kendo-color-subtle, #6c757d)}.entity-attributes .attribute-value{font-weight:500;color:var(--kendo-color-on-surface, #212529)}.associations-container{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:4px}.association-group{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;overflow:hidden}.association-group.expanded .group-header{border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.group-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa)}.group-header.clickable{cursor:pointer}.group-header.clickable:hover{background:var(--kendo-color-surface, #ffffff)}.direction-indicator{color:var(--kendo-color-subtle, #6c757d);display:flex;align-items:center;width:20px}.group-info{display:flex;align-items:center;gap:8px;flex:1;font-size:.8125rem}.group-info .role-name{color:var(--kendo-color-subtle, #6c757d);font-style:italic}.group-info .target-type{font-weight:500;color:var(--kendo-color-on-surface, #212529)}.group-info .count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);border-radius:10px;font-size:.6875rem;font-weight:600}.expand-icon{color:var(--kendo-color-subtle, #6c757d);display:flex;align-items:center}.target-list{padding:4px 0;max-height:200px;overflow-y:auto}.target-entry+.target-entry{border-top:1px solid var(--kendo-color-border, #dee2e6)}.target-item{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 40px;cursor:pointer;font-size:.8125rem;transition:background .15s ease}.target-item:hover{background:var(--kendo-color-surface-alt, #f8f9fa)}.target-item .target-id{font-family:monospace;color:var(--kendo-color-on-surface, #212529);flex-shrink:0}.target-item .target-type-hint{font-size:.6875rem;color:var(--kendo-color-subtle, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex-shrink:1}.target-attributes{padding:2px 12px 6px 56px}.target-attributes .target-attr-row{display:flex;justify-content:space-between;padding:1px 0;font-size:.75rem}.target-attributes .target-attr-name{color:var(--kendo-color-subtle, #6c757d)}.target-attributes .target-attr-value{color:var(--kendo-color-on-surface, #212529);font-weight:500}.target-loading{padding:6px 12px 6px 40px;font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.associations-summary{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-top:1px solid var(--kendo-color-border, #dee2e6);font-size:.75rem;color:var(--kendo-color-subtle, #6c757d)}.no-data-message{font-size:.875rem}.loading-indicator{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-subtle, #6c757d)}.error-message{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-error, #dc3545)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i2$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: EntityDetailDialogComponent, selector: "mm-entity-detail-dialog", inputs: ["rtId", "ckTypeId"], outputs: ["closed"] }, { kind: "component", type: WidgetNotConfiguredComponent, selector: "mm-widget-not-configured" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityAssociationsWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-entity-associations-widget', standalone: true, imports: [CommonModule, SVGIconModule, EntityDetailDialogComponent, WidgetNotConfiguredComponent], template: "<div class=\"associations-widget\" [class.no-data]=\"!data()\" [class.loading]=\"isLoading()\" [class.error]=\"error()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>Loading...</span>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-message\">\n      <span>{{ error() }}</span>\n    </div>\n  } @else if (data()) {\n    <!-- Entity Info Header -->\n    <div class=\"entity-header\">\n      <div class=\"entity-box\">\n        <span class=\"entity-name\">{{ entityName() }}</span>\n      </div>\n      <div class=\"entity-details\">\n        <span class=\"entity-id\" title=\"{{ entityCkTypeId() }}\">{{ entityRtId() }}</span>\n      </div>\n    </div>\n\n    <!-- Associations List -->\n    <div class=\"associations-container\">\n      @for (group of groupedAssociations(); track group.roleId + group.direction) {\n        <div class=\"association-group\" [class.expanded]=\"isGroupExpanded(group)\">\n          <!-- Group Header -->\n          <div class=\"group-header\"\n               [class.clickable]=\"displayMode() === 'expandable'\"\n               (click)=\"toggleGroup(group)\">\n            <div class=\"direction-indicator\">\n              @if (group.direction === 'out') {\n                <kendo-svg-icon [icon]=\"arrowRightIcon\" size=\"small\"></kendo-svg-icon>\n              } @else {\n                <kendo-svg-icon [icon]=\"arrowLeftIcon\" size=\"small\"></kendo-svg-icon>\n              }\n            </div>\n            <div class=\"group-info\">\n              <span class=\"role-name\">{{ group.roleName }}</span>\n              <span class=\"target-type\">{{ group.targetType }}</span>\n              <span class=\"count-badge\">{{ group.count }}</span>\n            </div>\n            @if (displayMode() === 'expandable') {\n              <div class=\"expand-icon\">\n                @if (isGroupExpanded(group)) {\n                  <kendo-svg-icon [icon]=\"chevronDownIcon\" size=\"small\"></kendo-svg-icon>\n                } @else {\n                  <kendo-svg-icon [icon]=\"chevronRightIcon\" size=\"small\"></kendo-svg-icon>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Expanded Target List -->\n          @if (displayMode() === 'expandable' && isGroupExpanded(group)) {\n            <div class=\"target-list\">\n              @for (target of getTargetEntities(group); track target.rtId) {\n                <div class=\"target-item\" (click)=\"onTargetClick(target)\">\n                  <span class=\"target-id\">{{ target.displayName }}</span>\n                  <span class=\"target-type-hint\">{{ target.ckTypeId | slice:-30 }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Summary Footer -->\n    <div class=\"associations-summary\">\n      <kendo-svg-icon [icon]=\"linkIcon\" size=\"small\"></kendo-svg-icon>\n      <span>{{ totalAssociations() }} relationship(s)</span>\n    </div>\n  } @else {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  }\n</div>\n\n<!-- Entity Detail Dialog -->\n@if (showDetailDialog) {\n  <mm-entity-detail-dialog\n    [rtId]=\"detailEntityRtId\"\n    [ckTypeId]=\"detailEntityCkTypeId\"\n    (closed)=\"onDetailDialogClosed()\">\n  </mm-entity-detail-dialog>\n}\n", styles: [".associations-widget{display:flex;flex-direction:column;height:100%}.associations-widget.no-data{justify-content:center;align-items:center;color:var(--kendo-color-subtle, #6c757d)}.entity-header{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.entity-header .entity-box{display:flex;align-items:center;justify-content:center;padding:8px 16px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);border-radius:4px;font-weight:600;font-size:.875rem}.entity-header .entity-details{display:flex;flex-direction:column;gap:2px}.entity-header .entity-id{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);font-family:monospace}.associations-container{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:4px}.association-group{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;overflow:hidden}.association-group.expanded .group-header{border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.group-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa)}.group-header.clickable{cursor:pointer}.group-header.clickable:hover{background:var(--kendo-color-surface, #ffffff)}.direction-indicator{color:var(--kendo-color-subtle, #6c757d);display:flex;align-items:center;width:20px}.group-info{display:flex;align-items:center;gap:8px;flex:1;font-size:.8125rem}.group-info .role-name{color:var(--kendo-color-subtle, #6c757d);font-style:italic}.group-info .target-type{font-weight:500;color:var(--kendo-color-on-surface, #212529)}.group-info .count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);border-radius:10px;font-size:.6875rem;font-weight:600}.expand-icon{color:var(--kendo-color-subtle, #6c757d);display:flex;align-items:center}.target-list{padding:4px 0;max-height:200px;overflow-y:auto}.target-item{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 6px 40px;cursor:pointer;font-size:.8125rem;transition:background .15s ease}.target-item:hover{background:var(--kendo-color-surface-alt, #f8f9fa)}.target-item .target-id{font-family:monospace;color:var(--kendo-color-on-surface, #212529)}.target-item .target-type-hint{font-size:.6875rem;color:var(--kendo-color-subtle, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.associations-summary{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-top:1px solid var(--kendo-color-border, #dee2e6);font-size:.75rem;color:var(--kendo-color-subtle, #6c757d)}.no-data-message{font-size:.875rem}.loading-indicator{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-subtle, #6c757d)}.error-message{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-error, #dc3545)}\n"] }]
+            args: [{ selector: 'mm-entity-associations-widget', standalone: true, imports: [CommonModule, SVGIconModule, EntityDetailDialogComponent, WidgetNotConfiguredComponent], template: "<div class=\"associations-widget\" [class.no-data]=\"!data()\" [class.loading]=\"isLoading()\" [class.error]=\"error()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>Loading...</span>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-message\">\n      <span>{{ error() }}</span>\n    </div>\n  } @else if (data()) {\n    <!-- Entity Info Header -->\n    <div class=\"entity-header\">\n      <div class=\"entity-box\">\n        <span class=\"entity-name\">{{ entityName() }}</span>\n      </div>\n      <div class=\"entity-details\">\n        <span class=\"entity-id\" title=\"{{ entityCkTypeId() }}\">{{ entityRtId() }}</span>\n      </div>\n    </div>\n\n    <!-- Entity Attributes (Source) -->\n    @if (filteredEntityAttributes().length > 0) {\n      <div class=\"entity-attributes\">\n        @for (attr of filteredEntityAttributes(); track attr.attributeName) {\n          <div class=\"attribute-row\">\n            <span class=\"attribute-name\">{{ formatAttributeName(attr.attributeName) }}</span>\n            <span class=\"attribute-value\">{{ formatValue(attr.value) }}</span>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Associations List -->\n    <div class=\"associations-container\">\n      @for (group of groupedAssociations(); track group.roleId + group.direction) {\n        <div class=\"association-group\" [class.expanded]=\"isGroupExpanded(group)\">\n          <!-- Group Header -->\n          <div class=\"group-header\"\n               [class.clickable]=\"displayMode() === 'expandable'\"\n               (click)=\"toggleGroup(group)\">\n            <div class=\"direction-indicator\">\n              @if (group.direction === 'out') {\n                <kendo-svg-icon [icon]=\"arrowRightIcon\" size=\"small\"></kendo-svg-icon>\n              } @else {\n                <kendo-svg-icon [icon]=\"arrowLeftIcon\" size=\"small\"></kendo-svg-icon>\n              }\n            </div>\n            <div class=\"group-info\">\n              <span class=\"role-name\">{{ group.roleName }}</span>\n              <span class=\"target-type\">{{ group.targetType }}</span>\n              <span class=\"count-badge\">{{ group.count }}</span>\n            </div>\n            @if (displayMode() === 'expandable') {\n              <div class=\"expand-icon\">\n                @if (isGroupExpanded(group)) {\n                  <kendo-svg-icon [icon]=\"chevronDownIcon\" size=\"small\"></kendo-svg-icon>\n                } @else {\n                  <kendo-svg-icon [icon]=\"chevronRightIcon\" size=\"small\"></kendo-svg-icon>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Expanded Target List -->\n          @if (displayMode() === 'expandable' && isGroupExpanded(group)) {\n            <div class=\"target-list\">\n              @if (isLoadingTargets(group)) {\n                <div class=\"target-loading\">Loading attributes...</div>\n              }\n              @for (target of getTargetEntities(group); track target.rtId) {\n                <div class=\"target-entry\">\n                  <div class=\"target-item\" (click)=\"onTargetClick(target)\">\n                    <span class=\"target-id\">{{ target.displayName }}</span>\n                    <span class=\"target-type-hint\" [title]=\"target.ckTypeId\">{{ target.ckTypeId }}</span>\n                  </div>\n                  @if (target.attributes?.length) {\n                    <div class=\"target-attributes\">\n                      @for (attr of target.attributes; track attr.attributeName) {\n                        <div class=\"target-attr-row\">\n                          <span class=\"target-attr-name\">{{ formatAttributeName(attr.attributeName) }}</span>\n                          <span class=\"target-attr-value\">{{ formatValue(attr.value) }}</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Summary Footer -->\n    <div class=\"associations-summary\">\n      <kendo-svg-icon [icon]=\"linkIcon\" size=\"small\"></kendo-svg-icon>\n      <span>{{ totalAssociations() }} relationship(s)</span>\n    </div>\n  } @else {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  }\n</div>\n\n<!-- Entity Detail Dialog -->\n@if (showDetailDialog) {\n  <mm-entity-detail-dialog\n    [rtId]=\"detailEntityRtId\"\n    [ckTypeId]=\"detailEntityCkTypeId\"\n    (closed)=\"onDetailDialogClosed()\">\n  </mm-entity-detail-dialog>\n}\n", styles: [".associations-widget{display:flex;flex-direction:column;height:100%}.associations-widget.no-data{justify-content:center;align-items:center;color:var(--kendo-color-subtle, #6c757d)}.entity-header{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.entity-header .entity-box{display:flex;align-items:center;justify-content:center;padding:8px 16px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);border-radius:4px;font-weight:600;font-size:.875rem}.entity-header .entity-details{display:flex;flex-direction:column;gap:2px}.entity-header .entity-id{font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);font-family:monospace}.entity-attributes{padding:4px 12px 8px;border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.entity-attributes .attribute-row{display:flex;justify-content:space-between;padding:2px 0;font-size:.8125rem}.entity-attributes .attribute-name{color:var(--kendo-color-subtle, #6c757d)}.entity-attributes .attribute-value{font-weight:500;color:var(--kendo-color-on-surface, #212529)}.associations-container{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:4px}.association-group{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;overflow:hidden}.association-group.expanded .group-header{border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.group-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa)}.group-header.clickable{cursor:pointer}.group-header.clickable:hover{background:var(--kendo-color-surface, #ffffff)}.direction-indicator{color:var(--kendo-color-subtle, #6c757d);display:flex;align-items:center;width:20px}.group-info{display:flex;align-items:center;gap:8px;flex:1;font-size:.8125rem}.group-info .role-name{color:var(--kendo-color-subtle, #6c757d);font-style:italic}.group-info .target-type{font-weight:500;color:var(--kendo-color-on-surface, #212529)}.group-info .count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);border-radius:10px;font-size:.6875rem;font-weight:600}.expand-icon{color:var(--kendo-color-subtle, #6c757d);display:flex;align-items:center}.target-list{padding:4px 0;max-height:200px;overflow-y:auto}.target-entry+.target-entry{border-top:1px solid var(--kendo-color-border, #dee2e6)}.target-item{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 40px;cursor:pointer;font-size:.8125rem;transition:background .15s ease}.target-item:hover{background:var(--kendo-color-surface-alt, #f8f9fa)}.target-item .target-id{font-family:monospace;color:var(--kendo-color-on-surface, #212529);flex-shrink:0}.target-item .target-type-hint{font-size:.6875rem;color:var(--kendo-color-subtle, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex-shrink:1}.target-attributes{padding:2px 12px 6px 56px}.target-attributes .target-attr-row{display:flex;justify-content:space-between;padding:1px 0;font-size:.75rem}.target-attributes .target-attr-name{color:var(--kendo-color-subtle, #6c757d)}.target-attributes .target-attr-value{color:var(--kendo-color-on-surface, #212529);font-weight:500}.target-loading{padding:6px 12px 6px 40px;font-size:.75rem;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.associations-summary{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-top:1px solid var(--kendo-color-border, #dee2e6);font-size:.75rem;color:var(--kendo-color-subtle, #6c757d)}.no-data-message{font-size:.875rem}.loading-indicator{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-subtle, #6c757d)}.error-message{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-error, #dc3545)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -5715,11 +5960,13 @@ const GetCkTypeAssociationRolesDocumentDto = gql `
                 fullName
                 semanticVersionedFullName
               }
+              rtRoleId
               navigationPropertyName
               multiplicity
               targetCkTypeId {
                 fullName
               }
+              rtTargetCkTypeId
             }
           }
           out {
@@ -5728,11 +5975,13 @@ const GetCkTypeAssociationRolesDocumentDto = gql `
                 fullName
                 semanticVersionedFullName
               }
+              rtRoleId
               navigationPropertyName
               multiplicity
               targetCkTypeId {
                 fullName
               }
+              rtTargetCkTypeId
             }
           }
         }
@@ -5860,6 +6109,7 @@ class AssociationsConfigDialogComponent {
     getEntitiesByCkTypeGQL = inject(GetEntitiesByCkTypeDtoGQL);
     getCkTypeAssociationRolesGQL = inject(GetCkTypeAssociationRolesDtoGQL);
     ckTypeSelectorService = inject(CkTypeSelectorService);
+    dataService = inject(MeshBoardDataService);
     windowRef = inject(WindowRef);
     initialCkTypeId;
     initialRtId;
@@ -5867,6 +6117,8 @@ class AssociationsConfigDialogComponent {
     initialShowOutgoing;
     initialRoleFilter;
     initialDisplayMode;
+    initialEntityAttributePaths;
+    initialTargetAttributePaths;
     selectedCkType = null;
     selectedEntity = null;
     entityDataSource;
@@ -5875,11 +6127,21 @@ class AssociationsConfigDialogComponent {
     showOutgoing = true;
     selectedRoles = [];
     displayMode = 'expandable';
+    selectedEntityAttributes = [];
+    selectedTargetAttributes = [];
     isLoadingInitial = false;
     isLoadingRoles = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingRoles" }] : []));
     availableRoles = signal([], ...(ngDevMode ? [{ debugName: "availableRoles" }] : []));
     filteredRoles = signal([], ...(ngDevMode ? [{ debugName: "filteredRoles" }] : []));
+    isLoadingEntityAttributes = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingEntityAttributes" }] : []));
+    availableEntityAttributes = signal([], ...(ngDevMode ? [{ debugName: "availableEntityAttributes" }] : []));
+    filteredEntityAttributes = signal([], ...(ngDevMode ? [{ debugName: "filteredEntityAttributes" }] : []));
+    isLoadingTargetAttributes = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingTargetAttributes" }] : []));
+    availableTargetAttributes = signal([], ...(ngDevMode ? [{ debugName: "availableTargetAttributes" }] : []));
+    filteredTargetAttributes = signal([], ...(ngDevMode ? [{ debugName: "filteredTargetAttributes" }] : []));
     roleFilterText = '';
+    entityAttrFilterText = '';
+    targetAttrFilterText = '';
     get isValid() {
         return this.selectedCkType !== null &&
             this.selectedEntity !== null &&
@@ -5896,6 +6158,12 @@ class AssociationsConfigDialogComponent {
         if (this.initialDisplayMode) {
             this.displayMode = this.initialDisplayMode;
         }
+        if (this.initialEntityAttributePaths) {
+            this.selectedEntityAttributes = [...this.initialEntityAttributePaths];
+        }
+        if (this.initialTargetAttributePaths) {
+            this.selectedTargetAttributes = [...this.initialTargetAttributePaths];
+        }
         if (this.initialCkTypeId) {
             await this.loadInitialValues();
         }
@@ -5912,11 +6180,17 @@ class AssociationsConfigDialogComponent {
                 if (this.initialRtId && this.entityDataSource) {
                     await this.loadInitialEntity();
                 }
-                // Set initial role filter after roles are loaded
+                // Restore initial selections after onCkTypeSelected() (which resets them)
                 if (this.initialRoleFilter && this.initialRoleFilter.length > 0) {
                     const allRoles = this.availableRoles();
                     this.selectedRoles = allRoles.filter(r => this.initialRoleFilter.includes(r.roleId));
                 }
+                if (this.initialEntityAttributePaths?.length) {
+                    this.selectedEntityAttributes = [...this.initialEntityAttributePaths];
+                }
+                if (this.initialTargetAttributePaths?.length) {
+                    this.selectedTargetAttributes = [...this.initialTargetAttributePaths];
+                }
             }
         }
         catch (error) {
@@ -5958,11 +6232,15 @@ class AssociationsConfigDialogComponent {
         this.selectedCkType = ckType;
         this.selectedEntity = null;
         this.selectedRoles = [];
+        this.selectedEntityAttributes = [];
         // Create data sources for entity selection
         this.entityDataSource = new RuntimeEntitySelectDataSource$1(this.getEntitiesByCkTypeGQL, ckType.rtCkTypeId);
         this.entityDialogDataSource = new RuntimeEntityDialogDataSource$1(this.getEntitiesByCkTypeGQL, ckType.rtCkTypeId);
-        // Load available association roles
-        await this.loadAssociationRoles(ckType.rtCkTypeId);
+        // Load available association roles and entity attributes in parallel
+        await Promise.all([
+            this.loadAssociationRoles(ckType.rtCkTypeId),
+            this.loadEntityAttributes(ckType.rtCkTypeId)
+        ]);
     }
     onCkTypeCleared() {
         this.selectedCkType = null;
@@ -5972,6 +6250,12 @@ class AssociationsConfigDialogComponent {
         this.availableRoles.set([]);
         this.filteredRoles.set([]);
         this.selectedRoles = [];
+        this.availableEntityAttributes.set([]);
+        this.filteredEntityAttributes.set([]);
+        this.selectedEntityAttributes = [];
+        this.availableTargetAttributes.set([]);
+        this.filteredTargetAttributes.set([]);
+        this.selectedTargetAttributes = [];
     }
     onEntitySelected(entity) {
         this.selectedEntity = entity;
@@ -6011,12 +6295,12 @@ class AssociationsConfigDialogComponent {
                 if (!assoc)
                     continue;
                 roles.push({
-                    roleId: assoc.roleId.semanticVersionedFullName,
+                    roleId: assoc.rtRoleId,
                     navigationPropertyName: assoc.navigationPropertyName,
                     direction: 'in',
-                    targetCkTypeId: assoc.targetCkTypeId.fullName,
+                    targetCkTypeId: assoc.rtTargetCkTypeId,
                     multiplicity: assoc.multiplicity,
-                    displayName: `[IN] ${assoc.navigationPropertyName} (${this.formatTypeName(assoc.targetCkTypeId.fullName)})`
+                    displayName: `[IN] ${assoc.rtRoleId} (${assoc.rtTargetCkTypeId})`
                 });
             }
             // Process outgoing associations
@@ -6025,16 +6309,18 @@ class AssociationsConfigDialogComponent {
                 if (!assoc)
                     continue;
                 roles.push({
-                    roleId: assoc.roleId.semanticVersionedFullName,
+                    roleId: assoc.rtRoleId,
                     navigationPropertyName: assoc.navigationPropertyName,
                     direction: 'out',
-                    targetCkTypeId: assoc.targetCkTypeId.fullName,
+                    targetCkTypeId: assoc.rtTargetCkTypeId,
                     multiplicity: assoc.multiplicity,
-                    displayName: `[OUT] ${assoc.navigationPropertyName} (${this.formatTypeName(assoc.targetCkTypeId.fullName)})`
+                    displayName: `[OUT] ${assoc.rtRoleId} (${assoc.rtTargetCkTypeId})`
                 });
             }
             this.availableRoles.set(roles);
             this.filteredRoles.set(roles);
+            // Load target attributes from unique target CK types
+            await this.loadTargetAttributesFromRoles(roles);
         }
         catch (error) {
             console.error('Error loading association roles:', error);
@@ -6043,9 +6329,77 @@ class AssociationsConfigDialogComponent {
             this.isLoadingRoles.set(false);
         }
     }
-    formatTypeName(fullName) {
-        const parts = fullName.split('/');
-        return parts[parts.length - 1];
+    async loadEntityAttributes(ckTypeId) {
+        this.isLoadingEntityAttributes.set(true);
+        this.availableEntityAttributes.set([]);
+        this.filteredEntityAttributes.set([]);
+        try {
+            const attrs = await firstValueFrom(this.dataService.fetchCkTypeAttributes(ckTypeId));
+            this.availableEntityAttributes.set(attrs);
+            this.filteredEntityAttributes.set(attrs);
+        }
+        catch (error) {
+            console.error('Error loading entity attributes:', error);
+        }
+        finally {
+            this.isLoadingEntityAttributes.set(false);
+        }
+    }
+    async loadTargetAttributesFromRoles(roles) {
+        // Collect unique target CK type IDs from the roles
+        const targetCkTypeIds = [...new Set(roles.map(r => r.targetCkTypeId))];
+        if (targetCkTypeIds.length === 0)
+            return;
+        this.isLoadingTargetAttributes.set(true);
+        this.availableTargetAttributes.set([]);
+        this.filteredTargetAttributes.set([]);
+        try {
+            // Load attributes from all target types and merge (union)
+            const allAttrs = new Map();
+            for (const ckTypeId of targetCkTypeIds) {
+                const attrs = await firstValueFrom(this.dataService.fetchCkTypeAttributes(ckTypeId));
+                for (const attr of attrs) {
+                    if (!allAttrs.has(attr.attributeName)) {
+                        allAttrs.set(attr.attributeName, attr);
+                    }
+                }
+            }
+            const merged = Array.from(allAttrs.values()).sort((a, b) => a.attributeName.localeCompare(b.attributeName));
+            this.availableTargetAttributes.set(merged);
+            this.filteredTargetAttributes.set(merged);
+        }
+        catch (error) {
+            console.error('Error loading target attributes:', error);
+        }
+        finally {
+            this.isLoadingTargetAttributes.set(false);
+        }
+    }
+    onEntityAttrFilterChange(filter) {
+        this.entityAttrFilterText = filter.toLowerCase();
+        this.updateFilteredEntityAttributes();
+    }
+    onTargetAttrFilterChange(filter) {
+        this.targetAttrFilterText = filter.toLowerCase();
+        this.updateFilteredTargetAttributes();
+    }
+    updateFilteredEntityAttributes() {
+        const all = this.availableEntityAttributes();
+        if (!this.entityAttrFilterText) {
+            this.filteredEntityAttributes.set(all);
+        }
+        else {
+            this.filteredEntityAttributes.set(all.filter(a => a.attributeName.toLowerCase().includes(this.entityAttrFilterText)));
+        }
+    }
+    updateFilteredTargetAttributes() {
+        const all = this.availableTargetAttributes();
+        if (!this.targetAttrFilterText) {
+            this.filteredTargetAttributes.set(all);
+        }
+        else {
+            this.filteredTargetAttributes.set(all.filter(a => a.attributeName.toLowerCase().includes(this.targetAttrFilterText)));
+        }
     }
     onSave() {
         if (this.selectedCkType && this.selectedEntity) {
@@ -6055,7 +6409,9 @@ class AssociationsConfigDialogComponent {
                 showIncoming: this.showIncoming,
                 showOutgoing: this.showOutgoing,
                 roleFilter: this.selectedRoles.map(r => r.roleId),
-                displayMode: this.displayMode
+                displayMode: this.displayMode,
+                entityAttributePaths: this.selectedEntityAttributes,
+                targetAttributePaths: this.selectedTargetAttributes
             });
         }
     }
@@ -6063,7 +6419,7 @@ class AssociationsConfigDialogComponent {
         this.windowRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AssociationsConfigDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AssociationsConfigDialogComponent, isStandalone: true, selector: "mm-associations-config-dialog", inputs: { initialCkTypeId: "initialCkTypeId", initialRtId: "initialRtId", initialShowIncoming: "initialShowIncoming", initialShowOutgoing: "initialShowOutgoing", initialRoleFilter: "initialRoleFilter", initialDisplayMode: "initialDisplayMode" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AssociationsConfigDialogComponent, isStandalone: true, selector: "mm-associations-config-dialog", inputs: { initialCkTypeId: "initialCkTypeId", initialRtId: "initialRtId", initialShowIncoming: "initialShowIncoming", initialShowOutgoing: "initialShowOutgoing", initialRoleFilter: "initialRoleFilter", initialDisplayMode: "initialDisplayMode", initialEntityAttributePaths: "initialEntityAttributePaths", initialTargetAttributePaths: "initialTargetAttributePaths" }, ngImport: i0, template: `
     <div class="config-container">
 
       <div class="config-form" [class.loading]="isLoadingInitial">
@@ -6162,6 +6518,56 @@ class AssociationsConfigDialogComponent {
           <p class="field-hint">How to display association targets.</p>
         </div>
 
+        <!-- Entity Attributes -->
+        <div class="form-field" [class.disabled]="!selectedCkType || availableEntityAttributes().length === 0">
+          <label>Entity Attributes (optional)</label>
+          @if (isLoadingEntityAttributes()) {
+            <div class="loading-roles">Loading attributes...</div>
+          } @else if (availableEntityAttributes().length > 0) {
+            <kendo-multiselect
+              [data]="filteredEntityAttributes()"
+              [textField]="'attributeName'"
+              [valueField]="'attributeName'"
+              [(ngModel)]="selectedEntityAttributes"
+              [valuePrimitive]="true"
+              placeholder="No attributes selected"
+              [filterable]="true"
+              (filterChange)="onEntityAttrFilterChange($event)">
+            </kendo-multiselect>
+          } @else {
+            <kendo-textbox
+              [disabled]="true"
+              placeholder="No attributes available">
+            </kendo-textbox>
+          }
+          <p class="field-hint">Attributes of the source entity to display below the header.</p>
+        </div>
+
+        <!-- Target Attributes -->
+        <div class="form-field" [class.disabled]="!selectedCkType || availableTargetAttributes().length === 0">
+          <label>Target Attributes (optional)</label>
+          @if (isLoadingTargetAttributes()) {
+            <div class="loading-roles">Loading attributes...</div>
+          } @else if (availableTargetAttributes().length > 0) {
+            <kendo-multiselect
+              [data]="filteredTargetAttributes()"
+              [textField]="'attributeName'"
+              [valueField]="'attributeName'"
+              [(ngModel)]="selectedTargetAttributes"
+              [valuePrimitive]="true"
+              placeholder="No attributes selected"
+              [filterable]="true"
+              (filterChange)="onTargetAttrFilterChange($event)">
+            </kendo-multiselect>
+          } @else {
+            <kendo-textbox
+              [disabled]="true"
+              placeholder="No target attributes available">
+            </kendo-textbox>
+          }
+          <p class="field-hint">Attributes of target entities to display inline in the expanded list.</p>
+        </div>
+
         <!-- Selection Preview -->
         @if (selectedEntity) {
           <div class="selection-preview">
@@ -6301,6 +6707,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           <p class="field-hint">How to display association targets.</p>
         </div>
 
+        <!-- Entity Attributes -->
+        <div class="form-field" [class.disabled]="!selectedCkType || availableEntityAttributes().length === 0">
+          <label>Entity Attributes (optional)</label>
+          @if (isLoadingEntityAttributes()) {
+            <div class="loading-roles">Loading attributes...</div>
+          } @else if (availableEntityAttributes().length > 0) {
+            <kendo-multiselect
+              [data]="filteredEntityAttributes()"
+              [textField]="'attributeName'"
+              [valueField]="'attributeName'"
+              [(ngModel)]="selectedEntityAttributes"
+              [valuePrimitive]="true"
+              placeholder="No attributes selected"
+              [filterable]="true"
+              (filterChange)="onEntityAttrFilterChange($event)">
+            </kendo-multiselect>
+          } @else {
+            <kendo-textbox
+              [disabled]="true"
+              placeholder="No attributes available">
+            </kendo-textbox>
+          }
+          <p class="field-hint">Attributes of the source entity to display below the header.</p>
+        </div>
+
+        <!-- Target Attributes -->
+        <div class="form-field" [class.disabled]="!selectedCkType || availableTargetAttributes().length === 0">
+          <label>Target Attributes (optional)</label>
+          @if (isLoadingTargetAttributes()) {
+            <div class="loading-roles">Loading attributes...</div>
+          } @else if (availableTargetAttributes().length > 0) {
+            <kendo-multiselect
+              [data]="filteredTargetAttributes()"
+              [textField]="'attributeName'"
+              [valueField]="'attributeName'"
+              [(ngModel)]="selectedTargetAttributes"
+              [valuePrimitive]="true"
+              placeholder="No attributes selected"
+              [filterable]="true"
+              (filterChange)="onTargetAttrFilterChange($event)">
+            </kendo-multiselect>
+          } @else {
+            <kendo-textbox
+              [disabled]="true"
+              placeholder="No target attributes available">
+            </kendo-textbox>
+          }
+          <p class="field-hint">Attributes of target entities to display inline in the expanded list.</p>
+        </div>
+
         <!-- Selection Preview -->
         @if (selectedEntity) {
           <div class="selection-preview">
@@ -6340,6 +6796,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 type: Input
             }], initialDisplayMode: [{
                 type: Input
+            }], initialEntityAttributePaths: [{
+                type: Input
+            }], initialTargetAttributePaths: [{
+                type: Input
             }] } });
 
 /**
@@ -20361,7 +20821,9 @@ function registerDefaultWidgets(registry) {
                 initialShowIncoming: assocWidget.showIncoming,
                 initialShowOutgoing: assocWidget.showOutgoing,
                 initialRoleFilter: assocWidget.roleFilter,
-                initialDisplayMode: assocWidget.displayMode
+                initialDisplayMode: assocWidget.displayMode,
+                initialEntityAttributePaths: assocWidget.entityAttributePaths,
+                initialTargetAttributePaths: assocWidget.targetAttributePaths
             };
         },
         applyConfigResult: (widget, result) => ({
@@ -20370,7 +20832,9 @@ function registerDefaultWidgets(registry) {
             showIncoming: result.showIncoming,
             showOutgoing: result.showOutgoing,
             roleFilter: result.roleFilter,
-            displayMode: result.displayMode
+            displayMode: result.displayMode,
+            entityAttributePaths: result.entityAttributePaths,
+            targetAttributePaths: result.targetAttributePaths
         }),
         // SOLID: Factory function
         createDefaultConfig: (base) => ({
@@ -20393,7 +20857,9 @@ function registerDefaultWidgets(registry) {
                 showOutgoing: widget.showOutgoing,
                 maxAssociations: widget.maxAssociations,
                 roleFilter: widget.roleFilter,
-                displayMode: widget.displayMode
+                displayMode: widget.displayMode,
+                entityAttributePaths: widget.entityAttributePaths ?? [],
+                targetAttributePaths: widget.targetAttributePaths ?? []
             }
         }),
         // SOLID: Deserialization from persistence
@@ -20412,7 +20878,9 @@ function registerDefaultWidgets(registry) {
                 showOutgoing: config['showOutgoing'] ?? true,
                 maxAssociations: config['maxAssociations'] ?? 5,
                 roleFilter: config['roleFilter'],
-                displayMode: config['displayMode']
+                displayMode: config['displayMode'],
+                entityAttributePaths: config['entityAttributePaths'] ?? [],
+                targetAttributePaths: config['targetAttributePaths'] ?? []
             };
         }
     });
@@ -22598,14 +23066,15 @@ class MeshBoardViewComponent {
      */
     updateUrlWithRtId(rtId) {
         const currentUrl = this.router.url;
-        // Check if we're already on a meshboard/:rtId route or just /meshboard
-        if (currentUrl.includes('/meshboard/')) {
-            // Replace the rtId in the URL
-            const newUrl = currentUrl.replace(/\/meshboard\/[^/]+/, `/meshboard/${rtId}`);
+        const hasRtIdParam = this.route.snapshot.paramMap.has('rtId');
+        if (hasRtIdParam) {
+            // Replace the last URL segment (the old rtId) with the new one
+            const lastSlashIndex = currentUrl.lastIndexOf('/');
+            const newUrl = currentUrl.substring(0, lastSlashIndex + 1) + rtId;
             this.router.navigateByUrl(newUrl, { replaceUrl: true });
         }
-        else if (currentUrl.endsWith('/meshboard')) {
-            // Append the rtId
+        else {
+            // Append the rtId to the current URL
             this.router.navigateByUrl(`${currentUrl}/${rtId}`, { replaceUrl: true });
         }
     }