@akcelik/strct 5.27.0 → 5.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -21725,6 +21725,89 @@ class StrctFlow {
|
|
|
21725
21725
|
}));
|
|
21726
21726
|
}, /* @ts-ignore */
|
|
21727
21727
|
...(ngDevMode ? [{ debugName: "columnsView" }] : /* istanbul ignore next */ []));
|
|
21728
|
+
/**
|
|
21729
|
+
* One tab stop for the whole diagram, with the arrow keys walking it:
|
|
21730
|
+
* ← / → follow the edges (or the columns, where a node has none), ↑ / ↓ move
|
|
21731
|
+
* within a column, Home / End jump to its ends. Off by default, so a
|
|
21732
|
+
* decorative pipeline keeps no tab stop at all.
|
|
21733
|
+
*/
|
|
21734
|
+
navigable = input(false, { ...(ngDevMode ? { debugName: "navigable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
21735
|
+
/** Emitted when a node is clicked, or Enter / Space is pressed on it. */
|
|
21736
|
+
nodeActivate = output();
|
|
21737
|
+
/** The node the tab stop is on (its id). */
|
|
21738
|
+
cursor = signal(null, /* @ts-ignore */
|
|
21739
|
+
...(ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []));
|
|
21740
|
+
isCursor(node) {
|
|
21741
|
+
const at = this.cursor();
|
|
21742
|
+
if (at)
|
|
21743
|
+
return at === node.id;
|
|
21744
|
+
// Nothing focused yet: the first node of the first column holds the stop.
|
|
21745
|
+
return this.columnsView()[0]?.nodes[0]?.id === node.id;
|
|
21746
|
+
}
|
|
21747
|
+
activate(node) {
|
|
21748
|
+
if (!this.navigable())
|
|
21749
|
+
return;
|
|
21750
|
+
this.cursor.set(node.id);
|
|
21751
|
+
this.nodeActivate.emit(node);
|
|
21752
|
+
}
|
|
21753
|
+
onNodeKeydown(event, node) {
|
|
21754
|
+
if (!this.navigable())
|
|
21755
|
+
return;
|
|
21756
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
21757
|
+
event.preventDefault();
|
|
21758
|
+
this.activate(node);
|
|
21759
|
+
return;
|
|
21760
|
+
}
|
|
21761
|
+
const keys = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
|
|
21762
|
+
if (!keys.includes(event.key))
|
|
21763
|
+
return;
|
|
21764
|
+
event.preventDefault();
|
|
21765
|
+
const next = this.neighbour(node, event.key);
|
|
21766
|
+
if (next)
|
|
21767
|
+
this.focusNode(next);
|
|
21768
|
+
}
|
|
21769
|
+
/** Where a key leads from `node`: along an edge, or within the column. */
|
|
21770
|
+
neighbour(node, key) {
|
|
21771
|
+
const cols = this.columnsView();
|
|
21772
|
+
const col = cols.find((c) => c.nodes.some((n) => n.id === node.id));
|
|
21773
|
+
if (!col)
|
|
21774
|
+
return null;
|
|
21775
|
+
const within = col.nodes.findIndex((n) => n.id === node.id);
|
|
21776
|
+
const edges = this.edges() ?? [];
|
|
21777
|
+
switch (key) {
|
|
21778
|
+
case 'ArrowDown':
|
|
21779
|
+
return col.nodes[within + 1]?.id ?? col.nodes[0]?.id ?? null;
|
|
21780
|
+
case 'ArrowUp':
|
|
21781
|
+
return col.nodes[within - 1]?.id ?? col.nodes[col.nodes.length - 1]?.id ?? null;
|
|
21782
|
+
case 'Home':
|
|
21783
|
+
return col.nodes[0]?.id ?? null;
|
|
21784
|
+
case 'End':
|
|
21785
|
+
return col.nodes[col.nodes.length - 1]?.id ?? null;
|
|
21786
|
+
case 'ArrowRight': {
|
|
21787
|
+
// The edge is the structure: the first node this one leads to.
|
|
21788
|
+
const out = edges.find((e) => e.from === node.id)?.to;
|
|
21789
|
+
if (out)
|
|
21790
|
+
return out;
|
|
21791
|
+
const at = cols.indexOf(col);
|
|
21792
|
+
return cols[at + 1]?.nodes[0]?.id ?? null;
|
|
21793
|
+
}
|
|
21794
|
+
default: {
|
|
21795
|
+
const into = edges.find((e) => e.to === node.id)?.from;
|
|
21796
|
+
if (into)
|
|
21797
|
+
return into;
|
|
21798
|
+
const at = cols.indexOf(col);
|
|
21799
|
+
return cols[at - 1]?.nodes[0]?.id ?? null;
|
|
21800
|
+
}
|
|
21801
|
+
}
|
|
21802
|
+
}
|
|
21803
|
+
focusNode(id) {
|
|
21804
|
+
this.cursor.set(id);
|
|
21805
|
+
// Matched by reading the attribute rather than by building a selector:
|
|
21806
|
+
// an id is the consumer's string, and CSS.escape is not everywhere (jsdom
|
|
21807
|
+
// has none, and a throw here would silently leave the focus behind).
|
|
21808
|
+
const el = [...this.host.nativeElement.querySelectorAll('[data-flow-node]')].find((n) => n.getAttribute('data-flow-node') === id);
|
|
21809
|
+
el?.focus();
|
|
21810
|
+
}
|
|
21728
21811
|
/** What a node says to assistive tech: itself, then where it leads. */
|
|
21729
21812
|
nodeSummary(node) {
|
|
21730
21813
|
const out = (this.edges() ?? [])
|
|
@@ -21845,7 +21928,7 @@ class StrctFlow {
|
|
|
21845
21928
|
}, /* @ts-ignore */
|
|
21846
21929
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
21847
21930
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFlow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21848
|
-
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: `
|
|
21931
|
+
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 }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeActivate: "nodeActivate" }, 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: `
|
|
21849
21932
|
@if (layout() !== 'chain') {
|
|
21850
21933
|
<div class="strct-flow__fan" #fan>
|
|
21851
21934
|
<!-- The edges are geometry, not content: they are measured from the
|
|
@@ -21875,7 +21958,13 @@ class StrctFlow {
|
|
|
21875
21958
|
<li
|
|
21876
21959
|
class="strct-flow__box strct-flow__box--{{ node.status ?? 'neutral' }}"
|
|
21877
21960
|
[class.strct-flow__box--surface]="node.emphasis === 'surface'"
|
|
21961
|
+
[class.strct-flow__box--navigable]="navigable()"
|
|
21878
21962
|
[attr.data-flow-node]="node.id"
|
|
21963
|
+
[attr.role]="navigable() ? 'button' : null"
|
|
21964
|
+
[attr.tabindex]="navigable() ? (isCursor(node) ? 0 : -1) : null"
|
|
21965
|
+
(click)="activate(node)"
|
|
21966
|
+
(focus)="cursor.set(node.id)"
|
|
21967
|
+
(keydown)="onNodeKeydown($event, node)"
|
|
21879
21968
|
>
|
|
21880
21969
|
@if (nodeTpl(); as tpl) {
|
|
21881
21970
|
<ng-container
|
|
@@ -21883,6 +21972,14 @@ class StrctFlow {
|
|
|
21883
21972
|
[ngTemplateOutletContext]="{ $implicit: node, node }"
|
|
21884
21973
|
/>
|
|
21885
21974
|
} @else {
|
|
21975
|
+
@if (node.icon) {
|
|
21976
|
+
<strct-icon
|
|
21977
|
+
class="strct-flow__icon"
|
|
21978
|
+
[name]="node.icon"
|
|
21979
|
+
[size]="15"
|
|
21980
|
+
[strokeWidth]="1.4"
|
|
21981
|
+
/>
|
|
21982
|
+
}
|
|
21886
21983
|
<span class="strct-flow__label">{{ node.label }}</span>
|
|
21887
21984
|
@if (node.role) {
|
|
21888
21985
|
<span class="strct-flow__role">{{ node.role }}</span>
|
|
@@ -21947,11 +22044,11 @@ class StrctFlow {
|
|
|
21947
22044
|
<div class="strct-flow__caption">{{ caption() }}</div>
|
|
21948
22045
|
}
|
|
21949
22046
|
}
|
|
21950
|
-
`, 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__box--surface.strct-flow__box--accent{background:var(--acc-m);color:var(--acc)}.strct-flow__box--surface.strct-flow__box--success{background:var(--success-bg);color:var(--success)}.strct-flow__box--surface.strct-flow__box--warning{background:var(--warning-bg);color:var(--warning)}.strct-flow__box--surface.strct-flow__box--critical{background:var(--critical-bg);color:var(--critical)}.strct-flow__box--surface .strct-flow__sub,.strct-flow__box--surface .strct-flow__role{color:inherit;opacity:.85}.strct-flow__colempty{margin:0;padding:var(--space-2) var(--space-3);border:1px dashed var(--b2);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--t3)}.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:1px;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 });
|
|
22047
|
+
`, 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__box--surface.strct-flow__box--accent{background:var(--acc-m);color:var(--acc)}.strct-flow__box--surface.strct-flow__box--success{background:var(--success-bg);color:var(--success)}.strct-flow__box--surface.strct-flow__box--warning{background:var(--warning-bg);color:var(--warning)}.strct-flow__box--surface.strct-flow__box--critical{background:var(--critical-bg);color:var(--critical)}.strct-flow__box--surface .strct-flow__sub,.strct-flow__box--surface .strct-flow__role{color:inherit;opacity:.85}.strct-flow__colempty{margin:0;padding:var(--space-2) var(--space-3);border:1px dashed var(--b2);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--t3)}.strct-flow__box--navigable{cursor:pointer}.strct-flow__box--navigable:focus-visible{outline:2px solid var(--acc);outline-offset:2px}.strct-flow__icon{color:var(--t2);flex:none}.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:1px;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"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21951
22048
|
}
|
|
21952
22049
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFlow, decorators: [{
|
|
21953
22050
|
type: Component,
|
|
21954
|
-
args: [{ selector: 'strct-flow', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], template: `
|
|
22051
|
+
args: [{ selector: 'strct-flow', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, StrctIcon], template: `
|
|
21955
22052
|
@if (layout() !== 'chain') {
|
|
21956
22053
|
<div class="strct-flow__fan" #fan>
|
|
21957
22054
|
<!-- The edges are geometry, not content: they are measured from the
|
|
@@ -21981,7 +22078,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
21981
22078
|
<li
|
|
21982
22079
|
class="strct-flow__box strct-flow__box--{{ node.status ?? 'neutral' }}"
|
|
21983
22080
|
[class.strct-flow__box--surface]="node.emphasis === 'surface'"
|
|
22081
|
+
[class.strct-flow__box--navigable]="navigable()"
|
|
21984
22082
|
[attr.data-flow-node]="node.id"
|
|
22083
|
+
[attr.role]="navigable() ? 'button' : null"
|
|
22084
|
+
[attr.tabindex]="navigable() ? (isCursor(node) ? 0 : -1) : null"
|
|
22085
|
+
(click)="activate(node)"
|
|
22086
|
+
(focus)="cursor.set(node.id)"
|
|
22087
|
+
(keydown)="onNodeKeydown($event, node)"
|
|
21985
22088
|
>
|
|
21986
22089
|
@if (nodeTpl(); as tpl) {
|
|
21987
22090
|
<ng-container
|
|
@@ -21989,6 +22092,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
21989
22092
|
[ngTemplateOutletContext]="{ $implicit: node, node }"
|
|
21990
22093
|
/>
|
|
21991
22094
|
} @else {
|
|
22095
|
+
@if (node.icon) {
|
|
22096
|
+
<strct-icon
|
|
22097
|
+
class="strct-flow__icon"
|
|
22098
|
+
[name]="node.icon"
|
|
22099
|
+
[size]="15"
|
|
22100
|
+
[strokeWidth]="1.4"
|
|
22101
|
+
/>
|
|
22102
|
+
}
|
|
21992
22103
|
<span class="strct-flow__label">{{ node.label }}</span>
|
|
21993
22104
|
@if (node.role) {
|
|
21994
22105
|
<span class="strct-flow__role">{{ node.role }}</span>
|
|
@@ -22065,8 +22176,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
22065
22176
|
'[class.strct-flow--critical]': "status() === 'critical'",
|
|
22066
22177
|
'[class.strct-flow--live]': 'animated()',
|
|
22067
22178
|
'[attr.aria-label]': "layout() === 'chain' ? ariaLabel() : null",
|
|
22068
|
-
}, 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__box--surface.strct-flow__box--accent{background:var(--acc-m);color:var(--acc)}.strct-flow__box--surface.strct-flow__box--success{background:var(--success-bg);color:var(--success)}.strct-flow__box--surface.strct-flow__box--warning{background:var(--warning-bg);color:var(--warning)}.strct-flow__box--surface.strct-flow__box--critical{background:var(--critical-bg);color:var(--critical)}.strct-flow__box--surface .strct-flow__sub,.strct-flow__box--surface .strct-flow__role{color:inherit;opacity:.85}.strct-flow__colempty{margin:0;padding:var(--space-2) var(--space-3);border:1px dashed var(--b2);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--t3)}.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:1px;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"] }]
|
|
22069
|
-
}], 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 }] }] } });
|
|
22179
|
+
}, 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__box--surface.strct-flow__box--accent{background:var(--acc-m);color:var(--acc)}.strct-flow__box--surface.strct-flow__box--success{background:var(--success-bg);color:var(--success)}.strct-flow__box--surface.strct-flow__box--warning{background:var(--warning-bg);color:var(--warning)}.strct-flow__box--surface.strct-flow__box--critical{background:var(--critical-bg);color:var(--critical)}.strct-flow__box--surface .strct-flow__sub,.strct-flow__box--surface .strct-flow__role{color:inherit;opacity:.85}.strct-flow__colempty{margin:0;padding:var(--space-2) var(--space-3);border:1px dashed var(--b2);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--t3)}.strct-flow__box--navigable{cursor:pointer}.strct-flow__box--navigable:focus-visible{outline:2px solid var(--acc);outline-offset:2px}.strct-flow__icon{color:var(--t2);flex:none}.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:1px;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"] }]
|
|
22180
|
+
}], 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 }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], nodeActivate: [{ type: i0.Output, args: ["nodeActivate"] }] } });
|
|
22070
22181
|
|
|
22071
22182
|
/**
|
|
22072
22183
|
* Dense KPI tile: a label, a large value (+ unit), an optional change indicator
|