@yuuvis/client-framework 2.4.0 → 2.4.2

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

@@ -32,20 +32,25 @@ import { SnackBarService } from '@yuuvis/client-framework';
 const ROOT_NODE_SETTINGS = {
     size: 30,
     borderWidth: 4,
-    borderWidthSelected: 6,
+    borderWidthSelected: 6
 };
 const ROOT_NODE_FONT_SETTINGS = {
-    size: 14,
+    size: 14
 };
 const NODE_SETTINGS = {
-    borderWidthSelected: 2,
+    borderWidthSelected: 2
 };
 const NODE_FONT_SETTINGS = {
-    size: 12,
+    size: 12
 };
 const EDGE_SETTINGS = {};
 const EDGE_FONT_SETTINGS = {
-    size: 10,
+    size: 10
+};
+// add relationship dialog settings
+const ADD_RELATIONSHIP_DIALOG_OPTIONS = {
+    width: '500px',
+    maxWidth: '90vw'
 };
 
 class ObjectRelationshipService {
@@ -86,6 +91,7 @@ class ObjectRelationshipService {
         this.busy.set(true);
         // search for relations that have this object as source or target
         const query = `SELECT * FROM ${SystemType.RELATIONSHIP} WHERE ${RelationshipTypeField.SOURCE_ID} = '${originId}' OR ${RelationshipTypeField.TARGET_ID} = '${originId}'`;
+        // TODO: What about multi-page results?
         return this.#search
             .searchCmis(query)
             .pipe(switchMap((resRelations) => {
@@ -100,7 +106,9 @@ class ObjectRelationshipService {
             const ids = Object.keys(o)
                 .map((id) => `'${id}'`)
                 .join(',');
-            const q = `SELECT * FROM system:object WHERE ${BaseObjectTypeField.OBJECT_ID} IN (${ids})`;
+            // having no relations would end up in an empty IN () statement which is invalid
+            // but as we need to fetch the origin objects anyway we can add it manually
+            const q = `SELECT * FROM system:object WHERE ${BaseObjectTypeField.OBJECT_ID} IN (${ids.length > 0 ? ids : `'${originId}'`})`;
             return this.#search.searchCmis(q).pipe(map((resObjects) => ({
                 relations: resRelations,
                 objects: resObjects
@@ -131,6 +139,7 @@ class ObjectRelationshipService {
             this.busy.set(false);
             if (success) {
                 this.#eventService.trigger(YuvEventType.RELATIONSHIP_DELETED, { relationId });
+                // TODO: trigger the event will reload the resource anyway (see constructor)
                 if (reloadResource) {
                     this.#relationsResource.reload();
                 }
@@ -170,7 +179,6 @@ class NodeSummaryComponent {
     #system;
     #router;
     openObject(link) {
-        console.log('Navigating to link:', link);
         this.#router.navigateByUrl(link);
     }
     #propertyToRendererInput(propertyName, object) {
@@ -300,7 +308,7 @@ class RelationshipTargetSearchComponent {
                 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]=\"true\"\n    [maxItems]=\"1\"\n  >\n    <!-- template for chip -->\n    <ng-template #chipTemplate let-item>\n      <div class=\"label\">{{ item.label }}</div>\n      <!-- <div class=\"meta\">{{ item.value[metaFieldProperty] }}</div> -->\n    </ng-template>\n  </yuv-autocomplete>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i1$1.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.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]=\"true\"\n    [maxItems]=\"1\"\n  >\n    <!-- template for chip -->\n    <ng-template #chipTemplate let-item>\n      <div class=\"label\">{{ item.label }}</div>\n      <!-- <div class=\"meta\">{{ item.value[metaFieldProperty] }}</div> -->\n    </ng-template>\n  </yuv-autocomplete>\n</mat-form-field>\n", styles: [":host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i1$1.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RelationshipTargetSearchComponent, decorators: [{
             type: Component,
@@ -310,7 +318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => RelationshipTargetSearchComponent),
                             multi: true
                         }
-                    ], 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]=\"true\"\n    [maxItems]=\"1\"\n  >\n    <!-- template for chip -->\n    <ng-template #chipTemplate let-item>\n      <div class=\"label\">{{ item.label }}</div>\n      <!-- <div class=\"meta\">{{ item.value[metaFieldProperty] }}</div> -->\n    </ng-template>\n  </yuv-autocomplete>\n</mat-form-field>\n" }]
+                    ], 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]=\"true\"\n    [maxItems]=\"1\"\n  >\n    <!-- template for chip -->\n    <ng-template #chipTemplate let-item>\n      <div class=\"label\">{{ item.label }}</div>\n      <!-- <div class=\"meta\">{{ item.value[metaFieldProperty] }}</div> -->\n    </ng-template>\n  </yuv-autocomplete>\n</mat-form-field>\n", styles: [":host mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class AddRelationshipComponent {
@@ -320,6 +328,7 @@ class AddRelationshipComponent {
         this.#dialogRef = inject((MatDialogRef));
         this.#dmsService = inject(DmsService);
         this.#eventService = inject(EventService);
+        this.translate = inject(TranslateService);
         this.object = input(this.#dialogData.object);
         this.config = input(this.#dialogData.config);
         this.supportedRelationships = computed(() => {
@@ -358,6 +367,7 @@ class AddRelationshipComponent {
             targetObject: new FormControl(null, { nonNullable: true, validators: [Validators.required] })
         }, { validators: this.#relationMatchesTargetObjectValidator });
         this.busy = signal(false);
+        this.error = signal(null);
     }
     #system;
     #dialogData;
@@ -369,10 +379,16 @@ class AddRelationshipComponent {
         return o1?.id === o2?.id;
     }
     submit() {
+        this.error.set(null);
+        this.busy.set(true);
         this.#addRelationship(this.form.value.relation.id, this.form.value.targetObject).subscribe({
-            next: () => this.close(),
+            next: () => {
+                this.busy.set(false);
+                this.close();
+            },
             error: () => {
-                // TODO: Handle error appropriately
+                this.error.set(this.translate.instant('yuv.object-relationship.add-relation.error-message'));
+                this.busy.set(false);
             }
         });
     }
@@ -389,7 +405,7 @@ class AddRelationshipComponent {
         this.#dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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\" [headertitel]=\"'yuv.object-relationship.add-relationship.headline' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n      @let sn = sourceNode();\n      @if (sn) {\n        <div class=\"source\">\n          {{ sn.title }}\n          @if (sn.description) {\n            <em>{{ sn.description }}</em>\n          }\n        </div>\n        <div class=\"line\"></div>\n      }\n      <mat-form-field>\n        <mat-label>{{ 'cm.app.cases.action.add-link.search.relation.label' | translate }}</mat-label>\n        <mat-select formControlName=\"relation\" [compareWith]=\"optionCompareWith\">\n          @for (r of supportedRelationships(); track r.id) {\n            <mat-option [value]=\"r\">{{ r.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <div class=\"line\"></div>\n\n      <yuv-relationship-target-search formControlName=\"targetObject\"\n        [config]=\"config()\"\n        [availableTargetTypes]=\"availableTargetTypes()\"\n        [supportedRelationships]=\"supportedRelationships()\"\n      ></yuv-relationship-target-search>\n\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    </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=\"button\" (click)=\"submit()\" [disabled]=\"form.invalid || busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main form{padding:var(--ymt-spacing-m);display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);align-items:center}:host main form .source{border:2px solid var(--ymt-outline);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);display:flex;flex-direction:column}:host main form .source em{font-style:normal;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main form .line{width:2px;background-color:var(--ymt-outline);min-height:2em;position:relative}:host main form .line: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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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", "availableTargetTypes", "config"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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\" [headertitel]=\"'yuv.object-relationship.add-relationship.headline' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n      @let sn = sourceNode();\n      @if (sn) {\n        <div class=\"source\">\n          {{ sn.title }}\n          @if (sn.description) {\n            <em>{{ sn.description }}</em>\n          }\n        </div>\n        <div class=\"line\"></div>\n      }\n      <mat-form-field>\n        <mat-label>{{ 'cm.app.cases.action.add-link.search.relation.label' | translate }}</mat-label>\n        <mat-select formControlName=\"relation\" [compareWith]=\"optionCompareWith\">\n          @for (r of supportedRelationships(); track r.id) {\n            <mat-option [value]=\"r\">{{ r.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <div class=\"line\"></div>\n\n      <yuv-relationship-target-search formControlName=\"targetObject\"\n        [config]=\"config()\"\n        [availableTargetTypes]=\"availableTargetTypes()\"\n        [supportedRelationships]=\"supportedRelationships()\"\n      ></yuv-relationship-target-search>\n\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      \n      @if (error()) {\n        <div class=\"error\">{{ error() }}</div>\n      }\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=\"button\" (click)=\"submit()\" [disabled]=\"form.invalid || busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .error{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 form{padding:var(--ymt-spacing-m);display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);align-items:center}:host main form .source{border:2px solid var(--ymt-outline);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);display:flex;flex-direction:column}:host main form .source em{font-style:normal;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main form yuv-relationship-target-search,:host main form mat-form-field{width:100%}:host main form .line{width:2px;background-color:var(--ymt-outline);min-height:2em;position:relative}:host main form .line: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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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", "availableTargetTypes", "config"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddRelationshipComponent, decorators: [{
             type: Component,
@@ -404,7 +420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         YmtButtonDirective,
                         RelationshipTargetSearchComponent,
                         BusyOverlayDirective
-                    ], template: "<yuv-dialog class=\"not-separated\" [headertitel]=\"'yuv.object-relationship.add-relationship.headline' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n      @let sn = sourceNode();\n      @if (sn) {\n        <div class=\"source\">\n          {{ sn.title }}\n          @if (sn.description) {\n            <em>{{ sn.description }}</em>\n          }\n        </div>\n        <div class=\"line\"></div>\n      }\n      <mat-form-field>\n        <mat-label>{{ 'cm.app.cases.action.add-link.search.relation.label' | translate }}</mat-label>\n        <mat-select formControlName=\"relation\" [compareWith]=\"optionCompareWith\">\n          @for (r of supportedRelationships(); track r.id) {\n            <mat-option [value]=\"r\">{{ r.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <div class=\"line\"></div>\n\n      <yuv-relationship-target-search formControlName=\"targetObject\"\n        [config]=\"config()\"\n        [availableTargetTypes]=\"availableTargetTypes()\"\n        [supportedRelationships]=\"supportedRelationships()\"\n      ></yuv-relationship-target-search>\n\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    </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=\"button\" (click)=\"submit()\" [disabled]=\"form.invalid || busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main form{padding:var(--ymt-spacing-m);display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);align-items:center}:host main form .source{border:2px solid var(--ymt-outline);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);display:flex;flex-direction:column}:host main form .source em{font-style:normal;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main form .line{width:2px;background-color:var(--ymt-outline);min-height:2em;position:relative}:host main form .line: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\" [headertitel]=\"'yuv.object-relationship.add-relationship.headline' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n      @let sn = sourceNode();\n      @if (sn) {\n        <div class=\"source\">\n          {{ sn.title }}\n          @if (sn.description) {\n            <em>{{ sn.description }}</em>\n          }\n        </div>\n        <div class=\"line\"></div>\n      }\n      <mat-form-field>\n        <mat-label>{{ 'cm.app.cases.action.add-link.search.relation.label' | translate }}</mat-label>\n        <mat-select formControlName=\"relation\" [compareWith]=\"optionCompareWith\">\n          @for (r of supportedRelationships(); track r.id) {\n            <mat-option [value]=\"r\">{{ r.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <div class=\"line\"></div>\n\n      <yuv-relationship-target-search formControlName=\"targetObject\"\n        [config]=\"config()\"\n        [availableTargetTypes]=\"availableTargetTypes()\"\n        [supportedRelationships]=\"supportedRelationships()\"\n      ></yuv-relationship-target-search>\n\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      \n      @if (error()) {\n        <div class=\"error\">{{ error() }}</div>\n      }\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=\"button\" (click)=\"submit()\" [disabled]=\"form.invalid || busy()\">\n      {{ 'yuv.object-relationship.add-relationship.action.submit' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .error{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 form{padding:var(--ymt-spacing-m);display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);align-items:center}:host main form .source{border:2px solid var(--ymt-outline);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);display:flex;flex-direction:column}:host main form .source em{font-style:normal;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main form yuv-relationship-target-search,:host main form mat-form-field{width:100%}:host main form .line{width:2px;background-color:var(--ymt-outline);min-height:2em;position:relative}:host main form .line: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"] }]
         }] });
 
 class ObjectRelationshipGraphComponent {
@@ -435,7 +451,6 @@ class ObjectRelationshipGraphComponent {
             const rel = this.#relations();
             if (!rel)
                 return;
-            // this.#outerObjectNodeIds = rel.objects.items.map((i) => i.fields.get(BaseObjectTypeField.OBJECT_ID) as string);
             this.#_updateGraph(rel.originId, rel.relations, rel.objects);
         });
         /**
@@ -494,6 +509,7 @@ class ObjectRelationshipGraphComponent {
     addRelationship() {
         this.#dialog
             .open(AddRelationshipComponent, {
+            ...ADD_RELATIONSHIP_DIALOG_OPTIONS,
             data: {
                 object: this.selectedObject(),
                 config: this.config()
@@ -507,7 +523,21 @@ class ObjectRelationshipGraphComponent {
     deleteRelationship() {
         this.#objectRelationshipService.deleteRelationship(this.selectedRelation().id, false).subscribe((success) => {
             if (success) {
+                const deletedEdge = this.#edges.get(this.selectedRelation().id);
+                if (!deletedEdge)
+                    return;
+                const sourceNodeId = deletedEdge.from;
+                const targetNodeId = deletedEdge.to;
                 this.#edges.remove(this.selectedRelation().id);
+                // check if the source/target node of the deleted edge has other connections to another node in the current graph
+                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);
+                }
+                if (targetNodeId && otherEdgesForTarget.length === 0) {
+                    this.#nodes.remove(targetNodeId);
+                }
             }
             else {
                 this.#snack.danger(this.translate.instant('yuv.object-relationship.delete-relation.error-message'));
@@ -548,7 +578,7 @@ class ObjectRelationshipGraphComponent {
         const incoming = relations.items.filter((item) => item.fields.get(RelationshipTypeField.TARGET_ID) === originId);
         const outgoing = relations.items.filter((item) => item.fields.get(RelationshipTypeField.SOURCE_ID) === originId);
         const rootNode = this.#toNode(originId);
-        const _nodes = originId === this.#relations()?.originId
+        const _nodes = originId === this.#relations()?.originId && this.#nodes.get([originId]).length === 0
             ? [
                 {
                     ...rootNode,
@@ -565,7 +595,7 @@ class ObjectRelationshipGraphComponent {
         outgoing.forEach((item) => {
             const relatedObjectId = item.fields.get(RelationshipTypeField.TARGET_ID);
             const n = this.#toNode(relatedObjectId);
-            const e = this.#toEdge(item, originId, relatedObjectId, 'from');
+            const e = this.#toEdge(item, originId, relatedObjectId, 'to');
             if (n) {
                 // check if the node is already in the rendered graph
                 const nodeExists = _nodes.some((node) => node.id === n.id) || this.#nodes.get([n.id]).length > 0;
@@ -580,7 +610,7 @@ class ObjectRelationshipGraphComponent {
         incoming.forEach((item) => {
             const relatedObjectId = item.fields.get(RelationshipTypeField.SOURCE_ID);
             const n = this.#toNode(relatedObjectId);
-            const e = this.#toEdge(item, relatedObjectId, originId, 'to');
+            const e = this.#toEdge(item, relatedObjectId, originId, 'from');
             if (n) {
                 // check if the node is already in the rendered graph
                 const nodeExists = _nodes.some((node) => node.id === n.id) || this.#nodes.get([n.id]).length > 0;
@@ -714,7 +744,7 @@ class ObjectRelationshipGraphComponent {
                 forceAtlas2Based: {
                     // gravitationalConstant: -50,
                     // centralGravity: 0.01,
-                    springLength: 200,
+                    springLength: 200
                 }
             },
             nodes: {
@@ -727,36 +757,20 @@ class ObjectRelationshipGraphComponent {
             nodes: this.#nodes,
             edges: this.#edges
         }, options);
-        this.#network.on('selectNode', (params) => {
-            const selectedNodeId = params.nodes[0];
-            this.selectedObject.set(this.#objectQA[selectedNodeId]);
-        });
-        this.#network.on('deselectNode', (params) => {
-            this.selectedObject.set(null);
-        });
-        this.#network.on('dragEnd', (params) => {
-            const selectedNodeId = params.nodes[0];
-            this.selectedObject.set(this.#objectQA[selectedNodeId]);
-        });
-        this.#network.on('selectEdge', (params) => {
-            const selectedEdgeId = params.edges[0];
-            const nodesSelected = params.nodes.length > 0;
-            this.selectedRelation.set(params.edges.length === 1 && !nodesSelected ? this.#relationQA[selectedEdgeId] : null);
-        });
-        this.#network.on('deselectEdge', (params) => {
-            const selectedEdgeId = params.edges[0];
-            const nodesSelected = params.nodes.length > 0;
-            this.selectedRelation.set(params.edges.length === 1 && !nodesSelected ? this.#relationQA[selectedEdgeId] : null);
-        });
-        this.#network.on('click', (params) => {
-            const selectedNodeId = params.nodes[0];
-            this.selectedObject.set(this.#objectQA[selectedNodeId]);
-        });
+        this.#network.on('selectNode', (params) => this.#setSelection(params));
+        this.#network.on('deselectNode', (params) => this.#setSelection(params));
+        this.#network.on('dragEnd', (params) => this.#setSelection(params));
+        this.#network.on('selectEdge', (params) => this.#setSelection(params));
+        this.#network.on('deselectEdge', (params) => this.#setSelection(params));
+        this.#network.on('click', (params) => this.#setSelection(params));
         this.#network.on('doubleClick', (params) => {
-            const selectedNodeId = params.nodes[0];
-            this.#expand(selectedNodeId);
+            this.#expand(params.nodes[0]);
         });
     }
+    #setSelection(params) {
+        this.selectedObject.set(params.nodes.length === 1 ? this.#objectQA[params.nodes[0]] : null);
+        this.selectedRelation.set(params.edges.length === 1 && params.nodes.length === 0 ? this.#relationQA[params.edges[0]] : null);
+    }
     ngOnDestroy() {
         if (this.#network) {
             this.#network.destroy();
@@ -832,7 +846,7 @@ class ObjectRelationshipListComponent {
     #createLists(objectId, relations, objects) {
         const incoming = relations.items.filter((item) => item.fields.get(RelationshipTypeField.TARGET_ID) === objectId);
         const outgoing = relations.items.filter((item) => item.fields.get(RelationshipTypeField.SOURCE_ID) === objectId);
-        objects.items.forEach((item) => {
+        objects?.items.forEach((item) => {
             const id = item.fields.get(BaseObjectTypeField.OBJECT_ID);
             this.#objectQA[id] = new DmsObject(item);
         });
@@ -897,6 +911,10 @@ class ObjectRelationshipComponent {
         this.#dialog = inject(MatDialog);
         this.#DEFAULT_MODE = 'graph';
         this.mode = signal(this.#DEFAULT_MODE);
+        this.empty = computed(() => {
+            const rel = this.#relations();
+            return rel && rel.relations.totalNumItems === 0;
+        });
         /**
          * ID of the object to display relations for.
          */
@@ -915,6 +933,7 @@ class ObjectRelationshipComponent {
             const obj = this.originObject();
             return obj ? this.#system.getSupportedRelationships(obj) : [];
         });
+        this.busy = this.#objectRelationshipService.busy;
         this.#relations = this.#objectRelationshipService.relations;
         this.#relationsEffect = effect(() => {
             const rel = this.#relations();
@@ -923,7 +942,8 @@ class ObjectRelationshipComponent {
                 return;
             }
             const originId = rel.originId;
-            const originItem = rel.objects.items.find((item) => item.fields.get(BaseObjectTypeField.OBJECT_ID) === originId);
+            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);
@@ -941,6 +961,7 @@ class ObjectRelationshipComponent {
     }
     addRelationship() {
         this.#dialog.open(AddRelationshipComponent, {
+            ...ADD_RELATIONSHIP_DIALOG_OPTIONS,
             data: {
                 object: this.originObject(),
                 config: this.config()
@@ -948,7 +969,7 @@ class ObjectRelationshipComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ObjectRelationshipComponent, isStandalone: true, selector: "yuv-object-relationship", inputs: { 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 } }, providers: [ObjectRelationshipService], ngImport: i0, template: "<ymt-pane [plain]=\"true\" [topBarActions]=\"topBarActions\">\n  <ymt-pane-body>\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  </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%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.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: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i4$1.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "plain", "mode", "modeAlign"], outputs: ["paneToggled", "navigationClicked"] }, { kind: "component", type: i4$1.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ObjectRelationshipComponent, isStandalone: true, selector: "yuv-object-relationship", inputs: { 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 } }, 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    }\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  </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$3.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: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i4$1.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "plain", "mode", "modeAlign"], outputs: ["paneToggled", "navigationClicked"] }, { kind: "component", type: i4$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipComponent, decorators: [{
             type: Component,
@@ -962,8 +983,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         YmtIconButtonDirective,
                         ObjectRelationshipGraphComponent,
                         ObjectRelationshipListComponent,
-                        YmtIconButtonDirective
-                    ], providers: [ObjectRelationshipService], template: "<ymt-pane [plain]=\"true\" [topBarActions]=\"topBarActions\">\n  <ymt-pane-body>\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  </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%}\n"] }]
+                        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    }\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  </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"] }]
         }] });
 
 const cmp = [ObjectRelationshipComponent];