ngwr 14.4.0 → 14.5.0

package/fesm2022/ngwr-graph.mjs

@@ -0,0 +1,1112 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, contentChild, LOCALE_ID, computed, isDevMode, effect, ViewEncapsulation, Component } from '@angular/core';
+import { useI18nText, useI18nFormatter, WrI18n } from 'ngwr/i18n';
+import { numAttr } from 'ngwr/utils';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Replace the default card. The node is the implicit context; its box — the
+ * size the layout reserved, its position and the relation text read to a screen
+ * reader — stays with the graph, so a template cannot break the geometry.
+ *
+ * Render `node.label` somewhere in it: the relation text of every neighbour
+ * names this node by its label.
+ *
+ * @example
+ * ```html
+ * <wr-graph [nodes]="nodes" [edges]="edges">
+ *   <ng-template wrGraphNode let-node>
+ *     <strong>{{ node.label }}</strong> {{ node.data.role }}
+ *   </ng-template>
+ * </wr-graph>
+ * ```
+ */
+class WrGraphNodeTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrGraphNodeTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: WrGraphNodeTemplate, isStandalone: true, selector: "ng-template[wrGraphNode]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrGraphNodeTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[wrGraphNode]',
+                }]
+        }] });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Gansner's cap. Counted in sweeps, never in time, so a slow machine draws the same picture. */
+const MAX_SWEEPS = 24;
+const MAX_STALE_SWEEPS = 4;
+/**
+ * Depth-first from every item in rank order, placing each item as it is first
+ * reached. A tree comes out with no crossings before a single sweep runs, and
+ * the sweeps only ever keep a strictly better order, so a tree stays that way.
+ */
+function initialOrder(graph) {
+    const layers = Array.from({ length: graph.rankCount }, () => []);
+    const byRank = Array.from({ length: graph.rankCount }, () => []);
+    graph.rank.forEach((rank, item) => byRank[rank].push(item));
+    const visited = graph.rank.map(() => false);
+    for (const bucket of byRank) {
+        for (const start of bucket) {
+            const stack = [start];
+            for (let item = stack.pop(); item !== undefined; item = stack.pop()) {
+                if (visited[item])
+                    continue;
+                visited[item] = true;
+                layers[graph.rank[item]].push(item);
+                // Pushed in reverse so the first child is visited first, as a recursive DFS would.
+                const below = graph.down[item];
+                for (let i = below.length - 1; i >= 0; i--)
+                    if (!visited[below[i]])
+                        stack.push(below[i]);
+            }
+        }
+    }
+    return layers;
+}
+/**
+ * Re-sorts one layer by the barycenter of each item's neighbours on the
+ * reference layer. Items with no such neighbour are lifted out BEFORE the sort
+ * and keep their slot: a comparator asked to rank "no barycenter" against a
+ * number has no consistent answer, and an inconsistent comparator sorts
+ * differently in different engines.
+ *
+ * Barycenters are compared exactly. They are means of integer slot indices, so
+ * `sumA / countA < sumB / countB` becomes `sumA * countB < sumB * countA`, which
+ * stays in exact integer arithmetic at any size this component draws. Ties fall
+ * back to the current slot, so the comparator is total.
+ */
+function reorder(layer, neighbours, slotOf) {
+    const candidates = [];
+    layer.forEach((item, slot) => {
+        const adjacent = neighbours[item];
+        if (adjacent.length === 0)
+            return;
+        let sum = 0;
+        for (const other of adjacent)
+            sum += slotOf[other];
+        candidates.push({ item, sum, count: adjacent.length, slot });
+    });
+    const slots = candidates.map(candidate => candidate.slot);
+    candidates.sort((a, b) => a.sum * b.count - b.sum * a.count || a.slot - b.slot);
+    candidates.forEach((candidate, k) => {
+        layer[slots[k]] = candidate.item;
+        slotOf[candidate.item] = slots[k];
+    });
+}
+/**
+ * Crossings between adjacent layers, counted pairwise. Quadratic in the
+ * segments between one pair of layers, which at the few hundred edges this
+ * component is meant for is cheaper to trust than an accumulator tree.
+ * Two segments sharing an end never count: their product is zero.
+ */
+function countCrossings(layers, down) {
+    const slotOf = down.map(() => 0);
+    for (const layer of layers)
+        layer.forEach((item, slot) => (slotOf[item] = slot));
+    let crossings = 0;
+    for (let r = 0; r + 1 < layers.length; r++) {
+        const top = [];
+        const bottom = [];
+        for (const item of layers[r]) {
+            for (const next of down[item]) {
+                top.push(slotOf[item]);
+                bottom.push(slotOf[next]);
+            }
+        }
+        for (let i = 0; i < top.length; i++) {
+            for (let j = i + 1; j < top.length; j++) {
+                if ((top[i] - top[j]) * (bottom[i] - bottom[j]) < 0)
+                    crossings++;
+            }
+        }
+    }
+    return crossings;
+}
+/**
+ * Stage 5. Alternating down and up barycenter sweeps, keeping the best order
+ * seen. "Best" moves only on a strict improvement, so an equally good later
+ * order never displaces an earlier one.
+ */
+function orderLayers(graph) {
+    const layers = initialOrder(graph);
+    const slotOf = graph.rank.map(() => 0);
+    for (const layer of layers)
+        layer.forEach((item, slot) => (slotOf[item] = slot));
+    let best = layers.map(layer => layer.slice());
+    let fewest = countCrossings(layers, graph.down);
+    for (let sweep = 0, stale = 0; sweep < MAX_SWEEPS && stale < MAX_STALE_SWEEPS && fewest > 0; sweep++) {
+        if (sweep % 2 === 0) {
+            for (let r = 1; r < layers.length; r++)
+                reorder(layers[r], graph.up, slotOf);
+        }
+        else {
+            for (let r = layers.length - 2; r >= 0; r--)
+                reorder(layers[r], graph.down, slotOf);
+        }
+        const crossings = countCrossings(layers, graph.down);
+        if (crossings < fewest) {
+            fewest = crossings;
+            best = layers.map(layer => layer.slice());
+            stale = 0;
+        }
+        else {
+            stale++;
+        }
+    }
+    return best;
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Four down passes and four up passes, alternating, ending on up so parents settle over their children. */
+const COORDINATE_PASSES = 8;
+function separation(extents, a, b) {
+    return extents.right[a] + extents.halfGap[a] + extents.halfGap[b] + extents.left[b];
+}
+/**
+ * Moves one layer toward the mean x of each item's neighbours on the reference
+ * layer, without reordering it and without letting two items come closer than
+ * their separation.
+ *
+ * Why the result never overlaps: F is built left to right as
+ * `F[i] = max(desired[i], F[i-1] + sep[i])`, so `F[i] - F[i-1] >= sep[i]`; B is
+ * built right to left as `B[i] = min(desired[i], B[i+1] - sep[i+1])`, so
+ * `B[i+1] - B[i] >= sep[i+1]`. Both are feasible on their own, and the average
+ * of two feasible placements is feasible, because
+ * `(F[i] + B[i]) / 2 - (F[i-1] + B[i-1]) / 2` is half of a sum of two terms that
+ * are each at least `sep[i]`. That holds whatever the desired positions are,
+ * which is why no pass needs to repair a previous one. Averaging the two is also
+ * what keeps a crowded layer centred on what it wants instead of piled to one
+ * side.
+ */
+function align(layer, neighbours, x, extents) {
+    const desired = layer.map(item => {
+        const adjacent = neighbours[item];
+        if (adjacent.length === 0)
+            return x[item];
+        let sum = 0;
+        for (const other of adjacent)
+            sum += x[other];
+        return sum / adjacent.length;
+    });
+    const forward = desired.slice();
+    for (let i = 1; i < layer.length; i++) {
+        forward[i] = Math.max(desired[i], forward[i - 1] + separation(extents, layer[i - 1], layer[i]));
+    }
+    const backward = desired.slice();
+    for (let i = layer.length - 2; i >= 0; i--) {
+        backward[i] = Math.min(desired[i], backward[i + 1] - separation(extents, layer[i], layer[i + 1]));
+    }
+    layer.forEach((item, i) => (x[item] = (forward[i] + backward[i]) / 2));
+}
+/** Stage 6, horizontal: the anchor x of every item, starting packed and relaxing toward neighbours. */
+function placeItems(layers, graph, extents) {
+    const x = graph.rank.map(() => 0);
+    for (const layer of layers) {
+        layer.forEach((item, i) => {
+            x[item] = i === 0 ? extents.left[item] : x[layer[i - 1]] + separation(extents, layer[i - 1], item);
+        });
+    }
+    for (let pass = 0; pass < COORDINATE_PASSES; pass++) {
+        if (pass % 2 === 0) {
+            for (let r = 1; r < layers.length; r++)
+                align(layers[r], graph.up, x, extents);
+        }
+        else {
+            for (let r = layers.length - 2; r >= 0; r--)
+                align(layers[r], graph.down, x, extents);
+        }
+    }
+    return x;
+}
+/**
+ * Stage 6, vertical: a layer is as tall as its tallest node, layers are
+ * `layerGap` apart, and every item is centred in its layer — so a short node
+ * beside a tall one still lines up with it. The layer's band is
+ * `centre ± half`, written the way a node's border is (`centre ± height / 2`),
+ * so the tallest node's border and the band's edge are the same number.
+ */
+function layerCentres(layers, extents, layerGap) {
+    const centre = [];
+    const half = [];
+    let top = 0;
+    layers.forEach((layer, r) => {
+        let tallest = 0;
+        for (const item of layer)
+            tallest = Math.max(tallest, extents.height[item]);
+        if (r > 0)
+            top += layerGap;
+        half.push(tallest / 2);
+        centre.push(top + tallest / 2);
+        top += tallest;
+    });
+    return { centre, half, height: top };
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Stage 1. Ids become integer indices in input order and everything after this
+ * works on arrays: a plain object keyed by id would enumerate `'2'` before
+ * `'10'` whatever order the consumer gave, which is exactly the trap that makes
+ * one graph draw two ways.
+ *
+ * A duplicate id keeps its first occurrence and an edge naming a missing node is
+ * dropped. Both are the component's to warn about; the layout only has to
+ * survive them.
+ */
+function prepareGraph(input) {
+    const index = new Map();
+    const nodes = [];
+    for (const node of input.nodes) {
+        if (index.has(node.id))
+            continue;
+        index.set(node.id, nodes.length);
+        nodes.push(node);
+    }
+    const edges = [];
+    const ends = [];
+    for (const edge of input.edges) {
+        const from = index.get(edge.from);
+        const to = index.get(edge.to);
+        if (from === undefined || to === undefined)
+            continue;
+        edges.push(edge);
+        ends.push([from, to]);
+    }
+    // Weakly connected components by BFS, started from each unassigned node in
+    // input order — so component numbers already follow the smallest index.
+    const neighbours = nodes.map(() => []);
+    for (const [from, to] of ends) {
+        neighbours[from].push(to);
+        neighbours[to].push(from);
+    }
+    const componentOf = nodes.map(() => -1);
+    const components = [];
+    for (let start = 0; start < nodes.length; start++) {
+        if (componentOf[start] !== -1)
+            continue;
+        componentOf[start] = components.length;
+        const queue = [start];
+        // `for...of` over an array that grows while it is read visits the appended nodes too.
+        for (const current of queue) {
+            for (const next of neighbours[current]) {
+                if (componentOf[next] !== -1)
+                    continue;
+                componentOf[next] = components.length;
+                queue.push(next);
+            }
+        }
+        components.push({ nodes: [], edges: [], loops: [] });
+    }
+    const local = [];
+    nodes.forEach((_, node) => {
+        const component = components[componentOf[node]];
+        local.push(component.nodes.length);
+        component.nodes.push(node);
+    });
+    ends.forEach(([from, to], slot) => {
+        const component = components[componentOf[from]];
+        const edge = { slot, from: local[from], to: local[to] };
+        (from === to ? component.loops : component.edges).push(edge);
+    });
+    return { nodes, edges, components };
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Stage 2. Depth-first search from the sources in input order, then from
+ * whatever is left; an edge into the current stack closes a cycle and is
+ * reversed. A back edge points at an ancestor on the current path, so both of
+ * its ends are in one strongly connected component by construction — no SCC
+ * pass is needed here. The stack is explicit because a long chain would
+ * otherwise recurse once per node.
+ */
+function findBackEdges(count, edges) {
+    const out = Array.from({ length: count }, () => []);
+    const indegree = new Array(count).fill(0);
+    edges.forEach((edge, k) => {
+        out[edge.from].push(k);
+        indegree[edge.to]++;
+    });
+    const reversed = edges.map(() => false);
+    const visited = new Array(count).fill(false);
+    const onStack = new Array(count).fill(false);
+    const nodes = Array.from({ length: count }, (_, node) => node);
+    const starts = [...nodes.filter(node => indegree[node] === 0), ...nodes.filter(node => indegree[node] !== 0)];
+    for (const start of starts) {
+        if (visited[start])
+            continue;
+        visited[start] = onStack[start] = true;
+        const stack = [{ node: start, next: 0 }];
+        while (stack.length > 0) {
+            const frame = stack[stack.length - 1];
+            if (frame.next === out[frame.node].length) {
+                onStack[frame.node] = false;
+                stack.pop();
+                continue;
+            }
+            const k = out[frame.node][frame.next++];
+            const to = edges[k].to;
+            if (onStack[to]) {
+                reversed[k] = true;
+            }
+            else if (!visited[to]) {
+                visited[to] = onStack[to] = true;
+                stack.push({ node: to, next: 0 });
+            }
+        }
+    }
+    return reversed;
+}
+/**
+ * Stage 3. Longest path from the sources: a node sits one rank below its
+ * deepest parent, so an org chart keeps a leaf directly under its manager
+ * rather than sinking every leaf to the bottom rank the way a sink-based
+ * longest path does. Network simplex would be more compact and is several
+ * times the code; this is the simplest ranking that reads well.
+ *
+ * The one tightening pass fixes the cost this ranking is known for: a root
+ * whose only child is deep would otherwise sit on rank 0 and draw a long edge
+ * through every rank in between. Only a node with no incoming edge moves, and it
+ * moves to just above its highest child — so no other node's rank changes and
+ * every rank stays occupied.
+ */
+function assignRanks(count, from, to) {
+    const out = Array.from({ length: count }, () => []);
+    const indegree = new Array(count).fill(0);
+    from.forEach((node, k) => {
+        out[node].push(to[k]);
+        indegree[to[k]]++;
+    });
+    // Kahn's algorithm with a FIFO queue seeded in input order.
+    const rank = new Array(count).fill(0);
+    const remaining = indegree.slice();
+    const order = [];
+    for (let node = 0; node < count; node++)
+        if (indegree[node] === 0)
+            order.push(node);
+    // `for...of` over an array that grows while it is read visits the appended nodes too.
+    for (const node of order) {
+        for (const child of out[node]) {
+            rank[child] = Math.max(rank[child], rank[node] + 1);
+            if (--remaining[child] === 0)
+                order.push(child);
+        }
+    }
+    for (let i = order.length - 1; i >= 0; i--) {
+        const node = order[i];
+        if (indegree[node] !== 0 || out[node].length === 0)
+            continue;
+        let highest = rank[out[node][0]];
+        for (const child of out[node])
+            highest = Math.min(highest, rank[child]);
+        if (highest - 1 > rank[node])
+            rank[node] = highest - 1;
+    }
+    let lowest = rank[0];
+    for (const value of rank)
+        lowest = Math.min(lowest, value);
+    return rank.map(value => value - lowest);
+}
+/**
+ * Stages 2–4 for one connected component: break cycles, rank, and give every
+ * edge that spans k ranks its own chain of k − 1 zero-size dummies, so parallel
+ * long edges stay apart instead of sharing one.
+ */
+function layerGraph(count, edges) {
+    const reversed = findBackEdges(count, edges);
+    const upper = edges.map((edge, k) => (reversed[k] ? edge.to : edge.from));
+    const lower = edges.map((edge, k) => (reversed[k] ? edge.from : edge.to));
+    const rank = assignRanks(count, upper, lower);
+    const up = Array.from({ length: count }, () => []);
+    const down = Array.from({ length: count }, () => []);
+    const layered = edges.map((edge, k) => {
+        const chain = [upper[k]];
+        for (let r = rank[upper[k]] + 1; r < rank[lower[k]]; r++) {
+            chain.push(rank.length);
+            rank.push(r);
+            up.push([]);
+            down.push([]);
+        }
+        chain.push(lower[k]);
+        for (let i = 1; i < chain.length; i++) {
+            down[chain[i - 1]].push(chain[i]);
+            up[chain[i]].push(chain[i - 1]);
+        }
+        return { slot: edge.slot, reversed: reversed[k], chain };
+    });
+    let rankCount = 0;
+    for (const value of rank)
+        rankCount = Math.max(rankCount, value + 1);
+    return { rank, rankCount, up, down, edges: layered };
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Room between a node's right border and the ends of its self-loops, where the arrowhead lands. */
+const LOOP_CLEARANCE = 4;
+/**
+ * Spreads k ports along one side of each node, ordered by where each edge
+ * heads next so that ports on one side never cross each other; ties go to the
+ * earlier edge. Without the spread, parallel edges between adjacent layers
+ * would draw as one line. The inset shrinks to a quarter of the width on a
+ * narrow node, so any node wider than zero keeps half its side for the spread
+ * instead of stacking every port on its centre.
+ */
+function assignPorts(sides, geometry, portGap, inset, into) {
+    sides.forEach((ports, node) => {
+        const sorted = ports.slice().sort((a, b) => {
+            const ax = geometry.x[a.toward];
+            const bx = geometry.x[b.toward];
+            return ax < bx ? -1 : ax > bx ? 1 : a.edge - b.edge;
+        });
+        const room = geometry.width[node] - 2 * Math.min(inset, geometry.width[node] / 4);
+        const spread = Math.max(0, Math.min(room, (sorted.length - 1) * portGap));
+        const step = sorted.length > 1 ? spread / (sorted.length - 1) : 0;
+        sorted.forEach((port, j) => (into[port.edge] = geometry.x[node] - spread / 2 + j * step));
+    });
+}
+/** How far right a node's layout box grows to hold its self-loops. */
+function loopReserve(loops, step) {
+    return loops === 0 ? 0 : LOOP_CLEARANCE + loops * step;
+}
+/**
+ * Stage 8. Out of the bottom side, through each dummy, into the top side — as
+ * vertical stretches inside the layer bands joined by exactly one stretch per
+ * inter-layer gap: straight down from the port to the bottom of its node's band,
+ * straight through every intermediate band at the dummy's x (a point on the
+ * band's top and one on its bottom), and straight down from the top of the
+ * child's band to its port.
+ *
+ * Why bands and not a bend at each dummy's centre: the component draws a
+ * stretch as a cubic whose control points sit at the stretch's middle height,
+ * so a stretch that ended inside a band swept sideways at card height and cut
+ * straight through whatever unrelated card stood between its ends. Now every
+ * stretch that moves sideways starts and ends on the two boundaries of one gap,
+ * so its y never leaves the gap, where no node lives; and every vertical one
+ * keeps the x of a port (inside its own node's width) or of a dummy (half an
+ * edge gap plus half a node gap clear of any neighbour).
+ *
+ * A reversed edge is routed the way the layout sees it and then turned around,
+ * so its points still start at the real parent: it leaves the parent's top and
+ * enters the child's bottom, which is itself the visual cue that the edge
+ * closes a cycle.
+ */
+function routeEdges(graph, geometry, portGap, inset) {
+    const outgoing = geometry.width.map(() => []);
+    const incoming = geometry.width.map(() => []);
+    graph.edges.forEach(({ chain }, edge) => {
+        outgoing[chain[0]].push({ edge, toward: chain[1] });
+        incoming[chain[chain.length - 1]].push({ edge, toward: chain[chain.length - 2] });
+    });
+    const start = graph.edges.map(() => 0);
+    const end = graph.edges.map(() => 0);
+    assignPorts(outgoing, geometry, portGap, inset, start);
+    assignPorts(incoming, geometry, portGap, inset, end);
+    const centre = (item) => geometry.centreY[graph.rank[item]];
+    const half = (item) => geometry.halfBand[graph.rank[item]];
+    return graph.edges.map(({ chain, reversed }, edge) => {
+        const upper = chain[0];
+        const lower = chain[chain.length - 1];
+        const points = [];
+        // A node as tall as its band, or a band with no height, would repeat a point.
+        const add = (x, y) => {
+            const last = points[points.length - 1];
+            if (last?.x !== x || last.y !== y)
+                points.push({ x, y });
+        };
+        add(start[edge], centre(upper) + geometry.height[upper] / 2);
+        add(start[edge], centre(upper) + half(upper));
+        for (let i = 1; i < chain.length - 1; i++) {
+            add(geometry.x[chain[i]], centre(chain[i]) - half(chain[i]));
+            add(geometry.x[chain[i]], centre(chain[i]) + half(chain[i]));
+        }
+        add(end[edge], centre(lower) - half(lower));
+        add(end[edge], centre(lower) - geometry.height[lower] / 2);
+        return reversed ? points.reverse() : points;
+    });
+}
+/**
+ * Self-loops as fixed rectangles beside the node's right side, nested outward
+ * one `step` apart, each a little taller than the one inside it. Every point is
+ * strictly outside the node, and the space is already reserved in the node's
+ * layout box, so a loop can never run into a neighbour. The side is a layout
+ * side: under RTL the whole drawing mirrors, loop included.
+ */
+function routeLoops(loops, geometry, rank, step) {
+    const total = geometry.width.map(() => 0);
+    for (const loop of loops)
+        total[loop.from]++;
+    const drawn = geometry.width.map(() => 0);
+    return loops.map(({ from }) => {
+        const nth = drawn[from]++;
+        const inner = geometry.x[from] + geometry.width[from] / 2 + LOOP_CLEARANCE;
+        const outer = inner + (nth + 1) * step;
+        const centre = geometry.centreY[rank[from]];
+        const reach = ((geometry.height[from] / 2) * (nth + 1)) / (total[from] + 1);
+        return [
+            { x: inner, y: centre - reach },
+            { x: outer, y: centre - reach },
+            { x: outer, y: centre + reach },
+            { x: inner, y: centre + reach },
+        ];
+    });
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * The seam a layout engine plugs into. Used as both the type and the DI token,
+ * the way `WrDateAdapter` is.
+ *
+ * The return type admits a Promise from the first release, even though the
+ * built-in engine is synchronous: an asynchronous engine (elk runs in a worker)
+ * has to fit without a breaking change, and widening a synchronous return type
+ * later would break every caller that reads the result directly.
+ */
+class WrGraphLayout {
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+function drawComponent(graph, component, gaps) {
+    const width = component.nodes.map(node => graph.nodes[node].width);
+    const height = component.nodes.map(node => graph.nodes[node].height);
+    const loops = width.map(() => 0);
+    for (const loop of component.loops)
+        loops[loop.from]++;
+    const layered = layerGraph(width.length, component.edges);
+    const layers = orderLayers(layered);
+    const real = (item) => item < width.length;
+    const extents = {
+        left: layered.rank.map((_, item) => (real(item) ? width[item] / 2 : 0)),
+        right: layered.rank.map((_, item) => (real(item) ? width[item] / 2 + loopReserve(loops[item], gaps.edgeGap) : 0)),
+        halfGap: layered.rank.map((_, item) => (real(item) ? gaps.nodeGap : gaps.edgeGap) / 2),
+        height: layered.rank.map((_, item) => (real(item) ? height[item] : 0)),
+    };
+    const x = placeItems(layers, layered, extents);
+    const { centre, half, height: total } = layerCentres(layers, extents, gaps.layerGap);
+    const geometry = { x, centreY: centre, halfBand: half, width, height };
+    const edges = routeEdges(layered, geometry, gaps.edgeGap, gaps.edgeGap / 2);
+    const selfLoops = routeLoops(component.loops, geometry, layered.rank, gaps.edgeGap);
+    // Every route point lies horizontally within some item's box — ports and the
+    // band points straight above or below them inside a node's width, bends on
+    // dummies, loops inside the reserve — so the items alone bound it.
+    let minX = x[0] - extents.left[0];
+    let maxX = x[0] + extents.right[0];
+    x.forEach((anchor, item) => {
+        minX = Math.min(minX, anchor - extents.left[item]);
+        maxX = Math.max(maxX, anchor + extents.right[item]);
+    });
+    return {
+        left: width.map((w, node) => x[node] - extents.left[node]),
+        top: height.map((h, node) => centre[layered.rank[node]] - h / 2),
+        routes: [
+            ...layered.edges.map((edge, k) => ({ slot: edge.slot, points: edges[k] })),
+            ...component.loops.map((loop, k) => ({ slot: loop.slot, points: selfLoops[k] })),
+        ],
+        minX,
+        width: maxX - minX,
+        height: total,
+    };
+}
+/**
+ * The built-in layered layout: parents above children, pure TypeScript, no DOM
+ * and no dependency, so it runs the same under prerender as in the browser.
+ *
+ * It is deliberately the light version of the pipeline: DFS cycle breaking,
+ * source-based longest-path ranking with one tightening pass, barycenter sweeps
+ * with a pairwise crossing count, and averaged forward/backward compaction for
+ * coordinates. Network simplex and Brandes–Köpf would draw some graphs more
+ * compactly at several times the code.
+ *
+ * Deterministic by construction rather than by luck: ids are turned into indices
+ * in input order before anything else, every loop is capped by a count, every
+ * comparator is total with an integer tie-break, and the arithmetic is limited
+ * to operations the language specifies exactly — so the server and the browser
+ * agree to the last bit. Nothing is kept between calls and the input is never
+ * written to.
+ */
+class WrLayeredGraphLayout extends WrGraphLayout {
+    gaps;
+    constructor(options = {}) {
+        super();
+        this.gaps = {
+            nodeGap: options.nodeGap ?? 24,
+            layerGap: options.layerGap ?? 48,
+            edgeGap: options.edgeGap ?? 12,
+            componentGap: options.componentGap ?? 48,
+        };
+    }
+    /** Synchronous — a narrowing of the base signature, so a caller holding this class needs no `await`. */
+    layout(input) {
+        const graph = prepareGraph(input);
+        const placed = graph.nodes.map(() => ({ x: 0, y: 0 }));
+        const routes = graph.edges.map(() => []);
+        let width = 0;
+        let height = 0;
+        // Components go in one row, top-aligned, in the order of their first node.
+        // `+ 0` turns a negative zero into a positive one: the two compare equal with
+        // `===` and unequal everywhere a result is compared structurally.
+        graph.components.forEach((component, c) => {
+            const drawing = drawComponent(graph, component, this.gaps);
+            const offset = c === 0 ? 0 : width + this.gaps.componentGap;
+            const shift = offset - drawing.minX;
+            component.nodes.forEach((node, local) => {
+                placed[node] = { x: drawing.left[local] + shift + 0, y: drawing.top[local] + 0 };
+            });
+            for (const { slot, points } of drawing.routes) {
+                routes[slot] = points.map(point => ({ x: point.x + shift + 0, y: point.y + 0 }));
+            }
+            width = offset + drawing.width;
+            height = Math.max(height, drawing.height);
+        });
+        return {
+            nodes: graph.nodes.map((node, i) => ({ id: node.id, x: placed[i].x, y: placed[i].y })),
+            edges: graph.edges.map((edge, slot) => ({ id: edge.id, points: routes[slot] })),
+            width: width + 0,
+            height: height + 0,
+        };
+    }
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** What a size falls back to when neither the node nor the graph supplies a usable one. */
+const DEFAULT_NODE_WIDTH = 160;
+const DEFAULT_NODE_HEIGHT = 48;
+/**
+ * The arrowhead's size in pixels, and the length of the straight lead-in under it.
+ * A fixed user-space size rather than a multiple of the stroke, so a thinner or
+ * thicker `--wr-graph-edge-width` never shrinks the arrow off its lead-in.
+ */
+const ARROW_SIZE = 6;
+/**
+ * Instance counter for the arrowhead marker id. Several graphs share one page
+ * under `ViewEncapsulation.None`, so the id has to be per instance — and
+ * counted rather than `randomId()`, so the prerendered id is the one the
+ * browser renders again.
+ */
+let graphUid = 0;
+function isSize(value) {
+    return typeof value === 'number' && Number.isFinite(value) && value > 0;
+}
+function isThenable(value) {
+    return typeof value.then === 'function';
+}
+/** Two decimals are below anything a screen can show, and keep a 5 000-bend path short. `+ 0` drops a `-0`. */
+function px(value) {
+    return Math.round(value * 100) / 100 + 0;
+}
+function prepare(nodes, edges, nodeWidth, nodeHeight) {
+    // A `Map` built in input order, never an object keyed by id: an object lists
+    // index-like keys (`'2'`, `'10'`) first, so the order would depend on the ids.
+    const kept = new Map();
+    const duplicates = [];
+    const badSizes = [];
+    nodes.forEach((node, index) => {
+        if (kept.has(node.id)) {
+            duplicates.push(node.id);
+            return;
+        }
+        if ((node.width != null && !isSize(node.width)) || (node.height != null && !isSize(node.height))) {
+            badSizes.push(node.id);
+        }
+        kept.set(node.id, {
+            node,
+            index,
+            width: isSize(node.width) ? node.width : nodeWidth,
+            height: isSize(node.height) ? node.height : nodeHeight,
+        });
+    });
+    const keptEdges = [];
+    const dangling = [];
+    edges.forEach((edge, index) => {
+        if (kept.has(edge.from) && kept.has(edge.to))
+            keptEdges.push({ id: `e${index}`, from: edge.from, to: edge.to });
+        else
+            dangling.push(`#${index} (from "${edge.from}" to "${edge.to}")`);
+    });
+    const list = [...kept.values()];
+    return {
+        nodes: list,
+        edges: keptEdges,
+        input: { nodes: list.map(({ node, width, height }) => ({ id: node.id, width, height })), edges: keptEdges },
+        duplicates,
+        dangling,
+        badSizes,
+    };
+}
+/**
+ * Names joined the way the locale joins a list, or the way `'en'` does when the
+ * runtime has no list data for that locale — never the host default.
+ *
+ * `new Intl.ListFormat('zz')` does not throw: a well-formed tag the runtime
+ * cannot serve silently resolves to whatever locale the machine runs in, which
+ * is one thing on the prerendering server and another in the browser. So the
+ * support is asked first, and only a malformed tag reaches the `catch`
+ * (`supportedLocalesOf` throws a `RangeError` for it).
+ */
+function listFormat(locale) {
+    try {
+        if (Intl.ListFormat.supportedLocalesOf(locale).length)
+            return new Intl.ListFormat(locale, { type: 'conjunction' });
+    }
+    catch {
+        // Not a valid language tag at all; handled by the fallback below.
+    }
+    return new Intl.ListFormat('en', { type: 'conjunction' });
+}
+function warn(message) {
+    // eslint-disable-next-line no-console -- dev-mode validation
+    console.warn(`[NGWR] <wr-graph>: ${message}`);
+}
+/** What a layout returned that the component cannot draw faithfully. */
+function layoutProblems(graph, result) {
+    const problems = [];
+    const placed = new Set(result.nodes.map(node => node.id));
+    const unplaced = graph.nodes.filter(({ node }) => !placed.has(node.id)).map(({ node }) => `"${node.id}"`);
+    if (unplaced.length)
+        problems.push(`no position for ${unplaced.join(', ')}`);
+    const numbers = [
+        result.width,
+        result.height,
+        ...result.nodes.flatMap(node => [node.x, node.y]),
+        ...result.edges.flatMap(edge => edge.points.flatMap(point => [point.x, point.y])),
+    ];
+    if (!numbers.every(Number.isFinite))
+        problems.push('a coordinate or the size is not a finite number');
+    return problems;
+}
+/**
+ * A graph of blocks joined by parent-child links, laid out in layers from top to
+ * bottom. Display only: nothing is selectable, and the graph scrolls inside its
+ * own viewport rather than the page.
+ *
+ * The layout runs in a `computed` with no DOM and no measuring, so the sizes are
+ * the consumer's: `nodeWidth` / `nodeHeight` for every node, or `width` /
+ * `height` on one. A prerender therefore ships the finished picture.
+ *
+ * What the lines show is also written out: every node carries visually hidden
+ * text naming its parents and children, and the lines themselves are hidden
+ * from assistive technology.
+ *
+ * @example
+ * ```html
+ * <wr-graph [nodes]="nodes" [edges]="edges" ariaLabel="Team structure" />
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/graph
+ */
+class WrGraph {
+    /**
+     * The nodes, in any order. Input order breaks layout ties, so the same arrays
+     * always produce the same picture. Never mutated.
+     *
+     * @default []
+     */
+    nodes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /**
+     * Parent-child links, `from` the parent and `to` the child. Never mutated.
+     *
+     * @default []
+     */
+    edges = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "edges" }] : /* istanbul ignore next */ []));
+    /**
+     * Width in pixels of a node that sets none of its own.
+     *
+     * @default 160
+     */
+    nodeWidth = input(160, { ...(ngDevMode ? { debugName: "nodeWidth" } : /* istanbul ignore next */ {}), transform: numAttr(160) });
+    /**
+     * Height in pixels of a node that sets none of its own.
+     *
+     * @default 48
+     */
+    nodeHeight = input(48, { ...(ngDevMode ? { debugName: "nodeHeight" } : /* istanbul ignore next */ {}), transform: numAttr(48) });
+    /** Accessible name of the scrolling viewport. Falls back to `graph.label`, then `'Graph'`. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    label = useI18nText(this.ariaLabel, 'graph.label', 'Graph');
+    // Each value is a whole sentence, terminator included, so the punctuation is the
+    // catalog's to choose — `。` in Japanese, `।` in Hindi.
+    parentsText = useI18nFormatter('graph.parents', 'Parents: {{names}}.');
+    childrenText = useI18nFormatter('graph.children', 'Children: {{names}}.');
+    nodeTemplate = contentChild(WrGraphNodeTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []));
+    /** `url(#…)` for every edge's `marker-end`. */
+    markerId = `wr-graph-${graphUid++}-arrow`;
+    markerUrl = `url(#${this.markerId})`;
+    arrowSize = ARROW_SIZE;
+    engine = inject(WrGraphLayout, { optional: true }) ?? new WrLayeredGraphLayout();
+    // Optional on purpose: `Directionality` is root-provided, so a consumer never has
+    // to supply it — and a bare `TestBed` does not either.
+    dir = inject(Directionality, { optional: true });
+    i18n = inject(WrI18n, { optional: true });
+    localeId = inject(LOCALE_ID);
+    isRtl = computed(() => this.dir?.valueSignal() === 'rtl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+    locale = computed(() => this.i18n?.locale() ?? this.localeId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * The size of a node that sets none of its own. Each dimension falls back on its
+     * own, and the dev warning reads this same value, so it cannot name a size the
+     * layout did not use.
+     */
+    defaultSize = computed(() => {
+        const width = this.nodeWidth();
+        const height = this.nodeHeight();
+        return {
+            width: isSize(width) ? width : DEFAULT_NODE_WIDTH,
+            height: isSize(height) ? height : DEFAULT_NODE_HEIGHT,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultSize" }] : /* istanbul ignore next */ []));
+    prepared = computed(() => {
+        const { width, height } = this.defaultSize();
+        return prepare(this.nodes(), this.edges(), width, height);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prepared" }] : /* istanbul ignore next */ []));
+    /** The engine's answer, as returned. A fresh signal per run: nothing aborts a synchronous layout. */
+    raw = computed(() => this.engine.layout(this.prepared().input, { signal: new AbortController().signal }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "raw" }] : /* istanbul ignore next */ []));
+    /**
+     * The drawable result. An asynchronous layout is declared by the interface and
+     * not supported by this release: a thenable draws nothing, and dev mode says so.
+     */
+    result = computed(() => {
+        const raw = this.raw();
+        return isThenable(raw) ? null : raw;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
+    /** Layout joined to the nodes and edges, direction-free, nodes in reading order. */
+    placed = computed(() => {
+        const graph = this.prepared();
+        const result = this.result();
+        if (!result)
+            return { width: 0, height: 0, nodes: [], edges: [] };
+        const positions = new Map(result.nodes.map(placement => [placement.id, placement]));
+        const nodes = graph.nodes.flatMap(prepared => {
+            const at = positions.get(prepared.node.id);
+            return at ? [{ ...prepared, x: at.x, y: at.y }] : [];
+        });
+        // Reading order is layer, then inline position. A layer centres nodes of
+        // different heights on one line, so the layer is the vertical CENTRE, taken to
+        // two decimals so float noise cannot split one layer in two.
+        const layer = (node) => Math.round((node.y + node.height / 2) * 100);
+        nodes.sort((a, b) => layer(a) - layer(b) || a.x - b.x || a.index - b.index);
+        const routes = new Map(result.edges.map(route => [route.id, route.points]));
+        const edges = graph.edges.flatMap(edge => {
+            const points = routes.get(edge.id);
+            return points && points.length >= 2 ? [{ edge, points }] : [];
+        });
+        return { width: result.width, height: result.height, nodes, edges };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placed" }] : /* istanbul ignore next */ []));
+    /**
+     * Physical pixels. Mirrored here rather than in CSS so nodes and lines get the
+     * same numbers and cannot drift apart — and kept apart from the layout so a
+     * direction change does not lay the graph out again.
+     */
+    view = computed(() => {
+        const { width, height, nodes, edges } = this.placed();
+        const rtl = this.isRtl();
+        const x = (value, size = 0) => px(rtl ? width - value - size : value);
+        const at = (point) => `${x(point.x)} ${px(point.y)}`;
+        // A route as a smooth path. Every stretch between two route points is one cubic
+        // Bézier with both control points at the stretch's middle height, so a line
+        // leaves a parent vertically and runs through a bend without a corner — a
+        // reversed edge too, whose stretches simply climb.
+        //
+        // The last `ARROW_SIZE` pixels are a straight lead-in. A marker takes its angle
+        // from the tangent at the very end, but it covers several pixels of line, and on
+        // a curve those already point elsewhere — the line came out of the side of the
+        // arrowhead. On a straight piece the triangle and the line agree. A self-loop is
+        // one cubic out to its reserved side with the same lead-in coming back level.
+        //
+        // Only `+`, `-`, `/`, `abs`, `min` and `max`, so the server and the browser
+        // write the same numbers.
+        const curve = (points, loop) => {
+            const start = points[0];
+            const end = points[points.length - 1];
+            if (loop) {
+                const right = Math.max(...points.map(point => point.x));
+                const lead = Math.min(ARROW_SIZE, (right - end.x) / 2);
+                const outer = x(right);
+                return `M${at(start)} C${outer} ${px(start.y)} ${outer} ${px(end.y)} ${x(end.x + lead)} ${px(end.y)} L${at(end)}`;
+            }
+            const stretches = points.slice(1).map((to, i) => {
+                const from = points[i];
+                const last = i === points.length - 2;
+                const lead = last ? Math.min(ARROW_SIZE, Math.abs(to.y - from.y) / 2) : 0;
+                const toY = to.y < from.y ? to.y + lead : to.y - lead;
+                const middle = px((from.y + toY) / 2);
+                const bend = `C${x(from.x)} ${middle} ${x(to.x)} ${middle} ${x(to.x)} ${px(toY)}`;
+                return last ? `${bend} L${at(to)}` : bend;
+            });
+            return [`M${at(start)}`, ...stretches].join(' ');
+        };
+        return {
+            width: px(width),
+            height: px(height),
+            nodes: nodes.map(placed => ({
+                node: placed.node,
+                width: placed.width,
+                height: placed.height,
+                transform: `translate(${x(placed.x, placed.width)}px, ${px(placed.y)}px)`,
+            })),
+            edges: edges.map(({ edge, points }) => ({
+                id: edge.id,
+                from: edge.from,
+                to: edge.to,
+                d: curve(points, edge.from === edge.to),
+            })),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /**
+     * The visually hidden sentence per node id: its parents, then its children, as
+     * name lists. Never a count — the catalogs have no plural forms. A neighbour
+     * linked by several edges is named once, and names follow reading order.
+     */
+    relations = computed(() => {
+        const { nodes } = this.placed();
+        const list = listFormat(this.locale());
+        const order = new Map(nodes.map((placed, i) => [placed.node.id, i]));
+        const parents = new Map();
+        const children = new Map();
+        const link = (map, id, neighbour) => {
+            const set = map.get(id) ?? new Set();
+            set.add(neighbour);
+            map.set(id, set);
+        };
+        for (const { from, to } of this.prepared().edges) {
+            if (!order.has(from) || !order.has(to))
+                continue;
+            link(parents, to, from);
+            link(children, from, to);
+        }
+        const names = (ids) => {
+            if (!ids?.size)
+                return null;
+            const sorted = [...ids].sort((a, b) => (order.get(a) ?? 0) - (order.get(b) ?? 0));
+            return list.format(sorted.map(id => nodes[order.get(id) ?? 0].node.label));
+        };
+        const text = new Map();
+        for (const { node } of nodes) {
+            const sentences = [];
+            const parentNames = names(parents.get(node.id));
+            const childNames = names(children.get(node.id));
+            if (parentNames)
+                sentences.push(this.parentsText({ names: parentNames }));
+            if (childNames)
+                sentences.push(this.childrenText({ names: childNames }));
+            // Every mark of punctuation comes from the catalog. The one character the
+            // component adds is the space between two sentences — a word boundary to a
+            // screen reader, and silent in a script that sets none.
+            if (sentences.length)
+                text.set(node.id, sentences.join(' '));
+        }
+        return text;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "relations" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (isDevMode()) {
+            effect(() => {
+                const graph = this.prepared();
+                const raw = this.raw();
+                if (graph.duplicates.length) {
+                    warn(`node id(s) ${graph.duplicates.map(id => `"${id}"`).join(', ')} appear more than once. ` +
+                        `The first occurrence of each is drawn and the rest are skipped.`);
+                }
+                if (graph.dangling.length) {
+                    warn(`edge(s) ${graph.dangling.join(', ')} name a node that does not exist and were skipped.`);
+                }
+                if (graph.badSizes.length) {
+                    warn(`node(s) ${graph.badSizes.map(id => `"${id}"`).join(', ')} have a width or height that is not a ` +
+                        `positive finite number, so nodeWidth / nodeHeight is used instead.`);
+                }
+                const width = this.nodeWidth();
+                const height = this.nodeHeight();
+                const invalid = [
+                    ...(isSize(width) ? [] : [`nodeWidth (${String(width)})`]),
+                    ...(isSize(height) ? [] : [`nodeHeight (${String(height)})`]),
+                ];
+                if (invalid.length) {
+                    const used = this.defaultSize();
+                    warn(`${invalid.join(' and ')} must be a positive finite number, so a node with no size of its own is ` +
+                        `drawn ${used.width} × ${used.height}.`);
+                }
+                if (isThenable(raw)) {
+                    warn('the provided WrGraphLayout returned a Promise. Asynchronous layouts are not supported in this ' +
+                        'release, so nothing is drawn.');
+                    return;
+                }
+                const problems = layoutProblems(graph, raw);
+                if (problems.length)
+                    warn(`the layout result cannot be drawn faithfully: ${problems.join('; ')}.`);
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrGraph, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrGraph, isStandalone: true, selector: "wr-graph", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, nodeWidth: { classPropertyName: "nodeWidth", publicName: "nodeWidth", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-graph" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: WrGraphNodeTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "@let graph = view();\n<!-- The scroller is the one tab stop: a named group, so its label is allowed, and focusable so a keyboard can scroll it. -->\n<div class=\"wr-graph__viewport\" role=\"group\" tabindex=\"0\" [attr.aria-label]=\"label()\">\n  <div class=\"wr-graph__stage\" [style.width.px]=\"graph.width\" [style.height.px]=\"graph.height\">\n    <svg\n      class=\"wr-graph__edges\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      [attr.width]=\"graph.width\"\n      [attr.height]=\"graph.height\"\n    >\n      <defs>\n        <marker\n          [attr.id]=\"markerId\"\n          viewBox=\"0 0 10 10\"\n          refX=\"10\"\n          refY=\"5\"\n          markerUnits=\"userSpaceOnUse\"\n          [attr.markerWidth]=\"arrowSize\"\n          [attr.markerHeight]=\"arrowSize\"\n          orient=\"auto\"\n        >\n          <polygon points=\"0,1 10,5 0,9\" />\n        </marker>\n      </defs>\n      @for (edge of graph.edges; track edge.id) {\n        <path\n          class=\"wr-graph__edge\"\n          [attr.d]=\"edge.d\"\n          [attr.data-from]=\"edge.from\"\n          [attr.data-to]=\"edge.to\"\n          [attr.marker-end]=\"markerUrl\"\n        />\n      }\n    </svg>\n    <!-- Items are DIRECT children of the list: a wrapper carrying ARIA or a tabindex would break ownership. -->\n    <div class=\"wr-graph__nodes\" [attr.role]=\"graph.nodes.length ? 'list' : null\">\n      @for (entry of graph.nodes; track entry.node.id) {\n        @let relation = relations().get(entry.node.id);\n        <div\n          class=\"wr-graph__node\"\n          role=\"listitem\"\n          [style.width.px]=\"entry.width\"\n          [style.height.px]=\"entry.height\"\n          [style.transform]=\"entry.transform\"\n        >\n          @if (nodeTemplate(); as custom) {\n            <ng-container [ngTemplateOutlet]=\"custom.template\" [ngTemplateOutletContext]=\"{ $implicit: entry.node }\" />\n          } @else {\n            <div class=\"wr-graph__card\">{{ entry.node.label }}</div>\n          }\n          @if (relation) {\n            <span class=\"wr-graph__sr-only\">{{ relation }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrGraph, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-graph', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'wr-graph',
+                    }, template: "@let graph = view();\n<!-- The scroller is the one tab stop: a named group, so its label is allowed, and focusable so a keyboard can scroll it. -->\n<div class=\"wr-graph__viewport\" role=\"group\" tabindex=\"0\" [attr.aria-label]=\"label()\">\n  <div class=\"wr-graph__stage\" [style.width.px]=\"graph.width\" [style.height.px]=\"graph.height\">\n    <svg\n      class=\"wr-graph__edges\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      [attr.width]=\"graph.width\"\n      [attr.height]=\"graph.height\"\n    >\n      <defs>\n        <marker\n          [attr.id]=\"markerId\"\n          viewBox=\"0 0 10 10\"\n          refX=\"10\"\n          refY=\"5\"\n          markerUnits=\"userSpaceOnUse\"\n          [attr.markerWidth]=\"arrowSize\"\n          [attr.markerHeight]=\"arrowSize\"\n          orient=\"auto\"\n        >\n          <polygon points=\"0,1 10,5 0,9\" />\n        </marker>\n      </defs>\n      @for (edge of graph.edges; track edge.id) {\n        <path\n          class=\"wr-graph__edge\"\n          [attr.d]=\"edge.d\"\n          [attr.data-from]=\"edge.from\"\n          [attr.data-to]=\"edge.to\"\n          [attr.marker-end]=\"markerUrl\"\n        />\n      }\n    </svg>\n    <!-- Items are DIRECT children of the list: a wrapper carrying ARIA or a tabindex would break ownership. -->\n    <div class=\"wr-graph__nodes\" [attr.role]=\"graph.nodes.length ? 'list' : null\">\n      @for (entry of graph.nodes; track entry.node.id) {\n        @let relation = relations().get(entry.node.id);\n        <div\n          class=\"wr-graph__node\"\n          role=\"listitem\"\n          [style.width.px]=\"entry.width\"\n          [style.height.px]=\"entry.height\"\n          [style.transform]=\"entry.transform\"\n        >\n          @if (nodeTemplate(); as custom) {\n            <ng-container [ngTemplateOutlet]=\"custom.template\" [ngTemplateOutletContext]=\"{ $implicit: entry.node }\" />\n          } @else {\n            <div class=\"wr-graph__card\">{{ entry.node.label }}</div>\n          }\n          @if (relation) {\n            <span class=\"wr-graph__sr-only\">{{ relation }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], edges: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }], nodeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeWidth", required: false }] }], nodeHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], nodeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WrGraphNodeTemplate), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrGraph, WrGraphNodeTemplate };
+//# sourceMappingURL=ngwr-graph.mjs.map