@yuuvis/client-framework 3.5.0 → 3.7.0

package/fesm2022/yuuvis-client-framework-object-relationship.mjs

@@ -6,8 +6,8 @@ import * as i1$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { SearchService, BaseObjectTypeField, Operator, TranslatePipe, SystemService, DmsService, EventService, TranslateService, RelationshipTypeField, YuvEventType, SystemType, DmsObject } from '@yuuvis/client-core';
-import { DialogComponent, BusyOverlayDirective, ConfirmService, LayoutSettingsService } from '@yuuvis/client-framework/common';
+import { SearchService, BaseObjectTypeField, Operator, TranslatePipe, SystemService, DmsService, EventService, TranslateService, RelationshipTypeField, YuvEventType, SystemType, DmsObject, LocalizationService } from '@yuuvis/client-core';
+import { DialogComponent, BusyOverlayDirective, ConfirmService, ThemeService } from '@yuuvis/client-framework/common';
 import { YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
 import * as i3 from '@yuuvis/material/panes';
 import { YmtPanesModule } from '@yuuvis/material/panes';
@@ -522,14 +522,15 @@ class ObjectRelationshipGraphComponent {
     constructor() {
         this.#dialog = inject(MatDialog);
         this.#system = inject(SystemService);
-        this.#layoutSettings = inject(LayoutSettingsService);
+        this.#localization = inject(LocalizationService);
+        this.#theme = inject(ThemeService);
         this.#objectRelationshipService = inject(ObjectRelationshipService);
         this.#snack = inject(SnackBarService);
-        this.translate = inject(TranslateService);
+        this.#translate = inject(TranslateService);
         this.container = viewChild.required('graphContainer');
         this.#mode = computed(() => {
-            const m = this.#layoutSettings.mode();
-            switch (m) {
+            const mode = this.#theme.mode();
+            switch (mode) {
                 case 'dark': {
                     return 'dark';
                 }
@@ -546,7 +547,7 @@ class ObjectRelationshipGraphComponent {
             const rel = this.#relations();
             if (!rel)
                 return;
-            this.#_updateGraph(rel.originId, rel.relations, rel.objects);
+            this.#updateGraph(rel.originId, rel.relations, rel.objects);
         }, ...(ngDevMode ? [{ debugName: "#relationsEffect" }] : /* istanbul ignore next */ []));
         /**
          * Configuration for the relations component.
@@ -559,6 +560,8 @@ class ObjectRelationshipGraphComponent {
         this.#relationQA = {};
         this.#nodes = new DataSet([]);
         this.#edges = new DataSet([]);
+        // tracks what each node's expansion added, so a second double-click can collapse it again
+        this.#expansions = new Map();
         this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
         this.selectedRelation = signal(null, ...(ngDevMode ? [{ debugName: "selectedRelation" }] : /* istanbul ignore next */ []));
         this.#selectedRelationEffect = effect(() => {
@@ -566,10 +569,10 @@ class ObjectRelationshipGraphComponent {
         }, ...(ngDevMode ? [{ debugName: "#selectedRelationEffect" }] : /* istanbul ignore next */ []));
         this.selectedObject = signal(null, ...(ngDevMode ? [{ debugName: "selectedObject" }] : /* istanbul ignore next */ []));
         this.#selectedObjectEffect = effect(() => {
-            const so = this.selectedObject();
-            if (so)
+            const selectedObj = this.selectedObject();
+            if (selectedObj)
                 this.selectedRelation.set(null);
-            this.objectSelected.emit(so);
+            this.objectSelected.emit(selectedObj);
         }, ...(ngDevMode ? [{ debugName: "#selectedObjectEffect" }] : /* istanbul ignore next */ []));
         this.detailsNode = computed(() => {
             const object = this.selectedObject();
@@ -579,9 +582,11 @@ class ObjectRelationshipGraphComponent {
     }
     #dialog;
     #system;
-    #layoutSettings;
+    #localization;
+    #theme;
     #objectRelationshipService;
     #snack;
+    #translate;
     #mode;
     #relations;
     #relationsEffect;
@@ -590,10 +595,62 @@ class ObjectRelationshipGraphComponent {
     #relationQA;
     #nodes;
     #edges;
+    // tracks what each node's expansion added, so a second double-click can collapse it again
+    #expansions;
     #selectedRelationEffect;
     #selectedObjectEffect;
+    // #region: Lifecycle Hooks */
+    ngOnDestroy() {
+        if (this.#network) {
+            this.#network.destroy();
+        }
+    }
+    ngAfterViewInit() {
+        const options = {
+            physics: {
+                enabled: true,
+                solver: 'forceAtlas2Based',
+                forceAtlas2Based: {
+                    // gravitationalConstant: -50,
+                    // centralGravity: 0.01,
+                    springLength: 200
+                }
+            },
+            nodes: {
+                shape: 'dot',
+                size: 20,
+                font: { size: 12 }
+            }
+        };
+        this.#network = new Network(this.container().nativeElement, {
+            nodes: this.#nodes,
+            edges: this.#edges
+        }, options);
+        this.#network.on('selectNode', (params) => this.#setSelection(params));
+        this.#network.on('deselectNode', (params) => this.#setSelection(params));
+        this.#network.on('dragEnd', (params) => this.#setSelection(params));
+        this.#network.on('selectEdge', (params) => this.#setSelection(params));
+        this.#network.on('deselectEdge', (params) => this.#setSelection(params));
+        this.#network.on('click', (params) => this.#setSelection(params));
+        this.#network.on('doubleClick', (params) => {
+            const nodeId = params.nodes[0];
+            if (!nodeId)
+                return;
+            // the root node never collapses - a double-click on it just re-expands
+            const isRoot = nodeId === this.#relations()?.originId;
+            if (!isRoot && this.#expansions.has(nodeId)) {
+                this.#collapse(nodeId);
+            }
+            else {
+                this.#expand(nodeId);
+            }
+        });
+    }
+    // #endregion
     download() {
         const canvas = this.container().nativeElement.querySelector('canvas');
+        if (!canvas)
+            return;
         const image = canvas.toDataURL('image/png');
         const link = document.createElement('a');
         link.href = image;
@@ -611,7 +668,7 @@ class ObjectRelationshipGraphComponent {
             }
         })
             .afterClosed()
-            .subscribe((result) => {
+            .subscribe(() => {
             this.expandSelected();
         });
     }
@@ -624,7 +681,8 @@ class ObjectRelationshipGraphComponent {
                 const sourceNodeId = deletedEdge.from;
                 const targetNodeId = deletedEdge.to;
                 this.#edges.remove(this.selectedRelation().id);
-                // check if the source/target node of the deleted edge has other connections to another node in the current graph
+                // check if the source/target node of the deleted edge has other connections to
+                // another node in the current graph
                 const otherEdgesForSource = this.#edges
                     .get()
                     .filter((edge) => edge.from === sourceNodeId || edge.to === sourceNodeId);
@@ -639,7 +697,7 @@ class ObjectRelationshipGraphComponent {
                 }
             }
             else {
-                this.#snack.danger(this.translate.instant('yuv.object-relationship.delete-relation.error-message'));
+                this.#snack.danger(this.#translate.instant('yuv.object-relationship.delete-relation.error-message'));
             }
         });
     }
@@ -654,7 +712,11 @@ class ObjectRelationshipGraphComponent {
             this.busy.set(true);
             this.#objectRelationshipService.fetchRelations(nodeId).subscribe({
                 next: (res) => {
-                    this.#_updateGraph(nodeId, res.relations, res.objects);
+                    const added = this.#updateGraph(nodeId, res.relations, res.objects);
+                    // record the expansion so it can be toggled closed again - but never make the root collapsible
+                    if (nodeId !== this.#relations()?.originId) {
+                        this.#expansions.set(nodeId, added);
+                    }
                     this.busy.set(false);
                 },
                 error: (err) => {
@@ -664,7 +726,24 @@ class ObjectRelationshipGraphComponent {
             });
         }
     }
-    #_updateGraph(originId, relations, objects) {
+    // remove the nodes/edges that this node's expansion introduced (and any expanded sub-trees),
+    // keeping nodes that are still connected to the rest of the graph
+    #collapse(nodeId) {
+        const expansion = this.#expansions.get(nodeId);
+        if (!expansion)
+            return;
+        this.#expansions.delete(nodeId);
+        this.#edges.remove(expansion.edgeIds);
+        expansion.nodeIds.forEach((id) => {
+            // collapse the sub-tree first so its edges are gone before the orphan check
+            if (this.#expansions.has(id))
+                this.#collapse(id);
+            const stillConnected = this.#edges.get().some((edge) => edge.from === id || edge.to === id);
+            if (!stillConnected)
+                this.#nodes.remove(id);
+        });
+    }
+    #updateGraph(originId, relations, objects) {
         objects.items.forEach((item) => {
             const id = item.fields.get(BaseObjectTypeField.OBJECT_ID);
             this.#objectQA[id] = new DmsObject(item);
@@ -677,7 +756,7 @@ class ObjectRelationshipGraphComponent {
         const incoming = relations.items.filter((item) => item.fields.get(RelationshipTypeField.TARGET_ID) === originId);
         const outgoing = relations.items.filter((item) => item.fields.get(RelationshipTypeField.SOURCE_ID) === originId);
         const rootNode = this.#toNode(originId);
-        const _nodes = originId === this.#relations()?.originId && this.#nodes.get([originId]).length === 0
+        const _nodes = rootNode && originId === this.#relations()?.originId && this.#nodes.get([originId]).length === 0
             ? [
                 {
                     ...rootNode,
@@ -693,52 +772,57 @@ class ObjectRelationshipGraphComponent {
         // add nodes and edges from search result
         outgoing.forEach((item) => {
             const relatedObjectId = item.fields.get(RelationshipTypeField.TARGET_ID);
-            const n = this.#toNode(relatedObjectId);
-            const e = this.#toEdge(item, originId, relatedObjectId, 'to');
-            if (n) {
+            const node = this.#toNode(relatedObjectId);
+            const edge = this.#toEdge(item, originId, relatedObjectId, 'to');
+            if (node) {
                 // check if the node is already in the rendered graph
-                const nodeExists = _nodes.some((node) => node.id === n.id) || this.#nodes.get([n.id]).length > 0;
+                const nodeExists = _nodes.some((existing) => existing.id === node.id) || this.#nodes.get([node.id]).length > 0;
                 if (!nodeExists)
-                    _nodes.push(n);
+                    _nodes.push(node);
                 // check if edge already exists
-                const edgeExists = _edges.some((edge) => edge.id === e.id) || this.#edges.get([e.id]).length > 0;
+                const edgeExists = _edges.some((existing) => existing.id === edge.id) || this.#edges.get([edge.id]).length > 0;
                 if (!edgeExists)
-                    _edges.push(e);
+                    _edges.push(edge);
             }
         });
         incoming.forEach((item) => {
             const relatedObjectId = item.fields.get(RelationshipTypeField.SOURCE_ID);
-            const n = this.#toNode(relatedObjectId);
-            const e = this.#toEdge(item, relatedObjectId, originId, 'from');
-            if (n) {
+            const toNode = this.#toNode(relatedObjectId);
+            const toEdge = this.#toEdge(item, relatedObjectId, originId, 'from');
+            if (toNode) {
                 // check if the node is already in the rendered graph
-                const nodeExists = _nodes.some((node) => node.id === n.id) || this.#nodes.get([n.id]).length > 0;
+                const nodeExists = _nodes.some((node) => node.id === toNode.id) || this.#nodes.get([toNode.id]).length > 0;
                 if (!nodeExists)
-                    _nodes.push(n);
+                    _nodes.push(toNode);
                 // check if edge already exists
-                const edgeExists = _edges.some((edge) => edge.id === e.id) || this.#edges.get([e.id]).length > 0;
+                const edgeExists = _edges.some((edge) => edge.id === toEdge.id) || this.#edges.get([toEdge.id]).length > 0;
                 if (!edgeExists)
-                    _edges.push(e);
+                    _edges.push(toEdge);
             }
         });
         this.#nodes.add(_nodes);
         this.#edges.add(_edges);
+        // report what was added so the caller can later collapse it - never the root node
+        const rootId = this.#relations()?.originId;
+        return {
+            nodeIds: _nodes.map((node) => node.id).filter((id) => id !== rootId),
+            edgeIds: _edges.map((edge) => edge.id)
+        };
     }
-    #getNodeConfig(o) {
+    #getNodeConfig(dmsObject) {
         const cfg = this.config();
-        if (!o)
+        if (!dmsObject)
             return undefined;
-        const objectTypeIds = [...o.sots, o.objectTypeId];
-        return [cfg.rootNode, ...cfg.nodes].find((n) => objectTypeIds.includes(n.objectType));
+        const objectTypeIds = [...dmsObject.sots, dmsObject.objectTypeId];
+        return [cfg.rootNode, ...cfg.nodes].find((node) => objectTypeIds.includes(node.objectType));
     }
     // convert search result item to vis node
     // will return NULL if the item object type is not configured in the component config
     #toNode(objectId) {
-        const cfg = this.config();
-        const o = this.#objectQA[objectId];
-        if (!o)
+        const dmsObject = this.#objectQA[objectId];
+        if (!dmsObject)
             return null;
-        const cfgNode = this.#getNodeConfig(o);
+        const cfgNode = this.#getNodeConfig(dmsObject);
         if (!cfgNode)
             return null;
         return {
@@ -746,7 +830,7 @@ class ObjectRelationshipGraphComponent {
             objectType: cfgNode.objectType,
             color: this.#getNodeColor(),
             id: objectId,
-            label: this.#maxLength(o.data[cfgNode.labelField], 30),
+            label: this.#maxLength(dmsObject.data[cfgNode.labelField], 30),
             icon: {
                 face: 'Material Symbols Sharp',
                 code: cfgNode.icon,
@@ -759,7 +843,7 @@ class ObjectRelationshipGraphComponent {
         };
     }
     #toEdge(item, from, to, direction) {
-        const label = this.#system.getLocalizedLabel(item.fields.get(BaseObjectTypeField.OBJECT_TYPE_ID)) ||
+        const label = this.#localization.getLocalizedLabel(item.fields.get(BaseObjectTypeField.OBJECT_TYPE_ID)) ||
             item.fields.get(BaseObjectTypeField.OBJECT_TYPE_ID);
         return {
             ...EDGE_SETTINGS,
@@ -836,48 +920,12 @@ class ObjectRelationshipGraphComponent {
         else
             return s;
     }
-    ngAfterViewInit() {
-        const options = {
-            physics: {
-                enabled: true,
-                solver: 'forceAtlas2Based',
-                forceAtlas2Based: {
-                    // gravitationalConstant: -50,
-                    // centralGravity: 0.01,
-                    springLength: 200
-                }
-            },
-            nodes: {
-                shape: 'dot',
-                size: 20,
-                font: { size: 12 }
-            }
-        };
-        this.#network = new Network(this.container().nativeElement, {
-            nodes: this.#nodes,
-            edges: this.#edges
-        }, options);
-        this.#network.on('selectNode', (params) => this.#setSelection(params));
-        this.#network.on('deselectNode', (params) => this.#setSelection(params));
-        this.#network.on('dragEnd', (params) => this.#setSelection(params));
-        this.#network.on('selectEdge', (params) => this.#setSelection(params));
-        this.#network.on('deselectEdge', (params) => this.#setSelection(params));
-        this.#network.on('click', (params) => this.#setSelection(params));
-        this.#network.on('doubleClick', (params) => {
-            this.#expand(params.nodes[0]);
-        });
-    }
     #setSelection(params) {
         this.selectedObject.set(params.nodes.length === 1 ? this.#objectQA[params.nodes[0]] : null);
         this.selectedRelation.set(params.edges.length === 1 && params.nodes.length === 0 ? this.#relationQA[params.edges[0]] : null);
     }
-    ngOnDestroy() {
-        if (this.#network) {
-            this.#network.destroy();
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ObjectRelationshipGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ObjectRelationshipGraphComponent, isStandalone: true, selector: "yuv-object-relationship-graph", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { objectSelected: "objectSelected", relationSelected: "relationSelected" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["graphContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relations\" [yuvBusyOverlay]=\"busy()\">\n  <div class=\"toolbar\">\n    <button ymtIconButton (click)=\"download()\" [matTooltip]=\"'yuv.object-relationship.download.tooltip' | translate\">\n      <mat-icon>download</mat-icon>\n    </button>\n    @if (selectedRelation()) {\n      <button ymtIconButton (click)=\"deleteRelationship()\" [matTooltip]=\"'yuv.object-relationship.delete-relation.tooltip' | translate\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n  </div>\n  <div class=\"graph-container\" #graphContainer></div>\n\n  @let dn = detailsNode();\n  @if (dn) {\n    <div class=\"selected\">\n      <yuv-node-summary [object]=\"dn.object\" [nodeConfig]=\"dn.config\" [actions]=\"additionalSummaryActions\"></yuv-node-summary>\n    </div>\n  }\n</div>\n\n<ng-template #additionalSummaryActions>\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"'yuv.object-relationship.selected.add-relationship.tooltip' | translate\"\n    (click)=\"addRelationship()\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n  <button ymt-icon-button icon-button-size=\"small\" [matTooltip]=\"'yuv.object-relationship.selected.expand.tooltip' | translate\" (click)=\"expandSelected()\">\n    <mat-icon>open_with</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host{--_container-background-color: var(--container-background-color, var(--ymt-surface));--_node-background-color: var(--node-background-color, var(--ymt-surface-container));--_node-border-color: var(--node-border-color, var(--ymt-outline));--_node-font-color: var(--node-font-color, var(--ymt-text-color));--_node-background-color-highlight: var(--node-background-color-highlight, var(--ymt-primary-container));--_node-color-highlight: var(--node-color-highlight, var(--ymt-on-primary-container));--_edge-font-color: var(--edge-font-color, var(--ymt-text-color-subtle));--_edge-color: var(--edge-color, var(--ymt-outline));--_edge-color-highlight: var(--edge-color-highlight, var(--ymt-primary));--_edge-color-hover: var(--edge-color-hover, var(--ymt-primary))}:host .relations{position:relative;display:block;height:100%}:host .relations .toolbar{position:absolute;inset-block-start:var(--ymt-spacing-2xs);inset-inline-start:var(--ymt-spacing-s);z-index:10}:host .relations .graph-container{background-color:var(--_container-background-color);width:100%;height:100%}:host .relations .selected{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-start:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);padding:var(--ymt-spacing-s) var(--ymt-spacing-m);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:rgb(from var(--ymt-surface) r g b/.8);border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);max-width:33%;z-index:10;min-width:200px}:host .relations .selected yuv-node-summary{height:100%}\n"], dependencies: [{ kind: "component", type: NodeSummaryComponent, selector: "yuv-node-summary", inputs: ["object", "nodeConfig", "actions"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ObjectRelationshipGraphComponent, isStandalone: true, selector: "yuv-object-relationship-graph", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { objectSelected: "objectSelected", relationSelected: "relationSelected" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["graphContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relations\" [yuvBusyOverlay]=\"busy()\">\n  <div class=\"toolbar\">\n    <button ymtIconButton (click)=\"download()\" [matTooltip]=\"'yuv.object-relationship.download.tooltip' | translate\">\n      <mat-icon>download</mat-icon>\n    </button>\n    @if (selectedRelation()) {\n      <button\n        ymtIconButton\n        (click)=\"deleteRelationship()\"\n        [matTooltip]=\"'yuv.object-relationship.delete-relation.tooltip' | translate\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n  </div>\n  <div class=\"graph-container\" #graphContainer></div>\n\n  @let dn = detailsNode();\n  @if (dn) {\n    <div class=\"selected\">\n      <yuv-node-summary [object]=\"dn.object\" [nodeConfig]=\"dn.config\" [actions]=\"additionalSummaryActions\" />\n    </div>\n  }\n</div>\n\n<ng-template #additionalSummaryActions>\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"'yuv.object-relationship.selected.add-relationship.tooltip' | translate\"\n    (click)=\"addRelationship()\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"'yuv.object-relationship.selected.expand.tooltip' | translate\"\n    (click)=\"expandSelected()\"\n  >\n    <mat-icon>open_with</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host{--_container-background-color: var(--container-background-color, var(--ymt-surface));--_node-background-color: var(--node-background-color, var(--ymt-surface-container));--_node-border-color: var(--node-border-color, var(--ymt-outline));--_node-font-color: var(--node-font-color, var(--ymt-text-color));--_node-background-color-highlight: var(--node-background-color-highlight, var(--ymt-primary-container));--_node-color-highlight: var(--node-color-highlight, var(--ymt-on-primary-container));--_edge-font-color: var(--edge-font-color, var(--ymt-text-color-subtle));--_edge-color: var(--edge-color, var(--ymt-outline));--_edge-color-highlight: var(--edge-color-highlight, var(--ymt-primary));--_edge-color-hover: var(--edge-color-hover, var(--ymt-primary))}:host .relations{position:relative;display:block;height:100%}:host .relations .toolbar{position:absolute;inset-block-start:var(--ymt-spacing-2xs);inset-inline-start:var(--ymt-spacing-s);z-index:10}:host .relations .graph-container{background-color:var(--_container-background-color);width:100%;height:100%}:host .relations .selected{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-start:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);padding:var(--ymt-spacing-s) var(--ymt-spacing-m);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:rgb(from var(--ymt-surface) r g b/.8);border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);max-width:33%;z-index:10;min-width:200px}:host .relations .selected yuv-node-summary{height:100%}\n"], dependencies: [{ kind: "component", type: NodeSummaryComponent, selector: "yuv-node-summary", inputs: ["object", "nodeConfig", "actions"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ObjectRelationshipGraphComponent, decorators: [{
             type: Component,
@@ -888,7 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         MatTooltipModule,
                         TranslatePipe,
                         YmtIconButtonDirective
-                    ], template: "<div class=\"relations\" [yuvBusyOverlay]=\"busy()\">\n  <div class=\"toolbar\">\n    <button ymtIconButton (click)=\"download()\" [matTooltip]=\"'yuv.object-relationship.download.tooltip' | translate\">\n      <mat-icon>download</mat-icon>\n    </button>\n    @if (selectedRelation()) {\n      <button ymtIconButton (click)=\"deleteRelationship()\" [matTooltip]=\"'yuv.object-relationship.delete-relation.tooltip' | translate\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n  </div>\n  <div class=\"graph-container\" #graphContainer></div>\n\n  @let dn = detailsNode();\n  @if (dn) {\n    <div class=\"selected\">\n      <yuv-node-summary [object]=\"dn.object\" [nodeConfig]=\"dn.config\" [actions]=\"additionalSummaryActions\"></yuv-node-summary>\n    </div>\n  }\n</div>\n\n<ng-template #additionalSummaryActions>\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"'yuv.object-relationship.selected.add-relationship.tooltip' | translate\"\n    (click)=\"addRelationship()\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n  <button ymt-icon-button icon-button-size=\"small\" [matTooltip]=\"'yuv.object-relationship.selected.expand.tooltip' | translate\" (click)=\"expandSelected()\">\n    <mat-icon>open_with</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host{--_container-background-color: var(--container-background-color, var(--ymt-surface));--_node-background-color: var(--node-background-color, var(--ymt-surface-container));--_node-border-color: var(--node-border-color, var(--ymt-outline));--_node-font-color: var(--node-font-color, var(--ymt-text-color));--_node-background-color-highlight: var(--node-background-color-highlight, var(--ymt-primary-container));--_node-color-highlight: var(--node-color-highlight, var(--ymt-on-primary-container));--_edge-font-color: var(--edge-font-color, var(--ymt-text-color-subtle));--_edge-color: var(--edge-color, var(--ymt-outline));--_edge-color-highlight: var(--edge-color-highlight, var(--ymt-primary));--_edge-color-hover: var(--edge-color-hover, var(--ymt-primary))}:host .relations{position:relative;display:block;height:100%}:host .relations .toolbar{position:absolute;inset-block-start:var(--ymt-spacing-2xs);inset-inline-start:var(--ymt-spacing-s);z-index:10}:host .relations .graph-container{background-color:var(--_container-background-color);width:100%;height:100%}:host .relations .selected{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-start:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);padding:var(--ymt-spacing-s) var(--ymt-spacing-m);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:rgb(from var(--ymt-surface) r g b/.8);border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);max-width:33%;z-index:10;min-width:200px}:host .relations .selected yuv-node-summary{height:100%}\n"] }]
+                    ], template: "<div class=\"relations\" [yuvBusyOverlay]=\"busy()\">\n  <div class=\"toolbar\">\n    <button ymtIconButton (click)=\"download()\" [matTooltip]=\"'yuv.object-relationship.download.tooltip' | translate\">\n      <mat-icon>download</mat-icon>\n    </button>\n    @if (selectedRelation()) {\n      <button\n        ymtIconButton\n        (click)=\"deleteRelationship()\"\n        [matTooltip]=\"'yuv.object-relationship.delete-relation.tooltip' | translate\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n  </div>\n  <div class=\"graph-container\" #graphContainer></div>\n\n  @let dn = detailsNode();\n  @if (dn) {\n    <div class=\"selected\">\n      <yuv-node-summary [object]=\"dn.object\" [nodeConfig]=\"dn.config\" [actions]=\"additionalSummaryActions\" />\n    </div>\n  }\n</div>\n\n<ng-template #additionalSummaryActions>\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"'yuv.object-relationship.selected.add-relationship.tooltip' | translate\"\n    (click)=\"addRelationship()\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"'yuv.object-relationship.selected.expand.tooltip' | translate\"\n    (click)=\"expandSelected()\"\n  >\n    <mat-icon>open_with</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host{--_container-background-color: var(--container-background-color, var(--ymt-surface));--_node-background-color: var(--node-background-color, var(--ymt-surface-container));--_node-border-color: var(--node-border-color, var(--ymt-outline));--_node-font-color: var(--node-font-color, var(--ymt-text-color));--_node-background-color-highlight: var(--node-background-color-highlight, var(--ymt-primary-container));--_node-color-highlight: var(--node-color-highlight, var(--ymt-on-primary-container));--_edge-font-color: var(--edge-font-color, var(--ymt-text-color-subtle));--_edge-color: var(--edge-color, var(--ymt-outline));--_edge-color-highlight: var(--edge-color-highlight, var(--ymt-primary));--_edge-color-hover: var(--edge-color-hover, var(--ymt-primary))}:host .relations{position:relative;display:block;height:100%}:host .relations .toolbar{position:absolute;inset-block-start:var(--ymt-spacing-2xs);inset-inline-start:var(--ymt-spacing-s);z-index:10}:host .relations .graph-container{background-color:var(--_container-background-color);width:100%;height:100%}:host .relations .selected{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-start:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);padding:var(--ymt-spacing-s) var(--ymt-spacing-m);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:rgb(from var(--ymt-surface) r g b/.8);border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);max-width:33%;z-index:10;min-width:200px}:host .relations .selected yuv-node-summary{height:100%}\n"] }]
         }], propDecorators: { container: [{ type: i0.ViewChild, args: ['graphContainer', { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], objectSelected: [{ type: i0.Output, args: ["objectSelected"] }], relationSelected: [{ type: i0.Output, args: ["relationSelected"] }] } });
 
 class ObjectRelationshipListItemComponent {
@@ -896,7 +944,7 @@ class ObjectRelationshipListItemComponent {
         this.#router = inject(Router);
         this.#snack = inject(SnackBarService);
         this.#objectRelationshipService = inject(ObjectRelationshipService);
-        this.translate = inject(TranslateService);
+        this.#translate = inject(TranslateService);
         this.link = input.required(...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
         this.direction = input.required(...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
         this.enableSourceLink = input(false, ...(ngDevMode ? [{ debugName: "enableSourceLink" }] : /* istanbul ignore next */ []));
@@ -905,16 +953,17 @@ class ObjectRelationshipListItemComponent {
     #router;
     #snack;
     #objectRelationshipService;
+    #translate;
     deleteRelationship() {
         this.#objectRelationshipService.deleteRelationship(this.link().id, true).subscribe((success) => {
             if (!success) {
-                this.#snack.danger(this.translate.instant('yuv.object-relationship.delete-relation.error-message'));
+                this.#snack.danger(this.#translate.instant('yuv.object-relationship.delete-relation.error-message'));
             }
         });
     }
-    open(link, skip) {
+    async open(link, skip) {
         if (link && !skip)
-            this.#router.navigateByUrl(link);
+            await this.#router.navigateByUrl(link);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ObjectRelationshipListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ObjectRelationshipListItemComponent, isStandalone: true, selector: "yuv-object-relationship-list-item", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: true, transformFunction: null }, enableSourceLink: { classPropertyName: "enableSourceLink", publicName: "enableSourceLink", isSignal: true, isRequired: false, transformFunction: null }, enableTargetLink: { classPropertyName: "enableTargetLink", publicName: "enableTargetLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let lnk = link();\n\n<button\n  class=\"node source\"\n  (click)=\"open(lnk.source.objectLink, !enableSourceLink())\"\n  [attr.aria-readonly]=\"!enableSourceLink() || !lnk.source.objectLink\"\n  [class.self]=\"direction() === 'out'\"\n>\n  @if (lnk.source.icon) {\n    <mat-icon>{{ lnk.source.icon }}</mat-icon>\n  }\n  <span class=\"title\">{{ lnk.source.label }}</span>\n  <span class=\"description\">{{ lnk.source.description }}</span>\n</button>\n\n<div class=\"line\" [class.arr]=\"direction() === 'in'\"></div>\n<div class=\"relation\">{{ lnk.type.label }}</div>\n<div class=\"line\" [class.arr]=\"direction() === 'out'\"></div>\n\n<button\n  class=\"node target\"\n  (click)=\"open(lnk.target.objectLink, !enableTargetLink())\"\n  [attr.aria-readonly]=\"!enableTargetLink() || !lnk.target.objectLink\"\n  [class.self]=\"direction() === 'in'\"\n>\n  @if (lnk.target.icon) {\n    <mat-icon>{{ lnk.target.icon }}</mat-icon>\n  }\n  <span class=\"title\">{{ lnk.target.label }}</span>\n  <span class=\"description\">{{ lnk.target.description }}</span>\n</button>\n\n<div class=\"actions\">  \n  <button ymtIconButton icon-button-size=\"small\" (click)=\"deleteRelationship()\"><mat-icon>delete</mat-icon></button>\n</div>\n", styles: [":host{margin-block-end:var(--ymt-spacing-xs);display:grid;grid-template-columns:auto 1fr auto 1fr auto auto;align-items:center;grid-template-areas:\"source line relation arrow target actions\";column-gap:var(--ymt-spacing-xs);background-color:var(--ymt-surface);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-2xs);border:1px solid var(--ymt-outline-variant)}:host .relation{color:var(--ymt-text-color-subtle);text-align:center;line-height:1.1em}:host>button{grid-area:source;display:grid;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;grid-template-areas:\"icon label\" \"icon desc\";border-radius:var(--ymt-corner-xs);border:2px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-xs);font:var(--ymt-font-title-smallest);background-color:transparent;text-align:start}:host>button mat-icon{grid-area:icon;scale:.6;margin-inline-end:var(--ymt-spacing-xs)}:host>button .title{grid-area:label}:host>button .description{grid-area:desc;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host>button.self{background-color:var(--ymt-surface-container);color:var(--ymt-on-surface)}:host>button:not(.self):hover{background-color:var(--ymt-hover-background)}:host>button:not([aria-readonly=true]){cursor:pointer}:host>button.target{grid-area:target}:host>button:not([aria-readonly]){cursor:pointer}:host .line{grid-area:line;height:2px;position:relative;background-color:var(--ymt-outline);opacity:.5;min-width:1em}:host .line.arr{grid-area:arrow}:host .line.arr:before{content:\"\";position:absolute;transform:rotate(45deg);transform-origin:top right;width:7px;inset-inline-end:0;translate:2px 1px;height:7px;border:3.5px solid transparent;border-block-start-color:var(--ymt-outline);border-inline-end-color:var(--ymt-outline)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }] }); }
@@ -927,7 +976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class ObjectRelationshipListComponent {
     constructor() {
         this.#search = inject(SearchService);
-        this.#system = inject(SystemService);
+        this.#localization = inject(LocalizationService);
         this.#objectRelationshipService = inject(ObjectRelationshipService);
         /**
          * Configuration for the relations component.
@@ -945,7 +994,7 @@ class ObjectRelationshipListComponent {
         this.#objectQA = {};
     }
     #search;
-    #system;
+    #localization;
     #objectRelationshipService;
     #relations;
     #relationsEffect;
@@ -957,8 +1006,8 @@ class ObjectRelationshipListComponent {
             const id = item.fields.get(BaseObjectTypeField.OBJECT_ID);
             this.#objectQA[id] = new DmsObject(item);
         });
-        this.incomingLinks.set(incoming.map((rel) => this.#map(rel)).filter((l) => l !== undefined));
-        this.outgoingLinks.set(outgoing.map((rel) => this.#map(rel)).filter((l) => l !== undefined));
+        this.incomingLinks.set(incoming.map((rel) => this.#map(rel)).filter((link) => link !== undefined));
+        this.outgoingLinks.set(outgoing.map((rel) => this.#map(rel)).filter((link) => link !== undefined));
     }
     #map(relation) {
         const sourceObject = this.#objectQA[relation.fields.get(RelationshipTypeField.SOURCE_ID)];
@@ -981,7 +1030,7 @@ class ObjectRelationshipListComponent {
             id: relID,
             type: {
                 id: relObjectTypeID,
-                label: this.#system.getLocalizedLabel(relObjectTypeID) || relObjectTypeID
+                label: this.#localization.getLocalizedLabel(relObjectTypeID) || relObjectTypeID
             },
             source: {
                 id: relation.fields.get(RelationshipTypeField.SOURCE_ID),
@@ -1003,7 +1052,7 @@ class ObjectRelationshipListComponent {
         const cfg = this.config();
         if (!object)
             return undefined;
-        return cfg.nodes.find((n) => object.data[BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS].includes(n.objectType));
+        return cfg.nodes.find((nodes) => object.data[BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS].includes(nodes.objectType));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ObjectRelationshipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ObjectRelationshipListComponent, isStandalone: true, selector: "yuv-object-relationship-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let incoming = incomingLinks();\n@let outgoing = outgoingLinks();\n\n@if (incoming.length > 0) {\n  <h3>{{ 'yuv.object-relationship.list.incoming' | translate }}</h3>\n  @for (n of incoming; track n.id) {\n    <yuv-object-relationship-list-item\n      [enableSourceLink]=\"true\"\n      [enableTargetLink]=\"false\"\n      [link]=\"n\"\n      direction=\"in\"\n    ></yuv-object-relationship-list-item>\n  }\n}\n@if (outgoing.length > 0) {\n  <h3>{{ 'yuv.object-relationship.list.outgoing' | translate }}</h3>\n  @for (n of outgoing; track n.id) {\n    <yuv-object-relationship-list-item\n      [enableSourceLink]=\"false\"\n      [enableTargetLink]=\"true\"\n      [link]=\"n\"\n      direction=\"out\"\n    ></yuv-object-relationship-list-item>\n  }\n}\n", styles: [":host{display:block;padding:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "component", type: ObjectRelationshipListItemComponent, selector: "yuv-object-relationship-list-item", inputs: ["link", "direction", "enableSourceLink", "enableTargetLink"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
@@ -1024,7 +1073,7 @@ class ObjectRelationshipComponent {
         this.mode = model('graph', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         this.empty = computed(() => {
             const rel = this.#relations();
-            return rel && rel.relations.totalNumItems === 0;
+            return rel?.relations.totalNumItems === 0;
         }, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
         /**
          * ID of the object to display relations for.