@akcelik/strct 4.18.0 → 4.19.0

package/fesm2022/akcelik-strct.mjs

@@ -18108,6 +18108,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
   `, host: { class: 'strct-gauge' }, styles: [".strct-gauge{display:inline-block}.strct-gauge__wrap{position:relative}.strct-gauge__track{stroke:var(--bg-3)}@media(prefers-reduced-motion:no-preference){.strct-gauge__value{transition:stroke-dasharray .4s ease}}.strct-gauge__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-gauge__num{font-size:var(--text-2xl);font-weight:600;color:var(--t1);line-height:1}.strct-gauge__pct{font-size:12px;color:var(--t2);margin-inline-start:1px}.strct-gauge__label{font-size:12px;color:var(--t2);margin-top:3px}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }] } });
 
+/**
+ * A node's own content in a fan-out diagram — chips, a bar, a count. The
+ * template's context is the node (`let-node`), including its `data`.
+ */
+class StrctFlowNodeTemplate {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFlowNodeTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctFlowNodeTemplate, isStandalone: true, selector: "ng-template[strctFlowNode]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFlowNodeTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[strctFlowNode]' }]
+        }] });
 /**
  * Shows a connection between two (or N) endpoints with an optional animated
  * "flow" — moving dots travelling along the connector — to represent live data
@@ -18141,6 +18153,148 @@ class StrctFlow {
     /** Layout axis. */
     orientation = input('horizontal', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * `chain` (default) is the straight A → B connector. `fan-out` places nodes
+     * in columns and draws the edges between them; `tree` is `fan-out` with the
+     * columns derived from each node's depth.
+     */
+    layout = input('chain', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** The edges of a fan-out / tree. `null` keeps the consecutive chain. */
+    edges = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "edges" }] : /* istanbul ignore next */ []));
+    /** Column headings, in order. */
+    columns = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    nodeTpl = contentChild(StrctFlowNodeTemplate, { ...(ngDevMode ? { debugName: "nodeTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    /** Which column each node sits in: its own, or its depth in the edge graph. */
+    columnOf = computed(() => {
+        const nodes = this.nodes();
+        const map = new Map();
+        if (this.layout() === 'tree') {
+            const parents = new Map();
+            for (const e of this.edges() ?? [])
+                parents.set(e.to, e.from);
+            const depth = (id, seen = new Set()) => {
+                const parent = parents.get(id);
+                if (parent === undefined || seen.has(id))
+                    return 0;
+                seen.add(id);
+                return depth(parent, seen) + 1;
+            };
+            for (const n of nodes)
+                map.set(n.id, n.column ?? depth(n.id));
+            return map;
+        }
+        for (const [i, n] of nodes.entries())
+            map.set(n.id, n.column ?? i);
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnOf" }] : /* istanbul ignore next */ []));
+    /** The columns as rendered: a heading (when given) and the nodes in it. */
+    columnsView = computed(() => {
+        const byColumn = new Map();
+        for (const n of this.nodes()) {
+            const c = this.columnOf().get(n.id) ?? 0;
+            byColumn.set(c, [...(byColumn.get(c) ?? []), n]);
+        }
+        const headings = this.columns() ?? [];
+        return [...byColumn.keys()]
+            .sort((a, b) => a - b)
+            .map((index) => ({ index, heading: headings[index] ?? '', nodes: byColumn.get(index) }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnsView" }] : /* istanbul ignore next */ []));
+    /** What a node says to assistive tech: itself, then where it leads. */
+    nodeSummary(node) {
+        const out = (this.edges() ?? [])
+            .filter((e) => e.from === node.id)
+            .map((e) => this.nodes().find((n) => n.id === e.to)?.label ?? e.to);
+        return out.length ? `→ ${out.join(', ')}` : '';
+    }
+    /** Measured edge geometry — recomputed whenever the boxes move or resize. */
+    edgePaths = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "edgePaths" }] : /* istanbul ignore next */ []));
+    viewBox = signal('0 0 0 0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.observe());
+        // Re-measure when the data changes; the observer covers size changes.
+        effect(() => {
+            this.nodes();
+            this.edges();
+            this.layout();
+            queueMicrotask(() => this.measure());
+        });
+    }
+    observe() {
+        if (this.layout() === 'chain' || typeof ResizeObserver === 'undefined')
+            return;
+        const fan = this.host.nativeElement.querySelector('.strct-flow__fan');
+        if (!fan)
+            return;
+        const ro = new ResizeObserver(() => this.measure());
+        ro.observe(fan);
+        for (const box of fan.querySelectorAll('.strct-flow__box'))
+            ro.observe(box);
+        this.destroyRef.onDestroy(() => ro.disconnect());
+        this.measure();
+    }
+    /**
+     * Orthogonal connectors, from the boxes' real positions: out of the source's
+     * inline end, across the gap, then into the target's inline start.
+     */
+    measure() {
+        if (this.layout() === 'chain')
+            return;
+        const fan = this.host.nativeElement.querySelector('.strct-flow__fan');
+        const edges = this.edges();
+        if (!fan || !edges?.length) {
+            this.edgePaths.set([]);
+            return;
+        }
+        const base = fan.getBoundingClientRect();
+        this.viewBox.set(`0 0 ${Math.round(base.width)} ${Math.round(base.height)}`);
+        // Looked up from the boxes themselves rather than through a selector: a
+        // node id is consumer data, and CSS.escape is not everywhere (jsdom).
+        const boxes = new Map();
+        for (const el of fan.querySelectorAll('[data-flow-node]')) {
+            const id = el.dataset['flowNode'];
+            if (id)
+                boxes.set(id, el);
+        }
+        const rect = (id) => {
+            const el = boxes.get(id);
+            if (!el)
+                return null;
+            const r = el.getBoundingClientRect();
+            return { x: r.left - base.left, y: r.top - base.top, w: r.width, h: r.height };
+        };
+        const paths = [];
+        for (const [i, e] of edges.entries()) {
+            const a = rect(e.from);
+            const b = rect(e.to);
+            if (!a || !b)
+                continue;
+            const x1 = a.x + a.w;
+            const y1 = a.y + a.h / 2;
+            const x2 = b.x;
+            const y2 = b.y + b.h / 2;
+            const mid = x1 + (x2 - x1) / 2;
+            const d = Math.abs(y1 - y2) < 1
+                ? `M ${x1} ${y1} L ${x2} ${y2}`
+                : `M ${x1} ${y1} H ${mid} V ${y2} H ${x2}`;
+            paths.push({
+                key: `${e.from}-${e.to}-${i}`,
+                d,
+                status: e.status ?? 'neutral',
+                dashed: e.style === 'dashed',
+                animated: !!e.animated,
+            });
+        }
+        this.edgePaths.set(paths);
+    }
     /** A flow needs at least two terminals to animate. */
     connected = computed(() => this.nodes().length > 1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "connected" }] : /* istanbul ignore next */ []));
@@ -18172,103 +18326,210 @@ class StrctFlow {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFlow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctFlow, isStandalone: true, selector: "strct-flow", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "class.strct-flow--vertical": "orientation() === 'vertical'", "class.strct-flow--neutral": "status() === 'neutral'", "class.strct-flow--accent": "status() === 'accent'", "class.strct-flow--success": "status() === 'success'", "class.strct-flow--warning": "status() === 'warning'", "class.strct-flow--critical": "status() === 'critical'", "class.strct-flow--live": "animated()", "attr.aria-label": "ariaLabel()" }, classAttribute: "strct-flow" }, ngImport: i0, template: `
-    <div class="strct-flow__row">
-      @for (node of nodes(); track node.id; let last = $last) {
-        <div class="strct-flow__node strct-flow__node--{{ node.status ?? 'neutral' }}">
-          <span class="strct-flow__dot" aria-hidden="true"></span>
-          <span class="strct-flow__node-text">
-            <span class="strct-flow__label">{{ node.label }}</span>
-            @if (node.role) {
-              <span class="strct-flow__role">{{ node.role }}</span>
-            }
-            @if (node.sublabel) {
-              <span class="strct-flow__sub">{{ node.sublabel }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctFlow, isStandalone: true, selector: "strct-flow", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "layout() === 'chain' ? 'img' : null", "class.strct-flow--fan": "layout() !== 'chain'", "class.strct-flow--vertical": "orientation() === 'vertical'", "class.strct-flow--neutral": "status() === 'neutral'", "class.strct-flow--accent": "status() === 'accent'", "class.strct-flow--success": "status() === 'success'", "class.strct-flow--warning": "status() === 'warning'", "class.strct-flow--critical": "status() === 'critical'", "class.strct-flow--live": "animated()", "attr.aria-label": "layout() === 'chain' ? ariaLabel() : null" }, classAttribute: "strct-flow" }, queries: [{ propertyName: "nodeTpl", first: true, predicate: StrctFlowNodeTemplate, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    @if (layout() !== 'chain') {
+      <div class="strct-flow__fan" #fan>
+        <!-- The edges are geometry, not content: they are measured from the
+             boxes after they render, and hidden from assistive tech, which is
+             given the structure instead. -->
+        <svg class="strct-flow__edges" aria-hidden="true" [attr.viewBox]="viewBox()">
+          @for (e of edgePaths(); track e.key) {
+            <path
+              class="strct-flow__edge strct-flow__edge--{{ e.status }}"
+              [class.strct-flow__edge--dashed]="e.dashed"
+              [class.strct-flow__edge--animated]="e.animated"
+              [attr.d]="e.d"
+              fill="none"
+            />
+          }
+        </svg>
+        @for (col of columnsView(); track col.index) {
+          <div class="strct-flow__col" role="group" [attr.aria-label]="col.heading || null">
+            @if (col.heading) {
+              <div class="strct-flow__colhead">{{ col.heading }}</div>
             }
-          </span>
-        </div>
+            <ul class="strct-flow__boxes">
+              @for (node of col.nodes; track node.id) {
+                <li
+                  class="strct-flow__box strct-flow__box--{{ node.status ?? 'neutral' }}"
+                  [attr.data-flow-node]="node.id"
+                >
+                  @if (nodeTpl(); as tpl) {
+                    <ng-container
+                      [ngTemplateOutlet]="tpl"
+                      [ngTemplateOutletContext]="{ $implicit: node, node }"
+                    />
+                  } @else {
+                    <span class="strct-flow__label">{{ node.label }}</span>
+                    @if (node.role) {
+                      <span class="strct-flow__role">{{ node.role }}</span>
+                    }
+                    @if (node.sublabel) {
+                      <span class="strct-flow__sub">{{ node.sublabel }}</span>
+                    }
+                  }
+                  <span class="strct-flow__sr">{{ nodeSummary(node) }}</span>
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </div>
+      @if (label()) {
+        <div class="strct-flow__caption">{{ label() }}</div>
+      }
+    } @else {
+      <div class="strct-flow__row">
+        @for (node of nodes(); track node.id; let last = $last) {
+          <div class="strct-flow__node strct-flow__node--{{ node.status ?? 'neutral' }}">
+            <span class="strct-flow__dot" aria-hidden="true"></span>
+            <span class="strct-flow__node-text">
+              <span class="strct-flow__label">{{ node.label }}</span>
+              @if (node.role) {
+                <span class="strct-flow__role">{{ node.role }}</span>
+              }
+              @if (node.sublabel) {
+                <span class="strct-flow__sub">{{ node.sublabel }}</span>
+              }
+            </span>
+          </div>
 
-        @if (!last) {
-          <div class="strct-flow__conn" aria-hidden="true">
-            <span class="strct-flow__line"></span>
-            @if (showArrow('forward')) {
-              <span class="strct-flow__arrow strct-flow__arrow--fwd"></span>
-            }
-            @if (showArrow('reverse')) {
-              <span class="strct-flow__arrow strct-flow__arrow--rev"></span>
-            }
-            @if (animated()) {
+          @if (!last) {
+            <div class="strct-flow__conn" aria-hidden="true">
+              <span class="strct-flow__line"></span>
               @if (showArrow('forward')) {
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--1"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--2"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--3"></span>
+                <span class="strct-flow__arrow strct-flow__arrow--fwd"></span>
               }
               @if (showArrow('reverse')) {
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--1"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--2"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--3"></span>
+                <span class="strct-flow__arrow strct-flow__arrow--rev"></span>
               }
-            }
-          </div>
+              @if (animated()) {
+                @if (showArrow('forward')) {
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--1"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--2"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--3"></span>
+                }
+                @if (showArrow('reverse')) {
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--1"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--2"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--3"></span>
+                }
+              }
+            </div>
+          }
         }
-      }
-    </div>
+      </div>
 
-    @if (caption()) {
-      <div class="strct-flow__caption">{{ caption() }}</div>
+      @if (caption()) {
+        <div class="strct-flow__caption">{{ caption() }}</div>
+      }
     }
-  `, isInline: true, styles: [".strct-flow{--strct-flow-color: var(--acc);display:block}.strct-flow--neutral{--strct-flow-color: var(--t3)}.strct-flow--accent{--strct-flow-color: var(--acc)}.strct-flow--success{--strct-flow-color: var(--success)}.strct-flow--warning{--strct-flow-color: var(--warning)}.strct-flow--critical{--strct-flow-color: var(--critical)}.strct-flow__row{display:flex;align-items:center;gap:var(--space-2)}.strct-flow--vertical .strct-flow__row{flex-direction:column;align-items:stretch}.strct-flow__node{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);flex-shrink:0}.strct-flow__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--t3)}.strct-flow__node--accent .strct-flow__dot{background:var(--acc)}.strct-flow__node--success .strct-flow__dot{background:var(--success)}.strct-flow__node--warning .strct-flow__dot{background:var(--warning)}.strct-flow__node--critical .strct-flow__dot{background:var(--critical)}.strct-flow__node-text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-flow__label{font-size:var(--text-md);font-weight:600;color:var(--t1);line-height:1.2}.strct-flow__role{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--t3)}.strct-flow__sub{font-size:var(--text-sm);color:var(--t3)}.strct-flow__conn{position:relative;flex:1 1 auto;min-width:40px;height:2px;align-self:center}.strct-flow--vertical .strct-flow__conn{width:2px;min-width:0;height:28px;flex:0 0 28px;align-self:center}.strct-flow__line{position:absolute;inset:0;border-radius:2px;background:linear-gradient(to right,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow--vertical .strct-flow__line{background:linear-gradient(to bottom,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow__arrow{position:absolute;top:50%;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}.strct-flow__arrow--fwd{right:-1px;transform:translateY(-50%);border-inline-start:6px solid var(--strct-flow-color)}.strct-flow__arrow--rev{left:-1px;transform:translateY(-50%);border-inline-end:6px solid var(--strct-flow-color)}.strct-flow--vertical .strct-flow__arrow{top:auto;left:50%}.strct-flow--vertical .strct-flow__arrow--fwd{right:auto;bottom:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:6px solid var(--strct-flow-color);border-bottom:0}.strct-flow--vertical .strct-flow__arrow--rev{left:50%;top:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-bottom:6px solid var(--strct-flow-color);border-top:0}.strct-flow__pkt{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--strct-flow-color);box-shadow:0 0 5px var(--strct-flow-color)}.strct-flow--vertical .strct-flow__pkt{top:0;left:50%}.strct-flow__pkt--fwd{animation:strct-flow-fwd 1.8s linear infinite}.strct-flow__pkt--rev{animation:strct-flow-rev 1.8s linear infinite}.strct-flow--vertical .strct-flow__pkt--fwd{animation-name:strct-flow-fwd-v}.strct-flow--vertical .strct-flow__pkt--rev{animation-name:strct-flow-rev-v}.strct-flow__pkt--2{animation-delay:.6s}.strct-flow__pkt--3{animation-delay:1.2s}@keyframes strct-flow-fwd{0%{left:0;opacity:0}15%,85%{opacity:1}to{left:100%;opacity:0}}@keyframes strct-flow-rev{0%{left:100%;opacity:0}15%,85%{opacity:1}to{left:0;opacity:0}}@keyframes strct-flow-fwd-v{0%{top:0;opacity:0}15%,85%{opacity:1}to{top:100%;opacity:0}}@keyframes strct-flow-rev-v{0%{top:100%;opacity:0}15%,85%{opacity:1}to{top:0;opacity:0}}.strct-flow__caption{margin-top:var(--space-2);text-align:center;font-size:var(--text-sm);color:var(--t3)}.strct-flow--vertical .strct-flow__caption{text-align:start}@media(prefers-reduced-motion:reduce){.strct-flow__pkt{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-flow{--strct-flow-color: var(--acc);display:block}.strct-flow--neutral{--strct-flow-color: var(--t3)}.strct-flow--accent{--strct-flow-color: var(--acc)}.strct-flow--success{--strct-flow-color: var(--success)}.strct-flow--warning{--strct-flow-color: var(--warning)}.strct-flow--critical{--strct-flow-color: var(--critical)}.strct-flow__row{display:flex;align-items:center;gap:var(--space-2)}.strct-flow--vertical .strct-flow__row{flex-direction:column;align-items:stretch}.strct-flow--fan{container-type:inline-size}.strct-flow__fan{position:relative;display:flex;align-items:flex-start;gap:var(--strct-flow-col-gap, 48px)}.strct-flow__edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.strct-flow__edge{stroke:var(--b3);stroke-width:1.5}.strct-flow__edge--accent{stroke:var(--acc)}.strct-flow__edge--success{stroke:var(--success)}.strct-flow__edge--warning{stroke:var(--warning)}.strct-flow__edge--critical{stroke:var(--critical)}.strct-flow__edge--dashed{stroke-dasharray:4 3}.strct-flow__edge--animated{stroke-dasharray:5 4;animation:strct-flow-dash 1s linear infinite}@keyframes strct-flow-dash{to{stroke-dashoffset:-9}}@media(prefers-reduced-motion:reduce){.strct-flow__edge--animated{animation:none}}.strct-flow__col{position:relative;flex:1 1 0;min-width:0}.strct-flow__colhead{font-size:var(--text-sm);font-weight:600;color:var(--t3);margin-block-end:var(--space-2)}.strct-flow__boxes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.strct-flow__box{display:flex;flex-direction:column;gap:3px;padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);min-width:0}.strct-flow__box--accent{border-color:var(--acc30)}.strct-flow__box--success{border-color:var(--success)}.strct-flow__box--warning{border-color:var(--warning)}.strct-flow__box--critical{border-color:var(--critical)}.strct-flow__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@container (max-width: 480px){.strct-flow__fan{flex-direction:column;gap:var(--space-3)}.strct-flow__edges{display:none}.strct-flow__col{padding-inline-start:var(--space-3);border-inline-start:2px solid var(--b2)}}.strct-flow__node{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);flex-shrink:0}.strct-flow__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--t3)}.strct-flow__node--accent .strct-flow__dot{background:var(--acc)}.strct-flow__node--success .strct-flow__dot{background:var(--success)}.strct-flow__node--warning .strct-flow__dot{background:var(--warning)}.strct-flow__node--critical .strct-flow__dot{background:var(--critical)}.strct-flow__node-text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-flow__label{font-size:var(--text-md);font-weight:600;color:var(--t1);line-height:1.2}.strct-flow__role{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--t3)}.strct-flow__sub{font-size:var(--text-sm);color:var(--t3)}.strct-flow__conn{position:relative;flex:1 1 auto;min-width:40px;height:2px;align-self:center}.strct-flow--vertical .strct-flow__conn{width:2px;min-width:0;height:28px;flex:0 0 28px;align-self:center}.strct-flow__line{position:absolute;inset:0;border-radius:2px;background:linear-gradient(to right,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow--vertical .strct-flow__line{background:linear-gradient(to bottom,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow__arrow{position:absolute;top:50%;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}.strct-flow__arrow--fwd{right:-1px;transform:translateY(-50%);border-inline-start:6px solid var(--strct-flow-color)}.strct-flow__arrow--rev{left:-1px;transform:translateY(-50%);border-inline-end:6px solid var(--strct-flow-color)}.strct-flow--vertical .strct-flow__arrow{top:auto;left:50%}.strct-flow--vertical .strct-flow__arrow--fwd{right:auto;bottom:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:6px solid var(--strct-flow-color);border-bottom:0}.strct-flow--vertical .strct-flow__arrow--rev{left:50%;top:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-bottom:6px solid var(--strct-flow-color);border-top:0}.strct-flow__pkt{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--strct-flow-color);box-shadow:0 0 5px var(--strct-flow-color)}.strct-flow--vertical .strct-flow__pkt{top:0;left:50%}.strct-flow__pkt--fwd{animation:strct-flow-fwd 1.8s linear infinite}.strct-flow__pkt--rev{animation:strct-flow-rev 1.8s linear infinite}.strct-flow--vertical .strct-flow__pkt--fwd{animation-name:strct-flow-fwd-v}.strct-flow--vertical .strct-flow__pkt--rev{animation-name:strct-flow-rev-v}.strct-flow__pkt--2{animation-delay:.6s}.strct-flow__pkt--3{animation-delay:1.2s}@keyframes strct-flow-fwd{0%{left:0;opacity:0}15%,85%{opacity:1}to{left:100%;opacity:0}}@keyframes strct-flow-rev{0%{left:100%;opacity:0}15%,85%{opacity:1}to{left:0;opacity:0}}@keyframes strct-flow-fwd-v{0%{top:0;opacity:0}15%,85%{opacity:1}to{top:100%;opacity:0}}@keyframes strct-flow-rev-v{0%{top:100%;opacity:0}15%,85%{opacity:1}to{top:0;opacity:0}}.strct-flow__caption{margin-top:var(--space-2);text-align:center;font-size:var(--text-sm);color:var(--t3)}.strct-flow--vertical .strct-flow__caption{text-align:start}@media(prefers-reduced-motion:reduce){.strct-flow__pkt{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFlow, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-flow', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div class="strct-flow__row">
-      @for (node of nodes(); track node.id; let last = $last) {
-        <div class="strct-flow__node strct-flow__node--{{ node.status ?? 'neutral' }}">
-          <span class="strct-flow__dot" aria-hidden="true"></span>
-          <span class="strct-flow__node-text">
-            <span class="strct-flow__label">{{ node.label }}</span>
-            @if (node.role) {
-              <span class="strct-flow__role">{{ node.role }}</span>
-            }
-            @if (node.sublabel) {
-              <span class="strct-flow__sub">{{ node.sublabel }}</span>
+            args: [{ selector: 'strct-flow', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], template: `
+    @if (layout() !== 'chain') {
+      <div class="strct-flow__fan" #fan>
+        <!-- The edges are geometry, not content: they are measured from the
+             boxes after they render, and hidden from assistive tech, which is
+             given the structure instead. -->
+        <svg class="strct-flow__edges" aria-hidden="true" [attr.viewBox]="viewBox()">
+          @for (e of edgePaths(); track e.key) {
+            <path
+              class="strct-flow__edge strct-flow__edge--{{ e.status }}"
+              [class.strct-flow__edge--dashed]="e.dashed"
+              [class.strct-flow__edge--animated]="e.animated"
+              [attr.d]="e.d"
+              fill="none"
+            />
+          }
+        </svg>
+        @for (col of columnsView(); track col.index) {
+          <div class="strct-flow__col" role="group" [attr.aria-label]="col.heading || null">
+            @if (col.heading) {
+              <div class="strct-flow__colhead">{{ col.heading }}</div>
             }
-          </span>
-        </div>
+            <ul class="strct-flow__boxes">
+              @for (node of col.nodes; track node.id) {
+                <li
+                  class="strct-flow__box strct-flow__box--{{ node.status ?? 'neutral' }}"
+                  [attr.data-flow-node]="node.id"
+                >
+                  @if (nodeTpl(); as tpl) {
+                    <ng-container
+                      [ngTemplateOutlet]="tpl"
+                      [ngTemplateOutletContext]="{ $implicit: node, node }"
+                    />
+                  } @else {
+                    <span class="strct-flow__label">{{ node.label }}</span>
+                    @if (node.role) {
+                      <span class="strct-flow__role">{{ node.role }}</span>
+                    }
+                    @if (node.sublabel) {
+                      <span class="strct-flow__sub">{{ node.sublabel }}</span>
+                    }
+                  }
+                  <span class="strct-flow__sr">{{ nodeSummary(node) }}</span>
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </div>
+      @if (label()) {
+        <div class="strct-flow__caption">{{ label() }}</div>
+      }
+    } @else {
+      <div class="strct-flow__row">
+        @for (node of nodes(); track node.id; let last = $last) {
+          <div class="strct-flow__node strct-flow__node--{{ node.status ?? 'neutral' }}">
+            <span class="strct-flow__dot" aria-hidden="true"></span>
+            <span class="strct-flow__node-text">
+              <span class="strct-flow__label">{{ node.label }}</span>
+              @if (node.role) {
+                <span class="strct-flow__role">{{ node.role }}</span>
+              }
+              @if (node.sublabel) {
+                <span class="strct-flow__sub">{{ node.sublabel }}</span>
+              }
+            </span>
+          </div>
 
-        @if (!last) {
-          <div class="strct-flow__conn" aria-hidden="true">
-            <span class="strct-flow__line"></span>
-            @if (showArrow('forward')) {
-              <span class="strct-flow__arrow strct-flow__arrow--fwd"></span>
-            }
-            @if (showArrow('reverse')) {
-              <span class="strct-flow__arrow strct-flow__arrow--rev"></span>
-            }
-            @if (animated()) {
+          @if (!last) {
+            <div class="strct-flow__conn" aria-hidden="true">
+              <span class="strct-flow__line"></span>
               @if (showArrow('forward')) {
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--1"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--2"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--3"></span>
+                <span class="strct-flow__arrow strct-flow__arrow--fwd"></span>
               }
               @if (showArrow('reverse')) {
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--1"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--2"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--3"></span>
+                <span class="strct-flow__arrow strct-flow__arrow--rev"></span>
               }
-            }
-          </div>
+              @if (animated()) {
+                @if (showArrow('forward')) {
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--1"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--2"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--3"></span>
+                }
+                @if (showArrow('reverse')) {
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--1"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--2"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--3"></span>
+                }
+              }
+            </div>
+          }
         }
-      }
-    </div>
+      </div>
 
-    @if (caption()) {
-      <div class="strct-flow__caption">{{ caption() }}</div>
+      @if (caption()) {
+        <div class="strct-flow__caption">{{ caption() }}</div>
+      }
     }
   `, host: {
                         class: 'strct-flow',
-                        role: 'img',
+                        '[attr.role]': "layout() === 'chain' ? 'img' : null",
+                        '[class.strct-flow--fan]': "layout() !== 'chain'",
                         '[class.strct-flow--vertical]': "orientation() === 'vertical'",
                         '[class.strct-flow--neutral]': "status() === 'neutral'",
                         '[class.strct-flow--accent]': "status() === 'accent'",
@@ -18276,9 +18537,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-flow--warning]': "status() === 'warning'",
                         '[class.strct-flow--critical]': "status() === 'critical'",
                         '[class.strct-flow--live]': 'animated()',
-                        '[attr.aria-label]': 'ariaLabel()',
-                    }, styles: [".strct-flow{--strct-flow-color: var(--acc);display:block}.strct-flow--neutral{--strct-flow-color: var(--t3)}.strct-flow--accent{--strct-flow-color: var(--acc)}.strct-flow--success{--strct-flow-color: var(--success)}.strct-flow--warning{--strct-flow-color: var(--warning)}.strct-flow--critical{--strct-flow-color: var(--critical)}.strct-flow__row{display:flex;align-items:center;gap:var(--space-2)}.strct-flow--vertical .strct-flow__row{flex-direction:column;align-items:stretch}.strct-flow__node{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);flex-shrink:0}.strct-flow__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--t3)}.strct-flow__node--accent .strct-flow__dot{background:var(--acc)}.strct-flow__node--success .strct-flow__dot{background:var(--success)}.strct-flow__node--warning .strct-flow__dot{background:var(--warning)}.strct-flow__node--critical .strct-flow__dot{background:var(--critical)}.strct-flow__node-text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-flow__label{font-size:var(--text-md);font-weight:600;color:var(--t1);line-height:1.2}.strct-flow__role{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--t3)}.strct-flow__sub{font-size:var(--text-sm);color:var(--t3)}.strct-flow__conn{position:relative;flex:1 1 auto;min-width:40px;height:2px;align-self:center}.strct-flow--vertical .strct-flow__conn{width:2px;min-width:0;height:28px;flex:0 0 28px;align-self:center}.strct-flow__line{position:absolute;inset:0;border-radius:2px;background:linear-gradient(to right,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow--vertical .strct-flow__line{background:linear-gradient(to bottom,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow__arrow{position:absolute;top:50%;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}.strct-flow__arrow--fwd{right:-1px;transform:translateY(-50%);border-inline-start:6px solid var(--strct-flow-color)}.strct-flow__arrow--rev{left:-1px;transform:translateY(-50%);border-inline-end:6px solid var(--strct-flow-color)}.strct-flow--vertical .strct-flow__arrow{top:auto;left:50%}.strct-flow--vertical .strct-flow__arrow--fwd{right:auto;bottom:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:6px solid var(--strct-flow-color);border-bottom:0}.strct-flow--vertical .strct-flow__arrow--rev{left:50%;top:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-bottom:6px solid var(--strct-flow-color);border-top:0}.strct-flow__pkt{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--strct-flow-color);box-shadow:0 0 5px var(--strct-flow-color)}.strct-flow--vertical .strct-flow__pkt{top:0;left:50%}.strct-flow__pkt--fwd{animation:strct-flow-fwd 1.8s linear infinite}.strct-flow__pkt--rev{animation:strct-flow-rev 1.8s linear infinite}.strct-flow--vertical .strct-flow__pkt--fwd{animation-name:strct-flow-fwd-v}.strct-flow--vertical .strct-flow__pkt--rev{animation-name:strct-flow-rev-v}.strct-flow__pkt--2{animation-delay:.6s}.strct-flow__pkt--3{animation-delay:1.2s}@keyframes strct-flow-fwd{0%{left:0;opacity:0}15%,85%{opacity:1}to{left:100%;opacity:0}}@keyframes strct-flow-rev{0%{left:100%;opacity:0}15%,85%{opacity:1}to{left:0;opacity:0}}@keyframes strct-flow-fwd-v{0%{top:0;opacity:0}15%,85%{opacity:1}to{top:100%;opacity:0}}@keyframes strct-flow-rev-v{0%{top:100%;opacity:0}15%,85%{opacity:1}to{top:0;opacity:0}}.strct-flow__caption{margin-top:var(--space-2);text-align:center;font-size:var(--text-sm);color:var(--t3)}.strct-flow--vertical .strct-flow__caption{text-align:start}@media(prefers-reduced-motion:reduce){.strct-flow__pkt{display:none}}\n"] }]
-        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+                        '[attr.aria-label]': "layout() === 'chain' ? ariaLabel() : null",
+                    }, styles: [".strct-flow{--strct-flow-color: var(--acc);display:block}.strct-flow--neutral{--strct-flow-color: var(--t3)}.strct-flow--accent{--strct-flow-color: var(--acc)}.strct-flow--success{--strct-flow-color: var(--success)}.strct-flow--warning{--strct-flow-color: var(--warning)}.strct-flow--critical{--strct-flow-color: var(--critical)}.strct-flow__row{display:flex;align-items:center;gap:var(--space-2)}.strct-flow--vertical .strct-flow__row{flex-direction:column;align-items:stretch}.strct-flow--fan{container-type:inline-size}.strct-flow__fan{position:relative;display:flex;align-items:flex-start;gap:var(--strct-flow-col-gap, 48px)}.strct-flow__edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.strct-flow__edge{stroke:var(--b3);stroke-width:1.5}.strct-flow__edge--accent{stroke:var(--acc)}.strct-flow__edge--success{stroke:var(--success)}.strct-flow__edge--warning{stroke:var(--warning)}.strct-flow__edge--critical{stroke:var(--critical)}.strct-flow__edge--dashed{stroke-dasharray:4 3}.strct-flow__edge--animated{stroke-dasharray:5 4;animation:strct-flow-dash 1s linear infinite}@keyframes strct-flow-dash{to{stroke-dashoffset:-9}}@media(prefers-reduced-motion:reduce){.strct-flow__edge--animated{animation:none}}.strct-flow__col{position:relative;flex:1 1 0;min-width:0}.strct-flow__colhead{font-size:var(--text-sm);font-weight:600;color:var(--t3);margin-block-end:var(--space-2)}.strct-flow__boxes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.strct-flow__box{display:flex;flex-direction:column;gap:3px;padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);min-width:0}.strct-flow__box--accent{border-color:var(--acc30)}.strct-flow__box--success{border-color:var(--success)}.strct-flow__box--warning{border-color:var(--warning)}.strct-flow__box--critical{border-color:var(--critical)}.strct-flow__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@container (max-width: 480px){.strct-flow__fan{flex-direction:column;gap:var(--space-3)}.strct-flow__edges{display:none}.strct-flow__col{padding-inline-start:var(--space-3);border-inline-start:2px solid var(--b2)}}.strct-flow__node{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);flex-shrink:0}.strct-flow__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--t3)}.strct-flow__node--accent .strct-flow__dot{background:var(--acc)}.strct-flow__node--success .strct-flow__dot{background:var(--success)}.strct-flow__node--warning .strct-flow__dot{background:var(--warning)}.strct-flow__node--critical .strct-flow__dot{background:var(--critical)}.strct-flow__node-text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-flow__label{font-size:var(--text-md);font-weight:600;color:var(--t1);line-height:1.2}.strct-flow__role{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--t3)}.strct-flow__sub{font-size:var(--text-sm);color:var(--t3)}.strct-flow__conn{position:relative;flex:1 1 auto;min-width:40px;height:2px;align-self:center}.strct-flow--vertical .strct-flow__conn{width:2px;min-width:0;height:28px;flex:0 0 28px;align-self:center}.strct-flow__line{position:absolute;inset:0;border-radius:2px;background:linear-gradient(to right,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow--vertical .strct-flow__line{background:linear-gradient(to bottom,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow__arrow{position:absolute;top:50%;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}.strct-flow__arrow--fwd{right:-1px;transform:translateY(-50%);border-inline-start:6px solid var(--strct-flow-color)}.strct-flow__arrow--rev{left:-1px;transform:translateY(-50%);border-inline-end:6px solid var(--strct-flow-color)}.strct-flow--vertical .strct-flow__arrow{top:auto;left:50%}.strct-flow--vertical .strct-flow__arrow--fwd{right:auto;bottom:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:6px solid var(--strct-flow-color);border-bottom:0}.strct-flow--vertical .strct-flow__arrow--rev{left:50%;top:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-bottom:6px solid var(--strct-flow-color);border-top:0}.strct-flow__pkt{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--strct-flow-color);box-shadow:0 0 5px var(--strct-flow-color)}.strct-flow--vertical .strct-flow__pkt{top:0;left:50%}.strct-flow__pkt--fwd{animation:strct-flow-fwd 1.8s linear infinite}.strct-flow__pkt--rev{animation:strct-flow-rev 1.8s linear infinite}.strct-flow--vertical .strct-flow__pkt--fwd{animation-name:strct-flow-fwd-v}.strct-flow--vertical .strct-flow__pkt--rev{animation-name:strct-flow-rev-v}.strct-flow__pkt--2{animation-delay:.6s}.strct-flow__pkt--3{animation-delay:1.2s}@keyframes strct-flow-fwd{0%{left:0;opacity:0}15%,85%{opacity:1}to{left:100%;opacity:0}}@keyframes strct-flow-rev{0%{left:100%;opacity:0}15%,85%{opacity:1}to{left:0;opacity:0}}@keyframes strct-flow-fwd-v{0%{top:0;opacity:0}15%,85%{opacity:1}to{top:100%;opacity:0}}@keyframes strct-flow-rev-v{0%{top:100%;opacity:0}15%,85%{opacity:1}to{top:0;opacity:0}}.strct-flow__caption{margin-top:var(--space-2);text-align:center;font-size:var(--text-sm);color:var(--t3)}.strct-flow--vertical .strct-flow__caption{text-align:start}@media(prefers-reduced-motion:reduce){.strct-flow__pkt{display:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], edges: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], nodeTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctFlowNodeTemplate), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 /**
  * Dense KPI tile: a label, a large value (+ unit), an optional change indicator
@@ -24448,5 +24709,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map