@yuuvis/client-framework 2.3.30 → 2.4.0

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

@@ -0,0 +1,988 @@
+import * as i0 from '@angular/core';
+import { inject, signal, Injectable, input, computed, Component, forwardRef, viewChild, effect, output, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i1$3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3 from '@yuuvis/client-core';
+import { SearchService, DmsService, EventService, TranslateService, YuvEventType, SystemType, RelationshipTypeField, DmsObject, BaseObjectTypeField, SystemService, TranslateModule } from '@yuuvis/client-core';
+import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
+import * as i4$1 from '@yuuvis/material/panes';
+import { YmtPanesModule } from '@yuuvis/material/panes';
+import { ConfirmService, DialogComponent, BusyOverlayDirective, LayoutSettingsService } from '@yuuvis/client-framework/common';
+import { DataSet, Network } from 'vis-network/standalone';
+import { rxResource, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { switchMap, map, of, catchError, tap } from 'rxjs';
+import { RendererDirective } from '@yuuvis/client-framework/renderer';
+import { Router } from '@angular/router';
+import * as i1$2 from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
+import * as i3$1 from '@angular/material/form-field';
+import { MatFormFieldModule, MatError } from '@angular/material/form-field';
+import * as i4 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i1$1 from '@yuuvis/client-framework/autocomplete';
+import { YuvAutocompleteModule } from '@yuuvis/client-framework/autocomplete';
+import { SnackBarService } from '@yuuvis/client-framework';
+
+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,
+};
+
+class ObjectRelationshipService {
+    #search;
+    #dmsService;
+    #eventService;
+    #confirm;
+    #relationQA;
+    #relationsResource;
+    constructor() {
+        this.#search = inject(SearchService);
+        this.#dmsService = inject(DmsService);
+        this.#eventService = inject(EventService);
+        this.#confirm = inject(ConfirmService);
+        this.translate = inject(TranslateService);
+        this.#relationQA = {};
+        this.objectId = signal(undefined);
+        this.#relationsResource = rxResource({
+            request: this.objectId,
+            loader: ({ request }) => this.fetchRelations(request)
+        });
+        this.relations = this.#relationsResource.value;
+        this.busy = signal(false);
+        // the DmsObject representing the originId
+        this.object = signal(null);
+        this.#eventService
+            .on(YuvEventType.RELATIONSHIP_CREATED, YuvEventType.RELATIONSHIP_DELETED)
+            .pipe(takeUntilDestroyed())
+            .subscribe({
+            next: (e) => {
+                if (e.data?.sourceObjectId === this.objectId()) {
+                    this.#relationsResource.reload();
+                }
+            }
+        });
+    }
+    fetchRelations(originId) {
+        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}'`;
+        return this.#search
+            .searchCmis(query)
+            .pipe(switchMap((resRelations) => {
+            // collect source and target ids and ensure uniqueness
+            const o = {};
+            resRelations.items.forEach((i) => {
+                this.#relationQA[i.fields.get(BaseObjectTypeField.OBJECT_ID)] = new DmsObject(i);
+                o[i.fields.get(RelationshipTypeField.SOURCE_ID)] = null;
+                o[i.fields.get(RelationshipTypeField.TARGET_ID)] = null;
+            });
+            // get the data for these object ids
+            const ids = Object.keys(o)
+                .map((id) => `'${id}'`)
+                .join(',');
+            const q = `SELECT * FROM system:object WHERE ${BaseObjectTypeField.OBJECT_ID} IN (${ids})`;
+            return this.#search.searchCmis(q).pipe(map((resObjects) => ({
+                relations: resRelations,
+                objects: resObjects
+            })));
+        }))
+            .pipe(
+        // catchError
+        map((res) => {
+            this.busy.set(false);
+            return { originId, relations: res.relations, objects: res.objects };
+        }));
+    }
+    /**
+     * Deletes a relationship by its ID. Will ask for confirmation before deletion.
+     * @param relationId ID of the relationship to delete
+     * @param reloadResource Whether to reload the resource after deletion
+     */
+    deleteRelationship(relationId, reloadResource) {
+        return this.#confirm
+            .confirm({
+            message: this.translate.instant('yuv.object-relationship.delete-relation.confirm-message')
+        })
+            .pipe(switchMap((confirmed) => (confirmed ? this.#deleteRelationship(relationId, reloadResource) : of(false))));
+    }
+    #deleteRelationship(relationId, reloadResource) {
+        this.busy.set(true);
+        return this.#dmsService.deleteDmsObject(relationId).pipe(catchError(() => of(false)), map((err) => (err === false ? false : true)), tap((success) => {
+            this.busy.set(false);
+            if (success) {
+                this.#eventService.trigger(YuvEventType.RELATIONSHIP_DELETED, { relationId });
+                if (reloadResource) {
+                    this.#relationsResource.reload();
+                }
+            }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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) {
+        console.log('Navigating to link:', 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.15", ngImport: i0, type: NodeSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.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.15", 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"] }]
+        }] });
+
+class RelationshipTargetSearchComponent {
+    #searchService;
+    #configQA;
+    #value;
+    constructor() {
+        this.#searchService = inject(SearchService);
+        this.supportedRelationships = input.required();
+        this.availableTargetTypes = input([]);
+        this.config = input.required();
+        this.#configQA = computed(() => {
+            const qa = {};
+            this.config().nodes.forEach((c) => {
+                qa[c.objectType] = c;
+            });
+            return qa;
+        });
+        this.autocompleteRes = [];
+        this.busy = signal(false);
+        this.acFormControl = new FormControl([], Validators.required);
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+        this.acFormControl.valueChanges.subscribe((val) => {
+            this.#value = val && val.length > 0 ? val[0] : undefined;
+            this.propagateChange(this.#value?.value);
+        });
+    }
+    autocompleteFn(term) {
+        if (term.length >= 2) {
+            this.busy.set(true);
+            this.#searchService.search(this.#termToQuery(term)).subscribe({
+                next: (res) => {
+                    this.busy.set(false);
+                    this.autocompleteRes = res.items.map((item) => ({
+                        label: this.#getLabel(item),
+                        value: this.#searchResultItemToRecord(item)
+                    }));
+                },
+                error: () => {
+                    this.busy.set(false);
+                    this.autocompleteRes = [];
+                }
+            });
+        }
+        else {
+            this.autocompleteRes = [];
+        }
+    }
+    #getLabel(sri) {
+        // determine the object type
+        const configType = this.availableTargetTypes().find((tt) => {
+            const objectType = sri.fields.get(BaseObjectTypeField.OBJECT_TYPE_ID);
+            const sots = sri.fields.get(BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS);
+            return tt === objectType || (sots && sots.includes(tt));
+        });
+        const config = configType ? this.#configQA()[configType] : undefined;
+        return config ? sri.fields.get(config.labelField) : sri.fields.get(BaseObjectTypeField.OBJECT_ID);
+    }
+    #searchResultItemToRecord(item) {
+        return Array.from(item.fields.entries()).reduce((obj, [key, value]) => {
+            obj[key] = value;
+            return obj;
+        }, {});
+    }
+    #termToQuery(term) {
+        return {
+            term,
+            // filters: [
+            //   {
+            //     f: this.#targetTitleProperty,
+            //     o: Operator.CONTAINS,
+            //     v1: term
+            //   }
+            // ],
+            types: this.availableTargetTypes()
+        };
+    }
+    writeValue(value) {
+        // this component is not supposed to accept values from outside
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.acFormControl.disable();
+        }
+        else {
+            this.acFormControl.enable();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RelationshipTargetSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: RelationshipTargetSearchComponent, isStandalone: true, selector: "yuv-relationship-target-search", inputs: { supportedRelationships: { classPropertyName: "supportedRelationships", publicName: "supportedRelationships", isSignal: true, isRequired: true, transformFunction: null }, availableTargetTypes: { classPropertyName: "availableTargetTypes", publicName: "availableTargetTypes", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, 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]=\"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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RelationshipTargetSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-relationship-target-search', imports: [YuvAutocompleteModule, ReactiveFormsModule, TranslateModule, MatFormFieldModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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" }]
+        }], ctorParameters: () => [] });
+
+class AddRelationshipComponent {
+    constructor() {
+        this.#system = inject(SystemService);
+        this.#dialogData = inject(MAT_DIALOG_DATA);
+        this.#dialogRef = inject((MatDialogRef));
+        this.#dmsService = inject(DmsService);
+        this.#eventService = inject(EventService);
+        this.object = input(this.#dialogData.object);
+        this.config = input(this.#dialogData.config);
+        this.supportedRelationships = computed(() => {
+            const obj = this.object();
+            return obj ? this.#system.getSupportedRelationships(obj, true) : [];
+        });
+        // get the target types from the relationships
+        this.availableTargetTypes = computed(() => {
+            const rel = this.supportedRelationships();
+            return Array.from(new Set(rel.map((r) => r.allowedTargetTypes).flat()));
+        });
+        this.sourceNode = computed(() => {
+            const obj = this.object();
+            const config = this.config();
+            return {
+                title: obj.data[config.rootNode.labelField],
+                description: obj.data[config.rootNode.descriptionField || '']
+            };
+        });
+        this.#relationMatchesTargetObjectValidator = (control) => {
+            const targetObject = control.get('targetObject')?.value;
+            const relation = control.get('relation')?.value;
+            let valid = true;
+            if (relation && targetObject) {
+                // the allowed target types of the relation should be included in the selected objects
+                // SOTs or the selected object's type should include one of the allowed target types
+                const targetTypes = relation.allowedTargetTypes || [];
+                const objectType = targetObject[BaseObjectTypeField.OBJECT_TYPE_ID];
+                const sots = targetObject[BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS];
+                valid = targetTypes.includes(objectType) || targetTypes.some((t) => sots?.includes(t));
+            }
+            return valid ? null : { invalidRelationTargetCombination: true };
+        };
+        this.form = new FormGroup({
+            relation: new FormControl(null, { nonNullable: true, validators: [Validators.required] }),
+            targetObject: new FormControl(null, { nonNullable: true, validators: [Validators.required] })
+        }, { validators: this.#relationMatchesTargetObjectValidator });
+        this.busy = signal(false);
+    }
+    #system;
+    #dialogData;
+    #dialogRef;
+    #dmsService;
+    #eventService;
+    #relationMatchesTargetObjectValidator;
+    optionCompareWith(o1, o2) {
+        return o1?.id === o2?.id;
+    }
+    submit() {
+        this.#addRelationship(this.form.value.relation.id, this.form.value.targetObject).subscribe({
+            next: () => this.close(),
+            error: () => {
+                // TODO: Handle error appropriately
+            }
+        });
+    }
+    #addRelationship(relationId, target) {
+        const data = {
+            [RelationshipTypeField.SOURCE_ID]: this.object().id,
+            [RelationshipTypeField.TARGET_ID]: target[BaseObjectTypeField.OBJECT_ID]
+        };
+        return this.#dmsService
+            .createDmsObject(relationId, data, [])
+            .pipe(tap(() => this.#eventService.trigger(YuvEventType.RELATIONSHIP_CREATED, { sourceObjectId: this.object().id })));
+    }
+    close() {
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddRelationshipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-add-relationship', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        DialogComponent,
+                        MatSelectModule,
+                        MatFormFieldModule,
+                        MatError,
+                        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"] }]
+        }] });
+
+class ObjectRelationshipGraphComponent {
+    constructor() {
+        this.#dialog = inject(MatDialog);
+        this.#system = inject(SystemService);
+        this.#layoutSettings = inject(LayoutSettingsService);
+        this.#objectRelationshipService = inject(ObjectRelationshipService);
+        this.#snack = inject(SnackBarService);
+        this.translate = inject(TranslateService);
+        this.container = viewChild.required('graphContainer');
+        this.#mode = computed(() => {
+            const m = this.#layoutSettings.mode();
+            switch (m) {
+                case 'dark': {
+                    return 'dark';
+                }
+                case 'system': {
+                    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                }
+                default: {
+                    return 'light';
+                }
+            }
+        });
+        this.#relations = this.#objectRelationshipService.relations;
+        this.#relationsEffect = effect(() => {
+            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);
+        });
+        /**
+         * Configuration for the relations component.
+         */
+        this.config = input.required();
+        this.objectSelected = output();
+        this.relationSelected = output();
+        this.#network = null;
+        this.#objectQA = {};
+        this.#relationQA = {};
+        this.#nodes = new DataSet([]);
+        this.#edges = new DataSet([]);
+        this.busy = signal(false);
+        this.selectedRelation = signal(null);
+        this.#selectedRelationEffect = effect(() => {
+            this.relationSelected.emit(this.selectedRelation());
+        });
+        this.selectedObject = signal(null);
+        this.#selectedObjectEffect = effect(() => {
+            const so = this.selectedObject();
+            if (so)
+                this.selectedRelation.set(null);
+            this.objectSelected.emit(so);
+        });
+        this.detailsNode = computed(() => {
+            const object = this.selectedObject();
+            const config = this.#getNodeConfig(object);
+            return object && config ? { object, config } : null;
+        });
+    }
+    #dialog;
+    #system;
+    #layoutSettings;
+    #objectRelationshipService;
+    #snack;
+    #mode;
+    #relations;
+    #relationsEffect;
+    #network;
+    #objectQA;
+    #relationQA;
+    #nodes;
+    #edges;
+    #selectedRelationEffect;
+    #selectedObjectEffect;
+    download() {
+        const canvas = this.container().nativeElement.querySelector('canvas');
+        const image = canvas.toDataURL('image/png');
+        const link = document.createElement('a');
+        link.href = image;
+        link.download = 'canvas-image.png';
+        link.click();
+        link.remove();
+    }
+    addRelationship() {
+        this.#dialog
+            .open(AddRelationshipComponent, {
+            data: {
+                object: this.selectedObject(),
+                config: this.config()
+            }
+        })
+            .afterClosed()
+            .subscribe((result) => {
+            this.expandSelected();
+        });
+    }
+    deleteRelationship() {
+        this.#objectRelationshipService.deleteRelationship(this.selectedRelation().id, false).subscribe((success) => {
+            if (success) {
+                this.#edges.remove(this.selectedRelation().id);
+            }
+            else {
+                this.#snack.danger(this.translate.instant('yuv.object-relationship.delete-relation.error-message'));
+            }
+        });
+    }
+    expandSelected() {
+        const selected = this.selectedObject();
+        if (selected) {
+            this.#expand(selected.id);
+        }
+    }
+    #expand(nodeId) {
+        if (nodeId) {
+            this.busy.set(true);
+            this.#objectRelationshipService.fetchRelations(nodeId).subscribe({
+                next: (res) => {
+                    this.#_updateGraph(nodeId, res.relations, res.objects);
+                    this.busy.set(false);
+                },
+                error: (err) => {
+                    console.error('Error fetching relations for node:', err);
+                    this.busy.set(false);
+                }
+            });
+        }
+    }
+    #_updateGraph(originId, relations, objects) {
+        objects.items.forEach((item) => {
+            const id = item.fields.get(BaseObjectTypeField.OBJECT_ID);
+            this.#objectQA[id] = new DmsObject(item);
+        });
+        relations.items.forEach((item) => {
+            const id = item.fields.get(BaseObjectTypeField.OBJECT_ID);
+            this.#relationQA[id] = new DmsObject(item);
+        });
+        // group by incoming and outgoing relations
+        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
+            ? [
+                {
+                    ...rootNode,
+                    ...ROOT_NODE_SETTINGS,
+                    font: {
+                        ...ROOT_NODE_FONT_SETTINGS,
+                        ...this.#getNodeFont()
+                    }
+                }
+            ]
+            : [];
+        const _edges = [];
+        // add nodes and edges from search result
+        outgoing.forEach((item) => {
+            const relatedObjectId = item.fields.get(RelationshipTypeField.TARGET_ID);
+            const n = this.#toNode(relatedObjectId);
+            const e = this.#toEdge(item, originId, relatedObjectId, '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;
+                if (!nodeExists)
+                    _nodes.push(n);
+                // check if edge already exists
+                const edgeExists = _edges.some((edge) => edge.id === e.id) || this.#edges.get([e.id]).length > 0;
+                if (!edgeExists)
+                    _edges.push(e);
+            }
+        });
+        incoming.forEach((item) => {
+            const relatedObjectId = item.fields.get(RelationshipTypeField.SOURCE_ID);
+            const n = this.#toNode(relatedObjectId);
+            const e = this.#toEdge(item, relatedObjectId, originId, '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;
+                if (!nodeExists)
+                    _nodes.push(n);
+                // check if edge already exists
+                const edgeExists = _edges.some((edge) => edge.id === e.id) || this.#edges.get([e.id]).length > 0;
+                if (!edgeExists)
+                    _edges.push(e);
+            }
+        });
+        this.#nodes.add(_nodes);
+        this.#edges.add(_edges);
+    }
+    #getNodeConfig(o) {
+        const cfg = this.config();
+        if (!o)
+            return undefined;
+        const objectTypeIds = [...o.sots, o.objectTypeId];
+        return [cfg.rootNode, ...cfg.nodes].find((n) => objectTypeIds.includes(n.objectType));
+    }
+    // convert search result item to vis node
+    // will return NULL if the item object type is not configured in the component config
+    #toNode(objectId) {
+        const cfg = this.config();
+        const o = this.#objectQA[objectId];
+        if (!o)
+            return null;
+        const cfgNode = this.#getNodeConfig(o);
+        if (!cfgNode)
+            return null;
+        return {
+            ...NODE_SETTINGS,
+            objectType: cfgNode.objectType,
+            color: this.#getNodeColor(),
+            id: objectId,
+            label: this.#maxLength(o.data[cfgNode.labelField], 30),
+            icon: {
+                face: 'Material Symbols Sharp',
+                code: cfgNode.icon,
+                color: this.#getNodeColor().border
+            },
+            font: {
+                ...NODE_FONT_SETTINGS,
+                ...this.#getNodeFont()
+            }
+        };
+    }
+    #toEdge(item, from, to, direction) {
+        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),
+            label: this.#maxLength(label, 30),
+            color: this.#getEdgeColor(),
+            font: {
+                ...EDGE_FONT_SETTINGS,
+                ...this.#getEdgeFont()
+            },
+            arrows: direction,
+            from,
+            to
+        };
+    }
+    #maxLength(s, max) {
+        if (s.length > max) {
+            return s.substring(0, max - 3) + '...';
+        }
+        return s;
+    }
+    #getNodeColor() {
+        const computedStyle = this.#getComputedStyle();
+        return {
+            background: this.#resolveLightDark(computedStyle.getPropertyValue('--_node-background-color').trim()),
+            border: this.#resolveLightDark(computedStyle.getPropertyValue('--_node-border-color').trim()),
+            highlight: {
+                background: this.#resolveLightDark(computedStyle.getPropertyValue('--_node-background-color-highlight').trim()),
+                border: this.#resolveLightDark(computedStyle.getPropertyValue('--_node-color-highlight').trim())
+            }
+        };
+    }
+    #getNodeFont() {
+        const computedStyle = this.#getComputedStyle();
+        return {
+            color: this.#resolveLightDark(computedStyle.getPropertyValue('--_node-font-color').trim()),
+            strokeWidth: 4,
+            strokeColor: this.#resolveLightDark(computedStyle.getPropertyValue('--_container-background-color').trim())
+        };
+    }
+    #getEdgeColor() {
+        const computedStyle = this.#getComputedStyle();
+        return {
+            color: this.#resolveLightDark(computedStyle.getPropertyValue('--_edge-color').trim()),
+            highlight: this.#resolveLightDark(computedStyle.getPropertyValue('--_edge-color-highlight').trim()),
+            hover: this.#resolveLightDark(computedStyle.getPropertyValue('--_edge-color-hover').trim())
+        };
+    }
+    #getEdgeFont() {
+        const computedStyle = this.#getComputedStyle();
+        return {
+            strokeWidth: 4,
+            strokeColor: this.#resolveLightDark(computedStyle.getPropertyValue('--_container-background-color').trim()),
+            color: this.#resolveLightDark(computedStyle.getPropertyValue('--_edge-font-color').trim())
+        };
+    }
+    #getComputedStyle() {
+        const container = this.container().nativeElement;
+        return getComputedStyle(container);
+    }
+    // grab color values for light-dark(...,...) notation
+    #resolveLightDark(s) {
+        if (s.startsWith('light-dark(')) {
+            const regex = /light-dark\(\s*(#[0-9a-fA-F]{6})\s*,\s*(#[0-9a-fA-F]{6})\s*\)/;
+            const match = s.match(regex);
+            if (match) {
+                const lightColor = match[1];
+                const darkColor = match[2];
+                return this.#mode() === 'dark' ? darkColor : lightColor;
+            }
+            else
+                return s;
+        }
+        else
+            return s;
+    }
+    ngAfterViewInit() {
+        const options = {
+            physics: {
+                enabled: true,
+                solver: 'forceAtlas2Based',
+                forceAtlas2Based: {
+                    // gravitationalConstant: -50,
+                    // centralGravity: 0.01,
+                    springLength: 200,
+                }
+            },
+            nodes: {
+                shape: 'dot',
+                size: 20,
+                font: { size: 12 }
+            }
+        };
+        this.#network = new Network(this.container().nativeElement, {
+            nodes: this.#nodes,
+            edges: this.#edges
+        }, options);
+        this.#network.on('selectNode', (params) => {
+            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('doubleClick', (params) => {
+            const selectedNodeId = params.nodes[0];
+            this.#expand(selectedNodeId);
+        });
+    }
+    ngOnDestroy() {
+        if (this.#network) {
+            this.#network.destroy();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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-s);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"] }, { 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: "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.15", 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-s);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"] }]
+        }] });
+
+class ObjectRelationshipListItemComponent {
+    constructor() {
+        this.#router = inject(Router);
+        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);
+    }
+    #router;
+    #snack;
+    #objectRelationshipService;
+    deleteRelationship() {
+        this.#objectRelationshipService.deleteRelationship(this.link().id, true).subscribe((success) => {
+            if (!success) {
+                this.#snack.danger(this.translate.instant('yuv.object-relationship.delete-relation.error-message'));
+            }
+        });
+    }
+    open(link, skip) {
+        if (link && !skip)
+            this.#router.navigateByUrl(link);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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$3.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.15", 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"] }]
+        }] });
+
+class ObjectRelationshipListComponent {
+    constructor() {
+        this.#search = inject(SearchService);
+        this.#system = inject(SystemService);
+        this.#objectRelationshipService = inject(ObjectRelationshipService);
+        /**
+         * Configuration for the relations component.
+         */
+        this.config = input.required();
+        this.incomingLinks = signal([]);
+        this.outgoingLinks = signal([]);
+        this.#relations = this.#objectRelationshipService.relations;
+        this.#relationsEffect = effect(() => {
+            const rel = this.#relations();
+            if (!rel)
+                return;
+            this.#createLists(rel.originId, rel.relations, rel.objects);
+        });
+        this.#objectQA = {};
+    }
+    #search;
+    #system;
+    #objectRelationshipService;
+    #relations;
+    #relationsEffect;
+    #objectQA;
+    #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) => {
+            const id = item.fields.get(BaseObjectTypeField.OBJECT_ID);
+            this.#objectQA[id] = new DmsObject(item);
+        });
+        this.incomingLinks.set(incoming.map((rel) => this.#map(rel)).filter((l) => l !== undefined));
+        this.outgoingLinks.set(outgoing.map((rel) => this.#map(rel)).filter((l) => l !== undefined));
+    }
+    #map(relation) {
+        const sourceObject = this.#objectQA[relation.fields.get(RelationshipTypeField.SOURCE_ID)];
+        const targetObject = this.#objectQA[relation.fields.get(RelationshipTypeField.TARGET_ID)];
+        const relID = relation.fields.get(BaseObjectTypeField.OBJECT_ID);
+        const relObjectTypeID = relation.fields.get(BaseObjectTypeField.OBJECT_TYPE_ID);
+        const sourceCfg = this.#getConfigNode(sourceObject);
+        const targetCfg = this.#getConfigNode(targetObject);
+        // if no config found, this means that the relation is not configured to be shown
+        // Only nodes provided with the config are mapped to links
+        if (!sourceCfg || !targetCfg)
+            return undefined;
+        const sourceLabel = sourceObject.data[sourceCfg?.labelField || ''];
+        const sourceDescription = sourceObject.data[sourceCfg?.descriptionField || ''];
+        const sourceIcon = sourceCfg?.icon;
+        const targetLabel = targetObject.data[targetCfg?.labelField || ''];
+        const targetDescription = targetObject.data[targetCfg?.descriptionField || ''];
+        const targetIcon = targetCfg?.icon;
+        return {
+            id: relID,
+            type: {
+                id: relObjectTypeID,
+                label: this.#system.getLocalizedLabel(relObjectTypeID) || relObjectTypeID
+            },
+            source: {
+                id: relation.fields.get(RelationshipTypeField.SOURCE_ID),
+                label: sourceLabel,
+                description: sourceDescription,
+                icon: sourceIcon,
+                objectLink: sourceCfg.objectLink ? sourceCfg.objectLink.replace('{{id}}', sourceObject.id) : undefined
+            },
+            target: {
+                id: relation.fields.get(RelationshipTypeField.TARGET_ID),
+                label: targetLabel,
+                description: targetDescription,
+                icon: targetIcon,
+                objectLink: targetCfg.objectLink ? targetCfg.objectLink.replace('{{id}}', targetObject.id) : undefined
+            }
+        };
+    }
+    #getConfigNode(object) {
+        const cfg = this.config();
+        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.15", ngImport: i0, type: ObjectRelationshipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: i3.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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"] }]
+        }] });
+
+class ObjectRelationshipComponent {
+    constructor() {
+        this.#objectRelationshipService = inject(ObjectRelationshipService);
+        this.#system = inject(SystemService);
+        this.#dialog = inject(MatDialog);
+        this.#DEFAULT_MODE = 'graph';
+        this.mode = signal(this.#DEFAULT_MODE);
+        /**
+         * ID of the object to display relations for.
+         */
+        this.objectId = input.required();
+        this.#objectIdEffect = effect(() => {
+            const oid = this.objectId();
+            this.#objectRelationshipService.objectId.set(oid);
+        });
+        /**
+         * Configuration for the relations component.
+         */
+        this.config = input.required();
+        // the DmsObject representing the originId
+        this.originObject = signal(null);
+        this.supportedRelationships = computed(() => {
+            const obj = this.originObject();
+            return obj ? this.#system.getSupportedRelationships(obj) : [];
+        });
+        this.#relations = this.#objectRelationshipService.relations;
+        this.#relationsEffect = effect(() => {
+            const rel = this.#relations();
+            if (!rel) {
+                this.originObject.set(null);
+                return;
+            }
+            const originId = rel.originId;
+            const originItem = rel.objects.items.find((item) => item.fields.get(BaseObjectTypeField.OBJECT_ID) === originId);
+            this.originObject.set(originItem ? new DmsObject(originItem) : null);
+        });
+        this.relationActions = input(null);
+    }
+    #objectRelationshipService;
+    #system;
+    #dialog;
+    #DEFAULT_MODE;
+    #objectIdEffect;
+    #relations;
+    #relationsEffect;
+    toggleMode() {
+        const newMode = this.mode() === 'list' ? 'graph' : 'list';
+        this.mode.set(newMode);
+    }
+    addRelationship() {
+        this.#dialog.open(AddRelationshipComponent, {
+            data: {
+                object: this.originObject(),
+                config: this.config()
+            }
+        });
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-relationship', imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        TranslateModule,
+                        MatButtonToggleModule,
+                        YmtPanesModule,
+                        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"] }]
+        }] });
+
+const cmp = [ObjectRelationshipComponent];
+class YuvObjectRelationshipModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvObjectRelationshipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: YuvObjectRelationshipModule, imports: [ObjectRelationshipComponent], exports: [ObjectRelationshipComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvObjectRelationshipModule, imports: [cmp] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvObjectRelationshipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...cmp],
+                    exports: [...cmp]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AddRelationshipComponent, ObjectRelationshipComponent, YuvObjectRelationshipModule };
+//# sourceMappingURL=yuuvis-client-framework-object-relationship.mjs.map