@meshmakers/octo-ui 3.4.280 → 3.4.290

package/fesm2022/meshmakers-octo-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, ChangeDetectionStrategy, Component, Injectable, Input, EventEmitter, Output, ElementRef, forwardRef, ViewChild, signal, computed, input, model, output, effect, untracked, Directive, InjectionToken, HostListener, makeEnvironmentProviders } from '@angular/core';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { AttributeSelectorService, AttributeValueTypeDto as AttributeValueTypeDto$1, CkTypeSelectorService, CkTypeAttributeService, GetEntitiesByCkTypeDtoGQL, RuntimeEntitySelectDataSource, RuntimeEntityDialogDataSource, SearchFilterTypesDto, SortOrdersDto, FieldFilterOperatorsDto, GetCkTypesDtoGQL, GetCkModelByIdDtoGQL, LevelMetaData, RtAssociationMetaData, CkTypeMetaData, GraphDirectionDto, AssociationModOptionsDto, GraphQL, DeleteStrategiesDto, CommunicationService, provideOctoServices } from '@meshmakers/octo-services';
+import { AttributeSelectorService, AttributeValueTypeDto as AttributeValueTypeDto$1, CkTypeSelectorService, CkTypeAttributeService, GetEntitiesByCkTypeDtoGQL, RuntimeEntitySelectDataSource, RuntimeEntityDialogDataSource, SearchFilterTypesDto, SortOrdersDto, FieldFilterOperatorsDto, GetCkTypesDtoGQL, GetCkModelByIdDtoGQL, CkTypeMetaData, GraphDirectionDto, AssociationModOptionsDto, GraphQL, DeleteStrategiesDto, CommunicationService, provideOctoServices } from '@meshmakers/octo-services';
 import { Roles, provideMmSharedAuth } from '@meshmakers/shared-auth';
 import { WindowStateService, EntitySelectInputComponent, DataSourceTyped, HierarchyDataSourceBase, NotificationDisplayService, TreeComponent, ListViewComponent, FetchResultTyped, DataSourceBase, InputService, BaseTreeDetailComponent, ConfirmationService, provideMmSharedUi } from '@meshmakers/shared-ui';
 import * as i1$2 from '@angular/common';
@@ -19,12 +19,12 @@ 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, 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, warningCircleIcon, gridIcon, linkIcon } from '@progress/kendo-svg-icons';
+import { searchIcon, sortAscSmallIcon, sortDescSmallIcon, filterClearIcon, fileIcon, folderIcon, calendarIcon, checkboxCheckedIcon, listUnorderedIcon, chevronRightIcon, chevronDownIcon, downloadIcon, windowIcon, arrowRightIcon, arrowLeftIcon, chevronDoubleRightIcon, chevronDoubleLeftIcon, arrowUpIcon, arrowDownIcon, pencilIcon, trashIcon, copyIcon, folderMoreIcon, gearIcon, folderOpenIcon, plusIcon, minusIcon, dollarIcon, hyperlinkOpenIcon, infoCircleIcon, eyeIcon, arrowRotateCcwIcon, locationsIcon, arrowRotateCwIcon, xIcon, checkCircleIcon, exclamationCircleIcon, xCircleIcon, warningCircleIcon, gridIcon, linkIcon } from '@progress/kendo-svg-icons';
 import { Subject, firstValueFrom, Subscription, of, forkJoin, map as map$1, takeUntil as takeUntil$1, catchError as catchError$1, defer, from, finalize, switchMap as switchMap$1, startWith } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, switchMap, tap, catchError, takeUntil } from 'rxjs/operators';
 import { LoaderModule, BadgeModule } from '@progress/kendo-angular-indicators';
 import * as i1$3 from 'apollo-angular';
-import { gql } from 'apollo-angular';
+import { gql, Apollo } from 'apollo-angular';
 import { isCompositeFilterDescriptor } from '@progress/kendo-data-query';
 import { TreeItemDataTyped } from '@meshmakers/shared-services';
 import * as i7 from '@progress/kendo-angular-dateinputs';
@@ -5488,6 +5488,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$3.Apollo }] });
 
+const GetCkTypeAssociationRolesDocumentDto = gql `
+    query getCkTypeAssociationRoles($ckTypeId: String!) {
+  constructionKit {
+    types(rtCkId: $ckTypeId, first: 1) {
+      items {
+        rtCkTypeId
+        associations {
+          in {
+            all {
+              roleId {
+                fullName
+                semanticVersionedFullName
+              }
+              rtRoleId
+              navigationPropertyName
+              multiplicity
+              targetCkTypeId {
+                fullName
+              }
+              rtTargetCkTypeId
+              rtOriginCkTypeId
+            }
+          }
+          out {
+            all {
+              roleId {
+                fullName
+                semanticVersionedFullName
+              }
+              rtRoleId
+              navigationPropertyName
+              multiplicity
+              targetCkTypeId {
+                fullName
+              }
+              rtTargetCkTypeId
+              rtOriginCkTypeId
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+class GetCkTypeAssociationRolesDtoGQL extends i1$3.Query {
+    document = GetCkTypeAssociationRolesDocumentDto;
+    constructor(apollo) {
+        super(apollo);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetCkTypeAssociationRolesDtoGQL, deps: [{ token: i1$3.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetCkTypeAssociationRolesDtoGQL, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetCkTypeAssociationRolesDtoGQL, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$3.Apollo }] });
+
 const GetRuntimeEntityAssociationsByIdDocumentDto = gql `
     query getRuntimeEntityAssociationsById($rtId: OctoObjectId!, $ckTypeId: String!, $direction: GraphDirection!, $after: String, $first: Int, $roleId: String, $relatedRtCkId: RtCkTypeId, $relatedRtId: OctoObjectId) {
   runtime {
@@ -5534,39 +5594,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$3.Apollo }] });
 
-const GetTreeNodesDocumentDto = gql `
-    query getTreeNodes($rtId: OctoObjectId!, $ckTypeId: String!, $directRoleId: String!, $directTargetCkTypeId: String!, $indirectRoleId: String!, $indirectTargetCkTypeId: String!) {
+const GetTreeAssociationTargetsDocumentDto = gql `
+    query getTreeAssociationTargets($rtId: OctoObjectId!, $ckTypeId: String!, $roleId: String!, $targetCkTypeId: String!, $direction: GraphDirection!, $first: Int) {
   runtime {
-    runtimeEntities(rtId: $rtId, ckId: $ckTypeId) {
+    runtimeEntities(rtId: $rtId, ckId: $ckTypeId, first: 1) {
       items {
-        rtId
-        ckTypeId
-        attributes(attributeNames: ["name", "description"]) {
-          items {
-            attributeName
-            value
-          }
-        }
         associations {
-          targets(roleId: $directRoleId, ckId: $directTargetCkTypeId, direction: INBOUND) {
+          targets(
+            roleId: $roleId
+            ckId: $targetCkTypeId
+            direction: $direction
+            first: $first
+          ) {
+            totalCount
             items {
               rtId
               ckTypeId
-              attributes(attributeNames: ["name", "description"]) {
+              rtWellKnownName
+              attributes(
+                attributeNames: ["name", "displayName", "description"]
+                resolveEnumValuesToNames: true
+              ) {
                 items {
                   attributeName
                   value
                 }
               }
-              associations {
-                targets(
-                  roleId: $indirectRoleId
-                  ckId: $indirectTargetCkTypeId
-                  direction: INBOUND
-                ) {
-                  totalCount
-                }
-              }
             }
           }
         }
@@ -5575,15 +5628,15 @@ const GetTreeNodesDocumentDto = gql `
   }
 }
     `;
-class GetTreeNodesDtoGQL extends i1$3.Query {
-    document = GetTreeNodesDocumentDto;
+class GetTreeAssociationTargetsDtoGQL extends i1$3.Query {
+    document = GetTreeAssociationTargetsDocumentDto;
     constructor(apollo) {
         super(apollo);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetTreeNodesDtoGQL, deps: [{ token: i1$3.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetTreeNodesDtoGQL, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetTreeAssociationTargetsDtoGQL, deps: [{ token: i1$3.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetTreeAssociationTargetsDtoGQL, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetTreeNodesDtoGQL, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetTreeAssociationTargetsDtoGQL, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5963,6 +6016,310 @@ const article = {
     viewBox: '0 -960 960 960'
 };
 
+/** Runtime CK type id of the per-tenant tree navigation configuration singleton. */
+const CONFIG_CK_TYPE_ID = 'System.UI/TreeNavigationConfiguration';
+/** rtWellKnownName of the singleton instance. */
+const CONFIG_WELL_KNOWN_NAME = 'TreeNavigation';
+/** Matches every source CK type. */
+const WILDCARD = '*';
+const CONFIG_TYPE_EXISTS_QUERY = gql `
+  query treeNavigationConfigTypeExists {
+    constructionKit {
+      types(rtCkId: "System.UI/TreeNavigationConfiguration", first: 1) {
+        items {
+          rtCkTypeId
+        }
+      }
+    }
+  }
+`;
+const CONFIG_QUERY = gql `
+  query getTreeNavigationConfiguration {
+    runtime {
+      systemUITreeNavigationConfiguration(
+        first: 1
+        fieldFilter: [
+          {
+            attributePath: "rtWellKnownName"
+            operator: EQUALS
+            comparisonValue: "TreeNavigation"
+          }
+        ]
+      ) {
+        items {
+          rtId
+          roles {
+            sourceCkTypeId
+            roleId
+            visible
+            displayName
+            sortIndex
+            grouped
+            icon
+          }
+        }
+      }
+    }
+  }
+`;
+const ROLE_SUGGESTIONS_QUERY = gql `
+  query treeNavigationRoleSuggestions($ckTypeId: String!) {
+    constructionKit {
+      types(rtCkId: $ckTypeId, first: 1) {
+        items {
+          associations {
+            in {
+              all {
+                rtRoleId
+                navigationPropertyName
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const CREATE_CONFIG_MUTATION = gql `
+  mutation createTreeNavigationConfiguration(
+    $entities: [SystemUITreeNavigationConfigurationInput!]!
+  ) {
+    runtime {
+      systemUITreeNavigationConfigurations {
+        create(entities: $entities) {
+          rtId
+        }
+      }
+    }
+  }
+`;
+const UPDATE_CONFIG_MUTATION = gql `
+  mutation updateTreeNavigationConfiguration(
+    $entities: [SystemUITreeNavigationConfigurationInputUpdate!]!
+  ) {
+    runtime {
+      systemUITreeNavigationConfigurations {
+        update(entities: $entities) {
+          rtId
+        }
+      }
+    }
+  }
+`;
+/**
+ * Loads the optional per-tenant `System.UI/TreeNavigationConfiguration` singleton
+ * and resolves per-association overrides for the entity trees.
+ *
+ * Design notes:
+ * - The config entity is OPTIONAL. When the CK type is not installed on the
+ *   tenant (System.UI < 2.2.0) or no instance exists, every lookup returns
+ *   undefined and the trees fall back to pure auto-discovery.
+ * - The singleton field (`systemUITreeNavigationConfiguration`) only exists in
+ *   the tenant schema when the CK type is installed, so querying it blindly
+ *   would raise a GraphQL validation error (and a user-facing toast). We first
+ *   probe the CK schema with the always-valid `constructionKit.types` query and
+ *   only run the singleton query when the type is present.
+ * - Uses inline `gql` (not codegen) so the feature is decoupled from a schema
+ *   re-introspection that includes the new CK type.
+ */
+class TreeNavigationConfigService {
+    apollo = inject(Apollo);
+    /** key `${sourceCkTypeId}::${roleId}` -> override; cached for the session. */
+    overridesPromise;
+    /**
+     * Resolves the override for one (source type, role) pair, preferring an exact
+     * source-type match over a wildcard (`*`) rule. Returns undefined when nothing
+     * is configured.
+     */
+    async resolve(sourceCkTypeId, roleId) {
+        const overrides = await this.getOverrides();
+        return (overrides.get(`${sourceCkTypeId}::${roleId}`) ??
+            overrides.get(`${WILDCARD}::${roleId}`));
+    }
+    /** Forces a reload on next access (e.g. after a tenant switch). */
+    reset() {
+        this.overridesPromise = undefined;
+    }
+    /**
+     * Returns the inbound association roles declared on a CK type, for the role
+     * autocomplete in the settings editor. Returns `{ roleId, label }` where the
+     * label is the friendly inbound name plus the role id. Empty for `*` or an
+     * unknown type (orphan roles can still be typed as custom values).
+     */
+    async getRoleSuggestions(ckTypeId) {
+        if (!ckTypeId || ckTypeId === WILDCARD) {
+            return [];
+        }
+        try {
+            const result = await firstValueFrom(this.apollo.query({
+                query: ROLE_SUGGESTIONS_QUERY,
+                variables: { ckTypeId },
+                fetchPolicy: 'network-only',
+            }));
+            const all = result.data?.constructionKit?.types?.items?.[0]?.associations?.in
+                ?.all ?? [];
+            const byRole = new Map();
+            for (const role of all) {
+                const roleId = String(role?.rtRoleId ?? '');
+                if (!roleId || byRole.has(roleId)) {
+                    continue;
+                }
+                const nav = role?.navigationPropertyName ?? '';
+                byRole.set(roleId, nav ? `${nav} (${roleId})` : roleId);
+            }
+            return [...byRole.entries()].map(([roleId, label]) => ({ roleId, label }));
+        }
+        catch (error) {
+            console.error('Error loading role suggestions for', ckTypeId, error);
+            return [];
+        }
+    }
+    getOverrides() {
+        if (!this.overridesPromise) {
+            this.overridesPromise = this.load().catch((error) => {
+                console.error('Error loading tree navigation configuration', error);
+                // Drop the cache so a later expand can retry, fall back to no overrides.
+                this.overridesPromise = undefined;
+                return new Map();
+            });
+        }
+        return this.overridesPromise;
+    }
+    async load() {
+        const map = new Map();
+        const { rawRoles } = await this.fetchSingleton();
+        for (const raw of rawRoles) {
+            if (!raw?.sourceCkTypeId || !raw?.roleId) {
+                continue;
+            }
+            map.set(`${raw.sourceCkTypeId}::${raw.roleId}`, {
+                visible: raw.visible ?? undefined,
+                displayName: raw.displayName ?? undefined,
+                sortIndex: raw.sortIndex ?? undefined,
+                grouped: raw.grouped ?? undefined,
+                icon: raw.icon ?? undefined,
+            });
+        }
+        return map;
+    }
+    /**
+     * Loads the full configuration for editing (settings page). Returns whether
+     * the CK type is installed (so the page can show a clear "upgrade System.UI"
+     * hint), the singleton rtId (null when not created yet), and the role rules.
+     */
+    async loadConfig() {
+        const { typePresent, rtId, rawRoles } = await this.fetchSingleton();
+        const roles = [];
+        for (const raw of rawRoles) {
+            if (!raw?.sourceCkTypeId || !raw?.roleId) {
+                continue;
+            }
+            roles.push({
+                sourceCkTypeId: raw.sourceCkTypeId,
+                roleId: raw.roleId,
+                visible: raw.visible ?? undefined,
+                displayName: raw.displayName ?? undefined,
+                sortIndex: raw.sortIndex ?? undefined,
+                grouped: raw.grouped ?? undefined,
+                icon: raw.icon ?? undefined,
+            });
+        }
+        return { typePresent, rtId, roles };
+    }
+    /**
+     * Creates or updates the singleton with the given rules, then invalidates the
+     * resolve cache so the trees pick up the change on the next expand. Returns the
+     * singleton rtId.
+     */
+    async saveConfig(rtId, roles) {
+        const cleanRoles = roles
+            .filter((r) => r.sourceCkTypeId && r.roleId)
+            .map((r) => this.toRoleInput(r));
+        let savedRtId;
+        if (rtId) {
+            const result = await firstValueFrom(this.apollo.mutate({
+                mutation: UPDATE_CONFIG_MUTATION,
+                variables: { entities: [{ rtId, item: { roles: cleanRoles } }] },
+                fetchPolicy: 'no-cache',
+            }));
+            savedRtId =
+                result.data?.runtime?.systemUITreeNavigationConfigurations?.update?.[0]
+                    ?.rtId ?? rtId;
+        }
+        else {
+            const result = await firstValueFrom(this.apollo.mutate({
+                mutation: CREATE_CONFIG_MUTATION,
+                variables: {
+                    entities: [
+                        {
+                            rtWellKnownName: CONFIG_WELL_KNOWN_NAME,
+                            name: 'Tree Navigation',
+                            roles: cleanRoles,
+                        },
+                    ],
+                },
+                fetchPolicy: 'no-cache',
+            }));
+            const created = result.data?.runtime?.systemUITreeNavigationConfigurations?.create?.[0]
+                ?.rtId;
+            if (!created) {
+                throw new Error('createTreeNavigationConfiguration returned no entity');
+            }
+            savedRtId = created;
+        }
+        this.reset();
+        return savedRtId;
+    }
+    /** Drops undefined fields so the record-array input only carries set values. */
+    toRoleInput(role) {
+        const input = {
+            sourceCkTypeId: role.sourceCkTypeId,
+            roleId: role.roleId,
+        };
+        if (role.visible !== undefined)
+            input['visible'] = role.visible;
+        if (role.displayName !== undefined && role.displayName !== '') {
+            input['displayName'] = role.displayName;
+        }
+        if (role.sortIndex !== undefined && role.sortIndex !== null) {
+            input['sortIndex'] = role.sortIndex;
+        }
+        if (role.grouped !== undefined)
+            input['grouped'] = role.grouped;
+        if (role.icon !== undefined && role.icon !== '')
+            input['icon'] = role.icon;
+        return input;
+    }
+    /** Probes the CK schema and (when present) loads the singleton's raw roles. */
+    async fetchSingleton() {
+        const exists = await firstValueFrom(this.apollo.query({ query: CONFIG_TYPE_EXISTS_QUERY, fetchPolicy: 'network-only' }));
+        const typePresent = (exists.data?.constructionKit?.types?.items?.length ?? 0) > 0;
+        if (!typePresent) {
+            return { typePresent: false, rtId: null, rawRoles: [] };
+        }
+        const result = await firstValueFrom(this.apollo.query({ query: CONFIG_QUERY, fetchPolicy: 'network-only' }));
+        const item = result.data?.runtime?.systemUITreeNavigationConfiguration?.items?.[0];
+        return {
+            typePresent: true,
+            rtId: item?.rtId ?? null,
+            rawRoles: item?.roles ?? [],
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TreeNavigationConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TreeNavigationConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TreeNavigationConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+const TREE_NAVIGATION_CONFIG_CONSTANTS = {
+    CONFIG_CK_TYPE_ID,
+    CONFIG_WELL_KNOWN_NAME,
+    WILDCARD,
+};
+
 /**
  * Performs helpful Octomesh Types operations, like checks, comparisons etc.
  */
@@ -5988,9 +6345,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }] });
 
+/** Well-known role id of the hierarchical parent-child association. */
+const PARENT_CHILD_ROLE_ID = 'System/ParentChild';
+/**
+ * Target CK types that cannot be navigated in the tree. `System/Entity` is the
+ * universal abstract base type and has no defining collection root, so the
+ * generic `System/Related` association (target `System/Entity`, present as an
+ * inbound role on every type) makes `targets(ckId: "System/Entity")` throw
+ * server-side ("has no defining collection root"). Skipping it here keeps the
+ * tree from firing a guaranteed-failing query for every entity.
+ */
+const NON_NAVIGABLE_TARGET_CK_TYPES = new Set(['System/Entity']);
 class RuntimeBrowserDataSource extends OctoGraphQlHierarchyDataSource {
     getTreesDtoGQL = inject(GetTreesDtoGQL);
-    getTreeNodesDtoGQL = inject(GetTreeNodesDtoGQL);
+    getCkTypeAssociationRolesDtoGQL = inject(GetCkTypeAssociationRolesDtoGQL);
+    getTreeAssociationTargetsDtoGQL = inject(GetTreeAssociationTargetsDtoGQL);
     getCkModelsGQL = inject(GetCkModelsDtoGQL);
     getCkTypesGQL = inject(GetCkTypesDtoGQL);
     getCkModelByIdDtoGQL = inject(GetCkModelByIdDtoGQL);
@@ -5999,6 +6368,7 @@ class RuntimeBrowserDataSource extends OctoGraphQlHierarchyDataSource {
     updateRuntimeEntitiesDtoGQL = inject(UpdateRuntimeEntitiesDtoGQL);
     updateTreeNodesDtoGQL = inject(UpdateTreeNodesDtoGQL);
     typeHelperService = inject(TypeHelperService);
+    treeNavConfig = inject(TreeNavigationConfigService);
     isCkModelsRoot(item) {
         return !!item && 'isCkModelsRoot' in item;
     }
@@ -6008,20 +6378,16 @@ class RuntimeBrowserDataSource extends OctoGraphQlHierarchyDataSource {
     isCkType(item) {
         return !!item && 'ckTypeId' in item && !('rtId' in item) && !('id' in item);
     }
-    // Define metadata for different entity types and their hierarchical relationships
-    static levelMetaData = [
-        new LevelMetaData('Basic/Tree', [new RtAssociationMetaData('System/ParentChild', 'Basic/TreeNode')], [
-            new RtAssociationMetaData('System/ParentChild', 'Basic/TreeNode'),
-            new RtAssociationMetaData('Basic/RelatedClassification', 'Basic/Asset'),
-        ]),
-        new LevelMetaData('*', [
-            new RtAssociationMetaData('System/ParentChild', 'Basic/TreeNode'),
-            new RtAssociationMetaData('Basic/RelatedClassification', 'Basic/Asset'),
-        ], [
-            new RtAssociationMetaData('System/ParentChild', 'Basic/TreeNode'),
-            new RtAssociationMetaData('Basic/RelatedClassification', 'Basic/Asset'),
-        ]),
-    ];
+    isAssociationGroup(item) {
+        return !!item && 'isAssociationGroup' in item;
+    }
+    /**
+     * Cache of inbound association roles per CK type id. Discovered lazily from
+     * the CK schema and reused across tree expansions (and to decide whether a
+     * child entity node is expandable). Lives on the instance because the tree is
+     * created fresh per browser/picker mount.
+     */
+    inboundRolesCache = new Map();
     // Define visual metadata for different entity types
     static ckTypeMetaData = [
         new CkTypeMetaData('Basic/Tree', 'Tree', 'Tree Structure', folderMoreIcon),
@@ -6043,92 +6409,287 @@ class RuntimeBrowserDataSource extends OctoGraphQlHierarchyDataSource {
         if (this.isCkType(item.item)) {
             return [];
         }
+        // Handle association group node - lazily load its target entities
+        if (this.isAssociationGroup(item.item)) {
+            const group = item.item;
+            const targets = await this.fetchAssociationTargets(group.parentRtId, group.parentCkTypeId, group.roleId, group.targetCkTypeId, group.direction);
+            return this.buildEntityTreeItems(targets);
+        }
         // Handle regular runtime entity
         const rtEntity = item.item;
         if (!rtEntity.rtId || !rtEntity.ckTypeId) {
             return [];
         }
-        // Find metadata for the current item type
-        let metaData = RuntimeBrowserDataSource.levelMetaData.find((x) => x.ckTypeId === rtEntity.ckTypeId);
-        if (!metaData) {
-            metaData = RuntimeBrowserDataSource.levelMetaData.find((x) => x.ckTypeId === '*');
+        // Discover the inbound association roles from the entity's ACTUAL inbound
+        // edges (associations.definitions), not the CK type schema. This mirrors the
+        // entity detail "Associations" tab and also surfaces roles that exist as
+        // runtime edges but are no longer declared on the type in the installed CK
+        // model (orphan roles after model evolution). Each group carries its concrete
+        // origin CK type (the ckId used to load its targets) and an exact count.
+        const roleGroups = await this.discoverEntityInboundRoleGroups(rtEntity.rtId, rtEntity.ckTypeId);
+        // Apply the optional per-tenant TreeNavigationConfiguration overrides on top
+        // of auto-discovery: hide (visible), relabel (displayName), reorder
+        // (sortIndex), flatten vs group (grouped), icon. Defaults reproduce Phase 1:
+        // System/ParentChild flat, every other role grouped.
+        const annotated = await Promise.all(roleGroups.map(async (group) => {
+            const override = await this.treeNavConfig.resolve(rtEntity.ckTypeId, group.roleId);
+            return {
+                group,
+                visible: override?.visible !== false,
+                grouped: override?.grouped ?? group.roleId !== PARENT_CHILD_ROLE_ID,
+                displayName: override?.displayName,
+                sortIndex: override?.sortIndex,
+                icon: override?.icon,
+            };
+        }));
+        const visibleRoles = annotated.filter((a) => a.visible);
+        const result = [];
+        // 1. Flattened roles (default: System/ParentChild) — their targets appear
+        //    directly under the node to preserve the familiar hierarchy navigation.
+        const flattenedTargetLists = await Promise.all(visibleRoles
+            .filter((a) => !a.grouped)
+            .map((a) => this.fetchAssociationTargets(rtEntity.rtId, rtEntity.ckTypeId, a.group.roleId, a.group.targetCkTypeId, GraphDirectionDto.InboundDto)));
+        result.push(...(await this.buildEntityTreeItems(flattenedTargetLists.flat())));
+        // 2. Grouped roles become expandable group nodes (counts already known from
+        //    the discovered edges). Ordered by configured sortIndex.
+        const groupNodes = visibleRoles
+            .filter((a) => a.grouped && a.group.count > 0)
+            .sort((x, y) => this.compareGroupOrder(x, y));
+        for (const a of groupNodes) {
+            const group = a.group;
+            const groupNode = {
+                isAssociationGroup: true,
+                parentRtId: rtEntity.rtId,
+                parentCkTypeId: rtEntity.ckTypeId,
+                roleId: group.roleId,
+                targetCkTypeId: group.targetCkTypeId,
+                direction: GraphDirectionDto.InboundDto,
+            };
+            const label = `${a.displayName ?? group.navigationPropertyName} (${group.count})`;
+            result.push(new TreeItemDataTyped(this.buildGroupNodeId(rtEntity.rtId, rtEntity.ckTypeId, group), label, `${group.roleId} → ${group.targetCkTypeId}`, groupNode, this.resolveGroupIcon(a.icon), true));
+        }
+        return result;
+    }
+    /**
+     * Discovers the navigable inbound role groups of an entity from its ACTUAL
+     * inbound edges (associations.definitions), grouped by (roleId, origin CK
+     * type) with exact counts. Labels are enriched from the CK type schema
+     * (friendly inbound navigation property name) when the role is declared on the
+     * type, and otherwise derived from the role id (so orphan roles still get a
+     * readable label).
+     */
+    async discoverEntityInboundRoleGroups(rtId, ckTypeId) {
+        let definitions = [];
+        try {
+            const response = await firstValueFrom(this.getRuntimeEntityAssociationsByIdDtoGQL.fetch({
+                variables: {
+                    rtId,
+                    ckTypeId,
+                    direction: GraphDirectionDto.InboundDto,
+                    first: 2000,
+                },
+                fetchPolicy: 'network-only',
+            }));
+            definitions =
+                response.data?.runtime?.runtimeEntities?.items?.[0]?.associations
+                    ?.definitions?.items ?? [];
         }
-        if (!metaData) {
+        catch (error) {
+            console.error('Error discovering inbound association edges', { ckTypeId, rtId }, error);
             return [];
         }
-        const mergedResultsMap = {};
-        // Fetch children based on direct and indirect associations
-        for (const directRole of metaData.directRoles) {
-            const rtEntitiesOrigins = new Array();
-            for (const indirectRole of metaData.indirectRoles) {
-                try {
-                    const result = await firstValueFrom(this.getTreeNodesDtoGQL
-                        .fetch({
-                        variables: {
-                            rtId: rtEntity.rtId,
-                            ckTypeId: rtEntity.ckTypeId,
-                            directRoleId: directRole.roleId,
-                            directTargetCkTypeId: directRole.ckTypeId,
-                            indirectRoleId: indirectRole.roleId,
-                            indirectTargetCkTypeId: indirectRole.ckTypeId,
-                        },
-                    })
-                        .pipe(map((r) => r.data?.runtime?.runtimeEntities?.items?.at(0))));
-                    if (result) {
-                        rtEntitiesOrigins.push(result);
-                    }
-                }
-                catch (error) {
-                    console.error('Error fetching tree nodes:', error);
-                }
+        // Count edges per role and remember a representative concrete origin type
+        // (used as a fallback ckId for orphan roles not declared on the type).
+        const edgeCount = new Map();
+        const edgeOrigin = new Map();
+        for (const def of definitions) {
+            const roleId = String(def?.ckAssociationRoleId ?? '');
+            const origin = String(def?.originCkTypeId ?? '');
+            if (!roleId || !origin || NON_NAVIGABLE_TARGET_CK_TYPES.has(origin)) {
+                continue;
+            }
+            edgeCount.set(roleId, (edgeCount.get(roleId) ?? 0) + 1);
+            if (!edgeOrigin.has(roleId)) {
+                edgeOrigin.set(roleId, origin);
+            }
+        }
+        // Declared roles from the CK type schema give the friendly inbound name and,
+        // crucially, the origin BASE type — using it as the ckId aggregates all
+        // concrete subtypes into a single group (e.g. one "Sensoren (5)" instead of
+        // one group per concrete sensor type).
+        const schemaRoles = await this.getInboundRoles(ckTypeId);
+        const schemaByRole = new Map();
+        for (const r of schemaRoles) {
+            if (!schemaByRole.has(r.roleId)) {
+                schemaByRole.set(r.roleId, {
+                    origin: r.targetCkTypeId,
+                    nav: r.navigationPropertyName,
+                });
             }
-            // Process children and build tree items
-            for (const root of rtEntitiesOrigins) {
-                if (!root?.associations?.targets?.items) {
+        }
+        // One group per role actually present on the entity. Declared roles use the
+        // schema base type as ckId; orphan roles (edge exists but role not declared
+        // on the type in the installed model, e.g. EnergyIQ/StoreyElements) fall back
+        // to the concrete edge origin type and a derived label.
+        const groups = [];
+        for (const [roleId, count] of edgeCount) {
+            const schema = schemaByRole.get(roleId);
+            groups.push({
+                roleId,
+                targetCkTypeId: schema?.origin ?? edgeOrigin.get(roleId) ?? '',
+                navigationPropertyName: schema?.nav ?? this.deriveRoleLabel(roleId),
+                count,
+            });
+        }
+        return groups;
+    }
+    /** Readable fallback label for a role id without a schema navigation name. */
+    deriveRoleLabel(roleId) {
+        const slash = roleId.lastIndexOf('/');
+        return slash >= 0 ? roleId.slice(slash + 1) : roleId;
+    }
+    /**
+     * Orders group nodes by configured sortIndex (ascending, unconfigured last),
+     * then by navigation property name for a stable, readable order.
+     */
+    compareGroupOrder(x, y) {
+        const xi = x.sortIndex ?? Number.MAX_SAFE_INTEGER;
+        const yi = y.sortIndex ?? Number.MAX_SAFE_INTEGER;
+        if (xi !== yi) {
+            return xi - yi;
+        }
+        return x.group.navigationPropertyName.localeCompare(y.group.navigationPropertyName);
+    }
+    /** Resolves a configured group icon name to an SVG icon (folder by default). */
+    resolveGroupIcon(name) {
+        switch (name) {
+            case 'file':
+                return fileIcon;
+            case 'gear':
+                return gearIcon;
+            case 'database':
+                return storage;
+            case 'code':
+                return code;
+            case 'folder':
+            default:
+                return folderMoreIcon;
+        }
+    }
+    /**
+     * Returns the inbound association roles of a CK type, discovered from the CK
+     * schema and cached per type id for the lifetime of this data source.
+     */
+    getInboundRoles(ckTypeId) {
+        const cached = this.inboundRolesCache.get(ckTypeId);
+        if (cached) {
+            return cached;
+        }
+        const promise = firstValueFrom(this.getCkTypeAssociationRolesDtoGQL.fetch({ variables: { ckTypeId } }))
+            .then((response) => {
+            const all = response.data?.constructionKit?.types?.items?.[0]?.associations?.in
+                ?.all ?? [];
+            const roles = [];
+            for (const role of all) {
+                if (!role) {
                     continue;
                 }
-                for (const child of root.associations.targets.items) {
-                    if (!child?.rtId || !child?.ckTypeId) {
-                        continue;
-                    }
-                    const rtId = child?.rtId;
-                    if (!mergedResultsMap[rtId]) {
-                        // Find or create metadata for this child type
-                        let childMetaData = RuntimeBrowserDataSource.ckTypeMetaData.find((x) => x.ckTypeId === child?.ckTypeId);
-                        if (!childMetaData) {
-                            childMetaData = new CkTypeMetaData(child?.ckTypeId || 'Unknown', child?.ckTypeId || 'Unknown', child?.ckTypeId || 'Unknown', code);
-                        }
-                        // Extract display name and description from attributes
-                        const nameValue = child.attributes?.items?.find((x) => x?.attributeName === 'name')?.value;
-                        const displayNameValue = child.attributes?.items?.find((x) => x?.attributeName === 'displayName')?.value;
-                        // Debug logging
-                        if (typeof nameValue === 'object') {
-                            console.warn('Child name value is an object:', nameValue);
-                        }
-                        const text = (typeof nameValue === 'string'
-                            ? nameValue
-                            : typeof nameValue === 'object' && nameValue !== null
-                                ? JSON.stringify(nameValue)
-                                : null) ||
-                            (typeof displayNameValue === 'string'
-                                ? displayNameValue
-                                : null) ||
-                            child.ckTypeId ||
-                            'Unknown';
-                        const descValue = child.attributes?.items?.find((x) => x?.attributeName === 'description')?.value;
-                        const tooltip = (typeof descValue === 'string' ? descValue : null) ||
-                            `${child.ckTypeId} - ${child.rtId}`;
-                        mergedResultsMap[rtId] = new TreeItemDataTyped(rtId, text, tooltip, child, childMetaData.svgIcon, (child?.associations?.targets?.totalCount ?? 0) > 0);
-                    }
-                    else {
-                        // Update expandable status if object already exists
-                        mergedResultsMap[rtId].expandable ||=
-                            (child?.associations?.targets?.totalCount ?? 0) > 0;
-                    }
+                // Use the RUNTIME ids from the backend, never the versioned fullName.
+                // For an INBOUND role this entity is the association's TARGET side, so the
+                // related entities to navigate to are on the ORIGIN side: query
+                // targets(direction: INBOUND, ckId: rtOriginCkTypeId). rtTargetCkTypeId
+                // here is this entity's own (target) type and would return nothing.
+                // The runtime form must come from the backend (rtOriginCkTypeId) — it
+                // follows a resolution logic that simply stripping the version does not.
+                const targetCkTypeId = String(role.rtOriginCkTypeId ?? '');
+                if (!targetCkTypeId || NON_NAVIGABLE_TARGET_CK_TYPES.has(targetCkTypeId)) {
+                    continue;
                 }
+                roles.push({
+                    roleId: String(role.rtRoleId ?? ''),
+                    navigationPropertyName: role.navigationPropertyName,
+                    targetCkTypeId,
+                    multiplicity: role.multiplicity,
+                });
+            }
+            return roles;
+        })
+            .catch((error) => {
+            console.error('Error fetching association roles for type', ckTypeId, error);
+            // Drop the failed promise from the cache so a later expand can retry.
+            this.inboundRolesCache.delete(ckTypeId);
+            return [];
+        });
+        this.inboundRolesCache.set(ckTypeId, promise);
+        return promise;
+    }
+    /** Loads the target entities reachable from an entity through one role. */
+    async fetchAssociationTargets(rtId, ckTypeId, roleId, targetCkTypeId, direction) {
+        try {
+            const response = await firstValueFrom(this.getTreeAssociationTargetsDtoGQL.fetch({
+                variables: { rtId, ckTypeId, roleId, targetCkTypeId, direction },
+            }));
+            const items = response.data?.runtime?.runtimeEntities?.items?.[0]?.associations
+                ?.targets?.items ?? [];
+            return items.filter((i) => !!i);
+        }
+        catch (error) {
+            console.error('Error fetching association targets', { ckTypeId, roleId, targetCkTypeId }, error);
+            return [];
+        }
+    }
+    /**
+     * Builds tree items for runtime entities, de-duplicating by rtId and marking
+     * an entity expandable when its CK type defines at least one inbound
+     * association role.
+     */
+    async buildEntityTreeItems(entities) {
+        const unique = new Map();
+        for (const entity of entities) {
+            if (entity?.rtId && entity?.ckTypeId && !unique.has(entity.rtId)) {
+                unique.set(entity.rtId, entity);
             }
         }
-        return Object.values(mergedResultsMap);
+        // Warm the role cache for every distinct child type in parallel so the
+        // expandable flag can be resolved without a per-entity round trip.
+        const distinctTypes = [
+            ...new Set([...unique.values()].map((e) => e.ckTypeId)),
+        ];
+        await Promise.all(distinctTypes.map((t) => this.getInboundRoles(t)));
+        const result = [];
+        for (const entity of unique.values()) {
+            const roles = await this.getInboundRoles(entity.ckTypeId);
+            result.push(new TreeItemDataTyped(entity.rtId, this.extractDisplayName(entity), this.extractTooltip(entity), entity, this.resolveIcon(entity.ckTypeId), roles.length > 0));
+        }
+        return result;
+    }
+    /** Stable tree-node id for an association group node. */
+    buildGroupNodeId(parentRtId, parentCkTypeId, role) {
+        return `assoc:${parentCkTypeId}@${parentRtId}:${role.roleId}:${role.targetCkTypeId}`;
+    }
+    /** Resolves the display label of an entity from its name/displayName attributes. */
+    extractDisplayName(entity) {
+        const nameValue = entity.attributes?.items?.find((x) => x?.attributeName === 'name')?.value;
+        const displayNameValue = entity.attributes?.items?.find((x) => x?.attributeName === 'displayName')?.value;
+        return ((typeof nameValue === 'string'
+            ? nameValue
+            : typeof nameValue === 'object' && nameValue !== null
+                ? JSON.stringify(nameValue)
+                : null) ||
+            (typeof displayNameValue === 'string' ? displayNameValue : null) ||
+            entity.rtWellKnownName ||
+            entity.ckTypeId ||
+            'Unknown');
+    }
+    /** Resolves the tooltip of an entity from its description attribute. */
+    extractTooltip(entity) {
+        const descValue = entity.attributes?.items?.find((x) => x?.attributeName === 'description')?.value;
+        return ((typeof descValue === 'string' ? descValue : null) ||
+            `${entity.ckTypeId} - ${entity.rtId}`);
+    }
+    /** Resolves the icon for a CK type, falling back to a generic entity icon. */
+    resolveIcon(ckTypeId) {
+        return (RuntimeBrowserDataSource.ckTypeMetaData.find((x) => x.ckTypeId === ckTypeId)?.svgIcon ?? code);
     }
     async fetchRootNodes() {
         try {
@@ -9907,64 +10468,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 type: Input
             }] } });
 
-const GetCkTypeAssociationRolesDocumentDto = gql `
-    query getCkTypeAssociationRoles($ckTypeId: String!) {
-  constructionKit {
-    types(rtCkId: $ckTypeId, first: 1) {
-      items {
-        rtCkTypeId
-        associations {
-          in {
-            all {
-              roleId {
-                fullName
-                semanticVersionedFullName
-              }
-              rtRoleId
-              navigationPropertyName
-              multiplicity
-              targetCkTypeId {
-                fullName
-              }
-              rtTargetCkTypeId
-            }
-          }
-          out {
-            all {
-              roleId {
-                fullName
-                semanticVersionedFullName
-              }
-              rtRoleId
-              navigationPropertyName
-              multiplicity
-              targetCkTypeId {
-                fullName
-              }
-              rtTargetCkTypeId
-            }
-          }
-        }
-      }
-    }
-  }
-}
-    `;
-class GetCkTypeAssociationRolesDtoGQL extends i1$3.Query {
-    document = GetCkTypeAssociationRolesDocumentDto;
-    constructor(apollo) {
-        super(apollo);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetCkTypeAssociationRolesDtoGQL, deps: [{ token: i1$3.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetCkTypeAssociationRolesDtoGQL, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetCkTypeAssociationRolesDtoGQL, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$3.Apollo }] });
-
 /**
  * Validates whether a drag-and-drop move (reparenting) is allowed by the CK model.
  *
@@ -14870,7 +15373,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", "expressionValidator"], outputs: ["entitySaved"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RuntimeBrowserComponent, decorators: [{
             type: Component,
@@ -14936,7 +15439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         </div>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
+  `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}.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 }] }], expressionValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "expressionValidator", required: false }] }], treeDetail: [{
                 type: ViewChild,
                 args: ['treeDetail', { static: false }]
@@ -14951,17 +15454,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  */
 class RuntimeBrowserOutletComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RuntimeBrowserOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: RuntimeBrowserOutletComponent, isStandalone: true, selector: "mm-runtime-browser-outlet", ngImport: i0, template: `<router-outlet />`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: RuntimeBrowserOutletComponent, isStandalone: true, selector: "mm-runtime-browser-outlet", ngImport: i0, template: `<router-outlet />`, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RuntimeBrowserOutletComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'mm-runtime-browser-outlet',
-                    standalone: true,
-                    imports: [RouterOutlet],
-                    changeDetection: ChangeDetectionStrategy.Eager,
-                    template: `<router-outlet />`,
-                }]
+            args: [{ selector: 'mm-runtime-browser-outlet', standalone: true, imports: [RouterOutlet], changeDetection: ChangeDetectionStrategy.Eager, template: `<router-outlet />`, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
         }] });
 
 /**
@@ -14982,17 +15479,11 @@ class RuntimeBrowserPageComponent {
         ? this.injectedMessages
         : DEFAULT_RUNTIME_BROWSER_MESSAGES;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RuntimeBrowserPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: RuntimeBrowserPageComponent, isStandalone: true, selector: "mm-runtime-browser-page", ngImport: i0, template: `<mm-runtime-browser [messages]="messages" />`, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: RuntimeBrowserComponent, selector: "mm-runtime-browser", inputs: ["messages", "showDataMapping", "expressionValidator"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RuntimeBrowserPageComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'mm-runtime-browser-page',
-                    standalone: true,
-                    imports: [RuntimeBrowserComponent],
-                    changeDetection: ChangeDetectionStrategy.Eager,
-                    template: `<mm-runtime-browser [messages]="messages" />`,
-                }]
+            args: [{ selector: 'mm-runtime-browser-page', standalone: true, imports: [RuntimeBrowserComponent], changeDetection: ChangeDetectionStrategy.Eager, template: `<mm-runtime-browser [messages]="messages" />`, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
         }] });
 
 /**
@@ -18018,5 +18509,5 @@ function provideOctoUi() {
  * Generated bundle index. Do not edit.
  */
 
-export { AssociationValidationService, AttributeSelectorDialogComponent, AttributeSelectorDialogService, AttributeSortSelectorDialogComponent, AttributeSortSelectorDialogService, AttributeValueTypeDto, CkTypeSelectorDialogComponent, CkTypeSelectorDialogService, CkTypeSelectorInputComponent, DEFAULT_CK_TYPE_SELECTOR_DIALOG_MESSAGES, DEFAULT_CK_TYPE_SELECTOR_INPUT_MESSAGES, DEFAULT_DATA_POINT, DEFAULT_MAPPING_COVERAGE_TREE_CONFIG, DEFAULT_PROPERTY_GRID_MESSAGES, DEFAULT_RUNTIME_BROWSER_MESSAGES, DataMappingOverviewComponent, DataPointPickerComponent, DataPointResolverService, DefaultPropertyCategory, EntityDetailComponent, EntityIdInfoComponent, EntitySelectorDialogComponent, EntitySelectorDialogService, FieldFilterEditorComponent, MappingCoverageTreeComponent, MappingCoverageTreeDataSource, MappingEditDialogComponent, MappingEditDialogService, 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, extractDataPointNames, 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_CK_TYPE_SELECTOR_DIALOG_MESSAGES, DEFAULT_CK_TYPE_SELECTOR_INPUT_MESSAGES, DEFAULT_DATA_POINT, DEFAULT_MAPPING_COVERAGE_TREE_CONFIG, DEFAULT_PROPERTY_GRID_MESSAGES, DEFAULT_RUNTIME_BROWSER_MESSAGES, DataMappingOverviewComponent, DataPointPickerComponent, DataPointResolverService, DefaultPropertyCategory, EntityDetailComponent, EntityIdInfoComponent, EntitySelectorDialogComponent, EntitySelectorDialogService, FieldFilterEditorComponent, MappingCoverageTreeComponent, MappingCoverageTreeDataSource, MappingEditDialogComponent, MappingEditDialogService, OctoGraphQlDataSource, OctoGraphQlHierarchyDataSource, OctoLoaderComponent, PropertyConverterService, PropertyDisplayMode, PropertyGridComponent, PropertyValueDisplayComponent, RUNTIME_BROWSER_MESSAGES, RecordDetailDialogComponent, RtEntityIdHelper, RuntimeBrowserComponent, RuntimeBrowserOutletComponent, RuntimeBrowserPageComponent, RuntimeBrowserStateService, RuntimeEntityVariableDialogComponent, RuntimeEntityVariableDialogService, TREE_NAVIGATION_CONFIG_CONSTANTS, TenantSwitcherComponent, TreeNavigationConfigService, account_tree, add, analytics, app_registration, article, botService, category, chat, checklist, code, component_exchange, computer, createRuntimeBrowserRoutes, customer, dashboard, event_list, extractDataPointNames, 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