ngwr 14.7.0 → 14.9.0

package/fesm2022/ngwr-gradient-text.mjs

@@ -90,10 +90,10 @@ class WrGradientText {
                 return 'to right';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrGradientText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrGradientText, isStandalone: true, selector: "wr-gradient-text", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, animationSpeed: { classPropertyName: "animationSpeed", publicName: "animationSpeed", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, yoyo: { classPropertyName: "yoyo", publicName: "yoyo", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-gradient-text--border": "showBorder()", "class.wr-gradient-text--pause-on-hover": "pauseOnHover()", "class.wr-gradient-text--yoyo": "yoyo()", "class.wr-gradient-text--vertical": "direction() === 'vertical'", "class.wr-gradient-text--diagonal": "direction() === 'diagonal'", "style.--wr-gradient-text-image": "gradient()", "style.--wr-gradient-text-size": "size()", "style.--wr-gradient-text-duration": "animationSpeed() + 's'" }, classAttribute: "wr-gradient-text" }, ngImport: i0, template: "@if (showBorder()) {\n  <span class=\"wr-gradient-text__border\" aria-hidden=\"true\"></span>\n}\n<span class=\"wr-gradient-text__text\">\n  <ng-content />\n</span>\n", styles: [".wr-gradient-text{--wr-gradient-text-image: linear-gradient(to right, #5227ff, #ff9ffc, #b497cf, #5227ff);--wr-gradient-text-size: 300% 100%;--wr-gradient-text-duration: 8s;position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;font-weight:500;line-height:1.25;overflow:hidden}.wr-gradient-text--border{padding:.35rem .75rem;border-radius:1.25rem}.wr-gradient-text__text{position:relative;z-index:2;display:inline-block;background-image:var(--wr-gradient-text-image);background-size:var(--wr-gradient-text-size);background-position:0% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wr-gradient-text-horizontal var(--wr-gradient-text-duration) linear infinite}.wr-gradient-text__border{position:absolute;inset:0;border-radius:inherit;background-image:var(--wr-gradient-text-image);background-size:var(--wr-gradient-text-size);background-position:0% 50%;animation:wr-gradient-text-horizontal var(--wr-gradient-text-duration) linear infinite;z-index:0;pointer-events:none}.wr-gradient-text__border:before{content:\"\";position:absolute;inset:1px;border-radius:inherit;background-color:var(--wr-color-surface, #fff);z-index:1}.wr-gradient-text--vertical .wr-gradient-text__text,.wr-gradient-text--vertical .wr-gradient-text__border{background-position:50% 0%;animation-name:wr-gradient-text-vertical}.wr-gradient-text--diagonal .wr-gradient-text__text,.wr-gradient-text--diagonal .wr-gradient-text__border{background-position:0% 50%;animation-name:wr-gradient-text-horizontal}.wr-gradient-text--yoyo .wr-gradient-text__text,.wr-gradient-text--yoyo .wr-gradient-text__border{animation-direction:alternate}.wr-gradient-text--pause-on-hover:hover .wr-gradient-text__text,.wr-gradient-text--pause-on-hover:hover .wr-gradient-text__border{animation-play-state:paused}@keyframes wr-gradient-text-horizontal{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes wr-gradient-text-vertical{0%{background-position:50% 0%}to{background-position:50% 100%}}@media(prefers-reduced-motion:reduce){.wr-gradient-text__text,.wr-gradient-text__border{animation:none!important}}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrGradientText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: WrGradientText, isStandalone: true, selector: "wr-gradient-text", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, animationSpeed: { classPropertyName: "animationSpeed", publicName: "animationSpeed", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, yoyo: { classPropertyName: "yoyo", publicName: "yoyo", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-gradient-text--border": "showBorder()", "class.wr-gradient-text--pause-on-hover": "pauseOnHover()", "class.wr-gradient-text--yoyo": "yoyo()", "class.wr-gradient-text--vertical": "direction() === 'vertical'", "class.wr-gradient-text--diagonal": "direction() === 'diagonal'", "style.--wr-gradient-text-image": "gradient()", "style.--wr-gradient-text-size": "size()", "style.--wr-gradient-text-duration": "animationSpeed() + 's'" }, classAttribute: "wr-gradient-text" }, ngImport: i0, template: "@if (showBorder()) {\n  <span class=\"wr-gradient-text__border\" aria-hidden=\"true\"></span>\n}\n<span class=\"wr-gradient-text__text\">\n  <ng-content />\n</span>\n", styles: [".wr-gradient-text{--wr-gradient-text-image: linear-gradient(to right, #5227ff, #ff9ffc, #b497cf, #5227ff);--wr-gradient-text-size: 300% 100%;--wr-gradient-text-duration: 8s;position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;font-weight:500;line-height:1.25;overflow:hidden}.wr-gradient-text--border{padding:.35rem .75rem;border-radius:1.25rem}.wr-gradient-text__text{position:relative;z-index:2;display:inline-block;background-image:var(--wr-gradient-text-image);background-size:var(--wr-gradient-text-size);background-position:0% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wr-gradient-text-horizontal var(--wr-gradient-text-duration) linear infinite}.wr-gradient-text__border{position:absolute;inset:0;border-radius:inherit;background-image:var(--wr-gradient-text-image);background-size:var(--wr-gradient-text-size);background-position:0% 50%;animation:wr-gradient-text-horizontal var(--wr-gradient-text-duration) linear infinite;z-index:0;pointer-events:none}.wr-gradient-text__border:before{content:\"\";position:absolute;inset:1px;border-radius:inherit;background-color:var(--wr-color-surface, #fff);z-index:1}.wr-gradient-text--vertical .wr-gradient-text__text,.wr-gradient-text--vertical .wr-gradient-text__border{background-position:50% 0%;animation-name:wr-gradient-text-vertical}.wr-gradient-text--diagonal .wr-gradient-text__text,.wr-gradient-text--diagonal .wr-gradient-text__border{background-position:0% 50%;animation-name:wr-gradient-text-horizontal}.wr-gradient-text--yoyo .wr-gradient-text__text,.wr-gradient-text--yoyo .wr-gradient-text__border{animation-direction:alternate}.wr-gradient-text--pause-on-hover:hover .wr-gradient-text__text,.wr-gradient-text--pause-on-hover:hover .wr-gradient-text__border{animation-play-state:paused}@keyframes wr-gradient-text-horizontal{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes wr-gradient-text-vertical{0%{background-position:50% 0%}to{background-position:50% 100%}}@media(prefers-reduced-motion:reduce){.wr-gradient-text__text,.wr-gradient-text__border{animation:none!important}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrGradientText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrGradientText, decorators: [{
             type: Component,
             args: [{ selector: 'wr-gradient-text', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-gradient-text',

package/fesm2022/ngwr-gradient-text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-gradient-text.mjs","sources":["../../../projects/lib/gradient-text/gradient-text.ts","../../../projects/lib/gradient-text/gradient-text.html","../../../projects/lib/gradient-text/ngwr-gradient-text.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n *\n * Angular adaptation of the GradientText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/gradient-text\n *\n * The reactbits version uses `motion/react` to drive `background-position`\n * via rAF. This port is pure CSS — same effect via keyframes on\n * `background-position`, parameterised by inputs.\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { isSafeCssValue, numAttr } from 'ngwr/utils';\n\nimport type { WrGradientTextDirection } from './interfaces';\n\nconst DEFAULT_COLORS: readonly string[] = ['#5227FF', '#FF9FFC', '#B497CF'];\n\n/**\n * Animated multi-stop gradient text. The gradient slides across the text\n * via `background-clip: text`. Optional `[showBorder]` wraps the text in\n * a dark pill with the same animated gradient as a border ring.\n *\n * @example\n * ```html\n * <wr-gradient-text>Hello, ngwr!</wr-gradient-text>\n * <wr-gradient-text\n *   [colors]=\"['#5227FF', '#FF9FFC', '#B497CF']\"\n *   direction=\"diagonal\"\n *   [animationSpeed]=\"6\"\n *   [showBorder]=\"true\"\n * >\n *   Premium feature\n * </wr-gradient-text>\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/gradient-text\n */\n@Component({\n  selector: 'wr-gradient-text',\n  templateUrl: './gradient-text.html',\n  styleUrl: './gradient-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-gradient-text',\n    '[class.wr-gradient-text--border]': 'showBorder()',\n    '[class.wr-gradient-text--pause-on-hover]': 'pauseOnHover()',\n    '[class.wr-gradient-text--yoyo]': 'yoyo()',\n    '[class.wr-gradient-text--vertical]': \"direction() === 'vertical'\",\n    '[class.wr-gradient-text--diagonal]': \"direction() === 'diagonal'\",\n    '[style.--wr-gradient-text-image]': 'gradient()',\n    '[style.--wr-gradient-text-size]': 'size()',\n    '[style.--wr-gradient-text-duration]': \"animationSpeed() + 's'\",\n  },\n})\nexport class WrGradientText {\n  /** Gradient stops. @default ['#5227FF', '#FF9FFC', '#B497CF'] */\n  readonly colors = input<readonly string[]>(DEFAULT_COLORS);\n\n  /** Seconds per full sweep (or per half if `[yoyo]` is on). @default 8 */\n  readonly animationSpeed = input(8, { transform: numAttr(8) });\n\n  /** Wrap the text in a dark pill with the gradient as a border. @default false */\n  readonly showBorder = input(false, { transform: coerceBooleanProperty });\n\n  /** Gradient slide direction. @default 'horizontal' */\n  readonly direction = input<WrGradientTextDirection>('horizontal');\n\n  /** Pause the animation while hovered. @default false */\n  readonly pauseOnHover = input(false, { transform: coerceBooleanProperty });\n\n  /** Bounce back-and-forth instead of restarting. @default true */\n  readonly yoyo = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly gradient = computed(() => {\n    // The stops are JOINED into the gradient below and published as\n    // `--wr-gradient-text-image`, which the stylesheet substitutes into\n    // `background-image`. An entry that closes the library's own paren escapes\n    // into a sibling background layer, so one unsafe stop discards the palette\n    // rather than being repaired in place — a half-validated gradient is worse\n    // to look at than the default one.\n    const raw = this.colors();\n    const cols = raw.length > 0 && raw.every(color => isSafeCssValue(color)) ? raw : DEFAULT_COLORS;\n    // Duplicate the first colour at the end for seamless looping.\n    const stops = [...cols, cols[0]].join(', ');\n    const angle = this.directionAngle();\n    return `linear-gradient(${angle}, ${stops})`;\n  });\n\n  protected readonly size = computed(() => {\n    switch (this.direction()) {\n      case 'vertical':\n        return '100% 300%';\n      case 'diagonal':\n        return '300% 300%';\n      case 'horizontal':\n      default:\n        return '300% 100%';\n    }\n  });\n\n  private directionAngle(): string {\n    switch (this.direction()) {\n      case 'vertical':\n        return 'to bottom';\n      case 'diagonal':\n        return 'to bottom right';\n      case 'horizontal':\n      default:\n        return 'to right';\n    }\n  }\n}\n\nexport type { WrGradientTextDirection } from './interfaces';\n","@if (showBorder()) {\n  <span class=\"wr-gradient-text__border\" aria-hidden=\"true\"></span>\n}\n<span class=\"wr-gradient-text__text\">\n  <ng-content />\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-gradient-text.mjs","sources":["../../../projects/lib/gradient-text/gradient-text.ts","../../../projects/lib/gradient-text/gradient-text.html","../../../projects/lib/gradient-text/ngwr-gradient-text.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n *\n * Angular adaptation of the GradientText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/gradient-text\n *\n * The reactbits version uses `motion/react` to drive `background-position`\n * via rAF. This port is pure CSS — same effect via keyframes on\n * `background-position`, parameterised by inputs.\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { isSafeCssValue, numAttr } from 'ngwr/utils';\n\nimport type { WrGradientTextDirection } from './interfaces';\n\nconst DEFAULT_COLORS: readonly string[] = ['#5227FF', '#FF9FFC', '#B497CF'];\n\n/**\n * Animated multi-stop gradient text. The gradient slides across the text\n * via `background-clip: text`. Optional `[showBorder]` wraps the text in\n * a dark pill with the same animated gradient as a border ring.\n *\n * @example\n * ```html\n * <wr-gradient-text>Hello, ngwr!</wr-gradient-text>\n * <wr-gradient-text\n *   [colors]=\"['#5227FF', '#FF9FFC', '#B497CF']\"\n *   direction=\"diagonal\"\n *   [animationSpeed]=\"6\"\n *   [showBorder]=\"true\"\n * >\n *   Premium feature\n * </wr-gradient-text>\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/gradient-text\n */\n@Component({\n  selector: 'wr-gradient-text',\n  templateUrl: './gradient-text.html',\n  styleUrl: './gradient-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-gradient-text',\n    '[class.wr-gradient-text--border]': 'showBorder()',\n    '[class.wr-gradient-text--pause-on-hover]': 'pauseOnHover()',\n    '[class.wr-gradient-text--yoyo]': 'yoyo()',\n    '[class.wr-gradient-text--vertical]': \"direction() === 'vertical'\",\n    '[class.wr-gradient-text--diagonal]': \"direction() === 'diagonal'\",\n    '[style.--wr-gradient-text-image]': 'gradient()',\n    '[style.--wr-gradient-text-size]': 'size()',\n    '[style.--wr-gradient-text-duration]': \"animationSpeed() + 's'\",\n  },\n})\nexport class WrGradientText {\n  /** Gradient stops. @default ['#5227FF', '#FF9FFC', '#B497CF'] */\n  readonly colors = input<readonly string[]>(DEFAULT_COLORS);\n\n  /** Seconds per full sweep (or per half if `[yoyo]` is on). @default 8 */\n  readonly animationSpeed = input(8, { transform: numAttr(8) });\n\n  /** Wrap the text in a dark pill with the gradient as a border. @default false */\n  readonly showBorder = input(false, { transform: coerceBooleanProperty });\n\n  /** Gradient slide direction. @default 'horizontal' */\n  readonly direction = input<WrGradientTextDirection>('horizontal');\n\n  /** Pause the animation while hovered. @default false */\n  readonly pauseOnHover = input(false, { transform: coerceBooleanProperty });\n\n  /** Bounce back-and-forth instead of restarting. @default true */\n  readonly yoyo = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly gradient = computed(() => {\n    // The stops are JOINED into the gradient below and published as\n    // `--wr-gradient-text-image`, which the stylesheet substitutes into\n    // `background-image`. An entry that closes the library's own paren escapes\n    // into a sibling background layer, so one unsafe stop discards the palette\n    // rather than being repaired in place — a half-validated gradient is worse\n    // to look at than the default one.\n    const raw = this.colors();\n    const cols = raw.length > 0 && raw.every(color => isSafeCssValue(color)) ? raw : DEFAULT_COLORS;\n    // Duplicate the first colour at the end for seamless looping.\n    const stops = [...cols, cols[0]].join(', ');\n    const angle = this.directionAngle();\n    return `linear-gradient(${angle}, ${stops})`;\n  });\n\n  protected readonly size = computed(() => {\n    switch (this.direction()) {\n      case 'vertical':\n        return '100% 300%';\n      case 'diagonal':\n        return '300% 300%';\n      case 'horizontal':\n      default:\n        return '300% 100%';\n    }\n  });\n\n  private directionAngle(): string {\n    switch (this.direction()) {\n      case 'vertical':\n        return 'to bottom';\n      case 'diagonal':\n        return 'to bottom right';\n      case 'horizontal':\n      default:\n        return 'to right';\n    }\n  }\n}\n\nexport type { WrGradientTextDirection } from './interfaces';\n","@if (showBorder()) {\n  <span class=\"wr-gradient-text__border\" aria-hidden=\"true\"></span>\n}\n<span class=\"wr-gradient-text__text\">\n  <ng-content />\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-graph-testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-graph-testing.mjs","sources":["../../../projects/lib/graph/testing/wr-graph-node-harness.ts","../../../projects/lib/graph/testing/wr-graph-harness.ts","../../../projects/lib/graph/testing/ngwr-graph-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, type ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrGraphNodeHarnessFilters } from './interfaces';\n\n/** The visually hidden relation sentence the graph writes into every node that has an edge. */\nconst SR_ONLY = '.wr-graph__sr-only';\n\n/**\n * The node's OWN sentence. Anchored with `:scope >` because the graph writes it as a\n * direct child, after whatever the template drew — so a `<wr-graph>` nested inside a\n * node template would otherwise hand its first node's sentence to the outer node.\n */\nconst RELATION = `:scope > ${SR_ONLY}`;\n\n/**\n * What {@link WrGraphNodeHarness.getText} leaves out: the node's own sentence, and any\n * `<wr-graph>` a template drew inside the node. That inner graph is a graph of its own —\n * its cards are its nodes, read through its own harness — so counting its text as the\n * outer node's would let a RegExp label match the outer graph by a node it does not own.\n */\nconst NOT_DRAWN_BY_NODE = `${SR_ONLY}, wr-graph`;\n\n/**\n * Test harness for one node of a `<wr-graph>` — a `role=\"listitem\"` block.\n *\n * A node answers two questions, and they are kept apart on purpose. {@link getText} is\n * what is DRAWN: the default card, or whatever a `wrGraphNode` template rendered.\n * {@link getRelationText} is what is ANNOUNCED about its place in the graph: the\n * lines are `aria-hidden`, so the visually hidden sentence naming the parents and the\n * children is the only form the structure takes for a screen reader. A spec that read\n * the node's whole text would get both glued together, and would keep passing on a\n * graph whose relation sentences named the wrong neighbours.\n *\n * There is no `getId()`. The component writes a node's id nowhere in the DOM — only\n * an edge carries ids, on its `data-from` / `data-to` — so a node is addressed by what\n * it draws, and {@link WrGraphHarness.getEdges} is where ids are read.\n *\n * @example\n * ```ts\n * const birch = await graph.getNode({ label: 'Birch' });\n *\n * expect(await birch.getText()).toBe('Birch');\n * expect(await birch.getRelationText()).toBe('Parents: Atlas. Children: Dune.');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrGraphNodeHarness extends ComponentHarness {\n  static hostSelector = '.wr-graph__node';\n\n  /**\n   * Build a predicate that narrows the query.\n   *\n   * Typed on `this`, so the predicate is built for whichever node harness it is called\n   * on — {@link WrGraphHarness.getNodes} narrows its own, direct-child query through\n   * the same options.\n   */\n  static with<T extends WrGraphNodeHarness>(\n    this: ComponentHarnessConstructor<T>,\n    options: WrGraphNodeHarnessFilters = {}\n  ): HarnessPredicate<T> {\n    return new HarnessPredicate(this, options).addOption('label', options.label, (harness, label) =>\n      HarnessPredicate.stringMatches(harness.getText(), label)\n    );\n  }\n\n  /**\n   * The text the node DRAWS, trimmed, with the relation sentence left out.\n   *\n   * The sentence is a real text node inside the block — visually hidden, not removed —\n   * so a plain text read would end in `Parents: Atlas. Children: Dune.`. It is excluded\n   * rather than subtracted.\n   *\n   * A `<wr-graph>` a template nests inside the node is left out whole, cards and\n   * sentences alike: it is a graph of its own, and its nodes answer to its own harness.\n   * So a node drawing `Harbor` above an inner graph of `Kestrel` and `Lark` reads\n   * `Harbor`, and a `/Lark/` label does not match it.\n   */\n  async getText(): Promise<string> {\n    return (await this.host()).text({ exclude: NOT_DRAWN_BY_NODE });\n  }\n\n  /**\n   * The sentence a screen reader hears about the node's place in the graph — its\n   * parents, then its children, as the catalog words them — or `null` for a node with\n   * no edges, which the graph gives no sentence at all.\n   *\n   * `null` rather than `''`: the component never writes an empty sentence, so an empty\n   * string could only mean the element exists and says nothing, which is a different\n   * failure from a node that has nothing to say.\n   */\n  async getRelationText(): Promise<string | null> {\n    const relation = await this.locatorForOptional(RELATION)();\n    return relation ? relation.text() : null;\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrGraphHarnessFilters, WrGraphNodeHarnessFilters } from './interfaces';\nimport { WrGraphNodeHarness } from './wr-graph-node-harness';\n\n/**\n * Every part of the graph is reached down one fixed chain of direct children. A node\n * template may draw anything, including another `<wr-graph>`, and a descendant query\n * from the outer host would count the inner graph's nodes and edges as its own.\n */\nconst VIEWPORT = ':scope > .wr-graph__viewport';\nconst STAGE = `${VIEWPORT} > .wr-graph__stage`;\nconst EDGE = `${STAGE} > .wr-graph__edges > .wr-graph__edge`;\nconst NODE = `${STAGE} > .wr-graph__nodes > .wr-graph__node`;\n\n/**\n * The same node harness, anchored to one graph. Not exported: queried from any other\n * root the `:scope` would be the wrong element, so a consumer loads\n * {@link WrGraphNodeHarness} and this class only ever comes back from\n * {@link WrGraphHarness.getNodes}.\n */\nclass WrGraphOwnNodeHarness extends WrGraphNodeHarness {\n  static override hostSelector = NODE;\n}\n\n/**\n * The filters as a failure message should show them. Not `JSON.stringify`: it prints a\n * RegExp as `{}`, so a caller who had already passed one was shown nothing and then told\n * to use a RegExp. A RegExp reads as its literal, `/source/flags`; everything else as JSON.\n */\nfunction describeFilters(filters: WrGraphNodeHarnessFilters): string {\n  const entries: [string, unknown][] = Object.entries(filters);\n  const shown = entries\n    .filter(([, value]) => value !== undefined)\n    .map(([key, value]) => `${key}: ${value instanceof RegExp ? String(value) : JSON.stringify(value)}`);\n  return shown.length ? `{ ${shown.join(', ')} }` : '{}';\n}\n\n/**\n * Test harness for `<wr-graph>` — blocks joined by parent-child lines, laid out in\n * layers, display only.\n *\n * The graph is read the way assistive technology reads it: the viewport's name, the\n * nodes as a list in READING order (layer, then inline position — which is DOM order),\n * each node's drawn text and its relation sentence, and the edges as the `from` / `to`\n * ids the component writes on each line. Those are what break when the data wiring\n * does.\n *\n * Three methods are deliberately absent, and each would answer the same for a working\n * graph and a broken one:\n *\n * - **No edge path `d`.** A path is a rendering detail: rounded to two decimals, mirrored\n *   under RTL, and moved by every node size and gap. The same rule as\n *   `WrLineChartHarness`.\n * - **No node positions.** jsdom lays nothing out, so every measured box is 0×0. The\n *   inline `transform` IS the component's own write and would be readable, but its\n *   numbers belong to a layout that is internal in this release — a harness method\n *   returning them would make every layout improvement a breaking change to consumer\n *   specs. Coordinates are pinned in the layout's own pure spec, where the arithmetic is.\n * - **No \"is scrollable\".** Overflow is layout: in jsdom `scrollWidth` and `clientWidth`\n *   are both 0 for a graph that fits and for one ten times wider. The viewport's\n *   `tabindex` is no proxy either — it is always `0`, precisely so the tab stop never\n *   depends on a measurement.\n *\n * An empty graph and a graph whose layout drew nothing render the same DOM, so the\n * harness cannot tell them apart. {@link getNodes} answers `[]` for both, which is the\n * honest way to assert emptiness; {@link getEdges} refuses instead, because \"no edges\"\n * would be vacuously true of a graph that drew nothing at all.\n *\n * @example\n * ```ts\n * const graph = await loader.getHarness(WrGraphHarness.with({ ariaLabel: 'Team structure' }));\n *\n * expect(await graph.getEdges()).toEqual([{ from: 'atlas', to: 'birch' }]);\n * const birch = await graph.getNode({ label: 'Birch' });\n * expect(await birch.getRelationText()).toBe('Parents: Atlas.');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrGraphHarness extends ComponentHarness {\n  static hostSelector = 'wr-graph';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrGraphHarnessFilters = {}): HarnessPredicate<WrGraphHarness> {\n    return new HarnessPredicate(WrGraphHarness, options)\n      .addOption('ariaLabel', options.ariaLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n      )\n      .addOption(\n        'nodeLabel',\n        options.nodeLabel,\n        async (harness, label) => (await harness.getNodes({ label })).length > 0\n      );\n  }\n\n  /**\n   * The viewport's accessible name — the scroller is the graph's one tab stop and the\n   * element that carries it, never the host.\n   */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.locatorFor(VIEWPORT)()).getAttribute('aria-label');\n  }\n\n  /**\n   * This graph's nodes, in reading order, narrowed by the filters.\n   *\n   * Only the graph's own: a graph drawn inside one of its node templates has nodes of\n   * its own, and they are not this graph's. `[]` for a graph that draws no node — see\n   * the class note for why that answer cannot tell empty data from a layout that drew\n   * nothing.\n   */\n  async getNodes(filters: WrGraphNodeHarnessFilters = {}): Promise<WrGraphNodeHarness[]> {\n    return this.locatorForAll(WrGraphOwnNodeHarness.with(filters))();\n  }\n\n  /** The first node matching the filters, or a failure that says what the graph draws. */\n  async getNode(filters: WrGraphNodeHarnessFilters): Promise<WrGraphNodeHarness> {\n    const [node] = await this.getNodes(filters);\n    if (node) return node;\n\n    const nodes = await this.getNodes();\n    if (!nodes.length) {\n      throw new Error(\n        `WrGraphHarness.getNode(): no node matched ${describeFilters(filters)} because the graph draws no nodes ` +\n          'at all — its nodes are empty, or its layout returned nothing it could draw.'\n      );\n    }\n    const texts = await Promise.all(nodes.map(each => each.getText()));\n    throw new Error(\n      `WrGraphHarness.getNode(): no node matched ${describeFilters(filters)}. The graph draws ` +\n        `[${texts.join(', ')}] — a label is matched against the DRAWN text, so a template that renders more ` +\n        'than the label needs a RegExp.'\n    );\n  }\n\n  /**\n   * One `{ from, to }` per line drawn, read off the path's `data-from` / `data-to` —\n   * node ids, the only place the DOM writes one — in the order the edges were given,\n   * with the edges the graph skipped left out. Parallel edges each appear, since each is\n   * its own line.\n   *\n   * Throws on a graph that draws no nodes, rather than answering `[]`: that answer would\n   * be the same for empty data and for a layout that drew nothing, and a spec asserting\n   * \"no edges\" would pass on both.\n   */\n  async getEdges(): Promise<{ from: string; to: string }[]> {\n    if (!(await this.locatorForAll(NODE)()).length) {\n      throw new Error(\n        'WrGraphHarness.getEdges(): the graph draws no nodes, so an empty edge list would be vacuously true — ' +\n          'it reads the same for empty data and for a layout that drew nothing. Assert getNodes() is empty ' +\n          'when an empty graph is what the spec means.'\n      );\n    }\n\n    const paths = await this.locatorForAll(EDGE)();\n    return Promise.all(\n      paths.map(async (path, index) => {\n        const [from, to] = await Promise.all([path.getAttribute('data-from'), path.getAttribute('data-to')]);\n        if (from === null || to === null) {\n          throw new Error(\n            `WrGraphHarness.getEdges(): line #${index} carries no data-from / data-to, so which nodes it joins ` +\n              'is not written anywhere a test can read.'\n          );\n        }\n        return { from, to };\n      })\n    );\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-graph-testing.mjs","sources":["../../../projects/lib/graph/testing/wr-graph-node-harness.ts","../../../projects/lib/graph/testing/wr-graph-harness.ts","../../../projects/lib/graph/testing/ngwr-graph-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, type ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrGraphNodeHarnessFilters } from './interfaces';\n\n/** The visually hidden relation sentence the graph writes into every node that has an edge. */\nconst SR_ONLY = '.wr-graph__sr-only';\n\n/**\n * The node's OWN sentence. Anchored with `:scope >` because the graph writes it as a\n * direct child, after whatever the template drew — so a `<wr-graph>` nested inside a\n * node template would otherwise hand its first node's sentence to the outer node.\n */\nconst RELATION = `:scope > ${SR_ONLY}`;\n\n/**\n * What {@link WrGraphNodeHarness.getText} leaves out: the node's own sentence, and any\n * `<wr-graph>` a template drew inside the node. That inner graph is a graph of its own —\n * its cards are its nodes, read through its own harness — so counting its text as the\n * outer node's would let a RegExp label match the outer graph by a node it does not own.\n */\nconst NOT_DRAWN_BY_NODE = `${SR_ONLY}, wr-graph`;\n\n/**\n * Test harness for one node of a `<wr-graph>` — a `role=\"listitem\"` block.\n *\n * A node answers two questions, and they are kept apart on purpose. {@link getText} is\n * what is DRAWN: the default card, or whatever a `wrGraphNode` template rendered.\n * {@link getRelationText} is what is ANNOUNCED about its place in the graph: the\n * lines are `aria-hidden`, so the visually hidden sentence naming the parents and the\n * children is the only form the structure takes for a screen reader. A spec that read\n * the node's whole text would get both glued together, and would keep passing on a\n * graph whose relation sentences named the wrong neighbours.\n *\n * There is no `getId()`. The component writes a node's id nowhere in the DOM — only\n * an edge carries ids, on its `data-from` / `data-to` — so a node is addressed by what\n * it draws, and {@link WrGraphHarness.getEdges} is where ids are read.\n *\n * @example\n * ```ts\n * const birch = await graph.getNode({ label: 'Birch' });\n *\n * expect(await birch.getText()).toBe('Birch');\n * expect(await birch.getRelationText()).toBe('Parents: Atlas. Children: Dune.');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrGraphNodeHarness extends ComponentHarness {\n  static hostSelector = '.wr-graph__node';\n\n  /**\n   * Build a predicate that narrows the query.\n   *\n   * Typed on `this`, so the predicate is built for whichever node harness it is called\n   * on — {@link WrGraphHarness.getNodes} narrows its own, direct-child query through\n   * the same options.\n   */\n  static with<T extends WrGraphNodeHarness>(\n    this: ComponentHarnessConstructor<T>,\n    options: WrGraphNodeHarnessFilters = {}\n  ): HarnessPredicate<T> {\n    return new HarnessPredicate(this, options).addOption('label', options.label, (harness, label) =>\n      HarnessPredicate.stringMatches(harness.getText(), label)\n    );\n  }\n\n  /**\n   * The text the node DRAWS, trimmed, with the relation sentence left out.\n   *\n   * The sentence is a real text node inside the block — visually hidden, not removed —\n   * so a plain text read would end in `Parents: Atlas. Children: Dune.`. It is excluded\n   * rather than subtracted.\n   *\n   * A `<wr-graph>` a template nests inside the node is left out whole, cards and\n   * sentences alike: it is a graph of its own, and its nodes answer to its own harness.\n   * So a node drawing `Harbor` above an inner graph of `Kestrel` and `Lark` reads\n   * `Harbor`, and a `/Lark/` label does not match it.\n   */\n  async getText(): Promise<string> {\n    return (await this.host()).text({ exclude: NOT_DRAWN_BY_NODE });\n  }\n\n  /**\n   * The sentence a screen reader hears about the node's place in the graph — its\n   * parents, then its children, as the catalog words them — or `null` for a node with\n   * no edges, which the graph gives no sentence at all.\n   *\n   * `null` rather than `''`: the component never writes an empty sentence, so an empty\n   * string could only mean the element exists and says nothing, which is a different\n   * failure from a node that has nothing to say.\n   */\n  async getRelationText(): Promise<string | null> {\n    const relation = await this.locatorForOptional(RELATION)();\n    return relation ? relation.text() : null;\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrGraphHarnessFilters, WrGraphNodeHarnessFilters } from './interfaces';\nimport { WrGraphNodeHarness } from './wr-graph-node-harness';\n\n/**\n * Every part of the graph is reached down one fixed chain of direct children. A node\n * template may draw anything, including another `<wr-graph>`, and a descendant query\n * from the outer host would count the inner graph's nodes and edges as its own.\n */\nconst VIEWPORT = ':scope > .wr-graph__viewport';\nconst STAGE = `${VIEWPORT} > .wr-graph__stage`;\nconst EDGE = `${STAGE} > .wr-graph__edges > .wr-graph__edge`;\nconst NODE = `${STAGE} > .wr-graph__nodes > .wr-graph__node`;\n\n/**\n * The same node harness, anchored to one graph. Not exported: queried from any other\n * root the `:scope` would be the wrong element, so a consumer loads\n * {@link WrGraphNodeHarness} and this class only ever comes back from\n * {@link WrGraphHarness.getNodes}.\n */\nclass WrGraphOwnNodeHarness extends WrGraphNodeHarness {\n  static override hostSelector = NODE;\n}\n\n/**\n * The filters as a failure message should show them. Not `JSON.stringify`: it prints a\n * RegExp as `{}`, so a caller who had already passed one was shown nothing and then told\n * to use a RegExp. A RegExp reads as its literal, `/source/flags`; everything else as JSON.\n */\nfunction describeFilters(filters: WrGraphNodeHarnessFilters): string {\n  const entries: [string, unknown][] = Object.entries(filters);\n  const shown = entries\n    .filter(([, value]) => value !== undefined)\n    .map(([key, value]) => `${key}: ${value instanceof RegExp ? String(value) : JSON.stringify(value)}`);\n  return shown.length ? `{ ${shown.join(', ')} }` : '{}';\n}\n\n/**\n * Test harness for `<wr-graph>` — blocks joined by parent-child lines, laid out in\n * layers, display only.\n *\n * The graph is read the way assistive technology reads it: the viewport's name, the\n * nodes as a list in READING order (layer, then inline position — which is DOM order),\n * each node's drawn text and its relation sentence, and the edges as the `from` / `to`\n * ids the component writes on each line. Those are what break when the data wiring\n * does.\n *\n * Three methods are deliberately absent, and each would answer the same for a working\n * graph and a broken one:\n *\n * - **No edge path `d`.** A path is a rendering detail: rounded to two decimals, mirrored\n *   under RTL, and moved by every node size and gap. The same rule as\n *   `WrLineChartHarness`.\n * - **No node positions.** jsdom lays nothing out, so every measured box is 0×0. The\n *   inline `transform` IS the component's own write and would be readable, but its\n *   numbers belong to a layout that is internal in this release — a harness method\n *   returning them would make every layout improvement a breaking change to consumer\n *   specs. Coordinates are pinned in the layout's own pure spec, where the arithmetic is.\n * - **No \"is scrollable\".** Overflow is layout: in jsdom `scrollWidth` and `clientWidth`\n *   are both 0 for a graph that fits and for one ten times wider. The viewport's\n *   `tabindex` is no proxy either — it is always `0`, precisely so the tab stop never\n *   depends on a measurement.\n *\n * An empty graph and a graph whose layout drew nothing render the same DOM, so the\n * harness cannot tell them apart. {@link getNodes} answers `[]` for both, which is the\n * honest way to assert emptiness; {@link getEdges} refuses instead, because \"no edges\"\n * would be vacuously true of a graph that drew nothing at all.\n *\n * @example\n * ```ts\n * const graph = await loader.getHarness(WrGraphHarness.with({ ariaLabel: 'Team structure' }));\n *\n * expect(await graph.getEdges()).toEqual([{ from: 'atlas', to: 'birch' }]);\n * const birch = await graph.getNode({ label: 'Birch' });\n * expect(await birch.getRelationText()).toBe('Parents: Atlas.');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrGraphHarness extends ComponentHarness {\n  static hostSelector = 'wr-graph';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrGraphHarnessFilters = {}): HarnessPredicate<WrGraphHarness> {\n    return new HarnessPredicate(WrGraphHarness, options)\n      .addOption('ariaLabel', options.ariaLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n      )\n      .addOption(\n        'nodeLabel',\n        options.nodeLabel,\n        async (harness, label) => (await harness.getNodes({ label })).length > 0\n      );\n  }\n\n  /**\n   * The viewport's accessible name — the scroller is the graph's one tab stop and the\n   * element that carries it, never the host.\n   */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.locatorFor(VIEWPORT)()).getAttribute('aria-label');\n  }\n\n  /**\n   * This graph's nodes, in reading order, narrowed by the filters.\n   *\n   * Only the graph's own: a graph drawn inside one of its node templates has nodes of\n   * its own, and they are not this graph's. `[]` for a graph that draws no node — see\n   * the class note for why that answer cannot tell empty data from a layout that drew\n   * nothing.\n   */\n  async getNodes(filters: WrGraphNodeHarnessFilters = {}): Promise<WrGraphNodeHarness[]> {\n    return this.locatorForAll(WrGraphOwnNodeHarness.with(filters))();\n  }\n\n  /** The first node matching the filters, or a failure that says what the graph draws. */\n  async getNode(filters: WrGraphNodeHarnessFilters): Promise<WrGraphNodeHarness> {\n    const [node] = await this.getNodes(filters);\n    if (node) return node;\n\n    const nodes = await this.getNodes();\n    if (!nodes.length) {\n      throw new Error(\n        `WrGraphHarness.getNode(): no node matched ${describeFilters(filters)} because the graph draws no nodes ` +\n          'at all — its nodes are empty, or its layout returned nothing it could draw.'\n      );\n    }\n    const texts = await Promise.all(nodes.map(each => each.getText()));\n    throw new Error(\n      `WrGraphHarness.getNode(): no node matched ${describeFilters(filters)}. The graph draws ` +\n        `[${texts.join(', ')}] — a label is matched against the DRAWN text, so a template that renders more ` +\n        'than the label needs a RegExp.'\n    );\n  }\n\n  /**\n   * One `{ from, to }` per line drawn, read off the path's `data-from` / `data-to` —\n   * node ids, the only place the DOM writes one — in the order the edges were given,\n   * with the edges the graph skipped left out. Parallel edges each appear, since each is\n   * its own line.\n   *\n   * Throws on a graph that draws no nodes, rather than answering `[]`: that answer would\n   * be the same for empty data and for a layout that drew nothing, and a spec asserting\n   * \"no edges\" would pass on both.\n   */\n  async getEdges(): Promise<{ from: string; to: string }[]> {\n    if (!(await this.locatorForAll(NODE)()).length) {\n      throw new Error(\n        'WrGraphHarness.getEdges(): the graph draws no nodes, so an empty edge list would be vacuously true — ' +\n          'it reads the same for empty data and for a layout that drew nothing. Assert getNodes() is empty ' +\n          'when an empty graph is what the spec means.'\n      );\n    }\n\n    const paths = await this.locatorForAll(EDGE)();\n    return Promise.all(\n      paths.map(async (path, index) => {\n        const [from, to] = await Promise.all([path.getAttribute('data-from'), path.getAttribute('data-to')]);\n        if (from === null || to === null) {\n          throw new Error(\n            `WrGraphHarness.getEdges(): line #${index} carries no data-from / data-to, so which nodes it joins ` +\n              'is not written anywhere a test can read.'\n          );\n        }\n        return { from, to };\n      })\n    );\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-graph.mjs

@@ -30,10 +30,10 @@ import { numAttr } from 'ngwr/utils';
  */
 class WrGraphNodeTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrGraphNodeTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: WrGraphNodeTemplate, isStandalone: true, selector: "ng-template[wrGraphNode]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrGraphNodeTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: WrGraphNodeTemplate, isStandalone: true, selector: "ng-template[wrGraphNode]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrGraphNodeTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrGraphNodeTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[wrGraphNode]',
@@ -1094,10 +1094,10 @@ class WrGraph {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrGraph, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrGraph, isStandalone: true, selector: "wr-graph", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, nodeWidth: { classPropertyName: "nodeWidth", publicName: "nodeWidth", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-graph" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: WrGraphNodeTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "@let graph = view();\n<!-- The scroller is the one tab stop: a named group, so its label is allowed, and focusable so a keyboard can scroll it. -->\n<div class=\"wr-graph__viewport\" role=\"group\" tabindex=\"0\" [attr.aria-label]=\"label()\">\n  <div class=\"wr-graph__stage\" [style.width.px]=\"graph.width\" [style.height.px]=\"graph.height\">\n    <svg\n      class=\"wr-graph__edges\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      [attr.width]=\"graph.width\"\n      [attr.height]=\"graph.height\"\n    >\n      <defs>\n        <marker\n          [attr.id]=\"markerId\"\n          viewBox=\"0 0 10 10\"\n          refX=\"10\"\n          refY=\"5\"\n          markerUnits=\"userSpaceOnUse\"\n          [attr.markerWidth]=\"arrowSize\"\n          [attr.markerHeight]=\"arrowSize\"\n          orient=\"auto\"\n        >\n          <polygon points=\"0,1 10,5 0,9\" />\n        </marker>\n      </defs>\n      @for (edge of graph.edges; track edge.id) {\n        <path\n          class=\"wr-graph__edge\"\n          [attr.d]=\"edge.d\"\n          [attr.data-from]=\"edge.from\"\n          [attr.data-to]=\"edge.to\"\n          [attr.marker-end]=\"markerUrl\"\n        />\n      }\n    </svg>\n    <!-- Items are DIRECT children of the list: a wrapper carrying ARIA or a tabindex would break ownership. -->\n    <div class=\"wr-graph__nodes\" [attr.role]=\"graph.nodes.length ? 'list' : null\">\n      @for (entry of graph.nodes; track entry.node.id) {\n        @let relation = relations().get(entry.node.id);\n        <div\n          class=\"wr-graph__node\"\n          role=\"listitem\"\n          [style.width.px]=\"entry.width\"\n          [style.height.px]=\"entry.height\"\n          [style.transform]=\"entry.transform\"\n        >\n          @if (nodeTemplate(); as custom) {\n            <ng-container [ngTemplateOutlet]=\"custom.template\" [ngTemplateOutletContext]=\"{ $implicit: entry.node }\" />\n          } @else {\n            <div class=\"wr-graph__card\">{{ entry.node.label }}</div>\n          }\n          @if (relation) {\n            <span class=\"wr-graph__sr-only\">{{ relation }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrGraph, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: WrGraph, isStandalone: true, selector: "wr-graph", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, nodeWidth: { classPropertyName: "nodeWidth", publicName: "nodeWidth", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-graph" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: WrGraphNodeTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "@let graph = view();\n<!-- The scroller is the one tab stop: a named group, so its label is allowed, and focusable so a keyboard can scroll it. -->\n<div class=\"wr-graph__viewport\" role=\"group\" tabindex=\"0\" [attr.aria-label]=\"label()\">\n  <div class=\"wr-graph__stage\" [style.width.px]=\"graph.width\" [style.height.px]=\"graph.height\">\n    <svg\n      class=\"wr-graph__edges\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      [attr.width]=\"graph.width\"\n      [attr.height]=\"graph.height\"\n    >\n      <defs>\n        <marker\n          [attr.id]=\"markerId\"\n          viewBox=\"0 0 10 10\"\n          refX=\"10\"\n          refY=\"5\"\n          markerUnits=\"userSpaceOnUse\"\n          [attr.markerWidth]=\"arrowSize\"\n          [attr.markerHeight]=\"arrowSize\"\n          orient=\"auto\"\n        >\n          <polygon points=\"0,1 10,5 0,9\" />\n        </marker>\n      </defs>\n      @for (edge of graph.edges; track edge.id) {\n        <path\n          class=\"wr-graph__edge\"\n          [attr.d]=\"edge.d\"\n          [attr.data-from]=\"edge.from\"\n          [attr.data-to]=\"edge.to\"\n          [attr.marker-end]=\"markerUrl\"\n        />\n      }\n    </svg>\n    <!-- Items are DIRECT children of the list: a wrapper carrying ARIA or a tabindex would break ownership. -->\n    <div class=\"wr-graph__nodes\" [attr.role]=\"graph.nodes.length ? 'list' : null\">\n      @for (entry of graph.nodes; track entry.node.id) {\n        @let relation = relations().get(entry.node.id);\n        <div\n          class=\"wr-graph__node\"\n          role=\"listitem\"\n          [style.width.px]=\"entry.width\"\n          [style.height.px]=\"entry.height\"\n          [style.transform]=\"entry.transform\"\n        >\n          @if (nodeTemplate(); as custom) {\n            <ng-container [ngTemplateOutlet]=\"custom.template\" [ngTemplateOutletContext]=\"{ $implicit: entry.node }\" />\n          } @else {\n            <div class=\"wr-graph__card\">{{ entry.node.label }}</div>\n          }\n          @if (relation) {\n            <span class=\"wr-graph__sr-only\">{{ relation }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrGraph, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrGraph, decorators: [{
             type: Component,
             args: [{ selector: 'wr-graph', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-graph',