@yuuvis/client-framework 2.20.1 → 3.0.0-beta.20.0

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

@@ -1,36 +1,35 @@
 import * as i0 from '@angular/core';
 import { inject, input, effect, computed, signal, forwardRef, Component, Injectable, viewChild, output, model, NgModule } from '@angular/core';
-import * as i1$3 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
 import * as i1$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$1 from '@angular/material/tooltip';
+import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2 from '@yuuvis/client-core';
-import { SearchService, BaseObjectTypeField, Operator, TranslateModule, SystemService, DmsService, EventService, TranslateService, RelationshipTypeField, YuvEventType, SystemType, DmsObject } from '@yuuvis/client-core';
+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 { YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
-import * as i4 from '@yuuvis/material/panes';
+import * as i3 from '@yuuvis/material/panes';
 import { YmtPanesModule } from '@yuuvis/material/panes';
 import { takeUntilDestroyed, toSignal, rxResource } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup } from '@angular/forms';
-import * as i6 from '@angular/material/chips';
+import * as i5 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i5 from '@angular/material/form-field';
+import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule, MatError } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
-import * as i5$1 from '@yuuvis/client-framework/list';
+import * as i4$1 from '@yuuvis/client-framework/list';
 import { YuvListModule } from '@yuuvis/client-framework/list';
 import { tap, switchMap, map, of, catchError } from 'rxjs';
 import * as i1 from '@yuuvis/client-framework/autocomplete';
 import { YuvAutocompleteModule } from '@yuuvis/client-framework/autocomplete';
+import { SnackBarService } from '@yuuvis/client-framework';
 import { DataSet, Network } from 'vis-network/standalone';
-import { RendererDirective } from '@yuuvis/client-framework/renderer';
+import * as i1$3 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
-import { SnackBarService } from '@yuuvis/client-framework';
+import { RendererDirective } from '@yuuvis/client-framework/renderer';
 
 class RelationshipTargetSearchComponent {
     #searchService;
@@ -38,27 +37,27 @@ class RelationshipTargetSearchComponent {
     #configQA;
     constructor() {
         this.#searchService = inject(SearchService);
-        this.supportedRelationships = input.required();
+        this.supportedRelationships = input.required(...(ngDevMode ? [{ debugName: "supportedRelationships" }] : []));
         // ID of the source object
-        this.sourceNode = input.required();
-        this.targetTypes = input([]);
+        this.sourceNode = input.required(...(ngDevMode ? [{ debugName: "sourceNode" }] : []));
+        this.targetTypes = input([], ...(ngDevMode ? [{ debugName: "targetTypes" }] : []));
         this.#availableTargetTypesEffect = effect(() => {
             const att = this.targetTypes();
             if (att.length === 0)
                 this.acFormControl.disable();
             else
                 this.acFormControl.enable();
-        });
-        this.config = input.required();
+        }, ...(ngDevMode ? [{ debugName: "#availableTargetTypesEffect" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.#configQA = computed(() => {
             const qa = {};
             this.config().nodes.forEach((c) => {
                 qa[c.objectType] = c;
             });
             return qa;
-        });
+        }, ...(ngDevMode ? [{ debugName: "#configQA" }] : []));
         this.autocompleteRes = [];
-        this.innerValue = signal(undefined);
+        this.innerValue = signal(undefined, ...(ngDevMode ? [{ debugName: "innerValue" }] : []));
         this.mappedValue = computed(() => {
             const v = this.innerValue();
             if (!v || !v.value)
@@ -78,8 +77,8 @@ class RelationshipTargetSearchComponent {
                 description: configNode.descriptionField ? v.value.data[configNode.descriptionField] : undefined,
                 icon: configNode.icon
             };
-        });
-        this.busy = signal(false);
+        }, ...(ngDevMode ? [{ debugName: "mappedValue" }] : []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
         this.acFormControl = new FormControl(null, Validators.required);
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
@@ -177,18 +176,25 @@ class RelationshipTargetSearchComponent {
             this.acFormControl.enable();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RelationshipTargetSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: RelationshipTargetSearchComponent, isStandalone: true, selector: "yuv-relationship-target-search", inputs: { supportedRelationships: { classPropertyName: "supportedRelationships", publicName: "supportedRelationships", isSignal: true, isRequired: true, transformFunction: null }, sourceNode: { classPropertyName: "sourceNode", publicName: "sourceNode", isSignal: true, isRequired: true, transformFunction: null }, targetTypes: { classPropertyName: "targetTypes", publicName: "targetTypes", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.has-value": "!!mappedValue()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RelationshipTargetSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: RelationshipTargetSearchComponent, isStandalone: true, selector: "yuv-relationship-target-search", inputs: { supportedRelationships: { classPropertyName: "supportedRelationships", publicName: "supportedRelationships", isSignal: true, isRequired: true, transformFunction: null }, sourceNode: { classPropertyName: "sourceNode", publicName: "sourceNode", isSignal: true, isRequired: true, transformFunction: null }, targetTypes: { classPropertyName: "targetTypes", publicName: "targetTypes", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.has-value": "!!mappedValue()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RelationshipTargetSearchComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{ 'yuv.object-relationship.add-relationship.target-search.label' | translate }}</mat-label>\n\n  <yuv-autocomplete\n    [required]=\"true\"\n    [busy]=\"busy()\"\n    [formControl]=\"acFormControl\"\n    [autocompleteValues]=\"autocompleteRes\"\n    [forceSelection]=\"true\"\n    (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"false\"\n  >\n    <!-- template for option -->\n    <ng-template #optionTemplate let-item>\n      <div class=\"label\">{{ item.label }}</div>\n      <div class=\"meta\" style=\"font: var(--ymt-font-body-subtle); color: var(--ymt-text-color-subtle)\">{{ item.value.description }}</div>\n    </ng-template>\n  </yuv-autocomplete>\n\n  @let v = mappedValue();\n  @if (v) {\n    <div class=\"value-node\" aria-live=\"polite\">\n      @if (v.icon) {\n        <div class=\"icon\" aria-hidden=\"true\">\n          <mat-icon>{{ v.icon }}</mat-icon>\n        </div>\n      }\n      <strong class=\"label\">{{ v.title }}</strong>\n      <div class=\"description\">{{ v.description }}</div>\n\n      <button\n        type=\"button\"\n        ymtIconButton\n        icon-button-size=\"small\"\n        [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-search.clear' | translate\"\n        (click)=\"reset()\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  }\n</mat-form-field>\n", styles: [":host mat-form-field{width:100%}:host.has-value yuv-autocomplete{display:none}:host .value-node{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host .value-node .icon{grid-area:icon}:host .value-node .label{grid-area:label}:host .value-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }] }); }
+        ], ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{ 'yuv.object-relationship.add-relationship.target-search.label' | translate }}</mat-label>\n\n  <yuv-autocomplete\n    [required]=\"true\"\n    [busy]=\"busy()\"\n    [formControl]=\"acFormControl\"\n    [autocompleteValues]=\"autocompleteRes\"\n    [forceSelection]=\"true\"\n    (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"false\"\n  >\n    <!-- template for option -->\n    <ng-template #optionTemplate let-item>\n      <div class=\"label\">{{ item.label }}</div>\n      <div class=\"meta\" style=\"font: var(--ymt-font-body-subtle); color: var(--ymt-text-color-subtle)\">{{ item.value.description }}</div>\n    </ng-template>\n  </yuv-autocomplete>\n\n  @let v = mappedValue();\n  @if (v) {\n    <div class=\"value-node\" aria-live=\"polite\">\n      @if (v.icon) {\n        <div class=\"icon\" aria-hidden=\"true\">\n          <mat-icon>{{ v.icon }}</mat-icon>\n        </div>\n      }\n      <strong class=\"label\">{{ v.title }}</strong>\n      <div class=\"description\">{{ v.description }}</div>\n\n      <button\n        type=\"button\"\n        ymtIconButton\n        icon-button-size=\"small\"\n        [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-search.clear' | translate\"\n        (click)=\"reset()\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  }\n</mat-form-field>\n", styles: [":host mat-form-field{width:100%}:host.has-value yuv-autocomplete{display:none}:host .value-node{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host .value-node .icon{grid-area:icon}:host .value-node .label{grid-area:label}:host .value-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RelationshipTargetSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RelationshipTargetSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-relationship-target-search', imports: [YuvAutocompleteModule, ReactiveFormsModule, MatIconModule, YmtIconButtonDirective, TranslateModule, MatFormFieldModule], providers: [
+            args: [{ selector: 'yuv-relationship-target-search', imports: [
+                        YuvAutocompleteModule,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        YmtIconButtonDirective,
+                        TranslatePipe,
+                        MatFormFieldModule
+                    ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RelationshipTargetSearchComponent),
@@ -197,7 +203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     ], host: {
                         '[class.has-value]': '!!mappedValue()'
                     }, template: "<mat-form-field>\n  <mat-label>{{ 'yuv.object-relationship.add-relationship.target-search.label' | translate }}</mat-label>\n\n  <yuv-autocomplete\n    [required]=\"true\"\n    [busy]=\"busy()\"\n    [formControl]=\"acFormControl\"\n    [autocompleteValues]=\"autocompleteRes\"\n    [forceSelection]=\"true\"\n    (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"false\"\n  >\n    <!-- template for option -->\n    <ng-template #optionTemplate let-item>\n      <div class=\"label\">{{ item.label }}</div>\n      <div class=\"meta\" style=\"font: var(--ymt-font-body-subtle); color: var(--ymt-text-color-subtle)\">{{ item.value.description }}</div>\n    </ng-template>\n  </yuv-autocomplete>\n\n  @let v = mappedValue();\n  @if (v) {\n    <div class=\"value-node\" aria-live=\"polite\">\n      @if (v.icon) {\n        <div class=\"icon\" aria-hidden=\"true\">\n          <mat-icon>{{ v.icon }}</mat-icon>\n        </div>\n      }\n      <strong class=\"label\">{{ v.title }}</strong>\n      <div class=\"description\">{{ v.description }}</div>\n\n      <button\n        type=\"button\"\n        ymtIconButton\n        icon-button-size=\"small\"\n        [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-search.clear' | translate\"\n        (click)=\"reset()\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  }\n</mat-form-field>\n", styles: [":host mat-form-field{width:100%}:host.has-value yuv-autocomplete{display:none}:host .value-node{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host .value-node .icon{grid-area:icon}:host .value-node .label{grid-area:label}:host .value-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { supportedRelationships: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedRelationships", required: true }] }], sourceNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceNode", required: true }] }], targetTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetTypes", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AddRelationshipComponent {
     constructor() {
@@ -209,13 +215,15 @@ class AddRelationshipComponent {
         this.translate = inject(TranslateService);
         this.targetTypeLabels = {};
         this.targetTypeFilterControl = new FormControl([]);
-        this.targetTypeFilterValue = toSignal(this.targetTypeFilterControl.valueChanges, { initialValue: this.targetTypeFilterControl.value || null });
-        this.object = input(this.#dialogData.object);
-        this.config = input(this.#dialogData.config);
+        this.targetTypeFilterValue = toSignal(this.targetTypeFilterControl.valueChanges, {
+            initialValue: this.targetTypeFilterControl.value || null
+        });
+        this.object = input(this.#dialogData.object, ...(ngDevMode ? [{ debugName: "object" }] : []));
+        this.config = input(this.#dialogData.config, ...(ngDevMode ? [{ debugName: "config" }] : []));
         this.supportedRelationships = computed(() => {
             const obj = this.object();
             return obj ? this.#system.getSupportedRelationships(obj, true) : [];
-        });
+        }, ...(ngDevMode ? [{ debugName: "supportedRelationships" }] : []));
         this.filteredRelationships = computed(() => {
             // filter the supported relationships of the object by the allowed target types
             // if target types are selected
@@ -223,7 +231,7 @@ class AddRelationshipComponent {
             return this.supportedRelationships().filter((r) => {
                 return !tt || r.allowedTargetTypes.some((t) => tt.includes(t));
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "filteredRelationships" }] : []));
         // get the target types from the relationships
         this.availableTargetTypes = computed(() => {
             const rel = this.supportedRelationships();
@@ -234,8 +242,8 @@ class AddRelationshipComponent {
             }, {});
             this.targetTypeFilterControl.patchValue(types);
             return types;
-        });
-        this.labeledTargetTypes = computed(() => this.availableTargetTypes().map((t) => ({ id: t, label: this.targetTypeLabels[t] || t })));
+        }, ...(ngDevMode ? [{ debugName: "availableTargetTypes" }] : []));
+        this.labeledTargetTypes = computed(() => this.availableTargetTypes().map((t) => ({ id: t, label: this.targetTypeLabels[t] || t })), ...(ngDevMode ? [{ debugName: "labeledTargetTypes" }] : []));
         this.sourceNode = computed(() => {
             const obj = this.object();
             const config = this.config();
@@ -244,7 +252,7 @@ class AddRelationshipComponent {
                 description: obj.data[config.rootNode.descriptionField || ''],
                 icon: config.rootNode.icon
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "sourceNode" }] : []));
         this.#relationMatchesTargetObjectValidator = (control) => {
             const targetObject = control.get('targetObject')?.value;
             const relation = control.get('relation')?.value;
@@ -261,10 +269,13 @@ class AddRelationshipComponent {
         };
         this.form = new FormGroup({
             relation: new FormControl(null, { nonNullable: true, validators: [Validators.required] }),
-            targetObject: new FormControl(null, { nonNullable: true, validators: [Validators.required] })
+            targetObject: new FormControl(null, {
+                nonNullable: true,
+                validators: [Validators.required]
+            })
         }, { validators: this.#relationMatchesTargetObjectValidator });
-        this.busy = signal(false);
-        this.error = signal(null);
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
+        this.error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     }
     #system;
     #dialogData;
@@ -304,15 +315,14 @@ class AddRelationshipComponent {
     close() {
         this.#dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AddRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AddRelationshipComponent, isStandalone: true, selector: "yuv-add-relationship", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<yuv-dialog class=\"not-separated\" [headertitle]=\"'yuv.object-relationship.add-relationship.headline' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    @let sn = sourceNode();\n    <form id=\"addRelationshipForm\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n      <section class=\"source\">\n        @if (sn) {\n          <div class=\"source-node ymt-panel\">\n            @if (sn.icon) {\n              <div class=\"icon\">\n                <mat-icon>{{ sn.icon }}</mat-icon>\n              </div>\n            }\n            <strong class=\"label\">{{ sn.title }}</strong>\n            <div class=\"description\">{{ sn.description }}</div>\n          </div>\n        }\n      </section>\n\n      <section class=\"connect\" aria-hidden=\"true\">\n        <div class=\"link\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"link\"></div>\n      </section>\n\n      <!-- available relationships -->\n      <section class=\"relationships ymt-panel\">\n        <h3>{{ 'yuv.object-relationship.action.add-link.search.relation.label' | translate }}</h3>\n\n        @let tt = labeledTargetTypes();\n        @if (tt.length > 1) {\n          <div class=\"target-filter\">\n            <span>{{ 'yuv.object-relationship.add-relationship.target-type.filter.label' | translate }}</span>\n\n            <mat-chip-listbox\n              [multiple]=\"true\"\n              [formControl]=\"targetTypeFilterControl\"\n              [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-type.filter.label' | translate\"\n            >\n              @for (t of tt; track t) {\n                <mat-chip-option [value]=\"t.id\">{{ t.label }}</mat-chip-option>\n              }\n            </mat-chip-listbox>\n          </div>\n        }\n        <!-- list of filtered relationships -->\n        <yuv-list (itemSelect)=\"onRelationSelect($event)\">\n          @for (r of filteredRelationships(); track r.id) {\n            <div class=\"relationship\" yuvListItem>\n              {{ r.label }}\n\n              <div class=\"targets\">\n                @for (t of r.allowedTargetTypes; track t) {\n                  <span>{{ targetTypeLabels[t] }}</span>\n                }\n              </div>\n            </div>\n          }\n        </yuv-list>\n      </section>\n\n      <!-- relationship target select -->\n      <section class=\"target\">\n        <yuv-relationship-target-search\n          class=\"ymt-panel\"\n          formControlName=\"targetObject\"\n          [sourceNode]=\"object().id\"\n          [config]=\"config()\"\n          [targetTypes]=\"form.get('relation')!.value?.allowedTargetTypes || []\"\n          [supportedRelationships]=\"supportedRelationships()\"\n        ></yuv-relationship-target-search>\n      </section>\n\n      <section class=\"error\">\n        @if (form.hasError('invalidRelationTargetCombination') && (form.touched || form.dirty)) {\n          <mat-error class=\"error\">{{ 'yuv.object-relationship.add-relationship.error.invalidRelationTargetCombination' | translate }}</mat-error>\n        }\n        @if (error()) {\n          <mat-error class=\"error\">{{ error() }}</mat-error>\n        }\n      </section>\n    </form>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" type=\"submit\" form=\"addRelationshipForm\" [disabled]=\"form.invalid || busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: ["@charset \"UTF-8\";:host main form{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:\"source relationships\" \"connect relationships\" \"target relationships\" \"error error\";background-color:var(--ymt-surface-container-highest);padding:var(--ymt-spacing-m)}@media (width < 750px){:host main form{grid-template-columns:1fr;grid-template-areas:\"source\" \"relationships\" \"target\" \"error\"}:host main form .connect{display:none!important}:host main form .relationships{margin:var(--ymt-spacing-xl)}}:host main form .source{grid-area:source;padding:0 var(--ymt-spacing-xl);display:flex;flex-direction:column;align-items:center;justify-content:end}:host main form .source .source-node{min-width:31ch;border:2px solid var(--ymt-outline);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);outline:4px solid rgb(from var(--ymt-outline) r g b/.3);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host main form .source .source-node .icon{grid-area:icon}:host main form .source .source-node .label{grid-area:label}:host main form .source .source-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main form .connect{grid-area:connect;display:flex;flex-flow:column;align-items:center}:host main form .connect .dot{width:100%;height:2rem;position:relative;flex:0 0 auto}:host main form .connect .dot:after{content:\"\";position:absolute;width:calc(50% - .5rem);height:calc(1rem + 1px);inset-inline-end:0;border-block-end:2px dotted var(--ymt-outline)}:host main form .connect .dot:before{content:\"\";position:absolute;width:1rem;height:1rem;border-radius:50%;margin:auto;inset-inline-end:calc(50% - .5rem);inset-block-start:calc(50% - .5rem);border:2px solid var(--ymt-outline);outline:4px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .relationships{grid-area:relationships;border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3);overflow:hidden;max-height:300px;min-width:300px;display:flex;flex-direction:column}:host main form .relationships h3{margin:0;padding:var(--ymt-spacing-m);font:var(--ymt-font-title-small)}:host main form .relationships .target-filter{flex:0 0 auto;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-m);display:flex;gap:var(--ymt-spacing-m);align-items:center;justify-content:space-between;border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships yuv-list{flex:1;overflow-y:auto}:host main form .relationships .relationship{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s) var(--ymt-spacing-m);border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships .relationship span{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);outline:1px solid var(--ymt-text-color-subtle);border-radius:var(--ymt-corner-xs);padding:0 var(--ymt-spacing-2xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-2xs)}:host main form .relationships .relationship span:before{content:\"\\bb\"}:host main form .target{grid-area:target;padding:0 var(--ymt-spacing-xl)}:host main form .target yuv-relationship-target-search{min-width:31ch;display:block;margin-block-start:2px;padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .error{grid-area:error}:host main form .error mat-error{margin-block-start:var(--ymt-spacing-m);background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);width:100%;padding:var(--ymt-spacing-m);border-radius:var(--ymt-spacing-xs)}:host main .link{width:2px;flex:1;background-color:var(--ymt-outline);margin-block-end:3px;min-height:2em;position:relative}:host main .link:before{content:\"\";position:absolute;transform:rotate(135deg);width:8px;inset-block-end:0;translate:-3px 2px;height:8px;border:4px solid transparent;border-block-start-color:var(--ymt-outline);border-inline-end-color:var(--ymt-outline)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: RelationshipTargetSearchComponent, selector: "yuv-relationship-target-search", inputs: ["supportedRelationships", "sourceNode", "targetTypes", "config"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i5$1.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "selfHandleClick", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i5$1.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AddRelationshipComponent, isStandalone: true, selector: "yuv-add-relationship", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<yuv-dialog class=\"not-separated\" [headertitle]=\"'yuv.object-relationship.add-relationship.headline' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    @let sn = sourceNode();\n    <form id=\"addRelationshipForm\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n      <section class=\"source\">\n        @if (sn) {\n          <div class=\"source-node ymt-panel\">\n            @if (sn.icon) {\n              <div class=\"icon\">\n                <mat-icon>{{ sn.icon }}</mat-icon>\n              </div>\n            }\n            <strong class=\"label\">{{ sn.title }}</strong>\n            <div class=\"description\">{{ sn.description }}</div>\n          </div>\n        }\n      </section>\n\n      <section class=\"connect\" aria-hidden=\"true\">\n        <div class=\"link\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"link\"></div>\n      </section>\n\n      <!-- available relationships -->\n      <section class=\"relationships ymt-panel\">\n        <h3>{{ 'yuv.object-relationship.action.add-link.search.relation.label' | translate }}</h3>\n\n        @let tt = labeledTargetTypes();\n        @if (tt.length > 1) {\n          <div class=\"target-filter\">\n            <span>{{ 'yuv.object-relationship.add-relationship.target-type.filter.label' | translate }}</span>\n\n            <mat-chip-listbox\n              [multiple]=\"true\"\n              [formControl]=\"targetTypeFilterControl\"\n              [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-type.filter.label' | translate\"\n            >\n              @for (t of tt; track t) {\n                <mat-chip-option [value]=\"t.id\">{{ t.label }}</mat-chip-option>\n              }\n            </mat-chip-listbox>\n          </div>\n        }\n        <!-- list of filtered relationships -->\n        <yuv-list (itemSelect)=\"onRelationSelect($event)\">\n          @for (r of filteredRelationships(); track r.id) {\n            <div class=\"relationship\" yuvListItem>\n              {{ r.label }}\n\n              <div class=\"targets\">\n                @for (t of r.allowedTargetTypes; track t) {\n                  <span>{{ targetTypeLabels[t] }}</span>\n                }\n              </div>\n            </div>\n          }\n        </yuv-list>\n      </section>\n\n      <!-- relationship target select -->\n      <section class=\"target\">\n        <yuv-relationship-target-search\n          class=\"ymt-panel\"\n          formControlName=\"targetObject\"\n          [sourceNode]=\"object().id\"\n          [config]=\"config()\"\n          [targetTypes]=\"form.get('relation')!.value?.allowedTargetTypes || []\"\n          [supportedRelationships]=\"supportedRelationships()\"\n        ></yuv-relationship-target-search>\n      </section>\n\n      <section class=\"error\">\n        @if (form.hasError('invalidRelationTargetCombination') && (form.touched || form.dirty)) {\n          <mat-error class=\"error\">{{ 'yuv.object-relationship.add-relationship.error.invalidRelationTargetCombination' | translate }}</mat-error>\n        }\n        @if (error()) {\n          <mat-error class=\"error\">{{ error() }}</mat-error>\n        }\n      </section>\n    </form>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" type=\"submit\" form=\"addRelationshipForm\" [disabled]=\"form.invalid || busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: ["@charset \"UTF-8\";:host main form{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:\"source relationships\" \"connect relationships\" \"target relationships\" \"error error\";background-color:var(--ymt-surface-container-highest);padding:var(--ymt-spacing-m)}@media not (min-width:750px){:host main form{grid-template-columns:1fr;grid-template-areas:\"source\" \"relationships\" \"target\" \"error\"}:host main form .connect{display:none!important}:host main form .relationships{margin:var(--ymt-spacing-xl)}}:host main form .source{grid-area:source;padding:0 var(--ymt-spacing-xl);display:flex;flex-direction:column;align-items:center;justify-content:end}:host main form .source .source-node{min-width:31ch;border:2px solid var(--ymt-outline);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);outline:4px solid rgb(from var(--ymt-outline) r g b/.3);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host main form .source .source-node .icon{grid-area:icon}:host main form .source .source-node .label{grid-area:label}:host main form .source .source-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main form .connect{grid-area:connect;display:flex;flex-flow:column;align-items:center}:host main form .connect .dot{width:100%;height:2rem;position:relative;flex:0 0 auto}:host main form .connect .dot:after{content:\"\";position:absolute;width:calc(50% - .5rem);height:calc(1rem + 1px);inset-inline-end:0;border-block-end:2px dotted var(--ymt-outline)}:host main form .connect .dot:before{content:\"\";position:absolute;width:1rem;height:1rem;border-radius:50%;margin:auto;inset-inline-end:calc(50% - .5rem);inset-block-start:calc(50% - .5rem);border:2px solid var(--ymt-outline);outline:4px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .relationships{grid-area:relationships;border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3);overflow:hidden;max-height:300px;min-width:300px;display:flex;flex-direction:column}:host main form .relationships h3{margin:0;padding:var(--ymt-spacing-m);font:var(--ymt-font-title-small)}:host main form .relationships .target-filter{flex:0 0 auto;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-m);display:flex;gap:var(--ymt-spacing-m);align-items:center;justify-content:space-between;border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships yuv-list{flex:1;overflow-y:auto}:host main form .relationships .relationship{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s) var(--ymt-spacing-m);border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships .relationship span{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);outline:1px solid var(--ymt-text-color-subtle);border-radius:var(--ymt-corner-xs);padding:0 var(--ymt-spacing-2xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-2xs)}:host main form .relationships .relationship span:before{content:\"\\bb\"}:host main form .target{grid-area:target;padding:0 var(--ymt-spacing-xl)}:host main form .target yuv-relationship-target-search{min-width:31ch;display:block;margin-block-start:2px;padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .error{grid-area:error}:host main form .error mat-error{margin-block-start:var(--ymt-spacing-m);background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);width:100%;padding:var(--ymt-spacing-m);border-radius:var(--ymt-spacing-xs)}:host main .link{width:2px;flex:1;background-color:var(--ymt-outline);margin-block-end:3px;min-height:2em;position:relative}:host main .link:before{content:\"\";position:absolute;transform:rotate(135deg);width:8px;inset-block-end:0;translate:-3px 2px;height:8px;border:4px solid transparent;border-block-start-color:var(--ymt-outline);border-inline-end-color:var(--ymt-outline)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: RelationshipTargetSearchComponent, selector: "yuv-relationship-target-search", inputs: ["supportedRelationships", "sourceNode", "targetTypes", "config"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i4$1.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "selfHandleClick", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i4$1.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AddRelationshipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddRelationshipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-add-relationship', imports: [
-                        CommonModule,
                         ReactiveFormsModule,
-                        TranslateModule,
+                        TranslatePipe,
                         DialogComponent,
                         MatSelectModule,
                         MatIconModule,
@@ -324,31 +334,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         BusyOverlayDirective,
                         YuvListModule,
                         MatChipsModule
-                    ], template: "<yuv-dialog class=\"not-separated\" [headertitle]=\"'yuv.object-relationship.add-relationship.headline' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    @let sn = sourceNode();\n    <form id=\"addRelationshipForm\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n      <section class=\"source\">\n        @if (sn) {\n          <div class=\"source-node ymt-panel\">\n            @if (sn.icon) {\n              <div class=\"icon\">\n                <mat-icon>{{ sn.icon }}</mat-icon>\n              </div>\n            }\n            <strong class=\"label\">{{ sn.title }}</strong>\n            <div class=\"description\">{{ sn.description }}</div>\n          </div>\n        }\n      </section>\n\n      <section class=\"connect\" aria-hidden=\"true\">\n        <div class=\"link\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"link\"></div>\n      </section>\n\n      <!-- available relationships -->\n      <section class=\"relationships ymt-panel\">\n        <h3>{{ 'yuv.object-relationship.action.add-link.search.relation.label' | translate }}</h3>\n\n        @let tt = labeledTargetTypes();\n        @if (tt.length > 1) {\n          <div class=\"target-filter\">\n            <span>{{ 'yuv.object-relationship.add-relationship.target-type.filter.label' | translate }}</span>\n\n            <mat-chip-listbox\n              [multiple]=\"true\"\n              [formControl]=\"targetTypeFilterControl\"\n              [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-type.filter.label' | translate\"\n            >\n              @for (t of tt; track t) {\n                <mat-chip-option [value]=\"t.id\">{{ t.label }}</mat-chip-option>\n              }\n            </mat-chip-listbox>\n          </div>\n        }\n        <!-- list of filtered relationships -->\n        <yuv-list (itemSelect)=\"onRelationSelect($event)\">\n          @for (r of filteredRelationships(); track r.id) {\n            <div class=\"relationship\" yuvListItem>\n              {{ r.label }}\n\n              <div class=\"targets\">\n                @for (t of r.allowedTargetTypes; track t) {\n                  <span>{{ targetTypeLabels[t] }}</span>\n                }\n              </div>\n            </div>\n          }\n        </yuv-list>\n      </section>\n\n      <!-- relationship target select -->\n      <section class=\"target\">\n        <yuv-relationship-target-search\n          class=\"ymt-panel\"\n          formControlName=\"targetObject\"\n          [sourceNode]=\"object().id\"\n          [config]=\"config()\"\n          [targetTypes]=\"form.get('relation')!.value?.allowedTargetTypes || []\"\n          [supportedRelationships]=\"supportedRelationships()\"\n        ></yuv-relationship-target-search>\n      </section>\n\n      <section class=\"error\">\n        @if (form.hasError('invalidRelationTargetCombination') && (form.touched || form.dirty)) {\n          <mat-error class=\"error\">{{ 'yuv.object-relationship.add-relationship.error.invalidRelationTargetCombination' | translate }}</mat-error>\n        }\n        @if (error()) {\n          <mat-error class=\"error\">{{ error() }}</mat-error>\n        }\n      </section>\n    </form>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" type=\"submit\" form=\"addRelationshipForm\" [disabled]=\"form.invalid || busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: ["@charset \"UTF-8\";:host main form{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:\"source relationships\" \"connect relationships\" \"target relationships\" \"error error\";background-color:var(--ymt-surface-container-highest);padding:var(--ymt-spacing-m)}@media (width < 750px){:host main form{grid-template-columns:1fr;grid-template-areas:\"source\" \"relationships\" \"target\" \"error\"}:host main form .connect{display:none!important}:host main form .relationships{margin:var(--ymt-spacing-xl)}}:host main form .source{grid-area:source;padding:0 var(--ymt-spacing-xl);display:flex;flex-direction:column;align-items:center;justify-content:end}:host main form .source .source-node{min-width:31ch;border:2px solid var(--ymt-outline);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);outline:4px solid rgb(from var(--ymt-outline) r g b/.3);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host main form .source .source-node .icon{grid-area:icon}:host main form .source .source-node .label{grid-area:label}:host main form .source .source-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main form .connect{grid-area:connect;display:flex;flex-flow:column;align-items:center}:host main form .connect .dot{width:100%;height:2rem;position:relative;flex:0 0 auto}:host main form .connect .dot:after{content:\"\";position:absolute;width:calc(50% - .5rem);height:calc(1rem + 1px);inset-inline-end:0;border-block-end:2px dotted var(--ymt-outline)}:host main form .connect .dot:before{content:\"\";position:absolute;width:1rem;height:1rem;border-radius:50%;margin:auto;inset-inline-end:calc(50% - .5rem);inset-block-start:calc(50% - .5rem);border:2px solid var(--ymt-outline);outline:4px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .relationships{grid-area:relationships;border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3);overflow:hidden;max-height:300px;min-width:300px;display:flex;flex-direction:column}:host main form .relationships h3{margin:0;padding:var(--ymt-spacing-m);font:var(--ymt-font-title-small)}:host main form .relationships .target-filter{flex:0 0 auto;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-m);display:flex;gap:var(--ymt-spacing-m);align-items:center;justify-content:space-between;border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships yuv-list{flex:1;overflow-y:auto}:host main form .relationships .relationship{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s) var(--ymt-spacing-m);border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships .relationship span{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);outline:1px solid var(--ymt-text-color-subtle);border-radius:var(--ymt-corner-xs);padding:0 var(--ymt-spacing-2xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-2xs)}:host main form .relationships .relationship span:before{content:\"\\bb\"}:host main form .target{grid-area:target;padding:0 var(--ymt-spacing-xl)}:host main form .target yuv-relationship-target-search{min-width:31ch;display:block;margin-block-start:2px;padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .error{grid-area:error}:host main form .error mat-error{margin-block-start:var(--ymt-spacing-m);background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);width:100%;padding:var(--ymt-spacing-m);border-radius:var(--ymt-spacing-xs)}:host main .link{width:2px;flex:1;background-color:var(--ymt-outline);margin-block-end:3px;min-height:2em;position:relative}:host main .link:before{content:\"\";position:absolute;transform:rotate(135deg);width:8px;inset-block-end:0;translate:-3px 2px;height:8px;border:4px solid transparent;border-block-start-color:var(--ymt-outline);border-inline-end-color:var(--ymt-outline)}\n"] }]
-        }] });
+                    ], template: "<yuv-dialog class=\"not-separated\" [headertitle]=\"'yuv.object-relationship.add-relationship.headline' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    @let sn = sourceNode();\n    <form id=\"addRelationshipForm\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n      <section class=\"source\">\n        @if (sn) {\n          <div class=\"source-node ymt-panel\">\n            @if (sn.icon) {\n              <div class=\"icon\">\n                <mat-icon>{{ sn.icon }}</mat-icon>\n              </div>\n            }\n            <strong class=\"label\">{{ sn.title }}</strong>\n            <div class=\"description\">{{ sn.description }}</div>\n          </div>\n        }\n      </section>\n\n      <section class=\"connect\" aria-hidden=\"true\">\n        <div class=\"link\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"link\"></div>\n      </section>\n\n      <!-- available relationships -->\n      <section class=\"relationships ymt-panel\">\n        <h3>{{ 'yuv.object-relationship.action.add-link.search.relation.label' | translate }}</h3>\n\n        @let tt = labeledTargetTypes();\n        @if (tt.length > 1) {\n          <div class=\"target-filter\">\n            <span>{{ 'yuv.object-relationship.add-relationship.target-type.filter.label' | translate }}</span>\n\n            <mat-chip-listbox\n              [multiple]=\"true\"\n              [formControl]=\"targetTypeFilterControl\"\n              [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-type.filter.label' | translate\"\n            >\n              @for (t of tt; track t) {\n                <mat-chip-option [value]=\"t.id\">{{ t.label }}</mat-chip-option>\n              }\n            </mat-chip-listbox>\n          </div>\n        }\n        <!-- list of filtered relationships -->\n        <yuv-list (itemSelect)=\"onRelationSelect($event)\">\n          @for (r of filteredRelationships(); track r.id) {\n            <div class=\"relationship\" yuvListItem>\n              {{ r.label }}\n\n              <div class=\"targets\">\n                @for (t of r.allowedTargetTypes; track t) {\n                  <span>{{ targetTypeLabels[t] }}</span>\n                }\n              </div>\n            </div>\n          }\n        </yuv-list>\n      </section>\n\n      <!-- relationship target select -->\n      <section class=\"target\">\n        <yuv-relationship-target-search\n          class=\"ymt-panel\"\n          formControlName=\"targetObject\"\n          [sourceNode]=\"object().id\"\n          [config]=\"config()\"\n          [targetTypes]=\"form.get('relation')!.value?.allowedTargetTypes || []\"\n          [supportedRelationships]=\"supportedRelationships()\"\n        ></yuv-relationship-target-search>\n      </section>\n\n      <section class=\"error\">\n        @if (form.hasError('invalidRelationTargetCombination') && (form.touched || form.dirty)) {\n          <mat-error class=\"error\">{{ 'yuv.object-relationship.add-relationship.error.invalidRelationTargetCombination' | translate }}</mat-error>\n        }\n        @if (error()) {\n          <mat-error class=\"error\">{{ error() }}</mat-error>\n        }\n      </section>\n    </form>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" type=\"submit\" form=\"addRelationshipForm\" [disabled]=\"form.invalid || busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: ["@charset \"UTF-8\";:host main form{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:\"source relationships\" \"connect relationships\" \"target relationships\" \"error error\";background-color:var(--ymt-surface-container-highest);padding:var(--ymt-spacing-m)}@media not (min-width:750px){:host main form{grid-template-columns:1fr;grid-template-areas:\"source\" \"relationships\" \"target\" \"error\"}:host main form .connect{display:none!important}:host main form .relationships{margin:var(--ymt-spacing-xl)}}:host main form .source{grid-area:source;padding:0 var(--ymt-spacing-xl);display:flex;flex-direction:column;align-items:center;justify-content:end}:host main form .source .source-node{min-width:31ch;border:2px solid var(--ymt-outline);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);outline:4px solid rgb(from var(--ymt-outline) r g b/.3);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host main form .source .source-node .icon{grid-area:icon}:host main form .source .source-node .label{grid-area:label}:host main form .source .source-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main form .connect{grid-area:connect;display:flex;flex-flow:column;align-items:center}:host main form .connect .dot{width:100%;height:2rem;position:relative;flex:0 0 auto}:host main form .connect .dot:after{content:\"\";position:absolute;width:calc(50% - .5rem);height:calc(1rem + 1px);inset-inline-end:0;border-block-end:2px dotted var(--ymt-outline)}:host main form .connect .dot:before{content:\"\";position:absolute;width:1rem;height:1rem;border-radius:50%;margin:auto;inset-inline-end:calc(50% - .5rem);inset-block-start:calc(50% - .5rem);border:2px solid var(--ymt-outline);outline:4px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .relationships{grid-area:relationships;border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3);overflow:hidden;max-height:300px;min-width:300px;display:flex;flex-direction:column}:host main form .relationships h3{margin:0;padding:var(--ymt-spacing-m);font:var(--ymt-font-title-small)}:host main form .relationships .target-filter{flex:0 0 auto;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-m);display:flex;gap:var(--ymt-spacing-m);align-items:center;justify-content:space-between;border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships yuv-list{flex:1;overflow-y:auto}:host main form .relationships .relationship{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s) var(--ymt-spacing-m);border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships .relationship span{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);outline:1px solid var(--ymt-text-color-subtle);border-radius:var(--ymt-corner-xs);padding:0 var(--ymt-spacing-2xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-2xs)}:host main form .relationships .relationship span:before{content:\"\\bb\"}:host main form .target{grid-area:target;padding:0 var(--ymt-spacing-xl)}:host main form .target yuv-relationship-target-search{min-width:31ch;display:block;margin-block-start:2px;padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .error{grid-area:error}:host main form .error mat-error{margin-block-start:var(--ymt-spacing-m);background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);width:100%;padding:var(--ymt-spacing-m);border-radius:var(--ymt-spacing-xs)}:host main .link{width:2px;flex:1;background-color:var(--ymt-outline);margin-block-end:3px;min-height:2em;position:relative}:host main .link:before{content:\"\";position:absolute;transform:rotate(135deg);width:8px;inset-block-end:0;translate:-3px 2px;height:8px;border:4px solid transparent;border-block-start-color:var(--ymt-outline);border-inline-end-color:var(--ymt-outline)}\n"] }]
+        }], propDecorators: { object: [{ type: i0.Input, args: [{ isSignal: true, alias: "object", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
-const ROOT_NODE_SETTINGS = {
-    size: 30,
-    borderWidth: 4,
-    borderWidthSelected: 6
-};
-const ROOT_NODE_FONT_SETTINGS = {
-    size: 14
-};
-const NODE_SETTINGS = {
-    borderWidthSelected: 2
-};
-const NODE_FONT_SETTINGS = {
-    size: 12
-};
-const EDGE_SETTINGS = {};
-const EDGE_FONT_SETTINGS = {
-    size: 10
-};
-// add relationship dialog settings
-const ADD_RELATIONSHIP_DIALOG_OPTIONS = {
-    maxWidth: '90vw'
-};
+/**
+ * Component to display a summary of a node's object properties.
+ */
+class NodeSummaryComponent {
+    constructor() {
+        this.#system = inject(SystemService);
+        this.#router = inject(Router);
+        this.object = input(...(ngDevMode ? [undefined, { debugName: "object" }] : []));
+        this.nodeConfig = input(...(ngDevMode ? [undefined, { debugName: "nodeConfig" }] : []));
+        this.actions = input(null, ...(ngDevMode ? [{ debugName: "actions" }] : []));
+        this.nodeSummary = computed(() => {
+            const obj = this.object();
+            const config = this.nodeConfig();
+            return obj && config
+                ? {
+                    title: obj.data[config.labelField],
+                    description: config.descriptionField ? obj.data[config.descriptionField] : undefined,
+                    properties: (config.summaryFields || [])
+                        .map((field) => this.#propertyToRendererInput(field, obj))
+                        .filter((p) => !!p),
+                    link: config.objectLink ? config.objectLink.replace('{{id}}', obj.id) : undefined
+                }
+                : null;
+        }, ...(ngDevMode ? [{ debugName: "nodeSummary" }] : []));
+    }
+    #system;
+    #router;
+    openObject(link) {
+        this.#router.navigateByUrl(link);
+    }
+    #propertyToRendererInput(propertyName, object) {
+        const metaKeys = Object.keys(object.data).filter((key) => {
+            return key.startsWith(`${propertyName}_`);
+        });
+        const sr = this.#system.system?.allFields[propertyName];
+        if (!sr)
+            return undefined;
+        return {
+            label: this.#system.getLocalizedLabel(propertyName.replace('_title', '')) || propertyName,
+            rendererInput: {
+                propertyName,
+                value: object.data[propertyName],
+                rendererType: this.#system.getInternalFormElementType(propertyName, sr.classifications || []),
+                meta: metaKeys.reduce((metaObj, key) => {
+                    metaObj[key] = object.data[key];
+                    return metaObj;
+                }, {})
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NodeSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NodeSummaryComponent, isStandalone: true, selector: "yuv-node-summary", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: true, isRequired: false, transformFunction: null }, nodeConfig: { classPropertyName: "nodeConfig", publicName: "nodeConfig", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let ns = nodeSummary();\n@if (ns) {\n  <header>\n    <h2>{{ ns?.title }}</h2>\n    <p class=\"desc\">{{ ns?.description }}</p>\n  </header>\n  <main>\n    <div class=\"properties\">\n      @for (p of ns?.properties; track $index) {\n        <div class=\"row\">\n          <div class=\"label\">{{ p.label }}</div>\n          <div class=\"value\">\n            <ng-container *yuvRenderer=\"p.rendererInput\"></ng-container>\n          </div>\n        </div>\n      }\n    </div>\n  </main>\n  <footer>\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"actions()\"></ng-container>\n    </div>\n\n    @if (ns.link) {\n      <button ymtButton=\"primary\" (click)=\"openObject(ns.link)\">\n        {{ 'yuv.object-relationship.node-summary.open-object.button' | translate }}\n      </button>\n    }\n  </footer>\n}\n", styles: [":host{display:flex;flex-direction:column}:host header{flex:0 0 auto}:host header h2{margin-block-end:0}:host header .desc{margin:0;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main{flex:1;overflow-y:auto}:host footer{flex:0 0 auto;align-items:center;display:flex}:host footer .actions{flex:1;display:flex;align-items:center}:host .properties{container:section/inline-size;margin-block-start:var(--ymt-spacing-xl);display:flex;flex-direction:column}:host .properties .row{display:flex;flex-flow:column}:host .properties .row .label{font:var(--ymt-font-body-subtle);flex:0 1 33%;font-weight:700;padding-inline-end:var(--ymt-spacing-m);margin-block-end:var(--ymt-spacing-3xs);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .properties .row .value{flex:1;word-break:break-all;font:var(--ymt-font-body-subtle);margin-block-end:var(--ymt-spacing-xs)}@container section (min-width: 300px){:host .properties .row{flex-flow:row}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NodeSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-node-summary', imports: [CommonModule, RendererDirective, TranslatePipe, YmtButtonDirective], template: "@let ns = nodeSummary();\n@if (ns) {\n  <header>\n    <h2>{{ ns?.title }}</h2>\n    <p class=\"desc\">{{ ns?.description }}</p>\n  </header>\n  <main>\n    <div class=\"properties\">\n      @for (p of ns?.properties; track $index) {\n        <div class=\"row\">\n          <div class=\"label\">{{ p.label }}</div>\n          <div class=\"value\">\n            <ng-container *yuvRenderer=\"p.rendererInput\"></ng-container>\n          </div>\n        </div>\n      }\n    </div>\n  </main>\n  <footer>\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"actions()\"></ng-container>\n    </div>\n\n    @if (ns.link) {\n      <button ymtButton=\"primary\" (click)=\"openObject(ns.link)\">\n        {{ 'yuv.object-relationship.node-summary.open-object.button' | translate }}\n      </button>\n    }\n  </footer>\n}\n", styles: [":host{display:flex;flex-direction:column}:host header{flex:0 0 auto}:host header h2{margin-block-end:0}:host header .desc{margin:0;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main{flex:1;overflow-y:auto}:host footer{flex:0 0 auto;align-items:center;display:flex}:host footer .actions{flex:1;display:flex;align-items:center}:host .properties{container:section/inline-size;margin-block-start:var(--ymt-spacing-xl);display:flex;flex-direction:column}:host .properties .row{display:flex;flex-flow:column}:host .properties .row .label{font:var(--ymt-font-body-subtle);flex:0 1 33%;font-weight:700;padding-inline-end:var(--ymt-spacing-m);margin-block-end:var(--ymt-spacing-3xs);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .properties .row .value{flex:1;word-break:break-all;font:var(--ymt-font-body-subtle);margin-block-end:var(--ymt-spacing-xs)}@container section (min-width: 300px){:host .properties .row{flex-flow:row}}\n"] }]
+        }], propDecorators: { object: [{ type: i0.Input, args: [{ isSignal: true, alias: "object", required: false }] }], nodeConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeConfig", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }] } });
 
 class ObjectRelationshipService {
     #search;
@@ -364,15 +409,15 @@ class ObjectRelationshipService {
         this.#confirm = inject(ConfirmService);
         this.translate = inject(TranslateService);
         this.#relationQA = {};
-        this.objectId = signal(undefined);
+        this.objectId = signal(undefined, ...(ngDevMode ? [{ debugName: "objectId" }] : []));
         this.#relationsResource = rxResource({
-            request: this.objectId,
-            loader: ({ request }) => this.fetchRelations(request)
+            params: this.objectId,
+            stream: ({ params }) => this.fetchRelations(params)
         });
         this.relations = this.#relationsResource.value;
-        this.busy = signal(false);
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
         // the DmsObject representing the originId
-        this.object = signal(null);
+        this.object = signal(null, ...(ngDevMode ? [{ debugName: "object" }] : []));
         this.#eventService
             .on(YuvEventType.RELATIONSHIP_CREATED, YuvEventType.RELATIONSHIP_DELETED)
             .pipe(takeUntilDestroyed())
@@ -443,68 +488,35 @@ class ObjectRelationshipService {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
-/**
- * Component to display a summary of a node's object properties.
- */
-class NodeSummaryComponent {
-    constructor() {
-        this.#system = inject(SystemService);
-        this.#router = inject(Router);
-        this.object = input();
-        this.nodeConfig = input();
-        this.actions = input(null);
-        this.nodeSummary = computed(() => {
-            const obj = this.object();
-            const config = this.nodeConfig();
-            return obj && config
-                ? {
-                    title: obj.data[config.labelField],
-                    description: config.descriptionField ? obj.data[config.descriptionField] : undefined,
-                    properties: (config.summaryFields || []).map((field) => this.#propertyToRendererInput(field, obj)).filter((p) => !!p),
-                    link: config.objectLink ? config.objectLink.replace('{{id}}', obj.id) : undefined
-                }
-                : null;
-        });
-    }
-    #system;
-    #router;
-    openObject(link) {
-        this.#router.navigateByUrl(link);
-    }
-    #propertyToRendererInput(propertyName, object) {
-        const metaKeys = Object.keys(object.data).filter((key) => {
-            return key.startsWith(`${propertyName}_`);
-        });
-        const sr = this.#system.system?.allFields[propertyName];
-        if (!sr)
-            return undefined;
-        return {
-            label: this.#system.getLocalizedLabel(propertyName.replace('_title', '')) || propertyName,
-            rendererInput: {
-                propertyName,
-                value: object.data[propertyName],
-                rendererType: this.#system.getInternalFormElementType(propertyName, sr.classifications || []),
-                meta: metaKeys.reduce((metaObj, key) => {
-                    metaObj[key] = object.data[key];
-                    return metaObj;
-                }, {})
-            }
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NodeSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: NodeSummaryComponent, isStandalone: true, selector: "yuv-node-summary", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: true, isRequired: false, transformFunction: null }, nodeConfig: { classPropertyName: "nodeConfig", publicName: "nodeConfig", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let ns = nodeSummary();\n@if (ns) {\n  <header>\n    <h2>{{ ns?.title }}</h2>\n    <p class=\"desc\">{{ ns?.description }}</p>\n  </header>\n  <main>\n    <div class=\"properties\">\n      @for (p of ns?.properties; track $index) {\n        <div class=\"row\">\n          <div class=\"label\">{{ p.label }}</div>\n          <div class=\"value\">\n            <ng-container *yuvRenderer=\"p.rendererInput\"></ng-container>\n          </div>\n        </div>\n      }\n    </div>\n  </main>\n  <footer>\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"actions()\"></ng-container>\n    </div>\n\n    @if (ns.link) {\n      <button ymtButton=\"primary\" (click)=\"openObject(ns.link)\">\n        {{ 'yuv.object-relationship.node-summary.open-object.button' | translate }}\n      </button>\n    }\n  </footer>\n}\n", styles: [":host{display:flex;flex-direction:column}:host header{flex:0 0 auto}:host header h2{margin-block-end:0}:host header .desc{margin:0;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main{flex:1;overflow-y:auto}:host footer{flex:0 0 auto;align-items:center;display:flex}:host footer .actions{flex:1;display:flex;align-items:center}:host .properties{container:section/inline-size;margin-block-start:var(--ymt-spacing-xl);display:flex;flex-direction:column}:host .properties .row{display:flex;flex-flow:column}:host .properties .row .label{font:var(--ymt-font-body-subtle);flex:0 1 33%;font-weight:700;padding-inline-end:var(--ymt-spacing-m);margin-block-end:var(--ymt-spacing-3xs);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .properties .row .value{flex:1;word-break:break-all;font:var(--ymt-font-body-subtle);margin-block-end:var(--ymt-spacing-xs)}@container section (min-width: 300px){:host .properties .row{flex-flow:row}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NodeSummaryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-node-summary', imports: [CommonModule, RendererDirective, TranslateModule, YmtButtonDirective], template: "@let ns = nodeSummary();\n@if (ns) {\n  <header>\n    <h2>{{ ns?.title }}</h2>\n    <p class=\"desc\">{{ ns?.description }}</p>\n  </header>\n  <main>\n    <div class=\"properties\">\n      @for (p of ns?.properties; track $index) {\n        <div class=\"row\">\n          <div class=\"label\">{{ p.label }}</div>\n          <div class=\"value\">\n            <ng-container *yuvRenderer=\"p.rendererInput\"></ng-container>\n          </div>\n        </div>\n      }\n    </div>\n  </main>\n  <footer>\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"actions()\"></ng-container>\n    </div>\n\n    @if (ns.link) {\n      <button ymtButton=\"primary\" (click)=\"openObject(ns.link)\">\n        {{ 'yuv.object-relationship.node-summary.open-object.button' | translate }}\n      </button>\n    }\n  </footer>\n}\n", styles: [":host{display:flex;flex-direction:column}:host header{flex:0 0 auto}:host header h2{margin-block-end:0}:host header .desc{margin:0;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main{flex:1;overflow-y:auto}:host footer{flex:0 0 auto;align-items:center;display:flex}:host footer .actions{flex:1;display:flex;align-items:center}:host .properties{container:section/inline-size;margin-block-start:var(--ymt-spacing-xl);display:flex;flex-direction:column}:host .properties .row{display:flex;flex-flow:column}:host .properties .row .label{font:var(--ymt-font-body-subtle);flex:0 1 33%;font-weight:700;padding-inline-end:var(--ymt-spacing-m);margin-block-end:var(--ymt-spacing-3xs);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .properties .row .value{flex:1;word-break:break-all;font:var(--ymt-font-body-subtle);margin-block-end:var(--ymt-spacing-xs)}@container section (min-width: 300px){:host .properties .row{flex-flow:row}}\n"] }]
-        }] });
+const ROOT_NODE_SETTINGS = {
+    size: 30,
+    borderWidth: 4,
+    borderWidthSelected: 6
+};
+const ROOT_NODE_FONT_SETTINGS = {
+    size: 14
+};
+const NODE_SETTINGS = {
+    borderWidthSelected: 2
+};
+const NODE_FONT_SETTINGS = {
+    size: 12
+};
+const EDGE_SETTINGS = {};
+const EDGE_FONT_SETTINGS = {
+    size: 10
+};
+// add relationship dialog settings
+const ADD_RELATIONSHIP_DIALOG_OPTIONS = {
+    maxWidth: '90vw'
+};
 
 class ObjectRelationshipGraphComponent {
     constructor() {
@@ -528,18 +540,18 @@ class ObjectRelationshipGraphComponent {
                     return 'light';
                 }
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "#mode" }] : []));
         this.#relations = this.#objectRelationshipService.relations;
         this.#relationsEffect = effect(() => {
             const rel = this.#relations();
             if (!rel)
                 return;
             this.#_updateGraph(rel.originId, rel.relations, rel.objects);
-        });
+        }, ...(ngDevMode ? [{ debugName: "#relationsEffect" }] : []));
         /**
          * Configuration for the relations component.
          */
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.objectSelected = output();
         this.relationSelected = output();
         this.#network = null;
@@ -547,23 +559,23 @@ class ObjectRelationshipGraphComponent {
         this.#relationQA = {};
         this.#nodes = new DataSet([]);
         this.#edges = new DataSet([]);
-        this.busy = signal(false);
-        this.selectedRelation = signal(null);
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
+        this.selectedRelation = signal(null, ...(ngDevMode ? [{ debugName: "selectedRelation" }] : []));
         this.#selectedRelationEffect = effect(() => {
             this.relationSelected.emit(this.selectedRelation());
-        });
-        this.selectedObject = signal(null);
+        }, ...(ngDevMode ? [{ debugName: "#selectedRelationEffect" }] : []));
+        this.selectedObject = signal(null, ...(ngDevMode ? [{ debugName: "selectedObject" }] : []));
         this.#selectedObjectEffect = effect(() => {
             const so = this.selectedObject();
             if (so)
                 this.selectedRelation.set(null);
             this.objectSelected.emit(so);
-        });
+        }, ...(ngDevMode ? [{ debugName: "#selectedObjectEffect" }] : []));
         this.detailsNode = computed(() => {
             const object = this.selectedObject();
             const config = this.#getNodeConfig(object);
             return object && config ? { object, config } : null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "detailsNode" }] : []));
     }
     #dialog;
     #system;
@@ -613,8 +625,12 @@ class ObjectRelationshipGraphComponent {
                 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
-                const otherEdgesForSource = this.#edges.get().filter((edge) => edge.from === sourceNodeId || edge.to === sourceNodeId);
-                const otherEdgesForTarget = this.#edges.get().filter((edge) => edge.from === targetNodeId || edge.to === targetNodeId);
+                const otherEdgesForSource = this.#edges
+                    .get()
+                    .filter((edge) => edge.from === sourceNodeId || edge.to === sourceNodeId);
+                const otherEdgesForTarget = this.#edges
+                    .get()
+                    .filter((edge) => edge.from === targetNodeId || edge.to === targetNodeId);
                 if (sourceNodeId && otherEdgesForSource.length === 0) {
                     this.#nodes.remove(sourceNodeId);
                 }
@@ -743,7 +759,8 @@ class ObjectRelationshipGraphComponent {
         };
     }
     #toEdge(item, from, to, direction) {
-        const label = this.#system.getLocalizedLabel(item.fields.get(BaseObjectTypeField.OBJECT_TYPE_ID)) || item.fields.get(BaseObjectTypeField.OBJECT_TYPE_ID);
+        const label = this.#system.getLocalizedLabel(item.fields.get(BaseObjectTypeField.OBJECT_TYPE_ID)) ||
+            item.fields.get(BaseObjectTypeField.OBJECT_TYPE_ID);
         return {
             ...EDGE_SETTINGS,
             id: item.fields.get(BaseObjectTypeField.OBJECT_ID),
@@ -859,13 +876,20 @@ class ObjectRelationshipGraphComponent {
             this.#network.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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);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: "ngmodule", type: CommonModule }, { 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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipGraphComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipGraphComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-object-relationship-graph', imports: [CommonModule, NodeSummaryComponent, BusyOverlayDirective, MatIconModule, MatTooltipModule, TranslateModule, 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);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"] }]
-        }] });
+            args: [{ selector: 'yuv-object-relationship-graph', imports: [
+                        NodeSummaryComponent,
+                        BusyOverlayDirective,
+                        MatIconModule,
+                        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"] }]
+        }], 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 {
     constructor() {
@@ -873,10 +897,10 @@ class ObjectRelationshipListItemComponent {
         this.#snack = inject(SnackBarService);
         this.#objectRelationshipService = inject(ObjectRelationshipService);
         this.translate = inject(TranslateService);
-        this.link = input.required();
-        this.direction = input.required();
-        this.enableSourceLink = input(false);
-        this.enableTargetLink = input(false);
+        this.link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
+        this.direction = input.required(...(ngDevMode ? [{ debugName: "direction" }] : []));
+        this.enableSourceLink = input(false, ...(ngDevMode ? [{ debugName: "enableSourceLink" }] : []));
+        this.enableTargetLink = input(false, ...(ngDevMode ? [{ debugName: "enableTargetLink" }] : []));
     }
     #router;
     #snack;
@@ -892,13 +916,13 @@ class ObjectRelationshipListItemComponent {
         if (link && !skip)
             this.#router.navigateByUrl(link);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: CommonModule }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-object-relationship-list-item', imports: [CommonModule, MatIconModule, YmtIconButtonDirective], 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"] }]
-        }] });
+            args: [{ selector: 'yuv-object-relationship-list-item', imports: [MatIconModule, YmtIconButtonDirective], 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"] }]
+        }], propDecorators: { link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: true }] }], enableSourceLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSourceLink", required: false }] }], enableTargetLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTargetLink", required: false }] }] } });
 
 class ObjectRelationshipListComponent {
     constructor() {
@@ -908,16 +932,16 @@ class ObjectRelationshipListComponent {
         /**
          * Configuration for the relations component.
          */
-        this.config = input.required();
-        this.incomingLinks = signal([]);
-        this.outgoingLinks = signal([]);
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.incomingLinks = signal([], ...(ngDevMode ? [{ debugName: "incomingLinks" }] : []));
+        this.outgoingLinks = signal([], ...(ngDevMode ? [{ debugName: "outgoingLinks" }] : []));
         this.#relations = this.#objectRelationshipService.relations;
         this.#relationsEffect = effect(() => {
             const rel = this.#relations();
             if (!rel)
                 return;
             this.#createLists(rel.originId, rel.relations, rel.objects);
-        });
+        }, ...(ngDevMode ? [{ debugName: "#relationsEffect" }] : []));
         this.#objectQA = {};
     }
     #search;
@@ -981,13 +1005,13 @@ class ObjectRelationshipListComponent {
             return undefined;
         return cfg.nodes.find((n) => object.data[BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS].includes(n.objectType));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectRelationshipListItemComponent, selector: "yuv-object-relationship-list-item", inputs: ["link", "direction", "enableSourceLink", "enableTargetLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-object-relationship-list', imports: [CommonModule, ObjectRelationshipListItemComponent, TranslateModule], 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"] }]
-        }] });
+            args: [{ selector: 'yuv-object-relationship-list', imports: [ObjectRelationshipListItemComponent, TranslatePipe], 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"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class ObjectRelationshipComponent {
     constructor() {
@@ -997,29 +1021,29 @@ class ObjectRelationshipComponent {
         /**
          * Display mode for the relationship view.
          */
-        this.mode = model('graph');
+        this.mode = model('graph', ...(ngDevMode ? [{ debugName: "mode" }] : []));
         this.empty = computed(() => {
             const rel = this.#relations();
             return rel && rel.relations.totalNumItems === 0;
-        });
+        }, ...(ngDevMode ? [{ debugName: "empty" }] : []));
         /**
          * ID of the object to display relations for.
          */
-        this.objectId = input.required();
+        this.objectId = input.required(...(ngDevMode ? [{ debugName: "objectId" }] : []));
         this.#objectIdEffect = effect(() => {
             const oid = this.objectId();
             this.#objectRelationshipService.objectId.set(oid);
-        });
+        }, ...(ngDevMode ? [{ debugName: "#objectIdEffect" }] : []));
         /**
          * Configuration for the relations component.
          */
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         // the DmsObject representing the originId
-        this.originObject = signal(null);
+        this.originObject = signal(null, ...(ngDevMode ? [{ debugName: "originObject" }] : []));
         this.supportedRelationships = computed(() => {
             const obj = this.originObject();
             return obj ? this.#system.getSupportedRelationships(obj) : [];
-        });
+        }, ...(ngDevMode ? [{ debugName: "supportedRelationships" }] : []));
         this.busy = this.#objectRelationshipService.busy;
         this.#relations = this.#objectRelationshipService.relations;
         this.#relationsEffect = effect(() => {
@@ -1032,8 +1056,8 @@ class ObjectRelationshipComponent {
             const originItem = rel.objects?.items.find((item) => item.fields.get(BaseObjectTypeField.OBJECT_ID) === originId);
             // TODO: use linked signal instead
             this.originObject.set(originItem ? new DmsObject(originItem) : null);
-        });
-        this.relationActions = input(null);
+        }, ...(ngDevMode ? [{ debugName: "#relationsEffect" }] : []));
+        this.relationActions = input(null, ...(ngDevMode ? [{ debugName: "relationActions" }] : []));
     }
     #objectRelationshipService;
     #system;
@@ -1054,16 +1078,15 @@ class ObjectRelationshipComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ObjectRelationshipComponent, isStandalone: true, selector: "yuv-object-relationship", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, objectId: { classPropertyName: "objectId", publicName: "objectId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, relationActions: { classPropertyName: "relationActions", publicName: "relationActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, providers: [ObjectRelationshipService], ngImport: i0, template: "<ymt-pane [plain]=\"true\" [topBarActions]=\"topBarActions\">\n  <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n    @if (empty()) {\n      <div class=\"no-relations\" inert>\n        <mat-icon>link_off</mat-icon>\n        <p>{{ 'yuv.object-relationship.no-relations' | translate }}</p>\n      </div>\n    } @else {\n      @switch (mode()) {\n        @case ('graph') {\n          <yuv-object-relationship-graph [config]=\"config()\"></yuv-object-relationship-graph>\n        }\n        @case ('list') {\n          <yuv-object-relationship-list [config]=\"config()\"> </yuv-object-relationship-list>\n        }\n      }\n    }\n  </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #topBarActions>\n  @if (supportedRelationships().length > 0) {\n    <button ymt-icon-button icon-button-size=\"small\" [matTooltip]=\"'yuv.object-relationship.add.tooltip' | translate\" (click)=\"addRelationship()\">\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"mode() === 'list' ? ('yuv.object-relationship.mode.graph.tooltip' | translate) : ('yuv.object-relationship.mode.list.tooltip' | translate)\"\n    (click)=\"toggleMode()\"\n  >\n    <mat-icon>{{ mode() === 'list' ? 'graph_3' : 'list' }}</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host{display:block;position:relative;height:100%;background-color:var(--ymt-surface)}:host .toggle{position:absolute;inset-block-start:var(--ymt-spacing-s);inset-inline-end:var(--ymt-spacing-s);z-index:10;background-color:var(--ymt-surface);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-full)}:host yuv-object-relationship-list,:host yuv-object-relationship-graph{height:100%}:host .no-relations{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--ymt-spacing-l);gap:var(--ymt-spacing-m);overflow:hidden}:host .no-relations mat-icon{scale:4;color:var(--ymt-text-color-subtle);opacity:.5;transform:translateY(-.5em)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i4.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i4.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { 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: "component", type: ObjectRelationshipGraphComponent, selector: "yuv-object-relationship-graph", inputs: ["config"], outputs: ["objectSelected", "relationSelected"] }, { kind: "component", type: ObjectRelationshipListComponent, selector: "yuv-object-relationship-list", inputs: ["config"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ObjectRelationshipComponent, isStandalone: true, selector: "yuv-object-relationship", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, objectId: { classPropertyName: "objectId", publicName: "objectId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, relationActions: { classPropertyName: "relationActions", publicName: "relationActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, providers: [ObjectRelationshipService], ngImport: i0, template: "<ymt-pane [plain]=\"true\" [topBarActions]=\"topBarActions\">\n  <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n    @if (empty()) {\n      <div class=\"no-relations\" inert>\n        <mat-icon>link_off</mat-icon>\n        <p>{{ 'yuv.object-relationship.no-relations' | translate }}</p>\n      </div>\n    } @else {\n      @switch (mode()) {\n        @case ('graph') {\n          <yuv-object-relationship-graph [config]=\"config()\"></yuv-object-relationship-graph>\n        }\n        @case ('list') {\n          <yuv-object-relationship-list [config]=\"config()\"> </yuv-object-relationship-list>\n        }\n      }\n    }\n  </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #topBarActions>\n  @if (supportedRelationships().length > 0) {\n    <button ymt-icon-button icon-button-size=\"small\" [matTooltip]=\"'yuv.object-relationship.add.tooltip' | translate\" (click)=\"addRelationship()\">\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"mode() === 'list' ? ('yuv.object-relationship.mode.graph.tooltip' | translate) : ('yuv.object-relationship.mode.list.tooltip' | translate)\"\n    (click)=\"toggleMode()\"\n  >\n    <mat-icon>{{ mode() === 'list' ? 'graph_3' : 'list' }}</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host{display:block;position:relative;height:100%;background-color:var(--ymt-surface)}:host .toggle{position:absolute;inset-block-start:var(--ymt-spacing-s);inset-inline-end:var(--ymt-spacing-s);z-index:10;background-color:var(--ymt-surface);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-full)}:host yuv-object-relationship-list,:host yuv-object-relationship-graph{height:100%}:host .no-relations{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--ymt-spacing-l);gap:var(--ymt-spacing-m);overflow:hidden}:host .no-relations mat-icon{scale:4;color:var(--ymt-text-color-subtle);opacity:.5;transform:translateY(-.5em)}\n"], dependencies: [{ 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: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i3.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i3.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { 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: "component", type: ObjectRelationshipGraphComponent, selector: "yuv-object-relationship-graph", inputs: ["config"], outputs: ["objectSelected", "relationSelected"] }, { kind: "component", type: ObjectRelationshipListComponent, selector: "yuv-object-relationship-list", inputs: ["config"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ObjectRelationshipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-object-relationship', imports: [
-                        CommonModule,
                         MatIconModule,
                         MatTooltipModule,
-                        TranslateModule,
+                        TranslatePipe,
                         MatButtonToggleModule,
                         YmtPanesModule,
                         YmtIconButtonDirective,
@@ -1072,15 +1095,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         YmtIconButtonDirective,
                         BusyOverlayDirective
                     ], providers: [ObjectRelationshipService], template: "<ymt-pane [plain]=\"true\" [topBarActions]=\"topBarActions\">\n  <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n    @if (empty()) {\n      <div class=\"no-relations\" inert>\n        <mat-icon>link_off</mat-icon>\n        <p>{{ 'yuv.object-relationship.no-relations' | translate }}</p>\n      </div>\n    } @else {\n      @switch (mode()) {\n        @case ('graph') {\n          <yuv-object-relationship-graph [config]=\"config()\"></yuv-object-relationship-graph>\n        }\n        @case ('list') {\n          <yuv-object-relationship-list [config]=\"config()\"> </yuv-object-relationship-list>\n        }\n      }\n    }\n  </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #topBarActions>\n  @if (supportedRelationships().length > 0) {\n    <button ymt-icon-button icon-button-size=\"small\" [matTooltip]=\"'yuv.object-relationship.add.tooltip' | translate\" (click)=\"addRelationship()\">\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"mode() === 'list' ? ('yuv.object-relationship.mode.graph.tooltip' | translate) : ('yuv.object-relationship.mode.list.tooltip' | translate)\"\n    (click)=\"toggleMode()\"\n  >\n    <mat-icon>{{ mode() === 'list' ? 'graph_3' : 'list' }}</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host{display:block;position:relative;height:100%;background-color:var(--ymt-surface)}:host .toggle{position:absolute;inset-block-start:var(--ymt-spacing-s);inset-inline-end:var(--ymt-spacing-s);z-index:10;background-color:var(--ymt-surface);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-full)}:host yuv-object-relationship-list,:host yuv-object-relationship-graph{height:100%}:host .no-relations{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--ymt-spacing-l);gap:var(--ymt-spacing-m);overflow:hidden}:host .no-relations mat-icon{scale:4;color:var(--ymt-text-color-subtle);opacity:.5;transform:translateY(-.5em)}\n"] }]
-        }] });
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], objectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectId", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], relationActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "relationActions", required: false }] }] } });
 
 const cmp = [ObjectRelationshipComponent];
 class YuvObjectRelationshipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvObjectRelationshipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: YuvObjectRelationshipModule, imports: [ObjectRelationshipComponent], exports: [ObjectRelationshipComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvObjectRelationshipModule, imports: [cmp] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvObjectRelationshipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: YuvObjectRelationshipModule, imports: [ObjectRelationshipComponent], exports: [ObjectRelationshipComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvObjectRelationshipModule, imports: [cmp] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvObjectRelationshipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvObjectRelationshipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...cmp],