@yuuvis/client-framework 2.10.2 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/autocomplete/lib/autocomplete.component.d.ts +4 -4
  2. package/autocomplete/lib/autocomplete.interface.d.ts +2 -2
  3. package/common/lib/services/index.d.ts +1 -0
  4. package/common/lib/services/layout-settings/layout-settings.service.d.ts +15 -0
  5. package/common/lib/services/theme/index.d.ts +3 -0
  6. package/common/lib/services/theme/theme.models.d.ts +16 -0
  7. package/common/lib/services/theme/theme.provider.d.ts +4 -0
  8. package/common/lib/services/theme/theme.service.d.ts +16 -0
  9. package/fesm2022/yuuvis-client-framework-common.mjs +213 -4
  10. package/fesm2022/yuuvis-client-framework-common.mjs.map +1 -1
  11. package/fesm2022/yuuvis-client-framework-datepicker.mjs +1 -1
  12. package/fesm2022/yuuvis-client-framework-datepicker.mjs.map +1 -1
  13. package/fesm2022/yuuvis-client-framework-forms.mjs +46 -21
  14. package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
  15. package/fesm2022/yuuvis-client-framework-object-flavor.mjs +2 -2
  16. package/fesm2022/yuuvis-client-framework-object-flavor.mjs.map +1 -1
  17. package/fesm2022/yuuvis-client-framework-object-relationship.mjs +135 -52
  18. package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
  19. package/fesm2022/yuuvis-client-framework-object-versions.mjs +4 -3
  20. package/fesm2022/yuuvis-client-framework-object-versions.mjs.map +1 -1
  21. package/fesm2022/yuuvis-client-framework-query-list.mjs +5 -4
  22. package/fesm2022/yuuvis-client-framework-query-list.mjs.map +1 -1
  23. package/fesm2022/yuuvis-client-framework-tile-list.mjs +21 -6
  24. package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
  25. package/fesm2022/yuuvis-client-framework.mjs +616 -98
  26. package/fesm2022/yuuvis-client-framework.mjs.map +1 -1
  27. package/forms/lib/elements/datetime/datetime.component.d.ts +0 -1
  28. package/forms/lib/elements/organization/organization.component.d.ts +1 -1
  29. package/forms/lib/elements/organization-set/organization-set.component.d.ts +1 -1
  30. package/index.d.ts +5 -2
  31. package/lib/config/index.d.ts +1 -0
  32. package/lib/config/session/index.d.ts +3 -0
  33. package/lib/config/session/session-activity-window-before-end.const.d.ts +43 -0
  34. package/lib/config/session/session-default-duration.const.d.ts +47 -0
  35. package/lib/config/session/session-popup-before-end.const.d.ts +47 -0
  36. package/lib/enums/channel-message.enum.d.ts +4 -0
  37. package/lib/enums/index.d.ts +1 -0
  38. package/lib/models/index.d.ts +2 -0
  39. package/lib/models/session/channel-payload.model.d.ts +5 -0
  40. package/lib/models/session/index.d.ts +1 -0
  41. package/lib/models/snack-bar/index.d.ts +3 -0
  42. package/lib/models/snack-bar/snack-bar-data.model.d.ts +6 -0
  43. package/lib/models/snack-bar/snack-bar-level.model.d.ts +1 -0
  44. package/lib/{services/snack-bar/snack-bar.interface.d.ts → models/snack-bar/snack-bar-options.model.d.ts} +1 -6
  45. package/lib/providers/index.d.ts +1 -0
  46. package/lib/providers/session/index.d.ts +1 -0
  47. package/lib/providers/session/provide-session.provider.d.ts +43 -0
  48. package/lib/services/index.d.ts +2 -2
  49. package/lib/services/session/session.service.d.ts +113 -0
  50. package/lib/services/snack-bar/snack-bar.service.d.ts +5 -5
  51. package/object-relationship/index.d.ts +1 -0
  52. package/object-relationship/lib/actions/add-relationship/add-relationship.component.d.ts +10 -0
  53. package/object-relationship/lib/actions/relationship-target-search/relationship-target-search.component.d.ts +17 -4
  54. package/object-relationship/lib/object-relationship.const.d.ts +0 -1
  55. package/object-versions/lib/object-versions.component.d.ts +1 -0
  56. package/package.json +4 -4
  57. package/query-list/lib/query-list.component.d.ts +8 -7
  58. package/tile-list/lib/tile-list/tile-list.component.d.ts +4 -2
  59. package/lib/assets/i18n/de.json +0 -202
  60. package/lib/assets/i18n/en.json +0 -202
@@ -1,42 +1,54 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, input, computed, signal, forwardRef, Component, Injectable, viewChild, effect, output, NgModule } from '@angular/core';
3
- import * as i1$2 from '@angular/common';
2
+ import { inject, input, effect, computed, signal, forwardRef, Component, Injectable, viewChild, output, NgModule } from '@angular/core';
3
+ import * as i1$3 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import { MatButtonToggleModule } from '@angular/material/button-toggle';
6
6
  import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
7
- import * as i1$3 from '@angular/material/icon';
7
+ import * as i1$2 from '@angular/material/icon';
8
8
  import { MatIconModule } from '@angular/material/icon';
9
- import * as i2 from '@angular/material/tooltip';
9
+ import * as i2$1 from '@angular/material/tooltip';
10
10
  import { MatTooltipModule } from '@angular/material/tooltip';
11
- import * as i3 from '@yuuvis/client-core';
12
- import { SearchService, BaseObjectTypeField, TranslateModule, SystemService, DmsService, EventService, TranslateService, RelationshipTypeField, YuvEventType, SystemType, DmsObject } from '@yuuvis/client-core';
11
+ import * as i2 from '@yuuvis/client-core';
12
+ import { SearchService, BaseObjectTypeField, Operator, TranslateModule, SystemService, DmsService, EventService, TranslateService, RelationshipTypeField, YuvEventType, SystemType, DmsObject } from '@yuuvis/client-core';
13
13
  import { DialogComponent, BusyOverlayDirective, ConfirmService, LayoutSettingsService } from '@yuuvis/client-framework/common';
14
- import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
15
- import * as i4$1 from '@yuuvis/material/panes';
14
+ import { YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
15
+ import * as i4 from '@yuuvis/material/panes';
16
16
  import { YmtPanesModule } from '@yuuvis/material/panes';
17
+ import { takeUntilDestroyed, toSignal, rxResource } from '@angular/core/rxjs-interop';
17
18
  import * as i1$1 from '@angular/forms';
18
19
  import { FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup } from '@angular/forms';
19
- import * as i3$1 from '@angular/material/form-field';
20
+ import * as i6 from '@angular/material/chips';
21
+ import { MatChipsModule } from '@angular/material/chips';
22
+ import * as i5 from '@angular/material/form-field';
20
23
  import { MatFormFieldModule, MatError } from '@angular/material/form-field';
21
- import * as i4 from '@angular/material/select';
22
24
  import { MatSelectModule } from '@angular/material/select';
25
+ import * as i5$1 from '@yuuvis/client-framework/list';
26
+ import { YuvListModule } from '@yuuvis/client-framework/list';
27
+ import { tap, switchMap, map, of, catchError } from 'rxjs';
23
28
  import * as i1 from '@yuuvis/client-framework/autocomplete';
24
29
  import { YuvAutocompleteModule } from '@yuuvis/client-framework/autocomplete';
25
- import { tap, switchMap, map, of, catchError } from 'rxjs';
26
30
  import { DataSet, Network } from 'vis-network/standalone';
27
- import { rxResource, takeUntilDestroyed } from '@angular/core/rxjs-interop';
28
31
  import { RendererDirective } from '@yuuvis/client-framework/renderer';
29
32
  import { Router } from '@angular/router';
30
33
  import { SnackBarService } from '@yuuvis/client-framework';
31
34
 
32
35
  class RelationshipTargetSearchComponent {
33
36
  #searchService;
37
+ #availableTargetTypesEffect;
34
38
  #configQA;
35
- #value;
36
39
  constructor() {
37
40
  this.#searchService = inject(SearchService);
38
41
  this.supportedRelationships = input.required();
39
- this.availableTargetTypes = input([]);
42
+ // ID of the source object
43
+ this.sourceNode = input.required();
44
+ this.targetTypes = input([]);
45
+ this.#availableTargetTypesEffect = effect(() => {
46
+ const att = this.targetTypes();
47
+ if (att.length === 0)
48
+ this.acFormControl.disable();
49
+ else
50
+ this.acFormControl.enable();
51
+ });
40
52
  this.config = input.required();
41
53
  this.#configQA = computed(() => {
42
54
  const qa = {};
@@ -46,13 +58,34 @@ class RelationshipTargetSearchComponent {
46
58
  return qa;
47
59
  });
48
60
  this.autocompleteRes = [];
61
+ this.innerValue = signal(undefined);
62
+ this.mappedValue = computed(() => {
63
+ const v = this.innerValue();
64
+ if (!v || !v.value)
65
+ return undefined;
66
+ // map value to RelationshipComponentConfig
67
+ const configNode = this.config().nodes.find((n) => {
68
+ const objectTypeId = v.value.data[BaseObjectTypeField.OBJECT_TYPE_ID];
69
+ const sots = v.value.data[BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS];
70
+ return n.objectType === objectTypeId || (sots && sots.includes(n.objectType));
71
+ });
72
+ if (!configNode)
73
+ return {
74
+ title: v.label
75
+ };
76
+ return {
77
+ title: v.value.data[configNode.labelField] || v.label,
78
+ description: configNode.descriptionField ? v.value.data[configNode.descriptionField] : undefined,
79
+ icon: configNode.icon
80
+ };
81
+ });
49
82
  this.busy = signal(false);
50
- this.acFormControl = new FormControl([], Validators.required);
83
+ this.acFormControl = new FormControl(null, Validators.required);
51
84
  // eslint-disable-next-line @typescript-eslint/no-empty-function
52
85
  this.propagateChange = (_) => { };
53
- this.acFormControl.valueChanges.subscribe((val) => {
54
- this.#value = val && val.length > 0 ? val[0] : undefined;
55
- this.propagateChange(this.#value?.value);
86
+ this.acFormControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((val) => {
87
+ this.innerValue.set(val ? val : undefined);
88
+ this.propagateChange(this.innerValue()?.value?.data);
56
89
  });
57
90
  }
58
91
  autocompleteFn(term) {
@@ -61,10 +94,16 @@ class RelationshipTargetSearchComponent {
61
94
  this.#searchService.search(this.#termToQuery(term)).subscribe({
62
95
  next: (res) => {
63
96
  this.busy.set(false);
64
- this.autocompleteRes = res.items.map((item) => ({
65
- label: this.#getLabel(item),
66
- value: this.#searchResultItemToRecord(item)
67
- }));
97
+ this.autocompleteRes = res.items.map((item) => {
98
+ const { label, description } = this.#getLabelAndDescription(item);
99
+ return {
100
+ label,
101
+ value: {
102
+ description,
103
+ data: this.#searchResultItemToRecord(item)
104
+ }
105
+ };
106
+ });
68
107
  },
69
108
  error: () => {
70
109
  this.busy.set(false);
@@ -76,15 +115,27 @@ class RelationshipTargetSearchComponent {
76
115
  this.autocompleteRes = [];
77
116
  }
78
117
  }
79
- #getLabel(sri) {
80
- // determine the object type
81
- const configType = this.availableTargetTypes().find((tt) => {
118
+ reset() {
119
+ this.innerValue.set(undefined);
120
+ this.acFormControl.setValue(null);
121
+ this.autocompleteRes = [];
122
+ }
123
+ #getConfig(sri) {
124
+ const configType = this.targetTypes().find((tt) => {
82
125
  const objectType = sri.fields.get(BaseObjectTypeField.OBJECT_TYPE_ID);
83
126
  const sots = sri.fields.get(BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS);
84
127
  return tt === objectType || (sots && sots.includes(tt));
85
128
  });
86
- const config = configType ? this.#configQA()[configType] : undefined;
87
- return config ? sri.fields.get(config.labelField) : sri.fields.get(BaseObjectTypeField.OBJECT_ID);
129
+ return configType ? this.#configQA()[configType] : undefined;
130
+ }
131
+ #getLabelAndDescription(sri) {
132
+ const config = this.#getConfig(sri);
133
+ return config
134
+ ? {
135
+ label: sri.fields.get(config.labelField) || sri.fields.get(BaseObjectTypeField.OBJECT_ID),
136
+ description: config.descriptionField ? sri.fields.get(config.descriptionField) : undefined
137
+ }
138
+ : undefined;
88
139
  }
89
140
  #searchResultItemToRecord(item) {
90
141
  return Array.from(item.fields.entries()).reduce((obj, [key, value]) => {
@@ -95,18 +146,23 @@ class RelationshipTargetSearchComponent {
95
146
  #termToQuery(term) {
96
147
  return {
97
148
  term,
98
- // filters: [
99
- // {
100
- // f: this.#targetTitleProperty,
101
- // o: Operator.CONTAINS,
102
- // v1: term
103
- // }
104
- // ],
105
- types: this.availableTargetTypes()
149
+ // exclude the source object from the search results
150
+ // as it doesn't make sense to relate an object to itself
151
+ filters: [
152
+ {
153
+ f: BaseObjectTypeField.OBJECT_ID,
154
+ o: Operator.EQUAL,
155
+ v1: this.sourceNode(),
156
+ useNot: true
157
+ }
158
+ ],
159
+ types: this.targetTypes()
106
160
  };
107
161
  }
108
162
  writeValue(value) {
109
- // this component is not supposed to accept values from outside
163
+ this.innerValue.set(value);
164
+ this.acFormControl.setValue(value);
165
+ this.autocompleteRes = [];
110
166
  }
111
167
  registerOnChange(fn) {
112
168
  this.propagateChange = fn;
@@ -122,23 +178,25 @@ class RelationshipTargetSearchComponent {
122
178
  }
123
179
  }
124
180
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RelationshipTargetSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
125
- 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: [
181
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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 }, sourceNode: { classPropertyName: "sourceNode", publicName: "sourceNode", isSignal: true, isRequired: true, transformFunction: null }, targetTypes: { classPropertyName: "targetTypes", publicName: "targetTypes", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.has-value": "!!mappedValue()" } }, providers: [
126
182
  {
127
183
  provide: NG_VALUE_ACCESSOR,
128
184
  useExisting: forwardRef(() => RelationshipTargetSearchComponent),
129
185
  multi: true
130
186
  }
131
- ], 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.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 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" }] }); }
187
+ ], ngImport: i0, template: "<mat-form-field>\n <mat-label>{{ 'yuv.object-relationship.add-relationship.target-search.label' | translate }}</mat-label>\n\n <yuv-autocomplete\n [required]=\"true\"\n [busy]=\"busy()\"\n [formControl]=\"acFormControl\"\n [autocompleteValues]=\"autocompleteRes\"\n [forceSelection]=\"true\"\n (autocompleteFnc)=\"autocompleteFn($event)\"\n [multiple]=\"false\"\n >\n <!-- template for option -->\n <ng-template #optionTemplate let-item>\n <div class=\"label\">{{ item.label }}</div>\n <div class=\"meta\" style=\"font: var(--ymt-font-body-subtle); color: var(--ymt-text-color-subtle)\">{{ item.value.description }}</div>\n </ng-template>\n </yuv-autocomplete>\n\n @let v = mappedValue();\n @if (v) {\n <div class=\"value-node\" aria-live=\"polite\">\n @if (v.icon) {\n <div class=\"icon\" aria-hidden=\"true\">\n <mat-icon>{{ v.icon }}</mat-icon>\n </div>\n }\n <strong class=\"label\">{{ v.title }}</strong>\n <div class=\"description\">{{ v.description }}</div>\n\n <button\n type=\"button\"\n ymtIconButton\n icon-button-size=\"small\"\n [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-search.clear' | translate\"\n (click)=\"reset()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n</mat-form-field>\n", styles: [":host mat-form-field{width:100%}:host.has-value yuv-autocomplete{display:none}:host .value-node{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host .value-node .icon{grid-area:icon}:host .value-node .label{grid-area:label}:host .value-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }] }); }
132
188
  }
133
189
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RelationshipTargetSearchComponent, decorators: [{
134
190
  type: Component,
135
- args: [{ selector: 'yuv-relationship-target-search', imports: [YuvAutocompleteModule, ReactiveFormsModule, TranslateModule, MatFormFieldModule], providers: [
191
+ args: [{ selector: 'yuv-relationship-target-search', imports: [YuvAutocompleteModule, ReactiveFormsModule, MatIconModule, YmtIconButtonDirective, TranslateModule, MatFormFieldModule], providers: [
136
192
  {
137
193
  provide: NG_VALUE_ACCESSOR,
138
194
  useExisting: forwardRef(() => RelationshipTargetSearchComponent),
139
195
  multi: true
140
196
  }
141
- ], 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"] }]
197
+ ], host: {
198
+ '[class.has-value]': '!!mappedValue()'
199
+ }, template: "<mat-form-field>\n <mat-label>{{ 'yuv.object-relationship.add-relationship.target-search.label' | translate }}</mat-label>\n\n <yuv-autocomplete\n [required]=\"true\"\n [busy]=\"busy()\"\n [formControl]=\"acFormControl\"\n [autocompleteValues]=\"autocompleteRes\"\n [forceSelection]=\"true\"\n (autocompleteFnc)=\"autocompleteFn($event)\"\n [multiple]=\"false\"\n >\n <!-- template for option -->\n <ng-template #optionTemplate let-item>\n <div class=\"label\">{{ item.label }}</div>\n <div class=\"meta\" style=\"font: var(--ymt-font-body-subtle); color: var(--ymt-text-color-subtle)\">{{ item.value.description }}</div>\n </ng-template>\n </yuv-autocomplete>\n\n @let v = mappedValue();\n @if (v) {\n <div class=\"value-node\" aria-live=\"polite\">\n @if (v.icon) {\n <div class=\"icon\" aria-hidden=\"true\">\n <mat-icon>{{ v.icon }}</mat-icon>\n </div>\n }\n <strong class=\"label\">{{ v.title }}</strong>\n <div class=\"description\">{{ v.description }}</div>\n\n <button\n type=\"button\"\n ymtIconButton\n icon-button-size=\"small\"\n [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-search.clear' | translate\"\n (click)=\"reset()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n</mat-form-field>\n", styles: [":host mat-form-field{width:100%}:host.has-value yuv-autocomplete{display:none}:host .value-node{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host .value-node .icon{grid-area:icon}:host .value-node .label{grid-area:label}:host .value-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"] }]
142
200
  }], ctorParameters: () => [] });
143
201
 
144
202
  class AddRelationshipComponent {
@@ -149,23 +207,42 @@ class AddRelationshipComponent {
149
207
  this.#dmsService = inject(DmsService);
150
208
  this.#eventService = inject(EventService);
151
209
  this.translate = inject(TranslateService);
210
+ this.targetTypeLabels = {};
211
+ this.targetTypeFilterControl = new FormControl([]);
212
+ this.targetTypeFilterValue = toSignal(this.targetTypeFilterControl.valueChanges, { initialValue: this.targetTypeFilterControl.value || null });
152
213
  this.object = input(this.#dialogData.object);
153
214
  this.config = input(this.#dialogData.config);
154
215
  this.supportedRelationships = computed(() => {
155
216
  const obj = this.object();
156
217
  return obj ? this.#system.getSupportedRelationships(obj, true) : [];
157
218
  });
219
+ this.filteredRelationships = computed(() => {
220
+ // filter the supported relationships of the object by the allowed target types
221
+ // if target types are selected
222
+ const tt = this.targetTypeFilterValue();
223
+ return this.supportedRelationships().filter((r) => {
224
+ return !tt || r.allowedTargetTypes.some((t) => tt.includes(t));
225
+ });
226
+ });
158
227
  // get the target types from the relationships
159
228
  this.availableTargetTypes = computed(() => {
160
229
  const rel = this.supportedRelationships();
161
- return Array.from(new Set(rel.map((r) => r.allowedTargetTypes).flat()));
230
+ const types = Array.from(new Set(rel.map((r) => r.allowedTargetTypes).flat()));
231
+ this.targetTypeLabels = types.reduce((acc, type) => {
232
+ acc[type] = this.#system.getLocalizedLabel(type) || type;
233
+ return acc;
234
+ }, {});
235
+ this.targetTypeFilterControl.patchValue(types);
236
+ return types;
162
237
  });
238
+ this.labeledTargetTypes = computed(() => this.availableTargetTypes().map((t) => ({ id: t, label: this.targetTypeLabels[t] || t })));
163
239
  this.sourceNode = computed(() => {
164
240
  const obj = this.object();
165
241
  const config = this.config();
166
242
  return {
167
243
  title: obj.data[config.rootNode.labelField],
168
- description: obj.data[config.rootNode.descriptionField || '']
244
+ description: obj.data[config.rootNode.descriptionField || ''],
245
+ icon: config.rootNode.icon
169
246
  };
170
247
  });
171
248
  this.#relationMatchesTargetObjectValidator = (control) => {
@@ -198,6 +275,9 @@ class AddRelationshipComponent {
198
275
  optionCompareWith(o1, o2) {
199
276
  return o1?.id === o2?.id;
200
277
  }
278
+ onRelationSelect(idx) {
279
+ this.form.patchValue({ relation: this.filteredRelationships()[idx[0]] });
280
+ }
201
281
  submit() {
202
282
  this.error.set(null);
203
283
  this.busy.set(true);
@@ -225,7 +305,7 @@ class AddRelationshipComponent {
225
305
  this.#dialogRef.close();
226
306
  }
227
307
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
228
- 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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "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", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }] }); }
308
+ 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\" [headertitle]=\"'yuv.object-relationship.add-relationship.headline' | translate\">\n <main [yuvBusyOverlay]=\"busy()\">\n @let sn = sourceNode();\n <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n <section class=\"source\">\n @if (sn) {\n <div class=\"source-node ymt-panel\">\n @if (sn.icon) {\n <div class=\"icon\">\n <mat-icon>{{ sn.icon }}</mat-icon>\n </div>\n }\n <strong class=\"label\">{{ sn.title }}</strong>\n <div class=\"description\">{{ sn.description }}</div>\n </div>\n }\n </section>\n\n <section class=\"connect\" aria-hidden=\"true\">\n <div class=\"link\"></div>\n <div class=\"dot\"></div>\n <div class=\"link\"></div>\n </section>\n\n <!-- available relationships -->\n <section class=\"relationships ymt-panel\">\n <h3>{{ 'cm.app.cases.action.add-link.search.relation.label' | translate }}</h3>\n\n @let tt = labeledTargetTypes();\n @if (tt.length > 1) {\n <div class=\"target-filter\">\n <span>{{ 'yuv.object-relationship.add-relationship.target-type.filter.label' | translate }}</span>\n\n <mat-chip-listbox\n [multiple]=\"true\"\n [formControl]=\"targetTypeFilterControl\"\n [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-type.filter.label' | translate\"\n >\n @for (t of tt; track t) {\n <mat-chip-option [value]=\"t.id\">{{ t.label }}</mat-chip-option>\n }\n </mat-chip-listbox>\n </div>\n }\n <!-- list of filtered relationships -->\n <yuv-list (itemSelect)=\"onRelationSelect($event)\">\n @for (r of filteredRelationships(); track r.id) {\n <div class=\"relationship\" yuvListItem>\n {{ r.label }}\n\n <div class=\"targets\">\n @for (t of r.allowedTargetTypes; track t) {\n <span>{{ targetTypeLabels[t] }}</span>\n }\n </div>\n </div>\n }\n </yuv-list>\n </section>\n\n <!-- relationship target select -->\n <section class=\"target\">\n <yuv-relationship-target-search\n class=\"ymt-panel\"\n formControlName=\"targetObject\"\n [sourceNode]=\"object().id\"\n [config]=\"config()\"\n [targetTypes]=\"form.get('relation')!.value?.allowedTargetTypes || []\"\n [supportedRelationships]=\"supportedRelationships()\"\n ></yuv-relationship-target-search>\n </section>\n\n <section class=\"error\">\n @if (form.hasError('invalidRelationTargetCombination') && (form.touched || form.dirty)) {\n <mat-error class=\"error\">{{ 'yuv.object-relationship.add-relationship.error.invalidRelationTargetCombination' | translate }}</mat-error>\n }\n @if (error()) {\n <mat-error class=\"error\">{{ error() }}</mat-error>\n }\n </section>\n </form>\n </main>\n\n <footer>\n <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"busy()\">\n {{ 'yuv.object-relationship.add-relationship.action.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" type=\"submit\" [disabled]=\"form.invalid || busy()\">\n {{ 'yuv.object-relationship.add-relationship.action.submit' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: ["@charset \"UTF-8\";:host main form{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:\"source relationships\" \"connect relationships\" \"target relationships\" \"error error\";background-color:var(--ymt-surface-container-highest);padding:var(--ymt-spacing-m)}@media (width < 750px){:host main form{grid-template-columns:1fr;grid-template-areas:\"source\" \"relationships\" \"target\" \"error\"}:host main form .connect{display:none!important}:host main form .relationships{margin:var(--ymt-spacing-xl)}}:host main form .source{grid-area:source;padding:0 var(--ymt-spacing-xl);display:flex;flex-direction:column;align-items:center;justify-content:end}:host main form .source .source-node{min-width:31ch;border:2px solid var(--ymt-outline);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);outline:4px solid rgb(from var(--ymt-outline) r g b/.3);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host main form .source .source-node .icon{grid-area:icon}:host main form .source .source-node .label{grid-area:label}:host main form .source .source-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main form .connect{grid-area:connect;display:flex;flex-flow:column;align-items:center}:host main form .connect .dot{width:100%;height:2rem;position:relative;flex:0 0 auto}:host main form .connect .dot:after{content:\"\";position:absolute;width:calc(50% - .5rem);height:calc(1rem + 1px);inset-inline-end:0;border-block-end:2px dotted var(--ymt-outline)}:host main form .connect .dot:before{content:\"\";position:absolute;width:1rem;height:1rem;border-radius:50%;margin:auto;inset-inline-end:calc(50% - .5rem);inset-block-start:calc(50% - .5rem);border:2px solid var(--ymt-outline);outline:4px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .relationships{grid-area:relationships;border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3);overflow:hidden;max-height:300px;min-width:300px;display:flex;flex-direction:column}:host main form .relationships h3{margin:0;padding:var(--ymt-spacing-m);font:var(--ymt-font-title-small)}:host main form .relationships .target-filter{flex:0 0 auto;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-m);display:flex;gap:var(--ymt-spacing-m);align-items:center;justify-content:space-between;border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships yuv-list{flex:1;overflow-y:auto}:host main form .relationships .relationship{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s) var(--ymt-spacing-m);border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships .relationship span{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);outline:1px solid var(--ymt-text-color-subtle);border-radius:var(--ymt-corner-xs);padding:0 var(--ymt-spacing-2xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-2xs)}:host main form .relationships .relationship span:before{content:\"\\bb\"}:host main form .target{grid-area:target;padding:0 var(--ymt-spacing-xl)}:host main form .target yuv-relationship-target-search{min-width:31ch;display:block;margin-block-start:2px;padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .error{grid-area:error}:host main form .error mat-error{margin-block-start:var(--ymt-spacing-m);background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);width:100%;padding:var(--ymt-spacing-m);border-radius:var(--ymt-spacing-xs)}:host main .link{width:2px;flex:1;background-color:var(--ymt-outline);margin-block-end:3px;min-height:2em;position:relative}:host main .link:before{content:\"\";position:absolute;transform:rotate(135deg);width:8px;inset-block-end:0;translate:-3px 2px;height:8px;border:4px solid transparent;border-block-start-color:var(--ymt-outline);border-inline-end-color:var(--ymt-outline)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: RelationshipTargetSearchComponent, selector: "yuv-relationship-target-search", inputs: ["supportedRelationships", "sourceNode", "targetTypes", "config"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i5$1.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "selfHandleClick", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i5$1.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }] }); }
229
309
  }
230
310
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddRelationshipComponent, decorators: [{
231
311
  type: Component,
@@ -235,12 +315,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
235
315
  TranslateModule,
236
316
  DialogComponent,
237
317
  MatSelectModule,
318
+ MatIconModule,
238
319
  MatFormFieldModule,
239
320
  MatError,
321
+ MatButtonToggleModule,
240
322
  YmtButtonDirective,
241
323
  RelationshipTargetSearchComponent,
242
- BusyOverlayDirective
243
- ], 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"] }]
324
+ BusyOverlayDirective,
325
+ YuvListModule,
326
+ MatChipsModule
327
+ ], template: "<yuv-dialog class=\"not-separated\" [headertitle]=\"'yuv.object-relationship.add-relationship.headline' | translate\">\n <main [yuvBusyOverlay]=\"busy()\">\n @let sn = sourceNode();\n <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n <section class=\"source\">\n @if (sn) {\n <div class=\"source-node ymt-panel\">\n @if (sn.icon) {\n <div class=\"icon\">\n <mat-icon>{{ sn.icon }}</mat-icon>\n </div>\n }\n <strong class=\"label\">{{ sn.title }}</strong>\n <div class=\"description\">{{ sn.description }}</div>\n </div>\n }\n </section>\n\n <section class=\"connect\" aria-hidden=\"true\">\n <div class=\"link\"></div>\n <div class=\"dot\"></div>\n <div class=\"link\"></div>\n </section>\n\n <!-- available relationships -->\n <section class=\"relationships ymt-panel\">\n <h3>{{ 'cm.app.cases.action.add-link.search.relation.label' | translate }}</h3>\n\n @let tt = labeledTargetTypes();\n @if (tt.length > 1) {\n <div class=\"target-filter\">\n <span>{{ 'yuv.object-relationship.add-relationship.target-type.filter.label' | translate }}</span>\n\n <mat-chip-listbox\n [multiple]=\"true\"\n [formControl]=\"targetTypeFilterControl\"\n [attr.aria-label]=\"'yuv.object-relationship.add-relationship.target-type.filter.label' | translate\"\n >\n @for (t of tt; track t) {\n <mat-chip-option [value]=\"t.id\">{{ t.label }}</mat-chip-option>\n }\n </mat-chip-listbox>\n </div>\n }\n <!-- list of filtered relationships -->\n <yuv-list (itemSelect)=\"onRelationSelect($event)\">\n @for (r of filteredRelationships(); track r.id) {\n <div class=\"relationship\" yuvListItem>\n {{ r.label }}\n\n <div class=\"targets\">\n @for (t of r.allowedTargetTypes; track t) {\n <span>{{ targetTypeLabels[t] }}</span>\n }\n </div>\n </div>\n }\n </yuv-list>\n </section>\n\n <!-- relationship target select -->\n <section class=\"target\">\n <yuv-relationship-target-search\n class=\"ymt-panel\"\n formControlName=\"targetObject\"\n [sourceNode]=\"object().id\"\n [config]=\"config()\"\n [targetTypes]=\"form.get('relation')!.value?.allowedTargetTypes || []\"\n [supportedRelationships]=\"supportedRelationships()\"\n ></yuv-relationship-target-search>\n </section>\n\n <section class=\"error\">\n @if (form.hasError('invalidRelationTargetCombination') && (form.touched || form.dirty)) {\n <mat-error class=\"error\">{{ 'yuv.object-relationship.add-relationship.error.invalidRelationTargetCombination' | translate }}</mat-error>\n }\n @if (error()) {\n <mat-error class=\"error\">{{ error() }}</mat-error>\n }\n </section>\n </form>\n </main>\n\n <footer>\n <button ymtButton=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"busy()\">\n {{ 'yuv.object-relationship.add-relationship.action.cancel' | translate }}\n </button>\n <button ymtButton=\"primary\" type=\"submit\" [disabled]=\"form.invalid || busy()\">\n {{ 'yuv.object-relationship.add-relationship.action.submit' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: ["@charset \"UTF-8\";:host main form{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:\"source relationships\" \"connect relationships\" \"target relationships\" \"error error\";background-color:var(--ymt-surface-container-highest);padding:var(--ymt-spacing-m)}@media (width < 750px){:host main form{grid-template-columns:1fr;grid-template-areas:\"source\" \"relationships\" \"target\" \"error\"}:host main form .connect{display:none!important}:host main form .relationships{margin:var(--ymt-spacing-xl)}}:host main form .source{grid-area:source;padding:0 var(--ymt-spacing-xl);display:flex;flex-direction:column;align-items:center;justify-content:end}:host main form .source .source-node{min-width:31ch;border:2px solid var(--ymt-outline);border-radius:var(--ymt-corner-s);padding:var(--ymt-spacing-xs);outline:4px solid rgb(from var(--ymt-outline) r g b/.3);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;grid-template-areas:\"icon label button\" \"icon description description\";column-gap:var(--ymt-spacing-xs);align-items:center}:host main form .source .source-node .icon{grid-area:icon}:host main form .source .source-node .label{grid-area:label}:host main form .source .source-node .description{grid-area:description;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main form .connect{grid-area:connect;display:flex;flex-flow:column;align-items:center}:host main form .connect .dot{width:100%;height:2rem;position:relative;flex:0 0 auto}:host main form .connect .dot:after{content:\"\";position:absolute;width:calc(50% - .5rem);height:calc(1rem + 1px);inset-inline-end:0;border-block-end:2px dotted var(--ymt-outline)}:host main form .connect .dot:before{content:\"\";position:absolute;width:1rem;height:1rem;border-radius:50%;margin:auto;inset-inline-end:calc(50% - .5rem);inset-block-start:calc(50% - .5rem);border:2px solid var(--ymt-outline);outline:4px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .relationships{grid-area:relationships;border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3);overflow:hidden;max-height:300px;min-width:300px;display:flex;flex-direction:column}:host main form .relationships h3{margin:0;padding:var(--ymt-spacing-m);font:var(--ymt-font-title-small)}:host main form .relationships .target-filter{flex:0 0 auto;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);padding:0 var(--ymt-spacing-m);display:flex;gap:var(--ymt-spacing-m);align-items:center;justify-content:space-between;border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships yuv-list{flex:1;overflow-y:auto}:host main form .relationships .relationship{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s) var(--ymt-spacing-m);border-block-end:1px solid var(--ymt-outline-variant)}:host main form .relationships .relationship span{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);outline:1px solid var(--ymt-text-color-subtle);border-radius:var(--ymt-corner-xs);padding:0 var(--ymt-spacing-2xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-2xs)}:host main form .relationships .relationship span:before{content:\"\\bb\"}:host main form .target{grid-area:target;padding:0 var(--ymt-spacing-xl)}:host main form .target yuv-relationship-target-search{min-width:31ch;display:block;margin-block-start:2px;padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-s);border:1px solid var(--ymt-outline);outline:3px solid rgb(from var(--ymt-outline) r g b/.3)}:host main form .error{grid-area:error}:host main form .error mat-error{margin-block-start:var(--ymt-spacing-m);background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);width:100%;padding:var(--ymt-spacing-m);border-radius:var(--ymt-spacing-xs)}:host main .link{width:2px;flex:1;background-color:var(--ymt-outline);margin-block-end:3px;min-height:2em;position:relative}:host main .link:before{content:\"\";position:absolute;transform:rotate(135deg);width:8px;inset-block-end:0;translate:-3px 2px;height:8px;border:4px solid transparent;border-block-start-color:var(--ymt-outline);border-inline-end-color:var(--ymt-outline)}\n"] }]
244
328
  }] });
245
329
 
246
330
  const ROOT_NODE_SETTINGS = {
@@ -263,7 +347,6 @@ const EDGE_FONT_SETTINGS = {
263
347
  };
264
348
  // add relationship dialog settings
265
349
  const ADD_RELATIONSHIP_DIALOG_OPTIONS = {
266
- width: '500px',
267
350
  maxWidth: '90vw'
268
351
  };
269
352
 
@@ -416,7 +499,7 @@ class NodeSummaryComponent {
416
499
  };
417
500
  }
418
501
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NodeSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
419
- 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$2.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"] }] }); }
502
+ 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$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
420
503
  }
421
504
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NodeSummaryComponent, decorators: [{
422
505
  type: Component,
@@ -777,7 +860,7 @@ class ObjectRelationshipGraphComponent {
777
860
  }
778
861
  }
779
862
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
780
- 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-2xs);inset-inline-start:var(--ymt-spacing-s);z-index:10}:host .relations .graph-container{background-color:var(--_container-background-color);width:100%;height:100%}:host .relations .selected{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-start:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);padding:var(--ymt-spacing-s) var(--ymt-spacing-m);backdrop-filter:blur(2px);background-color:rgb(from var(--ymt-surface) r g b/.8);border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);max-width:33%;z-index:10;min-width:200px}:host .relations .selected yuv-node-summary{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NodeSummaryComponent, selector: "yuv-node-summary", inputs: ["object", "nodeConfig", "actions"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$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"] }] }); }
863
+ 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-2xs);inset-inline-start:var(--ymt-spacing-s);z-index:10}:host .relations .graph-container{background-color:var(--_container-background-color);width:100%;height:100%}:host .relations .selected{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-start:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);padding:var(--ymt-spacing-s) var(--ymt-spacing-m);backdrop-filter:blur(2px);background-color:rgb(from var(--ymt-surface) r g b/.8);border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);max-width:33%;z-index:10;min-width:200px}:host .relations .selected yuv-node-summary{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NodeSummaryComponent, selector: "yuv-node-summary", inputs: ["object", "nodeConfig", "actions"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }] }); }
781
864
  }
782
865
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipGraphComponent, decorators: [{
783
866
  type: Component,
@@ -810,7 +893,7 @@ class ObjectRelationshipListItemComponent {
810
893
  this.#router.navigateByUrl(link);
811
894
  }
812
895
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
813
- 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"] }] }); }
896
+ 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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }] }); }
814
897
  }
815
898
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipListItemComponent, decorators: [{
816
899
  type: Component,
@@ -897,7 +980,7 @@ class ObjectRelationshipListComponent {
897
980
  return cfg.nodes.find((n) => object.data[BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS].includes(n.objectType));
898
981
  }
899
982
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
900
- 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" }] }); }
983
+ 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: i2.TranslatePipe, name: "translate" }] }); }
901
984
  }
902
985
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipListComponent, decorators: [{
903
986
  type: Component,
@@ -969,7 +1052,7 @@ class ObjectRelationshipComponent {
969
1052
  });
970
1053
  }
971
1054
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
972
- 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 } @else {\n @switch (mode()) {\n @case ('graph') {\n <yuv-object-relationship-graph [config]=\"config()\"></yuv-object-relationship-graph>\n }\n @case ('list') {\n <yuv-object-relationship-list [config]=\"config()\"> </yuv-object-relationship-list>\n }\n }\n }\n </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #topBarActions>\n @if (supportedRelationships().length > 0) {\n <button ymt-icon-button icon-button-size=\"small\" [matTooltip]=\"'yuv.object-relationship.add.tooltip' | translate\" (click)=\"addRelationship()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n <button\n ymt-icon-button\n icon-button-size=\"small\"\n [matTooltip]=\"mode() === 'list' ? ('yuv.object-relationship.mode.graph.tooltip' | translate) : ('yuv.object-relationship.mode.list.tooltip' | translate)\"\n (click)=\"toggleMode()\"\n >\n <mat-icon>{{ mode() === 'list' ? 'graph_3' : 'list' }}</mat-icon>\n </button>\n</ng-template>\n", styles: [":host{display:block;position:relative;height:100%;background-color:var(--ymt-surface)}:host .toggle{position:absolute;inset-block-start:var(--ymt-spacing-s);inset-inline-end:var(--ymt-spacing-s);z-index:10;background-color:var(--ymt-surface);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-full)}:host yuv-object-relationship-list,:host yuv-object-relationship-graph{height:100%}:host .no-relations{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--ymt-spacing-l);gap:var(--ymt-spacing-m);overflow:hidden}:host .no-relations mat-icon{scale:4;color:var(--ymt-text-color-subtle);opacity:.5;transform:translateY(-.5em)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$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", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }] }); }
1055
+ 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 } @else {\n @switch (mode()) {\n @case ('graph') {\n <yuv-object-relationship-graph [config]=\"config()\"></yuv-object-relationship-graph>\n }\n @case ('list') {\n <yuv-object-relationship-list [config]=\"config()\"> </yuv-object-relationship-list>\n }\n }\n }\n </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #topBarActions>\n @if (supportedRelationships().length > 0) {\n <button ymt-icon-button icon-button-size=\"small\" [matTooltip]=\"'yuv.object-relationship.add.tooltip' | translate\" (click)=\"addRelationship()\">\n <mat-icon>add</mat-icon>\n </button>\n }\n <button\n ymt-icon-button\n icon-button-size=\"small\"\n [matTooltip]=\"mode() === 'list' ? ('yuv.object-relationship.mode.graph.tooltip' | translate) : ('yuv.object-relationship.mode.list.tooltip' | translate)\"\n (click)=\"toggleMode()\"\n >\n <mat-icon>{{ mode() === 'list' ? 'graph_3' : 'list' }}</mat-icon>\n </button>\n</ng-template>\n", styles: [":host{display:block;position:relative;height:100%;background-color:var(--ymt-surface)}:host .toggle{position:absolute;inset-block-start:var(--ymt-spacing-s);inset-inline-end:var(--ymt-spacing-s);z-index:10;background-color:var(--ymt-surface);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-full)}:host yuv-object-relationship-list,:host yuv-object-relationship-graph{height:100%}:host .no-relations{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--ymt-spacing-l);gap:var(--ymt-spacing-m);overflow:hidden}:host .no-relations mat-icon{scale:4;color:var(--ymt-text-color-subtle);opacity:.5;transform:translateY(-.5em)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i4.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "plain", "mode", "modeAlign"], outputs: ["paneToggled", "navigationClicked"] }, { kind: "component", type: i4.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "component", type: ObjectRelationshipGraphComponent, selector: "yuv-object-relationship-graph", inputs: ["config"], outputs: ["objectSelected", "relationSelected"] }, { kind: "component", type: ObjectRelationshipListComponent, selector: "yuv-object-relationship-list", inputs: ["config"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }] }); }
973
1056
  }
974
1057
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectRelationshipComponent, decorators: [{
975
1058
  type: Component,
@@ -1006,5 +1089,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1006
1089
  * Generated bundle index. Do not edit.
1007
1090
  */
1008
1091
 
1009
- export { AddRelationshipComponent, ObjectRelationshipComponent, YuvObjectRelationshipModule };
1092
+ export { ADD_RELATIONSHIP_DIALOG_OPTIONS, AddRelationshipComponent, EDGE_FONT_SETTINGS, EDGE_SETTINGS, NODE_FONT_SETTINGS, NODE_SETTINGS, ObjectRelationshipComponent, ROOT_NODE_FONT_SETTINGS, ROOT_NODE_SETTINGS, YuvObjectRelationshipModule };
1010
1093
  //# sourceMappingURL=yuuvis-client-framework-object-relationship.mjs.map