@yuuvis/client-framework 2.10.3 → 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.
- package/autocomplete/lib/autocomplete.component.d.ts +4 -4
- package/autocomplete/lib/autocomplete.interface.d.ts +2 -2
- package/common/lib/services/index.d.ts +1 -0
- package/common/lib/services/layout-settings/layout-settings.service.d.ts +15 -0
- package/common/lib/services/theme/index.d.ts +3 -0
- package/common/lib/services/theme/theme.models.d.ts +16 -0
- package/common/lib/services/theme/theme.provider.d.ts +4 -0
- package/common/lib/services/theme/theme.service.d.ts +16 -0
- package/fesm2022/yuuvis-client-framework-common.mjs +213 -4
- package/fesm2022/yuuvis-client-framework-common.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-datepicker.mjs +1 -1
- package/fesm2022/yuuvis-client-framework-datepicker.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-forms.mjs +46 -21
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +2 -2
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs +135 -52
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-versions.mjs +4 -3
- package/fesm2022/yuuvis-client-framework-object-versions.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-query-list.mjs +5 -4
- package/fesm2022/yuuvis-client-framework-query-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +20 -4
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework.mjs +616 -98
- package/fesm2022/yuuvis-client-framework.mjs.map +1 -1
- package/forms/lib/elements/datetime/datetime.component.d.ts +0 -1
- package/forms/lib/elements/organization/organization.component.d.ts +1 -1
- package/forms/lib/elements/organization-set/organization-set.component.d.ts +1 -1
- package/index.d.ts +5 -2
- package/lib/config/index.d.ts +1 -0
- package/lib/config/session/index.d.ts +3 -0
- package/lib/config/session/session-activity-window-before-end.const.d.ts +43 -0
- package/lib/config/session/session-default-duration.const.d.ts +47 -0
- package/lib/config/session/session-popup-before-end.const.d.ts +47 -0
- package/lib/enums/channel-message.enum.d.ts +4 -0
- package/lib/enums/index.d.ts +1 -0
- package/lib/models/index.d.ts +2 -0
- package/lib/models/session/channel-payload.model.d.ts +5 -0
- package/lib/models/session/index.d.ts +1 -0
- package/lib/models/snack-bar/index.d.ts +3 -0
- package/lib/models/snack-bar/snack-bar-data.model.d.ts +6 -0
- package/lib/models/snack-bar/snack-bar-level.model.d.ts +1 -0
- package/lib/{services/snack-bar/snack-bar.interface.d.ts → models/snack-bar/snack-bar-options.model.d.ts} +1 -6
- package/lib/providers/index.d.ts +1 -0
- package/lib/providers/session/index.d.ts +1 -0
- package/lib/providers/session/provide-session.provider.d.ts +43 -0
- package/lib/services/index.d.ts +2 -2
- package/lib/services/session/session.service.d.ts +113 -0
- package/lib/services/snack-bar/snack-bar.service.d.ts +5 -5
- package/object-relationship/index.d.ts +1 -0
- package/object-relationship/lib/actions/add-relationship/add-relationship.component.d.ts +10 -0
- package/object-relationship/lib/actions/relationship-target-search/relationship-target-search.component.d.ts +17 -4
- package/object-relationship/lib/object-relationship.const.d.ts +0 -1
- package/object-versions/lib/object-versions.component.d.ts +1 -0
- package/package.json +8 -8
- package/query-list/lib/query-list.component.d.ts +8 -7
- package/tile-list/lib/tile-list/tile-list.component.d.ts +4 -2
- package/lib/assets/i18n/de.json +0 -202
- 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,
|
|
3
|
-
import * as i1$
|
|
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$
|
|
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
|
|
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 {
|
|
15
|
-
import * as i4
|
|
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
|
|
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
|
-
|
|
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(
|
|
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
|
|
55
|
-
this.propagateChange(this
|
|
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
|
|
66
|
-
|
|
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
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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
|
-
|
|
87
|
-
|
|
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
|
-
//
|
|
99
|
-
//
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
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
|
-
|
|
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.
|
|
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]=\"
|
|
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
|
-
],
|
|
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
|
-
|
|
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
|
-
|
|
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$
|
|
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$
|
|
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$
|
|
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:
|
|
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$
|
|
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
|