@yuuvis/client-framework 2.18.0 → 2.20.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, effect, computed, signal, forwardRef, Component, Injectable, viewChild, output, NgModule } from '@angular/core';
+import { inject, input, effect, computed, signal, forwardRef, Component, Injectable, viewChild, output, model, NgModule } from '@angular/core';
 import * as i1$3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -994,8 +994,10 @@ class ObjectRelationshipComponent {
         this.#objectRelationshipService = inject(ObjectRelationshipService);
         this.#system = inject(SystemService);
         this.#dialog = inject(MatDialog);
-        this.#DEFAULT_MODE = 'graph';
-        this.mode = signal(this.#DEFAULT_MODE);
+        /**
+         * Display mode for the relationship view.
+         */
+        this.mode = model('graph');
         this.empty = computed(() => {
             const rel = this.#relations();
             return rel && rel.relations.totalNumItems === 0;
@@ -1036,7 +1038,6 @@ class ObjectRelationshipComponent {
     #objectRelationshipService;
     #system;
     #dialog;
-    #DEFAULT_MODE;
     #objectIdEffect;
     #relations;
     #relationsEffect;
@@ -1054,7 +1055,7 @@ class ObjectRelationshipComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ObjectRelationshipComponent, isStandalone: true, selector: "yuv-object-relationship", inputs: { objectId: { classPropertyName: "objectId", publicName: "objectId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, relationActions: { classPropertyName: "relationActions", publicName: "relationActions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ObjectRelationshipService], ngImport: i0, template: "<ymt-pane [plain]=\"true\" [topBarActions]=\"topBarActions\">\n  <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n    @if (empty()) {\n      <div class=\"no-relations\" inert>\n        <mat-icon>link_off</mat-icon>\n        <p>{{ 'yuv.object-relationship.no-relations' | translate }}</p>\n      </div>\n    } @else {\n      @switch (mode()) {\n        @case ('graph') {\n          <yuv-object-relationship-graph [config]=\"config()\"></yuv-object-relationship-graph>\n        }\n        @case ('list') {\n          <yuv-object-relationship-list [config]=\"config()\"> </yuv-object-relationship-list>\n        }\n      }\n    }\n  </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #topBarActions>\n  @if (supportedRelationships().length > 0) {\n    <button ymt-icon-button icon-button-size=\"small\" [matTooltip]=\"'yuv.object-relationship.add.tooltip' | translate\" (click)=\"addRelationship()\">\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"mode() === 'list' ? ('yuv.object-relationship.mode.graph.tooltip' | translate) : ('yuv.object-relationship.mode.list.tooltip' | translate)\"\n    (click)=\"toggleMode()\"\n  >\n    <mat-icon>{{ mode() === 'list' ? 'graph_3' : 'list' }}</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host{display:block;position:relative;height:100%;background-color:var(--ymt-surface)}:host .toggle{position:absolute;inset-block-start:var(--ymt-spacing-s);inset-inline-end:var(--ymt-spacing-s);z-index:10;background-color:var(--ymt-surface);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-full)}:host yuv-object-relationship-list,:host yuv-object-relationship-graph{height:100%}:host .no-relations{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--ymt-spacing-l);gap:var(--ymt-spacing-m);overflow:hidden}:host .no-relations mat-icon{scale:4;color:var(--ymt-text-color-subtle);opacity:.5;transform:translateY(-.5em)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i4.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i4.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "component", type: ObjectRelationshipGraphComponent, selector: "yuv-object-relationship-graph", inputs: ["config"], outputs: ["objectSelected", "relationSelected"] }, { kind: "component", type: ObjectRelationshipListComponent, selector: "yuv-object-relationship-list", inputs: ["config"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 }, 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()\"></yuv-object-relationship-graph>\n        }\n        @case ('list') {\n          <yuv-object-relationship-list [config]=\"config()\"> </yuv-object-relationship-list>\n        }\n      }\n    }\n  </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #topBarActions>\n  @if (supportedRelationships().length > 0) {\n    <button ymt-icon-button icon-button-size=\"small\" [matTooltip]=\"'yuv.object-relationship.add.tooltip' | translate\" (click)=\"addRelationship()\">\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <button\n    ymt-icon-button\n    icon-button-size=\"small\"\n    [matTooltip]=\"mode() === 'list' ? ('yuv.object-relationship.mode.graph.tooltip' | translate) : ('yuv.object-relationship.mode.list.tooltip' | translate)\"\n    (click)=\"toggleMode()\"\n  >\n    <mat-icon>{{ mode() === 'list' ? 'graph_3' : 'list' }}</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host{display:block;position:relative;height:100%;background-color:var(--ymt-surface)}:host .toggle{position:absolute;inset-block-start:var(--ymt-spacing-s);inset-inline-end:var(--ymt-spacing-s);z-index:10;background-color:var(--ymt-surface);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-full)}:host yuv-object-relationship-list,:host yuv-object-relationship-graph{height:100%}:host .no-relations{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--ymt-spacing-l);gap:var(--ymt-spacing-m);overflow:hidden}:host .no-relations mat-icon{scale:4;color:var(--ymt-text-color-subtle);opacity:.5;transform:translateY(-.5em)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i4.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i4.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "component", type: ObjectRelationshipGraphComponent, selector: "yuv-object-relationship-graph", inputs: ["config"], outputs: ["objectSelected", "relationSelected"] }, { kind: "component", type: ObjectRelationshipListComponent, selector: "yuv-object-relationship-list", inputs: ["config"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ObjectRelationshipComponent, decorators: [{
             type: Component,