@yuuvis/client-framework 3.16.0 → 3.17.1
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/fesm2022/yuuvis-client-framework-actions.mjs +2 -6
- package/fesm2022/yuuvis-client-framework-actions.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-badges.mjs +9 -2
- package/fesm2022/yuuvis-client-framework-badges.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-forms.mjs +237 -129
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs +2 -2
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs +47 -19
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-renderer.mjs +48 -21
- package/fesm2022/yuuvis-client-framework-renderer.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs +1 -1
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +59 -65
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/lib/assets/i18n/de.json +11 -10
- package/lib/assets/i18n/en.json +10 -9
- package/package.json +5 -5
- package/types/yuuvis-client-framework-badges.d.ts +7 -0
- package/types/yuuvis-client-framework-forms.d.ts +28 -8
- package/types/yuuvis-client-framework-object-relationship.d.ts +6 -1
- package/types/yuuvis-client-framework-tile-list.d.ts +13 -2
|
@@ -183,7 +183,7 @@ class RelationshipTargetSearchComponent {
|
|
|
183
183
|
useExisting: forwardRef(() => RelationshipTargetSearchComponent),
|
|
184
184
|
multi: true
|
|
185
185
|
}
|
|
186
|
-
], 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);padding:var(--ymt-spacing-2xs) 0;align-items:center}:host .value-node .icon{grid-area:icon}:host .value-node .label{grid-area:label;min-width:0;overflow-wrap:anywhere}:host .value-node .description{grid-area:description;min-width:0;overflow-wrap:anywhere;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
186
|
+
], 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);padding:var(--ymt-spacing-2xs) 0;align-items:center}:host .value-node .icon{grid-area:icon}:host .value-node .label{grid-area:label;min-width:0;overflow-wrap:anywhere}:host .value-node .description{grid-area:description;min-width:0;overflow-wrap:anywhere;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", "separatorKeys", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
187
187
|
}
|
|
188
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RelationshipTargetSearchComponent, decorators: [{
|
|
189
189
|
type: Component,
|
|
@@ -402,6 +402,7 @@ class ObjectRelationshipService {
|
|
|
402
402
|
#dmsService;
|
|
403
403
|
#eventService;
|
|
404
404
|
#confirm;
|
|
405
|
+
#translate;
|
|
405
406
|
#relationQA;
|
|
406
407
|
#relationsResource;
|
|
407
408
|
constructor() {
|
|
@@ -409,12 +410,17 @@ class ObjectRelationshipService {
|
|
|
409
410
|
this.#dmsService = inject(DmsService);
|
|
410
411
|
this.#eventService = inject(EventService);
|
|
411
412
|
this.#confirm = inject(ConfirmService);
|
|
412
|
-
this
|
|
413
|
+
this.#translate = inject(TranslateService);
|
|
413
414
|
this.#relationQA = {};
|
|
414
415
|
this.objectId = signal(undefined, ...(ngDevMode ? [{ debugName: "objectId" }] : /* istanbul ignore next */ []));
|
|
416
|
+
// number of relations to load per request; falls back to the search services default query size
|
|
417
|
+
this.pageSize = signal(undefined, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
415
418
|
this.#relationsResource = rxResource({
|
|
416
|
-
params:
|
|
417
|
-
|
|
419
|
+
params: computed(() => {
|
|
420
|
+
const originId = this.objectId();
|
|
421
|
+
return originId ? { originId, pageSize: this.pageSize() } : undefined;
|
|
422
|
+
}),
|
|
423
|
+
stream: ({ params }) => this.fetchRelations(params.originId)
|
|
418
424
|
});
|
|
419
425
|
this.relations = this.#relationsResource.value;
|
|
420
426
|
this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
|
|
@@ -424,8 +430,8 @@ class ObjectRelationshipService {
|
|
|
424
430
|
.on(YuvEventType.RELATIONSHIP_CREATED, YuvEventType.RELATIONSHIP_DELETED)
|
|
425
431
|
.pipe(takeUntilDestroyed())
|
|
426
432
|
.subscribe({
|
|
427
|
-
next: (
|
|
428
|
-
if (
|
|
433
|
+
next: (event) => {
|
|
434
|
+
if (event.data?.sourceObjectId === this.objectId()) {
|
|
429
435
|
this.#relationsResource.reload();
|
|
430
436
|
}
|
|
431
437
|
}
|
|
@@ -434,26 +440,30 @@ class ObjectRelationshipService {
|
|
|
434
440
|
fetchRelations(originId) {
|
|
435
441
|
this.busy.set(true);
|
|
436
442
|
// search for relations that have this object as source or target
|
|
443
|
+
// eslint-disable-next-line max-len
|
|
437
444
|
const query = `SELECT * FROM ${SystemType.RELATIONSHIP} WHERE ${RelationshipTypeField.SOURCE_ID} = '${originId}' OR ${RelationshipTypeField.TARGET_ID} = '${originId}'`;
|
|
438
445
|
// TODO: What about multi-page results?
|
|
439
446
|
return this.#search
|
|
440
|
-
.searchCmis(query)
|
|
447
|
+
.searchCmis(query, this.pageSize())
|
|
441
448
|
.pipe(switchMap((resRelations) => {
|
|
442
449
|
// collect source and target ids and ensure uniqueness
|
|
443
|
-
const
|
|
450
|
+
const obj = {};
|
|
444
451
|
resRelations.items.forEach((i) => {
|
|
445
452
|
this.#relationQA[i.fields.get(BaseObjectTypeField.OBJECT_ID)] = new DmsObject(i);
|
|
446
|
-
|
|
447
|
-
|
|
453
|
+
obj[i.fields.get(RelationshipTypeField.SOURCE_ID)] = null;
|
|
454
|
+
obj[i.fields.get(RelationshipTypeField.TARGET_ID)] = null;
|
|
448
455
|
});
|
|
449
456
|
// get the data for these object ids
|
|
450
|
-
const ids = Object.keys(
|
|
457
|
+
const ids = Object.keys(obj)
|
|
451
458
|
.map((id) => `'${id}'`)
|
|
452
459
|
.join(',');
|
|
453
460
|
// having no relations would end up in an empty IN () statement which is invalid
|
|
454
461
|
// but as we need to fetch the origin objects anyway we can add it manually
|
|
455
|
-
|
|
456
|
-
|
|
462
|
+
// eslint-disable-next-line max-len
|
|
463
|
+
const objQuery = `SELECT * FROM system:object WHERE ${BaseObjectTypeField.OBJECT_ID} IN (${ids.length > 0 ? ids : `'${originId}'`})`;
|
|
464
|
+
// size the query to the exact number of requested ids so no objects are silently missing
|
|
465
|
+
const uniqueIdCount = Math.max(Object.keys(obj).length, 1);
|
|
466
|
+
return this.#search.searchCmis(objQuery, uniqueIdCount).pipe(map((resObjects) => ({
|
|
457
467
|
relations: resRelations,
|
|
458
468
|
objects: resObjects
|
|
459
469
|
})));
|
|
@@ -473,7 +483,7 @@ class ObjectRelationshipService {
|
|
|
473
483
|
deleteRelationship(relationId, reloadResource) {
|
|
474
484
|
return this.#confirm
|
|
475
485
|
.confirm({
|
|
476
|
-
message: this
|
|
486
|
+
message: this.#translate.instant('yuv.object-relationship.delete-relation.confirm-message')
|
|
477
487
|
})
|
|
478
488
|
.pipe(switchMap((confirmed) => (confirmed ? this.#deleteRelationship(relationId, reloadResource) : of(false))));
|
|
479
489
|
}
|
|
@@ -991,6 +1001,14 @@ class ObjectRelationshipListComponent {
|
|
|
991
1001
|
* When set, relationships can be explored but not removed.
|
|
992
1002
|
*/
|
|
993
1003
|
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1004
|
+
/**
|
|
1005
|
+
* Number of relations to load per request. Defaults to the search
|
|
1006
|
+
* service's default query size when not set.
|
|
1007
|
+
*/
|
|
1008
|
+
this.pageSize = input(undefined, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
1009
|
+
this.#pageSizeEffect = effect(() => {
|
|
1010
|
+
this.#objectRelationshipService.pageSize.set(this.pageSize());
|
|
1011
|
+
}, ...(ngDevMode ? [{ debugName: "#pageSizeEffect" }] : /* istanbul ignore next */ []));
|
|
994
1012
|
this.incomingLinks = signal([], ...(ngDevMode ? [{ debugName: "incomingLinks" }] : /* istanbul ignore next */ []));
|
|
995
1013
|
this.outgoingLinks = signal([], ...(ngDevMode ? [{ debugName: "outgoingLinks" }] : /* istanbul ignore next */ []));
|
|
996
1014
|
this.#relations = this.#objectRelationshipService.relations;
|
|
@@ -1005,6 +1023,7 @@ class ObjectRelationshipListComponent {
|
|
|
1005
1023
|
#search;
|
|
1006
1024
|
#localization;
|
|
1007
1025
|
#objectRelationshipService;
|
|
1026
|
+
#pageSizeEffect;
|
|
1008
1027
|
#relations;
|
|
1009
1028
|
#relationsEffect;
|
|
1010
1029
|
#objectQA;
|
|
@@ -1064,12 +1083,12 @@ class ObjectRelationshipListComponent {
|
|
|
1064
1083
|
return cfg.nodes.find((nodes) => object.data[BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS].includes(nodes.objectType));
|
|
1065
1084
|
}
|
|
1066
1085
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1067
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ObjectRelationshipListComponent, isStandalone: true, selector: "yuv-object-relationship-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, 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 [readonly]=\"readonly()\"\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 [readonly]=\"readonly()\"\n direction=\"out\"\n ></yuv-object-relationship-list-item>\n }\n}\n", styles: [":host{display:block;padding:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "component", type: ObjectRelationshipListItemComponent, selector: "yuv-object-relationship-list-item", inputs: ["link", "direction", "enableSourceLink", "enableTargetLink", "readonly"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
1086
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ObjectRelationshipListComponent, isStandalone: true, selector: "yuv-object-relationship-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, 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 [readonly]=\"readonly()\"\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 [readonly]=\"readonly()\"\n direction=\"out\"\n ></yuv-object-relationship-list-item>\n }\n}\n", styles: [":host{display:block;padding:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "component", type: ObjectRelationshipListItemComponent, selector: "yuv-object-relationship-list-item", inputs: ["link", "direction", "enableSourceLink", "enableTargetLink", "readonly"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
1068
1087
|
}
|
|
1069
1088
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipListComponent, decorators: [{
|
|
1070
1089
|
type: Component,
|
|
1071
1090
|
args: [{ selector: 'yuv-object-relationship-list', imports: [ObjectRelationshipListItemComponent, TranslatePipe], template: "@let incoming = incomingLinks();\n@let outgoing = outgoingLinks();\n\n@if (incoming.length > 0) {\n <h3>{{ 'yuv.object-relationship.list.incoming' | translate }}</h3>\n @for (n of incoming; track n.id) {\n <yuv-object-relationship-list-item\n [enableSourceLink]=\"true\"\n [enableTargetLink]=\"false\"\n [link]=\"n\"\n [readonly]=\"readonly()\"\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 [readonly]=\"readonly()\"\n direction=\"out\"\n ></yuv-object-relationship-list-item>\n }\n}\n", styles: [":host{display:block;padding:var(--ymt-spacing-m)}\n"] }]
|
|
1072
|
-
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
1091
|
+
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }] } });
|
|
1073
1092
|
|
|
1074
1093
|
class ObjectRelationshipComponent {
|
|
1075
1094
|
constructor() {
|
|
@@ -1101,6 +1120,14 @@ class ObjectRelationshipComponent {
|
|
|
1101
1120
|
* viewed but not added or removed.
|
|
1102
1121
|
*/
|
|
1103
1122
|
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1123
|
+
/**
|
|
1124
|
+
* Number of relations to load per request. Defaults to the search
|
|
1125
|
+
* service's default query size when not set.
|
|
1126
|
+
*/
|
|
1127
|
+
this.pageSize = input(undefined, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
1128
|
+
this.#pageSizeEffect = effect(() => {
|
|
1129
|
+
this.#objectRelationshipService.pageSize.set(this.pageSize());
|
|
1130
|
+
}, ...(ngDevMode ? [{ debugName: "#pageSizeEffect" }] : /* istanbul ignore next */ []));
|
|
1104
1131
|
// the DmsObject representing the originId
|
|
1105
1132
|
this.originObject = signal(null, ...(ngDevMode ? [{ debugName: "originObject" }] : /* istanbul ignore next */ []));
|
|
1106
1133
|
this.supportedRelationships = computed(() => {
|
|
@@ -1126,6 +1153,7 @@ class ObjectRelationshipComponent {
|
|
|
1126
1153
|
#system;
|
|
1127
1154
|
#dialog;
|
|
1128
1155
|
#objectIdEffect;
|
|
1156
|
+
#pageSizeEffect;
|
|
1129
1157
|
#relations;
|
|
1130
1158
|
#relationsEffect;
|
|
1131
1159
|
toggleMode() {
|
|
@@ -1142,7 +1170,7 @@ class ObjectRelationshipComponent {
|
|
|
1142
1170
|
});
|
|
1143
1171
|
}
|
|
1144
1172
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1145
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ObjectRelationshipComponent, isStandalone: true, selector: "yuv-object-relationship", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, objectId: { classPropertyName: "objectId", publicName: "objectId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, relationActions: { classPropertyName: "relationActions", publicName: "relationActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, providers: [ObjectRelationshipService], ngImport: i0, template: "<ymt-pane [plain]=\"true\" [topBarActions]=\"topBarActions\">\n <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n @if (empty()) {\n <div class=\"no-relations\" inert>\n <mat-icon>link_off</mat-icon>\n <p>{{ 'yuv.object-relationship.no-relations' | translate }}</p>\n </div>\n } @else {\n @switch (mode()) {\n @case ('graph') {\n <yuv-object-relationship-graph [config]=\"config()\" [readonly]=\"readonly()\"
|
|
1173
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ObjectRelationshipComponent, isStandalone: true, selector: "yuv-object-relationship", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, objectId: { classPropertyName: "objectId", publicName: "objectId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, relationActions: { classPropertyName: "relationActions", publicName: "relationActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, providers: [ObjectRelationshipService], ngImport: i0, template: "<ymt-pane [plain]=\"true\" [topBarActions]=\"topBarActions\">\n <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n @if (empty()) {\n <div class=\"no-relations\" inert>\n <mat-icon>link_off</mat-icon>\n <p>{{ 'yuv.object-relationship.no-relations' | translate }}</p>\n </div>\n } @else {\n @switch (mode()) {\n @case ('graph') {\n <yuv-object-relationship-graph [config]=\"config()\" [readonly]=\"readonly()\" />\n }\n @case ('list') {\n <yuv-object-relationship-list [config]=\"config()\" [readonly]=\"readonly()\" [pageSize]=\"pageSize()\" />\n }\n }\n }\n </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #topBarActions>\n @if (!readonly() && supportedRelationships().length > 0) {\n <button\n ymt-icon-button\n icon-button-size=\"small\"\n [matTooltip]=\"'yuv.object-relationship.add.tooltip' | translate\"\n (click)=\"addRelationship()\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n <button\n ymt-icon-button\n icon-button-size=\"small\"\n [matTooltip]=\"\n mode() === 'list'\n ? ('yuv.object-relationship.mode.graph.tooltip' | translate)\n : ('yuv.object-relationship.mode.list.tooltip' | translate)\n \"\n (click)=\"toggleMode()\"\n >\n <mat-icon>{{ mode() === 'list' ? 'graph_3' : 'list' }}</mat-icon>\n </button>\n</ng-template>\n", styles: [":host{display:block;position:relative;height:100%;background-color:var(--ymt-surface)}:host .toggle{position:absolute;inset-block-start:var(--ymt-spacing-s);inset-inline-end:var(--ymt-spacing-s);z-index:10;background-color:var(--ymt-surface);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-full)}:host yuv-object-relationship-list,:host yuv-object-relationship-graph{height:100%}:host .no-relations{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--ymt-spacing-l);gap:var(--ymt-spacing-m);overflow:hidden}:host .no-relations mat-icon{scale:4;color:var(--ymt-text-color-subtle);opacity:.5;transform:translateY(-.5em)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i3.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i3.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "component", type: ObjectRelationshipGraphComponent, selector: "yuv-object-relationship-graph", inputs: ["config", "readonly"], outputs: ["objectSelected", "relationSelected"] }, { kind: "component", type: ObjectRelationshipListComponent, selector: "yuv-object-relationship-list", inputs: ["config", "readonly", "pageSize"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
1146
1174
|
}
|
|
1147
1175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipComponent, decorators: [{
|
|
1148
1176
|
type: Component,
|
|
@@ -1157,8 +1185,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
|
|
|
1157
1185
|
ObjectRelationshipListComponent,
|
|
1158
1186
|
YmtIconButtonDirective,
|
|
1159
1187
|
BusyOverlayDirective
|
|
1160
|
-
], providers: [ObjectRelationshipService], template: "<ymt-pane [plain]=\"true\" [topBarActions]=\"topBarActions\">\n <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n @if (empty()) {\n <div class=\"no-relations\" inert>\n <mat-icon>link_off</mat-icon>\n <p>{{ 'yuv.object-relationship.no-relations' | translate }}</p>\n </div>\n } @else {\n @switch (mode()) {\n @case ('graph') {\n <yuv-object-relationship-graph [config]=\"config()\" [readonly]=\"readonly()\"
|
|
1161
|
-
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], objectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectId", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], relationActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "relationActions", required: false }] }] } });
|
|
1188
|
+
], providers: [ObjectRelationshipService], template: "<ymt-pane [plain]=\"true\" [topBarActions]=\"topBarActions\">\n <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n @if (empty()) {\n <div class=\"no-relations\" inert>\n <mat-icon>link_off</mat-icon>\n <p>{{ 'yuv.object-relationship.no-relations' | translate }}</p>\n </div>\n } @else {\n @switch (mode()) {\n @case ('graph') {\n <yuv-object-relationship-graph [config]=\"config()\" [readonly]=\"readonly()\" />\n }\n @case ('list') {\n <yuv-object-relationship-list [config]=\"config()\" [readonly]=\"readonly()\" [pageSize]=\"pageSize()\" />\n }\n }\n }\n </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #topBarActions>\n @if (!readonly() && supportedRelationships().length > 0) {\n <button\n ymt-icon-button\n icon-button-size=\"small\"\n [matTooltip]=\"'yuv.object-relationship.add.tooltip' | translate\"\n (click)=\"addRelationship()\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n <button\n ymt-icon-button\n icon-button-size=\"small\"\n [matTooltip]=\"\n mode() === 'list'\n ? ('yuv.object-relationship.mode.graph.tooltip' | translate)\n : ('yuv.object-relationship.mode.list.tooltip' | translate)\n \"\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"] }]
|
|
1189
|
+
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], objectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectId", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], relationActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "relationActions", required: false }] }] } });
|
|
1162
1190
|
|
|
1163
1191
|
const cmp = [ObjectRelationshipComponent];
|
|
1164
1192
|
class YuvObjectRelationshipModule {
|