@yuuvis/client-framework 3.15.0 → 3.17.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/fesm2022/yuuvis-client-framework-actions.mjs +21 -25
- package/fesm2022/yuuvis-client-framework-actions.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-app-bar.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-badges.mjs +20 -13
- package/fesm2022/yuuvis-client-framework-badges.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-breadcrumb.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-clipboard.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-datepicker.mjs +31 -31
- package/fesm2022/yuuvis-client-framework-forms.mjs +286 -178
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-icons.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs +18 -18
- package/fesm2022/yuuvis-client-framework-object-details.mjs +28 -28
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +18 -18
- package/fesm2022/yuuvis-client-framework-object-form.mjs +34 -34
- package/fesm2022/yuuvis-client-framework-object-preview.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs +73 -45
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-summary.mjs +13 -13
- package/fesm2022/yuuvis-client-framework-object-versions.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-pagination.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-query-list.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-renderer.mjs +101 -74
- package/fesm2022/yuuvis-client-framework-renderer.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs +4 -4
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-simple-search.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-smart-search.mjs +13 -13
- package/fesm2022/yuuvis-client-framework-sort.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +97 -61
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-token-search.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-tree.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-upload-progress.mjs +10 -10
- package/fesm2022/yuuvis-client-framework.mjs +25 -25
- package/lib/assets/i18n/de.json +10 -8
- package/lib/assets/i18n/en.json +10 -8
- package/package.json +10 -10
- 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 -1
|
@@ -176,16 +176,16 @@ class RelationshipTargetSearchComponent {
|
|
|
176
176
|
this.acFormControl.enable();
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
180
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
179
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RelationshipTargetSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
180
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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: [
|
|
181
181
|
{
|
|
182
182
|
provide: NG_VALUE_ACCESSOR,
|
|
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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
188
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RelationshipTargetSearchComponent, decorators: [{
|
|
189
189
|
type: Component,
|
|
190
190
|
args: [{ selector: 'yuv-relationship-target-search', imports: [
|
|
191
191
|
YuvAutocompleteModule,
|
|
@@ -315,10 +315,10 @@ class AddRelationshipComponent {
|
|
|
315
315
|
close() {
|
|
316
316
|
this.#dialogRef.close();
|
|
317
317
|
}
|
|
318
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
319
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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 id=\"addRelationshipForm\" [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>{{ 'yuv.object-relationship.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 />\n </section>\n\n <section class=\"error\">\n @if (form.hasError('invalidRelationTargetCombination') && (form.touched || form.dirty)) {\n <mat-error class=\"error\">\n {{ 'yuv.object-relationship.add-relationship.error.invalidRelationTargetCombination' | translate }}\n </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\" form=\"addRelationshipForm\" [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;min-width:0;overflow-wrap:anywhere}:host main form .source .source-node .description{grid-area:description;min-width:0;overflow-wrap:anywhere;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: 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],[formArray],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: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i4.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: i4$1.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "externalSelectionVisuals", "selfHandleClick", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i4$1.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AddRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
319
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 id=\"addRelationshipForm\" [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>{{ 'yuv.object-relationship.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 />\n </section>\n\n <section class=\"error\">\n @if (form.hasError('invalidRelationTargetCombination') && (form.touched || form.dirty)) {\n <mat-error class=\"error\">\n {{ 'yuv.object-relationship.add-relationship.error.invalidRelationTargetCombination' | translate }}\n </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\" form=\"addRelationshipForm\" [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;min-width:0;overflow-wrap:anywhere}:host main form .source .source-node .description{grid-area:description;min-width:0;overflow-wrap:anywhere;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: 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],[formArray],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: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i4.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: i4$1.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "externalSelectionVisuals", "selfHandleClick", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i4$1.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
320
320
|
}
|
|
321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AddRelationshipComponent, decorators: [{
|
|
322
322
|
type: Component,
|
|
323
323
|
args: [{ selector: 'yuv-add-relationship', imports: [
|
|
324
324
|
ReactiveFormsModule,
|
|
@@ -389,10 +389,10 @@ class NodeSummaryComponent {
|
|
|
389
389
|
}
|
|
390
390
|
};
|
|
391
391
|
}
|
|
392
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
393
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
392
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: NodeSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
393
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
394
394
|
}
|
|
395
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: NodeSummaryComponent, decorators: [{
|
|
396
396
|
type: Component,
|
|
397
397
|
args: [{ selector: 'yuv-node-summary', imports: [CommonModule, RendererDirective, TranslatePipe, YmtButtonDirective], template: "@let ns = nodeSummary();\n@if (ns) {\n <header>\n <h2>{{ ns?.title }}</h2>\n <p class=\"desc\">{{ ns?.description }}</p>\n </header>\n <main>\n <div class=\"properties\">\n @for (p of ns?.properties; track $index) {\n <div class=\"row\">\n <div class=\"label\">{{ p.label }}</div>\n <div class=\"value\">\n <ng-container *yuvRenderer=\"p.rendererInput\"></ng-container>\n </div>\n </div>\n }\n </div>\n </main>\n <footer>\n <div class=\"actions\">\n <ng-container *ngTemplateOutlet=\"actions()\"></ng-container>\n </div>\n\n @if (ns.link) {\n <button ymtButton=\"primary\" (click)=\"openObject(ns.link)\">\n {{ 'yuv.object-relationship.node-summary.open-object.button' | translate }}\n </button>\n }\n </footer>\n}\n", styles: [":host{display:flex;flex-direction:column}:host header{flex:0 0 auto}:host header h2{margin-block-end:0}:host header .desc{margin:0;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main{flex:1;overflow-y:auto}:host footer{flex:0 0 auto;align-items:center;display:flex}:host footer .actions{flex:1;display:flex;align-items:center}:host .properties{container:section/inline-size;margin-block-start:var(--ymt-spacing-xl);display:flex;flex-direction:column}:host .properties .row{display:flex;flex-flow:column}:host .properties .row .label{font:var(--ymt-font-body-subtle);flex:0 1 33%;font-weight:700;padding-inline-end:var(--ymt-spacing-m);margin-block-end:var(--ymt-spacing-3xs);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .properties .row .value{flex:1;word-break:break-all;font:var(--ymt-font-body-subtle);margin-block-end:var(--ymt-spacing-xs)}@container section (min-width: 300px){:host .properties .row{flex-flow:row}}\n"] }]
|
|
398
398
|
}], propDecorators: { object: [{ type: i0.Input, args: [{ isSignal: true, alias: "object", required: false }] }], nodeConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeConfig", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }] } });
|
|
@@ -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
|
}
|
|
@@ -490,10 +500,10 @@ class ObjectRelationshipService {
|
|
|
490
500
|
}
|
|
491
501
|
}));
|
|
492
502
|
}
|
|
493
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
494
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
503
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
504
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipService }); }
|
|
495
505
|
}
|
|
496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
506
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipService, decorators: [{
|
|
497
507
|
type: Injectable
|
|
498
508
|
}], ctorParameters: () => [] });
|
|
499
509
|
|
|
@@ -928,10 +938,10 @@ class ObjectRelationshipGraphComponent {
|
|
|
928
938
|
this.selectedObject.set(params.nodes.length === 1 ? this.#objectQA[params.nodes[0]] : null);
|
|
929
939
|
this.selectedRelation.set(params.edges.length === 1 && params.nodes.length === 0 ? this.#relationQA[params.edges[0]] : null);
|
|
930
940
|
}
|
|
931
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
932
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
941
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
942
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ObjectRelationshipGraphComponent, isStandalone: true, selector: "yuv-object-relationship-graph", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, 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 (!readonly() && selectedRelation()) {\n <button\n ymtIconButton\n (click)=\"deleteRelationship()\"\n [matTooltip]=\"'yuv.object-relationship.delete-relation.tooltip' | translate\"\n >\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\" />\n </div>\n }\n</div>\n\n<ng-template #additionalSummaryActions>\n @if (!readonly()) {\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 }\n <button\n ymt-icon-button\n icon-button-size=\"small\"\n [matTooltip]=\"'yuv.object-relationship.selected.expand.tooltip' | translate\"\n (click)=\"expandSelected()\"\n >\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);-webkit-backdrop-filter:blur(2px);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: "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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
933
943
|
}
|
|
934
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
944
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipGraphComponent, decorators: [{
|
|
935
945
|
type: Component,
|
|
936
946
|
args: [{ selector: 'yuv-object-relationship-graph', imports: [
|
|
937
947
|
NodeSummaryComponent,
|
|
@@ -970,10 +980,10 @@ class ObjectRelationshipListItemComponent {
|
|
|
970
980
|
if (link && !skip)
|
|
971
981
|
await this.#router.navigateByUrl(link);
|
|
972
982
|
}
|
|
973
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
974
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
983
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
984
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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@if (!readonly()) {\n <div class=\"actions\">\n <button ymtIconButton icon-button-size=\"small\" (click)=\"deleteRelationship()\"><mat-icon>delete</mat-icon></button>\n </div>\n}\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: 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"] }] }); }
|
|
975
985
|
}
|
|
976
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
986
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipListItemComponent, decorators: [{
|
|
977
987
|
type: Component,
|
|
978
988
|
args: [{ selector: 'yuv-object-relationship-list-item', imports: [MatIconModule, YmtIconButtonDirective], template: "@let lnk = link();\n\n<button\n class=\"node source\"\n (click)=\"open(lnk.source.objectLink, !enableSourceLink())\"\n [attr.aria-readonly]=\"!enableSourceLink() || !lnk.source.objectLink\"\n [class.self]=\"direction() === 'out'\"\n>\n @if (lnk.source.icon) {\n <mat-icon>{{ lnk.source.icon }}</mat-icon>\n }\n <span class=\"title\">{{ lnk.source.label }}</span>\n <span class=\"description\">{{ lnk.source.description }}</span>\n</button>\n\n<div class=\"line\" [class.arr]=\"direction() === 'in'\"></div>\n<div class=\"relation\">{{ lnk.type.label }}</div>\n<div class=\"line\" [class.arr]=\"direction() === 'out'\"></div>\n\n<button\n class=\"node target\"\n (click)=\"open(lnk.target.objectLink, !enableTargetLink())\"\n [attr.aria-readonly]=\"!enableTargetLink() || !lnk.target.objectLink\"\n [class.self]=\"direction() === 'in'\"\n>\n @if (lnk.target.icon) {\n <mat-icon>{{ lnk.target.icon }}</mat-icon>\n }\n <span class=\"title\">{{ lnk.target.label }}</span>\n <span class=\"description\">{{ lnk.target.description }}</span>\n</button>\n\n@if (!readonly()) {\n <div class=\"actions\">\n <button ymtIconButton icon-button-size=\"small\" (click)=\"deleteRelationship()\"><mat-icon>delete</mat-icon></button>\n </div>\n}\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"] }]
|
|
979
989
|
}], propDecorators: { link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: true }] }], enableSourceLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSourceLink", required: false }] }], enableTargetLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTargetLink", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
@@ -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;
|
|
@@ -1063,13 +1082,13 @@ class ObjectRelationshipListComponent {
|
|
|
1063
1082
|
return undefined;
|
|
1064
1083
|
return cfg.nodes.find((nodes) => object.data[BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS].includes(nodes.objectType));
|
|
1065
1084
|
}
|
|
1066
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1067
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1085
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
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() {
|
|
@@ -1141,10 +1169,10 @@ class ObjectRelationshipComponent {
|
|
|
1141
1169
|
}
|
|
1142
1170
|
});
|
|
1143
1171
|
}
|
|
1144
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1145
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ObjectRelationshipComponent, decorators: [{
|
|
1148
1176
|
type: Component,
|
|
1149
1177
|
args: [{ selector: 'yuv-object-relationship', imports: [
|
|
1150
1178
|
MatIconModule,
|
|
@@ -1157,16 +1185,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", 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 {
|
|
1165
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1166
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
1167
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
1193
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: YuvObjectRelationshipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1194
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.20", ngImport: i0, type: YuvObjectRelationshipModule, imports: [ObjectRelationshipComponent], exports: [ObjectRelationshipComponent] }); }
|
|
1195
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: YuvObjectRelationshipModule, imports: [cmp] }); }
|
|
1168
1196
|
}
|
|
1169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: YuvObjectRelationshipModule, decorators: [{
|
|
1170
1198
|
type: NgModule,
|
|
1171
1199
|
args: [{
|
|
1172
1200
|
imports: [...cmp],
|