@life-cockpit/angular-ui-kit 2.14.0 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@life-cockpit/angular-ui-kit",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "Life Cockpit Design System - Angular UI component library",
   "license": "MIT",
   "repository": {

package/types/life-cockpit-angular-ui-kit.d.ts

@@ -6535,6 +6535,7 @@ interface LayoutEdge {
  * - Color-coded edges per relationship type
  * - Node status colors (default, active, success, warning, error, muted)
  * - Pan and zoom controls with mouse wheel support
+ * - Auto-fit (`autoFit`) and a static, non-navigable mode (`interactive: false`)
  * - Collapsible sub-trees
  * - Interactive node selection with detail panel
  * - Legend showing active relationship types
@@ -6559,6 +6560,17 @@ interface LayoutEdge {
  * <lc-dependency-viewer [root]="specTree" direction="horizontal" />
  * ```
  *
+ * @example Static overview — the whole graph at a glance, click-through only
+ * ```html
+ * <lc-dependency-viewer
+ *   [root]="graph()"
+ *   [autoFit]="true"
+ *   [interactive]="false"
+ *   height="360px"
+ *   (nodeSelect)="openDetail($event)"
+ * />
+ * ```
+ *
  * @example Incremental graph exploration
  * ```html
  * <lc-dependency-viewer
@@ -6577,6 +6589,23 @@ declare class DependencyViewerComponent {
     readonly showToolbar: _angular_core.InputSignal<boolean>;
     readonly showEdgeLabels: _angular_core.InputSignal<boolean>;
     readonly edgeWidth: _angular_core.InputSignal<number>;
+    /**
+     * Scales and centres the graph so that all of it fits the canvas, and re-fits
+     * whenever the container or the graph changes size. Turns the viewer into an
+     * overview: nothing to pan or zoom to, everything visible at once.
+     *
+     * Shrinks only — the fit never enlarges past 100%, so a two-node graph keeps its
+     * natural size instead of ballooning to fill the frame.
+     *
+     * Pair with `interactive: false` for a purely static display.
+     */
+    readonly autoFit: _angular_core.InputSignal<boolean>;
+    /**
+     * Viewport navigation: drag-to-pan, wheel-zoom and the toolbar's zoom buttons.
+     * `false` freezes the viewport — node selection, expansion and collapse keep
+     * working, so `nodeSelect` still fires in a static viewer.
+     */
+    readonly interactive: _angular_core.InputSignal<boolean>;
     /**
      * Node the viewport holds still across `root` updates. Defaults to the node the
      * user last selected, which keeps click-to-expand steady without any wiring.
@@ -6602,6 +6631,7 @@ declare class DependencyViewerComponent {
     private lastMouseX;
     private lastMouseY;
     private readonly hostEl;
+    private readonly canvasRef;
     /** Last known layout position of the anchor, to compensate pan after a relayout. */
     private anchorPos;
     protected effectiveRoot: _angular_core.Signal<DependencyNode>;
@@ -6618,6 +6648,7 @@ declare class DependencyViewerComponent {
     protected svgHeight: _angular_core.Signal<number>;
     protected viewBox: _angular_core.Signal<string>;
     protected transform: _angular_core.Signal<string>;
+    protected zoomLabel: _angular_core.Signal<number>;
     protected selectedNode: _angular_core.Signal<LayoutNode | null>;
     protected selectedDependsOn: _angular_core.Signal<DependencyEdgeDef[]>;
     protected legendItems: _angular_core.Signal<{
@@ -6642,7 +6673,18 @@ declare class DependencyViewerComponent {
     protected resetZoom(): void;
     /** Centres the viewport on a node. No-op for an id that isn't laid out. */
     focusNode(id: string): void;
-    /** Restores the initial zoom and pan. */
+    /**
+     * Scales and centres the graph so all of it fits the canvas. Called for you when
+     * `autoFit` is set; public so a caller can fit on demand without it.
+     *
+     * No-op while the canvas has no size (before the first render, or in a detached
+     * / `display: none` container) — the `autoFit` observers re-run once it does.
+     */
+    fit(): void;
+    /**
+     * Restores the initial view — the fitted one under `autoFit`, otherwise the
+     * default zoom and pan.
+     */
     resetView(): void;
     /** Expands a collapsed node. */
     expand(id: string): void;
@@ -6652,6 +6694,15 @@ declare class DependencyViewerComponent {
     expandAll(): void;
     /** Collapses every node that has children. */
     collapseAll(): void;
+    private canvasEl;
+    /**
+     * Bounding box of everything drawn, in layout units.
+     *
+     * Edge label points stand in for the edges themselves. A parent→child edge stays
+     * inside the node boxes anyway, and a bowed cross-reference puts its label at the
+     * apex of the bow — the only part of it that reaches outside them.
+     */
+    private contentBox;
     protected onMouseDown(event: MouseEvent): void;
     protected onMouseMove(event: MouseEvent): void;
     protected onMouseUp(): void;
@@ -6660,7 +6711,7 @@ declare class DependencyViewerComponent {
     protected getNodeBorder(node: LayoutNode): string;
     protected getNodeText(node: LayoutNode): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DependencyViewerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DependencyViewerComponent, "lc-dependency-viewer", never, { "root": { "alias": "root"; "required": true; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showEdgeLabels": { "alias": "showEdgeLabels"; "required": false; "isSignal": true; }; "edgeWidth": { "alias": "edgeWidth"; "required": false; "isSignal": true; }; "anchorNodeId": { "alias": "anchorNodeId"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "hiddenRelations": { "alias": "hiddenRelations"; "required": false; "isSignal": true; }; "hiddenTypes": { "alias": "hiddenTypes"; "required": false; "isSignal": true; }; }, { "nodeSelect": "nodeSelect"; "nodeExpand": "nodeExpand"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DependencyViewerComponent, "lc-dependency-viewer", never, { "root": { "alias": "root"; "required": true; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showEdgeLabels": { "alias": "showEdgeLabels"; "required": false; "isSignal": true; }; "edgeWidth": { "alias": "edgeWidth"; "required": false; "isSignal": true; }; "autoFit": { "alias": "autoFit"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "anchorNodeId": { "alias": "anchorNodeId"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "hiddenRelations": { "alias": "hiddenRelations"; "required": false; "isSignal": true; }; "hiddenTypes": { "alias": "hiddenTypes"; "required": false; "isSignal": true; }; }, { "nodeSelect": "nodeSelect"; "nodeExpand": "nodeExpand"; }, never, never, true, never>;
 }
 
 /**